/* ==========================================================================
   NRIRaksha Operations Console — data-driven build
   Design tokens follow the original console so the two look like one product.
   ========================================================================== */

@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/admin/fonts/geist-98bbbccb.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(/admin/fonts/geist-mono-971fb274.woff2) format("woff2")}

:root{
  --font: Geist, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ink:#17231f; --ink-2:#3a4842; --muted:#6f7974; --faint:#98a29d;
  --line:#e3e8e5; --line-2:#eef2f0;
  --bg:#f4f6f4; --panel:#fff; --panel-2:#fafbfa;
  --green:#0e4b3d; --green2:#176b56; --green-soft:#e9f4ef;
  --gold:#c89b4c; --gold-soft:#fbf2df;
  --red:#c44b42; --red-soft:#fbecea;
  --blue:#3977a8; --blue-soft:#eaf2f8;
  --purple:#765697; --purple-soft:#f1edf6;
  --slate:#5c6b66; --slate-soft:#eef1f0;
  --sidebar:#0c2922;
  --radius:12px; --radius-sm:9px;
  --shadow:0 8px 28px rgba(16,45,36,.06);
  --shadow-lg:0 18px 48px rgba(16,45,36,.14);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:13px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
svg{flex:none}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em}
table{border-collapse:collapse;width:100%}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:-.02em}
.nowrap{white-space:nowrap}
.right{text-align:right}
.center{text-align:center}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.tiny{font-size:11px}
.strong{font-weight:650}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Shell ---------------------------------------------------------------- */

.shell{min-height:100vh}

