/* =============================================================
   EduTask · D2 · מרכז בקרה
   Token-driven RTL design system.
   Inline `var(--navy)` / `var(--gold)` etc. in templates remap to
   D2 tokens via the legacy alias block below — do not reintroduce
   hardcoded hex values; if you need a new color, add a token.
   ============================================================= */

/* ── DESIGN TOKENS (D2) ───────────────────────────────────── */
:root{
  /* surfaces */
  --bg:           #FAFAF7;
  --surface:      #FFFFFF;
  --surface-alt:  #F4F2EA;
  --sidebar-bg:   #0F1419;
  --sidebar-fg:   #FAFAF7;
  --sidebar-mute: #52606D;

  /* text */
  --fg:           #0F1419;
  --fg-muted:     #52606D;
  --fg-subtle:    #8A8F98;
  --fg-on-dark:   #FAFAF7;

  /* brand + state */
  --accent:       #F59E0B;
  --accent-hover: #D97706;
  --accent-soft:  rgba(245,158,11,.12);
  --accent-fg:    #0F1419;
  --ok:           #15803D;
  --ok-soft:      rgba(21,128,61,.10);
  --warn:         #B5660B;
  --warn-soft:    rgba(181,102,11,.12);
  --danger:       #A8331E;
  --danger-soft:  rgba(168,51,30,.10);
  --info:         #1F6FEB;
  --info-soft:    rgba(31,111,235,.10);

  /* borders */
  --border:       #E5E2D7;
  --border-strong:#C9C4B2;
  --ring:         #F59E0B;
  --ring-soft:    rgba(245,158,11,.28);

  /* type */
  --font-body:    "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Rubik", "Heebo", system-ui, sans-serif;

  /* radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* spacing scale (4pt) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* elevation */
  --sh-1: 0 1px 2px rgba(15,20,25,.06), 0 1px 3px rgba(15,20,25,.04);
  --sh-2: 0 4px 12px rgba(15,20,25,.08), 0 2px 4px rgba(15,20,25,.04);
  --sh-3: 0 12px 32px rgba(15,20,25,.14), 0 4px 8px rgba(15,20,25,.06);

  /* layout */
  --sidebar-w: 240px;

  /* legacy aliases — keep templates rendering without inline-style refactor */
  --navy:      var(--sidebar-bg);
  --navy-m:    var(--sidebar-bg);
  --navy-l:    #1F2933;
  --gold:      var(--accent);
  --gold-m:    var(--accent-hover);
  --gold-l:    #FBBF24;
  --gold-pale: var(--accent-soft);
  --g50:       var(--bg);
  --g100:      var(--border);
  --g200:      var(--border-strong);
  --g300:      var(--fg-subtle);
  --g500:      var(--fg-muted);
  --g700:      var(--fg);
  --red:       var(--danger);
  --green:     var(--ok);
  --white:     var(--surface);
  --shadow-sm: var(--sh-1);
  --shadow:    var(--sh-2);
  --shadow-lg: var(--sh-3);
  --r:         var(--r-md);
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  color:var(--fg);
  background:var(--bg);
  direction:rtl;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern","ss01";
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;color:var(--fg);letter-spacing:-.01em;line-height:1.25}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
[hidden],.hidden{display:none!important}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:3px}

/* numbers/dates: render with surrounding bidi-context */
.bidi-plain{unicode-bidi:plaintext}

/* directional icons flip in RTL */
[dir="rtl"] .icon-directional{transform:scaleX(-1)}

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--fg-subtle)}

/* ── LAYOUT ──────────────────────────────────────────────── */
/* Order: sidebar first, main second.
   In RTL, grid column 1 lands on the visual right — sidebar on the right per spec. */
#app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
#sidebar{
  background:var(--sidebar-bg);
  color:var(--sidebar-fg);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  border-inline-start:1px solid rgba(255,255,255,.04);
}
#main{
  background:var(--bg);
  min-width:0; /* prevent grid blowout from long content */
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sb-header{
  padding:var(--sp-5) var(--sp-5) var(--sp-3);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;top:0;z-index:2;
  background:var(--sidebar-bg);
}
.logo-wrap{
  display:block;
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--surface);
  margin-bottom:var(--sp-2);
}
.logo-wrap img{width:100%;height:auto}
.copyright-line{
  color:rgba(250,250,247,.32);
  font-size:11px;
  margin-top:var(--sp-3);
  padding-top:var(--sp-2);
  border-top:1px solid rgba(255,255,255,.05);
  line-height:1.55;
  letter-spacing:.01em;
}
.logo-text-main{color:var(--sidebar-fg);font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em;line-height:1.2}
.logo-text-sub{color:var(--accent);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}

.sb-nav{padding:var(--sp-3) var(--sp-2);flex:1}
.sb-item{
  display:flex;align-items:center;gap:var(--sp-3);
  width:100%;
  padding:10px var(--sp-3);
  background:transparent;
  color:rgba(250,250,247,.66);
  border:0;
  border-radius:var(--r-md);
  font-family:inherit;
  font-weight:600;
  font-size:14.5px;
  text-align:start;
  margin-bottom:2px;
  border-inline-end:3px solid transparent;
  transition:background .15s, color .15s, border-color .15s;
  cursor:pointer;
}
.sb-item:hover{background:rgba(245,158,11,.10);color:var(--sidebar-fg)}
.sb-item.active{
  background:rgba(245,158,11,.14);
  color:var(--sidebar-fg);
  border-inline-end-color:var(--accent);
  font-weight:700;
}
.sb-item-icon{font-size:18px;width:22px;text-align:center;flex-shrink:0;color:inherit}

.sb-footer{
  padding:var(--sp-4) var(--sp-4) var(--sp-5);
  border-top:1px solid rgba(255,255,255,.06);
  position:sticky;bottom:0;background:var(--sidebar-bg);
}
.sb-avatar{
  width:36px;height:36px;
  background:var(--accent);
  color:var(--accent-fg);
  border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:700;font-size:15px;
  flex-shrink:0;
}

/* ── FAB (mobile) ────────────────────────────────────────── */
#fab{
  position:fixed;
  bottom:var(--sp-6);
  inset-inline-start:var(--sp-6);
  width:52px;height:52px;
  background:var(--accent);
  color:var(--accent-fg);
  border-radius:var(--r-pill);
  z-index:200;
  box-shadow:var(--sh-3);
  display:none;
  align-items:center;justify-content:center;
  font-size:22px;
  transition:transform .18s, box-shadow .18s;
}
#fab:hover{transform:scale(1.06)}
#fab-menu{
  position:fixed;
  bottom:84px;
  inset-inline-start:var(--sp-4);
  background:var(--sidebar-bg);
  border-radius:var(--r-lg);
  padding:var(--sp-2);
  box-shadow:var(--sh-3);
  z-index:201;
  min-width:220px;
  border:1px solid rgba(255,255,255,.08);
}
#fab-menu button{
  display:flex;align-items:center;gap:var(--sp-3);
  width:100%;
  padding:10px var(--sp-3);
  background:transparent;
  color:rgba(250,250,247,.78);
  border-radius:var(--r-md);
  font-family:inherit;font-weight:600;font-size:14px;text-align:start;
  transition:background .15s,color .15s;
}
#fab-menu button:hover{background:rgba(245,158,11,.12);color:var(--sidebar-fg)}

/* ── PAGE CHROME ─────────────────────────────────────────── */
.page{padding:var(--sp-7) var(--sp-8);max-width:1400px;margin:0 auto}
.page-title{
  font-family:var(--font-display);
  font-size:26px;font-weight:700;
  color:var(--fg);
  margin-bottom:var(--sp-1);
  letter-spacing:-.012em;
}
.page-sub{font-size:14.5px;color:var(--fg-muted);line-height:1.5}
.breadcrumb{
  display:inline-flex;align-items:center;gap:var(--sp-1);
  margin-bottom:var(--sp-3);
  font-size:14px;color:var(--fg-muted);
  cursor:pointer;background:none;border:0;font-family:inherit;padding:0;
  transition:color .15s;
}
.breadcrumb:hover{color:var(--fg)}

/* gold-bar (legacy class, now amber accent strip) */
.gold-bar{
  height:3px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 30%,transparent 100%);
  margin-bottom:var(--sp-5);
  border-radius:var(--r-pill);
}

.divider{height:1px;background:var(--border);margin:var(--sp-4) 0}

/* ── SURFACE / CARD ──────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:var(--sp-6);
}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--sp-5);gap:var(--sp-3)}

/* ── KPI TILES (T-305) ───────────────────────────────────── */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-4);
  margin-bottom:var(--sp-7);
}
.stat-card,.kpi-tile{
  display:flex;align-items:center;gap:var(--sp-4);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:var(--sp-5) var(--sp-6);
  transition:border-color .18s, box-shadow .18s;
}
.stat-card:hover,.kpi-tile:hover{border-color:var(--border-strong);box-shadow:var(--sh-2)}
.stat-icon,.kpi-icon{
  width:48px;height:48px;
  background:var(--accent-soft);
  color:var(--accent-hover);
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  flex-shrink:0;
  /* override any inline gradient set in templates */
  background-image:none!important;
}
.kpi-value{
  font-family:var(--font-display);
  font-size:28px;font-weight:700;
  color:var(--fg);
  line-height:1.05;
  letter-spacing:-.01em;
}
.kpi-label{font-size:12.5px;color:var(--fg-muted);margin-top:2px;letter-spacing:.01em}

/* dashboard inline number/label overrides — neutralize old --navy */
.stat-card > div > div:first-child{font-family:var(--font-display);color:var(--fg)!important}

