/* =========================
   WebPanelEtiz1e - Site CSS
   ========================= */

/* ----- Theme ----- */
:root {
    --bg0: #0b1220;
    --bg1: #0a1324;
    --glass: rgba(255,255,255,.06);
    --glass2: rgba(255,255,255,.03);
    --panel: rgba(15,27,50,.78);
    --panel2: rgba(12,22,43,.70);
    --line: rgba(255,255,255,.10);
    --text: #eaf0ff;
    --muted: #93a4c7;
    --radius: 18px;
    --radius2: 14px;
    --shadow: 0 16px 45px rgba(0,0,0,.35);
    /* semantic accents */
    --a-blue: #63b3ff;
    --a-blue2: #4299e1;
   --c-tl: #63b3ff; /* money (mavi) */
    --c-kg: #2ee59d; /* weight */
    --c-adet: #63b3ff; /* count */
    --c-profit: #ffb86b; /* profit */
    --c-pct: #ffd166; /* percent */

    --table-head: rgba(10,18,34,.92);
}

/* ----- Base ----- */
html, body {
    height: 100%;
}

body {
    margin: 0;
    color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: radial-gradient(1200px 700px at 15% -10%, rgba(86,140,255,.18), transparent 55%), radial-gradient(1000px 650px at 90% 5%, rgba(255,180,90,.14), transparent 60%), linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* Layout main padding */
main {
    padding: 0;
}

/* Locked: only blur page content (overlay remains crisp) */
body.locked .page {
    filter: blur(10px);
    pointer-events: none;
    user-select: none;
}

/* ----- Page Container ----- */
.page {
    max-width: none !important; /* 1600 sınırını kaldır */
    width: 100%;
    margin: 0 auto;
    padding: 18px 18px 26px; /* istersen 12px’e düşür */
    box-sizing: border-box;
}
/* =========================
   TOPBAR
   ========================= */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 12px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--glass), var(--glass2));
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

/* Brand group */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 360px;
}

/* ✅ FIX: Logo constraints to avoid overflow */
.logo {
    display: block;
    width: auto;
    height: auto;
    max-height: 56px;
    max-width: 160px;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
}

.logo-feyz {
    max-height: 56px;
    max-width: 180px;
}

.logo-etiz {
    max-height: 46px;
    max-width: 110px;
    margin-left: 8px;
}

.title .h1 {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .2px;
    line-height: 1.1;
}

.title .sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--muted);
}

/* =========================
   CONTROLS ROW
   ========================= */
.controls-row {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.field {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius2);
    padding: 10px 12px;
    min-height: 58px;
    box-sizing: border-box;
}

    .field label {
        display: block;
        font-size: 12px;
        color: rgba(147,164,199,.95);
        margin-bottom: 6px;
    }

    .field input {
        width: 210px;
        max-width: 100%;
        background: rgba(0,0,0,.20);
        border: 1px solid rgba(255,255,255,.12);
        color: var(--text);
        padding: 10px 10px;
        border-radius: 12px;
        outline: none;
        box-sizing: border-box;
    }

        .field input:focus {
            border-color: rgba(99,179,255,.55);
            box-shadow: 0 0 0 3px rgba(99,179,255,.12);
        }

.hint {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: rgba(147,164,199,.80);
}

/* Checkbox */
.checkbox-field .chk {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 6px;
}

.checkbox-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--a-blue);
}

.checkbox-field.disabled {
    opacity: .55;
    pointer-events: none;
}

/* Button */
.btn {
    border: 0;
    cursor: pointer;
    font-weight: 900;
    border-radius: var(--radius2);
    white-space: nowrap;
}

.btn-primary {
    height: 58px;
    padding: 0 18px;
    color: #fff;
    background: linear-gradient(135deg, rgba(99,179,255,.95), rgba(66,153,225,.85));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 26px rgba(66,153,225,.22);
}

    .btn-primary:hover {
        filter: brightness(1.06);
    }

    .btn-primary:active {
        transform: translateY(1px);
    }

/* =========================
   KPI GRID
   ========================= */
