/* ============================================================
   PARALLEL ADVISORS - TECH SUPPORT PORTAL
   styles.css
   ============================================================

   TABLE OF CONTENTS
   1.  CSS Variables (brand colors, sizing)
   2.  Reset & Base
   3.  Sidebar
   4.  Top bar
   5.  Content & Pages
   6.  Metric cards
   7.  Filter pills
   8.  Ticket cards & threads
   9.  Status & priority badges
   10. Modal
   11. Forms
   12. Cards & tables
   13. Stats & charts
   14. Buttons
   15. Admin panel
   16. Queue tabs
   17. Toast notification
   18. Scrollbar
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES
   Edit brand colors here. Changes apply everywhere.
   ============================================================ */
:root {
  /* Brand red */
  --red:  #BA0C2F;
  --rd:   #96091f;   /* darker red - hover states */
  --rl:   #fce8ec;   /* light red - backgrounds */
  --rt:   #7a081f;   /* text red */

  /* Amber */
  --am:   #BA7517;
  --al:   #faeeda;   /* light amber - backgrounds */
  --at:   #633806;   /* text amber */

  /* Grays */
  --gr:   #535353;   /* body text gray */
  --hg:   #A7A7A7;   /* hint/muted gray */
  --ch:   #2C2C2C;   /* charcoal - dark bg */
  --cr:   #FAF9F7;   /* cream - page background */

  /* Green */
  --ge:   #3B6D11;
  --gl:   #e8f5e9;   /* light green - backgrounds */
  --gt:   #1b5e20;   /* text green */

  /* Blue */
  --bl:   #185FA5;
  --ll:   #E6F1FB;   /* light blue - backgrounds */
  --lt:   #0C447C;   /* text blue */

  /* Slate */
  --sl:   #5F5E5A;
  --sll:  #f1f0ee;   /* light slate */
  --st:   #444441;   /* text slate */

  /* Borders */
  --bd:   #e0ddd8;
  --bl2:  #f0ede8;   /* subtle border */

  /* Sidebar width */
  --sw:   220px;

  /* Editorial accents */
  --serif: Georgia, 'Times New Roman', serif;
  --mono: 'SF Mono', 'Consolas', 'Roboto Mono', ui-monospace, monospace;
  --glow: 0 0 0 1px rgba(186,12,47,.10), 0 4px 16px rgba(44,44,44,.06);
  --live: #2fd35a;   /* live/online pulse dot */

  /* Surfaces (added for dark mode, 2026-10-20) */
  --card: #fff;      /* cards, inputs, sidebar, modals */
  --inbd: #d0cdc8;   /* input / control borders */
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--cr);
  color: var(--ch);
  display: flex;
  min-height: 100vh;
  font-size: 14px;
}

input, select, textarea {
  width: 100%;
  font-size: 13px;
  padding: 8px 11px;
  border-radius: 5px;
  border: 1px solid var(--inbd);
  background: var(--card);
  color: var(--ch);
  font-family: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--red);
}

/* Disabled form fields — e.g. Last day on the Create Checklist page
   staying greyed out until Offboarding is selected (and vice versa
   for Start date). Applies everywhere, not just that one form, so any
   other conditionally-disabled field gets the same treatment for free. */
input:disabled, select:disabled, textarea:disabled {
  background: var(--cr);
  color: var(--hg);
  cursor: not-allowed;
  border-color: var(--bl2);
}

textarea {
  resize: vertical;
  min-height: 80px;
}


/* ============================================================
   3. SIDEBAR
   Light, editorial treatment — same nav structure and classes,
   restyled off the dark charcoal panel.
   ============================================================ */
.sidebar {
  width: var(--sw);
  background: var(--card);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  overflow-y: auto;
}

/* Logo block */
.sb-logo {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--bd);
}
.sb-logo-t {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ch);
  letter-spacing: .2px;
}
.sb-logo-t span { color: var(--red); }
.sb-logo-s {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ch); /* Parallel Charcoal, matches the menu headings */
  margin-top: 4px;
}

