/* ============================================================
   NT NutraConnect — styles.css
   ============================================================ */

:root {
  --bg:        #0f1419;
  --surface:   #1a2129;
  --surface-2: #232b35;
  --surface-3: #2e3744;
  --border:     #3a4452;
  --text:       #e8ecf0;
  --text-dim:   #8a95a3;
  --text-faint: #5a6573;
  --accent:     #ffb627;
  --accent-dim: rgba(255,182,39,0.15);
  --nav-accent: #EED070; /* Dark Mode Yellow (Soft Gold) — the one accent detail per sidebar icon */
  --green:  #4ade80; --green-bg:  rgba(74,222,128,0.1);
  --red:    #f87171; --red-bg:    rgba(248,113,113,0.12);
  --blue:   #60a5fa; --blue-bg:   rgba(96,165,250,0.1);
  --amber:  #fbbf24; --amber-bg:  rgba(251,191,36,0.1);
  --orange: #fb923c; --orange-bg: rgba(251,146,60,0.1);
  --purple: #a78bfa; --purple-bg: rgba(167,139,250,0.1);
  --radius:    8px;
  --sidebar-w: 56px;
  --font:      Georgia, 'Times New Roman', serif;
  --mono:      'JetBrains Mono', monospace;
  --indent-formula: 28px;
  --indent-wo:      48px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 14px;
}
/* Form controls don't inherit the page font by default in any browser —
   without this, any plain <button>/<input>/<select>/<textarea> silently
   falls back to the OS UI font instead of following --font. */
button, input, select, textarea { font-family: inherit; }

.app  { display: flex; height: 100vh; }
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; gap: 4px;
}
.sidebar-logo {
  font-weight: 800; font-size: 11px; color: var(--accent);
  letter-spacing: 0.05em; padding: 8px 0 12px;
  border-bottom: 1px solid var(--border); width: 100%;
  text-align: center; margin-bottom: 4px;
}
.nav-btn {
  width: 40px; height: 40px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; color: var(--text-dim);
  transition: all 0.15s; position: relative;
}
.nav-btn:hover  { background: var(--surface-2); color: var(--text); }
.nav-btn.active { background: var(--accent-dim); color: var(--accent); }
.nav-icon-img   { width: 22px; height: 22px; object-fit: contain; }
.nav-icon-light { display: none; }
body.light-mode .nav-icon-dark  { display: none; }
body.light-mode .nav-icon-light { display: block; }
/* Inline SVG nav icons — stroke="currentColor" in the SVG markup picks up
   .nav-btn's own color (text-faint idle, text on hover, accent when active)
   for free, same as the tooltip text already does. One shape per icon uses
   var(--nav-accent) directly instead of currentColor, so it always renders
   as that specific gold/amber press regardless of state. */