.kpis {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

.kpi {
    grid-column: span 3;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

    .kpi::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: rgba(255,255,255,.14);
    }

.kpi-title {
    font-size: 12px;
    color: rgba(147,164,199,.95);
    letter-spacing: .2px;
}

.kpi-value {
    margin-top: 6px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .2px;
}

.kpi .unit {
    font-size: 12px;
    color: rgba(147,164,199,.85);
    margin-left: 6px;
    font-weight: 700;
}

/* KPI semantic classes */
.kpi.tl::before {
    background: var(--c-tl);
}

.kpi.kg::before {
    background: var(--c-kg);
}

.kpi.adet::before {
    background: var(--c-adet);
}

.kpi.profit::before {
    background: var(--c-profit);
}

.kpi.pct::before {
    background: var(--c-pct);
}

.kpi.tl .kpi-value {
    color: var(--c-tl);
}

.kpi.kg .kpi-value {
    color: var(--c-kg);
}

.kpi.adet .kpi-value {
    color: var(--c-adet);
}

.kpi.profit .kpi-value {
    color: var(--c-profit);
}

.kpi.pct .kpi-value {
    color: var(--c-pct);
}

/* KPI responsive */
@media (max-width: 1300px) {
    .kpi {
        grid-column: span 4;
    }
}

@media (max-width: 900px) {
    .kpi {
        grid-column: span 6;
    }
}

@media (max-width: 560px) {
    .topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .brand {
        min-width: 0;
    }

    .controls-row {
        justify-content: flex-start;
    }

    .kpi {
        grid-column: span 12;
    }
}

/* =========================
   CARD + TABLE
   ========================= */
.card {
    margin-top: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px 10px 12px;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 6px 12px;
}

.card-title {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .2px;
}

.chip {
    font-size: 12px;
    color: rgba(234,240,255,.92);
    background: rgba(99,179,255,.10);
    border: 1px solid rgba(99,179,255,.22);
    padding: 8px 10px;
    border-radius: 999px;
}

/* Table wrapper */
.table-wrap {
    overflow: auto;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.16);
}

/* Table */
.grid {
    width: 100% !important; /* container’ı doldursun */
    table-layout: auto;
    min-width: 1600px; /* çok kolon varsa 1050 yetmez */
}

    .grid thead th {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--table-head);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255,255,255,.12);
        padding: 12px 12px;
        font-size: 12px;
        color: rgba(234,240,255,.92);
        text-align: left;
        white-space: nowrap;
    }

    .grid tbody td {
        padding: 11px 12px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        font-size: 13px;
        color: rgba(234,240,255,.92);
        white-space: nowrap;
    }

    .grid tbody tr:nth-child(odd) {
        background: rgba(255,255,255,.02);
    }

    .grid tbody tr:hover {
        background: rgba(99,179,255,.07);
    }

    /* Alignments */
    .grid td.num,
    .grid td.money,
    .grid td.brut,
    .grid td.adet {
        text-align: right;
    }

    .grid td:first-child {
        font-weight: 900;
        color: rgba(234,240,255,.96);
    }

/* semantic values */
.green-text {
    color: var(--c-kg);
    font-weight: 900;
}

.brut {
    color: var(--c-profit);
    font-weight: 900;
}

.adet {
    color: var(--c-adet);
    font-weight: 900;
}

.muted {
    margin-top: 10px;
    color: rgba(147,164,199,.95);
    padding: 6px 6px 0;
}

/* =========================
   LOCK OVERLAY
   ========================= */
.lock-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5,10,18,.62);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.lock-box {
    width: min(380px, 92vw);
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    padding: 18px 18px 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.lock-title {
    font-size: 18px;
    font-weight: 900;
}

.lock-sub {
    color: rgba(147,164,199,.95);
    margin: 6px 0 12px;
    font-size: 12px;
}

.lock-input {
    width: 100%;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.14);
    color: var(--text);
    padding: 12px 12px;
    border-radius: 14px;
    outline: none;
    box-sizing: border-box;
}

    .lock-input:focus {
        border-color: rgba(99,179,255,.55);
        box-shadow: 0 0 0 3px rgba(99,179,255,.12);
    }

