/* =================================================================================================================
   PandaPOS GARSON — telefon icin.
   Kasa ekrani masaustu icin tasarlandi; burasi TEK EL icin: dokunma hedefleri 48 px'ten kucuk degil, en sik
   yapilan is (urun ekle, onayla) basparmagin ulastigi yerde, liste yukarida.
   ================================================================================================================= */

html {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --wbar: 56px;
    height: 100%;
}

body {
    margin: 0; height: 100%; overflow: hidden;
    background: var(--panda-bg); color: var(--panda-text);
    font-family: var(--panda-font-family); font-size: 15px;
    -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}

/* Dugme ve kutular yazi tipini sayfadan alir; yoksa tarayicinin kendi yazisi (Times) cikar. */
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.panda-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.panda-icon--small { width: 16px; height: 16px; flex-basis: 16px; }

/* Dokunmatikte 16 px altindaki yazi kutusu iOS'ta sayfayi yakinlastirir. */
input, select, textarea, .panda-input { font-size: 16px; }

#app { height: 100%; }

.boot { height: 100%; display: grid; place-items: center; gap: 16px; align-content: center; }
.boot__logo { width: 180px; }
.boot__step { margin: 0; color: var(--panda-text-muted); font-size: 13px; }
.boot__noscript { padding: 24px; text-align: center; }

/* --- Bekleme gostergeleri ---
   Ustteki ince cubuk her sunucu isinde gorunur: garson ekranin takildigini dusunup ayni siparisi iki kez
   girmesin. Iskelet kutular da ilk yuklemede masalarin yerini tutar. */
.wprog {
    position: fixed; top: var(--safe-top); left: 0; right: 0; height: 3px; z-index: 40;
    overflow: hidden; opacity: 0; transition: opacity .15s; pointer-events: none;
    background: color-mix(in srgb, var(--panda-primary) 22%, transparent);
}
.wprog--on { opacity: 1; }
.wprog::after {
    content: ''; position: absolute; inset: 0; width: 40%;
    background: var(--panda-primary); border-radius: 3px; animation: wprog 1.1s ease-in-out infinite;
}
@keyframes wprog { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

.wskel { border-radius: var(--panda-radius-lg); background: var(--panda-surface); animation: wskel 1.2s ease-in-out infinite; }
@keyframes wskel { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
    .wprog::after, .wskel { animation: none; }
}

/* --- Ust serit --- */
.wbar {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 10px;
    height: calc(var(--wbar) + var(--safe-top)); padding: var(--safe-top) 10px 0;
    background: var(--panda-surface); border-bottom: 1px solid var(--panda-border);
}
.wbar__logo { height: 22px; }
.wbar__title { flex: 1; min-width: 0; display: grid; }
.wbar__title strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbar__title small { color: var(--panda-text-muted); font-size: 12px; }

.icon-btn {
    display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
    border: 0; border-radius: var(--panda-radius-md); background: transparent; color: var(--panda-text); cursor: pointer;
}
.icon-btn:hover { background: var(--panda-surface-2); }

/* --- Plan --- */
.wmain { height: calc(100% - var(--wbar) - var(--safe-top)); overflow: auto; padding: 12px 12px calc(84px + var(--safe-bottom)); }

.wsum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; color: var(--panda-text-muted); }
.wsum b { color: var(--panda-text); font-size: 15px; }

.wareas, .wseats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; scrollbar-width: none; }
.wareas::-webkit-scrollbar, .wseats::-webkit-scrollbar { display: none; }

.wchip {
    flex: 0 0 auto; min-height: 38px; padding: 0 14px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--panda-border); border-radius: var(--panda-radius-pill);
    background: var(--panda-surface); color: var(--panda-text-soft); font-size: 14px;
}
.wchip--on { border-color: var(--panda-primary); background: color-mix(in srgb, var(--panda-primary) 16%, var(--panda-surface)); color: var(--panda-text); }
.wchip--add { border-style: dashed; }

