/* ============================================================
   ABI Help Desk — Main Stylesheet
   ============================================================ */

:root {
  --sidebar-width:   240px;
  --topbar-height:   56px;
  --primary:         #3b82f6;
  --sidebar-active:  #3b82f6;

  /* Surfaces */
  --body-bg:       #f0f4f8;
  --surface:       #ffffff;
  --surface-muted: #f8fafc;
  --surface-hover: #f1f5f9;
  --track-bg:      #e5e9f0;
  --topbar-bg:     #ffffff;
  --sidebar-bg:    #ffffff;
  --sidebar-hover: #f0f9ff;

  /* Borders / dividers */
  --border:       #e2e8f0;
  --border-soft:  #eef2f7;
  --divider:      #f1f5f9;
  --input-border: #d1d5db;

  /* Text */
  --ink:            #1e293b;
  --ink-2:          #0f172a;
  --body-text:      #374151;
  --text-secondary: #475569;
  --text-muted:     #64748b;
  --text-faint:     #94a3b8;

  /* Links */
  --link:       #1e3a8a;
  --link-hover: #1e40af;

  --card-shadow: 0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --sidebar-active: #60a5fa;

  --body-bg:       #0b1220;
  --surface:       #131c2e;
  --surface-muted: #1a2438;
  --surface-hover: #1e2a40;
  --track-bg:      #24304a;
  --topbar-bg:     #0f1626;
  --sidebar-bg:    #0f1626;
  --sidebar-hover: rgba(59,130,246,.16);

  --border:       #263149;
  --border-soft:  #232d44;
  --divider:      #22293c;
  --input-border: #33415c;

  --ink:            #f1f5f9;
  --ink-2:          #ffffff;
  --body-text:      #cbd5e1;
  --text-secondary: #a8b6c8;
  --text-muted:     #94a3b8;
  --text-faint:     #7383a0;

  --link:       #93c5fd;
  --link-hover: #bfdbfe;

  --card-shadow: 0 1px 4px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
}

/* ---- Base ---- */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body {
  font-family: 'Calibri', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--body-bg);
  color: var(--body-text);
  font-size: 1rem;
  transition: background-color .2s ease, color .2s ease;
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
.text-primary { color: var(--link) !important; }
.ticket-subject a, .ticket-subject a:hover { color: var(--link); }

/* ---- Topbar ---- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-height);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  z-index: 1030;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 0.75rem;
  transition: background-color .2s ease, border-color .2s ease;
}
.topbar .brand-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.topbar-logo {
  height: 38px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}
.topbar-logo.logo-dark { display: none; }
[data-theme="dark"] .topbar-logo.logo-light { display: none; }
[data-theme="dark"] .topbar-logo.logo-dark { display: block; }

#sidebarToggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}
#sidebarToggle:hover { background: var(--surface-hover); }

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.topbar-right .nav-link {
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.topbar-date {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
.topbar-right .dropdown-toggle::after { display: none; }
.topbar-right .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sidebar-active);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- Theme toggle ---- */
.theme-toggle {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-hover);
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background .15s, color .15s, transform .15s;
}
.theme-toggle:hover { background: var(--primary); color: #fff; transform: translateY(-1px) rotate(12deg); }

/* ---- Notifications bell ---- */
.notif-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 999px;
  background: #dc2626; color: #fff;
  font-size: .6rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--topbar-bg);
}

/* Themed explicitly (not left to Bootstrap's dropdown defaults) so it
   stays fully legible in dark mode regardless of Bootstrap's own
   color-mode wiring. */
.notif-menu {
  width: 360px;
  max-width: 90vw;
  padding: 0;
  background: var(--surface);
  color: var(--body-text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 44px -14px rgba(15,23,42,.4);
  overflow: hidden;
}
[data-theme="dark"] .notif-menu {
  box-shadow: 0 20px 44px -14px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04);
}
.notif-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.1rem;
  font-size: .85rem; font-weight: 800; color: var(--ink);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--divider);
}
.notif-menu-head form { margin: 0; }
.notif-mark-all {
  border: none; background: none;
  color: var(--primary); font-size: .72rem; font-weight: 700;
  cursor: pointer; padding: 0;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item {
  position: relative;
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .75rem 1.1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--divider);
  background: var(--surface);
  transition: background .12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-hover); }