.nav-icon-svg { width: 22px; height: 22px; display: block; }
/* Retired from the sidebar for now — code/route still intact, just not shown. */
.nav-btn-archived { display: none; }
.nav-btn .tooltip {
  position: absolute; left: 52px; background: var(--surface-3);
  color: var(--text); font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 6px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
  border: 1px solid var(--border); z-index: 100;
}
.nav-btn:hover .tooltip { opacity: 1; }
.nav-badge {
  position: absolute; top: 4px; right: 4px;
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 700; padding: 1px 4px;
  border-radius: 6px; font-family: var(--mono);
  min-width: 14px; text-align: center;
}
.nav-badge.amber { background: var(--amber); color: #000; }
.nav-spacer { flex: 1; }

/* ── TOPBAR ── */
.topbar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 20px; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; gap: 12px;
}
.topbar-title   { font-weight: 800; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
.topbar-actions { display: flex; gap: 8px; align-items: center; flex: 1; }

/* A little personal note/quote, editable in place. Looks like plain text
   until you hover or click it — no border/background until then, so it
   reads as a nice touch rather than a form field. */
.topbar-quote {
  flex-shrink: 0; max-width: 260px; margin-left: auto;
  font-size: 12px; font-style: italic; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: text; padding: 5px 10px; border-radius: var(--radius);
  outline: none; transition: background 0.15s;
}
.topbar-quote:hover  { background: var(--surface-2); }
.topbar-quote:focus  {
  background: var(--surface-2); box-shadow: 0 0 0 1px var(--border);
}
.topbar-quote.has-text { color: var(--text-dim); font-style: normal; }

.content        { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.content-scroll { flex: 1; overflow-y: auto; padding: 20px; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--radius); border: none;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #000; }
.btn-primary:hover { background: #ffc84a; }
.btn-ghost   { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger  { background: var(--red-bg); color: var(--red); border: 1px solid rgba(248,113,113,0.2); }
.btn-danger:hover { background: rgba(248,113,113,0.2); }
.btn-sm   { padding: 4px 10px; font-size: 12px; }
.btn-icon { padding: 6px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ── BADGES ── */
.badge        { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.badge-green  { background: var(--green-bg);  color: var(--green); }
.badge-red    { background: var(--red-bg);    color: var(--red); }
.badge-amber  { background: var(--amber-bg);  color: var(--amber); }
.badge-blue   { background: var(--blue-bg);   color: var(--blue); }
.badge-orange { background: var(--orange-bg); color: var(--orange); }
.badge-gray   { background: var(--surface-3); color: var(--text-dim); }

/* ── FORMS ── */
.form-group    { margin-bottom: 13px; }
.form-label    { display: block; font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 5px; }
.form-input, .form-select, .form-textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 7px 11px; color: var(--text);
  font-family: var(--font); font-size: 13px; outline: none; transition: border 0.15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); }
.form-textarea  { resize: vertical; min-height: 70px; }
.form-select option { background: var(--surface-2); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Native date inputs default to a plain white control — this reskins them
   (and their picker popup, via color-scheme) to match the dark surfaces
   they sit on instead of standing out as a bright box. */
input[type="date"] {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 4px 8px; color: var(--text);
  font-family: var(--font); font-size: 11px; outline: none;
  transition: border 0.15s; color-scheme: dark;
}
input[type="date"]:hover  { border-color: var(--text-dim); }
input[type="date"]:focus { border-color: var(--accent); }
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.6); opacity: 0.7; cursor: pointer; transition: opacity 0.15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ── MODAL ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000; backdrop-filter: blur(4px); /* above #task-detail-overlay (8000) — editing a task note must layer on top */
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 22px; width: 580px;
  max-width: 95vw; max-height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(10px); transition: transform 0.2s;
}
.modal-overlay.open .modal { transform: translateY(0); }
/* Header and footer stay put; only the body scrolls — so Close/✕ are
   always reachable without scrolling through a long note history. */
.modal-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-shrink: 0; }
.modal-title   { font-weight: 800; font-size: 15px; }
.modal-close   { background: none; border: none; color: var(--text-dim); font-size: 20px; cursor: pointer; }
.modal-close:hover { color: var(--text); }
#modal-body    { flex: 1; min-height: 0; overflow-y: auto; }
.modal-footer  { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); flex-shrink: 0; }

/* ── CLIENT SLIDE-OVER DRAWER (Accounts page) ──
   Sits below #task-detail-overlay (8000) and .modal-overlay (9000) so
   opening a linked task or a notes modal from inside the drawer still
   layers correctly on top of it. */
.client-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 7000; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.client-drawer-overlay.open { opacity: 1; pointer-events: all; }
.client-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 38vw; min-width: 420px; max-width: 640px;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(100%); transition: transform 0.22s ease, width 0.2s ease;
}
/* Meeting Notes tab needs real room to write — reaches much further across
   the screen than the Client Card tab's reference-info width. */
.client-drawer-panel.drawer-wide { width: 74vw; min-width: 640px; max-width: 1200px; }
.client-drawer-overlay.open .client-drawer-panel { transform: translateX(0); }
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.drawer-title  { font-weight: 800; font-size: 15px; }
.drawer-body   { flex: 1; overflow-y: auto; padding: 16px 20px 28px; }
.drawer-section      { margin-bottom: 22px; }
.drawer-section-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); margin-bottom: 10px;
}
.drawer-block       { margin-bottom: 16px; }
.drawer-block-label {
  font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px;
  display: inline-block; padding-bottom: 3px; border-bottom: 2px solid var(--accent);
}