/* Active user block */
.sb-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--bd);
}
.sb-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--red);
  flex-shrink: 0;
  overflow: hidden;
}
.sb-un {
  font-size: 12px;
  font-weight: 600;
  color: var(--ch);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-ur { font-size: 10px; color: var(--hg); }

/* Nav */
.sb-nav { flex: 1; padding: 10px 0; }

.ns {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ch); /* Parallel Charcoal: left menu section headings */
  font-weight: 800;
  padding: 14px 18px 5px;
  margin-top: 2px;
}

.ni {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  font-size: 13px;
  color: var(--gr);
  cursor: pointer;
  border-left: 3px solid transparent;
  user-select: none;
  transition: all .15s;
}
.ni:hover { color: var(--ch); background: var(--cr); }
.ni.active {
  color: var(--red);
  font-weight: 600;
  background: var(--rl);
  border-left-color: var(--red);
}
.ni i { font-size: 16px; flex-shrink: 0; }

/* Nav badges */
.nb {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}
.nb.am { background: var(--am); }
.nb.sl { background: var(--hg); }

/* Bottom section - user switcher */
.sb-bot {
  padding: 13px 18px;
  border-top: 1px solid var(--bd);
}
.sw-l {
  font-size: 10px;
  color: var(--hg);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.sw-s {
  width: 100%;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid var(--bd);
  background: var(--cr);
  color: var(--ch);
  cursor: pointer;
}
.sw-s option { background: var(--card); }


/* ============================================================
   4. TOP BAR
   ============================================================ */
.main {
  margin-left: var(--sw);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26px;
  background: var(--card);
  border-bottom: 1px solid var(--bd);
  position: sticky;
  top: 0;
  z-index: 50;
}
.tb-t { font-family: var(--serif); font-size: 18px; color: var(--ch); }
.tb-r { display: flex; align-items: center; gap: 10px; }

/* Email chip in top bar */
.ic {
  font-size: 11px;
  color: var(--gr);
  background: var(--cr);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--bd);
}

/* Sync button */
.bs {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 5px;
  border: none;
  background: var(--red);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: box-shadow .15s;
}
.bs:hover { background: var(--rd); box-shadow: 0 0 0 3px rgba(186,12,47,.18); }

/* Live status strip (topbar) */
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,211,90,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(47,211,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,211,90,0); }
}
.live-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  background: var(--cr);
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--bd);
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  flex-shrink: 0;
  animation: livepulse 2s infinite;
}
.live-label {
  color: var(--ch);
  font-weight: 700;
  letter-spacing: .6px;
  font-size: 10px;
  text-transform: uppercase;
}
.live-clock {
  font-family: var(--mono);
  color: var(--gr);
  font-size: 11px;
  letter-spacing: .3px;
  border-left: 1px solid var(--bd);
  padding-left: 8px;
}


/* ============================================================
   5. CONTENT & PAGES
   ============================================================ */
.content { flex: 1; padding: 24px 26px 72px; } /* extra bottom room so the last card never sits under the taskbar or browser edge */

.page { display: none; }
.page.active { display: block; }


/* ============================================================
   6. METRIC CARDS (top of each page)
   ============================================================ */
.mr {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

.mc {
  background: var(--card);
  border-radius: 6px;
  padding: 15px 17px;
  border: 1px solid var(--bd);
  border-top: 3px solid var(--red);
  transition: box-shadow .15s, border-color .15s;
}
.mc:hover { box-shadow: var(--glow); border-color: var(--inbd); }
.mc-filter { cursor: pointer; user-select: none; }
.mc-filter.active-filter {
  box-shadow: 0 0 0 2px var(--red), var(--glow);
  border-color: var(--red);
}
.mc.am { border-top-color: var(--am); }
.mc.bl { border-top-color: var(--bl); }
.mc.gr { border-top-color: var(--ge); }
.mc.sl { border-top-color: var(--sl); }

.ml {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--gr);
  margin-bottom: 6px;
}
.mv {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
  color: var(--ch);
}


/* ============================================================
   7. FILTER PILLS
   ============================================================ */
.fb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.pills { display: flex; gap: 6px; flex-wrap: wrap; }