.notif-item.unread .notif-msg { font-weight: 700; color: var(--ink); }
.notif-dot {
  position: absolute; top: 1rem; right: 1rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--surface);
}
.notif-ico {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: .92rem;
  background: var(--nic-bg, var(--surface-hover));
  color: var(--nic-fg, var(--text-muted));
}
.notif-ico-new_ticket { --nic-fg: #2563eb; --nic-bg: rgba(37,99,235,.14); }
.notif-ico-assigned   { --nic-fg: #7c3aed; --nic-bg: rgba(124,58,237,.14); }
.notif-ico-status     { --nic-fg: #d97706; --nic-bg: rgba(217,119,6,.14); }
.notif-ico-comment    { --nic-fg: #0891b2; --nic-bg: rgba(8,145,178,.14); }
.notif-ico-resolved   { --nic-fg: #16a34a; --nic-bg: rgba(22,163,74,.14); }
.notif-body { min-width: 0; padding-right: .9rem; }
.notif-msg {
  display: block; font-size: .82rem; color: var(--body-text);
  line-height: 1.4; overflow-wrap: anywhere;
}
.notif-time { display: block; font-size: .7rem; color: var(--text-faint); margin-top: 3px; }
.notif-empty {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 2.2rem 1rem; text-align: center;
  color: var(--text-faint); font-size: .82rem;
  background: var(--surface);
}
.notif-empty i { font-size: 1.7rem; color: #22c55e; }

/* ---- Notification toasts (bottom-right, pop up as new ones arrive) ---- */
.notif-toast-stack {
  position: fixed;
  bottom: 1.1rem;
  right: 1.1rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: 340px;
  max-width: calc(100vw - 1.6rem);
  pointer-events: none;
}
.notif-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: .65rem;
  background: var(--surface);
  color: var(--body-text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .8rem .9rem;
  box-shadow: 0 14px 34px -10px rgba(15,23,42,.4);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}
[data-theme="dark"] .notif-toast {
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
}
.notif-toast.show { opacity: 1; transform: translateY(0); }
.notif-toast.hide { opacity: 0; transform: translateY(10px); }
.notif-toast-body { min-width: 0; flex: 1; }
.notif-toast-msg {
  display: block; font-size: .83rem; font-weight: 700; color: var(--ink);
  line-height: 1.4; overflow-wrap: anywhere;
}
.notif-toast-time { display: block; font-size: .7rem; color: var(--text-faint); margin-top: 3px; }
.notif-toast-close {
  border: none; background: none; color: var(--text-faint);
  font-size: 1.1rem; line-height: 1; padding: 0; cursor: pointer; flex-shrink: 0;
}
.notif-toast-close:hover { color: var(--text-secondary); }
@media (max-width: 480px) {
  .notif-toast-stack { right: .8rem; left: .8rem; bottom: .8rem; width: auto; }
}

/* ---- Sidebar ---- */
.sidebar {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, background-color .2s ease, border-color .2s ease;
  z-index: 1020;
}
.sidebar.collapsed { transform: translateX(-100%); }

.sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.85rem 0.65rem 0.5rem;
}

.sidebar-footer {
  flex: 0 0 auto;
  padding: 0.75rem 0.65rem;
  border-top: 1px solid var(--divider);
  background: var(--sidebar-bg);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.55rem;
  margin-bottom: 0.5rem;
}
.sidebar-user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--sidebar-active), #6366f1);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
}
.sidebar-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.sidebar-user-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-email {
  font-size: .7rem;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-dept {
  font-size: .66rem;
  color: var(--text-faint);
  opacity: .8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-item-logout {
  color: #dc3545;
}
.nav-item-logout i {
  background: rgba(220,53,69,.1);
  color: #dc3545;
}
.nav-item-logout:hover {
  background: rgba(220,53,69,.1) !important;
  color: #dc3545 !important;
  transform: translateX(2px);
}
.nav-item-logout:hover i {
  background: #dc3545 !important;
  color: #fff !important;
}

.sidebar-section {
  padding: 1rem 0.6rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
}
.sidebar-section:not(:first-child) {
  margin-top: .35rem;
  border-top: 1px solid var(--divider);
  padding-top: 1.1rem;
}

.sidebar a.nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  margin-bottom: 2px;
  border-radius: 10px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.92rem;
  transition: background .15s, color .15s, transform .1s;
}
.sidebar a.nav-item i {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-hover);
  color: var(--text-muted);
  font-size: .95rem; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.sidebar a.nav-item span { flex: 1; }
.sidebar a.nav-item:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-active);
  transform: translateX(2px);
}
.sidebar a.nav-item:hover i { background: rgba(59,130,246,.16); color: var(--sidebar-active); }
.sidebar a.nav-item.active {
  background: linear-gradient(115deg, rgba(59,130,246,.16), rgba(37,99,235,.05));
  color: var(--sidebar-active);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.16);
}
.sidebar a.nav-item.active i { background: var(--sidebar-active); color: #fff; }

/* ---- Page wrapper ---- */
.wrapper {
  margin-left: var(--sidebar-width);
  padding-top: var(--topbar-height);
  min-height: 100vh;
  transition: margin-left .25s ease;
}
.wrapper.sidebar-collapsed { margin-left: 0; }

.page-content {
  padding: 1.5rem;
}

/* ---- Page header ---- */
.page-header {
  margin-bottom: 1.5rem;
}
.page-header h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.page-header .breadcrumb {
  font-size: 0.8rem;
  margin: 0.25rem 0 0;
}

/* ---- Stat cards ---- */
.stat-card {
  border: none;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--surface);
}
.stat-card .stat-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.stat-card .stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.stat-blue   .stat-icon { background: #e0f2fe; color: #3b82f6; }
.stat-red    .stat-icon { background: #fee2e2; color: #dc2626; }
.stat-green  .stat-icon { background: #d1fae5; color: #059669; }
.stat-amber  .stat-icon { background: #fef3c7; color: #d97706; }
.stat-purple .stat-icon { background: #ede9fe; color: #7c3aed; }
.stat-teal   .stat-icon { background: #ccfbf1; color: #0d9488; }

/* ---- Cards ---- */
.card {
  border: none;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  background-color: var(--surface);
  color: var(--body-text);
}
.card-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-radius: 10px 10px 0 0 !important;
  font-weight: 600;
  color: var(--ink);
  padding: 0.875rem 1.25rem;
}

/* ---- Tables ---- */
.table {
  color: var(--body-text);
}
.table th {
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--surface-muted);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.table td { vertical-align: middle; border-color: var(--divider); }
.table-hover tbody tr:hover { background: var(--surface-hover); color: var(--body-text); }

/* ---- Badges ---- */
.badge { font-size: 0.72rem; font-weight: 600; letter-spacing: .03em; }
.badge.bg-primary { background-color: #1e3a8a !important; }
.badge.bg-info    { background-color: #1e3a8a !important; }

@keyframes urgentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
  50%       { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}
.badge-urgent { animation: urgentPulse 1.8s infinite; }

/* ---- Forms ---- */
.form-label { font-weight: 600; font-size: 0.825rem; color: var(--body-text); }
.form-control, .form-select {
  border-color: var(--input-border);
  font-size: 0.875rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--surface);
  color: var(--ink);
}
[data-theme="dark"] .form-control::placeholder {
  color: var(--text-faint);
  opacity: 1;
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-select:disabled {
  background-color: var(--surface-hover);
  color: var(--text-faint);
}
.char-counter { font-size: 0.75rem; color: var(--text-faint); }

/* ---- Ticket list status column ---- */
.ticket-subject a {
  color: var(--ink);
  font-weight: 400;
  text-decoration: none;
}
.ticket-subject a:hover { color: var(--primary); }
.ticket-subject small { color: var(--text-muted); }

/* ---- Ticket view ---- */
.ticket-meta dt { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
.ticket-meta dd { font-size: 0.875rem; color: var(--ink); margin-bottom: 0.75rem; }

/* Comment thread */
.comment-thread .comment-item {
  border-left: 3px solid var(--border);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--surface);
  border-radius: 0 8px 8px 0;
  box-shadow: var(--card-shadow);
}
.comment-thread .comment-item.internal {
  border-left-color: #f59e0b;
  background: #fffbeb;
}
[data-theme="dark"] .comment-thread .comment-item.internal {
  background: rgba(245,158,11,.10);
}
.comment-thread .comment-item.reply {
  margin-left: 2rem;
  border-left-color: #93c5fd;
}
.comment-author { font-weight: 700; font-size: 0.825rem; color: var(--ink); }
.comment-time   { font-size: 0.75rem; color: var(--text-faint); }
.comment-body   { font-size: 0.875rem; color: var(--body-text); margin-top: 0.35rem; white-space: pre-wrap; word-break: break-word; }
.internal-badge { font-size: 0.68rem; background: #fef3c7; color: #92400e; border-radius: 4px; padding: 1px 6px; font-weight: 700; }

/* History timeline */
.history-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.history-timeline::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 11px;
  width: 2px; background: var(--border);
}
.history-timeline li {
  position: relative;
  padding: 0 0 0.75rem 2rem;
  font-size: 0.825rem;
  color: var(--text-secondary);
}
.history-timeline li::before {
  content: '';
  position: absolute; left: 5px; top: 5px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--border); border: 2px solid var(--text-faint);
}
.history-timeline li strong { color: var(--ink); }

/* ---- Reports ---- */
.chart-container { position: relative; height: 280px; }

/* ---- Login page ---- */
.login-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #e0f2fe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  padding: 2.5rem 2rem;
}
.login-logo {
  text-align: center;
  margin-bottom: 1.25rem;
}

/* Login tabs */
.login-tabs {
  display: flex;
  border-radius: 10px;
  background: #f1f5f9;
  padding: 4px;
  gap: 4px;
  margin-bottom: 0.25rem;
}
.login-tab {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 7px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
}
/* Three tabs (Sign In / Sign Up / Forgot Password) need tighter spacing to fit */
.login-tabs:has(.login-tab:nth-child(3)) .login-tab {
  padding: 0.5rem 0.4rem;
  font-size: 0.72rem;
}
.login-tab.active {
  background: #fff;
  color: #1e293b;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.login-brand-logo {
  max-width: 220px;
  height: auto;
  display: block;
  margin: 0 auto 0.75rem;
}
.login-brand-sub {
  color: #64748b;
  font-size: 0.875rem;
  margin: 0;
}

/* Forgot/reset password panel */
.login-icon-badge {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1e40af);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin: .25rem auto 1rem;
  box-shadow: 0 10px 24px -8px rgba(30,64,175,.5);
}
.login-panel-title {
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: #1e293b;
  margin: 0 0 .35rem;
}
.login-panel-sub {
  text-align: center;
  font-size: .82rem;
  color: #64748b;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}
.login-back-link {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  margin-top: 1.1rem;
  font-size: .82rem; font-weight: 700;
  color: #64748b;
  text-decoration: none;
}
.login-back-link:hover { color: #1e293b; }
.login-card .alert { text-align: center; }

/* Inline per-field errors on the sign-up form — small and directly under
   the field it belongs to, instead of one big alert box up top. */
.field-error {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  font-weight: 600;
  color: #dc2626;
}

/* ---- Fasttrack-style Dashboard ---- */
.ft-company-header {
  background: var(--surface);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
  box-shadow: var(--card-shadow);
}
.ft-company-name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ink);
}
.ft-company-sub {
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: 2px;
}

.ft-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  padding-left: 0.75rem;
  border-left: 4px solid #3b82f6;
}

/* Fasttrack stat cards */
.ft-stat-card {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 90px;
  height: 90px;
  transition: transform .15s, box-shadow .15s;
}
.ft-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
}
.ft-stat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.ft-stat-body { min-width: 0; }
.ft-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.ft-stat-label {
  font-size: 0.68rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 3px;
  white-space: nowrap;
}

/* SLA rows */
.ft-sla-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ft-sla-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.ft-sla-info { flex: 1; min-width: 0; }
.ft-sla-label { font-size: 0.8rem; font-weight: 600; color: var(--body-text); }
.ft-progress { height: 6px; border-radius: 99px; background: var(--track-bg); overflow: hidden; }
.ft-progress .progress-bar { min-width: 6px; border-radius: inherit; }
.ft-sla-stats { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.ft-sla-count { font-size: 1.1rem; font-weight: 800; color: var(--ink); min-width: 22px; text-align: right; }
.ft-sla-badge {
  font-size: 0.7rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  white-space: nowrap;
  min-width: 54px;
  text-align: center;
}

/* Pending tickets list */
.ft-pending-list {
  list-style: none;
  margin: 0; padding: 0;
}
.ft-pending-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--divider);
  transition: background .12s;
}
.ft-pending-list li:last-child { border-bottom: none; }
.ft-pending-list li:hover { background: var(--surface-hover); }
.ft-pending-icon { font-size: 1.1rem; flex-shrink: 0; }
.ft-pending-label { flex: 1; font-size: 0.82rem; font-weight: 600; color: var(--body-text); text-transform: uppercase; letter-spacing: .03em; }
.ft-pending-count { font-size: 1rem; font-weight: 800; color: var(--ink); }

/* ---- Button animations ---- */
.btn {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  position: relative;
  overflow: hidden;
}
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.btn:active:not(:disabled) {
  transform: translateY(0px) scale(.97);
  box-shadow: none;
}

/* Ripple effect on click */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.25);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0);
  transition: transform .35s ease, opacity .35s ease;
}
.btn:active::after {
  transform: scale(2);
  opacity: 1;
  transition: 0s;
}

/* ---- Utilities ---- */
.text-muted-sm { font-size: 0.78rem; color: var(--text-faint); }
.btn-icon { padding: 0.25rem 0.5rem; }

/* ============================================================
   TICKET LIST EXPERIENCE  (All Tickets / My Tickets)
   ============================================================ */

/* ---- Hero header ---- */
.tk-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 1.35rem 1.6rem;
  margin-bottom: 1.15rem;
  color: #fff;
  background: linear-gradient(115deg, #172554 0%, #1e40af 48%, #2563eb 100%);
  box-shadow: 0 14px 34px -16px rgba(30, 58, 138, .75);
}
.tk-hero::before,
.tk-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.tk-hero::after  { right: -70px;  top: -110px;    width: 300px; height: 300px; background: rgba(255,255,255,.08); }
.tk-hero::before { right: 110px;  bottom: -150px; width: 230px; height: 230px; background: rgba(255,255,255,.05); }

.tk-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.tk-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: .3rem;
}
.tk-hero-eyebrow a { color: rgba(255,255,255,.7); text-decoration: none; }
.tk-hero-eyebrow a:hover { color: #fff; }
.tk-hero h1 {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 0;
  color: #fff;
}
.tk-hero-sub {
  font-size: .84rem;
  color: rgba(255,255,255,.78);
  margin: .3rem 0 0;
}
.tk-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.btn-hero, .btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 10px;
  padding: .5rem .95rem;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .15s, background .15s, box-shadow .15s;
  cursor: pointer;
}
.btn-hero { background: #fff; color: #1e3a8a; box-shadow: 0 4px 14px -4px rgba(0,0,0,.4); }
.btn-hero:hover { color: #1e3a8a; transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(0,0,0,.45); }
.btn-hero-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.btn-hero-ghost:hover { background: rgba(255,255,255,.22); color: #fff; transform: translateY(-2px); }
.btn-hero-ghost .tk-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251,191,36,.3);
}

/* ---- Clickable stat tiles ---- */
.tk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: .65rem;
  margin-bottom: 1.1rem;
}
.tk-stat {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--surface);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: .7rem .8rem;
  text-decoration: none;
  box-shadow: var(--card-shadow);
  transition: transform .16s, box-shadow .16s, border-color .16s, background .16s;
}
.tk-stat:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -12px rgba(15,23,42,.4); }
.tk-stat.active { border-color: var(--tk-fg); background: var(--surface-hover); }
.tk-stat-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
  background: var(--tk-bg);
  color: var(--tk-fg);
}
.tk-stat-txt { min-width: 0; }
.tk-stat-val { font-size: 1.3rem; font-weight: 800; color: var(--ink-2); line-height: 1; }
.tk-stat-lbl {
  font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint); margin-top: 3px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Tile colour tokens (shared with pills below) */
