@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:    #e05a4e;
  --primary-d:  #c94b40;
  --primary-l:  #fef2f1;
  --primary-rgb: 224,90,78;
  --black:      #111111;
  --sidebar:    #ffffff;
  --sidebar-h:  #f5f5f5;
  --bg:         #f8fafc;
  --bg-card:    #ffffff;
  --card:       #ffffff;
  --border:     rgba(0,0,0,0.11);
  --text:       #111111;
  --muted:      #595959;
  --danger:     #dc2626;
  --danger-d:   #b91c1c;
  --danger-l:   #fef2f2;
  --warning:    #f59e0b;
  --warning-text: #92400e;
  --success:    #22c55e;
  --info:       #3b82f6;
  --radius:     12px;
  --radius-sm:  8px;
  --radius-xs:  4px;
  --shadow:     0 2px 16px rgba(0,0,0,0.06);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.10);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.14);
  /* Z-index scale */
  --z-topbar:   50;
  --z-sidebar:  100;
  --z-dropdown: 300;
  --z-drawer:   400;
  --z-bulk:     500;
  --z-modal:    1000;
  --z-search:   2000;
  --z-toast:    9999;
  --z-skip:     10000;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Layout ─────────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 244px; height: 100vh;
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; z-index: var(--z-sidebar);
  transition: width .22s cubic-bezier(.4,0,.2,1);
}
/* Collapsing is faster than expanding for a snappier feel */
body.sidebar-narrow .sidebar { transition: width .14s cubic-bezier(.4,0,.6,1); }
.sidebar-logo {
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.sidebar-logo .logo-title {
  color: var(--text); font-size: 15px; font-weight: 800;
  letter-spacing: -.4px;
  display: flex; align-items: center; gap: 10px;
}
.sidebar-logo .logo-title::before { display: none; } /* replaced by .logo-icon in JS */
.logo-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--primary);
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.sidebar-logo .logo-sub { color: var(--muted); font-size: 11px; margin-top: 2px; }

.sidebar-company {
  padding: 10px 14px; margin: 12px 12px 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted); font-size: 12px; font-weight: 500;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  transition: background .15s;
}
.sidebar-company:hover { background: var(--border); }
.sidebar-company .company-name { color: var(--text); font-weight: 600; font-size: 13px; }

.sidebar-nav {
  flex: 1; min-height: 0; padding: 8px 12px;
  overflow-y: auto; overflow-x: clip;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.nav-section {
  color: var(--muted); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.7px;
  padding: 16px 8px 5px;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
  border-radius: 4px; transition: color .15s;
}
.nav-section:hover { color: var(--text); }
.nav-section:first-child { padding-top: 6px; margin-top: 0; }
.nav-section .section-arrow {
  font-size: 10px; transition: transform .2s; flex-shrink: 0;
}
.nav-section.collapsed .section-arrow { transform: rotate(-90deg); }
.nav-group-items {
  overflow: hidden;
  transition: height .25s ease;
}
.nav-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--radius-sm); color: var(--muted); text-decoration: none;
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .15s, color .15s;
  margin-bottom: 1px;
}
.nav-link:hover { background: var(--bg); color: var(--text); }
.nav-link.active {
  background: rgba(var(--primary-rgb), .10);
  color: var(--primary);
  font-weight: 600;
}
.nav-link.active .icon i { color: var(--primary); }
.nav-link.active:hover { background: rgba(var(--primary-rgb), .15); color: var(--primary); }
.nav-link .icon { width: 18px; text-align: center; font-size: 15px; flex-shrink: 0; }

.sidebar-footer {
  padding: 12px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
}
.sidebar-footer .user-pill { flex: 1; min-width: 0; }
.user-pill {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background .15s;
}
.user-pill:hover { background: var(--bg); }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.user-info .name  { color: var(--text); font-size: 13px; font-weight: 600; }
.user-info .role  { color: var(--muted); font-size: 11px; }

.main { margin-left: 244px; flex: 1; display: flex; flex-direction: column; min-height: 100vh; transition: margin-left .22s ease; }

/* ── Top bar ────────────────────────────────────────────────── */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: sticky; top: 0; z-index: var(--z-topbar);
}
.topbar-title { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -.4px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; justify-content: flex-end; }

/* ── Content ────────────────────────────────────────────────── */
.content { padding: 8px 28px 28px; flex: 1; }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
}
/* Automatic spacing between consecutive cards in the same container */
.card + .card { margin-top: 16px; }
.card-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-title { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.2px; }
.card-body  { padding: 20px 22px; }
/* "View All" / header action links inside card headers */
.card-link {
  font-size: 12px; font-weight: 600; color: var(--primary);
  text-decoration: none; letter-spacing: 0;
  opacity: .85; transition: opacity .15s;
}
.card-link:hover { opacity: 1; text-decoration: underline; }

/* Stacked label → value pattern (peek drawers, info panels) */
.dl { display: flex; flex-direction: column; gap: 2px; }
.dl-label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px; line-height: 1;
}
.dl-value { font-size: 13px; color: var(--text); font-weight: 500; }
.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }

/* ── Stat cards ─────────────────────────────────────────────── */
.stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 14px; margin-bottom: 22px;
}
.stats-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.stat-card {
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  transition: box-shadow .25s, transform .25s;
  position: relative;
  overflow: hidden;
}
.stat-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.stat-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: .07em; text-transform: uppercase;
}
.stat-value {
  font-size: 32px; font-weight: 800; color: var(--text);
  margin: 8px 0 3px; line-height: 1;
  letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
}
.stat-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; }
.stat-icon  {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(0,0,0,0.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; opacity: .7;
}
/* Coloured icon backgrounds on accent variants */
.stat-card.sc-green  .stat-icon { background: rgba(34,197,94,.12);  color: var(--success); opacity: 1; }
.stat-card.sc-amber  .stat-icon { background: rgba(245,158,11,.12); color: var(--warning); opacity: 1; }
.stat-card.sc-red    .stat-icon { background: rgba(220,38,38,.12);  color: var(--danger);  opacity: 1; }
.stat-card.sc-blue   .stat-icon { background: rgba(59,130,246,.12); color: var(--info);    opacity: 1; }
.stat-card.sc-primary .stat-icon { background: rgba(var(--primary-rgb),.12); color: var(--primary); opacity: 1; }
/* ── Stat card accent variants ──────────────────────────────── */
.stat-card.sc-green  { border-top: 3px solid var(--success); }
.stat-card.sc-green  .stat-icon { color: var(--success); opacity: .55; }
.stat-card.sc-green  .stat-value { color: var(--success); }
.stat-card.sc-amber  { border-top: 3px solid var(--warning); }
.stat-card.sc-amber  .stat-icon { color: var(--warning); opacity: .55; }
.stat-card.sc-amber  .stat-value { color: var(--warning); }
.stat-card.sc-red    { border-top: 3px solid var(--danger); }
.stat-card.sc-red    .stat-icon { color: var(--danger); opacity: .55; }
.stat-card.sc-red    .stat-value { color: var(--danger); }
.stat-card.sc-blue   { border-top: 3px solid var(--info); }
.stat-card.sc-blue   .stat-icon { color: var(--info); opacity: .55; }
.stat-card.sc-blue   .stat-value { color: var(--info); }
.stat-card.sc-primary{ border-top: 3px solid var(--primary); }
.stat-card.sc-primary .stat-icon { color: var(--primary); opacity: .55; }
.stat-card.sc-primary .stat-value { color: var(--primary); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px;
  border-radius: 99px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  cursor: pointer; border: none;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
  text-decoration: none; white-space: nowrap;
  letter-spacing: -.1px;
}
.btn:active { transform: scale(.96); }

.btn-primary {
  background: var(--primary); color: #fff;
  box-shadow: 0 4px 16px rgba(var(--primary-rgb),.3);
}
.btn-primary:hover {
  background: var(--primary-d);
  box-shadow: 0 6px 20px rgba(var(--primary-rgb),.4);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--card); color: var(--text);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.09);
}
.btn-secondary:hover {
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

.btn-dark {
  background: var(--black); color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.btn-dark:hover {
  background: #222;
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--danger); color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(220,38,38,.2);
}
.btn-danger:hover {
  background: var(--danger-d);
  box-shadow: 0 6px 20px rgba(220,38,38,.4);
  transform: translateY(-1px);
}
.btn-warning {
  background: #fef9c3; color: #92400e;
  border: 1px solid #fde047;
  box-shadow: none;
}
.btn-warning:hover {
  background: #fef08a; border-color: #facc15;
  transform: translateY(-1px);
}

/* ── Danger confirm dialog ────────────────────────────────────── */
._cd-strip { height: 4px; background: var(--danger); border-radius: var(--radius) var(--radius) 0 0; }
._cd-icon-wrap {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(220,38,38,.1);
  display: flex; align-items: center; justify-content: center;
}
._cd-icon-wrap i { font-size: 20px; color: var(--danger); }
._cd-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
._cd-msg   { font-size: 13px; color: var(--muted); line-height: 1.5; }
[data-theme="dark"] ._cd-icon-wrap { background: rgba(220,38,38,.2); }

.btn-ghost {
  background: transparent; color: var(--muted);
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 8px;
}
.btn-ghost:hover { background: var(--card); color: var(--text); }

.btn-sm  { padding: 6px 14px; font-size: 12px; }
.btn-lg  { padding: 12px 26px; font-size: 15px; }
.btn-icon-sm {
  width: 28px; height: 28px; padding: 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 14px; border-radius: 6px;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  padding: 10px 16px; text-align: left;
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: none; letter-spacing: 0;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
thead th:first-child { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
thead th:last-child  { border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
tbody td {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { cursor: pointer; transition: background .12s; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px; border-radius: 99px;
  font-size: 11px; font-weight: 700;
  text-transform: capitalize; letter-spacing: .01em;
}
.badge-open        { background: #e8f0fe; color: #1a56db; }
.badge-in_progress { background: #fef9c3; color: #854d0e; }
.badge-resolved    { background: #dcfce7; color: #15803d; }
.badge-closed      { background: #f3f4f6; color: #6b7280; }
.badge-low         { background: #f0fdf4; color: #16a34a; }
.badge-medium      { background: #fffbeb; color: #b45309; }
.badge-urgent      { background: #fdf2f2; color: #c0392b; }

/* ── Status / priority indicator dots ───────────────────────── */
.badge-open::before, .badge-in_progress::before, .badge-resolved::before,
.badge-closed::before, .badge-urgent::before, .badge-medium::before, .badge-low::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.badge-open::before        { background: #1a56db; }
.badge-in_progress::before { background: #ca8a04; animation: pulse-dot 1.8s ease-in-out infinite; }
.badge-resolved::before    { background: #15803d; }
.badge-closed::before      { background: #9ca3af; }
.badge-urgent::before      { background: #c0392b; }
.badge-medium::before      { background: #b45309; }
.badge-low::before         { background: #16a34a; }
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.45; transform:scale(.6); }
}

.badge-hardware    { background: #f0edff; color: #6d28d9; }
.badge-software    { background: #e0f2fe; color: #0369a1; }
.badge-network     { background: #fdf4ff; color: #9333ea; }
.badge-access      { background: #ecfdf5; color: #059669; }
.badge-other       { background: #f3f4f6; color: #6b7280; }
.badge-super_admin { background: #fef9c3; color: #854d0e; }
.badge-it_admin    { background: #e8f0fe; color: #1a56db; }
.badge-it_staff    { background: #f0edff; color: #6d28d9; }
.badge-site_admin  { background: #ecfdf5; color: #065f46; }
.badge-end_user    { background: #f3f4f6; color: #6b7280; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group  { margin-bottom: 18px; }
.form-label  { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 9px 16px;
  border: 1.5px solid rgba(0,0,0,0.13);
  border-radius: 99px;
  font-size: 15px; font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text); background: var(--card);
  transition: border-color .15s, box-shadow .15s; outline: none;
}
.form-textarea { border-radius: var(--radius-sm); }
.form-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding: 6px 36px 6px 14px;
  font-size: 13px;
  border-radius: 99px;
  background-color: var(--card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23595959'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.form-select option { color: var(--text); background: var(--card); }
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aab4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  border-color: var(--border);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb),.1);
}
.form-textarea { resize: vertical; min-height: 100px; }
.form-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.form-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── Filter bar ─────────────────────────────────────────────── */
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.filter-bar .form-select { width: auto; min-width: 120px; padding: 6px 30px 6px 12px; font-size: 13px; background-position: right 10px center; background-size: 12px; }
.search-input {
  padding: 6px 14px 6px 36px;
  font-size: 13px;
  border-radius: 99px;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23aaa'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") no-repeat 11px center / 16px;
}

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-modal); opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  width: 90%; max-width: 520px; max-height: 90vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  transform: translateY(20px) scale(.97);
  transition: transform .26s cubic-bezier(.34,1.46,.64,1);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-header {
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.modal-title  { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.modal-close  {
  width: 32px; height: 32px; min-width: 32px; min-height: 32px;
  border-radius: 50%; flex-shrink: 0;
  background: var(--bg); border: 1.5px solid var(--border);
  font-size: 18px; line-height: 1;
  cursor: pointer; color: var(--danger);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.modal-close:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.modal-body {
  padding: 22px 26px;
  overflow-y: auto;
  flex: 1;
  /* Modern minimal scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.modal-footer {
  padding: 16px 26px;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--bg);
  flex-shrink: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Toast notifications ─────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 28px; right: 28px;
  display: flex; flex-direction: column; gap: 10px; z-index: var(--z-toast);
}
.toast {
  padding: 13px 20px;
  border-radius: 99px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  font-size: 13px; font-weight: 600;
  min-width: 220px; max-width: 340px;
  display: flex; align-items: center; gap: 10px;
  animation: toastIn .3s cubic-bezier(.34,1.46,.64,1);
}
@keyframes toastIn {
  from { transform: translateX(110%) scale(.9); opacity: 0; }
  to   { transform: translateX(0) scale(1);    opacity: 1; }
}
.toast-success { background: #052e16; color: #86efac; }
.toast-error   { background: #450a0a; color: #fca5a5; }
.toast-info    { background: #0f0c29; color: #a5b4fc; }

/* ── Remix Icons sizing ─────────────────────────────────────── */
.nav-link .icon i { font-size: 16px; line-height: 1; }
.stat-icon i      { font-size: 22px; line-height: 1; }
.btn i            { font-size: 15px; line-height: 1; }
.card-title i     { font-size: 15px; vertical-align: -2px; margin-right: 4px; }
.topbar-title i   { font-size: 20px; vertical-align: -3px; margin-right: 6px; }
[class^="ri-"],
[class*=" ri-"]   { line-height: inherit; }

/* ── Misc ───────────────────────────────────────────────────── */
.page-hero { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px 28px; margin-bottom: 24px; position: relative; overflow: hidden; }
.page-hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--primary-rgb), .09) 0%, transparent 60%); pointer-events: none; }
.page-hero-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.page-hero-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.page-hero-text h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.page-hero-text p { margin: 0; color: var(--muted); font-size: 14px; }
.page-hero-extra { flex-shrink: 0; }
@media (max-width: 640px) { .page-hero { padding: 18px 20px; } .page-hero-text h1 { font-size: 19px; } }

.empty-state { text-align: center; padding: 56px 24px; color: var(--muted); }
.empty-state .icon { font-size: 48px; margin-bottom: 14px; opacity: .5; }
.empty-state h3    { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 6px; letter-spacing: -.2px; }
.empty-state p     { font-size: 13px; color: var(--muted); max-width: 280px; margin: 0 auto 16px; line-height: 1.5; }
/* New icon-wrap style — circle with primary tint */
.es-icon-wrap {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(var(--primary-rgb), .09);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.es-icon-wrap i { font-size: 30px; color: var(--primary); opacity: .75; }
.es-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.avatar-circle {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.avatar-sm {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.divider   { border: none; border-top: 1px solid rgba(0,0,0,0.06); margin: 20px 0; }
.text-muted  { color: var(--muted); }
.text-sm     { font-size: 12px; }
.mt-4        { margin-top: 16px; }
.mb-4        { margin-bottom: 16px; }
.flex        { display: flex; }
.items-center{ align-items: center; }
.gap-2       { gap: 8px; }
.gap-3       { gap: 12px; }
.ml-auto     { margin-left: auto; }
.w-full      { width: 100%; }
.grid-2      { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Login page ─────────────────────────────────────────────── */
.login-page { min-height: 100vh; display: flex; }
.login-left {
  width: 420px; flex-shrink: 0;
  background: #111111;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 52px;
}
.login-right { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px; background: var(--bg); }
.login-box { width: 100%; max-width: 400px; }
.login-logo  {
  font-size: 20px; font-weight: 800; color: #fff;
  margin-bottom: 8px; letter-spacing: -.5px;
  display: flex; align-items: center; gap: 10px;
}
.login-logo::before {
  content: '';
  background: var(--primary) url('/icon-nobg.svg') center/28px no-repeat;
  width: 38px; height: 38px;
  border-radius: 12px; display: flex; align-items: center;
  justify-content: center;
}
.login-tagline { color: rgba(255,255,255,0.55); font-size: 14px; }
.login-features { margin-top: 44px; display: flex; flex-direction: column; gap: 20px; }
.login-feature { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 500; }
.login-feature .fi { font-size: 20px; }
.login-title   { font-size: 28px; font-weight: 800; color: var(--text); margin-bottom: 6px; letter-spacing: -.6px; }
.login-sub     { color: var(--muted); font-size: 14px; margin-bottom: 30px; }

/* ── Company cards ───────────────────────────────────────────── */
.company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; }
.company-card {
  background: var(--card); border: none;
  border-radius: var(--radius); padding: 22px;
  cursor: pointer; box-shadow: var(--shadow);
  transition: box-shadow .22s, transform .22s;
  position: relative;
}
.company-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.company-card .cc-name  { font-size: 16px; font-weight: 800; margin-bottom: 4px; letter-spacing: -.3px; }
.company-card .cc-slug  { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.company-card .cc-stats { display: flex; gap: 16px; }
.company-card .cc-stat  { text-align: center; }
.company-card .cc-stat .val  { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.4px; }
.company-card .cc-stat .lbl  { font-size: 11px; color: var(--muted); }
.cc-open-dot {
  position: absolute; top: 20px; right: 20px;
  width: 8px; height: 8px; background: var(--danger);
  border-radius: 50%; box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.2);
}

/* ── Ticket detail ───────────────────────────────────────────── */
.ticket-header {
  background: var(--card); border: none;
  border-radius: var(--radius); padding: 26px;
  margin-bottom: 20px; box-shadow: var(--shadow);
}
.ticket-meta   { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ticket-body   { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.comment       { display: flex; gap: 12px; margin-bottom: 16px; }
.comment-bubble{
  flex: 1; background: #f8f8f8;
  border-radius: var(--radius-sm); padding: 13px 15px;
  border: 1px solid rgba(0,0,0,.05);
}
.comment.internal .comment-bubble { background: #fffbeb; border-color: #fde68a; }
.comment-author { font-size: 12px; font-weight: 700; color: var(--text); }
.comment-time   { font-size: 11px; color: var(--muted); margin-left: 6px; }
.comment-text   { font-size: 13px; margin-top: 4px; white-space: pre-wrap; }
.internal-tag   { font-size: 10px; background: #fde68a; color: #92400e; padding: 1px 7px; border-radius: 10px; font-weight: 700; margin-left: 6px; }

/* ── Asset / status badges ───────────────────────────────────── */
.badge-active     { background:#dcfce7;color:#15803d; }
.badge-in_repair  { background:#fef9c3;color:#854d0e; }
.badge-in_storage { background:#e0f2fe;color:#0369a1; }
.badge-retired    { background:#f3f4f6;color:#6b7280; }
.badge-in_stock   { background:#e0f2fe;color:#0369a1; }
.badge-installed  { background:#dcfce7;color:#15803d; }
.badge-lost       { background:#fdf2f2;color:#c0392b; }

/* ── Shared tag chip ─────────────────────────────────────────── */
.tag-chip { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:99px; background:rgba(var(--primary-rgb),.12); color:var(--primary); font-size:12px; font-weight:500; white-space:nowrap; }
.tag-chip button { background:none; border:none; cursor:pointer; color:inherit; font-size:13px; padding:0; line-height:1; opacity:.7; }
.tag-chip button:hover { opacity:1; }
.badge-laptop     { background:#f0edff;color:#6d28d9; }
.badge-desktop    { background:#e8f0fe;color:#1a56db; }
.badge-monitor    { background:#e0f2fe;color:#0369a1; }
.badge-printer    { background:#fdf4ff;color:#9333ea; }
.badge-phone      { background:#dcfce7;color:#15803d; }
.badge-tablet     { background:#fef9c3;color:#854d0e; }
.badge-router     { background:#f0edff;color:#6d28d9; }
.badge-switch     { background:#e8f0fe;color:#1a56db; }
.badge-server     { background:#fdf4ff;color:#9333ea; }
.badge-ups        { background:#fef9c3;color:#854d0e; }
.badge-sim        { background:#dcfce7;color:#15803d; }
.badge-license    { background:#fefce8;color:#713f12; }
/* Custom asset category badge color presets */
.badge-cat-gray   { background:#f3f4f6;color:#6b7280; }
.badge-cat-blue   { background:#e8f0fe;color:#1a56db; }
.badge-cat-purple { background:#f0edff;color:#6d28d9; }
.badge-cat-cyan   { background:#e0f2fe;color:#0369a1; }
.badge-cat-pink   { background:#fdf4ff;color:#9333ea; }
.badge-cat-green  { background:#dcfce7;color:#15803d; }
.badge-cat-amber  { background:#fef9c3;color:#854d0e; }
.badge-cat-red    { background:#fdf2f2;color:#c0392b; }
.badge-cat-teal   { background:#ccfbf1;color:#0f766e; }
.badge-cat-indigo { background:#e0e7ff;color:#4338ca; }
.badge-cat-orange { background:#ffedd5;color:#c2410c; }
.badge-cat-lime   { background:#ecfccb;color:#4d7c0f; }
.badge-cat-rose   { background:#ffe4e6;color:#be123c; }
.badge-cat-sky    { background:#f0f9ff;color:#0284c7; }
.badge-cat-slate  { background:#f1f5f9;color:#475569; }
.badge-cat-violet { background:#ede9fe;color:#7c3aed; }

/* ── KB category badges ──────────────────────────────────────── */
.badge-general    { background:#f3f4f6;color:#6b7280; }
.badge-access     { background:#fdf4ff;color:#9333ea; }
.badge-security   { background:#fdf2f2;color:#c0392b; }
.badge-procedures { background:#f0fdf4;color:#15803d; }

/* ── Vendor category badges ─────────────────────────────────── */
.badge-isp         { background:#e0f2fe;color:#0369a1; }
.badge-telecom     { background:#f0edff;color:#6d28d9; }
.badge-cloud       { background:#e8f0fe;color:#1a56db; }
.badge-maintenance { background:#fef9c3;color:#854d0e; }

/* ── Contract / request status badges ───────────────────────── */
.badge-pending     { background:#fef9c3;color:#854d0e; }
.badge-approved    { background:#dcfce7;color:#15803d; }
.badge-rejected    { background:#fdf2f2;color:#c0392b; }
.badge-ordered     { background:#e8f0fe;color:#1a56db; }
.badge-received    { background:#f0edff;color:#6d28d9; }
.badge-expired     { background:#f3f4f6;color:#6b7280; }
.badge-cancelled   { background:#fdf2f2;color:#c0392b; }

/* ── Vendor card ─────────────────────────────────────────────── */
.vendor-card {
  background: var(--card); border: none;
  border-radius: var(--radius); padding: 22px;
  cursor: pointer; box-shadow: var(--shadow);
  transition: box-shadow .22s, transform .22s;
}
.vendor-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* ── Seat usage bar ──────────────────────────────────────────── */
.seat-bar { background: rgba(0,0,0,.08); border-radius: 99px; height: 6px; overflow: hidden; margin-top: 4px; }
.seat-bar-fill { height: 100%; border-radius: 99px; background: var(--primary); transition: width .3s; }
.seat-bar-fill.warn { background: var(--warning); }
.seat-bar-fill.full { background: var(--danger); }

/* ── Warranty warning ────────────────────────────────────────── */
.warranty-ok   { color: var(--success); font-size: 12px; font-weight: 600; }
.warranty-warn { color: var(--warning); font-size: 12px; font-weight: 700; }
.warranty-exp  { color: var(--danger);  font-size: 12px; font-weight: 700; }

/* ── Network status indicators ───────────────────────────────── */
.status-dot {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; flex-shrink: 0;
}
.status-dot.operational    { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.status-dot.degraded       { background: var(--warning); box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.status-dot.partial_outage { background: #f97316;        box-shadow: 0 0 0 3px rgba(249,115,22,.2); }
.status-dot.major_outage   { background: var(--danger);  box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.2); }
.status-dot.maintenance    { background: #8b5cf6;        box-shadow: 0 0 0 3px rgba(139,92,246,.2); }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 99px;
  font-size: 12px; font-weight: 700;
}
.status-pill.operational    { background: #dcfce7; color: #15803d; }
.status-pill.degraded       { background: #fef9c3; color: #854d0e; }
.status-pill.partial_outage { background: #ffedd5; color: #9a3412; }
.status-pill.major_outage   { background: #fdf2f2; color: #c0392b; }
.status-pill.maintenance    { background: #f0edff; color: #6d28d9; }

.status-service-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.05);
}
.status-service-row:last-child { border-bottom: none; }

.overall-banner {
  border-radius: var(--radius); padding: 18px 24px; margin-bottom: 22px;
  display: flex; align-items: center; gap: 14px;
  font-size: 15px; font-weight: 700;
  box-shadow: var(--shadow);
}
.overall-banner.ok     { background: #dcfce7; color: #15803d; }
.overall-banner.issues { background: #fdf2f2; color: #c0392b; }
.overall-banner.warn   { background: #fef9c3; color: #854d0e; }
.overall-banner.maint  { background: #f0edff; color: #6d28d9; }

.incident-card {
  background: var(--card); border: none;
  border-radius: var(--radius-sm);
  padding: 16px 20px; margin-bottom: 12px;
  box-shadow: var(--shadow);
  border-left: 4px solid transparent;
}
.incident-card.investigating { border-left-color: var(--danger); }
.incident-card.identified    { border-left-color: #f97316; }
.incident-card.monitoring    { border-left-color: var(--warning); }
.incident-card.resolved      { border-left-color: var(--success); }

/* ── History timeline ────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; }
.timeline-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.timeline-item:last-child { border-bottom: none; }
.timeline-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg); border: 2px solid rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0; margin-top: 2px;
}
.timeline-content .tl-action { font-size: 13px; font-weight: 600; }
.timeline-content .tl-meta   { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── Mobile hamburger toggle ─────────────────────────────────── */
.hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  padding: 8px; border: none; background: none;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px; transition: all .2s;
}

/* ── Company switcher dropdown ───────────────────────────────── */
.sidebar-company-wrap { position: relative; }
#company-switcher-dropdown {
  position: absolute; left: 12px; right: 12px; top: calc(100% + 4px);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 500; overflow: hidden;
}
.co-switch-list { max-height: 260px; overflow-y: auto; padding: 4px 0; }
.co-switch-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer;
  transition: background .12s;
}
.co-switch-item:hover { background: var(--bg); }
.co-switch-item.active { background: var(--primary-l); }
.co-switch-manage {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; font-size: 12px; font-weight: 600;
  color: var(--primary); text-decoration: none;
  border-top: 1px solid var(--border);
  transition: background .12s;
}
.co-switch-manage:hover { background: var(--primary-l); }
.co-switch-manage i { font-size: 14px; }

/* Narrow mode: hover to show */
body.sidebar-narrow .sidebar-company-wrap { position: static; }
body.sidebar-narrow #company-switcher-dropdown {
  position: fixed; left: 64px; top: 80px; width: 240px; right: auto;
  display: none !important;
}
body.sidebar-narrow #sidebar-company-wrap:hover #company-switcher-dropdown {
  display: block !important;
}

/* ── Sidebar collapse toggle (desktop) ──────────────────────── */
.sidebar-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--primary);
  background: var(--primary-l); color: var(--primary);
  cursor: pointer; flex-shrink: 0;
  transition: background .15s, color .15s, box-shadow .15s;
}
.sidebar-toggle-btn:hover { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(var(--primary-rgb),.35); }

/* ── Narrow sidebar ──────────────────────────────────────────── */
body.sidebar-narrow .sidebar  { width: 64px; }
body.sidebar-narrow .main     { margin-left: 64px; }

/* Logo area — collapsed: show icon only, stack toggle below */
body.sidebar-narrow .sidebar-logo {
  padding: 10px 0 8px; flex-direction: column !important;
  justify-content: center !important; align-items: center !important; gap: 4px;
}
body.sidebar-narrow .sidebar-logo > div:first-child {
  display: flex !important; justify-content: center; align-items: center;
}
body.sidebar-narrow .sidebar-logo > div:first-child > div:last-child { display: none; }

/* Company card */
body.sidebar-narrow .sidebar-company { padding: 6px 0; margin: 8px 4px 4px; justify-content: center; cursor: pointer !important; }
body.sidebar-narrow .sidebar-company .company-inner { justify-content: center; gap: 0; flex: none; }
body.sidebar-narrow .sidebar-company .company-text,
body.sidebar-narrow .sidebar-company .company-actions { display: none; }
body.sidebar-narrow .sidebar-company .company-logo-wrap { line-height: 1; }

/* Site selector */
body.sidebar-narrow #site-selector-wrap { padding: 4px 6px; }
body.sidebar-narrow #site-selector-wrap > button { justify-content: center; padding: 7px 0; border-radius: 8px; }
body.sidebar-narrow #site-selector-wrap > button > span,
body.sidebar-narrow #site-selector-wrap > button > i:last-child { display: none; }
body.sidebar-narrow #site-selector-wrap > button > i:first-child { font-size: 18px; }
body.sidebar-narrow #site-dropdown { left: 64px; right: auto; width: 220px; top: 0; }
body.sidebar-narrow #site-selector-wrap:hover #site-dropdown { display: block !important; }

/* Nav sections → separator lines */
body.sidebar-narrow .nav-section { font-size: 0; padding: 0; margin: 8px 8px; border-top: 1px solid var(--border); pointer-events: none; }
body.sidebar-narrow .nav-section .section-arrow { display: none; }
body.sidebar-narrow .nav-group-items { height: auto !important; overflow: visible !important; }

/* Nav links → icon only, centred */
body.sidebar-narrow .sidebar-nav { padding: 6px 8px; }
body.sidebar-narrow .nav-link { justify-content: center; padding: 10px 0; gap: 0; }
body.sidebar-narrow .nav-link.active { padding-left: 0; border-radius: var(--radius-sm); }
body.sidebar-narrow .nav-link .nav-label { display: none; }
body.sidebar-narrow .nav-link .icon { width: auto; font-size: 18px; }

/* Footer → icon only */
body.sidebar-narrow .sidebar-footer { padding: 10px 0; justify-content: center; flex-direction: column; gap: 4px; }
body.sidebar-narrow .sidebar-footer .user-pill { padding: 8px 0; justify-content: center; flex: none; }
body.sidebar-narrow .sidebar-footer .user-info { display: none; }
body.sidebar-narrow .sidebar-footer .dark-toggle { margin: 0; }
body.sidebar-narrow .sidebar-footer [onclick="signOut()"] { display: none; }
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: calc(var(--z-sidebar) - 1);
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  padding: 0 28px 16px; font-size: 13px; color: var(--muted);
}
.breadcrumb a { color: var(--muted); text-decoration: none; font-weight: 500; transition: color .15s; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb-sep { color: var(--border); font-size: 16px; line-height: 1; }
.breadcrumb-current { color: var(--text); font-weight: 600; }

/* ── Bulk action bar ─────────────────────────────────────────── */
.bulk-bar {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--text); color: #fff;
  border-radius: 99px; padding: 10px 10px 10px 20px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-xl); z-index: var(--z-bulk);
  font-size: 13px; font-weight: 600;
  transition: transform .25s cubic-bezier(.34,1.46,.64,1), opacity .2s;
  opacity: 0; pointer-events: none; white-space: nowrap;
}
.bulk-bar.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1; pointer-events: all;
}
.bulk-bar select {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.2); border-radius: 99px;
  padding: 6px 12px; font-size: 12px; font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif; outline: none; cursor: pointer;
}
.bulk-bar select option { background: var(--text); color: #fff; }
.bulk-bar .bulk-divider { width: 1px; height: 18px; background: rgba(255,255,255,.2); }
.bulk-bar .btn-bulk-light {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.2); border-radius: 99px;
  padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s; white-space: nowrap;
}
.bulk-bar .btn-bulk-light:hover { background: rgba(255,255,255,.22); }
.bulk-bar .btn-bulk-close {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
  border: none; border-radius: 99px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; transition: background .15s;
}
.bulk-bar .btn-bulk-close:hover { background: rgba(255,255,255,.18); }
.bulk-bar .btn-bulk-danger {
  background: rgba(239,68,68,.18); color: #fca5a5;
  border: 1px solid rgba(239,68,68,.3); border-radius: 99px;
  padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s; white-space: nowrap;
}
.bulk-bar .btn-bulk-danger:hover { background: rgba(239,68,68,.3); }

/* ── Pagination page-number buttons ──────────────────────────── */
.page-btn {
  width: 32px; height: 32px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card);
  cursor: pointer; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  color: var(--text); transition: all .15s; flex-shrink: 0;
}
.page-btn:hover  { border-color: var(--primary); color: var(--primary); }
.page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.page-btn:disabled { opacity: .4; cursor: default; pointer-events: none; }
.page-ellipsis { padding: 0 4px; align-self: center; color: var(--muted); font-size: 13px; }

/* ── Priority row left borders + tints ──────────────────────── */
tbody tr.row-urgent { border-left: 3px solid var(--danger);  background: rgba(220,38,38,.04); }
tbody tr.row-medium { border-left: 3px solid var(--warning); background: rgba(245,158,11,.04); }
tbody tr.row-low    { border-left: 3px solid var(--success); }
tbody tr.row-urgent td:first-child,
tbody tr.row-medium td:first-child,
tbody tr.row-low    td:first-child { padding-left: 11px; }
tbody tr.row-urgent:hover { background: rgba(220,38,38,.08) !important; }
tbody tr.row-medium:hover { background: rgba(245,158,11,.07) !important; }

/* ── SLA age badges ──────────────────────────────────────────── */
.sla-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 99px;
  font-size: 11px; font-weight: 700;
}
.sla-fresh   { background: #dcfce7; color: #15803d; }
.sla-warn    { background: #fef9c3; color: #854d0e; }
.sla-overdue { background: #fdf2f2; color: #c0392b; }

/* ── Global search overlay ───────────────────────────────────── */
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-search); display: flex;
  align-items: flex-start; justify-content: center;
  padding-top: 80px;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.search-overlay.open { opacity: 1; pointer-events: all; }
.search-box {
  background: var(--card); border-radius: var(--radius);
  width: 90%; max-width: 600px;
  box-shadow: var(--shadow-xl);
  transform: translateY(-16px); transition: transform .22s cubic-bezier(.34,1.46,.64,1);
  overflow: hidden;
}
.search-overlay.open .search-box { transform: translateY(0); }
.search-input-wrap {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.search-input-wrap i { font-size: 20px; color: var(--muted); flex-shrink: 0; }
.search-input-wrap input {
  flex: 1; border: none; outline: none;
  font-size: 16px; font-weight: 500; color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: transparent;
}
.search-input-wrap input::placeholder { color: var(--muted); }
.search-kbd {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 8px; font-size: 11px;
  font-weight: 600; color: var(--muted); flex-shrink: 0;
}
.search-results { max-height: 420px; overflow-y: auto; }
.search-section-label {
  padding: 10px 20px 5px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  background: #fafafa; border-bottom: 1px solid var(--border);
}
.search-result-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px; cursor: pointer;
  transition: background .1s; text-decoration: none; color: var(--text);
}
.search-result-item:hover, .search-result-item.focused { background: var(--bg); }
.sri-icon {
  width: 34px; height: 34px; border-radius: var(--radius-xs);
  background: var(--bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0; color: var(--muted);
}
.sri-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
.sri-sub   { font-size: 12px; color: var(--muted); margin-top: 1px; }
.sri-badge { margin-left: auto; flex-shrink: 0; }
.search-empty { padding: 36px 20px; text-align: center; color: var(--muted); }
.search-empty i { font-size: 36px; display: block; margin-bottom: 10px; opacity: .4; }
.search-footer {
  padding: 10px 20px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
  display: flex; align-items: center; gap: 16px;
}
.search-footer kbd {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 6px; font-size: 11px; font-weight: 700;
}

/* ── Quick actions grid ──────────────────────────────────────── */
.quick-actions-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.quick-action-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 12px 10px;
  background: var(--bg); border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; text-decoration: none;
  color: var(--text); font-size: 11px; font-weight: 700;
  text-align: center; letter-spacing: -.1px;
}
.quick-action-btn i { font-size: 18px; color: var(--muted); transition: color .18s; }
.quick-action-btn:hover {
  background: var(--primary-l); border-color: var(--primary);
  color: var(--primary); transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.quick-action-btn:hover i { color: var(--primary); }

/* ── Activity timeline ───────────────────────────────────────── */
.activity-timeline { display: flex; flex-direction: column; }
.activity-item {
  display: flex; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; margin-top: 1px;
}
.ai-status   { background: #e8f0fe; color: #1a56db; }
.ai-priority { background: #fef9c3; color: #854d0e; }
.ai-assign   { background: #dcfce7; color: #15803d; }
.ai-created  { background: var(--primary-l); color: var(--primary); }
.ai-comment  { background: #f3f4f6; color: #6b7280; }
.activity-title { font-size: 13px; font-weight: 500; line-height: 1.4; }
.activity-meta  { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Row checkbox column */
.cb-col { width: 40px; padding-left: 16px !important; padding-right: 4px !important; }
input[type="checkbox"].row-cb {
  width: 15px; height: 15px; cursor: pointer;
  accent-color: var(--primary); border-radius: 4px;
}

/* ── Super-admin enhancements ────────────────────────────────── */
.health-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700;
}
.health-good     { background: #dcfce7; color: #15803d; }
.health-ok       { background: #fef9c3; color: #854d0e; }
.health-warning  { background: #fff7ed; color: #9a3412; }
.health-critical { background: #fdf2f2; color: #c0392b; }
[data-theme="dark"] .health-good     { background: rgba(34,197,94,.15);   color:#86efac; }
[data-theme="dark"] .health-ok       { background: rgba(245,158,11,.13);  color:#fcd34d; }
[data-theme="dark"] .health-warning  { background: rgba(249,115,22,.13);  color:#fdba74; }
[data-theme="dark"] .health-critical { background: rgba(var(--primary-rgb),.15);   color:#fca5a5; }

.alert-strip {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;
}
.alert-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: opacity .15s;
  border: 1px solid transparent;
}
.alert-pill:hover { opacity: .85; }
.alert-pill.danger  { background:#fdf2f2; color:#c0392b; border-color:#fecaca; }
.alert-pill.warning { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.alert-pill.info    { background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }
[data-theme="dark"] .alert-pill.danger  { background:rgba(var(--primary-rgb),.15);   color:#fca5a5; border-color:rgba(var(--primary-rgb),.3); }
[data-theme="dark"] .alert-pill.warning { background:rgba(249,115,22,.13);  color:#fdba74; border-color:rgba(249,115,22,.3); }
[data-theme="dark"] .alert-pill.info    { background:rgba(59,130,246,.12);  color:#93c5fd; border-color:rgba(59,130,246,.3); }

.af-item {
  display: flex; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--border); font-size: 13px; align-items: flex-start;
}
.af-item:last-child { border-bottom: none; }
.af-company-tag {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px;
  background: var(--primary-l); color: var(--primary); white-space: nowrap;
}
.user-dist-bar {
  display: flex; height: 6px; border-radius: 99px; overflow: hidden; gap: 2px;
  background: var(--sidebar-h); margin-top: 4px;
}
.user-dist-bar span { display: block; height: 100%; border-radius: 99px; transition: width .3s; }

/* Enhanced company card */
.company-card .cc-health { margin-bottom: 10px; }
.company-card .cc-last   { font-size: 11px; color: var(--muted); margin-top: 8px; }
.cc-stats-row { display: flex; gap: 14px; margin-bottom: 4px; }
.cc-stat-mini { text-align: center; flex: 1; }
.cc-stat-mini .val { font-size: 18px; font-weight: 800; }
.cc-stat-mini .lbl { font-size: 10px; color: var(--muted); margin-top: 1px; }

/* ── Dark mode ───────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:        #0a0c10;
  --bg-card:   #12151c;
  --card:      #12151c;
  --sidebar:   #0a0c10;
  --sidebar-h: #1a1f2a;
  --border:    rgba(255,255,255,0.14);
  --text:      #e6edf3;
  --muted:     #a0aab4;
  --primary-l: rgba(var(--primary-rgb),0.16);
  --danger:    #f87171;
  --danger-d:  #ef4444;
  --danger-l:  rgba(220,38,38,0.15);
  /* Desaturated semantic tonal variants for dark mode (P2 fix) */
  --success:   #86efac;
  --warning:   #fcd34d;
  --info:      #93c5fd;
  --shadow:    0 2px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.55);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.65);
}
[data-theme="dark"] input,
[data-theme="dark"] textarea {
  background: var(--sidebar-h); color: var(--text); border-color: var(--border);
}
[data-theme="dark"] select {
  background-color: var(--sidebar-h); color: var(--text); border-color: var(--border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--muted); }
[data-theme="dark"] .topbar  { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .modal   { background: var(--card); }
[data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--border); }
[data-theme="dark"] .search-box { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .search-result-item:hover,
[data-theme="dark"] .search-result-item.focused { background: var(--sidebar-h); }
[data-theme="dark"] .search-section-label { color: var(--muted); border-color: var(--border); }
[data-theme="dark"] kbd { background: var(--sidebar-h); color: var(--muted); border-color: var(--border); }
[data-theme="dark"] .comment { background: var(--sidebar-h); }
[data-theme="dark"] .comment.internal { background: rgba(245,158,11,.07); }
[data-theme="dark"] .badge-open       { background:rgba(59,130,246,.18);  color:#93c5fd; }
[data-theme="dark"] .badge-in_progress{ background:rgba(245,158,11,.15);  color:#fcd34d; }
[data-theme="dark"] .badge-resolved   { background:rgba(34,197,94,.12);   color:#86efac; }
[data-theme="dark"] .badge-closed     { background:rgba(107,114,128,.15); color:#d1d5db; }
[data-theme="dark"] .badge-urgent     { background:rgba(var(--primary-rgb),.18);   color:#fca5a5; }
[data-theme="dark"] .badge-medium     { background:rgba(245,158,11,.15);  color:#fcd34d; }
[data-theme="dark"] .badge-low        { background:rgba(34,197,94,.12);   color:#86efac; }
[data-theme="dark"] .badge-site_admin { background:rgba(16,185,129,.12);  color:#6ee7b7; }
/* P1: All asset category + role badges — tinted tonal (not flat transparent) */
[data-theme="dark"] .badge-laptop    { background:rgba(109,40,217,.18);  color:#c4b5fd; }
[data-theme="dark"] .badge-desktop   { background:rgba(29,78,216,.18);   color:#93c5fd; }
[data-theme="dark"] .badge-monitor   { background:rgba(3,105,161,.18);   color:#7dd3fc; }
[data-theme="dark"] .badge-printer   { background:rgba(147,51,234,.18);  color:#e9d5ff; }
[data-theme="dark"] .badge-phone     { background:rgba(21,128,61,.18);   color:#86efac; }
[data-theme="dark"] .badge-tablet    { background:rgba(133,77,14,.18);   color:#fcd34d; }
[data-theme="dark"] .badge-router    { background:rgba(109,40,217,.18);  color:#c4b5fd; }
[data-theme="dark"] .badge-switch    { background:rgba(29,78,216,.18);   color:#93c5fd; }
[data-theme="dark"] .badge-server    { background:rgba(147,51,234,.18);  color:#e9d5ff; }
[data-theme="dark"] .badge-ups       { background:rgba(3,105,161,.18);   color:#7dd3fc; }
[data-theme="dark"] .badge-sim       { background:rgba(21,128,61,.18);   color:#86efac; }
[data-theme="dark"] .badge-hardware  { background:rgba(109,40,217,.18);  color:#c4b5fd; }
[data-theme="dark"] .badge-software  { background:rgba(29,78,216,.18);   color:#93c5fd; }
[data-theme="dark"] .badge-network   { background:rgba(147,51,234,.18);  color:#e9d5ff; }
[data-theme="dark"] .badge-access    { background:rgba(5,150,105,.18);   color:#6ee7b7; }
[data-theme="dark"] .badge-other     { background:rgba(107,114,128,.18); color:#d1d5db; }
[data-theme="dark"] .badge-active    { background:rgba(21,128,61,.18);   color:#86efac; }
[data-theme="dark"] .badge-in_repair { background:rgba(133,77,14,.18);   color:#fcd34d; }
[data-theme="dark"] .badge-retired,
[data-theme="dark"] .badge-disposed,
[data-theme="dark"] .badge-lost      { background:rgba(107,114,128,.18); color:#d1d5db; }
/* Role badges */
[data-theme="dark"] .badge-super_admin { background:rgba(133,77,14,.18);  color:#fcd34d; }
[data-theme="dark"] .badge-it_admin    { background:rgba(29,78,216,.18);  color:#93c5fd; }
[data-theme="dark"] .badge-it_staff    { background:rgba(109,40,217,.18); color:#c4b5fd; }
/* Custom category color badges */
[data-theme="dark"] .badge-cat-gray   { background:rgba(107,114,128,.18); color:#d1d5db; }
[data-theme="dark"] .badge-cat-blue   { background:rgba(29,78,216,.18);   color:#93c5fd; }
[data-theme="dark"] .badge-cat-purple { background:rgba(109,40,217,.18);  color:#c4b5fd; }
[data-theme="dark"] .badge-cat-cyan   { background:rgba(3,105,161,.18);   color:#7dd3fc; }
[data-theme="dark"] .badge-cat-pink   { background:rgba(147,51,234,.18);  color:#e9d5ff; }
[data-theme="dark"] .badge-cat-green  { background:rgba(21,128,61,.18);   color:#86efac; }
[data-theme="dark"] .badge-cat-amber  { background:rgba(133,77,14,.18);   color:#fcd34d; }
[data-theme="dark"] .badge-cat-red    { background:rgba(185,28,28,.18);   color:#fca5a5; }
[data-theme="dark"] .badge-cat-teal   { background:rgba(15,118,110,.18);  color:#5eead4; }
[data-theme="dark"] .badge-cat-indigo { background:rgba(67,56,202,.18);   color:#a5b4fc; }
[data-theme="dark"] .badge-cat-orange { background:rgba(194,65,12,.18);   color:#fed7aa; }
[data-theme="dark"] .badge-cat-lime   { background:rgba(77,124,15,.18);   color:#bef264; }
[data-theme="dark"] .badge-cat-rose   { background:rgba(190,18,60,.18);   color:#fda4af; }
[data-theme="dark"] .badge-cat-sky    { background:rgba(2,132,199,.18);   color:#7dd3fc; }
[data-theme="dark"] .badge-cat-slate  { background:rgba(71,85,105,.18);   color:#cbd5e1; }
[data-theme="dark"] .badge-cat-violet { background:rgba(124,58,237,.18);  color:#ddd6fe; }
[data-theme="dark"] .sla-fresh   { background:rgba(34,197,94,.12);   color:#86efac; }
[data-theme="dark"] .sla-warn    { background:rgba(245,158,11,.12);  color:#fcd34d; }
[data-theme="dark"] .sla-overdue { background:rgba(var(--primary-rgb),.15);   color:#fca5a5; }
[data-theme="dark"] .ai-status   { background:rgba(59,130,246,.15);  color:#93c5fd; }
[data-theme="dark"] .ai-priority { background:rgba(245,158,11,.12);  color:#fcd34d; }
[data-theme="dark"] .ai-assign   { background:rgba(34,197,94,.12);   color:#86efac; }
[data-theme="dark"] .ai-created  { background:rgba(var(--primary-rgb),.15);   color:#fca5a5; }
[data-theme="dark"] .ai-comment  { background:rgba(107,114,128,.12); color:#9ca3af; }
[data-theme="dark"] .quick-action-btn { background: var(--sidebar-h); border-color: var(--border); }
[data-theme="dark"] .overall-banner.warn { background:rgba(245,158,11,.15); color:#fcd34d; border-color:rgba(245,158,11,.3); }
[data-theme="dark"] .overall-banner.issues { background:rgba(var(--primary-rgb),.15); color:#fca5a5; border-color:rgba(var(--primary-rgb),.3); }
[data-theme="dark"] thead th { background: var(--sidebar-h); }
[data-theme="dark"] .modal-footer { border-top-color: var(--border); }
[data-theme="dark"] tbody tr:hover { background: var(--sidebar-h); }
[data-theme="dark"] .comment-bubble { background: var(--sidebar-h); border-color: var(--border); }
[data-theme="dark"] .search-section-label { background: var(--sidebar-h); }
[data-theme="dark"] .badge-urgent { background: rgba(220,38,38,.18); color: #fca5a5; }
[data-theme="dark"] tbody tr.row-urgent { background: rgba(220,38,38,.09); }
[data-theme="dark"] tbody tr.row-medium { background: rgba(245,158,11,.08); }
[data-theme="dark"] tbody tr.row-urgent:hover { background: rgba(220,38,38,.15) !important; }
[data-theme="dark"] tbody tr.row-medium:hover { background: rgba(245,158,11,.13) !important; }
/* Dark mode: dot colors for status badges */
[data-theme="dark"] .badge-open::before        { background: #93c5fd; }
[data-theme="dark"] .badge-in_progress::before { background: #fcd34d; }
[data-theme="dark"] .badge-resolved::before    { background: #86efac; }
[data-theme="dark"] .badge-closed::before      { background: #6b7280; }
[data-theme="dark"] .badge-urgent::before      { background: #fca5a5; }
[data-theme="dark"] .badge-medium::before      { background: #fcd34d; }
[data-theme="dark"] .badge-low::before         { background: #86efac; }

.dark-toggle {
  background: none; border: 1.5px solid var(--border); border-radius: 99px;
  cursor: pointer; width: 34px; height: 34px; display: flex; align-items: center;
  justify-content: center; color: var(--muted); font-size: 15px; transition: all .18s;
}
.dark-toggle:hover { background: var(--sidebar-h); color: var(--text); border-color: var(--primary); }

/* ── Notification bell ───────────────────────────────────────── */
.notif-wrapper { position: relative; }
.notif-btn {
  background: none; border: 1.5px solid var(--border); border-radius: 99px;
  cursor: pointer; width: 34px; height: 34px; display: flex; align-items: center;
  justify-content: center; color: var(--muted); font-size: 15px; transition: all .18s;
}
.notif-btn:hover { background: var(--sidebar-h); color: var(--text); border-color: var(--primary); }
.notif-dot {
  position: absolute; top: -3px; right: -3px;
  background: var(--danger); color: #fff; border-radius: 99px;
  font-size: 9px; font-weight: 800; min-width: 16px; height: 16px;
  padding: 0 3px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card); pointer-events: none;
}
.notif-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 320px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); z-index: 400;
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .18s, transform .18s;
}
.notif-dropdown.open { opacity: 1; pointer-events: all; transform: translateY(0); }
.notif-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700;
}
.notif-item {
  display: flex; gap: 10px; padding: 11px 16px;
  border-bottom: 1px solid var(--border); cursor: pointer;
  text-decoration: none; color: var(--text); font-size: 12px;
  transition: background .12s; align-items: flex-start;
}
.notif-item:hover  { background: var(--sidebar-h); }
.notif-item.unread { background: var(--primary-l); }
.notif-icon {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; background: var(--sidebar-h); margin-top: 1px;
}
.notif-empty {
  padding: 28px 16px; text-align: center; color: var(--muted);
  font-size: 13px;
}
.notif-footer {
  padding: 10px 16px; border-top: 1px solid var(--border);
  text-align: center; font-size: 12px; color: var(--primary);
  cursor: pointer; font-weight: 600;
}
.notif-title { font-weight: 600; font-size: 12px; margin-bottom: 2px; }
.notif-sub   { color: var(--muted); font-size: 11px; line-height: 1.4; }
.notif-unread { background: var(--primary-l) !important; }
.notif-clear-btn {
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 2px 4px; border-radius: 4px; font-size: 13px; flex-shrink: 0;
  opacity: 0; transition: opacity .15s;
}
.notif-item:hover .notif-clear-btn { opacity: 1; }
.notif-clear-btn:hover { color: var(--danger); background: var(--danger-l, #fef2f2); }

/* ── Kanban board ─────────────────────────────────────────────── */
.view-toggle {
  display: flex; gap: 2px; background: var(--sidebar-h);
  border-radius: 99px; padding: 3px;
}
.view-btn {
  background: none; border: none; cursor: pointer;
  padding: 5px 12px; border-radius: 99px; font-size: 12px;
  font-weight: 600; color: var(--muted); transition: all .15s;
  font-family: 'Plus Jakarta Sans', sans-serif; white-space: nowrap;
}
.view-btn.active { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.kanban-board {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; align-items: start; padding: 0 0 20px;
}
.kanban-col {
  background: var(--sidebar-h); border-radius: var(--radius-sm);
  border: 1px solid var(--border); overflow: hidden;
}
.kanban-col-header {
  padding: 11px 14px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.kanban-col-count {
  background: var(--border); border-radius: 99px;
  padding: 1px 8px; font-size: 11px; font-weight: 700;
}
.kanban-cards {
  padding: 10px; display: flex; flex-direction: column;
  gap: 8px; min-height: 80px;
}
.kanban-card {
  background: var(--card); border-radius: var(--radius-xs);
  padding: 11px 13px; cursor: pointer;
  box-shadow: var(--shadow); border: 1px solid var(--border);
  transition: transform .15s, box-shadow .15s; user-select: none;
}
.kanban-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kanban-card.dragging { opacity: .45; transform: rotate(1.5deg) scale(.98); }
.kanban-col.drag-over { border-color: var(--primary); }
.kanban-col.drag-over .kanban-cards { background: var(--primary-l); }
.kanban-card-title { font-size: 12px; font-weight: 600; margin-bottom: 8px; line-height: 1.4; }
.kanban-card-meta  { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.kanban-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 12px; }
@media (max-width: 900px) { .kanban-board { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .kanban-board { grid-template-columns: 1fr; } }

/* ── Inline edit ─────────────────────────────────────────────── */
.inline-edit-trigger {
  cursor: pointer; border-radius: 6px; padding: 3px 6px; margin: -3px -6px;
  transition: background .15s; display: inline-block;
}
.inline-edit-trigger:hover { background: var(--sidebar-h); }
.inline-edit-trigger .edit-hint {
  opacity: 0; font-size: 11px; color: var(--muted); margin-left: 6px;
  transition: opacity .15s; vertical-align: middle;
}
.inline-edit-trigger:hover .edit-hint { opacity: 1; }
.inline-edit-actions { display: flex; gap: 6px; margin-top: 8px; }

/* ── Quick-edit popover ───────────────────────────────────────────── */
.qe-popover {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xs); box-shadow: var(--shadow-lg);
  min-width: 140px; overflow: hidden; padding: 4px 0;
  animation: qe-in .1s ease;
}
@keyframes qe-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.qe-option {
  padding: 8px 14px; font-size: 13px; cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  display: flex; align-items: center; gap: 8px;
  transition: background .1s; color: var(--text);
}
.qe-option:hover { background: var(--sidebar-h); }
.qe-option.active { font-weight: 700; color: var(--primary); }

/* ── Filter summary bar ───────────────────────────────────────────── */
.filter-summary {
  align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 20px; background: var(--sidebar-h);
  border-bottom: 1px solid var(--border); font-size: 12px;
}
.filter-summary-count { color: var(--muted); font-weight: 500; white-space: nowrap; margin-right: 2px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(var(--primary-rgb),.09); border: 1px solid rgba(var(--primary-rgb),.22);
  color: var(--primary); border-radius: 99px; padding: 3px 10px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.filter-chip i { font-size: 12px; cursor: pointer; opacity: .65; margin-left: 1px; transition: opacity .1s; }
.filter-chip i:hover { opacity: 1; }
.filter-chip-clear {
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 99px; padding: 3px 10px; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap; transition: all .12s;
}
.filter-chip-clear:hover { background: var(--bg); color: var(--text); border-color: var(--text); }

/* ── Dashboard widget customize panel ────────────────────────────── */
.dash-widget-panel {
  position: fixed; top: 0; right: -320px; width: 300px; height: 100vh;
  background: var(--card); border-left: 1px solid var(--border);
  box-shadow: -4px 0 28px rgba(0,0,0,.12); z-index: 200;
  transition: right .25s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.dash-widget-panel.open { right: 0; }
.dwp-header {
  padding: 18px 20px 12px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 14px;
}
.dwp-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.dwp-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 20px; gap: 12px; cursor: pointer; transition: background .12s;
}
.dwp-item:hover { background: var(--sidebar-h); }
.dwp-item-label { font-size: 13px; font-weight: 500; flex: 1; color: var(--text); }
.dwp-item-sub   { font-size: 11px; color: var(--muted); margin-top: 1px; }
.dwp-overlay {
  position: fixed; inset: 0; z-index: 199; background: rgba(0,0,0,.12);
  display: none;
}
.dwp-overlay.open { display: block; }

/* ── File attachments ─────────────────────────────────────────── */
.file-drop-zone {
  border: 2px dashed var(--border); border-radius: var(--radius-sm);
  padding: 22px; text-align: center; color: var(--muted); cursor: pointer;
  transition: all .18s; font-size: 13px;
}
.file-drop-zone:hover, .file-drop-zone.drag-over {
  border-color: var(--primary); background: var(--primary-l); color: var(--primary);
}
.file-drop-zone i { font-size: 28px; display: block; margin-bottom: 6px; }
.attachment-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.attachment-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--sidebar-h); border-radius: var(--radius-xs); font-size: 13px;
}
.attachment-item i { font-size: 18px; color: var(--muted); flex-shrink: 0; }
.attachment-item a { color: var(--text); text-decoration: none; font-weight: 500; flex: 1; }
.attachment-item a:hover { color: var(--primary); text-decoration: underline; }
.attachment-size { font-size: 11px; color: var(--muted); margin-left: auto; }

/* ── Ticket templates ─────────────────────────────────────────── */
.template-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 20px; background: var(--sidebar-h);
  border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0;
}
.template-label {
  font-size: 11px; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
}
.template-chip {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 99px; padding: 4px 13px; font-size: 12px;
  font-weight: 600; cursor: pointer; transition: all .15s; color: var(--text);
}
.template-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-l); }

/* ── CSV import ───────────────────────────────────────────────── */
.import-preview { max-height: 260px; overflow-y: auto; }
.import-preview table { font-size: 12px; }

/* ── Responsive ─────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — comprehensive rules
   ══════════════════════════════════════════════════════════════ */

/* ── 768 px and below ──────────────────────────────────────── */
@media (max-width: 768px) {

  /* ---- Sidebar ---- */
  .sidebar {
    width: 244px !important; /* always full width on mobile */
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 200;
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }
  .sidebar-toggle-btn { display: none; } /* hide on mobile — hamburger handles it */

  /* ---- Main layout ---- */
  .main { margin-left: 0 !important; }

  /* ---- Topbar ---- */
  .topbar {
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .hamburger { display: flex; }
  .topbar-title { font-size: 15px; }
  .topbar-actions { flex-wrap: wrap; gap: 6px; }
  /* Shrink topbar action buttons to icon-only */
  .topbar-actions .btn span { display: none; }
  .topbar-actions .btn i    { margin: 0; }

  /* ---- Content area ---- */
  .content { padding: 10px 12px 24px; }

  /* ---- Cards ---- */
  .card-header { padding: 13px 16px; flex-wrap: wrap; gap: 8px; }
  .card-body   { padding: 14px 16px; }

  /* ---- Stat cards ---- */
  /* Force 2-col for both CSS-class and inline-overridden stats grids */
  .stats-grid,
  .stats-grid[style],
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
  .stat-card  { padding: 16px; }
  .stat-value { font-size: 28px; }

  /* ---- Form rows & inputs ---- */
  .form-row { grid-template-columns: 1fr !important; }
  .form-input,
  .form-select,
  .form-textarea { width: 100%; }
  .search-input { width: 100%; }

  /* ---- Filter bar ---- */
  .filter-bar { flex-wrap: wrap; gap: 8px; }
  .filter-bar .form-select   { width: 100%; min-width: unset; }
  .filter-bar .search-input  { width: 100%; }
  .filter-bar > .btn         { width: 100%; justify-content: center; }

  /* ---- Tables ---- */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---- Modal (bottom-sheet on mobile) ---- */
  .modal-overlay { align-items: flex-end; }
  .modal {
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    max-height: 92vh !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    top: auto !important;
    transform: translateY(0) scale(1) !important;
  }
  .modal-overlay.open .modal { transform: translateY(0) scale(1) !important; }
  .modal-header { padding: 16px 18px 14px; }
  .modal-body   { padding: 16px 18px; }
  .modal-footer { padding: 12px 18px; flex-wrap: wrap; gap: 8px; }
  .modal-footer .btn { flex: 1; justify-content: center; }

  /* ---- Two-column grids (class-based) ---- */
  .grid-2      { grid-template-columns: 1fr !important; }
  .ticket-body { grid-template-columns: 1fr !important; }


  /* ---- Inline-style side-panel grids (main+sidebar layout) ---- */
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:1fr 260px"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns: 1fr 260px"],
  [style*="grid-template-columns: 1fr 380px"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- Inline three-column grids ---- */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- Auto-fill card grids → single column ---- */
  [style*="grid-template-columns:repeat(auto-fill,minmax(300px"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(320px"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(340px"],
  [style*="grid-template-columns: repeat(auto-fill,minmax(300px"],
  [style*="grid-template-columns: repeat(auto-fill,minmax(320px"],
  [style*="grid-template-columns: repeat(auto-fill,minmax(340px"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- Bottom row: stack on mobile ---- */
  #bottom-row { flex-direction: column !important; }

  /* ---- Quick-actions grid: 2×2 on mobile ---- */
  .quick-actions-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .quick-action-btn   { padding: 14px 8px; font-size: 11px; }

  /* ---- Vendors grid ---- */
  #vendors-grid { grid-template-columns: 1fr !important; }

  /* ---- Login page ---- */
  .login-left  { display: none; }
  .login-right { padding: 28px 18px; }
  .login-box   { max-width: 100%; }
  .login-title { font-size: 22px; }

  /* ---- Ticket detail ---- */
  .ticket-header { padding: 18px; }
  .ticket-meta   { gap: 6px; }

  /* ---- Buttons: touch targets ---- */
  .btn    { min-height: 40px; padding: 8px 16px; }
  .btn-sm { min-height: 34px; }

  /* ---- Company cards ---- */
  .company-grid { grid-template-columns: 1fr !important; }

  /* ---- Alert strip ---- */
  .alert-strip { gap: 6px; }
  .alert-pill  { width: 100%; justify-content: center; }

  /* ---- Toast notifications ---- */
  .toast-container { bottom: 16px; right: 12px; left: 12px; }
  .toast { min-width: unset; max-width: 100%; border-radius: var(--radius-sm); }

  /* ---- Print button (clearance report) ---- */
  #print-btn {
    position: fixed !important;
    bottom: 20px; right: 16px; top: auto !important;
  }

  /* ---- Breadcrumb ---- */
  .breadcrumb { padding: 0 12px 12px; font-size: 12px; }

  /* ---- Kanban: 2 columns on tablet ---- */
  .kanban-board { grid-template-columns: repeat(2,1fr) !important; }
}

/* ── 480 px and below (small phones) ───────────────────────── */
@media (max-width: 480px) {

  /* Stats: single column */
  .stats-grid,
  .stats-grid[style],
  .stats-row { grid-template-columns: 1fr !important; }

  /* Two-column inline grids → 1 col on small phones */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Content padding tighter */
  .content     { padding: 8px 10px 20px; }
  .card-header { padding: 11px 13px; }
  .card-body   { padding: 12px 13px; }

  /* Topbar */
  .topbar      { padding: 10px 12px; }
  .topbar-title{ font-size: 14px; }

  /* Stat values */
  .stat-value  { font-size: 24px; }

  /* Quick-actions: 2-col tight */
  .quick-actions-grid { grid-template-columns: 1fr 1fr !important; }

  /* Kanban: single column */
  .kanban-board { grid-template-columns: 1fr !important; }
  .view-toggle  { width: 100%; justify-content: center; }

  /* Filter bar buttons */
  .filter-bar .btn { font-size: 12px; }

  /* Table text smaller */
  table { font-size: 12px; }

  /* Modal footer */
  .modal-footer .btn { font-size: 12px; }

  /* Profile setup page */
  .profile-setup-card { padding: 20px 16px !important; }
}

/* ══════════════════════════════════════════════════════════════
   UI/UX IMPROVEMENTS — v2
   ══════════════════════════════════════════════════════════════ */

/* ── Skeleton loaders ───────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 4px;
  display: inline-block;
}
.skeleton-row { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.skeleton-row .sk-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.skeleton-row .sk-line   { height: 13px; border-radius: 4px; }
.skeleton-table          { width: 100%; }

/* ── Responsive table system ─────────────────────────────────── */

/* Base: always allow horizontal scroll */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;  /* needed for ::after scroll-hint */
}

/* Desktop: use overflow-x:clip so sticky headers work against window scroll */
@media (min-width: 769px) {
  .table-wrap { overflow-x: clip; }
}

/* Sticky column headers */
.table-wrap table thead th {
  position: sticky;
  top: 65px;
  background: var(--card, #ffffff);
  z-index: 2;
  box-shadow: 0 1px 0 var(--border);
}

/* ── Sticky first column ─────────────────────────────────────── */
/* The name/title column stays visible while other columns scroll */
@media (max-width: 768px) {
  .data-table th:first-child,
  .data-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--card, #fff);
  }
  /* Slightly darker bg on hover rows to make sticky col visible */
  .data-table tr:hover td:first-child { background: var(--bg); }
  /* Checkbox col — sticky but narrow */
  .data-table th.cb-col,
  .data-table td.cb-col {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--card, #fff);
  }
  /* If checkbox is first, second col (name) is also sticky */
  .data-table th:nth-child(2),
  .data-table td:nth-child(2) {
    position: sticky;
    left: 40px;    /* width of cb-col */
    z-index: 3;
    background: var(--card, #fff);
    box-shadow: 2px 0 6px -2px rgba(0,0,0,.08);
  }
  .data-table tr:hover td:nth-child(2) { background: var(--bg); }
}

/* ── Right-edge scroll-hint gradient ─────────────────────────── */
/* Shows a fade on the right to hint that the table is scrollable */
@media (max-width: 768px) {
  .table-wrap {
    /* Will be controlled by JS class below */
  }
  .table-wrap.has-overflow::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 48px;
    background: linear-gradient(to right, transparent, var(--card, #fff));
    pointer-events: none;
    z-index: 4;
    border-radius: 0 var(--radius) var(--radius) 0;
    transition: opacity .2s;
  }
  .table-wrap.scrolled-end::after { opacity: 0; }

  /* Scroll-hint arrow */
  .table-wrap.has-overflow::before {
    content: '→';
    position: absolute;
    top: 50%; right: 8px;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--muted);
    z-index: 5;
    pointer-events: none;
    animation: scrollHintPulse 1.8s ease-in-out 1s 3;
  }
  @keyframes scrollHintPulse {
    0%, 100% { opacity: .4; transform: translateY(-50%) translateX(0); }
    50%       { opacity: 1;  transform: translateY(-50%) translateX(4px); }
  }
}

/* ── Card-row mode for very small phones ─────────────────────── */
/* Rows transform into stacked label/value cards — no horizontal scroll at all */
@media (max-width: 480px) {
  /* Opt-in: add class="data-table card-rows" to tables that work well as cards */
  .data-table.card-rows,
  .data-table.card-rows tbody,
  .data-table.card-rows tr { display: block; }

  .data-table.card-rows thead { display: none; }

  .data-table.card-rows tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 8px;
    padding: 4px 0;
    background: var(--card);
    cursor: pointer;
    transition: box-shadow .15s;
  }
  .data-table.card-rows tr:hover { box-shadow: var(--shadow-md); }

  .data-table.card-rows td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    border: none;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    gap: 12px;
    min-height: 0;
  }
  .data-table.card-rows td:last-child { border-bottom: none; }

  /* Label from data-label attribute */
  .data-table.card-rows td[data-label]::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    flex-shrink: 0;
    min-width: 80px;
  }
  /* Hide empty cells and action-only cells in card mode */
  .data-table.card-rows td:empty { display: none; }
  .data-table.card-rows td.cb-col { display: none; }

  /* Priority border — keep on card */
  .data-table.card-rows tr.priority-urgent { border-left: 3px solid #ef4444; }
  .data-table.card-rows tr.priority-medium { border-left: 3px solid #f59e0b; }
  .data-table.card-rows tr.priority-low    { border-left: 3px solid #10b981; }
}

/* ── Sortable column headers ─────────────────────────────────── */
th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.sortable:hover { color: var(--primary); }
th.sortable .sort-icon { margin-left: 4px; font-size: 11px; opacity: .4; transition: opacity .15s; }
th.sortable.asc  .sort-icon,
th.sortable.desc .sort-icon { opacity: 1; color: var(--primary); }
th.sortable.asc  .sort-icon::before { content: '↑'; }
th.sortable.desc .sort-icon::before { content: '↓'; }
th.sortable:not(.asc):not(.desc) .sort-icon::before { content: '↕'; }

/* ── Priority left-border on ticket rows ─────────────────────── */
tr.priority-low    { border-left: 3px solid #10b981; }
tr.priority-medium { border-left: 3px solid #f59e0b; }
tr.priority-urgent { border-left: 3px solid #ef4444; }
tr.priority-low td:first-child,
tr.priority-medium td:first-child,
tr.priority-urgent td:first-child { padding-left: 10px; }

/* ── J/K keyboard focused row ───────────────────────────────── */
tr.jk-focused {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: rgba(37,99,235,.05) !important;
}
[data-theme="dark"] tr.jk-focused { background: rgba(96,165,250,.08) !important; }

/* ── Form focus rings ────────────────────────────────────────── */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(96,165,250,.18);
}

/* ── Avatar initials ─────────────────────────────────────────── */
.user-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 99px; padding: 2px 8px 2px 2px;
  font-size: 12px; color: var(--text);
}
.user-chip .uc-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0;
}

/* ── Inline undo toast ───────────────────────────────────────── */
.toast { position: relative; display: flex; align-items: center; gap: 8px; }
.toast-undo-btn {
  margin-left: auto; padding: 2px 8px; border-radius: 4px;
  border: 1px solid currentColor; background: transparent;
  color: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  opacity: .8; transition: opacity .15s;
}
.toast-undo-btn:hover { opacity: 1; }
.toast-close-btn {
  margin-left: 4px; background: none; border: none; color: inherit;
  cursor: pointer; opacity: .6; font-size: 14px; padding: 0 2px;
  transition: opacity .15s; line-height: 1;
}
.toast-close-btn:hover { opacity: 1; }

/* ── Ticket slide-in drawer ──────────────────────────────────── */
.ticket-drawer-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.25); opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.ticket-drawer-overlay.open { opacity: 1; pointer-events: all; }
.ticket-drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: 520px; max-width: 95vw;
  background: var(--bg-card, #ffffff); box-shadow: -4px 0 32px rgba(0,0,0,.18);
  z-index: 401; transform: translateX(100%); transition: transform .25s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.ticket-drawer.open { transform: translateX(0); }
.ticket-drawer-header {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.ticket-drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.ticket-drawer-footer {
  padding: 12px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; flex-shrink: 0;
}

/* ── Command palette ──────────────────────────────────────────── */

/* ── Topbar search pill ─────────────────────────────────────── */
.gs-search-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 13px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, color .15s;
  white-space: nowrap;
  user-select: none;
  flex: 1 1 auto; min-width: 0; max-width: 900px;
}
.gs-search-pill:hover {
  border-color: var(--primary);
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}
.gs-search-pill i { font-size: 14px; flex-shrink: 0; }
.gs-pill-text {
  color: var(--muted); font-size: 13px;
}
.gs-pill-kbd {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 11px; font-weight: 500;
  color: var(--muted);
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  margin-left: auto;
  flex-shrink: 0;
}
.gs-search-pill:hover .gs-pill-kbd {
  border-color: var(--primary);
  color: var(--primary);
}
@media (max-width: 768px) {
  .gs-pill-text, .gs-pill-kbd { display: none; }
  .gs-search-pill { border: none; background: none; padding: 6px; }
  .gs-search-pill:hover { box-shadow: none; border: none; }
}
.cmd-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.45); display: flex; align-items: flex-start;
  justify-content: center; padding-top: 14vh;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.cmd-overlay.open { opacity: 1; pointer-events: all; }
.cmd-palette {
  width: 560px; max-width: 95vw;
  background: var(--card, #ffffff);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06);
  overflow: hidden;
}
.cmd-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.cmd-input-wrap i { font-size: 18px; color: var(--muted); }
.cmd-input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 15px; color: var(--text);
}
.cmd-results { max-height: 380px; overflow-y: auto; padding: 6px 0; }
.cmd-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); padding: 8px 18px 4px;
}
.cmd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; cursor: pointer; transition: background .1s;
  font-size: 13px; color: var(--text);
}
.cmd-item:hover, .cmd-item.active { background: var(--bg, #f3f4f6); }
.cmd-item i { font-size: 15px; color: var(--muted); width: 18px; text-align: center; }
.cmd-item-label { flex: 1; }
.cmd-item-sub { font-size: 11px; color: var(--muted); }
.cmd-footer {
  padding: 8px 18px; border-top: 1px solid var(--border);
  display: flex; gap: 16px; font-size: 11px; color: var(--muted);
}
.cmd-footer kbd {
  display: inline-block; padding: 1px 5px; border-radius: 3px;
  border: 1px solid var(--border); background: var(--bg);
  font-size: 10px; font-family: monospace;
}

/* ── Activity feed ───────────────────────────────────────────── */
.activity-item {
  display: flex; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: 12px;
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.activity-text { flex: 1; color: var(--text); line-height: 1.5; }
.activity-time { color: var(--muted); font-size: 11px; white-space: nowrap; }

/* ── Stat delta badges ────────────────────────────────────────── */
.stat-delta {
  font-size: 11px; font-weight: 700; margin-top: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 99px;
}
.stat-delta.up      { background: #fef2f2; color: #ef4444; }
.stat-delta.down    { background: #f0fdf4; color: #16a34a; }
.stat-delta.neutral { background: var(--bg); color: var(--muted); }

/* ── Drag handle ─────────────────────────────────────────────── */
.drag-handle { cursor: grab; color: var(--muted); padding: 0 4px; font-size: 16px; }
.drag-handle:active { cursor: grabbing; }
tr.drag-over { background: var(--bg); outline: 2px dashed var(--primary); }

/* ── Keyboard shortcut hint ──────────────────────────────────── */
.kbd-hint {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--muted);
}
.kbd-hint kbd {
  padding: 1px 5px; border-radius: 3px; font-size: 10px;
  border: 1px solid var(--border); background: var(--bg);
  font-family: monospace;
}

/* ── Print styles ─────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .filter-bar, .btn, .tab-bar,
  .toast-container, #toasts, .cmd-overlay, .ticket-drawer-overlay,
  [onclick], button:not(.print-keep) { display: none !important; }
  .main { margin-left: 0 !important; }
  .content { padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  table { font-size: 11px !important; }
  thead { display: table-header-group; }
  body { background: #fff !important; color: #000 !important; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* ── Skip navigation link (accessibility) ────────────────────── */
.skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  background: var(--primary);
  color: #fff;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  z-index: var(--z-skip);
  border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow-lg);
  transition: top .15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ── Focus-visible styles (keyboard navigation) ──────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 99px;
}
.nav-link:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: -2px;
}
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.modal-close:focus-visible,
.dark-toggle:focus-visible,
.notif-btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 50%;
}

/* ── Accessibility helpers ───────────────────────────────────── */
/* Clickable stat cards need pointer cursor */
.stat-card[onclick], .stat-card[style*="cursor:pointer"], .stat-card[style*="cursor: pointer"] { cursor: pointer; }
/* Warning color as text must meet contrast — use --warning-text instead of --warning */
.text-warning { color: var(--warning-text, #92400e); }
/* Toast live-region base (aria-live set in JS) */
#toast-container { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }

/* ── Reduced motion (WCAG 2.3.3) ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .modal { transform: none !important; }
  .search-box { transform: none !important; }
  .stat-card:hover { transform: none; }
  .kanban-card:hover { transform: none; }
  .skeleton { animation: none; background: var(--border); }
}

/* ── Unified tab bar (standardised across all pages) ─────────── */
.tab-bar { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:24px; padding:0 2px; }
.tab-btn {
  display:flex; align-items:center; gap:7px;
  padding:6px 14px; font-size:13px; font-weight:500;
  border:none; border-bottom:2px solid transparent;
  background:none; color:var(--muted); cursor:pointer;
  margin-bottom:-1px; border-radius:8px 8px 0 0;
  transition:color .15s, background .15s;
  font-family: 'Plus Jakarta Sans', sans-serif;
  white-space:nowrap;
}
.tab-btn:hover { color:var(--text); background: rgba(0,0,0,0.04); }
.tab-btn.active {
  color:var(--primary); font-weight:600;
  border-bottom-color: var(--primary);
  background: rgba(var(--primary-rgb), .07);
}
.tab-btn i { font-size:15px; }
.tab-btn .tab-count {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 99px; padding: 0 7px; font-size: 11px; font-weight: 700;
  color: var(--muted); line-height: 18px; display: inline-block;
}
.tab-btn.active .tab-count { background: var(--primary-l); color: var(--primary); border-color: var(--primary-l); }

/* ── Mobile table priority columns ───────────────────────────── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .data-table .hide-mobile { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — COMPREHENSIVE PASS
   ══════════════════════════════════════════════════════════════ */

/* ── Drawers & overlays: full-screen on mobile ──────────────── */
@media (max-width: 768px) {

  /* Peek drawer — full screen slide-up */
  #peek-drawer {
    width: 100% !important;
    max-width: 100% !important;
    top: auto !important;
    height: 92vh;
    border-radius: 16px 16px 0 0;
  }

  /* Ticket list drawer — full screen */
  .ticket-drawer {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0;
    top: auto !important;
    height: 92vh;
  }

  /* AI assistant panel — full screen */
  #ai-panel {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0;
    top: auto !important;
    height: 92vh;
  }
  #ai-toggle-btn { bottom: auto; top: 50%; transform: translateY(-50%); }

  /* Global search — full width, top-anchored */
  .search-box {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 0 8px;
  }
  .search-overlay { padding-top: 60px; align-items: flex-start; }

  /* Command palette — full width, more compact */
  .cmd-overlay { padding-top: 8vh; align-items: flex-start; }
  .cmd-palette { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
  .cmd-results { max-height: 55vh; }

  /* ── Tab bars — horizontally scrollable ── */
  .tab-bar,
  [class*="tab-bar"] {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px; /* prevent scroll bar clipping active border */
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn { flex-shrink: 0; white-space: nowrap; padding: 8px 12px; font-size: 12px; }

  /* Settings / other pages with inline tab patterns */
  div[style*="border-bottom:1px solid var(--border)"] .tab-btn,
  div[style*="border-bottom: 1px solid var(--border)"] .tab-btn { flex-shrink: 0; }

  /* ── Bulk action bar — mobile-friendly ── */
  .bulk-bar {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    flex-wrap: wrap;
    border-radius: 14px;
    padding: 10px 14px;
    gap: 8px;
    transform: translateX(0) translateY(80px) !important;
  }
  .bulk-bar.visible { transform: translateX(0) translateY(0) !important; }
  .bulk-bar select { flex: 1; min-width: 0; }
  .bulk-bar .btn-bulk-light,
  .bulk-bar .btn-bulk-danger { flex: 1; justify-content: center; text-align: center; }

  /* ── More inline grid overrides ── */
  [style*="grid-template-columns:1fr 240px"],
  [style*="grid-template-columns: 1fr 240px"],
  [style*="grid-template-columns:1fr 220px"],
  [style*="grid-template-columns: 1fr 220px"],
  [style*="grid-template-columns:1fr 200px"],
  [style*="grid-template-columns: 1fr 200px"],
  [style*="grid-template-columns:1fr 280px"],
  [style*="grid-template-columns: 1fr 280px"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:3fr 1fr"],
  [style*="grid-template-columns: 3fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Minmax auto-fill grids — 1 col on small tablet ── */
  [style*="minmax(200px"],
  [style*="minmax(220px"],
  [style*="minmax(250px"],
  [style*="minmax(260px"],
  [style*="minmax(270px"],
  [style*="minmax(280px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Notes vault — single-panel navigation on mobile ── */
  .notes-wrap {
    flex-direction: column !important;
    height: calc(100vh - 130px) !important;
    position: relative;
    overflow: hidden;
  }
  .notes-nav  { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .notes-list { width: 100% !important; border-right: none !important; flex: 1; overflow-y: auto; }
  .notes-editor {
    position: absolute; inset: 0;
    background: var(--card);
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    z-index: 10;
    display: flex !important;
    flex-direction: column;
  }
  .notes-wrap.note-open .notes-editor { transform: translateX(0); }
  .ne-mobile-back { display: flex !important; }
  .ne-body { padding: 12px 14px; }

  /* ── Topbar: hide text on all action buttons, keep icons ── */
  .topbar-actions .btn:not(.btn-primary) .btn-label { display: none; }
  /* Shrink topbar buttons on mobile */
  .topbar-actions { gap: 4px; }
  .topbar-actions .btn-sm { padding: 6px 8px; min-height: 32px; }
  .topbar-actions .btn:not(.btn-primary) { padding: 6px 8px; }

  /* ── Filter bar — balanced wrapping ── */
  .filter-bar .btn { width: auto !important; } /* don't force 100% on small buttons */
  .filter-bar .search-input { min-width: 160px; flex: 1; }

  /* ── Data table: hide less critical columns ── */
  /* Tickets table */
  .tickets-table .col-category { display: none; }
  /* Assets table */
  .assets-table .col-serial { display: none; }
  /* Users table */
  .users-table .col-dept { display: none; }
  /* General: nth-child fallback for unclassed tables */
  .data-table td:nth-child(5),
  .data-table th:nth-child(5) { display: none; }
  .data-table td:nth-child(6),
  .data-table th:nth-child(6) { display: none; }

  /* ── Card grids: 2-col on tablets (600-768) ── */
  [style*="minmax(130px,1fr)"] { grid-template-columns: repeat(3,1fr) !important; }
  [style*="minmax(120px,1fr)"] { grid-template-columns: repeat(3,1fr) !important; }

  /* ── Stat chips in tasks page ── */
  #stats-row { grid-template-columns: repeat(3,1fr) !important; }

  /* ── Ticket detail two-panel layout ── */
  .ticket-body,
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Reports page ── */
  [style*="grid-template-columns:1fr 1fr;gap"] { grid-template-columns: 1fr !important; }

  /* ── Super admin / trends page ── */
  #kpi-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Dependency map ── */
  #ai-panel ~ * .dep-chip { font-size: 12px; }

  /* ── Table-view: hide extra columns ── */
  .hide-tablet { display: none !important; }

  /* ── Touch targets: minimum 44px ── */
  button, a.btn, [role="button"] { min-height: 36px; }

  /* ── Topbar title truncate ── */
  .topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45vw; }
}

/* ── 600px — tablet portrait ───────────────────────────────── */
@media (max-width: 600px) {
  /* Notes: always single column */
  [style*="minmax(200px"],
  [style*="minmax(220px"],
  [style*="minmax(250px"],
  [style*="minmax(260px"],
  [style*="minmax(270px"],
  [style*="minmax(280px"],
  [style*="minmax(300px"],
  [style*="minmax(320px"],
  [style*="minmax(340px"] { grid-template-columns: 1fr !important; }

  /* Stat chips — 2 col */
  [style*="minmax(130px,1fr)"],
  [style*="minmax(120px,1fr)"],
  #stats-row { grid-template-columns: repeat(2,1fr) !important; }

  #kpi-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* Dependency map side panel stacks below graph */
  #dep-layout { flex-direction: column !important; }
  #side-panel { width: 100% !important; min-height: 200px; }
  #graph-container { min-height: 360px; }
}

/* ── 480px — small phones ────── (additions to existing block) ── */
@media (max-width: 480px) {
  /* Stats 2-col */
  #stats-row { grid-template-columns: 1fr 1fr !important; }
  [style*="minmax(130px,1fr)"],
  [style*="minmax(120px,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  #kpi-row { grid-template-columns: 1fr 1fr !important; }

  /* Bulk bar — stack all actions */
  .bulk-bar { padding: 10px; }
  .bulk-bar .btn-bulk-light,
  .bulk-bar .btn-bulk-danger { font-size: 11px; padding: 5px 10px; }

  /* Tab buttons even more compact */
  .tab-btn { padding: 7px 10px; font-size: 11px; }

  /* Notes list shorter on very small phones */
  .notes-list { max-height: 200px; }

  /* Hide all topbar action text, keep only icon */
  .topbar-actions .btn span { display: none; }
  .topbar-actions .btn i { margin: 0; }
  .topbar-actions .btn { padding: 6px 7px !important; min-height: 30px; }

  /* Data table hide even more */
  .data-table td:nth-child(4),
  .data-table th:nth-child(4) { display: none; }
}

/* ── Landscape phones ──────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  #peek-drawer, .ticket-drawer, #ai-panel { height: 85vh; }
  .modal { max-height: 85vh !important; }
  .notes-list { max-height: 180px; }
}

/* ── Password toggle button ──────────────────────────────────── */
.pw-wrap { position: relative; }
.pw-wrap .form-input { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 16px; padding: 4px; line-height: 1;
  transition: color .15s;
}
.pw-toggle:hover { color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   MOTION & POLISH — subtle shadows, animations, micro-interactions
   ══════════════════════════════════════════════════════════════ */

/* ── Toggle switches (used on settings/email pages) ─────────── */
.toggle {
  position: relative; display: inline-block;
  width: 40px; height: 22px; flex-shrink: 0; vertical-align: middle;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(0,0,0,.15); border-radius: 99px;
  transition: background .22s cubic-bezier(.4,0,.2,1);
}
.toggle-slider::before {
  content: '';
  position: absolute; left: 3px; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  transition: transform .22s cubic-bezier(.34,1.3,.64,1), box-shadow .18s;
}
.toggle input:checked + .toggle-slider { background: var(--primary); }
.toggle input:checked + .toggle-slider::before {
  transform: translateX(18px);
  box-shadow: 0 1px 8px rgba(var(--primary-rgb),.45);
}
.toggle input:disabled + .toggle-slider { opacity: .45; cursor: not-allowed; }
[data-theme="dark"] .toggle-slider { background: rgba(255,255,255,.18); }
[data-theme="dark"] .toggle input:checked + .toggle-slider { background: var(--primary); }

/* ── Page content entrance ───────────────────────────────────── */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.content { animation: pageEnter .32s cubic-bezier(.4,0,.2,1) both; }

/* ── Topbar: always flat, no scroll shadow ───────────────────── */
.topbar {
  transition: border-color .2s;
  box-shadow: none !important;
}

/* ── Card hover depth ────────────────────────────────────────── */
.card {
  transition: box-shadow .22s ease;
}
.card:hover {
  box-shadow: 0 4px 28px rgba(0,0,0,.09);
}
[data-theme="dark"] .card:hover {
  box-shadow: 0 4px 28px rgba(0,0,0,.5);
}

/* ── Table row hover ─────────────────────────────────────────── */
tbody tr {
  transition: background .12s;
}
tbody tr:hover {
  background: rgba(0,0,0,.03);
}
[data-theme="dark"] tbody tr:hover {
  background: rgba(255,255,255,.04);
}
/* Row action buttons hidden until row hover */
.row-actions {
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;
}
tbody tr:hover .row-actions {
  opacity: 1;
  pointer-events: auto;
}

/* ── Form input hover (before focus) ────────────────────────── */
.form-input:not(:focus):not(:disabled):hover,
.form-select:not(:focus):not(:disabled):hover,
.form-textarea:not(:focus):not(:disabled):hover {
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
[data-theme="dark"] .form-input:not(:focus):not(:disabled):hover,
[data-theme="dark"] .form-select:not(:focus):not(:disabled):hover,
[data-theme="dark"] .form-textarea:not(:focus):not(:disabled):hover {
  border-color: rgba(255,255,255,.2);
}

/* ── Active nav link — solid pill handled above ─────────────── */

/* ── Notification dot pulse ─────────────────────────────────── */
@keyframes notifPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(220, 38, 38, .5); }
  60%       { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0);  }
}
.notif-dot { animation: notifPulse 2.4s ease-in-out infinite; }

/* ── SLA overdue gentle blink ───────────────────────────────── */
@keyframes slaPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}
.sla-overdue { animation: slaPulse 2.2s ease-in-out infinite; }

/* ── Network status — operational pulse ─────────────────────── */
@keyframes onlinePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.22); }
  50%       { box-shadow: 0 0 0 7px rgba(34,197,94,.04); }
}
.status-dot.operational { animation: onlinePulse 2.8s ease-in-out infinite; }

/* ── Empty state icon float ─────────────────────────────────── */
@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}
.empty-state .icon { animation: floatIcon 3.8s ease-in-out infinite; }

/* ── Kanban card bouncier lift ──────────────────────────────── */
.kanban-card {
  transition: transform .2s cubic-bezier(.34,1.5,.64,1), box-shadow .2s;
}

/* ── Ghost button gets a lift too ───────────────────────────── */
.btn-ghost:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* ── Template chip press ────────────────────────────────────── */
.template-chip:active { transform: scale(.94); transition: transform .08s; }

/* ── Company card shimmer overlay ───────────────────────────── */
.company-card { overflow: hidden; }
.company-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, transparent 55%);
  border-radius: inherit; opacity: 0;
  transition: opacity .25s; pointer-events: none;
}
.company-card:hover::after { opacity: 1; }

/* ── Comment bubble depth on hover ──────────────────────────── */
.comment-bubble {
  transition: box-shadow .18s;
}
.comment:hover .comment-bubble {
  box-shadow: 0 2px 14px rgba(0,0,0,.07);
}
[data-theme="dark"] .comment:hover .comment-bubble {
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* ── Activity icon bounce on row hover ──────────────────────── */
.activity-icon, .activity-dot { transition: transform .15s; }
.activity-item:hover .activity-icon,
.activity-item:hover .activity-dot {
  transform: scale(1.12);
}

/* ── Notification item slide on hover ───────────────────────── */
.notif-item {
  transition: background .12s, transform .12s;
}
.notif-item:hover { transform: translateX(2px); }

/* ── Peek/ticket drawer bouncier open ───────────────────────── */
.ticket-drawer {
  transition: transform .3s cubic-bezier(.34,1.1,.64,1);
}

/* ── Stat card — tighter spring on hover ────────────────────── */
.stat-card {
  transition: box-shadow .22s cubic-bezier(.4,0,.2,1),
              transform  .22s cubic-bezier(.34,1.3,.64,1);
}

/* ── Search box glow on active ──────────────────────────────── */
.search-input-wrap:focus-within {
  background: rgba(var(--primary-rgb), .04);
}

/* ── Badge micro-scale (inside interactive parents only) ─────── */
a:hover .badge, button:hover .badge, [onclick]:hover .badge,
a:hover .status-pill, button:hover .status-pill {
  transform: scale(1.05);
  transition: transform .12s cubic-bezier(.34,1.3,.64,1);
}
.badge { transition: transform .12s; }

/* ── Sidebar toggle glow ────────────────────────────────────── */
.sidebar-toggle-btn {
  transition: background .15s, color .15s, box-shadow .15s, transform .15s;
}
.sidebar-toggle-btn:hover {
  transform: scale(1.1);
}

/* ── Stagger-in utility (add .stagger to a list container) ───── */
@keyframes staggerIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.stagger > * { animation: staggerIn .22s cubic-bezier(.4,0,.2,1) both; }
.stagger > *:nth-child(1) { animation-delay:   0ms; }
.stagger > *:nth-child(2) { animation-delay:  40ms; }
.stagger > *:nth-child(3) { animation-delay:  72ms; }
.stagger > *:nth-child(4) { animation-delay:  98ms; }
.stagger > *:nth-child(5) { animation-delay: 118ms; }
.stagger > *:nth-child(6) { animation-delay: 134ms; }
.stagger > *:nth-child(n+7) { animation-delay: 148ms; }

/* ── Attachment item hover ───────────────────────────────────── */
.attachment-item {
  transition: background .15s, box-shadow .15s;
}
.attachment-item:hover {
  background: var(--card);
  box-shadow: 0 1px 8px rgba(0,0,0,.07);
}

/* ── Topbar notification bell hover spin ─────────────────────── */
.notif-btn { transition: background .18s, color .18s, border-color .18s, transform .18s; }
.notif-btn:hover { transform: rotate(-12deg) scale(1.08); }

/* ── Dark-mode pill text for KPI chips ──────────────────────── */
[data-theme="dark"] .sla-fresh   { animation: none; }

/* ── Reduced-motion overrides for every new animation ─────────── */
@media (prefers-reduced-motion: reduce) {
  .content,
  .stagger > *      { animation: none; }
  .notif-dot        { animation: none; }
  .sla-overdue      { animation: none; }
  .status-dot.operational { animation: none; box-shadow: 0 0 0 3px rgba(34,197,94,.22); }
  .empty-state .icon { animation: none; }
  .company-card::after { display: none; }
  .notif-btn:hover  { transform: none; }
  .sidebar-toggle-btn:hover { transform: none; }
  .kanban-card      { transition: box-shadow .15s; }
  .stat-card        { transition: box-shadow .15s, transform .15s; }
  .ticket-drawer    { transition: transform .25s cubic-bezier(.4,0,.2,1); }
}

/* ── Custom Tooltip System ─────────────────────────────────── */
.tp-bubble {
  position: fixed;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  padding: 5px 10px;
  border-radius: 7px;
  pointer-events: none;
  z-index: 10000;
  max-width: 240px;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .13s, transform .13s;
}
.tp-bubble.tp-show {
  opacity: 1;
  transform: translateY(0);
}
.tp-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
}
.tp-bubble.tp-above::after {
  top: 100%;
  border-top-color: #1e293b;
}
.tp-bubble.tp-below::after {
  bottom: 100%;
  border-bottom-color: #1e293b;
}

/* ══════════════════════════════════════════════════════════════
   OPTION A — Mobile-first UX Enhancements (all pages)
   ══════════════════════════════════════════════════════════════ */

/* ── Mobile Bottom Navigation ──────────────────────────────── */
#mobile-nav { display: none; }

@media (max-width: 768px) {
  /* Replace sidebar with bottom nav */
  #sidebar-container { display: none !important; }
  .sidebar { display: none !important; }           /* ensure sidebar itself is hidden */
  .sidebar-overlay { display: none !important; }  /* no overlay needed */
  .hamburger { display: none !important; }         /* hamburger replaced by bottom nav */
  .main { margin-left: 0 !important; }
  .layout { flex-direction: column; }

  /* Push content up above bottom nav */
  .content { padding-bottom: 76px !important; }

  #mobile-nav {
    display: flex !important;
    flex-direction: row !important;              /* explicit: items go left→right */
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 60px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--card);
    border-top: 1px solid var(--border);
    z-index: 600;
    box-shadow: 0 -2px 20px rgba(0,0,0,.07);
  }
  .mn-item {
    flex: 1 1 0; min-width: 0;                  /* equal width, no overflow */
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px; font-size: 10px; font-weight: 600;
    color: var(--muted); cursor: pointer; border: none;
    background: none; padding: 0; position: relative;
    transition: color .15s; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
  }
  .mn-item i { font-size: 22px; line-height: 1; }
  .mn-item.active { color: var(--primary); }
  .mn-item.active i { filter: drop-shadow(0 0 5px rgba(var(--primary-rgb),.35)); }

  /* More slide-up drawer */
  #mn-more-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.4); z-index: 699;
  }
  #mn-more-overlay.open { display: block; }
  #mn-more-drawer {
    position: fixed; bottom: 60px; left: 0; right: 0;
    background: var(--card);
    border-radius: 20px 20px 0 0;
    z-index: 700; transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    max-height: 70vh; overflow-y: auto;
    box-shadow: 0 -4px 32px rgba(0,0,0,.14);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #mn-more-drawer.open { transform: translateY(0); }
  .mn-drawer-handle {
    width: 36px; height: 4px; background: var(--border);
    border-radius: 99px; margin: 12px auto 6px;
  }
  .mn-more-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px; font-size: 14px; font-weight: 500;
    color: var(--text); text-decoration: none;
    border-top: 1px solid var(--border);
    -webkit-tap-highlight-color: transparent;
  }
  .mn-more-item:active { background: var(--bg); }
  .mn-more-item i { font-size: 18px; color: var(--primary); width: 22px; text-align: center; }
  .mn-more-section { padding: 8px 20px 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--bg); border-top: 1px solid var(--border); }
}

/* ── Table → Card List (mobile) ────────────────────────────── */
@media (max-width: 600px) {
  .data-table { display: block; }
  .data-table thead { display: none; }
  .data-table tbody, .data-table tbody tr { display: block; }
  .data-table tbody tr {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; margin-bottom: 10px; padding: 0; overflow: hidden;
    box-shadow: var(--shadow);
  }
  .data-table tbody tr:hover { border-color: var(--primary); }
  .data-table tbody td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px; border: none;
    border-bottom: 1px solid var(--border);
    font-size: 13px; gap: 10px; min-height: 42px;
  }
  .data-table tbody td:last-child { border-bottom: none; }
  .data-table tbody td::before {
    content: attr(data-label);
    font-size: 11px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .04em;
    flex-shrink: 0; min-width: 90px;
  }
  .data-table tbody td[data-label=""]::before { display: none; }
  .table-wrap { overflow: visible; }
}

/* ── Bottom Sheet Modals (mobile) ───────────────────────────── */
@media (max-width: 640px) {
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal {
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh !important;
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important;
    transform: translateY(40px) scale(1) !important;
  }
  .modal-overlay.open .modal { transform: translateY(0) scale(1) !important; }
  .modal::before {
    content: ''; display: block; width: 36px; height: 4px;
    background: var(--border); border-radius: 99px; margin: 12px auto 2px;
  }
}

/* ── Floating Action Button (mobile) ─────────────────────────── */
.mobile-fab { display: none; }
@media (max-width: 768px) {
  .mobile-fab {
    display: flex; position: fixed;
    bottom: 76px; right: 18px;
    width: 54px; height: 54px;
    background: var(--primary); color: #fff;
    border-radius: 50%; border: none; cursor: pointer;
    align-items: center; justify-content: center;
    font-size: 26px; z-index: 550;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb),.45);
    transition: transform .15s; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-fab:active { transform: scale(.9); }
}

/* ── Mobile View Banner ──────────────────────────────────────── */
.mobile-view-banner { display: none; }
@media (max-width: 768px) {
  .mobile-view-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; font-size: 13px; color: var(--text);
    background: rgba(var(--primary-rgb),.08);
    border-bottom: 1px solid rgba(var(--primary-rgb),.15);
  }
  .mobile-view-banner a {
    margin-left: auto; background: var(--primary); color: #fff;
    padding: 5px 14px; border-radius: 99px; font-size: 12px;
    font-weight: 700; text-decoration: none; white-space: nowrap;
  }
}

/* ── User Search Widget (US) ─────────────────────────────────── */
.usr-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--card); border:1px solid var(--border); border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.12); z-index:300; max-height:220px; overflow-y:auto; }
.usr-item { display:flex; align-items:center; gap:10px; padding:8px 12px; cursor:pointer; transition:background .15s; }
.usr-item:hover { background:var(--surface-secondary); }
.usr-item .usr-av { width:30px; height:30px; border-radius:50%; background:rgba(var(--primary-rgb),.15); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.usr-item .usr-name { font-size:13px; font-weight:500; line-height:1.2; }
.usr-item .usr-sub { font-size:11px; color:var(--muted); line-height:1.2; }
.usr-no-results { padding:10px 14px; font-size:13px; color:var(--muted); text-align:center; }
.user-search-wrap { position:relative; }

/* ── Org Chart ───────────────────────────────────────────────── */
.org-tree { padding: 16px; }
.org-node { margin-bottom: 4px; }
.org-node-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: background 0.15s; }
.org-node-row:hover { background: rgba(var(--primary-rgb), 0.06); }
.org-toggle { background: none; border: none; cursor: pointer; font-size: 11px; color: var(--muted); padding: 2px 4px; min-width: 20px; }
.org-toggle-spacer { display: inline-block; min-width: 20px; }
.org-node-info { flex: 1; min-width: 0; }
.org-node-name { font-weight: 600; font-size: 14px; }
.org-node-title { display: block; font-size: 12px; color: var(--muted); }
.org-children { margin-left: 34px; border-left: 2px solid rgba(var(--primary-rgb), 0.15); padding-left: 12px; margin-top: 4px; }

/* ── Table density toggle ─────────────────────────────────────── */
.density-compact  table td, .density-compact  table th { padding: 5px 12px !important; font-size: 12px !important; }
.density-compact  .avatar { width: 24px !important; height: 24px !important; font-size: 9px !important; }
.density-spacious table td, .density-spacious table th { padding: 14px 16px !important; }
.density-btn { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; cursor: pointer; color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 2px; transition: all .12s; }
.density-btn:hover { border-color: var(--primary); color: var(--primary); }
.density-btn.active { border-color: var(--primary); color: var(--primary); background: rgba(var(--primary-rgb),.07); }

/* ── Filter presets ───────────────────────────────────────────── */
.preset-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 20px 0; }
.preset-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--card); border: 1px solid var(--border); border-radius: 99px; padding: 3px 10px; font-size: 11px; font-weight: 600; cursor: pointer; color: var(--text); transition: all .12s; white-space: nowrap; }
.preset-chip:hover { border-color: var(--primary); color: var(--primary); }
.preset-chip.active { background: rgba(var(--primary-rgb),.09); border-color: rgba(var(--primary-rgb),.35); color: var(--primary); }
.preset-chip i { font-size: 12px; opacity: .6; }
.preset-chip i:hover { opacity: 1; }
.preset-save-btn { background: none; border: 1px dashed var(--border); border-radius: 99px; padding: 3px 10px; font-size: 11px; font-weight: 600; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; transition: all .12s; font-family: inherit; }
.preset-save-btn:hover { border-color: var(--primary); color: var(--primary); }

/* ── Ticket split-pane ────────────────────────────────────────── */
.ticket-split { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.ticket-split .ticket-sidebar { display: flex; flex-direction: column; gap: 16px; }
.ticket-split-toggle { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; cursor: pointer; color: var(--muted); font-size: 13px; transition: all .12s; display: flex; align-items: center; gap: 5px; }
.ticket-split-toggle:hover { border-color: var(--primary); color: var(--primary); }
.ticket-split-toggle.active { border-color: var(--primary); color: var(--primary); background: rgba(var(--primary-rgb),.07); }
@media(max-width:900px) { .ticket-split { grid-template-columns: 1fr; } .ticket-split .ticket-sidebar { display: none !important; } }

/* ── Inline time log chip ─────────────────────────────────────── */
.inline-timelog { display: flex; align-items: center; gap: 8px; margin: 10px 0 16px; padding: 8px 10px; background: var(--surface-secondary); border-radius: 8px; border: 1px solid var(--border); }
.inline-timelog input[type=number] { width: 56px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--card); color: var(--text); font-family: inherit; }
.inline-timelog input[type=number]:focus { outline: none; border-color: var(--primary); }
.inline-timelog-label { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* ── Notifications slide-in panel (v26) ─────────────────────── */
.notif-dropdown {
  position: fixed !important; top: 0 !important; right: -380px !important;
  width: 360px !important; height: 100dvh !important; border-radius: 0 !important;
  opacity: 1 !important; pointer-events: none; transform: none !important;
  z-index: 401 !important; display: flex !important; flex-direction: column;
  box-shadow: -6px 0 32px rgba(0,0,0,.14) !important;
  transition: right .25s cubic-bezier(.4,0,.2,1) !important;
}
.notif-dropdown.open { right: 0 !important; pointer-events: all !important; }
.notif-backdrop { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .25s; }
.notif-backdrop.open { opacity: 1; pointer-events: all; }
.notif-tabs { display: flex; padding: 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--card); }
.notif-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; padding: 9px 12px; font-size: 12px; font-weight: 600; color: var(--muted); transition: all .15s; font-family: inherit; white-space: nowrap; display: flex; align-items: center; }
.notif-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.notif-tab-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--danger); color: #fff; border-radius: 99px; font-size: 9px; font-weight: 800; min-width: 14px; height: 14px; padding: 0 3px; margin-left: 5px; }
.notif-dropdown #notif-list { flex: 1 !important; overflow-y: auto !important; min-height: 0; max-height: none !important; }
.notif-dropdown .notif-header { flex-shrink: 0; }
.notif-dropdown #notif-prefs-panel { flex-shrink: 0; }

/* ── Live ticket timer ───────────────────────────────────────── */
.ticket-timer { display: flex; align-items: center; gap: 5px; background: var(--card); border: 1.5px solid var(--border); border-radius: 99px; padding: 4px 10px 4px 8px; font-size: 12px; font-weight: 700; font-family: 'Courier New', monospace; transition: border-color .2s, background .2s, color .2s; cursor: default; }
.ticket-timer.running { border-color: #22c55e !important; background: rgba(34,197,94,.07) !important; color: #22c55e !important; }
.timer-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; transition: background .2s; }
.ticket-timer.running .timer-dot { background: #22c55e; animation: pulse-dot 1.2s ease-in-out infinite; }
#timer-display { min-width: 50px; text-align: center; }
.timer-btn { background: none; border: none; cursor: pointer; padding: 2px 3px; border-radius: 4px; font-size: 13px; line-height: 1; transition: opacity .15s; opacity: .65; color: inherit; }
.timer-btn:hover { opacity: 1; }

/* ── Collapsible card sections ───────────────────────────────── */
.card-toggle-btn { background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px 4px; border-radius: 4px; font-size: 15px; line-height: 1; flex-shrink: 0; opacity: 0; transition: opacity .15s, transform .2s; }
.card-header:hover .card-toggle-btn { opacity: 0.55; }
.card.collapsed .card-toggle-btn { opacity: 0.55; transform: rotate(-90deg); }
.card.collapsed > *:not(.card-header) { display: none !important; }

/* ── Plan lock banner ─────────────────────────────────────────── */
.plan-lock-banner { display:flex; align-items:center; gap:12px; background:var(--card); border:1.5px solid var(--border); border-left:4px solid var(--primary); border-radius:10px; padding:14px 16px; }
.plan-lock-icon { width:36px; height:36px; border-radius:8px; background:rgba(var(--primary-rgb),.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px; color:var(--primary); }
.plan-lock-title { font-size:14px; font-weight:600; color:var(--text); }
.plan-lock-sub { font-size:12px; color:var(--muted); margin-top:2px; }

/* ── Plan page ────────────────────────────────────────────────── */
.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.plan-card { background:var(--card); border:1.5px solid var(--border); border-radius:14px; padding:44px 24px 24px; position:relative; transition:box-shadow .2s; min-width:0; display:flex; flex-direction:column; margin-top:16px; overflow:visible; }
.plan-card:hover { box-shadow:0 4px 20px rgba(0,0,0,.08); }
.plan-card.plan-current { border-color:var(--primary); border-width:2px; }
.plan-card.plan-popular { border-color:var(--primary); }
/* Badges sit inside card top (never negative top) — avoids ancestor overflow clipping */
.plan-popular-badge,
.plan-current-badge { position:absolute; top:12px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:600; padding:3px 14px; border-radius:20px; white-space:nowrap; }
.plan-popular-badge { background:var(--primary); color:#fff; }
.plan-current-badge { background:rgba(var(--primary-rgb),.12); color:var(--primary); border:1px solid rgba(var(--primary-rgb),.3); }
.plan-name { font-size:13px; font-weight:600; color:var(--muted); margin-bottom:8px; margin-top:4px; }
.plan-price-big { font-size:36px; font-weight:700; color:var(--text); line-height:1; }
.plan-price-big span { font-size:14px; font-weight:400; color:var(--muted); }
.plan-annual-note { font-size:11px; color:var(--muted); margin:4px 0 16px; }
.plan-divider { border:none; border-top:1px solid var(--border); margin:16px 0; }
.plan-feat-list { list-style:none; padding:0; margin:0 0 16px; font-size:13px; color:var(--text-secondary); flex:1; }
.plan-feat-list li { padding:4px 0; display:flex; align-items:center; gap:8px; }
.plan-feat-list li i.ri-check-line { color:#22c55e; flex-shrink:0; }
.plan-feat-list li i.ri-close-line { color:var(--muted); opacity:.5; flex-shrink:0; }
/* CTA button always sticks to the bottom of every card */
.plan-card > .btn, .plan-card > a.btn { margin-top:auto; }

@media (max-width:960px) { .plan-grid { grid-template-columns:1fr; gap:20px; } }
@media (max-width:768px) { .plan-grid { grid-template-columns:1fr; } }

/* Generic small per-field copy button — used on info/overview rows portal-wide */
.copy-row-btn {
  width:20px; height:20px; flex-shrink:0; border:none; background:none; cursor:pointer;
  border-radius:5px; color:var(--text); display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; opacity:.3; transition:opacity .15s,color .15s,background .15s;
}
.copy-row-btn:hover { opacity:1; background:rgba(var(--primary-rgb),.1); color:var(--primary); }

/* ── Floating pill filters ───────────────────────────────────── */
.filter-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 16px;
}
.filter-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 14px; font-size: 12px; font-weight: 600;
  border-radius: 99px; cursor: pointer; user-select: none;
  border: 1.5px solid var(--border);
  background: var(--card); color: var(--muted);
  transition: color .15s, background .15s, border-color .15s;
  white-space: nowrap;
}
.filter-pill:hover { color: var(--text); border-color: var(--primary); }
.filter-pill.active {
  background: rgba(var(--primary-rgb), .12);
  color: var(--primary); border-color: var(--primary);
}
.filter-pill i { font-size: 13px; }

/* ── Period toggle group ─────────────────────────────────────── */
.toggle-group {
  display: inline-flex; border-radius: 8px; overflow: hidden;
  border: 1.5px solid var(--border); background: var(--sidebar-h);
  gap: 0;
}
.toggle-btn {
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  border: none; background: none; color: var(--muted);
  cursor: pointer; transition: color .12s, background .12s;
  white-space: nowrap;
}
.toggle-btn:hover { color: var(--text); }
.toggle-btn.active {
  background: var(--primary); color: #fff;
}
[data-theme="dark"] .toggle-btn.active { color: #fff; }

/* ── Minimal stat card ───────────────────────────────────────── */
.stat-card-min {
  background: var(--card); border-radius: var(--radius-sm);
  padding: 20px 24px; border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.stat-card-min .sc-num {
  font-size: 36px; font-weight: 700; line-height: 1;
  color: var(--text); letter-spacing: -1px;
}
.stat-card-min .sc-row {
  display: flex; align-items: baseline; gap: 8px; margin-top: 4px;
}
.stat-card-min .sc-lbl {
  font-size: 12px; font-weight: 500; color: var(--muted);
}
.stat-card-min .sc-delta-inline {
  font-size: 11px; font-weight: 700; padding: 1px 6px;
  border-radius: 99px;
}
.stat-card-min .sc-delta-inline.up   { background: rgba(34,197,94,.12); color: #15803d; }
.stat-card-min .sc-delta-inline.down { background: rgba(220,38,38,.12); color: #dc2626; }
[data-theme="dark"] .stat-card-min .sc-delta-inline.up   { background: rgba(34,197,94,.15); color: #86efac; }
[data-theme="dark"] .stat-card-min .sc-delta-inline.down { background: rgba(220,38,38,.15); color: #fca5a5; }

/* ── Topbar breadcrumb ───────────────────────────────────────── */
.topbar-breadcrumb {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--muted);
}
.topbar-breadcrumb .bc-sep { opacity: .5; font-size: 15px; }
.topbar-breadcrumb .bc-link {
  color: var(--muted); text-decoration: none;
  transition: color .15s;
}
.topbar-breadcrumb .bc-link:hover { color: var(--primary); }
.topbar-breadcrumb .bc-current {
  color: var(--text); font-weight: 600;
}