/* Asset & Procurement Register — UI makeover */
:root{
  --bg:#f2f6fb; --panel:#fff; --ink:#253749; --muted:#51607a; --line:#e3e9f2;
  --brand:#1761ae; --brand-dark:#062b5c; --brand-indigo:#1e227c;
  --brand-light:#e6f0fb; --brand-softer:#f3f9ff;
  --ok:#1f7a44; --ok-soft:#e5f3ea; --warn:#8a6100; --warn-soft:#fdf4d7;
  --err:#c03321; --err-soft:#fcebe6;
  --hero-bg:#f3f9ff; --hero-line:#dce8f7;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(16,32,63,.06), 0 6px 22px rgba(16,32,63,.06);
  --shadow-lg:0 10px 34px rgba(16,32,63,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.5 "Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- shell & sidebar ---------- */
.shell{display:flex; min-height:100vh}
.sidebar{
  width:230px; flex:0 0 230px; background:linear-gradient(180deg,#062b5c,#1e227c);
  color:#c8d4ec; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{position:relative; padding:16px 16px 14px; border-bottom:1px solid rgba(255,255,255,.09);
  display:flex; flex-direction:column; align-items:center; text-align:center}
.brand-mark{width:30px; height:30px; border-radius:9px; flex:0 0 30px;
  background:linear-gradient(145deg,#2f86d6,#062b5c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); position:relative}
.brand-mark::after{content:""; position:absolute; inset:8px; border-radius:4px;
  background:rgba(255,255,255,.28)}
.brand-text b{display:block; color:#fff; font-size:14.5px; letter-spacing:.1px; line-height:1.2}
.brand-text em{font-style:normal; font-size:10.5px; color:#8fa6d4; text-transform:uppercase;
  letter-spacing:.8px}
.brand-logo{width:100%; max-width:156px; height:auto; display:block;
  background:#fff; padding:8px 12px; border-radius:10px; box-shadow:var(--shadow)}
.brand-sub{display:block; margin-top:9px; font-size:10px; letter-spacing:.9px;
  line-height:1.35; color:#8fa6d4; text-transform:uppercase}
.side-close{display:none; position:absolute; top:12px; right:12px; font-size:22px;
  line-height:1; color:#c8d4ec; cursor:pointer; padding:0 6px}
.nav{padding:10px 8px; flex:1; overflow-y:auto}
.nav a{
  display:flex; align-items:center; gap:9px; padding:8px 12px; margin:1px 0;
  border-radius:8px; color:#c8d4ec; font-size:13.5px;
}
.nav a:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
.nav a.on{background:#fff; color:var(--brand-dark); font-weight:650;
  box-shadow:var(--shadow)}
.nav .sec{padding:13px 12px 4px; font-size:10px; text-transform:uppercase;
  letter-spacing:1.1px; color:#7590c4}
.nav .pill{margin-left:auto; background:var(--err); color:#fff; font-size:11px;
  padding:1px 8px; border-radius:10px; font-weight:650}
.sidefoot{padding:12px 16px; border-top:1px solid rgba(255,255,255,.09); font-size:12px}
.sidefoot .who{color:#fff; font-weight:600; font-size:12.5px; margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sidefoot a{color:#8fa6d4}
.sidefoot a:hover{color:#fff}
.sidefoot span{color:#4a6496}

/* ---------- main & topbar ---------- */
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  background:var(--panel); border-bottom:1px solid var(--line); padding:11px 24px;
  display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:5;
}
.page-head{min-width:160px}
.topbar h1{margin:0; font-size:18px; font-weight:700; letter-spacing:-.3px}
.topbar .sub{color:var(--muted); font-size:12.5px}
.menu-btn{display:none; font-size:20px; cursor:pointer; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
  width:38px; height:38px; align-items:center; justify-content:center}
.nav-toggle{position:absolute; opacity:0; pointer-events:none}
.nav-scrim{position:fixed; inset:0; background:rgba(15,25,45,.4); z-index:9;
  backdrop-filter:blur(2px); display:none}

/* search box */
.search{flex:1; max-width:460px; min-width:180px; position:relative; display:flex; align-items:center}
.search svg{position:absolute; left:12px; width:15px; height:15px; color:var(--muted); pointer-events:none}
.search input{width:100%; padding:9px 14px 9px 34px; border-radius:11px;
  border:1px solid var(--line); background:var(--bg); font-size:13.5px}
.search input:focus{outline:2px solid var(--brand-light); border-color:var(--brand); background:#fff}
.search:hover input{border-color:#ccd5e6}

.spacer{flex:1}
.content{padding:22px 24px 70px; max-width:1500px; width:100%}

/* ---------- cards, grids, stats ---------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:16px}
.card > h2{margin:0; padding:13px 17px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.7px; color:var(--muted);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px}
.card > h2 .spacer{flex:1}
.card .pad{padding:16px 17px}

.grid{display:grid; gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 16px; box-shadow:var(--shadow)}
.stat .n{font-size:26px; font-weight:750; letter-spacing:-.7px; line-height:1.1}
.stat .l{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.7px;
  margin-top:3px}
.stat.alert .n{color:var(--err)}
.stat.good .n{color:var(--ok)}

/* ---------- tables ---------- */
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; font-weight:650; font-size:11px; text-transform:uppercase;
  letter-spacing:.6px; color:var(--muted); padding:9px 12px;
  border-bottom:1px solid var(--line); white-space:nowrap; background:var(--brand-softer)}
td{padding:9px 12px; border-bottom:1px solid #eff2f8; vertical-align:middle}
tbody tr:hover{background:#f8faff}
tbody tr:last-child td{border-bottom:none}
.table-wrap{overflow-x:auto}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.mono{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; font-size:12.5px}
.dim{color:var(--muted)}
.tiny{font-size:11.5px}
.nowrap{white-space:nowrap}

/* ---------- tags, buttons ---------- */
.tag{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:20px;
  font-size:11px; font-weight:650; white-space:nowrap; background:var(--brand-light);
  color:var(--brand-dark)}
.tag::before{content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor; opacity:.35}
.tag.ok{background:var(--ok-soft); color:var(--ok)}
.tag.warn{background:var(--warn-soft); color:var(--warn)}
.tag.err{background:var(--err-soft); color:var(--err)}
.tag.grey{background:#eef1f7; color:var(--muted)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 14px; border-radius:9px; border:1px solid var(--line); background:#fff;
  color:var(--ink); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
  transition:background .12s ease, border-color .12s ease}
.btn:hover{background:#f5f7fc; text-decoration:none}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-dark)}
.btn.danger{color:var(--err); border-color:#f2cfc9}
.btn.danger:hover{background:var(--err-soft)}
.btn.sm{padding:4px 10px; font-size:12px; border-radius:7px}

/* ---------- forms ---------- */
input,select,textarea{
  font:inherit; font-size:13.5px; padding:8px 11px; border:1px solid #d6dce8;
  border-radius:9px; background:#fff; color:var(--ink); width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-light);
  border-color:var(--brand)}
textarea{resize:vertical; min-height:64px}
label{display:block; font-size:11px; font-weight:650; color:var(--muted);
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:5px}
.field{margin-bottom:13px}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row > .field{flex:1; min-width:150px}
.check{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink);
  text-transform:none; letter-spacing:0; font-weight:550}
.check input{width:auto}

.filters{display:flex; gap:9px; flex-wrap:wrap; align-items:flex-end;
  padding:13px 17px; border-bottom:1px solid var(--line); background:var(--brand-softer);
  border-radius:var(--radius) var(--radius) 0 0}
.filters .field{margin:0; min-width:130px}
.filters .grow{flex:1; min-width:200px}

/* ---------- banners, flashes, empty ---------- */
.flash{padding:11px 15px; border-radius:10px; margin-bottom:14px; font-size:13.5px;
  border:1px solid transparent}
.flash.ok{background:var(--ok-soft); color:var(--ok); border-color:#c2e4d1}
.flash.error{background:var(--err-soft); color:var(--err); border-color:#f2cfc9}

.empty{padding:44px 20px; text-align:center; color:var(--muted)}
.empty b{display:block; color:var(--ink); font-size:15px; margin-bottom:5px}

.banner{display:flex; align-items:center; gap:14px; padding:13px 16px;
  border:1px solid #f2cfaa; background:#fff6ea; color:#7a4b00; border-radius:var(--radius);
  margin-bottom:16px}
.banner.err{border-color:#f2cfc9; background:var(--err-soft); color:#8c2415}
.banner.info{border-color:#c3daf2; background:#f0f6fe; color:#062b5c}
.banner b{font-size:13.5px}
.banner .grow{flex:1}

/* ---------- key-value ---------- */
.kv{display:grid; grid-template-columns:150px 1fr; gap:8px 14px; font-size:13.5px}
.kv dt{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.6px;
  font-weight:650; padding-top:2px}
.kv dd{margin:0}

.bar{height:6px; border-radius:4px; background:#eef1f7; overflow:hidden; min-width:70px}
.bar i{display:block; height:100%; background:var(--brand); border-radius:4px}

/* ---------- quick actions ---------- */
.quick{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.quick a{display:flex; align-items:center; gap:12px; padding:13px 14px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  box-shadow:var(--shadow); color:var(--ink); font-weight:600; font-size:13.5px}
.quick a:hover{text-decoration:none; border-color:var(--brand); box-shadow:var(--shadow-lg)}
.quick .qi{width:36px; height:36px; flex:0 0 36px; border-radius:10px; display:flex;
  align-items:center; justify-content:center; background:var(--brand-light); color:var(--brand)}
.quick .qi svg{width:19px; height:19px}
.quick .qd{color:var(--muted); font-weight:450; font-size:12px; line-height:1.35}
.quick .qd b{display:block; color:var(--ink); font-size:13.5px; font-weight:600}

/* ---------- filter chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:6px; padding:11px 17px; border-bottom:1px solid var(--line)}
.chips a{padding:4px 13px; border-radius:20px; font-size:12.5px; font-weight:600;
  color:var(--muted); background:#f3f5fa; border:1px solid transparent}
.chips a:hover{text-decoration:none; color:var(--brand-dark)}
.chips a.on{background:var(--brand); color:#fff}
.chips a.on:hover{color:#fff}

/* ---------- alerts list ---------- */
.alerts{display:flex; flex-direction:column; gap:8px}
.alerts .item{display:flex; align-items:center; gap:12px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff}
.alerts .item:hover{background:var(--brand-softer)}
.alerts .dot{width:9px; height:9px; flex:0 0 9px; border-radius:50%}
.alerts .dot.ok{background:var(--ok)} .alerts .dot.warn{background:#d99a00}
.alerts .dot.err{background:var(--err)}
.alerts .who{font-weight:650; font-size:13px; flex:1}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px; background:radial-gradient(1200px 600px at 70% -10%,#2f86d6,#1e227c 55%,#062b5c)}
.login{background:#fff; padding:36px 34px; border-radius:18px; width:380px; max-width:100%;
  box-shadow:var(--shadow-lg)}
.login .brand{display:flex; align-items:center; gap:10px; padding:0 0 14px; border-bottom:1px solid var(--line); margin-bottom:18px}
.login h1{margin:0; font-size:19px}
.login p.sub{margin:2px 0 20px; color:var(--muted); font-size:13px}
.login .btn{width:100%; justify-content:center; padding:11px}
.hint{margin-top:16px; padding:10px 12px; background:var(--brand-light); border-radius:9px;
  font-size:12px; color:var(--brand-dark)}

details.inline summary{cursor:pointer; color:var(--brand); font-size:12.5px; list-style:none}
details.inline summary::-webkit-details-marker{display:none}
details.inline[open] summary{margin-bottom:9px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3,.g2{grid-template-columns:1fr}
}
@media (max-width:820px){
  .sidebar{position:fixed; left:0; top:0; z-index:10; transform:translateX(-100%);
    transition:transform .18s ease; box-shadow:none; width:250px}
  .nav-toggle:checked ~ .shell .sidebar{transform:translateX(0)}
  .nav-toggle:checked ~ .nav-scrim{display:block}
  .side-close{display:block}
  .menu-btn{display:flex}
  .topbar{flex-wrap:wrap; gap:10px}
  .search{order:3; flex-basis:100%; max-width:none}
  .content{padding:16px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .kv{grid-template-columns:120px 1fr}
}
@media (max-width:520px){
  .g4,.g3{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap}
  .btn{padding:8px 11px}
}