.pill {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: transparent;
  color: var(--gr);
  cursor: pointer;
  user-select: none;
}
.pill.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  font-weight: 500;
}
.pill:hover:not(.active) { border-color: var(--red); color: var(--red); }


/* ============================================================
   8. TICKET CARDS & THREADS
   ============================================================ */
.tl { display: flex; flex-direction: column; gap: 10px; }

.tc {
  background: var(--card);
  border: 1px solid var(--bd);
  border-top: 3px solid transparent;
  border-radius: 6px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.tc:hover { border-top-color: var(--red); border-color: var(--bd); box-shadow: var(--glow); }

/* Top-border color by ticket state */
.tc.nr     { border-top-color: var(--bl); }   /* new reply */
.tc.overdue { background: var(--rl); }         /* open more than 24h — layered as a background tint rather than the top border, so it still shows even on a card that's also .nr */
.tc.pjplan { border-top-color: var(--hg); }   /* project: planning */
.tc.pjprog { border-top-color: var(--bl); }   /* project: in progress */
.tc.pjdone { border-top-color: var(--ge); }   /* project: completed */
.tc.pjcancel { border-top-color: var(--red); } /* project: cancelled */
.tc.arc { border-top-color: var(--sl); opacity: .88; } /* archived */

/* Ticket metadata line */
.ti2 { font-size: 11px; color: var(--ch); margin-bottom: 4px; }

/* Ticket subject */
.ts { font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ch); }

/* From line */
.tf { font-size: 12px; color: var(--gr); margin-top: 4px; }

/* Preview text */
.tp { font-size: 13.5px; color: var(--gr); line-height: 1.6; margin: 8px 0 10px; }

/* Footer row */
.tft { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bl2); }

/* Assignee row */
.ar { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--gr); }

/* Avatar - small */
.av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--red);
  flex-shrink: 0;
}
.av.am { background: var(--al); color: var(--at); }
.av.sl { background: var(--sll); color: var(--st); }

/* Timestamp */
.tt { font-size: 11px; color: var(--ch); }

/* Thread toggle button */
.rbt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: transparent;
  color: var(--gr);
  cursor: pointer;
  margin-bottom: 8px;
}
.rbt:hover { border-color: var(--red); color: var(--red); }
.rbt.hn { border-color: var(--bl); color: var(--bl); background: var(--ll); }

/* Thread message list */
.tw { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }

.tm {
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
}
.tm.orig { background: var(--cr); border-left: 3px solid var(--red); }
.tm.team { background: var(--ll); border-left: 3px solid var(--bl); }
.tm.cli  { background: var(--cr); border-left: 3px solid var(--bd); }

.tmh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.tms { font-size: 11px; font-weight: 500; }
.tmt { font-size: 10px; color: var(--hg); }

/* New / Team tags in thread */
.ntag {
  font-size: 10px;
  background: var(--red);
  color: #fff;
  padding: 1px 5px;
  border-radius: 999px;
  margin-left: 4px;
}
.ttag {
  font-size: 10px;
  background: var(--ll);
  color: var(--lt);
  padding: 1px 5px;
  border-radius: 999px;
  margin-left: 3px;
}


/* ============================================================
   9. STATUS & PRIORITY BADGES
   ============================================================ */