/* ── TABS (generic) ── */
.tabs { display: flex; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: var(--radius); width: fit-content; margin-bottom: 14px; }
.tab  { padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-dim); transition: all 0.15s; }
.tab.active { background: var(--surface-3); color: var(--text); }

/* ── SEARCH ── */
.search-wrap  { flex: 1; max-width: 380px; position: relative; }
.search-input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 7px 12px 7px 32px;
  color: var(--text); font-family: var(--font); font-size: 13px;
  outline: none; transition: border 0.15s;
}
.search-input:focus { border-color: var(--accent); }
.search-icon  { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 13px; pointer-events: none; }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-height: 300px; overflow-y: auto; z-index: 200; display: none; }
.search-results.open { display: block; }
.search-result-item { padding: 9px 13px; cursor: pointer; border-bottom: 1px solid rgba(58,68,82,0.4); transition: background 0.1s; }
.search-result-item:hover { background: var(--surface-2); }
.search-result-item:last-child { border-bottom: none; }
.search-result-label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.search-result-name  { font-weight: 600; font-size: 13px; }
.search-result-sub   { font-size: 11px; color: var(--text-dim); margin-top: 1px; }

/* ── ALERTS ── */
.alert-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border-radius: var(--radius); border: 1px solid; margin-bottom: 6px; }
.alert-item.critical { background: var(--red-bg);   border-color: rgba(248,113,113,0.25); }
.alert-item.warning  { background: var(--amber-bg); border-color: rgba(251,191,36,0.25); }
.alert-item.info     { background: var(--blue-bg);  border-color: rgba(96,165,250,0.2); }
.alert-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 3px; flex-shrink: 0; }
.alert-item.critical .alert-dot { background: var(--red);   box-shadow: 0 0 5px var(--red); }
.alert-item.warning  .alert-dot { background: var(--amber); box-shadow: 0 0 5px var(--amber); }
.alert-item.info     .alert-dot { background: var(--blue); }
.alert-title { font-weight: 700; font-size: 12px; }
.alert-item.critical .alert-title { color: var(--red); }
.alert-item.warning  .alert-title { color: var(--amber); }
.alert-item.info     .alert-title { color: var(--blue); }
.alert-msg { font-size: 11px; color: var(--text-dim); margin-top: 2px; line-height: 1.4; }

/* ── DASHBOARD PANELS ── */
.panel        { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; }
.panel-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.panel-title  { font-weight: 800; font-size: 13px; }
.panel-body   { flex: 1; overflow-y: auto; padding: 12px; }
.area-group   { margin-bottom: 12px; }
.area-label   { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }

.wo-item      { padding: 9px 11px; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 5px; background: var(--surface-2); cursor: pointer; transition: all 0.15s; }
.wo-item:hover { border-color: var(--accent); }
.wo-item-top  { display: flex; align-items: center; gap: 8px; }
.wo-number    { font-family: var(--mono); font-weight: 700; color: var(--accent); font-size: 12px; }
.wo-name      { font-weight: 600; font-size: 12px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-meta-row  { font-size: 11px; color: var(--text-dim); margin-top: 3px; display: flex; gap: 8px; }
.type-chip    { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; }

/* ── TASK ITEMS ── */
.task-item      { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 5px; background: var(--surface-2); position: relative; }
.task-check-box { width: 14px; height: 14px; border-radius: 3px; border: 2px solid var(--border); flex-shrink: 0; margin-top: 1px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; }
.task-check-box.done { background: var(--green); border-color: var(--green); }
.task-check-box.done::after { content: '✓'; color: #000; font-size: 9px; font-weight: 800; }
.task-body      { flex: 1; }
.task-title-txt { font-weight: 600; font-size: 12px; }
.task-title-txt.done { text-decoration: line-through; color: var(--text-faint); }
.task-meta-txt  { font-size: 11px; color: var(--text-dim); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.assignee-chip  { display: inline-flex; align-items: center; background: var(--accent-dim); color: var(--accent); padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; }
.priority-dot   { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.priority-dot.urgent { background: var(--red);    box-shadow: 0 0 4px var(--red); }
.priority-dot.high   { background: var(--orange); }
.priority-dot.normal { background: var(--blue); }
.priority-dot.low    { background: var(--text-faint); }

/* ── STAGE CELLS (tracker table) ── */
.stage-cell {
  padding: 6px 8px; min-height: 56px;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer; transition: background 0.1s;
}
.stage-cell:hover { background: rgba(255,255,255,0.03); }
.stage-select {
  width: 100%; background: transparent; border: 1px solid var(--border);
  border-radius: 5px; padding: 4px 6px; color: var(--text);
  font-family: var(--font); font-size: 11px; font-weight: 600;
  outline: none; cursor: pointer; transition: all 0.15s;
}
.stage-select:focus { border-color: var(--accent); }
.stage-select.status-not_started { border-color: var(--border);     color: var(--text-faint); }
.stage-select.status-in_progress { border-color: var(--amber);      color: var(--amber);  background: var(--amber-bg); }
.stage-select.status-done        { border-color: var(--green);      color: var(--green);  background: var(--green-bg); }
.stage-select.status-blocked     { border-color: var(--red);        color: var(--red);    background: var(--red-bg); }
.stage-select.status-na          { border-color: var(--text-faint); color: var(--text-faint); opacity: 0.5; }
.stage-date {
  width: 100%; background: transparent; border: 1px solid var(--border);
  border-radius: 5px; padding: 4px 6px; color: var(--text-dim);
  font-family: var(--mono); font-size: 11px; outline: none;
}
.stage-date:focus { border-color: var(--accent); color: var(--text); }
.note-preview { font-size: 10px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-preview.has-note { color: var(--amber); }
.add-note-btn  { font-size: 10px; color: var(--text-faint); cursor: pointer; opacity: 0; }
.stage-cell:hover .add-note-btn { opacity: 1; }

.progress-bar  { height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; margin-top: 2px; }
.progress-fill { height: 100%; border-radius: 2px; background: var(--green); transition: width 0.3s; }

.filter-bar {
  padding: 8px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; background: var(--surface); flex-wrap: wrap;
}
.filter-label { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── NOTES SIDEBAR ── */
.notes-sidebar {
  width: 300px; min-width: 300px;
  background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width 0.2s, min-width 0.2s;
}
.notes-sidebar.closed { width: 0; min-width: 0; border-left: none; }
.notes-sidebar-header {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.notes-sidebar-title { font-weight: 800; font-size: 13px; }
.notes-sidebar-body  { flex: 1; overflow-y: auto; padding: 12px; }

/* ── NOTE ITEMS ── */
.note-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; margin-bottom: 8px; }
.note-meta { font-size: 10px; color: var(--text-faint); margin-bottom: 4px; }
.note-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; }

/* ══════════════════════════════════════════════
   PROJECT CARD VIEW
   ══════════════════════════════════════════════ */
.proj-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 20px;
}
.proj-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.proj-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.proj-card-header {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.proj-card-client {
  font-weight: 800; font-size: 16px;
  color: #ffffff; letter-spacing: -0.01em;
}
.proj-card-counts {
  display: flex; gap: 8px;
  font-size: 11px; color: var(--text-faint); flex-shrink: 0;
}
.proj-card-warnings  { margin-bottom: 10px; }
.proj-card-warning {
  font-size: 11px; color: var(--red);
  background: var(--red-bg); border-radius: 4px;
  padding: 3px 8px; margin-bottom: 3px; font-weight: 600;
}
.proj-card-warning-more { font-size: 11px; color: var(--text-faint); padding: 2px 8px; }
.proj-card-formulas  { margin-bottom: 10px; }
.proj-card-formula-line {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid rgba(58,68,82,0.3);
}
.proj-card-formula-line:last-child { border-bottom: none; }
.proj-card-formula-name {
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proj-card-stage-badge {
  font-size: 10px; font-weight: 700; color: var(--accent);
  background: var(--accent-dim); padding: 2px 7px;
  border-radius: 4px; white-space: nowrap; flex-shrink: 0;
}
.proj-card-stage-none { font-size: 10px; color: var(--text-faint); flex-shrink: 0; }
.proj-card-notes { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
.proj-card-notes-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 6px;
}
.proj-card-notes-scroll { max-height: 80px; overflow-y: auto; }
.proj-card-note {
  font-size: 11px; color: var(--text-dim); line-height: 1.4;
  padding: 4px 0; border-bottom: 1px solid rgba(58,68,82,0.2);
}
.proj-card-note:last-child { border-bottom: none; }

/* ══════════════════════════════════════════════
   PROJECT DETAIL VIEW — FORMULA TABS
   ══════════════════════════════════════════════ */
.formula-tab-bar {
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}
.formula-tabs-scroll {
  display: flex;
  flex-direction: row;        /* ← horizontal */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.formula-tabs-scroll::-webkit-scrollbar { display: none; }

.formula-tab {
  display: inline-flex;       /* ← inline horizontal */
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-faint);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;        /* overlap the container border */
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.formula-tab:hover { color: var(--text-dim); }
.formula-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.formula-tab-alert {
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  width: 14px; height: 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════════════════════
   PROJECT DETAIL VIEW — FORMULA CHECKLIST (left panel)
   ══════════════════════════════════════════════ */
.checklist-group-header {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 16px 6px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}

.checklist-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(58,68,82,0.25);
  cursor: pointer;
  transition: background 0.1s;
  min-height: 44px;
}
.checklist-row:hover { background: rgba(255,255,255,0.02); }
.checklist-row:last-child { border-bottom: none; }

.checklist-check {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  transition: all 0.15s;
  cursor: pointer;
}
.checklist-check.done    { background: var(--green);  border-color: var(--green);  color: #000; }
.checklist-check.inprog  { background: var(--amber);  border-color: var(--amber);  color: #000; }
.checklist-check.blocked { background: var(--red);    border-color: var(--red);    color: #fff; }

/* ══════════════════════════════════════════════
   PROJECT DETAIL VIEW — WO CARDS (right panel)
   ══════════════════════════════════════════════ */
.wo-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.wo-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.wo-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}
.wo-card-header:hover { background: var(--surface-3); }

.wo-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
}

.wo-card-progress {
  padding: 6px 14px 4px;
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.wo-card-progress-bar {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--surface-3); overflow: hidden;
}
.wo-card-progress-fill {
  height: 100%; border-radius: 2px;
  background: var(--blue); transition: width 0.3s;
}

.wo-step-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(58,68,82,0.2);
  cursor: pointer;
  transition: background 0.1s;
}
.wo-step-row:hover { background: rgba(255,255,255,0.02); }
.wo-step-row:last-child { border-bottom: none; }

.wo-step-check {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.wo-step-check.done {
  background: var(--green);
  border-color: var(--green);
  color: #000;
}

/* ── WATCHDOG PANEL ── */
.watchdog-ing {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius);
  margin-bottom: 5px; font-size: 12px;
}
.watchdog-ing.ok     { background: rgba(74,222,128,0.06);  border: 1px solid rgba(74,222,128,0.2); }
.watchdog-ing.warn   { background: rgba(251,191,36,0.06);  border: 1px solid rgba(251,191,36,0.2); }
.watchdog-ing.danger { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.25); }
.watchdog-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.watchdog-dot.ok     { background: var(--green); }
.watchdog-dot.warn   { background: var(--amber); }
.watchdog-dot.danger { background: var(--red); }

/* ── MISC ── */
.divider       { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.mono          { font-family: var(--mono); }
.empty         { text-align: center; padding: 32px 16px; color: var(--text-faint); }
.empty-icon    { font-size: 28px; margin-bottom: 8px; }
.empty-title   { font-weight: 700; font-size: 13px; color: var(--text-dim); margin-bottom: 4px; }
.empty-sub     { font-size: 12px; }
.loading       { text-align: center; padding: 24px; color: var(--text-faint); font-family: var(--mono); font-size: 13px; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.pulse         { animation: pulse 1.5s infinite; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-title  { font-weight: 800; font-size: 14px; }

/* ── ACCOUNTS TABLE ── */
.accounts-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.accounts-table th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint); padding: 8px 14px 8px 10px; border-bottom: 2px solid var(--border);
  white-space: normal; word-wrap: break-word; position: sticky; top: 0; background: var(--surface); z-index: 1;
  /* Chrome sometimes fails to repaint a sticky cell's own background layer
     during scroll, briefly showing a stale frame of whatever scrolled
     underneath it (a client name from a group-header row "ghosting"
     through the column headers) — intermittent and self-correcting on the
     next repaint, which is exactly the "comes and goes" glitch reported.
     Forcing this onto its own GPU compositing layer makes the browser
     always repaint it fresh instead of compositing it with the content
     behind it. */
  will-change: transform;
}
.accounts-table td {
  padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top;
  white-space: normal; word-wrap: break-word; overflow-wrap: break-word;
}
.accounts-table tr.acct-group-header td { background: var(--surface-2); padding: 10px; border-top: 2px solid var(--border); }
/* Frozen first column — stays visible while scrolling right, on both the
   header row and every normal data row (the group-header row is one wide
   colspan cell, so it's excluded here and handled separately via a sticky
   element inside it instead). */
.accounts-table th:first-child { left: 0; z-index: 3; }
.accounts-table tr:not(.acct-group-header) > td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
}
.accounts-table .ro-cell { color: var(--text-dim); white-space: normal; word-wrap: break-word; }
.accounts-table input[type=text], .accounts-table input[type=date] {
  width: 100%; min-width: 60px; background: transparent; border: 1px solid transparent;
  border-radius: 4px; padding: 4px 6px; color: var(--text); font-size: 12px;
}
.accounts-table input[type=text]:hover, .accounts-table input[type=date]:hover { border-color: var(--border); }
.accounts-table input[type=text]:focus, .accounts-table input[type=date]:focus {
  border-color: var(--accent); background: var(--surface-2); outline: none;
}
.accounts-table textarea:hover { border-color: var(--border) !important; }
.accounts-table textarea:focus { border-color: var(--accent) !important; background: var(--surface-2); outline: none; }
.col-resize-handle:hover, .col-resize-handle:active { background: var(--accent); opacity: 0.6; }
.wrap-toggle:hover { text-shadow: 0 0 6px currentColor; }
#accounts-table-scroll { scrollbar-color: var(--accent) var(--surface-2); scrollbar-width: auto; }
#accounts-table-scroll::-webkit-scrollbar { height: 12px; }
#accounts-table-scroll::-webkit-scrollbar-track { background: var(--surface-2); }
#accounts-table-scroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px; }

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }
/* ── WATCHDOG STATUS DOT ── */
.watchdog-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; transition: background 0.3s;
}
.watchdog-dot.ok      { background: var(--green); box-shadow: 0 0 5px rgba(74,222,128,0.5); }
.watchdog-dot.warn    { background: var(--amber); box-shadow: 0 0 5px rgba(251,191,36,0.5); }
.watchdog-dot.alert   { background: var(--red);   box-shadow: 0 0 6px rgba(248,113,113,0.6);
  animation: watchdog-pulse 1.5s ease-in-out infinite; }
.watchdog-dot.running { background: var(--blue);  animation: watchdog-spin 1s linear infinite; }

@keyframes watchdog-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}
.so-pill-bar::-webkit-scrollbar       { height: 4px; }
.so-pill-bar::-webkit-scrollbar-track { background: transparent; }
.so-pill-bar::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }
.so-pill-bar::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
/* ── BADGE ADDITIONS ── */
.badge-amber { background: rgba(251,191,36,0.15); color: var(--amber);
  border: 0.5px solid rgba(251,191,36,0.3); }
.badge-green { background: rgba(74,222,128,0.12); color: var(--green);
  border: 0.5px solid rgba(74,222,128,0.25); }

/* ══════════════════════════════════════════════
   LIGHT MODE — toggled via body.light-mode
   ══════════════════════════════════════════════ */
body.light-mode {
  --bg:        #f0f2f5;
  --surface:   #ffffff;
  --surface-2: #f4f6f8;
  --surface-3: #e8ecf0;
  --border:    #d1d9e0;
  --text:      #1a2129;
  --text-dim:  #4a5568;
  --text-faint:#8a95a3;
  --accent:    #d97706;
  --accent-dim:rgba(217,119,6,0.12);
  --nav-accent: #D49B00; /* Light Mode Yellow (Rich Amber) — the one accent detail per sidebar icon */
  --green:     #16a34a; --green-bg:  rgba(22,163,74,0.1);
  --red:       #dc2626; --red-bg:    rgba(220,38,38,0.1);
  --blue:      #2563eb; --blue-bg:   rgba(37,99,235,0.1);
  --amber:     #d97706; --amber-bg:  rgba(217,119,6,0.1);
  --orange:    #ea580c; --orange-bg: rgba(234,88,12,0.1);
  --purple:    #7c3aed; --purple-bg: rgba(124,58,237,0.1);
}
body.light-mode .modal-overlay { background: rgba(0,0,0,0.4); }
body.light-mode ::-webkit-scrollbar-thumb { background: var(--border); }

/* ══════════════════════════════════════════════
   TASK DETAIL PANEL STYLES
   ══════════════════════════════════════════════ */

/* Inline format toolbar in notes editor */
.notes-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.notes-toolbar button {
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.1s;
  line-height: 1.4;
}
.notes-toolbar button:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.notes-toolbar .toolbar-sep {
  width: 1px;
  background: var(--border);
  margin: 2px 2px;
  flex-shrink: 0;
}
.notes-toolbar .hl-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.1s;
  display: inline-block;
}
.notes-toolbar .hl-swatch:hover { border-color: var(--border); box-shadow: 0 0 0 1px var(--text); }
.notes-toolbar .hl-swatch-none {
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, var(--surface-3) 4px, var(--surface-3) 8px);
  border: 1px solid var(--border);
  color: var(--red);
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}

