/* =====================================================================
   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; cursor:pointer; font-family:inherit;
}
.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}
.report-group{align-items:center}
.report-group + .report-group{padding-top:8px}
.report-group-label{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--dim); min-width:96px}
.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{background:#FAFBFD}
/* The row used to be one <a>; a Subscription row now also carries a
   "no need to notify" form beside it, so the link is scoped to its own
   element instead of the whole row. */
.alert-row-link{
  display:flex; align-items:center; gap:10px; flex:1; min-width:0;
  color:inherit; text-decoration:none;
}
.alert-row-link:hover{text-decoration:none}
.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)}
.alert-dismiss-form{flex-shrink:0; margin:0}
.alert-dismiss-btn{
  background:none; border:0; cursor:pointer; color:var(--faint);
  font-size:12px; line-height:1; padding:4px 6px; border-radius:5px;
}
.alert-dismiss-btn:hover{background:var(--coral-dim); color:var(--coral)}

/* 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-modal-actions{display:flex; align-items:center; gap:8px; flex-shrink: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}

/* Import preview: the per-row action control.

   It replaced a coloured badge, and a bare dropdown next to eighteen
   coloured rows read as a downgrade — the pill shape is what makes the
   Create / Update / Skip distinction scannable. So the select is styled
   as the badge it replaced, keeping the same three colours, and only the
   caret gives away that it can be changed. */
select.imp-act{
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:700; font-family:inherit;
  padding:4px 22px 4px 9px; border-radius:20px; white-space:nowrap;
  border:1px solid transparent; cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center; background-size:11px;
  transition:transform .14s ease;
}
select.imp-act:hover{transform:translateY(-1px)}
select.imp-act:focus{outline:2px solid var(--accent); outline-offset:1px}

/* Coloured to match the row, set from the option in view. */
select.imp-act[data-state="create"]{background-color:var(--teal-dim);  color:var(--teal)}
select.imp-act[data-state="update"]{background-color:var(--amber-dim); color:var(--amber)}
select.imp-act[data-state="skip"]  {background-color:var(--coral-dim); color:var(--coral)}

/* A row that cannot be changed keeps the same shape as one that can, so
   the column reads consistently; the caret is dropped and the cursor
   left alone, which is what says "not yours to change". */
select.imp-act[disabled]{background-image:none; padding-right:9px; cursor:default; opacity:1}
select.imp-act[disabled]:hover{transform:none}

