@charset "UTF-8";
/* ============================================================================
   Lauritz Knudsen — Drive Selection Admin Panel
   \static\assets\css\app.css   ·   Design system + layout + components
   ----------------------------------------------------------------------------
   Yaha sirf styling hai. Colour / spacing change karna ho to neeche
   ":root" wale variables badal do — poore panel me apne aap apply ho jayega.
   ========================================================================== */

:root{
  /* ---- Brand (Lauritz Knudsen) ---- */
  --lk-blue:        #015b8d;   /* primary — app ke header wala blue */
  --lk-blue-dark:   #014d78;
  --lk-blue-deep:   #062C51;   /* sidebar background */
  --lk-blue-soft:   #EAF2FA;
  --lk-blue-line:   #CBDDF0;

  /* ---- Product lines (yeh panel ka signature hai) ----
     Har record par ek colour spine hota hai jo batata hai wo kis
     drive family ka hai. AC Drive = blue, Px Drive = solar amber. */
  --ac:             #015b8d;
  --ac-soft:        #EAF2FA;
  --px:             #C77800;
  --px-soft:        #FFF4E2;

  /* ---- Neutrals ---- */
  --ink:            #16202B;
  --ink-2:          #374859;
  --muted:          #6B7C8C;
  --line:           #E3EAF1;
  --line-soft:      #EEF3F8;
  --bg:             #F4F7FA;
  --surface:        #FFFFFF;

  /* ---- Semantic ---- */
  --ok:             #12805C;   --ok-soft:     #E4F4EE;
  --warn:           #B26A00;   --warn-soft:   #FCF1DF;
  --danger:         #C0341D;   --danger-soft: #FBEAE7;
  --info:           #1F6FB2;   --info-soft:   #E8F1FA;
  --neutral-soft:   #EEF2F6;

  /* ---- Shape & depth ---- */
  --r-sm: 7px;  --r: 11px;  --r-lg: 15px;
  --sh-1: 0 1px 2px rgba(16,38,60,.06), 0 1px 3px rgba(16,38,60,.04);
  --sh-2: 0 2px 6px rgba(16,38,60,.07), 0 8px 20px rgba(16,38,60,.06);
  --sh-3: 0 10px 40px rgba(16,38,60,.16);

  --sidebar-w: 250px;
  --topbar-h: 62px;

  /* ---- Bootstrap theme sync ----
     Bootstrap 5.3's colour utilities (.text-primary, .bg-primary,
     .border-primary, badges, focus rings, etc.) read these two variables
     live, so overriding them here re-themes all of those to match the
     brand colour above without touching bootstrap.min.css. Buttons are
     handled separately below since .btn-primary needs literal property
     overrides, not just these variables — see the "Bootstrap primary
     buttons" block further down. */
  --bs-primary: #015b8d;
  --bs-primary-rgb: 1,91,141;
}

*,*::before,*::after{ box-sizing:border-box }

html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter","Segoe UI",Roboto,-apple-system,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  animation:page-fade-in .18s ease-out;
}
@keyframes page-fade-in{ from{ opacity:0 } to{ opacity:1 } }

/* Smooth, non-jumpy interactions app-wide */
a, button, .btn, .nav a, .card, .demo-btn, input, select, textarea{
  transition:background-color .12s ease, border-color .12s ease, color .12s ease,
    box-shadow .12s ease, opacity .12s ease, transform .12s ease;
}
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.015em; color:var(--ink) }
h1{ font-size:1.35rem }  h2{ font-size:1.08rem }  h3{ font-size:.97rem }
p{ margin:0 0 10px }
a{ color:var(--lk-blue); text-decoration:none }
a:hover{ text-decoration:underline }
:focus-visible{ outline:2px solid var(--lk-blue); outline-offset:2px; border-radius:4px }

/* ══ App shell ═════════════════════════════════════════════════════════════ */
.app{ min-height:100vh }

