/* =====================================================================
   DeskHelp — stylesheet
   ===================================================================== */

:root{
  --ink:#12172B; --panel:#fff; --bg:#EEF1F8; --line:#DFE3EE;
  --text:#1E2333; --dim:#5B6178; --faint:#8A90A6;
  --accent:#4C5FD5; --accent-dim:#EAEBFB;
  --teal:#0E9C8C;   --teal-dim:#E2F6F2;
  --amber:#C9821C;  --amber-dim:#FBEEDA;
  --coral:#D8434B;  --coral-dim:#FBE6E7;
  --violet:#7A4FCC; --violet-dim:#EFE7FB;
  --slate:#6B7290;  --slate-dim:#EDEFF6;
  --radius:10px;
  --shadow:0 1px 2px rgba(18,23,43,.06), 0 8px 24px -12px rgba(18,23,43,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; letter-spacing:-.01em}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--ink)}
button{font-family:inherit; cursor:pointer}
input,select,textarea{font-family:inherit}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------------- layout ---------------- */
.layout{display:flex; min-height:100vh}

.sidebar{
  width:230px; flex-shrink:0; background:var(--ink);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{
  padding:20px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand-mark{
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#8B7CF0);
  color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.brand-name{color:#fff; font-size:16px; font-weight:700}
.brand-tag{color:#8A90C0; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; margin-top:1px}

.nav{flex:1; overflow-y:auto; padding:12px 10px}
.nav-label{
  color:#6870A6; font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  padding:14px 10px 6px; font-weight:700;
}
.nav-item{
  display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px;
  color:#C4C8E4; font-size:13.5px; font-weight:500; margin-bottom:1px;
}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff; text-decoration:none}
.nav-item.active{background:var(--accent); color:#fff}
.nav-badge{
  margin-left:auto; background:var(--coral); color:#fff; font-size:10px;
  font-weight:700; padding:1px 6px; border-radius:20px;
}

.side-foot{padding:12px 14px 16px; border-top:1px solid rgba(255,255,255,.08)}
.side-user{
  display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.06); border-radius:10px; padding:8px 10px;
}
.side-user-name{color:#fff; font-size:12.5px; font-weight:600; line-height:1.3}
.side-user-role{color:#8A90C0; font-size:10.5px}
.side-logout{
  margin-left:auto; color:#C4C8E4; border:1px solid rgba(255,255,255,.15);
  background:transparent; border-radius:7px; padding:4px 8px; font-size:11px;
}
.side-logout:hover{color:#fff; border-color:rgba(255,255,255,.4); text-decoration:none}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  height:58px; flex-shrink:0; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 24px;
  position:sticky; top:0; z-index:20;
}
.topbar-title{font-size:17px; font-weight:700}
.topbar-right{display:flex; align-items:center; gap:12px}
.bell{
  position:relative; border:1px solid var(--line); background:#fff; color:var(--dim);
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:15px;
}
.bell:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.bell-dot{
  position:absolute; top:5px; right:5px; width:8px; height:8px; border-radius:50%;
  background:var(--coral); border:1.5px solid #fff;
}
.content{padding:22px 26px 60px; max-width:1340px; width:100%}

.avatar{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11.5px;
}
.avatar-sm{width:26px; height:26px; font-size:10px}

/* ---------------- panels ---------------- */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:18px;
}
.panel-head{
  padding:15px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.panel-head h3{font-size:14.5px}
.panel-sub{font-size:12px; color:var(--faint); margin-top:2px}
.panel-body{padding:16px 18px}

.grid-2{display:grid; grid-template-columns:1.5fr 1fr; gap:18px}
.grid-half{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:1000px){ .grid-2,.grid-half{grid-template-columns:1fr} }

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px}
.kpi{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow);
}
.kpi-val{font-size:26px; font-weight:700; line-height:1}
.kpi-lab{font-size:12px; color:var(--dim); margin-top:6px; font-weight:500}
.kpi-bar{height:4px; border-radius:20px; margin-bottom:12px; width:34px}

/* ---------------- tables ---------------- */
.table-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13px}
th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--faint); font-weight:700; padding:9px 12px;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:hover{background:#FAFBFD}
tbody tr:last-child td{border-bottom:none}
.strong{font-weight:600}
.dim{color:var(--faint); font-size:12px}
.right{text-align:right}
.nowrap{white-space:nowrap}

/* ---------------- badges ---------------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  padding:4px 9px; border-radius:20px; white-space:nowrap;
}
.st-open{background:var(--amber-dim); color:var(--amber)}
.st-progress{background:var(--accent-dim); color:var(--accent)}
.st-resolved{background:var(--teal-dim); color:var(--teal)}
.st-closed{background:var(--slate-dim); color:var(--slate)}
.st-waiting{background:var(--violet-dim); color:var(--violet)}
.st-issued{background:var(--teal-dim); color:var(--teal)}

.as-Available{background:var(--teal-dim); color:var(--teal)}
.as-Assigned{background:var(--accent-dim); color:var(--accent)}
.as-Maintenance{background:var(--amber-dim); color:var(--amber)}
.as-Transfer{background:var(--violet-dim); color:var(--violet)}
.as-Returned{background:var(--slate-dim); color:var(--slate)}
.as-Disposed{background:var(--coral-dim); color:var(--coral)}

.pr-high{background:var(--coral-dim); color:var(--coral)}
.pr-medium{background:var(--amber-dim); color:var(--amber)}
.pr-low{background:var(--teal-dim); color:var(--teal)}

.tag{background:var(--slate-dim); color:var(--slate); font-size:11px; font-weight:600;
  padding:3px 8px; border-radius:6px}

/* ---------------- buttons ---------------- */
.btn{
  border:1px solid var(--line); background:#fff; color:var(--text);
  padding:8px 14px; border-radius:8px; font-size:12.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px; transition:all .12s;
}
.btn:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:hover{background:#3E4FC0; color:#fff}
.btn-sm{padding:5px 10px; font-size:11.5px; border-radius:6px}
.btn-danger{color:var(--coral)}
.btn-danger:hover{border-color:var(--coral); color:var(--coral)}
.btn-ghost{border-color:transparent; background:none}
.btn-ghost:hover{background:var(--slate-dim); border-color:transparent}
.toolbar{display:flex; align-items:center; gap:9px; flex-wrap:wrap}

/* ---------------- forms ---------------- */
.field{margin-bottom:14px}
.field label{display:block; font-size:12px; font-weight:600; color:var(--dim); margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
  font-size:13px; color:var(--text); background:#FCFCFE;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--accent-dim); border-color:var(--accent);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
@media(max-width:700px){ .field-row,.field-row-3{grid-template-columns:1fr} }
.hint{font-size:11.5px; color:var(--faint); margin-top:4px}
.inline-form{display:inline}

.filters{display:flex; gap:6px; flex-wrap:wrap; padding:14px 18px 0}
.chip{
  font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:20px;
  background:var(--slate-dim); color:var(--dim); border:1px solid transparent;
}
.chip:hover{text-decoration:none; color:var(--accent)}
.chip.active{background:var(--accent); color:#fff}
.chip.active:hover{color:#fff}

.search-box{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line);
  border-radius:8px; padding:6px 11px; background:#FCFCFE;
}
.search-box input{border:none; background:none; font-size:13px; outline:none; padding:0; min-width:200px}

.tabs{display:flex; gap:22px; border-bottom:1px solid var(--line); padding:0 18px; flex-wrap:wrap}
.tab{
  padding:12px 0; font-size:13px; font-weight:600; color:var(--faint);
  border-bottom:2px solid transparent;
}
.tab:hover{text-decoration:none; color:var(--accent)}
.tab.active{color:var(--accent); border-color:var(--accent)}

/* ---------------- misc blocks ---------------- */
.empty{padding:44px 20px; text-align:center; color:var(--faint)}
.empty-title{font-weight:600; color:var(--dim); font-size:13.5px; margin-bottom:3px}
.empty-sub{font-size:12px}

.flash{
  padding:11px 16px; border-radius:9px; font-size:13px; font-weight:600; margin-bottom:16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.flash-success{background:var(--teal-dim); color:var(--teal)}
.flash-error{background:var(--coral-dim); color:var(--coral)}
.flash-info{background:var(--accent-dim); color:var(--accent)}

.bar-row{display:flex; align-items:center; gap:10px; margin-bottom:11px}
.bar-row:last-child{margin-bottom:0}
.bar-label{width:130px; font-size:12px; color:var(--dim); flex-shrink:0}
.bar-track{flex:1; height:9px; background:var(--slate-dim); border-radius:20px; overflow:hidden}
.bar-fill{height:100%; border-radius:20px; background:var(--accent)}
.bar-val{width:34px; text-align:right; font-size:12px; font-weight:700; color:var(--dim); flex-shrink:0}

.progress{height:6px; background:var(--slate-dim); border-radius:20px; overflow:hidden; flex:1}
.progress span{display:block; height:100%; border-radius:20px; background:var(--accent)}

.list-row{display:flex; gap:12px; padding:12px 18px; border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:none}
.list-row.unread{background:#F8F9FF}
.list-msg{font-size:13px; line-height:1.45}
.list-time{font-size:11.5px; color:var(--faint); margin-top:3px}

.kv{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:13px}
.kv dt{color:var(--faint); font-size:12px}
.kv dd{margin:0}

/* ---------------- asset movement history (plain text) ---------------- */
.mv-list{border-top:1px solid var(--line)}
.mv-item{padding:13px 18px; border-bottom:1px solid var(--line)}
.mv-item:last-child{border-bottom:none}
.mv-date{font-size:11.5px; color:var(--faint); margin-bottom:2px}
.mv-action{font-size:13.5px; font-weight:700; margin-bottom:4px}
.mv-detail{font-size:12.5px; color:var(--dim); line-height:1.65}
.mv-detail b{color:var(--text); font-weight:600}

.lifecycle{display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding:6px 0}
.lc-step{min-width:86px; text-align:center; font-size:11px; color:var(--faint); font-weight:600}
.lc-dot{
  width:14px; height:14px; border-radius:50%; margin:0 auto 7px;
  background:var(--slate-dim); border:2px solid var(--line);
}
.lc-step.done .lc-dot{background:var(--teal); border-color:var(--teal)}
.lc-step.current .lc-dot{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-dim)}
.lc-step.current{color:var(--accent)}

.comment{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; gap:12px}
.comment:last-child{border-bottom:none}
.comment-internal{background:#FFFBF2}
.comment-head{font-size:12.5px; font-weight:700; margin-bottom:3px}
.comment-body{font-size:13px; line-height:1.6; color:var(--text); white-space:pre-wrap}

.article{font-size:14px; line-height:1.75; color:var(--text); white-space:pre-wrap}

/* ---------------- login ---------------- */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(circle at 15% 20%, rgba(76,95,213,.20), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(14,156,140,.16), transparent 45%),
    var(--ink);
}
.login-card{
  width:100%; max-width:390px; background:#fff; border-radius:16px;
  padding:32px 30px 26px; box-shadow:0 30px 70px -25px rgba(0,0,0,.5);
}
.login-brand{display:flex; align-items:center; gap:10px; margin-bottom:24px}
.login-title{font-size:15px; font-weight:700; margin-bottom:2px}
.login-sub{font-size:12.5px; color:var(--faint); margin-bottom:20px}
.login-btn{width:100%; justify-content:center; padding:10px; font-size:13px; margin-top:4px}
.demo{margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.demo-label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--faint); font-weight:700; margin-bottom:9px;
}
.demo-acct{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px;
  cursor:pointer; background:#fff; width:100%; text-align:left;
}
.demo-acct:hover{border-color:var(--accent)}
.demo-role{font-size:12px; font-weight:600}
.demo-cred{font-size:11px; color:var(--faint); font-family:ui-monospace,Menlo,monospace}

/* ---------------- responsive ---------------- */
@media(max-width:860px){
  .sidebar{position:fixed; left:-230px; transition:left .2s; z-index:200}
  .sidebar.open{left:0}
  .menu-btn{display:inline-flex !important}
  .content{padding:16px}
}
.menu-btn{
  display:none; border:1px solid var(--line); background:#fff; border-radius:8px;
  width:34px; height:34px; align-items:center; justify-content:center; font-size:16px;
}

/* =====================================================================
   v2 additions
   ===================================================================== */

/* ---------------- notification bell ---------------- */
.bell{position:relative}
.bell svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.bell-count{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  background:var(--coral); color:#fff; border:2px solid #fff; border-radius:20px;
  font-size:10px; font-weight:700; line-height:14px; text-align:center;
}

/* ---------------- toast popups (replaces the flash bar) ---------------- */
.toast-wrap{
  position:fixed; top:16px; right:16px; z-index:9000;
  display:flex; flex-direction:column; gap:9px; max-width:360px;
}
.toast{
  display:flex; align-items:flex-start; gap:11px; padding:13px 15px;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:10px; box-shadow:0 12px 34px -10px rgba(18,23,43,.3);
  font-size:13px; font-weight:500; color:var(--text);
  animation:toast-in .22s cubic-bezier(.2,.9,.3,1.2);
}
.toast.leaving{animation:toast-out .18s forwards}
.toast-success{border-left-color:var(--teal)}
.toast-error{border-left-color:var(--coral)}
.toast-info{border-left-color:var(--accent)}
.toast-warning{border-left-color:var(--amber)}
.toast-icon{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:1px;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;
}
.toast-success .toast-icon{background:var(--teal)}
.toast-error .toast-icon{background:var(--coral)}
.toast-info .toast-icon{background:var(--accent)}
.toast-warning .toast-icon{background:var(--amber)}
.toast-body{flex:1;line-height:1.5}
.toast-close{
  border:none;background:none;color:var(--faint);font-size:17px;line-height:1;
  padding:0 0 0 6px;cursor:pointer;
}
.toast-close:hover{color:var(--text)}
@keyframes toast-in{from{opacity:0;transform:translateX(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateX(24px) scale(.97)}}

/* ---------------- confirm modal (replaces window.confirm) ---------------- */
.modal-veil{
  position:fixed; inset:0; z-index:9500; background:rgba(18,23,43,.45);
  backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:20px;
  animation:veil-in .15s ease;
}
.modal-card{
  background:#fff; border-radius:14px; width:100%; max-width:400px; padding:24px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.45); animation:modal-in .2s cubic-bezier(.2,.9,.3,1.15);
}
.modal-title{font-size:15.5px; font-weight:700; margin-bottom:7px}
.modal-text{font-size:13.5px; color:var(--dim); line-height:1.6; margin-bottom:20px}
.modal-actions{display:flex; gap:9px; justify-content:flex-end}
@keyframes veil-in{from{opacity:0}to{opacity:1}}
@keyframes modal-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

/* ---------------- knowledge base cards ---------------- */
/* only the heading reacts to hover, never the body text */
.kb-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 17px; box-shadow:var(--shadow); display:block; transition:border-color .12s;
}
.kb-card:hover{border-color:var(--accent); text-decoration:none}
.kb-card-title{
  font-size:14.5px; font-weight:700; color:var(--text);
  margin:8px 0 6px; display:inline-block; text-decoration:none;
}
.kb-card:hover .kb-card-title{color:var(--accent)}
.kb-card-body{font-size:12.5px; color:var(--dim); line-height:1.6; text-decoration:none}
.kb-video-flag{
  display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
  color:var(--violet); background:var(--violet-dim); padding:3px 8px; border-radius:6px;
}
.kb-video{
  position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
  border-radius:10px; border:1px solid var(--line); background:#000; margin-bottom:18px;
}
.kb-video iframe,.kb-video video{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* ---------------- profile ---------------- */
.profile-hero{
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(135deg,var(--ink) 0%,#2A3160 55%,var(--accent) 140%);
  padding:26px 24px 46px; color:#fff; position:relative;
}
.profile-hero-name{font-size:19px; font-weight:700; letter-spacing:-.02em}
.profile-hero-role{font-size:12.5px; color:#B9BEE0; margin-top:3px}
.profile-hero-chips{display:flex; gap:7px; margin-top:13px; flex-wrap:wrap}
.profile-chip{
  background:rgba(255,255,255,.14); color:#fff; font-size:11px; font-weight:600;
  padding:4px 10px; border-radius:20px; backdrop-filter:blur(4px);
}
.profile-avatar{
  width:74px; height:74px; border-radius:50%; font-size:25px; font-weight:700;
  display:flex; align-items:center; justify-content:center; color:#fff;
  border:4px solid #fff; box-shadow:0 6px 20px -6px rgba(0,0,0,.5);
  margin:-40px 0 0 24px; position:relative; z-index:2;
}
.profile-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:12px; padding:18px 24px 4px;
}
.profile-stat{
  border:1px solid var(--line); border-radius:10px; padding:13px 15px; background:#FAFBFD;
}
.profile-stat-val{font-size:21px; font-weight:700; line-height:1}
.profile-stat-lab{font-size:11.5px; color:var(--faint); margin-top:5px; font-weight:600}
.profile-meta{padding:8px 24px 22px}
.profile-meta-row{
  display:flex; justify-content:space-between; gap:14px; padding:10px 0;
  border-bottom:1px solid var(--line); font-size:13px;
}
.profile-meta-row:last-child{border-bottom:none}
.profile-meta-row dt{color:var(--faint); font-size:12.5px}
.profile-meta-row dd{margin:0; font-weight:600; text-align:right}

/* ---------------- dashboard widget picker ---------------- */
.widget-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:11px}
.widget-opt{
  display:flex; gap:11px; align-items:flex-start; padding:13px 15px;
  border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:all .12s;
  background:#fff;
}
.widget-opt:hover{border-color:var(--accent)}
.widget-opt input{width:auto; margin-top:2px; flex-shrink:0; accent-color:var(--accent)}
.widget-opt-name{font-size:13px; font-weight:600}
.widget-opt-desc{font-size:11.5px; color:var(--faint); margin-top:2px; line-height:1.5}
.widget-opt.on{border-color:var(--accent); background:#F8F9FF}

/* ---------------- misc ---------------- */
.subject-preview{
  padding:9px 12px; background:var(--accent-dim); border-radius:8px;
  font-size:13px; font-weight:600; color:var(--accent);
}
.empty-cta{margin-top:14px}

/* =====================================================================
   v3 additions
   ===================================================================== */

/* roomier ticket filter rows */
.filters-status{
  padding:16px 18px 8px; gap:8px; align-items:center;
  border-bottom:1px solid var(--line);
}
.filters-type{
  padding:12px 18px; gap:8px; align-items:center;
}
.filters-label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--faint); font-weight:700; margin-right:6px; align-self:center;
}
.filters-status .chip, .filters-type .chip{ padding:6px 13px; }

/* =====================================================================
   v4 additions
   ===================================================================== */

/* asset status badges - class names are slugged, so no slash issues */
.as-newly-purchased{background:var(--violet-dim); color:var(--violet)}
.as-assigned{background:var(--accent-dim); color:var(--accent)}
.as-unassigned{background:var(--teal-dim); color:var(--teal)}
.as-maintenance-damage{background:var(--amber-dim); color:var(--amber)}
.as-disposed{background:var(--coral-dim); color:var(--coral)}

/* attachment picker with a clear button */
.file-field{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.file-field input[type=file]{flex:1; min-width:200px}
.file-clear{
  border:1px solid var(--line); background:#fff; color:var(--coral);
  width:30px; height:30px; border-radius:8px; font-size:15px; line-height:1;
  display:none; align-items:center; justify-content:center; flex-shrink:0;
}
.file-clear:hover{border-color:var(--coral); background:var(--coral-dim)}
.file-clear.show{display:flex}
.file-chosen{font-size:12px; color:var(--dim); flex-basis:100%}

/* contact card */
.contact-card{display:grid; gap:2px}
.contact-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:13px;
}
.contact-row:last-child{border-bottom:none}
.contact-label{color:var(--faint); font-size:12.5px}
.contact-value{font-weight:600; text-align:right}
.contact-urgent{color:var(--coral)}

/* read-only closed ticket notice */
.locked-note{
  padding:14px 16px; background:var(--slate-dim); border-radius:9px;
  font-size:13px; color:var(--dim); line-height:1.6;
}

/* form builder question cards */
.q-card{
  border:1px solid var(--line); border-radius:10px; padding:13px 15px;
  margin-bottom:9px; background:#fff;
}
.q-card.is-section{background:var(--accent-dim); border-color:transparent}
.q-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.q-label{font-size:13.5px; font-weight:600}
.q-meta{font-size:11.5px; color:var(--faint); margin-top:3px}
.q-req{color:var(--coral); font-weight:700}
.field-section{
  font-size:14px; font-weight:700; margin:22px 0 6px; padding-bottom:7px;
  border-bottom:2px solid var(--accent-dim);
}
.opt-list{display:grid; gap:7px; margin-top:3px}
.opt-row{display:flex; align-items:center; gap:8px; font-size:13px}
.opt-row input{width:auto; accent-color:var(--accent)}

/* =====================================================================
   v5 - organisation switcher, grid dashboard, dynamic asset fields
   ===================================================================== */

/* org switcher in the top bar */
.org-switch{
  display:flex; align-items:center; gap:7px; border:1px solid var(--line);
  background:#fff; border-radius:9px; padding:5px 10px;
}
.org-switch select{
  border:none; background:none; font-size:12.5px; font-weight:600;
  color:var(--text); outline:none; cursor:pointer; padding:0;
}
.org-badge{
  background:var(--ink); color:#fff; font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:5px; letter-spacing:.04em;
}

/* dashboard chrome */
.dash-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:16px; flex-wrap:wrap;
}
.dash-tabs{display:flex; gap:6px; flex-wrap:wrap}
.dash-tab{
  font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:20px;
  background:var(--slate-dim); color:var(--dim);
}
.dash-tab:hover{text-decoration:none; color:var(--accent)}
.dash-tab.active{background:var(--accent); color:#fff}
.dash-tab.active .dim{color:#C9CEF5}
.chip-row{display:flex; gap:7px; flex-wrap:wrap}
.add-widget{border:1px dashed var(--line); cursor:pointer}
.add-widget:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-dim)}

/* the 12 column grid */
.dash-grid{
  display:grid; grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:56px; gap:14px; align-items:stretch; position:relative;
}
.dash-item{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; position:relative;
}
.dash-item-head{
  padding:11px 15px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-shrink:0;
}
.dash-item-title{font-size:13.5px; font-weight:700}
.dash-item-body{padding:13px 15px; overflow:auto; flex:1; min-height:0}
.dash-item-body table{font-size:12.5px}
.dash-item-body th{padding:6px 9px}
.dash-item-body td{padding:8px 9px}

.dash-remove, .dash-resize, .dash-move-veil{display:none}

/* edit mode */
.dash-grid[data-editing="1"] .dash-item{
  border-color:var(--accent); border-style:dashed; cursor:grab; user-select:none;
}
.dash-grid[data-editing="1"] .dash-item.dragging{
  opacity:.85; cursor:grabbing; z-index:50; box-shadow:0 18px 40px -12px rgba(18,23,43,.4);
}
.dash-grid[data-editing="1"] .dash-move-veil{
  display:block; position:absolute; inset:0; z-index:5; background:transparent;
}
.dash-grid[data-editing="1"] .dash-remove{
  display:flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:6px; border:1px solid var(--line);
  background:#fff; color:var(--coral); font-size:15px; line-height:1; cursor:pointer;
  position:relative; z-index:10;
}
.dash-grid[data-editing="1"] .dash-remove:hover{background:var(--coral-dim); border-color:var(--coral)}
.dash-grid[data-editing="1"] .dash-resize{
  display:block; position:absolute; right:3px; bottom:3px; width:18px; height:18px;
  cursor:nwse-resize; z-index:10; border-right:3px solid var(--accent);
  border-bottom:3px solid var(--accent); border-bottom-right-radius:5px; opacity:.65;
}
.dash-grid[data-editing="1"] .dash-resize:hover{opacity:1}
.dash-placeholder{
  border:2px dashed var(--accent); border-radius:var(--radius);
  background:var(--accent-dim); opacity:.55;
}

/* panel internals */
.kpi-strip{display:flex; gap:10px; flex-wrap:wrap; height:100%; align-items:stretch}
.kpi-mini{
  flex:1; min-width:105px; border:1px solid var(--line); border-radius:9px;
  padding:10px 12px; background:#FCFCFE;
}
.kpi-mini .kpi-bar{height:3px; width:26px; border-radius:20px; margin-bottom:8px}
.kpi-mini .kpi-val{font-size:20px; font-weight:700; line-height:1}
.kpi-mini .kpi-lab{font-size:11px; color:var(--dim); margin-top:4px; font-weight:600}

.split-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 0; border-bottom:1px solid var(--line);
}
.split-row:last-child{border-bottom:none}
.ann-row{padding:9px 0; border-bottom:1px solid var(--line); font-size:13px}
.ann-row:last-child{border-bottom:none}

/* expiry alerts */
.alert-list{display:flex; flex-direction:column}
.alert-row{
  display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--line); font-size:12.5px; color:var(--text);
}
.alert-row:last-child{border-bottom:none}
.alert-row:hover{text-decoration:none; background:#FAFBFD}
.alert-kind{
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; flex-shrink:0;
  background:var(--slate-dim); color:var(--slate);
}
.alert-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.alert-when{font-size:11.5px; font-weight:700; flex-shrink:0}
.alert-past .alert-kind{background:var(--coral-dim); color:var(--coral)}
.alert-past .alert-when{color:var(--coral)}
.alert-soon .alert-kind{background:var(--amber-dim); color:var(--amber)}
.alert-soon .alert-when{color:var(--amber)}
.alert-ok .alert-when{color:var(--faint)}

/* dynamic asset detail fields */
.asset-section{
  border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:14px;
  background:#FCFCFE;
}
.asset-section-title{
  font-size:12.5px; font-weight:700; color:var(--accent);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px;
}
.tag-preview{
  font-family:ui-monospace,Menlo,monospace; font-size:13px; font-weight:700;
  color:var(--accent); background:var(--accent-dim); padding:9px 12px; border-radius:8px;
}

@media(max-width:900px){
  .dash-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:auto}
  .dash-item{grid-column:1 / -1 !important; grid-row:auto !important; min-height:220px}
}

[hidden]{display:none !important}

/* ---------------- asset form builder ---------------- */
.fb-section{
  border:1px solid var(--line); border-radius:10px; margin-bottom:16px;
  background:#fff; overflow:hidden;
}
.fb-section-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:11px 14px; background:var(--accent-dim); border-bottom:1px solid var(--line);
}
.fb-rename{display:flex; gap:7px; align-items:center}
.fb-rename input{
  border:1px solid transparent; background:rgba(255,255,255,.7); border-radius:7px;
  padding:6px 10px; font-size:13px; font-weight:700; color:var(--accent); min-width:220px;
}
.fb-rename input:focus{border-color:var(--accent); background:#fff; outline:none}
.fb-field{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; border-bottom:1px solid var(--line);
}
.fb-field:last-of-type{border-bottom:none}
.fb-field:hover{background:#FAFBFD}
.fb-field-main{min-width:0; flex:1}
.fb-field-label{font-size:13.5px; font-weight:600}
.fb-field-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px; font-size:11.5px}
.fb-editing{display:block; background:#F8F9FF; border-bottom:1px solid var(--line)}
.fb-add-inline{
  display:flex; gap:8px; align-items:center; padding:11px 14px; flex-wrap:wrap;
  background:#FAFBFD; border-top:1px dashed var(--line);
}
.fb-add-inline input[type=text]{
  flex:1; min-width:200px; padding:7px 11px; border:1px solid var(--line);
  border-radius:8px; font-size:13px;
}
.fb-add-inline select{padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:12.5px}
.fb-new{border-style:dashed}
.fb-new .fb-section-head{background:var(--slate-dim)}

/* conditional field controls in the builders */
.fb-depends{
  border:1px dashed var(--line); border-radius:9px; padding:12px 14px;
  margin-bottom:14px; background:#FAFBFD;
}
.fb-depends-title{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--faint); margin-bottom:10px;
}
.fb-cond{
  display:inline-block; font-size:11px; font-weight:600; padding:2px 8px;
  border-radius:5px; background:var(--violet-dim); color:var(--violet);
}
.fb-cond b{font-weight:700}

/* movement history: plain-English line and bundle markers */
.mv-story{
  font-size:12.5px; color:var(--text); line-height:1.55; margin-bottom:6px;
}
.mv-item.mv-bundle{border-left:3px solid var(--violet); padding-left:15px}
.mv-item.mv-inherited{border-left:3px solid var(--teal); padding-left:15px}
.mv-flag{
  display:inline-block; margin-left:7px; font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; padding:2px 6px; border-radius:4px;
}
.mv-flag-bundle{background:var(--violet-dim); color:var(--violet)}
.mv-flag-inherit{background:var(--teal-dim); color:var(--teal)}

/* ---------------- employee card popup ---------------- */
.uc-modal{max-width:860px; width:100%; max-height:88vh; display:flex; flex-direction:column; padding:0}
.uc-modal-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.uc-modal-bar .modal-title{margin:0}
.uc-body{padding:18px 20px 22px; overflow:auto; flex:1; min-height:0}
.uc-head{display:flex; align-items:center; gap:13px; margin-bottom:16px; flex-wrap:wrap}
.uc-name{font-size:16.5px; font-weight:700}
.uc-sub{font-size:12.5px; color:var(--dim); margin-top:2px}
.uc-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin-bottom:14px}
.uc-stat{border:1px solid var(--line); border-radius:9px; padding:11px 13px; background:#FAFBFD}
.uc-stat-val{font-size:19px; font-weight:700; line-height:1}
.uc-stat-lab{font-size:11px; color:var(--faint); margin-top:4px; font-weight:600}
.uc-meta{
  display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--dim);
  padding:11px 13px; border:1px solid var(--line); border-radius:9px; margin-bottom:6px;
}
.uc-meta b{color:var(--faint); font-weight:600; font-size:11px; text-transform:uppercase;
  letter-spacing:.04em; margin-right:5px}
.uc-section-title{
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--accent); margin:20px 0 9px;
}
.uc-empty{font-size:13px; color:var(--faint); padding:12px 0}
.uc-body .mv-list{border-top:1px solid var(--line)}
.uc-body table{font-size:12.5px}
/* =====================================================================
   v6 — reports, exports, audits, duplicate warnings
   ===================================================================== */

/* ---- two-option export menu ---- */
.export-menu{position:relative}
.export-pop{
  position:absolute; right:0; top:calc(100% + 6px); z-index:40;
  width:290px; padding:6px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.export-pop[hidden]{display:none}
.export-opt{
  display:flex; gap:11px; align-items:flex-start;
  padding:10px; border-radius:8px; text-decoration:none; color:var(--text);
}
.export-opt:hover{background:var(--accent-dim)}
.export-opt b{display:block; font-size:13px; font-weight:650; margin-bottom:2px}
.export-opt small{display:block; font-size:11.5px; color:var(--dim); line-height:1.4}
.export-ico{
  flex:0 0 34px; height:34px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; letter-spacing:.4px; color:#fff;
}
.export-pdf{background:var(--coral)}
.export-xls{background:var(--teal)}
.export-more{background:var(--slate); font-size:18px; font-weight:600}

/* ---- reports ---- */
.report-blurb{
  font-size:13px; color:var(--dim); margin-bottom:14px;
  padding:10px 12px; background:var(--slate-dim); border-radius:8px;
}
.report-filters{margin-top:4px}
.report-table{font-size:12.5px}
.report-table th, .report-table td{white-space:nowrap}
.report-table td.center, .report-table th.center{text-align:center}
.report-table tfoot th{
  background:var(--accent-dim); color:var(--ink);
  font-size:12px; font-weight:700; border-top:2px solid var(--line);
}

/* KPI cards became links on the dashboard */
a.kpi-mini{text-decoration:none; color:inherit; transition:border-color .12s, transform .12s}
a.kpi-mini:hover{border-color:var(--accent); transform:translateY(-1px)}

/* ---- dashboard panel titles link through ---- */
.dash-item-link{
  text-decoration:none; color:inherit;
  display:inline-flex; align-items:center; gap:4px;
}
.dash-item-link:hover{color:var(--accent)}
.dash-go{opacity:0; font-size:16px; line-height:1; transition:opacity .12s, transform .12s}
.dash-item-link:hover .dash-go{opacity:1; transform:translateX(2px)}
.dash-grid[data-editing="1"] .dash-item-link{pointer-events:none}

/* ---- the extra-item warning under an employee picker ---- */
.dupe-note{
  margin-top:6px; padding:8px 10px; border-radius:8px;
  background:var(--amber-dim); border:1px solid rgba(201,130,28,.28);
  color:#8A5A10; font-size:11.5px; line-height:1.5;
}
select.dupe-flag{border-color:var(--amber); background:#FFFDF8}

/* the confirm dialog carries a longer message here, so let it breathe */
.modal-text{white-space:pre-line}

/* =====================================================================
   v7 — policy library
   ===================================================================== */

.policy-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:12px;
}
.policy-card{
  display:flex; gap:12px; padding:14px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); text-decoration:none; color:var(--text);
  transition:border-color .12s, transform .12s, box-shadow .12s;
}
.policy-card:hover{border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--shadow)}
.policy-off{opacity:.6}
.policy-ico{
  flex:0 0 40px; height:48px; border-radius:6px; background:var(--coral);
  color:#fff; font-size:10px; font-weight:800; letter-spacing:.5px;
  display:flex; align-items:center; justify-content:center;
}
.policy-meta{min-width:0}
.policy-title{font-size:13.5px; font-weight:650; margin-bottom:3px}
.policy-sub{font-size:11.5px; color:var(--faint)}
.policy-blurb{font-size:12px; color:var(--dim); margin-top:6px; line-height:1.5}
.policy-tags{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px}