/* Ticket status badges */
.sb { font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 500; white-space: nowrap; }
.so  { background: var(--rl); color: var(--rt); }        /* open */
.si  { background: #fff3e0; color: #7a4500; }            /* in progress */
.sw2 { background: #f0f0f0; color: #3a3a3a; }             /* waiting */
.sr  { background: var(--gl); color: var(--gt); }        /* resolved */
.sc  { background: #f5f5f5; color: #555; }                /* closed */
.sa  { background: var(--sll); color: var(--st); }        /* archived */

/* Project status badges (reuses sp / sci / sr from ticket palette) */
.sp  { background: var(--al);  color: var(--at); }       /* planning */
.sci { background: var(--ll);  color: var(--lt); }       /* in progress */
.scn { background: var(--rl);  color: var(--rt); }       /* cancelled */

/* Priority badges */
.pb { font-size: 11px; padding: 3px 8px; border-radius: 999px; font-weight: 500; }
.ph { background: var(--rl); color: var(--rt); }         /* high */
.pm { background: #fff3e0; color: #7a4500; }              /* medium */
.pl { background: var(--gl); color: var(--gt); }          /* low */

/* Ticket category chips (Admin panel > Categories) */
.catchip {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  padding: 5px 6px 5px 10px;
  border-radius: 999px;
  background: var(--cr);
  border: 1px solid var(--bd);
}
.catx {
  border: none; background: transparent; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--hg);
  padding: 2px 4px; border-radius: 50%;
}
.catx:hover { background: var(--rl); color: var(--rt); }

/* Role badges */
.rb { font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 500; }
.ra  { background: var(--rl);  color: var(--rt); }   /* admin */
.rm  { background: var(--al);  color: var(--at); }   /* manager */
.rt2 { background: var(--ll);  color: var(--lt); }   /* tech */
.rr  { background: var(--sll); color: var(--st); }   /* readonly */
.rpc { background: #ede7f6;    color: #4527a0; }     /* people & culture */
.rsc { background: #1a2e1a;    color: #4caf50; }     /* security & compliance */


/* ============================================================
   10. MODAL
   ============================================================ */
.mo {
  position: fixed;
  inset: 0;
  background: rgba(44,44,44,.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  z-index: 500;
  overflow-y: auto;
}

.md {
  background: var(--card);
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  padding: 26px;
  border-top: 3px solid var(--red);
}
.md.am { border-top-color: var(--am); }
.md.sl { border-top-color: var(--sl); }
.md.gr { border-top-color: var(--ge); }

/* Modal header */
.mh {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

/* Modal close button */
.mx {
  border: none;
  background: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--gr);
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}

/* Field label inside modal */
.mla {
  font-size: 11px;
  color: var(--gr);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 4px;
}

/* Body text block in modal */
.mbt {
  font-size: 13px;
  color: var(--ch);
  line-height: 1.6;
  background: var(--cr);
  border-radius: 5px;
  padding: 11px 13px;
  margin-bottom: 14px;
  white-space: pre-wrap;
}

/* Two-column row inside modal */
.mrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }

/* Modal action buttons row */
.mac {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--bd);
  flex-wrap: wrap;
}


/* ============================================================
   11. FORMS (manual ticket entry)
   ============================================================ */
.fw  { margin-bottom: 12px; }
.fg  { display: grid; grid-template-columns: 1fr 1fr;     gap: 10px; margin-bottom: 12px; }
.fg3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }

/* Form section heading */
.fsec {
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 16px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bl2);
}
.fsec:first-of-type { margin-top: 0; }

/* Required star */
.req { color: var(--red); }

/* Success message */
.succ {
  background: var(--gl);
  border-left: 3px solid var(--ge);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--gt);
  margin-bottom: 14px;
  display: none;
}

/* Alert info box (in new CR modal) */
.abox {
  background: var(--al);
  border-radius: 4px;
  border-left: 3px solid var(--am);
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--at);
}

/* Incident log entry */
.ie {
  background: var(--cr);
  border-radius: 4px;
  border-left: 3px solid var(--bd);
  padding: 8px 10px;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--gr);
}
.it { font-size: 10px; color: var(--hg); margin-bottom: 2px; }

/* Email chip (admin alerts) */
.ec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--rl);
  color: var(--rt);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  margin: 2px;
}
.ec button {
  border: none;
  background: none;
  color: var(--rt);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

/* Empty state */
.es { text-align: center; padding: 48px 20px; color: var(--gr); }
.es i { font-size: 36px; display: block; margin: 0 auto 10px; color: var(--hg); }


/* ============================================================
   12. CARDS & TABLES
   ============================================================ */
.card {
  background: var(--card);
  border-radius: 6px;
  border: 1px solid var(--bd);
  padding: 18px;
  margin-bottom: 12px;
  transition: box-shadow .15s;
}
.card:hover { box-shadow: var(--glow); }

/* Card title row */
.ctit {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bl2);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Data table */
.ut { width: 100%; border-collapse: collapse; font-size: 13px; }
.ut th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gr);
  padding: 9px 10px;
  border-bottom: 1px solid var(--bd);
  text-align: left;
  font-weight: 700;
}
.ut td { padding: 11px 10px; border-bottom: 1px solid var(--bl2); vertical-align: middle; }
.ut tr:last-child td { border-bottom: none; }

