/* ============================================================
   Arpan Portal — ENTERPRISE design layer  (assets/enterprise.css)
   ------------------------------------------------------------
   ADDITIVE + OPT-IN. Everything here is scoped under `.ar-ent`,
   so pages that don't add that class are completely unaffected.
   Reuses the EXACT existing brand tokens from style.css
   (--teal #0F8080, --red #E0223D, --bg #F5F4F1) — colours unchanged.
   Glass surfaces build on the glass tokens style.css already defines.
   ============================================================ */

.ar-ent{
  /* enterprise-only spacing/radius aliases (don't touch global tokens) */
  --e-r:16px; --e-r-sm:12px; --e-r-lg:20px;
  --e-gap:16px;
  --e-glass:rgba(255,255,255,0.62);
  --e-glass-strong:rgba(255,255,255,0.74);
  --e-glass-border:rgba(255,255,255,0.55);
  --e-line:#E7E4DE; --e-line-strong:#DAD6CE;
  --e-shadow:0 1px 2px rgba(15,40,38,0.05), 0 8px 24px -10px rgba(15,40,38,0.14);
  --e-shadow-hover:0 4px 10px rgba(15,40,38,0.06), 0 18px 40px -14px rgba(15,40,38,0.20);
  --e-ease:cubic-bezier(.2,.8,.3,1);
}

/* ---------- Butterfly background canvas ---------- */
.ar-ent-bfwrap{ position:relative; }
#ar-butterfly{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.ar-ent-bfwrap > *:not(#ar-butterfly){ position:relative; z-index:1; }

/* ---------- Greeting ---------- */
.ar-ent .e-greet{ margin-bottom:24px; }
.ar-ent .e-greet h1{ font-size:28px; font-weight:700; letter-spacing:-0.02em; line-height:1.2; color:var(--ink); }
.ar-ent .e-greet p{ color:var(--ink-soft); font-size:15px; margin-top:4px; }

/* ---------- Glass search bar (Ctrl+K) ---------- */
.ar-ent .e-search{
  display:flex; align-items:center; gap:12px;
  background:var(--e-glass); backdrop-filter:blur(20px) saturate(170%); -webkit-backdrop-filter:blur(20px) saturate(170%);
  border:1px solid var(--e-glass-border); border-radius:var(--e-r);
  padding:14px 18px; box-shadow:var(--e-shadow); margin-bottom:24px; cursor:text;
  transition:box-shadow .15s var(--e-ease), border-color .15s var(--e-ease);
}
.ar-ent .e-search:hover{ box-shadow:var(--e-shadow-hover); border-color:var(--teal); }
.ar-ent .e-search i{ font-size:20px; color:var(--ink-mute); }
.ar-ent .e-search input{ flex:1; border:none; outline:none; background:transparent; font-family:inherit; font-size:15px; color:var(--ink); }
.ar-ent .e-search .e-kbd{ font-size:12px; color:var(--ink-mute); background:rgba(255,255,255,0.7); border:1px solid var(--e-line-strong); border-radius:6px; padding:3px 8px; font-weight:600; white-space:nowrap; }

/* ---------- Section label ---------- */
.ar-ent .e-sec{ margin-bottom:24px; }
.ar-ent .e-sec-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ar-ent .e-sec-head h2{ font-size:12px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-mute); display:flex; align-items:center; gap:7px; }
.ar-ent .e-sec-head h2 i{ font-size:16px; }
.ar-ent .e-sec-head a{ font-size:13px; color:var(--teal); text-decoration:none; font-weight:500; }
.ar-ent .e-sec-head a:hover{ text-decoration:underline; }

/* ---------- Glass card base ---------- */
.ar-ent .e-glass{
  background:var(--e-glass); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--e-glass-border); border-radius:var(--e-r); box-shadow:var(--e-shadow);
}

/* ---------- My Day attention cards ---------- */
.ar-ent .e-day-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--e-gap); }
.ar-ent .e-attn{
  display:flex; gap:14px; align-items:flex-start; text-decoration:none; color:inherit;
  background:var(--e-glass); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--e-glass-border); border-radius:var(--e-r); padding:18px;
  box-shadow:var(--e-shadow); transition:transform .15s var(--e-ease), box-shadow .15s var(--e-ease), border-color .15s var(--e-ease);
}
.ar-ent .e-attn:hover{ transform:translateY(-2px); box-shadow:var(--e-shadow-hover); border-color:var(--teal); }
.ar-ent .e-attn-ico{ width:40px; height:40px; border-radius:var(--e-r-sm); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; background:var(--teal-soft); color:var(--teal-deep); }
.ar-ent .e-attn-ico.warn{ background:var(--warning-bg); color:var(--warning); }
.ar-ent .e-attn-ico.danger{ background:var(--danger-bg); color:var(--danger); }
.ar-ent .e-attn-ico.info{ background:var(--blue-soft); color:var(--blue); }
.ar-ent .e-attn-body{ flex:1; min-width:0; }
.ar-ent .e-attn-title{ font-size:15px; font-weight:600; margin-bottom:2px; color:var(--ink); }
.ar-ent .e-attn-sub{ font-size:13px; color:var(--ink-mute); line-height:1.45; }
.ar-ent .e-attn-cta{ font-size:13px; color:var(--teal); font-weight:600; margin-top:8px; display:inline-flex; align-items:center; gap:4px; }

/* ---------- Quick actions ---------- */
.ar-ent .e-qa-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:16px; }
.ar-ent .e-qa{
  background:var(--e-glass); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--e-glass-border); border-radius:var(--e-r-sm); padding:16px; text-align:center;
  text-decoration:none; color:inherit; cursor:pointer; box-shadow:var(--e-shadow);
  transition:transform .15s var(--e-ease), box-shadow .15s var(--e-ease), border-color .15s var(--e-ease);
}
.ar-ent .e-qa:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -22px rgba(15,128,128,.5); border-color:var(--teal); }
.ar-ent .e-qa i{ font-size:22px; color:var(--teal); transition:transform .28s var(--e-ease); }
.ar-ent .e-qa:hover i{ transform:scale(1.12); }
.ar-ent .e-qa span{ display:block; font-size:13px; font-weight:500; margin-top:8px; color:var(--ink); }

/* ---------- Continue working / list rows ---------- */
.ar-ent .e-list{
  background:var(--e-glass-strong); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--e-glass-border); border-radius:var(--e-r); overflow:hidden; box-shadow:var(--e-shadow);
}
.ar-ent .e-row{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--e-line); text-decoration:none; color:inherit; transition:background .12s var(--e-ease); }
.ar-ent .e-row:last-child{ border-bottom:none; }
.ar-ent .e-row:hover{ background:var(--teal-mist); }
.ar-ent .e-row-ico{ width:34px; height:34px; border-radius:var(--e-r-sm); background:rgba(20,30,28,0.05); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.ar-ent .e-row-body{ flex:1; min-width:0; }
.ar-ent .e-row-title{ font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ar-ent .e-row-meta{ font-size:12px; color:var(--ink-mute); }

/* ---------- Status pills (reuse existing colour semantics) ---------- */
.ar-ent .e-pill{ font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:4px; flex-shrink:0; white-space:nowrap; }
.ar-ent .e-pill.pending{ background:var(--red-soft); color:var(--red-deep); }
.ar-ent .e-pill.accepted{ background:var(--blue-soft); color:var(--blue); }
.ar-ent .e-pill.in_progress{ background:var(--amber-soft); color:var(--amber); }
.ar-ent .e-pill.resolved{ background:var(--teal-soft); color:var(--teal-deep); }
.ar-ent .e-pill.withdrawn{ background:rgba(20,30,28,0.07); color:var(--ink-mute); }

/* ---------- Two-column area ---------- */
.ar-ent .e-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media(max-width:760px){ .ar-ent .e-cols{ grid-template-columns:1fr; } }

/* ---------- Timeline ---------- */
.ar-ent .e-tl{ position:relative; padding-left:22px; }
.ar-ent .e-tl::before{ content:''; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--e-line-strong); }
.ar-ent .e-tl-item{ position:relative; padding-bottom:16px; }
.ar-ent .e-tl-item:last-child{ padding-bottom:0; }
.ar-ent .e-tl-dot{ position:absolute; left:-21px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--teal); border:2px solid #fff; box-shadow:0 0 0 1px var(--e-line-strong); }
.ar-ent .e-tl-item p{ font-size:13px; color:var(--ink); }
.ar-ent .e-tl-time{ font-size:12px; color:var(--ink-mute); }

/* ---------- Announcement / status blocks ---------- */
.ar-ent .e-ann{ display:flex; gap:12px; background:var(--teal-mist); border:1px solid var(--teal-soft); border-radius:var(--e-r-sm); padding:16px 18px; }
.ar-ent .e-ann i{ color:var(--teal-deep); font-size:20px; flex-shrink:0; }
.ar-ent .e-ann-title{ font-size:14px; font-weight:600; color:var(--teal-deep); }
.ar-ent .e-ann-body{ font-size:13px; color:var(--ink-soft); margin-top:2px; }
.ar-ent .e-sys{ display:flex; align-items:center; gap:10px; background:var(--e-glass); border:1px solid var(--e-glass-border); border-radius:var(--e-r-sm); padding:14px 18px; font-size:13px; color:var(--ink); box-shadow:var(--e-shadow); }
.ar-ent .e-sys-dot{ width:9px; height:9px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px var(--success-bg); flex-shrink:0; }

/* ---------- Skeleton ---------- */
.ar-ent .e-sk{ background:linear-gradient(90deg, rgba(20,30,28,0.05) 25%, rgba(20,30,28,0.09) 37%, rgba(20,30,28,0.05) 63%); background-size:400% 100%; animation:e-skw 1.4s ease infinite; border-radius:6px; }
@keyframes e-skw{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* ---------- Reduced motion: kill all enterprise animation ---------- */
@media (prefers-reduced-motion: reduce){
  .ar-ent .e-sk{ animation:none; }
  .ar-ent .e-attn, .ar-ent .e-qa, .ar-ent .e-search{ transition:none; }
  #ar-butterfly{ display:none; }
}

/* ---------- Dark mode carries over via existing tokens ---------- */

/* ============================================================
   ENTERPRISE SHELL refinement — SaaS spec layout.
   Scoped to body.ar-ent-shell so it ONLY affects pages that
   opt in (the dashboard first). Refines the EXISTING sidebar
   + main structure to the premium spec; exact Arpan colours.
   ============================================================ */

/* Wider 280px sidebar (spec) — only when shell is active */
body.ar-ent-shell{ --ar-sidebar-w:280px; }

/* Full-width main workspace (spec: fluid up to 1440px), not the old 1140 centered */
@media (min-width:900px){
  body.ar-ent-shell .ar-main{ max-width:1440px; padding:24px 32px 80px; }
}

/* Sidebar: cleaner white SaaS surface with a soft outer shadow */
body.ar-ent-shell .ar-sidebar.ar-nav{
  background:#fff;
}
body.ar-ent-shell .ar-sidebar.ar-nav::before{ opacity:0.5; } /* soften the existing brand aurora */

/* Sidebar nav items: rounded active state in Arpan teal (spec) */
body.ar-ent-shell .ar-nav-link{
  border-radius:12px; font-size:14px; padding:10px 12px; transition:background .15s var(--e-ease), color .15s var(--e-ease);
}
body.ar-ent-shell .ar-nav-link:hover{ background:var(--bg); }
body.ar-ent-shell .ar-nav-link.active{
  background:var(--teal-soft); color:var(--teal-deep); font-weight:600; position:relative;
}
body.ar-ent-shell .ar-nav-link.active::before{
  content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; background:var(--teal); border-radius:2px;
}

/* Profile card at sidebar bottom — give it a defined card look (spec) */
body.ar-ent-shell .ar-nav-account{
  background:var(--e-glass); border:1px solid var(--e-glass-border); border-radius:14px;
  padding:12px; margin:8px; box-shadow:var(--e-shadow);
}

/* KPI card grid (dashboard hero numbers) — spec: 4 equal rounded cards */
.ar-ent .e-kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.ar-ent .e-kpi{
  background:var(--e-glass-strong); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--e-glass-border); border-radius:var(--e-r); padding:20px;
  box-shadow:var(--e-shadow); transition:transform .18s var(--e-ease), box-shadow .18s var(--e-ease);
}
.ar-ent .e-kpi:hover{ transform:translateY(-2px); box-shadow:var(--e-shadow-hover); }
.ar-ent .e-kpi-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ar-ent .e-kpi-ico{ width:38px; height:38px; border-radius:var(--e-r-sm); background:var(--teal-soft); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; font-size:20px; }
.ar-ent .e-kpi-trend{ font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:2px; }
.ar-ent .e-kpi-trend.up{ color:var(--success); } .ar-ent .e-kpi-trend.down{ color:var(--danger); }
.ar-ent .e-kpi-v{ font-size:30px; font-weight:700; letter-spacing:-0.02em; line-height:1; color:var(--ink); }
.ar-ent .e-kpi-l{ font-size:13px; color:var(--ink-mute); margin-top:6px; }

/* ============================================================
   RIGHT UTILITY PANEL — completes the 3-column dashboard.
   Main workspace (left) + utility panel (right, ~340px).
   Stacks on narrow screens. Scoped under .ar-ent (home only).
   ============================================================ */
.ar-ent .e-workspace{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; margin-bottom:24px; }
@media (max-width:1080px){ .ar-ent .e-workspace{ grid-template-columns:1fr; } }

.ar-ent .e-utility{ display:flex; flex-direction:column; gap:16px; }
.ar-ent .e-upanel{
  background:var(--e-glass-strong); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--e-glass-border); border-radius:var(--e-r); padding:18px; box-shadow:var(--e-shadow);
}
.ar-ent .e-upanel h3{ font-size:12px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.ar-ent .e-upanel h3 i{ font-size:16px; }
.ar-ent .e-uitem{ display:flex; gap:11px; padding:10px 0; border-bottom:1px solid var(--e-line); }
.ar-ent .e-uitem:last-child{ border-bottom:none; padding-bottom:0; }
.ar-ent .e-uitem:first-of-type{ padding-top:0; }
.ar-ent .e-uitem-ico{ width:30px; height:30px; border-radius:var(--e-r-sm); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; background:var(--teal-soft); color:var(--teal-deep); }
.ar-ent .e-uitem-ico.warn{ background:var(--warning-bg); color:var(--warning); }
.ar-ent .e-uitem-ico.danger{ background:var(--danger-bg); color:var(--danger); }
.ar-ent .e-uitem-ico.info{ background:var(--blue-soft); color:var(--blue); }
.ar-ent .e-uitem-body{ flex:1; min-width:0; }
.ar-ent .e-uitem-t{ font-size:13px; font-weight:500; color:var(--ink); }
.ar-ent .e-uitem-s{ font-size:12px; color:var(--ink-mute); }
.ar-ent a.e-uitem{ text-decoration:none; color:inherit; transition:opacity .12s var(--e-ease); }
.ar-ent a.e-uitem:hover{ opacity:0.72; }
.ar-ent .e-uempty{ font-size:13px; color:var(--ink-mute); padding:2px 0; }
.ar-ent .e-sys-row{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:13px; color:var(--ink); }
.ar-ent .e-sys-ok{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--success); font-weight:500; }
.ar-ent .e-sys-dot{ width:8px; height:8px; border-radius:50%; background:var(--success); flex-shrink:0; }

/* ============================================================
   ADMIN DASHBOARD refinement — IT + A&L queues.
   Purely cosmetic: refines the EXISTING stat cards, chips,
   filters and list to the enterprise language. NO JS touched,
   NO structure changed. Scoped to body.ar-ent-admin so it only
   affects the two dashboard pages that opt in.
   ============================================================ */

/* Stat/summary cards → enterprise glass tiles on the 8px grid */
body.ar-ent-admin .ar-stats{ gap:16px; margin-bottom:24px; }
body.ar-ent-admin .ar-stat{
  background:var(--e-glass-strong, rgba(255,255,255,0.74));
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--e-glass-border, rgba(255,255,255,0.55));
  border-radius:16px; padding:18px;
  box-shadow:var(--e-shadow, 0 1px 2px rgba(15,40,38,0.05), 0 8px 24px -10px rgba(15,40,38,0.14));
  transition:transform .18s var(--e-ease, cubic-bezier(.2,.8,.3,1)), box-shadow .18s var(--e-ease, cubic-bezier(.2,.8,.3,1));
}
body.ar-ent-admin .ar-stat:hover{ transform:translateY(-2px); box-shadow:var(--e-shadow-hover, 0 4px 10px rgba(15,40,38,0.06), 0 18px 40px -14px rgba(15,40,38,0.20)); }
body.ar-ent-admin .ar-stat-icon{ width:38px; height:38px; border-radius:12px; background:var(--teal-soft); color:var(--teal-deep); }
body.ar-ent-admin .ar-stat-num{ font-size:28px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); }
body.ar-ent-admin .ar-stat-label{ font-size:13px; color:var(--ink-mute); }
/* keep the meaningful coloured top-accent, just thinner + cleaner */
body.ar-ent-admin .ar-stats .ar-stat{ border-top-width:3px; border-top-style:solid; }

/* Filter row → tidy 8px rhythm */
body.ar-ent-admin .ar-filter-row{ gap:10px; margin-bottom:16px; }
body.ar-ent-admin .ar-filter-row input,
body.ar-ent-admin .ar-filter-row .ar-select{ border-radius:10px; }

/* Attention chip band spacing */
body.ar-ent-admin .ar-attn-band{ gap:10px; margin-bottom:16px; }

/* Tabs → cleaner underline rhythm */
body.ar-ent-admin .ar-tabs{ margin-bottom:16px; }

/* List rows (the 'table') → soft enterprise rows with hover */
body.ar-ent-admin #call-list > .ar-row,
body.ar-ent-admin #request-list > .ar-row{
  border-radius:14px; transition:box-shadow .15s var(--e-ease, ease), transform .15s var(--e-ease, ease);
}
body.ar-ent-admin #call-list > .ar-row:hover,
body.ar-ent-admin #request-list > .ar-row:hover{
  box-shadow:var(--e-shadow, 0 8px 24px -10px rgba(15,40,38,0.14));
}

/* ============================================================
   COMMAND PALETTE (Ctrl+K) — glass modal, enterprise language.
   Global (loaded everywhere) but inert until opened.
   ============================================================ */
.ar-cmdk-overlay{
  position:fixed; inset:0; z-index:9999; display:none;
  background:rgba(20,30,28,0.28); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  padding-top:12vh; justify-content:center; align-items:flex-start;
}
.ar-cmdk-overlay.is-open{ display:flex; }
.ar-cmdk-overlay.anim .ar-cmdk{ animation:ar-cmdk-in .16s cubic-bezier(.2,.8,.3,1) both; }
@keyframes ar-cmdk-in{ from{ opacity:0; transform:translateY(-8px) scale(.985); } to{ opacity:1; transform:none; } }
.ar-cmdk{
  width:min(92vw,560px); max-height:70vh; display:flex; flex-direction:column;
  background:rgba(255,255,255,0.86); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,0.6); border-radius:16px;
  box-shadow:0 24px 60px -12px rgba(15,40,38,0.34), 0 4px 12px rgba(15,40,38,0.10); overflow:hidden;
}
.ar-cmdk-head{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--hairline, rgba(20,30,28,0.08)); }
.ar-cmdk-search-ico{ font-size:20px; color:var(--ink-mute, #6E746F); }
.ar-cmdk-input{ flex:1; border:none; outline:none; background:transparent; font-family:inherit; font-size:16px; color:var(--ink, #161A19); }
.ar-cmdk-esc{ font-size:11px; font-weight:600; color:var(--ink-mute, #6E746F); background:rgba(20,30,28,0.06); border-radius:6px; padding:3px 8px; }
.ar-cmdk-list{ overflow-y:auto; padding:8px; }
.ar-cmdk-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--ink, #161A19); cursor:pointer; }
.ar-cmdk-item.active{ background:var(--teal-soft, #E8F5F3); }
.ar-cmdk-item-ico{ width:32px; height:32px; border-radius:8px; background:rgba(20,30,28,0.05); color:var(--teal-deep, #0A5A5A); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.ar-cmdk-item.active .ar-cmdk-item-ico{ background:#fff; color:var(--teal, #0F8080); }
.ar-cmdk-item-label{ flex:1; font-size:14px; font-weight:500; }
.ar-cmdk-item-group{ font-size:11px; color:var(--ink-mute, #6E746F); background:rgba(20,30,28,0.05); border-radius:999px; padding:2px 9px; }
.ar-cmdk-empty{ padding:28px 18px; text-align:center; font-size:14px; color:var(--ink-mute, #6E746F); }
.ar-cmdk-foot{ display:flex; gap:18px; padding:10px 16px; border-top:1px solid var(--hairline, rgba(20,30,28,0.08)); font-size:11px; color:var(--ink-mute, #6E746F); }
.ar-cmdk-foot i{ font-size:13px; vertical-align:-2px; }
@media (prefers-reduced-motion: reduce){ .ar-cmdk-overlay.anim .ar-cmdk{ animation:none; } }

/* command palette: record result sub-label */
.ar-cmdk-item-label{ display:flex; flex-direction:column; gap:1px; }
.ar-cmdk-item-sub{ font-size:12px; font-weight:400; color:var(--ink-mute, #6E746F); }

/* ============================================================
   ENTERPRISE PAGE HEADER + PANEL refinement.
   Reusable across converted pages (rooms, approvals, forms…).
   Wrap a page's body in .ar-ent and use .e-page-head for the
   title area; existing .ar-panel cards get the glass treatment.
   ============================================================ */
.ar-ent .e-page-head{
  display:flex; align-items:center; gap:18px; margin-bottom:24px;
  position:relative; overflow:hidden; border-radius:20px; padding:26px 28px;
  background:linear-gradient(120deg, #0F8080 0%, #0A5A5A 68%, #0A4A48 100%);
  color:#fff; box-shadow:0 6px 16px -6px rgba(15,40,38,.10), 0 22px 44px -18px rgba(15,40,38,.26);
}
.ar-ent .e-page-head::after{ content:''; position:absolute; right:-30px; top:-50px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 62%); pointer-events:none; }
.ar-ent .e-page-head::before{ content:''; position:absolute; right:90px; bottom:-70px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(224,34,61,.24), transparent 62%); filter:blur(6px); pointer-events:none; }
.ar-ent .e-page-head > *{ position:relative; z-index:1; }
.ar-ent .e-page-head-ico{
  width:52px; height:52px; border-radius:15px; flex-shrink:0;
  background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.24); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.ar-ent .e-page-head h1{ font-size:26px; font-weight:800; letter-spacing:-0.025em; line-height:1.15; color:#fff; margin:0; }
.ar-ent .e-page-head p{ font-size:14px; color:rgba(255,255,255,0.82); margin:4px 0 0; }
/* keep the special-styled icon (e.g. System Reset red warning) readable on the gradient */
.ar-ent .e-page-head-ico[style]{ background:rgba(255,255,255,0.16) !important; border:1px solid rgba(255,255,255,0.28); }

/* Existing .ar-panel cards, refined to the enterprise language on .ar-ent pages */
.ar-ent .ar-panel{
  border-radius:16px;
  background:var(--e-glass-strong, rgba(255,255,255,0.74));
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--e-glass-border, rgba(255,255,255,0.55));
  box-shadow:var(--e-shadow, 0 1px 2px rgba(15,40,38,0.05), 0 8px 24px -10px rgba(15,40,38,0.14));
}
/* Tabs on .ar-ent pages: tidy rhythm */
.ar-ent .ar-tabs{ margin-bottom:20px; }

/* ============================================================
   ELEVATED FINISH — hero card + richer depth (home page).
   The hero is the signature moment: teal gradient, red glow,
   glass search inside, butterfly floating over it.
   ============================================================ */
.ar-ent .e-hero{
  position:relative; overflow:hidden; border-radius:24px; padding:32px 34px; margin-bottom:24px;
  background:linear-gradient(120deg, #0F8080 0%, #0A5A5A 62%, #0A4A48 100%);
  color:#fff; box-shadow:0 8px 20px -6px rgba(15,40,38,.10), 0 30px 60px -20px rgba(15,40,38,.28);
}
.ar-ent .e-hero::after{ content:''; position:absolute; right:-40px; top:-60px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 62%); pointer-events:none; }
.ar-ent .e-hero::before{ content:''; position:absolute; right:120px; bottom:-80px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(224,34,61,.30), transparent 60%); filter:blur(6px); pointer-events:none; }
.ar-ent .e-hero-inner{ position:relative; z-index:2; max-width:640px; }
.ar-ent .e-hero-eyebrow{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:10px; }
.ar-ent .e-hero h1{ font-size:32px; font-weight:800; letter-spacing:-.025em; line-height:1.12; margin-bottom:8px; color:#fff; }
.ar-ent .e-hero-sub{ font-size:15px; color:rgba(255,255,255,.82); margin-bottom:22px; max-width:520px; }
.ar-ent .e-hero-search{ display:flex; align-items:center; gap:12px; height:52px; padding:0 18px; border-radius:14px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); cursor:text; }
.ar-ent .e-hero-search i{ font-size:20px; color:rgba(255,255,255,.85); }
.ar-ent .e-hero-search input{ flex:1; border:0; background:transparent; color:#fff; font-family:inherit; font-size:15px; outline:none; }
.ar-ent .e-hero-search input::placeholder{ color:rgba(255,255,255,.7); }
.ar-ent .e-hero-search .e-kbd{ font-size:11px; font-weight:600; color:#fff; background:rgba(255,255,255,.2); border:0; border-radius:6px; padding:3px 9px; }
/* butterfly canvas sits over the hero */
.ar-ent .e-hero #ar-butterfly{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.ar-ent .e-hero .e-hero-inner{ z-index:2; }
/* Premium gradient header bar — compact hero for admin/work pages */
.ar-ent .e-hero-bar{
  position:relative; overflow:hidden; border-radius:20px; padding:22px 28px; margin-bottom:22px;
  background:linear-gradient(120deg,#0F8080 0%,#0A5A5A 62%,#0A4A48 100%); color:#fff;
  box-shadow:0 8px 20px -6px rgba(15,40,38,.10), 0 24px 50px -20px rgba(15,40,38,.28);
  display:flex; align-items:center; gap:18px;
}
.ar-ent .e-hero-bar::after{ content:""; position:absolute; right:-50px; top:-70px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.12),transparent 65%); }
.ar-ent .e-hero-bar .e-hero-bar-ico{ width:52px; height:52px; border-radius:15px; background:rgba(255,255,255,.16); display:grid; place-items:center; flex-shrink:0; position:relative; z-index:1; }
.ar-ent .e-hero-bar .e-hero-bar-ico i{ font-size:26px; color:#fff; }
.ar-ent .e-hero-bar h1{ font-size:23px; font-weight:800; letter-spacing:-.02em; margin:0 0 3px; color:#fff; position:relative; z-index:1; }
.ar-ent .e-hero-bar p{ font-size:13.5px; color:rgba(255,255,255,.82); margin:0; position:relative; z-index:1; max-width:640px; }
@media (max-width:560px){ .ar-ent .e-hero-bar{ padding:18px 20px; } .ar-ent .e-hero-bar h1{ font-size:19px; } .ar-ent .e-hero-bar .e-hero-bar-ico{ width:44px; height:44px; } }

/* Elevated KPI cards — icons, trend, depth */
.ar-ent .e-kpi{ border-radius:18px; padding:20px;
  background:var(--e-glass-strong); border:1px solid rgba(255,255,255,0.9);
  box-shadow:0 2px 4px rgba(15,40,38,.04), 0 14px 30px -12px rgba(15,40,38,.18); }
.ar-ent .e-kpi:hover{ transform:translateY(-3px); box-shadow:0 8px 20px -6px rgba(15,40,38,.10), 0 30px 60px -20px rgba(15,40,38,.28); }
.ar-ent .e-kpi-ico{ width:42px; height:42px; border-radius:12px; font-size:21px; }
.ar-ent .e-kpi-v{ font-size:32px; font-weight:800; letter-spacing:-.03em; }
.ar-ent .e-kpi-ico.r{ background:var(--red-soft); color:var(--red); }
.ar-ent .e-kpi-ico.a{ background:#FBF0DC; color:var(--amber); }
.ar-ent .e-kpi-ico.b{ background:#E9F1FC; color:var(--blue); }

/* Stronger glass across the workspace panels */
.ar-ent .e-qa, .ar-ent .e-upanel, .ar-ent .e-list, .ar-ent .e-glass{
  background:var(--e-glass-strong); border-color:rgba(255,255,255,0.9);
}
.ar-ent .e-qa{ border-radius:16px; padding:20px 16px; }
.ar-ent .e-qa i{ font-size:26px; }
.ar-ent .e-qa:hover{ transform:translateY(-3px); }

/* ============================================================
   TOP NAVIGATION BAR (enterprise shell).
   Sticky bar across the content area; content offsets below it.
   Only active for logged-in shell users (body.ar-ent-shell).
   Adds NEW utilities (search, theme) + notifications + profile.
   The sidebar's own bell is hidden to avoid a double bell.
   ============================================================ */
.e-topbar{ display:none; }
body.ar-ent-shell .e-topbar{
  display:flex; align-items:center; gap:14px;
  position:sticky; top:16px; z-index:40; height:60px; margin:16px 28px 2px; padding:0 12px 0 18px;
  background:var(--e-glass-strong, rgba(255,255,255,0.85));
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(231,228,222,0.9); border-radius:16px;
  box-shadow:0 1px 2px rgba(18,32,29,.04), 0 16px 34px -18px rgba(18,32,29,.22);
}
body.ar-ent-shell .e-topbar-menu{ display:none; background:none; border:0; font-size:22px; color:var(--ink); cursor:pointer; padding:6px; border-radius:10px; }
body.ar-ent-shell .e-topbar-search{
  flex:1; max-width:440px; display:flex; align-items:center; gap:10px; height:40px; padding:0 14px;
  border-radius:12px; background:#fff; border:1px solid var(--hairline, #E7E4DE); color:var(--ink-mute); font-size:14px; cursor:text;
}
body.ar-ent-shell .e-topbar-search i{ font-size:18px; }
body.ar-ent-shell .e-topbar-search-ph{ flex:1; }
body.ar-ent-shell .e-topbar-search .e-kbd{ font-size:11px; font-weight:600; background:var(--bg); border:1px solid var(--line-strong, #DAD6CE); border-radius:6px; padding:2px 7px; }
body.ar-ent-shell .e-topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
body.ar-ent-shell .e-topbar-btn{
  position:relative; width:40px; height:40px; border-radius:11px; border:0; background:none;
  display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--ink-soft); cursor:pointer; transition:background .15s var(--e-ease);
}
body.ar-ent-shell .e-topbar-btn:hover{ background:var(--bg); }
body.ar-ent-shell .e-topbar-bell-badge{
  position:absolute; top:5px; right:5px; min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:var(--red); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
body.ar-ent-shell .e-topbar-profile{ text-decoration:none; margin-left:2px; }
body.ar-ent-shell .e-topbar-avatar{
  width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--teal), var(--teal-deep)); color:#fff; font-weight:700; font-size:14px;
}

/* Floating account chip + dropdown */
body.ar-ent-shell .e-topbar-avatar{ width:34px; height:34px; }
body.ar-ent-shell .e-topbar-divider{ width:1px; height:24px; background:var(--hairline, #E7E4DE); margin:0 4px; }
body.ar-ent-shell .e-topbar-account{ position:relative; }
body.ar-ent-shell .e-topbar-profile{ display:flex; align-items:center; gap:9px; padding:4px 8px 4px 4px; border:0; background:none; border-radius:12px; cursor:pointer; color:inherit; font-family:inherit; transition:background .15s var(--e-ease); }
body.ar-ent-shell .e-topbar-profile:hover{ background:var(--soft, #E6F3F1); }
body.ar-ent-shell .e-topbar-avatar-wrap{ position:relative; display:inline-flex; }
body.ar-ent-shell .e-topbar-online{ position:absolute; bottom:-1px; right:-1px; width:10px; height:10px; border-radius:50%; background:#22C55E; border:2px solid #fff; }
body.ar-ent-shell .e-topbar-who{ line-height:1.15; text-align:left; }
body.ar-ent-shell .e-topbar-who b{ font-size:13px; display:block; color:var(--ink); font-weight:700; }
body.ar-ent-shell .e-topbar-who small{ font-size:11px; color:var(--ink-mute, #9AA29D); }
body.ar-ent-shell .e-topbar-chev{ font-size:16px; color:var(--ink-mute, #9AA29D); transition:transform .2s var(--e-ease); }
body.ar-ent-shell .e-topbar-account.open .e-topbar-chev{ transform:rotate(180deg); }

body.ar-ent-shell .e-account-menu{ position:absolute; right:0; top:calc(100% + 10px); width:240px; background:#fff; border:1px solid var(--hairline, #E8E4DB); border-radius:14px; box-shadow:0 14px 36px -10px rgba(18,32,29,.30); padding:8px; z-index:60; animation:e-acc-in .16s var(--e-ease); }
body.ar-ent-shell .e-account-menu[hidden]{ display:none; }
@keyframes e-acc-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
body.ar-ent-shell .e-account-head{ display:flex; align-items:center; gap:10px; padding:8px 8px 12px; border-bottom:1px solid var(--hairline, #F1EEE6); margin-bottom:6px; }
body.ar-ent-shell .e-account-id b{ font-size:13.5px; display:block; color:var(--ink); }
body.ar-ent-shell .e-account-id small{ font-size:11.5px; color:var(--ink-soft, #6A736F); word-break:break-all; }
body.ar-ent-shell .e-account-item{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; background:none; border-radius:9px; font-size:13px; font-family:inherit; color:#3A433F; cursor:pointer; text-decoration:none; text-align:left; transition:background .13s var(--e-ease), color .13s var(--e-ease); }
body.ar-ent-shell .e-account-item i{ font-size:17px; color:var(--ink-mute, #9AA29D); }
body.ar-ent-shell .e-account-item:hover{ background:var(--soft, #E6F3F1); color:var(--teal-deep, #0A5A5A); }
body.ar-ent-shell .e-account-item:hover i{ color:var(--teal, #0F8080); }
body.ar-ent-shell .e-account-item.danger{ color:var(--red, #E0223D); }
body.ar-ent-shell .e-account-item.danger i{ color:var(--red, #E0223D); }
body.ar-ent-shell .e-account-item.danger:hover{ background:rgba(224,34,61,.08); }
body.ar-ent-shell .e-account-div{ height:1px; background:var(--hairline, #F1EEE6); margin:6px 4px; }

@media (max-width:820px){
  body.ar-ent-shell .e-topbar{ margin:12px 14px 2px; top:12px; }
  body.ar-ent-shell .e-topbar-who, body.ar-ent-shell .e-topbar-chev, body.ar-ent-shell .e-topbar-divider{ display:none; }
}
/* Hide the sidebar's own bell — notifications now live in the top bar */
body.ar-ent-shell .ar-nav-bell{ display:none !important; }
/* Reposition the bell panel to open under the top bar's bell (right side) */
body.ar-ent-shell .ar-bell-panel{ top:70px !important; left:auto !important; right:24px !important; }

/* Mobile: top bar shows the hamburger, hides the wide search placeholder text */
@media (max-width:820px){
  body.ar-ent-shell .e-topbar{ padding:0 16px; }
  body.ar-ent-shell .e-topbar-menu{ display:flex; }
  body.ar-ent-shell .e-topbar-search{ max-width:none; }
  body.ar-ent-shell .ar-bell-panel{ right:12px !important; left:12px !important; }
}
/* Employee home — phone polish (heading fits, no desktop-only hints) */
@media (max-width:560px){
  .ar-ent .e-hero h1{ font-size:24px; line-height:1.15; }
  .ar-ent .e-hero-sub{ font-size:14px; margin-bottom:16px; }
  .ar-ent .e-hero-search{ height:46px; padding:0 14px; }
  .ar-ent .e-hero-search .e-kbd{ display:none; }
  .ar-ent .e-sec-head h2{ font-size:15px; }
}

/* ============================================================
   THEME TOGGLE — class-based dark theme (flips core tokens).
   The design is token-driven, so recoloring a handful of vars
   restyles the whole portal. First-pass dark theme.
   ============================================================ */
html[data-theme="dark"]{
  --bg:#12100E; --ink:#ECEDEA; --ink-soft:#B9BFBB; --ink-mute:#9AA19C;
  --teal-soft:#123A38; --teal-mist:#0E2A28; --red-soft:#3A1620;
  --line:#2A2724; --line-strong:#39352F; --hairline:rgba(255,255,255,0.09);
  --e-glass:rgba(30,36,34,0.62); --e-glass-strong:rgba(30,36,34,0.78); --e-glass-border:rgba(255,255,255,0.08);
  --glass:rgba(30,36,34,0.55); --glass-strong:rgba(30,36,34,0.72);
  --surface-2:rgba(255,255,255,0.04);
}
html[data-theme="dark"] body{ background:#12100E; }
html[data-theme="dark"] .ar-sidebar.ar-nav{ background:#17150F; }
html[data-theme="dark"] .e-topbar-search{ background:#1E1B16; color:var(--ink-mute); }
html[data-theme="dark"] .e-topbar{ background:rgba(23,21,15,0.82); }

/* ---- Dark mode: flip all the light surfaces the first pass missed ---- */
html[data-theme="dark"]{
  /* stronger glass values so cards read as dark, not light-grey */
  --e-glass:rgba(32,38,36,0.66); --e-glass-strong:rgba(34,40,38,0.82); --e-glass-border:rgba(255,255,255,0.10);
  --glass:rgba(32,38,36,0.60); --glass-strong:rgba(34,40,38,0.78);
  --warning-bg:#3A2E12; --danger-bg:#3A1620; --success-bg:#123A2C; --blue-soft:#16283A;
  --amber-soft:#3A2E12; --red-soft:#3A1620;
}
/* Cards / tiles / panels — force dark surface + light text */
html[data-theme="dark"] .ar-ent .e-kpi,
html[data-theme="dark"] .ar-ent .e-qa,
html[data-theme="dark"] .ar-ent .e-upanel,
html[data-theme="dark"] .ar-ent .e-list,
html[data-theme="dark"] .ar-ent .e-glass,
html[data-theme="dark"] .ar-panel,
html[data-theme="dark"] .ar-card,
html[data-theme="dark"] .ar-card-plain{
  background:rgba(34,40,38,0.82) !important; border-color:rgba(255,255,255,0.10) !important; color:var(--ink);
}
html[data-theme="dark"] .ar-ent .e-kpi-v,
html[data-theme="dark"] .ar-ent .e-qa span,
html[data-theme="dark"] .ar-ent .e-uitem-t{ color:var(--ink); }
/* The welcome banner + attention panels (were washed-out light) */
html[data-theme="dark"] .ar-welcome,
html[data-theme="dark"] .ar-attention,
html[data-theme="dark"] .ar-portal-card,
html[data-theme="dark"] .ar-glass-pillar{
  background:rgba(34,40,38,0.82) !important; border-color:rgba(255,255,255,0.10) !important; color:var(--ink);
}
html[data-theme="dark"] .ar-welcome *,
html[data-theme="dark"] .ar-attention *{ color:inherit; }
/* Inputs, selects, textareas */
html[data-theme="dark"] input:not([type=submit]):not([type=button]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .ar-select,
html[data-theme="dark"] .ar-input{
  background:#1E1B16 !important; color:var(--ink) !important; border-color:rgba(255,255,255,0.12) !important;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{ color:var(--ink-mute); }
/* The hero search input stays glass/translucent (it sits on the teal hero) */
html[data-theme="dark"] .e-hero-search input{ background:transparent !important; color:#fff !important; border:0 !important; }
/* Secondary/outline buttons */
html[data-theme="dark"] .ar-btn:not(.ar-btn-primary){
  background:rgba(255,255,255,0.06); color:var(--ink); border-color:rgba(255,255,255,0.14);
}
/* Tables */
html[data-theme="dark"] table{ color:var(--ink); }
html[data-theme="dark"] th{ color:var(--ink-soft); border-color:rgba(255,255,255,0.10); }
html[data-theme="dark"] td{ border-color:rgba(255,255,255,0.07); }
html[data-theme="dark"] tr:hover{ background:rgba(255,255,255,0.03); }
/* Icon tiles: keep tints but ensure contrast */
html[data-theme="dark"] .e-kpi-ico.t, html[data-theme="dark"] .e-uitem-ico.t, html[data-theme="dark"] .e-qa i{ color:#3FCFC0; }
html[data-theme="dark"] .e-kpi-ico{ background:rgba(255,255,255,0.06); }
html[data-theme="dark"] .e-kpi-ico.t{ background:#123A38; }
html[data-theme="dark"] .e-kpi-ico.b{ background:#16283A; }
html[data-theme="dark"] .e-kpi-ico.a{ background:#3A2E12; }
html[data-theme="dark"] .e-kpi-ico.r{ background:#3A1620; }
/* Command palette in dark */
html[data-theme="dark"] .ar-cmdk{ background:rgba(28,32,30,0.92); border-color:rgba(255,255,255,0.10); }
html[data-theme="dark"] .ar-cmdk-input{ color:var(--ink); }
html[data-theme="dark"] .ar-cmdk-item{ color:var(--ink); }
html[data-theme="dark"] .ar-cmdk-item.active{ background:rgba(63,207,192,0.14); }
/* Bell panel in dark */
html[data-theme="dark"] .ar-bell-panel{ background:#1C201E; border-color:rgba(255,255,255,0.10); color:var(--ink); }
/* Admin dashboard stat cards (ar-ent-admin scope sets a light glass — override it) */
html[data-theme="dark"] body.ar-ent-admin .ar-stat{
  background:rgba(34,40,38,0.82) !important; border-color:rgba(255,255,255,0.10) !important; color:var(--ink);
}
html[data-theme="dark"] body.ar-ent-admin .ar-stat-num{ color:var(--ink); }
html[data-theme="dark"] body.ar-ent-admin .ar-stat-label{ color:var(--ink-mute); }
/* Active tab pill in dark */
html[data-theme="dark"] .ar-tab.active{ background:rgba(255,255,255,0.10); color:var(--ink); }
html[data-theme="dark"] .ar-tabs{ background:rgba(255,255,255,0.04); }

/* Buttons that live inside the hero page header (e.g. Licenses "Add licence")
   — make them read as white/glass so they don't blend into the teal gradient. */
.ar-ent .e-page-head .ar-btn{ background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.32); color:#fff; }
.ar-ent .e-page-head .ar-btn:hover{ background:rgba(255,255,255,0.26); }
.ar-ent .e-page-head .ar-btn-primary{ background:#fff; border-color:#fff; color:var(--teal-deep); }
.ar-ent .e-page-head .ar-btn-primary:hover{ background:rgba(255,255,255,0.9); }

/* Command-palette scroll lock — class-based (never persists across navigation,
   because a fresh document starts without the class). */
html.ar-cmdk-lock, html.ar-cmdk-lock body{ overflow:hidden; }

/* ===== Enterprise modal system — dark mode tokens ===== */
html[data-theme="dark"]{
  --ar-modal-surface:#1C201E; --ar-modal-border:rgba(255,255,255,0.10);
  --ar-modal-head-bg:#1C201E; --ar-modal-foot-bg:#191D1B;
}
html[data-theme="dark"] .ar-modal{ background:rgba(0,0,0,0.62); }
html[data-theme="dark"] .ar-modal-head .ar-modal-ico{ background:#123A38; color:#3FCFC0; }
html[data-theme="dark"] .ar-modal-body input:not([type=checkbox]):not([type=radio]):not([type=file]),
html[data-theme="dark"] .ar-modal-body select,
html[data-theme="dark"] .ar-modal-body textarea{ background:#14100E; border-color:rgba(255,255,255,0.12); color:var(--ink); }
html[data-theme="dark"] .ar-modal-close:hover{ background:rgba(255,255,255,0.06); }

/* Enterprise modal system — body scroll lock while any modal is open
   (class-based so it never persists across navigation). */
html.ar-modal-lock, html.ar-modal-lock body{ overflow:hidden; }

/* ============================================================
   ENTERPRISE ASSET PROFILE  (asset detail modal)
   Summary row + two-column section cards + tabbed detail.
   1000px wide, 90vh, on a soft grey canvas with section cards.
   ============================================================ */
.ar-modal-box.ar-modal--profile{ max-width:1000px; }
.ar-modal-body.ap-body{ padding:0; background:var(--bg, #F5F4F1); }
.ap-profile{ padding:32px; display:flex; flex-direction:column; gap:20px; }

/* Toolbar — all actions grouped, stays near the top */
.ap-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ap-toolbar-status{ display:flex; align-items:center; gap:10px; font-size:14px; }
.ap-toolbar-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ap-status-select{ width:auto; height:36px; padding:0 10px; font-size:13px; border-radius:10px; }

/* Row 1 — summary cards */
.ap-summary{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ap-sum-card{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--hairline,#E7E4DE);
  border-radius:14px; padding:16px 18px; box-shadow:0 1px 2px rgba(15,40,38,.04); }
.ap-sum-ico{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.ap-sum-ico.t{ background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); }
.ap-sum-ico.b{ background:#E9F1FC; color:#378ADD; }
.ap-sum-ico.a{ background:#FBF0DC; color:#BA7517; }
.ap-sum-label{ font-size:12px; color:var(--ink-mute,#6E746F); }
.ap-sum-value{ font-size:16px; font-weight:700; color:var(--ink,#161A19); letter-spacing:-0.01em; }

/* Assign bar (kept for the existing assign/return UI) — carded */
.ap-profile .ar-asset-assignbar{ background:#fff; border:1px solid var(--hairline,#E7E4DE); border-radius:14px; padding:16px 18px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* Row 2 — two-column section cards */
.ap-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ap-card{ background:#fff; border:1px solid var(--hairline,#E7E4DE); border-radius:14px; padding:20px 22px;
  box-shadow:0 1px 2px rgba(15,40,38,.04); }
.ap-card-head{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ink,#161A19);
  margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--hairline,#E7E4DE); }
.ap-card-head i{ font-size:17px; color:var(--teal,#0F8080); }
.ap-kv{ display:flex; justify-content:space-between; gap:16px; padding:7px 0; font-size:14px; }
.ap-kv .k{ color:var(--ink-mute,#6E746F); flex-shrink:0; }
.ap-kv .v{ color:var(--ink,#161A19); font-weight:600; text-align:right; }
.ap-notes p{ font-size:14px; color:var(--ink,#161A19); margin:0; }

/* Row 3 — tabs */
.ap-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--hairline,#E7E4DE); flex-wrap:wrap; }
.ap-tab{ border:0; background:none; cursor:pointer; padding:10px 14px; font-family:inherit; font-size:13px; font-weight:600;
  color:var(--ink-mute,#6E746F); display:inline-flex; align-items:center; gap:6px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.ap-tab:hover{ color:var(--ink,#161A19); }
.ap-tab.active{ color:var(--teal-deep,#0A5A5A); border-bottom-color:var(--teal,#0F8080); }
.ap-panel{ display:none; padding-top:16px; }
.ap-panel.active{ display:block; }

/* Lists inside panels */
.ap-list{ display:flex; flex-direction:column; gap:10px; }
.ap-list-item{ background:#fff; border:1px solid var(--hairline,#E7E4DE); border-radius:12px; padding:14px 16px; font-size:14px; }
.ap-list-item.current{ border-color:var(--teal,#0F8080); box-shadow:0 0 0 2px rgba(15,128,128,.10); }

/* Empty states */
.ap-empty{ text-align:center; padding:44px 24px; color:var(--ink-mute,#6E746F); background:#fff;
  border:1px solid var(--hairline,rgba(20,30,28,0.08)); border-radius:14px; }
.ap-empty i{ font-size:30px; opacity:0.5; display:block; margin:0 auto 12px; }
.ap-empty p{ margin:0 0 12px; font-size:14px; }

/* Responsive: single column on tablet, full-screen drawer on mobile */
@media (max-width:820px){
  .ap-cols, .ap-summary{ grid-template-columns:1fr; }
  .ap-profile{ padding:20px; gap:16px; }
}

/* Dark mode */
html[data-theme="dark"] .ar-modal-body.ap-body{ background:#14100E; }
html[data-theme="dark"] .ap-sum-card,
html[data-theme="dark"] .ap-card,
html[data-theme="dark"] .ap-list-item,
html[data-theme="dark"] .ap-empty,
html[data-theme="dark"] .ap-profile .ar-asset-assignbar{ background:#1C201E; border-color:rgba(255,255,255,0.10); }

/* ============================================================
   Full-page form cards (UX_STANDARDS.md §5) — same enterprise
   treatment as modal forms, for standalone form pages.
   ============================================================ */
.ar-form-card{ max-width:600px; margin:0 auto; background:#fff; border:1px solid var(--hairline,#E7E4DE);
  border-radius:16px; box-shadow:0 1px 2px rgba(15,40,38,.04); overflow:hidden; }
.ar-form-card-body{ padding:24px 24px 8px; }
.ar-form-card .ar-modal-section-title{ margin-bottom:14px; }
.ar-form-card .ar-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.ar-form-card .ar-field > label{ font-size:13px; font-weight:600; color:var(--ink,#161A19); }
.ar-form-card input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.ar-form-card select, .ar-form-card textarea{
  height:48px; padding:0 14px; border-radius:12px; border:1px solid var(--ar-modal-border,rgba(16,40,38,.14));
  background:#fff; color:var(--ink); font-family:inherit; font-size:14px; width:100%; transition:border-color .15s, box-shadow .15s; }
.ar-form-card textarea{ height:auto; min-height:104px; padding:12px 14px; resize:vertical; }
.ar-form-card input:focus, .ar-form-card select:focus, .ar-form-card textarea:focus{
  outline:none; border-color:var(--teal,#0F8080); box-shadow:0 0 0 3px rgba(15,128,128,.14); }
.ar-form-card-foot{ display:flex; justify-content:flex-end; gap:12px; padding:16px 24px;
  border-top:1px solid var(--hairline,#E7E4DE); background:var(--bg,#F5F4F1); }
html[data-theme="dark"] .ar-form-card{ background:#1C201E; border-color:rgba(255,255,255,.10); }
html[data-theme="dark"] .ar-form-card input, html[data-theme="dark"] .ar-form-card select, html[data-theme="dark"] .ar-form-card textarea{ background:#14100E; border-color:rgba(255,255,255,.12); color:var(--ink); }
html[data-theme="dark"] .ar-form-card-foot{ background:#191D1B; border-color:rgba(255,255,255,.10); }

/* ============================================================
   List toolbar + sticky table header (UX_STANDARDS.md §11)
   Reusable row of search + filters (left) and actions (right),
   sitting between the summary and the table.
   ============================================================ */
.ar-list-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:18px 0; }
.ar-list-toolbar .ar-toolbar-filters{ display:flex; gap:10px; flex-wrap:wrap; flex:1; min-width:0; align-items:center; }
.ar-list-toolbar .ar-toolbar-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ar-list-toolbar .ar-input, .ar-list-toolbar .ar-select{ height:40px; }
.ar-list-toolbar .ar-input[type=text]{ min-width:220px; flex:1; }

/* Sticky table header — the header row stays visible while the body scrolls. */
.ar-asset-row.ar-asset-head{ position:sticky; top:0; z-index:3; }
html[data-theme="dark"] .ar-asset-row.ar-asset-head{ background:#20241F; }

/* Asset detail page — assign bar + history pills (moved from assets.php inline
   style so the dedicated asset.php page inherits them). */
.ar-asset-assignbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:var(--teal-soft); border-radius:12px; padding:12px 14px; }
.ar-ack-pill{ font-size:10px; padding:1px 8px; border-radius:999px; font-weight:700; }
.ar-ack-accepted{ background:rgba(22,121,79,0.12); color:#16794f; }
.ar-ack-pending{ background:rgba(180,83,9,0.12); color:#b45309; }
.ar-ack-problem{ background:rgba(224,34,61,0.12); color:#b0182e; }
.ar-tag-current{ background:var(--teal); color:#fff; font-size:10px; padding:1px 7px; border-radius:999px; font-weight:700; }
.ar-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin-bottom:12px; }
@media (max-width:800px){ .ar-form-grid{ grid-template-columns:1fr; } }

/* My assigned devices/licences cards (employee — used on my-devices.php) */
.ar-myasset-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; }
.ar-myasset{
  display:flex; flex-direction:column; gap:0; padding:18px;
  border:1px solid var(--hairline); border-radius:16px;
  background:var(--glass-strong, #fff); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:var(--glass-edge), var(--shadow-1); transition:box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.ar-myasset:hover{ box-shadow:var(--glass-edge), var(--shadow-2); transform:translateY(-1px); }
.ar-myasset-head{ display:flex; align-items:center; gap:13px; }
.ar-myasset-ico{
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  background:linear-gradient(140deg, var(--teal), var(--teal-deep)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:23px;
  box-shadow:0 4px 12px -3px rgba(15,128,128,0.45);
}
.ar-myasset-title{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.ar-myasset-title strong{ font-size:16px; font-weight:650; color:var(--ink); letter-spacing:-0.01em; line-height:1.2; }
.ar-myasset-sub{ font-size:12.5px; color:var(--ink-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Status pill top-right */

/* Meta grid — labeled, clearly separated */
.ar-myasset-meta{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:15px; padding-top:14px; border-top:1px solid var(--hairline); }
.ar-meta-cell{ display:flex; flex-direction:column; gap:2px; }
.ar-meta-k{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-mute); font-weight:600; }
.ar-meta-v{ font-size:13.5px; color:var(--ink); font-weight:500; }
.ar-asset-tag2{ font-family:ui-monospace, Menlo, monospace; color:var(--teal-deep); font-weight:600; }

.ar-myasset.needs-signoff{ border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft), var(--shadow-1); }
.ar-signoff-box{ margin-top:15px; padding-top:14px; border-top:1px solid var(--hairline); }
.ar-signoff-statement{ font-size:12px; color:var(--ink-mute); line-height:1.55; margin-bottom:10px; }
.ar-signoff-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ===== People directory (Step 2) — additive, scoped to .ar-dir* ===== */
.ar-dir-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.ar-dir-search{position:relative;flex:1 1 280px;min-width:240px}
.ar-dir-search .ti{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-mute)}
.ar-dir-search input{width:100%;padding:10px 12px 10px 36px;border:1px solid var(--line);border-radius:10px;background:var(--card);font:inherit;color:var(--ink)}
.ar-dir-search input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.ar-dir-filters{display:flex;flex-wrap:wrap;gap:6px}
.ar-dir-chip{padding:7px 14px;border:1px solid var(--line);background:var(--card);border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink-mute);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.ar-dir-chip:hover{border-color:var(--teal);color:var(--teal-deep)}
.ar-dir-chip.is-active{background:var(--teal);border-color:var(--teal);color:#fff}
.ar-dir-count{font-size:12px;color:var(--ink-mute);margin:2px 2px 12px}
.ar-dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.ar-dir-card{padding:16px;display:flex;flex-direction:column;gap:12px}
.ar-dir-top{display:flex;align-items:center;gap:12px}
.ar-dir-av{position:relative;width:44px;height:44px;font-size:15px}
.ar-dir-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:999px;background:#22c55e;border:2px solid var(--card)}
.ar-dir-id{min-width:0}
.ar-dir-name{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis}
.ar-dir-meta{min-height:18px}
.ar-dir-dept{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-mute)}
.ar-dir-mail{margin-top:auto}
.ar-pill.g-it{background:var(--teal-soft);color:var(--teal-deep)}
.ar-pill.g-al{background:#FDF1E0;color:var(--amber)}
.ar-pill.g-emp{background:#EEF1F0;color:var(--ink-mute)}

/* Directory profile enrichment (Step 2a) */
.ar-dir-title{font-size:12px;color:var(--ink-mute);margin-bottom:5px;line-height:1.3}
.ar-dir-meta{display:flex;flex-direction:column;gap:5px}
.ar-dir-actions{display:flex;gap:8px;align-items:center;margin-top:auto}
.ar-dir-actions .ar-dir-mail{flex:1}
.ar-dir-call,.ar-dir-edit{flex:0 0 auto;padding-left:10px;padding-right:10px}
.ar-dir-you{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--teal-deep);background:var(--teal-soft);padding:1px 7px;border-radius:999px;vertical-align:middle}
.ar-dir-card.is-me{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal-soft)}

/* Lifecycle checklist (Step 3.3) — carded items with a launch-the-task action */
.ar-checklist{display:flex;flex-direction:column;gap:8px}
.ar-check-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.ar-check-item.done{background:var(--teal-soft);border-color:transparent}
.ar-check-main{display:flex;align-items:center;gap:10px;flex:1;cursor:pointer;margin:0;min-width:0}
.ar-check-body{display:flex;flex-direction:column;min-width:0}
.ar-check-item.done .ar-check-body strong{text-decoration:line-through;color:var(--ink-mute)}
.ap-item-action{flex:0 0 auto;white-space:nowrap}

/* Deleted items bin (soft delete) */
.ar-del-group{ margin-bottom:22px; }
.ar-del-grouphead{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.ar-del-count{ background:var(--red-soft,#FDEAEE); color:var(--red,#E0223D); font-size:11px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; }
.ar-del-list{ display:flex; flex-direction:column; gap:8px; }
.ar-del-row{ display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.ar-del-ref{ font-weight:700; color:var(--ink); }
.ar-del-meta{ font-size:12px; color:var(--ink-mute); flex:1; }
.ar-del-restore{ flex:0 0 auto; }

/* Impersonation ("Log in as employee") banner */
.ar-imp-banner{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:var(--red,#E0223D); color:#fff; padding:11px 18px; border-radius:12px; margin-bottom:18px; font-size:14px; box-shadow:0 6px 18px -8px rgba(224,34,61,.5); }
.ar-imp-banner span{ display:flex; align-items:center; gap:8px; }
.ar-imp-banner strong{ font-weight:700; }
.ar-imp-exit{ display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--red,#E0223D); font-weight:700; text-decoration:none; padding:7px 14px; border-radius:8px; white-space:nowrap; }
.ar-imp-exit:hover{ background:#ffeef1; }

/* ============================================================
   MOBILE AUDIT FIXES (2026-08) — top bar + tables on phones.
   - one menu button (topbar hamburger); hide the old fixed toggle
   - search never wraps; icon-only on small phones
   - wide tables scroll horizontally instead of clipping
   ============================================================ */
body.ar-ent-shell .ar-sidebar-toggle{ display:none !important; } /* topbar hamburger replaces the floating one */
body.ar-ent-shell .e-topbar-search-ph{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
@media (max-width:560px){
  body.ar-ent-shell .e-topbar{ gap:8px; padding:0 12px; }
  body.ar-ent-shell .e-topbar-search .e-kbd,
  body.ar-ent-shell .e-topbar-search-ph{ display:none; }
  body.ar-ent-shell .e-topbar-search{ flex:0 0 auto; width:42px; justify-content:center; padding:0; }
  body.ar-ent-shell .e-topbar-actions{ gap:4px; }
  body.ar-ent-shell .e-topbar-btn{ width:38px; height:38px; }
}
/* Wide tables: scroll horizontally on phones rather than squashing/clipping.
   Catch-all: every data table lives in .ar-main or a modal box. */
@media (max-width:760px){
  .ar-main table, .ar-modal-box table, .ar-modal table{
    display:block; width:100%; max-width:100%; overflow-x:auto;
    -webkit-overflow-scrolling:touch; white-space:nowrap;
  }
}

/* ============================================================
   Responsive scaling refinements (additive, 2026-08)
   Tightens padding + prevents overflow on small/medium screens
   so the portal doesn't feel oversized on 7"–14" displays.
   Does not touch the sidebar drawer system above.
   ============================================================ */
@media (max-width:1100px){
  body.ar-ent-shell .ar-main{ padding:20px 22px 72px; }
}
@media (max-width:820px){
  body.ar-ent-shell .ar-main{ padding:18px 16px 64px; }
  /* wide tables scroll horizontally instead of forcing the page wider */
  .ar-ent table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ar-ent img, .ar-ent svg, .ar-ent video{ max-width:100%; height:auto; }
}
@media (max-width:560px){
  body.ar-ent-shell .ar-main{ padding:14px 13px 56px; }
  .ar-ent .e-greet h1{ font-size:23px; }
  .ar-ent .e-hero-bar h1{ font-size:20px; }
  /* stack any two/three-column inline grids the pages set up */
  .ar-ent .e-cols, .ar-ent .e-workspace, .ar-ent .ue-grid{ grid-template-columns:1fr !important; }
}

/* ============================================================
   Travel claim — mobile refinements (2026-09)
   Travel pages define their own hero/row classes globally, so
   these !important rules tighten them on phones without touching
   the per-page desktop styles.
   ============================================================ */
@media (max-width:560px){
  /* heroes: tighter padding so they don't dominate a small screen */
  .tc-hero, .tv-hero, .tva-hero, .tvf-hero, .tvp-hero, .tvd-hero{ padding:20px 18px !important; border-radius:16px !important; }
  .tv-hero{ gap:12px !important; }

  /* extras rows (pass / phone / training / therapeutic): label on its
     own line, amount + receipt beneath — so the label isn't crushed */
  .section-row{ grid-template-columns:1fr auto !important; row-gap:6px !important; }
  .section-row .nm{ grid-column:1 / -1 !important; }

  /* finance: cohort cards + modal controls never force horizontal scroll */
  .fc-coh{ min-width:0 !important; }
  .fc-in{ max-width:100% !important; }
  .modal-body select, .modal-body input[type=text], .modal-body input[type=date]{ max-width:100% !important; }
  .modal{ padding:14px !important; }

  /* daily trip rows: reclaim side padding for the From/To fields */
  .d-trips{ padding-left:14px !important; padding-right:12px !important; }
}

/* ============================================================
   Whole-portal mobile polish (2026-09)
   Safe phone-level refinements applied across every page that
   uses the enterprise shell. No layout-breaking overrides.
   ============================================================ */
@media (max-width:600px){
  /* dense stat grids read better 2-up than 3-up on a phone */
  /* comfortable tap targets for primary controls */
  .ar-ent .ar-btn, .ar-ent .e-btn, .ar-ent .btn{ min-height:42px; }
  /* button / action rows wrap instead of overflowing off-screen */
  .ar-ent .ar-actions, .ar-ent .ar-btn-row, .ar-ent .e-actions,
  .ar-ent .ar-modal-actions, .ar-ent .toolbar, .ar-ent .filters{ flex-wrap:wrap; }
  /* code / preformatted blocks scroll rather than stretch the page */
  .ar-ent pre, .ar-ent code{ max-width:100%; overflow-x:auto; }
  /* long words / emails / ids break instead of forcing width */
  .ar-ent .ar-card, .ar-ent .ar-panel, .ar-ent .e-card{ overflow-wrap:anywhere; }
}


/* ============================================================
   Premium page kit (epk-, 2026-09) — solid-white visual language
   matching Asset management + Travel. Unique names (never collide
   with the glass .e-kpi/.e-page-head used on dashboards). Reuse on
   every new feature page: epk-head, epk-kpi, epk-card, epk-pill.
   ============================================================ */
.ar-ent .epk-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.ar-ent .epk-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--teal,#0F8080); }
.ar-ent .epk-title{ font-size:24px; font-weight:700; margin:4px 0 2px; color:var(--ink,#161A19); }
.ar-ent .epk-sub{ font-size:14px; color:var(--ink-mute,#6E746F); margin:0; max-width:640px; }
.ar-ent .epk-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px; }
.ar-ent .epk-kpi{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line,#E6E4E0); border-radius:12px; background:#fff; transition:border-color .15s, background .15s; }
.ar-ent .epk-kpi.clickable{ cursor:pointer; } .ar-ent .epk-kpi.clickable:hover{ border-color:var(--teal,#0F8080); }
.ar-ent .epk-kpi.active{ border-color:var(--teal,#0F8080); background:var(--teal-soft,#E8F5F3); }
.ar-ent .epk-kpi-ic{ display:grid; place-items:center; width:42px; height:42px; border-radius:10px; font-size:20px; flex:0 0 auto; background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); }
.ar-ent .epk-kpi-n{ font-size:21px; font-weight:700; color:var(--ink,#161A19); line-height:1; }
.ar-ent .epk-kpi-l{ font-size:12px; color:var(--ink-mute,#6E746F); margin-top:3px; }
.ar-ent .epk-card{ border:1px solid var(--line,#E6E4E0); border-radius:12px; padding:15px 17px; background:#fff; transition:box-shadow .15s, border-color .15s; }
.ar-ent .epk-card:hover{ box-shadow:0 8px 24px -14px rgba(16,64,60,.32); }
.ar-ent .epk-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.ar-ent .epk-pill.red{ background:#FBE9E9; color:#C11A30; } .ar-ent .epk-pill.amber{ background:#FBEFDD; color:#C98200; }
.ar-ent .epk-pill.green{ background:#E4F4E9; color:#1C6E3E; } .ar-ent .epk-pill.teal{ background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); }
@media (max-width:560px){ .ar-ent .epk-title{ font-size:21px; } .ar-ent .epk-kpis{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   Reusable tabs (2026-09) — turn any long stacked form into tabbed
   sections. Markup: a .ar-tabs bar of <button class="ar-tab" data-tab="x">
   and sibling .ar-tabpanel[data-panel="x"] blocks. Auto-wired by script.js.
   ============================================================ */
.ar-ent .ar-tabs{ display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--line,#E6E4E0); margin-bottom:18px; }
.ar-ent .ar-tab{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border:0; background:none; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink-mute,#6E746F); cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1px; }
.ar-ent .ar-tab i{ font-size:17px; }
.ar-ent .ar-tab.on{ color:var(--teal-deep,#0A5A5A); border-bottom-color:var(--teal,#0F8080); }
.ar-ent .ar-tab:hover{ color:var(--ink,#161A19); }
.ar-ent .ar-tabpanel{ display:none; } .ar-ent .ar-tabpanel.on{ display:block; }
@media (max-width:560px){ .ar-ent .ar-tab{ padding:8px 11px; font-size:12.5px; } .ar-ent .ar-tab i{ font-size:15px; } }

/* Attachment preview modal (arPreview) */
.ar-preview{ position:fixed; inset:0; background:rgba(10,20,18,.62); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:20px; z-index:10060; }
.ar-preview.show{ display:flex; }
.ar-preview-box{ background:#fff; border-radius:14px; max-width:860px; width:100%; max-height:calc(100vh - 48px); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,.6); }
.ar-preview-head{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid #E7E4DE; }
.ar-preview-name{ flex:1; font-size:14px; font-weight:600; color:#161A19; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ar-preview-dl{ font-size:13px; font-weight:600; color:var(--teal-deep,#0A5A5A); text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.ar-preview-del{ font-size:13px; font-weight:600; color:#C11A30; background:none; border:1px solid #F0C9CE; border-radius:8px; padding:5px 11px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.ar-preview-x{ background:none; border:0; font-size:24px; line-height:1; cursor:pointer; color:#9AA29D; }
.ar-preview-body{ overflow:auto; background:#F5F4F1; display:flex; align-items:center; justify-content:center; }
.ar-preview-body img{ max-width:100%; max-height:calc(100vh - 130px); display:block; }
.ar-preview-body iframe{ width:100%; height:calc(100vh - 130px); border:0; background:#fff; }

/* avatar circles must clip uploaded photos */
.ar-nav-avatar, .e-topbar-avatar, .e-account-item .e-topbar-avatar{ overflow:hidden; }

/* ============================================================
   Mobile bottom-tab navigation (PWA app feel) — phones only.
   Desktop keeps the sidebar; the bar replaces the floating
   hamburger/FAB on small screens and "More" opens the full menu.
   ============================================================ */
.ar-tabbar{ display:none; }
@media (max-width:760px){
  .ar-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:940;
    height:60px; background:#fff; border-top:1px solid var(--line,#E6E4E0);
    box-shadow:0 -8px 24px -14px rgba(0,0,0,.2);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .ar-tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    border:0; background:none; color:var(--faint,#9AA29D); font-family:inherit; font-size:10.5px; font-weight:500;
    text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .ar-tab i{ font-size:23px; line-height:1; }
  .ar-tab.on{ color:var(--teal,#0F8080); }
  .ar-tab.on span{ font-weight:700; }
  .ar-main{ padding-bottom:74px !important; }
  /* the bottom bar is the mobile nav now — retire the floating hamburger + FAB */
  .ar-sidebar-toggle, .ar-fab{ display:none !important; }
}

/* ============================================================
   Premium mobile home (phones only). Desktop dashboard untouched.
   ============================================================ */
.mhome{ display:none; }
@media (max-width:760px){
  .eh > *:not(.mhome){ display:none !important; }
  .mhome{ display:block; padding:2px 2px 6px; }
  .mh-top{ display:flex; align-items:center; justify-content:space-between; padding:6px 4px 14px; }
  .mh-date{ font-size:12.5px; color:#8A928F; }
  .mh-hi{ font-size:23px; font-weight:800; color:#12201D; letter-spacing:-.02em; }
  .mh-av{ width:42px; height:42px; border-radius:50%; overflow:hidden; background:linear-gradient(145deg,#15A897,#0A5A5A); color:#fff; display:grid; place-items:center; font-size:14px; font-weight:700; text-decoration:none; }
  .mh-hero{ position:relative; display:block; overflow:hidden; border-radius:24px; padding:20px; text-decoration:none;
    background:linear-gradient(145deg,#12938A,#0A544F); box-shadow:0 18px 38px -18px rgba(10,90,80,.55); }
  .mh-hero-bubble{ position:absolute; border-radius:50%; background:rgba(255,255,255,.08); }
  .mh-hero-bubble.a{ top:-40px; right:-30px; width:150px; height:150px; } .mh-hero-bubble.b{ bottom:-60px; right:24px; width:120px; height:120px; background:rgba(255,255,255,.06); }
  .mh-hero-in{ position:relative; }
  .mh-hero-label{ font-size:12px; color:#B8EFE7; } .mh-hero-num{ font-size:32px; font-weight:800; color:#fff; letter-spacing:-.03em; margin:3px 0 1px; }
  .mh-hero-sub{ font-size:11.5px; color:#B8EFE7; } .mh-hero-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; background:#fff; color:#0A4B46; border-radius:12px; padding:9px 15px; font-size:12.5px; font-weight:700; }
  .mh-stats{ display:flex; gap:12px; margin-top:14px; }
  .mh-stat{ flex:1; background:#fff; border-radius:18px; padding:14px; box-shadow:0 10px 26px -20px rgba(0,0,0,.35); }
  .mh-stat-l{ font-size:11px; color:#8A928F; } .mh-stat-n{ font-size:22px; font-weight:800; color:#12201D; letter-spacing:-.02em; margin:2px 0 1px; } .mh-stat-hint{ font-size:11px; color:#A7AFAB; }
  .mh-section{ font-size:14px; font-weight:700; color:#12201D; margin:20px 4px 12px; display:flex; justify-content:space-between; align-items:center; }
  .mh-see{ font-size:11.5px; font-weight:600; color:#0F7A72; text-decoration:none; }
  .mh-actions{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px 6px; }
  .mh-act{ display:flex; flex-direction:column; align-items:center; gap:7px; border:0; background:none; font-family:inherit; font-size:10.5px; font-weight:500; color:#5B635E; text-decoration:none; cursor:pointer; }
  .mh-act-ic{ width:56px; height:56px; border-radius:19px; background:#fff; box-shadow:0 8px 20px -14px rgba(0,0,0,.4); display:grid; place-items:center; font-size:22px; }
  .mh-feed{ background:#fff; border-radius:20px; box-shadow:0 10px 26px -20px rgba(0,0,0,.35); overflow:hidden; }
  .mh-feed-item{ display:flex; align-items:center; gap:12px; padding:13px 14px; text-decoration:none; border-bottom:0.5px solid #EFEDE6; }
  .mh-feed-item:last-child{ border-bottom:0; }
  .mh-feed-ic{ flex:0 0 auto; width:38px; height:38px; border-radius:13px; display:grid; place-items:center; font-size:17px; }
  .mh-feed-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .mh-feed-title{ font-size:12.5px; font-weight:600; color:#12201D; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mh-feed-sub{ font-size:11px; color:#8A928F; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mh-feed-dot{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:#12938A; }
  .mh-feed-empty{ padding:26px 16px; text-align:center; color:#A7AFAB; font-size:13px; }
}

/* ============================================================
   Guided tour (arTour) — spotlight + tooltip.
   ============================================================ */
.ar-tour-ov{ position:fixed; inset:0; z-index:100000; transition:background .25s; }
.ar-tour-box{ position:fixed; z-index:100001; border-radius:12px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(12,20,18,.62), 0 0 0 3px rgba(21,168,151,.95), 0 8px 30px -6px rgba(21,168,151,.5);
  transition:top .28s cubic-bezier(.4,0,.2,1), left .28s cubic-bezier(.4,0,.2,1), width .28s, height .28s; }
.ar-tour-tip{ position:fixed; z-index:100002; width:340px; max-width:calc(100vw - 32px); background:#fff; border-radius:18px;
  box-shadow:0 26px 64px -22px rgba(0,0,0,.55); padding:18px 20px 16px; font-family:inherit; }
.ar-tour-tip.arrow-up::before, .ar-tour-tip.arrow-down::before{ content:''; position:absolute; left:34px; width:16px; height:16px; background:#fff; transform:rotate(45deg); }
.ar-tour-tip.arrow-up::before{ top:-8px; box-shadow:-3px -3px 6px -4px rgba(0,0,0,.2); }
.ar-tour-tip.arrow-down::before{ bottom:-8px; box-shadow:3px 3px 6px -4px rgba(0,0,0,.2); }
.ar-tour-step{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#15A897; margin-bottom:6px; }
.ar-tour-h{ font-size:17px; font-weight:800; color:#12201D; letter-spacing:-.01em; margin-bottom:6px; }
.ar-tour-b{ font-size:13.5px; line-height:1.55; color:#4A524E; }
.ar-tour-f{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.ar-tour-dots{ display:flex; gap:5px; } .ar-tour-dot{ width:6px; height:6px; border-radius:50%; background:#DCD9D0; } .ar-tour-dot.on{ background:#15A897; width:18px; border-radius:3px; transition:width .2s; }
.ar-tour-btns{ display:flex; align-items:center; gap:6px; }
.ar-tour-btns button{ border:0; font:inherit; font-size:13px; font-weight:600; border-radius:10px; padding:8px 14px; cursor:pointer; }
.ar-tour-back, .ar-tour-skip{ background:none; color:#8A928F; padding:8px 10px; }
.ar-tour-back:hover, .ar-tour-skip:hover{ color:#12201D; }
.ar-tour-next{ background:linear-gradient(145deg,#15A897,#0A5A5A); color:#fff; box-shadow:0 8px 16px -8px rgba(15,128,128,.6); }
body.ar-tour-active{ overflow:hidden; }
@media (max-width:560px){ .ar-tour-tip{ width:calc(100vw - 24px); left:12px !important; } }

/* Home tour launcher strip */
.tour-strip{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:linear-gradient(135deg,#E8F5F3,#F3EEFB); border:1px solid #D6E9E4; border-radius:16px; padding:14px 18px; margin-bottom:18px; }
.tour-strip-txt{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:#274b45; } .tour-strip-txt i{ font-size:22px; color:#0F7A72; }
.tour-strip-btns{ display:flex; gap:8px; }
.tour-go{ border:0; background:linear-gradient(145deg,#15A897,#0A5A5A); color:#fff; font:inherit; font-size:13px; font-weight:700; border-radius:10px; padding:9px 16px; cursor:pointer; box-shadow:0 8px 16px -8px rgba(15,128,128,.55); }
.tour-x{ border:0; background:none; color:#6A736F; font:inherit; font-size:13px; font-weight:600; padding:9px 10px; cursor:pointer; }

/* Guided tour — auto-play polish */
.ar-tour-box{ animation:ar-tour-pulse 2s ease-in-out infinite; }
@keyframes ar-tour-pulse{ 0%,100%{ box-shadow:0 0 0 9999px rgba(12,20,18,.64), 0 0 0 3px rgba(21,168,151,.95), 0 0 0 6px rgba(21,168,151,.18); } 50%{ box-shadow:0 0 0 9999px rgba(12,20,18,.64), 0 0 0 3px rgba(21,168,151,1), 0 0 0 12px rgba(21,168,151,.28); } }
.ar-tour-tip{ animation:ar-tour-in .28s cubic-bezier(.34,1.3,.5,1) both; }
@keyframes ar-tour-in{ from{ opacity:0; transform:translateY(8px) scale(.97); } to{ opacity:1; transform:none; } }
.ar-tour-exit{ position:absolute; top:10px; right:12px; border:0; background:none; font-size:22px; line-height:1; color:#B4B2A9; cursor:pointer; padding:2px 6px; border-radius:8px; } .ar-tour-exit:hover{ color:#12201D; background:#F3F1EC; }
.ar-tour-prog{ position:absolute; top:0; left:0; right:0; height:4px; background:#EEEBE4; border-radius:18px 18px 0 0; overflow:hidden; }
.ar-tour-prog-fill{ display:block; height:100%; width:0; background:linear-gradient(90deg,#15A897,#7C5CFF); border-radius:0 4px 4px 0; }
.ar-tour-welcome{ text-align:center; padding:26px 24px 22px; width:380px; }
.ar-tour-badge{ width:60px; height:60px; margin:0 auto 14px; border-radius:20px; background:linear-gradient(145deg,#15A897,#0A5A5A); color:#fff; display:grid; place-items:center; font-size:30px; box-shadow:0 12px 26px -10px rgba(15,128,128,.6); }
.ar-tour-welcome .ar-tour-h{ font-size:20px; }
.ar-tour-welcome .ar-tour-b{ font-size:14px; margin-top:8px; }
.ar-tour-welcome-btns{ display:flex; flex-direction:column; gap:9px; margin-top:20px; }
.ar-tour-welcome-btns .ar-tour-next{ background:linear-gradient(145deg,#15A897,#0A5A5A); color:#fff; border:0; font:inherit; font-size:14.5px; font-weight:700; border-radius:13px; padding:13px; cursor:pointer; box-shadow:0 10px 22px -8px rgba(15,128,128,.6); }
.ar-tour-welcome-btns .ar-tour-skip{ background:none; border:0; color:#8A928F; font:inherit; font-size:13.5px; font-weight:600; padding:8px; cursor:pointer; }

/* Guided tour — centered (target-less) cards */
.ar-tour-tip.centered{ left:50% !important; top:50% !important; transform:translate(-50%,-50%); animation:ar-tour-in-c .3s cubic-bezier(.34,1.3,.5,1) both; }
@keyframes ar-tour-in-c{ from{ opacity:0; transform:translate(-50%,-50%) scale(.96); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }

/* ============================================================
   Shared premium mobile layer (phones ≤760px) — lifts every
   module's cards, buttons, heads and spacing to the premium feel,
   consistently. Desktop is untouched. Additive & conservative.
   ============================================================ */
@media (max-width:760px){
  /* comfortable content gutters + clearance for the bottom tab bar */
  .ar-ent{ padding:16px 14px 88px; }
  /* cards: soft depth + rounded, so every module reads as premium */
  .ar-panel, .epk-card, .mc, .av2-card, .dir-card, .le-sec{
    border-radius:18px;
    box-shadow:0 10px 26px -18px rgba(18,32,29,.32);
  }
  /* touch-friendly buttons */
  .ar-btn{ min-height:44px; border-radius:12px; }
  .ar-btn-primary{ box-shadow:0 8px 18px -10px rgba(15,128,128,.5); }
  /* page heads: cleaner + tighter on phones */
  .epk-title{ font-size:22px; letter-spacing:-.02em; }
  .epk-head, .e-page-head{ margin-bottom:14px; flex-wrap:wrap; gap:12px; }
  .epk-head{ flex-direction:column; align-items:stretch; }
  .epk-head > a.ar-btn-primary, .epk-head > button.ar-btn-primary{ width:100%; justify-content:center; }
  .epk-sub{ font-size:13px; }
  /* KPI tiles: 2-up, rounded, soft */
  .epk-kpis{ gap:10px; }
  .epk-kpi{ border-radius:16px; box-shadow:0 8px 20px -16px rgba(18,32,29,.3); }
  /* search / filter chip + tab rows scroll horizontally instead of wrapping messily */
  .dir-seg, .epk-pills, .filter-row, .chip-row{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .ar-ent .ar-tabs{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .dir-seg::-webkit-scrollbar, .epk-pills::-webkit-scrollbar, .ar-ent .ar-tabs::-webkit-scrollbar{ display:none; }
  .ar-ent .ar-tabs .ar-tab{ white-space:nowrap; flex:0 0 auto; }
  /* full-width primary action rows read better on phones */
  .ar-form-actions .ar-btn-primary, .epk-actions .ar-btn-primary{ flex:1; justify-content:center; }
}

/* Admin data tables: horizontal scroll on small screens so they never break the layout */
.ar-tscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.ar-tscroll::-webkit-scrollbar{ height:6px; } .ar-tscroll::-webkit-scrollbar-thumb{ background:#D6D3C9; border-radius:99px; }
@media (max-width:820px){ .ar-tscroll > table{ min-width:640px; } }

/* ============================================================
   Ticket approval panel (arTicketApproval) — premium, drops into any ticket.
   ============================================================ */
.tap{ background:#fff; border:1px solid var(--line,#ECEAE3); border-radius:18px; box-shadow:0 14px 34px -24px rgba(18,32,29,.38); overflow:hidden; }
.tap-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 18px 10px; }
.tap-head h3{ margin:0; font-size:14px; font-weight:800; color:#12201D; }
.tap-status{ font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:999px; white-space:nowrap; }
.tap-status.pending{ background:#FDF3E2; color:#B9741A; } .tap-status.approved{ background:#E6F5EC; color:#1C8A5E; } .tap-status.rejected{ background:#FBE9E9; color:#C11A30; } .tap-status.none{ background:#F0EEE8; color:#8A928F; }
.tap-list{ padding:2px 12px 8px; }
.tap-row{ display:flex; align-items:center; gap:12px; padding:10px 8px; }
.tap-row + .tap-row{ border-top:1px solid #F4F2EC; }
.tap-av{ position:relative; flex:0 0 auto; width:40px; height:40px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; overflow:hidden; } .tap-av.sm{ width:34px; height:34px; font-size:12px; }
.tap-who{ flex:1; min-width:0; } .tap-name{ font-weight:700; font-size:13.5px; color:#12201D; } .tap-role{ font-size:11.5px; color:#8A928F; }
.tap-note{ font-size:11.5px; color:#5B635E; margin-top:3px; font-style:italic; }
.tap-badge{ flex:0 0 auto; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.tap-badge.pending{ background:#FDF3E2; color:#B9741A; } .tap-badge.approved{ background:#E6F5EC; color:#1C8A5E; } .tap-badge.rejected{ background:#FBE9E9; color:#C11A30; } .tap-badge.cc{ background:#EEF1F5; color:#5B6B7A; }
.tap-pull{ flex:0 0 auto; border:0; background:none; color:#C7BFB2; width:26px; height:26px; border-radius:7px; font-size:14px; cursor:pointer; } .tap-pull:hover{ background:#FBE9E9; color:#C11A30; }
.tap-empty{ text-align:center; color:#9AA29D; font-size:12.5px; padding:14px; }
.tap-add{ margin:2px 12px 12px; }
.tap-add-btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; border:1.5px dashed var(--teal,#0F8080); background:none; color:var(--teal-deep,#0A5A5A); border-radius:12px; padding:11px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; } .tap-add-btn:hover{ background:var(--teal-soft,#E8F5F3); }
.tap-pick{ margin:0 12px 12px; border:1px solid var(--line,#ECEAE3); border-radius:14px; overflow:hidden; }
.tap-pick-kind{ display:flex; gap:6px; padding:10px 12px 4px; } .tap-pick-kind button{ flex:1; border:1px solid var(--line,#ECEAE3); background:#fff; border-radius:9px; padding:7px; font:inherit; font-size:12px; font-weight:700; color:#8A928F; cursor:pointer; } .tap-pick-kind button.on{ background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); border-color:#BEE3DC; }
.tap-pick-search{ display:flex; align-items:center; gap:9px; padding:10px 14px; color:#8A928F; border-top:1px solid #F1EEE6; } .tap-pick-search input{ flex:1; border:0; outline:0; font:inherit; font-size:13.5px; background:none; color:#12201D; }
.tap-pick-results{ max-height:210px; overflow-y:auto; } .tap-pick-r{ display:flex; align-items:center; gap:11px; padding:8px 12px; cursor:pointer; } .tap-pick-r:hover{ background:#F7F6F2; }
.tap-act{ margin:0 12px 14px; background:linear-gradient(135deg,#F1FAF8,#EEF4FB); border:1px solid #CDE9E3; border-radius:14px; padding:14px; }
.tap-act-t{ font-size:13px; font-weight:800; color:var(--teal-deep,#0A5A5A); } .tap-act-s{ font-size:12px; color:#4A6A64; margin:4px 0 10px; }
.tap-act-note{ width:100%; border:1px solid #CFE3DE; border-radius:10px; padding:9px 12px; font:inherit; font-size:13px; resize:vertical; min-height:38px; background:#fff; box-sizing:border-box; }
.tap-act-btns{ display:flex; gap:9px; margin-top:10px; }
.tap-approve{ flex:1; border:0; background:linear-gradient(145deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); color:#fff; border-radius:11px; padding:11px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; box-shadow:0 10px 20px -10px rgba(15,128,128,.6); }
.tap-reject{ flex:0 0 auto; border:1.5px solid #F0C9CE; background:#fff; color:#C11A30; border-radius:11px; padding:11px 18px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.tap-foot{ font-size:11px; color:#9AA29D; text-align:center; padding:2px 18px 14px; }
.tap-sug-ttl{ font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--teal,#0F8080); padding:8px 14px 2px; }
.tap-sug{ display:flex; align-items:center; gap:11px; padding:8px 14px; } .tap-sug:hover{ background:#F7F6F2; }
.tap-rel{ display:inline-block; font-size:10.5px; font-weight:700; background:#EEF4FB; color:#3B6EA5; padding:2px 8px; border-radius:99px; margin-left:4px; }
.tap-sug-tag{ margin-left:auto; border:0; background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); font-weight:700; font-size:12px; border-radius:9px; padding:7px 15px; cursor:pointer; }
/* Raise-form "Needs sign-off?" widget */
.tap-rf{ background:linear-gradient(135deg,#F1FAF8,#F3F0FB); border:1px solid #D8EAE5; border-radius:14px; padding:14px; }
.tap-rf-top{ display:flex; align-items:flex-start; gap:11px; cursor:pointer; }
.tap-rf-ic{ flex:0 0 auto; width:32px; height:32px; border-radius:9px; background:#fff; display:grid; place-items:center; color:var(--teal,#0F8080); box-shadow:0 4px 10px -6px rgba(0,0,0,.2); }
.tap-rf-txt{ flex:1; } .tap-rf-txt b{ font-size:13px; color:var(--teal-deep,#0A5A5A); } .tap-rf-txt small{ display:block; font-size:11.5px; color:#5B6A66; margin-top:2px; }
.tap-rf-tog{ flex:0 0 auto; width:42px; height:24px; border-radius:99px; background:#D4D0C6; position:relative; transition:background .15s; } .tap-rf-tog::after{ content:''; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s; } .tap-rf-tog.on{ background:var(--teal,#0F8080); } .tap-rf-tog.on::after{ left:21px; }
.tap-rf-body{ margin-top:12px; }
.tap-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
.tap-chip{ display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid #D8EAE5; border-radius:99px; padding:4px 6px 4px 5px; font-size:12px; font-weight:600; } .tap-chip .tap-av.sm{ width:22px; height:22px; font-size:9px; } .tap-chip-x{ border:0; background:none; color:#9AA29D; cursor:pointer; font-weight:700; padding:0 2px; }
.tap-rf-results{ max-height:170px; overflow-y:auto; }
.tap-flash{ margin:12px 12px 0; padding:10px 14px; border-radius:11px; font-size:12.5px; font-weight:600; animation:ar-tour-in .25s both; }
.tap-flash.ok{ background:#E6F5EC; color:#12703F; } .tap-flash.no{ background:#FBE9E9; color:#9A1B2C; }

/* ============================================================
   Raise-form sign-off widget — PREMIUM (overrides the earlier plain styles)
   ============================================================ */
.tap-rf{ background:#fff; border:1px solid #E7E4DB; border-radius:16px; padding:0; overflow:hidden; box-shadow:0 10px 26px -20px rgba(18,32,29,.3); transition:box-shadow .2s; }
.tap-rf.open{ box-shadow:0 16px 36px -22px rgba(15,128,128,.4); border-color:#CDE7E1; }
.tap-rf-top{ display:flex; align-items:center; gap:13px; padding:15px 16px; cursor:pointer; background:linear-gradient(135deg,#F4FBF9,#F1F5FC); }
.tap-rf-ic{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; background:linear-gradient(145deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); color:#fff; display:grid; place-items:center; font-size:19px; box-shadow:0 8px 16px -8px rgba(15,128,128,.55); }
.tap-rf-txt{ flex:1; min-width:0; } .tap-rf-txt b{ font-size:14px; font-weight:800; color:var(--ink,#12201D); display:block; } .tap-rf-txt small{ display:block; font-size:12px; color:#6A736F; margin-top:2px; line-height:1.4; }
.tap-rf-tog{ flex:0 0 auto; width:46px; height:27px; border-radius:99px; background:#D4D0C6; border:0; padding:0; position:relative; cursor:pointer; transition:background .18s; }
.tap-rf-tog span{ position:absolute; left:3px; top:3px; width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.2); transition:left .18s; }
.tap-rf-tog.on{ background:linear-gradient(145deg,var(--teal2,#15A897),var(--teal,#0F8080)); } .tap-rf-tog.on span{ left:22px; }
.tap-rf-body{ padding:4px 16px 16px; border-top:1px solid #F1EEE6; animation:ar-tour-in .2s both; }
.tap-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; }
.tap-chip{ display:inline-flex; align-items:center; gap:8px; background:#F4FBF9; border:1px solid #CDE7E1; border-radius:99px; padding:5px 8px 5px 5px; font-size:12.5px; font-weight:700; color:var(--ink,#12201D); }
.tap-chip .tap-av.sm{ width:24px; height:24px; font-size:9px; } .tap-chip-role{ font-size:10.5px; font-weight:700; color:#0A5A5A; background:#fff; padding:2px 8px; border-radius:99px; } .tap-chip-x{ border:0; background:none; color:#9AA29D; cursor:pointer; font-size:15px; line-height:1; padding:0 2px; }
.tap-pick-kind{ display:flex; gap:8px; margin:14px 0 6px; }
.tap-pick-kind button{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid #E7E4DB; background:#fff; border-radius:11px; padding:9px; font:inherit; font-size:12.5px; font-weight:700; color:#8A928F; cursor:pointer; transition:all .12s; }
.tap-pick-kind button.on{ background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); border-color:#BEE3DC; box-shadow:inset 0 0 0 1px #BEE3DC; }
.tap-sug-ttl{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--teal,#0F8080); margin:12px 0 6px; }
.tap-sug{ display:flex; align-items:center; gap:12px; padding:9px 11px; border:1px solid #EEEBE2; border-radius:12px; margin-bottom:8px; background:#FCFBF9; }
.tap-sug-who{ flex:1; min-width:0; } .tap-sug .tap-name{ font-weight:700; font-size:13.5px; } .tap-sug .tap-role{ font-size:11.5px; color:#8A928F; }
.tap-rel{ display:inline-block; font-size:10.5px; font-weight:700; background:#EEF4FB; color:#3B6EA5; padding:2px 9px; border-radius:99px; margin-left:5px; }
.tap-sug-tag{ margin-left:auto; flex:0 0 auto; border:0; background:linear-gradient(145deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); color:#fff; font-weight:700; font-size:12px; border-radius:9px; padding:8px 14px; cursor:pointer; box-shadow:0 6px 14px -8px rgba(15,128,128,.5); }
.tap-sug-none{ font-size:12.5px; color:#8A928F; background:#FBFAF6; border:1px dashed #E5E1D6; border-radius:11px; padding:11px 13px; margin:12px 0 8px; }
.tap-pick-search{ display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid #E7E4DB; border-radius:12px; color:#8A928F; margin-top:6px; } .tap-pick-search input{ flex:1; border:0; outline:0; font:inherit; font-size:13.5px; background:none; color:var(--ink,#12201D); }
.tap-rf-results{ margin-top:6px; }
.tap-rf-results .tap-pick-r{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px; cursor:pointer; } .tap-rf-results .tap-pick-r:hover{ background:#F5F4F1; }

/* ============================================================
   Category management pages (IT + A&L) — premium
   ============================================================ */
.cat-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.cat-count{ flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--teal-deep,#0A5A5A); background:var(--teal-soft,#E8F5F3); padding:6px 13px; border-radius:999px; }
.cat-flash{ display:flex; align-items:center; gap:9px; padding:12px 16px; border-radius:13px; font-size:13.5px; font-weight:600; margin-bottom:16px; }
.cat-flash.ok{ background:#E6F5EC; color:#12703F; } .cat-flash.no{ background:#FBE9E9; color:#9A1B2C; }
.cat-add{ background:#fff; border:1px solid #E7E4DB; border-radius:18px; box-shadow:0 12px 30px -22px rgba(18,32,29,.35); padding:18px; margin-bottom:22px; }
.cat-add-form{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cat-add-ic{ flex:0 0 auto; width:52px; height:52px; border-radius:15px; background:linear-gradient(145deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); color:#fff; display:grid; place-items:center; font-size:24px; box-shadow:0 10px 20px -10px rgba(15,128,128,.55); }
.cat-add.al .cat-add-ic{ background:linear-gradient(145deg,#2E7FC7,#0A4E86); box-shadow:0 10px 20px -10px rgba(30,95,160,.55); }
.cat-add-fields{ flex:1; min-width:220px; display:flex; gap:10px; flex-wrap:wrap; }
.cat-in-name{ flex:2; min-width:160px; } .cat-in-icon{ flex:1; min-width:120px; }
.cat-add input[type=text]{ height:46px; border:1px solid #E5E1D6; border-radius:12px; padding:0 14px; font:inherit; font-size:14px; background:#FCFBF9; box-sizing:border-box; } .cat-add input[type=text]:focus{ border-color:var(--teal,#0F8080); background:#fff; outline:0; }
.cat-add-btn{ flex:0 0 auto; height:46px; border:0; background:linear-gradient(145deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); color:#fff; border-radius:12px; padding:0 20px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; box-shadow:0 10px 20px -10px rgba(15,128,128,.55); }
.cat-add.al .cat-add-btn{ background:linear-gradient(145deg,#2E7FC7,#0A4E86); box-shadow:0 10px 20px -10px rgba(30,95,160,.55); }
.cat-hint{ font-size:12px; color:#8A928F; margin:12px 0 0; } .cat-hint code{ background:#F1EEE6; padding:1px 6px; border-radius:5px; font-size:11.5px; }
.cat-list{ display:flex; flex-direction:column; gap:11px; }
.cat-card{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #EEEBE2; border-radius:16px; box-shadow:0 8px 22px -18px rgba(18,32,29,.3); padding:12px 14px; transition:box-shadow .15s; }
.cat-card:hover{ box-shadow:0 12px 26px -16px rgba(18,32,29,.35); } .cat-card.off{ opacity:.62; background:#FAFAF7; }
.cat-ic{ flex:0 0 auto; width:46px; height:46px; border-radius:13px; background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); display:grid; place-items:center; font-size:21px; }
.cat-ic.al{ background:#EAF2FB; color:#1E5FA0; }
.cat-edit{ flex:1; min-width:0; display:flex; align-items:center; gap:9px; }
.cat-name{ flex:1; min-width:100px; height:40px; border:1px solid transparent; border-radius:10px; padding:0 12px; font:inherit; font-size:14.5px; font-weight:700; color:var(--ink,#12201D); background:transparent; } .cat-name:hover{ background:#F7F6F2; } .cat-name:focus{ background:#fff; border-color:var(--teal,#0F8080); outline:0; }
.cat-icon-in{ flex:0 0 118px; height:38px; border:1px solid #E5E1D6; border-radius:9px; padding:0 10px; font:inherit; font-size:12.5px; color:#6A736F; background:#FCFBF9; } .cat-icon-in:focus{ border-color:var(--teal,#0F8080); outline:0; }
.cat-save{ flex:0 0 auto; width:38px; height:38px; border:0; background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); border-radius:10px; cursor:pointer; font-size:16px; display:grid; place-items:center; } .cat-save:hover{ background:#D5EFE9; }
.cat-status{ flex:0 0 auto; font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px; } .cat-status.on{ background:#E6F5EC; color:#1C8A5E; } .cat-status.off{ background:#F0EEE8; color:#8A928F; }
.cat-actions{ flex:0 0 auto; display:flex; align-items:center; gap:5px; } .cat-actions form{ margin:0; display:inline; }
.cat-abtn{ height:36px; min-width:36px; border:1px solid #E7E4DB; background:#fff; border-radius:9px; cursor:pointer; font:inherit; font-size:13px; font-weight:600; color:#5B635E; display:inline-grid; place-items:center; padding:0 6px; } .cat-abtn.wide{ padding:0 12px; } .cat-abtn:hover:not(:disabled){ background:#F5F4F1; } .cat-abtn:disabled{ opacity:.35; cursor:default; }
.cat-abtn.danger{ color:#C11A30; border-color:#F0C9CE; } .cat-abtn.danger:hover{ background:#FBE9E9; }
.cat-empty{ text-align:center; padding:48px 20px; color:#9AA29D; } .cat-empty i{ font-size:44px; color:#CDD8D3; } .cat-empty p{ margin-top:10px; }
@media (max-width:680px){ .cat-card{ flex-wrap:wrap; } .cat-edit{ order:3; width:100%; } .cat-status{ order:2; } .cat-actions{ order:4; width:100%; justify-content:flex-end; } }

/* ============================================================
   Print a single ticket (admin dashboards) — requirement + chat + approval trail
   ============================================================ */
@media print {
  body.printing-ticket .ar-sidebar, body.printing-ticket .e-topbar, body.printing-ticket .ar-tabbar,
  body.printing-ticket .ar-fab, body.printing-ticket .tkt-stats, body.printing-ticket .tkt-tabs,
  body.printing-ticket .tkt-toolbar, body.printing-ticket .tkt-search, body.printing-ticket .tkt-list,
  body.printing-ticket .tkt-dfoot, body.printing-ticket .tkt-reply, body.printing-ticket .tkt-iconbtn,
  body.printing-ticket #approvals-split, body.printing-ticket .staffchat, body.printing-ticket .staff-chat,
  body.printing-ticket .cmdk, body.printing-ticket .tap-add, body.printing-ticket .tap-act,
  body.printing-ticket .tap-pull, body.printing-ticket .tap-foot, body.printing-ticket .e-cmdk,
  body.printing-ticket .ar-sidebar-toggle { display:none !important; }
  body.printing-ticket .tkt-split{ display:block !important; min-height:0 !important; }
  body.printing-ticket .tkt-detail{ display:block !important; width:100% !important; max-width:100% !important; max-height:none !important; border:0 !important; box-shadow:none !important; }
  body.printing-ticket .tkt-dbody{ overflow:visible !important; max-height:none !important; height:auto !important; display:block !important; padding:0 !important; }
  body.printing-ticket .ar-main, body.printing-ticket .ar-ent, body.printing-ticket .ar-ent-shell{ padding:0 !important; margin:0 !important; display:block !important; }
  body.printing-ticket .tap{ box-shadow:none !important; border:1px solid #ccc !important; break-inside:avoid; }
  body.printing-ticket .tkt-dhead{ border-bottom:2px solid #333 !important; }
  body.printing-ticket .tkt-msg, body.printing-ticket .tkt-note{ break-inside:avoid; }
}

/* ============================================================
   Approval panel — COMPACT (overrides the roomier defaults)
   ============================================================ */
.tap{ border-radius:14px; }
.tap-head{ padding:11px 14px 7px; } .tap-head h3{ font-size:13px; }
.tap-status, .tap-badge{ font-size:10.5px; padding:3px 9px; }
.tap-list{ padding:0 10px 4px; }
.tap-row{ padding:7px 6px; gap:10px; }
.tap-av{ width:34px; height:34px; font-size:12px; }
.tap-name{ font-size:12.5px; } .tap-role{ font-size:11px; } .tap-note{ font-size:11px; margin-top:2px; }
.tap-add{ margin:2px 10px 10px; } .tap-add-btn{ padding:9px; font-size:12px; }
.tap-act{ margin:0 10px 10px; padding:11px; } .tap-act-t{ font-size:12px; } .tap-act-s{ font-size:11px; margin:3px 0 8px; }
.tap-act-note{ min-height:32px; font-size:12px; padding:7px 10px; } .tap-act-btns{ margin-top:8px; gap:7px; }
.tap-approve{ padding:9px; font-size:13px; } .tap-reject{ padding:9px 15px; font-size:13px; }
.tap-foot{ font-size:10px; padding:0 14px 10px; }
.tap-flash{ margin:8px 10px 0; padding:8px 12px; font-size:12px; }
.tap-pick{ margin:0 10px 10px; } .tap-sug{ padding:7px 10px; } .tap-sug-tag{ padding:6px 12px; font-size:11.5px; }

/* ============================================================
   Approval panel — CLASSY (the default look Yash approved)
   ============================================================ */
.tap{ border-radius:18px; box-shadow:0 24px 60px -34px rgba(18,32,29,.5), 0 2px 6px rgba(18,32,29,.04); border:1px solid #F0EEE8; overflow:hidden; }
.tap-head{ position:relative; padding:14px 18px 12px; background:linear-gradient(135deg,#F4FBF9,#F5F3FB); border-bottom:1px solid #F0EEE8; }
.tap-head::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); }
.tap-head h3{ font-size:13.5px; font-weight:800; letter-spacing:-.01em; }
.tap-status{ font-size:11px; font-weight:800; padding:5px 12px; }
.tap-status.pending{ background:#FDF3E2; color:#9A6410; } .tap-status.approved{ background:#E4F6EC; color:#12703F; } .tap-status.rejected{ background:#FBE9E9; color:#9A1B2C; }
.tap-list{ padding:6px 10px 4px; }
.tap-row{ border-radius:12px; padding:8px; } .tap-row + .tap-row{ border-top:0; } .tap-row:hover{ background:#FAFAF7; }
.tap-av{ box-shadow:0 4px 10px -4px rgba(0,0,0,.25); }
.tap-av.ok{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #25a35a, 0 4px 10px -4px rgba(0,0,0,.25); }
.tap-av.wait{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #E0A93B, 0 4px 10px -4px rgba(0,0,0,.25); }
.tap-av.no{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #D14D5B, 0 4px 10px -4px rgba(0,0,0,.25); }
.tap-badge{ font-size:10.5px; font-weight:800; padding:4px 11px; } .tap-badge.approved{ background:#E4F6EC; color:#12703F; } .tap-badge.pending{ background:#FDF3E2; color:#9A6410; } .tap-badge.cc{ background:#EEF1F5; color:#5B6B7A; }
.tap-add{ margin:4px 12px 12px; } .tap-add-btn{ border:1.5px dashed #CDE7E1; background:linear-gradient(135deg,#F6FCFA,#fff); border-radius:12px; }
/* the rich deep-teal action card */
.tap-act{ margin:0 12px 14px; border-radius:15px; padding:15px; background:linear-gradient(135deg,var(--teal-deep,#0A5A5A),#0d7a72); color:#fff; box-shadow:0 16px 32px -18px rgba(15,128,128,.65); border:0; }
.tap-act-t{ font-size:13px; font-weight:800; color:#fff; } .tap-act-s{ font-size:11.5px; color:#fff; opacity:.85; margin:5px 0 11px; }
.tap-act-note{ border:0; background:rgba(255,255,255,.96); min-height:34px; font-size:12.5px; }
.tap-approve{ flex:1; background:#fff; color:var(--teal-deep,#0A5A5A); border-radius:11px; padding:11px; font-weight:800; box-shadow:0 6px 14px -6px rgba(0,0,0,.3); }
.tap-reject{ border:1.5px solid rgba(255,255,255,.45); background:transparent; color:#fff; border-radius:11px; padding:11px 18px; font-weight:700; }
.tap-foot{ text-align:center; font-size:10.5px; color:var(--mut,#8A928F); padding:2px 16px 13px; }

/* ============================================================
   Ticket detail (admin IT + A&L dashboards) — classy header + depth
   ============================================================ */
.tkt-detail{ box-shadow:0 22px 54px -34px rgba(18,32,29,.42); }
.tkt-dhead{ position:relative; background:linear-gradient(135deg,#F4FBF9,#F5F3FB); }
.tkt-dhead::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); }
.tkt-dhead .eyebrow{ color:var(--teal-deep,#0A5A5A); font-weight:800; letter-spacing:.03em; }
.tkt-pill{ font-weight:800; padding:3px 10px; }
/* conversation: slightly warmer, classier bubbles */
.tkt-msg .txt{ box-shadow:0 4px 12px -10px rgba(18,32,29,.25); }
.tkt-msg .av.it{ box-shadow:0 4px 10px -4px rgba(15,128,128,.4); }

/* ============================================================
   Admin pages — classy header + power-user (.pux) accent cards
   ============================================================ */
/* power-user pages: accent-bar cards + premium tabs */
.pux .ar-panel, .pux .ar-card-plain{ position:relative; border-radius:16px; box-shadow:0 14px 34px -26px rgba(18,32,29,.35); border:1px solid #EEEBE2; overflow:hidden; }
.pux .ar-panel::before, .pux .ar-card-plain::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); }
.pux .ar-tabs{ gap:6px; } .pux .ar-tab{ border-radius:10px 10px 0 0; font-weight:700; }
.pux .ar-tab.active{ color:var(--teal-deep,#0A5A5A); }
.pux .ar-section-label{ color:var(--teal,#0F8080); font-weight:800; letter-spacing:.03em; }

/* ============================================================
   Procurement shared kit (vendors, purchase orders, quotations)
   Defined ONCE here so every procurement page renders identically.
   ============================================================ */
.vt-tabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.vt-tab{ padding:9px 16px; border-radius:11px; font-weight:700; font-size:13px; background:#fff; border:1px solid #EEEBE2; color:var(--mut,#8A928F); text-decoration:none; }
.vt-tab.on{ background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); border-color:#BEE3DC; }
.vt-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.vt-search{ display:flex; align-items:center; gap:9px; border:1px solid #E5E1D6; border-radius:12px; padding:0 13px; height:44px; background:#FCFBF9; color:var(--mut,#8A928F); flex:1; max-width:360px; }
.vt-search input{ border:0; background:none; outline:0; font:inherit; font-size:14px; flex:1; }
.vt-btn{ border:0; background:linear-gradient(145deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); color:#fff; border-radius:11px; padding:11px 17px; font:inherit; font-size:13.5px; font-weight:800; cursor:pointer; box-shadow:0 10px 20px -10px rgba(15,128,128,.5); display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.vt-btn.ghost{ background:#fff; color:var(--teal-deep,#0A5A5A); border:1px solid #DCEEEA; box-shadow:none; }
.vlist{ background:#fff; border:1px solid #EEEBE2; border-radius:16px; overflow:hidden; box-shadow:0 14px 34px -26px rgba(18,32,29,.35); }
.vrow{ display:flex; align-items:center; gap:14px; padding:13px 15px; }
.vrow + .vrow{ border-top:1px solid #F4F2EC; }
.vrow:hover{ background:#FAFAF7; }
.vrow.off{ opacity:.6; }
.vav{ flex:0 0 auto; width:44px; height:44px; border-radius:13px; color:#fff; display:grid; place-items:center; font-weight:800; font-size:16px; }
.vbody{ flex:1; min-width:0; }
.vname{ font-weight:800; font-size:15px; }
.vmeta{ font-size:12.5px; color:var(--mut,#8A928F); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vcat{ flex:0 0 auto; font-size:10.5px; font-weight:700; background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); padding:3px 10px; border-radius:99px; }
.vact{ flex:0 0 auto; display:flex; gap:5px; align-items:center; }
.vact form{ margin:0; }
.vt-abtn{ height:34px; border:1px solid #E7E4DB; background:#fff; border-radius:9px; cursor:pointer; font:inherit; font-size:12px; font-weight:600; color:#5B635E; padding:0 10px; display:inline-grid; place-items:center; text-decoration:none; }
.vt-abtn:hover{ background:#F5F4F1; }
.vt-abtn.danger{ color:#C11A30; border-color:#F0C9CE; }
.vt-abtn.danger:hover{ background:#FBE9E9; }
.vt-empty{ text-align:center; padding:44px 20px; color:#9AA29D; }
.vt-empty i{ font-size:40px; color:#CDD8D3; }
.vt-empty p{ margin-top:8px; }
.vt-catadd{ display:flex; gap:10px; margin-bottom:14px; }
.vt-in{ flex:1; border:1px solid #E5E1D6; border-radius:11px; padding:11px 13px; font:inherit; font-size:14px; background:#FCFBF9; }
.vt-catlist{ background:#fff; border:1px solid #EEEBE2; border-radius:16px; overflow:hidden; }
.vt-catrow{ display:flex; align-items:center; gap:12px; padding:12px 15px; }
.vt-catrow + .vt-catrow{ border-top:1px solid #F4F2EC; }
.vt-catrow.off{ opacity:.6; }
.vt-catname{ flex:1; font-weight:700; font-size:14px; }
.vt-catrow form{ margin:0; }
.vmodal{ position:fixed; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(3px); display:flex; align-items:flex-start; justify-content:center; padding:32px 16px; z-index:9999; overflow-y:auto; }
.vmodal[hidden]{ display:none; }
.vmodal-card{ background:#fff; border-radius:20px; width:100%; max-width:600px; box-shadow:0 40px 80px -30px rgba(0,0,0,.5); overflow:hidden; }
.vmodal-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid #F0EEE8; background:linear-gradient(135deg,#F4FBF9,#F5F3FB); }
.vmodal-head h2{ margin:0; font-size:17px; font-weight:800; }
.vmodal-x{ border:0; background:none; font-size:24px; color:#9AA29D; cursor:pointer; line-height:1; }
.vmodal-body{ padding:20px 22px; }
.vg2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
@media (max-width:560px){ .vg2{ grid-template-columns:1fr; } }
.vmodal-body label{ font-size:12px; color:var(--mut,#8A928F); font-weight:600; display:block; margin:10px 0 5px; }
.vt-fld{ width:100%; border:1px solid #E5E1D6; border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; background:#FCFBF9; box-sizing:border-box; }
.vt-fld:focus{ border-color:var(--teal,#0F8080); background:#fff; outline:0; }
.vmodal-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.cf-wrap{ max-width:600px; }
.cf-card{ position:relative; background:#fff; border:1px solid #EEEBE2; border-radius:18px; box-shadow:0 14px 34px -24px rgba(18,32,29,.35); padding:18px; margin-bottom:16px; overflow:hidden; }
.cf-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); }
.cf-card-plain{ padding:0; }
.cf-card-plain::before{ display:none; }
.cf-t{ font-size:14px; font-weight:800; margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.cf-n{ width:22px; height:22px; border-radius:7px; background:linear-gradient(145deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:800; }
.cf-search{ display:flex; align-items:center; gap:9px; border:1px solid #E5E1D6; border-radius:12px; padding:0 13px; height:46px; background:#FCFBF9; color:#8A928F; }
.cf-search input{ flex:1; border:0; outline:0; background:none; font:inherit; font-size:14px; color:var(--ink,#12201D); }
.cf-results{ margin-top:6px; max-height:240px; overflow-y:auto; display:none; border:1px solid #EEEBE2; border-radius:12px; }
.cf-results .it{ padding:10px 13px; cursor:pointer; border-bottom:1px solid #F4F2EC; }
.cf-results .it:last-child{ border-bottom:0; }
.cf-results .it:hover{ background:#F7F6F2; }
.cf-results .it strong{ font-size:13.5px; }
.cf-results .it span{ display:block; font-size:12px; color:#8A928F; }
.cf-emp{ display:flex; align-items:center; gap:13px; background:#F7FBFA; border:1px solid #DCEEEA; border-radius:14px; padding:11px 13px; }
.cf-av{ width:44px; height:44px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; font-size:15px; }
.cf-av.sm{ width:34px; height:34px; font-size:12px; }
.cf-emp .nm{ font-weight:700; font-size:14.5px; }
.cf-emp .rl{ font-size:12px; color:#8A928F; }
.cf-chg{ margin-left:auto; color:var(--teal-deep,#0A5A5A); font-weight:700; font-size:12.5px; cursor:pointer; background:var(--teal-soft,#E8F5F3); border:0; border-radius:9px; padding:7px 13px; }
.cf-line{ margin-top:12px; }
.cf-line-t{ font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--teal,#0F8080); margin-bottom:7px; }
.cf-rrow{ display:flex; align-items:center; gap:11px; padding:7px 4px; }
.cf-rrow + .cf-rrow{ border-top:1px solid #F4F2EC; }
.cf-rrow .nm{ font-weight:700; font-size:13px; }
.cf-rrow .rl{ font-size:11.5px; color:#8A928F; }
.cf-rel{ display:inline-block; font-size:10.5px; font-weight:700; background:#EEF4FB; color:#3B6EA5; padding:2px 8px; border-radius:99px; margin-left:5px; }
.cf-line-none{ font-size:12.5px; color:#8A928F; padding:4px; }
.cf-lbl{ font-size:12px; color:#8A928F; font-weight:600; display:block; margin-bottom:5px; }
.cf-fld{ width:100%; border:1px solid #E5E1D6; border-radius:11px; padding:11px 13px; font:inherit; font-size:14px; background:#FCFBF9; margin-bottom:14px; box-sizing:border-box; }
textarea.cf-fld{ min-height:80px; resize:vertical; }
.cf-hint{ font-size:12px; color:#8A928F; margin:10px 0 0; }
.cf-create{ width:100%; border:0; background:linear-gradient(145deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); color:#fff; border-radius:13px; padding:15px; font:inherit; font-size:15px; font-weight:800; box-shadow:0 12px 24px -10px rgba(15,128,128,.55); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.cf-create:disabled{ opacity:.5; }
/* Procurement form labels — small, muted (matches the approved mock) */
.cf-card label, .rcv-detail label, .vmodal-body label, .q-just label{ font-size:12px; color:var(--mut,#8A928F); font-weight:600; display:block; margin:10px 0 5px; line-height:1.3; }
.cf-card .cf-t label{ font-size:inherit; color:inherit; margin:0; }

/* ============================================================
   Shared procurement/asset kit — moved out of per-page inline styles
   so every page that uses these classes renders identically.
   ============================================================ */
.po-lt{ width:100%; border-collapse:collapse; }
.po-lt th{ text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#8A928F; padding:6px 6px; }
.po-lt th.r,.po-lt td.r{ text-align:right; }
.po-lt td{ padding:4px 6px; vertical-align:middle; }
.po-lt .vt-fld{ margin:0; }
.po-addrow{ margin-top:8px; border:1.5px dashed #CDE7E1; background:linear-gradient(135deg,#F6FCFA,#fff); color:var(--teal-deep,#0A5A5A); border-radius:11px; padding:10px; font:inherit; font-weight:700; font-size:12.5px; cursor:pointer; width:100%; }
.li-del{ border:0; background:#FBE9E9; color:#C11A30; width:30px; height:30px; border-radius:8px; font-size:16px; cursor:pointer; }
.li-amt{ font-weight:700; white-space:nowrap; }
.po-tot{ margin-left:auto; width:300px; margin-top:14px; }
.po-tr{ display:flex; justify-content:space-between; padding:7px 6px; font-size:14px; color:#4A524E; }
.po-tr input{ border:1px solid #E5E1D6; border-radius:7px; padding:3px 6px; font:inherit; }
.po-tr.grand{ border-top:2px solid var(--teal,#0F8080); margin-top:5px; padding-top:11px; font-size:17px; font-weight:800; color:var(--teal-deep,#0A5A5A); }
.po-filters{ display:flex; gap:7px; margin-bottom:14px; flex-wrap:wrap; }
.po-fil{ font-size:12.5px; font-weight:700; padding:6px 13px; border-radius:99px; text-decoration:none; color:var(--mut,#8A928F); background:#fff; border:1px solid #EEEBE2; }
.po-fil.on{ background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); border-color:#BEE3DC; }
.porow{ display:flex; align-items:center; gap:14px; padding:13px 15px; text-decoration:none; color:inherit; }
.porow + .porow{ border-top:1px solid #F4F2EC; }
.porow:hover{ background:#FAFAF7; }
.po-ic{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); display:grid; place-items:center; font-size:19px; }
.pobody{ flex:1; min-width:0; }
.po-no{ font-weight:800; font-size:14.5px; }
.po-meta{ font-size:12.5px; color:var(--mut,#8A928F); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.po-amt{ font-weight:800; font-size:14.5px; color:var(--ink,#12201D); }
.po-toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.q-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-bottom:8px; align-items:start; }
.q-card{ position:relative; background:#fff; border:1px solid #EEEBE2; border-radius:16px; padding:16px; box-shadow:0 12px 30px -24px rgba(18,32,29,.3); }
.q-card.win{ border:2px solid var(--teal,#0F8080); box-shadow:0 16px 36px -20px rgba(15,128,128,.45); }
.q-badge{ position:absolute; top:-11px; left:16px; background:linear-gradient(145deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); color:#fff; font-size:10.5px; font-weight:800; padding:4px 11px; border-radius:99px; }
.q-vn{ font-weight:800; font-size:15px; }
.q-vc{ font-size:12px; color:var(--mut,#8A928F); margin-bottom:10px; }
.q-amt{ font-size:23px; font-weight:800; letter-spacing:-.02em; }
.q-amtl{ font-size:11px; color:var(--mut,#8A928F); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.q-li{ list-style:none; padding:0; margin:10px 0; font-size:12.5px; color:#4A524E; }
.q-li li{ display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid #F4F2EC; }
.q-file{ font-size:12px; color:var(--teal-deep,#0A5A5A); text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.q-actions{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.q-pick{ flex:1; border:1px solid #DCEEEA; background:#fff; color:var(--teal-deep,#0A5A5A); border-radius:9px; padding:9px; font:inherit; font-weight:700; font-size:12.5px; cursor:pointer; }
.q-sel{ flex:1; font-weight:800; color:#1C8A5E; font-size:13px; }
.q-del{ border:0; background:#FBE9E9; color:#C11A30; width:32px; height:32px; border-radius:8px; font-size:16px; cursor:pointer; }
.q-just{ margin-top:10px; }
.q-just label{ font-size:11.5px; color:var(--mut,#8A928F); font-weight:600; display:block; margin-bottom:4px; }
.q-drop{ border:2px dashed #CDE7E1; border-radius:14px; background:linear-gradient(135deg,#F6FCFA,#fff); padding:18px; display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.q-drop .fi{ width:46px; height:46px; border-radius:12px; background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); display:grid; place-items:center; font-size:22px; }
.q-drop .fn{ font-weight:700; font-size:14px; }
.q-drop .fs{ font-size:12px; color:var(--mut,#8A928F); }
.q-readnote{ background:#FEF7EA; border:1px solid #F5E4C3; border-radius:11px; padding:10px 13px; font-size:12.5px; color:#9A6410; font-weight:600; margin-bottom:14px; }
.f-filled{ background:#F4FBF9 !important; border-color:#BEE3DC !important; }

.ar-cat-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--hairline); border-radius:10px; margin-bottom:6px; font-size:14px; }
.ar-cat-row.inactive{ opacity:0.55; }
.ar-cat-code{ font-family:ui-monospace, Menlo, monospace; font-weight:600; color:var(--teal-deep); background:var(--teal-soft); padding:2px 8px; border-radius:6px; font-size:12px; min-width:44px; text-align:center; }

/* Procurement status pills — shared so every procurement page renders them */
.pill{ font-size:10.5px; font-weight:800; padding:4px 11px; border-radius:99px; display:inline-block; }
.pill.ok{ background:#E6F5EC; color:#1C8A5E; } .pill.appr{ background:#E7F0FA; color:#245C99; }
.pill.draft{ background:#FDF3E2; color:#9A6410; } .pill.off{ background:#F0EEE8; color:#8A928F; }

/* ============================================================
   Procurement module — hub bar, module cards, invoice flow.
   These are the exact styles from the approved mock. Shared here so every
   procurement page renders identically (never duplicated in a page's inline CSS).
   ============================================================ */
.pm-bar{ display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line,#ECEAE3); border-radius:14px; padding:6px; margin-bottom:18px; box-shadow:0 10px 26px -22px rgba(18,32,29,.35); overflow-x:auto; }
.pm-tab{ display:inline-flex; align-items:center; gap:7px; padding:10px 15px; border-radius:10px; font-size:13.5px; font-weight:700; color:var(--mut,#8A928F); text-decoration:none; white-space:nowrap; transition:background .12s,color .12s; }
.pm-tab.on{ background:linear-gradient(145deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); color:#fff; box-shadow:0 8px 16px -8px rgba(15,128,128,.5); }
.pm-tab:not(.on):hover{ background:#F5F4F1; color:var(--teal-deep,#0A5A5A); }
.pm-team{ margin-left:auto; display:flex; gap:4px; background:#F5F4F1; border-radius:9px; padding:3px; flex:0 0 auto; }
.pm-team a{ padding:7px 12px; border-radius:7px; font-size:12.5px; font-weight:700; color:var(--mut,#8A928F); text-decoration:none; }
.pm-team a.on{ background:#fff; color:var(--teal-deep,#0A5A5A); box-shadow:0 2px 6px rgba(0,0,0,.08); }
.pm-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin-top:4px; }
.pm-card{ position:relative; background:#fff; border:1px solid #EEEBE2; border-radius:16px; padding:18px; text-decoration:none; color:inherit; box-shadow:0 12px 30px -24px rgba(18,32,29,.3); overflow:hidden; display:block; transition:box-shadow .15s, transform .15s; }
.pm-card:hover{ box-shadow:0 16px 34px -20px rgba(18,32,29,.36); transform:translateY(-1px); }
.pm-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); }
.pm-ic{ width:42px; height:42px; border-radius:12px; background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); display:grid; place-items:center; font-size:20px; margin-bottom:11px; }
.pm-t{ font-weight:800; font-size:15px; } .pm-s{ font-size:12.5px; color:var(--mut,#8A928F); margin-top:3px; line-height:1.45; }
.pm-n{ position:absolute; top:16px; right:16px; font-size:19px; font-weight:800; color:var(--teal-deep,#0A5A5A); }
/* invoice flow */
.inv-drop{ border:2px dashed #CDE7E1; border-radius:13px; background:linear-gradient(135deg,#F6FCFA,#fff); padding:16px; display:flex; align-items:center; gap:13px; }
.inv-drop .fi{ width:44px; height:44px; border-radius:11px; background:#FBE9E9; color:#C11A30; display:grid; place-items:center; font-size:20px; flex:0 0 auto; }
.inv-drop .fn{ font-weight:700; font-size:14px; } .inv-drop .fs{ font-size:12px; color:var(--mut,#8A928F); }
.inv-banner{ display:flex; align-items:center; gap:10px; background:#FEF7EA; border:1px solid #F5E4C3; border-radius:11px; padding:10px 13px; font-size:12.5px; color:#9A6410; font-weight:600; margin:14px 0 4px; }
.inv-ex{ font-size:9.5px; font-weight:800; text-transform:uppercase; background:#EAF6F3; color:#0A5A5A; padding:2px 7px; border-radius:99px; margin-left:5px; letter-spacing:.03em; }
.inv-sug{ display:flex; align-items:center; gap:12px; padding:11px 13px; border:1.5px solid #BEE3DC; background:#F4FBF9; border-radius:12px; margin-bottom:8px; }
.inv-sug.alt{ border:1px solid #EEEBE2; background:#FCFBF9; }
.inv-sug .b{ flex:1; min-width:0; } .inv-sug .n{ font-weight:800; font-size:13.5px; } .inv-sug .m{ font-size:12px; color:var(--mut,#8A928F); }
.inv-sug .amt{ font-weight:800; font-size:13px; white-space:nowrap; }
.inv-sug .pick{ border:0; background:linear-gradient(145deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); color:#fff; border-radius:9px; padding:8px 14px; font-weight:700; font-size:12px; cursor:pointer; }
.inv-sug.alt .pick{ background:#fff; color:var(--teal-deep,#0A5A5A); border:1px solid #DCEEEA; }
.inv-best{ font-size:10.5px; font-weight:800; background:#E6F5EC; color:#12703F; padding:2px 8px; border-radius:99px; margin-left:5px; }
.inv-match{ display:flex; align-items:center; gap:8px; background:#E6F5EC; color:#12703F; border-radius:10px; padding:9px 13px; font-size:12.5px; font-weight:700; margin-top:10px; }
.inv-var{ background:#FDF3E2; color:#9A6410; }
.inv-fin{ display:flex; align-items:center; gap:10px; background:#F4FBF9; border:1px solid #D8EAE5; border-radius:12px; padding:12px 14px; font-size:13px; color:#0A5A5A; }
.f-filled{ background:#F4FBF9 !important; border-color:#BEE3DC !important; }

/* Approval panel mount point (positioning only) */
.tap-mount{ display:block; }

/* ============================================================
   Asset management — aligned to the classy standard (accent-bar cards,
   premium KPI tiles, drawer). Shared here so assets, procurement and the
   rest of the portal look like one product.
   ============================================================ */
.av2-kpi{ position:relative; background:#fff; border:1px solid #EEEBE2; border-radius:16px; padding:16px 18px; box-shadow:0 12px 30px -24px rgba(18,32,29,.3); display:flex; align-items:center; gap:13px; overflow:hidden; }
.av2-kpi::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); }
.av2-kpi-ic{ width:42px; height:42px; border-radius:12px; background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); display:grid; place-items:center; font-size:20px; flex:0 0 auto; }
.av2-kpi .n, .av2-kpi-n{ font-size:22px; font-weight:800; line-height:1.1; color:var(--ink,#12201D); }
.av2-kpi .l, .av2-kpi-l{ font-size:12px; color:var(--mut,#8A928F); font-weight:600; }
.av2-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff; border:1px solid var(--line,#ECEAE3); border-radius:14px; padding:10px 12px; box-shadow:0 10px 26px -22px rgba(18,32,29,.35); margin-bottom:14px; }

.av2-asset-ic{ width:42px; height:42px; border-radius:12px; background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); display:grid; place-items:center; font-size:19px; flex:0 0 auto; }
/* Asset drawer — slides in from the RIGHT (restored: the positioning rules were
   lost when duplicate page styles were removed, which made it drop from the top). */
.av2-drawer-panel{ position:absolute; top:0; right:0; bottom:0; width:min(560px, 100%);
  background:#fff; border-radius:20px 0 0 20px; box-shadow:-24px 0 60px -30px rgba(18,32,29,.5);
  display:flex; flex-direction:column; overflow:hidden;
  animation:av2SlideIn .26s cubic-bezier(.22,.61,.36,1) both; }
@keyframes av2SlideIn{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
.av2-drawer-scrim{ animation:av2Fade .26s ease both; }
@keyframes av2Fade{ from{ opacity:0; } to{ opacity:1; } }
.av2-dh{ padding:18px 20px; border-bottom:1px solid #F0EEE8; flex:0 0 auto; }
.av2-db{ padding:18px 20px; overflow-y:auto; flex:1 1 auto; }
.av2-df{ padding:14px 20px; border-top:1px solid #F0EEE8; flex:0 0 auto; display:flex; gap:9px; flex-wrap:wrap; }
@media (max-width:620px){ .av2-drawer-panel{ width:100%; border-radius:0; } }

/* Asset detail — header, tabs and the purchase story (matches the approved mock) */
.as-head{ display:flex; align-items:flex-start; gap:16px; background:#fff; border:1px solid #EEEBE2; border-radius:18px; padding:20px; box-shadow:0 14px 34px -24px rgba(18,32,29,.35); position:relative; overflow:hidden; margin-bottom:16px; }
.as-head::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); }
.as-ic{ width:56px; height:56px; border-radius:15px; background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); display:grid; place-items:center; font-size:26px; flex:0 0 auto; }
.as-nm{ font-size:19px; font-weight:800; } .as-tag{ font-size:12.5px; color:var(--mut,#8A928F); margin-top:2px; }
.as-chips{ display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; }
.as-chips .chip{ font-size:10.5px; font-weight:800; padding:4px 11px; border-radius:99px; }
.as-chips .chip.ok{ background:#E6F5EC; color:#1C8A5E; } .as-chips .chip.warn{ background:#FDF3E2; color:#9A6410; } .as-chips .chip.info{ background:#E7F0FA; color:#245C99; }
.as-tabs{ display:flex; gap:6px; background:#fff; border:1px solid var(--line,#ECEAE3); border-radius:13px; padding:5px; margin-bottom:16px; overflow-x:auto; }
.as-tab{ padding:9px 15px; border-radius:9px; font-size:13px; font-weight:700; color:var(--mut,#8A928F); text-decoration:none; white-space:nowrap; }
.as-tab.on{ background:linear-gradient(145deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); color:#fff; }
/* the story timeline */
.tl{ position:relative; padding-left:26px; } .tl::before{ content:''; position:absolute; left:8px; top:6px; bottom:6px; width:2px; background:#E8EDEB; }
.tli{ position:relative; padding:0 0 16px; } .tli:last-child{ padding-bottom:0; }
.tli .dot{ position:absolute; left:-22px; top:3px; width:12px; height:12px; border-radius:50%; background:#fff; border:2.5px solid var(--teal,#0F8080); }
.tli.done .dot{ background:var(--teal,#0F8080); } .tli.soft .dot{ border-color:#CBD5D2; }
.tli .h{ font-weight:700; font-size:13.5px; } .tli .s{ font-size:12.5px; color:var(--mut,#8A928F); margin-top:2px; line-height:1.5; }
.tli .lnk, .as-lnk{ color:var(--teal-deep,#0A5A5A); font-weight:700; text-decoration:none; }
.as-facts{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:13.5px; margin:0; }
.as-facts dt{ color:var(--mut,#8A928F); font-size:12px; font-weight:600; } .as-facts dd{ margin:0; font-weight:600; }
.as-dl{ display:inline-flex; align-items:center; gap:7px; border:1px solid #DCEEEA; background:#fff; color:var(--teal-deep,#0A5A5A); border-radius:10px; padding:9px 14px; font-size:12.5px; font-weight:700; text-decoration:none; margin:12px 8px 0 0; }
.as-missing{ background:#FBFAF6; border:1px dashed #E5E1D6; border-radius:12px; padding:14px; font-size:12.5px; color:#6A736F; } .as-missing b{ color:var(--ink,#12201D); }
/* bulk-attach picker */
.bk-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.bk-chip{ font-size:12px; font-weight:700; padding:7px 13px; border-radius:99px; background:#fff; border:1px solid #EEEBE2; color:var(--mut,#8A928F); cursor:pointer; }
.bk-chip.on{ background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); border-color:#BEE3DC; }
.bk-selbar{ display:flex; align-items:center; gap:12px; background:#F4FBF9; border:1px solid #D8EAE5; border-radius:11px; padding:10px 13px; font-size:13px; color:#0A5A5A; font-weight:700; margin:12px 0; flex-wrap:wrap; }
.bk-list{ border:1px solid #EEEBE2; border-radius:12px; max-height:300px; overflow-y:auto; }
.bk-row{ display:flex; align-items:center; gap:12px; padding:10px 13px; cursor:pointer; } .bk-row + .bk-row{ border-top:1px solid #F4F2EC; } .bk-row:hover{ background:#FAFAF7; }
.bk-cb{ width:18px; height:18px; border-radius:5px; border:2px solid #CBD5D2; flex:0 0 auto; display:grid; place-items:center; font-size:11px; color:#fff; }
.bk-cb.on{ background:var(--teal,#0F8080); border-color:var(--teal,#0F8080); }
.bk-row .n{ font-weight:700; font-size:13.5px; flex:1; } .bk-row .m{ font-size:12px; color:var(--mut,#8A928F); font-weight:400; }
.bk-warn{ background:#FEF7EA; border:1px solid #F5E4C3; border-radius:11px; padding:11px 13px; font-size:12.5px; color:#9A6410; font-weight:600; margin-top:12px; }

/* ============================================================
   Layout corrections — procurement bar and KPI tiles
   The module bar must WRAP, not slide horizontally (a scrolling bar reads as a
   collapsed/broken strip). KPI tiles need room so figures and labels don't cramp.
   ============================================================ */
.pm-bar{ overflow-x:visible; flex-wrap:wrap; row-gap:6px; }
.pm-team{ margin-left:auto; }
@media (max-width:760px){
  .pm-bar{ padding:7px; }
  .pm-tab{ padding:9px 13px; font-size:12.5px; }
  .pm-team{ margin-left:0; width:100%; justify-content:center; margin-top:2px; }
}
/* roomier KPI tiles so numbers + labels never cramp (5 across is too tight at 150px) */
.ar-ent .epk-kpis{ grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:13px; }
.ar-ent .epk-kpi{ padding:15px 16px; gap:12px; align-items:center; }
.ar-ent .epk-kpi-n{ font-size:21px; line-height:1.15; letter-spacing:-.02em; white-space:nowrap; }
.ar-ent .epk-kpi-l{ font-size:12px; line-height:1.3; }
.ar-ent .epk-kpi-ic{ width:40px; height:40px; flex:0 0 auto; }
@media (max-width:900px){ .ar-ent .epk-kpis{ grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); } }
@media (max-width:560px){ .ar-ent .epk-kpis{ grid-template-columns:repeat(2,1fr); gap:10px; } .ar-ent .epk-kpi-n{ font-size:19px; } }
/* asset tiles share the same breathing room */
.av2-kpi{ padding:15px 16px; } .av2-kpi .n, .av2-kpi-n{ white-space:nowrap; }
/* long vendor/asset rows must not squash their actions */
.vrow, .porow{ flex-wrap:wrap; row-gap:6px; }
.vrow .vbody, .porow .pobody{ min-width:180px; }
@media (max-width:620px){
  .vrow .vact, .porow .vact{ width:100%; justify-content:flex-end; }
  .vcat, .pill{ flex:0 0 auto; }
}

/* ============================================================
   Depreciation & valuation — settings table and the asset valuation panel
   ============================================================ */
.vs-table{ width:100%; border-collapse:collapse; }
.vs-table th{ text-align:left; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--mut,#8A928F); padding:8px; border-bottom:2px solid #E9E5DC; white-space:nowrap; }
.vs-table th.c, .vs-table td.c{ text-align:center; }
.vs-table td{ padding:9px 8px; border-bottom:1px solid #F4F2EC; font-size:13.5px; }
.vs-cat{ font-weight:700; display:inline-flex; align-items:center; gap:9px; white-space:nowrap; }
.vs-cat i{ width:30px; height:30px; border-radius:9px; background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); display:grid; place-items:center; font-size:14px; }
.vs-in{ width:74px; border:1px solid #E5E1D6; border-radius:8px; padding:6px 8px; font:inherit; font-size:13px; background:#FCFBF9; text-align:center; }
.vs-sel{ border:1px solid #E5E1D6; border-radius:8px; padding:6px 8px; font:inherit; font-size:12.5px; background:#FCFBF9; }
.vs-seg{ display:flex; gap:7px; flex-wrap:wrap; }
.vs-opt{ border:1px solid var(--line,#ECEAE3); background:#fff; border-radius:9px; padding:9px 14px; font-size:12.5px; font-weight:700; color:var(--mut,#8A928F); cursor:pointer; }
.vs-opt.on{ background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); border-color:#BEE3DC; }
/* the per-asset valuation options */
.vopts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); gap:11px; }
.vopt{ position:relative; border:1.5px solid #EEEBE2; border-radius:14px; padding:14px; cursor:pointer; background:#FCFBF9; transition:border-color .12s, box-shadow .12s; }
.vopt:hover{ border-color:#CDE7E1; }
.vopt.sel{ border-color:var(--teal,#0F8080); background:#F4FBF9; box-shadow:0 10px 24px -16px rgba(15,128,128,.45); }
.vopt .lbl{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--mut,#8A928F); }
.vopt .amt{ font-size:21px; font-weight:800; letter-spacing:-.02em; margin:4px 0 2px; white-space:nowrap; }
.vopt .sub{ font-size:11.5px; color:var(--mut,#8A928F); line-height:1.4; }
.vopt .rec{ position:absolute; top:-9px; right:12px; background:linear-gradient(145deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); color:#fff; font-size:9.5px; font-weight:800; padding:3px 9px; border-radius:99px; letter-spacing:.03em; }
.vopt .src{ display:inline-block; margin-top:6px; font-size:9.5px; font-weight:800; padding:2px 7px; border-radius:99px; }
.src.est{ background:#F0EEE8; color:#6A736F; } .src.quote{ background:#E6F5EC; color:#12703F; } .src.book{ background:#EEF1FB; color:#2E4C86; }
.vwhy{ display:flex; align-items:flex-start; gap:9px; background:#F4FBF9; border:1px solid #D8EAE5; border-radius:11px; padding:11px 13px; font-size:12.5px; color:#0A5A5A; margin-top:13px; }
.vgap{ display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; padding-top:13px; border-top:1px solid #F2EFE8; }
.vgap div{ font-size:12px; color:var(--mut,#8A928F); } .vgap b{ display:block; font-size:16px; color:var(--ink,#12201D); font-weight:800; margin-top:2px; }
.vgap .pos b{ color:#12703F; } .vgap .neg b{ color:#C11A30; }
.vqrow{ display:flex; align-items:center; gap:11px; padding:10px 0; } .vqrow + .vqrow{ border-top:1px solid #F4F2EC; }
.vqrow .n{ flex:1; font-size:13px; } .vqrow .n b{ display:block; font-size:13.5px; } .vqrow .n span{ color:var(--mut,#8A928F); font-size:12px; }
.vqrow .a{ font-weight:800; font-size:13.5px; white-space:nowrap; }

/* ============================================================
   Asset inventory — roomier cards so name, tag, serial and chips never cram.
   (240px columns squeezed every field; 280px + tighter typography fixes it.)
   ============================================================ */
.av2-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; align-items:start; }
.av2-card{ position:relative; border:1px solid #EEEBE2; border-radius:16px; padding:16px; background:#fff; cursor:pointer; box-shadow:0 12px 30px -24px rgba(18,32,29,.3); overflow:hidden; }
.av2-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,var(--teal2,#15A897),var(--teal-deep,#0A5A5A)); }
.av2-card:hover{ box-shadow:0 16px 34px -20px rgba(18,32,29,.36); transform:translateY(-1px); }
.av2-asset{ display:flex; align-items:center; gap:13px; min-width:0; }
.av2-asset > div{ min-width:0; flex:1; }
.av2-asset b{ font-size:14.5px; font-weight:800; line-height:1.25; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.av2-asset .av2-sub, .av2-asset small{ font-size:12px; color:var(--mut,#8A928F); display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.av2-card .av2-chips, .av2-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.av2-chips .chip, .av2-card .pill{ font-size:10.5px; font-weight:800; padding:3px 10px; border-radius:99px; white-space:nowrap; }
/* table view: let it scroll rather than squash */


@media (max-width:560px){ .av2-cards{ grid-template-columns:1fr; } }

/* Asset table view — .av2-table is the <table> itself (not a wrapper). */
.av2-table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid #EEEBE2; border-radius:16px; overflow:hidden; box-shadow:0 12px 30px -24px rgba(18,32,29,.3); }
.av2-table th{ text-align:left; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--mut,#8A928F); padding:12px 14px; background:#FBFAF8; border-bottom:1px solid #EEEBE2; white-space:nowrap; }
.av2-table td{ padding:12px 14px; border-bottom:1px solid #F4F2EC; font-size:13.5px; vertical-align:middle; }
.av2-table tbody tr:last-child td{ border-bottom:0; }
.av2-table tbody tr:hover{ background:#FAFAF7; }
.av2-table .av2-asset b{ -webkit-line-clamp:1; font-size:14px; }

/* Procurement tabs — final polish: clearer inactive state, aligned icons. */
.pm-tab{ color:#5B635E; }
.pm-tab i{ font-size:16px; line-height:1; opacity:.85; flex:0 0 auto; }
.pm-tab.on i{ opacity:1; }
.pm-tab:not(.on):hover{ background:#F3F6F5; color:var(--teal-deep,#0A5A5A); }
.pm-team a{ min-width:46px; text-align:center; }

/* ============================================================
   Shell safety net — content must never sit under the fixed sidebar.
   The offset normally comes from body.ar-has-sidebar; this guarantees the
   main column also reserves the space itself, so a missing body class, a
   cached stylesheet or a page that renders outside <main> can't overlap.
   ============================================================ */
@media (min-width:901px){
  body.ar-has-sidebar .ar-main{ max-width:min(1140px, calc(100vw - var(--ar-sidebar-w, 280px) - 48px)); }
  body.ar-has-sidebar.ar-sidebar-collapsed .ar-main{ max-width:min(1140px, calc(100vw - var(--ar-sidebar-collapsed-w, 72px) - 48px)); }
  /* Guarantee the main column starts after the rail, whatever the body padding does. */
  /* Hard floor: the content column can never begin left of the rail, regardless of
     body padding, a cached stylesheet, or a page rendering outside the wrapper. */
  body.ar-has-sidebar .ar-main{ box-sizing:border-box; min-width:0; }
  body.ar-has-sidebar .ar-main > *{ margin-left:auto; margin-right:auto; }
  .ar-nav.ar-sidebar{ z-index:60; }
  .ar-main{ position:relative; z-index:1; }
}

/* Date/number fields inside procurement forms look identical to text fields. */
input.vt-fld[type="date"], input.vt-fld[type="number"]{ height:38px; border:1px solid #E5E1D6; background:#FCFBF9; box-shadow:none; font-weight:400; }
select.vt-fld{ height:38px; }

/* Room bookings nobody checked in to — the team's confirmation panel */
.rm-ns{ background:#FEF7EA; border:1px solid #F5E4C3; border-radius:16px; padding:14px 16px; margin-bottom:16px; }
.rm-ns-h{ font-weight:800; font-size:14.5px; color:#9A6410; display:flex; align-items:center; gap:8px; }
.rm-ns-n{ background:#9A6410; color:#fff; font-size:11px; font-weight:800; padding:2px 8px; border-radius:99px; }
.rm-ns-sub{ margin:4px 0 10px; font-size:12.5px; color:#7A5A1E; }
.rm-ns-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between; background:#fff; border:1px solid #F0E3C6; border-radius:12px; padding:11px 13px; }
.rm-ns-row + .rm-ns-row{ margin-top:8px; }
.rm-ns-who{ font-size:13.5px; line-height:1.5; min-width:220px; flex:1; } .rm-ns-who span{ color:var(--mut,#8A928F); font-size:12.5px; } .rm-ns-who .rm-ns-c{ color:var(--ink,#12201D); font-weight:600; }
.rm-ns-act{ display:flex; gap:8px; flex-wrap:wrap; }

/* Room booking — "Booking for" picker (Admin & Logistics team) */
.rm-bf-seg{ display:inline-flex; gap:4px; background:#F3F1EA; border-radius:11px; padding:3px; margin-bottom:8px; }
.rm-bf-seg button{ border:0; background:transparent; padding:8px 16px; border-radius:9px; font:inherit; font-size:13px; font-weight:700; color:var(--mut,#8A928F); cursor:pointer; }
.rm-bf-seg button.on{ background:#fff; color:var(--teal-deep,#0A5A5A); box-shadow:0 2px 6px rgba(0,0,0,.08); }
.rm-bf-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); border:1px solid #BEE3DC; border-radius:99px; padding:6px 8px 6px 12px; font-size:13px; font-weight:700; margin-top:8px; }
.rm-bf-chip small{ font-weight:500; color:#4A7F7A; } .rm-bf-chip button{ border:0; background:#fff; color:#0A5A5A; width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:15px; line-height:1; }
.rm-bf-hint{ margin:8px 0 0; }


/* ============================================================
   Ticket dashboards (shared by IT and Admin & Logistics)
   Moved out of the two pages so both teams always look and behave the same.
   ============================================================ */
.tkt-stats{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:18px; }
.tkt-stat{ background:var(--card,#fff); border:1px solid var(--line,#EDF0EF); border-radius:14px; padding:14px 16px; text-align:left; cursor:default; font-family:inherit; }
button.tkt-stat{ cursor:pointer; transition:.2s; } button.tkt-stat:hover{ box-shadow:0 12px 26px -18px rgba(15,60,58,.5); border-color:var(--teal,#0F8080); }
.tkt-stat .v{ font-size:26px; font-weight:800; letter-spacing:-.02em; display:block; color:var(--ink,#141918); }
.tkt-stat .l{ font-size:12px; color:var(--ink-mute,#6A726F); }
.tkt-stat.danger .v{ color:var(--red,#E0223D); }
@media(max-width:900px){ .tkt-stats{ grid-template-columns:repeat(3,1fr); } }
.tkt-toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.tkt-tabs{ display:flex; gap:4px; background:var(--card,#fff); border:1px solid var(--line-strong,#E4E8E6); border-radius:12px; padding:4px; flex-wrap:wrap; }
.tkt-tabs button{ border:0; background:none; padding:8px 13px; border-radius:9px; font-size:13px; font-weight:600; color:var(--ink-mute,#6A726F); cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:6px; }
.tkt-tabs button.on{ background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); }
.tkt-tabs .n{ background:var(--red,#E0223D); color:#fff; font-size:10px; padding:1px 6px; border-radius:8px; } .tkt-tabs button.on .n{ background:var(--teal,#0F8080); }
.tkt-sp{ flex:1; }
.tkt-search{ display:flex; align-items:center; gap:8px; height:40px; padding:0 13px; background:var(--card,#fff); border:1px solid var(--line-strong,#E4E8E6); border-radius:11px; min-width:200px; }
.tkt-search i{ color:var(--ink-mute,#9AA19E); } .tkt-search input{ border:0; outline:0; background:none; font-size:13px; font-family:inherit; color:var(--ink); width:100%; }
.tkt-split{ display:flex; gap:16px; min-height:520px; }
.tkt-list{ width:400px; flex-shrink:0; background:var(--card,#fff); border:1px solid var(--line,#EDF0EF); border-radius:16px; overflow-y:auto; max-height:72vh; }
.tkt-loading, .tkt-list .ar-empty{ padding:26px; color:var(--ink-mute); text-align:center; }
.tkt-row{ display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line,#EDF0EF); cursor:pointer; transition:.15s; position:relative; }
.tkt-row:hover{ background:var(--bg,#F6F8F7); } .tkt-row.sel{ background:var(--teal-soft,#E8F5F3); }
.tkt-row.sel::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--teal,#0F8080); }
.tkt-row .dot{ width:9px; height:9px; border-radius:50%; margin-top:5px; flex-shrink:0; background:var(--ink-mute); }
.tkt-row .dot.red{ background:var(--red); box-shadow:0 0 8px var(--red); } .tkt-row .dot.amber{ background:#B7791F; } .tkt-row .dot.teal{ background:var(--teal); }
.tkt-row .body{ flex:1; min-width:0; } .tkt-row .l1{ display:flex; align-items:center; gap:8px; }
.tkt-row .id{ font-size:11px; font-weight:700; color:var(--ink-mute,#9AA19E); } .tkt-row .subj{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tkt-row .l2{ font-size:12px; color:var(--ink-mute,#6A726F); margin-top:3px; display:flex; align-items:center; gap:8px; }
.tkt-row .av{ width:20px; height:20px; border-radius:50%; background:var(--teal); color:#fff; font-size:9px; display:grid; place-items:center; font-weight:700; text-transform:uppercase; }
.tkt-row .age{ margin-left:auto; font-size:11px; color:var(--ink-mute,#9AA19E); white-space:nowrap; }
  .tkt-row{ align-items:center; border-left:3px solid transparent; }
  .tkt-row.sel{ background:#F1F8F6; } .tkt-row.sel::before{ display:none; } .tkt-row.sel{ border-left-color:var(--teal,#0F8080); }
  .tkt-lav{ position:relative; flex:0 0 auto; width:44px; height:44px; border-radius:50%; color:#fff; display:grid; place-items:center; font-weight:700; font-size:15px; text-transform:uppercase; }
  .tkt-ldot{ position:absolute; right:-1px; bottom:-1px; width:13px; height:13px; border-radius:50%; border:2.5px solid #fff; background:var(--ink-mute,#9AA29D); }
  .tkt-ldot.red{ background:var(--red,#E0223D); } .tkt-ldot.amber{ background:#E0A93B; } .tkt-ldot.teal{ background:#25A35A; }
  .tkt-lnm{ font-weight:800; font-size:15px; color:var(--ink,#12201D); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tkt-lmeta{ font-size:12.5px; color:var(--ink-mute,#8A928F); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tkt-lmeta .id{ font-weight:700; color:#6A736F; }
  .tkt-lright{ flex:0 0 auto; text-align:right; } .tkt-lage{ display:block; font-size:11px; color:var(--ink-mute,#9AA29D); margin-top:5px; }
.tkt-pill{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.tkt-pill.warn{ background:#FEF3E2; color:#B7791F; } .tkt-pill.info{ background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); } .tkt-pill.ok{ background:#E6F4EA; color:#1E7E4A; } .tkt-pill.mute{ background:var(--bg,#F6F8F7); color:var(--ink-mute,#6A726F); }
.tkt-detail{ flex:1; background:var(--card,#fff); border:1px solid var(--line,#EDF0EF); border-radius:16px; display:flex; flex-direction:column; overflow:hidden; min-width:0; max-height:72vh; }
.tkt-dhead{ padding:20px 24px; border-bottom:1px solid var(--line,#EDF0EF); display:flex; align-items:flex-start; gap:14px; }
.tkt-dhead .info{ flex:1; min-width:0; } .tkt-dhead .eyebrow{ font-size:11px; font-weight:700; color:var(--ink-mute,#9AA19E); } .tkt-dhead h2{ font-size:18px; font-weight:700; margin:2px 0 8px; } .tkt-dhead .meta{ display:flex; gap:8px; flex-wrap:wrap; }
.tkt-chip{ font-size:12px; color:var(--ink-mute,#6A726F); background:var(--bg,#F6F8F7); border:1px solid var(--line-strong,#E4E8E6); padding:5px 11px; border-radius:8px; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.tkt-chip i{ color:var(--teal); font-size:14px; }
.tkt-dbody{ flex:1; overflow-y:auto; padding:22px 24px; display:flex; flex-direction:column; gap:16px; }
.tkt-msg{ display:flex; gap:12px; animation:tktFade .35s ease both; }
.tkt-msg .av{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:12px; font-weight:700; color:#fff; text-transform:uppercase; background:var(--ink-mute,#9AA19E); }
.tkt-msg .av.it{ background:linear-gradient(150deg,var(--teal,#0F8080),var(--teal-deep,#0A5A5A)); }
.tkt-msg .bub{ flex:1; min-width:0; } .tkt-msg .who{ font-size:12.5px; color:var(--ink-mute,#6A726F); margin-bottom:4px; } .tkt-msg .who b{ color:var(--ink); }
.tkt-msg .txt{ background:var(--bg,#F6F8F7); border-radius:0 12px 12px 12px; padding:12px 15px; font-size:13.5px; line-height:1.55; word-wrap:break-word; white-space:pre-wrap; }
.tkt-msg.mine .txt{ background:var(--teal-soft,#E8F5F3); }
.tkt-msg.no-anim{ animation:none; }
@keyframes tktFade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.tkt-dfoot{ padding:14px 20px; border-top:1px solid var(--line,#EDF0EF); }
.tkt-reply{ border:1px solid var(--line-strong,#E4E8E6); border-radius:13px; padding:10px 12px; }
.tkt-reply textarea{ width:100%; border:0; outline:0; resize:vertical; min-height:50px; font-size:13.5px; font-family:inherit; color:var(--ink); background:none; }
.tkt-actions{ display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.tkt-actions .sp{ flex:1; }
.tkt-btn{ border:0; border-radius:10px; padding:9px 15px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:7px; }
.tkt-btn.primary{ background:var(--teal,#0F8080); color:#fff; } .tkt-btn.primary:hover{ background:var(--teal-deep,#0A5A5A); }
.tkt-btn.ghost{ background:var(--bg,#F6F8F7); color:var(--ink-mute,#6A726F); } .tkt-btn.ghost:hover{ color:var(--ink); }
.tkt-btn.danger{ background:#FDECEE; color:#E0223D; }
.tkt-btn:disabled{ opacity:.55; cursor:not-allowed; }
.tkt-assign{ height:38px; border:1px solid var(--line-strong,#E4E8E6); border-radius:10px; padding:0 10px; font-size:13px; font-family:inherit; background:var(--card,#fff); color:var(--ink); }
.tkt-iconbtn{ width:34px; height:34px; border-radius:9px; border:1px solid var(--line-strong,#E4E8E6); background:var(--card,#fff); color:var(--ink-mute,#6A726F); cursor:pointer; display:grid; place-items:center; flex-shrink:0; }
.tkt-iconbtn:hover{ background:var(--bg,#F6F8F7); color:var(--ink); } .tkt-iconbtn i{ font-size:18px; }
.tkt-export{ position:relative; }
.tkt-export-menu{ display:none; position:absolute; right:0; top:46px; z-index:50; width:230px; background:var(--card,#fff); border:1px solid var(--line-strong,#E4E8E6); border-radius:14px; box-shadow:0 24px 50px -24px rgba(15,40,38,.4); padding:8px; }
.tkt-export-menu.open{ display:block; }
.tkt-export-title{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-mute,#9AA19E); padding:8px 10px 6px; }
.tkt-export-menu button[data-m]{ display:block; width:100%; text-align:left; border:0; background:none; padding:9px 10px; border-radius:9px; font-size:13.5px; font-weight:500; color:var(--ink); cursor:pointer; font-family:inherit; }
.tkt-export-menu button[data-m]:hover{ background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); }
.tkt-export-custom{ border-top:1px solid var(--line,#EDF0EF); margin-top:6px; padding-top:4px; }
.tkt-export-dates{ display:flex; align-items:center; gap:6px; padding:4px 10px 10px; }
.tkt-export-dates input{ flex:1; min-width:0; height:34px; border:1px solid var(--line-strong,#E4E8E6); border-radius:8px; padding:0 8px; font-size:12px; font-family:inherit; }
.tkt-export-dates span{ font-size:12px; color:var(--ink-mute); }
.tkt-fmt{ display:flex; gap:4px; padding:2px 10px 8px; }
.tkt-fmt button{ flex:1; border:1px solid var(--line-strong,#E4E8E6); background:var(--card,#fff); border-radius:9px; padding:8px 6px; font-size:12px; font-weight:600; color:var(--ink-mute,#6A726F); cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:3px; }
.tkt-fmt button i{ font-size:16px; }
.tkt-fmt button.on{ background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); border-color:var(--teal,#0F8080); }
@media (max-width:1000px){ .tkt-list{ width:100%; } .tkt-detail{ display:none; } .tkt.show-detail .tkt-list{ display:none; } .tkt.show-detail .tkt-detail{ display:flex; } }

/* ============================================================
   Ticket dashboards — responsive layout (IT + Admin & Logistics)
   14" laptops and phones: a slimmer page header, clear stat tiles, an open ticket
   that fills the screen (compact header, conversation first), approvals reduced to
   a small bar, and a real list → ticket flow on phones with a Back button.
   ============================================================ */

/* ---- page header: slim, so tickets start higher up ---- */
.ar-ent .e-hero-bar.tkt-hero{ padding:12px 18px; margin-bottom:12px; gap:12px; }
.ar-ent .e-hero-bar.tkt-hero .e-hero-bar-ico{ width:40px; height:40px; border-radius:12px; }
.ar-ent .e-hero-bar.tkt-hero .e-hero-bar-ico i{ font-size:21px; }
.ar-ent .e-hero-bar.tkt-hero h1{ font-size:19px; margin:0; }
.ar-ent .e-hero-bar.tkt-hero p{ font-size:12.5px; margin-top:1px; }

/* ---- stat tiles: icon + big number + readable label, colour-coded, still clickable ---- */
.tkt-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
@media (min-width:1480px){ .tkt-stats{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; } }
.tkt-stat{ --tone:#C9D3CF; --tone-bg:#F0EEE8; display:flex; align-items:center; gap:12px; position:relative; overflow:hidden;
  min-height:72px; padding:12px 16px 12px 18px; border-radius:16px; box-shadow:0 10px 26px -22px rgba(18,32,29,.35); }
.tkt-stat::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--tone); }
.tkt-stat .ic{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--tone-bg); color:var(--tone); }
.tkt-stat .ic i{ font-size:20px; }
.tkt-stat .tx{ display:flex; flex-direction:column; min-width:0; }
.tkt-stat .v{ font-size:26px; line-height:1.05; }
.tkt-stat .l{ font-size:12.5px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tkt-stat.danger{ --tone:#E0223D; --tone-bg:#FDECEE; } .tkt-stat.warn{ --tone:#D9962B; --tone-bg:#FEF3E2; } .tkt-stat.info{ --tone:#2E7FD0; --tone-bg:#E7F0FB; }
.tkt-stat.ok{ --tone:#1C8A5E; --tone-bg:#E6F5EC; } .tkt-stat.mute{ --tone:#6A736F; --tone-bg:#F0EEE8; } .tkt-stat.plum{ --tone:#7B5CD6; --tone-bg:#EFEAFB; }
button.tkt-stat:hover{ transform:translateY(-1px); }

/* ---- toolbar: one tidy row; the tabs scroll sideways instead of wrapping ---- */
.tkt-tabs{ flex-wrap:nowrap; overflow-x:auto; max-width:100%; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.tkt-tabs::-webkit-scrollbar{ display:none; } .tkt-tabs button{ flex:0 0 auto; white-space:nowrap; }
.tkt-search{ flex:1 1 220px; max-width:360px; }

/* ---- list + ticket: the ticket pane uses the full height of the screen ---- */
.tkt-split{ align-items:flex-start; gap:14px; min-height:0; }
.tkt-list{ width:clamp(320px,34%,420px); max-height:calc(100vh - 104px); scrollbar-width:thin; }
.tkt-detail{ max-height:none; height:auto; min-height:240px; }
.tkt-detail.open{ height:calc(100vh - 104px); min-height:460px; }
.tkt-row{ padding:12px 14px; }

/* ---- ticket header: one compact block instead of a stack of chips ---- */
.tkt-dhead{ padding:12px 16px; gap:10px; align-items:center; flex:0 0 auto; }
.tkt-dhead h2{ font-size:16px; line-height:1.25; margin:1px 0 3px; }
.tkt-dhead .meta{ gap:2px 14px; }
.tkt-chip{ background:none; border:0; padding:0; border-radius:0; font-size:12.5px; color:var(--ink-mute,#6A726F); gap:5px; }
.tkt-chip i{ font-size:14px; }
.tkt-back{ display:none; }
.tkt-dbody{ padding:14px 16px; gap:12px; min-height:0; }

/* ---- approvals & people: a slim bar pinned above the reply box ---- */
.tkt-dap{ flex:0 0 auto; }
.tkt-dap:empty, .tkt-dap .tap-mount:empty{ display:none; }
.tap-bar{ display:flex; align-items:center; gap:8px; padding:7px 14px; border-top:1px solid var(--line,#EDF0EF); background:#FBFAF8; flex-wrap:wrap; }
.tap-bar .tap-flash{ flex:1 0 100%; margin:0 0 2px; }
.tap-bar-main{ display:inline-flex; align-items:center; gap:8px; flex:1; min-width:0; border:0; background:none; cursor:pointer; font:inherit; padding:4px 6px; border-radius:9px; text-align:left; }
.tap-bar-main:hover{ background:#F1F5F4; }
.tap-bar-t{ font-size:12.5px; font-weight:800; color:var(--ink,#12201D); }
.tap-bar-main .tap-status{ font-size:11px; }
.tap-bar-av{ display:inline-flex; align-items:center; margin-left:auto; padding-left:6px; }
.tap-av.xs{ width:22px; height:22px; font-size:9px; margin-left:-6px; border:2px solid #fff; box-sizing:border-box; display:grid; place-items:center; border-radius:50%; overflow:hidden; color:#fff; font-weight:700; }
.tap-av.xs img{ width:100%; height:100%; object-fit:cover; }
.tap-more{ font-style:normal; font-size:11px; font-weight:700; color:var(--ink-mute,#6A726F); margin-left:4px; }
.tap-bar-chev{ font-size:15px; color:var(--ink-mute,#8A928F); }
.tap-bar-add{ display:inline-flex; align-items:center; gap:6px; border:1px dashed #BEE3DC; background:var(--teal-soft,#E8F5F3); color:var(--teal-deep,#0A5A5A); border-radius:99px; padding:5px 12px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.tap-bar-add:hover{ background:#DDF0EC; }
.tkt-dap .tap{ margin:0; border-radius:0; border-left:0; border-right:0; box-shadow:none; max-height:42vh; overflow:auto; }
.tap-head{ display:flex; align-items:center; gap:8px; }
.tap-collapse{ margin-left:auto; flex:0 0 auto; width:28px; height:28px; border:0; border-radius:8px; background:#F3F1EA; color:#4A524E; cursor:pointer; display:grid; place-items:center; }
.tap-collapse:hover{ background:#E8E5DC; }

/* ---- reply box: tighter ---- */
.tkt-dfoot{ padding:10px 14px; flex:0 0 auto; }
.tkt-reply textarea{ min-height:44px; max-height:140px; }
.tkt-actions{ margin-top:6px; }

/* ---- phones and small tablets: list first, then the conversation full-screen ---- */
@media (max-width:1000px){
  .tkt-split{ display:block; }
  .tkt-list{ width:100%; max-height:none; }
  .tkt-detail, .tkt-detail.open{ display:none; width:100%; height:auto; min-height:0; }
  .tkt.show-detail .tkt-list{ display:none; }
  .tkt.show-detail .tkt-detail{ display:flex; height:calc(100vh - 168px); height:calc(100dvh - 168px); min-height:420px; }
  .tkt-back{ display:grid; } #tkt-close{ display:none; }
  /* with a ticket open, the page header, tiles and filters get out of the way */
  body.tkt-detail-open .tkt-hero, body.tkt-detail-open .tkt-stats, body.tkt-detail-open .tkt-toolbar{ display:none; }
  .tkt-search{ max-width:none; }
}
@media (max-width:700px){
  .ar-ent .e-hero-bar.tkt-hero{ padding:10px 14px; margin-bottom:10px; border-radius:16px; }
  .ar-ent .e-hero-bar.tkt-hero p{ display:none; }
  .ar-ent .e-hero-bar.tkt-hero .e-hero-bar-ico{ width:34px; height:34px; } .ar-ent .e-hero-bar.tkt-hero h1{ font-size:17px; }
  #alerts-toggle-label{ display:none; }                       /* the bell icon is enough */
  .tkt-toolbar{ gap:8px; }
  .tkt-tabs{ order:1; width:100%; } .tkt-sp{ display:none; }
  .tkt-search{ order:2; flex:1 1 0; min-width:0; } .tkt-export{ order:3; } .tkt-export .tkt-lbl{ display:none; }
  .tkt-export-menu{ right:0; }
  .tkt-row{ padding:11px 12px; gap:10px; } .tkt-lav{ width:40px; height:40px; font-size:14px; }
  .tkt-dhead{ padding:10px 12px; } .tkt-dbody{ padding:12px; } .tkt-dfoot{ padding:8px 10px; }
  .tkt-actions .tkt-btn{ padding:8px 11px; }
  /* floating helpers must not sit on top of the work: lift them above the bottom bar, and shrink the install prompt */
  #ar-install-bar{ bottom:calc(66px + env(safe-area-inset-bottom,0px)) !important; left:10px !important; right:10px !important; }
  .ar-install-inner{ padding:8px 10px !important; font-size:12px !important; }
  .ar-fab{ bottom:calc(76px + env(safe-area-inset-bottom,0px)); right:12px; width:48px; height:48px; }
  body.tkt-detail-open .ar-fab{ display:none; }
}
@media (max-width:560px){
  .tkt-stats{ gap:8px; margin-bottom:10px; }
  .tkt-stat{ min-height:60px; padding:9px 10px 9px 12px; gap:0; border-radius:13px; }
  .tkt-stat .ic{ display:none; }
  .tkt-stat .v{ font-size:20px; } .tkt-stat .l{ font-size:10.5px; white-space:normal; line-height:1.2; }
}

/* ---- fixes found on review ---- */
/* The status pill carries the class "info" too, so ".tkt-dhead .info{flex:1}" stretched it into a wide band. */
.tkt-dhead .tkt-pill{ flex:0 0 auto; }
.tkt-list{ width:clamp(340px,36%,440px); }
/* While a ticket is open the floating install prompt and chat bubble must not sit on the reply buttons.
   (The chat bubble is the employee help button — staff working a ticket don't need it.) */
body.tkt-detail-open .ar-fab, body.tkt-detail-open #ar-install-bar{ display:none !important; }

/* Staff-chat bubble: keep it clear of the ticket pane's buttons (margin on desktop, out of the way on phones). */
body.tkt-detail-open #ar-staffchat-launcher{ width:46px; height:46px; right:5px; bottom:14px; }
@media (max-width:1000px){ body.tkt-detail-open #ar-staffchat-launcher{ display:none !important; } }
@media (max-width:700px){ #ar-staffchat-launcher{ bottom:calc(74px + env(safe-area-inset-bottom,0px)); right:12px; width:48px; height:48px; } }

/* ---- phone refinements found on review ---- */
@media (max-width:560px){
  .tkt-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tkt-tabs button{ padding:8px 10px; font-size:12.5px; }
}
@media (max-width:700px){
  /* the open ticket must end ABOVE the bottom bar so the reply buttons are always reachable */
  .tkt.show-detail .tkt-detail{ height:calc(100vh - 206px); height:calc(100dvh - 206px); }
  /* header: back arrow + title + status on top, details on one flowing line; print / full page live on the desktop view */
  .tkt-dhead{ flex-wrap:wrap; gap:6px 10px; }
  .tkt-dhead .info{ flex:1 1 0; min-width:0; }
  .tkt-dhead .tkt-iconbtn:not(.tkt-back){ display:none; }
  .tkt-dhead .meta{ flex:1 1 100%; order:5; gap:2px 12px; }
  .tkt-chip{ font-size:12px; }
  .tkt-dhead h2{ font-size:15px; }
  /* the install prompt shares the bottom with the chat bubble — leave the bubble its own corner */
  #ar-install-bar{ right:68px !important; }
  .tkt-actions{ gap:6px; } .tkt-assign{ max-width:132px; }
}

/* the status pill must never take the text block's flex rules (it shares the class name "info") */
.tkt-dhead .tkt-pill.info, .tkt-dhead .tkt-pill{ flex:0 0 auto !important; width:auto; }
.tkt-dhead > .info{ flex:1 1 0; min-width:0; }
@media (max-width:700px){
  .tkt-dhead .eyebrow{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tkt-dhead .meta{ flex-direction:row; flex-wrap:wrap; }
}

/* ============================================================
   Ticket workspace — the expanded ticket view (ticket_view.php)
   A lean full-window page: conversation in the middle, details / people / files beside it.
   Works as a pop-up window, an ordinary tab, and on a phone (two tabs instead of two columns).
   ============================================================ */
html:has(.tw-body), .tw-body{ height:100%; }
.tw-body{ margin:0; background:#F2F4F3; color:#12201D; font-family:Inter,system-ui,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.tw{ display:flex; flex-direction:column; height:100vh; height:100dvh; max-width:1600px; margin:0 auto; background:#F7F8F7; box-shadow:0 0 0 1px #E8EBEA; }
.tw-loading{ margin:auto; color:#6A726F; display:flex; gap:8px; align-items:center; font-weight:600; } .tw-loading i{ animation:twspin 1s linear infinite; }
@keyframes twspin{ to{ transform:rotate(360deg); } }

/* ---- top bar ---- */
.tw-top{ position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 20px 14px; background:#fff; border-bottom:1px solid #E8EBEA; }
.tw-top::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:linear-gradient(90deg,#15A897,#0A5A5A); }
.tw-top-l{ display:flex; align-items:center; gap:12px; min-width:0; flex-wrap:wrap; }
.tw-id{ min-width:0; } .tw-id h1{ margin:0; font-size:19px; line-height:1.2; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42vw; }
.tw-eyebrow{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#0F8080; }
.tw-iconbtn{ flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; border:1px solid #E3E7E5; background:#fff; border-radius:11px; color:#34403C; cursor:pointer; text-decoration:none; font-size:18px; }
.tw-iconbtn:hover{ background:#F3F6F5; }
.tw-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.tw-chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#5A645F; background:#F1F4F3; border-radius:99px; padding:4px 10px; }
.tw-chip.bad{ background:#FDECEE; color:#C11A30; } .tw-chip i{ font-size:14px; }
.tw-status{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800; padding:5px 12px; border-radius:99px; background:#F0EEE8; color:#5A645F; white-space:nowrap; }
.tw-status i{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.tw-status.s-pending{ background:#FEF3E2; color:#9A6410; } .tw-status.s-accepted, .tw-status.s-in_progress{ background:#E7F0FB; color:#1F5FA8; }
.tw-status.s-resolved{ background:#E6F5EC; color:#12703F; } .tw-status.s-withdrawn, .tw-status.s-archived{ background:#EFEDE7; color:#6A726F; }
.tw-status.sm{ font-size:12px; padding:3px 10px; }
.tw-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* buttons */
.tw-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; font:inherit; font-size:13.5px; font-weight:700; padding:9px 15px; border-radius:11px; border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap; transition:transform .08s, box-shadow .12s, background .12s; }
.tw-btn:active{ transform:translateY(1px); } .tw-btn i{ font-size:17px; }
.tw-btn.primary{ background:linear-gradient(135deg,#15A897,#0A5A5A); color:#fff; box-shadow:0 8px 18px -10px rgba(10,90,90,.7); } .tw-btn.primary:hover{ box-shadow:0 10px 22px -10px rgba(10,90,90,.8); }
.tw-btn.ok{ background:#1C8A5E; color:#fff; } .tw-btn.ok:hover{ background:#177650; }
.tw-btn.ghost{ background:#fff; color:#0A5A5A; border-color:#D5E4E1; } .tw-btn.ghost:hover{ background:#F2F8F7; }
.tw-btn.danger{ background:#fff; color:#B4182D; border-color:#F0CFD3; } .tw-btn.danger:hover{ background:#FDF1F2; }
.tw-btn.icon{ padding:9px 11px; background:#fff; color:#34403C; border-color:#E3E7E5; } .tw-btn.block{ width:100%; margin-top:10px; }
.tw-btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }

/* ---- layout ---- */
.tw-main{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 372px; }
.tw-chat{ position:relative; display:flex; flex-direction:column; min-height:0; min-width:0; background:linear-gradient(#F7F8F7,#F3F5F4); }
.tw-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:18px 24px 10px; scroll-behavior:smooth; outline:none; }
.tw-side{ min-height:0; overflow-y:auto; padding:16px 16px 28px; background:#F2F4F3; border-left:1px solid #E8EBEA; display:flex; flex-direction:column; gap:14px; }
.tw-tabs{ display:none; }

/* ---- conversation ---- */
.tw-day{ display:flex; justify-content:center; margin:16px 0 10px; } .tw-day span{ font-size:11.5px; font-weight:700; color:#6A726F; background:#E9EDEB; border-radius:99px; padding:3px 12px; }
.tw-event{ display:flex; align-items:center; justify-content:center; gap:7px; margin:10px auto; max-width:90%; font-size:12.5px; color:#5A645F; text-align:center; }
.tw-event i{ font-size:15px; color:#0F8080; } .tw-event time{ color:#98A19D; font-size:11.5px; }
.tw-msg{ display:flex; gap:10px; margin-top:12px; align-items:flex-end; max-width:100%; }
.tw-msg.cont{ margin-top:3px; } .tw-av-gap{ flex:0 0 34px; }
.tw-msg.mine{ flex-direction:row-reverse; } .tw-msg.mine .tw-bub-w{ align-items:flex-end; }
.tw-bub-w{ display:flex; flex-direction:column; min-width:0; max-width:min(74%,640px); }
.tw-meta{ display:flex; align-items:center; gap:8px; margin:0 6px 4px; font-size:12.5px; } .tw-meta b{ font-weight:700; }
.tw-role{ font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:2px 8px; border-radius:99px; } .tw-role.team{ background:#E8F5F3; color:#0A5A5A; } .tw-role.requester{ background:#EEF1FB; color:#2E4C86; }
.tw-sub{ color:#8A928F; font-size:12px; }
.tw-bub{ position:relative; background:#fff; border:1px solid #E7EBE9; border-radius:16px 16px 16px 5px; padding:10px 14px 7px; box-shadow:0 1px 2px rgba(18,32,29,.04); min-width:64px; }
.tw-msg.mine .tw-bub{ background:linear-gradient(135deg,#14A090,#0B6666); border-color:transparent; color:#fff; border-radius:16px 16px 5px 16px; box-shadow:0 8px 18px -12px rgba(10,90,90,.8); }
.tw-msg.cont:not(.mine) .tw-bub{ border-top-left-radius:5px; } .tw-msg.cont.mine .tw-bub{ border-top-right-radius:5px; }
.tw-txt{ white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; font-size:14.5px; line-height:1.5; }
.tw-txt a{ color:#0A5A5A; text-decoration:underline; } .tw-msg.mine .tw-txt a{ color:#fff; }
.tw-ts{ display:flex; align-items:center; gap:6px; justify-content:flex-end; margin-top:3px; font-size:11px; color:#98A19D; } .tw-msg.mine .tw-ts{ color:rgba(255,255,255,.75); }
.tw-del{ border:0; background:none; color:inherit; opacity:0; cursor:pointer; padding:0 2px; font-size:13px; transition:opacity .12s; } .tw-bub:hover .tw-del, .tw-del:focus{ opacity:.85; }
.tw-msg.pending .tw-bub{ opacity:.6; } .tw-msg.pending .tw-ts i{ animation:twspin 1s linear infinite; }
.tw-filebub{ padding:8px; } .tw-filebub .tw-ts{ padding:0 6px; }
.tw-imgs{ display:grid; gap:6px; grid-template-columns:repeat(2,1fr); } .tw-imgs.c1{ grid-template-columns:1fr; } .tw-imgs.c3{ grid-template-columns:repeat(3,1fr); }
.tw-img{ display:block; border-radius:11px; overflow:hidden; background:#EEF1F0; aspect-ratio:4/3; } .tw-imgs.c1 .tw-img{ aspect-ratio:auto; max-height:320px; } .tw-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.tw-file{ display:flex; align-items:center; gap:10px; padding:9px 11px; margin-top:6px; background:#F5F8F7; border:1px solid #E3EAE8; border-radius:11px; color:#12201D; text-decoration:none; font-size:13.5px; } .tw-file:first-child{ margin-top:0; }
.tw-file:hover{ background:#EDF4F2; } .tw-file > i:first-child{ font-size:20px; color:#0F8080; } .tw-file-n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; } .tw-file-s{ color:#8A928F; font-size:12px; }
.tw-empty{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:60px auto; color:#6A726F; text-align:center; } .tw-empty i{ font-size:40px; color:#9CC7C2; } .tw-empty b{ color:#12201D; font-size:15px; }
.tw-av{ position:relative; flex:0 0 auto; display:inline-grid; place-items:center; border-radius:50%; color:#fff; font-weight:800; overflow:hidden; } .tw-av b{ font-weight:800; } .tw-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tw-pill{ position:absolute; left:50%; bottom:128px; transform:translateX(-50%); z-index:5; border:0; cursor:pointer; background:#0A5A5A; color:#fff; font:inherit; font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:99px; box-shadow:0 10px 24px -8px rgba(10,90,90,.7); }
.tw-pill[hidden]{ display:none; }

/* ---- banner + composer ---- */
.tw-banner{ display:none; align-items:center; gap:10px; margin:0 20px 8px; padding:9px 14px; border-radius:12px; background:#EAF4F2; color:#0A5A5A; font-size:13px; font-weight:600; }
.tw-banner.show{ display:flex; } .tw-banner span{ flex:1; } .tw-banner > i{ font-size:18px; } .tw-banner .tw-btn{ padding:6px 12px; font-size:12.5px; }
.tw-composer{ flex:0 0 auto; padding:0 20px 16px; }
.tw-box{ background:#fff; border:1.5px solid #DCE5E2; border-radius:18px; box-shadow:0 14px 32px -22px rgba(18,32,29,.5); transition:border-color .12s, box-shadow .12s; }
.tw-box:focus-within{ border-color:#15A897; box-shadow:0 0 0 4px rgba(21,168,151,.12), 0 14px 32px -22px rgba(18,32,29,.5); }
.tw-box textarea{ display:block; width:100%; border:0; outline:none; resize:none; background:transparent; font:inherit; font-size:14.5px; line-height:1.5; padding:13px 16px 4px; color:inherit; min-height:48px; max-height:180px; box-sizing:border-box; }
.tw-box-b{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 10px 10px 8px; }
.tw-box-l, .tw-box-r{ display:flex; align-items:center; gap:10px; } .tw-hint{ font-size:12px; color:#98A19D; } .tw-hint kbd{ font:inherit; font-size:11px; background:#F0F3F2; border:1px solid #E1E7E5; border-radius:5px; padding:0 5px; }
.tw-count{ font-size:11.5px; color:#B4182D; font-weight:700; }
.tw-readonly{ display:flex; align-items:center; gap:8px; justify-content:center; padding:14px; margin:0 20px 14px; border-radius:14px; background:#EFF2F1; color:#5A645F; font-size:13px; }
.tw-drop{ position:absolute; inset:0; z-index:8; display:none; place-items:center; background:rgba(10,90,90,.86); color:#fff; font-size:18px; text-align:center; border-radius:0; }
.tw-drop i{ font-size:46px; display:block; margin:0 auto 6px; } .tw-chat.dragging .tw-drop{ display:grid; }

/* ---- side cards ---- */
.tw-card{ position:relative; background:#fff; border:1px solid #E8EBEA; border-radius:16px; padding:16px 16px 16px 18px; box-shadow:0 10px 26px -22px rgba(18,32,29,.35); overflow:hidden; }
.tw-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,#15A897,#0A5A5A); }
.tw-card h4{ margin:0 0 12px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#6A726F; display:flex; align-items:center; gap:8px; }
.tw-card .tap{ margin:0; box-shadow:none; border:0; border-radius:0; background:transparent; } .tw-card .tap-head{ display:none; }
.tw-who{ display:flex; align-items:center; gap:12px; } .tw-who b{ display:block; font-size:15px; } .tw-who > div span{ font-size:13px; }
.tw-line{ display:flex; align-items:center; gap:9px; margin-top:10px; font-size:13.5px; } .tw-line i{ color:#0F8080; font-size:17px; } .tw-line a{ color:#12201D; text-decoration:none; word-break:break-all; flex:1; } .tw-line a:hover{ text-decoration:underline; }
.tw-copy{ border:0; background:#F1F4F3; width:28px; height:28px; border-radius:8px; cursor:pointer; color:#4A524E; } .tw-copy:hover{ background:#E3E9E7; }
.tw-dl{ display:grid; grid-template-columns:auto 1fr; gap:9px 14px; margin:0; font-size:13.5px; } .tw-dl dt{ color:#8A928F; font-weight:600; } .tw-dl dd{ margin:0; font-weight:600; } .tw-dl small{ display:block; color:#8A928F; font-weight:500; font-size:12px; margin-top:1px; }
.tw-mute{ color:#98A19D; font-weight:500; } .tw-stars{ color:#E8A317; letter-spacing:2px; } .tw-stars i{ font-style:normal; color:#E3E7E5; }
.tw-assign{ margin-top:14px; padding-top:14px; border-top:1px solid #EEF1F0; } .tw-assign label{ display:block; font-size:12.5px; font-weight:700; color:#6A726F; margin-bottom:6px; }
.tw-assign > div{ display:flex; gap:8px; } .tw-assign select{ flex:1; min-width:0; border:1px solid #DCE5E2; border-radius:10px; padding:8px 10px; font:inherit; font-size:13.5px; background:#fff; }
.tw-count{ background:#EEF1F0; color:#5A645F; border-radius:99px; padding:1px 8px; font-size:11px; }
.tw-files .tw-file{ margin-top:7px; } .tw-files .tw-file:first-child{ margin-top:0; } .tw-card .tw-hint{ margin:0; line-height:1.5; }

/* ---- dialogs + toasts ---- */
.tw-modal-ov{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:rgba(14,28,26,.5); padding:16px; backdrop-filter:blur(2px); }
.tw-modal{ width:min(440px,100%); background:#fff; border-radius:20px; padding:22px; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); animation:twpop .16s ease; }
.tw-modal h3{ margin:0 0 10px; font-size:18px; } .tw-modal p{ margin:0 0 12px; color:#4A524E; font-size:14px; line-height:1.55; }
.tw-modal textarea{ width:100%; box-sizing:border-box; border:1.5px solid #DCE5E2; border-radius:12px; padding:10px 12px; font:inherit; font-size:14px; resize:vertical; outline:none; } .tw-modal textarea:focus{ border-color:#15A897; }
.tw-modal-f{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.tw-modal.shake{ animation:twshake .3s; }
@keyframes twpop{ from{ transform:scale(.96); opacity:0; } to{ transform:none; opacity:1; } } @keyframes twshake{ 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.tw-rate{ display:flex; gap:6px; justify-content:center; margin:6px 0 14px; } .tw-rate button{ border:0; background:none; font-size:38px; line-height:1; color:#DDE3E0; cursor:pointer; padding:0 2px; transition:transform .1s, color .1s; } .tw-rate button:hover{ transform:scale(1.12); } .tw-rate button.on{ color:#E8A317; }
.tw-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:120; display:flex; align-items:center; gap:9px; padding:11px 18px; border-radius:14px; background:#12201D; color:#fff; font-size:13.5px; font-weight:600; box-shadow:0 18px 40px -14px rgba(0,0,0,.6); transition:opacity .3s, transform .3s; max-width:90vw; }
.tw-toast.good i{ color:#5BE0B3; } .tw-toast.bad{ background:#8F1526; } .tw-toast.out{ opacity:0; transform:translate(-50%,10px); }

/* ---- not available ---- */
.tw-gone{ max-width:440px; margin:12vh auto 0; padding:0 22px; text-align:center; } .tw-gone-ic{ width:76px; height:76px; border-radius:22px; margin:0 auto 18px; display:grid; place-items:center; background:#E8F5F3; color:#0F8080; font-size:36px; }
.tw-gone h1{ font-size:22px; margin:0 0 8px; } .tw-gone p{ color:#6A726F; margin:0 0 22px; line-height:1.55; }

/* ---- smaller windows and phones ---- */
@media (max-width:1100px){ .tw-main{ grid-template-columns:minmax(0,1fr) 320px; } .tw-id h1{ max-width:30vw; } }
@media (max-width:900px){
  .tw-main{ grid-template-columns:1fr; }
  .tw-tabs{ display:flex; gap:4px; padding:6px 12px; background:#fff; border-bottom:1px solid #E8EBEA; flex:0 0 auto; }
  .tw-tabs button{ flex:1; border:0; background:transparent; font:inherit; font-size:13.5px; font-weight:700; color:#6A726F; padding:9px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
  .tw-tabs button.on{ background:#E8F5F3; color:#0A5A5A; }
  .tw[data-tab="chat"] .tw-side{ display:none; } .tw[data-tab="info"] .tw-chat{ display:none; }
  .tw-top{ flex-direction:column; align-items:stretch; gap:10px; padding:10px 14px 12px; }
  .tw-id h1{ max-width:56vw; font-size:17px; } .tw-chips{ display:none; }
  .tw-actions{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; scrollbar-width:none; } .tw-actions::-webkit-scrollbar{ display:none; } .tw-actions .tw-btn{ flex:0 0 auto; }
  .tw-scroll{ padding:12px 12px 8px; } .tw-bub-w{ max-width:84%; } .tw-composer{ padding:0 10px 10px; } .tw-banner{ margin:0 10px 8px; }
  .tw-hint{ display:none; } .tw-side{ border-left:0; padding:12px; }
}

/* ---- dark mode ---- */
[data-theme="dark"] .tw-body{ background:#0E1715; color:#E7EEEC; } [data-theme="dark"] .tw{ background:#101B19; box-shadow:0 0 0 1px #1D2B28; }
[data-theme="dark"] .tw-top, [data-theme="dark"] .tw-tabs, [data-theme="dark"] .tw-card, [data-theme="dark"] .tw-box, [data-theme="dark"] .tw-modal, [data-theme="dark"] .tw-iconbtn, [data-theme="dark"] .tw-btn.ghost, [data-theme="dark"] .tw-btn.icon{ background:#16231F; border-color:#243531; color:#E7EEEC; }
[data-theme="dark"] .tw-chat{ background:#101B19; } [data-theme="dark"] .tw-side{ background:#0E1715; border-color:#1D2B28; }
[data-theme="dark"] .tw-bub{ background:#182824; border-color:#243531; } [data-theme="dark"] .tw-msg.mine .tw-bub{ background:linear-gradient(135deg,#12877B,#0A5555); }
[data-theme="dark"] .tw-day span, [data-theme="dark"] .tw-chip, [data-theme="dark"] .tw-file{ background:#1B2B27; color:#B7C4C0; border-color:#243531; }
[data-theme="dark"] .tw-box textarea, [data-theme="dark"] .tw-modal textarea, [data-theme="dark"] .tw-assign select{ color:#E7EEEC; background:transparent; border-color:#243531; }
[data-theme="dark"] .tw-card h4, [data-theme="dark"] .tw-dl dt, [data-theme="dark"] .tw-who span, [data-theme="dark"] .tw-event{ color:#9DB0AB; } [data-theme="dark"] .tw-banner{ background:#14302C; color:#9FE0D6; }

/* ---- print: just the conversation ---- */
@media print{
  .tw-actions, .tw-tabs, .tw-composer, .tw-banner, .tw-side, .tw-pill, .tw-del, .tw-chips{ display:none !important; }
  .tw{ height:auto; box-shadow:none; max-width:none; } .tw-main{ display:block; } .tw-scroll{ overflow:visible; padding:0; } .tw-top::after{ display:none; }
  .tw-msg.mine .tw-bub{ background:#fff !important; color:#000 !important; border:1px solid #999 !important; box-shadow:none; } .tw-msg.mine .tw-txt a{ color:#000; } .tw-ts{ color:#555 !important; }
  .tw-body{ background:#fff; }
}

/* ---- workspace fixes found on review ---- */
.tw-card{ flex:0 0 auto; }                                   /* cards keep their full height; the side panel scrolls instead of squashing them */
.tw-who > div span{ color:#6A726F; } .tw-who .tw-av{ color:#fff; }   /* (the avatar is also a span — don't grey its initials) */
.tw-count:empty{ display:none; }

/* ---- the Expand button: clearly visible wherever a conversation can be opened in its own window ---- */
.tkt-expand, .emp-expand{ position:relative; flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; border:1.5px solid #9BD3CB; background:linear-gradient(#F3FBF9,#E6F5F2); color:#0A5A5A; font:inherit; font-size:12.5px; font-weight:800; letter-spacing:.01em; border-radius:11px; padding:7px 13px 7px 11px; cursor:pointer; box-shadow:0 6px 14px -10px rgba(10,90,90,.7); transition:transform .1s, box-shadow .12s, background .12s; }
.tkt-expand:hover, .emp-expand:hover{ background:linear-gradient(135deg,#15A897,#0A5A5A); border-color:transparent; color:#fff; transform:translateY(-1px); box-shadow:0 10px 20px -10px rgba(10,90,90,.8); }
.tkt-expand i, .emp-expand i{ font-size:17px; }
.tkt-expand.pulse, .emp-expand.pulse{ animation:arExpandPulse 1.6s ease-out 3; }
@keyframes arExpandPulse{ 0%{ box-shadow:0 0 0 0 rgba(21,168,151,.55); } 100%{ box-shadow:0 0 0 14px rgba(21,168,151,0); } }
.tkt-expand[data-tip]::after, .emp-expand[data-tip]::after{ content:attr(data-tip); position:absolute; right:0; top:calc(100% + 8px); z-index:30; white-space:nowrap; background:#12201D; color:#fff; font-size:12px; font-weight:600; padding:7px 11px; border-radius:9px; box-shadow:0 12px 26px -10px rgba(0,0,0,.5); pointer-events:none; animation:arTipIn .25s ease; }
.tkt-expand[data-tip]::before, .emp-expand[data-tip]::before{ content:''; position:absolute; right:18px; top:calc(100% + 3px); border:5px solid transparent; border-bottom-color:#12201D; z-index:31; }
@keyframes arTipIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (max-width:700px){ .tkt-expand span, .emp-expand span{ display:none; } .tkt-expand, .emp-expand{ padding:7px 9px; } }

/* a shared picture or file is shown on a neutral card (even when it is yours) and never grows huge */
.tw-msg.mine .tw-filebub{ background:#fff; color:#12201D; border:1px solid #E7EBE9; box-shadow:0 1px 2px rgba(18,32,29,.05); } .tw-msg.mine .tw-filebub .tw-ts{ color:#98A19D; }
.tw-filebub{ max-width:420px; } .tw-imgs.c1 .tw-img{ aspect-ratio:auto; display:inline-block; max-width:100%; } .tw-imgs.c1 .tw-img img{ width:auto; height:auto; max-width:100%; max-height:300px; border-radius:11px; }

/* phones: the status pill and Expand button take less room so the ticket header stays compact */
@media (max-width:700px){
  .tkt-dhead{ gap:4px 8px; }
  .tkt-dhead .tkt-pill{ font-size:11px !important; padding:4px 9px !important; }
  .tkt-dhead .tkt-expand{ padding:6px 8px; border-radius:10px; }
  .tkt-dhead .tkt-back{ width:34px; height:34px; }
}

/* ============================================================
   Budget — overview, expenses, reports, set-up (admin/budget.php) and the "Add a cost" dialog
   ============================================================ */
.bdx{ --bd-teal:#0F8080; --bd-deep:#0A5A5A; --bd-red:#E0223D; --bd-amber:#D9962B; --bd-green:#1C8A5E; --bd-blue:#2E7FD0; }
.bd-loading{ display:flex; gap:8px; align-items:center; justify-content:center; padding:60px; color:#6A726F; font-weight:600; } .bd-loading i{ animation:twspin 1s linear infinite; }
.bd-hd{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.bd-eyebrow{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--bd-teal); display:flex; gap:7px; align-items:center; }
.bd-hd h1{ margin:3px 0 2px; font-size:26px; font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; } .bd-sub{ margin:0; color:#6A726F; font-size:13.5px; }
.bd-back{ width:34px; height:34px; border-radius:10px; display:inline-grid; place-items:center; background:#fff; border:1px solid #E3E7E5; color:var(--bd-deep); cursor:pointer; font-size:18px; }
.bd-acts{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.bd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; font:inherit; font-size:13.5px; font-weight:700; padding:10px 16px; border-radius:12px; border:1px solid #D5E4E1; background:#fff; color:var(--bd-deep); cursor:pointer; text-decoration:none; white-space:nowrap; }
.bd-btn:hover{ background:#F2F8F7; } .bd-btn i{ font-size:17px; } .bd-btn.sm{ padding:7px 12px; font-size:12.5px; } .bd-btn.block{ width:100%; margin-top:10px; } .bd-btn:disabled{ opacity:.5; cursor:not-allowed; }
.bd-btn.primary{ background:linear-gradient(135deg,#15A897,#0A5A5A); color:#fff; border-color:transparent; box-shadow:0 10px 22px -12px rgba(10,90,90,.8); } .bd-btn.primary:hover{ filter:brightness(1.05); }
.bd-btn.danger{ background:#C11A30; color:#fff; border-color:transparent; }
.bd-fy{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #E3E7E5; border-radius:12px; padding:0 8px 0 13px; } .bd-fy select{ border:0; background:transparent; font:inherit; font-weight:700; font-size:13.5px; padding:10px 6px; outline:none; cursor:pointer; }
.bd-menu{ position:relative; } .bd-menu-l{ position:absolute; right:0; top:calc(100% + 6px); z-index:40; background:#fff; border:1px solid #E3E7E5; border-radius:13px; box-shadow:0 18px 40px -16px rgba(0,0,0,.35); padding:6px; min-width:210px; } .bd-menu-l[hidden]{ display:none; }
.bd-menu-l a{ display:block; padding:9px 12px; border-radius:9px; color:#12201D; text-decoration:none; font-size:13.5px; font-weight:600; } .bd-menu-l a:hover{ background:#F1F6F5; }
.bd-tabs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; background:#fff; border:1px solid #EAEDEB; border-radius:16px; padding:6px; margin-bottom:14px; box-shadow:0 8px 22px -20px rgba(18,32,29,.4); }
.bd-tabs > a{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:11px; color:#5A645F; font-weight:700; font-size:13.5px; text-decoration:none; } .bd-tabs > a:hover{ background:#F3F6F5; }
.bd-tabs > a.on{ background:linear-gradient(135deg,#15A897,#0A5A5A); color:#fff; box-shadow:0 8px 18px -10px rgba(10,90,90,.8); } .bd-tabs i{ font-size:17px; }
.bd-seg{ margin-left:auto; display:inline-flex; background:#F1F3F2; border-radius:11px; padding:3px; } .bd-seg a{ padding:7px 13px; border-radius:9px; font-size:12.5px; font-weight:800; color:#6A726F; text-decoration:none; } .bd-seg a.on{ background:#fff; color:var(--bd-deep); box-shadow:0 2px 6px rgba(0,0,0,.08); }
.bd-pace{ display:flex; gap:14px; align-items:center; background:#fff; border:1px solid #EAEDEB; border-radius:16px; padding:14px 18px; margin-bottom:14px; }
.bd-pace-ic{ flex:0 0 auto; width:38px; height:38px; border-radius:12px; display:grid !important; place-items:center; font-size:20px; background:#E6F5EC; color:var(--bd-green); } .bd-pace.warn .bd-pace-ic{ background:#FEF3E2; color:var(--bd-amber); } .bd-pace.bad .bd-pace-ic{ background:#FDECEE; color:var(--bd-red); }
.bd-pace-t{ flex:1; font-size:13.5px; min-width:0; }
.bd-tl{ position:relative; height:10px; background:#EEF1F0; border-radius:99px; margin:10px 0 22px; } .bd-tl-sp{ position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:linear-gradient(90deg,#15A897,#0A5A5A); } .bd-tl-sp.red{ background:linear-gradient(90deg,#F0566B,#D61F3B); }
.bd-tl-yr{ position:absolute; top:-4px; bottom:-4px; width:2px; background:#12201D; border-radius:2px; } .bd-tl-yr span{ position:absolute; top:16px; left:-16px; font-size:10px; font-weight:800; }
.bd-kp{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:0 0 14px; } .bd-kp.four{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.bd-k{ --t:#15A897; --tb:#E8F5F3; position:relative; background:#fff; border:1px solid #EAEDEB; border-radius:16px; padding:14px 16px 14px 18px; display:flex; gap:12px; align-items:center; overflow:hidden; box-shadow:0 10px 26px -22px rgba(18,32,29,.35); }
.bd-k::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--t); } .bd-k.red{ --t:#E0223D; --tb:#FDECEE; } .bd-k.amber{ --t:#D9962B; --tb:#FEF3E2; } .bd-k.green{ --t:#1C8A5E; --tb:#E6F5EC; } .bd-k.blue{ --t:#2E7FD0; --tb:#E7F0FB; }
.bd-k .ic{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--tb); color:var(--t); font-size:20px; } .bd-k b{ display:block; font-size:21px; letter-spacing:-.02em; line-height:1.15; } .bd-k > div > span{ font-size:12.5px; color:#6A726F; }
.bd-card{ position:relative; background:#fff; border:1px solid #EAEDEB; border-radius:18px; padding:18px 20px 18px 22px; box-shadow:0 12px 30px -24px rgba(18,32,29,.35); overflow:hidden; margin-bottom:14px; }
.bd-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,#15A897,#0A5A5A); }
.bd-card h3{ margin:0 0 4px; font-size:15px; font-weight:800; display:flex; align-items:center; gap:8px; } .bd-card h3 .warnc{ color:var(--bd-amber); } .bd-s{ color:#8A928F; font-size:12.5px; margin:0 0 14px; } .bd-h4{ margin:16px 0 8px; font-size:13.5px; }
.bd-n{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#E7F0FB; color:#1F5FA8; font-size:12px; font-weight:800; }
.bd-two{ display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:16px; align-items:start; } .bd-two2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .bd-stack{ display:flex; flex-direction:column; }
.bd-tw{ overflow-x:auto; } .bd-tw.short{ max-height:300px; overflow-y:auto; }
.bd-tb{ width:100%; border-collapse:collapse; } .bd-tb th{ text-align:left; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#8A928F; padding:8px 10px; border-bottom:2px solid #EEF1F0; white-space:nowrap; }
.bd-tb td{ padding:12px 10px; border-bottom:1px solid #F3F5F4; font-size:13.5px; vertical-align:middle; } .bd-tb .r{ text-align:right; } .bd-tb td.nm{ font-weight:700; min-width:190px; } .bd-tb td.nm small, .bd-tb td small{ display:block; color:#8A928F; font-weight:500; font-size:12px; margin-top:1px; } .bd-tb small.warn{ color:#9A6410; }
.bd-row{ cursor:pointer; } .bd-row:hover td{ background:#F7FBFA; } .bd-tb tr.void td{ opacity:.5; text-decoration:line-through; } .bd-tb tr.void td:last-child, .bd-tb tr.void td:nth-child(6){ text-decoration:none; } .bd-tb tr.bad td{ background:#FFF7F7; } .bd-tb tr.tot td{ border-top:2px solid #EEF1F0; background:#FAFBFA; }
.bd-usedc{ width:200px; } .mono{ font-variant-numeric:tabular-nums; } .bd-mute{ color:#8A928F; } .bd-mute.sm{ font-size:11.5px; margin-top:4px; } .pad{ padding:20px 4px; } .pad0{ padding:4px 0; }
.bd-bar{ height:9px; background:#EEF1F0; border-radius:99px; overflow:hidden; min-width:120px; } .bd-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#15A897,#0A5A5A); } .bd-bar.amber i{ background:linear-gradient(90deg,#F0B54A,#D9962B); } .bd-bar.red i{ background:linear-gradient(90deg,#F0566B,#D61F3B); }
.bd-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; padding:3px 10px; border-radius:99px; white-space:nowrap; border:0; font-family:inherit; }
.bd-chip.ok{ background:#E6F5EC; color:#12703F; } .bd-chip.warn{ background:#FEF3E2; color:#9A6410; } .bd-chip.bad{ background:#FDECEE; color:#C11A30; } .bd-chip.mute{ background:#F0EEE8; color:#5A645F; } .bd-chip.info{ background:#E7F0FB; color:#1F5FA8; } .bd-chip.btn{ cursor:pointer; } .bd-chip.btn:hover{ filter:brightness(.96); }
.bd-lnk{ color:var(--bd-deep); font-weight:700; font-size:12.5px; text-decoration:none; display:inline-flex; gap:4px; align-items:center; cursor:pointer; } .bd-lnk:hover{ text-decoration:underline; }
.bd-att{ display:flex; gap:11px; padding:11px 0; border-top:1px solid #F1F3F2; font-size:13px; } .bd-att:first-of-type{ border-top:0; } .bd-att .ic{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:17px; background:#E8F5F3; color:var(--bd-teal); }
.bd-att .ic.red{ background:#FDECEE; color:var(--bd-red); } .bd-att .ic.amber{ background:#FEF3E2; color:var(--bd-amber); } .bd-att .ic.blue{ background:#E7F0FB; color:var(--bd-blue); } .bd-att b{ display:block; } .bd-att small{ color:#8A928F; } .bd-att .lk{ margin-top:6px; display:flex; gap:12px; }
.bd-ban{ display:flex; gap:12px; align-items:center; border-radius:16px; padding:13px 18px; margin-bottom:14px; font-size:13.5px; } .bd-ban i{ font-size:22px; } .bd-ban.bad{ background:#FDECEE; border:1px solid #F5C9D0; color:#8F1526; }
.bd-months{ display:flex; gap:8px; align-items:flex-end; padding:6px 4px 0; } .bd-m{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; } .bd-mcol{ height:120px; width:100%; display:flex; align-items:flex-end; } .bd-mcol i{ display:block; width:100%; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,#15A897,#0A5A5A); } .bd-mcol i.z{ background:#EEF1F0; border-radius:3px; }
.bd-m span{ font-size:11px; font-weight:700; color:#8A928F; } .bd-m b{ font-size:10.5px; }
.bd-ic{ border:0; background:transparent; width:30px; height:30px; border-radius:8px; cursor:pointer; color:#5A645F; font-size:16px; } .bd-ic:hover{ background:#F1F3F2; color:#12201D; }
.bd-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; } .bd-filters input, .bd-filters select{ border:1px solid #E3E7E5; border-radius:11px; padding:9px 12px; font:inherit; font-size:13.5px; background:#fff; } .bd-filters input{ flex:1; min-width:200px; }
.bd-li{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid #F1F3F2; font-size:13.5px; } .bd-li:first-of-type{ border-top:0; } .bd-li small{ display:block; color:#8A928F; font-size:12px; }
.bd-grid td.z{ color:#C3CAC7; } .bd-grid th, .bd-grid td{ padding:9px 7px; font-size:12.5px; } .bd-grid td.nm{ min-width:170px; }
.bd-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:70px 20px; color:#6A726F; } .bd-empty > i{ font-size:46px; color:#9CC7C2; } .bd-empty b{ color:#12201D; font-size:17px; } .bd-empty .bd-btn{ margin-top:10px; }
.bd-teamc{ margin-bottom:16px; } .bd-teamh{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:10px; } .bd-teamh h3{ margin:0; } .bd-teamh span{ color:#5A645F; font-size:13px; flex:1; }
/* forms (set-up, dialogs) */
.bd-f{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; font-size:12px; font-weight:700; color:#6A726F; } .bd-f em{ font-weight:500; font-style:normal; color:#98A19D; }
.bd-f input, .bd-f select, .bd-ed input{ border:1px solid #E3E7E5; background:#FCFBF9; border-radius:11px; padding:10px 12px; font:inherit; font-size:14px; color:#12201D; outline:none; width:100%; box-sizing:border-box; } .bd-f input:focus, .bd-f select:focus, .bd-ed input:focus{ border-color:#15A897; background:#fff; }
.bd-fr{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .bd-fr3{ display:grid; grid-template-columns:1fr 1fr 130px; gap:12px; } .bd-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:10px; } .bd-foot.left{ justify-content:flex-start; }
.bd-check{ display:flex; gap:9px; align-items:flex-start; font-size:13px; margin:6px 0 12px; } .bd-ed td{ padding:6px 5px; } .bd-ed input.r{ text-align:right; } .bd-ed th em{ text-transform:none; font-style:normal; font-weight:500; }
.bd-edf{ display:flex; justify-content:space-between; align-items:center; margin:12px 0; } .bd-tot{ font-size:14px; } .bd-tot b{ font-size:17px; }
.bd-drop{ display:flex; flex-direction:column; align-items:center; gap:4px; border:2px dashed #BEE3DC; background:#F4FBF9; border-radius:16px; padding:26px; cursor:pointer; color:#0A5A5A; text-align:center; } .bd-drop.on, .bd-drop:hover{ background:#E8F5F3; border-color:#15A897; } .bd-drop i{ font-size:30px; } .bd-drop span{ font-size:12.5px; color:#6A726F; }
.bd-wz{ margin-top:14px; } .bd-wzf{ display:flex; gap:12px; align-items:center; background:#F4FBF9; border:1px solid #D8EAE5; border-radius:13px; padding:12px 14px; margin-bottom:12px; } .bd-wzf i{ font-size:28px; color:var(--bd-green); } .bd-wzf small{ display:block; color:#6A726F; }
.bd-cols{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; margin-bottom:8px; } .bd-col{ border:1px solid #E3E7E5; border-radius:12px; padding:10px 12px; } .bd-col small{ font-size:10.5px; font-weight:800; color:#8A928F; display:block; margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bd-col select{ width:100%; border:0; background:transparent; font:inherit; font-weight:700; color:var(--bd-deep); outline:none; }
.bd-f.hdr{ max-width:200px; } .bd-impf{ margin-top:12px; display:flex; flex-direction:column; gap:10px; } .bd-modes{ display:flex; flex-direction:column; gap:6px; font-size:13px; } .bd-modes label{ display:flex; gap:8px; align-items:flex-start; } .bd-modes small{ color:#8A928F; display:block; }
.bd-err{ background:#FDECEE; color:#8F1526; border-radius:12px; padding:12px 14px; margin-top:12px; font-size:13.5px; }
.bd-rv{ display:flex; gap:10px; padding:9px 0; border-top:1px solid #F1F3F2; font-size:13px; } .bd-rv:first-child{ border-top:0; } .bd-rv small{ display:block; color:#8A928F; font-size:12px; margin-top:1px; }
.bd-att-box{ margin-top:14px; padding-top:12px; border-top:1px solid #F1F3F2; display:flex; flex-direction:column; gap:8px; align-items:flex-start; } .bd-file{ display:flex; gap:8px; align-items:center; color:var(--bd-deep); font-weight:600; font-size:13px; text-decoration:none; } .bd-file i{ color:var(--bd-green); font-size:18px; }
.bd-ul{ display:flex; flex-direction:column; max-height:55vh; overflow-y:auto; } .bd-ulr{ display:grid; grid-template-columns:auto 1fr auto 210px; gap:12px; align-items:center; padding:10px 4px; border-top:1px solid #F1F3F2; } .bd-ulr:first-child{ border-top:0; } .bd-ult small{ display:block; color:#8A928F; font-size:12px; } .bd-ula{ font-weight:800; } .bd-ulr select{ border:1px solid #E3E7E5; border-radius:10px; padding:8px; font:inherit; font-size:13px; }
.bd-apr-s{ background:#F4FBF9; border:1px solid #D8EAE5; border-radius:12px; padding:11px 14px; margin-bottom:12px; font-size:14px; } .bd-apr-s small{ display:block; color:#6A726F; font-size:12.5px; }
/* generic dialog */
.bd-mo{ position:fixed; inset:0; z-index:9000; display:grid; place-items:center; background:rgba(14,28,26,.5); padding:16px; backdrop-filter:blur(2px); }
.bd-md{ width:min(480px,100%); max-height:90vh; overflow:auto; background:#fff; border-radius:20px; padding:20px 22px; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); } .bd-md.wide{ width:min(820px,100%); }
.bd-mh{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; } .bd-mh h3{ margin:0; font-size:18px; } .bd-mf{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
/* the "Add a cost" dialog */
.bx-ov{ position:fixed; inset:0; z-index:9100; display:grid; place-items:center; background:rgba(14,28,26,.55); padding:16px; backdrop-filter:blur(2px); overflow:auto; }
.bx{ width:min(1020px,100%); max-height:94vh; display:grid; grid-template-columns:minmax(0,1fr) 330px; background:#F5F4F1; border-radius:22px; overflow:hidden; box-shadow:0 40px 90px -24px rgba(0,0,0,.6); }
.bx-main{ background:#fff; padding:22px 24px; overflow-y:auto; max-height:94vh; } .bx-side{ padding:18px; overflow-y:auto; max-height:94vh; display:flex; flex-direction:column; gap:12px; }
.bx-h{ display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; } .bx-h h2{ margin:2px 0; font-size:22px; } .bx-h p{ margin:0; color:#6A726F; font-size:13px; } .bx-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#0F8080; display:flex; gap:6px; align-items:center; }
.bx-x{ border:0; background:#F1F3F2; width:34px; height:34px; border-radius:10px; cursor:pointer; font-size:17px; align-self:flex-start; } .bx-sec{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:14px; margin:18px 0 10px; } .bx-n{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#E7F0FB; color:#1F5FA8; font-size:12px; }
.bx-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .bx-f{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; font-size:12px; font-weight:700; color:#6A726F; } .bx-f em{ font-weight:500; font-style:normal; color:#98A19D; }
.bx-f input, .bx-f select{ border:1px solid #E3E7E5; background:#FCFBF9; border-radius:11px; padding:11px 13px; font:inherit; font-size:14px; color:#12201D; outline:none; width:100%; box-sizing:border-box; } .bx-f input:focus, .bx-f select:focus{ border-color:#15A897; background:#fff; } .bx-file{ padding:8px 10px !important; font-size:13px !important; }
.bx-linkrow{ display:flex; gap:8px; } .bx-linkrow select{ flex:0 0 120px; } .bx-linkrow input{ flex:1; min-width:0; } .bx-lmsg{ font-size:12px; color:#B4182D; margin-top:4px; min-height:0; }
.bx-chip{ display:inline-flex; align-items:center; gap:8px; background:#E8F5F3; color:#0A5A5A; border:1px solid #BEE3DC; border-radius:99px; padding:8px 8px 8px 13px; font-size:13px; font-weight:700; } .bx-chip button{ border:0; background:#fff; width:22px; height:22px; border-radius:50%; cursor:pointer; }
.bx-dir{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#F4FBF9; border:1px solid #D8EAE5; border-radius:13px; padding:12px 14px; margin-bottom:12px; } .bx-dir-t{ flex:1; min-width:180px; font-size:13.5px; } .bx-dir-t small{ display:block; color:#6A726F; font-size:12px; margin-top:2px; font-weight:500; } .bx-dir select{ border:1px solid #D8EAE5; border-radius:10px; padding:8px; font:inherit; font-size:13px; background:#fff; }
.bx-sw{ position:relative; width:44px; height:25px; flex:0 0 auto; } .bx-sw input{ opacity:0; position:absolute; inset:0; cursor:pointer; z-index:2; margin:0; } .bx-sw i{ position:absolute; inset:0; background:#CBD3D0; border-radius:99px; transition:background .15s; } .bx-sw i::after{ content:''; position:absolute; left:3px; top:3px; width:19px; height:19px; border-radius:50%; background:#fff; transition:transform .15s; } .bx-sw input:checked + i{ background:#15A897; } .bx-sw input:checked + i::after{ transform:translateX(19px); }
.bx-hint{ display:flex; gap:8px; background:#F3F5F4; border-radius:12px; padding:11px 13px; font-size:12.5px; color:#5A645F; margin:6px 0 12px; } .bx-err{ background:#FDECEE; color:#8F1526; border-radius:11px; padding:10px 13px; font-size:13px; margin-bottom:8px; } .bx-err[hidden]{ display:none; }
.bx-foot{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; } .bx-btn{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:14px; font-weight:700; padding:11px 18px; border-radius:12px; border:1px solid #D5E4E1; background:#fff; color:#0A5A5A; cursor:pointer; } .bx-btn.sm{ padding:8px 12px; font-size:12.5px; } .bx-btn.primary{ background:linear-gradient(135deg,#15A897,#0A5A5A); color:#fff; border-color:transparent; box-shadow:0 10px 22px -12px rgba(10,90,90,.8); } .bx-btn:disabled{ opacity:.6; }
.bx-spin{ animation:twspin 1s linear infinite; }
.bx-card{ position:relative; background:#fff; border:1px solid #EAEDEB; border-radius:16px; padding:14px 16px 14px 18px; overflow:hidden; } .bx-card::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg,#15A897,#0A5A5A); } .bx-card[hidden]{ display:none; }
.bx-card h3{ margin:0 0 8px; font-size:14px; display:flex; gap:7px; align-items:center; } .bx-card h3 i{ color:#D9962B; } .bx-mute{ color:#8A928F; font-size:12.5px; margin:0; } .bx-sub{ color:#6A726F; font-size:12.5px; margin-bottom:8px; }
.bx-sg{ display:flex; gap:10px; align-items:flex-start; font-size:13px; } .bx-sg small{ display:block; color:#6A726F; font-size:12px; margin-top:2px; } .bx-pill{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; padding:3px 9px; border-radius:99px; white-space:nowrap; } .bx-pill.ok{ background:#E6F5EC; color:#12703F; } .bx-pill.info{ background:#E7F0FB; color:#1F5FA8; }
.bx-use{ margin-top:8px; border:1px solid #BEE3DC; background:#E8F5F3; color:#0A5A5A; font:inherit; font-size:12.5px; font-weight:800; border-radius:99px; padding:5px 12px; cursor:pointer; } .bx-warn{ display:flex; gap:8px; background:#FEF3E2; color:#7A5A1E; border-radius:11px; padding:10px 12px; margin-top:10px; font-size:12.5px; line-height:1.45; } .bx-warn i{ font-size:17px; flex:0 0 auto; }
.bx-bar{ height:9px; background:#EEF1F0; border-radius:99px; overflow:hidden; } .bx-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#15A897,#0A5A5A); } .bx-bar.red i{ background:linear-gradient(90deg,#F0566B,#D61F3B); } .bx-bar.amber i{ background:linear-gradient(90deg,#F0B54A,#D9962B); }
.bx-meter{ display:flex; justify-content:space-between; margin-top:8px; font-size:13px; color:#6A726F; } .bx-meter b.over{ color:#C11A30; } .bx-meter b.watch{ color:#9A6410; } .bx-note{ margin-top:10px; font-size:12.5px; background:#FEF3E2; color:#7A5A1E; border-radius:11px; padding:10px 12px; }
.bx-kn{ display:flex; gap:8px; font-size:12.5px; margin-top:7px; } .bx-kn .ok{ color:#1C8A5E; } .bx-kn .bad{ color:#C11A30; }
/* the cost card in the expanded ticket view */
.tw-cost{ background:#F7FAF9; border:1px solid #E3ECEA; border-radius:13px; padding:12px 14px; margin-bottom:8px; } .tw-cost-t{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; } .tw-cost-t b{ font-size:19px; } .tw-cost p{ margin:4px 0 0; font-size:13px; } .tw-cost small{ color:#8A928F; font-size:12px; display:block; margin-top:3px; }
.tw-meter{ margin-top:12px; font-size:12.5px; } .tw-meter > div:first-child{ display:flex; justify-content:space-between; margin-bottom:6px; } .tw-meter b.over{ color:#C11A30; } .tw-meter b.watch{ color:#9A6410; }
.tw-bar{ height:8px; background:#EEF1F0; border-radius:99px; overflow:hidden; } .tw-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#15A897,#0A5A5A); } .tw-bar.red i{ background:linear-gradient(90deg,#F0566B,#D61F3B); } .tw-bar.amber i{ background:linear-gradient(90deg,#F0B54A,#D9962B); }
@media (max-width:1000px){ .bd-two{ grid-template-columns:1fr; } .bd-kp{ grid-template-columns:repeat(3,minmax(0,1fr)); } .bd-kp.four{ grid-template-columns:repeat(2,minmax(0,1fr)); } .bd-two2, .bd-fr, .bd-fr3{ grid-template-columns:1fr; } .bx{ grid-template-columns:1fr; } .bx-side{ max-height:none; flex-direction:column; } .bx-main{ max-height:none; } .bd-ulr{ grid-template-columns:auto 1fr auto; } .bd-ulr select{ grid-column:2 / 4; } .bd-usedc{ width:130px; } }
@media (max-width:640px){ .bd-hd h1{ font-size:22px; } .bd-kp{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .bd-k{ padding:11px 12px 11px 14px; gap:9px; } .bd-k .ic{ display:none; } .bd-k b{ font-size:18px; } .bd-tabs{ overflow-x:auto; flex-wrap:nowrap; } .bd-tabs > a{ flex:0 0 auto; padding:8px 12px; } .bd-seg{ margin-left:8px; flex:0 0 auto; } .bx-row{ grid-template-columns:1fr; } .bd-card{ padding:14px 14px 14px 18px; } .bd-months b{ font-size:9px; } .bd-acts{ width:100%; } .bd-acts .bd-btn.primary{ flex:1; } }

/* ---- review fixes ---- */
.bd-hd > div:first-child{ flex:1 1 320px; min-width:0; }
.bd-k{ gap:10px; padding:12px 12px 12px 16px; } .bd-k > div{ min-width:0; } .bd-k b{ font-size:19px; white-space:nowrap; } .bd-k .ic{ width:36px; height:36px; font-size:18px; }
.bd-col select{ -webkit-appearance:none; appearance:none; background:transparent !important; border:0 !important; box-shadow:none !important; padding:2px 0 !important; width:100%; }
.bd-two .bd-stack .bd-fr{ grid-template-columns:1fr; }
.bd-lnk .ti-chevron-right{ font-size:18px; }
@media (max-width:1500px){
  .bd-two{ grid-template-columns:minmax(0,1fr) 300px; gap:12px; }
  .bd-usedc{ width:120px; } .bd-bar{ min-width:80px; } .bd-tb td{ padding:10px 7px; } .bd-tb th{ padding:8px 7px; } .bd-tb td.nm{ min-width:150px; }
}
@media (max-width:1180px){ .bd-two{ grid-template-columns:1fr; } }
@media (max-width:640px){
  .bd-sub{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; }
  .bd-kp > :last-child:nth-child(odd){ grid-column:1 / -1; }
}
.bd-grid th, .bd-grid td{ padding:8px 5px !important; font-size:12px !important; } .bd-grid td.nm{ min-width:120px !important; } .bd-grid th:first-child{ padding-left:10px !important; }

/* ============================================================
   Employee "My requests" screens (index.php = IT, admin_requests.php = Admin & Logistics)
   Same ideas as the staff dashboards: a slimmer page header, a conversation that fills the screen,
   a compact header with the status on it, approvals as a slim bar beside the reply box, and on a phone a
   clean list → full-screen conversation flow. Scoped with .emp-pg so no other page changes.
   ============================================================ */
.emp-pg .e-page-head{ padding:14px 20px; margin-bottom:14px; gap:14px; min-height:0; }
.emp-pg .e-page-head-ico{ width:42px; height:42px; border-radius:12px; } .emp-pg .e-page-head-ico i{ font-size:21px; }
.emp-pg .e-page-head h1{ font-size:20px; } .emp-pg .e-page-head p{ font-size:13px; margin-top:2px; }
.emp-pg .ar-tabs{ margin-bottom:12px; } .emp-pg .emp-toolbar{ margin-bottom:10px; }
.emp-pg .emp-tk{ gap:14px; align-items:flex-start; min-height:0; }
.emp-pg .emp-list{ width:clamp(320px,34%,400px); max-height:calc(100vh - 120px); }
.emp-pg .emp-req{ padding:12px 14px; } .emp-pg .emp-req .er-upd{ margin-top:9px; padding-top:9px; }
.emp-pg .emp-convo{ max-height:none; min-height:300px; }
.emp-pg .emp-tk.show-convo .emp-convo{ height:calc(100vh - 104px); min-height:460px; }
.emp-pg .emp-chd{ padding:11px 16px; gap:10px; }
.emp-pg .emp-chd .er-ic{ width:34px; height:34px; border-radius:10px; font-size:17px; }
.emp-pg .emp-chd .who b{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .emp-pg .emp-chd .who small{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.emp-pg .emp-st{ flex:0 0 auto; }
.emp-pg .emp-ban{ margin:10px 14px 0; padding:8px 12px; border-radius:11px; gap:9px; } .emp-pg .emp-ban i{ font-size:17px; } .emp-pg .emp-ban span{ font-size:12.5px; }
.emp-pg .emp-msgs{ padding:12px 16px; gap:11px; }
.emp-pg .tap-mount{ flex:0 0 auto; margin:0; } .emp-pg .tap-mount:empty{ display:none; }
.emp-pg .tap-mount .tap{ max-height:40vh; overflow:auto; margin:0; border-radius:0; border-left:0; border-right:0; box-shadow:none; }
.emp-pg .emp-composer{ padding:10px 14px; }
/* floating helpers must not sit on the reply box while a conversation is open */
body.emp-convo-open .ar-chat-nudge, body.emp-convo-open #ar-install-bar{ display:none !important; }
body.emp-convo-open .ar-chat-launcher{ width:46px; height:46px; right:5px; bottom:14px; }

@media (max-width:900px){
  body.emp-convo-open .emp-pg .e-page-head, body.emp-convo-open .emp-pg .ar-tabs, body.emp-convo-open .emp-pg .emp-toolbar{ display:none; }
  .emp-pg .emp-list{ width:100%; max-height:none; }
  .emp-pg .emp-tk.show-convo .emp-convo{ display:flex; height:calc(100vh - 192px); height:calc(100dvh - 192px); min-height:420px; border-radius:18px; }
  body.emp-convo-open .ar-chat-launcher{ display:none !important; }
}
@media (max-width:700px){
  .emp-pg .e-page-head{ padding:10px 14px; margin-bottom:10px; border-radius:16px; } .emp-pg .e-page-head p{ display:none; } .emp-pg .e-page-head h1{ font-size:17px; } .emp-pg .e-page-head-ico{ width:34px; height:34px; }
  .emp-pg .emp-chd{ padding:9px 10px; gap:8px; } .emp-pg .emp-chd .er-ic{ display:none; }
  .emp-pg .emp-st{ font-size:11px; padding:3px 9px; } .emp-pg .emp-chd .who b{ font-size:14.5px; }
  .emp-pg .emp-msgs{ padding:10px 12px; } .emp-pg .emp-composer{ padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px)); }
}

/* phones: the Back arrow already closes the conversation, so the ✕ goes; the first-time Expand tip is too wide for a phone */
@media (max-width:900px){ .emp-pg #emp-close{ display:none; } }
@media (max-width:700px){
  .tkt-expand[data-tip]::after, .tkt-expand[data-tip]::before, .emp-expand[data-tip]::after, .emp-expand[data-tip]::before{ display:none; }
  .emp-pg .emp-chd{ gap:6px; } .emp-pg .emp-chd .who{ min-width:0; flex:1 1 0; }
}

/* Ticket forms — sub-category and "Where is the issue?" (floor + office) */
.tm-loc{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .tm-fields .tm-req{ color:#C11A30; font-weight:600; font-size:12px; margin-left:4px; }
.tm-cf .tm-loc select, .tm-cf #tm-sub{ width:100%; } .tm-cf{ margin-bottom:6px; }
@media (max-width:560px){ .tm-loc{ grid-template-columns:1fr; } }

/* where the issue is — shown on lists and headers */
.tkt-lloc{ display:flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; color:#0A5A5A; margin-top:2px; } .tkt-lloc i{ font-size:13px; }
.tkt-chip.loc{ color:#0A5A5A; font-weight:700; } .tkt-sub{ font-weight:600; color:#6A726F; font-size:.8em; }
.tw-subc{ font-weight:600; color:#6A726F; font-size:.78em; }

/* ============================================================
   Ticket setup (admin/ticket_setup.php)
   ============================================================ */
.tsx .ts-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .tsx .ts-h h3 small{ font-weight:600; color:#8A928F; font-size:12px; margin-left:6px; }
.ts-add{ display:flex; gap:8px; margin:0 0 12px; } .ts-add input{ flex:1; min-width:0; border:1px solid #E3E7E5; background:#FCFBF9; border-radius:11px; padding:9px 12px; font:inherit; font-size:13.5px; outline:none; } .ts-add input:focus{ border-color:#15A897; background:#fff; } .ts-add.sm{ margin:10px 0 0; } .ts-add.sm input{ padding:7px 11px; font-size:13px; }
.ts-cat, .ts-floor{ border:1px solid #EDF0EF; border-radius:14px; margin-bottom:10px; background:#fff; overflow:hidden; } .ts-cat.off, .ts-floor.off{ background:#FAFAF8; } .ts-cat.off .ts-cname, .ts-floor.off .ts-cname{ color:#98A19D; text-decoration:line-through; }
.ts-ch, .ts-fh{ display:flex; align-items:center; gap:10px; padding:11px 14px; } .ts-ch{ cursor:pointer; } .ts-ch:hover{ background:#F7FBFA; } .ts-fh{ background:#F7FAF9; } .ts-fh > i{ color:#0F8080; font-size:18px; }
.ts-chev{ color:#8A928F; transition:transform .15s; } .ts-cat.open .ts-chev{ transform:rotate(90deg); } .ts-cname{ font-weight:700; font-size:14px; } .ts-cmeta{ font-size:12px; color:#8A928F; flex:1; }
.ts-cact{ display:flex; align-items:center; gap:6px; margin-left:auto; } .ts-ci{ border:0; background:transparent; width:28px; height:28px; border-radius:8px; cursor:pointer; color:#5A645F; font-size:15px; } .ts-ci:hover{ background:#EEF1F0; color:#12201D; }
.ts-cb{ display:none; padding:4px 14px 14px; border-top:1px solid #F1F3F2; } .ts-cat.open .ts-cb{ display:block; } .ts-floor .ts-chips{ padding:10px 14px 0; } .ts-floor .ts-add.sm{ padding:0 14px 14px; margin:10px 0 0; }
.ts-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; } .ts-chip{ display:inline-flex; align-items:center; background:#E8F5F3; border:1px solid #CFE6E2; border-radius:99px; padding:2px 4px 2px 4px; } .ts-chip.off{ background:#F1F1EE; border-color:#E3E3DE; } .ts-chip.off .ts-cn{ color:#98A19D; text-decoration:line-through; }
.ts-cn{ border:0; background:transparent; font:inherit; font-size:13px; font-weight:600; color:#0A5A5A; padding:4px 6px 4px 10px; cursor:pointer; border-radius:99px; } .ts-chip .ts-ci{ width:22px; height:22px; font-size:13px; border-radius:50%; }
.ts-none{ color:#8A928F; font-size:12.5px; margin:10px 0 0; } .ts-mv{ display:inline-flex; flex-direction:column; } .ts-mv button{ border:0; background:transparent; height:14px; width:22px; line-height:1; cursor:pointer; color:#8A928F; padding:0; font-size:13px; } .ts-mv button:hover{ color:#0A5A5A; }
.ts-sw{ position:relative; width:38px; height:22px; flex:0 0 auto; display:inline-block; } .ts-sw input{ opacity:0; position:absolute; inset:0; margin:0; cursor:pointer; z-index:2; } .ts-sw i{ position:absolute; inset:0; background:#CBD3D0; border-radius:99px; transition:background .15s; } .ts-sw i::after{ content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .15s; } .ts-sw input:checked + i{ background:#15A897; } .ts-sw input:checked + i::after{ transform:translateX(16px); }
.ts-rule{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid #F1F3F2; cursor:pointer; } .ts-rule:first-of-type{ border-top:0; } .ts-rule small{ display:block; color:#8A928F; font-size:12px; margin-top:2px; font-weight:500; } .ts-rule b{ font-size:14px; }
@media (max-width:640px){ .ts-cmeta{ display:none; } .ts-ch, .ts-fh{ padding:10px; gap:8px; } }

/* Ticket setup: give the floors column room, and let a floor's row wrap instead of clipping its buttons */
.tsx .bd-two{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
.tsx .ts-fh{ flex-wrap:wrap; row-gap:2px; } .tsx .ts-fh .ts-cname, .tsx .ts-ch .ts-cname{ white-space:nowrap; }
@media (max-width:1000px){ .tsx .bd-two{ grid-template-columns:1fr; } }

/* ============================================================
   Renewals (admin/renewals.php) — builds on the Budget kit (.bd-*)
   ============================================================ */
.rnx .rn-ks{ display:block; font-size:11.5px; color:#8A928F; margin-top:1px; }
.rn-main{ padding-bottom:10px; } .rn-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.rn-bar input{ flex:1; min-width:220px; border:1px solid #E3E7E5; background:#FCFBF9; border-radius:11px; padding:10px 13px; font:inherit; font-size:13.5px; outline:none; } .rn-bar input:focus{ border-color:#15A897; background:#fff; }
.rn-bar select{ border:1px solid #E3E7E5; background:#fff; border-radius:11px; padding:10px 12px; font:inherit; font-size:13.5px; } .rn-views{ margin-left:0; }
.rn-chips{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; } .rn-chips button{ border:1px solid #E3E7E5; background:#fff; border-radius:99px; padding:6px 13px; font:inherit; font-size:12.5px; font-weight:700; color:#5A645F; cursor:pointer; } .rn-chips button:hover{ background:#F3F6F5; }
.rn-chips button.on{ background:#0A5A5A; color:#fff; border-color:#0A5A5A; } .rn-chips .rn-types{ margin-left:auto; border-style:dashed; color:#0A5A5A; }
.rn-t{ display:flex; gap:11px; align-items:center; min-width:0; } .rn-t small{ display:block; color:#8A928F; font-weight:500; font-size:12px; margin-top:1px; }
.rn-ic{ flex:0 0 auto; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:19px; background:#E8F5F3; color:#0F8080; }
.rn-ic.st-overdue{ background:#FDECEE; color:#C11A30; } .rn-ic.st-due30{ background:#FEF3E2; color:#C97E0F; } .rn-ic.st-due90{ background:#E7F0FB; color:#2E7FD0; } .rn-ic.st-cancelled{ background:#F0EEE8; color:#98A19D; }
.rn-tb td{ padding:11px 10px; } .rn-tb td.nm{ min-width:260px; }
.rn-cards{ display:none; } .rn-card{ border:1px solid #EDF0EF; border-radius:14px; padding:12px 14px; margin-bottom:9px; cursor:pointer; background:#fff; } .rn-card:hover{ background:#F7FBFA; } .rn-card-b{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:9px; font-size:12.5px; flex-wrap:wrap; }
.rn-mg{ margin-bottom:16px; } .rn-mh{ display:flex; justify-content:space-between; align-items:baseline; padding:6px 4px 8px; border-bottom:2px solid #EEF1F0; margin-bottom:4px; } .rn-mh b{ font-size:15px; } .rn-mh span{ color:#8A928F; font-size:12.5px; }
.rn-mrow{ display:flex; align-items:center; gap:12px; padding:10px 6px; border-bottom:1px solid #F3F5F4; cursor:pointer; flex-wrap:wrap; } .rn-mrow:hover{ background:#F7FBFA; } .rn-mt{ flex:1; min-width:180px; } .rn-mt small{ display:block; color:#8A928F; font-size:12px; } .rn-md{ font-weight:700; font-size:13px; min-width:92px; } .rn-mc{ min-width:84px; text-align:right; font-weight:700; }
/* the detail panel */
.rn-dov{ position:fixed; inset:0; z-index:9000; background:rgba(14,28,26,.45); backdrop-filter:blur(2px); display:flex; justify-content:flex-end; } body.rn-lock{ overflow:hidden; }
.rn-dr{ width:min(560px,100%); height:100%; background:#fff; overflow-y:auto; padding:20px 22px 40px; box-shadow:-30px 0 70px -30px rgba(0,0,0,.5); animation:rnIn .2s ease; } @keyframes rnIn{ from{ transform:translateX(30px); opacity:0; } to{ transform:none; opacity:1; } }
.rn-dh{ display:flex; align-items:center; gap:13px; } .rn-dt{ flex:1; min-width:0; } .rn-dt h2{ margin:0; font-size:19px; line-height:1.25; } .rn-dt span{ color:#6A726F; font-size:13px; }
.rn-dstate{ display:flex; align-items:center; gap:12px; margin:14px 0 12px; font-size:13.5px; flex-wrap:wrap; } .rn-dact{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; padding-bottom:14px; border-bottom:1px solid #F1F3F2; }
.rn-ds{ margin-top:18px; } .rn-ds h4{ margin:0 0 8px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#8A928F; }
.rn-fr{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid #F5F7F6; font-size:13.5px; } .rn-fr span{ color:#6A726F; } .rn-fr b{ text-align:right; font-weight:700; } .rn-fr a{ color:#0A5A5A; }
.rn-note{ background:#F4FBF9; border:1px solid #D8EAE5; border-radius:12px; padding:11px 14px; font-size:13px; line-height:1.55; margin:0; } .rn-note i{ color:#0F8080; } .rn-note span{ color:#6A726F; }
.rn-ht td, .rn-ht th{ padding:8px 6px; font-size:12.5px; } .rn-ht small{ display:block; color:#8A928F; } .rn-up{ color:#C11A30; font-weight:800; } .rn-dn{ color:#1C8A5E; font-weight:800; }
.rn-up-b{ margin-top:8px; display:inline-flex; cursor:pointer; } .rn-delta{ min-height:20px; font-size:12.5px; color:#6A726F; margin:-4px 0 8px; }
.rn-rem{ display:flex; gap:7px; flex-wrap:wrap; } .rn-rem button{ border:1px solid #E3E7E5; background:#fff; border-radius:99px; padding:6px 13px; font:inherit; font-size:12.5px; font-weight:700; color:#6A726F; cursor:pointer; min-width:44px; } .rn-rem button.on{ background:#E8F5F3; color:#0A5A5A; border-color:#15A897; }
.rn-qg{ margin-bottom:14px; } .rn-qg h5{ margin:0 0 7px; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:#8A928F; } .rn-qc{ display:flex; flex-wrap:wrap; gap:7px; }
.rn-qc button{ border:1px solid #D5E4E1; background:#fff; color:#0A5A5A; border-radius:99px; padding:7px 13px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; } .rn-qc button:hover{ background:#E8F5F3; border-color:#15A897; } .rn-qc button.have{ background:#F1F4F3; color:#98A19D; border-style:dashed; }
.rn-tl{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; } .rn-ti{ display:flex; align-items:center; gap:8px; border:1px solid #EDF0EF; border-radius:12px; padding:6px 8px 6px 12px; } .rn-ti > i{ color:#0F8080; font-size:18px; } .rn-ti.off .rn-tn{ color:#98A19D; text-decoration:line-through; }
.rn-tn{ flex:1; text-align:left; border:0; background:transparent; font:inherit; font-size:14px; font-weight:600; cursor:pointer; padding:6px 0; }
@media (max-width:900px){ .rnx .rn-tb{ display:none; } .rnx .rn-cards{ display:block; } .rn-chips .rn-types{ margin-left:0; } }
@media (max-width:640px){ .rn-dr{ padding:16px 16px 40px; } .rn-bar select{ flex:1; } }
.rn-dact .bd-btn{ padding:9px 12px; font-size:13px; } .rn-dact{ gap:7px; } .rn-sm{ color:#8A928F; font-weight:600; } .rn-fr small{ margin-left:6px; }

/* ============================================================
   "How do you want to continue?" (choose_mode.php)
   ============================================================ */
.cm-body{ margin:0; min-height:100vh; font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; background:radial-gradient(1200px 600px at 15% 0%, #CFE9E4 0%, transparent 60%), radial-gradient(900px 500px at 100% 100%, #F6D8DC 0%, transparent 55%), #F5F4F1; color:#161A19; }
.cm-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.cm-card{ width:min(560px,100%); background:#fff; border-radius:26px; padding:34px 34px 26px; box-shadow:0 40px 90px -30px rgba(10,90,90,.45), 0 0 0 1px rgba(15,128,128,.08); position:relative; overflow:hidden; }
.cm-card::before{ content:''; position:absolute; left:0; right:0; top:0; height:6px; background:linear-gradient(90deg,#15A897,#0A5A5A); }
.cm-logo{ display:block; margin:0 auto 10px; } .cm-card h1{ margin:0; text-align:center; font-size:26px; letter-spacing:-.02em; } .cm-sub{ margin:8px auto 18px; text-align:center; color:#5A645F; font-size:14.5px; line-height:1.55; max-width:420px; }
.cm-access{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; justify-content:center; background:#F4FBF9; border:1px solid #D8EAE5; border-radius:14px; padding:10px 12px; margin-bottom:16px; } .cm-access > span{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8A928F; margin-right:4px; }
.cm-chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:4px 11px; border-radius:99px; background:#E8F5F3; color:#0A5A5A; } .cm-chip.team{ background:#E7F0FB; color:#1F5FA8; } .cm-chip.sa{ background:#FDECEE; color:#B4182D; }
.cm-modes{ display:flex; flex-direction:column; gap:10px; }
.cm-mode{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; font:inherit; background:#fff; border:1.5px solid #D9E3E0; border-radius:16px; padding:14px 16px; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s; position:relative; }
.cm-mode:hover, .cm-mode:focus-visible{ border-color:#15A897; box-shadow:0 12px 28px -18px rgba(10,90,90,.7); transform:translateY(-1px); outline:none; }
.cm-ic{ flex:0 0 auto; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:23px; background:linear-gradient(135deg,#15A897,#0A5A5A); color:#fff; } .cm-mode.emp .cm-ic{ background:#E8F5F3; color:#0A5A5A; }
.cm-tx{ flex:1; min-width:0; } .cm-tx b{ display:block; font-size:15.5px; } .cm-tx small{ display:block; color:#6A726F; font-size:12.5px; line-height:1.45; margin-top:2px; }
.cm-go{ color:#8A928F; font-size:19px; } .cm-mode:hover .cm-go{ color:#0F8080; } .cm-now{ position:absolute; top:9px; right:12px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#12703F; background:#E6F5EC; border-radius:99px; padding:2px 8px; } .cm-mode.cur{ border-color:#15A897; background:#F7FCFB; }
.cm-rem{ display:flex; gap:9px; align-items:center; justify-content:center; font-size:13px; color:#5A645F; margin:16px 0 4px; cursor:pointer; } .cm-rem input{ width:17px; height:17px; accent-color:#0F8080; }
.cm-foot{ margin:12px 0 0; text-align:center; font-size:12.5px; color:#8A928F; } .cm-foot a{ color:#0A5A5A; font-weight:700; text-decoration:none; }
@media (max-width:520px){ .cm-card{ padding:26px 18px 20px; border-radius:20px; } .cm-card h1{ font-size:22px; } .cm-mode{ padding:12px; gap:11px; } .cm-ic{ width:40px; height:40px; font-size:20px; } }

/* ============================================================
   Access (admin/access.php) — People · Roles · Approvals. Big, clear tick-boxes; nothing overlaps.
   ============================================================ */
.acx .ac-tabs em{ font-style:normal; font-size:11px; font-weight:800; background:#EEF1F0; color:#5A645F; border-radius:99px; padding:1px 8px; margin-left:4px; } .acx .ac-tabs a.on em{ background:rgba(255,255,255,.22); color:#fff; }
.ac-split{ display:grid; grid-template-columns:minmax(300px,390px) minmax(0,1fr); gap:16px; align-items:start; }
.ac-listcard{ background:#fff; border:1px solid #EAEDEB; border-radius:18px; box-shadow:0 12px 30px -24px rgba(18,32,29,.35); overflow:hidden; position:sticky; top:84px; max-height:calc(100vh - 100px); display:flex; flex-direction:column; }
.ac-lt{ padding:14px 14px 10px; border-bottom:1px solid #F1F3F2; } .ac-search{ position:relative; } .ac-search i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#8A928F; font-size:17px; }
.ac-search input{ width:100%; box-sizing:border-box; border:1px solid #E3E7E5; background:#FCFBF9; border-radius:12px; padding:10px 12px 10px 38px; font:inherit; font-size:13.5px; outline:none; } .ac-search input:focus{ border-color:#15A897; background:#fff; }
.ac-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; } .ac-chips button{ border:1px solid #E3E7E5; background:#fff; border-radius:99px; padding:5px 12px; font:inherit; font-size:12px; font-weight:700; color:#5A645F; cursor:pointer; } .ac-chips button:hover{ background:#F3F6F5; } .ac-chips button.on{ background:#0A5A5A; color:#fff; border-color:#0A5A5A; }
.ac-sel3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-top:8px; } .ac-sel3 select{ min-width:0; border:1px solid #E3E7E5; background:#fff; border-radius:10px; padding:7px 8px; font:inherit; font-size:12px; color:#3B4642; }
.ac-bulk{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 14px; background:#E8F5F3; border-bottom:1px solid #CFE6E2; } .ac-bulk-t{ font-size:13px; } .ac-bulk-t b{ font-size:15px; } .ac-bulk-t a{ color:#0A5A5A; font-weight:700; } .ac-bulk-a{ display:flex; gap:6px; align-items:center; }
.ac-rows{ overflow-y:auto; flex:1; min-height:120px; padding:6px; }
.ac-row{ display:flex; align-items:center; gap:11px; padding:10px 10px; border-radius:13px; cursor:pointer; border:1.5px solid transparent; } .ac-row:hover{ background:#F7FBFA; } .ac-row.on{ background:#E8F5F3; border-color:#9ED6CD; }
.ac-pick{ position:relative; flex:0 0 auto; display:grid; place-items:center; width:26px; height:34px; cursor:pointer; } .ac-pick input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; width:100%; height:100%; }
.ac-box{ flex:0 0 auto; width:24px; height:24px; box-sizing:border-box; border-radius:8px; border:2px solid #B2C0BD; display:grid; place-items:center; background:#fff; transition:background .15s, border-color .15s, box-shadow .15s; } .ac-box.sm{ width:20px; height:20px; border-radius:6px; }
.ac-box svg{ width:15px; height:15px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:22; stroke-dashoffset:22; transition:stroke-dashoffset .18s ease; }
input:checked + .ac-box{ background:linear-gradient(135deg,#15A897,#0A5A5A); border-color:#0A5A5A; } input:checked + .ac-box svg{ stroke-dashoffset:0; } input:focus-visible + .ac-box{ box-shadow:0 0 0 4px rgba(21,168,151,.28); }
.ac-av{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:13px; letter-spacing:.02em; } .ac-av.lg{ width:56px; height:56px; font-size:19px; } .ac-av.xs{ width:24px; height:24px; font-size:9.5px; }
.ac-who{ min-width:0; flex:1; } .ac-who b{ display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ac-who small{ display:block; color:#8A928F; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; } .ac-tags em{ font-style:normal; font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:99px; background:#F0EEE8; color:#5A645F; } .ac-tags em.st{ background:#E7F0FB; color:#1F5FA8; } .ac-tags em.sa{ background:#FDECEE; color:#B4182D; } .ac-tags em.emp{ background:#F3F5F4; color:#8A928F; } .ac-tags em.more{ background:#fff; border:1px solid #E3E7E5; }
.ac-more{ text-align:center; color:#8A928F; font-size:12px; padding:10px; }
.ac-panel{ background:#fff; border:1px solid #EAEDEB; border-radius:18px; box-shadow:0 12px 30px -24px rgba(18,32,29,.35); padding:22px; min-width:0; }
.ac-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:70px 24px; color:#6A726F; } .ac-empty > i{ font-size:46px; color:#9CC7C2; } .ac-empty b{ color:#12201D; font-size:17px; } .ac-empty span{ max-width:340px; line-height:1.55; font-size:13.5px; } .ac-empty.sm{ padding:30px 10px; } .ac-empty.sm > i{ font-size:30px; }
.ac-ph{ display:flex; align-items:center; gap:15px; margin-bottom:16px; } .ac-pn h2{ margin:0; font-size:21px; display:flex; align-items:center; gap:8px; } .ac-pn span{ color:#5A645F; font-size:13.5px; display:block; } .ac-pn small{ color:#8A928F; font-size:12.5px; display:block; margin-top:1px; } .ac-you{ font-size:10.5px; font-weight:800; background:#E8F5F3; color:#0A5A5A; padding:2px 9px; border-radius:99px; }
.ac-back{ display:none; } .ac-note{ background:#FEF3E2; color:#7A5A1E; border-radius:12px; padding:11px 14px; font-size:13px; margin-bottom:14px; display:flex; gap:9px; align-items:center; }
.ac-card{ border:1px solid #EDF0EF; border-radius:16px; padding:18px 18px 16px; margin-bottom:14px; background:#fff; }
.ac-ct1{ display:flex; gap:13px; align-items:flex-start; margin-bottom:14px; } .ac-ct1 h3{ margin:1px 0 2px; font-size:15.5px; } .ac-ct1 p{ margin:0; color:#6A726F; font-size:13px; line-height:1.5; }
.ac-n{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:#E7F0FB; color:#1F5FA8; display:grid; place-items:center; font-size:13px; font-weight:800; } .ac-n.sa{ background:#FDECEE; color:#B4182D; font-size:15px; }
/* the tick-box row — used everywhere */
.ac-cb{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1.5px solid #E3E9E7; border-radius:14px; cursor:pointer; background:#fff; position:relative; transition:border-color .15s, background .15s; min-height:48px; box-sizing:border-box; }
.ac-cb > input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; z-index:1; } .ac-cb:hover{ border-color:#9ED6CD; }
.ac-cb:has(> input:checked){ border-color:#8FD1C8; background:#F4FBF9; } .ac-cb.lock{ cursor:default; } .ac-cb.lock > input{ cursor:default; } .ac-cb.lock:hover{ border-color:#8FD1C8; }
.ac-cb.lock > input:checked + .ac-box{ background:#74B9B1; border-color:#74B9B1; } .ac-cb > input:disabled:not(:checked) + .ac-box{ background:#F1F3F2; border-color:#D5DBD9; }
.ac-ct{ flex:1; min-width:0; } .ac-ct b{ display:block; font-size:14px; line-height:1.35; } .ac-ct small{ display:block; color:#6A726F; font-size:12.5px; line-height:1.45; margin-top:2px; font-weight:500; }
.ac-tag, .ac-src{ flex:0 0 auto; align-self:center; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:99px; background:#E7F0FB; color:#1F5FA8; white-space:nowrap; } .ac-tag.mute{ background:#F0EEE8; color:#6A726F; }
.ac-src{ text-transform:none; letter-spacing:0; font-size:11.5px; background:#E8F5F3; color:#0A5A5A; } .ac-src.ex{ background:#FEF3E2; color:#9A6410; } .ac-src.sa{ background:#FDECEE; color:#B4182D; }
.ac-roles, .ac-teams, .ac-bgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .ac-warn{ margin:10px 2px 0; color:#9A6410; font-size:13px; display:flex; gap:7px; align-items:center; }
.ac-super{ border-color:#F0C9CF; background:#FFFAFA; } .ac-super.on{ border-color:#E0223D; box-shadow:0 0 0 3px rgba(224,34,61,.08); } .ac-super .ac-cb:has(> input:checked){ border-color:#E0A0AB; background:#FDF0F2; } .ac-super > .ac-cb > input:checked + .ac-box{ background:linear-gradient(135deg,#E0223D,#B4182D); border-color:#B4182D; }
.ac-sum{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:-2px 0 12px; font-size:13px; } .ac-sum span b{ font-size:18px; margin-right:4px; } .ac-sum .yes b{ color:#12703F; } .ac-sum .no b{ color:#8A928F; } .ac-only{ margin-left:auto; display:flex; gap:8px; align-items:center; font-size:12.5px; color:#5A645F; cursor:pointer; } .ac-only input{ width:16px; height:16px; accent-color:#0F8080; }
.ac-area{ border:1px solid #EDF0EF; border-radius:14px; margin-bottom:9px; overflow:hidden; background:#fff; } .ac-area > summary{ list-style:none; display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; background:#F8FAF9; user-select:none; } .ac-area > summary::-webkit-details-marker{ display:none; }
.ac-area > summary > i:first-child{ color:#0F8080; font-size:19px; } .ac-area > summary b{ flex:1; font-size:14px; } .ac-cnt{ font-size:12px; font-weight:800; color:#8A928F; background:#fff; border:1px solid #E3E7E5; border-radius:99px; padding:2px 10px; } .ac-cnt.has{ color:#0A5A5A; background:#E8F5F3; border-color:#BEE3DC; }
.ac-chev{ color:#8A928F; transition:transform .15s; } .ac-area[open] .ac-chev{ transform:rotate(180deg); } .ac-perms{ padding:4px 8px 8px; }
.ac-perms .ac-cb{ border:0; border-bottom:1px solid #F1F3F2; border-radius:0; padding:11px 8px; background:transparent !important; } .ac-perms .ac-cb:last-child{ border-bottom:0; } .ac-perms .ac-cb:hover{ background:#F7FBFA !important; border-bottom-color:#F1F3F2; }
.ac-foot{ position:sticky; bottom:0; margin:8px -22px -22px; padding:13px 22px; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); border-top:1px solid #E3E9E7; border-radius:0 0 18px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; z-index:3; box-shadow:0 -14px 24px -22px rgba(0,0,0,.35); }
.ac-foot[hidden]{ display:none; } .ac-foot > span{ font-size:13px; font-weight:700; color:#9A6410; display:flex; align-items:center; gap:7px; } .ac-foot > span i{ font-size:9px; color:#E0883D; } .ac-foot > div{ display:flex; gap:9px; flex-wrap:wrap; } .bd-btn.danger-o{ color:#B4182D; border-color:#F0C9CF; } .bd-btn.danger-o:hover{ background:#FDECEE; }
.ac-h4{ margin:16px 0 8px; font-size:13px; } .ac-skip{ margin:0; padding-left:18px; font-size:13.5px; line-height:1.7; }
.ac-ric{ flex:0 0 auto; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:#F0EEE8; color:#6A726F; font-size:19px; } .ac-ric.st{ background:#E7F0FB; color:#1F5FA8; } .ac-ric.lg{ width:56px; height:56px; font-size:26px; border-radius:16px; }
.ac-pp{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .ac-pchip{ display:inline-flex; align-items:center; gap:8px; border:1px solid #E3E9E7; background:#fff; border-radius:99px; padding:4px 6px 4px 5px; font-size:13px; font-weight:600; color:#12201D; text-decoration:none; } .ac-pchip small{ display:block; font-size:10.5px; color:#8A928F; font-weight:600; line-height:1.1; } .ac-pchip > span{ line-height:1.2; }
.ac-x{ border:0; background:#F1F3F2; width:22px; height:22px; border-radius:50%; cursor:pointer; color:#5A645F; font-size:12px; display:grid; place-items:center; } .ac-x:hover{ background:#FDECEE; color:#B4182D; }
.ac-lead{ margin:0 2px 14px; font-size:14px; line-height:1.55; } .ac-flows{ display:grid; grid-template-columns:repeat(auto-fill,minmax(440px,1fr)); gap:14px; } .ac-flow h3 i{ color:#0F8080; } .ac-flow{ margin-bottom:0; }
.ac-steps{ display:flex; flex-direction:column; gap:14px; margin-top:6px; position:relative; } .ac-step{ display:flex; gap:13px; } .ac-step .ac-n{ background:#E8F5F3; color:#0A5A5A; } .ac-sb{ flex:1; min-width:0; } .ac-sb b{ font-size:14.5px; } .ac-sb p{ margin:2px 0 4px; color:#6A726F; font-size:13px; line-height:1.5; }
.ac-auto{ font-style:normal; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; background:#F0EEE8; color:#6A726F; padding:2px 8px; border-radius:99px; margin-left:6px; vertical-align:middle; } .ac-also{ margin-top:14px; padding-top:12px; border-top:1px dashed #E3E9E7; }
.ac-add{ position:relative; display:flex; align-items:center; gap:8px; margin-top:10px; max-width:320px; } .ac-add > i{ color:#0F8080; font-size:18px; } .ac-add input{ flex:1; min-width:0; border:1px solid #E3E7E5; background:#FCFBF9; border-radius:10px; padding:8px 11px; font:inherit; font-size:13px; outline:none; } .ac-add input:focus{ border-color:#15A897; background:#fff; }
.ac-dd{ position:absolute; top:calc(100% + 4px); left:26px; right:0; z-index:20; background:#fff; border:1px solid #E3E9E7; border-radius:12px; box-shadow:0 18px 40px -16px rgba(0,0,0,.35); overflow:hidden; } .ac-dd:empty{ display:none; } .ac-dd button{ display:flex; gap:10px; align-items:center; width:100%; text-align:left; border:0; background:#fff; padding:8px 12px; font:inherit; cursor:pointer; } .ac-dd button:hover{ background:#F1F8F6; } .ac-dd small{ display:block; color:#8A928F; font-size:11.5px; } .ac-dd-none{ padding:10px 12px; color:#8A928F; font-size:13px; }
/* phones and narrow windows: list first, then the person full-screen with a Back arrow */
@media (max-width:1000px){
  .ac-split{ grid-template-columns:1fr; } .ac-listcard{ position:static; max-height:none; } .ac-panel{ display:none; padding:16px; } .ac-panel.show{ display:block; } body.ac-detail-open .ac-listcard{ display:none; }
  .ac-back{ display:inline-grid; } .ac-foot{ margin:8px -16px -16px; padding:12px 16px; } .ac-flows{ grid-template-columns:1fr; }
}
@media (max-width:700px){ .ac-roles, .ac-teams, .ac-bgrid{ grid-template-columns:1fr; } .ac-sel3{ grid-template-columns:1fr 1fr; } .ac-card{ padding:14px 13px; } .ac-sum .ac-only{ margin-left:0; width:100%; } .ac-ph{ gap:11px; } .ac-pn h2{ font-size:18px; } .ac-av.lg{ width:46px; height:46px; font-size:16px; } .ac-tag, .ac-src{ font-size:10px; padding:2px 7px; } }
.ac-bulk[hidden]{ display:none; } .cm-logo{ border-radius:14px; }

.ac-refresh{ flex-direction:column; align-items:flex-end; gap:4px; } .ac-refresh small{ color:#8A928F; font-size:12px; }
@media (max-width:640px){ .ac-refresh{ align-items:stretch; width:100%; } }

/* ============================================================
   Feedback (feedback.php, admin/feedback.php)
   ============================================================ */
.fbk .fb-tabs em{ font-style:normal; font-size:11px; font-weight:800; background:#EEF1F0; color:#5A645F; border-radius:99px; padding:1px 8px; margin-left:4px; } .fbk .fb-tabs a.on em{ background:rgba(255,255,255,.22); color:#fff; }
.fb-card{ background:#fff; border:1px solid #EAEDEB; border-radius:18px; padding:20px 22px; margin-bottom:14px; box-shadow:0 12px 30px -26px rgba(18,32,29,.4); } .fb-card.dim{ opacity:.55; } .fb-card.dim .fb-drop, .fb-card.dim textarea, .fb-card.dim input, .fb-card.dim select{ pointer-events:none; }
.fb-step{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } .fb-step span{ width:28px; height:28px; border-radius:50%; background:#E0223D; color:#fff; font-weight:800; font-size:13px; display:grid; place-items:center; } .fb-step h3{ margin:0; font-size:16px; } .fb-step em{ font-style:normal; color:#8A928F; font-weight:600; font-size:13px; }
.fb-kinds{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; } .fb-kind{ position:relative; display:flex; flex-direction:column; gap:4px; padding:14px 14px 13px; border:1.5px solid #E3E9E7; border-radius:14px; cursor:pointer; background:#fff; transition:border-color .15s, background .15s, transform .15s; } .fb-kind input{ position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; } .fb-kind i{ font-size:24px; color:#0F8080; } .fb-kind b{ font-size:14px; } .fb-kind small{ color:#6A726F; font-size:12px; line-height:1.4; }
.fb-kind:hover{ border-color:#9ED6CD; transform:translateY(-1px); } .fb-kind.on{ border-color:#0F8080; background:#F2FAF8; box-shadow:0 0 0 3px rgba(15,128,128,.12); }
.fb-lab{ font-size:12.5px; font-weight:700; color:#5A645F; margin:6px 0 8px; } .fb-sev{ display:flex; gap:8px; flex-wrap:wrap; } .fb-chip{ position:relative; cursor:pointer; } .fb-chip input{ position:absolute; opacity:0; } .fb-chip span{ display:block; padding:8px 14px; border:1.5px solid #E3E9E7; border-radius:99px; font-size:13px; font-weight:600; color:#3B4642; background:#fff; } .fb-chip input:checked + span{ border-color:#E0223D; background:#FDECEE; color:#B4182D; } .fb-chip input:focus-visible + span{ box-shadow:0 0 0 3px rgba(224,34,61,.2); }
.fb-cnt{ float:right; font-style:normal; color:#8A928F; font-weight:600; font-size:12px; }
.fb-drop{ display:flex; gap:14px; align-items:center; border:2px dashed #BFD7D2; border-radius:14px; padding:18px 20px; background:#FAFDFC; } .fb-drop.over{ border-color:#0F8080; background:#EAF6F4; } .fb-drop > i{ font-size:32px; color:#0F8080; } .fb-drop b{ display:block; font-size:14px; } .fb-drop small{ color:#6A726F; } .fb-drop a{ color:#0F8080; text-decoration:underline; }
.fb-thumbs{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; } .fb-th{ position:relative; width:110px; border:1px solid #E3E9E7; border-radius:12px; background:#fff; overflow:hidden; } .fb-th img{ width:100%; height:76px; object-fit:cover; display:block; } .fb-th > i{ display:grid; place-items:center; height:76px; font-size:30px; color:#B4182D; } .fb-th span{ display:block; padding:5px 8px; font-size:11px; color:#5A645F; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fb-th button{ position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; cursor:pointer; display:grid; place-items:center; font-size:12px; }
.fb-tech{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; } .fb-tech input{ width:20px; height:20px; accent-color:#0F8080; margin-top:2px; } .fb-tech b{ display:block; font-size:14.5px; } .fb-tech small{ display:block; color:#6A726F; font-size:12.5px; line-height:1.5; margin-top:2px; } .fb-tdet{ margin-top:10px; } .fb-tdet summary{ cursor:pointer; color:#0F8080; font-weight:700; font-size:13px; } .fb-tdet pre{ white-space:pre-wrap; word-break:break-word; background:#F6F8F7; border:1px solid #E3E9E7; border-radius:10px; padding:12px 14px; font:12px/1.5 ui-monospace,Menlo,Consolas,monospace; color:#2A3330; margin:8px 0 0; max-height:220px; overflow:auto; }
.fb-send{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:6px 0 24px; } .bd-btn.lg{ padding:13px 26px; font-size:15px; border-radius:14px; } .fb-msg{ font-size:13.5px; color:#5A645F; } .fb-msg.err{ color:#B4182D; font-weight:700; }
.fb-thanks{ text-align:center; padding:44px 24px; } .fb-thanks > i{ font-size:56px; color:#12A150; } .fb-thanks h2{ margin:8px 0; font-family:Georgia,serif; font-weight:400; color:#0A5A5A; font-size:26px; } .fb-thanks p{ max-width:520px; margin:6px auto; color:#5A645F; line-height:1.55; } .fb-thanks .fb-send{ justify-content:center; margin-bottom:0; } .fb-warn{ color:#9A6410 !important; background:#FEF3E2; border-radius:10px; padding:10px 14px; } .fb-empty{ text-align:center; padding:44px 24px; } .fb-empty > i{ font-size:48px; color:#9CC7C2; } .fb-empty h3{ margin:8px 0 4px; } .fb-empty p{ color:#6A726F; margin:0 0 14px; }
.fb-list{ display:flex; flex-direction:column; gap:10px; } .fb-item{ background:#fff; border:1px solid #EAEDEB; border-radius:16px; overflow:hidden; } .fb-item > header{ display:flex; align-items:center; gap:13px; padding:14px 16px; cursor:pointer; } .fb-item > header:hover{ background:#F8FBFA; } .fb-item > header > div{ flex:1; min-width:0; } .fb-item header b{ display:block; font-size:14.5px; } .fb-item header small{ color:#8A928F; font-size:12px; } .fb-more{ display:none; padding:2px 18px 18px 69px; } .fb-item.open .fb-more{ display:block; }
.fb-ic{ flex:0 0 auto; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:19px; background:#E7F0FB; color:#1F5FA8; } .fb-ic.lg{ width:56px; height:56px; font-size:26px; border-radius:16px; } .fb-ic.bug{ background:#FDECEE; color:#B4182D; } .fb-ic.design{ background:#F1E9FB; color:#6B3FA8; } .fb-ic.idea{ background:#FEF3E2; color:#9A6410; } .fb-ic.praise{ background:#FDE9F1; color:#B02A62; } .fb-ic.other{ background:#EEF1F0; color:#5A645F; }
.fb-st{ font-style:normal; font-size:11px; font-weight:800; border-radius:99px; padding:3px 11px; white-space:nowrap; background:#EEF1F0; color:#5A645F; } .fb-st.new{ background:#E7F0FB; color:#1F5FA8; } .fb-st.reviewing{ background:#FEF3E2; color:#9A6410; } .fb-st.planned{ background:#F1E9FB; color:#6B3FA8; } .fb-st.fixed{ background:#E6F5EC; color:#12703F; }
.fb-sv{ font-style:normal; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; border-radius:99px; padding:2px 9px; background:#EEF1F0; color:#5A645F; } .fb-sv.high{ background:#FDECEE; color:#B4182D; } .fb-sv.blocker{ background:#B4182D; color:#fff; } .fb-sv.medium{ background:#FEF3E2; color:#9A6410; }
.fb-body{ margin:6px 0 10px; line-height:1.6; color:#161A19; font-size:14px; } .fb-meta{ display:flex; gap:14px; flex-wrap:wrap; margin:0 0 10px; color:#6A726F; font-size:12.5px; } .fb-meta i{ margin-right:4px; color:#0F8080; }
.fb-files{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 12px; } .fb-files a{ width:130px; border:1px solid #E3E9E7; border-radius:12px; overflow:hidden; text-decoration:none; color:#3B4642; background:#fff; } .fb-files img{ width:100%; height:86px; object-fit:cover; display:block; } .fb-files > a > i{ display:grid; place-items:center; height:86px; font-size:30px; color:#6A726F; } .fb-files span{ display:block; padding:5px 8px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fb-reply{ background:#E8F5F3; border:1px solid #BEE3DC; border-radius:12px; padding:12px 14px; } .fb-reply b{ color:#0A5A5A; font-size:13px; } .fb-reply p{ margin:5px 0; line-height:1.55; } .fb-reply small{ color:#6A726F; } .fb-wait{ color:#8A928F; font-size:13px; margin:6px 0 0; }
.fa-tiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:0 0 16px; } .fa-tile{ background:#fff; border:1px solid #EAEDEB; border-radius:16px; padding:14px 16px; display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; } .fa-tile i{ grid-row:span 2; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:21px; background:#E8F5F3; color:#0A5A5A; } .fa-tile b{ font-size:22px; line-height:1.1; } .fa-tile b.sm{ font-size:13px; } .fa-tile span{ font-size:12px; color:#6A726F; font-weight:600; } .fa-tile.new i{ background:#E7F0FB; color:#1F5FA8; } .fa-tile.rev i{ background:#FEF3E2; color:#9A6410; } .fa-tile.pl i{ background:#F1E9FB; color:#6B3FA8; } .fa-tile.bug i{ background:#FDECEE; color:#B4182D; } .fa-tile.fx i{ background:#E6F5EC; color:#12703F; }
.fa-sel{ grid-template-columns:1fr !important; } .fa-from{ display:flex; flex-direction:column; margin-bottom:8px; } .fa-from span{ color:#6A726F; font-size:12.5px; } .fa-tech{ display:grid; grid-template-columns:130px 1fr; gap:6px 12px; margin:10px 0 0; font-size:12.5px; } .fa-tech dt{ color:#8A928F; font-weight:700; } .fa-tech dd{ margin:0; word-break:break-word; } .fa-tech ul{ margin:0; padding-left:16px; } .fa-tech li{ margin-bottom:6px; } .fa-tech code{ background:#FDECEE; color:#8C1424; border-radius:6px; padding:1px 6px; font-size:12px; } .fa-tech li small{ display:block; color:#8A928F; }
@media (max-width:1000px){ .fb-kinds{ grid-template-columns:repeat(2,1fr); } .fa-tiles{ grid-template-columns:repeat(2,1fr); } .fb-more{ padding-left:18px; } } @media (max-width:560px){ .fb-card{ padding:16px 14px; } .fb-kinds{ grid-template-columns:1fr; } }


/* ============================================================
   Modules & access groups (admin/modules.php)
   ============================================================ */
.mxp .epk-pill.purple{ background:#fff; color:#6B3FA8; border:1px solid #D9CBF1; } .mxp .epk-pill.red{ background:#fff; color:#B4182D; border:1px solid #F3C4CB; } .mxp .epk-pill.teal{ background:#fff; color:#0A5A5A; border:1px solid #BEE3DC; } .mxp .epk-pill i{ margin-right:4px; }
.mx-warn{ display:flex; gap:12px; align-items:flex-start; background:#FEF3E2; border:1px solid #F1D5A4; color:#7A4E07; border-radius:14px; padding:13px 16px; margin:0 0 16px; } .mx-warn i{ font-size:20px; margin-top:2px; } .mx-warn b{ display:block; } .mx-warn span{ font-size:13px; } .mx-warn code{ background:rgba(0,0,0,.06); padding:1px 6px; border-radius:6px; }
.mx-area{ margin:24px 0 10px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#6A726F; } .mx-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px; }
.mx-mod{ display:flex; flex-direction:column; gap:14px; border-left:4px solid #15A897 !important; } .mx-mod.res{ border-left-color:#E0883D !important; } .mx-mh{ display:flex; gap:12px; align-items:flex-start; } .mx-mh b{ display:block; font-size:15px; } .mx-mh small{ color:#6A726F; font-size:12.5px; line-height:1.45; display:block; margin-top:2px; }
.mx-ic{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:20px; background:#E8F5F3; color:#0A5A5A; } .mx-ic.gr{ background:#EEE7FB; color:#6B3FA8; } .mx-mf{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.mx-fixed{ display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:10px; } .mx-fixed > div{ display:flex; gap:12px; align-items:center; background:#fff; border:1px solid #EAEDEB; border-radius:12px; padding:12px 14px; } .mx-fixed i{ font-size:20px; color:#8A928F; } .mx-fixed b{ display:block; font-size:13.5px; } .mx-fixed small{ color:#6A726F; font-size:12px; } .mx-fixed em{ margin-left:auto; font-style:normal; font-size:11px; font-weight:800; color:#6A726F; background:#F0F3F2; border-radius:99px; padding:3px 10px; white-space:nowrap; }
.mx-modes{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:6px 0 14px; } .mx-mode{ position:relative; display:flex; flex-direction:column; gap:3px; border:1.5px solid #E3E9E7; border-radius:14px; padding:14px; cursor:pointer; background:#fff; } .mx-mode input{ position:absolute; opacity:0; } .mx-mode i{ font-size:22px; color:#0F8080; } .mx-mode small{ color:#6A726F; font-size:12.5px; } .mx-mode.on{ border-color:#0F8080; background:#F2FAF8; box-shadow:0 0 0 3px rgba(15,128,128,.12); }
.mx-grants h4, .mx-h4{ margin:14px 0 8px; font-size:14px; } .mx-h4 small{ display:block; font-weight:400; color:#6A726F; margin-top:2px; } .mx-gr{ display:grid; grid-template-columns:1fr minmax(180px,260px) auto; gap:10px; align-items:center; padding:9px 12px; border:1px solid #EAEDEB; border-radius:12px; margin-bottom:8px; background:#fff; } .mx-gr select, .mx-add select, .mx-rule select{ border:1px solid #E3E7E5; border-radius:10px; padding:9px 10px; font:inherit; font-size:13.5px; background:#fff; }
.mx-add select{ width:100%; border-style:dashed; color:#0A5A5A; font-weight:600; } .mx-empty{ color:#8A928F; font-size:13px; } .mx-empty i{ color:#E0883D; } .mx-emptybig{ text-align:center; background:#fff; border:1px solid #EAEDEB; border-radius:18px; padding:54px 24px; } .mx-emptybig > i{ font-size:52px; color:#9CC7C2; } .mx-emptybig p{ max-width:520px; margin:6px auto 16px; color:#5A645F; line-height:1.55; }
.mx-gh{ display:flex; gap:12px; align-items:flex-start; } .mx-gh b{ display:block; font-size:15px; } .mx-gh small{ color:#6A726F; font-size:12.5px; } .mx-rules{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; } .mx-chip{ background:#E8F5F3; color:#0A5A5A; border-radius:99px; padding:4px 11px; font-size:12px; font-weight:600; } .mx-gf{ display:flex; gap:14px; align-items:center; color:#5A645F; font-size:12.5px; margin-top:auto; } .mx-gf .bd-btn{ margin-left:auto; } .mx-gf i{ color:#0F8080; }
.mx-rule{ display:grid; grid-template-columns:190px 1fr auto; gap:10px; align-items:center; margin-bottom:8px; } .mx-all{ color:#5A645F; font-size:13px; } .mx-prev{ margin:14px 0 4px; background:#F6F8F7; border:1px solid #E3E9E7; border-radius:12px; padding:12px 14px; } .mx-ppl{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .mx-ppl span{ background:#fff; border:1px solid #E3E9E7; border-radius:99px; padding:3px 10px; font-size:12px; } .mx-ppl em{ font-style:normal; color:#6A726F; font-size:12px; align-self:center; } .mx-del{ margin-top:16px; }
.mx-pick{ max-width:520px; margin-bottom:16px; } .mx-pcard{ margin-bottom:14px; } .mx-ph{ display:flex; gap:12px; align-items:center; } .mx-ph small{ display:block; color:#6A726F; } .mx-av{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#15A897,#0A5A5A); color:#fff; display:grid; place-items:center; font-weight:800; font-size:18px; } .mx-pg{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } .mx-pm{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:8px; } .mx-pm > div{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #EAEDEB; border-radius:12px; padding:10px 14px; } .mx-pm i{ color:#0F8080; font-size:18px; } .mx-pm span{ font-size:13.5px; font-weight:600; flex:1; } .mx-pm em{ font-style:normal; }
@media (max-width:700px){ .mx-modes{ grid-template-columns:1fr; } .mx-gr{ grid-template-columns:1fr; } .mx-rule{ grid-template-columns:1fr; } }

/* ============================================================
   Surveys & forms (v2) — screen (admin/surveys.php) and public form (survey.php)
   ============================================================ */
.svb .epk-pill.blue{ background:#fff; color:#2F5FD0; border:1px solid #CBD8F7; } .svb .epk-pill.red{ background:#fff; color:#B4182D; border:1px solid #F3C4CB; }
.svb .sv-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin-top:6px; } .sv-card-item{ cursor:pointer; display:flex; flex-direction:column; gap:8px; border-left:4px solid #15A897 !important; } .sv-card-item h3{ margin:0; font-size:16px; line-height:1.3; } .sv-ch{ display:flex; gap:8px; align-items:center; } .sv-owner{ margin:0; color:#6A726F; font-size:12.5px; } .sv-role{ font-size:11px; font-weight:800; background:#F0F3F2; color:#5A645F; border-radius:99px; padding:3px 10px; }
.sv-cs{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:#5A645F; } .sv-cs b{ color:#161A19; } .sv-ca{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:6px; }
.sv-seg{ display:inline-flex; background:#fff; border:1px solid #E3E7E5; border-radius:12px; padding:3px; gap:2px; } .sv-seg button{ border:0; background:transparent; padding:8px 14px; border-radius:9px; font:inherit; font-size:13px; font-weight:600; color:#5A645F; cursor:pointer; } .sv-seg button.on{ background:#0F8080; color:#fff; }
.sv-emptybig{ text-align:center; background:#fff; border:1px solid #EAEDEB; border-radius:18px; padding:48px 24px; margin-top:12px; } .sv-emptybig > i{ font-size:50px; color:#9CC7C2; } .sv-emptybig p{ max-width:520px; margin:6px auto 16px; color:#5A645F; line-height:1.55; }
.sv-tpls{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-top:12px; } .sv-tpl{ display:flex; flex-direction:column; gap:4px; text-align:left; background:#fff; border:1.5px solid #E3E9E7; border-radius:14px; padding:16px; cursor:pointer; font:inherit; transition:.15s; } .sv-tpl:hover{ border-color:#0F8080; box-shadow:0 10px 24px -16px rgba(15,128,128,.6); transform:translateY(-2px); } .sv-tpl i{ font-size:26px; color:#0F8080; } .sv-tpl small{ color:#6A726F; }
.sv-top{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:14px; } .sv-back{ border:0; background:#fff; border:1px solid #E3E7E5; border-radius:10px; padding:8px 14px; font:inherit; font-weight:600; font-size:13px; cursor:pointer; } .sv-tt{ display:flex; align-items:center; gap:10px; flex:1; min-width:240px; flex-wrap:wrap; } .sv-tt h1{ margin:0; font:400 26px 'Instrument Serif',Georgia,serif; color:#0A5A5A; }
.sv-saved{ font-size:12.5px; color:#1C6E3E; display:inline-flex; gap:5px; align-items:center; } .sv-saved.dirty{ color:#C98200; } .sv-more{ position:relative; } .sv-pop{ position:absolute; right:0; top:42px; background:#fff; border:1px solid #E3E7E5; border-radius:12px; box-shadow:0 16px 40px -20px rgba(0,0,0,.4); padding:6px; z-index:30; min-width:200px; } .sv-pop button{ display:flex; gap:8px; align-items:center; width:100%; border:0; background:transparent; padding:10px 12px; border-radius:8px; font:inherit; font-size:13.5px; cursor:pointer; text-align:left; } .sv-pop button:hover{ background:#F2F6F5; } .sv-pop .danger{ color:#B4182D; }
.sv-build{ max-width:860px; } .sv-head{ margin-bottom:14px; } .sv-fcard{ margin-bottom:10px; padding:0 !important; overflow:hidden; border-left:4px solid #CFE4E0 !important; } .sv-fcard.open{ border-left-color:#0F8080 !important; box-shadow:0 12px 30px -20px rgba(15,128,128,.55); } .sv-fcard.pb{ border-left-color:#E0883D !important; background:#FFFBF5 !important; }
.sv-fh{ display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer; } .sv-fn{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:#E8F5F3; color:#0A5A5A; display:grid; place-items:center; font-weight:800; font-size:13px; } .sv-flab{ flex:1; min-width:0; } .sv-flab b{ display:block; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sv-flab small{ color:#6A726F; font-size:12px; } .req{ color:#E0223D; font-style:normal; }
.sv-fa{ display:flex; gap:2px; } .sv-fa button, .svb .bd-ic{ border:0; background:transparent; width:32px; height:32px; border-radius:8px; cursor:pointer; color:#5A645F; display:inline-grid; place-items:center; } .sv-fa button:hover, .svb .bd-ic:hover{ background:#F0F4F3; color:#0A5A5A; } .sv-fa button:disabled{ opacity:.3; cursor:default; }
.sv-fb{ padding:4px 18px 18px; border-top:1px solid #EEF1F0; } .sv-two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .sv-chk{ display:flex; gap:8px; align-items:flex-start; margin:10px 0; font-size:13.5px; cursor:pointer; } .sv-chk small{ color:#6A726F; } .sv-chk.dis{ opacity:.55; }
.sv-logic{ margin-top:14px; padding:14px; background:#F6FAF9; border:1px dashed #BEE3DC; border-radius:12px; } .sv-logic-note{ margin:12px 0 0; color:#8A928F; font-size:12.5px; } .sv-lrule{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } .sv-lrule select, .sv-lrule input, .sv-add2 select, .sv-pick input, .sv-pick select, .sv-wr select, .sv-wr input, .sv-frow input, .sv-frow select, .sv-cmp select, .sv-pfr select, .sv-sendbtns + p select{ border:1px solid #DDE3E1; border-radius:9px; padding:8px 10px; font:inherit; font-size:13px; background:#fff; max-width:100%; } .sv-lfoot{ display:flex; gap:12px; align-items:center; margin-top:10px; font-size:13px; }
.sv-add{ margin-top:14px; } .sv-addgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-top:10px; } .sv-ag h5{ margin:0 0 6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8A928F; } .sv-ag button{ display:flex; gap:8px; align-items:center; width:100%; text-align:left; border:1px solid #E6EBE9; background:#fff; border-radius:10px; padding:8px 10px; margin-bottom:5px; font:inherit; font-size:13px; cursor:pointer; } .sv-ag button:hover{ border-color:#0F8080; background:#F2FAF8; } .sv-ag i{ color:#0F8080; }
.sv-prevbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; color:#5A645F; font-size:13.5px; } .sv-stage{ background:#E9EEED; border-radius:18px; padding:24px 12px; display:flex; justify-content:center; } .sv-stage.phone .sv-frame{ width:390px; } .sv-stage.desk .sv-frame{ width:min(780px,100%); } .sv-frame{ max-width:100%; background:#F5F4F1; border-radius:22px; padding:18px 14px 26px; box-shadow:0 30px 60px -30px rgba(0,0,0,.45); border:6px solid #1c2422; } .sv-pbrand{ display:flex; align-items:center; gap:8px; font-weight:800; color:#0A5A5A; margin-bottom:12px; }
.sv-setgrid{ display:grid; gap:14px; max-width:860px; } .sv-sh{ margin-bottom:10px; } .sv-sh b{ display:block; font-size:15px; } .sv-sh small{ color:#6A726F; font-size:12.5px; } .sv-radios{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:6px; } .sv-radios.two{ grid-template-columns:1fr 1fr; } .sv-rad{ position:relative; display:flex; flex-direction:column; gap:3px; border:1.5px solid #E3E9E7; border-radius:14px; padding:14px; cursor:pointer; background:#fff; } .sv-rad input{ position:absolute; opacity:0; } .sv-rad i{ font-size:22px; color:#0F8080; } .sv-rad small{ color:#6A726F; font-size:12.5px; } .sv-rad.on{ border-color:#0F8080; background:#F2FAF8; box-shadow:0 0 0 3px rgba(15,128,128,.12); }
.sv-pft{ margin-top:12px; border:1px solid #EAEDEB; border-radius:12px; overflow:hidden; } .sv-pfh, .sv-pfr{ display:grid; grid-template-columns:1fr 200px; gap:10px; padding:9px 14px; align-items:center; } .sv-pfh{ background:#F6F8F7; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:#8A928F; font-weight:700; } .sv-pfr + .sv-pfr{ border-top:1px solid #F0F3F2; } .sv-hint{ color:#6A726F; font-size:12.5px; margin:8px 0 0; } .sv-hint i{ color:#0F8080; } .sv-add2{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.sv-cl{ display:grid; grid-template-columns:auto 1fr 130px auto; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid #F0F3F2; } .sv-cl small{ display:block; color:#6A726F; font-size:12px; } .sv-av{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#15A897,#0A5A5A); color:#fff; display:grid; place-items:center; font-weight:800; } .sv-cl select{ border:1px solid #DDE3E1; border-radius:9px; padding:7px 8px; font:inherit; font-size:13px; }
.sv-invgrid, .sv-sharegrid, .sv-dgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:14px; } .sv-wide{ grid-column:1/-1; } .sv-invgrid textarea, .sv-sharegrid textarea{ width:100%; border:1px solid #DDE3E1; border-radius:10px; padding:10px 12px; font:inherit; font-size:13px; box-sizing:border-box; resize:vertical; } .sv-row, .sv-sendbtns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; } .svb code{ background:#F0F3F2; padding:1px 6px; border-radius:6px; font-size:12px; }
.sv-itbl{ padding:0 !important; overflow:auto; } .sv-itbl table{ width:100%; border-collapse:collapse; } .sv-itbl th{ text-align:left; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:#8A928F; padding:12px 16px; background:#F6F8F7; } .sv-itbl td{ padding:12px 16px; border-top:1px solid #F0F3F2; vertical-align:top; font-size:13.5px; } .sv-itbl small{ display:block; color:#6A726F; font-size:12px; margin-top:2px; } .sv-ia{ white-space:nowrap; text-align:right; } .sv-rx dl{ margin:0; display:grid; grid-template-columns:minmax(160px,30%) 1fr; gap:6px 16px; } .sv-rx dt{ color:#6A726F; font-size:12.5px; } .sv-rx dd{ margin:0; font-size:13.5px; } .sv-rx td{ background:#FAFCFB; }
.sv-pick{ display:flex; gap:10px; margin-bottom:10px; } .sv-pick input{ flex:1; } .sv-picklist{ max-height:320px; overflow:auto; border:1px solid #EAEDEB; border-radius:12px; } .sv-picklist label{ display:flex; gap:10px; align-items:center; padding:9px 14px; border-bottom:1px solid #F3F5F4; cursor:pointer; } .sv-picklist label:hover{ background:#F6FAF9; } .sv-picklist small{ display:block; color:#6A726F; font-size:12px; }
.sv-linkbox{ display:flex; gap:8px; margin:10px 0; } .sv-linkbox input{ flex:1; min-width:0; border:1px solid #DDE3E1; border-radius:10px; padding:10px 12px; font:inherit; font-size:13px; background:#F6F8F7; } .sv-sharebtns{ display:flex; gap:8px; flex-wrap:wrap; } .sv-qrc{ text-align:center; } .sv-qr{ margin:6px auto 12px; max-width:220px; background:#fff; padding:8px; border:1px solid #EAEDEB; border-radius:14px; } .sv-warn{ margin-bottom:14px; }
.sv-dashbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .sv-live{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#5A645F; cursor:pointer; } .sv-live .dot{ width:9px; height:9px; border-radius:50%; background:#C9D1CF; } .sv-live input:checked ~ .dot{ background:#15A897; box-shadow:0 0 0 4px rgba(21,168,151,.2); animation:svp 1.6s infinite; } @keyframes svp{ 50%{ box-shadow:0 0 0 8px rgba(21,168,151,0); } }
.sv-k6{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important; } .sv-ch2{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; } .sv-ch2 small{ display:block; color:#6A726F; font-size:12px; font-weight:400; } .sv-chbtn{ display:flex; gap:2px; } .ac-empty{ padding:34px 10px; text-align:center; color:#8A928F; font-size:13px; background:#F8FAF9; border-radius:10px; }
.sv-quota{ display:flex; align-items:center; gap:16px; margin-bottom:14px; } .sv-quota > div:first-child b, .sv-quota > div:first-child span{ display:block; } .sv-quota span{ color:#6A726F; font-size:12.5px; } .sv-qbar{ flex:1; height:12px; background:#EEF2F1; border-radius:99px; overflow:hidden; } .sv-qbar i{ display:block; height:100%; background:linear-gradient(90deg,#15A897,#0F8080); border-radius:99px; }
.sv-fbar{ margin-bottom:14px; } .sv-frow{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; } .sv-frow label{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:700; color:#6A726F; } .sv-wr{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; font-size:13px; color:#5A645F; } .sv-fact{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; } .sv-exp{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.sv-sub{ margin:6px 0 14px; } .sv-total{ font-size:15px; margin:0 0 12px; } .sv-total b{ font-size:22px; color:#0A5A5A; } .sv-total span{ color:#6A726F; font-size:13px; } .sv-qgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:14px; } .sv-rqb svg{ width:100%; height:auto; } .sv-avg{ margin:8px 0 0; color:#5A645F; font-size:13px; } .sv-avg b{ color:#0A5A5A; font-size:17px; }
.sv-nps{ display:flex; gap:16px; align-items:center; margin-bottom:6px; } .sv-npsn{ font-size:44px; font-weight:800; line-height:1; text-align:center; min-width:96px; } .sv-npsn small{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#6A726F; margin-top:4px; font-weight:700; } .sv-npsb{ flex:1; min-width:0; } .sv-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .sv-stats div{ background:#F6F8F7; border-radius:12px; padding:12px; text-align:center; } .sv-stats b{ display:block; font-size:20px; color:#0A5A5A; } .sv-stats span{ font-size:11.5px; color:#6A726F; }
.sv-heat{ overflow:auto; } .sv-heat table{ border-collapse:collapse; width:100%; font-size:13px; } .sv-heat th{ padding:8px 10px; text-align:center; font-size:12px; color:#5A645F; } .sv-heat th:first-child, .sv-heat tbody th{ text-align:left; } .sv-heat td{ text-align:center; padding:9px 8px; border:2px solid #fff; border-radius:6px; background:#F3F6F5; font-weight:700; } .sv-heat td small{ display:block; font-weight:400; font-size:11px; opacity:.8; }
.sv-kw{ display:flex; flex-wrap:wrap; gap:6px 12px; margin-bottom:10px; } .sv-kw span{ color:#0A5A5A; } .sv-kw b{ font-size:11px; color:#8A928F; } .sv-latest{ margin:0; padding:0; list-style:none; max-height:240px; overflow:auto; } .sv-latest li{ padding:8px 12px; background:#F6F8F7; border-radius:10px; margin-bottom:6px; font-size:13.5px; line-height:1.45; } .sv-geolist{ display:flex; flex-wrap:wrap; gap:6px; } .sv-geolist a{ font-size:12.5px; background:#F0F7F6; border-radius:99px; padding:4px 11px; color:#0A5A5A; text-decoration:none; }
.sv-cmp{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; } .sv-cmp label{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:700; color:#6A726F; } .sv-cmp select{ min-width:240px; } .sv-cmp span{ padding-bottom:10px; color:#8A928F; } .sv-pager{ display:flex; gap:12px; align-items:center; justify-content:center; margin-top:12px; color:#6A726F; font-size:13px; }
@media (max-width:900px){ .sv-invgrid, .sv-sharegrid, .sv-dgrid, .sv-radios, .sv-radios.two, .sv-two{ grid-template-columns:1fr; } .sv-qgrid{ grid-template-columns:1fr; } .sv-cl{ grid-template-columns:auto 1fr; } .sv-stats{ grid-template-columns:repeat(2,1fr); } .sv-pfh, .sv-pfr{ grid-template-columns:1fr 130px; } }
/* ---- the public form ---- */
.sv-body{ margin:0; min-height:100vh; background:#F5F4F1 radial-gradient(900px 400px at 10% -5%, #D6EBE7 0%, transparent 60%); font-family:Inter,system-ui,sans-serif; color:#161A19; -webkit-font-smoothing:antialiased; } .sv-wrap{ max-width:720px; margin:0 auto; padding:22px 16px 60px; } .sv-brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:#0A5A5A; margin:6px 0 16px; } .sv-brand img{ border-radius:12px; }
.sv-card{ background:#fff; border-radius:18px; padding:26px 26px 20px; margin-bottom:14px; border-top:6px solid #15A897; box-shadow:0 18px 44px -30px rgba(10,90,90,.45); } .sv-card h1{ margin:0 0 6px; font:400 30px 'Instrument Serif',Georgia,serif; color:#0A5A5A; line-height:1.15; } .sv-desc{ color:#4A5551; line-height:1.6; margin:8px 0; } .sv-note{ color:#1C6E3E; font-size:13px; margin:12px 0 4px; display:flex; gap:6px; align-items:center; } .sv-req{ color:#6A726F; font-size:12.5px; margin:4px 0 0; }
.sv-closed, .sv-done{ text-align:center; padding:44px 26px; } .sv-closed > i, .sv-done > i{ font-size:48px; color:#15A897; } .sv-done h2{ margin:4px 0; font:400 28px 'Instrument Serif',Georgia,serif; color:#0A5A5A; } .sv-redir{ color:#6A726F; font-size:13px; }
.sv-q{ background:#fff; border-radius:16px; padding:20px 22px; margin-bottom:12px; box-shadow:0 10px 30px -26px rgba(10,90,90,.5); border:1.5px solid transparent; } .sv-q.bad{ border-color:#E0223D; } .sv-q.sec{ background:transparent; box-shadow:none; padding:10px 4px 0; } .sv-q.sec h3{ margin:0; font-size:18px; color:#0A5A5A; } .sv-q.sec p, .sv-qh{ color:#6A726F; font-size:13px; margin:4px 0 0; line-height:1.5; } .sv-about h3{ margin:0 0 4px; color:#0A5A5A; } .sv-pf{ margin-top:12px; } .sv-ph{ font:400 24px 'Instrument Serif',Georgia,serif; color:#0A5A5A; margin:6px 4px 12px; }
.sv-ql{ display:block; font-weight:700; font-size:15px; margin-bottom:6px; line-height:1.4; } .sv-in{ margin-top:10px; } .sv-i{ width:100%; box-sizing:border-box; border:1.5px solid #DDE3E1; border-radius:12px; padding:12px 14px; font:inherit; font-size:15px; background:#fff; } .sv-i:focus{ outline:none; border-color:#0F8080; box-shadow:0 0 0 4px rgba(15,128,128,.14); } .sv-narrow{ max-width:260px; } textarea.sv-i{ resize:vertical; min-height:96px; } .sv-err{ color:#C0182E; font-size:13px; margin:8px 0 0; font-weight:600; }
.sv-opts{ display:flex; flex-direction:column; gap:8px; } .sv-opt{ display:flex; gap:10px; align-items:center; padding:11px 14px; border:1.5px solid #E3E9E7; border-radius:12px; cursor:pointer; font-size:14.5px; } .sv-opt:hover{ border-color:#9CC7C2; background:#F6FAF9; } .sv-opt input[type=radio], .sv-opt input[type=checkbox]{ accent-color:#0F8080; width:18px; height:18px; } .sv-other .sv-i{ padding:6px 10px; margin-left:4px; }
.sv-pills, .sv-likert{ display:flex; gap:8px; flex-wrap:wrap; } .sv-pills label, .sv-likert label{ flex:1; min-width:90px; } .sv-pills input, .sv-likert input{ position:absolute; opacity:0; } .sv-pills span, .sv-likert span{ display:block; text-align:center; padding:12px 10px; border:1.5px solid #E3E9E7; border-radius:12px; cursor:pointer; font-size:14px; font-weight:600; } .sv-pills input:checked + span, .sv-likert input:checked + span{ background:#0F8080; border-color:#0F8080; color:#fff; } .sv-likert label{ position:relative; min-width:110px; } .sv-likert span{ font-size:13px; }
.sv-stars{ display:flex; gap:6px; } .sv-star{ border:0; background:transparent; font-size:34px; color:#D5DCDA; cursor:pointer; padding:2px; } .sv-star.on{ color:#F2B134; } .sv-nums{ display:grid; grid-template-columns:repeat(10,1fr); gap:6px; } .sv-nums.n11{ grid-template-columns:repeat(11,1fr); } .sv-num{ border:1.5px solid #E3E9E7; background:#fff; border-radius:10px; padding:11px 0; font:inherit; font-weight:700; cursor:pointer; } .sv-num.on{ background:#0F8080; border-color:#0F8080; color:#fff; } .sv-ends{ display:flex; justify-content:space-between; color:#6A726F; font-size:12px; margin-top:6px; }
.sv-matrix{ overflow-x:auto; } .sv-matrix table{ border-collapse:collapse; width:100%; font-size:13.5px; } .sv-matrix th{ padding:8px; font-weight:600; text-align:center; font-size:12.5px; color:#5A645F; } .sv-matrix tbody th{ text-align:left; color:#161A19; font-size:14px; min-width:140px; } .sv-matrix td{ text-align:center; border-top:1px solid #F0F3F2; padding:6px; } .sv-matrix label{ display:block; padding:6px; cursor:pointer; } .sv-matrix input{ accent-color:#0F8080; width:18px; height:18px; }
.sv-rank{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .sv-rank li{ display:flex; gap:10px; align-items:center; padding:9px 12px; border:1.5px solid #E3E9E7; border-radius:12px; background:#fff; } .sv-rank .n{ width:26px; height:26px; border-radius:50%; background:#E8F5F3; color:#0A5A5A; display:grid; place-items:center; font-weight:800; font-size:13px; } .sv-rank b{ flex:1; font-weight:600; font-size:14.5px; } .sv-rank button{ border:0; background:#F0F4F3; width:32px; height:32px; border-radius:8px; cursor:pointer; } .sv-rank button:disabled{ opacity:.35; }
.sv-geo{ border:1.5px solid #0F8080; color:#0A5A5A; background:#F2FAF8; border-radius:12px; padding:11px 16px; font:inherit; font-weight:700; cursor:pointer; display:inline-flex; gap:8px; align-items:center; } .sv-geoval{ color:#1C6E3E; font-size:13.5px; margin:8px 0 0; }
.sv-prog{ display:flex; align-items:center; gap:12px; margin-bottom:12px; color:#5A645F; font-size:12.5px; font-weight:600; } .sv-pbar{ flex:1; height:8px; background:#E3EAE8; border-radius:99px; overflow:hidden; } .sv-pbar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#15A897,#0F8080); transition:width .3s; border-radius:99px; }
.sv-submit{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; } .sv-btn{ display:inline-flex; align-items:center; justify-content:center; background:#0F8080; color:#fff; border:0; border-radius:12px; padding:13px 28px; font:inherit; font-weight:700; font-size:15px; cursor:pointer; text-decoration:none; } .sv-btn:hover{ background:#0A5A5A; } .sv-btn:disabled{ opacity:.55; cursor:not-allowed; } .sv-btn.ghost{ background:#fff; color:#0A5A5A; border:1.5px solid #BEE3DC; } .sv-msg{ font-size:13.5px; color:#1C6E3E; } .sv-msg.bad{ color:#C0182E; font-weight:600; } .sv-hp{ position:absolute; left:-9999px; height:0; overflow:hidden; } .sv-foot{ text-align:center; color:#8A928F; font-size:12px; margin-top:26px; }
.sv-sum{ text-align:left; margin-top:18px; border-top:1px solid #EEF1F0; padding-top:14px; } .sv-sum h4{ margin:0 0 10px; } .sv-sq{ margin-bottom:14px; } .sv-rbar{ display:grid; grid-template-columns:130px 1fr 44px; gap:8px; align-items:center; font-size:13px; margin-top:6px; } .sv-rbar > div{ height:10px; background:#EEF2F1; border-radius:99px; overflow:hidden; } .sv-rbar i{ display:block; height:100%; background:#15A897; border-radius:99px; }
@media (max-width:560px){ .sv-card{ padding:20px 18px 16px; } .sv-q{ padding:16px 16px; } .sv-nums{ grid-template-columns:repeat(5,1fr); } .sv-nums.n11{ grid-template-columns:repeat(6,1fr); } .sv-likert label{ min-width:100%; } }
/* survey polish: the HTML "hidden" attribute must always win over component display rules */
.sv-wrap [hidden], .svb [hidden], .mxp [hidden]{ display:none !important; }
.svb .sv-k6{ grid-template-columns:repeat(auto-fit,minmax(148px,1fr)) !important; }
@media (max-width:560px){ .sv-matrix th{ padding:6px 3px; font-size:11px; } .sv-matrix tbody th{ min-width:92px; font-size:13px; } .sv-matrix td{ padding:2px; } .sv-matrix label{ padding:8px 4px; } }

/* ============================================================
   Insights & reports (admin/insights.php, admin/reports.php)
   ============================================================ */
.insp [hidden]{ display:none !important; } .insp .epk-pill.green{ background:#fff; color:#1C6E3E; border:1px solid #BFE3CB; }
.ins-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; padding:12px 16px !important; } .ins-cust{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#5A645F; } .ins-cust input{ border:1px solid #DDE3E1; border-radius:9px; padding:7px 9px; font:inherit; font-size:13px; } .ins-team{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#5A645F; font-weight:600; } .ins-team select{ border:1px solid #DDE3E1; border-radius:9px; padding:8px 10px; font:inherit; font-size:13px; background:#fff; } .ins-plabel{ margin-left:auto; font-size:12.5px; color:#6A726F; font-weight:600; }
.ins-kpis{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin-bottom:18px; } .ins-kpi{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid #EAEDEB; border-radius:16px; padding:16px; text-decoration:none; color:inherit; box-shadow:0 10px 26px -22px rgba(10,90,90,.6); transition:.15s; } .ins-kpi:hover{ transform:translateY(-2px); border-color:#9CC7C2; box-shadow:0 16px 30px -20px rgba(10,90,90,.7); }
.ins-ic{ flex:0 0 auto; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:22px; } .ins-kpi b{ display:block; font-size:25px; font-weight:800; color:#161A19; line-height:1.15; letter-spacing:-.01em; } .ins-kpi span:not(.ins-ic):not(.ins-d){ display:block; font-size:12.5px; color:#6A726F; margin:2px 0 6px; line-height:1.35; }
.ins-d{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; border-radius:99px; padding:3px 9px; background:#F0F3F2; color:#6A726F; } .ins-d.good{ background:#E4F4E9; color:#1C6E3E; } .ins-d.bad{ background:#FDE8EB; color:#B4182D; } .ins-d.flat{ background:#F0F3F2; color:#5A645F; } .ins-d.asof{ background:#EEF3FB; color:#2F5FD0; } .ins-d.none{ background:transparent; color:#9AA29F; font-weight:500; padding-left:0; }
.ins-jump{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px; position:sticky; top:0; z-index:5; background:linear-gradient(#F5F4F1 70%,transparent); padding:10px 0; } .ins-jump a{ font-size:12.5px; font-weight:700; text-decoration:none; color:#0A5A5A; background:#fff; border:1px solid #D6E6E3; border-radius:99px; padding:6px 14px; } .ins-jump a:hover{ background:#0F8080; color:#fff; border-color:#0F8080; }
.ins-sec{ margin:26px 0 12px; font:400 24px 'Instrument Serif',Georgia,serif; color:#0A5A5A; scroll-margin-top:60px; } .ins-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .ins-card.wide{ grid-column:1/-1; } .ins-card svg{ width:100%; height:auto; } .ins-mi{ display:flex; gap:8px; align-items:center; padding:10px 12px; border-radius:8px; font-size:13.5px; text-decoration:none; color:inherit; } .ins-mi:hover{ background:#F2F6F5; }
.ins-skel{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; } .ins-skel i{ height:96px; border-radius:16px; background:linear-gradient(90deg,#EEF2F1 25%,#F7F9F8 50%,#EEF2F1 75%); background-size:200% 100%; animation:insk 1.2s infinite; } @keyframes insk{ to{ background-position:-200% 0; } }
.rp-picks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:12px; } .rp-pick{ display:flex !important; flex-direction:row !important; gap:14px; align-items:flex-start; text-align:left; cursor:pointer; font:inherit; border:1px solid #EAEDEB !important; transition:.15s; } .rp-pick:hover{ border-color:#0F8080 !important; transform:translateY(-2px); } .rp-pick b{ display:block; font-size:15px; } .rp-pick small{ display:block; color:#6A726F; font-size:12.5px; line-height:1.45; margin-top:2px; }
.rp-saved{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; } .rp-sv{ display:flex; gap:12px; align-items:center; text-align:left; background:#F2FAF8; border:1px solid #BEE3DC; border-radius:14px; padding:12px 14px; cursor:pointer; font:inherit; } .rp-sv i{ font-size:20px; color:#0F8080; } .rp-sv b{ display:block; font-size:14px; } .rp-sv small{ color:#6A726F; font-size:12px; } .rp-sv:hover{ background:#E4F4F0; }
.rp-grid{ display:grid; grid-template-columns:350px minmax(0,1fr); gap:18px; align-items:start; } .rp-side{ display:flex; flex-direction:column; gap:12px; position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto; padding-right:2px; } .rp-sec h4{ margin:0 0 10px; font-size:14px; color:#0A5A5A; } .rp-sec .sv-seg{ margin-bottom:12px; } .rp-lab{ font-size:11.5px; font-weight:800; color:#6A726F; text-transform:uppercase; letter-spacing:.06em; }
.rp-sec select, .rp-sec input[type=text], .rp-sec input:not([type=checkbox]){ border:1px solid #DDE3E1; border-radius:9px; padding:8px 10px; font:inherit; font-size:13px; background:#fff; width:100%; box-sizing:border-box; } .rp-cols{ max-height:260px; overflow:auto; border:1px solid #EAEDEB; border-radius:10px; padding:4px 10px; } .rp-colsh{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:6px; } .rp-colsh a{ color:#0F8080; font-weight:600; }
.rp-m, .rp-fr{ display:flex; gap:6px; align-items:center; margin-top:8px; flex-wrap:wrap; } .rp-m select, .rp-fr select, .rp-fr input{ flex:1; min-width:90px; width:auto !important; } .rp-rows{ font-size:13px; color:#6A726F; flex:1; } .rp-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; } .rp-chips button{ border:1px solid #D6E6E3; background:#fff; border-radius:99px; padding:5px 11px; font:inherit; font-size:12px; font-weight:600; color:#0A5A5A; cursor:pointer; } .rp-chips button:hover{ background:#0F8080; color:#fff; } .rp-run{ width:100%; justify-content:center; padding:13px !important; }
.rp-main{ min-width:0; display:flex; flex-direction:column; gap:14px; } .rp-tools{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px !important; } .rp-info b{ font-size:16px; color:#0A5A5A; } .rp-info span{ color:#6A726F; font-size:13px; } .rp-acts{ display:flex; gap:6px; flex-wrap:wrap; } .rp-chart svg{ width:100%; height:auto; }
.rp-tbl{ overflow:auto; max-height:640px; } .rp-tbl th{ position:sticky; top:0; z-index:1; } .rp-tbl th.r, .rp-tbl td.r{ text-align:right; font-variant-numeric:tabular-nums; } .rp-tbl tr.tot td{ font-weight:800; background:#F2FAF8; border-top:2px solid #BEE3DC; color:#0A5A5A; }
@media (max-width:1000px){ .rp-grid{ grid-template-columns:1fr; } .rp-side{ position:static; max-height:none; } .ins-grid{ grid-template-columns:1fr; } }
/* insights: the period selector wraps on narrow screens instead of running off the edge */
@media (max-width:700px){ .ins-bar .sv-seg{ flex-wrap:wrap; max-width:100%; } .ins-bar .sv-seg button{ padding:7px 11px; } .ins-plabel{ margin-left:0; width:100%; } .ins-cust{ flex-wrap:wrap; } }

/* ============================================================ Arpan Collect (kc-*) — projects, data, form renderer; builder (kcb-*) ============================================================ */
.kcx{ max-width:1320px; margin:0 auto; } .kcx h1{ font-size:26px; margin:0; letter-spacing:-.01em; } .kcx h2{ font-size:20px; margin:8px 0 6px; } .kcx h3{ font-size:16px; margin:0; } .kcx h4{ font-size:13px; margin:16px 0 6px; text-transform:uppercase; letter-spacing:.05em; color:#6A726F; }
.kc-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin:6px 0 14px; flex-wrap:wrap; } .kc-sub{ margin:4px 0 0; color:#6A726F; max-width:70ch; } .kc-muted{ color:#6A726F; font-size:13px; } .kc-center{ text-align:center; padding:26px !important; }
.kc-crumbs{ display:flex; align-items:center; gap:6px; font-size:13px; color:#6A726F; margin-bottom:6px; flex-wrap:wrap; } .kc-crumbs a{ color:#0F8080; text-decoration:none; font-weight:600; } .kc-crumbs a:hover{ text-decoration:underline; } .kc-crumbs i{ font-size:12px; }
.kc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; } .kc-card{ display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; border-left:4px solid #0F8080 !important; transition:transform .12s,box-shadow .12s; } .kc-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(15,60,56,.12); }
.kc-card-h{ display:flex; justify-content:space-between; align-items:center; gap:8px; } .kc-card p{ margin:0; } .kc-stats{ display:flex; gap:14px; font-size:13px; color:#3F4744; flex-wrap:wrap; } .kc-stats b{ color:#161A19; } .kc-card-f{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; } .kc-role{ font-size:11px; font-weight:800; background:#E4F3F1; color:#0B6666; border-radius:99px; padding:3px 10px; }
.kc-empty{ text-align:center; padding:44px 20px !important; } .kc-empty>i{ font-size:42px; color:#0F8080; } .kc-empty p{ max-width:56ch; margin:6px auto 14px; color:#4A524F; } .kc-ok{ color:#15A06B !important; } .kc-code{ background:#F0F3F2; border-radius:8px; padding:10px 12px; display:inline-block; text-align:left; font-size:13px; user-select:all; }
.kc-bar{ margin:0 0 12px; } .kc-tbl-w{ padding:0 !important; overflow-x:auto; } .kc-tbl{ width:100%; border-collapse:collapse; font-size:14px; } .kc-tbl th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:#6A726F; padding:11px 14px; background:#F8F7F4; border-bottom:1px solid #E6E3DC; white-space:nowrap; } .kc-tbl td{ padding:11px 14px; border-bottom:1px solid #EFEDE7; vertical-align:top; } .kc-tbl tr:last-child td{ border-bottom:0; } .kc-tbl a{ color:#0F8080; text-decoration:none; } .kc-act{ white-space:nowrap; text-align:right; }
.kc-add{ margin-bottom:12px; } .kc-addrow{ position:relative; margin:8px 0 4px; } .kc-addrow input{ width:100%; max-width:420px; } .kc-sugg{ max-width:620px; } .kc-su{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid #E6E3DC; border-radius:10px; margin-top:6px; background:#fff; flex-wrap:wrap; } .kc-su select{ margin-left:auto; } .kc-perms{ font-size:12px; max-width:420px; }
.kc-chk{ display:flex; align-items:center; gap:8px; margin:6px 0; font-size:14px; cursor:pointer; } .kc-set{ display:flex; flex-direction:column; gap:10px; } .kc-two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; } .kc-warn,.kc-warnbox{ color:#8A5A00; background:#FFF4DA; border:1px solid #F2DDA3; border-radius:10px; padding:10px 12px; } .kc-warnbox{ margin-bottom:12px; display:flex; gap:8px; align-items:center; }
.kc-url{ display:flex; gap:8px; } .kc-url input{ flex:1; } .kc-exp .bd-acts{ margin-top:8px; }
.kc-fill{ max-width:860px; margin:0 auto; } .kc-fill h1{ margin-bottom:14px; } .kc-submit{ display:flex; align-items:center; gap:14px; margin-top:22px; padding-top:16px; border-top:1px solid #EFEDE7; } .bd-btn.lg{ padding:12px 22px; font-size:15px; }
.kc-kpis{ display:flex; gap:12px; margin-bottom:12px; } .kc-flt{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; padding:12px 14px !important; } .kc-flt input[type=text],.kc-flt input:not([type]){ flex:1; min-width:180px; } .kc-bulk{ display:flex; gap:8px; align-items:center; background:#E4F3F1; border:1px solid #BFE0DC; border-radius:12px; padding:8px 12px; margin-bottom:12px; flex-wrap:wrap; }
.kc-data td{ max-width:260px; overflow:hidden; text-overflow:ellipsis; } .kc-mask{ color:#9AA19E; letter-spacing:2px; } .kc-pager{ display:flex; align-items:center; gap:12px; justify-content:flex-end; margin:12px 0; font-size:13px; color:#6A726F; }
.kc-subhead{ display:flex; gap:10px; align-items:center; margin-bottom:10px; flex-wrap:wrap; } .kc-files{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .kc-thumb img{ height:64px; border-radius:8px; border:1px solid #E6E3DC; } .kc-hist{ margin:0; padding-left:18px; font-size:13px; color:#4A524F; } .kc-subact{ margin-top:16px; padding-top:14px; border-top:1px solid #EFEDE7; }
.kc-issues{ display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow:auto; } .kc-issue{ display:flex; gap:10px; padding:9px 12px; border-radius:10px; font-size:13.5px; border:1px solid #E6E3DC; } .kc-issue.red{ background:#FDECEE; border-color:#F3C4CB; } .kc-issue.red i{ color:#B4182D; } .kc-issue.amber{ background:#FFF4DA; border-color:#F2DDA3; } .kc-issue.amber i{ color:#8A5A00; } .kc-issue i{ font-size:18px; margin-top:1px; }
.kc-audit .kc-card-h{ margin-bottom:10px; } .kc-cols{ columns:2; } .kc-pubbody{ background:#F5F4F1; margin:0; font-family:Inter,system-ui,sans-serif; color:#161A19; } .kc-pub{ max-width:760px; margin:0 auto; padding:22px 16px 60px; } .kc-pub header{ padding:6px 0 16px; } .kc-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
/* ---- form renderer ---- */
.kc-form{ display:flex; flex-direction:column; gap:18px; } .kc-langbar{ display:flex; align-items:center; gap:8px; color:#6A726F; } .kc-langbar select{ max-width:240px; } .kc-group{ border:1px solid #E6E3DC; border-radius:14px; padding:14px 16px 16px; margin:0; display:flex; flex-direction:column; gap:16px; background:#FCFBF9; } .kc-group legend{ font-weight:700; padding:0 8px; color:#0B6666; }
.kc-q{ display:flex; flex-direction:column; gap:6px; } .kc-q[hidden],.kc-group[hidden],.kc-repeat[hidden]{ display:none !important; } .kc-q-l{ font-weight:600; font-size:15px; line-height:1.35; } .kc-req{ color:#E0223D; } .kc-q-h{ color:#6A726F; font-size:13px; } .kc-gh{ font-size:13px; color:#4A524F; } .kc-err{ color:#B4182D; font-size:13px; font-weight:600; min-height:0; } .kc-err:empty{ display:none; } .kc-q.bad .kc-in input,.kc-q.bad .kc-in select,.kc-q.bad .kc-in textarea{ border-color:#E0223D !important; background:#FFF8F8; }
.kc-in{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .kc-in input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),.kc-in select,.kc-in textarea{ width:100%; max-width:520px; } .kc-in textarea{ resize:vertical; } .kc-unit{ color:#6A726F; } .kc-range-o{ font-weight:700; min-width:34px; text-align:center; } .kc-t-note .kc-q-l{ font-weight:500; color:#3F4744; }
.kc-opts{ display:flex; flex-direction:column; gap:8px; width:100%; } .kc-opts.hz{ flex-direction:row; flex-wrap:wrap; gap:8px 18px; } .kc-opt{ display:flex; gap:10px; align-items:center; padding:9px 12px; border:1px solid #E6E3DC; border-radius:10px; background:#fff; cursor:pointer; min-height:42px; } .kc-opts.hz .kc-opt{ padding:8px 12px; } .kc-opt:hover{ border-color:#0F8080; } .kc-opt input{ width:18px; height:18px; flex:none; accent-color:#0F8080; } .kc-sel{ width:100%; }
.kc-rank{ display:flex; flex-direction:column; gap:6px; width:100%; max-width:520px; } .kc-rank-r{ display:flex; align-items:center; gap:10px; padding:7px 10px; border:1px solid #E6E3DC; border-radius:10px; background:#fff; } .kc-rank-n{ width:24px; height:24px; border-radius:50%; background:#E4F3F1; color:#0B6666; font-weight:800; font-size:12px; display:grid; place-items:center; } .kc-rank-t{ flex:1; }
.kc-geo{ display:flex; gap:8px; flex-wrap:wrap; width:100%; } .kc-geo input{ max-width:170px !important; } .kc-pts{ width:100%; display:flex; flex-direction:column; gap:4px; } .kc-pt{ display:flex; justify-content:space-between; align-items:center; padding:5px 10px; background:#F0F3F2; border-radius:8px; font-size:13px; } .kc-file{ font-size:13px; color:#0B6666; width:100%; }
.kc-repeat{ border:1px dashed #BFD6D3; border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:12px; background:#FAFCFB; } .kc-rep-h{ font-weight:700; color:#0B6666; } .kc-rep-i{ border:1px solid #E6E3DC; border-radius:12px; padding:12px 14px; background:#fff; display:flex; flex-direction:column; gap:16px; } .kc-rep-t{ display:flex; justify-content:space-between; align-items:center; }
/* ---- builder ---- */
.kcb-bar{ display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; } .kcb-bar-l{ display:flex; gap:8px; align-items:center; } .kcb-st{ font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:99px; background:#F0F3F2; color:#5A645F; } .kcb-st.green{ background:#E3F6EC; color:#0E7A4A; } .kcb-st.amber{ background:#FFF4DA; color:#8A5A00; } .kcb-st.red{ background:#FDECEE; color:#B4182D; }
.kcb-main{ display:grid; grid-template-columns:minmax(300px,1fr) minmax(340px,1.15fr); gap:14px; align-items:start; } @media (max-width:980px){ .kcb-main{ grid-template-columns:1fr; } }
.kcb-tree,.kcb-panel{ background:#fff; border:1px solid #E6E3DC; border-radius:16px; padding:12px; } .kcb-panel{ position:sticky; top:12px; max-height:calc(100vh - 40px); overflow:auto; padding:14px 16px; } .kcb-tree{ min-height:240px; }
.kcb-node{ margin:4px 0; } .kcb-row{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #E6E3DC; border-radius:10px; background:#fff; cursor:pointer; position:relative; } .kcb-row:hover{ border-color:#9CC9C5; background:#FAFDFC; } .kcb-row.sel{ border-color:#0F8080; background:#EAF6F4; box-shadow:0 0 0 2px rgba(15,128,128,.15); } .kcb-row.bad{ border-left:4px solid #E0223D; } .kcb-row.warn{ border-left:4px solid #E7A93A; }
.kcb-grip{ color:#B3B9B6; cursor:grab; } .kcb-ti{ color:#0F8080; font-size:18px; } .kcb-lab{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:14px; } .kcb-lab em{ color:#9AA19E; font-weight:400; } .kcb-nm{ font-size:11.5px; color:#6A726F; background:#F0F3F2; padding:1px 6px; border-radius:6px; } .kcb-b{ color:#0F8080; font-size:15px; display:inline-flex; } .kcb-b.red{ color:#B4182D; }
.kcb-acts{ display:none; gap:2px; } .kcb-row:hover .kcb-acts,.kcb-row.sel .kcb-acts{ display:inline-flex; } .kcb-kids{ margin:4px 0 4px 18px; padding-left:10px; border-left:2px solid #DCE9E7; } .kcb-kids.rep{ border-left-color:#0F8080; } .kcb-addin{ border:1px dashed #BFD6D3; background:transparent; color:#0B6666; border-radius:10px; padding:7px 10px; cursor:pointer; width:100%; margin-top:4px; font-size:13px; } .kcb-addin:hover{ background:#F0F8F7; }
.kcb-node.dragging{ opacity:.4; } .kcb-row.drop-before{ box-shadow:0 -3px 0 #0F8080; } .kcb-row.drop-after{ box-shadow:0 3px 0 #0F8080; } .kcb-row.drop-inside{ background:#DDF1EE; outline:2px dashed #0F8080; }
.kcb-empty{ text-align:center; color:#6A726F; padding:30px 10px; } .kcb-empty i{ font-size:34px; color:#9CC9C5; } .kcb-addbar{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.kcb-pempty{ text-align:center; color:#4A524F; padding:20px 6px; } .kcb-pempty>i{ font-size:34px; color:#9CC9C5; } .kcb-help{ text-align:left; background:#F8F7F4; border-radius:12px; padding:10px 14px; margin-top:14px; font-size:13px; } .kcb-help ul{ margin:6px 0 0; padding-left:18px; }
.kcb-ph{ display:flex; gap:8px; align-items:center; margin-bottom:10px; } .kcb-ph i{ color:#0F8080; font-size:20px; } .kcb-ph select{ margin-left:auto; max-width:200px; } .kcb-two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .kcb-three{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } @media (max-width:560px){ .kcb-two,.kcb-three{ grid-template-columns:1fr; } }
.kcb-sec{ border-top:1px solid #EFEDE7; margin-top:12px; padding-top:12px; } .kcb-sec>b{ display:block; margin-bottom:4px; } .kcb-sub{ margin:2px 0 6px 24px; } .kcb-panel .bd-f{ margin-bottom:10px; } .kcb-panel input:not([type=checkbox]):not([type=radio]),.kcb-panel select,.kcb-panel textarea{ width:100%; }
.kcb-fxw{ margin:4px 0 8px; } .kcb-fx{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important; font-size:13px !important; width:100%; resize:vertical; } .kcb-fxt{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; } .kcb-fxs{ font-size:12.5px; margin-top:4px; min-height:0; } .kcb-fxs.ok{ color:#0E7A4A; } .kcb-fxs.bad{ color:#B4182D; font-weight:600; } .kcb-fxs:empty{ display:none; }
.kcb-ch{ width:100%; border-collapse:collapse; margin:8px 0; font-size:13px; } .kcb-ch th{ text-align:left; font-size:11px; text-transform:uppercase; color:#6A726F; padding:4px 4px; } .kcb-ch td{ padding:3px 3px; } .kcb-ch input{ padding:6px 8px !important; }
.kcb-menu{ position:absolute; z-index:10050; background:#fff; border:1px solid #D9D6CE; border-radius:12px; box-shadow:0 14px 36px rgba(0,0,0,.18); max-height:320px; overflow:auto; width:310px; padding:6px; } .kcb-menu.wide{ width:410px; } .kcb-menu button{ display:block; width:100%; text-align:left; background:transparent; border:0; padding:7px 10px; border-radius:8px; cursor:pointer; font-size:13px; } .kcb-menu button:hover{ background:#EAF6F4; }
.kcb-cr{ display:flex; gap:6px; align-items:center; margin:6px 0; flex-wrap:wrap; } .kcb-cr select,.kcb-cr input{ min-width:120px; max-width:170px; } .kcb-code{ display:block; background:#F0F3F2; padding:8px 10px; border-radius:8px; margin-bottom:10px; font-size:13px; word-break:break-all; } .kcb-res{ background:#EAF6F4; border-radius:10px; padding:10px 12px; margin-top:10px; font-size:14px; }
.kcb-tg h4{ margin:14px 0 6px; } .kcb-tgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; } .kcb-tb{ display:flex; gap:8px; align-items:center; text-align:left; background:#fff; border:1px solid #E6E3DC; border-radius:12px; padding:10px 12px; cursor:pointer; font-size:13.5px; } .kcb-tb i{ font-size:20px; color:#0F8080; } .kcb-tb:hover{ border-color:#0F8080; background:#F0F8F7; }
.kcb-addl{ display:flex; gap:8px; margin-top:10px; } .kcb-addl input{ flex:1; } .kcb-tt{ max-height:62vh; overflow:auto; } .kcb-tt input{ width:100%; min-width:150px; } .kcb-tt input.missing{ background:#FFF4DA; } .kcb-pvbar{ display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:12px; border-top:1px solid #EFEDE7; }
.kcb-iss{ border-radius:12px; padding:6px 12px; margin-bottom:10px; border:1px solid #F2DDA3; background:#FFF4DA; } .kcb-iss.bad{ border-color:#F3C4CB; background:#FDECEE; } .kcb-iss>button{ background:none; border:0; cursor:pointer; font-weight:700; padding:6px 0; width:100%; text-align:left; } #kcb-il{ display:flex; flex-direction:column; gap:4px; padding:4px 0 8px; } #kcb-il a{ color:#3F4744; text-decoration:none; font-size:13px; padding:4px 6px; border-radius:6px; } #kcb-il a:hover{ background:rgba(255,255,255,.7); } #kcb-il[hidden]{ display:none; }
@media (max-width:640px){ .kc-cols{ columns:1; } .kc-tbl th,.kc-tbl td{ padding:9px 10px; } .kc-fill{ padding:14px !important; } .kc-submit .bd-btn{ width:100%; justify-content:center; } }

/* ---- Arpan Collect: fields match the portal's look ---- */
.kc-form input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),.kc-form select,.kc-form textarea,.kcx .kc-flt input:not([type=checkbox]),.kcx .kc-flt select,.kcx .kc-addrow input,.kcx .kc-url input,.kc-su select,.kcb-panel input:not([type=checkbox]):not([type=radio]),.kcb-panel select,.kcb-panel textarea,.kcb-tt input,.kcb-ch input,.kcb-cr select,.kcb-cr input,.kcb-ph select,.kcb-addl input,.kcx .kc-tbl select,.kcx .kc-set input:not([type=checkbox]),.kcx .kc-set textarea,.kcx .kc-set select,.bd-mo .kcb-cjoin select,.bd-mo .kcb-addl input,.bd-mo #ld-n,.bd-mo #pm,.bd-mo .kc-form input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){ border:1px solid #E3E7E5; background:#FCFBF9; border-radius:11px; padding:9px 12px; font:inherit; font-size:14px; color:#12201D; outline:none; box-sizing:border-box; transition:border-color .12s,box-shadow .12s; }
.kc-form input:focus,.kc-form select:focus,.kc-form textarea:focus,.kcx .kc-flt input:focus,.kcx .kc-flt select:focus,.kcx .kc-addrow input:focus,.kcb-panel input:focus,.kcb-panel select:focus,.kcb-panel textarea:focus,.kcb-tt input:focus,.kcb-ch input:focus,.kcx .kc-set input:focus,.kcx .kc-set textarea:focus{ border-color:#15A897; background:#fff; box-shadow:0 0 0 3px rgba(21,168,151,.14); }
.kc-form input:disabled,.kc-form select:disabled,.kc-form textarea:disabled{ background:#F3F2EE; color:#4A524F; }
.kc-in input[type=file]{ font-size:13px; max-width:100%; } .kc-in input[type=range]{ flex:1; min-width:160px; max-width:420px; accent-color:#0F8080; } .kc-form input[type=checkbox],.kc-form input[type=radio]{ accent-color:#0F8080; }
.kc-flt>*{ flex:0 1 auto; } .kc-flt #fl-q{ flex:1 1 220px; min-width:200px; } .kc-flt .ar-pick,.kc-flt .ar-pick-wrap{ max-width:190px; } .kc-flt{ align-items:center; }
.kcx textarea.kcb-fx{ background:#FCFBF9; }
.kc-dates{ display:flex; gap:10px; flex-wrap:wrap; } .kc-dates>*{ flex:0 1 190px; min-width:150px; }
.kc-bulk[hidden],.kc-kpis[hidden],.kc-fill [hidden]{ display:none !important; }

/* ---- Arpan Collect: reports, quality, integrations, themes ---- */
.kc-svg{ width:100%; height:auto; display:block; } .kc-map{ border:1px solid #E6E3DC; border-radius:12px; } .kcx .epk-card+.epk-card,.kcx .kc-kpis+.epk-card,.kcx .kc-two+.epk-card{ margin-top:12px; } .kc-h3{ margin:22px 0 10px !important; }
.kc-kpis{ flex-wrap:wrap; } .kc-prog{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; align-items:center; } .kc-pbar{ grid-column:1/-1; height:12px; background:#EFEDE7; border-radius:99px; overflow:hidden; } .kc-pbar i{ display:block; height:100%; background:linear-gradient(90deg,#15A897,#0F8080); border-radius:99px; }
.kc-qgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:12px; } .kc-q-card h4{ text-transform:none; letter-spacing:0; font-size:15px; color:#161A19; margin:0 0 2px; } .kc-bars{ display:flex; flex-direction:column; gap:6px; margin-top:10px; } .kc-bar{ display:grid; grid-template-columns:minmax(80px,38%) 1fr auto; gap:8px; align-items:center; font-size:13px; } .kc-bl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kc-bt{ height:10px; background:#EFEDE7; border-radius:99px; overflow:hidden; } .kc-bt i{ display:block; height:100%; background:#15A897; border-radius:99px; min-width:2px; } .kc-bn{ color:#4A524F; font-variant-numeric:tabular-nums; }
.kc-stat4{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:10px 0; } .kc-stat4 span{ display:flex; flex-direction:column; font-size:11.5px; color:#6A726F; } .kc-stat4 b{ font-size:18px; color:#161A19; } .kc-hist{ display:flex; gap:4px; align-items:flex-end; height:70px; } .kc-hist div{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; } .kc-hist i{ display:block; width:100%; background:#15A897; border-radius:4px 4px 0 0; min-height:2px; } .kc-hist small{ font-size:10px; color:#9AA19E; }
.kc-cross td small{ color:#4A524F; } .kc-cross tr.tot td{ border-top:2px solid #E6E3DC; } .kc-keys{ display:flex; flex-direction:column; max-height:150px; overflow:auto; } .kc-errs{ max-height:240px; overflow:auto; margin:8px 0; } .kc-ok-t{ color:#0E7A4A; font-weight:700; } .kc-dim{ opacity:.55; } .kcx details{ margin-top:10px; font-size:13px; }
.kc-theme-grid.kc-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px 24px; align-items:start; } .kc-theme-grid.kc-form>.kc-langbar,.kc-theme-grid.kc-form>.kc-group,.kc-theme-grid.kc-form>.kc-repeat{ grid-column:1/-1; } .kc-theme-compact.kc-form{ gap:10px; } .kc-theme-compact .kc-q{ gap:3px; } .kc-theme-compact .kc-q-l{ font-size:14px; } .kc-theme-compact .kc-opt{ padding:6px 10px; min-height:34px; }
@media print{ .ar-sidebar,.ar-topbar,.bd-tabs,.kc-top .bd-acts,.bd-acts{ display:none !important; } .kcx .epk-card{ break-inside:avoid; box-shadow:none !important; } }
.bd-f label.kc-chk,.kc-keys label.kc-chk{ display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; font-weight:400; font-size:14px; text-transform:none; letter-spacing:0; text-align:left; margin:5px 0; } .bd-f .kc-chk input,.kc-keys input{ width:auto; flex:none; margin:0; }
.kcb-lock{ background:#FFF4DA; border:1px solid #F2DDA3; border-radius:10px; padding:8px 12px; margin-bottom:10px; font-size:13px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ============ Arpan Collect — friendlier look: masthead, guide, journey, steps, choices, public page ============ */
.kc-brand{ display:flex; align-items:center; gap:10px; margin:2px 0 10px; } .kc-brand img{ width:44px; height:44px; border-radius:11px; box-shadow:0 2px 8px rgba(224,34,61,.25); } .kc-brand b{ font-size:15px; letter-spacing:-.01em; } .kc-brand span{ color:#6A726F; font-size:12.5px; }
.kc-mast{ display:flex; gap:22px; align-items:center; padding:22px 26px; border-radius:22px; margin:4px 0 16px; background:radial-gradient(900px 260px at 100% 0%,rgba(224,34,61,.10),transparent 60%),linear-gradient(135deg,#EAF6F4 0%,#FFFFFF 62%); border:1px solid #D5E9E6; box-shadow:0 14px 40px rgba(15,80,76,.08); }
.kc-mast-logo{ width:96px; height:96px; border-radius:24px; flex:none; box-shadow:0 10px 26px rgba(224,34,61,.32); } .kc-mast-t h1{ font-size:30px !important; letter-spacing:-.02em; } .kc-mast-t p{ margin:6px 0 14px; color:#3F4744; max-width:62ch; font-size:15px; line-height:1.5; }
@media (max-width:640px){ .kc-mast{ flex-direction:column; align-items:flex-start; padding:18px; } .kc-mast-logo{ width:80px; height:80px; } }
.kc-how{ margin:0 0 6px; } .kc-how summary{ cursor:pointer; font-weight:700; color:#0B6666; padding:6px 0; } .kc-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:10px 0 4px; } .kc-step{ position:relative; background:#fff; border:1px solid #E6E3DC; border-radius:16px; padding:16px 16px 14px; } .kc-step>i{ font-size:26px; color:#0F8080; display:block; margin-bottom:6px; } .kc-step b{ display:block; font-size:15px; } .kc-step p{ margin:4px 0 0; color:#5A645F; font-size:13px; line-height:1.45; } .kc-step-n{ position:absolute; top:12px; right:14px; width:24px; height:24px; border-radius:50%; background:#E4F3F1; color:#0B6666; font-weight:800; font-size:12px; display:grid; place-items:center; } .kc-steps.big .kc-step{ padding:20px; } .kc-steps.big .kc-step>i{ font-size:32px; }
.kc-start{ padding:26px !important; } .kc-start h2{ margin-top:0; } .kc-start .bd-acts{ margin-top:16px; }
.kc-check{ margin-bottom:14px; } .kc-check-h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; } .kc-check ol{ list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; } .kc-check li{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; background:#F8F7F4; color:#6A726F; } .kc-check li i{ font-size:20px; margin-top:1px; } .kc-check li b{ display:block; color:#161A19; font-size:14px; } .kc-check li span{ font-size:12.5px; } .kc-check li.on{ background:#E9F6EE; } .kc-check li.on i{ color:#15A06B; } .kc-check li.next{ background:#FFF4DA; outline:2px solid #F2DDA3; } .kc-check li.next i{ color:#B8800F; }
.kc-hint{ max-width:75ch; } .kc-journey{ display:flex; align-items:center; gap:8px; margin:6px 0 12px; flex-wrap:wrap; } .kc-journey span{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:99px; background:#F0F3F2; color:#7A827F; font-size:13px; font-weight:600; } .kc-journey span.done{ background:#E3F6EC; color:#0E7A4A; } .kc-journey span.now{ background:#0F8080; color:#fff; box-shadow:0 6px 16px rgba(15,128,128,.3); } .kc-journey em{ width:18px; height:2px; background:#DCE6E4; border-radius:2px; } .kc-tabhelp{ margin:2px 0 12px; color:#6A726F; font-size:13.5px; }
/* ---- the form people fill in ---- */
.kc-fill{ max-width:820px; } .kc-fill-h h1{ font-size:26px !important; margin:0; letter-spacing:-.02em; } .kc-fill-h p{ margin:6px 0 18px; }
.kc-pagebar{ position:sticky; top:0; z-index:5; background:rgba(255,255,255,.94); backdrop-filter:blur(6px); padding:10px 0 8px; margin:0 0 4px; border-bottom:1px solid #EFEDE7; } .kc-pagebar-t{ display:flex; gap:10px; align-items:baseline; font-size:14px; } .kc-pagebar-t b{ color:#0B6666; } .kc-pagebar-t span{ color:#4A524F; font-weight:600; } .kc-pbar2{ height:8px; background:#EFEDE7; border-radius:99px; margin-top:8px; overflow:hidden; } .kc-pbar2 i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#15A897,#0F8080); border-radius:99px; transition:width .25s ease; }
.kc-page{ display:flex; flex-direction:column; gap:20px; padding-top:12px; } .kc-page[hidden]{ display:none; } .kc-pagenav{ display:flex; justify-content:space-between; gap:10px; margin-top:20px; padding-top:14px; border-top:1px solid #EFEDE7; } .kc-pagenav .bd-btn{ min-width:120px; justify-content:center; padding:11px 18px; }
.kc-q{ padding:2px 0; } .kc-q-l{ font-size:16px; } .kc-follow{ margin-left:16px; padding:12px 14px 12px 16px; border-left:3px solid #9CD6CE; background:linear-gradient(90deg,rgba(21,168,151,.07),transparent 70%); border-radius:0 12px 12px 0; } .kc-follow .kc-q-l{ font-size:15px; }
@keyframes kcIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } .kc-in-new{ animation:kcIn .24s ease-out; } @media (prefers-reduced-motion:reduce){ .kc-in-new{ animation:none; } .kc-pbar2 i{ transition:none; } }
.kc-seg{ flex-direction:row !important; flex-wrap:wrap; gap:10px !important; } .kc-seg .kc-opt{ flex:1 1 130px; justify-content:center; text-align:center; min-height:48px; padding:10px 16px; border-radius:14px; border:2px solid #DDE4E2; background:#fff; font-weight:600; font-size:15px; transition:border-color .12s,background .12s,box-shadow .12s; } .kc-seg .kc-opt input{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; } .kc-seg .kc-opt:hover{ border-color:#15A897; } .kc-seg .kc-opt.on{ border-color:#0F8080; background:#E4F3F1; color:#0A5F5F; box-shadow:0 0 0 3px rgba(15,128,128,.15); } .kc-seg .kc-opt:focus-within{ outline:3px solid rgba(15,128,128,.35); outline-offset:2px; }
.kc-opts.cols{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px 10px; } .kc-opt.on{ border-color:#0F8080; background:#F0F8F7; } .kc-sel select{ width:100%; max-width:520px; }
.kc-done{ padding:48px 20px !important; } .kc-done>i{ font-size:64px !important; } .kc-done .bd-acts{ justify-content:center; margin-top:10px; }
/* ---- the shared-link page ---- */
.kc-pub{ max-width:820px; padding:26px 16px 70px; } .kc-pub-h{ display:flex; align-items:center; gap:20px; padding:4px 4px 22px; } .kc-pub-logo{ width:96px; height:96px; border-radius:24px; flex:none; box-shadow:0 12px 30px rgba(224,34,61,.32); } .kc-pub-ht b{ display:block; font-size:20px; letter-spacing:-.01em; } .kc-pub-ht span{ color:#4A524F; font-size:14.5px; }
.kc-pub-card{ padding:26px 28px !important; border-radius:22px !important; box-shadow:0 18px 50px rgba(15,60,56,.10) !important; } .kc-pub-f{ margin-top:18px; text-align:center; color:#6A726F; font-size:12.5px; } .kc-pubbody{ background:radial-gradient(900px 400px at 100% -10%,rgba(224,34,61,.09),transparent 60%),radial-gradient(900px 500px at -10% 0%,rgba(15,128,128,.10),transparent 60%),#F5F4F1 !important; min-height:100vh; }
@media (max-width:640px){ .kc-pub-h{ gap:14px; } .kc-pub-logo{ width:80px; height:80px; } .kc-pub-card{ padding:18px 16px !important; } .kc-pagenav .bd-btn{ flex:1; } .kc-submit{ flex-direction:column; align-items:stretch; } .kc-seg .kc-opt{ flex:1 1 100%; } }
.kc-modes{ display:flex; flex-direction:column; gap:2px; margin:10px 0; } .kc-modes .kc-chk{ margin:3px 0; }

/* ---- insights, assignments, keys ---- */
.kc-att{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; } .kc-att li{ display:flex; gap:10px; align-items:center; padding:9px 12px; border-radius:12px; background:#FFF8E6; border:1px solid #F2DDA3; font-size:14px; } .kc-att li i{ color:#B8800F; font-size:20px; } .kc-att a{ color:#0B6666; text-decoration:none; }
.kc-stack{ display:flex; height:10px; border-radius:99px; overflow:hidden; background:#EFEDE7; min-width:110px; } .kc-stack i{ display:block; height:100%; } .kc-stack .a{ background:#15A06B; } .kc-stack .h{ background:#E7A93A; } .kc-stack .r{ background:#E0223D; } .kc-stack .n{ background:#D5D9D7; } .kc-scope{ margin:0 0 8px; }
.kc-chip{ display:inline-block; background:#E4F3F1; color:#0A5F5F; border-radius:99px; padding:3px 11px; font-size:12.5px; margin:2px 4px 2px 0; } .kc-chips{ display:flex; flex-wrap:wrap; gap:4px 2px; align-items:center; margin-bottom:6px; } .kc-cond{ display:flex; gap:8px; align-items:center; margin:6px 0; flex-wrap:wrap; } .kc-cond select{ min-width:200px; } .kc-cond .ac-v{ flex:1; min-width:180px; }
.kc-keys-card{ margin:12px 0; } .kc-klist{ list-style:none; margin:10px 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; } .kc-klist li{ display:flex; gap:10px; padding:10px 12px; border-radius:12px; background:#F8F7F4; } .kc-klist li i{ font-size:20px; } .kc-klist li.ok i{ color:#15A06B; } .kc-klist li.bad{ background:#FDECEE; } .kc-klist li.bad i{ color:#B4182D; } .kc-klist b{ display:block; font-size:14px; } .kc-klist span{ font-size:12.5px; color:#5A645F; } .kc-notes{ margin:8px 0; padding-left:18px; font-size:13.5px; }

/* ============ Appearance (super admin) ============ */
.apx .ap-set{ padding:16px 18px; margin-bottom:12px; } .ap-set-row{ display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px; } .ap-switch{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; } .ap-switch input{ margin-top:4px; width:18px; height:18px; }
.ap-gal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px; margin-bottom:14px; } .apx-card{ padding:0 !important; overflow:hidden; } .apx-card.is-def{ outline:3px solid #0D7775; outline-offset:-1px; } .apx-card-b{ padding:12px 14px 14px; } .apx-card-h{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; flex-wrap:wrap; } .apx-card-h b{ font-size:16px; } .apx-card p{ margin:4px 0 8px; font-size:13px; min-height:36px; } .apx-card-m{ font-size:12.5px; margin-bottom:10px; } .apx-card-a{ display:flex; gap:6px; flex-wrap:wrap; }
.ap-badge{ display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; background:#EEF1EF; color:#4A524F; margin-left:4px; } .ap-badge.g{ background:#0D7775; color:#fff; } .ap-badge.b{ background:#E4EAFB; color:#2B4FA3; } .ap-badge.a{ background:#FFF1D6; color:#8A5A00; } .ap-ok{ color:#0E7A4A; font-weight:600; } .ap-bad{ color:#B4182D; font-weight:600; } .ap-warn{ color:#8A5A00; } .ap-good{ color:#0E7A4A; font-weight:700; }
.ap-mini{ height:150px; position:relative; display:flex; border-bottom:1px solid #E6E3DC; } .ap-mini-side{ width:22%; background:rgba(255,255,255,.7); border-right:1px solid rgba(0,0,0,.06); } .ap-mini-main{ flex:1; padding:12px; display:flex; flex-direction:column; gap:10px; } .ap-mini-hero{ height:48px; border-radius:10px; background:linear-gradient(135deg,#118483,#0A5A5A); } .ap-mini-row{ display:flex; gap:8px; flex:1; } .ap-mini-row i{ flex:1; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.ap-people{ margin-top:6px; padding:16px 18px; } .ap-add{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; } .ap-add select{ min-width:240px; flex:1; }
.ap-prev-bar{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:9000; background:#161A19; color:#fff; border-radius:14px; padding:10px 14px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; box-shadow:0 14px 40px rgba(0,0,0,.35); max-width:calc(100vw - 24px); font-size:13.5px; } .ap-prev-acts{ display:flex; gap:8px; flex-wrap:wrap; } .ap-prev-bar .bd-btn{ color:#161A19; }
.ap-ed{ display:grid; grid-template-columns:1.1fr .9fr; gap:20px; } @media (max-width:820px){ .ap-ed{ grid-template-columns:1fr; } } .ap-f{ margin:8px 0; } .ap-f>label{ display:block; font-size:12.5px; font-weight:700; margin-bottom:4px; } .ap-g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .ap-g2{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .ap-col{ display:flex; align-items:center; gap:6px; } .ap-col input[type=color]{ width:42px; height:36px; padding:2px; border-radius:8px; border:1px solid #D5D9D7; background:#fff; } .ap-hex{ width:92px; font-family:ui-monospace,monospace; } .ap-none{ font-size:12px; font-weight:400 !important; display:flex; gap:4px; align-items:center; } .ap-chk{ display:flex; gap:8px; align-items:center; margin:8px 0; font-size:13.5px; } .ap-ed h4{ margin:14px 0 4px; }
.ap-pv .ap-mini{ height:190px; border-radius:14px; border:1px solid #D5D9D7; } .ap-rd{ margin:10px 0; } .ap-rd ul{ list-style:none; margin:6px 0; padding:0; } .ap-rd li{ display:flex; gap:6px; align-items:center; font-size:13px; padding:3px 0; } .ap-rd li.ok i{ color:#15A06B; } .ap-rd li.bad i{ color:#B4182D; } .ap-rd p{ margin:6px 0; font-size:13px; }
.ap-user-card{ margin:16px 0; padding:18px 20px; } .ap-user-card h3{ margin:0 0 6px; } .ap-muted{ color:#5A645F; font-size:13.5px; margin:0 0 12px; } .ap-user-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:12px; } .ap-user-t{ position:relative; text-align:left; padding:8px; border-radius:14px; border:2px solid #DDE4E2; background:#fff; cursor:pointer; display:flex; flex-direction:column; gap:4px; font:inherit; } .ap-user-t.on{ border-color:#0D7775; box-shadow:0 0 0 3px rgba(13,119,117,.18); } .ap-user-t:focus-visible{ outline:3px solid rgba(13,119,117,.4); outline-offset:2px; } .ap-user-sw{ display:block; height:64px; border-radius:10px; border:1px solid rgba(0,0,0,.08); } .ap-user-t small{ color:#6A726F; } .ap-user-t i{ position:absolute; top:12px; right:12px; color:#0D7775; font-size:20px; background:#fff; border-radius:50%; }

/* ============ Text always has a surface (see assets/surface.js) ============ */
.ar-surf{ background:var(--glass-strong, rgba(255,255,255,.86)); border:1px solid var(--hairline, rgba(20,30,28,.08)); border-radius:16px; box-shadow:var(--shadow-1); padding:14px 18px !important; backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%); }
.ar-surf > :first-child{ margin-top:0; } .ar-surf > :last-child{ margin-bottom:0; }
.ar-surf-chip{ display:inline-block; max-width:100%; background:var(--glass-strong, rgba(255,255,255,.86)); border:1px solid var(--hairline, rgba(20,30,28,.08)); border-radius:10px; padding:4px 11px; box-shadow:var(--shadow-1); }
h1.ar-surf-chip,h2.ar-surf-chip,h3.ar-surf-chip{ border-radius:12px; padding:6px 14px; }
html.ar-solid .ar-surf,html.ar-solid .ar-surf-chip{ background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; }
@media print{ .ar-surf,.ar-surf-chip{ box-shadow:none; border-color:transparent; background:none; } }

/* ============ One dropdown design everywhere (assets/dropdown.js): the room-booking look ============ */
.ar-dd{ position:relative; display:inline-block; vertical-align:middle; max-width:100%; --ar-dd-h:40px; } .ar-dd.is-block{ display:block; width:100%; }
.ar-dd-native{ position:absolute !important; left:0; top:0; width:1px !important; height:1px !important; min-width:0 !important; opacity:0; pointer-events:none; margin:0 !important; padding:0 !important; border:0 !important; overflow:hidden; }
.ar-dd-btn{ width:100%; height:var(--ar-dd-h); display:inline-flex; align-items:center; justify-content:space-between; gap:10px; padding:0 12px 0 14px; border:1px solid #E1DED5; background:#fff; border-radius:11px; box-shadow:0 1px 2px rgba(18,32,29,.06); font:inherit; font-size:13.5px; font-weight:600; color:var(--ink,#161A19); cursor:pointer; text-align:left; transition:border-color .15s, box-shadow .15s, background .15s; }
.ar-dd-btn:hover:not(:disabled){ background:#F6F9F8; border-color:#CBD6D2; } .ar-dd-btn:focus-visible,.ar-dd-btn[aria-expanded=true]{ outline:none; border-color:#0F8080; box-shadow:0 0 0 3px rgba(15,128,128,.16); }
.ar-dd-btn:disabled{ opacity:.55; cursor:not-allowed; } .ar-dd-btn.is-empty .ar-dd-txt{ color:#6A726F; font-weight:500; } .ar-dd-txt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ar-dd-btn i{ color:#0F8080; font-size:16px; flex:none; transition:transform .15s; } .ar-dd-btn[aria-expanded=true] i{ transform:rotate(180deg); }
.ar-dd-panel{ position:fixed; background:#fff; border:1px solid #E7E4DB; border-radius:16px; box-shadow:0 24px 60px rgba(18,32,29,.22); padding:6px; display:flex; flex-direction:column; overflow:hidden; animation:ar-dd-in .14s ease-out; color:#161A19; }
@keyframes ar-dd-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .ar-dd-panel{ animation:none; } }
.ar-dd-panel ul{ list-style:none; margin:0; padding:0; overflow-y:auto; outline:none; flex:1; } .ar-dd-panel li[role=option]{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:38px; padding:8px 12px; border-radius:10px; font-size:13.5px; font-weight:500; cursor:pointer; line-height:1.3; } .ar-dd-panel li[role=option] span{ min-width:0; overflow-wrap:anywhere; }
.ar-dd-panel li.act{ background:#E6F3F1; color:#083F3F; } .ar-dd-panel li.on{ font-weight:700; color:#0A5A5A; } .ar-dd-panel li i{ color:#0F8080; font-size:16px; visibility:hidden; flex:none; } .ar-dd-panel li.on i{ visibility:visible; } .ar-dd-panel li.dis{ color:#A2A9A5; cursor:not-allowed; }
.ar-dd-group{ padding:10px 12px 4px; font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#8A928F; } .ar-dd-search{ display:flex; align-items:center; gap:8px; padding:6px 10px; margin:2px 2px 6px; border:1px solid #E7E4DB; border-radius:10px; background:#FAF9F6; } .ar-dd-search input{ flex:1; border:0; outline:0; background:none; font:inherit; font-size:13.5px; min-width:0; } .ar-dd-search i{ color:#8A928F; } .ar-dd-none{ padding:14px; text-align:center; color:#6A726F; font-size:13px; }
.ar-dd-back{ position:fixed; inset:0; background:rgba(18,32,29,.38); animation:ar-dd-fade .16s ease-out; } @keyframes ar-dd-fade{ from{ opacity:0; } to{ opacity:1; } }
.ar-dd-panel.is-sheet{ left:0 !important; right:0; bottom:0 !important; top:auto !important; width:100%; max-width:100% !important; min-width:0 !important; max-height:72vh !important; border-radius:20px 20px 0 0; padding:10px 10px calc(10px + env(safe-area-inset-bottom)); animation:ar-dd-up .2s ease-out; } .ar-dd-panel.is-sheet::before{ content:''; width:40px; height:4px; border-radius:4px; background:#D5D9D7; margin:0 auto 8px; flex:none; } .ar-dd-panel.is-sheet li[role=option]{ min-height:46px; font-size:15px; } @keyframes ar-dd-up{ from{ transform:translateY(24px); opacity:.6; } to{ transform:none; opacity:1; } }
html[data-theme="dark"] .ar-dd-btn{ background:#1C201E; border-color:#2F332F; color:#ECEDEA; } html[data-theme="dark"] .ar-dd-btn:hover:not(:disabled){ background:#222725; } html[data-theme="dark"] .ar-dd-panel{ background:#1C201E; border-color:#2F332F; color:#ECEDEA; box-shadow:0 24px 60px rgba(0,0,0,.6); } html[data-theme="dark"] .ar-dd-panel li.act{ background:#123A38; color:#CFEFEA; } html[data-theme="dark"] .ar-dd-search{ background:#161A19; border-color:#2F332F; } html[data-theme="dark"] .ar-dd-search input{ color:#ECEDEA; } html[data-theme="dark"] .ar-dd-panel.is-sheet::before{ background:#3A3F3B; }
html.ar-solid .ar-dd-btn{ box-shadow:none; }

/* ---- pop-ups: body spacing and a footer that stays in view when the content is long (the old chart class .bd-mb that squashed pop-up bodies is now .bd-mcol) ---- */
.bd-mb{ padding:2px 0 4px; } .bd-md > .bd-mf{ position:sticky; bottom:-20px; background:#fff; margin:14px -22px -20px; padding:12px 22px 16px; border-top:1px solid var(--hairline,rgba(20,30,28,.08)); z-index:3; } .bd-md > .bd-mh{ position:sticky; top:-20px; background:#fff; margin:-20px -22px 8px; padding:18px 22px 12px; border-bottom:1px solid var(--hairline,rgba(20,30,28,.08)); z-index:3; }
.ap-g2[hidden],.ap-g3[hidden],.ap-gridopts[hidden]{ display:none !important; } .ap-f > input:not([type]),.ap-f > input[type=text]{ width:100%; height:40px; padding:0 12px; border:1px solid #E1DED5; border-radius:11px; font:inherit; font-size:13.5px; background:#fff; box-shadow:0 1px 2px rgba(18,32,29,.05); } .ap-f > input:focus{ outline:none; border-color:#0F8080; box-shadow:0 0 0 3px rgba(15,128,128,.16); } .ap-f input[type=range]{ width:100%; accent-color:#0F8080; }

/* ============ Collect: navigation bar, header panel, responsive tables ============ */
.kc-nav{ display:flex; align-items:center; justify-content:space-between; gap:8px 18px; flex-wrap:wrap; margin:0 0 12px; padding:8px 12px 8px 10px; background:var(--glass-strong,rgba(255,255,255,.86)); border:1px solid var(--hairline,rgba(20,30,28,.08)); border-radius:16px; box-shadow:var(--shadow-1); backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%); }
.kc-nav .kc-brand{ display:flex; align-items:center; gap:10px; margin:0; text-decoration:none; color:inherit; min-width:0; } .kc-nav .kc-brand img{ width:40px; height:40px; border-radius:10px; box-shadow:0 2px 8px rgba(224,34,61,.25); } .kc-brand-t{ display:flex; flex-direction:column; line-height:1.2; min-width:0; } .kc-brand-t b{ font-size:15px; letter-spacing:-.01em; } .kc-brand-t span{ font-size:12px; color:#5A645F; }
.kc-nav .kc-crumbs{ display:flex; align-items:center; gap:2px; margin:0; padding:3px; background:#F1F5F4; border-radius:99px; font-size:13px; max-width:100%; flex-wrap:wrap; } .kc-nav .kc-crumbs a,.kc-nav .kc-crumbs span{ display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:99px; line-height:1.2; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kc-nav .kc-crumbs a{ color:#0B6666; font-weight:600; text-decoration:none; } .kc-nav .kc-crumbs a:hover{ background:#E1EFEC; } .kc-nav .kc-crumbs span[aria-current]{ background:#0D7775; color:#fff; font-weight:700; box-shadow:0 2px 6px rgba(13,119,117,.3); } .kc-crumb-sep{ color:#9AA19E; font-size:14px; }
.kcx .kc-top{ background:var(--glass-strong,rgba(255,255,255,.86)); border:1px solid var(--hairline,rgba(20,30,28,.08)); border-left:5px solid #0D7775; border-radius:18px; box-shadow:var(--shadow-1); padding:16px 20px; align-items:center; } .kcx .kc-top h1{ margin:0; } .kcx .kc-top .kc-sub{ color:#4A524F; }
.kc-tabhelp,.kc-scope{ display:inline-block; background:var(--glass-strong,rgba(255,255,255,.86)); border:1px solid var(--hairline,rgba(20,30,28,.08)); border-radius:10px; padding:6px 12px; box-shadow:var(--shadow-1); color:#4A524F !important; }
.kc-act{ white-space:normal; } .kc-act .bd-btn{ margin:2px 2px 2px 0; } .bd-acts{ flex-wrap:wrap; }
@media (max-width:900px){
  .kcx .kc-tbl-w{ overflow:visible; }
  .kcx .kc-tbl:not(.kc-data):not(.kc-cross):not(.kc-nostack), .kcx .kc-tbl:not(.kc-data):not(.kc-cross):not(.kc-nostack) tbody{ display:block; width:100%; }
  .kcx .kc-tbl:not(.kc-data):not(.kc-cross):not(.kc-nostack) thead{ display:none; }
  .kcx .kc-tbl:not(.kc-data):not(.kc-cross):not(.kc-nostack) tr{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px 14px; padding:12px 14px; margin:0 0 10px; background:#fff; border:1px solid var(--hairline,rgba(20,30,28,.1)); border-radius:14px; box-shadow:var(--shadow-1); }
  .kcx .kc-tbl:not(.kc-data):not(.kc-cross):not(.kc-nostack) td{ display:block; padding:2px 0 !important; border:0 !important; text-align:left !important; min-width:0; max-width:100%; overflow-wrap:anywhere; }
  .kcx .kc-tbl:not(.kc-data):not(.kc-cross):not(.kc-nostack) td:first-child{ flex:1 1 100%; font-size:15px; }
  .kcx .kc-tbl:not(.kc-data):not(.kc-cross):not(.kc-nostack) td.kc-act, .kcx .kc-tbl:not(.kc-data):not(.kc-cross):not(.kc-nostack) td:last-child:has(.bd-btn){ flex:1 1 100%; display:flex; flex-wrap:wrap; gap:6px; padding-top:8px !important; }
}
@media (max-width:640px){ .kc-nav{ padding:8px; } .kc-nav .kc-crumbs{ width:100%; } .kc-nav .kc-crumbs a,.kc-nav .kc-crumbs span{ max-width:150px; } .kcx .kc-top{ padding:14px; } .kcx .kc-top .bd-acts{ width:100%; } }
/* ============ rooms, licences, SIM cards: rows wrap instead of running off the card on small screens ============ */
@media (max-width:640px){
  .rm-bars-card .rm-ab-row{ flex-wrap:wrap !important; gap:8px 10px !important; } .rm-bars-card .rm-ab-id{ width:auto !important; flex:1 1 60% !important; } .rm-bars-card .rm-ab-bar{ order:3; flex:1 1 100% !important; } .rm-bars-card .rm-ab-book{ margin-left:auto; order:2; }
  .lic-row,.sim-row{ flex-wrap:wrap !important; gap:8px 12px !important; } .lic-info,.sim-info{ flex:1 1 calc(100% - 70px) !important; } .lic-when,.sim-when{ text-align:left !important; flex:1 1 100% !important; } .lic-acts,.sim-acts{ margin-left:auto; flex-wrap:wrap; }
}

.av2-story{ margin-top:16px; } .av2-story .ar-hint{ display:flex; align-items:center; gap:8px; color:#5A645F; font-size:13px; padding:10px 12px; border:1px dashed #D5D9D7; border-radius:10px; background:#FAF9F6; } .av2-story .ar-hint i{ animation:av2-spin 1s linear infinite; } @keyframes av2-spin{ to{ transform:rotate(360deg); } }

/* ---- asset cards and header: left-aligned, text wraps instead of being cut, header wraps on phones ---- */
.av2-card{ text-align:left; font:inherit; width:100%; display:block; } .av2-card b{ display:block; overflow-wrap:anywhere; line-height:1.3; font-size:14.5px; margin-bottom:2px; } .av2-card small{ display:inline-block; overflow-wrap:anywhere; } .av2-card:hover{ border-color:#BFD9D5; box-shadow:0 14px 30px -18px rgba(15,80,76,.4); } .av2-card:focus-visible{ outline:3px solid rgba(13,119,117,.35); outline-offset:2px; }
.av2-card > div:last-child{ gap:8px; flex-wrap:wrap; } .av2-card > div:last-child span{ min-width:0; overflow-wrap:anywhere; }
.av2-grid .v{ overflow-wrap:anywhere; min-width:0; } .av2-dh > *{ min-width:0; } .av2-dh h2,.av2-dh .av2-dtitle{ overflow-wrap:anywhere; }
@media (max-width:760px){ .av2-head{ flex-wrap:wrap !important; align-items:flex-start !important; } .av2-head > div:last-child{ width:100%; display:flex; flex-wrap:wrap; gap:8px; } .av2-head .ar-btn{ flex:1 1 auto; justify-content:center; } }

/* ============ Audit log dashboard ============ */
.au-top{ display:flex; justify-content:space-between; align-items:center; gap:10px 16px; flex-wrap:wrap; margin-bottom:12px; } .au-ranges{ display:inline-flex; gap:2px; padding:3px; background:var(--glass-strong,rgba(255,255,255,.86)); border:1px solid var(--hairline); border-radius:99px; box-shadow:var(--shadow-1); flex-wrap:wrap; } .au-range{ border:0; background:none; padding:7px 14px; border-radius:99px; font:inherit; font-size:13px; font-weight:600; color:#4A524F; cursor:pointer; } .au-range:hover{ background:#E6F3F1; } .au-range.on{ background:#0D7775; color:#fff; box-shadow:0 2px 8px rgba(13,119,117,.3); }
.au-top-r{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .au-date{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#4A524F; background:var(--glass-strong); border:1px solid var(--hairline); border-radius:10px; padding:4px 8px; } .au-date input{ border:0; background:none; font:inherit; font-size:13px; }
.au-kpis{ flex-wrap:wrap; gap:10px; margin-bottom:12px; } .au-kpi{ display:flex; align-items:center; gap:12px; border:1px solid var(--hairline); font:inherit; text-align:left; min-width:170px; flex:1 1 170px; } button.au-kpi{ cursor:pointer; } button.au-kpi:hover{ border-color:#BFD9D5; } button.au-kpi.on{ outline:3px solid rgba(13,119,117,.35); } .au-kpi-i{ width:38px; height:38px; border-radius:11px; background:#E4F3F1; color:#0D7775; display:grid; place-items:center; font-size:19px; flex:none; }
.au-find{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:10px; margin-bottom:12px; } .au-f{ display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:14px; background:#fff; border:1px solid var(--hairline); border-left:5px solid #2F5FD0; box-shadow:var(--shadow-1); } .au-f.warn{ border-left-color:#E7A93A; background:#FFFBF1; } .au-f.high{ border-left-color:#E0223D; background:#FFF6F7; } .au-f > i{ font-size:24px; color:#2F5FD0; flex:none; } .au-f.warn > i{ color:#B8800F; } .au-f.high > i{ color:#C83E55; } .au-f div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .au-f b{ font-size:14px; } .au-f span{ font-size:12.5px; color:#4A524F; overflow-wrap:anywhere; }
.au-ok{ display:flex; gap:8px; align-items:center; padding:10px 14px; margin-bottom:12px; border-radius:12px; background:#E9F6EE; color:#0E7A4A; font-weight:600; font-size:13.5px; border:1px solid #CBE8D6; }
.au-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:12px; margin-bottom:12px; } @media (max-width:1100px){ .au-grid{ grid-template-columns:1fr 1fr; } .au-grid > :first-child{ grid-column:1/-1; } } @media (max-width:700px){ .au-grid{ grid-template-columns:1fr; } }
.au-barbtn{ background:none; border:0; font:inherit; text-align:left; padding:3px 4px; border-radius:8px; cursor:pointer; width:100%; } .au-barbtn:hover,.au-barbtn.on{ background:#E6F3F1; } .au-people{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; } .au-people button{ display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; padding:6px; border-radius:10px; font:inherit; cursor:pointer; text-align:left; } .au-people button:hover{ background:#E6F3F1; } .au-pn{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:13.5px; } .au-av{ width:28px; height:28px; border-radius:50%; color:#fff; font-weight:700; font-size:12.5px; display:grid; place-items:center; flex:none; }
.au-tl{ padding:14px 16px !important; } .au-fbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .au-search{ flex:2 1 260px; display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; border:1px solid #E1DED5; border-radius:11px; background:#fff; } .au-search input{ flex:1; border:0; outline:0; background:none; font:inherit; font-size:13.5px; min-width:0; } .au-search i{ color:#6A726F; } .au-fbar .ar-dd{ flex:1 1 150px; } .au-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 4px; } .au-chip{ display:inline-flex; align-items:center; gap:6px; border:0; background:#E4F3F1; color:#0A5F5F; border-radius:99px; padding:4px 10px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; } .au-chip:hover{ background:#CFE7E3; }
.au-day{ position:sticky; top:0; z-index:2; margin:12px 0 4px; padding:5px 10px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#4A524F; background:#F1F5F4; border-radius:8px; } .au-row{ border-bottom:1px solid #EFEDE7; } .au-rowb{ display:flex; align-items:flex-start; gap:10px; width:100%; border:0; background:none; font:inherit; text-align:left; padding:9px 6px; cursor:pointer; border-radius:10px; } .au-rowb:hover{ background:#F6F9F8; } .au-t{ font-variant-numeric:tabular-nums; color:#5A645F; font-size:12.5px; width:42px; padding-top:5px; flex:none; } .au-m{ flex:1; min-width:0; display:block; line-height:1.4; overflow-wrap:anywhere; } .au-m small{ display:block; color:#5A645F; font-size:12.5px; } .au-act{ color:#0A5F5F; font-weight:600; } .au-mod{ display:inline-block; font-size:11px; font-weight:700; background:#EEF1EF; color:#4A524F; border-radius:99px; padding:1px 8px; } .au-chev{ color:#8A928F; padding-top:4px; transition:transform .15s; } .au-row.open .au-chev{ transform:rotate(180deg); }
.au-det{ margin:0 6px 10px 60px; padding:10px 14px; background:#FAF9F6; border:1px solid #EFEDE7; border-radius:12px; } .au-det dl{ display:grid; grid-template-columns:110px 1fr; gap:4px 12px; margin:0; font-size:13px; } .au-det dt{ color:#6A726F; font-weight:600; } .au-det dd{ margin:0; overflow-wrap:anywhere; } .au-det pre{ margin:0; white-space:pre-wrap; font-size:12px; max-height:220px; overflow:auto; background:#fff; border:1px solid #EFEDE7; border-radius:8px; padding:8px; }
.au-pg{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; font-size:13px; color:#4A524F; } .au-pg-c{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .au-pg-n{ font-weight:600; } .au-skel i{ display:block; height:44px; margin:8px 0; border-radius:10px; background:linear-gradient(90deg,#F1F3F2,#E8ECEB,#F1F3F2); background-size:200% 100%; animation:au-sh 1.2s linear infinite; } @keyframes au-sh{ to{ background-position:-200% 0; } } .au-empty{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:34px 10px; color:#5A645F; } .au-empty i{ font-size:30px; color:#9AA19E; }
@media (max-width:640px){ .au-det{ margin-left:6px; } .au-det dl{ grid-template-columns:1fr; } .au-t{ width:36px; } .au-kpi{ min-width:calc(50% - 6px); flex:1 1 calc(50% - 6px); } }

.au-search input{ background:transparent !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; padding:0 !important; height:auto !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

/* ============ Database migrations screen ============ */
.mg-over{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:18px 22px !important; margin-bottom:12px; } .mg-ring{ width:88px; height:88px; display:block; } .mg-over-t{ flex:1; min-width:220px; } .mg-over-t h2{ margin:0 0 4px; font-size:20px; } .mg-over-t p{ margin:0; max-width:60ch; }
.mg-log{ margin-bottom:12px; padding:14px 18px !important; } .mg-log ul{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:260px; overflow:auto; } .mg-log li{ display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:10px; background:#F6F9F8; } .mg-log li.ok i{ color:#15A06B; } .mg-log li.bad{ background:#FDECEE; } .mg-log li.bad i{ color:#B4182D; } .mg-log li div{ display:flex; flex-direction:column; min-width:0; } .mg-log li span{ font-size:12.5px; color:#4A524F; overflow-wrap:anywhere; }
.mg-tools{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px; } .mg-tools .au-search{ flex:1 1 260px; background:var(--glass-strong,#fff); }
.mg-groups{ display:flex; flex-direction:column; gap:8px; } .mg-g{ padding:0 !important; overflow:hidden; } .mg-g.has-p{ border-left:5px solid #E7A93A; } .mg-gh{ display:flex; align-items:center; gap:12px; width:100%; border:0; background:none; font:inherit; text-align:left; padding:12px 16px; cursor:pointer; } .mg-gh:hover{ background:#F6F9F8; } .mg-gi{ width:36px; height:36px; border-radius:10px; background:#E4F3F1; color:#0D7775; display:grid; place-items:center; font-size:18px; flex:none; } .mg-gn{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; } .mg-gn small{ color:#5A645F; font-size:12px; } .mg-ch{ color:#8A928F; transition:transform .15s; } .mg-g.open .mg-ch{ transform:rotate(180deg); }
.mg-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:99px; white-space:nowrap; } .mg-chip.ok{ background:#E4F4E9; color:#1C6E3E; } .mg-chip.warn{ background:#FFF1D6; color:#8A5A00; }
.mg-rows{ border-top:1px solid #EFEDE7; } .mg-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:10px 16px; border-bottom:1px solid #F3F1EC; } .mg-row:last-child{ border-bottom:0; } .mg-row.pending{ background:#FFFBF1; } .mg-rt{ min-width:0; display:flex; flex-direction:column; gap:2px; } .mg-rt span{ font-size:12.5px; color:#4A524F; } .mg-rt code{ font-size:11.5px; color:#6A726F; overflow-wrap:anywhere; } .mg-rs{ display:flex; align-items:center; gap:10px; flex:none; } .mg-rs small{ color:#5A645F; font-size:12px; }
.mg-adv{ margin-top:12px; padding:12px 18px !important; } .mg-adv summary{ cursor:pointer; font-weight:700; color:#4A524F; display:flex; gap:8px; align-items:center; }
@media (max-width:640px){ .mg-row{ flex-direction:column; align-items:flex-start; } .mg-rs{ width:100%; justify-content:space-between; } .mg-over .bd-acts{ width:100%; } .mg-over .bd-btn{ flex:1; justify-content:center; } }

/* ============ System configuration: Health ============ */
.hl-sum{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px; border-radius:16px; margin-bottom:14px; background:#E9F6EE; border:1px solid #CBE8D6; } .hl-sum > i{ font-size:30px; color:#15A06B; } .hl-sum.warn{ background:#FFF8E8; border-color:#F2DDA3; } .hl-sum.warn > i{ color:#B8800F; } .hl-sum.bad{ background:#FFF1F2; border-color:#F3C9CF; } .hl-sum.bad > i{ color:#C83E55; } .hl-sum div{ flex:1; min-width:220px; display:flex; flex-direction:column; } .hl-sum span{ font-size:13px; color:#4A524F; }
.hl-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:14px; align-items:start; } @media (max-width:520px){ .hl-grid{ grid-template-columns:1fr; } } .hl-g{ max-width:none !important; padding:16px 18px !important; } .hl-g h3{ margin:0 0 8px; font-size:15px; display:flex; align-items:center; gap:8px; } .hl-g h3 i{ color:#0D7775; }
.hl-g ul{ list-style:none; margin:0; padding:0; } .hl-g li{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid #F0EEE9; } .hl-g li:first-child{ border-top:0; } .hl-g li > i{ font-size:19px; margin-top:1px; flex:none; } .hl-g li.ok > i{ color:#15A06B; } .hl-g li.warn > i{ color:#B8800F; } .hl-g li.bad > i{ color:#C83E55; } .hl-g li.info > i{ color:#6A726F; } .hl-g li > div{ flex:1; min-width:0; } .hl-l{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; } .hl-v{ color:#4A524F; font-size:13px; text-align:right; overflow-wrap:anywhere; } .hl-g small{ display:block; color:#5A645F; font-size:12px; margin-top:2px; overflow-wrap:anywhere; } .hl-g li.bad{ background:linear-gradient(90deg,#FFF1F2,transparent 60%); } .hl-g li.warn{ background:linear-gradient(90deg,#FFF8E8,transparent 60%); }

.ar-surf-bar{ background:var(--glass-strong, rgba(255,255,255,.86)); border:1px solid var(--hairline, rgba(20,30,28,.08)); border-radius:14px; padding:4px !important; box-shadow:var(--shadow-1); } html.ar-solid .ar-surf-bar{ background:#fff; }

/* ---- phones: rows of chips, tabs and edit fields wrap instead of running off the screen ---- */
@media (max-width:640px){
  .dir-seg{ flex-wrap:wrap !important; height:auto !important; } .dir-seg .ar-dir-chip{ flex:1 1 auto !important; }
  .tkt-tabs, [class*="tkt-tab"]:not(button){ flex-wrap:wrap !important; } .tkt-tabs button{ flex:1 1 auto; }
  .cat-card{ flex-wrap:wrap !important; } .cat-edit{ flex:1 1 100% !important; flex-wrap:wrap !important; } .cat-name{ flex:1 1 100% !important; } .cat-icon-in{ flex:1 1 140px !important; min-width:0; } .cat-actions{ flex-wrap:wrap; }
}

/* Collect tables: long text wraps (it can never stretch a table past the screen) */
.kcx .kc-tbl td,.kcx .kc-tbl th{ overflow-wrap:anywhere; } .kcx .kc-tbl:not(.kc-data){ width:100%; max-width:100%; } .kcx .epk-card{ min-width:0; max-width:100%; }

/* ============ Bulk import employees (obx-) and "check your details" (cdt-) and review queue (prv-) ============ */
.obx .e-page-head-r{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-self:center; }
.obx-steps{ list-style:none; display:flex; gap:6px; margin:0 0 14px; padding:6px; background:var(--glass-strong,rgba(255,255,255,.86)); border:1px solid var(--hairline); border-radius:16px; box-shadow:var(--shadow-1); flex-wrap:wrap; } .obx-steps li{ flex:1 1 150px; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:11px; color:#5A645F; font-weight:600; font-size:13.5px; } .obx-steps li b{ width:26px; height:26px; border-radius:50%; background:#E8ECEA; display:grid; place-items:center; font-size:13px; flex:none; } .obx-steps li.on{ background:#E4F3F1; color:#0A5F5F; } .obx-steps li.on b{ background:#0D7775; color:#fff; } .obx-steps li.done b{ background:#15A06B; color:#fff; }
.obx-c{ padding:18px 20px !important; margin-bottom:12px; } .obx-c h2{ margin:0 0 6px; font-size:18px; } .obx-c h2 small{ font-weight:500; font-size:13px; margin-left:8px; } .obx-row{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; } .obx-next{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:14px; } .obx-cols{ margin-top:10px; } .obx-cols summary{ cursor:pointer; font-weight:700; color:#0A5F5F; } .obx-tw{ overflow-x:auto; }
.obx-drop{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:26px 16px; border:2px dashed #B9CCC8; border-radius:16px; background:rgba(255,255,255,.7); cursor:pointer; text-align:center; } .obx-drop:hover,.obx-drop.on,.obx-drop:focus-visible{ border-color:#0D7775; background:#EEF8F6; outline:none; } .obx-drop i{ font-size:30px; color:#0D7775; } .obx-drop span{ color:#5A645F; font-size:12.5px; }
.obx-opts{ border:1px solid var(--hairline); border-radius:14px; padding:12px 14px; margin:14px 0 0; background:rgba(255,255,255,.6); min-width:0; } .obx-opts legend{ font-weight:700; padding:0 6px; font-size:14px; } .obx-rad{ display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:11px; cursor:pointer; } .obx-rad:hover{ background:#F1F7F6; } .obx-rad.on{ background:#E4F3F1; } .obx-rad input{ margin-top:3px; } .obx-rad span{ display:flex; flex-direction:column; } .obx-rad small,.obx-chk small{ color:#5A645F; font-size:12.5px; font-weight:400; } .obx-chk{ display:flex; gap:10px; align-items:flex-start; padding:8px 10px; font-size:13.5px; cursor:pointer; } .obx-chk.warn{ background:#FFF8E8; border-radius:10px; } .obx-conf{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.obx-pw{ display:flex; flex-direction:column; gap:4px; padding:8px 10px; } .obx-pw > div{ display:flex; gap:8px; flex-wrap:wrap; } .obx-pw input[type=text]{ flex:1 1 220px; height:40px; padding:0 12px; border:1px solid #D9D5CC; border-radius:10px; font:inherit; font-family:ui-monospace,Menlo,Consolas,monospace; background:#fff; } .obx-pw label{ font-weight:600; font-size:13px; } small.bad{ color:#B4182D; }
.obx-kpis{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; } .obx-kpi{ flex:1 1 130px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 14px; border:1px solid var(--hairline); border-radius:14px; background:#fff; font:inherit; text-align:left; } button.obx-kpi{ cursor:pointer; } button.obx-kpi:hover{ border-color:#BFD9D5; } .obx-kpi.on{ outline:3px solid rgba(13,119,117,.35); } .obx-kpi i{ color:#0D7775; font-size:18px; } .obx-kpi b{ font-size:24px; line-height:1.1; } .obx-kpi span{ font-size:12.5px; color:#5A645F; } .obx-kpi.bad{ background:#FFF1F2; border-color:#F3C9CF; } .obx-kpi.bad b{ color:#B4182D; }
.obx-fl{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0; } .obx-t td small,.obx-t th small{ display:block; color:#5A645F; font-size:12px; } .obx-t td{ vertical-align:top; } .obx-t tr.error td{ background:#FFF6F7; } .obx-t tr.skip td,.obx-t tr.protected td{ color:#6A726F; } .obx-n{ min-width:260px; } .obx-n .n{ display:flex; gap:6px; align-items:flex-start; font-size:12.5px; margin:1px 0; overflow-wrap:anywhere; } .obx-n .bad{ color:#B4182D; } .obx-n .warn{ color:#8A5A00; } .obx-n .chg{ color:#0A5F5F; } .obx-n .mute{ color:#6A726F; }
.obx-st{ display:inline-block; font-size:11.5px; font-weight:700; padding:2px 10px; border-radius:99px; white-space:nowrap; } .obx-st.ok{ background:#E4F4E9; color:#1C6E3E; } .obx-st.info{ background:#E3EEFB; color:#1F4E9B; } .obx-st.mute{ background:#EEF0EF; color:#4A524F; } .obx-st.bad{ background:#FDECEE; color:#B4182D; } .obx-st.staff{ background:#FFF1D6; color:#8A5A00; }
.obx-done > i{ font-size:38px; color:#15A06B; } .obx-msg{ width:100%; font:inherit; font-size:13.5px; border:1px solid #D9D5CC; border-radius:12px; padding:12px; background:#fff; resize:vertical; } .bd-btn.warn{ background:#FFF1D6; border-color:#EBC77A; color:#6E4600; }
.cdt{ max-width:1000px; } .cdt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; } @media (max-width:760px){ .cdt-grid{ grid-template-columns:1fr; } } .cdt-card{ padding:18px 20px !important; } .cdt-card h2,.cdt-act h2{ font-size:16px; margin:0 0 8px; display:flex; gap:8px; align-items:center; } .cdt-card h2 i{ color:#0D7775; }
.cdt-row{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; border-top:1px solid #F0EEE9; } .cdt-row:first-of-type{ border-top:0; } .cdt-row > i{ font-size:19px; color:#6A9A96; margin-top:2px; } .cdt-row > div{ display:flex; flex-direction:column; min-width:0; } .cdt-row span{ font-size:12px; color:#6A726F; } .cdt-row b{ overflow-wrap:anywhere; } .cdt-row em{ color:#8A928F; font-weight:500; } .cdt-row small{ color:#5A645F; font-size:12.5px; }
.cdt-chain{ list-style:none; margin:0 0 6px; padding:0 0 0 6px; } .cdt-chain li{ position:relative; display:flex; gap:12px; padding:0 0 18px; } .cdt-chain li:last-child{ padding-bottom:4px; } .cdt-chain li::before{ content:""; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:#CFE0DD; } .cdt-chain li:last-child::before{ display:none; } .cdt-chain .dot{ width:14px; height:14px; border-radius:50%; background:#15A897; flex:none; margin-top:3px; z-index:1; } .cdt-chain .dot.off{ background:#C9CFCC; } .cdt-chain li.me .dot{ background:#0D7775; box-shadow:0 0 0 4px rgba(13,119,117,.2); } .cdt-chain div{ display:flex; flex-direction:column; } .cdt-chain span{ font-size:12.5px; color:#5A645F; }
.cdt-act{ padding:18px 20px !important; } .cdt-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; } .cdt-fix{ margin-top:14px; padding-top:14px; border-top:1px solid #EFEDE7; } .cdt-fix[hidden]{ display:none; } .cdt-checks{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; } .cdt-chk{ display:inline-flex; gap:7px; align-items:center; padding:7px 12px; border:1px solid #D9D5CC; border-radius:99px; background:#fff; cursor:pointer; font-size:13.5px; } .cdt-chk:has(input:checked){ background:#E4F3F1; border-color:#0D7775; } .cdt-lab{ display:block; font-weight:600; font-size:13px; margin:8px 0 4px; } .cdt-fix textarea{ width:100%; border:1px solid #D9D5CC; border-radius:12px; padding:10px 12px; font:inherit; resize:vertical; background:#fff; } .cdt-note{ margin:12px 0 0; }
.cdt-done{ text-align:center; padding:34px 20px !important; max-width:560px; margin:30px auto; } .cdt-done > i{ font-size:44px; color:#15A06B; } .cdt-done .cdt-actions{ justify-content:center; } .cdt-open{ display:flex; gap:12px; align-items:center; padding:12px 16px; border-radius:14px; background:#FFF8E8; border:1px solid #F2DDA3; margin-bottom:14px; } .cdt-open > i{ font-size:22px; color:#B8800F; } .cdt-open div{ display:flex; flex-direction:column; } .cdt-open span{ font-size:12.5px; color:#5A645F; }
.prv-list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; } .prv-c{ padding:16px 18px !important; } .prv-h{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; } .prv-h div{ display:flex; flex-direction:column; } .prv-h span{ font-size:12.5px; color:#5A645F; } .prv-f{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 4px; } .prv-chip{ background:#FFF1D6; color:#8A5A00; border-radius:99px; padding:3px 11px; font-size:12.5px; font-weight:700; } .prv-c blockquote{ margin:8px 0; padding:10px 14px; background:#F6F9F8; border-left:4px solid #15A897; border-radius:8px; overflow-wrap:anywhere; } .prv-d{ margin:8px 0; } .prv-d summary{ cursor:pointer; font-weight:600; color:#0A5F5F; } .prv-d tr.chg td{ background:#FFF8E8; } .prv-d th{ text-align:left; font-weight:600; color:#5A645F; } .prv-d em{ color:#8A928F; } .prv-a{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .prv-r{ margin:8px 0 0; }
@media (max-width:640px){ .obx-steps li{ flex:1 1 calc(50% - 6px); } .obx-next .bd-btn{ flex:1; justify-content:center; } }
.obx .e-page-head-r .bd-btn{ background:#fff; color:#0A5A5A; border-color:transparent; font-weight:700; } .obx .e-page-head-r .bd-btn:hover{ background:#E4F3F1; }

/* ============ Onboarding tracker (onbt-) ============ */
.onbt .e-page-head-r{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-self:center; } .onbt .e-page-head-r .bd-btn{ background:#fff; color:#0A5A5A; border-color:transparent; font-weight:700; }
.onbt-mail{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 16px; border-radius:14px; margin-bottom:10px; font-size:13.5px; } .onbt-mail > i{ font-size:22px; } .onbt-mail span{ flex:1; min-width:200px; } .onbt-mail.ok{ background:#E9F6EE; border:1px solid #CBE8D6; color:#1C6E3E; } .onbt-mail.bad{ background:#FFF1F2; border:1px solid #F3C9CF; color:#8A1425; } .onbt-mail a{ color:inherit; font-weight:700; }
.onbt-strip{ padding:12px 16px; border-radius:14px; margin-bottom:10px; background:#EEF7F6; border:1px solid #CFE6E3; } .onbt-sh{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .onbt-sh span{ flex:1; min-width:180px; color:#4A524F; font-size:13px; } .onbt-bar{ height:8px; border-radius:99px; background:#D8E8E5; margin:8px 0 4px; overflow:hidden; } .onbt-bar i{ display:block; height:100%; background:linear-gradient(90deg,#15A897,#0D7775); border-radius:99px; transition:width .6s; }
.onbt-live{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:2px 0 10px; } .onbt-live .obx-chk{ padding:4px 6px; }
.onbt-kpis{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .onbt-k{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:9px 14px; min-width:128px; border:1px solid var(--hairline); border-radius:13px; background:#fff; font:inherit; text-align:left; cursor:pointer; } .onbt-k:hover{ border-color:#BFD9D5; } .onbt-k.on{ outline:3px solid rgba(13,119,117,.35); } .onbt-k b{ font-size:22px; line-height:1.1; } .onbt-k span{ font-size:12px; color:#5A645F; } .onbt-k.bad{ background:#FFF6F7; border-color:#F3C9CF; } .onbt-k.bad b{ color:#B4182D; }
.onbt-c{ padding:16px 18px !important; margin-bottom:12px; } .onbt-c h2{ margin:0 0 6px; font-size:17px; display:flex; gap:8px; align-items:center; } .onbt-fb{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; } .onbt-fb .au-search{ flex:2 1 240px; } .onbt-fb select{ flex:1 1 160px; }
.onbt-bulk{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding:9px 12px; margin:4px 0 8px; background:#E4F3F1; border-radius:12px; position:sticky; top:84px; z-index:5; } .onbt-ba{ display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; } .onbt-link{ background:none; border:0; color:#0A5F5F; font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; padding:0; }
.onbt-t{ width:100%; border-collapse:collapse; } .onbt-t th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#5A645F; padding:8px 10px; border-bottom:1px solid #E6E3DC; } .onbt-t td{ padding:10px; border-bottom:1px solid #F0EEE9; vertical-align:top; font-size:13.5px; } .onbt-t td small,.onbt-t th small{ display:block; color:#5A645F; font-size:12px; overflow-wrap:anywhere; } .onbt-t tr.sel td{ background:#F1F9F8; } .onbt-t .ck{ width:34px; } .onbt-name{ background:none; border:0; padding:0; font:inherit; color:#0A5F5F; cursor:pointer; text-align:left; } .onbt-name:hover b{ text-decoration:underline; }
.onbt-t-ok{ color:#1C6E3E; font-weight:600; } .onbt-t-bad{ color:#B4182D; font-weight:700; } .onbt-t-info{ color:#1F4E9B; font-weight:600; } .onbt-t-mute{ color:#6A726F; font-weight:600; } small.bad,.onbt .bad{ color:#B4182D; } .obx-st.warn{ background:#FFF1D6; color:#8A5A00; }
.onbt-sg{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:10px 0; } .onbt-sg label,.onbt-nl{ display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:13px; } .onbt-sg input,.onbt-sg select,.onbt-nl textarea{ height:40px; padding:0 10px; border:1px solid #D9D5CC; border-radius:10px; font:inherit; background:#fff; font-weight:400; } .onbt-nl textarea{ height:auto; padding:8px 10px; resize:vertical; } .onbt-sg small{ font-weight:400; color:#5A645F; font-size:12px; }
.onbt-dr-bg{ position:fixed; inset:0; background:rgba(15,25,23,.38); z-index:900; } .onbt-dr{ position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); background:#fff; z-index:901; padding:22px 22px 28px; overflow-y:auto; box-shadow:-18px 0 44px -18px rgba(0,0,0,.35); } .onbt-dr h2{ margin:0 0 2px; font-size:20px; } .onbt-dr h3{ font-size:14px; margin:18px 0 6px; } .onbt-x{ position:absolute; top:12px; right:12px; border:0; background:#F1F3F2; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:18px; } .onbt-facts{ display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin:10px 0; } .onbt-f{ display:flex; flex-direction:column; padding:7px 10px; background:#F6F9F8; border-radius:10px; } .onbt-f span{ font-size:11.5px; color:#6A726F; } .onbt-dra{ display:flex; flex-direction:column; gap:6px; margin-top:12px; } .onbt-dra .bd-btn{ justify-content:center; } .onbt-log{ list-style:none; margin:0; padding:0; } .onbt-log li{ padding:7px 0; border-top:1px solid #F0EEE9; font-size:13px; overflow-wrap:anywhere; } .onbt-log b{ color:#4A524F; font-weight:600; margin-right:4px; }
@media (max-width:820px){ .onbt-t thead{ display:none; } .onbt-t,.onbt-t tbody,.onbt-t tr,.onbt-t td{ display:block; width:100%; } .onbt-t tr{ border:1px solid #ECE9E2; border-radius:14px; margin-bottom:10px; padding:6px 4px; background:#fff; } .onbt-t td{ border:0; padding:5px 10px; } .onbt-t td[data-l]:not([data-l=""])::before{ content:attr(data-l); display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#8A928F; } .onbt-t .ck{ width:auto; } .onbt-ba{ margin-left:0; } .onbt-bulk{ top:70px; } .onbt-facts{ grid-template-columns:1fr; } }

.obx-rad.dis{ opacity:.55; cursor:not-allowed; } .obx-eo{ background:#F4F8F7; border-radius:12px; margin:4px 0 8px; } .obx .onbt-sg{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); } .obx .onbt-sg label{ display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:13px; } .obx .onbt-sg input,.obx .onbt-sg select{ height:40px; padding:0 10px; border:1px solid #D9D5CC; border-radius:10px; font:inherit; background:#fff; font-weight:400; } .obx .onbt-sg small{ font-weight:400; color:#5A645F; font-size:12px; }
.obx .onbt-bar{ height:8px; border-radius:99px; background:#D8E8E5; margin:8px 0 4px; overflow:hidden; } .obx .onbt-bar i{ display:block; height:100%; background:linear-gradient(90deg,#15A897,#0D7775); border-radius:99px; transition:width .6s; }

/* ============ shared pop-up used by the AI setup preview (ast-) ============ */
.ast-modal{ position:fixed; inset:0; z-index:950; display:grid; place-items:center; padding:16px; } .ast-mbg{ position:absolute; inset:0; background:rgba(15,25,23,.45); } .ast-mb{ position:relative; background:#fff; color:#161A19; border-radius:18px; padding:20px 22px; width:min(620px,100%); max-height:80vh; overflow:auto; box-shadow:0 30px 70px -20px rgba(0,0,0,.45); } .ast-mb h3{ margin:0 28px 4px 0; font-size:16px; } .ast-pg{ color:#6A726F; font-size:12.5px; margin:4px 0 8px; } .ast-quote{ background:#F6F9F8; border-left:4px solid #15A897; border-radius:8px; padding:12px 14px; font-size:13.5px; line-height:1.6; overflow-wrap:anywhere; } .ast-x{ position:absolute; top:10px; right:10px; border:0; background:#F1F3F2; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:17px; }
html[data-theme="dark"] .ast-mb{ background:#1B1914; color:#ECE9E2; } html[data-theme="dark"] .ast-quote{ background:#24211B; } html[data-theme="dark"] .ast-x{ background:#34302A; color:#ECE9E2; }

/* ============ AI assistant: setup (asa-) ============ */
.asa .e-page-head-r{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-self:center; } .asa .e-page-head-r .bd-btn{ background:#fff; color:#0A5A5A; border-color:transparent; font-weight:700; } .asa-tabs{ margin-bottom:12px; }
.asa-c{ padding:16px 20px !important; margin-bottom:12px; } .asa-c h2{ margin:0 0 4px; font-size:17px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .asa-c h2 i{ color:#0D7775; } .asa-top{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:flex-start; }
.asa-list{ list-style:none; margin:12px 0 4px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px; } .asa-list li{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; background:#F6F9F8; } .asa-list li i{ font-size:20px; margin-top:1px; } .asa-list li.ok i{ color:#15A06B; } .asa-list li.no i{ color:#B8800F; } .asa-list li.no{ background:#FFF8E8; } .asa-list b{ display:block; font-size:13.5px; } .asa-list small{ display:block; color:#5A645F; font-size:12px; }
.asa-ack{ margin-top:10px; } .asa-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .asa-row input[type=password]{ flex:1 1 280px; height:42px; padding:0 14px; border:1px solid #D9D5CC; border-radius:11px; font:inherit; font-family:ui-monospace,Menlo,Consolas,monospace; background:#fff; }
.asa-res{ display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border-radius:12px; margin-top:10px; font-size:13.5px; } .asa-res i{ font-size:20px; margin-top:1px; } .asa-res.ok{ background:#E9F6EE; color:#1C6E3E; border:1px solid #CBE8D6; } .asa-res.bad{ background:#FFF1F2; color:#8A1425; border:1px solid #F3C9CF; } .asa-res small{ display:block; margin-top:3px; opacity:.85; overflow-wrap:anywhere; }
.asa-help{ margin-top:12px; } .asa-help summary{ cursor:pointer; font-weight:700; color:#0A5F5F; } .asa-help ol{ margin:8px 0 8px 20px; } .asa-help li{ margin:3px 0; } .asa-err{ margin:10px 0 0; font-size:13px; color:#8A5A00; display:flex; gap:6px; align-items:flex-start; overflow-wrap:anywhere; }
.asa-paste{ display:flex; flex-direction:column; gap:8px; margin-top:8px; } .asa-paste input,.asa-paste textarea,.asa-f input,.asa-f select,.asa-f textarea{ border:1px solid #D9D5CC; border-radius:10px; padding:9px 12px; font:inherit; background:#fff; width:100%; } .asa-paste .bd-btn{ align-self:flex-start; }
.asa-pl{ display:flex; gap:8px; align-items:center; padding:6px 10px; margin-top:6px; border-radius:9px; background:#F6F9F8; font-size:13px; } .asa-pl.ok{ color:#1C6E3E; background:#E9F6EE; } .asa-pl.bad{ color:#8A1425; background:#FFF1F2; } .asa-stat{ text-align:right; } .asa-stat b{ font-size:22px; display:block; line-height:1.1; } .asa-stat small{ color:#5A645F; } .asa-acts{ white-space:nowrap; display:flex; gap:6px; }
.asa-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:10px; } .asa-f{ display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:13px; } .asa-f small{ font-weight:400; color:#5A645F; font-size:12px; } .asa-f input,.asa-f select{ height:40px; } .asa-f textarea{ resize:vertical; margin-top:2px; } .asa-two{ display:flex; gap:6px; } .asa-sw-f{ justify-content:flex-start; } .asa-bar{ position:sticky; bottom:10px; display:flex; justify-content:flex-end; padding:8px 0; }
.asa-sw{ position:relative; display:inline-block; width:44px; height:25px; flex:none; } .asa-sw input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; z-index:2; } .asa-sw span{ position:absolute; inset:0; background:#C9CFCC; border-radius:99px; transition:background .15s; } .asa-sw span::after{ content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; background:#fff; border-radius:50%; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.3); } .asa-sw input:checked + span{ background:#0D7775; } .asa-sw input:checked + span::after{ transform:translateX(19px); } .asa-sw input:focus-visible + span{ outline:3px solid rgba(13,119,117,.35); }
.asa-chart{ display:flex; align-items:flex-end; gap:3px; height:110px; padding:4px 0; } .asa-chart div{ flex:1; height:100%; display:flex; align-items:flex-end; } .asa-chart i{ display:block; width:100%; background:#15A897; border-radius:3px 3px 0 0; min-height:3px; }

.asa-c td small,.asa-c th small{ display:block; color:#5A645F; font-size:12px; overflow-wrap:anywhere; } .asa-c td b{ overflow-wrap:anywhere; }


/* ============ Arpan AI: the chat workspace (aai-) ============ */
.aai-off{ text-align:center; padding:34px 20px !important; max-width:560px; margin:24px auto; } .aai-off > i{ font-size:38px; color:#0D7775; } .aai-off h2{ margin:6px 0; font-size:18px; } .aai-off p{ color:#5A645F; margin-bottom:12px; }
.aai{ --a-panel:#fff; --a-soft:#F5F7F6; --a-line:#E3E7E5; --a-ink:#161A19; --a-mute:#5E6967; --a-teal:#0D7775; --a-teal-d:#0A5A5A; --a-tint:#E7F3F1; --a-code:#F4F6F5; --a-codeh:#E9EEEC; --a-red:#E0223D; --a-shadow:0 1px 2px rgba(20,30,28,.06),0 8px 24px -10px rgba(20,30,28,.18);
  display:grid; grid-template-columns:288px minmax(0,1fr); height:calc(100vh - 124px); height:calc(100dvh - 124px); min-height:540px; background:var(--a-panel); border:1px solid var(--a-line); border-radius:18px; overflow:hidden; position:relative; color:var(--a-ink); box-shadow:var(--a-shadow); }
html[data-theme="dark"] .aai{ --a-panel:#1B1914; --a-soft:#211E18; --a-line:#34302A; --a-ink:#ECE9E2; --a-mute:#A9A59B; --a-teal:#2BB5B0; --a-teal-d:#5CCDC8; --a-tint:#1F3A38; --a-code:#12100D; --a-codeh:#26231D; --a-shadow:0 8px 24px -10px rgba(0,0,0,.6); }
.aai button{ font:inherit; color:inherit; } .aai *{ box-sizing:border-box; }
.aai-only-m{ display:none !important; }
.aai-scrim{ display:none; position:absolute; inset:0; z-index:35; background:rgba(12,20,18,.45); }
/* Arpan AI is itself the place to ask questions, so the small help bubble steps aside on this page */
body.aai-page #ar-chat-launcher,body.aai-page #ar-chat-nudge,body.aai-page #ar-chat-panel{ display:none !important; }
/* ---- history ---- */
.aai-side{ background:var(--a-soft); border-right:1px solid var(--a-line); display:flex; flex-direction:column; min-height:0; }
.aai-side-h{ display:flex; gap:8px; padding:14px 14px 8px; } .aai-new{ flex:1; display:flex; align-items:center; gap:8px; justify-content:center; height:42px; border:1px solid var(--a-line); border-radius:12px; background:var(--a-panel); font-weight:700; cursor:pointer; } .aai-new:hover{ border-color:var(--a-teal); color:var(--a-teal); } .aai-new i{ font-size:18px; }
.aai-search{ position:relative; margin:0 14px 8px; } .aai-search i{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--a-mute); z-index:2; pointer-events:none; } .aai-search input{ width:100%; height:38px; border:1px solid var(--a-line); border-radius:10px; padding:0 12px 0 34px; background:var(--a-panel); color:var(--a-ink); font:inherit; font-size:13.5px; } .aai-search input:focus{ outline:2px solid color-mix(in srgb,var(--a-teal) 40%,transparent); border-color:var(--a-teal); }
.aai-list{ flex:1; overflow-y:auto; padding:2px 8px 8px; } .aai-g{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--a-mute); padding:12px 8px 4px; } .aai-none{ color:var(--a-mute); font-size:13px; padding:14px 10px; }
.aai-item{ display:flex; align-items:center; border-radius:10px; position:relative; } .aai-item:hover,.aai-item.on{ background:var(--a-tint); } .aai-item-b{ flex:1; min-width:0; text-align:left; background:none; border:0; padding:9px 10px; cursor:pointer; display:flex; flex-direction:column; gap:1px; border-radius:10px; } .aai-item-b span{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .aai-item-b small{ color:var(--a-mute); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .aai-pinned{ font-size:12px; color:var(--a-teal); margin-right:4px; display:inline; } 
.aai-item-m{ background:none; border:0; color:var(--a-mute); cursor:pointer; padding:8px; border-radius:8px; opacity:0; } .aai-item:hover .aai-item-m,.aai-item.on .aai-item-m,.aai-item-m:focus-visible,.aai-item-m[aria-expanded="true"]{ opacity:1; } .aai-item-m:hover{ background:color-mix(in srgb,var(--a-ink) 8%,transparent); }
.aai-side-f{ border-top:1px solid var(--a-line); padding:10px 14px 12px; display:flex; flex-direction:column; gap:6px; } .aai-link{ display:flex; gap:8px; align-items:center; background:none; border:0; padding:8px 4px; cursor:pointer; font-weight:600; color:var(--a-ink); border-radius:8px; } .aai-link:hover{ color:var(--a-teal); } .aai-left{ font-size:12.5px; font-weight:600; color:var(--a-teal-d); } .aai-priv{ margin:0; font-size:11.5px; color:var(--a-mute); display:flex; gap:6px; line-height:1.4; }
/* ---- main ---- */
.aai-main{ display:flex; flex-direction:column; min-width:0; min-height:0; position:relative; background:var(--a-panel); }
.aai-top{ display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--a-line); min-height:56px; } .aai-title{ flex:1; min-width:0; text-align:left; background:none; border:0; font-size:15px; font-weight:700; padding:6px 8px; border-radius:8px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .aai-title:hover{ background:var(--a-soft); } .aai-top-r{ display:flex; gap:6px; align-items:center; }
.aai-ic{ display:inline-grid; place-items:center; width:34px; height:34px; border:0; background:none; border-radius:9px; cursor:pointer; color:var(--a-mute); font-size:17px; flex:none; } .aai-ic:hover{ background:var(--a-soft); color:var(--a-ink); } .aai-ic.on{ color:var(--a-teal); background:var(--a-tint); } .aai-ic:focus-visible,.aai button:focus-visible{ outline:2px solid var(--a-teal); outline-offset:2px; }
.aai-pill{ display:inline-flex; gap:6px; align-items:center; height:34px; padding:0 12px; border:1px solid var(--a-line); border-radius:99px; background:var(--a-panel); cursor:pointer; font-weight:700; font-size:13px; } .aai-pill:hover{ border-color:var(--a-teal); } .aai-pill.static{ cursor:default; border-color:transparent; background:var(--a-soft); } .aai-pill.static:hover{ border-color:transparent; }
.aai-scroll{ flex:1; overflow-y:auto; min-height:0; overscroll-behavior:contain; } .aai-thread{ max-width:780px; margin:0 auto; padding:22px 20px 18px; display:flex; flex-direction:column; gap:22px; min-height:100%; }
.aai[data-state="empty"] .aai-thread{ justify-content:center; } .aai-loading{ text-align:center; color:var(--a-mute); padding:40px; font-size:22px; } .aai-loading i{ animation:aai-spin 1s linear infinite; display:inline-block; } @keyframes aai-spin{ to{ transform:rotate(360deg); } }
.aai-hello{ text-align:center; padding:10px 0 6px; } .aai-hi{ width:58px; height:58px; border-radius:19px; background:linear-gradient(135deg,#0F8080,#0A5A5A); color:#fff; display:grid; place-items:center; font-size:28px; margin:0 auto 12px; box-shadow:0 10px 24px -10px rgba(15,128,128,.7); } .aai-hello h1{ margin:0 0 6px; font-size:26px; letter-spacing:-.02em; } .aai-hello p{ margin:0 auto 20px; color:var(--a-mute); max-width:520px; line-height:1.5; }
.aai-sug{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:560px; margin:0 auto; } .aai-sug button{ display:flex; align-items:center; gap:10px; text-align:left; padding:13px 14px; border:1px solid var(--a-line); border-radius:14px; background:var(--a-panel); cursor:pointer; font-weight:600; font-size:13.5px; } .aai-sug button:hover{ border-color:var(--a-teal); background:var(--a-tint); } .aai-sug i{ font-size:20px; color:var(--a-teal); }
/* ---- messages ---- */
.aai-m{ display:flex; gap:12px; align-items:flex-start; position:relative; } .aai-m.user{ justify-content:flex-end; } .aai-ub{ background:var(--a-tint); border-radius:18px 18px 4px 18px; padding:10px 15px; max-width:min(82%,640px); line-height:1.55; overflow-wrap:anywhere; } .aai-ut{ white-space:normal; }
.aai-edit{ opacity:0; align-self:center; order:-1; } .aai-m.user:hover .aai-edit,.aai-edit:focus-visible{ opacity:1; } .aai-m.editing .aai-ub{ width:min(100%,640px); max-width:100%; background:var(--a-soft); border:1px solid var(--a-teal); } .aai-edit-ta{ width:100%; border:0; background:transparent; color:var(--a-ink); font:inherit; line-height:1.55; resize:vertical; min-height:70px; } .aai-edit-ta:focus{ outline:none; } .aai-edit-b{ display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.aai-av{ flex:none; width:32px; height:32px; border-radius:11px; background:linear-gradient(135deg,#0F8080,#0A5A5A); color:#fff; display:grid; place-items:center; font-size:17px; margin-top:2px; } .aai-a{ min-width:0; flex:1; }
.aai-md{ line-height:1.65; font-size:15px; overflow-wrap:anywhere; } .aai-md > :first-child{ margin-top:0; } .aai-md > :last-child{ margin-bottom:0; } .aai-md p{ margin:0 0 12px; } .aai-md h1,.aai-md h2,.aai-md h3,.aai-md h4{ margin:20px 0 8px; line-height:1.3; letter-spacing:-.01em; } .aai-md h1{ font-size:21px; } .aai-md h2{ font-size:18px; } .aai-md h3{ font-size:16px; } .aai-md h4{ font-size:15px; } .aai-md ul,.aai-md ol{ margin:0 0 12px; padding-left:24px; } .aai-md li{ margin:4px 0; } .aai-md li > p{ margin:0 0 4px; } .aai-md blockquote{ margin:0 0 12px; padding:2px 14px; border-left:3px solid var(--a-teal); color:var(--a-mute); } .aai-md hr{ border:0; border-top:1px solid var(--a-line); margin:18px 0; } .aai-md a{ color:var(--a-teal); text-decoration:underline; text-underline-offset:2px; } .aai-md strong{ font-weight:700; }
.aai-md :not(pre) > code{ background:var(--a-soft); border:1px solid var(--a-line); padding:1px 6px; border-radius:6px; font-size:.88em; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.aai-tw{ overflow-x:auto; margin:0 0 14px; border:1px solid var(--a-line); border-radius:12px; } .aai-md table{ border-collapse:collapse; width:100%; font-size:14px; } .aai-md th,.aai-md td{ padding:9px 13px; text-align:left; border-bottom:1px solid var(--a-line); white-space:nowrap; } .aai-md td{ white-space:normal; min-width:90px; } .aai-md th{ background:var(--a-soft); font-weight:700; } .aai-md tr:last-child td{ border-bottom:0; }
.aai-code{ margin:0 0 14px; border:1px solid var(--a-line); border-radius:12px; overflow:hidden; background:var(--a-code); } .aai-code-h{ display:flex; justify-content:space-between; align-items:center; padding:6px 8px 6px 14px; background:var(--a-codeh); font-size:12px; color:var(--a-mute); font-weight:600; } .aai-code-h button{ display:inline-flex; gap:5px; align-items:center; border:0; background:none; cursor:pointer; padding:5px 9px; border-radius:7px; font-size:12px; font-weight:600; color:var(--a-mute); } .aai-code-h button:hover{ background:color-mix(in srgb,var(--a-ink) 10%,transparent); color:var(--a-ink); }
.aai-code pre{ margin:0; padding:13px 15px; overflow-x:auto; font-size:13px; line-height:1.55; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } .aai-code code{ background:none !important; border:0 !important; padding:0 !important; font-size:inherit; white-space:pre; }
.hljs-comment,.hljs-quote{ color:#6B7A76; font-style:italic; } .hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-doctag{ color:#B4234A; } .hljs-string,.hljs-regexp,.hljs-addition{ color:#0B7A55; } .hljs-number,.hljs-symbol,.hljs-bullet{ color:#B45A00; } .hljs-title,.hljs-section,.hljs-title.function_,.hljs-title.class_{ color:#1F5FBF; } .hljs-built_in,.hljs-type,.hljs-attr,.hljs-attribute{ color:#7A3FB5; } .hljs-variable,.hljs-template-variable,.hljs-params{ color:inherit; } .hljs-deletion{ color:#B4234A; } .hljs-meta{ color:#6B7A76; }
html[data-theme="dark"] .hljs-comment,html[data-theme="dark"] .hljs-quote{ color:#8D9A96; } html[data-theme="dark"] .hljs-keyword,html[data-theme="dark"] .hljs-selector-tag,html[data-theme="dark"] .hljs-literal{ color:#FF7B96; } html[data-theme="dark"] .hljs-string,html[data-theme="dark"] .hljs-regexp,html[data-theme="dark"] .hljs-addition{ color:#7DDDB0; } html[data-theme="dark"] .hljs-number,html[data-theme="dark"] .hljs-symbol,html[data-theme="dark"] .hljs-bullet{ color:#FFB766; } html[data-theme="dark"] .hljs-title,html[data-theme="dark"] .hljs-section,html[data-theme="dark"] .hljs-title.function_,html[data-theme="dark"] .hljs-title.class_{ color:#7DB4FF; } html[data-theme="dark"] .hljs-built_in,html[data-theme="dark"] .hljs-type,html[data-theme="dark"] .hljs-attr,html[data-theme="dark"] .hljs-attribute{ color:#C9A0FF; }
.aai-m.streaming .aai-md > :last-child::after{ content:""; display:inline-block; width:8px; height:1.05em; margin-left:3px; vertical-align:-3px; background:var(--a-teal); border-radius:2px; animation:aai-blink 1s steps(2,start) infinite; } .aai-m.streaming .aai-md > .aai-code:last-child::after,.aai-m.streaming .aai-md > .aai-tw:last-child::after{ display:none; } @keyframes aai-blink{ to{ visibility:hidden; } }
.aai-think{ display:inline-flex; gap:5px; padding:9px 0; } .aai-think span{ width:8px; height:8px; border-radius:50%; background:var(--a-teal); opacity:.5; animation:aai-bounce 1.1s infinite ease-in-out; } .aai-think span:nth-child(2){ animation-delay:.15s; } .aai-think span:nth-child(3){ animation-delay:.3s; } @keyframes aai-bounce{ 0%,80%,100%{ transform:scale(.6); opacity:.4; } 40%{ transform:scale(1); opacity:1; } } @media (prefers-reduced-motion:reduce){ .aai-think span,.aai-m.streaming .aai-md > :last-child::after{ animation:none; } }
.aai-act{ display:flex; gap:2px; margin:8px 0 0 -8px; } .aai-stopped{ display:inline-flex; gap:6px; align-items:center; margin-top:8px; font-size:12.5px; color:var(--a-mute); background:var(--a-soft); border-radius:99px; padding:4px 11px; }
.aai-cite{ display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 4px; border:0; border-radius:99px; background:var(--a-teal); color:#fff !important; font-size:11px; font-weight:700; cursor:pointer; vertical-align:2px; margin:0 1px; } html[data-theme="dark"] .aai-cite{ color:#0E1514 !important; }
.aai-src{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:12px; padding-top:10px; border-top:1px dashed var(--a-line); } .aai-src > span{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--a-mute); font-weight:700; } .aai-chipsrc{ display:inline-flex; gap:6px; align-items:center; border:1px solid var(--a-line); background:var(--a-soft); border-radius:99px; padding:3px 11px 3px 4px; font-size:12px; font-weight:600; cursor:pointer; max-width:100%; } .aai-chipsrc b{ display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--a-teal); color:#fff; font-size:10.5px; } html[data-theme="dark"] .aai-chipsrc b{ color:#0E1514; } .aai-chipsrc:hover{ border-color:var(--a-teal); }
.aai-atts{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; } .aai-att.img img{ display:block; max-width:220px; max-height:170px; border-radius:12px; object-fit:cover; border:1px solid var(--a-line); } .aai-att.file{ display:flex; gap:9px; align-items:center; padding:8px 12px; background:var(--a-panel); border:1px solid var(--a-line); border-radius:12px; color:inherit; text-decoration:none; max-width:260px; } .aai-att.file i{ font-size:22px; color:var(--a-teal); } .aai-att.file span{ display:flex; flex-direction:column; min-width:0; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .aai-att.file small{ font-weight:400; color:var(--a-mute); }
.aai-err{ display:flex; gap:10px; align-items:center; background:#FDECEE; color:#8A1425; border-radius:12px; padding:10px 14px; font-size:13.5px; } .aai-err i{ font-size:19px; } .aai-err span{ flex:1; } html[data-theme="dark"] .aai-err{ background:#3A1B21; color:#FFB3BD; }
.aai-jump{ position:absolute; left:50%; bottom:128px; transform:translateX(-50%); width:36px; height:36px; border-radius:50%; border:1px solid var(--a-line); background:var(--a-panel); box-shadow:var(--a-shadow); cursor:pointer; z-index:5; display:grid; place-items:center; } .aai-jump[hidden]{ display:none; }
/* ---- composer ---- */
.aai-foot{ padding:6px 16px 10px; } .aai-box-wrap{ max-width:780px; margin:0 auto; } .aai-box{ display:flex; align-items:flex-end; gap:6px; border:1px solid var(--a-line); border-radius:22px; padding:8px 8px 8px 10px; background:var(--a-panel); box-shadow:var(--a-shadow); } .aai-box:focus-within{ border-color:var(--a-teal); box-shadow:0 0 0 3px color-mix(in srgb,var(--a-teal) 22%,transparent); }
.aai-box textarea{ flex:1; min-width:0; resize:none; border:0; background:transparent; color:var(--a-ink); font:inherit; font-size:15px; line-height:1.5; padding:7px 4px; max-height:220px; outline:none; } .aai-chip{ display:inline-flex; gap:6px; align-items:center; height:34px; padding:0 12px; border:1px solid var(--a-line); border-radius:99px; background:transparent; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--a-mute); white-space:nowrap; } .aai-chip[hidden]{ display:none; } .aai-chip:hover{ border-color:var(--a-teal); color:var(--a-ink); } .aai-chip.on{ background:var(--a-tint); border-color:var(--a-teal); color:var(--a-teal-d); } .aai-chip:disabled{ cursor:default; }
.aai-send{ flex:none; width:38px; height:38px; border-radius:50%; border:0; background:var(--a-teal); color:#fff; font-size:19px; cursor:pointer; display:grid; place-items:center; } html[data-theme="dark"] .aai-send{ color:#0E1514; } .aai-send:hover{ filter:brightness(1.08); } .aai-send.stop{ background:var(--a-ink); } html[data-theme="dark"] .aai-send.stop{ background:#ECE9E2; }
.aai-attached{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; } .aai-attached:empty{ display:none; } .aai-fc{ display:flex; gap:9px; align-items:center; padding:6px 8px 6px 8px; border:1px solid var(--a-line); border-radius:12px; background:var(--a-soft); max-width:240px; } .aai-fc img{ width:38px; height:38px; border-radius:8px; object-fit:cover; } .aai-fc > i{ font-size:24px; color:var(--a-teal); width:38px; text-align:center; } .aai-fc.up > i{ animation:aai-spin 1s linear infinite; } .aai-fc span{ display:flex; flex-direction:column; min-width:0; font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .aai-fc small{ font-weight:400; color:var(--a-mute); } .aai-x{ border:0; background:none; cursor:pointer; color:var(--a-mute); padding:4px; border-radius:6px; } .aai-x:hover{ background:color-mix(in srgb,var(--a-ink) 10%,transparent); }
.aai-note{ max-width:780px; margin:7px auto 0; text-align:center; font-size:11.5px; color:var(--a-mute); line-height:1.4; }
.aai-drop{ position:absolute; inset:0; z-index:20; background:color-mix(in srgb,var(--a-panel) 88%,transparent); display:grid; place-items:center; border:3px dashed var(--a-teal); border-radius:18px; pointer-events:none; } .aai-drop[hidden]{ display:none; } .aai-drop > div{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--a-teal-d); } .aai-drop i{ font-size:44px; } .aai-drop span{ color:var(--a-mute); font-size:13px; }
/* ---- menus and dialogs ---- */
.aai-menu.pop{ position:fixed; z-index:1250; min-width:210px; max-width:300px; background:var(--a-panel,#fff); color:var(--a-ink,#161A19); border:1px solid var(--a-line,#E3E7E5); border-radius:14px; box-shadow:0 18px 44px -12px rgba(0,0,0,.35); padding:6px; --a-panel:#fff; --a-ink:#161A19; --a-line:#E3E7E5; --a-mute:#5E6967; --a-soft:#F5F7F6; --a-teal:#0D7775; } html[data-theme="dark"] .aai-menu.pop{ --a-panel:#1B1914; --a-ink:#ECE9E2; --a-line:#34302A; --a-mute:#A9A59B; --a-soft:#2A2720; --a-teal:#2BB5B0; }
.aai-menu.pop button{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; padding:9px 11px; border-radius:9px; cursor:pointer; font:inherit; font-size:13.5px; font-weight:600; color:inherit; } .aai-menu.pop button:hover,.aai-menu.pop button:focus-visible{ background:var(--a-soft); outline:none; } .aai-menu.pop button.danger{ color:#D4203A; } .aai-menu.pop button > i{ font-size:17px; color:var(--a-mute); } .aai-menu.pop button.danger > i{ color:inherit; } .aai-menu.pop button span{ flex:1; } .aai-menu.pop small{ display:block; font-weight:400; color:var(--a-mute); font-size:12px; } .aai-menu.pop hr{ border:0; border-top:1px solid var(--a-line); margin:5px 2px; } .aai-ck{ color:var(--a-teal) !important; }
.aai-modal{ position:fixed; inset:0; z-index:1300; display:grid; place-items:center; padding:16px; --a-panel:#fff; --a-ink:#161A19; --a-line:#E3E7E5; --a-mute:#5E6967; --a-soft:#F5F7F6; --a-teal:#0D7775; --a-tint:#E7F3F1; } html[data-theme="dark"] .aai-modal{ --a-panel:#1B1914; --a-ink:#ECE9E2; --a-line:#34302A; --a-mute:#A9A59B; --a-soft:#26231D; --a-teal:#2BB5B0; --a-tint:#1F3A38; }
.aai-mbg{ position:absolute; inset:0; background:rgba(12,20,18,.5); } .aai-mb{ position:relative; background:var(--a-panel); color:var(--a-ink); border-radius:18px; padding:20px 22px 16px; width:min(540px,100%); max-height:86vh; overflow:auto; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); } .aai-mb h3{ margin:0 0 10px; font-size:17px; } .aai-mbody p{ margin:0 0 10px; line-height:1.5; } .aai-mfoot{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.aai-btn{ height:38px; padding:0 16px; border-radius:10px; border:1px solid var(--a-line,#E3E7E5); background:transparent; cursor:pointer; font-weight:700; font-size:13.5px; display:inline-flex; gap:7px; align-items:center; color:inherit; } .aai-btn:hover{ border-color:var(--a-teal,#0D7775); } .aai-btn.primary{ background:#0D7775; border-color:#0D7775; color:#fff; } html[data-theme="dark"] .aai-btn.primary{ background:#2BB5B0; border-color:#2BB5B0; color:#0E1514; } .aai-btn.danger{ background:#D4203A; border-color:#D4203A; color:#fff; }
.aai-in{ width:100%; border:1px solid var(--a-line); border-radius:10px; padding:10px 12px; background:var(--a-panel); color:var(--a-ink); font:inherit; } .aai-in:focus{ outline:2px solid color-mix(in srgb,var(--a-teal) 40%,transparent); border-color:var(--a-teal); } .aai-lab{ display:block; font-weight:600; font-size:13px; margin-top:12px; } .aai-lab textarea{ margin-top:5px; resize:vertical; } .aai-dz{ margin-top:16px; padding-top:12px; border-top:1px dashed var(--a-line); } .aai-merr{ margin-top:10px; background:#FDECEE; color:#8A1425; padding:8px 12px; border-radius:10px; font-size:13px; } .aai-pg{ color:var(--a-mute); font-size:12.5px; } .aai-quote{ background:var(--a-soft); border-left:4px solid var(--a-teal); border-radius:8px; padding:12px 14px; font-size:13.5px; line-height:1.6; overflow-wrap:anywhere; }
/* ---- phones and small screens ---- */
@media (max-width:860px){
  .aai{ grid-template-columns:minmax(0,1fr); height:calc(100vh - 186px); height:calc(100dvh - 186px); min-height:460px; border-radius:14px; } .aai-only-m{ display:inline-grid !important; }
  .aai-side{ position:absolute; z-index:40; left:0; top:0; bottom:0; width:min(88%,330px); transform:translateX(-104%); transition:transform .22s ease; box-shadow:12px 0 40px -12px rgba(0,0,0,.4); } .aai.open-side .aai-side{ transform:none; } .aai.open-side .aai-scrim{ display:block; } .aai-item-m{ opacity:1; }
  .aai-thread{ padding:16px 12px 12px; gap:18px; } .aai-ub{ max-width:90%; } .aai-av{ display:none; } .aai-sug{ grid-template-columns:1fr; } .aai-hello h1{ font-size:22px; } .aai-edit{ opacity:1; } .aai-foot{ padding:6px 10px 8px; } .aai-box{ border-radius:20px; } .aai-note{ font-size:11px; } .aai-top{ padding:8px 10px; } .aai-jump{ bottom:116px; }
  .aai-chip span{ display:none; } .aai-chip{ padding:0 10px; }
}
@media (prefers-reduced-motion:reduce){ .aai-side{ transition:none; } }

.asa-ck{ display:flex; gap:8px; align-items:center; font-weight:500; padding:4px 0; }

.mx-note{ background:#F1F8F7; border:1px solid #CFE3E0; border-radius:10px; padding:9px 12px; color:#26413F; line-height:1.5; }
html[data-theme="dark"] .mx-note{ background:#1F3A38; border-color:#2C5A57; color:#CFE8E5; }

/* ============ Phones: one rule for the floating chat buttons, and tap targets big enough for a thumb ============ */
@media (max-width:760px){
  :root{ --ar-tab-h:60px; --ar-above-tabs:calc(60px + env(safe-area-inset-bottom,0px) + 14px); }
  /* The bottom bar is on screen up to 760px wide, so the chat buttons must clear it at EVERY phone width (they used to move at 600px and 700px, and covered "More" in between and below). */
  .ar-chat-launcher, #ar-staffchat-launcher{ bottom:var(--ar-above-tabs) !important; right:14px !important; width:52px !important; height:52px !important; font-size:24px !important; z-index:930 !important; }
  .ar-chat-nudge, #ar-chat-nudge{ bottom:calc(var(--ar-above-tabs) + 62px) !important; right:14px !important; max-width:min(270px, calc(100vw - 28px)) !important; z-index:929 !important; }
  .ar-chat-panel, #ar-chat-panel, #ar-staffchat-panel{ left:10px !important; right:10px !important; width:auto !important; bottom:calc(var(--ar-above-tabs) + 62px) !important; height:calc(100dvh - var(--ar-above-tabs) - 62px - 80px) !important; max-height:none !important; z-index:931 !important; }
  .ar-main{ padding-bottom:calc(74px + env(safe-area-inset-bottom,0px)) !important; }
  /* tap targets (named by the phone audit) */
  .nc-toggle{ min-height:40px; min-width:52px; }
  .ts-mv,.ts-ci,.ts-cn{ min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
  .ts-sw{ min-height:40px; display:inline-flex; align-items:center; }
  .sv-chbtn .bd-ic{ min-width:40px; min-height:40px; display:inline-grid; place-items:center; }
  .ts-mv button{ min-width:36px; min-height:36px; }
  .tkt-iconbtn,.tkt-expand{ min-width:40px; min-height:40px; }
  .tkt-btn.primary,.tap-bar-add{ min-height:42px; display:inline-flex; align-items:center; justify-content:center; }
  .ar-dd-btn{ min-height:40px; }
  .ar-dir-chip,.ar-cat-name-input,.ar-cat-icon-input{ min-height:38px; }
  .ar-main input[type=checkbox]:not([class]),.ar-main input[type=radio]:not([class]){ width:22px; height:22px; }   /* native checkboxes were 13px: far too small for a thumb */
  .ins-jump a,.sv-seg button,.ac-chips button,.rn-chips button,.bd-seg a,.tkt-tabs button,.tkt-btn.ghost{ min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
}