.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); z-index:40;
  background:var(--lk-blue-deep); color:#fff;
  display:flex; flex-direction:column; overflow-y:auto;
}
.sidebar__brand{
  padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.10);
}
.sidebar__brand img{ width:100%; max-width:160px; display:block }
.sidebar__scope{
  margin:12px 14px 4px; padding:10px 12px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
}
.sidebar__scope .lbl{ font-size:.66rem; text-transform:uppercase; letter-spacing:.09em;
  color:rgba(255,255,255,.55); font-weight:700 }
.sidebar__scope .val{ font-size:.85rem; font-weight:700; margin-top:3px; display:flex;
  align-items:center; gap:7px }
.sidebar__scope .dot{ width:8px; height:8px; border-radius:50%; flex:none }

.nav{
  padding:10px 10px 20px;
  flex:1;
  display:flex;
  flex-direction:column;
  width:100%;
}
.nav__group{ font-size:.65rem; text-transform:uppercase; letter-spacing:.1em;
  color:rgba(255,255,255,.4); font-weight:700; padding:16px 12px 7px }
.nav a{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  padding:9px 12px;
  border-radius:var(--r-sm);
  color:rgba(255,255,255,.80);
  font-weight:500;
  font-size:.88rem;
  margin-bottom:2px;
  text-decoration:none;
  transition:background .12s, color .12s;
  flex-shrink:0;
}
.nav a:hover{ background:rgba(255,255,255,.08); color:#fff; text-decoration:none }
.nav a.is-active{ background:var(--lk-blue); color:#fff; font-weight:600 }
.nav a .ico{ width:18px; height:18px; flex:none; opacity:.9 }
.nav a .count{
  margin-left:auto; background:rgba(255,255,255,.16); border-radius:20px;
  padding:1px 8px; font-size:.7rem; font-weight:700;
}

.main{ margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column }

.topbar{
  position:sticky; top:0; z-index:30; height:var(--topbar-h);
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); display:flex; align-items:center;
  gap:14px; padding:0 22px;
}
.topbar__title{ font-weight:700; font-size:1.02rem }
.topbar__sub{ color:var(--muted); font-size:.8rem }
.topbar__right{ margin-left:auto; display:flex; align-items:center; gap:12px }
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--lk-blue); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.8rem; flex:none;
}
.content{ padding:22px; flex:1; width:100% }

/* ══ Cards ════════════════════════════════════════════════════════════════ */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1);
}
.card__head{
  padding:15px 18px; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; gap:12px;
}
.card__head h2{ font-size:.98rem }
.card__head .right{ margin-left:auto; display:flex; gap:8px; align-items:center }
.card__body{ padding:18px }
.card__body--flush{ padding:0 }

/* Product-line spine — panel ka signature element */
.spine{ border-left:4px solid var(--line) }
.spine--ac{ border-left-color:var(--ac) }
.spine--px{ border-left-color:var(--px) }

/* ══ Stat tiles ═══════════════════════════════════════════════════════════ */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:14px }
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px; box-shadow:var(--sh-1); position:relative;
}
.stat__top{ display:flex; align-items:center; gap:10px; margin-bottom:9px }
.stat__ico{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none;
}
.stat__label{ font-size:.79rem; color:var(--muted); font-weight:600 }
.stat__value{ font-size:1.65rem; font-weight:800; letter-spacing:-.03em; line-height:1.1 }
.stat__foot{ font-size:.74rem; color:var(--muted); margin-top:5px }