/* the reader itself */
.policy-stage{
  position:relative; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; min-height:420px; overflow:auto;
  user-select:none; -webkit-user-select:none;
}
.policy-canvas-wrap{display:flex; justify-content:center}
.policy-stage canvas{
  max-width:100%; height:auto;
  background:#fff; box-shadow:0 2px 14px rgba(18,23,43,.14); border-radius:4px;
  pointer-events:none;               /* nothing to select, drag or save */
}
/* an invisible sheet over the canvas, so "save image as" has no target */
.policy-guard{position:absolute; inset:0; background:transparent}

/* if anyone reaches the print dialog anyway, there is nothing on the page */
@media print{
  .policy-stage, .policy-stage *{display:none !important}
  .policy-stage::after{
    content:"This policy is read only and cannot be printed.";
    display:block !important; padding:40px; font-family:system-ui, sans-serif;
  }
}

/* =====================================================================
   v8 — asset filters, announcements, motion and responsiveness
   ===================================================================== */

/* ---- parent / child rows ---- */
tr.row-parent > td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.row-child  > td:first-child{box-shadow:inset 3px 0 0 var(--line); padding-left:26px}
.tree-tick{color:var(--faint); margin-right:5px}
.tag-bundle{
  background:var(--accent-dim); color:var(--accent);
  font-size:10.5px; font-weight:700; margin-left:6px;
}