.tk-c-all      { --tk-fg: #1e3a8a; --tk-bg: #e0e7ff; --tk-soft: #f5f6ff; }
.tk-c-open     { --tk-fg: #1d4ed8; --tk-bg: #dbeafe; --tk-soft: #f2f7ff; }
.tk-c-progress { --tk-fg: #b45309; --tk-bg: #fef3c7; --tk-soft: #fffbf0; }
.tk-c-hold     { --tk-fg: #475569; --tk-bg: #e2e8f0; --tk-soft: #f8fafc; }
.tk-c-onhold   { --tk-fg: #c2410c; --tk-bg: #ffedd5; --tk-soft: #fff7ed; }
.tk-c-resolved { --tk-fg: #047857; --tk-bg: #d1fae5; --tk-soft: #f2fdf8; }
.tk-c-closed   { --tk-fg: #334155; --tk-bg: #e5e7eb; --tk-soft: #f8fafc; }
.tk-c-urgent   { --tk-fg: #b91c1c; --tk-bg: #fee2e2; --tk-soft: #fff5f5; }
.tk-c-overdue  { --tk-fg: #be123c; --tk-bg: #ffe4e6; --tk-soft: #fff5f6; }

/* ---- Toolbar ---- */
.tk-toolbar {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  background: var(--surface);
  border-radius: 12px;
  padding: .6rem .7rem;
  box-shadow: var(--card-shadow);
  margin-bottom: .85rem;
}
.tk-search { position: relative; flex: 1 1 260px; min-width: 190px; }
.tk-search > i.bi-search {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); font-size: .9rem; pointer-events: none;
}
.tk-search input {
  width: 100%;
  border: 1.5px solid var(--border);
  background: var(--surface-muted);
  border-radius: 9px;
  padding: .5rem 2rem .5rem 2.15rem;
  font-size: .875rem;
  color: var(--ink);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.tk-search input::placeholder { color: var(--text-faint); }
.tk-search input:focus {
  outline: none; background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.14);
}
.tk-search-clear {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); font-size: .95rem; text-decoration: none; line-height: 1;
}
.tk-search-clear:hover { color: #ef4444; }

.tk-select {
  border: 1.5px solid var(--border);
  background: var(--surface-muted);
  border-radius: 9px;
  padding: .5rem 2rem .5rem .7rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: 13px;
}
.tk-select:focus { outline: none; border-color: var(--primary); background-color: var(--surface); box-shadow: 0 0 0 3px rgba(59,130,246,.14); }

.tk-seg {
  display: inline-flex;
  background: var(--surface-hover);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}
.tk-seg a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .7rem;
  border-radius: 7px;
  font-size: .8rem; font-weight: 600;
  color: var(--text-muted); text-decoration: none;
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.tk-seg a:hover { color: var(--ink); }
.tk-seg a.active { background: var(--surface); color: var(--link); box-shadow: 0 1px 4px rgba(15,23,42,.14); }
.tk-seg a .tk-seg-count {
  font-size: .68rem; font-weight: 800;
  background: var(--border); color: var(--text-secondary);
  border-radius: 20px; padding: 1px 7px;
}
.tk-seg a.active .tk-seg-count { background: #dbeafe; color: #1d4ed8; }

.tk-filter-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1.5px solid var(--border); background: var(--surface-muted);
  border-radius: 9px; padding: .5rem .8rem;
  font-size: .82rem; font-weight: 600; color: var(--text-secondary);
  text-decoration: none; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.tk-filter-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(59,130,246,.12); }
.tk-filter-btn .tk-filter-count {
  font-size: .66rem; font-weight: 800; color: #fff;
  background: var(--primary); border-radius: 20px; padding: 1px 6px;
}

/* ---- Result bar + active filter chips ---- */
.tk-resultbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
  margin-bottom: .7rem;
}
.tk-count { font-size: .8rem; color: var(--text-muted); }
.tk-count strong { color: var(--ink); font-weight: 800; }
.tk-chips { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.tk-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: .2rem .5rem .2rem .65rem;
  font-size: .74rem; font-weight: 600; color: var(--text-secondary);
  text-decoration: none;
  box-shadow: var(--card-shadow);
}
.tk-chip:hover { color: #b91c1c; border-color: #fecaca; }
.tk-chip i { font-size: .8rem; opacity: .6; }
.tk-chip:hover i { opacity: 1; }
.tk-chip-clear { color: #dc2626; border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.1); }

/* ---- Ticket cards (shared by list + grid views) ---- */
.tk-list { display: flex; flex-direction: column; gap: .6rem; }
.tk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: .75rem;
}

.tk-row {
  --pr: #cbd5e1;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: .85rem 1rem .85rem 1.35rem;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tk-row::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--pr);
}
.tk-row:hover {
  transform: translateY(-2px);
  border-color: #dbeafe;
  box-shadow: 0 14px 28px -14px rgba(15,23,42,.45);
}
.tk-row.is-settled { background: var(--surface-muted); }
.tk-row.is-settled .tk-subject { color: var(--text-muted); }

.tk-row.pr-low    { --pr: #14b8a6; }
.tk-row.pr-medium { --pr: #3b82f6; }
.tk-row.pr-high   { --pr: #f97316; }
.tk-row.pr-urgent { --pr: #dc2626; }

.tk-body { flex: 1 1 auto; min-width: 0; }
.tk-top {
  display: flex; align-items: center; gap: .45rem;
  flex-wrap: wrap; margin-bottom: .3rem;
}
.tk-num {
  display: inline-flex; align-items: center; gap: .1rem;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .02em;
  color: var(--text-muted);
  font-family: 'Consolas', 'SF Mono', ui-monospace, monospace;
}
.tk-num i { font-size: .7rem; opacity: .6; }
.tk-cat {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .69rem; font-weight: 700;
  padding: .12rem .48rem;
  border: 1px solid transparent;
  border-radius: 6px;
  white-space: nowrap;
}
.tk-flag {
  font-size: .63rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  border-radius: 5px; padding: .1rem .4rem;
}
.tk-flag-mine     { background: #f0fdf4; color: #15803d; }
.tk-flag-assigned { background: #eff6ff; color: #1d4ed8; }

.tk-subject {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink-2);
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.tk-subject:hover { color: var(--primary); }
.tk-snippet {
  font-size: .8rem;
  color: var(--text-faint);
  margin: .2rem 0 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tk-meta {
  display: flex; align-items: center; gap: .45rem .85rem;
  flex-wrap: wrap;
  margin-top: .5rem;
  font-size: .755rem;
  color: var(--text-muted);
}
.tk-meta-item { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.tk-meta-item > i { font-size: .8rem; color: var(--text-faint); }
.tk-meta-arrow { font-size: 1rem !important; color: #cbd5e1 !important; margin-right: -.15rem; }
.tk-unassigned { display: inline-flex; align-items: center; gap: .25rem; color: var(--text-faint); font-style: italic; }
.tk-av {
  width: 21px; height: 21px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: .6rem; font-weight: 800;
  color: #fff; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--surface);
}
.tk-due {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700;
  padding: .12rem .5rem; border-radius: 6px;
  white-space: nowrap;
}
.tk-due.due-normal  { background: var(--surface-hover); color: var(--text-muted); }
.tk-due.due-soon    { background: #fff7ed; color: #c2410c; }
.tk-due.due-overdue { background: #fee2e2; color: #b91c1c; }

.tk-side {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: .35rem;
  flex-shrink: 0;
}
.tk-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .015em;
  padding: .28rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--tk-bg);
  color: var(--tk-fg);
}
.tk-pill i { font-size: .72rem; }
.tk-pill.st-open     { --tk-fg: #1d4ed8; --tk-bg: #dbeafe; }
.tk-pill.st-progress { --tk-fg: #b45309; --tk-bg: #fef3c7; }
.tk-pill.st-hold     { --tk-fg: #c2410c; --tk-bg: #ffedd5; }
.tk-pill.st-resolved { --tk-fg: #047857; --tk-bg: #d1fae5; }
.tk-pill.st-closed   { --tk-fg: #334155; --tk-bg: #e5e7eb; }
.tk-pill.pr-low      { --tk-fg: #0f766e; --tk-bg: #ccfbf1; }
.tk-pill.pr-medium   { --tk-fg: #1d4ed8; --tk-bg: #e0e7ff; }
.tk-pill.pr-high     { --tk-fg: #c2410c; --tk-bg: #ffedd5; }
.tk-pill.pr-urgent   { --tk-fg: #b91c1c; --tk-bg: #fee2e2; }

.tk-actions { display: flex; gap: .3rem; position: relative; z-index: 2; margin-top: .1rem; min-width: 64px; justify-content: flex-start; }
.tk-act {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--surface-hover); color: var(--text-muted);
  font-size: .82rem; text-decoration: none;
  transition: background .15s, color .15s, transform .15s;
}
.tk-act:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }

/* Grid variant: stack the card, pills move to a footer strip */
.tk-grid .tk-row { flex-direction: column; align-items: stretch; gap: .6rem; }
.tk-grid .tk-side {
  flex-direction: row; align-items: center;
  justify-content: flex-start; flex-wrap: wrap;
  gap: .35rem;
  border-top: 1px solid var(--divider);
  padding-top: .6rem;
}
.tk-grid .tk-actions { margin-left: auto; margin-top: 0; }
.tk-grid .tk-snippet { -webkit-line-clamp: 3; }

/* ---- Empty state ---- */
.tk-empty {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 3.25rem 1.5rem;
  text-align: center;
}
.tk-empty-ico {
  width: 76px; height: 76px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 2.1rem;
  color: #3b82f6;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
}
[data-theme="dark"] .tk-empty-ico {
  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(59,130,246,.3));
  color: #93c5fd;
}
.tk-empty h3 { font-size: 1.05rem; font-weight: 800; color: var(--ink); margin: 0 0 .35rem; }
.tk-empty p  { font-size: .85rem; color: var(--text-faint); margin: 0 auto 1.25rem; max-width: 400px; }

/* ---- Pager ---- */
.tk-pager {
  display: flex; align-items: center; justify-content: center;
  gap: .35rem; flex-wrap: wrap;
  margin-top: 1.15rem;
}
.tk-pg {
  min-width: 34px; height: 34px;
  padding: 0 .55rem;
  border-radius: 9px;
  display: inline-grid; place-items: center;
  background: var(--surface); color: var(--text-secondary);
  font-size: .8rem; font-weight: 700;
  text-decoration: none;
  box-shadow: var(--card-shadow);
  transition: background .15s, color .15s, transform .15s;
}
.tk-pg:hover { background: rgba(59,130,246,.12); color: var(--link); transform: translateY(-1px); }
.tk-pg.active { background: var(--link); color: #fff; }
.tk-pg.disabled { opacity: .4; pointer-events: none; }
.tk-pg.gap { background: transparent; box-shadow: none; color: var(--text-faint); }

/* ---- Filter dropdown (small floating panel, like the notification bell) ---- */
.tk-filter-dropdown { position: relative; }
.tk-filter-menu {
  width: 340px;
  max-width: 90vw;
  padding: 0;
  border: none;
  border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(15,23,42,.35);
  overflow: hidden;
}
.tk-filter-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: .9rem 1.1rem;
  background: linear-gradient(115deg, #172554, #2563eb);
  color: #fff;
  font-size: .85rem; font-weight: 700;
}
.tk-offcanvas-count {
  font-size: .68rem; font-weight: 800;
  background: rgba(255,255,255,.22); color: #fff;
  border-radius: 20px; padding: 1px 8px;
}
.tk-filter-fields { max-height: 60vh; overflow-y: auto; padding: 1.1rem; }
.tk-filter-group { margin-bottom: 1.1rem; }
.tk-filter-group:last-child { margin-bottom: 0; }
.tk-filter-menu .form-label {
  font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint);
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .45rem;
}
.tk-filter-menu .form-label i { color: var(--text-muted); font-size: .85rem; }
.tk-filter-footer {
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--divider);
  background: var(--surface);
}
.tk-filter-check {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem .85rem;
  border: 1.5px solid var(--input-border);
  border-radius: 9px;
  cursor: pointer;
  font-size: .85rem; font-weight: 600; color: var(--body-text);
  transition: border-color .15s, background .15s;
}
.tk-filter-check:hover { border-color: var(--primary); }
.tk-filter-check input { margin: 0; cursor: pointer; }

/* Picker grids (status/priority/category radio cards) are sized for a wide
   form column elsewhere — the filter drawer is much narrower, so give them
   fewer columns here instead of squeezing 4-5 across ~300px. */
.tk-filter-menu .tk-status-picker,
.tk-filter-menu .tk-priority-picker { grid-template-columns: repeat(3, 1fr); }
.tk-filter-menu .tk-cat-picker { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.tk-filter-menu .tk-cat-opt { padding: .5rem .6rem; }
.tk-filter-menu .tk-cat-ico { width: 28px; height: 28px; font-size: .82rem; }
.tk-filter-menu .tk-cat-opt span { font-size: .76rem; }

/* ============================================================
   ADMIN + FORMS DESIGN SYSTEM
   (Dashboard, Create Ticket, Users, Categories, Reports)
   ============================================================ */

/* Compact hero variant for sub-pages / forms */
.tk-hero-compact { padding: 1rem 1.4rem; }
.tk-hero-compact h1 { font-size: 1.3rem; }
.tk-hero-back {
  display: inline-flex; align-items: center; gap: .3rem;
  color: rgba(255,255,255,.85); text-decoration: none;
  font-size: .78rem; font-weight: 700;
}
.tk-hero-back:hover { color: #fff; }

/* Panels (dashboard SLA / pending / any grouped content block) */
.tk-panel {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  height: 100%;
}
.tk-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: .95rem 1.25rem;
  font-weight: 700; font-size: .9rem; color: var(--ink);
  border-bottom: 1px solid var(--divider);
}
.tk-panel-head span { display: flex; align-items: center; gap: .5rem; }
.tk-panel-head i { color: #3b82f6; }
.tk-panel-body { padding: 1.1rem 1.25rem; }
.tk-quick-update .form-label { margin-bottom: .2rem; font-size: .76rem; }

/* Solid (non-gradient) dark blue, matching the hero banner's base tone */
.btn-navy {
  background: #1e3a8a;
  border-color: #1e3a8a;
  color: #fff;
}
.btn-navy:hover, .btn-navy:focus {
  background: #1e40af;
  border-color: #1e40af;
  color: #fff;
}
.btn-navy:active {
  background: #172554 !important;
  border-color: #172554 !important;
  color: #fff;
}
[data-theme="dark"] .btn-navy {
  background: #fff;
  border-color: #fff;
  color: #172554;
}
[data-theme="dark"] .btn-navy:hover,
[data-theme="dark"] .btn-navy:focus {
  background: #e2e8f0;
  border-color: #e2e8f0;
  color: #172554;
}
[data-theme="dark"] .btn-navy:active {
  background: #cbd5e1 !important;
  border-color: #cbd5e1 !important;
  color: #172554 !important;
}

/* Outline companion (e.g. Cancel next to a .btn-navy submit) — same navy/
   white swap, but bordered instead of filled so it stays visually secondary. */
.btn-outline-navy {
  background: transparent;
  border-color: #1e3a8a;
  color: #1e3a8a;
}
.btn-outline-navy:hover, .btn-outline-navy:focus {
  background: #1e3a8a;
  border-color: #1e3a8a;
  color: #fff;
}
[data-theme="dark"] .btn-outline-navy {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
[data-theme="dark"] .btn-outline-navy:hover,
[data-theme="dark"] .btn-outline-navy:focus {
  background: #fff;
  border-color: #fff;
  color: #172554;
}

/* ---- Form cards (Create Ticket, Add/Edit User, Add/Edit Category) ---- */
.tk-form-card {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.tk-form-head {
  display: flex; align-items: center; gap: .8rem;
  padding: 1.2rem 1.5rem;
  background: linear-gradient(115deg, #172554 0%, #1e40af 55%, #2563eb 100%);
  color: #fff;
}
.tk-form-head-ico {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 1.2rem;
  background: rgba(255,255,255,.16);
}
.tk-form-head h2 { font-size: 1.05rem; font-weight: 800; margin: 0; color: #fff; }
.tk-form-head p { font-size: .78rem; margin: .1rem 0 0; color: rgba(255,255,255,.75); }
.tk-form-body { padding: 1.5rem; }

/* Tighter variant — used where the form is short (Create Ticket) so it
   doesn't waste vertical space; width still matches the hero above it. */
.tk-form-card-compact .tk-form-head { padding: .75rem 1.25rem; }
.tk-form-card-compact .tk-form-body { padding: 1rem 1.25rem; }
.tk-form-card-compact .tk-form-footer { margin-top: .85rem; padding-top: .7rem; }
.tk-form-card-compact .tk-section-lbl { margin-bottom: .4rem; font-size: .74rem; }
.tk-form-card-compact .form-label { font-size: .88rem; }
.tk-form-card-compact .tk-priority-picker-compact .tk-priority-opt i { font-size: 1rem; }
.tk-form-card-compact .tk-priority-picker-compact .tk-priority-opt span { font-size: .76rem; }
.tk-form-card-compact .tk-cat-opt span { font-size: .87rem; }
.tk-form-card-compact textarea.form-control { resize: vertical; }
.tk-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--divider);
}
/* Keeps a side "live preview" panel in view while the form scrolls —
   only once its column actually sits beside the form (Bootstrap's lg
   breakpoint); below that the columns stack and it should flow normally. */
.tk-form-sticky {
  position: sticky;
  top: calc(var(--topbar-height) + 1rem);
}
@media (max-width: 991.98px) {
  .tk-form-sticky { position: static; }
}

/* Icon name input with a live icon preview inline */
.tk-icon-input { position: relative; }
.tk-icon-input-preview {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--surface-hover); color: var(--text-secondary);
  font-size: .92rem; pointer-events: none;
}
.tk-icon-input .form-control { padding-left: 42px; }

/* Quick color swatches under the native color picker */
.tk-swatch-row { display: flex; gap: .45rem; margin-top: .6rem; flex-wrap: wrap; }
.tk-swatch {
  width: 22px; height: 22px; border-radius: 50%; padding: 0; flex-shrink: 0;
  background: var(--sw); border: none;
  box-shadow: 0 0 0 1px var(--border-soft);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.tk-swatch:hover { transform: scale(1.15); }
.tk-swatch.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw); }

/* Colour already claimed by another category */
.tk-swatch.is-taken {
  position: relative; opacity: .3; cursor: not-allowed;
}
.tk-swatch.is-taken:hover { transform: none; }
.tk-swatch.is-taken::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 130%; height: 2px; border-radius: 2px;
  background: var(--ink); transform: rotate(-45deg); transform-origin: center;
}

.tk-color-taken {
  display: flex; align-items: flex-start; gap: .35rem;
  margin-top: .5rem; font-size: .72rem; font-weight: 600; color: #dc2626;
}
.tk-color-taken i { margin-top: .12rem; flex-shrink: 0; }

.tk-color-suggest {
  background: none; border: none; padding: 0;
  font-size: .68rem; font-weight: 700; color: var(--primary);
  cursor: pointer;
}
.tk-color-suggest:hover { text-decoration: underline; }

/* Danger zone panel (used on category/user edit pages) */
.tk-danger-panel {
  border: 1px solid rgba(220,38,38,.25);
  background: rgba(220,38,38,.04);
}
[data-theme="dark"] .tk-danger-panel { background: rgba(220,38,38,.08); }

.tk-section-lbl {
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-faint);
  margin: 0 0 .6rem;
  display: flex; align-items: center; gap: .4rem;
}
.tk-section-lbl::after { content: ''; flex: 1; height: 1px; background: var(--divider); }

/* ---- Priority picker (radio cards) ---- */
.tk-priority-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.tk-priority-picker.tk-priority-picker-compact { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.tk-priority-picker-compact .tk-priority-opt { padding: .55rem .25rem; }
.tk-priority-picker-compact .tk-priority-opt i { font-size: .9rem; }
.tk-priority-picker-compact .tk-priority-opt span { font-size: .68rem; }
.tk-priority-picker input { position: absolute; opacity: 0; pointer-events: none; }
.tk-priority-opt {
  --pf: #64748b; --pb: #f1f5f9;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .7rem .4rem;
  border-radius: 11px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s, transform .1s;
}
.tk-priority-opt i { font-size: 1.05rem; color: var(--pf); }
.tk-priority-opt span { font-size: .76rem; font-weight: 700; color: var(--text-secondary); }
.tk-priority-opt:hover { border-color: var(--pf); transform: translateY(-1px); }
.tk-priority-opt.tk-p-low    { --pf: #0f766e; }
.tk-priority-opt.tk-p-medium { --pf: #1d4ed8; }
.tk-priority-opt.tk-p-high   { --pf: #c2410c; }
.tk-priority-opt.tk-p-urgent { --pf: #b91c1c; }
.tk-priority-opt.tk-p-all    { --pf: #64748b; }
.tk-priority-picker input:checked + .tk-priority-opt {
  border-color: var(--pf);
  background: var(--pb);
}
.tk-priority-picker input:checked + .tk-p-low    { --pb: #f0fdfa; box-shadow: 0 0 0 3px rgba(15,118,110,.16); }
.tk-priority-picker input:checked + .tk-p-medium { --pb: #eff6ff; box-shadow: 0 0 0 3px rgba(29,78,216,.16); }
.tk-priority-picker input:checked + .tk-p-high   { --pb: #fff7ed; box-shadow: 0 0 0 3px rgba(194,65,12,.16); }
.tk-priority-picker input:checked + .tk-p-urgent { --pb: #fef2f2; box-shadow: 0 0 0 3px rgba(185,28,28,.16); }
.tk-priority-picker input:checked + .tk-p-all    { --pb: #f1f5f9; box-shadow: 0 0 0 3px rgba(100,116,139,.16); }
.tk-priority-picker input:checked + .tk-priority-opt span { color: var(--pf); }

/* ---- Status picker (radio cards, same language as priority) ---- */
.tk-status-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.tk-status-picker input { position: absolute; opacity: 0; pointer-events: none; }
.tk-status-opt {
  --sf: #64748b; --sb: #f1f5f9;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .55rem .25rem;
  border-radius: 11px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s, transform .1s;
}
.tk-status-opt i { font-size: .9rem; color: var(--sf); }
.tk-status-opt span { font-size: .68rem; font-weight: 700; color: var(--text-secondary); }
.tk-status-opt:hover { border-color: var(--sf); transform: translateY(-1px); }
.tk-status-opt.tk-s-all      { --sf: #64748b; }
.tk-status-opt.tk-s-open     { --sf: #1d4ed8; }
.tk-status-opt.tk-s-progress { --sf: #b45309; }
.tk-status-opt.tk-s-hold     { --sf: #c2410c; }
.tk-status-opt.tk-s-resolved { --sf: #047857; }
.tk-status-picker input:checked + .tk-status-opt { border-color: var(--sf); background: var(--sb); }
.tk-status-picker input:checked + .tk-s-all      { --sb: #f1f5f9; box-shadow: 0 0 0 3px rgba(100,116,139,.16); }
.tk-status-picker input:checked + .tk-s-open     { --sb: #eff6ff; box-shadow: 0 0 0 3px rgba(29,78,216,.16); }
.tk-status-picker input:checked + .tk-s-progress { --sb: #fffbeb; box-shadow: 0 0 0 3px rgba(180,83,9,.16); }
.tk-status-picker input:checked + .tk-s-hold     { --sb: #fff7ed; box-shadow: 0 0 0 3px rgba(194,65,12,.16); }
.tk-status-picker input:checked + .tk-s-resolved { --sb: #ecfdf5; box-shadow: 0 0 0 3px rgba(4,120,87,.16); }
.tk-status-picker input:checked + .tk-status-opt span { color: var(--sf); }

/* Required radio-card group with nothing selected yet */
.tk-priority-picker.is-invalid-group,
.tk-cat-picker.is-invalid-group {
  outline: 1.5px solid #dc2626;
  outline-offset: 6px;
  border-radius: 12px;
}

/* ---- Category picker (radio cards) ---- */
.tk-cat-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .55rem; }
.tk-cat-picker.tk-cat-picker-compact {
  grid-template-columns: repeat(2, 1fr);
}
.tk-cat-picker input { position: absolute; opacity: 0; pointer-events: none; }
.tk-cat-opt {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .7rem;
  border-radius: 11px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.tk-cat-opt:hover { transform: translateY(-1px); }
.tk-cat-ico {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: .95rem;
}
.tk-cat-opt span { font-size: .8rem; font-weight: 700; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-cat-picker input:checked + .tk-cat-opt {
  border-color: var(--cc, #3b82f6);
  background: var(--cs, #eff6ff);
}
.tk-cat-picker input:checked + .tk-cat-opt span { color: var(--ink); }

/* ---- Auto-picked category hint ---- */
.tk-auto-note {
  margin-left: .4rem; font-weight: 600; text-transform: none;
  letter-spacing: 0; color: var(--text-faint); font-size: .66rem;
}
.tk-cat-suggest {
  display: flex; align-items: flex-start; gap: .45rem;
  margin-bottom: .55rem; padding: .5rem .65rem;
  border-radius: 10px;
  border: 1px solid rgba(37, 99, 235, .25);
  background: rgba(37, 99, 235, .07);
  font-size: .73rem; line-height: 1.35; color: var(--ink);
}
.tk-cat-suggest i { color: var(--primary); margin-top: .1rem; flex-shrink: 0; }
.tk-cat-suggest strong { font-weight: 800; }

/* ---- Users list ---- */
.tk-user-row {
  display: flex; align-items: center; gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: .8rem 1.1rem;
  box-shadow: var(--card-shadow);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.tk-user-row:hover { transform: translateY(-2px); border-color: #dbeafe; box-shadow: 0 14px 28px -14px rgba(15,23,42,.4); }
.tk-user-av {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .9rem; font-weight: 800; color: #fff;
}
.tk-user-info { flex: 1; min-width: 0; }
.tk-user-name { font-size: .92rem; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.tk-user-email { font-size: .78rem; color: var(--text-faint); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.tk-user-meta { display: flex; align-items: center; gap: 1.4rem; flex-shrink: 0; }
.tk-user-metric { text-align: center; min-width: 56px; }
.tk-user-metric-val { font-size: 1rem; font-weight: 800; color: var(--ink); line-height: 1; }
.tk-user-metric-lbl { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin-top: 2px; }
.tk-role-pill {
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: .18rem .5rem; border-radius: 999px; white-space: nowrap;
}
.tk-role-admin { background: #fee2e2; color: #b91c1c; }
.tk-role-agent { background: #dbeafe; color: #1d4ed8; }
.tk-role-user  { background: var(--border); color: var(--text-secondary); }
.tk-status-dot { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; min-width: 92px; white-space: nowrap; }
.tk-status-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; }
.tk-status-dot.is-active::before { background: #22c55e; }
.tk-status-dot.is-active { color: #15803d; }
.tk-status-dot.is-inactive { color: var(--text-faint); }
.tk-status-dot.is-pending::before { background: #f59e0b; }
.tk-status-dot.is-pending { color: #b45309; }
.tk-user-joined { min-width: 132px; white-space: nowrap; }

/* ---- Ticket detail: info spec list ---- */
.tk-info-list { display: flex; flex-direction: column; }
.tk-info-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; padding: .7rem 0;
  border-bottom: 1px solid var(--divider);
}
.tk-info-row:last-child { border-bottom: none; }
.tk-info-label {
  display: flex; align-items: center; gap: .45rem;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint);
  padding-top: .15rem;
  flex-shrink: 0;
}
.tk-info-label i { font-size: .85rem; color: var(--text-muted); }
.tk-info-value { font-size: .85rem; font-weight: 600; color: var(--ink); text-align: right; }
.tk-info-value .tk-meta-item { font-size: .85rem; }
.tk-stars { font-size: 1rem; color: #f59e0b; letter-spacing: 1px; }
.tk-stars .off { color: var(--border); }

/* ---- Ticket detail: description box ---- */
.tk-desc-box {
  position: relative;
  white-space: pre-wrap;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--ink);
  background: linear-gradient(180deg, var(--surface-muted), var(--surface-muted) 60%, var(--surface));
  border: 1px solid var(--divider);
  border-left: 3px solid var(--primary);
  border-radius: 4px 12px 12px 4px;
  padding: 1.2rem 1.3rem 1.2rem 2.1rem;
}
.tk-desc-box::before {
  content: '\201C';
  position: absolute;
  top: -.35rem;
  left: .55rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--primary);
  opacity: .22;
  pointer-events: none;
}

/* ---- Gradient modal header (Close Ticket, etc.) ---- */
.tk-modal .modal-content { border: none; border-radius: 14px; overflow: hidden; }
.tk-modal .modal-header {
  background: linear-gradient(115deg, #172554, #2563eb);
  color: #fff; border-bottom: none;
}
.tk-modal .modal-header .btn-close { filter: invert(1) grayscale(1); opacity: .8; }
.tk-modal .modal-body, .tk-modal .modal-footer { background: var(--surface); }
.tk-modal .modal-footer { border-top: 1px solid var(--divider); }
.tk-modal-compact { padding: 1rem 1.25rem; }
.tk-modal-compact .tk-section-lbl { margin-bottom: .35rem; font-size: .74rem; }
.tk-modal-compact .form-label { font-size: .82rem; margin-bottom: .3rem; }
.tk-modal-compact .input-group-text { min-width: 40px; justify-content: center; }

/* ---- Category grid cards ---- */
.tk-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: .85rem; }
.tk-cat-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--card-shadow);
  transition: transform .16s, box-shadow .16s;
  overflow: hidden;
}
.tk-cat-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--cc); }
.tk-cat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(15,23,42,.45); }
.tk-cat-card.is-inactive { opacity: .6; }
.tk-cat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.tk-cat-ico-lg {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 1.3rem;
  background: var(--cbg); color: var(--cc);
  flex-shrink: 0;
}
.tk-cat-name { font-size: 1rem; font-weight: 800; color: var(--ink-2); }
.tk-cat-desc { font-size: .8rem; color: var(--text-faint); line-height: 1.45; margin: 0 0 .9rem; min-height: 2.2em; }
.tk-cat-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tk-cat-count {
  font-size: .72rem; font-weight: 700; color: var(--text-secondary);
  background: var(--surface-hover); border-radius: 999px; padding: .2rem .6rem;
}
.tk-cat-actions { display: flex; gap: .3rem; }

/* ---- Mini stacked progress (agent workload) ---- */
.tk-agent-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--divider);
}
.tk-agent-row:last-child { border-bottom: none; }
.tk-agent-info { width: 190px; flex-shrink: 0; min-width: 0; }
.tk-agent-name { font-size: .85rem; font-weight: 700; color: var(--ink); }
.tk-agent-email { font-size: .72rem; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-agent-bar { flex: 1; height: 9px; border-radius: 999px; background: var(--track-bg); display: flex; overflow: hidden; }
.tk-agent-bar span { height: 100%; }
.tk-agent-bar .b-active   { background: #fd7811; } /* ABI Orange */
.tk-agent-bar .b-resolved { background: #035256; } /* ABI Dark Teal */
.tk-agent-bar .b-closed   { background: #76dbd3; } /* ABI Teal */
.tk-agent-nums { display: flex; gap: .9rem; flex-shrink: 0; }
.tk-agent-num { text-align: center; min-width: 34px; }
.tk-agent-num b { display: block; font-size: .85rem; color: var(--ink); }
.tk-agent-num small { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.mobile-open { transform: translateX(0); }
  .wrapper { margin-left: 0; }
  .page-content { padding: 1rem; }

  .tk-hero { padding: 1.15rem 1.15rem; border-radius: 14px; }
  .tk-hero h1 { font-size: 1.25rem; }
  .tk-hero-actions { width: 100%; }
  .tk-hero-actions .btn-hero, .tk-hero-actions .btn-hero-ghost { flex: 1; justify-content: center; }
  .tk-stats { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .tk-stat-val { font-size: 1.1rem; }
  .tk-row { flex-direction: column; align-items: stretch; gap: .6rem; }
  .tk-side {
    flex-direction: row; align-items: center; flex-wrap: wrap;
    border-top: 1px solid var(--divider); padding-top: .55rem;
  }
  .tk-actions { margin-left: auto; margin-top: 0; }
  .tk-grid { grid-template-columns: 1fr; }
  .tk-toolbar > .tk-seg, .tk-toolbar > .tk-select { flex: 1; }

  .tk-priority-picker { grid-template-columns: repeat(2, 1fr); }
  .tk-user-row { flex-wrap: wrap; }
  .tk-user-meta { width: 100%; justify-content: space-between; padding-top: .6rem; border-top: 1px solid var(--divider); }
  .tk-agent-row { flex-wrap: wrap; }
  .tk-agent-info { width: 100%; }
}

/* ---- Print (Reports page) ---- */
@media print {
  @page { margin: 1.6cm; }

  /* Real breathing room even if the browser's print dialog margin is set
     to "None" (which ignores @page) — pad the content itself so the report
     never prints edge-to-edge regardless of that setting. */
  body { padding: .5cm .7cm !important; }

  /* Force the light palette regardless of the active on-screen theme —
     otherwise dark-mode text colors (near-white) render invisible on
     the white printed page. */
  :root, [data-theme="dark"], [data-theme="light"] {
    --body-bg:       #ffffff;
    --surface:       #ffffff;
    --surface-muted: #f8fafc;
    --surface-hover: #f1f5f9;
    --track-bg:      #e2e8f0;
    --border:        #cbd5e1;
    --border-soft:   #d8dee7;
    --divider:       #e2e8f0;
    --input-border:  #cbd5e1;
    --ink:            #111827;
    --ink-2:          #000000;
    --body-text:      #1f2937;
    --text-secondary: #334155;
    --text-muted:     #475569;
    --text-faint:     #64748b;
    --link:       #1e3a8a;
    --link-hover: #1e3a8a;
    --card-shadow: none;
  }

  * {
    text-shadow: none !important; box-shadow: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .topbar, .sidebar, .tk-hero-actions, #themeToggle,
  .btn, .tk-filter-btn, .tk-actions, .tk-cat-actions,
  .offcanvas, .dropdown-menu, .theme-toggle {
    display: none !important;
  }
  .wrapper { margin-left: 0 !important; padding-top: 0 !important; }
  .page-content { padding: 0 !important; }
  body { background: #fff !important; color: var(--ink); }

  /* Bootstrap's grid is flexbox — a flex item with break-inside:avoid that
     doesn't fit the remaining page can collapse to zero height instead of
     moving to the next page, making the panel vanish. Stack everything as
     plain blocks for print so pagination is a simple top-to-bottom flow —
     this report is allowed to run to 2 pages, so this needs to be safe. */
  .row { display: block !important; }
  .row > [class*="col"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    /* Margin baked into every panel itself (top AND bottom) rather than
       relied on from @page/the browser's print-margin setting — that
       setting only reliably insets page 1 in practice, so whichever panel
       lands at the top of page 2 still carries its own margin regardless
       of what the browser does at the page edge. Adjacent panels on the
       same page just collapse this down to one normal-sized gap. */
    margin: 1cm 0;
  }
  .tk-stats { margin: 0 0 1cm; }
  .tk-panel { height: auto !important; }

  .tk-hero {
    background: #fff !important; color: #000 !important;
    border: 1px solid #cbd5e1; border-radius: 8px;
  }
  .tk-hero::before, .tk-hero::after { display: none !important; }
  .tk-hero h1, .tk-hero-sub, .tk-hero-eyebrow, .tk-hero-eyebrow a,
  .tk-hero-eyebrow span { color: #000 !important; }

  /* On the Reports page, the printed letterhead below replaces the
     on-screen hero entirely — a breadcrumb link and gradient banner don't
     belong on a document handed to executives. */
  .tk-reports-print .tk-hero { display: none !important; }
  .print-letterhead { margin-bottom: 1.4rem; }
  .print-letterhead-row {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: .5rem;
  }
  .print-logo { height: 48px; width: auto; }
  .print-letterhead-row h1 {
    font-size: 1.5rem; font-weight: 800; margin: 0; color: #000;
  }
  .print-letterhead-row p {
    font-size: .85rem; margin: .15rem 0 0; color: #475569;
  }
  .print-generated {
    font-size: .78rem; color: #64748b; margin: 0 0 .9rem;
    padding-bottom: .9rem; border-bottom: 2px solid #172554;
  }

  /* Reset surface colors everywhere. Panels avoid breaking by default —
     a <canvas> chart can't resume on the next page like text can, so a
     mid-panel page break just clips it. Only the panel explicitly marked
     .tk-panel-flow (content that can be arbitrarily long, e.g. Agent
     Workload) is allowed to split, so it doesn't get truncated instead. */
  .tk-panel, .stat-card, .tk-stat, .tk-cat-card, .tk-user-row, .tk-row,
  .tk-form-card, .tk-toolbar, .tk-empty {
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
  }
  .tk-panel, .stat-card, .tk-stat, .tk-cat-card, .tk-user-row, .tk-row,
  .tk-form-card, .tk-toolbar, .tk-empty, .tk-agent-row {
    break-inside: avoid;
  }
  .tk-panel-flow { break-inside: auto; }
  h1, h2, h3, .tk-panel-head, .page-header { break-after: avoid; }

  /* Keep the same height as on-screen — this is a data report, so the
     charts and their labels need to stay as legible as the numbers next
     to them, even if that costs an extra printed page. Shrinking this
     leaves Chart.js less room for the two-line wrapped category labels,
     cramping/overlapping them. */
  .chart-container { height: 280px !important; }
  a { text-decoration: none !important; }
}