/* ══ Tables ═══════════════════════════════════════════════════════════════ */
.table-wrap{ overflow-x:auto }
table.tbl{ width:100%; border-collapse:collapse; font-size:.86rem }
.tbl thead th{
  text-align:left; padding:11px 14px; background:var(--line-soft); color:var(--ink-2);
  font-weight:700; font-size:.73rem; text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap; border-bottom:1px solid var(--line);
}
.tbl tbody td{ padding:12px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle }
.tbl tbody tr:last-child td{ border-bottom:0 }
.tbl tbody tr{ transition:background .1s }
.tbl tbody tr:hover{ background:#FAFCFE }
.tbl tbody tr.clickable{ cursor:pointer }
.tbl .id{ font-weight:700; color:var(--lk-blue); white-space:nowrap }
.tbl .sub{ color:var(--muted); font-size:.78rem }
.tbl .spine-cell{ padding:0; width:4px }
.tbl .spine-cell span{ display:block; width:4px; height:44px; border-radius:0 3px 3px 0 }

/* ══ DataTables — shared redesign for every table.dataTable in the app ══════
   Targets DataTables' own generated markup (.dataTables_wrapper, .dataTable,
   .paginate_button, …) so this one block reskins every table the app
   initializes via $(...).DataTable(), on every page, without touching each
   page's own init code. Wording comes from the shared language defaults in
   app.js (kept in sync with the CSS here). Search stays — only reskinned,
   never hidden. */

.dataTables_wrapper{
  display:flex; flex-direction:column; gap:14px;
  font-size:.85rem; color:var(--ink-2); margin-bottom:2px;
}

/* Search gets its own row up top. Below it, and again below the table,
   the same row shape repeats — length ("Items per page") on the left,
   pagination centred, info ("Showing X to Y of Z results") on the right
   — see the `dom` string in app.js.

   Laid out as a 3-column grid so pagination is genuinely centred (not
   just "centred if the left/right groups happen to be the same width",
   which is all margin:auto flex tricks can promise): [length] [pagination] [info]. */
/* .dt-toolbar itself is deliberately NOT scoped to .dataTables_wrapper —
   app.js's initComplete lifts .dt-toolbar--search out to sit as a page-
   level search bar just above the table's card, so it no longer lives
   inside .dataTables_wrapper by the time these rules need to apply. */
.dt-toolbar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px 18px;
}
.dt-toolbar--search{ margin-bottom:16px }
.dataTables_wrapper .dt-toolbar--top{ padding-bottom:12px; border-bottom:1px solid var(--line-soft) }
.dataTables_wrapper .dt-toolbar--bottom{ padding-top:12px; border-top:1px solid var(--line-soft) }

.dataTables_wrapper .dataTables_length{ grid-column:1; justify-self:start }
.dataTables_wrapper .dataTables_paginate{ grid-column:2; justify-self:center }
.dataTables_wrapper .dataTables_info{ grid-column:3; justify-self:end }

.dataTables_filter label{
  display:flex; align-items:center; gap:0; font-size:.82rem; color:var(--ink-2); margin:0;
}
.dataTables_filter input{
  flex:0 1 280px; width:280px; max-width:100%;
  padding:9px 14px 9px 34px; border:1px solid var(--line); border-radius:20px;
  font-size:.85rem; font-family:inherit; color:var(--ink); background:var(--surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7C8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:11px center; background-size:14px;
}
.dataTables_filter input:focus{
  outline:none; border-color:var(--lk-blue); box-shadow:0 0 0 3px rgba(1,91,141,.12);
}

table.dataTable{
  width:100% !important; border-collapse:separate !important; border-spacing:0 6px !important;
  margin:0 !important;
}
table.dataTable thead th{
  border:none !important; background:none !important; padding:6px 14px 10px !important;
  font-size:.71rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); text-align:left; white-space:nowrap;
}
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc{
  cursor:pointer; background-image:none !important;
}
/* No sort-direction icons in the header row — DataTables' own base CSS
   renders ▲/▼ via a more specific selector chain (table.dataTable
   thead>tr>th.sorting_desc:after, etc.) that would otherwise win over a
   plain override regardless of source order, so both pseudo-elements are
   killed explicitly with !important. Clicking a header still sorts the
   column; there's just no visual indicator glyph. */
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_desc::before,
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after{
  content:none !important;
}

table.dataTable tbody td{
  border:none !important; box-shadow:none !important; padding:14px !important;
  background:transparent; font-size:.86rem; color:var(--ink); vertical-align:middle;
}
table.dataTable tbody tr td:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px }
table.dataTable tbody tr td:last-child{ border-top-right-radius:12px; border-bottom-right-radius:12px }
table.dataTable tbody tr:hover td{
  background:var(--surface);
  box-shadow:0 1px 0 rgba(16,38,60,.05), 0 8px 18px -6px rgba(16,38,60,.14) !important;
}
table.dataTable tbody tr.clickable{ cursor:pointer }
table.dataTable tbody td.dataTables_empty{
  text-align:center; padding:44px !important; color:var(--muted);
  background:none !important; box-shadow:none !important;
}