/* Workload bar */
.bw { background: var(--bl2); border-radius: 999px; height: 5px; flex: 1; min-width: 50px; }
.bf { height: 5px; border-radius: 999px; background: var(--red); }

/* User row (admin panel) */
.ur { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bl2); }
.ur:last-child { border-bottom: none; }

/* Avatar - medium (admin panel) */
.avmd {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  flex-shrink: 0;
}

/* Permission row */
.pr { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--bl2); }
.pr:last-child { border-bottom: none; }
.psb { font-size: 11px; color: var(--hg); margin-top: 2px; }

/* Toggle switch */
.tgl { position: relative; width: 36px; height: 20px; flex-shrink: 0; display: inline-block; }
.tgl input { opacity: 0; width: 0; height: 0; position: absolute; }
.tsl { position: absolute; cursor: pointer; inset: 0; background: var(--inbd); border-radius: 999px; transition: .2s; }
.tsl:before {
  position: absolute;
  content: "";
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: var(--card);
  border-radius: 50%;
  transition: .2s;
}
.tgl input:checked + .tsl { background: var(--red); }
.tgl input:checked + .tsl:before { transform: translateX(16px); }

/* Audit log entry */
.ae { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bl2); font-size: 12px; }
.ae:last-child { border-bottom: none; }
.ad { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }


/* ============================================================
   13. STATS & CHARTS
   ============================================================ */

/* Summary stat cards */
.sg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }

.scc {
  background: var(--card);
  border-radius: 6px;
  border: 1px solid var(--bd);
  padding: 15px 17px;
  border-top: 3px solid var(--red);
  transition: box-shadow .15s;
}
.scc:hover { box-shadow: var(--glow); }
.scc.gr { border-top-color: var(--ge); }
.scc.am { border-top-color: var(--am); }
.scc.bl { border-top-color: var(--bl); }

.scv {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  color: var(--ch);
}
.scs { font-size: 11px; color: var(--hg); margin-top: 2px; }

/* Chart grid */
.cg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }

.ccrd {
  background: var(--card);
  border-radius: 6px;
  border: 1px solid var(--bd);
  padding: 15px 17px;
  margin-bottom: 12px;
  transition: box-shadow .15s;
}
.ccrd:hover { box-shadow: var(--glow); }

.ctitle { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; display: flex; align-items: center; gap: 5px; }

/* Chart legend */
.leg { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.li  { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gr); }
.lsq { width: 10px; height: 10px; border-radius: 2px; }

/* Date range bar */
.db {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  background: var(--card);
  padding: 11px 15px;
  border-radius: 8px;
  border: 1px solid var(--bd);
}