/* ── INPUTS ──────────────────────────────────────────────── */
.inp,.input{
  width:100%;
  padding:11px var(--sp-4);
  border:1px solid var(--border-strong);
  border-radius:var(--r-md);
  font-size:15px;
  font-family:inherit;
  direction:rtl;
  outline:none;
  background:var(--surface);
  color:var(--fg);
  transition:border-color .15s, box-shadow .15s;
}
.inp:hover,.input:hover{border-color:var(--fg-subtle)}
.inp:focus,.input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ring-soft);
}
textarea.inp,textarea.input{resize:vertical;min-height:80px;line-height:1.55}
.inp::placeholder,.input::placeholder{color:var(--fg-subtle)}
.inp-g{margin-bottom:var(--sp-4)}
.lbl{
  display:block;
  margin-bottom:6px;
  font-size:13.5px;font-weight:600;
  color:var(--fg);
  letter-spacing:.01em;
}
.req{color:var(--accent-hover);font-weight:700}

/* ── BUTTONS (T-304) ─────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--sp-2);
  border:1px solid transparent;
  cursor:pointer;
  font-family:inherit;font-weight:600;
  border-radius:var(--r-md);
  padding:10px var(--sp-5);
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
  transition:background .16s, border-color .16s, color .16s, box-shadow .16s, transform .16s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none;transform:none}

.btn-lg{padding:13px var(--sp-7);font-size:15.5px}
.btn-md{padding:11px var(--sp-6);font-size:15px}
.btn-sm{padding:7px var(--sp-4);font-size:13px}

/* primary (D2 default) */
.btn-primary,.btn-gold,.btn-navy{
  background:var(--accent);
  color:var(--accent-fg);
  border-color:var(--accent);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.btn-primary:hover,.btn-gold:hover,.btn-navy:hover{
  background:var(--accent-hover);
  border-color:var(--accent-hover);
  filter:none;
}

/* outline / ghost */
.btn-outline{
  background:var(--surface);
  border-color:var(--border-strong);
  color:var(--fg);
}
.btn-outline:hover{
  border-color:var(--fg);
  background:var(--surface-alt);
  color:var(--fg);
}
.btn-ghost{
  background:transparent;
  border-color:transparent;
  color:var(--fg-muted);
}
.btn-ghost:hover{background:var(--surface-alt);color:var(--fg)}

.btn-danger{
  background:var(--danger);color:#fff;border-color:var(--danger);
}
.btn-danger:hover{background:#8C2A18;border-color:#8C2A18}

.btn-icon{
  width:36px;height:36px;padding:0;
  background:transparent;color:var(--fg-muted);border-color:transparent;
  border-radius:var(--r-md);
}
.btn-icon:hover{background:var(--surface-alt);color:var(--fg)}

/* ── BADGES (T-304) ──────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  border-radius:var(--r-pill);
  padding:3px 10px;
  font-size:12px;font-weight:600;
  letter-spacing:.02em;
  background:var(--surface-alt);
  color:var(--fg);
  border:1px solid var(--border);
  /* override legacy gradient */
  background-image:none!important;
}
.badge--ok,.badge-ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.badge--warn,.badge-warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.badge--danger,.badge-danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.badge--info,.badge-info{background:var(--info-soft);color:var(--info);border-color:transparent}
.badge-admin{
  background:var(--fg);
  color:var(--fg-on-dark);
  border-color:transparent;
}
.badge-referent{
  background:var(--accent-soft);
  color:var(--accent-hover);
  border-color:transparent;
}

/* ── CLIENT TILE (dashboard) ─────────────────────────────── */
.clients-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--sp-3);
}
.client-card{
  padding:var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  cursor:pointer;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.client-card:hover{
  border-color:var(--accent);
  box-shadow:var(--sh-2);
  transform:translateY(-1px);
}
.client-name{
  font-family:var(--font-display);
  font-weight:600;font-size:15px;color:var(--fg);
  margin-bottom:4px;line-height:1.3;
}
.client-meta{font-size:13px;color:var(--fg-muted);margin-bottom:var(--sp-2);line-height:1.45}

/* user/referent block */
.user-block{margin-bottom:var(--sp-6)}
.user-header{
  display:flex;align-items:center;gap:var(--sp-3);
  margin-bottom:var(--sp-4);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--border);
}
.user-avatar{
  width:44px;height:44px;
  border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent)!important;
  background-image:none!important;
  color:var(--accent-fg)!important;
  font-family:var(--font-display);
  font-weight:700;font-size:16px;
  flex-shrink:0;
}

/* ── TASK LIST ───────────────────────────────────────────── */
.task-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.task-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  transition:border-color .18s, box-shadow .18s;
}
.task-item:hover{border-color:var(--border-strong);box-shadow:var(--sh-2)}

/* ── TIMELINE ────────────────────────────────────────────── */
.timeline{position:relative}
.tl-line{position:absolute;inset-inline-end:22px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl-item{display:flex;gap:var(--sp-4);margin-bottom:var(--sp-5);position:relative;z-index:1}
.tl-dot{
  width:44px;height:44px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  background:var(--accent)!important;
  background-image:none!important;
  color:var(--accent-fg)!important;
  font-family:var(--font-display);font-weight:700;font-size:14px;
  flex-shrink:0;
  box-shadow:0 0 0 3px var(--bg);
}
.tl-card{
  flex:1;background:var(--surface);
  border-radius:var(--r-md);
  border:1px solid var(--border);
  box-shadow:var(--sh-1);
  padding:var(--sp-4) var(--sp-5);
  transition:box-shadow .18s, border-color .18s;
}
.tl-card:hover{border-color:var(--border-strong);box-shadow:var(--sh-2)}
.tl-header{display:flex;justify-content:space-between;margin-bottom:var(--sp-2);align-items:flex-start;flex-wrap:wrap;gap:6px}
.tl-user{font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--fg)}
.tl-date{font-size:12.5px;color:var(--fg-muted);background:var(--surface-alt);padding:3px 10px;border-radius:var(--r-sm);border:1px solid var(--border);unicode-bidi:plaintext}
.tl-contact{font-size:13.5px;color:var(--accent-hover);font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:4px}
.tl-text{font-size:14px;color:var(--fg);line-height:1.65}

.file-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px var(--sp-3);
  background:var(--surface-alt);
  border-radius:var(--r-md);
  border:1px solid var(--border);
  font-size:13px;color:var(--fg);
  margin-top:var(--sp-2);
  transition:border-color .15s, background .15s;
}
.file-chip:hover{border-color:var(--accent);background:var(--accent-soft)}

/* ── TABLE ───────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{
  padding:var(--sp-3) var(--sp-4);
  text-align:start;
  color:var(--fg-muted);
  font-weight:600;font-size:13px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  background:var(--surface-alt);
  letter-spacing:.02em;
}
.tbl td{
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--surface-alt)}

/* ── MODAL (T-303) ───────────────────────────────────────── */
#modal-bg,.modal-bg{
  position:fixed;
  inset:0;
  background:rgba(15,20,25,.48);
  z-index:10500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--sp-5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:modalFade .14s ease-out;
}
.modal-box{
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:var(--sp-7) var(--sp-7);
  width:480px;
  max-width:96%;
  max-height:88vh;
  overflow-y:auto;
  direction:rtl;
  text-align:start;
  box-shadow:var(--sh-3);
  border:1px solid var(--border);
  font-family:inherit;
  animation:modalIn .18s cubic-bezier(.2,.85,.25,1);
}
.modal-box.wide,.modal-box--wide{width:680px;height:70vh;display:flex;flex-direction:column;overflow:hidden}
.modal-box.wide .modal-head,.modal-box--wide .modal-head{flex:none}
.modal-box.wide .modal-body,.modal-box--wide .modal-body{flex:1;overflow-y:auto;min-height:0}
.modal-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--sp-5);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--border);
  gap:var(--sp-3);
}
.modal-title{
  font-family:var(--font-display);
  font-size:18px;font-weight:600;
  color:var(--fg);
  letter-spacing:-.01em;
}
.modal-body{
  font-family:var(--font-body);
  color:var(--fg);
  font-size:14.5px;
  line-height:1.55;
}
.modal-close{
  width:32px;height:32px;
  background:transparent;
  border-radius:var(--r-pill);
  font-size:16px;
  color:var(--fg-muted);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s, color .15s;
}
.modal-close:hover{background:var(--surface-alt);color:var(--fg)}

@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ── CHECKBOX ────────────────────────────────────────────── */
.chk-row{
  display:flex;align-items:center;gap:var(--sp-2);
  cursor:pointer;
  font-size:14.5px;
  padding:6px var(--sp-2);
  border-radius:var(--r-sm);
  transition:background .12s;
  user-select:none;
}
.chk-row:hover{background:var(--surface-alt)}
.chk-row input[type=checkbox]{
  width:16px;height:16px;
  accent-color:var(--accent);
  cursor:pointer;flex-shrink:0;
}
input[type=radio],input[type=checkbox]{accent-color:var(--accent)}

/* ── ACCORDION (client-detail / tasks) ───────────────────── */
.acc-row{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  margin-bottom:var(--sp-2);
  overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
.acc-row:hover{border-color:var(--border-strong)}
.acc-row.open{border-color:var(--accent);box-shadow:var(--sh-1)}
.acc-head{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  cursor:pointer;
  background:var(--surface);
  transition:background .15s;
}
.acc-head:hover{background:var(--surface-alt)}
.acc-row.open .acc-head{background:var(--accent-soft)}
.acc-title{
  flex:1;
  font-family:var(--font-display);
  font-weight:600;font-size:14.5px;
  color:var(--fg);
}
.acc-chev{
  font-size:18px;color:var(--fg-muted);
  transition:transform .2s;
}
.acc-row.open .acc-chev{transform:rotate(180deg)}
.acc-body{
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--border);
  background:var(--surface-alt);
  animation:slideDown .2s ease-out;
}

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.st-body,.sub-panel-anim{animation:slideDown .2s ease-out}

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

/* ── LOGIN (T-306) ───────────────────────────────────────── */
#login-screen{
  min-height:100vh;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:var(--sp-5);
  position:relative;
  overflow:hidden;
}
#login-screen::before,
#login-screen::after{display:none}
.login-split{
  display:flex;
  width:880px;max-width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-3);
  overflow:hidden;
  position:relative;z-index:1;
}
/* RTL: dark panel on visual right (start side in RTL) */
.login-left{
  width:360px;flex-shrink:0;
  background:var(--sidebar-bg)!important;
  background-image:none!important;
  padding:var(--sp-10) var(--sp-8);
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
  color:var(--fg-on-dark);
}
.login-left::before,
.login-left::after{display:none}
.ll-top{position:relative;z-index:1}
.ll-brand{margin-bottom:var(--sp-10)}
.ll-tagline{
  color:rgba(250,250,247,.62);
  font-size:14.5px;line-height:1.7;
}
.ll-tagline strong{color:var(--accent);font-weight:700}
.ll-features{display:flex;flex-direction:column;gap:var(--sp-4);position:relative;z-index:1}
.ll-feat{display:flex;align-items:flex-start;gap:var(--sp-3)}
.ll-feat-icon{
  width:32px;height:32px;
  background:var(--accent-soft);
  color:var(--accent);
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0;
  border:1px solid rgba(245,158,11,.18);
}
.ll-feat-text{font-size:13px;color:rgba(250,250,247,.66);line-height:1.55;padding-top:3px}
.ll-feat-text strong{color:rgba(250,250,247,.92);font-size:14px;font-weight:600}
.ll-copy{
  color:rgba(250,250,247,.36);
  font-size:11.5px;
  position:relative;z-index:1;
  line-height:1.65;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:var(--sp-3);
}
.login-right{
  flex:1;
  padding:var(--sp-10) var(--sp-8);
  display:flex;flex-direction:column;justify-content:center;
  background:var(--surface);
}
.lr-title{
  font-family:var(--font-display);
  font-size:24px;font-weight:700;
  color:var(--fg);
  margin-bottom:6px;letter-spacing:-.01em;
}
.lr-sub{font-size:14.5px;color:var(--fg-muted);margin-bottom:var(--sp-7)}
.lr-lbl{
  display:block;margin-bottom:6px;
  font-size:12.5px;font-weight:600;
  color:var(--fg);
  letter-spacing:.04em;text-transform:uppercase;
}
.lr-inp-wrap{position:relative;margin-bottom:var(--sp-4)}
.lr-inp-icon{
  position:absolute;
  inset-inline-end:14px;
  top:50%;transform:translateY(-50%);
  font-size:16px;color:var(--fg-subtle);
  pointer-events:none;z-index:1;
}
.lr-inp{
  width:100%;
  padding:12px 42px 12px var(--sp-4);
  border:1px solid var(--border-strong);
  border-radius:var(--r-md);
  font-size:15px;color:var(--fg);
  font-family:inherit;direction:rtl;outline:none;
  background:var(--surface);
  transition:border-color .18s, box-shadow .18s;
}
.lr-inp:focus{
  border-color:var(--accent);
  background:var(--surface);
  box-shadow:0 0 0 3px var(--ring-soft);
}
.lr-inp::placeholder{color:var(--fg-subtle)}
.login-btn{
  width:100%;
  padding:13px;
  background:var(--accent)!important;
  background-image:none!important;
  color:var(--accent-fg);
  border:0;border-radius:var(--r-md);
  font-size:15px;font-weight:700;
  cursor:pointer;font-family:inherit;
  margin-top:var(--sp-2);margin-bottom:var(--sp-5);
  transition:background .18s, transform .18s, box-shadow .18s;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  letter-spacing:.02em;
  position:relative;overflow:hidden;
}
.login-btn::after{display:none}
.login-btn:hover{background:var(--accent-hover)!important;transform:translateY(-1px);box-shadow:var(--sh-2)}
.login-btn:active{transform:translateY(0)}
.demo-box{
  padding:var(--sp-3) var(--sp-4);
  background:var(--surface-alt);
  border-radius:var(--r-md);
  font-size:13px;color:var(--fg-muted);line-height:1.7;
  border:1px solid var(--border);
}
.demo-box strong{color:var(--fg)}

@media(max-width:700px){
  .login-split{flex-direction:column}
  .login-left{width:100%;padding:var(--sp-6) var(--sp-6);flex-direction:row;align-items:center;gap:var(--sp-4)}
  .ll-features,.ll-copy,.ll-tagline{display:none}
  .login-right{padding:var(--sp-6)}
}

/* ── MASTER/DETAIL (clients_manage) ──────────────────────── */
.md-shell{display:grid;grid-template-columns:340px 1fr;gap:var(--sp-5);min-height:calc(100vh - 120px)}
.md-list{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.md-detail{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:var(--sp-6);
  min-height:400px;
}
.md-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;text-align:center;
  color:var(--fg-muted);
  padding:var(--sp-10);
}

/* ── MESSAGES 3-pane ─────────────────────────────────────── */
.msg-shell{display:grid;grid-template-columns:200px 360px 1fr;gap:var(--sp-4);min-height:calc(100vh - 120px)}
.msg-folders{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-3);
  display:flex;flex-direction:column;gap:2px;
}
.msg-folder{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:9px var(--sp-3);
  border-radius:var(--r-md);
  font-size:14px;font-weight:500;
  color:var(--fg-muted);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.msg-folder:hover{background:var(--surface-alt);color:var(--fg)}
.msg-folder.active{background:var(--accent-soft);color:var(--accent-hover);font-weight:600}
.msg-list{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.msg-detail{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-6);
  min-height:400px;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:980px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .md-shell{grid-template-columns:1fr}
  .msg-shell{grid-template-columns:1fr}
  .page{padding:var(--sp-5) var(--sp-5)}
}
@media(max-width:680px){
  #app{grid-template-columns:1fr}
  #sidebar{
    position:fixed;top:0;
    inset-inline-end:0;
    height:100vh;
    width:280px;
    z-index:300;
    transform:translateX(-100%);
    transition:transform .25s;
  }
  #sidebar.open{transform:translateX(0)}
  #main{grid-column:1}
  .stats-grid{grid-template-columns:1fr}
  #fab{display:flex!important}
  .modal-box{width:96%;padding:var(--sp-5)}
}
@media(min-width:681px){
  #fab{display:none!important}
}

/* Legacy FAB / FAB menu must NEVER appear when v2 chrome is active.
   v2 provides its own mobile FAB (.v2-mfab) and bottom tabbar; the
   legacy #fab only exists as a fallback if v2 chrome is disabled.
   Gated unconditionally on body.has-v2-shell to avoid breakpoint drift. */
body.has-v2-shell #fab,
body.has-v2-shell #fab-menu{display:none!important}

/* =============================================================
   ── LAYOUT V2 ──────────────────────────────────────────────
   Structural redesign on top of D2 tokens.
   New chrome: 64px icon rail (right, RTL) + slim topbar above.
   New page patterns: KPI band, chips row, dashboard 2-col,
   clients 3-pane, client-detail hero+tabs, log hero+timeline.
   Mobile: rail+topbar hidden, bottom tabbar + FAB.
   All values derived from existing tokens. No new colors.
   ============================================================= */

/* layout v2 token additions (derived from existing tokens) */
:root{
  --rail-w: 240px;
  --topbar-h: 56px;
}

/* ── V2 APP SHELL — sidebar + main column ──────────────────── */
body.has-v2-shell{padding-block-start:max(var(--topbar-h), calc(env(safe-area-inset-top, 0px) + var(--topbar-h)))}
body.has-v2-shell #app{
  grid-template-columns:var(--rail-w) 1fr;
}

/* ── V2 SIDEBAR ────────────────────────────────────────────── */
#sidebar.v2-rail{
  width:var(--rail-w);
  overflow:hidden;
  top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));
}

#sidebar.v2-rail .sb-header{
  padding:var(--sp-3);
  border-bottom:1px solid rgba(255,255,255,.06);
}
#sidebar.v2-rail .v2-brand{
  width:40px;height:40px;
  border-radius:var(--r-md);
  background:var(--accent);color:var(--accent-fg);
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:18px;
  text-decoration:none;
  flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
#sidebar.v2-rail .v2-brand-row{
  display:flex;align-items:center;gap:var(--sp-3);
  white-space:nowrap;
}
#sidebar.v2-rail .v2-brand-text{
  font-family:var(--font-display);font-weight:800;
  color:var(--sidebar-fg);font-size:15px;
}

#sidebar.v2-rail .copyright-line{display:block}

#sidebar.v2-rail .sb-nav{padding:var(--sp-3) var(--sp-2);flex:1;overflow-y:auto;overflow-x:hidden}

#sidebar.v2-rail .sb-item{
  display:flex;align-items:center;gap:var(--sp-3);
  width:100%;
  padding:10px var(--sp-3);
  white-space:nowrap;
  border-radius:var(--r-md);
  margin-bottom:2px;
  border-inline-end:3px solid transparent;
  color:rgba(250,250,247,.66);
  font-weight:600;font-size:14px;
}
#sidebar.v2-rail .sb-item-icon{
  width:24px;text-align:center;flex:none;font-size:18px;
}
#sidebar.v2-rail .sb-item-label{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
}

#sidebar.v2-rail .sb-footer{padding:var(--sp-3);border-top:1px solid rgba(255,255,255,.06)}
#sidebar.v2-rail .sb-footer-compact{display:none}
#sidebar.v2-rail .sb-footer-expanded{display:block}

/* on mobile rail is hidden anyway, and v2-topbar is hidden too —
   so undo the desktop padding-block-start used to clear the fixed topbar. */
@media(max-width:680px){
  body.has-v2-shell{padding-block-start:0}
  body.has-v2-shell #app{grid-template-columns:1fr}
  #sidebar.v2-rail{display:none}
}

/* ── V2 TOPBAR ─────────────────────────────────────────────── */
/* Fixed full-viewport-width across the top so it forms a clean
   L-shape with the rail (rail starts below topbar, anchored to
   inline-end). Rail and topbar never share the same vertical band. */
.v2-topbar{
  height:var(--topbar-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  padding-inline:var(--sp-5);
  padding-top:env(safe-area-inset-top, 0px);
  gap:var(--sp-4);
  position:fixed;top:0;inset-inline:0;z-index:50;
}
.v2-back-btn{
  width:32px;height:32px;border-radius:var(--r-md);border:1px solid var(--accent);
  background:var(--accent-soft);color:var(--accent);font-size:17px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:all .15s;
}
.v2-back-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ── CHAT BELL ─────────────────────────────────────────────── */
.chat-bell-wrap{position:relative;margin-inline-start:auto}
.chat-bell-btn{
  width:32px;height:32px;border:none;background:rgba(255,255,255,.08);
  border-radius:var(--r-md);color:rgba(255,255,255,.7);font-size:18px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  position:relative;transition:all .15s;
}
.chat-bell-btn:hover{background:rgba(255,255,255,.15);color:#fff}
.chat-bell-badge{
  position:absolute;top:-4px;inset-inline-end:-4px;
  background:#e53e3e;color:#fff;font-size:10px;font-weight:800;
  min-width:18px;height:18px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  line-height:1;
}
#chat-bell-dropdown{
  position:fixed;top:var(--topbar-h,56px);inset-inline-start:var(--sp-3,12px);
  width:320px;max-height:400px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);z-index:9999;
}

/* ── LOG TABS ──────────────────────────────────────────────── */
.log-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:16px}
.log-tab{
  background:none;border:none;padding:10px 18px;font-size:13px;
  font-weight:700;color:var(--fg-muted);cursor:pointer;position:relative;
  font-family:inherit;transition:color .15s;
  border-bottom:2.5px solid transparent;margin-bottom:-2px;
}
.log-tab:hover{color:var(--fg)}
.log-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.log-tab i{margin-inline-end:5px;font-size:15px;vertical-align:middle}

/* ── CHAT BUBBLES ──────────────────────────────────────────── */
.chat-date-sep{
  text-align:center;font-size:11px;font-weight:700;color:var(--fg-muted);
  margin:12px 0;position:relative;
}
.chat-date-sep::before{
  content:'';position:absolute;top:50%;left:0;right:0;
  height:1px;background:var(--border);z-index:0;
}
.chat-date-sep span{
  position:relative;z-index:1;background:var(--surface);padding:0 12px;
}
.chat-bubble{
  max-width:75%;border-radius:12px;padding:8px 14px;
  font-size:13.5px;line-height:1.6;position:relative;
}
.chat-bubble.mine{
  background:var(--accent-soft);border:1px solid var(--gold-l, #fbd38d);
  align-self:flex-end;
}
.chat-bubble.other{
  background:#fff;border:1px solid var(--border);
  align-self:flex-start;
}
.chat-mention{
  background:var(--info-soft, #ebf8ff);color:var(--info, #2b6cb0);
  border-radius:4px;padding:1px 5px;font-weight:700;font-size:12px;
}
.mention-dropdown{
  position:absolute;bottom:100%;inset-inline-start:0;
  background:#fff;border:1.5px solid var(--border);border-radius:8px;
  box-shadow:var(--sh-2);max-height:160px;overflow-y:auto;z-index:10;
  min-width:200px;
}
.mention-item{
  padding:8px 12px;cursor:pointer;display:flex;align-items:center;
  gap:8px;font-size:13px;transition:background .1s;
}
.mention-item:hover,.mention-item.active{background:var(--accent-soft)}

.v2-topbar .crumbs{
  display:flex;align-items:center;gap:var(--sp-2);
  color:var(--fg-muted);font-size:13px;
  white-space:nowrap;min-width:0;
}
.v2-topbar .crumbs strong{color:var(--fg);font-weight:600}
.v2-topbar .crumbs .sep{opacity:.4}
.v2-topbar .crumbs a{color:inherit}
.v2-topbar .crumbs a:hover{color:var(--accent-hover)}

.v2-qa{display:flex;align-items:center;gap:var(--sp-2);flex:none;margin-inline-start:auto}
.v2-new-btn{
  background:var(--accent);color:var(--accent-fg);
  font-weight:700;font-size:13px;
  padding:8px var(--sp-4);border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:6px;
  border:0;cursor:pointer;font-family:inherit;
}
.v2-new-btn:hover{background:var(--accent-hover)}

/* hide topbar on mobile (replaced by v2-mobile-topbar) */
@media(max-width:680px){
  .v2-topbar{display:none}
}

/* ── V2 PAGE BODY ──────────────────────────────────────────── */
.v2-page{
  padding:var(--sp-6);
  display:flex;flex-direction:column;gap:var(--sp-5);
  min-width:0;
}
.v2-page-head{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap}
.v2-page-head h1{font-family:var(--font-display);font-size:26px;letter-spacing:-.012em}
.v2-page-head .lede{color:var(--fg-muted);font-size:14px;margin-top:2px}
.v2-page-head .actions{margin-inline-start:auto;display:flex;gap:var(--sp-2);align-items:center}

/* ── V2 KPI BAND ───────────────────────────────────────────── */
.v2-kpi-band{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.v2-kpi{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-5);
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:var(--sp-3);row-gap:var(--sp-2);
  align-items:center;
  overflow:hidden;
  box-shadow:var(--sh-1);
  transition:border-color .18s, box-shadow .18s;
  text-align:start;
}
.v2-kpi:hover{border-color:var(--border-strong);box-shadow:var(--sh-2)}
.v2-kpi .ico-bg{
  grid-column:1;grid-row:1;
  width:32px;height:32px;border-radius:var(--r-md);
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:16px;
}
.v2-kpi .label{grid-column:2;grid-row:1;color:var(--fg-muted);font-size:13px;font-weight:500}
.v2-kpi .num{grid-column:1 / -1;grid-row:2;justify-self:start;font-family:var(--font-display);font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--fg)}
.v2-kpi .delta{grid-column:1 / -1;grid-row:3;font-size:12px;color:var(--ok);font-weight:600}
.v2-kpi .delta.neg{color:var(--danger)}
.v2-kpi .ico-bg.ok{background:var(--ok-soft);color:var(--ok)}
.v2-kpi .ico-bg.warn{background:var(--warn-soft);color:var(--warn)}
.v2-kpi .ico-bg.info{background:var(--info-soft);color:var(--info)}

/* ── V2 CHIPS ROW ──────────────────────────────────────────── */
.v2-chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.v2-chips .chip{
  font-size:13px;padding:6px var(--sp-3);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-pill);color:var(--fg-muted);
  display:inline-flex;align-items:center;gap:6px;
  cursor:pointer;font-family:inherit;
  transition:border-color .15s, color .15s, background .15s;
  text-decoration:none;
}
.v2-chips .chip:hover{border-color:var(--border-strong);color:var(--fg)}
.v2-chips .chip strong{color:var(--fg);font-weight:600}
.v2-chips .chip.active{background:var(--fg);color:var(--fg-on-dark);border-color:var(--fg)}
.v2-chips .chip.active strong{color:var(--accent)}
.v2-chips .chip-label{color:var(--fg-subtle);font-size:12px;margin-inline-end:var(--sp-2);font-weight:600;letter-spacing:.04em}
.v2-chips .chip-sep{width:1px;height:20px;background:var(--border);margin-inline:var(--sp-2)}

/* ── V2 DASHBOARD GRID ─────────────────────────────────────── */
.v2-dash-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-5);align-items:flex-start}

.v2-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--sh-1);
}
.v2-card .head{
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:var(--sp-3);
}
.v2-card .head h3{font-family:var(--font-display);font-size:15px}
.v2-card .head .meta{margin-inline-start:auto;color:var(--fg-muted);font-size:12px}

.v2-card .body{padding:var(--sp-5)}
.v2-card .empty{
  padding:var(--sp-10) var(--sp-6);text-align:center;
  color:var(--fg-muted);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
}
.v2-card .empty i{font-size:36px;color:var(--fg-subtle);opacity:.6}
.v2-card .empty .t{font-weight:700;color:var(--fg);font-size:14px}
.v2-card .empty .s{font-size:12.5px;color:var(--fg-muted)}

/* todo list inside dash card */
.v2-todo{display:flex;flex-direction:column;list-style:none;padding:0;margin:0}
.v2-todo li{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--border);
}
.v2-todo li:last-child{border-bottom:none}
.v2-todo .check{
  width:18px;height:18px;border-radius:var(--r-sm);
  border:1.5px solid var(--border-strong);flex:none;
}
.v2-todo .body{display:flex;flex-direction:column;gap:2px;min-width:0}
.v2-todo .body .t{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-todo .body .s{color:var(--fg-muted);font-size:12px}

/* small pill (status) */
.v2-pill{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;padding:2px 8px;
  border-radius:var(--r-pill);white-space:nowrap;
}
.v2-pill.warn{background:var(--warn-soft);color:var(--warn)}
.v2-pill.danger{background:var(--danger-soft);color:var(--danger)}
.v2-pill.ok{background:var(--ok-soft);color:var(--ok)}
.v2-pill.info{background:var(--info-soft);color:var(--info)}
.v2-pill.amber{background:var(--accent-soft);color:var(--accent-hover)}
.v2-pill.muted{background:var(--surface-alt);color:var(--fg-muted)}

/* referent chip group on dashboard */
.v2-ref-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);
  margin-bottom:var(--sp-4);
}
.v2-ref-card .ref-head{
  display:flex;align-items:center;gap:var(--sp-3);
  margin-bottom:var(--sp-3);
}
.v2-ref-card .ref-head .av{
  width:36px;height:36px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-fg);
  display:grid;place-items:center;font-weight:700;font-size:13px;
  flex:none;
}
.v2-ref-card .ref-head .av.admin{background:var(--sidebar-bg);color:var(--accent)}
.v2-ref-card .ref-head .name{font-weight:700;font-size:14.5px}
.v2-ref-card .ref-head .meta{font-size:12px;color:var(--fg-muted)}
.v2-ref-card .clients-row{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--sp-2);
}
.v2-ref-card .v2-client-tile{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--sp-3);
  display:flex;flex-direction:column;gap:4px;
  cursor:pointer;text-decoration:none;color:inherit;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.v2-ref-card .v2-client-tile:hover{border-color:var(--accent);box-shadow:var(--sh-2);transform:translateY(-1px)}
.v2-ref-card .v2-client-tile .nm{font-weight:600;font-size:13.5px;color:var(--fg)}
.v2-ref-card .v2-client-tile .mt{font-size:11.5px;color:var(--fg-muted)}
.v2-ref-card .v2-client-tile .row{display:flex;gap:var(--sp-2);margin-top:2px;align-items:center;flex-wrap:wrap}

/* ── V2 CLIENTS 3-PANE ─────────────────────────────────────── */
.v2-three-pane{
  display:grid;grid-template-columns:220px minmax(240px,340px) 1fr;
  gap:var(--sp-5);align-items:flex-start;
  min-height:0;
}
.v2-filter-rail{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-4);
  position:sticky;top:calc(var(--topbar-h) + var(--sp-3));
  box-shadow:var(--sh-1);
}
.v2-filter-rail h4{
  font-family:var(--font-body);font-weight:600;
  font-size:11px;letter-spacing:.06em;color:var(--fg-subtle);
  text-transform:uppercase;
}
.v2-filter-rail .group{display:flex;flex-direction:column;gap:var(--sp-2)}
.v2-filter-rail label{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:13px;color:var(--fg);
  cursor:pointer;
}
.v2-filter-rail label .cnt{margin-inline-start:auto;color:var(--fg-subtle);font-size:11px}
.v2-filter-rail input[type=checkbox],
.v2-filter-rail input[type=radio]{
  width:14px;height:14px;accent-color:var(--accent);
}

.v2-client-list{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-1);
  display:flex;flex-direction:column;
  min-height:0;
}
.v2-client-list .toolbar{
  display:flex;gap:var(--sp-3);align-items:center;
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.v2-client-list .search-mini{
  flex:1;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:6px var(--sp-3);font-size:13px;
  color:var(--fg);
  display:flex;align-items:center;gap:6px;
}
.v2-client-list .search-mini i{font-size:14px;color:var(--fg-muted);flex:none}
.v2-client-list .search-mini input{
  flex:1;border:0;background:transparent;outline:none;
  font-size:13px;
}
.v2-client-list .rows{flex:1;overflow-y:auto;list-style:none;padding:0;margin:0}
.v2-client-list .rows li{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border);
  cursor:pointer;align-items:center;
  position:relative;
  transition:background .12s;
}
.v2-client-list .rows li:last-child{border-bottom:none}
.v2-client-list .rows li:hover{background:var(--surface-alt)}
.v2-client-list .rows li.active{background:var(--accent-soft)}
.v2-client-list .rows li.active::after{
  content:"";position:absolute;
  inset-inline-end:0;top:0;bottom:0;
  width:3px;background:var(--accent);
}
.v2-client-list .av{
  width:34px;height:34px;border-radius:var(--r-pill);
  display:grid;place-items:center;flex:none;
  background:var(--surface-alt);color:var(--fg);font-weight:700;font-size:13px;
}
.v2-client-list .av.amber{background:var(--accent);color:var(--accent-fg)}
.v2-client-list .body .t{font-weight:600;font-size:14px;color:var(--fg);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.v2-client-list .body .s{color:var(--fg-muted);font-size:12px;margin-top:2px}
.v2-client-list .meta-col{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.v2-client-list .count{font-size:11px;color:var(--fg-subtle)}

/* sticky detail card (right column in RTL = visual left) */
.v2-detail-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  position:sticky;top:calc(var(--topbar-h) + var(--sp-3));
  display:flex;flex-direction:column;
  box-shadow:var(--sh-1);
}
.v2-detail-card .empty{
  padding:var(--sp-10) var(--sp-6);text-align:center;
  color:var(--fg-muted);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
}
.v2-detail-card .empty i{font-size:42px;color:var(--fg-subtle);opacity:.55}
.v2-detail-card .empty .t{font-weight:700;color:var(--fg);font-size:14.5px}
.v2-detail-card .empty .s{font-size:12.5px;color:var(--fg-muted)}
.v2-detail-card .hero-mini{
  padding:var(--sp-5);
  background:linear-gradient(135deg,#0F1419,#1F2933);
  color:var(--fg-on-dark);
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.v2-detail-card .hero-mini h3{color:var(--fg-on-dark);font-size:17px;flex:1;font-family:var(--font-display)}
.v2-detail-card .hero-mini .row{display:flex;align-items:center;gap:var(--sp-3)}
.v2-detail-card .hero-mini .av{
  width:42px;height:42px;border-radius:var(--r-md);
  background:var(--accent);color:var(--accent-fg);
  display:grid;place-items:center;font-weight:800;font-size:15px;
  flex:none;
}
.v2-detail-card .hero-mini .pills{display:flex;gap:6px;flex-wrap:wrap}
.v2-detail-card .hero-mini .pills .v2-pill{background:rgba(255,255,255,.08);color:var(--fg-on-dark)}
.v2-detail-card .hero-mini .pills .v2-pill.amber{background:var(--accent);color:var(--accent-fg)}
.v2-detail-card .hero-mini .pills .v2-pill.ok{background:var(--ok);color:#fff}

.v2-detail-card .stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--border);
}
.v2-detail-card .stats div{
  padding:var(--sp-3);text-align:center;
  border-inline-start:1px solid var(--border);
}
.v2-detail-card .stats div:last-child{border-inline-start:none}
.v2-detail-card .stats .n{font-family:var(--font-display);font-weight:800;font-size:20px}
.v2-detail-card .stats .l{color:var(--fg-muted);font-size:11px}

.v2-detail-card .body-list{
  padding:var(--sp-4) var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-3);
}
.v2-detail-card .body-list h5{
  font-family:var(--font-body);font-weight:600;
  font-size:11px;letter-spacing:.06em;
  color:var(--fg-subtle);text-transform:uppercase;
}
.v2-detail-card .kv{display:flex;font-size:13px;justify-content:space-between;color:var(--fg-muted);gap:var(--sp-3)}
.v2-detail-card .kv b{color:var(--fg);font-weight:600}
.v2-detail-card .open-btn{
  margin:var(--sp-4);margin-block-start:0;
  padding:10px var(--sp-4);border-radius:var(--r-md);
  background:var(--fg);color:var(--fg-on-dark);
  font-weight:700;font-size:13px;
  display:inline-flex;justify-content:center;align-items:center;gap:6px;
  text-decoration:none;
}
.v2-detail-card .open-btn:hover{background:var(--sidebar-bg)}

/* ── V2 CLIENT-DETAIL HERO + TABS ──────────────────────────── */
.v2-hero-banner{
  background:linear-gradient(120deg,#0F1419 0%, #1F2933 60%, rgba(245,158,11,.18) 130%);
  color:var(--fg-on-dark);
  border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-7);
  display:grid;grid-template-columns:1fr auto;
  gap:var(--sp-6);align-items:center;
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.04);
  box-shadow:var(--sh-2);
}
.v2-hero-banner::after{
  content:"";position:absolute;
  inset-inline-start:-40px;top:-40px;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-soft) 0%,transparent 70%);
  pointer-events:none;
}
.v2-hero-banner .left{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;position:relative;z-index:1}
.v2-hero-banner .crumb{font-size:12px;color:rgba(255,255,255,.6);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.v2-hero-banner .crumb a{color:inherit}
.v2-hero-banner .crumb a:hover{color:var(--accent)}
.v2-hero-banner h1{
  color:var(--fg-on-dark);font-size:28px;
  display:flex;align-items:center;gap:var(--sp-3);
  font-family:var(--font-display);
  flex-wrap:wrap;
}
.v2-hero-banner h1 .av-big{
  width:48px;height:48px;border-radius:var(--r-md);
  background:var(--accent);color:var(--accent-fg);
  display:grid;place-items:center;font-size:18px;font-weight:800;
  flex:none;
}
.v2-hero-banner .pills{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.v2-hero-banner .pills .v2-pill{background:rgba(255,255,255,.10);color:var(--fg-on-dark)}
.v2-hero-banner .pills .v2-pill.amber{background:var(--accent);color:var(--accent-fg)}
.v2-hero-banner .pills .v2-pill.ok{background:var(--ok);color:#fff}
.v2-hero-banner .actions{
  position:relative;z-index:1;
  display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;
  align-self:flex-start;
}
.v2-hero-banner .actions .btn-line{
  background:rgba(255,255,255,.10);
  color:var(--fg-on-dark);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-md);
  padding:6px 12px;font-size:12px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
  cursor:pointer;font-family:inherit;
}
.v2-hero-banner .actions .btn-line:hover{background:rgba(255,255,255,.18)}
.v2-hero-banner .actions .btn-line.amber{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.v2-hero-banner .actions .btn-line.amber:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* tabs (CSS-only, radio-driven) */
.v2-tabs{
  display:flex;gap:var(--sp-1);
  border-bottom:1px solid var(--border);
  margin-block-start:var(--sp-2);
  flex-wrap:wrap;
}
.v2-tabs input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.v2-tabs label{
  padding:var(--sp-3) var(--sp-4);
  font-weight:600;font-size:14px;color:var(--fg-muted);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  display:inline-flex;align-items:center;gap:6px;
  cursor:pointer;
  transition:color .15s, border-color .15s;
}
.v2-tabs label:hover{color:var(--fg)}
.v2-tabs label .cnt{
  font-size:11px;background:var(--surface-alt);color:var(--fg-muted);
  border-radius:var(--r-pill);padding:1px 7px;font-weight:700;
}
.v2-tabs input[type=radio]:checked + label{
  color:var(--fg);
  border-bottom-color:var(--accent);
}
.v2-tabs input[type=radio]:checked + label .cnt{background:var(--accent);color:var(--accent-fg)}

/* tab panels — show by sibling-state with each radio targeting one panel */
.v2-tab-panel{display:none;margin-block-start:var(--sp-4)}
#v2-tab-tasks:checked ~ .v2-tab-panels #v2-panel-tasks{display:block}

/* tasks-tab card grid */
.v2-tasks-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.v2-task-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:0;
  display:flex;flex-direction:column;
  box-shadow:var(--sh-1);
  overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
.v2-task-card:hover{border-color:var(--border-strong);box-shadow:var(--sh-2)}
.v2-task-card[open]{border-color:var(--accent);box-shadow:var(--sh-2)}
.v2-task-card summary{
  list-style:none;cursor:pointer;
  padding:var(--sp-4) var(--sp-5);
  display:flex;align-items:center;gap:var(--sp-3);
}
.v2-task-card summary::-webkit-details-marker{display:none}
.v2-task-card .num{
  width:36px;height:36px;border-radius:var(--r-md);
  background:var(--sidebar-bg);color:#fff;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:14px;
  flex:none;
}
.v2-task-card .name{flex:1;min-width:0;font-family:var(--font-display);font-weight:700;font-size:15px}
.v2-task-card .cnt{font-size:11px;color:var(--fg-subtle);font-weight:600}
.v2-task-card .progress{
  height:6px;background:var(--surface-alt);border-radius:var(--r-pill);overflow:hidden;
  margin:0 var(--sp-5) var(--sp-4);
}
.v2-task-card .progress span{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}
.v2-task-card .subs{
  display:flex;flex-direction:column;
  border-top:1px solid var(--border);
  background:var(--bg);
}
.v2-task-card .subs > *{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-5);font-size:13px;color:var(--fg-muted);
  border-bottom:1px solid var(--border);
  text-decoration:none;
}
.v2-task-card .subs > *:last-child{border-bottom:none}
.v2-task-card .subs > a:hover{background:var(--surface);color:var(--fg)}
.v2-task-card .subs .dot-s{width:8px;height:8px;border-radius:var(--r-pill);background:var(--border-strong);flex:none}
.v2-task-card .subs .done{color:var(--fg)}
.v2-task-card .subs .done .dot-s{background:var(--ok)}
.v2-task-card .subs .now .dot-s{background:var(--accent)}
.v2-task-card .subs .lock{opacity:.45}
.v2-task-card .nosubs{
  padding:var(--sp-3) var(--sp-5);
  font-size:13px;color:var(--fg-muted);
  border-top:1px solid var(--border);
  background:var(--bg);
  display:flex;align-items:center;gap:var(--sp-3);
}
.v2-task-card .nosubs .go{
  margin-inline-start:auto;
  font-size:12px;font-weight:700;color:var(--accent-hover);
  border:1.5px solid var(--accent-hover);
  border-radius:var(--r-sm);padding:3px 10px;
  text-decoration:none;
}
.v2-task-card .nosubs .go:hover{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}

/* ── V2 LOG HERO + TIMELINE ────────────────────────────────── */
.v2-log-hero{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-6);
  display:flex;flex-direction:column;gap:var(--sp-3);
  border-inline-end:4px solid var(--accent);
  box-shadow:var(--sh-1);
}
.v2-log-hero .crumb{font-size:12px;color:var(--fg-muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.v2-log-hero .crumb a{color:var(--fg-muted)}
.v2-log-hero .crumb a:hover{color:var(--accent-hover)}
.v2-log-hero .row{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.v2-log-hero h1{font-family:var(--font-display);font-size:22px;flex:1;min-width:0}
.v2-log-hero .pills{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.v2-log-hero .progress-row{display:flex;align-items:center;gap:var(--sp-3)}
.v2-log-hero .progress{flex:1;height:8px;background:var(--surface-alt);border-radius:var(--r-pill);overflow:hidden}
.v2-log-hero .progress span{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}
.v2-log-hero .progress-row .lab{font-size:12px;color:var(--fg-muted)}
.v2-log-hero .progress-row .num{font-family:var(--font-display);font-weight:800;color:var(--fg)}

.v2-log-body{
  display:grid;grid-template-columns:1fr 320px;gap:var(--sp-5);
  align-items:flex-start;
}
.v2-timeline{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.v2-timeline .head{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--border);
}
.v2-timeline .head h3{font-family:var(--font-display);font-size:15px;flex:1}
.v2-timeline .head .meta{color:var(--fg-muted);font-size:12.5px}

.v2-thread{display:flex;flex-direction:column;padding:var(--sp-4) var(--sp-5);gap:var(--sp-4)}
.v2-thread .empty{
  text-align:center;padding:var(--sp-10) 0;color:var(--fg-muted);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
}
.v2-thread .empty i{font-size:36px;color:var(--fg-subtle);opacity:.6}
.v2-thread .empty .t{font-weight:700;color:var(--fg);font-size:14.5px}

.v2-thread .item{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);position:relative}
.v2-thread .item:not(:last-child)::after{
  content:"";position:absolute;
  inset-inline-end:18px;top:38px;bottom:-12px;
  width:2px;background:var(--border);
}
.v2-thread .av{
  width:36px;height:36px;border-radius:var(--r-pill);
  display:grid;place-items:center;font-weight:700;font-size:13px;
  background:var(--surface-alt);color:var(--fg);
  border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border);
  z-index:1;position:relative;flex:none;
}
.v2-thread .av.am{background:var(--accent);color:var(--accent-fg)}
.v2-thread .av.dk{background:var(--sidebar-bg);color:var(--accent)}
.v2-thread .bub{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-2);
  min-width:0;
}
.v2-thread .meta{display:flex;align-items:center;gap:var(--sp-2);font-size:12px;color:var(--fg-muted);flex-wrap:wrap}
.v2-thread .meta b{color:var(--fg);font-weight:700}
.v2-thread .meta .when{margin-inline-start:auto;color:var(--fg-subtle)}
.v2-thread .text{font-size:14px;line-height:1.65;white-space:pre-wrap}
.v2-thread .att{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:6px var(--sp-3);font-size:12px;
  color:var(--fg);align-self:flex-start;text-decoration:none;
}
.v2-thread .att:hover{border-color:var(--accent);background:var(--accent-soft)}

/* compose row */
.v2-compose{
  position:sticky;bottom:0;
  margin-block-start:var(--sp-3);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4);
  display:flex;align-items:center;gap:var(--sp-3);
  box-shadow:var(--sh-2);
  z-index:3;
}
.v2-compose .av{
  width:34px;height:34px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-fg);
  display:grid;place-items:center;font-weight:700;font-size:13px;flex:none;
}
.v2-compose .stub{
  flex:1;color:var(--fg-muted);font-size:13.5px;
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:8px var(--sp-4);
  cursor:pointer;
}
.v2-compose .stub:hover{border-color:var(--accent);color:var(--fg)}
.v2-compose .send{
  background:var(--accent);color:var(--accent-fg);
  font-weight:700;padding:8px var(--sp-4);border-radius:var(--r-pill);
  font-size:13px;border:0;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;
}
.v2-compose .send:hover{background:var(--accent-hover)}