.dataTables_wrapper .dataTables_info{
  margin:0; color:var(--muted); font-size:.82rem; white-space:nowrap;
}

.dataTables_wrapper .dataTables_paginate{
  display:flex; align-items:center; gap:3px; margin:0; padding:0;
}
.dataTables_wrapper .dataTables_paginate span{ display:flex; align-items:center; gap:3px }
.dataTables_wrapper .dataTables_paginate .paginate_button{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 4px; border-radius:50%;
  font-size:.82rem; font-weight:600; color:var(--ink-2); cursor:pointer;
  border:none; background:none; text-decoration:none !important;
  transition:background .12s, color .12s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current){
  background:var(--lk-blue) !important; color:#fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--lk-blue) !important; color:#fff !important; box-shadow:none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next{
  font-size:0; color:var(--ink-2);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous::before,
.dataTables_wrapper .dataTables_paginate .paginate_button.next::before{
  font-size:1.05rem; line-height:1;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous::before{ content:"‹" }
.dataTables_wrapper .dataTables_paginate .paginate_button.next::before{ content:"›" }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
  opacity:.35; cursor:not-allowed;
}

.dataTables_wrapper .dataTables_length{ margin:0 }
.dataTables_wrapper .dataTables_length label{
  display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted); margin:0;
  white-space:nowrap;
}
.dataTables_wrapper .dataTables_length select{
  padding:6px 10px; border:1px solid var(--line); border-radius:8px;
  font-size:.83rem; font-family:inherit; background:var(--surface); color:var(--ink);
}

.dataTables_processing{
  color:var(--muted); font-size:.85rem;
}

@media (max-width:700px){
  .dt-toolbar{ grid-template-columns:1fr }
  .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate,
  .dataTables_wrapper .dataTables_length{
    grid-column:1; justify-self:center; justify-content:center; text-align:center;
  }
}

.empty{ padding:52px 20px; text-align:center; color:var(--muted) }
.empty svg{ opacity:.35; margin-bottom:10px }
.empty p{ margin:0; font-size:.88rem }

/* ══ Pills & badges ═══════════════════════════════════════════════════════ */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px;
  font-size:.73rem; font-weight:700; white-space:nowrap; line-height:1.6;
}
.pill .dot{ width:6px; height:6px; border-radius:50%; flex:none }
.pill--ok{ background:var(--ok-soft); color:var(--ok) }
.pill--warn{ background:var(--warn-soft); color:var(--warn) }
.pill--danger{ background:var(--danger-soft); color:var(--danger) }
.pill--info{ background:var(--info-soft); color:var(--info) }
.pill--neutral{ background:var(--neutral-soft); color:var(--ink-2) }
.pill--ac{ background:var(--ac-soft); color:var(--ac) }
.pill--px{ background:var(--px-soft); color:var(--px) }

/* ══ Buttons ══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 15px; border-radius:var(--r-sm); border:1px solid transparent;
  font-size:.85rem; font-weight:600; cursor:pointer; background:var(--surface);
  color:var(--ink); transition:background .12s, border-color .12s, opacity .12s;
  font-family:inherit; text-decoration:none; white-space:nowrap;
}
.btn:hover{ text-decoration:none }
.btn--primary{ background:var(--lk-blue); color:#fff }
.btn--primary:hover{ background:var(--lk-blue-dark) }
.btn--ghost{ border-color:var(--line); color:var(--ink-2) }
.btn--ghost:hover{ background:var(--line-soft) }
.btn--danger{ background:var(--danger); color:#fff }
.btn--sm{ padding:6px 11px; font-size:.79rem }
.btn:disabled{ opacity:.5; cursor:not-allowed }

/* ══ Bootstrap primary buttons ════════════════════════════════════════════
   The plain ".btn" rule above (for this file's own legacy .btn--primary/
   .btn--ghost button system) sets background/color on the same ".btn"
   class Bootstrap's own buttons use as their base — and because this
   stylesheet loads after bootstrap.min.css, it was silently winning over
   Bootstrap's background at rest (equal specificity, later file wins),
   which is why every btn-primary rendered white until :hover, where
   Bootstrap's higher-specificity ":hover" rule took over. Setting the
   colour directly on ".btn-primary" here — later in this same file —
   wins the tie against both, at every state, not just hover. ══════════ */