.lock-btn {
    width: 100%;
    margin-top: 12px;
    height: 46px;
    border-radius: 14px;
    font-weight: 900;
}

.lock-error {
    margin-top: 10px;
    color: var(--c-tl);
    font-weight: 900;
    font-size: 12px;
}
/* =========================
   Premium color accents
   (append to site.css)
   ========================= */

/* 1) Daha zengin arkaplan ve genel kontrast */
:root {
    --glow-blue: 0 0 0 3px rgba(99,179,255,.10), 0 18px 60px rgba(66,153,225,.18);
    --glow-tl: 0 0 0 3px rgba(255,107,107,.10), 0 18px 60px rgba(255,107,107,.12);
    --glow-kg: 0 0 0 3px rgba(46,229,157,.10), 0 18px 60px rgba(46,229,157,.12);
    --glow-profit: 0 0 0 3px rgba(255,184,107,.10), 0 18px 60px rgba(255,184,107,.12);
    --glow-adet: 0 0 0 3px rgba(99,179,255,.10), 0 18px 60px rgba(99,179,255,.12);
    --glow-pct: 0 0 0 3px rgba(255,209,102,.10), 0 18px 60px rgba(255,209,102,.10);
    --soft: rgba(255,255,255,.04);
    --soft2: rgba(255,255,255,.02);
}

