/* YSR Kargo — yönetim arayüzü. Derleme adımı yok, düz CSS.
   Kimlik: sevk irsaliyesi/etiket dünyası — laciverte emniyet turuncusu,
   veri alanlarında IBM Plex Mono, arayüzde Archivo. */

:root {
    --bg: #edf0f4;
    --panel: #ffffff;
    --ink: #1a2332;
    --ink-soft: #3d4859;
    --muted: #647080;
    --line: #d9dee6;
    --line-soft: #e7ebf0;
    --navy: #16202f;
    --navy-2: #1f2c3f;
    --signal: #e05a0c;
    --signal-dark: #c04c08;
    --signal-soft: #fdf0e6;
    --link: #29598f;
    --ok: #1e7a46;
    --ok-bg: #e4f3ea;
    --ok-line: #b9dfc8;
    --warn: #8a5c00;
    --warn-bg: #fcf2da;
    --warn-line: #ecd9a4;
    --bad: #b02a25;
    --bad-bg: #fbe9e8;
    --bad-line: #eec2c0;
    --radius: 10px;
    --radius-sm: 8px;
    --font-ui: "Archivo", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-data: "IBM Plex Mono", "SF Mono", Consolas, monospace;
    /* Code 128'i andıran şerit — marka ve okutma ekranı imzası */
    --barcode-strip: repeating-linear-gradient(90deg,
        currentColor 0 2px, transparent 2px 5px,
        currentColor 5px 9px, transparent 9px 12px,
        currentColor 12px 13px, transparent 13px 18px,
        currentColor 18px 21px, transparent 21px 24px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
}

a { color: var(--link); }

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- üst bar ---------- */

.topbar {
    background: var(--navy);
    color: #fff;
    padding: 0 20px 3px;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    /* alt kenarda turuncu barkod şeridi */
    background-image:
        linear-gradient(var(--navy), var(--navy)),
        repeating-linear-gradient(90deg,
            var(--signal) 0 2px, transparent 2px 5px,
            var(--signal) 5px 9px, transparent 9px 12px,
            var(--signal) 12px 13px, transparent 13px 18px,
            var(--signal) 18px 21px, transparent 21px 24px);
    background-size: 100% calc(100% - 3px), 100% 3px;
    background-position: top, bottom;
    background-repeat: no-repeat;
}

.topbar .brand {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.08em;
    margin-right: 24px;
    padding: 14px 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* marka yanındaki barkod işareti */
.topbar .brand::before {
    content: "";
    width: 24px;
    height: 17px;
    color: var(--signal);
    background: var(--barcode-strip);
    flex: 0 0 auto;
}

.topbar-nav { display: contents; }

.topbar a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    padding: 15px 12px;
    display: inline-block;
    font-weight: 500;
    font-size: 13.5px;
    letter-spacing: 0.01em;
    transition: color 120ms ease, background-color 120ms ease;
}

.topbar a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }

.topbar a.active {
    color: #fff;
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--signal);
}

.topbar .spacer { flex: 1; }

.topbar .who {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.72);
    padding: 15px 10px;
}

.topbar .btn {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.9);
    margin: 8px 0;
}

.topbar .btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.45); }

/* dar ekran: menü tek satırda yana kayar */
@media (max-width: 860px) {
    .topbar { padding: 0 12px 3px; }
    .topbar .brand { margin-right: 8px; padding: 10px 0; }
    .topbar-nav {
        display: flex;
        order: 10;
        flex-basis: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -12px;
        padding: 0 6px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .topbar-nav::-webkit-scrollbar { display: none; }
    .topbar-nav a { padding: 11px 10px; white-space: nowrap; }
    .topbar .who { padding: 10px 8px; margin-left: auto; }
}

/* ---------- yerleşim ---------- */

.wrap { max-width: 1400px; margin: 0 auto; padding: 24px 20px 48px; }

@media (max-width: 640px) {
    .wrap { padding: 16px 12px 40px; }
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.page-head h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(22, 32, 47, 0.04);
    overflow: hidden;
}

.panel > h2 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-soft);
    margin: 0;
    padding: 13px 16px 11px;
    border-bottom: 1px solid var(--line-soft);
}

.panel-body { padding: 16px; }

.grid { display: grid; gap: 16px; }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ---------- sayaç kartları ---------- */

.stat {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(22, 32, 47, 0.04);
}

.stat .label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.stat .value {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.15;
    margin-top: 6px;
}

.stat .hint { color: var(--muted); font-size: 12.5px; margin-top: 3px; }

/* ---------- tablo ---------- */

table { width: 100%; border-collapse: collapse; }

th, td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
    font-size: 13.5px;
}

th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    border-bottom: 2px solid var(--ink);
    white-space: nowrap;
    padding-top: 11px;
    padding-bottom: 7px;
}

