/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Brand ── */
  --brand-dark: #1F2937;   /* Charcoal — primary brand mark */
  --brand-blue: #0EA5E9;   /* Bright sky-blue — accent */

  /* ── Surface ── */
  --bg:      #f8fafc;
  --bg-1:    #f1f5f9;   /* sub-surface tint — used inside cards for "rows" */
  --bg-2:    #e2e8f0;   /* slightly more saturated, used for tracks / hovers */
  --surface: #ffffff;
  --border:     #e2e8f0;
  --border-med: #cbd5e1;
  --hover-bg:   #f1f5f9;

  /* ── Typography ── */
  --text:   #1F2937;
  --text-2: #4B5563;
  --text-3: #6B7280;
  --text-4: #9CA3AF;

  /* ── Accent ── */
  --accent:    var(--brand-blue);
  --accent-hi: #0284C7;
  --focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.18);

  /* ── Nav (light, matches logo background) ── */
  --nav-bg:           var(--surface);
  --nav-text:         var(--text-3);
  --nav-text-active:  var(--text);
  --nav-hover-bg:     var(--hover-bg);
  --nav-border:       var(--border);

  /* ── Semantic ── */
  --status-Open-bg:        #e0f2fe; --status-Open-fg:        #0369a1;
  --status-InProgress-bg:  #fef3c7; --status-InProgress-fg:  #92400e;
  --status-Resolved-bg:    #dcfce7; --status-Resolved-fg:    #166534;
  --status-Closed-bg:      #f1f5f9; --status-Closed-fg:      #475569;
  --priority-Critical-bg:  #fee2e2; --priority-Critical-fg:  #991b1b;
  --priority-High-bg:      #ffedd5; --priority-High-fg:      #9a3412;
  --priority-Medium-bg:    #e0f2fe; --priority-Medium-fg:    #0369a1;
  --priority-Low-bg:       #f1f5f9; --priority-Low-fg:       #475569;

  /* ── Shape & motion ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);   /* smooth, slightly springy */
  --transition: 0.18s var(--ease);
  --transition-slow: 0.32s var(--ease);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: var(--font);

  /* ── Misc surfaces (dark-mode overridable) ── */
  --comment-bg:    var(--bg);
  --th-bg:         var(--bg);
  --backdrop:      rgba(15, 23, 42, 0.55);
  /* Refined shadow scale — multi-layer for depth without heaviness */
  --shadow-sm:     0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-card:   0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
  --shadow-md:     0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg:     0 10px 20px -5px rgba(15, 23, 42, 0.10), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
  --shadow-modal:  0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -6px rgba(0, 0, 0, 0.12);
  --watermark-filter: none;
  --watermark-opacity: 0.04;
}

/* ── Dark mode ───────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg:      #0F172A;
  --bg-1:    #172033;   /* slightly raised vs --bg, distinct from --surface */
  --bg-2:    #243044;   /* hover / track surface */
  --surface: #1E293B;
  --border:     #334155;
  --border-med: #475569;
  --hover-bg:   #334155;

  --text:   #F1F5F9;
  --text-2: #CBD5E1;
  --text-3: #94A3B8;
  --text-4: #64748B;

  --focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.28);

  /* Keep nav light so the logo's white background still blends */
  --nav-bg:           #ffffff;
  --nav-text:         #6B7280;
  --nav-text-active:  #1F2937;
  --nav-hover-bg:     #f3f4f6;
  --nav-border:       #e5e7eb;

  /* Status / priority — muted for dark surfaces */
  --status-Open-bg:        #0c2845; --status-Open-fg:        #93c5fd;
  --status-InProgress-bg:  #3f2d0a; --status-InProgress-fg:  #fbbf24;
  --status-Resolved-bg:    #0e2a1b; --status-Resolved-fg:    #86efac;
  --status-Closed-bg:      #1e293b; --status-Closed-fg:      #94a3b8;
  --priority-Critical-bg:  #3b0d0d; --priority-Critical-fg:  #fca5a5;
  --priority-High-bg:      #3b1f08; --priority-High-fg:      #fdba74;
  --priority-Medium-bg:    #0c2845; --priority-Medium-fg:    #93c5fd;
  --priority-Low-bg:       #1e293b; --priority-Low-fg:       #94a3b8;

  --comment-bg:    #172030;
  --th-bg:         #172030;
  --backdrop:      rgba(0, 0, 0, 0.65);
  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.20), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-card:   0 1px 2px rgba(0, 0, 0, 0.20), 0 4px 12px rgba(0, 0, 0, 0.28);
  --shadow-md:     0 4px 6px -1px rgba(0, 0, 0, 0.30), 0 2px 4px -2px rgba(0, 0, 0, 0.20);
  --shadow-lg:     0 10px 20px -5px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.30);
  --shadow-modal:  0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 12px 24px -6px rgba(0, 0, 0, 0.4);
  --watermark-filter: invert(1);
  --watermark-opacity: 0.04;
}