.sidebar{
  position:fixed; z-index:60; inset:0 auto 0 0; width:246px;
  display:flex; flex-direction:column;
  background:var(--sidebar); color:#dce8e3;
  border-right:1px solid rgba(255,255,255,.06);
}
.sidebar__brand{
  height:70px; padding:0 18px; display:flex; align-items:center; gap:11px;
  border-bottom:1px solid rgba(255,255,255,.08); flex:none;
}
.sidebar__mark{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  border-radius:9px; color:#183e33; font-weight:800; font-size:13px;
  background:linear-gradient(135deg,#f0d7a5,#c99e50);
}
.sidebar__name{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.sidebar__name strong{font-size:14.5px;letter-spacing:.05em;font-weight:650}
.sidebar__name strong span{color:#e8c783}
.sidebar__name small{color:#77948a;font-size:7.5px;font-weight:800;letter-spacing:.15em;margin-top:3px}
.sidebar__close{display:none;margin-left:auto;color:#fff;opacity:.7}

.sidebar__scroll{flex:1;overflow-y:auto;padding:14px 0 20px;scrollbar-width:thin}
.sidebar__scroll::-webkit-scrollbar{width:6px}
.sidebar__scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

.nav-group{margin:0 0 4px}
.nav-group__label{
  padding:14px 20px 7px; font-size:8.5px; font-weight:800;
  letter-spacing:.16em; color:#5f8074;
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  margin:1px 10px; padding:8px 11px; border-radius:8px;
  color:#b9cdc5; font-size:12.5px; font-weight:500;
  transition:background .14s, color .14s;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.is-active{background:rgba(255,255,255,.11);color:#fff;font-weight:600}
.nav-item.is-active .nav-item__icon{color:#e8c783}
.nav-item__icon{color:#7e9c92;transition:color .14s}
.nav-item__badge{
  margin-left:auto; min-width:20px; height:18px; padding:0 6px;
  display:grid; place-items:center; border-radius:9px;
  background:rgba(255,255,255,.13); color:#e6f0ec;
  font-size:10px; font-weight:700; font-family:var(--mono);
}
.nav-item__badge--hot{background:var(--red);color:#fff}

.sidebar__foot{
  flex:none; padding:12px 14px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:10px;
}
.sidebar__foot .avatar{background:rgba(255,255,255,.13);color:#e8c783}
.sidebar__foot div{min-width:0;flex:1}
.sidebar__foot strong{display:block;font-size:12px;color:#eaf3ef;font-weight:600}
.sidebar__foot small{display:block;font-size:10px;color:#77948a}
.sidebar__foot a{color:#8fa9a0;padding:6px;border-radius:7px}
.sidebar__foot a:hover{background:rgba(255,255,255,.08);color:#fff}

.main{margin-left:246px;min-height:100vh;display:flex;flex-direction:column}

.topbar{
  position:sticky; top:0; z-index:40; height:66px; flex:none;
  display:flex; align-items:center; gap:14px; padding:0 22px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__menu{display:none;color:var(--ink-2)}
.topbar__title{min-width:0}
.topbar__title small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.topbar__title h1{font-size:17px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__search{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  height:36px; padding:0 12px; width:min(320px,32vw);
  background:var(--panel-2); border:1px solid var(--line); border-radius:9px;
  color:var(--muted);
}
.topbar__search input{border:0;background:none;outline:0;width:100%;font-size:12.5px}
.topbar__actions{display:flex;align-items:center;gap:8px}
.icon-btn{
  width:36px;height:36px;display:grid;place-items:center;border-radius:9px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);
  transition:background .14s,border-color .14s;
}
.icon-btn:hover{background:var(--panel-2);border-color:#d5dcd8}

.content{flex:1;padding:22px;max-width:1560px;width:100%}

/* --- Buttons -------------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;
  border-radius:9px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);font-size:12.5px;font-weight:600;white-space:nowrap;
  transition:background .14s,border-color .14s,box-shadow .14s;
}
.btn:hover{background:var(--panel-2);border-color:#d5dcd8}
.btn--primary{background:var(--green);border-color:var(--green);color:#fff}
.btn--primary:hover{background:var(--green2);border-color:var(--green2)}
.btn--gold{background:var(--gold);border-color:var(--gold);color:#20180a}
.btn--gold:hover{filter:brightness(1.05)}
.btn--danger{color:var(--red);border-color:#eccfcc}
.btn--danger:hover{background:var(--red-soft)}
.btn--sm{height:28px;padding:0 10px;font-size:11.5px;border-radius:7px}
.btn--ghost{border-color:transparent;background:transparent}
.btn--ghost:hover{background:var(--line-2);border-color:transparent}
.btn[disabled]{opacity:.5;pointer-events:none}

/* --- Pills / badges ------------------------------------------------------- */

.pill{
  display:inline-flex;align-items:center;gap:5px;
  height:21px;padding:0 8px;border-radius:6px;
  font-size:11px;font-weight:650;white-space:nowrap;letter-spacing:.005em;
}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85}
.pill--bare::before{display:none}
.pill--green{background:var(--green-soft);color:#0f5a48}
.pill--gold{background:var(--gold-soft);color:#8a6420}
.pill--red{background:var(--red-soft);color:#a53a32}
.pill--blue{background:var(--blue-soft);color:#2c5f88}
.pill--purple{background:var(--purple-soft);color:#5d4379}
.pill--slate{background:var(--slate-soft);color:#4b5a55}

.avatar{
  width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--green-soft);color:var(--green);
  font-size:11px;font-weight:700;letter-spacing:.02em;
}
.avatar--sm{width:26px;height:26px;font-size:9.5px}
.avatar--lg{width:46px;height:46px;font-size:15px}
.avatar--gold{background:var(--gold-soft);color:#8a6420}
.avatar--blue{background:var(--blue-soft);color:#2c5f88}
.avatar--purple{background:var(--purple-soft);color:#5d4379}

.dot-sep{color:var(--faint);padding:0 5px}

/* --- Panels --------------------------------------------------------------- */

.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.panel__head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--line-2);
}
.panel__head h2,.panel__head h3{font-size:13.5px;font-weight:650}
.panel__head small{display:block;color:var(--muted);font-size:11.5px;font-weight:400;margin-top:2px}
.panel__head .btn,.panel__head .filter-tabs{margin-left:auto}
.panel__body{padding:16px}
.panel__body--flush{padding:0}
.panel__foot{padding:11px 16px;border-top:1px solid var(--line-2);background:var(--panel-2);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}

/* --- Metrics -------------------------------------------------------------- */

.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:12px;margin-bottom:18px}
.metric{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 15px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.metric__label{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.metric__value{font-size:25px;font-weight:680;letter-spacing:-.025em;margin-top:7px;line-height:1.1}
.metric__foot{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:11.5px;color:var(--muted)}
.metric__delta{font-weight:700}
.metric__delta--up{color:var(--green2)}
.metric__delta--down{color:var(--red)}
.metric__spark{position:absolute;right:12px;top:12px;color:var(--faint);opacity:.5}

/* --- Tables --------------------------------------------------------------- */

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{font-size:12.5px;min-width:640px}
table.data th{
  text-align:left;padding:9px 14px;background:var(--panel-2);
  font-size:9.5px;font-weight:800;letter-spacing:.12em;color:var(--muted);
  text-transform:uppercase;border-bottom:1px solid var(--line);white-space:nowrap;
}
table.data td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr{transition:background .12s}
table.data tbody tr:hover{background:var(--panel-2)}
table.data a.link{font-weight:600;color:var(--ink)}
table.data a.link:hover{color:var(--green2);text-decoration:underline;text-underline-offset:2px}
.cell-person{display:flex;align-items:center;gap:9px;min-width:0}
.cell-person div{min-width:0}
.cell-person strong{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-person small{display:block;color:var(--muted);font-size:11px}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--ink);font-size:14px;margin-bottom:5px}

/* --- Filters / toolbar ---------------------------------------------------- */

.toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.toolbar__grow{flex:1}
.filter-tabs{display:flex;gap:3px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:9px;padding:3px;overflow-x:auto;max-width:100%}
.filter-tabs a{
  padding:5px 11px;border-radius:7px;font-size:11.5px;font-weight:600;
  color:var(--muted);white-space:nowrap;transition:background .14s,color .14s;
}
.filter-tabs a:hover{color:var(--ink)}
.filter-tabs a.is-active{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(16,45,36,.09)}
.filter-tabs a span{opacity:.6;font-family:var(--mono);font-size:10.5px;margin-left:3px}

.search-box{
  display:flex;align-items:center;gap:8px;height:34px;padding:0 11px;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;color:var(--muted);
}
.search-box input{border:0;background:none;outline:0;width:190px;font-size:12.5px;color:var(--ink)}

select.select,input.input,textarea.textarea{
  height:34px;padding:0 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);outline:0;font-size:12.5px;max-width:100%;
}
select.select:focus,input.input:focus,textarea.textarea:focus{border-color:var(--green2);box-shadow:0 0 0 3px rgba(23,107,86,.1)}
textarea.textarea{height:auto;padding:9px 11px;resize:vertical;min-height:74px;line-height:1.5}
label.field{display:block;margin-bottom:12px}
label.field > span{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--muted);text-transform:uppercase;margin-bottom:5px}
label.field .input,label.field .select,label.field .textarea{width:100%}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

/* --- Pagination ----------------------------------------------------------- */

.pager{display:flex;align-items:center;gap:6px;margin-left:auto}
.pager a,.pager span{
  min-width:30px;height:30px;padding:0 9px;display:grid;place-items:center;
  border-radius:7px;border:1px solid var(--line);background:var(--panel);
  font-size:12px;font-weight:600;color:var(--ink-2);
}
.pager a:hover{background:var(--panel-2)}
.pager .is-active{background:var(--green);border-color:var(--green);color:#fff}
.pager .is-off{opacity:.4;pointer-events:none}

/* --- Kanban --------------------------------------------------------------- */

.kanban{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(262px,1fr);
  gap:12px;overflow-x:auto;padding-bottom:8px;align-items:start;
}
.kanban-col{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;max-height:calc(100vh - 210px);
}
.kanban-col__head{
  display:flex;align-items:center;gap:8px;padding:12px 13px;
  border-bottom:1px solid var(--line-2);flex:none;
}
.kanban-col__head strong{font-size:12px;font-weight:650}
.kanban-col__head .count{
  margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:700;
  min-width:20px;height:19px;padding:0 6px;border-radius:6px;
  background:var(--line-2);color:var(--muted);display:grid;place-items:center;
}
.kanban-col__rail{height:3px;border-radius:3px 3px 0 0;margin:-1px -1px 0}
.kanban-col__body{padding:9px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1}
.kanban-col__sum{padding:9px 13px;border-top:1px solid var(--line-2);background:var(--panel-2);
  font-size:11px;color:var(--muted);flex:none}

.kcard{
  display:block;padding:11px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel);transition:border-color .14s,box-shadow .14s,transform .14s;
}
.kcard:hover{border-color:#cfd8d4;box-shadow:0 4px 14px rgba(16,45,36,.08);transform:translateY(-1px)}
.kcard__top{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.kcard__code{font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:600}
.kcard__title{font-size:12.5px;font-weight:600;line-height:1.35;margin-bottom:8px}
.kcard__meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.kcard__foot{display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line-2)}
.kcard__value{margin-left:auto;font-weight:700;font-size:12px;color:var(--ink)}

/* --- Detail layout -------------------------------------------------------- */

.detail{display:grid;grid-template-columns:minmax(0,1fr) 328px;gap:16px;align-items:start}
.detail__side{display:flex;flex-direction:column;gap:16px}
.detail__main{display:flex;flex-direction:column;gap:16px;min-width:0}

.record-head{
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  padding:16px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;
}
.record-head__id{flex:1;min-width:220px}
.record-head__id h2{font-size:19px;margin-bottom:5px}
.record-head__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.record-head__actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}

.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:12.5px}
.kv dt{color:var(--muted);white-space:nowrap}
.kv dd{margin:0;text-align:right;font-weight:550}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:1px;background:var(--line-2)}
.stat-row > div{background:var(--panel);padding:13px 14px}
.stat-row strong{display:block;font-size:19px;font-weight:680;letter-spacing:-.02em}
.stat-row small{display:block;color:var(--muted);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-top:3px}

/* --- Timeline ------------------------------------------------------------- */

.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:var(--line)}
.timeline__item{position:relative;padding-bottom:16px}
.timeline__item:last-child{padding-bottom:0}
.timeline__item::before{
  content:"";position:absolute;left:-21px;top:4px;width:11px;height:11px;border-radius:50%;
  background:var(--panel);border:2.5px solid var(--line);
}
.timeline__item--done::before{border-color:var(--green2);background:var(--green2)}
.timeline__item--now::before{border-color:var(--gold);background:var(--gold);
  box-shadow:0 0 0 4px var(--gold-soft)}
.timeline__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.timeline__head strong{font-size:12.5px;font-weight:650}
.timeline__note{color:var(--muted);font-size:12px}

/* --- Progress / bars ------------------------------------------------------ */

.bar{height:7px;border-radius:4px;background:var(--line-2);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:4px;background:var(--green2)}
.bar--gold > i{background:var(--gold)}
.bar--red > i{background:var(--red)}
.bar--blue > i{background:var(--blue)}

.breakdown{display:flex;flex-direction:column;gap:11px}
.breakdown__row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:12.5px}
.breakdown__row .bar{grid-column:1/-1}
.breakdown__row b{font-weight:650}

/* --- Chart (pure CSS columns) --------------------------------------------- */

.chart{display:flex;align-items:flex-end;gap:7px;height:150px;padding-top:8px}
.chart__col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:7px;height:100%;min-width:0}
.chart__bar{width:100%;max-width:38px;border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,var(--green2),var(--green));min-height:3px;
  transition:opacity .14s;position:relative}
.chart__col:hover .chart__bar{opacity:.82}
.chart__label{font-size:10px;color:var(--muted);white-space:nowrap;font-weight:600}
.chart__val{font-size:10.5px;font-weight:700;color:var(--ink-2);font-family:var(--mono)}

/* --- Flash messages ------------------------------------------------------- */

.flash{
  display:flex;align-items:center;gap:10px;padding:11px 14px;margin-bottom:16px;
  border-radius:var(--radius-sm);font-size:12.5px;font-weight:550;
  border:1px solid var(--line);background:var(--panel);
}
.flash--ok{background:var(--green-soft);border-color:#c6e2d7;color:#0f5a48}
.flash--err{background:var(--red-soft);border-color:#f0cfcc;color:#a53a32}
.flash--info{background:var(--blue-soft);border-color:#cfe0ee;color:#2c5f88}

/* --- Login ---------------------------------------------------------------- */

.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(160deg,#0c2922,#123a30 55%,#0c2922)}
.login-card{width:100%;max-width:392px;background:var(--panel);border-radius:16px;
  box-shadow:var(--shadow-lg);padding:30px 28px}
.login-card__brand{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.login-card h1{font-size:19px;margin-bottom:5px}
.login-card p.sub{color:var(--muted);font-size:12.5px;margin:0 0 20px}
.login-hint{margin-top:16px;padding:11px 13px;border-radius:9px;background:var(--gold-soft);
  color:#7c5a1c;font-size:11.5px;line-height:1.55}
.login-hint code{font-family:var(--mono);font-weight:700}

/* --- Grids ---------------------------------------------------------------- */

.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.dash-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
.stack{display:flex;flex-direction:column;gap:16px}

.card-list{display:flex;flex-direction:column}
.card-list__row{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--line-2)}
.card-list__row:last-child{border-bottom:0}
.card-list__row:hover{background:var(--panel-2)}
.card-list__row div.grow{flex:1;min-width:0}
.card-list__row strong{display:block;font-size:12.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-list__row small{display:block;color:var(--muted);font-size:11.5px}

.chip-set{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;
  border:1px solid var(--line);background:var(--panel-2);font-size:11.5px;color:var(--ink-2)}
.chip svg{color:var(--muted)}
.chip--asset{background:var(--blue-soft);border-color:#cfe0ee;color:#2c5f88}
.chip--person{background:var(--purple-soft);border-color:#ddd3e9;color:#5d4379}
.chip--none{background:var(--panel-2);color:var(--faint);border-style:dashed}

.feature-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.feature-list li{display:flex;gap:8px;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.feature-list li svg{color:var(--green2);margin-top:2px}

.price-tag{display:flex;align-items:baseline;gap:5px}
.price-tag b{font-size:26px;font-weight:680;letter-spacing:-.02em}
.price-tag span{color:var(--muted);font-size:12px}

/* --- Row actions ---------------------------------------------------------- */

.row-actions{display:flex;gap:3px;justify-content:flex-end}
.row-action{
  width:28px;height:28px;display:grid;place-items:center;border-radius:7px;
  border:1px solid transparent;background:transparent;color:var(--muted);
  transition:background .13s,color .13s,border-color .13s;
}
.row-action:hover{background:var(--line-2);color:var(--ink);border-color:var(--line)}
.row-action--danger:hover{background:var(--red-soft);color:var(--red);border-color:#eccfcc}
table.data td.actions-cell{width:1%;white-space:nowrap;padding-right:12px}
table.data tbody tr:hover .row-action{color:var(--ink-2)}

.btn--danger-solid{background:var(--red);border-color:var(--red);color:#fff}
.btn--danger-solid:hover{filter:brightness(1.06)}

/* --- Modal ---------------------------------------------------------------- */

body.modal-open{overflow:hidden}

.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;
  justify-content:center;padding:24px 16px;overflow-y:auto}
.modal[hidden]{display:none}
.modal__backdrop{position:fixed;inset:0;border:0;padding:0;cursor:pointer;
  background:rgba(12,41,34,.42);backdrop-filter:blur(2px);animation:nrFade .16s ease}
.modal__panel{
  position:relative;width:100%;max-width:760px;margin:auto;
  background:var(--panel);border-radius:16px;box-shadow:var(--shadow-lg);
  overflow:hidden;animation:nrRise .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes nrFade{from{opacity:0}to{opacity:1}}
@keyframes nrRise{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

.modal__content{display:flex;flex-direction:column;max-height:calc(100vh - 48px);min-height:0}
/* On add/edit the head/body/foot sit inside the form, so the form itself has to
   be the flex item that fills the panel — otherwise a tall form overflows
   instead of scrolling its body. */
.modal__form{display:flex;flex-direction:column;flex:1;min-height:0}

.modal__head{
  display:flex;align-items:flex-start;gap:14px;flex:none;
  padding:18px 20px;border-bottom:1px solid var(--line);
}
.modal__head h2{font-size:17px;margin-top:3px}
.modal__head small{display:block;margin-top:3px;font-size:12px}
.modal__head-actions{display:flex;align-items:center;gap:7px;margin-left:auto;flex-wrap:wrap}
.modal__head > .icon-btn:last-child{margin-left:auto}

.modal__body{padding:18px 20px;overflow-y:auto;flex:1;min-height:0}
.modal__foot{
  display:flex;align-items:center;justify-content:flex-end;gap:9px;flex:none;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--line);background:var(--panel-2);
}
/* Destructive action sits alone on the left, everything else groups right. */
.modal__foot .btn--danger{margin-right:auto}

.modal__loading{display:flex;align-items:center;gap:10px;justify-content:center;
  padding:56px 20px;color:var(--muted);font-size:13px}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);
  border-top-color:var(--green2);animation:nrSpin .7s linear infinite}
@keyframes nrSpin{to{transform:rotate(360deg)}}

/* --- Modal forms ---------------------------------------------------------- */

.form-group__label{
  font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:18px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line-2);
}
.form-group__label:first-child{margin-top:0}

.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 14px}
.form-cell{grid-column:span 6;min-width:0}
.form-cell--3{grid-column:span 3}
.form-cell--4{grid-column:span 4}
.form-cell--6{grid-column:span 6}
.form-cell--8{grid-column:span 8}
.form-cell--12{grid-column:span 12}

.field__help{display:block;margin-top:4px;font-size:11px;color:var(--faint);line-height:1.45}
/* Author rules beat the UA's [hidden]{display:none}, so both of these need
   saying explicitly — the dynamic form relies on them. */
.field__help[hidden]{display:none}
.form-cell[hidden]{display:none}
/* Native multi-select, only seen if JavaScript is unavailable. */
select.select--multi{height:auto;padding:6px;min-height:118px}
select.select--multi option{padding:4px 6px;border-radius:5px}

/* --- Searchable select (progressive enhancement over <select>) ------------ */

.picker{position:relative}

/* The real <select> still submits the form. It is kept in the layout rather
   than display:none so a `required` field stays focusable — otherwise the
   browser refuses to submit with "not focusable" and shows nothing. */
.picker__native{
  position:absolute;left:14px;bottom:4px;width:1px;height:1px;
  opacity:0;padding:0;border:0;pointer-events:none;
}

.picker__control{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  min-height:34px;padding:4px 32px 4px 8px;position:relative;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);
  cursor:text;transition:border-color .14s,box-shadow .14s;
}
.picker__control:hover{border-color:#d5dcd8}
.picker.is-open .picker__control,
.picker__control:focus-within{border-color:var(--green2);box-shadow:0 0 0 3px rgba(23,107,86,.1)}

.picker__tags{display:contents}
.picker__tag{
  display:inline-flex;align-items:center;gap:5px;max-width:100%;
  height:22px;padding:0 3px 0 8px;border-radius:6px;
  background:var(--green-soft);color:#0f5a48;
  font-size:11.5px;font-weight:600;
}
.picker__tag > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker__tag-x{
  width:16px;height:16px;flex:none;display:grid;place-items:center;border-radius:4px;
  color:#0f5a48;opacity:.6;font-size:14px;line-height:1;
}
.picker__tag-x:hover{opacity:1;background:rgba(15,90,72,.14)}

.picker__search{
  flex:1;min-width:90px;height:24px;border:0;outline:0;background:none;
  font-size:12.5px;color:var(--ink);padding:0 2px;
}
.picker__search::placeholder{color:var(--faint)}
.picker--single .picker__search.is-filled::placeholder{color:var(--ink)}

.picker__caret{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;display:grid;
}
.picker.is-open .picker__caret{transform:translateY(-50%) rotate(180deg)}

.picker__menu{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--panel);overflow-y:auto;overscroll-behavior:contain;
}
/* Multi: an always-open panel, so it can never be clipped by the scrolling
   modal body and both hands stay on the keyboard. */
.picker--multi .picker__menu{margin-top:6px;max-height:190px}
/* Single: a real dropdown, positioned fixed so the modal's overflow cannot
   crop it. Coordinates are set in JS. */
.picker--single .picker__menu{
  position:fixed;z-index:140;display:none;box-shadow:var(--shadow-lg);max-height:280px;
}
.picker--single.is-open .picker__menu{display:block}

.picker__option{
  display:flex;align-items:center;gap:8px;padding:7px 10px;
  font-size:12.5px;line-height:1.35;cursor:pointer;
  border-bottom:1px solid var(--line-2);
}
.picker__option:last-child{border-bottom:0}
.picker__option:hover,.picker__option.is-active{background:var(--panel-2)}
.picker__option.is-selected{background:var(--green-soft);color:#0f5a48;font-weight:600}
.picker__option.is-selected:hover{background:#dcece4}
.picker__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.picker__check{
  width:15px;height:15px;flex:none;border-radius:4px;
  border:1.5px solid var(--line);background:var(--panel);position:relative;
}
.picker__option.is-selected .picker__check{background:var(--green2);border-color:var(--green2)}
.picker__option.is-selected .picker__check::after{
  content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}

.picker__empty{padding:14px 12px;text-align:center;color:var(--faint);font-size:12px}

/* --- Detail modal --------------------------------------------------------- */

.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px 20px;margin:0 0 4px}
.detail-grid > div{min-width:0}
.detail-grid dt{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:3px}
.detail-grid dd{margin:0;font-size:12.5px;line-height:1.5;word-break:break-word}

.related-list{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;margin-bottom:4px}
.related-list__row{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-bottom:1px solid var(--line-2);font-size:12.5px}
.related-list__row:last-child{border-bottom:0}
a.related-list__row:hover{background:var(--panel-2)}
.related-list__row .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width:1180px){
  .detail{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:1fr}
}

@media (max-width:960px){
  .sidebar{transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg)}
  body.nav-open .sidebar{transform:none}
  body.nav-open::after{content:"";position:fixed;inset:0;z-index:55;background:rgba(12,41,34,.45)}
  .sidebar__close{display:block}
  .main{margin-left:0}
  .topbar__menu{display:grid}
  .topbar__search{display:none}
  .content{padding:16px}
  .field-row{grid-template-columns:1fr}
}

@media (max-width:760px){
  .form-cell,
  .form-cell--3,.form-cell--4,.form-cell--6,.form-cell--8{grid-column:span 12}
  .modal{padding:0}
  .modal__panel{max-width:none;border-radius:0;min-height:100vh}
  .modal__content{max-height:100vh}
  .modal__foot{position:sticky;bottom:0}
}

@media (max-width:600px){
  .topbar{padding:0 14px;height:60px}
  .topbar__title h1{font-size:15.5px}
  .content{padding:13px}
  .metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
  .metric__value{font-size:21px}
  .record-head__actions{margin-left:0;width:100%}
  .kanban{grid-auto-columns:minmax(238px,86vw)}
  .kanban-col{max-height:none}
}

@media print{
  .sidebar,.topbar,.toolbar,.record-head__actions,.pager{display:none!important}
  .main{margin-left:0}
  .panel{box-shadow:none;break-inside:avoid}
}