tbody tr { transition: background-color 100ms ease; }
tbody tr:hover { background: #f5f8fb; }
tfoot td, tfoot th { font-weight: 700; background: #f3f5f8; border-bottom: 0; }

.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }

.mono {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-size: 0.96em;
}

.empty { padding: 36px 16px; text-align: center; color: var(--muted); }

.table-scroll { overflow-x: auto; }

/* ---------- plaka çipi ---------- */

.plate {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 24px;
    padding-right: 8px;
    border: 1.5px solid #2a3546;
    border-radius: 5px;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-data);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    line-height: 1;
    overflow: hidden;
    vertical-align: middle;
    white-space: nowrap;
}

/* soldaki mavi TR bandı */
.plate::before {
    content: "TR";
    align-self: stretch;
    display: flex;
    align-items: center;
    background: #1d50a8;
    color: #fff;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 0 4px;
}

.plate-lg { font-size: 17px; letter-spacing: 0.08em; height: 32px; border-width: 2px; border-radius: 6px; padding-right: 11px; }
.plate-lg::before { font-size: 10px; padding: 0 6px; }

a.plate { text-decoration: none; color: var(--ink); }
a.plate:hover { border-color: var(--signal); }

/* ---------- form ---------- */

label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 5px;
    letter-spacing: 0.01em;
}

input[type=text], input[type=number], input[type=date], input[type=email],
input[type=password], input[type=search], select, textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    background: #fff;
    color: var(--ink);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--signal);
    box-shadow: 0 0 0 3px rgba(224, 90, 12, 0.14);
}

textarea { resize: vertical; min-height: 60px; }

.field { margin-bottom: 14px; }
.field .error { color: var(--bad); font-size: 12px; margin-top: 4px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 160px; }
.row > .narrow { flex: 0 1 120px; }
.row > .auto { flex: 0 0 auto; }

/* ---------- düğme ---------- */

.btn {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn:hover { background: #f1f4f7; border-color: #c6cdd8; }

.btn-primary {
    background: var(--signal);
    border-color: var(--signal);
    color: #fff;
    font-weight: 600;
}

.btn-primary:hover { background: var(--signal-dark); border-color: var(--signal-dark); }

.btn-danger { background: #fff; border-color: var(--bad-line); color: var(--bad); }
.btn-danger:hover { background: var(--bad-bg); border-color: #dfa19e; }

.btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- rozet ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2.5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* durum karesi — koli/kasa göndermesi */
.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 1.5px;
    background: currentColor;
    flex: 0 0 auto;
}

.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-bad { background: var(--bad-bg); color: var(--bad); }
.badge-neutral { background: #e9edf2; color: #4c5a6b; }

/* ---------- uyarı ---------- */

.alert {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    border: 1px solid;
    border-left-width: 4px;
    font-size: 13.5px;
}

.alert-ok { background: var(--ok-bg); border-color: var(--ok-line); border-left-color: var(--ok); color: #14563a; }
.alert-bad { background: var(--bad-bg); border-color: var(--bad-line); border-left-color: var(--bad); color: #8c1f1b; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- sayfalama ---------- */

.pagination-nav { margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pagination-nav .pagination { margin: 0; }
.pagination-info { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.pagination { display: flex; gap: 5px; flex-wrap: wrap; list-style: none; padding: 0; margin: 16px 0 0; }
.pagination li { display: inline-block; }

.pagination a, .pagination span {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.pagination a:hover { border-color: #c6cdd8; background: #f1f4f7; }
.pagination .active span { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.pagination .disabled span { color: #b3bac4; }
.pagination svg { width: 14px; height: 14px; }

/* ---------- barkod okutma kutusu ---------- */

.scan-box {
    background: var(--navy);
    color: #fff;
    padding: 20px 20px 18px;
    border-radius: var(--radius);
    /* üst kenarda turuncu barkod şeridi */
    background-image:
        linear-gradient(var(--navy), var(--navy)),
        repeating-linear-gradient(90deg,
            var(--signal) 0 2px, transparent 2px 5px,
            var(--signal) 5px 9px, transparent 9px 12px,
            var(--signal) 12px 13px, transparent 13px 18px,
            var(--signal) 18px 21px, transparent 21px 24px);
    background-size: 100% calc(100% - 4px), 100% 4px;
    background-position: bottom, top;
    background-repeat: no-repeat;
}

.scan-box label {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.scan-box input {
    font-family: var(--font-data);
    font-size: 24px;
    font-weight: 500;
    padding: 13px;
    letter-spacing: 0.18em;
    text-align: center;
    background: #0e1622;
    border: 1px solid #33415a;
    color: #fff;
    caret-color: var(--signal);
    border-radius: var(--radius-sm);
}

.scan-box input:focus {
    border-color: var(--signal);
    box-shadow: 0 0 0 3px rgba(224, 90, 12, 0.28);
}

.scan-box input::placeholder { color: rgba(255, 255, 255, 0.35); letter-spacing: 0.04em; }

.scan-box .hint { color: rgba(255, 255, 255, 0.55); font-size: 12px; margin-top: 9px; }

.scan-box label .ready {
    float: right;
    font-size: 11px;
    color: #7ee0a5;
    letter-spacing: 0.02em;
    text-transform: none;
}

.scan-box label .ready.busy { color: rgba(255, 255, 255, 0.5); }

/* ---------- giriş ekranı ---------- */

.login-page {
    background: var(--navy);
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.login-wrap { width: min(390px, calc(100vw - 32px)); margin: 11vh auto 40px; }

.login-wrap .brand {
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #fff;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.login-wrap .brand::before, .login-wrap .brand::after {
    content: "";
    width: 30px;
    height: 20px;
    color: var(--signal);
    background: var(--barcode-strip);
}

.login-wrap .tag {
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 26px;
    font-size: 13px;
    letter-spacing: 0.04em;
}

.login-wrap .panel { border: 0; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); }
.login-wrap .panel-body { padding: 22px 22px 20px; }

.login-wrap .hint {
    margin-top: 18px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    line-height: 1.8;
}

.login-wrap .hint .mono { color: rgba(255, 255, 255, 0.8); }

/* ---------- yardımcılar ---------- */

.repeat-row {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-bottom: 12px;
    background: #fafbfc;
}

.repeat-row .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

.repeat-row .head strong {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}

.inline-form { display: inline; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters > div { flex: 0 1 150px; }
.filters > .wide { flex: 1 1 220px; }

.summary-line {
    padding: 10px 16px;
    background: #f3f5f8;
    border-top: 1px solid var(--line-soft);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.summary-line strong { font-weight: 700; }

/* ---------- barkod görselleri ---------- */

.barcode-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.barcode-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 10px;
    text-align: center;
    background: #fff;
}

/* en son kaydedilen parti, listede birikenlerin arasından ayrılsın */
.barcode-card.is-new {
    border-color: var(--signal);
    box-shadow: 0 0 0 1px var(--signal), 0 2px 10px rgba(224, 90, 12, 0.14);
}

.barcode-card .badge { margin-bottom: 6px; }
.barcode-card img { width: 100%; height: 46px; display: block; }

.barcode-card .code {
    font-family: var(--font-data);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin-top: 5px;
}

.barcode-card .desc { font-size: 13px; margin-top: 2px; }
.barcode-card .meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; }

/* satır içi küçük barkod (liste tabloları) */
.barcode-cell { display: block; }
.barcode-cell img { width: 110px; height: 26px; display: block; }

.barcode-cell .code {
    font-family: var(--font-data);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--muted);
}

/* koli detayındaki büyük barkod */
.barcode-large { text-align: center; padding: 6px 0; }
.barcode-large img { width: 100%; max-width: 420px; height: 80px; }

.barcode-large .code {
    font-family: var(--font-data);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.28em;
    margin-top: 4px;
}

/* ---------- toplu seçim (koli listesi) ---------- */

th.tick, td.tick { width: 34px; text-align: center; }
th.tick input, td.tick input { width: auto; margin: 0; accent-color: var(--signal); }

input[type=checkbox], input[type=radio] { accent-color: var(--signal); }

.select-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: var(--signal-soft);
    border-bottom: 1px solid #f2d4bc;
    font-size: 13px;
}

/* ---------- barkod okutma sesi ---------- */

.scan-sound { margin-top: 10px; }
.scan-sound .btn { opacity: 0.85; }

/* ---------- barkod okutma sonuçları ---------- */

.scan-results { display: grid; gap: 10px; }

.scan-card {
    border: 1px solid var(--line);
    border-left: 4px solid var(--warn);
    border-radius: var(--radius-sm);
    padding: 13px 15px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(22, 32, 47, 0.04);
}

.scan-card.loaded { border-left-color: var(--ok); }
.scan-card.missing { border-left-color: var(--bad); background: var(--bad-bg); }
.scan-card.is-latest { box-shadow: 0 0 0 2px rgba(224, 90, 12, 0.3); }

.scan-card .sr-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.scan-card .sr-head img { width: 190px; height: 42px; flex: 0 0 auto; }
.scan-card .sr-title { flex: 1 1 240px; min-width: 0; }

.scan-card .sr-title .code {
    font-family: var(--font-data);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
}

.scan-card .sr-title .desc { font-size: 15px; margin-top: 2px; }
.scan-card .sr-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }

.scan-card .sr-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 4px 16px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
    font-size: 13px;
}

.scan-card .sr-field { display: flex; gap: 6px; min-width: 0; }
.scan-card .sr-field .k { color: var(--muted); flex: 0 0 78px; }
.scan-card .sr-field .v { min-width: 0; word-break: break-word; }
.scan-card .sr-actions { margin-top: 10px; }