/* side rail (subtask log) */
.v2-log-side{
  display:flex;flex-direction:column;gap:var(--sp-4);
  position:sticky;top:calc(var(--topbar-h) + var(--sp-3));
}
.v2-side-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-3);
  box-shadow:var(--sh-1);
}
.v2-side-card h4{
  font-family:var(--font-body);font-weight:600;
  font-size:11px;letter-spacing:.06em;
  color:var(--fg-subtle);text-transform:uppercase;
}
.v2-side-card .kv{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:13px}
.v2-side-card .kv span:first-child{color:var(--fg-muted)}
.v2-side-card .kv b{color:var(--fg);font-weight:600;text-align:end}
.v2-side-card .att-empty{
  font-size:12.5px;color:var(--fg-muted);text-align:center;padding:var(--sp-3) 0;
}
.v2-side-card textarea{
  width:100%;border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-3);font-size:13px;background:var(--bg);
  color:var(--fg);font-family:inherit;direction:rtl;
  resize:vertical;min-height:80px;outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.v2-side-card textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring-soft);background:var(--surface)}

/* ── V2 MOBILE CHROME (top bar + bottom tabbar + FAB) ──────── */
.v2-mtopbar{
  display:none;
  height:48px;background:var(--surface);
  align-items:center;gap:var(--sp-2);
  padding:0 var(--sp-3);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:10;
}
.v2-mtopbar .brand{
  font-family:var(--font-display);font-weight:800;font-size:15px;
  color:var(--fg);
  display:inline-flex;align-items:center;gap:6px;
  margin-inline-start:var(--sp-2);
}
.v2-mtopbar .brand span{color:var(--accent)}
.v2-mtopbar .right{margin-inline-start:auto;display:flex;gap:var(--sp-1);align-items:center}
.v2-mtopbar .ic{
  width:34px;height:34px;border-radius:var(--r-md);
  display:grid;place-items:center;color:var(--fg-muted);
  position:relative;font-size:18px;
  background:transparent;border:0;
}
.v2-mtopbar .ic .dot-badge{
  position:absolute;top:4px;inset-inline-end:4px;
  width:7px;height:7px;border-radius:var(--r-pill);
  background:var(--danger);box-shadow:0 0 0 2px var(--surface);
}