/* 2) Topbar daha şık + hafif highlight */
.topbar {
    background: radial-gradient(900px 120px at 15% 0%, rgba(99,179,255,.10), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

/* Kontrol alanları: hover ile canlılaşsın */
.field {
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

    .field:hover {
        border-color: rgba(99,179,255,.22);
        background: rgba(255,255,255,.05);
    }

/* Hesapla butonu: daha premium */
.btn-primary {
    position: relative;
    overflow: hidden;
}

    .btn-primary::after {
        content: "";
        position: absolute;
        top: -120%;
        left: -40%;
        width: 60%;
        height: 320%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
        transform: rotate(20deg);
        transition: left .45s ease;
    }

    .btn-primary:hover::after {
        left: 120%;
    }

/* 3) KPI kartlarını “renkli şerit + glow” ile premium yap */
.kpi {
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

    .kpi:hover {
        transform: translateY(-2px);
        border-color: rgba(255,255,255,.14);
    }

/* KPI içi değer daha güçlü */
.kpi-value {
    font-size: 22px;
    letter-spacing: .15px;
}

/* Semantik glow’lar */
.kpi.tl:hover {
    box-shadow: var(--shadow), var(--glow-tl);
}
.kpi.fire:hover {
    box-shadow: var(--shadow), var(--glow-tl);
}
.kpi.kg:hover {
    box-shadow: var(--shadow), var(--glow-kg);
}

.kpi.profit:hover {
    box-shadow: var(--shadow), var(--glow-profit);
}

.kpi.adet:hover {
    box-shadow: var(--shadow), var(--glow-adet);
}

.kpi.pct:hover {
    box-shadow: var(--shadow), var(--glow-pct);
}

/* KPI bar daha kalın + gradient */
.kpi::before {
    width: 6px;
    border-radius: 12px;
}

.kpi.tl::before {
    background: linear-gradient(180deg, var(--c-tl), rgba(99,179,255,.22));
}
.kpi.fire::before {
    background: linear-gradient(180deg, rgba(255,107,107,1), rgba(255,107,107,.25));
}
.kpi.kg::before {
    background: linear-gradient(180deg, rgba(46,229,157,1), rgba(46,229,157,.22));
}

.kpi.profit::before {
    background: linear-gradient(180deg, rgba(255,184,107,1), rgba(255,184,107,.22));
}

.kpi.adet::before {
    background: linear-gradient(180deg, rgba(99,179,255,1), rgba(99,179,255,.22));
}

.kpi.pct::before {
    background: linear-gradient(180deg, rgba(255,209,102,1), rgba(255,209,102,.22));
}

/* KPI unit daha okunaklı */
.kpi .unit {
    opacity: .9;
}

/* 4) Tablo başlığında “kolon grubu” vurgusu: ince üst çizgi */
.grid thead th {
    border-top: 1px solid rgba(255,255,255,.08);
}

    /* Kolon bazlı renk ipucu (sadece üst border) */
    .grid thead th.col-kg {
        border-top: 2px solid rgba(46,229,157,.65);
    }

    .grid thead th.col-tl {
        border-top: 2px solid rgba(255,107,107,.65);
    }

    .grid thead th.col-profit {
        border-top: 2px solid rgba(255,184,107,.70);
    }

    .grid thead th.col-adet {
        border-top: 2px solid rgba(99,179,255,.65);
    }

    .grid thead th.col-pct {
        border-top: 2px solid rgba(255,209,102,.70);
    }

/* Body hücrelerinde aynı renklerin daha yumuşak hali */
.grid tbody td.kg {
    color: rgba(46,229,157,.95);
    font-weight: 900;
}

.grid tbody td.tl {
    color: rgba(234,240,255,.94);
    font-weight: 800;
}

.grid tbody td.profit {
    color: rgba(255,184,107,.98);
    font-weight: 900;
}

.grid tbody td.adet {
    color: rgba(99,179,255,.98);
    font-weight: 900;
}

.grid tbody td.pct {
    color: rgba(255,209,102,.98);
    font-weight: 900;
}

/* Satır hover biraz daha belirgin */
.grid tbody tr:hover {
    background: rgba(99,179,255,.085);
}

/* 5) Card başlığında küçük “shine” */
.card {
    background: radial-gradient(900px 180px at 20% 0%, rgba(99,179,255,.08), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

/* 6) Chip daha modern */
.chip {
    background: rgba(99,179,255,.12);
    border-color: rgba(99,179,255,.26);
    box-shadow: 0 10px 26px rgba(66,153,225,.12);
}
.th-fire {
    color: #ffd166;
}

.fire {
    color: #ffd166;
    font-weight: 700;
}
/* =========================
   COUNT COLUMNS BLUE FIX
   ========================= */

/* Sökülen Hayvan kolonu */
.grid tbody td:nth-child(5) {
    color: rgba(99,179,255,.98);
    font-weight: 900;
}

/* Üretilen Kuşbaşı */
.grid tbody td:nth-last-child(2) {
    color: rgba(99,179,255,.98);
    font-weight: 900;
}

/* Üretilen Kıyma */
.grid tbody td:nth-last-child(1) {
    color: rgba(99,179,255,.98);
    font-weight: 900;
}
.kpi.yellow {
    background: rgba(246,201,69,.15);
    border: 1px solid rgba(246,201,69,.45);
    color: #ffd76a;
}
/* ✅ KPI: geniş ekranda 4'lü, daraldıkça 2 ve 1 */
.kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 14px !important;
    width: 100% !important;
}

    /* ✅ ÖNEMLİ: eski grid-column: span 3 kuralını ez */
    .kpis > .kpi {
        grid-column: auto !important; /* veya: span 1 */
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

/* 1200 altı: 2'li */
@media (max-width: 1200px) {
    .kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* 720 altı: 1'li */
@media (max-width: 720px) {
    .kpis {
        grid-template-columns: 1fr !important;
    }
}
/* Günlük özet tablo: semantik renklendirme */
.grid tbody td.kg {
    color: rgba(46,229,157,.95);
    font-weight: 900;
}
/* yeşil */
.grid tbody td.pct {
    color: rgba(255,209,102,.98);
    font-weight: 900;
}
/* sarı */
.grid tbody td.adet {
    color: rgba(99,179,255,.98);
    font-weight: 900;
}
/* mavi */
.grid tbody td.profit {
    color: rgba(255,184,107,.98);
    font-weight: 900;
}
/* fire (kırmızı) */
.grid tbody td.fire {
    color: rgba(255,107,107,.98); /* #ff6b6b */
    font-weight: 900;
}
/* sarı (fire) */
.grid tbody td.money {
    color: rgba(234,240,255,.94);
    font-weight: 800;
}
/* beyaz */
.grid tbody td.brut {
    color: rgba(99,179,255,.98);
    font-weight: 900;
}
/* mavi (brüt kar vurgusu) */

/* Negatif değerler için kırmızı (brüt kar, fire, TL vb.) */
.grid tbody td.neg {
    color: rgba(255,107,107,.98) !important;
    font-weight: 900;
}
.cari {
    color: #63b3ff;
    font-weight: 800;
}
/* =========================
   SEVK TABLOSU - OVERFLOW FIX
   ========================= */

.table-wrap.sevk-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
}

/* Global .grid min-width varsa bunu sevk için ez */
.grid.sevk-grid {
    width: 100% !important;
    min-width: 0 !important; /* ✅ EN KRİTİK */
    table-layout: fixed; /* ✅ taşmayı bitirir */
}

    /* default: sayılar nowrap kalsın */
    .grid.sevk-grid th,
    .grid.sevk-grid td {
        white-space: nowrap;
    }

        /* uzun metin kolonlarında kırılmaya izin ver */
        .grid.sevk-grid td:nth-child(2), /* Çıkış Depo */
        .grid.sevk-grid td:nth-child(3), /* Cari Adı */
        .grid.sevk-grid td:nth-child(7), /* Teslimat Şekli */
        .grid.sevk-grid td:nth-child(8), /* Sevk Depo */
        .grid.sevk-grid td:nth-child(9) /* Gelen */ {
            white-space: normal !important;
            word-break: break-word;
        }

        /* kolonların sabit genişliği (table-layout:fixed için destek) */
        .grid.sevk-grid th:nth-child(1) {
            width: 140px;
        }
        /* Sevk No */
        .grid.sevk-grid th:nth-child(2) {
            width: 140px;
        }
        /* Çıkış Depo */
        .grid.sevk-grid th:nth-child(3) {
            width: 220px;
        }
        /* Cari Adı */
        .grid.sevk-grid th:nth-child(4) {
            width: 90px;
        }
        /* Miktar */
        .grid.sevk-grid th:nth-child(5) {
            width: 70px;
        }
        /* Adet */
        .grid.sevk-grid th:nth-child(6) {
            width: 150px;
        }
        /* Sevk Tarihi */
        .grid.sevk-grid th:nth-child(7) {
            width: 140px;
        }
        /* Teslimat */
        .grid.sevk-grid th:nth-child(8) {
            width: 140px;
        }
        /* Sevk Depo */
        .grid.sevk-grid th:nth-child(9) {
            width: 120px;
        }
        /* Gelen */
        .grid.sevk-grid th:nth-child(10) {
            width: 90px;
        }
        /* Fatura */
        .grid.sevk-grid th:nth-child(11) {
            width: 90px;
        }
        /* İrsaliye */
        .grid.sevk-grid th:nth-child(12) {
            width: 160px;
        }
        /* Durum */
        .grid.sevk-grid th:nth-child(13) {
            width: 140px;
        }
    /* Tutar */

    /* input/select taşmasın */
    .grid.sevk-grid .input,
    .grid.sevk-grid .select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
/* =========================
   SEVK TABLOSU - HORIZONTAL SCROLL FIX (FINAL)
   ========================= */

.table-wrap.sevk-wrap {
    overflow-x: auto; /* ✅ dar ekranda kaydır */
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
/* sadece sevk tablosu */
table.grid.sevk-grid {
    width: 100% !important;
    min-width: 0 !important; /* ✅ .grid min-width:1600'ü ezer */
    table-layout: fixed; /* ✅ taşmayı engeller */
}

    /* hücrelerin taşmasını kır */
    table.grid.sevk-grid th,
    table.grid.sevk-grid td {
        overflow: hidden;
        text-overflow: ellipsis;
    }

        /* uzun metin kolonlarında kırılmaya izin ver */
        table.grid.sevk-grid td:nth-child(2),
        table.grid.sevk-grid td:nth-child(3),
        table.grid.sevk-grid td:nth-child(7),
        table.grid.sevk-grid td:nth-child(8),
        table.grid.sevk-grid td:nth-child(9) {
            white-space: normal !important;
            word-break: break-word;
        }

        /* sayı kolonları tek satır kalsın */
        table.grid.sevk-grid td.num {
            white-space: nowrap !important;
        }

    /* input/select taşmasın */
    table.grid.sevk-grid .input,
    table.grid.sevk-grid .select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }