/* ── SENTINEL DARK (default) ─────────────────────── */
:root {
  /* ── Dark (black + grey blend) ── */
  --bg:          #161619;
  --surface:     #202024;
  --surface2:    #2a2a2f;
  --surface3:    #3a3a40;
  --border:      rgba(255,255,255,.09);
  --border2:     rgba(255,255,255,.15);
  --text:        #ffffff;
  --text2:       #ebebf5cc;
  --text3:       #ebebf560;
  --accent:      #ff375f;
  --accent-dim:  rgba(255,55,95,.15);
  --accent-dark: #d70040;
  --danger:      #ff453a;
  --danger-dim:  rgba(255,69,58,.15);
  --success:     #30d158;
  --success-dim: rgba(48,209,88,.15);
  --warning:     #ffd60a;
  --warning-dim: rgba(255,214,10,.13);
  --info:        #0a84ff;
  --info-dim:    rgba(10,132,255,.15);
  --purple:      #bf5af2;
  --purple-dim:  rgba(191,90,242,.15);
  --radius:      12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --sidebar-w:   240px;
  --trans:       .2s cubic-bezier(.4,0,.2,1);
  --font-d:      -apple-system,'SF Pro Display','Helvetica Neue',sans-serif;
  --font-b:      -apple-system,'SF Pro Text','Helvetica Neue',sans-serif;
  --font-m:      'SF Mono','DM Mono',ui-monospace,monospace;
  --glow-accent: none;
  --glow-success:none;
  --glow-danger: none;
}

/* ── LIGHT MODE ──────────────────────────────────── */
[data-theme="light"] {
  /* ── Apple Fitness Light ── */
  --bg:          #f2f2f7;
  --surface:     #ffffff;
  --surface2:    #f2f2f7;
  --surface3:    #e5e5ea;
  --border:      rgba(60,60,67,.18);
  --border2:     rgba(60,60,67,.3);
  --text:        #000000;
  --text2:       rgba(60,60,67,.78);
  --text3:       rgba(60,60,67,.45);
  --accent:      #ff375f;
  --accent-dim:  rgba(255,55,95,.12);
  --accent-dark: #d70040;
  --danger:      #ff3b30;
  --danger-dim:  rgba(255,59,48,.1);
  --success:     #34c759;
  --success-dim: rgba(52,199,89,.12);
  --warning:     #ff9500;
  --warning-dim: rgba(255,149,0,.12);
  --info:        #007aff;
  --info-dim:    rgba(0,122,255,.12);
  --purple:      #af52de;
  --purple-dim:  rgba(175,82,222,.12);
  --glow-accent: none;
  --glow-success:none;
  --glow-danger: none;
}

/* ── BLACK (AMOLED) MODE ─────────────────────────── */
[data-theme="black"] {
  --bg:          #000000;
  --surface:     #0a0a0a;
  --surface2:    #141414;
  --surface3:    #1f1f1f;
  --border:      rgba(255,255,255,.06);
  --border2:     rgba(255,255,255,.11);
  --text:        #ffffff;
  --text2:       rgba(235,235,245,.7);
  --text3:       rgba(235,235,245,.4);
  --accent:      #ff375f;
  --accent-dim:  rgba(255,55,95,.15);
  --accent-dark: #d70040;
  --danger:      #ff453a;
  --danger-dim:  rgba(255,69,58,.15);
  --success:     #30d158;
  --success-dim: rgba(48,209,88,.15);
  --warning:     #ffd60a;
  --warning-dim: rgba(255,214,10,.13);
  --info:        #0a84ff;
  --info-dim:    rgba(10,132,255,.15);
  --purple:      #bf5af2;
  --purple-dim:  rgba(191,90,242,.15);
  --glow-accent: none;
  --glow-success:none;
  --glow-danger: none;
}

/* ── THEME TOGGLE BUTTON ─────────────────────────── */
.theme-toggle {
  width: 36px; height: 20px;
  border-radius: 10px;
  background: var(--surface3);
  border: 1px solid var(--border2);
  position: relative;
  cursor: pointer;
  transition: background var(--trans);
  flex-shrink: 0;
}
.theme-toggle::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text2);
  top: 2px; left: 2px;
  transition: all var(--trans);
}
[data-theme="light"] .theme-toggle { background: var(--accent-dim); }
[data-theme="light"] .theme-toggle::after { left: 18px; background: var(--accent); }

/* ── RECURRING BADGE ─────────────────────────────── */
.badge-recur {
  background: var(--purple-dim);
  color: var(--purple);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 99px;
  font-family: var(--font-m);
  letter-spacing: .02em;
}

/* ── RECUR DAY PICKER ────────────────────────────── */
.day-picker {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px;
}
.day-chip {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text2);
  font-size: 11px;
  cursor: pointer;
  transition: all var(--trans);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-m);
}
.day-chip.on { background: var(--purple-dim); border-color: var(--purple); color: var(--purple); font-weight: 600; }
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}body{min-height:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);font-size:15px;line-height:1.6}
a{color:inherit;text-decoration:none}
button{font-family:var(--font-b);cursor:pointer}
input,select,textarea{font-family:var(--font-b)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:2px}

/* ── AUTH ────────────────────────────────────────── */
.auth-screen{height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px}
.auth-card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-xl);padding:36px 32px;width:100%;max-width:420px;animation:fadeUp .3s ease}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px;justify-content:center}
.auth-tabs{display:flex;background:var(--surface2);border-radius:var(--radius);padding:4px;gap:4px;margin-bottom:24px}
.atab{flex:1;padding:8px;border-radius:8px;border:none;background:transparent;color:var(--text2);font-size:14px;font-weight:500;transition:all var(--trans)}
.atab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-error{font-size:13px;color:var(--danger);min-height:18px;text-align:center}
.hidden{display:none!important}

/* ── LAYOUT ──────────────────────────────────────── */
.main-app{display:flex;width:100%;height:100vh;overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0}

/* ── SIDEBAR ─────────────────────────────────────── */
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);height:100vh;overflow-y:auto;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:20px 14px;gap:16px;flex-shrink:0;transition:transform var(--trans),width var(--trans),min-width var(--trans),padding var(--trans)}

/* Sidebar toggle button (header) */
.sidebar-toggle-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--border2);background:transparent;color:var(--text2);cursor:pointer;transition:all var(--trans);flex-shrink:0}
.sidebar-toggle-btn:hover{background:var(--surface2);color:var(--text)}

/* Collapsed sidebar (desktop only) */
@media (min-width:769px){
  .main-app.sidebar-collapsed .sidebar{width:0;min-width:0;padding-left:0;padding-right:0;border-right:none;overflow:hidden}
  .main-app.sidebar-collapsed .sidebar > *{opacity:0}
}
.sidebar-brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:900;font-size:13px;color:#0d0d0f;flex-shrink:0}
.brand-name{font-family:var(--font-d);font-weight:600;font-size:15px;letter-spacing:-.01em}
.brand-sub{font-size:10px;color:var(--text3);font-family:var(--font-m);letter-spacing:.05em}
.sidebar-time{font-family:var(--font-m);font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1}
.sidebar-date{font-family:var(--font-d);font-size:12px;color:var(--text2);font-style:italic}
.sidebar-nav{display:flex;flex-direction:column;gap:2px}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-group + .nav-group{margin-top:12px}
.nav-group-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--text3);font-family:var(--font-m);padding:4px 12px 4px;opacity:.75}
.nav-item{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:var(--radius);border:none;background:transparent;color:var(--text2);font-size:13.5px;transition:all var(--trans);text-align:left;width:100%}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{background:var(--accent-dim);color:var(--accent)}
.nav-icon{font-size:11px;width:14px;flex-shrink:0}
.sidebar-footer{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.ring-wrap{position:relative;width:64px;height:64px}
.ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-m);font-size:13px;font-weight:500;color:var(--accent)}
.foot-stats{display:flex;gap:18px}
.fstat{display:flex;flex-direction:column;align-items:center;font-family:var(--font-m);font-size:20px;font-weight:500}
.fstat small{font-size:10px;color:var(--text3);font-weight:400;font-family:var(--font-b)}
.user-chip{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface2);border-radius:var(--radius);cursor:pointer;width:100%;transition:background var(--trans)}
.user-chip:hover{background:var(--surface3)}
.avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#0d0d0f;flex-shrink:0}
.user-info div:first-child{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.user-info div:last-child{font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}

/* ── MAIN CONTENT ────────────────────────────────── */
.main-content{flex:1;min-width:0;height:100vh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
.page{display:none;flex-direction:column;padding:28px 32px 48px}
.page.active{display:flex}

/* ── PAGE HEADER ─────────────────────────────────── */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.page-title{font-family:var(--font-d);font-size:28px;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.page-sub{font-size:13px;color:var(--text3);font-family:var(--font-m);margin-top:3px}
.header-btns{display:flex;gap:8px;align-items:center}

/* ── BUTTONS ─────────────────────────────────────── */
.btn-primary{padding:9px 20px;border-radius:var(--radius);border:none;background:var(--accent);color:#0d0d0f;font-size:14px;font-weight:500;transition:all var(--trans)}
.btn-primary:hover{background:var(--accent-dark)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{padding:9px 18px;border-radius:var(--radius);border:1px solid var(--border2);background:transparent;color:var(--text2);font-size:14px;transition:all var(--trans)}
.btn-ghost:hover{color:var(--text);border-color:var(--text2)}
.btn-icon{width:36px;height:36px;border-radius:var(--radius);border:1px solid var(--border2);background:var(--surface);color:var(--text2);font-size:17px;display:flex;align-items:center;justify-content:center;transition:all var(--trans)}
.btn-icon:hover{background:var(--surface2);color:var(--text)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#0d0d0f;font-weight:700}
.btn-accent:hover{background:var(--accent-dark)!important;color:#0d0d0f!important}
.btn-danger{border-color:var(--danger)!important;color:var(--danger)!important}
.btn-danger:hover{background:var(--danger-dim)!important}
.w100{width:100%}

/* ── FORMS ───────────────────────────────────────── */
.field-group{display:flex;flex-direction:column;gap:6px;flex:1}
.field-group label{font-size:11px;font-family:var(--font-m);color:var(--text2);letter-spacing:.06em;text-transform:uppercase}
.field-group input,.field-group select,.field-group textarea{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-size:14px;padding:9px 12px;outline:none;transition:border-color var(--trans);width:100%}
.field-group input:focus,.field-group select:focus,.field-group textarea:focus{border-color:var(--accent)}
.field-group textarea{min-height:76px;resize:vertical;line-height:1.5}
.field-group select option{background:var(--surface2)}
.field-row{display:flex;gap:12px}

/* ── STATS CARDS ─────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:24px}
.stat-card-clickable{cursor:pointer}
.stat-card-clickable:hover{border-color:var(--accent)!important;transform:translateY(-1px)}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px}
.stat-card-n{font-size:26px;font-weight:500;font-family:var(--font-m);line-height:1}
.stat-card-l{font-size:12px;color:var(--text3);margin-top:4px}

/* ── TASK CARDS ──────────────────────────────────── */
.task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.task-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:15px;display:flex;flex-direction:column;gap:10px;transition:all var(--trans);animation:fadeUp .18s ease both}
.task-card:hover{border-color:var(--border2);background:var(--surface2)}
.task-card.done{opacity:.5}
.task-card.overdue{border-left:4px solid rgba(255,69,58,.45);background:transparent}
.task-card.p-critical{border-top:2px solid var(--danger)}
.task-card.p-high{border-top:2px solid var(--warning)}
.task-card.p-medium{border-top:2px solid var(--info)}
.task-card.p-low{border-top:2px solid var(--text3)}
.card-top{display:flex;align-items:flex-start;gap:10px}
.check-btn{width:20px;height:20px;border-radius:50%;border:2px solid var(--border2);background:transparent;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--trans);margin-top:2px;padding:0}
.check-btn:hover{border-color:var(--success)}
.check-btn.checked{background:var(--success);border-color:var(--success)}
.check-btn.checked::after{content:'';width:6px;height:5px;border-left:2px solid #0d0d0f;border-bottom:2px solid #0d0d0f;transform:rotate(-45deg) translateY(-1px);display:block}
.card-body{flex:1;min-width:0}
.card-title{font-size:14px;font-weight:500;line-height:1.4;word-break:break-word}
.task-card.done .card-title{text-decoration:line-through;color:var(--text3)}
.card-notes{font-size:12px;color:var(--text2);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}
.card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.badge{font-size:11px;font-weight:500;padding:2px 8px;border-radius:99px;font-family:var(--font-m)}
.b-critical{background:var(--danger-dim);color:var(--danger)}
.b-high{background:var(--warning-dim);color:var(--warning)}
.b-medium{background:var(--info-dim);color:var(--info)}
.b-low{background:var(--surface3);color:var(--text3)}
.b-cat{background:var(--surface3);color:var(--text2)}
.time-chip{font-size:11px;font-family:var(--font-m);color:var(--text3);margin-left:auto}
.time-chip.od{color:var(--danger)}
.card-actions{display:flex;gap:4px;justify-content:flex-end;padding-top:8px;border-top:1px solid var(--border)}
.card-btn{font-size:12px;padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;transition:all var(--trans)}
.card-btn:hover{border-color:var(--border2);color:var(--text)}
.card-btn.del:hover{border-color:var(--danger);color:var(--danger)}

/* ── FILTER STRIP ────────────────────────────────── */
.filter-strip{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.filt{padding:5px 14px;border-radius:99px;border:1px solid var(--border2);background:transparent;color:var(--text2);font-size:13px;cursor:pointer;transition:all var(--trans)}
.filt:hover{border-color:var(--accent);color:var(--accent)}
.filt.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}

/* ── EMPTY STATE ─────────────────────────────────── */
.empty-state{grid-column:1/-1;text-align:center;padding:56px 20px}
.empty-icon{font-family:var(--font-d);font-size:56px;font-style:italic;color:var(--text3);line-height:1;margin-bottom:10px}
.empty-title{font-family:var(--font-d);font-size:20px;font-weight:600;color:var(--text2);margin-bottom:4px}
.empty-sub{font-size:13px;color:var(--text3)}

/* ── HISTORY CALENDAR ────────────────────────────── */
.cal-wrap{display:flex;flex-direction:column;gap:4px}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:2px}
.cal-dow-cell{text-align:center;font-size:11px;font-family:var(--font-m);color:var(--text3);text-transform:uppercase;letter-spacing:.04em;padding:4px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-cell{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:6px;min-height:72px;cursor:pointer;transition:all var(--trans);position:relative}
.cal-cell:hover{border-color:var(--border2);background:var(--surface2)}
.cal-cell.empty{background:transparent;border-color:transparent;cursor:default}
.cal-cell.today{border-color:var(--accent)}
.cal-num{font-size:12px;font-family:var(--font-m);color:var(--text2);margin-bottom:4px;font-weight:500}
.cal-cell.today .cal-num{color:var(--accent)}
.cal-dots{display:flex;flex-wrap:wrap;gap:2px}
.cal-dot{width:6px;height:6px;border-radius:50%}
.cal-pct{font-size:10px;font-family:var(--font-m);color:var(--text3);position:absolute;bottom:5px;right:6px}
.cal-pct.full{color:var(--success)}

/* ── HISTORY LIST ────────────────────────────────── */
.hist-list{display:flex;flex-direction:column;gap:6px}
.hist-day{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.hist-day-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;transition:background var(--trans)}
.hist-day-hdr:hover{background:var(--surface2)}
.hist-day-date{font-family:var(--font-d);font-size:15px;font-weight:600}
.hist-day-meta{display:flex;align-items:center;gap:10px}
.pct-bar{width:72px;height:5px;background:var(--surface3);border-radius:3px;overflow:hidden}
.pct-fill{height:100%;border-radius:3px;background:var(--success);transition:width .4s}
.pct-fill.warn{background:var(--warning)}
.pct-fill.bad{background:var(--danger)}
.pct-lbl{font-size:11px;font-family:var(--font-m);color:var(--text2);min-width:30px;text-align:right}
.hist-tasks{padding:0 16px 12px;display:none;flex-direction:column;gap:4px}
.hist-tasks.open{display:flex}
.hist-task-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border)}
.hist-task-row:last-child{border:none}
.htdot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.ht-title{flex:1;font-size:13px}
.ht-title.crossed{text-decoration:line-through;color:var(--text3)}

/* ── HISTORY SUMMARY ROW ─────────────────────────── */
.hist-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.hs-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;text-align:center}
.hs-n{font-size:24px;font-weight:500;font-family:var(--font-m)}
.hs-l{font-size:11px;color:var(--text3);margin-top:3px}

/* ── ANALYTICS ───────────────────────────────────── */
.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px}
.chart-card.full{grid-column:1/-1}
.chart-title{font-size:14px;font-weight:500;margin-bottom:14px;color:var(--text2)}
.bar-chart{display:flex;flex-direction:column;gap:8px}
.bar-row{display:flex;align-items:center;gap:10px}
.bar-label{font-size:12px;color:var(--text2);width:80px;flex-shrink:0;text-align:right;font-family:var(--font-m)}
.bar-track{flex:1;height:8px;background:var(--surface3);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.bar-val{font-size:11px;font-family:var(--font-m);color:var(--text2);width:30px}
.trend-chart{display:flex;align-items:flex-end;gap:3px;height:100px;padding-top:8px}
.trend-bar{flex:1;border-radius:3px 3px 0 0;transition:height .4s;min-width:4px;cursor:pointer;position:relative}
.trend-bar:hover::after{content:attr(data-tip);position:absolute;bottom:110%;left:50%;transform:translateX(-50%);background:var(--surface3);border:1px solid var(--border2);border-radius:6px;padding:3px 7px;font-size:11px;white-space:nowrap;z-index:10;pointer-events:none;font-family:var(--font-m)}

/* ── CATEGORIES ──────────────────────────────────── */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.cat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;gap:10px;transition:all var(--trans)}
.cat-card:hover{border-color:var(--border2)}
.cat-card-top{display:flex;align-items:center;gap:10px}
.cat-icon-circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.cat-name{font-size:15px;font-weight:500}
.cat-count{font-size:12px;color:var(--text3);font-family:var(--font-m)}
.cat-actions{display:flex;gap:4px;padding-top:8px;border-top:1px solid var(--border)}
.color-picker-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.color-swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all var(--trans)}
.color-swatch.selected{border-color:var(--text);transform:scale(1.2)}

/* ── SETTINGS ────────────────────────────────────── */
.settings-sections{display:flex;flex-direction:column;gap:20px;max-width:520px}
.settings-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px}
.section-title{font-size:13px;font-weight:500;color:var(--text2);font-family:var(--font-m);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.avatar-row{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.avatar-lg{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;color:#0d0d0f}
.db-status-row{display:flex;align-items:center;gap:8px;font-size:12px;font-family:var(--font-m);color:var(--text3)}
.db-dot{width:8px;height:8px;border-radius:50%;background:var(--text3)}
.db-dot.ok{background:var(--success)}
.db-dot.err{background:var(--danger)}
.db-dot.pinging{background:var(--warning);animation:pulse 1s infinite}

/* ── MODAL ───────────────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:200;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.modal-overlay.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-xl);width:100%;max-width:460px;animation:scaleIn .18s ease}
.modal-wide{max-width:580px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid var(--border)}
.modal-title{font-family:var(--font-d);font-size:19px;font-weight:600}
.modal-body{padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.modal-footer{padding:14px 22px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border2);background:transparent;color:var(--text2);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--trans)}
.icon-btn:hover{background:var(--surface2);color:var(--text)}

/* ── TOAST ───────────────────────────────────────── */
#toast-stack{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:6px;z-index:500}
.toast{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);padding:11px 15px;font-size:13px;max-width:280px;animation:slideRight .2s ease;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.toast.t-danger{border-color:var(--danger);color:var(--danger)}
.toast.t-success{border-color:var(--success);color:var(--success)}
.toast.t-warning{border-color:var(--warning);color:var(--warning)}

/* ── REMINDER BAR ────────────────────────────────── */
.reminder-bar{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:var(--surface2);border:1px solid var(--warning);border-radius:var(--radius);padding:10px 16px;font-size:13px;color:var(--warning);display:none;align-items:center;gap:10px;z-index:400;max-width:500px;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.reminder-bar.show{display:flex}
.reminder-icon{width:20px;height:20px;border-radius:50%;background:var(--warning);color:#0d0d0f;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ── DAY MODAL ───────────────────────────────────── */
.day-task-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.day-task-row:last-child{border:none}
.day-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:4px}
.day-dot.done{background:var(--success)}
.day-dot.pending{background:var(--warning)}
.day-dot.missed{background:var(--danger)}
.day-task-info{flex:1}
.day-task-title{font-size:13.5px;font-weight:500}
.day-task-title.crossed{text-decoration:line-through;color:var(--text3)}
.day-task-meta{font-size:11px;color:var(--text2);margin-top:3px;font-family:var(--font-m)}

/* ── PROGRESS BAR (inline) ───────────────────────── */
.prog-bar{height:4px;background:var(--surface3);border-radius:2px;overflow:hidden;margin-bottom:20px}
.prog-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .5s cubic-bezier(.4,0,.2,1)}

/* ── HISTORY BAR ─────────────────────────────────── */
.hist-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap}
.hist-controls input[type=month],.hist-controls select{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-size:13px;padding:7px 10px;outline:none;cursor:pointer}
.hist-controls input[type=month]:focus,.hist-controls select:focus{border-color:var(--accent)}

/* ── ANIMATIONS ──────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── RESPONSIVE ──────────────────────────────────── */
@media(max-width:768px){
  .sidebar{position:fixed;z-index:100;transform:translateX(-100%);height:100%}
  .sidebar.open{transform:translateX(0)}
  .page{padding:20px 16px 40px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .task-grid{grid-template-columns:1fr}
  .analytics-grid{grid-template-columns:1fr}
  .hist-summary{grid-template-columns:repeat(2,1fr)}
  .field-row{flex-direction:column}
  .cal-cell{min-height:52px;padding:4px}
}

/* ══════════════════════════════════════════════════
   SEARCH
══════════════════════════════════════════════════ */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  margin-bottom: 20px;
  transition: border-color var(--trans);
}
.search-bar:focus-within { border-color: var(--accent); }
.search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.search-bar input::placeholder { color: var(--text3); }
.search-icon { color: var(--text3); font-size: 16px; flex-shrink: 0; }
.search-clear { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 16px; padding: 0; line-height: 1; }
.search-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
}
.search-filters select {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12px;
  padding: 6px 10px;
  outline: none;
  cursor: pointer;
}
.search-filters input[type=date] {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12px;
  padding: 6px 10px;
  outline: none;
}
.search-count {
  font-size: 12px;
  color: var(--text3);
  font-family: var(--font-m);
  margin-left: auto;
}
.search-highlight {
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 3px;
  padding: 0 2px;
}

/* ══════════════════════════════════════════════════
   TASK DETAIL PANEL (assignments + attachments)
══════════════════════════════════════════════════ */
.task-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 300;
  align-items: center;
  justify-content: flex-end;
  backdrop-filter: blur(2px);
}
.task-detail-overlay.show { display: flex; }
.task-detail-panel {
  width: 420px;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border2);
  display: flex;
  flex-direction: column;
  animation: slideFromRight .22s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
@keyframes slideFromRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.panel-title { font-family: var(--font-d); font-size: 17px; font-weight: 600; }
.panel-body  { flex: 1; overflow-y: auto; padding: 0; }
.panel-section { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.panel-section-title {
  font-size: 11px;
  font-family: var(--font-m);
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Assignees */
.assignee-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.assignee-row  { display: flex; align-items: center; gap: 10px; }
.assignee-av   { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #0d0d0f; flex-shrink: 0; }
.assignee-name { flex: 1; font-size: 13px; }
.assignee-del  { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 15px; padding: 2px 5px; border-radius: 4px; transition: color var(--trans); }
.assignee-del:hover { color: var(--danger); }
.assign-select-row { display: flex; gap: 6px; }
.assign-select-row select { flex: 1; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); color: var(--text); font-size: 13px; padding: 7px 10px; outline: none; }
.assign-select-row select:focus { border-color: var(--accent); }

/* Attachments */
.attach-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.attach-row  { display: flex; align-items: center; gap: 10px; background: var(--surface2); border-radius: var(--radius); padding: 8px 10px; }
.attach-icon { font-size: 18px; flex-shrink: 0; }
.attach-info { flex: 1; min-width: 0; }
.attach-name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-meta { font-size: 10px; color: var(--text3); font-family: var(--font-m); margin-top: 1px; }
.attach-actions { display: flex; gap: 4px; flex-shrink: 0; }
.attach-btn { background: none; border: 1px solid var(--border2); border-radius: 6px; color: var(--text2); cursor: pointer; font-size: 11px; padding: 3px 8px; transition: all var(--trans); }
.attach-btn:hover { border-color: var(--accent); color: var(--accent); }
.attach-btn.del:hover { border-color: var(--danger); color: var(--danger); }
.upload-zone {
  border: 2px dashed var(--border2);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  cursor: pointer;
  transition: all var(--trans);
  position: relative;
}
.upload-zone:hover, .upload-zone.drag { border-color: var(--accent); background: var(--accent-dim); }
.upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-zone-text { font-size: 13px; color: var(--text2); }
.upload-zone-sub  { font-size: 11px; color: var(--text3); margin-top: 4px; font-family: var(--font-m); }
.upload-progress  { height: 3px; background: var(--surface3); border-radius: 2px; margin-top: 8px; overflow: hidden; display: none; }
.upload-progress.show { display: block; }
.upload-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0; transition: width .3s; }

/* Task card detail button */
.card-detail-btn { font-size: 11px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text3); cursor: pointer; transition: all var(--trans); }
.card-detail-btn:hover { border-color: var(--accent); color: var(--accent); }
.badge-assign { background: var(--info-dim); color: var(--info); font-size: 10px; padding: 1px 6px; border-radius: 99px; font-family: var(--font-m); }
.badge-attach { background: var(--success-dim); color: var(--success); font-size: 10px; padding: 1px 6px; border-radius: 99px; font-family: var(--font-m); }
.badge-blocked { background: var(--danger-dim, rgba(251,113,133,.15)); color: var(--danger); font-size: 10px; padding: 1px 7px; border-radius: 99px; font-family: var(--font-m); font-weight: 600; }
.badge-expired { background: var(--danger-dim, rgba(255,69,58,.15)); color: var(--danger); font-size: 10px; padding: 1px 7px; border-radius: 99px; font-family: var(--font-m); font-weight: 600; }

/* End date passed — highlight the task */
.task-card.expired { border-color: var(--danger) !important; box-shadow: inset 3px 0 0 var(--danger); background: rgba(255,69,58,.05); }
.task-row.expired  { border-color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); }
.kanban-card.is-blocked { background: rgba(251,113,133,.06); }

/* ── Theme picker ────────────────────────────────────────────── */
.theme-picker { display:flex; gap:10px; flex-wrap:wrap; }
.theme-opt {
  display:flex; align-items:center; gap:8px; padding:8px 14px;
  background:var(--surface2); border:1px solid var(--border); border-radius:10px;
  color:var(--text2); font-size:13px; cursor:pointer; transition:all .15s;
}
.theme-opt:hover { border-color:var(--border2); color:var(--text); }
.theme-opt.active { border-color:var(--accent); color:var(--text); box-shadow:0 0 0 1px var(--accent); }
.theme-swatch { width:18px; height:18px; border-radius:50%; border:2px solid; display:inline-block; flex-shrink:0; }

/* ── View toggle (grid / list) ───────────────────────────────── */
.view-toggle { display:flex; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:2px; }
.at-view-btn { background:transparent; border:none; color:var(--text3); cursor:pointer; padding:4px 9px; border-radius:6px; font-size:14px; line-height:1; transition:all .15s; }
.at-view-btn:hover { color:var(--text); }
.at-view-btn.active { background:var(--accent); color:#fff; }

/* ── Call-history entry in chat ──────────────────────────────── */
.msg-call-log {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  margin: 8px auto; padding: 6px 14px; max-width: 80%;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 999px; font-size: 12px; color: var(--text2); font-family: var(--font-m);
}
.msg-call-log .mcl-icon  { font-size: 13px; }
.msg-call-log .mcl-label { color: var(--text); font-weight: 500; }
.msg-call-log .mcl-meta  { color: var(--text3); }

/* ── Voice call panel ────────────────────────────────────────── */
.call-panel {
  position: fixed; bottom: 20px; right: 20px; z-index: 5000; width: 250px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 14px; padding: 14px; box-shadow: 0 16px 50px rgba(0,0,0,.5);
}
.call-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.call-title  { font-size: 13px; font-weight: 600; color: var(--text); }
.call-status { font-size: 11px; color: var(--text3); font-family: var(--font-m); margin-top: 2px; }
.call-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text3); flex-shrink: 0; }
.call-dot.live { background: var(--success); box-shadow: 0 0 0 0 rgba(48,209,88,.6); animation: callPulse 1.6s infinite; }
@keyframes callPulse { 0%{box-shadow:0 0 0 0 rgba(48,209,88,.6)} 70%{box-shadow:0 0 0 8px rgba(48,209,88,0)} 100%{box-shadow:0 0 0 0 rgba(48,209,88,0)} }
.call-actions { display: flex; gap: 8px; }
.call-btn {
  flex: 1; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--border2);
  background: var(--surface); color: var(--text); font-size: 12px; cursor: pointer; transition: all .15s;
}
.call-btn:hover { background: var(--surface3); }
.call-btn.active { background: var(--warning-dim); color: var(--warning); border-color: var(--warning); }
.call-btn.hangup { background: var(--danger-dim); color: var(--danger); border-color: var(--danger); }
.incoming-pulse { animation: callPulse 1.4s infinite; }

/* ── Task quick-actions menu ─────────────────────────────────── */
.task-action-menu {
  position: fixed; z-index: 4000; min-width: 200px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 10px; padding: 5px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 1px;
}
.task-action-menu button {
  text-align: left; background: transparent; border: none; color: var(--text);
  font-size: 13px; padding: 8px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.task-action-menu button:hover { background: var(--surface3); }
.tam-divider { height: 1px; background: var(--border); margin: 4px 2px; }

/* Pinned tasks */
.task-card.pinned { border-color: var(--warning); box-shadow: 0 0 0 1px var(--warning-dim); }
.task-row.pinned  { border-color: var(--warning); }

/* ── Pagination (list view) ──────────────────────────────────── */
.at-pagination:empty { display:none; }
.at-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; flex-wrap:wrap; }
.at-page-info { font-size:12px; color:var(--text3); font-family:var(--font-m); }
.at-page-btns { display:flex; align-items:center; gap:8px; }
.at-page-btns .btn-ghost { padding:6px 12px; font-size:13px; }
.at-page-btns .btn-ghost:disabled { opacity:.4; cursor:not-allowed; }
.at-page-num { font-size:12px; color:var(--text2); font-family:var(--font-m); }

/* ── Task list view ──────────────────────────────────────────── */
.task-list { display:flex; flex-direction:column; gap:6px; }
.task-row { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px 12px; transition:border-color .15s; }
.task-row:hover { border-color:var(--border2); }
.task-row.done { opacity:.65; }
.task-row-title { flex:1 1 auto; min-width:120px; font-size:13px; font-weight:500; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-row-date { font-size:11px; color:var(--text3); font-family:var(--font-m); white-space:nowrap; }
.task-row-assignees { display:flex; gap:2px; flex-shrink:0; }
.task-row-actions { display:flex; gap:4px; flex-shrink:0; }
@media (max-width:768px){
  .task-row { flex-wrap:wrap; }
  .task-row-title { flex-basis:100%; }
}

@media(max-width:768px){
  .task-detail-panel { width: 100%; }
}

/* ══════════════════════════════════════════════════
   BITRMS — BIGGER TASK MODAL
══════════════════════════════════════════════════ */
/* ── Helpdesk tickets table ─────────────────────────── */
.hd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hd-table th {
  text-align: left; padding: 10px 12px; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text3); font-family: var(--font-m);
  border-bottom: 1px solid var(--border2); white-space: nowrap;
  position: sticky; top: 0; background: var(--surface2); z-index: 1;
}
.hd-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
.hd-table tbody tr { cursor: pointer; transition: background .12s; }
.hd-table tbody tr:hover { background: var(--surface2); }
.hd-table tbody tr:last-child td { border-bottom: none; }
.hd-table tr.breached td { background: rgba(255,69,58,.07); }
.hd-table tr.breached:hover td { background: rgba(255,69,58,.12); }

.modal-lg {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);   /* never taller than the viewport (overlay has 20px padding) */
}
.modal-body-lg {
  gap: 18px;
  padding: 22px 26px;
  flex: 1 1 auto;
  overflow-y: auto;                  /* long conversations scroll inside the modal */
  min-height: 0;
}
.modal-lg .modal-header {
  padding: 22px 26px 16px;
  flex-shrink: 0;                    /* header stays put while the body scrolls */
}
.modal-lg .modal-footer {
  padding: 16px 26px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.recur-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.recur-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}
.day-chip {
  width: 40px;
  height: 40px;
  font-size: 12px;
}

/* ══════════════════════════════════════════════════
   BITRMS — SAAS PLAN BADGE
══════════════════════════════════════════════════ */
.plan-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--accent);
  font-family: var(--font-m);
}
.plan-icon { font-size: 14px; }
.plan-upgrade {
  margin-left: auto;
  background: var(--accent);
  border: none;
  border-radius: 5px;
  color: #0d0d0f;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
  transition: background var(--trans);
  font-family: var(--font-b);
}
.plan-upgrade:hover { background: var(--accent-dark); }
.plan-badge.pro {
  background: var(--purple-dim);
  border-color: var(--purple);
  color: var(--purple);
}
.plan-badge.pro .plan-upgrade {
  background: var(--purple);
  color: #fff;
}
.plan-badge.enterprise {
  background: var(--success-dim);
  border-color: var(--success);
  color: var(--success);
}
.plan-badge.enterprise .plan-upgrade { display: none; }

/* ══════════════════════════════════════════════════
   BITRMS — SAAS SETTINGS SECTIONS
══════════════════════════════════════════════════ */
.plan-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all var(--trans);
  position: relative;
  cursor: pointer;
}
.plan-card:hover { border-color: var(--border2); }
.plan-card.current { border-color: var(--accent); background: var(--accent-dim); }
.plan-card.popular { border-color: var(--purple); }
.plan-popular-tag {
  position: absolute;
  top: -10px;
  right: 16px;
  background: var(--purple);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 99px;
  font-family: var(--font-m);
  letter-spacing: .04em;
}
.plan-name { font-size: 16px; font-weight: 600; }
.plan-price { font-size: 26px; font-weight: 700; font-family: var(--font-m); }
.plan-price small { font-size: 13px; font-weight: 400; color: var(--text3); }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.plan-features li { font-size: 13px; color: var(--text2); display: flex; align-items: center; gap: 6px; }
.plan-features li::before { content: '✓'; color: var(--success); font-weight: 600; flex-shrink: 0; }
.plan-features li.no::before { content: '✕'; color: var(--text3); }
.plan-features li.no { color: var(--text3); }
.plan-cta {
  padding: 9px;
  border-radius: var(--radius);
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all var(--trans);
  font-family: var(--font-b);
}
.plan-cta:hover { background: var(--surface2); }
.plan-card.current .plan-cta { background: var(--accent); border-color: var(--accent); color: #0d0d0f; }
.plan-card.popular .plan-cta { background: var(--purple); border-color: var(--purple); color: #fff; }
.usage-bar-wrap { display: flex; flex-direction: column; gap: 10px; }
.usage-row { display: flex; flex-direction: column; gap: 4px; }
.usage-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text2); font-family: var(--font-m); }
.usage-track { height: 6px; background: var(--surface3); border-radius: 3px; overflow: hidden; }
.usage-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width .5s; }
.usage-fill.warn { background: var(--warning); }
.usage-fill.danger { background: var(--danger); }

/* ══════════════════════════════════════════════════
   COMPANY LOGO
══════════════════════════════════════════════════ */
.company-logo-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.company-logo-img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border2);
}
.company-logo-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  border: 1px solid var(--border2);
}
.logo-upload-btn {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: all var(--trans);
}
.logo-upload-btn:hover { border-color: var(--accent); color: var(--accent); }
.logo-remove-btn {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  transition: all var(--trans);
}
.logo-remove-btn:hover { background: var(--danger-dim); }

/* Sidebar logo display */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-logo-img {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  object-fit: cover;
}

/* ══════════════════════════════════════════════════
   DASHBOARD GRAPHS
══════════════════════════════════════════════════ */
.dash-graphs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
  align-items: start;
}
.graph-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  overflow: hidden;
}
.graph-card.full { grid-column: 1 / -1; }
.graph-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.graph-title span { font-size: 11px; color: var(--text3); font-family: var(--font-m); }

/* SVG line chart */
.line-chart-svg { width: 100%; overflow: visible; }
.chart-grid-line { stroke: var(--border); stroke-width: 0.5; }
.chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-area { opacity: .12; }
.chart-dot { transition: r .15s; cursor: pointer; }
.chart-dot:hover { r: 5; }
.chart-label { font-size: 10px; font-family: var(--font-m); fill: var(--text3); }
.chart-tooltip {
  position: absolute;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--font-m);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 100;
  white-space: nowrap;
}
.chart-tooltip.show { opacity: 1; }

/* Donut chart */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.donut-svg { flex-shrink: 0; }
.donut-legend { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text2);
}
.donut-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.donut-legend-val {
  font-family: var(--font-m);
  color: var(--text);
  margin-left: auto;
  font-size: 11px;
}

/* Mini sparkline bars */
.spark-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 48px;
}
.spark-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-width: 3px;
  transition: opacity .2s;
  cursor: pointer;
  position: relative;
}
.spark-bar:hover { opacity: .7; }

/* Priority mini chart */
.prio-bars { display: flex; flex-direction: column; gap: 8px; }
.prio-row { display: flex; align-items: center; gap: 10px; }
.prio-label { font-size: 11px; font-family: var(--font-m); color: var(--text2); width: 52px; flex-shrink: 0; }
.prio-track { flex: 1; height: 6px; background: var(--surface3); border-radius: 3px; overflow: hidden; }
.prio-fill { height: 100%; border-radius: 3px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.prio-count { font-size: 11px; font-family: var(--font-m); color: var(--text3); width: 20px; text-align: right; }

@media(max-width:768px){
  .dash-graphs { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   SIDEBAR — AURORA PRO STYLE
══════════════════════════════════════════════════════════════ */
.sidebar {
  background: linear-gradient(180deg, #0e1020 0%, #0a0c18 100%);
  border-right: 1px solid rgba(129,140,248,.12);
  box-shadow: 2px 0 20px rgba(0,0,0,.5);
}
[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f5f6ff 100%);
  box-shadow: 2px 0 12px rgba(99,102,241,.08);
}

.nav-item {
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13.5px;
  font-weight: 500;
  gap: 10px;
  position: relative;
}
.nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 0;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  transition: height .2s ease;
}
.nav-item.active::before { height: 55%; }
.nav-item.active {
  background: linear-gradient(90deg, var(--accent-dim), transparent);
  color: var(--accent);
}
.nav-item:hover:not(.active) {
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.nav-icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-icon svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ══════════════════════════════════════════════════════════════
   NOTIFICATION BELL + DROPDOWN
══════════════════════════════════════════════════════════════ */
.notif-btn {
  position: relative;
  width: 36px; height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--trans);
  flex-shrink: 0;
}
.notif-btn:hover { background: var(--surface2); color: var(--text); }
.notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
  font-family: var(--font-m);
  animation: notif-pulse 2s infinite;
}
@keyframes notif-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(251,113,133,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(251,113,133,0); }
}
.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
  z-index: 300;
  display: none;
  animation: fadeUp .18s ease;
  overflow: hidden;
}
.notif-dropdown.show { display: block; }
.notif-dd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}
.notif-dd-clear {
  font-size: 11px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-b);
  padding: 0;
}
.notif-dd-clear:hover { text-decoration: underline; }
.notif-list {
  max-height: 340px;
  overflow-y: auto;
}
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  transition: background var(--trans);
  cursor: pointer;
}
.notif-item:hover { background: var(--surface2); }
.notif-item:last-child { border: none; }
.notif-item.unread { background: var(--accent-dim); }
.notif-item.unread:hover { background: rgba(129,140,248,.22); }
.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.notif-content { flex: 1; min-width: 0; }
.notif-title { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; }
.notif-sub   { font-size: 11px; color: var(--text3); margin-top: 2px; font-family: var(--font-m); }
.notif-time  { font-size: 10px; color: var(--text3); flex-shrink: 0; font-family: var(--font-m); }
.notif-empty { padding: 28px; text-align: center; color: var(--text3); font-size: 13px; }

/* ══════════════════════════════════════════════════════════════
   STAT CARDS — AURORA STYLE
══════════════════════════════════════════════════════════════ */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  transition: all var(--trans);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.stat-card:nth-child(1)::before { background: var(--info); }
.stat-card:nth-child(2)::before { background: var(--success); }
.stat-card:nth-child(3)::before { background: var(--warning); }
.stat-card:nth-child(4)::before { background: var(--danger); }
.stat-card:hover { border-color: var(--border2); transform: translateY(-1px); }
.stat-card-n { font-size: 32px; font-weight: 600; font-family: var(--font-m); line-height: 1.1; }
.stat-card-l { font-size: 12px; color: var(--text3); margin-top: 6px; text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-m); }

/* ══════════════════════════════════════════════════════════════
   MAIN HEADER BAR
══════════════════════════════════════════════════════════════ */
.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 60px;
  min-height: 60px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   HAMBURGER + OVERLAY
══════════════════════════════════════════════════════════════ */
.hamburger-btn {
  display: none;
  position: fixed;
  top: 12px; left: 12px;
  z-index: 500;
  width: 38px; height: 38px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 18px;
  align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 398;
  backdrop-filter: blur(3px);
}
.sidebar-overlay.show { display: block; }

/* ══════════════════════════════════════════════════════════════
   DESKTOP — FULL SCREEN (DEFAULT, no media query needed)
══════════════════════════════════════════════════════════════ */
/* Everything below only activates at smaller screens */

/* ══════════════════════════════════════════════════════════════
   TABLET  769px – 1200px
══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  :root { --sidebar-w: 210px; }
  .task-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
  .dash-graphs { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE  ≤768px
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Show hamburger */
  .hamburger-btn { display: flex !important; }

  /* Sidebar → off-canvas drawer */
  .sidebar {
    position: fixed !important;
    top: 0; left: 0;
    height: 100% !important;
    z-index: 399;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    width: 260px !important;
    min-width: 260px !important;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,.6);
  }

  /* Main content takes full width */
  .main-content { width: 100%; }
  .main-header  { padding: 0 14px 0 56px; height: 54px; min-height: 54px; }
  .page         { padding: 16px 14px 40px; }
  .page-title   { font-size: 20px; }

  /* Grids */
  .task-grid      { grid-template-columns: 1fr; }
  .stats-grid     { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .dash-graphs    { grid-template-columns: 1fr; }
  .analytics-grid { grid-template-columns: 1fr; }
  .hist-summary   { grid-template-columns: repeat(2,1fr); }
  .chart-card.full { grid-column: 1; }
  #plan-cards     { grid-template-columns: 1fr !important; }

  /* Forms */
  .field-row { flex-direction: column; }

  /* Modals */
  .modal, .modal-lg { max-width: calc(100vw - 20px) !important; margin: 10px; }
  .modal-body-lg    { padding: 14px; }
  .modal-footer     { flex-direction: column; gap: 8px; }
  .modal-footer > div:first-child { display: none; }

  /* Detail panel → bottom sheet */
  .task-detail-overlay { align-items: flex-end; }
  .task-detail-panel {
    width: 100% !important;
    height: 88vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  /* Gantt */
  .gantt-labels { width: 110px; min-width: 110px; }

  /* Notification dropdown */
  .notif-dropdown { right: -60px; width: 290px; }

  /* Wide tables → horizontal scroll instead of clipping/cramping */
  .page table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

  /* Filter rows: let the view-toggle + assigned button stay usable */
  .filter-strip { overflow-x: auto; }
  .view-toggle { flex-shrink: 0; }

  /* Dashboard range/user filter row wraps cleanly */
  #dash-user-sel { margin-left: 0 !important; }
}

@media (max-width: 480px) {
  .page       { padding: 12px 10px 36px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 6px; }
  .stat-card-n { font-size: 26px; }
  .graph-card  { padding: 12px 14px; }
}

/* Wide monitors */
@media (min-width: 1600px) {
  :root { --sidebar-w: 260px; }
  .page { padding: 32px 40px 60px; }
  .task-grid { grid-template-columns: repeat(auto-fill, minmax(350px,1fr)); }
}

/* Touch targets */
@media (hover:none) and (pointer:coarse) {
  .check-btn { width: 26px; height: 26px; }
  .card-btn  { padding: 7px 14px; }
  .nav-item  { padding: 12px 14px; }
}

/* ══════════════════════════════════════════════════
   TASK NUMBER BADGE
══════════════════════════════════════════════════ */
.task-number-badge {
  display: inline-block;
  font-family: var(--font-m);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(129,140,248,.3);
  border-radius: 5px;
  padding: 1px 7px;
  margin-bottom: 4px;
  letter-spacing: .04em;
  user-select: all;
  cursor: text;
}
.task-number-badge:hover {
  background: rgba(129,140,248,.25);
}

/* In search results — highlight the number */
.search-number-match {
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: 3px;
  padding: 0 3px;
}

/* Company settings table in settings page */
.company-settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.company-settings-table th {
  text-align: left;
  font-size: 11px;
  font-family: var(--font-m);
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border2);
}
.company-settings-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text2);
}
.company-settings-table tr:last-child td { border: none; }
.company-settings-table input[type=text],
.company-settings-table input[type=number],
.company-settings-table select {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  padding: 6px 10px;
  outline: none;
  width: 100%;
  max-width: 180px;
  font-family: var(--font-b);
}
.company-settings-table input:focus,
.company-settings-table select:focus { border-color: var(--accent); }
.task-number-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-m);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: 8px 14px;
  margin-top: 10px;
}

/* ══════════════════════════════════════════════════
   KANBAN BOARD
══════════════════════════════════════════════════ */
.kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 16px;
  align-items: flex-start;
  min-height: 60vh;
}
.kanban-board::-webkit-scrollbar { height: 5px; }
.kanban-col {
  flex-shrink: 0;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 220px);
}
.kanban-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  z-index: 1;
}
.kanban-col-head-left { display: flex; align-items: center; gap: 8px; flex: 1; }
.kanban-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.kanban-col-label { font-size: 13px; font-weight: 600; }
.kanban-col-count {
  font-size: 11px;
  font-family: var(--font-m);
  padding: 1px 7px;
  border-radius: 99px;
  border: 1px solid var(--border2);
  color: var(--text3);
  margin-left: auto;
}
.kanban-cards {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kanban-cards::-webkit-scrollbar { width: 3px; }
.kanban-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 12px;
  cursor: pointer;
  transition: all var(--trans);
  animation: fadeUp .18s ease both;
}
.kanban-card:hover { border-color: var(--border2); background: var(--surface3); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.kanban-card.is-done { opacity: .65; }
.kanban-card.is-done .kc-title { text-decoration: line-through; color: var(--text3); }
.kc-number { font-size: 10px; font-family: var(--font-m); font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.kc-title { font-size: 13px; font-weight: 500; line-height: 1.4; margin-bottom: 8px; }
.kc-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.kc-assignees { display: flex; gap: 2px; margin-left: auto; }
.kc-av { width: 18px; height: 18px; border-radius: 50%; font-size: 8px; font-weight: 700; color: #0d0d0f; display: flex; align-items: center; justify-content: center; border: 1px solid var(--surface); }
.kanban-empty { padding: 20px; text-align: center; color: var(--text3); font-size: 12px; }

/* Kanban done column — green left border */
.kanban-col.col-done { border-left: 3px solid var(--success); }
.kanban-col.col-done .kanban-col-label { color: var(--success); }

/* ══════════════════════════════════════════════════
   TASK HISTORY TIMELINE
══════════════════════════════════════════════════ */
.history-timeline { display: flex; flex-direction: column; gap: 0; }
.history-entry {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  position: relative;
}
.history-entry:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 28px;
  bottom: 0;
  width: 1px;
  background: var(--border2);
}
.history-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  z-index: 1;
}
.history-dot.status  { background: var(--accent-dim);  color: var(--accent); border: 1px solid var(--border2); }
.history-dot.field   { background: var(--surface3);    color: var(--text3);  border: 1px solid var(--border); }
.history-dot.created { background: var(--success-dim); color: var(--success);border: 1px solid var(--success); }
.history-body { flex: 1; min-width: 0; }
.history-who { font-size: 12px; font-weight: 500; color: var(--text); }
.history-what { font-size: 12px; color: var(--text2); margin-top: 2px; line-height: 1.5; }
.history-what strong { color: var(--text); }
.history-when { font-size: 10px; color: var(--text3); font-family: var(--font-m); margin-top: 2px; }
.history-av { width: 20px; height: 20px; border-radius: 50%; font-size: 9px; font-weight: 700; color: #0d0d0f; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

/* ══════════════════════════════════════════════════
   DYNAMIC STATUS BADGE
══════════════════════════════════════════════════ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 99px;
  font-family: var(--font-m);
  white-space: nowrap;
}
.status-badge.is-done {
  box-shadow: 0 0 8px rgba(52,211,153,.3);
}

/* Status selector in task modal */
.status-select-wrap select {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  padding: 9px 12px;
  outline: none;
  width: 100%;
  cursor: pointer;
  transition: border-color var(--trans);
}
.status-select-wrap select:focus { border-color: var(--accent); }

/* Assignee filter bar */
.assignee-filter-wrap {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.assignee-filter-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--trans);
}
.assignee-filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.assignee-filter-chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.assignee-filter-chip .chip-av { width: 18px; height: 18px; border-radius: 50%; font-size: 8px; font-weight: 700; color: #0d0d0f; display: flex; align-items: center; justify-content: center; }

/* Status management in settings */
.status-row-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  transition: all var(--trans);
}
.status-row-item:hover { border-color: var(--border2); }
.status-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.status-row-label { flex: 1; font-size: 13px; font-weight: 500; }
.status-row-meta { font-size: 11px; color: var(--text3); font-family: var(--font-m); }

/* Kanban view toggle */
.view-toggle {
  display: flex;
  gap: 4px;
  background: var(--surface2);
  border-radius: var(--radius);
  padding: 3px;
  border: 1px solid var(--border);
}
.view-toggle-btn {
  padding: 5px 12px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text3);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--trans);
  display: flex;
  align-items: center;
  gap: 5px;
}
.view-toggle-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.view-toggle-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ══════════════════════════════════════════════════
   TIME TRACKING
══════════════════════════════════════════════════ */
.time-tracking-bar {
  padding: 0 0 4px;
}
/* Reminder toast pulse */
.reminder-bar {
  animation: slideDown .3s cubic-bezier(.4,0,.2,1);
}
@keyframes slideDown {
  from { transform: translate(-50%, -20px); opacity: 0; }
  to   { transform: translate(-50%, 0);     opacity: 1; }
}

/* ══════════════════════════════════════════════════
   ROLE BADGE IN SIDEBAR USER CHIP
══════════════════════════════════════════════════ */
.user-role-badge {
  font-size: 9px;
  font-family: var(--font-m);
  padding: 1px 6px;
  border-radius: 99px;
  font-weight: 600;
  letter-spacing: .04em;
  margin-top: 1px;
  display: inline-block;
}

/* ══════════════════════════════════════════════════
   USERS PAGE
══════════════════════════════════════════════════ */
.users-table tbody tr:last-child td { border-bottom: none; }

/* User modal wide version */
.modal-wide { max-width: 560px; }

/* Avatar in table */
.user-av-lg {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  color: #0d0d0f;
  flex-shrink: 0;
}

/* Status pill */
.pill-active   { background: var(--success-dim); color: var(--success); }
.pill-inactive { background: var(--surface3);    color: var(--text3);   }

/* Company banner */
.company-banner-stat {
  text-align: center;
  padding: 10px 18px;
  border-radius: var(--radius);
  min-width: 80px;
}

/* ══════════════════════════════════════════════════
   DIRECT MESSAGING
══════════════════════════════════════════════════ */
.msg-layout {
  display: flex;
  height: calc(100vh - 120px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ── Conversation list (left pane) ── */
.msg-sidebar {
  width: 280px;
  min-width: 280px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--surface2);
  flex-shrink: 0;
}
.msg-sidebar-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.msg-conv-list {
  flex: 1;
  overflow-y: auto;
}
.msg-conv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--trans);
  position: relative;
}
.msg-conv-item:hover     { background: var(--surface3); }
.msg-conv-item.active    { background: var(--accent-dim); border-left: 3px solid var(--accent); }
.msg-conv-av {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
  color: #0d0d0f;
  flex-shrink: 0;
  position: relative;
}
.msg-online-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--surface2);
}
.msg-conv-info { flex: 1; min-width: 0; }
.msg-conv-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv-preview { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; font-family: var(--font-m); }
.msg-conv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.msg-conv-time { font-size: 10px; color: var(--text3); font-family: var(--font-m); }
.msg-unread-badge {
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  font-family: var(--font-m);
}

/* ── Chat pane (right) ── */
.msg-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}
.msg-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.msg-chat-name { font-size: 15px; font-weight: 600; }
.msg-chat-status { font-size: 11px; color: var(--text3); margin-top: 1px; font-family: var(--font-m); }

/* Messages area */
.msg-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.msg-day-sep {
  text-align: center;
  font-size: 11px;
  color: var(--text3);
  font-family: var(--font-m);
  margin: 10px 0 4px;
  position: relative;
}
.msg-day-sep::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; right: 0;
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.msg-day-sep span {
  background: var(--bg);
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

/* Message bubble */
.msg-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  animation: fadeUp .15s ease both;
}
.msg-row.mine { flex-direction: row-reverse; }
.msg-row-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 10px; font-weight: 700;
  color: #0d0d0f;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.msg-bubble-wrap { display: flex; flex-direction: column; max-width: 70%; }
.msg-row.mine .msg-bubble-wrap { align-items: flex-end; }
.msg-sender-name { font-size: 10px; color: var(--text3); margin-bottom: 2px; font-family: var(--font-m); }
.msg-bubble {
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
  position: relative;
}
.msg-bubble.theirs {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.msg-bubble.mine {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-bubble.deleted {
  background: transparent;
  border: 1px dashed var(--border2);
  color: var(--text3);
  font-style: italic;
  font-size: 12px;
}
.msg-time {
  font-size: 10px;
  color: var(--text3);
  margin-top: 3px;
  font-family: var(--font-m);
  display: flex;
  align-items: center;
  gap: 4px;
}
.msg-delete-btn {
  background: none; border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  opacity: 0;
  transition: opacity .15s;
}
.msg-row:hover .msg-delete-btn { opacity: 1; }
.msg-delete-btn:hover { color: var(--danger); }

/* Input area */
.msg-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.msg-textarea {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 14px;
  font-family: var(--font-b);
  color: var(--text);
  resize: none;
  outline: none;
  min-height: 42px;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.5;
  transition: border-color var(--trans);
}
.msg-textarea:focus { border-color: var(--accent); }
.msg-textarea::placeholder { color: var(--text3); }
.msg-send-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--trans);
  font-size: 16px;
}
.msg-send-btn:hover { background: var(--accent-dark); transform: scale(1.08); }
.msg-send-btn:disabled { background: var(--surface3); cursor: not-allowed; transform: none; }

/* Empty state */
.msg-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  gap: 10px;
}
.msg-empty-icon { font-size: 48px; opacity: .4; }
.msg-empty-title { font-size: 16px; font-weight: 500; color: var(--text2); }
.msg-empty-sub   { font-size: 13px; }

/* New message modal */
.new-msg-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--trans);
  border-bottom: 1px solid var(--border);
}
.new-msg-user-item:hover { background: var(--surface2); }
.new-msg-user-item:last-child { border: none; }

/* Typing indicator */
.msg-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
  font-family: var(--font-m);
}
.typing-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text3);
  animation: typingBounce .9s infinite;
}
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce {
  0%,80%,100% { transform: translateY(0); }
  40%         { transform: translateY(-4px); }
}

@media (max-width: 768px) {
  .msg-layout { height: calc(100vh - 90px); }
  .msg-sidebar { width: 100%; min-width: 100%; border-right: none; }
  .msg-sidebar.hidden { display: none; }
  .msg-chat.hidden    { display: none; }
  .msg-chat { width: 100%; }
}

/* ══════════════════════════════════════════════════
   SUB-TASKS / CHECKLIST
══════════════════════════════════════════════════ */
.subtask-list { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.subtask-row {
  display:flex; align-items:center; gap:8px;
  padding:6px 8px;
  border-radius:var(--radius);
  background:var(--surface2);
  border:1px solid var(--border);
  transition:all var(--trans);
  group: subtask;
}
.subtask-row:hover { border-color:var(--border2); }
.subtask-row.done .subtask-title { text-decoration:line-through; color:var(--text3); }
.subtask-check {
  width:18px; height:18px;
  border-radius:4px;
  border:2px solid var(--border2);
  background:transparent;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:all var(--trans);
  font-size:11px;
  color:transparent;
}
.subtask-check:hover   { border-color:var(--success); }
.subtask-check.checked { background:var(--success); border-color:var(--success); color:#fff; }
.subtask-title { flex:1; font-size:13px; min-width:0; }
.subtask-del {
  background:none; border:none; color:var(--text3);
  cursor:pointer; font-size:13px; padding:2px 4px;
  opacity:0; transition:opacity var(--trans);
  border-radius:4px;
}
.subtask-row:hover .subtask-del { opacity:1; }
.subtask-del:hover { color:var(--danger); background:var(--danger-dim); }
.subtask-add-row {
  display:flex; gap:6px; margin-top:6px;
}
.subtask-add-input {
  flex:1; background:var(--surface2); border:1px solid var(--border2);
  border-radius:var(--radius); color:var(--text); font-size:13px;
  padding:7px 10px; outline:none; font-family:var(--font-b);
  transition:border-color var(--trans);
}
.subtask-add-input:focus  { border-color:var(--success); }
.subtask-add-input::placeholder { color:var(--text3); }
.subtask-progress {
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:var(--text3); font-family:var(--font-m);
  margin-bottom:8px;
}
.subtask-prog-track {
  flex:1; height:4px; background:var(--surface3); border-radius:2px; overflow:hidden;
}
.subtask-prog-fill {
  height:100%; border-radius:2px; background:var(--success);
  transition:width .4s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════
   TASK DEPENDENCIES
══════════════════════════════════════════════════ */
.dep-list { display:flex; flex-direction:column; gap:5px; margin-bottom:8px; }
.dep-item {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface2);
  font-size:12px;
}
.dep-item.blocker { border-left:3px solid var(--danger); }
.dep-item.blocking{ border-left:3px solid var(--warning); }
.dep-item.done-dep { opacity:.55; }
.dep-num {
  font-family:var(--font-m); font-weight:700; font-size:10px;
  color:var(--accent); background:var(--accent-dim);
  padding:1px 6px; border-radius:4px; flex-shrink:0;
}
.dep-title { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dep-status {
  font-size:10px; font-family:var(--font-m);
  padding:1px 7px; border-radius:99px;
  flex-shrink:0;
}
.dep-del {
  background:none; border:none; color:var(--text3);
  cursor:pointer; font-size:12px; padding:2px 5px;
  border-radius:4px; transition:all var(--trans); flex-shrink:0;
}
.dep-del:hover { color:var(--danger); background:var(--danger-dim); }
.dep-blocked-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--danger-dim); color:var(--danger);
  font-size:10px; font-family:var(--font-m); font-weight:600;
  padding:2px 8px; border-radius:99px; border:1px solid var(--danger);
}
.dep-search-results {
  background:var(--surface2); border:1px solid var(--border2);
  border-radius:var(--radius); margin-top:4px; max-height:180px; overflow-y:auto;
  display:none;
}
.dep-search-results.show { display:block; }
.dep-search-item {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  cursor:pointer; transition:background var(--trans); font-size:12px;
  border-bottom:1px solid var(--border);
}
.dep-search-item:last-child { border:none; }
.dep-search-item:hover { background:var(--surface3); }

/* ══════════════════════════════════════════════════
   TASK COMMENTS
══════════════════════════════════════════════════ */
.comment-list { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.comment-item {
  display:flex; gap:9px;
  animation:fadeUp .15s ease both;
}
.comment-av {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#0d0d0f;
  flex-shrink:0; margin-top:2px;
}
.comment-body-wrap { flex:1; min-width:0; }
.comment-header {
  display:flex; align-items:center; gap:6px; margin-bottom:4px; flex-wrap:wrap;
}
.comment-author { font-size:12px; font-weight:600; color:var(--text); }
.comment-time   { font-size:10px; color:var(--text3); font-family:var(--font-m); }
.comment-edited { font-size:10px; color:var(--text3); font-style:italic; }
.comment-bubble {
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:0 var(--radius) var(--radius) var(--radius);
  padding:9px 12px;
  font-size:13px;
  line-height:1.6;
  color:var(--text);
  white-space:pre-wrap;
  word-break:break-word;
}
.comment-bubble.deleted {
  color:var(--text3); font-style:italic;
  background:transparent; border-style:dashed;
}
.comment-actions {
  display:flex; gap:6px; margin-top:4px;
}
.comment-action-btn {
  background:none; border:none; color:var(--text3);
  cursor:pointer; font-size:11px; padding:2px 6px;
  border-radius:4px; transition:all var(--trans); font-family:var(--font-b);
}
.comment-action-btn:hover.edit  { color:var(--accent); background:var(--accent-dim); }
.comment-action-btn:hover.del   { color:var(--danger); background:var(--danger-dim); }
.comment-action-btn:hover.reply { color:var(--info);   background:var(--info-dim); }
.comment-input-area {
  display:flex; gap:8px; align-items:flex-end;
}
.comment-textarea {
  flex:1; background:var(--surface2);
  border:1px solid var(--border2); border-radius:var(--radius);
  color:var(--text); font-size:13px; padding:9px 12px;
  outline:none; resize:none; min-height:70px;
  font-family:var(--font-b); line-height:1.5;
  transition:border-color var(--trans);
}
.comment-textarea:focus { border-color:var(--accent); }
.comment-textarea::placeholder { color:var(--text3); }
.comment-submit {
  padding:9px 16px; background:var(--accent); border:none;
  border-radius:var(--radius); color:#fff; font-size:13px;
  font-weight:600; cursor:pointer; transition:all var(--trans);
  font-family:var(--font-b); align-self:flex-end;
}
.comment-submit:hover { background:var(--accent-dark); }
.comment-empty {
  text-align:center; padding:16px 0;
  color:var(--text3); font-size:13px;
}

/* task card subtask progress indicator */
.card-subtask-bar {
  display:flex; align-items:center; gap:6px;
  padding:4px 0 0;
  font-size:10px; color:var(--text3); font-family:var(--font-m);
}
.card-subtask-track {
  flex:1; height:3px; background:var(--surface3); border-radius:2px; overflow:hidden;
}
.card-subtask-fill {
  height:100%; border-radius:2px; background:var(--success);
}

/* blocked task warning on card */
.card-blocked-badge {
  font-size:10px; background:var(--danger-dim); color:var(--danger);
  padding:1px 7px; border-radius:99px; font-family:var(--font-m);
  border:1px solid var(--danger); font-weight:600;
}


/* ════════════════════════════════════════════════════════════════
   APPLE FITNESS THEME — Component Overrides
   Inspired by Apple Fitness+ / Health app dark UI
════════════════════════════════════════════════════════════════ */

/* ── SF Pro font fallback stack ─────────────────────────────── */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.sidebar {
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
}
[data-theme="light"] .sidebar {
  background: #f2f2f7 !important;
  border-right: 1px solid rgba(60,60,67,.18) !important;
}

/* Brand */
.brand-mark {
  background: var(--accent) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-family: var(--font-b) !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
}
.brand-name {
  font-family: var(--font-d) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  color: var(--text) !important;
  text-shadow: none !important;
}
.brand-sub {
  font-family: var(--font-b) !important;
  font-size: 10px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text3) !important;
}

/* Clock */
.sidebar-time {
  font-family: var(--font-d) !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  letter-spacing: -.02em !important;
  color: var(--text) !important;
  text-shadow: none !important;
}
.sidebar-date {
  font-family: var(--font-b) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text3) !important;
}

