/* KPK Cargo Services — admin panel */
:root{
  --navy:#16305c; --navy-deep:#001b42; --red:#c8202e; --red-dark:#9e1723;
  --bg:#f4f6fa; --card:#fff; --line:#e2e6ed; --line-soft:#eef1f6;
  --ink:#12161f; --muted:#5b6579; --green:#0e7a54; --green-bg:#e6f5ee;
  --amber:#a86b00; --amber-bg:#fdf1de; --radius:10px;
  --shadow:0 2px 8px rgba(22,48,92,.07);
  /* height of the sticky top bar. The drawer, its backdrop and the shell all
     offset from this, so it lives on :root — set on .abar it wouldn't be
     inherited by any of them (they aren't its descendants). */
  --bar-h:58px;
}
/* 56px = .5rem padding × 2 + the 40px brand/button row */
@media(max-width:899px){:root{--bar-h:56px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
/* deliberately no overflow-x guard on html/body: it would make the sticky
   .abar non-sticky, and it masks layout bugs instead of fixing them */
body{margin:0;background:linear-gradient(135deg,#f7f9fd 0%,#f0f4fb 100%);color:var(--ink);font:15px/1.55 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.nav-open{overflow:hidden}
h1,h2,h3,h4{font-family:Montserrat,sans-serif;color:var(--navy-deep);margin:0 0 .5em;line-height:1.25;letter-spacing:-.01em}
h1{font-size:1.6rem} h2{font-size:1.2rem} h3{font-size:1.05rem}
a{color:var(--red);text-decoration:none} a:hover{text-decoration:underline}
p{margin:0 0 1rem}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:4px}

/* top bar */
.abar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:.5rem;
  min-height:var(--bar-h);padding:.5rem max(.75rem,env(safe-area-inset-left)) .5rem max(.75rem,env(safe-area-inset-right));
  background:linear-gradient(105deg,var(--navy-deep),var(--navy));color:#fff;box-shadow:0 4px 18px rgba(0,27,66,.18)}
.abrand{display:flex;align-items:center;gap:.6rem;min-width:0;min-height:40px;color:#fff!important;text-decoration:none!important;font-weight:700}
.abrand img{height:26px;flex:none;background:#fff;border-radius:4px;padding:2px 4px}
.aspacer{flex:1}
.auser{font-size:13px;color:#b9c8e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14ch}
.abtn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:38px;padding:0 .9rem;border-radius:8px;
  border:1px solid transparent;font:600 14px Inter,sans-serif;cursor:pointer;text-decoration:none!important;white-space:nowrap}
.abtn.ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}
.abtn.ghost:hover{background:rgba(255,255,255,.2)}
.atoggle{display:grid;gap:4px;width:40px;height:40px;flex:none;place-content:center;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);border-radius:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.atoggle span{display:block;width:16px;height:2px;background:#fff;border-radius:2px}
@media(min-width:900px){.atoggle{display:none}}

/* Six items in a nowrap row used to overflow the bar on a phone. Below 900px
   only the essentials stay: menu, brand, log out. */
@media(max-width:899px){
  .abrand span{display:none}
  .abar .abtn.ghost[target]{display:none}   /* "View site" lives in the drawer */
  .auser{display:none}
  .abtn{min-height:36px;padding:0 .75rem;font-size:13px}
}

/* shell
   minmax(0,1fr), not 1fr: a `1fr` track takes its automatic minimum from the
   item's min-content, and a wide table inside .amain pushed that to ~930px —
   which stretched the whole panel far past a phone screen and clipped the
   right-hand half of every page. */
.ashell{display:grid;grid-template-columns:minmax(0,1fr);min-height:calc(100dvh - var(--bar-h))}
.amain{min-width:0}
@media(min-width:900px){.ashell{grid-template-columns:236px minmax(0,1fr)}}

/* Off-canvas drawer below 900px. It used to be a plain block that shoved the
   whole page down when opened, with no way to dismiss it. */
.anav{background:#fff;border-right:1px solid var(--line);padding:1rem .75rem;box-shadow:8px 0 22px rgba(22,48,92,.035)}
@media(max-width:899px){
  .anav{
    position:fixed;top:var(--bar-h);bottom:0;left:0;z-index:45;width:min(84vw,300px);
    padding-bottom:calc(1rem + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
    box-shadow:18px 0 48px -18px rgba(0,27,66,.45);
    transform:translateX(-100%);visibility:hidden;
    transition:transform .26s cubic-bezier(.2,.7,.3,1),visibility .26s}
  body.nav-open .anav{transform:none;visibility:visible}
  .anav-backdrop{position:fixed;inset:var(--bar-h) 0 0;z-index:44;background:rgba(0,27,66,.42);
    opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s}
  body.nav-open .anav-backdrop{opacity:1;visibility:visible}
  /* comfortable thumb targets in the drawer */
  .anav a{min-height:46px}
}
@media(min-width:900px){
  .anav-backdrop{display:none}
  .anav{position:sticky;top:var(--bar-h);height:calc(100dvh - var(--bar-h));overflow-y:auto}
}
.anav-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:1.25rem .6rem .4rem}
.anav-label:first-child{margin-top:.25rem}
.anav a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.62rem .7rem;border-radius:8px;
  color:var(--navy-deep);font-weight:600;text-decoration:none!important;transition:background .16s ease,color .16s ease,transform .16s ease}
.anav a:hover{background:var(--line-soft);transform:translateX(2px)}
.anav a.on{background:var(--navy);color:#fff}
.anav-foot{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line-soft);font-size:13px}
.anav-foot p{margin:.5rem .7rem 0}
@media(min-width:900px){.anav-foot{display:none}}
.badge{background:var(--red);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:.1rem .45rem;min-width:20px;text-align:center}
.anav a.on .badge{background:#fff;color:var(--red)}
.amain{padding:1.25rem;max-width:1180px;width:100%}
@media(min-width:900px){.amain{padding:2rem 2.5rem}}

/* cards + tables */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.25rem;margin-bottom:1.25rem;box-shadow:0 8px 24px rgba(22,48,92,.055)}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
.page-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;justify-content:space-between;margin-bottom:1.25rem}
.page-head p{margin:.25rem 0 0;color:var(--muted);max-width:60ch}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{width:100%;border-collapse:collapse;min-width:600px;font-size:14px}
td{overflow-wrap:break-word}
th{background:var(--navy-deep);color:#fff;text-align:left;padding:.7rem .85rem;font:600 12px/1.2 Montserrat,sans-serif;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
td{padding:.7rem .85rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#fafbfe}
td.actions{white-space:nowrap;text-align:right}

/* stats */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:1.5rem}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.15rem;box-shadow:0 8px 24px rgba(22,48,92,.055)}
.stat::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--navy)}
.stat.alert-stat::before{background:var(--red)}
.stat b{display:block;font:700 clamp(1.5rem,6vw,1.9rem)/1 Montserrat,sans-serif;color:var(--navy-deep);font-variant-numeric:tabular-nums}
.stat span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stat.alert-stat b{color:var(--red)}

/* forms */
.field{display:grid;gap:.3rem;margin-bottom:1rem}
.field>label{font-size:13px;font-weight:600;color:var(--navy-deep)}
.field .hint{font-size:12px;color:var(--muted)}
/* 16px is deliberate: iOS Safari zooms the whole page in when you focus a
   field smaller than that, which was the main reason admin forms felt broken
   on a phone. */
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=date],input[type=datetime-local],select,textarea{
  width:100%;max-width:100%;min-height:44px;padding:.6rem .75rem;font:16px Inter,sans-serif;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:8px}
@media(min-width:900px){
  input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=date],input[type=datetime-local],select,textarea{font-size:15px;min-height:42px}
}
textarea{min-height:96px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,48,92,.12)}
.grid2{display:grid;gap:0 1rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.grid2 .span2{grid-column:1/-1}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:42px;padding:0 1.1rem;
  border:1px solid transparent;border-radius:8px;font:600 14px Inter,sans-serif;cursor:pointer;text-decoration:none!important}
.btn.primary{background:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-dark)}
.btn.navy{background:var(--navy);color:#fff}
.btn.navy:hover{background:var(--navy-deep)}
.btn.outline{background:#fff;color:var(--navy-deep);border-color:var(--line)}
.btn.outline:hover{border-color:var(--navy)}
.btn.danger{background:#fff;color:var(--red);border-color:#f3c9cd}
.btn.danger:hover{background:#fdecee}
.btn.sm{min-height:36px;padding:0 .7rem;font-size:13px}
.row-actions{display:flex;gap:.4rem;justify-content:flex-end}
.dashboard-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.9rem}
/* full-width actions on phones — half-width buttons side by side get cramped */
@media(max-width:520px){
  .dashboard-actions{display:grid;grid-template-columns:1fr}
  .dashboard-actions .btn{width:100%}
  .card{padding:1rem;border-radius:10px}
  .amain{padding:1rem}
  h1{font-size:1.375rem}
}

/* icon picker */
.iconpick{display:flex;flex-wrap:wrap;gap:.4rem;max-height:150px;overflow:auto;padding:.5rem;border:1px solid var(--line);border-radius:8px;background:#fff}
.iconpick label{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--navy)}
.iconpick input{position:absolute;opacity:0;pointer-events:none}
.iconpick input:checked+label{background:var(--navy);color:#fff;border-color:var(--navy)}

/* alerts + pills */
.alert{padding:.85rem 1rem;border-radius:var(--radius);margin-bottom:1.25rem;font-weight:500}
.alert.ok{background:var(--green-bg);color:var(--green)}
.alert.err{background:#fdecee;color:var(--red-dark)}
.pill{display:inline-block;padding:.2rem .55rem;border-radius:999px;font-size:12px;font-weight:700}
.pill.new{background:var(--red);color:#fff}
.pill.contacted{background:var(--amber-bg);color:var(--amber)}
.pill.booked,.pill.done{background:var(--green-bg);color:var(--green)}
.pill.closed{background:var(--line-soft);color:var(--muted)}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--muted)}
details.rec{border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:.75rem}
details.rec>summary{padding:.9rem 1rem;cursor:pointer;font-weight:600;color:var(--navy-deep);display:flex;justify-content:space-between;gap:1rem}
details.rec>div{padding:0 1rem 1rem}