.btn-primary{
  background-color:var(--lk-blue);
  border-color:var(--lk-blue);
  color:#fff;
}
.btn-primary:hover{
  background-color:var(--lk-blue-dark);
  border-color:var(--lk-blue-dark);
  color:#fff;
}
.btn-primary:active,
.btn-primary:focus{
  background-color:#013a5c;
  border-color:#013a5c;
  color:#fff;
}
.btn-primary:disabled,
.btn-primary.disabled{
  background-color:var(--lk-blue);
  border-color:var(--lk-blue);
  color:#fff;
}

.btn-outline-primary{
  color:var(--lk-blue);
  border-color:var(--lk-blue);
  background-color:transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:active{
  background-color:var(--lk-blue);
  border-color:var(--lk-blue);
  color:#fff;
}

/* Same collision, same fix, for every other Bootstrap button variant
   actually used in this app (Cancel = btn-secondary, delete/logout =
   btn-danger) — otherwise they're just as invisible at rest as
   btn-primary was. */
.btn-secondary{
  background-color:#6c757d;
  border-color:#6c757d;
  color:#fff;
}
.btn-secondary:hover{
  background-color:#5c636a;
  border-color:#565e64;
  color:#fff;
}
.btn-secondary:active,
.btn-secondary:focus{
  background-color:#565e64;
  border-color:#51585e;
  color:#fff;
}
.btn-secondary:disabled,
.btn-secondary.disabled{
  background-color:#6c757d;
  border-color:#6c757d;
  color:#fff;
}

.btn-danger{
  background-color:#dc3545;
  border-color:#dc3545;
  color:#fff;
}
.btn-danger:hover{
  background-color:#bb2d3b;
  border-color:#b02a37;
  color:#fff;
}
.btn-danger:active,
.btn-danger:focus{
  background-color:#b02a37;
  border-color:#a52834;
  color:#fff;
}
.btn-danger:disabled,
.btn-danger.disabled{
  background-color:#dc3545;
  border-color:#dc3545;
  color:#fff;
}

/* ══ Password field with show/hide eye icon ══════════════════════════════
   Wrap a password <input> in .password-wrapper and add a
   .toggle-password span inside it (see index.html for the exact
   markup); this just handles the layout, the class toggling itself is
   plain JS ($(document).on('click', '.toggle-password', ...)). */
.password-wrapper{ position:relative; width:100% }
.password-wrapper .form-control{ padding-right:42px }
.password-wrapper .toggle-password{
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  z-index:5; color:var(--muted); cursor:pointer;
}
.password-wrapper .toggle-password:hover{ color:var(--ink-2) }

/* ══ Forms ════════════════════════════════════════════════════════════════ */
.field{ margin-bottom:14px }
.field > label{ display:block; font-weight:600; font-size:.82rem; margin-bottom:5px; color:var(--ink-2) }
.field .req{ color:var(--danger) }
.input, .select, .textarea{
  width:100%; padding:9px 11px; border:1px solid #CFDAE4; border-radius:var(--r-sm);
  font-size:.88rem; font-family:inherit; color:var(--ink); background:var(--surface);
}
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--lk-blue);
  box-shadow:0 0 0 3px rgba(10,77,140,.12) }
.textarea{ min-height:96px; resize:vertical }
.hint{ font-size:.76rem; color:var(--muted); margin:5px 0 0 }
/* .row{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px } */
.row-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 14px }

.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px }
.toolbar .search{ position:relative; flex:1; min-width:210px; max-width:360px }
.toolbar .search .input{ padding-left:34px }
.toolbar .search svg{ position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--muted) }

/* ══ Detail layout ════════════════════════════════════════════════════════ */
.detail{ display:grid; grid-template-columns:1fr 336px; gap:16px; align-items:start }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:9px 18px; font-size:.87rem }
.kv dt{ color:var(--muted) }
.kv dd{ margin:0; font-weight:600; word-break:break-word }
.section-title{
  font-size:.71rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); margin:20px 0 9px;
}
.section-title:first-child{ margin-top:0 }