/* Preset date range buttons */
.pbt {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: transparent;
  color: var(--gr);
  cursor: pointer;
  user-select: none;
}
.pbt.active { background: var(--red); border-color: var(--red); color: #fff; }
.pbt:hover:not(.active) { border-color: var(--red); color: var(--red); }

/* Apply / export button */
.apb {
  font-size: 12px;
  padding: 6px 13px;
  border-radius: 5px;
  background: var(--red);
  border: none;
  color: #fff;
  cursor: pointer;
}


/* ============================================================
   14. BUTTONS
   ============================================================ */

/* Default outlined button */
.btn {
  font-size: 12px;
  padding: 7px 13px;
  border-radius: 5px;
  border: 1px solid var(--bd);
  background: transparent;
  color: var(--gr);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn:hover { background: var(--cr); border-color: var(--inbd); }

/* Primary (red) */
.btnp {
  background: var(--red);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 17px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btnp:hover { background: var(--rd); }

/* Approve (green) */
.btnap {
  background: #27500A;
  color: #fff;
  border: none;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Deny (red dark) */
.btndn {
  background: var(--rt);
  color: #fff;
  border: none;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Blue action */
.btnbl {
  background: var(--bl);
  color: #fff;
  border: none;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Escalate button (amber outline) */
.escb {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 5px;
  border: 1px solid var(--am);
  background: transparent;
  color: var(--at);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.escb:hover { background: var(--al); }


/* ============================================================
   15. ADMIN PANEL
   ============================================================ */
.adtabs {
  display: flex;
  border-bottom: 1px solid var(--bd);
  margin-bottom: 16px;
  background: var(--card);
  border-radius: 8px;
  overflow: hidden;
}
.atab {
  font-size: 13px;
  padding: 11px 17px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--hg);
  cursor: pointer;
}
.atab.active { color: var(--ch); border-bottom-color: var(--red); font-weight: 600; }


/* ============================================================
   16. QUEUE TABS (tickets page)
   ============================================================ */
/* .qtabs-wrap itself is styled inline in the HTML (same markup as
   before), but app.js toggles its visibility with
   el.style.display = "" / "none" (setQueue() in app.js, to hide the
   queue tabs for regular users). Clearing the inline "display" that
   way falls back to whatever this stylesheet says — so this class
   needs its own real display:flex rule, or the row collapses to the
   browser's block default and every tab stacks on its own line. */
.qtabs-wrap {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  background: var(--card);
  border-radius: 8px;
  border: 1px solid var(--bd);
  overflow: hidden;
}
.qtab {
  font-size: 13px;
  padding: 11px 19px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--gr);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all .15s;
}
.qtab.active {
  color: var(--red);
  border-bottom-color: var(--red);
  font-weight: 600;
  background: var(--rl);
}
.qtab:hover:not(.active) { color: var(--ch); background: var(--cr); border-bottom-color: var(--bd); }

.qtab-badge {
  margin-left: 4px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}
.qtab-badge.am { background: var(--am); }
.qtab-badge.bl { background: var(--bl); }

/* Queue empty state */
.queue-empty { text-align: center; padding: 40px 20px; color: var(--gr); }
.queue-empty i { font-size: 36px; display: block; margin: 0 auto 10px; color: var(--hg); }
.queue-empty .qe-title { font-family: var(--serif); font-size: 16px; color: var(--ch); margin-bottom: 6px; }
.queue-empty .qe-sub  { font-size: 13px; color: var(--hg); }


/* ============================================================
   17. TOAST NOTIFICATION
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #27500A;
  color: #fff;
  padding: 12px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(20px);
  transition: all .3s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }


/* Sync icon spin animation */
@keyframes spin-icon { to { transform: rotate(360deg); } }

/* ============================================================
   18. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--inbd); border-radius: 999px; }


/* ============================================================
   19. HERO BANNER (leaderboard callout, above page content)
   Restyled from a solid charcoal banner to a light card with a
   red accent border, matching the rest of the new look.
   ============================================================ */
.hero-wrap { padding: 16px 26px 0; background: var(--cr); }
.hero-bar {
  background: var(--card);
  border: 1px solid var(--bd);
  border-left: 4px solid var(--red);
  border-radius: 8px;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-l { display: flex; align-items: center; gap: 13px; }
.hero-av {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  flex-shrink: 0;
}
.hero-crown { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 15px; color: var(--am); }
.hero-callout { font-family: var(--serif); font-size: 15.5px; color: var(--ch); }
.hero-sub { font-size: 11.5px; color: var(--ch); margin-top: 2px; }
.hero-r { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.hero-stat { text-align: center; }
.hero-stat-v { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--red); }
.hero-stat-l { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--ch); }
.hero-cd { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--gr); background: var(--cr); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bd); }
.hero-link { font-size: 11px; color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }


/* ============================================================
   20. SEARCH BAR (Archive / Project Archive / Checklist Archive /
   Log In Page Archive / Knowledge Base / SOC / Incidents / Inventory)
   Restyled from a dark charcoal bar to a light bordered field,
   same markup and ids, just lighter.
   ============================================================ */
.search-bar {
  background: var(--card);
  border-radius: 8px;
  padding: 11px 15px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--bd);
}
.search-bar i { font-size: 18px; color: var(--hg); flex-shrink: 0; }
.search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--ch);
  font-size: 14px;
  outline: none;
  padding: 0;
}
.search-bar button {
  border: none;
  background: none;
  color: var(--hg);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}