/* ---- announcements ---- */
.check-grid{display:flex; flex-wrap:wrap; gap:8px}
.check-pill{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--panel); font-size:12.5px;
  transition:border-color .16s ease, background .16s ease, transform .12s ease;
}
.check-pill:hover{border-color:var(--accent); transform:translateY(-1px)}
.check-pill input{width:auto; margin:0; accent-color:var(--accent)}
.check-pill:has(input:checked){background:var(--accent-dim); border-color:var(--accent); font-weight:600}

.file-field{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.file-field input[type=file]{flex:1 1 240px}
.file-chosen{font-size:12px; color:var(--dim)}
.file-clear{
  border:1px solid var(--line); background:var(--panel); color:var(--dim);
  border-radius:8px; padding:6px 12px; font-size:12px; cursor:pointer;
  transition:border-color .16s ease, color .16s ease;
}
.file-clear:hover{border-color:var(--coral); color:var(--coral)}

.img-preview{display:flex; flex-wrap:wrap; gap:9px; margin-top:10px}
.img-preview-thumb{
  width:78px; height:78px; object-fit:cover; border-radius:8px;
  border:1px solid var(--line); animation:pop .28s ease both;
}
.ann-images{display:flex; flex-wrap:wrap; gap:9px; margin:11px 0 4px}
.ann-thumb{
  display:block; width:118px; height:88px; border-radius:9px; overflow:hidden;
  border:1px solid var(--line); background:var(--bg);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ann-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.ann-thumb:hover{transform:scale(1.04); border-color:var(--accent); box-shadow:var(--shadow)}

.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(10,13,25,.82); padding:34px; cursor:zoom-out;
  opacity:0; transition:opacity .2s ease;
}
.lightbox.open{opacity:1}
.lightbox img{max-width:100%; max-height:82vh; border-radius:10px; display:block;
  transform:scale(.96); transition:transform .22s cubic-bezier(.2,.9,.3,1)}
.lightbox.open img{transform:scale(1)}
.lightbox figcaption{color:#E7E9F2; font-size:12.5px; text-align:center; margin-top:11px}

/* ---- motion ---- */
@keyframes pop{from{opacity:0; transform:scale(.9)} to{opacity:1; transform:scale(1)}}

.will-reveal{opacity:0; transform:translateY(10px);
  transition:opacity .42s ease, transform .42s cubic-bezier(.2,.9,.3,1)}
.will-reveal.in-view{opacity:1; transform:none}

.reveal{animation:slideDown .26s cubic-bezier(.2,.9,.3,1) both}
@keyframes slideDown{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

.btn,.chip,.tab,.policy-card,.kpi-mini,.export-opt,.list-row,.check-pill{
  position:relative; overflow:hidden;
  transition:background .16s ease, color .16s ease, border-color .16s ease,
             transform .14s ease, box-shadow .18s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 3px 10px -4px rgba(18,23,43,.35)}
.btn:active{transform:translateY(0) scale(.985)}
.chip:hover{transform:translateY(-1px)}
.list-row{transition:background .16s ease}
.list-row:hover{background:var(--bg)}
.tab::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:center;
  transition:transform .22s cubic-bezier(.2,.9,.3,1);
}
.tab:hover::after{transform:scaleX(.55)}
.tab.active::after{transform:scaleX(1)}

.ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:currentColor; opacity:.22; transform:scale(0);
  animation:ripple .55s ease-out forwards;
}
@keyframes ripple{to{transform:scale(2.4); opacity:0}}

/* a light, single-tone row hover — not a per-cell wash */
tbody tr{transition:background .14s ease}
.table-wrap tbody tr:hover > td{background:#F7F8FC}
a{transition:color .15s ease}
.badge,.tag{transition:transform .14s ease}
.badge:hover,.tag:hover{transform:translateY(-1px)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .will-reveal{opacity:1; transform:none}
}

/* ---- responsive ---- */
.nav-toggle{display:none}
.nav-veil{display:none}

@media (max-width:1100px){
  .grid-2{grid-template-columns:1fr}
  .field-row-3{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width:900px){
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; z-index:120; width:250px;
    transform:translateX(-102%); transition:transform .26s cubic-bezier(.2,.9,.3,1);
    box-shadow:0 0 40px rgba(10,13,25,.28);
  }
  .sidebar.open{transform:none}
  .main, .content{margin-left:0 !important; width:100% !important}

  .nav-toggle{
    display:flex; position:fixed; left:14px; bottom:16px; z-index:130;
    width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
    background:var(--accent); box-shadow:0 6px 20px -6px rgba(18,23,43,.6);
    flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  .nav-toggle span{display:block; width:18px; height:2px; border-radius:2px; background:#fff}
  .nav-veil{
    display:block; position:fixed; inset:0; z-index:110;
    background:rgba(10,13,25,.45); opacity:0; pointer-events:none;
    transition:opacity .24s ease;
  }
  .nav-veil.on{opacity:1; pointer-events:auto}

  .field-row, .field-row-3{grid-template-columns:1fr}
  .panel-head{align-items:flex-start; flex-direction:column}
  .search-box input{min-width:0; width:100%}
  .search-box{width:100%}
  .toolbar{width:100%}
  .export-pop{right:auto; left:0; width:min(290px, 88vw)}
  .policy-grid{grid-template-columns:1fr}
  .kpi-strip{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width:640px){
  .asset-filterbar .ff{flex:1 1 100%; min-width:0}
  .kpi-strip{grid-template-columns:1fr 1fr}
  .tabs{gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tab{white-space:nowrap}
  .filters{overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:4px}
  .filters .chip{white-space:nowrap}
  .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .table-wrap table{min-width:660px}
  .ann-thumb{width:calc(50% - 5px); height:104px}
  .lightbox{padding:14px}
  .panel-body{padding:13px 14px}
  .panel-head{padding:13px 14px}
}

/* =====================================================================
   v9 — filter popover, and colour-only link hovers
   ===================================================================== */

.filter-menu{position:relative}
.btn-filter-on{border-color:var(--accent); color:var(--accent); background:var(--accent-dim)}
.filter-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 5px; margin-left:5px;
  border-radius:999px; background:var(--accent); color:#fff;
  font-size:10.5px; font-weight:700;
}
.filter-pop{
  position:absolute; right:0; top:calc(100% + 6px); z-index:45;
  width:290px; padding:14px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  animation:popIn .18s cubic-bezier(.2,.9,.3,1) both;
}
.filter-pop[hidden]{display:none}
@keyframes popIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.filter-pop-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:10px; margin-bottom:11px; border-bottom:1px solid var(--line);
  font-size:13px;
}
.filter-pop .ff{display:flex; flex-direction:column; gap:5px; margin-bottom:11px}
.filter-pop .ff label{font-size:11px; font-weight:600; color:var(--dim)}
.filter-pop select{
  padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  font-size:12.5px; background:#FCFCFE; color:var(--text); width:100%;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.filter-pop select:hover{border-color:var(--accent)}
.filter-pop select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim)}
.filter-apply{width:100%; justify-content:center}

.filter-clear{font-size:11.5px; color:var(--coral); font-weight:600}
.filter-clear:hover{color:var(--coral); opacity:.75}

.active-filters{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:9px 18px; border-bottom:1px solid var(--line);
  background:var(--bg); font-size:12px;
}

/* colour shifts on hover, never underlines */
.export-opt,.export-opt b,.export-opt small,
.policy-card,.policy-title,.policy-blurb,.policy-sub,
.kb-card,.kb-card-title,.list-row a,.nav-item,.chip,.tab,.btn{
  text-decoration:none !important;
}
.export-opt:hover b{color:var(--accent)}
.policy-card:hover .policy-title{color:var(--accent)}
.table-wrap td a:hover{color:var(--ink)}

@media (max-width:900px){
  .filter-pop{right:auto; left:0; width:min(290px, 88vw)}
}

/* ---- bulk import ---- */
.import-steps{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px; margin-bottom:6px;
}
.import-step{
  display:flex; gap:11px; padding:13px 14px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg);
  transition:border-color .16s ease, transform .16s ease;
}
.import-step:hover{border-color:var(--accent); transform:translateY(-1px)}
.import-num{
  flex:0 0 24px; height:24px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.import-step b{display:block; font-size:13px; margin-bottom:3px}
.import-step small{display:block; font-size:11.5px; color:var(--dim); line-height:1.55}

tr.imp-create > td:first-child{box-shadow:inset 3px 0 0 var(--teal)}
tr.imp-update > td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
tr.imp-skip   > td:first-child{box-shadow:inset 3px 0 0 var(--coral)}
tr.imp-skip > td{background:#FEF7F7}