.timeline{ list-style:none; margin:0; padding:0 }
.timeline li{ position:relative; padding:0 0 16px 22px; border-left:2px solid var(--line-soft) }
.timeline li:last-child{ border-left-color:transparent; padding-bottom:0 }
.timeline li::before{
  content:""; position:absolute; left:-6px; top:3px; width:10px; height:10px;
  border-radius:50%; background:var(--lk-blue); border:2px solid var(--surface);
}
.timeline .t-title{ font-weight:600; font-size:.85rem }
.timeline .t-meta{ color:var(--muted); font-size:.76rem; margin-top:2px }

.thumbs{ display:flex; gap:9px; flex-wrap:wrap }
.thumb{
  width:88px; height:88px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--line-soft) center/cover no-repeat; display:grid; place-items:center;
  color:var(--muted); font-size:.7rem; text-align:center; padding:6px; overflow:hidden;
}

/* ══ Toast & modal ════════════════════════════════════════════════════════ */
.toast-wrap{ position:fixed; right:20px; bottom:20px; z-index:80; display:flex;
  flex-direction:column; gap:9px }
.toast{
  background:var(--ink); color:#fff; padding:11px 15px; border-radius:var(--r-sm);
  font-size:.85rem; box-shadow:var(--sh-3); animation:tin .18s ease-out;
  max-width:340px;
}
.toast--ok{ background:var(--ok) }
.toast--err{ background:var(--danger) }
@keyframes tin{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

.modal-back{
  position:fixed; inset:0; background:rgba(11,26,42,.5); z-index:70;
  display:grid; place-items:center; padding:20px;
}
.modal-back .modal{
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  width:100%; max-width:520px; max-height:88vh; overflow:auto;
}
.modal-back .modal__head{ padding:16px 20px; border-bottom:1px solid var(--line); display:flex;
  align-items:center }
.modal-back .modal__head h2{ font-size:1rem }
.modal-back .modal__body{ padding:20px }
.modal-back .modal__foot{ padding:14px 20px; border-top:1px solid var(--line); display:flex;
  justify-content:flex-end; gap:9px }

/* ══ Login ════════════════════════════════════════════════════════════════ */
.login-page{
  min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr;
  background:var(--bg);
}
.login-aside{
  background:linear-gradient(160deg,var(--lk-blue-deep),var(--lk-blue) 72%);
  color:#fff; padding:46px 48px; display:flex; flex-direction:column;
}
.login-aside img{ width:190px; margin-bottom:auto }
.login-aside h1{ color:#fff; font-size:1.85rem; line-height:1.28; margin-bottom:12px;
  max-width:15ch }
.login-aside p{ color:rgba(255,255,255,.78); max-width:40ch; font-size:.93rem }
.login-aside .lines{ display:flex; gap:9px; margin-top:22px }
.login-aside .lines span{ height:4px; width:44px; border-radius:4px; background:rgba(255,255,255,.85) }
.login-aside .lines span:nth-child(2){ background:var(--px) }
.login-main{ display:grid; place-items:center; padding:34px }
.login-box{
  width:100%; max-width:clamp(382px, 34vw, 560px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); padding:clamp(32px, 4vw, 52px);
}
/* Desktop already shows the brand logo in .login-aside — this copy inside
   the card only exists for when that aside is hidden (see the ≤900px rule
   below), so it stays off by default and is switched on there instead. */
.login-box__logo{ display:none; width:150px; margin:0 auto 22px }
.login-box h2{ font-size:1.85rem; margin-bottom:8px }
.login-box .sub{ color:var(--muted); font-size:1.02rem; margin-bottom:30px }
.login-box .field{ margin-bottom:20px }
.login-box .field > label{ font-size:.95rem; margin-bottom:7px }
.login-box .input{ padding:13px 14px; font-size:1.02rem; border-radius:9px }
.login-box .btn--primary{ padding:14px; font-size:1.05rem; font-weight:700; border-radius:9px; margin-top:8px }
.demo-accounts{
  margin-top:22px; border-top:1px solid var(--line); padding-top:16px;
}
.demo-accounts .t{ font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); margin-bottom:9px }
.demo-btn{
  width:100%; text-align:left; padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); cursor:pointer; margin-bottom:8px;
  font-family:inherit; display:flex; align-items:center; gap:10px;
}
.demo-btn:hover{ background:var(--line-soft) }
.demo-btn .nm{ font-weight:700; font-size:.85rem }
.demo-btn .em{ color:var(--muted); font-size:.76rem }