/* ============================================================
   21. DB STATUS BANNER
   Shown whenever this session isn't connected to Google Sheets —
   deliberately loud (amber, full-width, persistent) since a missed
   "not connected" state is what lets changes silently fail to save.
   ============================================================ */
.db-status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 26px;
  background: var(--al);
  color: var(--at);
  font-size: 12.5px;
  font-weight: 500;
  border-bottom: 1px solid var(--am);
}
.db-status-banner i { font-size: 16px; flex-shrink: 0; }
.db-status-banner strong { font-weight: 700; }


/* ============================================================
   22. TROPHY LEGEND & BADGES (Leaderboard)
   Legend markup lives in index.html (static, just explains the
   tiers); the per-person badges are generated in app.js's
   renderFullLeaderboard() using these same classes, so tier colors
   only need to be defined once, here.
   ============================================================ */
.trophy-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 0 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--bl2);
}
.trophy-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--hg);
}
.trophy-legend-item i { font-size: 14px; }

.trophy-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
}
.trophy-badge i { font-size: 13px; }
.trophy-badge.gold   i { color: #BA7517; }
.trophy-badge.silver i { color: #8C8C94; }
.trophy-badge.bronze i { color: #B0632B; }


/* ============================================================
   23. ADD TICKET REQUESTOR AUTOCOMPLETE
   Dropdown of live Google Workspace directory matches under the
   Full name field on Add Ticket. See Directory.search() in db.js
   and onFnameInput()/pickFnameSuggestion() in app.js.
   ============================================================ */
.asugg {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(44,44,44,.12);
  max-height: 220px;
  overflow-y: auto;
  z-index: 60;
}
.asugg-item {
  padding: 8px 12px;
  cursor: pointer;
}
.asugg-item:hover { background: var(--cr); }
.asugg-name { font-size: 13px; color: var(--ch); font-weight: 500; }
.asugg-email { font-size: 11px; color: var(--hg); margin-top: 1px; }

/* Create Checklist > Email templates: stack type list above editor on narrow screens */
@media (max-width: 760px) {
  .chkem-grid { grid-template-columns: 1fr !important; }
}


/* ---------- @mentions ---------- */
.mention { color: var(--bl); background: var(--ll); border-radius: 3px; padding: 0 3px; font-weight: 500; }
.mention-dd { position: fixed; z-index: 10000; background: var(--card); border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 4px; max-height: 260px; overflow-y: auto; }
.mention-opt { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 4px; cursor: pointer; }
.mention-opt.on, .mention-opt:hover { background: var(--ll); }
.mention-nm { font-size: 13px; color: var(--ch); font-weight: 500; }
.mention-em { font-size: 11px; color: var(--hg); }
.mention-row.new { border-left-color: var(--bl); background: var(--ll); }

/* ---------- Audit log filters ---------- */
.aud-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.aud-g { font-size: 10px; background: var(--sll); color: var(--sl); padding: 1px 6px; border-radius: 999px; }

/* ---------- Checklist templates tab ---------- */
.tpl-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 16px; }
@media (max-width: 860px) { .tpl-grid { grid-template-columns: 1fr; } }
.tpl-col { border: 1px solid var(--bd); border-radius: 8px; padding: 12px; background: var(--card); min-width: 0; }
.tpl-col-h { font-size: 13px; font-weight: 500; color: var(--ch); margin-bottom: 8px; }
.tpl-scroll { max-height: 460px; overflow-y: auto; }
.tpl-lib-row { display: flex; gap: 8px; align-items: flex-start; padding: 7px 6px; border-bottom: 1px solid var(--sll); font-size: 12.5px; cursor: pointer; border-radius: 4px; }
.tpl-lib-row.on { background: var(--rl); }
.tpl-lib-row input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--red); flex-shrink: 0; }
.tpl-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 6px; border-bottom: 1px solid var(--sll); }
.tpl-row.editing { display: block; background: var(--cr); border-radius: 6px; padding: 10px; }
.tpl-num { font-size: 11px; color: var(--hg); width: 18px; text-align: right; margin-top: 2px; flex-shrink: 0; }
.tpl-notes { font-size: 11.5px; color: var(--gr); margin-top: 3px; white-space: pre-wrap; line-height: 1.4; }
.tpl-pill { display: inline-block; font-size: 10px; color: var(--lt); background: var(--ll); padding: 1px 7px; border-radius: 999px; margin-top: 4px; }
.tpl-actions { display: flex; gap: 2px; flex-shrink: 0; }
.tpl-actions .mx[disabled] { opacity: .3; cursor: default; }
.tpl-add { border-top: 1px solid var(--bd); margin-top: 10px; padding-top: 10px; }