/* Notion-style "/" command menu */
.notes-slash-menu {
  position: fixed;
  z-index: 9500;
  width: 260px;
  max-height: 300px;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.notes-slash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.notes-slash-item.active { background: var(--surface-3); }
.notes-slash-item:hover  { background: var(--surface-2); }
.notes-slash-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
}
.notes-slash-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.notes-slash-hint {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.3;
}
.notes-editor-hint {
  font-size: 11px;
  color: var(--text-faint);
  padding: 6px 2px 0;
}
.notes-editor-hint code {
  background: var(--surface-3);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 10px;
}

/* ══════════════════════════════════════════════
   WINS TAB
   ══════════════════════════════════════════════ */
.wins-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.wins-stat {
  flex: 1;
  min-width: 130px;
  padding: 16px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.wins-stat-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
}
.wins-stat-label {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
  line-height: 1.3;
}
.wins-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.wins-card {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.wins-chart-card {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.wins-chart-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.wins-bar-fill {
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.wins-jar-card {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.wins-jar-card svg g { transition: opacity 0.3s; }

@keyframes wins-confetti-fall {
  to {
    top: 100vh;
    transform: translateX(var(--wins-confetti-drift)) rotate(720deg);
    opacity: 0;
  }
}

/* task-detail field rows */
.td-field-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.td-field-label {
  width: 130px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  flex-shrink: 0;
}
.td-field-value { flex: 1; min-width: 0; }

/* Subtask row */
.subtask-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

/* Attachment chip */
.attach-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 11px;
  max-width: 200px;
}

/* Toggle block in notes editor */
.toggle-block { margin: 4px 0; }
.toggle-block > div:first-child {
  cursor: pointer;
  user-select: none;
}

/* Stage picker when inside detail panel (no form-group wrapper) */
.td-stage-wrap { position: relative; }
.td-stage-wrap .form-group { margin-bottom: 0; }

/* Settings panel (light/dark, week settings) */
.settings-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.settings-row:last-child { border-bottom: none; }
.settings-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.settings-toggle input { display: none; }
.settings-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--surface-3);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
  border: 1px solid var(--border);
}
.settings-toggle input:checked + .settings-toggle-slider {
  background: var(--blue);
  border-color: var(--blue);
}
.settings-toggle-slider::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.settings-toggle input:checked + .settings-toggle-slider::after {
  transform: translateX(16px);
}

/* ══════════════════════════════════════════════
   NOTES EDITOR — full styling
   ══════════════════════════════════════════════ */

.notes-rich-content {
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-y: auto;
}
.notes-rich-content:focus { outline: none; }

/* Paragraphs */
.notes-rich-content p { margin: 2px 0; min-height: 1.5em; }

/* Headings */
.notes-rich-content h1 { font-size: 22px; font-weight: 800; margin: 10px 0 4px; line-height: 1.2; }
.notes-rich-content h2 { font-size: 18px; font-weight: 700; margin: 8px 0 4px;  line-height: 1.2; }
.notes-rich-content h3 { font-size: 15px; font-weight: 700; margin: 6px 0 3px;  line-height: 1.2; }

/* Block quote */
.notes-rich-content blockquote {
  border-left: 3px solid var(--blue);
  padding: 4px 12px;
  margin: 6px 0 6px 4px;
  color: var(--text-dim);
  font-style: italic;
  background: rgba(96,165,250,0.06);
  border-radius: 0 4px 4px 0;
}

/* ── Lists — indent + marker styles per level ── */
.notes-rich-content ul,
.notes-rich-content ol {
  padding-left: 24px;
  margin: 3px 0;
}
.notes-rich-content li { margin: 2px 0; line-height: 1.6; }

/* Bullet levels: filled circle → hollow circle → diamond → filled circle... */
.notes-rich-content ul                    { list-style-type: disc; }
.notes-rich-content ul ul                 { list-style-type: circle; }
.notes-rich-content ul ul ul              { list-style-type: square; }
.notes-rich-content ul ul ul ul           { list-style-type: disc; }

/* Numbered levels: 1. → a. → i. → 1. */
.notes-rich-content ol                    { list-style-type: decimal; }
.notes-rich-content ol ol                 { list-style-type: lower-alpha; }
.notes-rich-content ol ol ol              { list-style-type: lower-roman; }
.notes-rich-content ol ol ol ol           { list-style-type: decimal; }

/* HR divider */
.notes-rich-content .notes-hr,
.notes-rich-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 10px 0;
}

/* ── Highlights — Chrome BackColor wraps in a font/span ── */
.notes-rich-content font[style*="background-color"],
.notes-rich-content span[style*="background-color"],
.notes-rich-content [style*="background-color"] {
  border-radius: 2px;
  padding: 1px 3px;
  color: #111 !important;
}

/* ── Links — wrapped in contenteditable=false span so Chrome never intercepts clicks ── */
.notes-rich-content .notes-link-wrap {
  display: inline;
  cursor: pointer;
}
.notes-rich-content a,
.notes-rich-content .notes-link {
  color: var(--blue) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
.notes-rich-content a:hover { opacity: 0.8; }

/* ── Checklist items ── */
.notes-rich-content .notes-check-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 3px 0;
  padding: 2px 0;
}
.notes-rich-content .notes-cb {
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--blue);
}
.notes-rich-content .notes-cb-text {
  flex: 1;
  outline: none;
  min-width: 20px;
  font-size: 13px;
  line-height: 1.6;
}

/* ── Toggle blocks ── */
.notes-rich-content .notes-toggle {
  margin: 2px 0;
  border-radius: 4px;
}
/* Toggles directly after another toggle — no extra gap */
.notes-rich-content .notes-toggle + .notes-toggle {
  margin-top: 1px;
}
.notes-rich-content .notes-toggle-header {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.1s;
}
.notes-rich-content .notes-toggle-header:hover {
  background: rgba(255,255,255,0.05);
}
.notes-rich-content .notes-toggle-arrow {
  font-size: 11px;
  color: var(--text-faint);
  transition: transform 0.15s;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  pointer-events: none;
}
.notes-rich-content .notes-toggle-title {
  font-weight: 600;
  font-size: 13px;
  outline: none;
  flex: 1;
  min-width: 20px;
}
.notes-rich-content .notes-toggle-body {
  margin-left: 20px;
  padding: 4px 0 4px 8px;
  border-left: 2px solid var(--border);
}
.notes-rich-content .notes-toggle-content {
  outline: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  min-height: 1.5em;
}

.undo-toast {
  animation: slideUp 0.2s ease;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes pinShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}