/* ══ Misc ═════════════════════════════════════════════════════════════════ */
.tabs{ display:flex; gap:5px; border-bottom:1px solid var(--line); margin-bottom:16px;
  overflow-x:auto }
.tabs button{
  padding:9px 15px; border:0; background:none; font-family:inherit; font-size:.86rem;
  font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent;
  white-space:nowrap;
}
.tabs button.is-active{ color:var(--lk-blue); border-bottom-color:var(--lk-blue) }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.mt{ margin-top:16px } .mb{ margin-bottom:16px }
.muted{ color:var(--muted) }
.nowrap{ white-space:nowrap }
.right{ text-align:right }

.bar{ height:8px; background:var(--line-soft); border-radius:6px; overflow:hidden }
.bar > span{ display:block; height:100%; background:var(--lk-blue); border-radius:6px }

/* ══ Sidebar collapse (desktop) ═══════════════════════════════════════════
   Toggled by the topbar's .menu-btn — collapses to an icon-only rail
   instead of the mobile off-canvas behaviour below (.is-open). */
.sidebar{ transition:width .2s }
.sidebar.is-collapsed{ width:72px; overflow:visible }
.sidebar.is-collapsed ~ .main{ margin-left:72px }
.sidebar.is-collapsed .sidebar__brand{ padding-left:10px; padding-right:10px }
.sidebar.is-collapsed .nav__group{ display:none }
.sidebar.is-collapsed .nav a{ justify-content:center; padding:9px 0 }
.sidebar.is-collapsed .nav a .ico{ margin:0 }
/* Label becomes a flyout tooltip on hover instead of just disappearing */
.sidebar.is-collapsed .nav a span{
  position:absolute; left:100%; top:50%; transform:translateY(-50%) scale(.96);
  margin-left:12px; padding:6px 11px; border-radius:var(--r-sm);
  background:var(--ink); color:#fff; font-size:.78rem; font-weight:600;
  white-space:nowrap; box-shadow:var(--sh-2);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .12s ease, transform .12s ease, visibility .12s ease;
  z-index:60;
}
.sidebar.is-collapsed .nav a:hover span,
.sidebar.is-collapsed .nav a:focus-visible span{
  opacity:1; visibility:visible; transform:translateY(-50%) scale(1);
}
@media (max-width:900px){
  .sidebar.is-collapsed{ width:var(--sidebar-w); overflow-y:auto }
  .sidebar.is-collapsed ~ .main{ margin-left:0 }
  .sidebar.is-collapsed .nav__group{ display:block }
  .sidebar.is-collapsed .nav a{ justify-content:flex-start; padding:9px 12px }
  .sidebar.is-collapsed .nav a span{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    background:none; color:inherit; box-shadow:none; padding:0; font-size:inherit; font-weight:inherit;
  }
}

/* ══ Responsive ═══════════════════════════════════════════════════════════ */
.menu-btn{ display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; padding:6px; color:var(--ink-2) }
@media (max-width:1080px){
  .detail{ grid-template-columns:1fr }
  .grid-2{ grid-template-columns:1fr }
}
@media (max-width:900px){
  .sidebar{ transform:translateX(-100%); transition:transform .2s }
  .sidebar.is-open{ transform:none; box-shadow:var(--sh-3) }
  .main{ margin-left:0 }
  .login-page{ grid-template-columns:1fr }
  .login-aside{ display:none }
  .login-box__logo{ display:block }
  .row,.row-3{ grid-template-columns:1fr }
  .content{ padding:16px }
}
@media print{
  .sidebar,.topbar,.btn,.toolbar{ display:none !important }
  .main{ margin-left:0 }
  .card{ box-shadow:none; break-inside:avoid }
}