/* Inter — modern, neutral, highly legible. Falls back to system fonts. */
@import url('https://rsms.me/inter/inter.css');
@supports (font-variation-settings: normal) {
  :root { --font: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';  /* Inter's small refinements */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Faint brand watermark behind all content */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('DC2.png') no-repeat center center;
  background-size: min(60vmin, 640px) auto;
  opacity: var(--watermark-opacity);
  filter: var(--watermark-filter);
  pointer-events: none;
  z-index: 0;
}
body.no-watermark::before { display: none; }
.container { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }

/* ── Animations ── */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.shake { animation: shake 0.4s ease; }

/* ── Nav ─────────────────────────────────────────────────── */
nav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.nav-brand {
  font-size: 15px;
  font-weight: 600;
  color: var(--nav-text-active);
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo {
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
}
/* Secondary nav (Dashboard / Employees / Department / Workspace etc.)
 * Mirrors .nav-buttons so the two segmented controls read as siblings.
 * Same pill container + button styling — the grouping conveys hierarchy
 * (primary content on the left, admin pages on the right). */
.nav-links {
  display: inline-flex;
  align-items: center;
  background: var(--hover-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
  margin-left: 16px;          /* sits next to the primary nav-buttons */
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);       /* matches .nav-btn inactive color */
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 550;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
html[data-theme="dark"] .nav-links a.active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Nav segmented control (Tickets / Reports) — visually a single unit */
.nav-buttons {
  display: inline-flex;
  align-items: center;
  background: var(--hover-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
  margin-left: 16px;
}
.nav-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  background: transparent;
  border: none;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.nav-btn:hover { color: var(--text); }
.nav-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
html[data-theme="dark"] .nav-btn.active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.nav-spacer { flex: 1; }

/* ── Layout ──────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px;
  animation: fadeIn 0.2s ease;
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.page-title {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ── Stats ───────────────────────────────────────────────── */
.stats { display: flex; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.stat-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  min-width: 130px;
  flex: 1 1 auto;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 80%);
  opacity: 0;
  transition: opacity var(--transition);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-med);
}
.stat-card:hover::before { opacity: 1; }
.stat-value {
  font-size: 30px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat-label {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 550;
}

/* ── Filters ─────────────────────────────────────────────── */
.filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filters select,
.filters input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: inherit;
}
.filters select:focus,
.filters input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.filters input[type="search"] { flex: 1; min-width: 180px; }

/* ── Table ───────────────────────────────────────────────── */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
table { width: 100%; border-collapse: collapse; }
thead { background: var(--th-bg); }
th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td {
  padding: 13px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tbody tr {
  cursor: pointer;
  transition: background var(--transition);
  animation: fadeIn 0.2s ease;
}
tbody tr:hover { background: var(--bg); }

.ticket-id    { color: var(--text-4); font-size: 12px; font-weight: 500; }
.ticket-title { font-weight: 500; max-width: 340px; }
.ticket-date  { color: var(--text-4); font-size: 12px; white-space: nowrap; }
.text-muted   { color: var(--text-4); }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: -0.005em;
  line-height: 1.4;
}
/* Category badge — colored by inline style from the category's `color` field */
.cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid;
}
.cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Due-date pills shown next to ticket titles */
.badge-due       { background:#E0F2FE; color:#075985; margin-left:8px; }
.badge-overdue   { background:#FEE2E2; color:#991B1B; margin-left:8px; }
[data-theme="dark"] .badge-due     { background:#0c2433; color:#7dd3fc; }
[data-theme="dark"] .badge-overdue { background:#3a1414; color:#fca5a5; }

/* Overdue row gets a subtle left accent so it stands out at a glance */
tr.row-overdue td:first-child { box-shadow: inset 3px 0 0 #DC2626; }

/* Sortable table headers */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--accent, #3B82F6); }
th.sort-active { color: var(--accent, #3B82F6); }
th .sort-ind { font-size: 10px; opacity: 0.8; }

/* Date-range labels in the filter bar (label + inline input) */
.filters .date-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-4, #64748b);
}
.filters .date-label input[type="date"] {
  font-size: 12px;
  padding: 6px 8px;
}

/* Last-updated chip in the filter bar */
.last-updated {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-4, #94a3b8);
  align-self: center;
}

/* Keyboard-shortcut help table */
#shortcut-help kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  text-align: center;
  border: 1px solid var(--border, #cbd5e1);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg-1, #f8fafc);
}
#shortcut-help td { padding: 6px 8px; }

/* ── Markdown rendering ─────────────────────────────────── */
.markdown-body p          { margin: 0 0 8px 0; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body ul         { margin: 6px 0 8px 18px; padding: 0; }
.markdown-body li         { margin: 2px 0; }
.markdown-body code       { font-family: var(--font-mono, monospace); font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--bg-1, #f1f5f9); }
.markdown-body pre        { background: var(--bg-1, #f1f5f9); border-radius: 6px; padding: 8px 10px; overflow-x: auto; margin: 6px 0; }
.markdown-body pre code   { background: transparent; padding: 0; font-size: 12px; }
.markdown-body blockquote { margin: 4px 0; padding: 2px 10px; border-left: 3px solid var(--border, #cbd5e1); color: var(--text-4, #64748b); }
.markdown-body a          { color: var(--accent, #3B82F6); text-decoration: underline; }
.markdown-body .md-img    { max-width: 100%; max-height: 280px; border-radius: 6px; border: 1px solid var(--border); margin: 6px 0; display: block; }

/* ── Attachments ────────────────────────────────────────── */
.att-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.att-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-1, #f8fafc);
  overflow: hidden;
  font-size: 12px;
}
.att-img img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  background: var(--bg-2, #e2e8f0);
}
.att-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}
.att-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.att-size { color: var(--text-4, #94a3b8); font-size: 11px; white-space: nowrap; }
.att-file .att-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  text-decoration: none;
  color: var(--text);
}
.att-icon { font-size: 18px; }
.att-del {
  background: transparent;
  border: 0;
  color: var(--text-4, #94a3b8);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}
.att-del:hover { color: #dc2626; background: rgba(220, 38, 38, 0.08); }
.att-file { display: flex; align-items: center; }
.att-file .att-del { margin-right: 6px; }

.att-uploader {
  display: block;
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  color: var(--text-4, #64748b);
  transition: border-color 0.15s, background 0.15s;
}
.att-uploader:hover, .att-uploader.drag {
  border-color: var(--accent, #3B82F6);
  background: rgba(59, 130, 246, 0.05);
  color: var(--text);
}
.att-uploader-text { display: block; font-size: 13px; }
.att-uploader-hint { display: block; font-size: 11px; margin-top: 4px; opacity: 0.75; }

/* ── Department throughput card ───────────────────────────── */
.date-range { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.date-range .date-label { font-size: 12px; color: var(--text-4, #64748b); display: inline-flex; align-items: center; gap: 6px; }
.date-range input[type="date"] { font-size: 12px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }

.dep-grid { display: flex; flex-direction: column; gap: 10px; }
.dep-row {
  display: grid;
  grid-template-columns: 180px 1fr 110px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.dep-row:hover { border-color: var(--border-med); box-shadow: var(--shadow-sm); }
.dep-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.dep-bars { display: flex; flex-direction: column; gap: 4px; }
.dep-bar-row { display: grid; grid-template-columns: 60px 1fr 32px; gap: 8px; align-items: center; font-size: 11px; }
.dep-bar-label { color: var(--text-4, #64748b); }
.dep-bar       { background: var(--hover-bg); border-radius: 999px; height: 10px; overflow: hidden; }
.dep-bar-fill  { display: block; height: 100%; border-radius: 999px; transition: width 0.6s var(--ease); }
.dep-bar-created  { background: linear-gradient(90deg, #3B82F6 0%, #2563EB 100%); }
.dep-bar-resolved { background: linear-gradient(90deg, #10B981 0%, #059669 100%); }
.dep-bar-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.dep-ttr {
  display: flex; flex-direction: column; align-items: flex-end;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.dep-ttr-label { font-size: 10px; color: var(--text-4, #64748b); text-transform: uppercase; letter-spacing: 0.5px; }
.dep-ttr-val   { font-weight: 700; font-size: 16px; color: var(--text); }

/* ── Time-to-resolve leaderboard ──────────────────────────── */
.ttr-list { display: flex; flex-direction: column; gap: 6px; }
.ttr-header { font-size: 12px; color: var(--text-4, #64748b); margin-bottom: 4px; }
.ttr-row {
  display: grid;
  grid-template-columns: 1fr 100px 70px 70px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.ttr-row:hover { border-color: var(--border-med); box-shadow: var(--shadow-sm); }
.ttr-name  { font-weight: 600; }
.ttr-count { font-size: 11px; color: var(--text-4, #64748b); }
.ttr-avg   { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ttr-delta { text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.ttr-fast .ttr-delta { color: #059669; }
.ttr-slow .ttr-delta { color: #dc2626; }
.ttr-mid  .ttr-delta { color: var(--text-4, #64748b); }

/* ── Workspace Designer ───────────────────────────────────── */
.ws-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.ws-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 800px) { .ws-grid, .ws-2col { grid-template-columns: 1fr; } }

.ws-color-row { display: flex; gap: 8px; align-items: center; }
.ws-color { width: 56px; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: 6px; background: transparent; cursor: pointer; }

.ws-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ws-switch input { transform: scale(1.1); }

.ws-orderable { display: flex; flex-direction: column; gap: 4px; }
.ws-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-1, #f8fafc);
  position: relative;
  transition: transform 0.15s var(--ease), opacity 0.15s var(--ease), box-shadow var(--transition);
}
.ws-row:hover { box-shadow: var(--shadow-sm); }
.ws-mv {
  width: 28px; height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  font-size: 12px;
  transition: background var(--transition), border-color var(--transition);
}
.ws-mv:hover:not(:disabled) { background: var(--bg-2); border-color: var(--border-med); }
.ws-mv:disabled { opacity: 0.35; cursor: not-allowed; }
.ws-check { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; flex: 1; }

/* Drag handle + drop indicator */
.ws-drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 24px;
  color: var(--text-4);
  font-weight: 700;
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
  border-radius: var(--radius-xs);
  transition: color var(--transition), background var(--transition);
}
.ws-row:hover .ws-drag, .ws-status-row:hover .ws-drag { color: var(--text-3); background: var(--bg-2); }
.ws-drag:active { cursor: grabbing; }
.ws-row.dragging, .ws-status-row.dragging {
  opacity: 0.5;
  transform: scale(0.98);
  box-shadow: var(--shadow-lg);
}
.ws-row.drop-before, .ws-status-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.ws-row.drop-after,  .ws-status-row.drop-after  { box-shadow: inset 0 -2px 0 var(--accent); }

.ws-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 800px) { .ws-nav-grid { grid-template-columns: 1fr; } }
.ws-nav-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-1, #f8fafc); }
.ws-nav-input { font-size: 12px; padding: 6px 8px; }

/* ── Workspace Permissions matrix ──────────────────────────── */
.ws-perms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 800px) { .ws-perms-grid { grid-template-columns: 1fr; } }
.ws-perm-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--bg);
}
.ws-perm-title {
  font-size: 11px;
  font-weight: 650;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.ws-perm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 4px 0;
  cursor: pointer;
}
.ws-perm-row input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }
.ws-perm-row:has(input:disabled) { opacity: 0.65; cursor: not-allowed; }

/* ── Workspace Department allowlist ────────────────────────── */
.ws-dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.ws-dept-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  background: var(--surface);
  transition: border-color var(--transition);
}
.ws-dept-item:hover { border-color: var(--border-med); }
.ws-dept-item .cat-dot { width: 10px; height: 10px; }

/* ── Workspace Ticket Policy ───────────────────────────────── */
.ws-policy-row {
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: var(--surface);
}
.ws-policy-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; flex: 1; }
.ws-policy-row input[type="color"] {
  width: 40px; height: 28px; padding: 2px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: transparent; cursor: pointer;
}
.ws-statuses { display: flex; flex-direction: column; gap: 6px; }
.ws-status-row {
  display: grid;
  /* 7 columns — must match the 7 children in workspace.html:
     drag | ▲ | ▼ | name | color | done | × */
  grid-template-columns: 20px 28px 28px minmax(0, 1fr) 40px auto 28px;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
/* min-width:0 lets the input shrink inside the 1fr grid track instead
   of clinging to its content-width default. */
.ws-status-name { font-size: 13px; padding: 6px 8px; min-width: 0; }
.ws-status-color {
  width: 40px; height: 28px; padding: 2px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: transparent; cursor: pointer;
}
.ws-status-done {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap;
  padding: 0 6px;
  cursor: pointer;
}
.ws-status-del {
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text-4);
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.ws-status-del:hover:not(:disabled) { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.ws-status-del:disabled { opacity: 0.4; cursor: not-allowed; }

.ws-policy-due { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.ws-policy-due-row {
  display: grid;
  grid-template-columns: 90px 1fr 36px;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.ws-policy-due-row input[type="number"] { padding: 6px 8px; font-size: 13px; }

.btn-pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}

/* Welcome banner on the dashboard */
.welcome-banner {
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--text);
}

/* Ticket detail: compact + comments-below modes (workspace-driven) */
body.ticket-compact .meta-item label   { font-size: 10px; }
body.ticket-compact .meta-grid         { gap: 8px 12px; }
body.ticket-compact .comment           { padding: 8px 10px; font-size: 12.5px; }
body.ticket-compact .ticket-detail h1  { font-size: 18px; }
body.ticket-compact .card              { padding: 12px 14px; }
body.ticket-comments-below .ticket-detail {
  grid-template-columns: 1fr;
}

/* ── Analytics page ────────────────────────────────────────── */
.an-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.an-page-header .date-range { padding-top: 4px; }
.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 800px) { .an-grid { grid-template-columns: 1fr; } }
.an-grid .an-wide { grid-column: 1 / -1; }

/* ── KPI strip ─────────────────────────────────────────────── */
.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.an-kpi {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface) 0%, var(--hover-bg) 200%);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.an-kpi::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 80%);
  opacity: 0.5;
}
.an-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-med); }
.an-kpi-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.an-kpi-num {
  font-size: 30px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.an-kpi-lbl {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 550;
  margin-top: 8px;
}
.an-spark { width: 80px; height: 28px; flex-shrink: 0; opacity: 0.85; }
.kpi-good { color: #059669; }
.kpi-bad  { color: #dc2626; }
html[data-theme="dark"] .kpi-good { color: #34d399; }
html[data-theme="dark"] .kpi-bad  { color: #f87171; }

/* ── Trend line chart ──────────────────────────────────────── */
.an-chart { display: block; width: 100%; height: auto; }
.an-chart-trend { max-height: 280px; }
.an-line { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: drawLine 1.2s var(--ease) forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.an-dot { opacity: 0; animation: fadeIn 0.4s ease forwards; animation-delay: 1s; transition: r 0.18s var(--ease); }
.an-dot:hover { r: 4; cursor: pointer; }

.an-legend { display: flex; gap: 16px; align-items: center; font-size: 12px; margin-bottom: 8px; color: var(--text-2); }
.an-legend-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.an-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ── Donut chart ───────────────────────────────────────────── */
.an-donut { display: block; width: 100%; max-width: 220px; height: auto; margin: 4px auto 0; }
.an-donut-seg {
  stroke-dasharray: 0 999;
  animation: donutFill 0.9s var(--ease) forwards;
  animation-delay: var(--delay, 0ms);
  transition: stroke-width 0.18s var(--ease), filter 0.18s var(--ease);
}
.an-donut-seg:hover { stroke-width: 26; filter: brightness(1.1); cursor: pointer; }
@keyframes donutFill {
  from { stroke-dasharray: 0 999; }
}
.an-donut-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.an-legend-row {
  display: grid;
  grid-template-columns: 14px 1fr 40px 40px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  transition: background var(--transition);
}
.an-legend-row:hover { background: var(--hover-bg); }
.an-legend-row[data-zero="true"] { opacity: 0.4; }
.an-legend-label { color: var(--text); font-weight: 500; }
.an-legend-val   { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text); }
.an-legend-pct   { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-4); font-size: 11px; }

/* ── Aging buckets — gradient bars, animated entry ─────────── */
.an-aging { display: flex; flex-direction: column; gap: 10px; }
.an-aging-row {
  display: grid;
  grid-template-columns: 130px 1fr 70px;
  gap: 14px;
  align-items: center;
  font-size: 12px;
}
.an-aging-lbl { color: var(--text-2); font-weight: 500; }
.an-aging-bar {
  background: var(--hover-bg);
  border-radius: 999px;
  height: 18px;
  overflow: hidden;
  position: relative;
}
.an-aging-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  width: 0;
  animation: barGrow 0.9s var(--ease) forwards;
  animation-delay: var(--delay, 0ms);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
@keyframes barGrow {
  from { width: 0; }
}
.an-aging-num {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px;
}
.an-aging-count { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text); font-size: 14px; }
.an-aging-share { font-variant-numeric: tabular-nums; color: var(--text-4); font-size: 11px; }

/* ── Heatmap ───────────────────────────────────────────────── */
.an-heatmap {
  display: grid;
  grid-template-columns: 44px repeat(24, 1fr);
  gap: 3px;
  font-size: 10px;
  color: var(--text-4);
}
.an-hm-hour { text-align: center; padding: 2px 0; font-variant-numeric: tabular-nums; }
.an-hm-day  { padding: 2px 6px; text-align: right; align-self: center; font-weight: 500; }
.an-hm-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  transition: transform 0.15s var(--ease);
  cursor: pointer;
}
.an-hm-cell:hover { transform: scale(1.4); z-index: 2; outline: 2px solid var(--accent); }
.an-hm-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  gap: 12px;
}
.an-hm-scale {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}
.an-hm-scale-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/* ── Top reporters ─────────────────────────────────────────── */
.an-rep-list { display: flex; flex-direction: column; gap: 8px; }
.an-rep-row {
  display: grid;
  grid-template-columns: 22px 1fr 1fr 32px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.an-rep-rank {
  font-size: 11px;
  color: var(--text-4);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.an-rep-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: 500; }
.an-rep-bar {
  background: var(--hover-bg);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.an-rep-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hi) 100%);
  border-radius: 999px;
  width: 0;
  animation: barGrow 0.9s var(--ease) forwards;
  animation-delay: var(--delay, 0ms);
}
.an-rep-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text); }

/* ── Reopen rate ring chart ────────────────────────────────── */
.an-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.an-ring { width: 180px; height: 180px; display: block; }
.an-ring-arc {
  stroke-dasharray: 0 999;
  animation: ringFill 1s var(--ease) forwards;
}
@keyframes ringFill { from { stroke-dasharray: 0 999; } }
.an-ring-meta {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--text-2);
}
.an-ring-meta strong { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 650; }

/* ── Search ────────────────────────────────────────────────── */
.search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 14px 4px 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-bar:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.search-bar-icon { color: var(--text-4); flex-shrink: 0; }
.search-bar-input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
  font-size: 15px !important;
  flex: 1;
}
.search-bar-meta { color: var(--text-4); font-size: 12px; white-space: nowrap; }

.search-list { display: flex; flex-direction: column; gap: 8px; }
.search-hit {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform 0.05s var(--ease);
}
.search-hit:hover { border-color: var(--border-med); box-shadow: var(--shadow-sm); }
.search-hit:active { transform: translateY(0.5px); }
.search-hit-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 11px;
}
.search-hit-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 4px;
}
.search-hit-desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.search-hit mark {
  background: rgba(245, 158, 11, 0.28);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 600;
}
html[data-theme="dark"] .search-hit mark { background: rgba(245, 158, 11, 0.38); }
.search-assignee {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
}
.search-comment-on { font-size: 11px; color: var(--text-4); font-style: italic; }
.search-time { font-size: 11px; color: var(--text-4); margin-left: auto; }

/* ── Activity feed ─────────────────────────────────────────── */
.act-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.act-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  font-family: inherit;
}
.act-chip:hover:not(:disabled) { background: var(--hover-bg); color: var(--text); }
.act-chip.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.act-chip-n {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--text-3);
}
.act-chip.on .act-chip-n { background: rgba(255,255,255,0.25); color: #fff; }
.act-tone-warn   { border-color: rgba(245, 158, 11, 0.35); }
.act-tone-danger { border-color: rgba(220, 38, 38, 0.35); }

.act-list { display: flex; flex-direction: column; gap: 6px; }
.act-day-header {
  font-size: 11px;
  font-weight: 650;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 12px 0 4px;
  padding: 6px 12px;
  background: var(--bg-1);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}
.act-row {
  display: grid;
  grid-template-columns: 48px 24px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.act-row:hover { border-color: var(--border-med); box-shadow: var(--shadow-sm); }
.act-tone-danger.act-row { border-left: 3px solid #DC2626; }
.act-tone-warn.act-row   { border-left: 3px solid #F59E0B; }
.act-time {
  font-variant-numeric: tabular-nums;
  color: var(--text-4);
  font-size: 11px;
  font-family: var(--font-mono);
}
.act-icon { font-size: 16px; text-align: center; }
.act-body { color: var(--text-2); }
.act-actor { font-weight: 600; color: var(--text); }
.act-summary { margin-left: 4px; }
.act-on { margin-left: 4px; color: var(--text-3); }
.act-ticket { color: var(--accent); font-weight: 500; }
.act-ticket:hover { text-decoration: underline; }
.act-ticket-deleted { color: var(--text-4); font-style: italic; }

/* ── Employee PIN badge + actions ──────────────────────────── */
.emp-pin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.emp-pin-on  { background: #DCFCE7; color: #166534; }
.emp-pin-off { background: var(--hover-bg); color: var(--text-4); }
html[data-theme="dark"] .emp-pin-on  { background: rgba(16, 185, 129, 0.18); color: #86EFAC; }
html[data-theme="dark"] .emp-pin-off { background: var(--hover-bg); color: var(--text-4); }
.emp-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ── System banner ─────────────────────────────────────────── */
.sys-banner {
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid transparent;
  letter-spacing: -0.005em;
  position: relative;
  z-index: 60;
}
.sys-banner-info    { background: #DBEAFE; color: #1E40AF; border-bottom-color: #BFDBFE; }
.sys-banner-success { background: #D1FAE5; color: #065F46; border-bottom-color: #A7F3D0; }
.sys-banner-warning { background: #FEF3C7; color: #92400E; border-bottom-color: #FDE68A; }
.sys-banner-danger  { background: #FEE2E2; color: #991B1B; border-bottom-color: #FECACA; }
html[data-theme="dark"] .sys-banner-info    { background: #1E3A8A; color: #BFDBFE; border-bottom-color: #1E40AF; }
html[data-theme="dark"] .sys-banner-success { background: #064E3B; color: #A7F3D0; border-bottom-color: #065F46; }
html[data-theme="dark"] .sys-banner-warning { background: #78350F; color: #FDE68A; border-bottom-color: #92400E; }
html[data-theme="dark"] .sys-banner-danger  { background: #7F1D1D; color: #FECACA; border-bottom-color: #991B1B; }

/* ── Read-only mode (non-manager) ──────────────────────────── */
/* Hide every primary action that mutates state for non-managers. */
body.read-only .btn-primary,
body.read-only .btn-danger,
body.read-only .btn-action,
body.read-only #f-clear,
body.read-only [onclick*="openModal"],
body.read-only [onclick*="deleteTicket"],
body.read-only [onclick*="quickAssign"],
body.read-only [onclick*="patch("],
body.read-only [onclick*="saveTitle"],
body.read-only [onclick*="saveDesc"],
body.read-only [onclick*="addComment"],
body.read-only [onclick*="delComment"],
body.read-only [onclick*="delAttachment"],
body.read-only [onclick*="uploadAttachmentInput"],
body.read-only #new-form,
body.read-only #c-body,
body.read-only .att-uploader {
  display: none !important;
}
body.read-only::before {
  content: 'Read-only mode — writes are disabled';
  display: block;
  background: var(--text-3);
  color: var(--bg);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  padding: 4px;
  position: sticky;
  top: 0;
  z-index: 70;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Sign-in welcome message (workspace-driven) */
.signin-welcome {
  font-size: 13px;
  color: var(--text-3, #475569);
  margin: -4px 0 16px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  background: var(--bg-1, #f8fafc);
  border-radius: 6px;
}

.status-Open          { background: var(--status-Open-bg);        color: var(--status-Open-fg); }
.status-In-Progress   { background: var(--status-InProgress-bg);  color: var(--status-InProgress-fg); }
.status-Resolved      { background: var(--status-Resolved-bg);    color: var(--status-Resolved-fg); }
.status-Closed        { background: var(--status-Closed-bg);      color: var(--status-Closed-fg); }
.priority-Critical    { background: var(--priority-Critical-bg);  color: var(--priority-Critical-fg); }
.priority-High        { background: var(--priority-High-bg);      color: var(--priority-High-fg); }
.priority-Medium      { background: var(--priority-Medium-bg);    color: var(--priority-Medium-fg); }
.priority-Low         { background: var(--priority-Low-bg);       color: var(--priority-Low-fg); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  font-family: inherit;
  white-space: nowrap;
  user-select: none;
}
.btn:active { transform: translateY(0.5px) scale(0.99); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary   {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hi) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent-hi) 100%);
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-secondary {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background: var(--hover-bg);
  border-color: var(--border-med);
  color: var(--text);
}
.btn-danger    {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}
.btn-danger:hover { background: #fee2e2; border-color: #fca5a5; }
html[data-theme="dark"] .btn-danger {
  background: rgba(220, 38, 38, 0.12);
  color: #fca5a5;
  border-color: rgba(220, 38, 38, 0.3);
}
html[data-theme="dark"] .btn-danger:hover {
  background: rgba(220, 38, 38, 0.2);
}
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: var(--radius-xs); }

.btn-icon {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-3);
  padding: 7px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-icon:hover { background: var(--hover-bg); color: var(--text); border-color: var(--border-med); }
.btn-icon svg { display: block; }

/* Theme-toggle icon swap */
.theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-icon-dark  { display: block; }

/* ── Role gating ─────────────────────────────────────────── */
.manager-only   { display: none !important; }
.moderator-only { display: none !important; }
body.role-manager   .manager-only   { display: revert !important; }
body.role-manager   .moderator-only,
body.role-moderator .moderator-only { display: revert !important; }
/* Inline-flex variants for buttons inside flex containers */
body.role-manager   .manager-only.btn,
body.role-manager   .manager-only.btn-icon { display: inline-flex !important; }
body.role-manager   .moderator-only.btn,
body.role-moderator .moderator-only.btn { display: inline-flex !important; }

/* ── Column hiding rules for the ticket table ───────────── */
/* "Assignee" column is redundant when an employee is on the "My Tickets" tab */
body[data-active-tab="mine"] th.col-assignee,
body[data-active-tab="mine"] td.col-assignee { display: none; }
/* "Delete" column is empty for employees — hide the whole column from them */
body.role-employee th.col-delete,
body.role-employee td.col-delete { display: none; }

/* ── User chip (nav identity display + Sign Out button) ─── */
#user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.user-chip-id {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hover-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.user-chip-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}
.user-chip-role {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.role-manager-badge   { background: var(--accent); }
.role-moderator-badge { background: #8B5CF6; }   /* purple — distinct from manager blue */

/* ── Manager Dashboard ───────────────────────────────────── */
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.admin-grid-full { grid-column: 1 / -1; }
@media (max-width: 800px) {
  .admin-grid { grid-template-columns: 1fr; }
}
.card-title-count {
  color: var(--text-4);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

/* Workload bars */
.workload-list { display: flex; flex-direction: column; gap: 10px; }
.workload-row {
  display: grid;
  grid-template-columns: 140px 1fr 64px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.workload-name {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workload-bar {
  display: flex;
  height: 10px;
  background: var(--hover-bg);
  border-radius: 999px;
  overflow: hidden;
}
.workload-seg { height: 100%; transition: width 0.25s ease; }
.seg-open      { background: var(--status-Open-fg); }
.seg-progress  { background: var(--status-InProgress-fg); }
.workload-counts {
  text-align: right;
  color: var(--text-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.workload-active {
  color: var(--text);
  font-weight: 600;
}
.workload-total { color: var(--text-4); }

/* Mini-row list (unassigned queue + recent activity) */
.mini-list { display: flex; flex-direction: column; gap: 8px; }
.mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  animation: fadeIn 0.2s ease;
}
.mini-row:hover { background: var(--hover-bg); border-color: var(--border-med); }
.mini-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mini-row-title {
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mini-row-assignee {
  font-size: 12px;
  color: var(--text-2);
}
/* Higher specificity than .form-control (which is defined later in this file) */
.mini-row .mini-row-assign {
  width: 140px;
  height: 30px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
}
.mini-row .mini-row-assign:hover  { border-color: var(--border-med); }
.mini-row .mini-row-assign:focus  { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }

/* ── Employee Report (Reports page) ───────────────────────── */
.delta {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.delta-up   { background: var(--status-Resolved-bg);   color: var(--status-Resolved-fg); }
.delta-down { background: var(--priority-Critical-bg); color: var(--priority-Critical-fg); }
.delta-zero { background: var(--hover-bg);             color: var(--text-3); }
.report-footnote {
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-4);
  line-height: 1.5;
}

/* Report toolbar (title + view toggle) */
.report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.view-toggle {
  display: inline-flex;
  background: var(--hover-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--transition), color var(--transition);
  font-family: inherit;
}
.view-btn:hover { color: var(--text); }
.view-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
html[data-theme="dark"] .view-btn.active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ── Stats view (per-employee number cards) ──────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.stats-emp {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  animation: fadeIn 0.2s ease;
}
.stats-emp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-emp-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 1fr));
  gap: 4px;
}
.stat-cell {
  text-align: center;
  padding: 4px 8px;
}
.stat-num-big {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-num-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-4);
  font-weight: 600;
  margin-top: 4px;
}
.stat-cell .delta {
  margin-left: 0;
  margin-top: 6px;
}
.stats-avg-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 16px;
  margin-top: 12px;
  border-top: 1px solid var(--border-med);
}
.stats-avg-row .stats-avg-label {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stats-avg-row .stat-cell { min-width: 80px; }
.stats-avg-row .stat-num-big { font-size: 18px; }

/* ── Graph view: container + period cards ────────────────── */
.graph-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
@media (max-width: 800px) {
  .graph-grid { grid-template-columns: 1fr; }
}
.graph-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  animation: fadeIn 0.2s ease;
}
.graph-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.graph-avg-label {
  font-size: 10px;
  color: var(--text-4);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* ── Vertical column chart ───────────────────────────────── */
.column-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 8px;
  height: 160px;
  padding: 26px 8px 0;     /* room for value label on a 100% bar */
  border-bottom: 1px solid var(--border-med);
  overflow: visible;
}
.column {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  flex: 1;
  max-width: 56px;
  z-index: 2;
}
/* Value label is nested inside .column-bar and absolutely positioned just
 * above the bar's top edge — so it follows the bar's height (not the
 * column's full height). Previously labels all hovered at the top of the
 * chart regardless of bar value. */
.column-value {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  pointer-events: none;
  white-space: nowrap;
}
.column-bar {
  position: relative;
  width: 62%;
  max-width: 32px;
  background: var(--text-4);
  border-radius: 4px 4px 0 0;
  transition: height 0.4s ease;
  min-height: 2px;
}
.column-bar.above-avg { background: var(--status-Resolved-fg); }
.column-bar.below-avg { background: var(--text-4); }
.column-avg-line {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 0;
  border-top: 2px dashed var(--text-3);
  pointer-events: none;
  z-index: 1;
}
.column-axis {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  padding: 8px 8px 0;
}
.column-axis > div {
  flex: 1;
  max-width: 56px;
  text-align: center;
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Legend */
.graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  font-size: 11px;
  color: var(--text-3);
}
.graph-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.graph-swatch {
  display: inline-block;
  width: 12px;
  height: 10px;
  border-radius: 999px;
}
.swatch-above { background: var(--status-Resolved-fg); }
.swatch-below { background: var(--text-4); }
.swatch-avg {
  background: transparent;
  border-left: 2px dashed var(--text-3);
  border-radius: 0;
  width: 2px;
  height: 12px;
}

/* ── Dashboard tabs (employee My/All toggle on /) ───────── */
.tabs {
  display: inline-flex;
  background: var(--hover-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
  margin-bottom: 16px;
}
.tab {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  font-family: inherit;
  border-radius: 4px;
  transition: background var(--transition), color var(--transition);
}
.tab:hover { color: var(--text); }
.tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
html[data-theme="dark"] .tab.active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ── Sign-in page ────────────────────────────────────────── */
.signin-body { min-height: 100vh; display: flex; }
.signin-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  position: relative;
  z-index: 1;
}
.signin-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  animation: slideUp 0.25s ease;
}
.signin-logo {
  display: block;
  height: 56px;
  width: auto;
  margin: 0 auto 12px;
}
.signin-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}
.signin-subtitle {
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  margin-bottom: 20px;
}
.signin-cta { width: 100%; justify-content: center; margin-top: 6px; }
.signin-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--text-4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.signin-divider::before,
.signin-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.signin-setup-note {
  background: var(--hover-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 16px;
}
.signin-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-4);
  margin-top: 16px;
}
.signin-hint code {
  background: var(--hover-bg);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
}

/* Subtle credit beneath the sign-in card */
.signin-credit {
  font-size: 11px;
  color: var(--text-4);
  letter-spacing: 0.04em;
  text-align: center;
  opacity: 0.7;
  transition: opacity var(--transition);
  user-select: none;
}
.signin-credit:hover { opacity: 1; }
.signin-credit-name {
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ── Modal ───────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.modal-backdrop.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-modal);
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  transition: transform 0.32s var(--ease), opacity 0.2s var(--ease);
}
.modal-backdrop.open .modal { transform: translateY(0) scale(1); opacity: 1; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.modal-title {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--text);
}
.modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-4); font-size: 20px; line-height: 1; padding: 2px 6px;
  border-radius: 4px;
}
.modal-close:hover { color: var(--text-2); background: var(--hover-bg); }

/* ── Forms ───────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom: 5px; }
.form-control {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  outline: none;
  font-family: inherit;
  font-feature-settings: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-control:hover { border-color: var(--border-med); }
.form-control:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
textarea.form-control { resize: vertical; min-height: 80px; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.form-hint    { display: block; font-size: 11px; color: var(--text-4); margin-top: -2px; margin-bottom: 5px; }
.form-req     { color: var(--accent); margin-left: 2px; font-weight: 700; }
.form-opt     { color: var(--text-4); font-weight: 400; margin-left: 4px; font-size: 11px; }

/* ── Card ────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.card:hover { box-shadow: var(--shadow-card); }
.card-title {
  font-size: 11px;
  font-weight: 650;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.075em;
  margin-bottom: 16px;
}
.card-title-count { color: var(--text-4); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12px; }
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
  opacity: 0.6;
}

/* View-only notice on ticket detail (non-assignee) */
.ticket-notice {
  background: var(--hover-bg);
  border: 1px solid var(--border-med);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.ticket-notice strong { color: var(--text); }

/* Quick "Start Working / Mark Resolved / Reopen" row on ticket detail */
.ticket-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.btn-action {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
}

/* Card title + inline button row (e.g. "Description  [Edit]") */
.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* ── Ticket Detail ───────────────────────────────────────── */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-3); font-size: 13px; margin-bottom: 16px;
  transition: color var(--transition);
}
.back-link:hover { color: var(--text); }
.ticket-detail {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
  animation: slideUp 0.25s ease;
}
@media (max-width: 800px) {
  .ticket-detail { grid-template-columns: 1fr; }
}
.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.meta-item label {
  font-size: 11px; font-weight: 600; color: var(--text-4);
  display: block; margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.meta-value { font-size: 13px; color: var(--text-2); padding-top: 6px; }

/* ── Comments ────────────────────────────────────────────── */
.comments-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.comment {
  background: var(--comment-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  animation: slideUp 0.2s ease;
}
.comment-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.comment-author { font-size: 12px; font-weight: 600; color: var(--text-2); }
.comment-date   { font-size: 11px; color: var(--text-4); }
.comment-body   { font-size: 13px; color: var(--text); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.comment-delete {
  background: none; border: none; cursor: pointer;
  color: #cbd5e1; padding: 1px 5px; border-radius: 4px; font-size: 14px; line-height: 1;
}
.comment-delete:hover { color: #ef4444; background: #fee2e2; }

/* ── Employees ───────────────────────────────────────────── */
.employee-list { display: flex; flex-direction: column; gap: 8px; }
.employee-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  animation: fadeIn 0.2s ease;
}
.employee-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; flex-shrink: 0;
}
.employee-info { flex: 1; }
.employee-name  { font-weight: 500; }
.employee-email { font-size: 12px; color: var(--text-4); }

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-4);
}
.empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; opacity: 0.7; }
.empty-state p { font-size: 14px; }
.empty-state .empty-hint { font-size: 12px; margin-top: 4px; color: var(--text-4); }
.empty-message { color: var(--text-4); font-size: 13px; text-align: center; padding: 20px; }

/* Color swatch picker (categories form) */
.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.swatch {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform var(--transition);
  outline-offset: 2px;
}
.swatch:hover { transform: scale(1.1); }
.swatch.active {
  border-color: var(--surface);
  box-shadow: 0 0 0 2px var(--text);
}
.cat-color-blob {
  width: 16px; height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 4px;
}

/* ── Toast notifications ─────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 200;
  pointer-events: none;
}
.toast {
  background: var(--text);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  min-width: 200px;
  max-width: 340px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  pointer-events: auto;
}
.toast-success { background: #15803d; }
.toast-error   { background: #dc2626; }
.toast-info    { background: var(--text); }