.v2-mtabbar{
  display:none;
  position:fixed;
  inset-inline:0;bottom:0;
  height:64px;background:var(--surface);
  border-top:1px solid var(--border);
  z-index:150;
  padding-block-start:6px;padding-block-end:14px;
}
.v2-mtabbar > div{
  display:grid;grid-template-columns:repeat(5,1fr);
  height:100%;
}
.v2-mtabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:10px;color:var(--fg-muted);
  text-decoration:none;
}
.v2-mtabbar a i{font-size:20px}
.v2-mtabbar a.on{color:var(--accent)}
.v2-mtabbar a.spacer{visibility:hidden}

.v2-mfab{
  position:fixed;bottom:78px;
  left:50%;transform:translateX(-50%);
  width:52px;height:52px;border-radius:50%;
  background:var(--accent);color:var(--accent-fg);
  display:none;place-items:center;
  box-shadow:var(--sh-3);
  border:3px solid var(--surface);
  z-index:160;font-size:22px;
}
.v2-mfab:hover{background:var(--accent-hover)}

@media(max-width:680px){
  .v2-mtopbar{display:flex}
  .v2-mtabbar{display:block}
  .v2-mfab{display:grid}
  /* hide legacy FAB so only v2 mobile chrome shows */
  body.has-v2-shell #fab,
  body.has-v2-shell #fab-menu{display:none!important}
  /* main column needs bottom padding for tabbar clearance */
  body.has-v2-shell #main{padding-bottom:78px}
  .v2-page{padding:var(--sp-4)}
  .v2-page-head h1{font-size:22px}
}

/* ── V2 RESPONSIVE COLLAPSE ────────────────────────────────── */
@media(max-width:1100px){
  .v2-dash-grid,
  .v2-three-pane,
  .v2-log-body,
  .v2-tasks-grid{grid-template-columns:1fr}
  .v2-kpi-band{grid-template-columns:repeat(2,1fr)}
  .v2-filter-rail,
  .v2-detail-card,
  .v2-log-side{position:static}
}

/* ── V2 MISC HELPERS ───────────────────────────────────────── */
.v2-divider{height:1px;background:var(--border);margin-block:var(--sp-4)}
.v2-muted{color:var(--fg-muted)}
.v2-empty-mini{
  padding:var(--sp-8) var(--sp-4);text-align:center;
  color:var(--fg-muted);font-size:13.5px;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
}
.v2-empty-mini i{font-size:32px;color:var(--fg-subtle);opacity:.55}
.v2-empty-mini .t{color:var(--fg);font-weight:700;font-size:14px}

/* ── V2 LIST SEARCH (per-page client-side filter, e.g. users) ──
   Per-page client-side filter input used on the users page.
   ──────────────────────────────────────────────────────────── */
.v2-list-search{
  display:flex;align-items:center;gap:var(--sp-2);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:8px var(--sp-4);
  box-shadow:var(--sh-1);
  max-width:420px;
}
.v2-list-search i{font-size:16px;color:var(--fg-muted);flex:none}
.v2-list-search input{
  flex:1;border:0;background:transparent;outline:none;
  font-size:13.5px;color:var(--fg);
  font-family:inherit;
}
.v2-list-search input::placeholder{color:var(--fg-subtle)}
.v2-list-empty{
  padding:var(--sp-8) var(--sp-4);text-align:center;
  color:var(--fg-muted);font-size:13.5px;
}

/* ── V2 TASKS SPLIT-VIEW ────────────────────────────────────
   Right (master): list of task templates as compact cards.
   Left (detail): selected-task body — keeps the existing rich
   subtask list/editor markup intact, just hides until selected
   via the radio-pattern (CSS-only, no JS framework).
   ──────────────────────────────────────────────────────────── */
.v2-tasks-split{
  display:grid;
  /* RTL: in our doc-direction (rtl) "first column" is visually right.
     Master = right (360px), detail = left (flex-1). */
  grid-template-columns:360px 1fr;
  gap:var(--sp-5);
  align-items:flex-start;
  min-height:0;
}
/* hide the radios visually but keep them functional */
.v2-tasks-split input[type=radio]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}

/* MASTER list — sticky like the clients filter rail */
.v2-tasks-master{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  overflow:hidden;
  position:sticky;
  top:calc(var(--topbar-h) + var(--sp-3));
  display:flex;flex-direction:column;
  max-height:calc(100vh - var(--topbar-h) - var(--sp-6));
}
.v2-tasks-master .head{
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:var(--sp-2);
  background:var(--surface);
}
.v2-tasks-master .head h3{font-family:var(--font-display);font-size:14px;font-weight:700}
.v2-tasks-master .head .meta{margin-inline-start:auto;color:var(--fg-muted);font-size:11.5px}
.v2-tasks-master .rows{overflow-y:auto;list-style:none;margin:0;padding:0;flex:1}

.v2-tm-card{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:var(--sp-3);align-items:center;
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background .12s;
  position:relative;
  user-select:none;
}
.v2-tm-card:last-child{border-bottom:none}
.v2-tm-card:hover{background:var(--surface-alt)}
.v2-tm-card .num{
  width:32px;height:32px;border-radius:var(--r-md);
  background:var(--sidebar-bg);color:#fff;
  display:grid;place-items:center;flex:none;
  font-family:var(--font-display);font-weight:800;font-size:13px;
}
.v2-tm-card .body{min-width:0}
.v2-tm-card .body .t{font-weight:700;font-size:13.5px;color:var(--fg);line-height:1.3}
.v2-tm-card .body .s{color:var(--fg-muted);font-size:11.5px;margin-top:2px}
.v2-tm-card .edit{
  border:1.5px solid var(--border-strong);background:transparent;
  color:var(--fg);border-radius:var(--r-sm);
  padding:4px 8px;font-size:11px;font-weight:700;
  cursor:pointer;font-family:inherit;flex:none;
}
.v2-tm-card .edit:hover{border-color:var(--accent);color:var(--accent-hover)}

/* DETAIL pane — empty state by default; one detail panel revealed per :checked radio. */
.v2-tasks-detail{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:var(--sp-5);
  min-height:300px;
}
.v2-task-detail{display:none}
.v2-tasks-empty{
  padding:var(--sp-10) var(--sp-4);
  text-align:center;color:var(--fg-muted);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
}
.v2-tasks-empty i{font-size:46px;color:var(--fg-subtle);opacity:.55}
.v2-tasks-empty .t{color:var(--fg);font-weight:700;font-size:14.5px}
.v2-tasks-empty .s{font-size:12.5px;color:var(--fg-muted);max-width:300px}

/* Empty-state radio is the default-checked sibling; when any task radio
   gets checked instead, it loses :checked and we swap visibility via
   per-task selectors emitted in the template's inline <style>:
       #task-sel-{id}:checked ~ .v2-tasks-empty{display:none}
       #task-sel-{id}:checked ~ ... .v2-task-detail[data-task-id="{id}"]{display:block}
       #task-sel-{id}:checked ~ ... label[for="task-sel-{id}"]{... selected …}
   See tasks_manage.html. */

/* Mobile collapse: list on top, detail below; detail panel itself stops being sticky. */
@media(max-width:1023px){
  .v2-tasks-split{grid-template-columns:1fr}
  .v2-tasks-master{position:static;max-height:none}
}

/* ── TASKS DETAIL PANEL (V2) ───────────────────────────────
   Cleaner header, calmer subtask list, accent used as accent
   (not background). Replaces inline-style noise inside the
   .v2-task-detail <article> in tasks_manage.html.
   ──────────────────────────────────────────────────────────── */

/* HEADER (sits inside the .v2-tasks-detail wrapper, no own surface) -- */
.v2-task-detail .td-header{
  display:flex;align-items:flex-start;gap:var(--sp-4);
  padding-bottom:var(--sp-4);
  margin-bottom:var(--sp-5);
  border-bottom:1px solid var(--border);
}
.v2-task-detail .td-header-main{flex:1;min-width:0}
.v2-task-detail .td-title-row{
  display:flex;align-items:center;gap:var(--sp-3);
  flex-wrap:wrap;
  margin-bottom:var(--sp-2);
}
.v2-task-detail .td-title{
  font-family:var(--font-display);
  font-size:22px;line-height:1.25;font-weight:700;
  color:var(--fg);letter-spacing:-.005em;
  margin:0;
}
.v2-task-detail .td-id-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px var(--sp-3);
  background:var(--surface-alt);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  font-size:11.5px;font-weight:700;color:var(--fg-muted);
  letter-spacing:.02em;
  white-space:nowrap;
}
.v2-task-detail .td-id-chip i{font-size:13px;color:var(--accent-hover)}
.v2-task-detail .td-desc{
  margin:0;
  font-size:13.5px;line-height:1.6;
  color:var(--fg-muted);
  max-width:62ch;
}
.v2-task-detail .td-actions{
  display:flex;align-items:center;gap:var(--sp-2);
  flex-shrink:0;
}

/* SUBTASKS SECTION ------------------------------------------ */
.v2-task-detail .td-subs{
  /* sits inside .v2-tasks-detail surface; reset the legacy .st-body bg */
  background:transparent;
  border-top:0;
}
.v2-task-detail .td-subs-head{
  display:flex;align-items:center;gap:var(--sp-2);
  margin-bottom:var(--sp-4);
}
.v2-task-detail .td-subs-title{
  font-family:var(--font-body);
  font-size:16px;font-weight:700;color:var(--fg);
  margin:0;line-height:1.2;
}
.v2-task-detail .td-count-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 7px;
  background:var(--accent-soft);
  color:var(--accent-hover);
  border-radius:var(--r-pill);
  font-size:11.5px;font-weight:800;line-height:1;
}
.v2-task-detail .td-subs-add{margin-inline-start:auto}
.v2-task-detail .td-subs-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--sp-3);
}