.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.wtable {
    display: grid; align-content: start; gap: 2px; min-height: 104px; padding: 12px; text-align: left; cursor: pointer;
    border: 1px solid var(--panda-border); border-radius: var(--panda-radius-lg); background: var(--panda-surface); color: var(--panda-text);
}
.wtable__name { font-size: 17px; font-weight: var(--panda-weight-bold); }
.wtable__free { color: var(--panda-text-muted); font-size: 13px; }
.wtable__total { font-size: 22px; font-weight: var(--panda-weight-bold); color: var(--panda-primary); }
.wtable__meta { font-size: 11px; color: var(--panda-text-muted); }
.wtable__flag { margin-top: 4px; justify-self: start; padding: 2px 8px; border-radius: var(--panda-radius-pill); background: #ffb300; color: #1f1300; font-size: 10px; font-weight: 700; }
.wtable__flag--bill { background: var(--panda-info, #3d8bff); color: #fff; }
.wtable--busy { border-color: var(--panda-primary); background: color-mix(in srgb, var(--panda-primary) 10%, var(--panda-surface)); }
.wtable--unsent { border-color: #ffb300; }
.wtable--bill { border-color: var(--panda-info, #3d8bff); }

.wempty { padding: 32px 8px; text-align: center; color: var(--panda-text-muted); }

/* --- Garson cagrilari (QR menuden) --- */
.wbell { position: relative; }
.wbell__badge {
    position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px;
    display: grid; place-items: center; border-radius: var(--panda-radius-pill);
    background: var(--panda-danger); color: #fff; font-size: 11px; font-weight: 700;
}

.wcalls {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; margin-bottom: 10px; padding: 0 12px; cursor: pointer; text-align: left;
    border: 1px solid #ffb300; border-radius: var(--panda-radius-lg); color: var(--panda-text);
    background: color-mix(in srgb, #ffb300 16%, var(--panda-surface));
    animation: wcall 1.6s ease-in-out infinite;
}
.wcalls__text { flex: 1; min-width: 0; display: grid; }
.wcalls__text small { color: var(--panda-text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes wcall { 0%, 100% { border-color: #ffb300; } 50% { border-color: color-mix(in srgb, #ffb300 35%, transparent); } }

.wcall-list { display: grid; gap: 8px; max-height: 60vh; overflow: auto; }
.wcall { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--panda-radius-md); background: var(--panda-bg); }
.wcall__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wcall__main small { color: var(--panda-text-muted); font-size: 12px; }
.wcall__note { color: #ffb300 !important; }
.wcall--done { opacity: .55; }

/* --- Gorunum ayari --- */
.wview { display: grid; gap: 14px; }
.wview .wgrid { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .wcalls { animation: none; }
}

.wfab {
    position: fixed; right: 16px; bottom: calc(16px + var(--safe-bottom)); z-index: 6;
    display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px;
    border: 0; border-radius: var(--panda-radius-pill); background: var(--panda-primary); color: #fff;
    font-size: 16px; font-weight: var(--panda-weight-bold); box-shadow: var(--panda-shadow-lg); cursor: pointer;
}

/* --- Adisyon --- */
.worder { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-rows: auto auto 1fr auto; background: var(--panda-bg); }

.wlines { overflow: auto; padding: 0 12px 12px; }
.wline { display: grid; grid-template-columns: 1fr auto 44px; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--panda-border); }
.wline__main { min-width: 0; display: grid; gap: 2px; }
.wline__main strong { font-size: 15px; }
.wline__main small { font-size: 12px; color: var(--panda-text-muted); }
.wline__note { color: #ffb300 !important; }
.wline__total { font-size: 16px; font-weight: var(--panda-weight-bold); }

.wseats { padding: 8px 12px 0; margin: 0; }

.wfoot { padding: 10px 12px calc(10px + var(--safe-bottom)); border-top: 1px solid var(--panda-border); background: var(--panda-surface); display: grid; gap: 8px; }
.wfoot__total { display: flex; align-items: baseline; justify-content: space-between; }
.wfoot__total span { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--panda-text-muted); }
.wfoot__total b { font-size: 24px; }
.wfoot__actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }

.wsend {
    min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: var(--panda-radius-md); background: var(--panda-success); color: #08210f;
    font-size: 16px; font-weight: var(--panda-weight-bold); cursor: pointer;
}
.wsend:disabled { opacity: .45; }

.wadd {
    min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: var(--panda-radius-md); background: var(--panda-primary); color: #fff;
    font-size: 16px; font-weight: var(--panda-weight-bold); cursor: pointer;
}

/* --- Urun secimi --- */
.wpicker { display: grid; gap: 10px; }

/* Arama ve kategoriler yukarida sabit durur; liste altlarinda kayar. */
.wpicker__head { position: sticky; top: 0; z-index: 2; display: grid; gap: 8px; padding-bottom: 6px; background: var(--panda-surface); }

.wsearch {
    display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px 0 12px; color: var(--panda-text-muted);
    border: 1px solid var(--panda-border); border-radius: var(--panda-radius-md); background: var(--panda-bg);
}
.wsearch:focus-within { border-color: var(--panda-primary); }
.wsearch__input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--panda-text); }

/* Kategori seridi: kategori cok olunca yatay kayar, secili olan kendiliginden ortaya gelir. */
.wtabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.wtabs::-webkit-scrollbar { display: none; }
.wtab {
    flex: 0 0 auto; min-height: 40px; padding: 0 14px; cursor: pointer; white-space: nowrap;
    border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--panda-text-muted); font-size: 14px;
}
.wtab--on { color: var(--panda-text); border-bottom-color: var(--panda-primary); font-weight: var(--panda-weight-bold); }

.wpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 52vh; overflow: auto; }
.wpick__item {
    display: grid; align-content: space-between; gap: 6px; min-height: 78px; padding: 10px 12px; cursor: pointer; text-align: left;
    border: 1px solid var(--panda-border); border-radius: var(--panda-radius-md); background: var(--panda-surface); color: var(--panda-text);
}
.wpick__item:hover { border-color: var(--panda-primary); }
.wpick__name { font-size: 14px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wpick__price { font-size: 16px; font-weight: var(--panda-weight-bold); color: var(--panda-primary); }
.wpick__flag { justify-self: start; padding: 1px 7px; border-radius: var(--panda-radius-pill); background: var(--panda-surface-2); color: var(--panda-text-muted); font-size: 10px; }
.wpick .wempty { grid-column: 1 / -1; }

/* --- Porsiyon, ozellik, adet, not --- */
.wextras { display: grid; gap: 12px; }
.wextras [data-extras] { display: grid; gap: 12px; }
.wopts { display: flex; flex-wrap: wrap; gap: 6px; }
.wreq { color: #ffb300; }
.wnotes { display: flex; flex-wrap: wrap; gap: 6px; }
.wnotes .wchip { min-height: 34px; padding: 0 12px; font-size: 13px; }
.wextras__add { flex: 1; min-height: 50px; }

.wcount { display: flex; align-items: center; gap: 4px; }
.wcount b { min-width: 42px; text-align: center; font-size: 20px; }
.wcount__btn {
    width: 44px; height: 44px; cursor: pointer; font-size: 22px; line-height: 1;
    border: 1px solid var(--panda-border); border-radius: var(--panda-radius-md); background: var(--panda-surface); color: var(--panda-text);
}

/* --- Alt sayfa (menu) --- */
.wsheet { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; background: rgba(0,0,0,.5); }
.wsheet__card { width: 100%; display: grid; gap: 4px; padding: 12px 12px calc(12px + var(--safe-bottom)); background: var(--panda-surface); border-radius: 16px 16px 0 0; }
.wsheet__item {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; cursor: pointer;
    border: 0; border-radius: var(--panda-radius-md); background: transparent; color: var(--panda-text); font-size: 16px; text-align: left;
}
.wsheet__item:hover { background: var(--panda-surface-2); }
.wsheet__item--danger { color: var(--panda-danger); }

/* --- Giris ekrani (kasadakiyle ayni siniflar) --- */
.auth { min-height: 100%; display: grid; place-items: center; padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom)); }
.auth__card { width: min(420px, 100%); display: grid; gap: 14px; padding: 24px; border-radius: var(--panda-radius-xl); background: var(--panda-surface); border: 1px solid var(--panda-border); }
.auth__logo { width: 150px; justify-self: center; }
.auth__title { margin: 0; font-size: var(--panda-font-2xl); }
.auth__lead { margin: 0; color: var(--panda-text-soft); line-height: 1.5; }
.auth__submit { height: 50px; font-size: 16px; }
.auth__foot { margin: 0; color: var(--panda-text-muted); font-size: var(--panda-font-sm); }
.branch-list { display: grid; gap: 8px; }
.branch-list .panda-button { min-height: 52px; justify-content: flex-start; gap: 10px; }
.input-affix { position: relative; }
.input-affix .panda-input { padding-right: 46px; }
.input-affix .icon-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }