/* ============================================================================
   Varlık Yönetimi — uygulama teması
   Koyu sidebar + kırmızı vurgu. Marka logosu _Sidebar.cshtml içinde <img> ile eklenir.
   ============================================================================ */
:root {
    --app-red: #E30613;
    --app-red-dark: #b70410;
    --app-red-soft: rgba(227, 6, 19, .10);
    --sidebar-bg: #1b1e25;
    --sidebar-bg-2: #16181e;
    --sidebar-fg: #c7ccd6;
    --sidebar-fg-dim: #7f8794;
    --sidebar-hover: #24272f;
    --sidebar-active: rgba(227, 6, 19, .16);
    --content-bg: #f4f5f7;
    --card-bg: #ffffff;
    --border: #e6e8ec;
    --text: #1f2430;
    --text-dim: #6b7280;
    --sidebar-w: 256px;
    --sidebar-w-collapsed: 72px;
    --topbar-h: 60px;
    --radius: 12px;
    --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
    --shadow-md: 0 4px 16px rgba(16,24,40,.08);
}

* { box-sizing: border-box; }

body.app-body {
    margin: 0;
    background: var(--content-bg);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 14px;
}

.app-shell { display: flex; min-height: 100vh; }

/* ---------------- Sidebar ---------------- */
.app-sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
    color: var(--sidebar-fg);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    transition: width .18s ease, flex-basis .18s ease;
    z-index: 30;
}

.app-brand {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    white-space: nowrap;
    overflow: hidden;
}
.brand-logo {
    font-weight: 800;
    letter-spacing: 1.5px;
    font-size: 20px;
    color: #fff;
}
.brand-logo .dot { color: var(--app-red); }
.brand-sub { font-size: 10px; color: var(--sidebar-fg-dim); letter-spacing: 2px; text-transform: uppercase; }
.brand-img { height: 44px; width: auto; display: block; }
.app-shell.collapsed .brand-img { height: 34px; }

.app-nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 0 24px; }
.app-nav::-webkit-scrollbar { width: 6px; }
.app-nav::-webkit-scrollbar-thumb { background: #2f333c; border-radius: 3px; }

.nav-section {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sidebar-fg-dim);
    padding: 18px 22px 8px;
    white-space: nowrap;
}

.nav-link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    color: var(--sidebar-fg);
    text-decoration: none;
    font-size: 13.5px;
    border-left: 3px solid transparent;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.nav-link-item i { font-size: 17px; width: 20px; text-align: center; flex: 0 0 20px; }
.nav-link-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-link-item.active {
    background: var(--sidebar-active);
    color: #fff;
    border-left-color: var(--app-red);
}
.nav-link-item .badge-soon {
    margin-left: auto;
    font-size: 9px;
    background: #2f333c;
    color: var(--sidebar-fg-dim);
    padding: 2px 6px;
    border-radius: 6px;
    letter-spacing: .5px;
}

/* Collapsed */
.app-shell.collapsed .app-sidebar { width: var(--sidebar-w-collapsed); flex-basis: var(--sidebar-w-collapsed); }
.app-shell.collapsed .brand-sub,
.app-shell.collapsed .brand-text,
.app-shell.collapsed .nav-section,
.app-shell.collapsed .nav-link-item span,
.app-shell.collapsed .nav-link-item .badge-soon { display: none; }
.app-shell.collapsed .nav-link-item { justify-content: center; padding: 12px 0; }
.app-shell.collapsed .app-brand { justify-content: center; padding: 0; }

/* ---------------- Main ---------------- */
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
    height: var(--topbar-h);
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 22px;
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar-toggle {
    border: none; background: transparent; cursor: pointer;
    font-size: 20px; color: var(--text-dim); padding: 6px; border-radius: 8px; line-height: 1;
}
.topbar-toggle:hover { background: var(--content-bg); color: var(--text); }
.topbar-title { font-weight: 600; font-size: 15px; }
.topbar-breadcrumb { color: var(--text-dim); font-size: 12.5px; }
.topbar-spacer { flex: 1 1 auto; }

.topbar-search {
    display: flex; align-items: center; gap: 8px;
    background: var(--content-bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 7px 12px; min-width: 240px; color: var(--text-dim);
}
.topbar-search input { border: none; background: transparent; outline: none; width: 100%; font-size: 13px; color: var(--text); }

.topbar-icon-btn {
    position: relative; border: none; background: transparent; cursor: pointer;
    color: var(--text-dim); font-size: 18px; padding: 8px; border-radius: 8px; line-height: 1;
}
.topbar-icon-btn:hover { background: var(--content-bg); color: var(--text); }
.topbar-icon-btn .dot-badge {
    position: absolute; top: 4px; right: 4px; width: 8px; height: 8px;
    background: var(--app-red); border-radius: 50%; border: 2px solid #fff;
}

/* Bildirim sayacı — yalnızca bildirim varken render edilir (bkz. _Layout.cshtml). */
.topbar-icon-btn .count-badge {
    position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--app-red); color: #fff; border: 2px solid #fff; border-radius: 9px;
    font-size: 10px; font-weight: 700; line-height: 13px; text-align: center;
}

/* ---------------- Bildirim listesi ---------------- */
.notif-menu { min-width: 340px; max-width: 400px; padding-bottom: 6px; }
.notif-empty { padding: 14px 16px; color: var(--text-dim); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.notif-empty .bi { color: #1e8e3e; font-size: 15px; }

.notif-head {
    display: flex; align-items: center; gap: 10px; padding: 8px 16px 6px;
    font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px;
}
.notif-clear-all {
    margin-left: auto; border: none; background: transparent; cursor: pointer;
    font-size: 11.5px; font-weight: 600; color: var(--app-red); padding: 0; text-transform: none; letter-spacing: 0;
}
.notif-clear-all:hover { text-decoration: underline; }

/* Satır = bağlantı + kapatma düğmesi. Düğme ayrı bir form olduğu için bağlantının
   İÇİNE konulamaz (iç içe etkileşimli öğe); üstte konumlandırılır. */
.notif-row { position: relative; }
.notif-dismiss { position: absolute; top: 6px; right: 8px; }
.notif-dismiss button {
    border: none; background: transparent; cursor: pointer; padding: 4px;
    color: var(--text-dim); font-size: 10px; line-height: 1; border-radius: 6px;
}
.notif-dismiss button:hover { background: var(--content-bg); color: var(--app-red); }

.notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 30px 10px 16px; white-space: normal; }
.notif-item .notif-ic { font-size: 15px; line-height: 1.35; flex: 0 0 auto; }
.notif-item .notif-ic.danger { color: var(--app-red); }
.notif-item .notif-ic.warn { color: #b06000; }
.notif-title { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.notif-detail { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 1px; }

.topbar-user { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 6px; border-radius: 10px; }
.topbar-user:hover { background: var(--content-bg); }
.user-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--app-red); color: #fff; font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.user-meta { line-height: 1.1; }
.user-meta .name { font-size: 13px; font-weight: 600; }
.user-meta .role { font-size: 11px; color: var(--text-dim); }

/* ---------------- Content ---------------- */
.app-content { padding: 24px; flex: 1 1 auto; }
.page-head { margin-bottom: 20px; display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.page-head .icon-box {
    width: 44px; height: 44px; border-radius: 12px; background: var(--app-red-soft);
    color: var(--app-red); display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.page-head h1 { font-size: 20px; margin: 0; font-weight: 700; }
.page-head p { margin: 2px 0 0; color: var(--text-dim); font-size: 13px; }
.page-head .head-actions { margin-left: auto; display: flex; gap: 10px; }

/* Cards */
.app-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.app-card .card-head {
    padding: 16px 18px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px; font-weight: 600;
}
.app-card .card-body { padding: 18px; }

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 14px;
}
.stat-card .stat-ic {
    width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center;
    justify-content: center; font-size: 22px; flex: 0 0 46px;
}
.stat-ic.red { background: var(--app-red-soft); color: var(--app-red); }
.stat-ic.blue { background: #e8f0fe; color: #1a73e8; }
.stat-ic.green { background: #e6f4ea; color: #1e8e3e; }
.stat-ic.amber { background: #fef7e0; color: #b06000; }
.stat-ic.purple { background: #f3e8fd; color: #7b2fbe; }
.stat-ic.teal { background: #e0f7f5; color: #0a8f83; }
/* Tıklanabilir özet kartı. Gerçek <a href> kullanılır (JS onclick değil): yalnızca böyle
   erişilebilirlik ağacına link olarak girer, klavyeyle odaklanır ve orta tık / yeni sekme çalışır. */
a.stat-card { text-decoration: none; color: inherit; transition: box-shadow .12s, border-color .12s, transform .12s; }
a.stat-card:hover { box-shadow: var(--shadow-md); border-color: #d6dae1; transform: translateY(-1px); }
a.stat-card:focus-visible { outline: 2px solid var(--app-red); outline-offset: 2px; }
a.stat-card .stat-go { margin-left: auto; color: var(--text-dim); font-size: 14px; opacity: .5; transition: opacity .12s; }
a.stat-card:hover .stat-go { opacity: 1; color: var(--app-red); }

/* Grafik kartı başlığındaki "detaya git" bağlantısı. */
.card-head .head-link {
    margin-left: auto; font-size: 12.5px; font-weight: 600; text-decoration: none;
    color: var(--text-dim); display: inline-flex; align-items: center; gap: 4px;
}
.card-head .head-link:hover { color: var(--app-red); }
.card-head .head-link:focus-visible { outline: 2px solid var(--app-red); outline-offset: 2px; border-radius: 4px; }

.stat-card .stat-val { font-size: 24px; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.stat-card .stat-trend { font-size: 11px; margin-top: 3px; }
.trend-up { color: #1e8e3e; }
.trend-flat { color: var(--text-dim); }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } }

/* Placeholder chart box */
.chart-placeholder {
    height: 240px; border-radius: 10px;
    background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 12px, #f3f4f6 12px, #f3f4f6 24px);
    border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); font-size: 13px; text-align: center; padding: 20px;
}

/* Simple list */
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.mini-list li:last-child { border-bottom: none; }
.mini-list .mini-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--content-bg); display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.mini-list .mini-val { margin-left: auto; font-weight: 600; }
.mini-list a { display: flex; align-items: center; gap: 12px; width: 100%; color: var(--text); text-decoration: none; transition: color .12s; }
.mini-list a:hover { color: var(--app-red); }
.mini-list a:hover .mini-ic { background: var(--app-red-soft); color: var(--app-red); }
.mini-list a .chev { margin-left: auto; color: var(--text-dim); font-size: 13px; }

/* Buttons */
.btn-app { background: var(--app-red); border-color: var(--app-red); color: #fff; }
.btn-app:hover { background: var(--app-red-dark); border-color: var(--app-red-dark); color: #fff; }
.badge-soon-inline { font-size: 10px; background: var(--content-bg); color: var(--text-dim); border: 1px solid var(--border); padding: 2px 8px; border-radius: 8px; }

/* ---------------- Toolbar / filtreler ---------------- */
.app-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px 16px; background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0; border-bottom: none;
}
.toolbar-search {
    display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 220px;
    background: var(--content-bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 12px; color: var(--text-dim);
}
.toolbar-search input { border: none; background: transparent; outline: none; width: 100%; font-size: 13px; color: var(--text); }
.app-toolbar .form-select, .app-toolbar .form-control { max-width: 200px; font-size: 13px; }

/* ---------------- Tablo ---------------- */
.app-table-wrap {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius); overflow: hidden;
}
table.app-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.app-table thead th {
    text-align: left; font-weight: 600; color: var(--text-dim); font-size: 11.5px;
    text-transform: uppercase; letter-spacing: .4px; padding: 12px 16px;
    background: #fafbfc; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.app-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.app-table tbody tr:last-child td { border-bottom: none; }
table.app-table tbody tr:hover { background: #fafbfc; }
table.app-table .cell-strong { font-weight: 600; }
table.app-table .cell-dim { color: var(--text-dim); font-size: 12.5px; }

.table-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 12.5px;
}

/* Uzun tablolarda gövdeyi kaydır, başlığı sabit tut (ör. Raporlar).
   tbody'ye display:block vermek sütun hizasını bozduğu için sarmalayıcı + sticky thead kullanılır.
   Yükseklik --table-scroll-h ile sayfa bazında ezilebilir. */
.app-table-scroll { max-height: var(--table-scroll-h, 60vh); overflow: auto; }
.app-table-scroll table.app-table thead th {
    position: sticky; top: 0; z-index: 2;
    /* border-collapse'te sticky başlığın kenarlığı kaydığı için alt çizgi gölgeyle verilir. */
    box-shadow: inset 0 -1px 0 var(--border);
}
.app-table-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.app-table-scroll::-webkit-scrollbar-thumb { background: #d3d7de; border-radius: 4px; }
.app-table-scroll::-webkit-scrollbar-thumb:hover { background: #b9bfc9; }

/* ---------------- Rozetler ---------------- */
.badge-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.badge-pill .bi { font-size: 11px; }
.badge-active { background: #e6f4ea; color: #1e8e3e; }
.badge-passive { background: #fce8e6; color: #c5221f; }
.badge-neutral { background: var(--content-bg); color: var(--text-dim); }
.badge-info { background: #e8f0fe; color: #1a73e8; }
.badge-amber { background: #fef7e0; color: #b06000; }

/* Tutarsız hesaplanmış değer (ör. negatif boş kapasite) — listede sessizce geçmemeli. */
.cap-negative { display: inline-flex; align-items: center; gap: 5px; color: var(--app-red); font-weight: 600; cursor: help; }
.cap-negative .bi { font-size: 12px; }
.badge-purple { background: #f3e8fd; color: #7b2fbe; }

/* ---------------- Satır işlem butonları ---------------- */
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.icon-btn {
    border: 1px solid var(--border); background: #fff; color: var(--text-dim);
    width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center;
    justify-content: center; cursor: pointer; font-size: 14px; transition: all .12s;
}
.icon-btn:hover { background: var(--content-bg); color: var(--text); }
.icon-btn.danger:hover { background: var(--app-red-soft); color: var(--app-red); border-color: var(--app-red); }

/* ---------------- Boş durum ---------------- */
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-dim); }
.empty-state .bi { font-size: 40px; opacity: .5; display: block; margin-bottom: 10px; }

/* ---------------- Modal form ---------------- */
.modal-header.app-modal-head { background: var(--sidebar-bg); color: #fff; border: none; }
.modal-header.app-modal-head .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }

/* Geniş modal düzeni (bkz. ContainerTypes/Index — Tip modalı).
   Alanı çok olan formlar iki sütunda dikeyde aşırı uzuyordu: kimlik alanları 12 sütunlu
   üst blokta toplanır, konu başlıkları (.form-split) yan yana iki bölüme ayrılır. */
.modal-wide { max-width: min(1020px, calc(100vw - 2rem)); }
/* Tek sütun: alan sayısı az olan formlarda (bkz. IssueTypes/Index — Sorun Tipi modalı)
   girdiler yan panelde alt alta dizilir. */
.form-grid.cols-1 { grid-template-columns: 1fr; }
.form-grid.cols-12 { grid-template-columns: repeat(12, 1fr); }
.form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.form-grid > .c2 { grid-column: span 2; }
.form-grid > .c3 { grid-column: span 3; }
.form-grid > .c6 { grid-column: span 6; }
/* Yalnızca hücre boş bırakmak için konan öğeler (bölüm başlığı karşısındaki boşluk,
   ayraç çizgisinin devamı). Tek sütuna inildiğinde anlamsız boşluk/çizgi bırakmasınlar. */
.form-grid > .spacer { min-height: 0; }
/* Alt bölümler yan yana durur ve ikisi de ÜST ızgaranın satırlarını paylaşır (subgrid).
   Bölümler ayrı ızgara olsaydı satır yükseklikleri kendi içeriklerine göre oluşur, soldaki
   Malzeme ile sağdaki Durum farklı hizalara düşerdi. Subgrid desteklenmeyen bir tarayıcıda
   kural yok sayılır: bölümler kendi satırlarını üretir, düzen bozulmaz — yalnızca satır
   hizası garanti edilmez.
   Satır sayısı sayfadan --split-rows ile verilir (varsayılan 4); iki bölümden satırı çok
   olan hangisiyse o yazılır, kısa kalan bölümün son satırları boş kalır. */
.form-split { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--split-rows, 4), auto); gap: 14px 26px; }
.form-split > .form-grid { grid-row: 1 / -1; grid-template-rows: subgrid; }
.form-grid label { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 5px; display: block; }
.form-grid label .req { color: var(--app-red); }
.form-hint { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
/* Hesaplanan bir değer tutarsız ya da hesaplanamaz olduğunda (negatif boş kapasite, mükerrer
   irsaliye, tanımsız birim fiyat) kullanılan vurgu. Form ipucu satırlarında da geçerlidir. */
.cap-error { color: var(--app-red); font-weight: 600; }

/* Karakter sayacı — maxlength taşıyan alanların altında "n / max" gösterir (bkz. js/site.js).
   Tarayıcı maxlength sınırını sessizce keser; sayaç ve taşma uyarısı bu sessiz kaybı görünür kılar. */
.field-counter { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11.5px; color: var(--text-dim); }
.field-counter .fc-msg { color: var(--app-red); font-weight: 600; visibility: hidden; }
.field-counter .fc-msg.show { visibility: visible; }
.field-counter .fc-num { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.field-counter.near .fc-num { color: #b26a00; font-weight: 600; }
.field-counter.full .fc-num { color: var(--app-red); font-weight: 700; }
.form-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); font-weight: 700; grid-column: 1/-1; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ---------------- Yan panel (drawer) modal ----------------
   Alanı çok olan formlar için (bkz. Issues/Index — Sorun modalı): pencere ortadan değil,
   ekranın sağ kenarından tam yükseklikte açılır. Bootstrap'in kendi Modal bileşeni
   kullanılmaya devam eder; yalnızca yerleşim ve giriş animasyonu ezilir, JS tarafı
   (bootstrap.Modal show/hide) aynen çalışır.
   `.modal-dialog-centered` ile BİRLİKTE kullanılmaz — dikey ortalama paneli bozar. */
.modal-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; margin: 0;
    width: min(720px, 100vw); max-width: none; height: 100%;
}
.modal-drawer .modal-content { height: 100%; border: 0; border-radius: 0; overflow: hidden; }
/* Form, başlık/gövde/alt şerit arasında durduğu için gövdenin kaydırılabilmesi ancak
   form da esnek bir sütun olduğunda mümkündür; aksi halde uzun içerik kırpılır. */
.modal-drawer .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.modal-drawer .modal-header, .modal-drawer .modal-footer { flex: 0 0 auto; }
.modal-drawer .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Panel sağdan içeri kayar; Bootstrap'in ölçek/yukarıdan-düşme geçişi bu yerleşime uymaz. */
.modal.fade .modal-drawer { transform: translateX(100%); transition: transform .3s ease-out; }
.modal.show .modal-drawer { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-drawer { transition: none; }
}
/* Dar ekranda panel tüm genişliği kaplar. */
@media (max-width: 575.98px) {
    .modal-drawer { width: 100vw; }
}

/* ============================================================================
   Palet Yönetimi Dashboard
   ============================================================================ */
.dash-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-head h2 { font-size: 17px; font-weight: 700; margin: 0; }
.dash-head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.dash-date {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim);
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px;
}

/* ---- Üst şerit: 5 özet kart ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 18px; }
.kpi-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; box-shadow: var(--shadow-sm); display: flex; align-items: flex-start; gap: 12px;
    text-decoration: none; color: inherit; transition: box-shadow .12s, border-color .12s, transform .12s;
}
.kpi-card:hover { box-shadow: var(--shadow-md); border-color: #d6dae1; transform: translateY(-1px); }
.kpi-card:focus-visible { outline: 2px solid var(--app-red); outline-offset: 2px; }
.kpi-ic {
    width: 40px; height: 40px; border-radius: 10px; flex: 0 0 40px;
    display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.kpi-ic.red { background: var(--app-red-soft); color: var(--app-red); }
.kpi-ic.blue { background: #e8f0fe; color: #1a73e8; }
.kpi-ic.amber { background: #fef7e0; color: #b06000; }
.kpi-ic.teal { background: #e0f7f5; color: #0a8f83; }
.kpi-ic.purple { background: #f3e8fd; color: #7b2fbe; }
.kpi-body { min-width: 0; }
.kpi-label { font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.kpi-val { font-size: 23px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.kpi-val span { font-size: 12px; font-weight: 500; color: var(--text-dim); }
.kpi-trend { font-size: 11.5px; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.trend-down { color: var(--app-red); }

/* ---- Satır düzenleri ----
   Satırdaki tüm kartlar AYNI yükseklikte olur: grid'in varsayılan stretch davranışı korunur
   (align-items: start VERİLMEZ) ve karta sabit bir yükseklik atanır. İçerik sığmazsa kart
   büyümez, gövdesi kendi içinde kaydırılır — böylece satırlar hizalı kalır.
   Yükseklik --card-h ile satır bazında ayarlanabilir. */
.dash-row-3 { display: grid; grid-template-columns: 1.15fr 1.25fr 1fr .9fr; gap: 16px; margin-bottom: 18px; --card-h: 400px; }
.dash-row-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 18px; --card-h: 362px; }
.dash-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; --card-h: 348px; }

.dash-row-3 > .app-card,
.dash-row-2 > .app-card,
.dash-row-4 > .app-card {
    height: var(--card-h);
    display: flex; flex-direction: column;
    overflow: hidden;                 /* köşe yuvarlaklığı kaydırma sırasında bozulmasın */
}

/* Başlık ve alt bilgi sabit kalır; yalnızca gövde kaydırılır.
   min-height:0 olmadan flex çocuk küçülemez ve kaydırma hiç oluşmaz. */
.dash-row-3 > .app-card > .card-head,
.dash-row-2 > .app-card > .card-head,
.dash-row-4 > .app-card > .card-head,
.dash-row-3 > .app-card > .card-foot,
.dash-row-2 > .app-card > .card-foot,
.dash-row-4 > .app-card > .card-foot { flex: 0 0 auto; }

.dash-row-3 > .app-card > .card-body,
.dash-row-2 > .app-card > .card-body,
.dash-row-4 > .app-card > .card-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
}

/* Kaydırılan gövdedeki tablo başlığı sabit kalsın (app-table-scroll ile aynı yaklaşım). */
.dash-row-2 > .app-card > .card-body table.app-table thead th,
.dash-row-4 > .app-card > .card-body table.app-table thead th {
    position: sticky; top: 0; z-index: 2; background: var(--card-bg);
    box-shadow: inset 0 -1px 0 var(--border);
}

/* İnce kaydırma çubuğu — liste tablolarındakiyle aynı. */
.dash-row-3 > .app-card > .card-body::-webkit-scrollbar,
.dash-row-2 > .app-card > .card-body::-webkit-scrollbar,
.dash-row-4 > .app-card > .card-body::-webkit-scrollbar { width: 8px; }
.dash-row-3 > .app-card > .card-body::-webkit-scrollbar-thumb,
.dash-row-2 > .app-card > .card-body::-webkit-scrollbar-thumb,
.dash-row-4 > .app-card > .card-body::-webkit-scrollbar-thumb { background: #d3d7de; border-radius: 4px; }
.dash-row-3 > .app-card > .card-body::-webkit-scrollbar-thumb:hover,
.dash-row-2 > .app-card > .card-body::-webkit-scrollbar-thumb:hover,
.dash-row-4 > .app-card > .card-body::-webkit-scrollbar-thumb:hover { background: #b9bfc9; }

@media (max-width: 1400px) {
    .dash-row-3 { grid-template-columns: 1fr 1fr; }
    .dash-row-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .dash-row-3, .dash-row-2, .dash-row-4 { grid-template-columns: 1fr; }
    /* Tek kolona düşünce sabit yükseklik yer israfı olur; içerik kadar uzasın. */
    .dash-row-3 > .app-card,
    .dash-row-2 > .app-card,
    .dash-row-4 > .app-card { height: auto; max-height: 420px; }
}

.app-card .card-body.p-0 { padding: 0; }

/* Grafiğin kartın boş alanını doldurması için: gövde flex kolon olur, tuval kalan yeri alır.
   Sabit piksel yükseklik verilseydi kart yüksekliği değiştiğinde altta boşluk kalırdı. */
.dash-row-3 > .app-card > .card-body.fill { display: flex; flex-direction: column; overflow: hidden; }
.card-body.fill > .chart-fill { flex: 1 1 auto; min-height: 0; position: relative; }
.app-card .card-foot {
    padding: 10px 16px; border-top: 1px solid var(--border); display: flex; align-items: center;
    gap: 10px; font-size: 12.5px;
}
.app-card .card-foot a {
    margin-left: auto; text-decoration: none; font-weight: 600; color: var(--app-red);
    display: inline-flex; align-items: center; gap: 4px;
}
.chart-empty { padding: 28px 16px; text-align: center; color: var(--text-dim); font-size: 13px; }
.chart-empty .bi { display: block; font-size: 24px; opacity: .5; margin-bottom: 6px; }

/* ---- Halka grafik + açıklama ---- */
.donut-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.donut-canvas { position: relative; width: 150px; height: 150px; flex: 0 0 150px; }
.donut-center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; pointer-events: none;
}
.donut-total { font-size: 19px; font-weight: 700; line-height: 1.1; }
.donut-unit { font-size: 11px; color: var(--text-dim); }
.donut-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 150px; min-width: 150px; }
.donut-legend li { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 3px 0; }
.donut-legend .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.donut-legend .nm { color: var(--text); }
.donut-legend .qt { margin-left: auto; font-weight: 600; white-space: nowrap; }
.donut-legend .pc { color: var(--text-dim); font-weight: 400; }

/* ---- Yatay çubuk listesi (lokasyon stoğu) ---- */
.hbar-list { list-style: none; margin: 0; padding: 0; }
.hbar-list li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; }
.hbar-name { flex: 0 0 105px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { flex: 1 1 auto; height: 14px; background: var(--content-bg); border-radius: 4px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; background: #4285f4; border-radius: 4px; }
.hbar-fill.neg { background: var(--app-red); }
.hbar-val { flex: 0 0 auto; font-weight: 600; min-width: 46px; text-align: right; }

/* ---- Hızlı işlemler ---- */
.quick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.quick-list a {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
    border: 1px solid var(--border); text-decoration: none; color: inherit; transition: background .12s, border-color .12s;
}
.quick-list a:hover { background: var(--content-bg); border-color: #d6dae1; }
.q-ic { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.q-ic.green { background: #e6f4ea; color: #1e8e3e; }
.q-ic.red { background: var(--app-red-soft); color: var(--app-red); }
.q-ic.blue { background: #e8f0fe; color: #1a73e8; }
.q-ic.amber { background: #fef7e0; color: #b06000; }
.q-ic.purple { background: #f3e8fd; color: #7b2fbe; }
.q-t { display: block; font-size: 12.5px; font-weight: 600; }
.q-d { display: block; font-size: 11px; color: var(--text-dim); }

/* ---- Modül önizleme kartları ---- */
.mod-card .card-head { font-size: 13px; }
.mod-no {
    width: 20px; height: 20px; border-radius: 50%; background: var(--app-red); color: #fff;
    font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
table.app-table.mini th, table.app-table.mini td { padding: 7px 12px; font-size: 11.5px; }

/* Palet tipi görseli. Görsel tanımsızsa aynı ölçüde ikon yer tutucusu gösterilir ki
   satır yükseklikleri kaymasın. */
.type-thumb {
    width: 32px; height: 32px; border-radius: 6px; object-fit: cover;
    border: 1px solid var(--border); background: var(--content-bg); display: block;
}
.type-thumb.ph {
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); font-size: 14px;
}

/* ---- Yetenek şeridi ---- */
.feature-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px; box-shadow: var(--shadow-sm);
}
.feature { display: flex; align-items: flex-start; gap: 10px; }
.f-ic { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.f-ic.red { background: var(--app-red-soft); color: var(--app-red); }
.f-ic.blue { background: #e8f0fe; color: #1a73e8; }
.f-ic.amber { background: #fef7e0; color: #b06000; }
.f-ic.teal { background: #e0f7f5; color: #0a8f83; }
.f-ic.purple { background: #f3e8fd; color: #7b2fbe; }
.f-t { display: block; font-size: 13px; font-weight: 700; }
.f-d { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }

/* ---------------- Görsel yükleme (form) ---------------- */
.img-upload { display: flex; align-items: flex-start; gap: 12px; }
.img-upload-fields { flex: 1 1 auto; min-width: 0; }
.img-preview {
    width: 84px; height: 84px; flex: 0 0 84px; border: 1px solid var(--border);
    border-radius: 10px; background: var(--content-bg); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.img-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-preview .ph { color: var(--text-dim); font-size: 22px; }

/* ---------------- Alert / toast ---------------- */
.app-alert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 13px; }
.app-alert.ok { background: #e6f4ea; color: #1e6b30; border: 1px solid #b7e0c1; }
.app-alert.err { background: #fce8e6; color: #a1160f; border: 1px solid #f5c6c2; }

/* Mobile */
@media (max-width: 820px) {
    .app-sidebar { position: fixed; left: 0; transform: translateX(-100%); transition: transform .2s; z-index: 40; }
    .app-shell.mobile-open .app-sidebar { transform: translateX(0); }
    .topbar-search { display: none; }
    .form-grid { grid-template-columns: 1fr; }
    /* Tek sütuna inerken span kuralları kalırsa ızgara örtük sütun üretir; hepsi tam satır olur. */
    .form-grid.cols-12, .form-grid.cols-4 { grid-template-columns: 1fr; }
    .form-grid > .c2, .form-grid > .c3, .form-grid > .c6 { grid-column: 1 / -1; }
    .form-grid > .spacer { display: none; }
    /* Bölümler alt alta inince paylaşılan satır kalmaz; subgrid bağı çözülür. */
    .form-split { grid-template-columns: 1fr; grid-template-rows: none; }
    .form-split > .form-grid { grid-row: auto; grid-template-rows: none; }
}