/* ============================================================
   DARK MODE (added 2026-10-20)
   Switch at the bottom of the left menu (toggleTheme() in app.js).
   Choice is saved per browser. Everything that uses the color
   variables above follows automatically; the few fixed colors get
   their own overrides below. Email previews stay light on purpose
   (.keep-light), because they show what the recipient will see.
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;
  --red:  #E0445F;  --rd: #c22f4a;  --rl: #3a1820;  --rt: #f3a3b2;
  --am:   #E0A050;  --al: #3a2a14;  --at: #f0c98e;
  --gr:   #B5B2AD;  --hg: #7d7a75;  --ch: #ECEAE6;  --cr: #141414;
  --ge:   #7CC24A;  --gl: #1d2e16;  --gt: #a8dd88;
  --bl:   #5BA3E8;  --ll: #14263a;  --lt: #a9cdf2;
  --sl:   #a5a39e;  --sll: #262523; --st: #d4d2ce;
  --bd:   #343230;  --bl2: #2a2927;
  --card: #1F1F1F;  --inbd: #45423f;
  --glow: 0 0 0 1px rgba(224,68,95,.25), 0 4px 16px rgba(0,0,0,.4);
}
/* Fixed-color badges */
html[data-theme="dark"] .si,
html[data-theme="dark"] .pm  { background: #3a2a14; color: #f0c98e; }
html[data-theme="dark"] .sw2 { background: #2a2a2a; color: #d0d0d0; }
html[data-theme="dark"] .sc  { background: #262626; color: #b0b0b0; }
html[data-theme="dark"] .rpc { background: #2a2140; color: #c7b6f5; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #45423f; }
html[data-theme="dark"] img { opacity: .95; }

/* Islands that must look exactly like the email the recipient gets */
.keep-light {
  --red:#BA0C2F; --rd:#96091f; --rl:#fce8ec; --rt:#7a081f;
  --am:#BA7517; --al:#faeeda; --at:#633806;
  --gr:#535353; --hg:#A7A7A7; --ch:#2C2C2C; --cr:#FAF9F7;
  --ge:#3B6D11; --gl:#e8f5e9; --gt:#1b5e20;
  --bl:#185FA5; --ll:#E6F1FB; --lt:#0C447C;
  --sl:#5F5E5A; --sll:#f1f0ee; --st:#444441;
  --bd:#e0ddd8; --bl2:#f0ede8; --card:#fff; --inbd:#d0cdc8;
  background: #fff !important; color: #2C2C2C;
}

/* The switch */
.theme-tgl { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 12px 28px; padding:8px 10px; border:1px solid var(--bd); border-radius:8px; font-size:12px; color:var(--gr); cursor:pointer; user-select:none; background:var(--cr); }
.theme-tgl:hover { border-color: var(--inbd); }
.theme-sw { width:40px; height:22px; border-radius:999px; background:var(--inbd); position:relative; flex-shrink:0; transition:background .2s; }
.theme-sw::after { content:"\2600"; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; color:#BA7517; font-size:11px; display:flex; align-items:center; justify-content:center; transition:left .2s; }
html[data-theme="dark"] .theme-sw { background: var(--red); }
html[data-theme="dark"] .theme-sw::after { content:"\263E"; left:20px; color:#2C2C2C; }