/* SUBTASK CARD ---------------------------------------------- */
.v2-task-detail .td-sub{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  transition:border-color .15s, box-shadow .15s;
  overflow:hidden;
}
.v2-task-detail .td-sub:hover{
  border-color:var(--border-strong);
  box-shadow:var(--sh-1);
}
.v2-task-detail .td-sub-row{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
}
.v2-task-detail .td-sub-index{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  border-radius:var(--r-pill);
  background:transparent;
  border:1.5px solid var(--accent);
  color:var(--accent-hover);
  font-family:var(--font-display);
  font-size:12px;font-weight:700;line-height:1;
  margin-top:1px;
  unicode-bidi:plaintext;
}
.v2-task-detail .td-sub-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.v2-task-detail .td-sub-name{
  font-size:14.5px;font-weight:700;color:var(--fg);line-height:1.35;
}
.v2-task-detail .td-sub-file{
  align-self:flex-start;
  text-decoration:none;
  font-size:12.5px;
  margin-top:2px;
}
.v2-task-detail .td-sub-edit-btn{flex:none}

/* SUBTASK INLINE EDITOR ------------------------------------- */
.v2-task-detail .td-sub-edit{
  border-top:1px solid var(--border);
  background:var(--surface-alt);
  padding:var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-3);
}
.v2-task-detail .td-edit-label{
  font-size:12px;font-weight:700;color:var(--fg);
  letter-spacing:.01em;
}
.v2-task-detail .td-edit-textarea{
  font-size:13px;line-height:1.6;
  padding:10px var(--sp-3);
  resize:vertical;
  background:var(--surface);
}
.v2-task-detail .td-edit-file{display:flex;flex-direction:column;gap:var(--sp-2)}
.v2-task-detail .td-edit-file-current{
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
}
.v2-task-detail .td-file-remove{
  border:none;background:none;cursor:pointer;
  color:var(--danger);
  font-size:18px;line-height:1;
  width:24px;height:24px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s, color .12s;
}
.v2-task-detail .td-file-remove:hover{background:var(--danger-soft)}
.v2-task-detail .td-file-picker{
  display:inline-flex;align-items:center;gap:7px;
  align-self:flex-start;
  padding:7px var(--sp-3);
  border:1.5px dashed var(--border-strong);
  border-radius:var(--r-sm);
  background:var(--surface);
  cursor:pointer;
  font-size:12.5px;color:var(--fg);
  transition:border-color .12s, background .12s, color .12s;
}
.v2-task-detail .td-file-picker:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent-hover);
}
.v2-task-detail .td-file-picker input[type=file]{display:none}
.v2-task-detail .td-file-pending{
  font-size:12.5px;color:var(--fg);font-weight:600;
}
.v2-task-detail .td-edit-actions{
  display:flex;gap:var(--sp-2);
  justify-content:flex-end;
  margin-top:var(--sp-1);
}

/* EMPTY STATE (task with no subtasks) ----------------------- */
.v2-task-detail .td-empty{
  background:var(--surface);
  border:1px dashed var(--border-strong);
  border-radius:var(--r-lg);
  padding:var(--sp-10) var(--sp-6);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
}
.v2-task-detail .td-empty-icon{
  width:56px;height:56px;
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  color:var(--accent-hover);
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp-2);
}
.v2-task-detail .td-empty-icon i{font-size:26px}
.v2-task-detail .td-empty-title{
  margin:0;
  font-family:var(--font-display);
  font-size:16px;font-weight:700;color:var(--fg);
}
.v2-task-detail .td-empty-sub{
  margin:0 0 var(--sp-3);
  font-size:13px;line-height:1.6;color:var(--fg-muted);
  max-width:42ch;
}

/* MOBILE refinements --------------------------------------- */
@media (max-width:1023px){
  .v2-task-detail .td-header{
    flex-direction:column;
    align-items:stretch;
    padding:var(--sp-4);
  }
  .v2-task-detail .td-actions{justify-content:flex-end}
  .v2-task-detail .td-title{font-size:19px}
  .v2-task-detail .td-subs{padding:var(--sp-4)}
  .v2-task-detail .td-empty{padding:var(--sp-8) var(--sp-4)}
}

/* ══════════════════════════════════════════════════════════
   ROOM CHAT OVERLAY
   ══════════════════════════════════════════════════════════ */
#room-chat-overlay{
  position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
}
.rc-container{
  width:min(95vw,960px);height:min(90vh,700px);
  background:var(--surface);border-radius:var(--r-xl,16px);
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  display:flex;overflow:hidden;direction:rtl;
}
.rc-sidebar{
  width:300px;min-width:260px;border-left:1px solid var(--border);
  display:flex;flex-direction:column;background:var(--bg);
}
.rc-sidebar-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.rc-sidebar-head h3{margin:0;font-size:16px;font-weight:800;color:var(--fg)}
.rc-rooms-list{flex:1;overflow-y:auto}
.rc-room-item{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  cursor:pointer;border-bottom:1px solid var(--border);
  transition:background .12s;
}
.rc-room-item:hover{background:var(--accent-soft)}
.rc-room-item.rc-room-active{background:var(--accent-soft)}
.rc-room-avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;flex-shrink:0;overflow:hidden;
}
.rc-room-avatar.sm{width:36px;height:36px;font-size:15px}
.rc-room-avatar img{width:100%;height:100%;object-fit:cover}
.rc-room-info{flex:1;min-width:0}
.rc-room-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.rc-room-name{font-size:13.5px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-unread-badge{
  background:#e53e3e;color:#fff;border-radius:10px;
  padding:1px 7px;font-size:11px;font-weight:800;flex-shrink:0;
}
.rc-room-last{
  font-size:11.5px;color:var(--fg-muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin-top:2px;
}
.rc-last-user{font-weight:600}
.rc-main{
  flex:1;display:flex;flex-direction:column;min-width:0;
}
.rc-main-empty{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.rc-chat-head{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-bottom:1px solid var(--border);background:var(--surface);
}
.rc-messages{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:6px;
  background:var(--bg);
}
.rc-date-sep{
  text-align:center;margin:12px 0 8px;
}
.rc-date-sep span{
  background:var(--g100);color:var(--fg-muted);
  font-size:11px;padding:3px 14px;border-radius:12px;
}
.rc-bubble{
  max-width:72%;padding:8px 12px;border-radius:12px;
  position:relative;word-break:break-word;
}
.rc-bubble.mine{
  align-self:flex-start;background:var(--accent-soft);
  border-bottom-right-radius:4px;
}
.rc-bubble.other{
  align-self:flex-end;background:var(--surface);
  border:1px solid var(--border);border-bottom-left-radius:4px;
}
.rc-bubble-name{font-size:11px;font-weight:700;color:var(--accent-hover);margin-bottom:2px}
.rc-bubble-text{font-size:13.5px;line-height:1.5;color:var(--fg)}
.rc-bubble-img{max-width:240px;max-height:200px;border-radius:8px;cursor:pointer;margin-bottom:4px}
.rc-bubble-time{font-size:10px;color:var(--fg-muted);text-align:left;margin-top:2px}
.rc-input-bar{
  padding:10px 16px;border-top:1px solid var(--border);background:var(--surface);
}
#rc-img-preview{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px;margin-bottom:6px;background:var(--g50);
  border-radius:6px;border:1px solid var(--g200);
}
.rc-text-input{
  flex:1;resize:none;border:1px solid var(--border);border-radius:8px;
  padding:8px 12px;font-size:13px;font-family:inherit;
  outline:none;background:var(--bg);color:var(--fg);
  max-height:100px;
}
.rc-text-input:focus{border-color:var(--accent)}
.rc-send-btn{
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--navy);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;transition:background .15s;
}
.rc-send-btn:hover{background:var(--accent-hover)}
.rc-icon-btn{
  width:32px;height:32px;border-radius:50%;border:none;
  background:transparent;color:var(--fg-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  transition:background .12s;
}
.rc-icon-btn:hover{background:var(--g100)}

@media(max-width:640px){
  .rc-container{width:100vw;height:100vh;border-radius:0}
  .rc-sidebar{width:100%;min-width:unset}
  .rc-main{display:none}
  .rc-container.rc-room-open .rc-sidebar{display:none}
  .rc-container.rc-room-open .rc-main{display:flex}
}

/* ══════════════════════════════════════════════════════════
   DASHBOARDS
   ══════════════════════════════════════════════════════════ */
.db-filters{
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
  padding:16px 20px;background:var(--bg);border-bottom:1px solid var(--border);
}
.db-kpis{
  display:flex;flex-wrap:wrap;gap:14px;padding:16px 20px;
}
.kpi-card{
  background:var(--surface);border:1.5px solid var(--border);border-radius:10px;
  padding:12px 18px;min-width:160px;
}
.kpi-label{font-size:12px;color:var(--g300);font-weight:600;margin-bottom:2px}
.kpi-value{font-size:22px;font-weight:800;color:var(--navy)}
.db-tabs{
  display:flex;gap:4px;padding:0 20px;border-bottom:2px solid var(--border);
}
.db-tab{
  border:none;background:none;padding:10px 16px;font-size:13px;font-weight:600;
  color:var(--g300);cursor:pointer;border-bottom:2.5px solid transparent;
  transition:all .12s;font-family:inherit;
}
.db-tab:hover{color:var(--navy)}
.db-tab.active{color:var(--navy);border-bottom-color:var(--navy)}
.db-table-wrap{overflow-x:auto;margin:12px 0}
.db-table{
  width:100%;border-collapse:collapse;font-size:12.5px;direction:rtl;
}
.db-table th,.db-table td{
  padding:8px 10px;border:1px solid var(--border);text-align:right;white-space:nowrap;
}
.db-table th{
  background:var(--sidebar-bg);color:#fff;font-weight:700;font-size:11.5px;
  position:sticky;top:0;z-index:1;
}
.db-table tbody tr:nth-child(even){background:var(--bg)}
.db-table tbody tr:hover{background:rgba(59,130,246,.06)}
.db-total-row td{background:#fff3cd!important;font-weight:700}