/* =================================================================================================================
   PandaPOS TERMINAL — raf basinda 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);
    --tbar: 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; }
.boot__logo { width: 180px; }
.boot__noscript { padding: 24px; text-align: center; }

/* --- Ust serit --- */
.tbar {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 10px;
    height: calc(var(--tbar) + var(--safe-top)); padding: var(--safe-top) 10px 0;
    background: var(--panda-surface); border-bottom: 1px solid var(--panda-border);
}
.tbar__logo { height: 22px; }
.tbar__title { flex: 1; min-width: 0; display: grid; }
.tbar__title strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbar__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); }

/* --- Terminale ozgu --- */

.tsheet { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; background: rgba(0,0,0,.5); }
.tsheet__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; }
.tsheet__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;
}
.tsheet__item:hover { background: var(--panda-surface-2); }
.tsheet__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%); }

/* --- Ana ekran: dort is --- */
.ttiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ttile {
    display: grid; align-content: start; gap: 4px; min-height: 120px; padding: 14px; 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);
}
.ttile strong { font-size: 17px; }
.ttile small { color: var(--panda-text-muted); font-size: 12px; }
.ttile:hover:not(:disabled) { border-color: var(--panda-primary); }
.ttile--off, .ttile:disabled { opacity: .55; cursor: default; }
.ttile__lock { margin-top: 4px; justify-self: start; padding: 2px 8px; border-radius: var(--panda-radius-pill); background: var(--panda-surface-3); font-size: 10px; font-weight: 700; }

/* --- Okutma seridi --- */
.tscan { display: grid; grid-template-columns: 1fr 48px; gap: 8px; margin-bottom: 10px; }
.tscan__cam {
    grid-column: 1 / -1; min-height: 56px; 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;
}
.tscan__find { border: 1px solid var(--panda-border-strong); border-radius: var(--panda-radius-md); background: var(--panda-surface); color: var(--panda-text); cursor: pointer; }

/* --- Satirlar --- */
.tlines { display: grid; gap: 6px; margin-bottom: 12px; }
.tline { display: grid; grid-template-columns: 1fr auto 44px; align-items: center; gap: 8px; padding: 10px 12px;
    border: 1px solid var(--panda-border); border-radius: var(--panda-radius-md); background: var(--panda-surface); }
.tline__main { min-width: 0; display: grid; gap: 2px; }
.tline__main strong { font-size: 15px; }
.tline__main small { font-size: 12px; color: var(--panda-text-muted); }
.tline__qty {
    display: grid; justify-items: center; min-width: 74px; min-height: 48px; padding: 0 10px; cursor: pointer;
    border: 1px solid var(--panda-primary); border-radius: var(--panda-radius-md);
    background: color-mix(in srgb, var(--panda-primary) 14%, var(--panda-surface)); color: var(--panda-text);
    font-size: 18px; font-weight: var(--panda-weight-bold);
}
.tline__qty small { font-size: 10px; font-weight: 400; color: var(--panda-text-muted); }

/* --- Alt blok --- */
.tfoot { position: sticky; bottom: 0; display: grid; gap: 8px; padding: 10px 0 calc(10px + var(--safe-bottom)); background: var(--panda-bg); }
.tfoot__sum { display: flex; align-items: baseline; justify-content: space-between; color: var(--panda-text-muted); font-size: 13px; }
.tfoot__sum b { color: var(--panda-text); font-size: 16px; }
.tsend {
    min-height: 56px; 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: 17px; font-weight: var(--panda-weight-bold); cursor: pointer;
}
.tsend:disabled { opacity: .45; }

/* --- Urun bulma --- */
.tpick { display: grid; gap: 6px; max-height: 50vh; overflow: auto; margin-top: 10px; }
.tpick__item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 14px; cursor: pointer;
    border: 1px solid var(--panda-border); border-radius: var(--panda-radius-md); background: var(--panda-surface); color: var(--panda-text); text-align: left;
}
.tpick__item span { display: grid; }
.tpick__item small { color: var(--panda-text-muted); font-size: 12px; }

/* =================================================================================================================
   RAF ETIKETI: musterinin fiyati okudugu yer. Ad ve fiyat iri, kod ve tarih kucuk; A4'e 24 etiket.
   ================================================================================================================= */
#label-area { display: none; }

@media print {
    @page { size: A4; margin: 8mm; }
    body > *:not(#label-area) { display: none !important; }

    #label-area {
        display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 4mm;
        color: #000; background: #fff; font-family: "Segoe UI", system-ui, sans-serif;
    }
    .label { break-inside: avoid; border: 1px dashed #999; border-radius: 2mm; padding: 3mm; height: 32mm; display: grid; align-content: space-between; }
    .label__name { font-size: 11pt; font-weight: 700; line-height: 1.2; max-height: 2.6em; overflow: hidden; }
    .label__price { font-size: 26pt; font-weight: 800; line-height: 1; }
    .label__price span { font-size: 11pt; margin-left: 2mm; }
    .label__foot { display: flex; justify-content: space-between; gap: 2mm; font-size: 7pt; color: #333; }
}