/* The dropdown list itself is a normal menu, not a pill. */
select.imp-act option{background:#fff; color:var(--ink); font-weight:600}


/* Searchable dropdown (see app.js).

   Built to look exactly like the native <select> beside it, so a form
   with one searchable field and several plain ones still reads as one
   set of controls. Only the panel that opens is different. */
.combo{position:relative}

/* The real <select> is kept for form submission and validation, clipped
   rather than display:none so the browser can still focus it when a
   required field is empty. */
select.combo-native{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.combo-btn{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; text-align:left; font:inherit; font-size:13.5px; color:var(--ink);
  padding:9px 11px; background:#fff;
  border:1px solid var(--line); border-radius:8px; cursor:pointer;
}
.combo-btn::after{
  content:""; width:9px; height:9px; flex:0 0 9px;
  border-right:1.6px solid #667; border-bottom:1.6px solid #667;
  transform:rotate(45deg) translate(-2px,-2px);
}
.combo-btn:hover{border-color:#b9bed0}
.combo-btn:focus{outline:2px solid var(--accent); outline-offset:1px}
.combo-btn.is-empty{color:#8a90a2}

.combo-pop{
  position:absolute; z-index:40; top:calc(100% + 4px); left:0; right:0;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 12px 30px rgba(16,20,40,.14); overflow:hidden;
}
.combo-search{
  display:block; width:100%; box-sizing:border-box;
  padding:10px 12px; font:inherit; font-size:13.5px;
  border:0; border-bottom:1px solid var(--line); outline:none;
}
.combo-list{max-height:260px; overflow-y:auto; padding:4px}
.combo-opt{
  padding:8px 10px; font-size:13.5px; border-radius:6px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.combo-opt.is-active{background:var(--accent); color:#fff}
.combo-opt.is-selected{font-weight:600}
.combo-opt.is-selected.is-active{color:#fff}
.combo-none{padding:12px; font-size:13px; color:#8a90a2}

/* Reason field inside the confirm dialog. Actions that end or change an
   asset's life ask why, and refuse to proceed without an answer. */
.modal-reason{margin:14px 0 4px}
.modal-reason-label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px}
.modal-reason-input{
  width:100%; box-sizing:border-box; padding:9px 11px;
  font:inherit; font-size:13.5px;
  border:1px solid var(--line); border-radius:8px; background:#fff;
}
.modal-reason-input:focus{outline:2px solid var(--accent); outline-offset:1px}
.modal-reason-err{margin-top:6px; font-size:12px; color:var(--coral)}

/* Row of status buttons in Quick Actions. */
.qa-row{display:flex; flex-wrap:wrap; gap:8px}

/* Quick Actions: one colour per kind of action, so the row can be read
   at a glance rather than by reading every label. Green takes something
   back into your hands, amber sends it away and expects it to return,
   red ends its life. Transfer stays the accent colour, matching Assign —
   both hand the asset to a person. */
.btn-return{
  border-color:#bfe6d2; color:#0f7a4d; background:#f2fbf6;
}
.btn-return:hover{background:#e6f7ee; border-color:#8fd6b4}

.btn-maint{
  border-color:#f2ddb0; color:#98620a; background:#fffaf0;
}
.btn-maint:hover{background:#fdf2dc; border-color:#e8c67f}

/* The panel a Quick Action button opens. */
.qa-panel{
  margin-top:12px; padding:14px; border:1px solid var(--line);
  border-radius:10px; background:#fbfbfe;
}
.qa-row .btn.is-open{box-shadow:inset 0 0 0 1px var(--accent)}

/* Add-to-bundle row: the picker, an optional reason and the button on one
   line, wrapping to two on a narrow screen rather than stacking always. */
.bundle-add{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
.bundle-add .btn{flex:0 0 auto}

/* Second course of action in a confirm dialog — a real choice, not a
   stronger yes, so it reads as a peer of Confirm rather than a warning. */
.modal-actions .btn-alt{
  border-color:#f2ddb0; color:#98620a; background:#fffaf0; margin-right:auto;
}
.modal-actions .btn-alt:hover{background:#fdf2dc; border-color:#e8c67f}

/* One salvaged part per row: category, description, serial. */
.salvage-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px}
/* idle timeout warning (same behaviour as WHC-Projects) */
.idle-bar{position:fixed;top:0;left:0;right:0;z-index:9999;display:flex;gap:14px;align-items:center;
  justify-content:center;padding:10px 16px;background:#a32d2d;color:#fff;font-size:13px;font-weight:600;
  box-shadow:0 2px 10px rgba(0,0,0,.25);font-variant-numeric:tabular-nums}
.idle-bar button{background:#fff;color:#a32d2d;border:0;border-radius:6px;padding:5px 14px;font-weight:700;cursor:pointer}

/* ---- Service desk (v13) ---- */
.st-hold{background:var(--violet-dim); color:var(--violet)}
.st-cancelled{background:var(--slate-dim); color:var(--slate); text-decoration:line-through}
.pr-critical{background:var(--coral); color:#fff}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.state-flow{display:flex; gap:4px; margin:0 0 14px; flex-wrap:wrap}
.state-step{flex:1; min-width:110px; text-align:center; padding:8px 10px; font-size:12px; font-weight:600;
  background:var(--panel); border:1px solid var(--line); color:var(--faint); border-radius:6px}
.state-step.done{background:var(--teal-dim); color:var(--teal); border-color:transparent}
.state-step.current{background:var(--accent); color:#fff; border-color:var(--accent)}
.state-step.muted{opacity:.5}
.panel-callout{border-left:4px solid var(--accent)}
.seg{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px; font-size:13px}
.seg label{display:flex; align-items:center; gap:6px; cursor:pointer}
.seg input{width:auto}
.history-row{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; padding:8px 18px;
  border-bottom:1px solid var(--line); font-size:12.5px; color:var(--dim)}
.history-dot{width:7px; height:7px; border-radius:50%; background:var(--line); flex-shrink:0; transform:translateY(-1px)}
.rating-row{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap}
.rating-pick{display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer;
  border:1px solid var(--line); border-radius:8px; padding:8px 12px; min-width:64px}
.rating-pick input{position:absolute; opacity:0}
.rating-pick span{font-size:18px; font-weight:700}
.rating-pick small{font-size:11px; color:var(--faint)}
.rating-pick:has(input:checked){border-color:var(--accent); background:var(--accent-dim); color:var(--accent)}
.rating-pick:has(input:focus-visible){outline:2px solid var(--accent)}
.mini-table{border-collapse:collapse; font-size:12.5px}
.mini-table th,.mini-table td{padding:7px 9px; border-bottom:1px solid var(--line); text-align:left}
.mini-table th{font-size:11px; color:var(--faint); text-transform:none}
.cert-status{display:inline-block; padding:2px 8px; border-radius:6px; font-size:11.5px; font-weight:600}
.lc-track{display:flex; gap:4px; flex-wrap:wrap}
.lc-track span{flex:1; min-width:90px; text-align:center; font-size:11.5px; padding:6px; border-radius:6px;
  background:var(--slate-dim); color:var(--slate)}
.lc-track span.on{background:var(--accent); color:#fff}
.lc-track span.past{background:var(--teal-dim); color:var(--teal)}
@media (max-width: 700px){ .state-step{min-width:70px; font-size:11px; padding:6px} }
.mini-table .mono, .mini-table td:first-child a.mono{white-space:nowrap}

/* ---- Installable app (PWA) ---- */
.pwa-offline{position:fixed; left:0; right:0; bottom:0; z-index:90; background:#12172B; color:#fff;
  padding:10px 16px; font-size:13px; text-align:center; box-shadow:0 -4px 16px rgba(0,0,0,.2)}
.pwa-install{white-space:nowrap}
.pwa-drafts a{white-space:nowrap}
.pwa-dialog{border:none; border-radius:12px; padding:20px 22px; max-width:360px; box-shadow:var(--shadow)}
.pwa-dialog::backdrop{background:rgba(18,23,43,.45)}
.scan-wrap{max-width:720px}
.scan-stage{position:relative; background:#000; border-radius:12px; overflow:hidden; aspect-ratio:4/3; max-height:70vh}
.scan-stage video{width:100%; height:100%; object-fit:cover; display:block}
.scan-frame{position:absolute; inset:18% 22%; border:3px solid rgba(255,255,255,.85); border-radius:14px;
  box-shadow:0 0 0 999px rgba(0,0,0,.28)}
.scan-status{position:absolute; left:0; right:0; bottom:0; padding:8px 12px; background:rgba(0,0,0,.55); color:#fff; font-size:13px}
.label-sheet{display:grid; grid-template-columns:repeat(auto-fill, minmax(62mm, 1fr)); gap:4mm}
.asset-label{display:flex; gap:3mm; align-items:center; border:1px dashed var(--line); border-radius:2mm;
  padding:2.5mm; background:#fff; color:#000; break-inside:avoid; page-break-inside:avoid}
.asset-label svg{width:22mm; height:22mm; flex-shrink:0}
.asset-label .l-org{font-size:7pt; color:#555; text-transform:uppercase; letter-spacing:.04em}
.asset-label .l-tag{font:700 10pt/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
.asset-label .l-name{font-size:8pt; line-height:1.25}
.asset-label .l-sn{font-size:7pt; color:#444}
@media print {
  body.printing-labels .sidebar, body.printing-labels .topbar, body.printing-labels .no-print,
  body.printing-labels .pwa-offline, body.printing-labels .toast-wrap{display:none !important}
  body.printing-labels .main, body.printing-labels .content{margin:0 !important; padding:0 !important}
  body.printing-labels .label-sheet{gap:2mm}
  body.printing-labels .asset-label{border-color:#bbb}
  body.printing-labels .panel{border:none; box-shadow:none}
  @page { margin: 8mm; }
}
@media (display-mode: standalone) {
  .topbar{padding-top:env(safe-area-inset-top)}
}

/* ---- repeatable alias rows (Mail form) ---- */
.alias-row{display:flex; gap:8px; align-items:center; margin-bottom:6px}
.alias-row input{flex:1 1 auto}
.alias-row .btn{flex:0 0 auto; line-height:1; padding:6px 10px}

/* ---- Excel-style per-column table filters ---- */
th.colf-th{padding-right:26px; position:relative}
.colf-btn{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:18px; height:18px; padding:0; line-height:16px; font-size:10px;
  border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--faint);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.colf-btn:hover{border-color:var(--accent); color:var(--accent)}
.colf-btn.on{background:var(--accent); border-color:var(--accent); color:#fff}
.colf-pop{
  position:fixed; z-index:1000; width:250px; max-width:92vw;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 14px 36px rgba(18,23,43,.20); padding:8px;
}
.colf-head{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); padding:4px 8px 6px}
.colf-sort{display:flex; flex-direction:column; gap:2px; margin-bottom:4px}
.colf-sortbtn{display:block; width:100%; text-align:left; font-size:13px; color:var(--text);
  background:none; border:0; border-radius:8px; padding:7px 10px; cursor:pointer}
.colf-sortbtn:hover{background:var(--bg)}
.colf-sortbtn.active{background:var(--accent-dim); color:var(--accent); font-weight:600}
.colf-tools{display:flex; align-items:center; gap:8px; padding:7px 10px; border-top:1px solid var(--line)}
.colf-link{color:var(--accent); font-weight:600; font-size:13px; cursor:pointer}
.colf-link:hover{text-decoration:underline}
.colf-dot{color:var(--faint)}
.colf-pop .colf-search input{width:100%; margin:2px 0 4px}
.colf-list{max-height:220px; overflow:auto; padding:2px 0}
.colf-opt{display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:13px; padding:5px 10px; cursor:pointer; border-radius:8px}
.colf-opt:hover{background:var(--bg)}
.colf-optlabel{display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.colf-optlabel input{flex:0 0 auto}
.colf-count{flex:0 0 auto; color:var(--faint); font-size:12px}
.colf-foot{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 8px 4px; border-top:1px solid var(--line); margin-top:4px}