/* Nav */
.nav-item {
  border-radius: 10px !important;
  font-family: var(--font-b) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  border-left: none !important;
  padding: 10px 12px !important;
}
.nav-item::before { display: none !important; }
.nav-item.active {
  background: rgba(255,55,95,.15) !important;
  color: var(--accent) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.nav-item:hover:not(.active) {
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
}
.nav-icon svg { stroke-width: 1.8 !important; }

/* Plan badge */
.plan-badge {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
  border-radius: 10px !important;
  font-family: var(--font-b) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}
.plan-upgrade {
  background: var(--accent) !important;
  color: #fff !important;
  font-family: var(--font-b) !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}

/* Sidebar ring */
#ring-c { stroke: var(--accent) !important; filter: none !important; }
#ring-pct { font-family: var(--font-b) !important; font-size: 11px !important; fill: var(--text2) !important; }

/* User chip */
.user-chip { border-color: var(--border) !important; border-radius: 12px !important; }
.user-chip:hover { background: var(--surface2) !important; }

/* ── MAIN HEADER ─────────────────────────────────────────────── */
.main-header {
  background: rgba(0,0,0,.85) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
[data-theme="light"] .main-header {
  background: rgba(242,242,247,.85) !important;
  border-bottom-color: rgba(60,60,67,.18) !important;
}

/* Page title — large SF-style */
.page-title {
  font-family: var(--font-d) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  text-transform: none !important;
  color: var(--text) !important;
}
.page-sub {
  font-family: var(--font-b) !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text3) !important;
}

/* ── STAT CARDS — Apple Health tile style ────────────────────── */
.stat-card {
  background: var(--surface) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
}
.stat-card::before { background: none !important; }
.stat-card::after  { display: none !important; }
.stat-card:nth-child(1) { background: var(--surface) !important; border-top: none !important; }
.stat-card:nth-child(2) { background: var(--surface) !important; border-top: none !important; }
.stat-card:nth-child(3) { background: var(--surface) !important; border-top: none !important; }
.stat-card:nth-child(4) { background: var(--surface) !important; border-top: none !important; }
.stat-card:nth-child(1) .stat-card-n { color: #0a84ff !important; text-shadow: none !important; }
.stat-card:nth-child(2) .stat-card-n { color: #30d158 !important; text-shadow: none !important; }
.stat-card:nth-child(3) .stat-card-n { color: #ffd60a !important; text-shadow: none !important; }
.stat-card:nth-child(4) .stat-card-n { color: #ff453a !important; text-shadow: none !important; }
.stat-card:hover { transform: scale(1.01) !important; box-shadow: 0 4px 20px rgba(0,0,0,.4) !important; }
.stat-card-n {
  font-family: var(--font-d) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
}
.stat-card-l {
  font-family: var(--font-b) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
  color: var(--text3) !important;
}

/* ── TASK CARDS — iOS card style ────────────────────────────── */
.task-card {
  background: var(--surface) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) !important;
}
.task-card::before { display: none !important; }
.task-card:hover {
  background: var(--surface2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}
/* Priority — left accent bar */
.task-card.p-critical { border-left: 4px solid #ff453a !important; }
.task-card.p-high     { border-left: 4px solid #ffd60a !important; }
.task-card.p-medium   { border-left: 4px solid #0a84ff !important; }
.task-card.p-low      { border-left: 4px solid rgba(255,255,255,.2) !important; }
.task-card.done { opacity: .4 !important; filter: none !important; }
.task-card.overdue {
  border-left: 4px solid rgba(255,69,58,.55) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.card-title {
  font-family: var(--font-b) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: var(--text) !important;
}
.card-notes {
  font-family: var(--font-b) !important;
  font-size: 12px !important;
  color: var(--text3) !important;
  letter-spacing: 0 !important;
}

/* Task number */
.task-number-badge {
  font-family: var(--font-m) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  background: rgba(255,55,95,.12) !important;
  color: var(--accent) !important;
  border: none !important;
  border-radius: 5px !important;
  text-shadow: none !important;
  letter-spacing: .02em !important;
}

/* ── BADGES ─────────────────────────────────────────────────── */
.badge {
  font-family: var(--font-b) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 6px !important;
  padding: 2px 7px !important;
}
.b-critical { background: rgba(255,69,58,.2)  !important; color: #ff453a !important; border: none !important; }
.b-high     { background: rgba(255,214,10,.18) !important; color: #ffd60a !important; border: none !important; }
.b-medium   { background: rgba(10,132,255,.18) !important; color: #0a84ff !important; border: none !important; }
.b-low      { background: rgba(255,255,255,.1) !important; color: var(--text3) !important; border: none !important; }

.status-badge {
  font-family: var(--font-b) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 6px !important;
}
.status-badge.is-done { box-shadow: none !important; }

/* ── PROGRESS ───────────────────────────────────────────────── */
.prog-bar  { background: rgba(255,255,255,.1) !important; height: 4px !important; border-radius: 2px !important; }
.prog-fill { background: var(--accent) !important; box-shadow: none !important; border-radius: 2px !important; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-primary {
  background: var(--accent) !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--font-b) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.btn-primary:hover {
  background: var(--accent-dark) !important;
  transform: scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(255,55,95,.35) !important;
}
.btn-ghost {
  font-family: var(--font-b) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-color: var(--border2) !important;
  border-radius: 10px !important;
  color: var(--accent) !important;
}
.btn-ghost:hover {
  background: var(--accent-dim) !important;
  border-color: var(--accent) !important;
}
.card-btn {
  font-family: var(--font-b) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-color: var(--border) !important;
  border-radius: 8px !important;
  color: var(--text2) !important;
}
.card-btn:hover { border-color: var(--accent) !important; background: var(--accent-dim) !important; }
.card-btn.del:hover { border-color: var(--danger) !important; color: var(--danger) !important; background: var(--danger-dim) !important; }
.card-detail-btn {
  font-family: var(--font-b) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 8px !important;
  border-color: var(--border) !important;
  color: var(--accent) !important;
}

/* Filter chips */
.filt {
  font-family: var(--font-b) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 10px !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
  padding: 6px 14px !important;
}
.filt.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.filt:hover:not(.active) { background: var(--surface2) !important; }

/* ── ICON BUTTON ────────────────────────────────────────────── */
.btn-icon, .btn-accent {
  background: var(--accent) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(255,55,95,.3) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
}
.btn-icon:hover { transform: scale(1.08) !important; box-shadow: 0 6px 18px rgba(255,55,95,.45) !important; }

/* ── MODALS — iOS sheet style ────────────────────────────────── */
.modal {
  background: var(--surface) !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 40px 100px rgba(0,0,0,.8) !important;
}
[data-theme="light"] .modal { background: #fff !important; }
.modal-header {
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  padding: 18px 22px 14px !important;
}
[data-theme="light"] .modal-header { border-bottom-color: rgba(60,60,67,.18) !important; }
.modal-title {
  font-family: var(--font-d) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  color: var(--text) !important;
}
.modal-footer {
  border-top: 1px solid rgba(255,255,255,.1) !important;
}
.modal-overlay { background: rgba(0,0,0,.7) !important; backdrop-filter: blur(8px) !important; }

/* Field styling */
.field-group label {
  font-family: var(--font-b) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: var(--text3) !important;
}
.field-group input,
.field-group select,
.field-group textarea {
  background: var(--surface3) !important;
  border: none !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-family: var(--font-b) !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  border: 1px solid var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255,55,95,.15) !important;
  outline: none !important;
}

/* ── GRAPH CARDS ────────────────────────────────────────────── */
.graph-card {
  background: var(--surface) !important;
  border: none !important;
  border-radius: 16px !important;
}
.graph-card::before { display: none !important; }
.graph-title {
  font-family: var(--font-b) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text2) !important;
}

/* ── DETAIL PANEL ────────────────────────────────────────────── */
.task-detail-panel {
  background: var(--surface) !important;
  border-left: none !important;
  box-shadow: -20px 0 60px rgba(0,0,0,.7) !important;
}
[data-theme="light"] .task-detail-panel { background: #fff !important; }
.panel-header { border-bottom: 1px solid rgba(255,255,255,.1) !important; }
[data-theme="light"] .panel-header { border-bottom-color: rgba(60,60,67,.18) !important; }
.panel-title {
  font-family: var(--font-d) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  color: var(--text) !important;
}
.panel-section { border-bottom: 1px solid rgba(255,255,255,.07) !important; }
.panel-section-title {
  font-family: var(--font-b) !important;
  letter-spacing: .02em !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  color: var(--text3) !important;
}

/* ── KANBAN ─────────────────────────────────────────────────── */
.kanban-col {
  background: var(--surface) !important;
  border: none !important;
  border-radius: 16px !important;
}
.kanban-col-head { border-bottom: 1px solid rgba(255,255,255,.07) !important; }
.kanban-col-label {
  font-family: var(--font-b) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.kanban-col-count {
  font-family: var(--font-m) !important;
  font-size: 11px !important;
  border-color: var(--border) !important;
  background: var(--surface2) !important;
}
.kanban-card {
  background: var(--surface2) !important;
  border: none !important;
  border-radius: 12px !important;
}
.kanban-card:hover {
  background: var(--surface3) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
}
.kc-title { font-family: var(--font-b) !important; font-size: 13px !important; font-weight: 500 !important; }
.kc-number { font-family: var(--font-m) !important; }

/* ── SETTINGS SECTIONS ──────────────────────────────────────── */
.settings-section {
  background: var(--surface) !important;
  border: none !important;
  border-radius: 16px !important;
}
.section-title {
  font-family: var(--font-b) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--text3) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
[data-theme="light"] .section-title { border-bottom-color: rgba(60,60,67,.12) !important; }

/* ── SEARCH BAR ─────────────────────────────────────────────── */
.search-bar {
  background: var(--surface2) !important;
  border: none !important;
  border-radius: 12px !important;
}
.search-bar:focus-within {
  border: 1px solid var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255,55,95,.12) !important;
}

/* ── TOASTS ─────────────────────────────────────────────────── */
.toast {
  font-family: var(--font-b) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border-radius: 12px !important;
  backdrop-filter: blur(20px) !important;
}

/* ── NOTIFICATION BELL ──────────────────────────────────────── */
.notif-btn { border-color: var(--border) !important; border-radius: 10px !important; }
.notif-btn:hover { background: var(--surface2) !important; }
.notif-badge { background: var(--danger) !important; box-shadow: none !important; }
.notif-dropdown {
  background: var(--surface) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.8) !important;
}
[data-theme="light"] .notif-dropdown { background: #fff !important; border-color: rgba(60,60,67,.18) !important; }
.notif-dd-header {
  font-family: var(--font-b) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.notif-item.unread { background: rgba(255,55,95,.06) !important; }

/* ── MESSAGES ────────────────────────────────────────────────── */
.msg-layout { border: none !important; border-radius: 16px !important; overflow: hidden !important; }
.msg-sidebar { background: var(--surface) !important; border-right: 1px solid rgba(255,255,255,.08) !important; }
.msg-sidebar-head {
  font-family: var(--font-d) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}
.msg-conv-item.active { background: rgba(255,55,95,.1) !important; border-left: 3px solid var(--accent) !important; }
.msg-conv-name { font-family: var(--font-b) !important; font-size: 14px !important; font-weight: 600 !important; }
.msg-conv-preview { font-family: var(--font-b) !important; font-size: 12px !important; }
.msg-bubble.mine {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 18px 18px 4px 18px !important;
}
.msg-bubble.theirs {
  background: var(--surface2) !important;
  border: none !important;
  border-radius: 18px 18px 18px 4px !important;
}
.msg-chat { background: var(--bg) !important; }
.msg-chat-head { background: var(--surface) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.msg-chat-name { font-family: var(--font-b) !important; font-size: 16px !important; font-weight: 700 !important; }
.msg-textarea {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  font-family: var(--font-b) !important;
}
.msg-textarea:focus { border-color: var(--accent) !important; box-shadow: none !important; }
.msg-send-btn { background: var(--accent) !important; color: #fff !important; box-shadow: none !important; }

/* ── ACTIVITY RING (sidebar) ─────────────────────────────────── */
#ring-c { stroke: var(--accent) !important; stroke-linecap: round !important; }

/* ── HISTORY TIMELINE ────────────────────────────────────────── */
.history-entry::before { background: rgba(255,255,255,.1) !important; }
.history-dot.status  { background: var(--info-dim) !important; color: var(--info) !important; border-color: var(--info) !important; }
.history-dot.created { background: var(--success-dim) !important; color: var(--success) !important; border-color: var(--success) !important; }
.history-when { font-family: var(--font-m) !important; font-size: 11px !important; }

/* ── COMMENTS ────────────────────────────────────────────────── */
.comment-bubble { background: var(--surface2) !important; border: none !important; border-radius: 14px !important; }
.comment-submit {
  background: var(--accent) !important;
  border: none !important;
  color: #fff !important;
  font-family: var(--font-b) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 10px !important;
}
.comment-textarea { background: var(--surface2) !important; border-color: var(--border) !important; border-radius: 12px !important; font-family: var(--font-b) !important; }
.comment-textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(255,55,95,.12) !important; }

/* ── SUBTASK ─────────────────────────────────────────────────── */
.subtask-row { background: var(--surface2) !important; border: none !important; border-radius: 10px !important; }
.subtask-check.checked { background: var(--success) !important; border-color: var(--success) !important; box-shadow: none !important; }
.subtask-prog-fill { background: var(--success) !important; box-shadow: none !important; }
.subtask-add-input { background: var(--surface2) !important; border-color: var(--border) !important; border-radius: 10px !important; }

/* ── DEPENDENCY ─────────────────────────────────────────────── */
.dep-item { background: var(--surface2) !important; border: none !important; border-radius: 10px !important; }
.dep-item.blocker  { border-left: 3px solid var(--danger) !important; }
.dep-item.blocking { border-left: 3px solid var(--warning) !important; }
.dep-num { background: rgba(255,55,95,.12) !important; color: var(--accent) !important; border: none !important; }

/* ── AUTH CARD ───────────────────────────────────────────────── */
.auth-card {
  background: var(--surface) !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 40px 80px rgba(0,0,0,.7) !important;
}
[data-theme="light"] .auth-card { background: #fff !important; }
.auth-card h1 { font-family: var(--font-d) !important; font-weight: 700 !important; letter-spacing: -.03em !important; }

/* ── SCROLLBARS ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }

/* ── DB STATUS ───────────────────────────────────────────────── */
.db-dot.ok      { background: var(--success) !important; box-shadow: none !important; }
.db-dot.pinging { background: var(--warning) !important; box-shadow: none !important; }
.db-dot.err     { background: var(--danger)  !important; box-shadow: none !important; }

/* ── THEME TOGGLE ────────────────────────────────────────────── */
.theme-toggle { background: var(--surface2) !important; border-color: var(--border) !important; }
.theme-toggle::after { background: var(--text3) !important; }
[data-theme="light"] .theme-toggle::after { left: 18px; background: var(--accent) !important; }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state { color: var(--text3) !important; }
.empty-title {
  font-family: var(--font-d) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  color: var(--text2) !important;
}
.empty-sub { font-family: var(--font-b) !important; font-size: 14px !important; letter-spacing: 0 !important; }

/* ── LATE TASK BANNER ───────────────────────────────────────── */
.late-banner.warning { background: rgba(255,255,255,.03) !important; border-bottom-color: rgba(255,255,255,.07) !important; color: #8a7040 !important; }
.late-banner.critical { background: rgba(255,255,255,.03) !important; border-bottom-color: rgba(255,255,255,.07) !important; color: #8a4040 !important; }
.late-pulse { animation: none !important; }
@keyframes fitness-late-pulse {
  0%,100% { box-shadow: 0 1px 0 rgba(255,255,255,.05); }
  50%     { box-shadow: 0 0 0 3px rgba(255,69,58,.2), 0 4px 20px rgba(255,69,58,.15); }
}

/* ── MISCELLANEOUS ───────────────────────────────────────────── */
.recur-box { background: var(--surface2) !important; border-color: var(--border) !important; border-radius: 12px !important; }
.assign-select-row select { background: var(--surface2) !important; border-color: var(--border) !important; border-radius: 10px !important; }
.upload-zone { border-color: rgba(255,255,255,.15) !important; border-radius: 12px !important; }
.upload-zone:hover { border-color: var(--accent) !important; background: var(--accent-dim) !important; }
.view-toggle { background: var(--surface2) !important; border-color: var(--border) !important; border-radius: 10px !important; }
.view-toggle-btn.active { background: var(--surface) !important; border-radius: 8px !important; }

/* ── GANTT ───────────────────────────────────────────────────── */
.gantt-controls input, .gantt-controls select {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  border-radius: 10px !important;
  font-family: var(--font-b) !important;
}

/* cat pills */
.cats-label { font-size: 10px !important; font-family: var(--font-b) !important; font-weight: 600 !important; letter-spacing: .04em !important; }

/* ws status dot — no glow in fitness theme */
#ws-status-dot { box-shadow: none !important; }

/* ════════════════════════════════════════════════════════════════
   MESSAGE FEATURES: EMOJI REACTIONS + @TAGS + ADMIN DELETE
════════════════════════════════════════════════════════════════ */

/* ── Message action bar (hover) ──────────────────────────────── */
.msg-row { position: relative; }
.msg-actions {
  position: absolute;
  top: -4px;
  display: flex;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 10;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 5px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.msg-row.mine  .msg-actions { right: 36px; }
.msg-row:not(.mine) .msg-actions { left: 36px; }
.msg-row:hover .msg-actions,
.msg-actions:hover { opacity: 1; pointer-events: auto; }
.msg-action-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
  color: var(--text2);
}
.msg-action-btn:hover { background: var(--surface3); }
.msg-action-btn.del:hover { background: var(--danger-dim); color: var(--danger); }

/* ── Emoji picker popup ──────────────────────────────────────── */
.emoji-picker-popup {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 224px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  z-index: 999;
  animation: fadeUp .12s ease;
}
.emoji-picker-popup button {
  width: 32px; height: 32px;
  border: none; background: transparent;
  border-radius: 8px; cursor: pointer;
  font-size: 18px; display: flex;
  align-items: center; justify-content: center;
  transition: background .1s;
}
.emoji-picker-popup button:hover { background: var(--surface2); }

/* ── Emoji reaction strip under message ──────────────────────── */
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.msg-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 2px 7px 2px 5px;
  font-size: 13px;
  cursor: pointer;
  transition: all .12s;
  user-select: none;
}
.msg-reaction-chip:hover { border-color: var(--accent); background: var(--accent-dim); }
.msg-reaction-chip.mine  { border-color: var(--accent); background: var(--accent-dim); }
.msg-reaction-chip .rc-count {
  font-size: 11px;
  font-family: var(--font-m);
  font-weight: 600;
  color: var(--text2);
  min-width: 10px;
  line-height: 1;
}
.msg-reaction-chip .rc-names {
  display: none;
  position: absolute;
  bottom: 26px;
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap;
  font-family: var(--font-m);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  z-index: 10;
}
.msg-reaction-chip:hover .rc-names { display: block; }

/* ── @Tag mention autocomplete ───────────────────────────────── */
.tag-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 12px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  z-index: 100;
  min-width: 200px;
  max-height: 220px;
  overflow-y: auto;
  animation: fadeUp .1s ease;
  display: none;
}
.tag-dropdown.show { display: block; }
.tag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background .1s;
  border-bottom: 1px solid var(--border);
}
.tag-item:last-child { border: none; }
.tag-item:hover, .tag-item.active { background: var(--surface2); }
.tag-item .tag-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: #fff; flex-shrink: 0;
}
.tag-item .tag-name { font-size: 13px; font-weight: 500; flex: 1; }
.tag-item .tag-handle { font-size: 10px; color: var(--text3); font-family: var(--font-m); }

/* @mention highlight inside bubble */
.msg-mention {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-dim);
  border-radius: 4px;
  padding: 0 3px;
}
.msg-mention.me {
  color: var(--success);
  background: var(--success-dim);
}

/* ════════════════════════════════════════════════════════════════
   #TASK MENTION IN MESSAGES
════════════════════════════════════════════════════════════════ */

/* Inline #TASK chip inside a bubble */
.task-mention-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-dim);
  border: 1px solid rgba(255,55,95,.25);
  border-radius: 6px;
  padding: 1px 7px 1px 5px;
  font-size: 12px;
  font-family: var(--font-m);
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  vertical-align: middle;
  margin: 0 2px;
}
.task-mention-chip:hover {
  background: rgba(255,55,95,.2);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255,55,95,.2);
}
.task-mention-chip .tm-icon { font-size: 11px; }

/* Floating task preview card */
.task-mention-preview {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,55,95,.08);
  z-index: 1000;
  max-width: 380px;
  min-width: 280px;
  animation: fadeUp .15s ease;
  overflow: hidden;
}
.task-mention-preview.loading {
  border-radius: 12px;
  min-width: 200px;
}

/* #TASK autocomplete dropdown — reuses .tag-dropdown */

/* ════════════════════════════════════════════════════════════════
   NOTES PAGE
════════════════════════════════════════════════════════════════ */
.notes-layout {
  display: flex; gap: 20px;
  height: calc(100vh - 120px);
}
/* ── LEFT: note list ── */
.notes-list-panel {
  width: 300px; min-width: 300px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; padding-right: 4px;
}
.note-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px;
  cursor: pointer; transition: all .15s; position: relative;
}
.note-card:hover  { border-color: var(--border2); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.note-card.active { border-color: var(--accent); background: var(--accent-dim); }
.note-card-title  { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
.note-card-preview{ font-size: 11px; color: var(--text3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; font-family: var(--font-m); }
.note-card-meta   { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.note-card-date   { font-size: 10px; color: var(--text3); font-family: var(--font-m); margin-left: auto; }
.note-pin-badge   { font-size: 10px; }
.note-secret-badge{ font-size: 10px; }
.note-shared-badge{ font-size: 10px; color: var(--info); }
.note-color-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── RIGHT: editor ── */
.notes-editor-panel {
  flex: 1; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; min-width: 0;
}
.notes-editor-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap; flex-shrink: 0;
}
.note-title-input {
  flex: 1; background: transparent; border: none;
  font-family: var(--font-d); font-size: 20px; font-weight: 700;
  color: var(--text); outline: none; letter-spacing: -.02em;
  min-width: 120px;
}
.note-title-input::placeholder { color: var(--text3); }

/* Toolbar */
.notes-toolbar {
  display: flex; align-items: center; gap: 2px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap; flex-shrink: 0;
  background: var(--surface2);
}
.tb-btn {
  width: 30px; height: 30px; border-radius: 7px;
  border: none; background: transparent;
  color: var(--text2); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s; font-family: serif;
}
.tb-btn:hover   { background: var(--surface3); color: var(--text); }
.tb-btn.active  { background: var(--accent-dim); color: var(--accent); }
.tb-sep { width: 1px; height: 20px; background: var(--border2); margin: 0 4px; flex-shrink: 0; }
.tb-select {
  height: 28px; background: var(--surface3); border: none;
  color: var(--text2); font-size: 11px; border-radius: 6px;
  padding: 0 6px; outline: none; cursor: pointer;
}

/* Editor area */
.notes-editor-body {
  flex: 1; overflow-y: auto; padding: 20px 24px;
  font-size: 15px; line-height: 1.8; color: var(--text);
}
.note-editor-content {
  width: 100%; min-height: 300px; outline: none;
  font-family: var(--font-b); font-size: 15px;
  line-height: 1.8; color: var(--text);
}
.note-editor-content:focus { outline: none; }
.note-editor-content h1 { font-size: 26px; font-weight: 700; margin: 12px 0 6px; }
.note-editor-content h2 { font-size: 20px; font-weight: 600; margin: 10px 0 5px; }
.note-editor-content h3 { font-size: 17px; font-weight: 600; margin: 8px 0 4px; }
.note-editor-content ul,
.note-editor-content ol  { padding-left: 24px; margin: 6px 0; }
.note-editor-content li  { margin: 3px 0; }
.note-editor-content blockquote {
  border-left: 3px solid var(--accent); padding-left: 14px;
  color: var(--text2); font-style: italic; margin: 10px 0;
}
.note-editor-content code {
  background: var(--surface3); padding: 2px 6px;
  border-radius: 5px; font-family: var(--font-m); font-size: 13px;
}
.note-editor-content hr {
  border: none; border-top: 1px solid var(--border2); margin: 16px 0;
}
.note-editor-content a { color: var(--accent); text-decoration: underline; }
/* Secret content blur */
.note-content-blurred { filter: blur(5px); user-select: none; transition: filter .3s; }
.note-content-blurred.revealed { filter: none; }

/* Footer of editor */
.notes-editor-foot {
  padding: 10px 18px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  flex-wrap: wrap;
}
.note-save-btn {
  background: var(--accent); border: none; color: #fff;
  padding: 7px 20px; border-radius: 9px; font-size: 13px;
  font-weight: 600; font-family: var(--font-b); cursor: pointer;
  transition: all .15s;
}
.note-save-btn:hover { background: var(--accent-dark); }
.note-save-indicator { font-size: 11px; color: var(--text3); font-family: var(--font-m); }

/* Attachments section */
.note-attach-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--border); }
.note-attach-item {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 10px; font-size: 12px;
}
.note-attach-icon { font-size: 14px; }
.note-attach-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }
.note-attach-del  { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 12px; padding: 0 2px; }
.note-attach-del:hover { color: var(--danger); }

/* Share panel */
.note-share-list { display: flex; flex-wrap: wrap; gap: 6px; }
.note-share-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 99px; padding: 4px 10px; font-size: 12px;
}
.note-share-chip button { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 11px; }
.note-share-chip button:hover { color: var(--danger); }

/* Color picker swatches */
.note-color-picker { display: flex; gap: 5px; flex-wrap: wrap; }
.ncp-swatch {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: all .12s; flex-shrink: 0;
}
.ncp-swatch.active  { border-color: var(--text); transform: scale(1.2); }
.ncp-swatch:hover   { transform: scale(1.15); }

/* Secret reveal button */
.note-reveal-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface3); border: 1px solid var(--border2);
  color: var(--text2); font-size: 12px; font-family: var(--font-b);
  padding: 5px 12px; border-radius: 8px; cursor: pointer; transition: all .15s;
}
.note-reveal-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Empty state for notes */
.notes-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: var(--text3);
  gap: 12px;
}