/* ============================================================
   Jobutsav — design system
   A colorful "liquid glass" admin UI: frosted, translucent panels
   over a soft animated gradient field, vivid gradient accents,
   smooth motion. No external framework, no build step - every
   class name below is unchanged from the previous theme, so every
   PHP template that already uses .card/.btn/.badge/etc keeps working.
   ============================================================ */

:root {
  /* ---- Vivid accent trio (used for gradients everywhere) ---- */
  --accent-violet: #c2410c;
  --accent-blue:   #ea580c;
  --accent-pink:   #fb923c;
  --accent-teal:   #57534e;
  --accent-amber:  #fbbf24;

  --brand-gradient: linear-gradient(135deg, var(--accent-violet) 0%, var(--accent-blue) 55%, var(--accent-pink) 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(194,65,12,0.14), rgba(234,88,12,0.14) 55%, rgba(251,146,60,0.14) 100%);

  --brand-50:  #fff2e8;
  --brand-100: #ffe1cc;
  --brand-200: #ffc199;
  --brand-400: #fb8a3c;
  --brand-500: #f2660f;
  --brand-600: #d4550a;
  --brand-700: #9c3f08;

  --ink-900: #211d19;
  --ink-700: #4a433c;
  --ink-500: #7a7166;
  --ink-300: #ddd4c9;
  --ink-100: #f3ede4;
  --ink-50:  #faf6f0;

  --success: #12b76a;
  --success-bg: #e7fbf1;
  --warning: #ca8a04;
  --warning-bg: #fdf5db;
  --danger:  #dc2626;
  --danger-bg: #fdeceb;
  --info:    #0ba5ec;
  --info-bg: #e9f8ff;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(120, 53, 15, 0.08);
  --shadow-md: 0 12px 32px rgba(120, 53, 15, 0.16);
  --shadow-glow: 0 8px 28px rgba(234, 88, 12, 0.30);
  --sidebar-w: 264px;
  --topbar-h: 68px;

  /* ---- Glass ---- */
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur: blur(20px) saturate(160%);

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Outfit', var(--font);

  /* ---- Theme-variant tokens (redefined under [data-theme="dark"] and
     [data-theme="light"] below - everything above this line + the brand/
     accent colors stay identical across all three themes, only these
     surface/text tokens change). Values here are the "Liquid Glass"
     theme's own (the original, default look), so this whole block is a
     zero-visual-change refactor on its own - the two theme overrides are
     what actually change anything. ---- */
  --glass-1: rgba(255, 255, 255, 0.55);         /* weak glass surface: notif bell, table-wrap, pagination pills, outline buttons */
  --glass-1-hover: rgba(255, 255, 255, 0.85);   /* hover state of the above */
  --glass-2: var(--glass-bg-strong);            /* strong glass surface: cards, topbar, notif panel */
  --surface-opaque: #fff;                       /* fully solid surface: dropdown lists, focused inputs, pagination/outline-button hover */
  --input-bg: rgba(255, 255, 255, 0.75);
  --table-tint: rgba(194, 65, 12, 0.06);        /* brand-tinted table header bg + row hover */
  --table-border: rgba(221, 212, 201, 0.6);     /* table cell border */
  --body-glow-1: rgba(194, 65, 12, 0.10);
  --body-glow-2: rgba(87, 83, 78, 0.09);
  --body-glow-3: rgba(251, 146, 60, 0.10);
  --ring-surface: #fff;                         /* the ring around the notification badge - matches whatever it's sitting on */

  --sidebar-grad-1: #201a14;
  --sidebar-grad-2: #2b2117;
  --sidebar-grad-3: #171310;
  --sidebar-shadow-color: rgba(20, 14, 8, 0.35);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-border-soft: rgba(255, 255, 255, 0.06);
  --sidebar-text: #e4d8c8;
  --sidebar-text-strong: #fff;
  --sidebar-text-muted: #a89a89;
  --sidebar-link-text: #d9cdbe;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);

  --success-text: #067647;
  --warning-text: #b25e09;
  --danger-text: #b42318;
  --info-text: #026aa2;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink-900);
  background: var(--ink-50);
  background-image:
    radial-gradient(circle at 12% 8%, var(--body-glow-1), transparent 40%),
    radial-gradient(circle at 88% 18%, var(--body-glow-2), transparent 42%),
    radial-gradient(circle at 30% 92%, var(--body-glow-3), transparent 45%);
  background-attachment: fixed;
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 0.4em; font-weight: 700; color: var(--ink-900); font-family: var(--font-display); letter-spacing: -0.01em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.12rem; }
p { margin: 0 0 0.8em; }

/* ---------- Floating gradient orbs (ambient, decorative, behind everything) ---------- */
.bg-orbs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  will-change: transform;
  animation: orb-float 26s ease-in-out infinite;
}
.bg-orbs span:nth-child(1) {
  width: 420px; height: 420px; top: -120px; left: -100px;
  background: radial-gradient(circle, var(--accent-violet), transparent 70%);
  animation-duration: 24s;
}
.bg-orbs span:nth-child(2) {
  width: 380px; height: 380px; top: 20%; right: -140px;
  background: radial-gradient(circle, var(--accent-teal), transparent 70%);
  animation-duration: 30s;
  animation-delay: -6s;
}
.bg-orbs span:nth-child(3) {
  width: 460px; height: 460px; bottom: -160px; left: 30%;
  background: radial-gradient(circle, var(--accent-pink), transparent 70%);
  animation-duration: 34s;
  animation-delay: -14s;
}
@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, 40px) scale(1.08); }
  66% { transform: translate(-25px, -20px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-orbs span { animation: none; }
}

/* ---------- Glass helper (used by cards, sidebar, topbar, auth cards) ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; position: relative; z-index: 1; }

.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(190deg, var(--sidebar-grad-1) 0%, var(--sidebar-grad-2) 45%, var(--sidebar-grad-3) 100%);
  color: var(--sidebar-text);
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  z-index: 40;
  transition: transform 0.25s ease;
  box-shadow: 4px 0 30px var(--sidebar-shadow-color);
  border-right: 1px solid var(--sidebar-border-soft);
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--sidebar-border);
  color: var(--sidebar-text-strong); font-weight: 700; font-size: 1.1rem; font-family: var(--font-display);
}
.sidebar-brand img { height: 52px; width: auto; display: block; border-radius: 10px; background: #fff; padding: 4px; }
.sidebar-brand .dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-gradient);
  box-shadow: 0 0 14px 2px rgba(234, 88, 12, 0.75);
}
.sidebar-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--sidebar-border);
  font-size: 0.74rem; color: var(--sidebar-text-muted);
}
.sidebar-footer img { height: 22px; width: auto; opacity: 0.9; }
.sidebar nav { padding: 14px 12px; }
.sidebar .nav-section { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sidebar-text-muted); margin: 20px 12px 8px; font-weight: 600; }
.sidebar a.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: var(--radius-sm);
  color: var(--sidebar-link-text); font-size: 0.92rem; margin-bottom: 3px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sidebar a.nav-link:hover { background: var(--sidebar-hover-bg); text-decoration: none; color: var(--sidebar-text-strong); transform: translateX(2px); }
.sidebar a.nav-link.active {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.45);
}
.sidebar a.nav-link .icon { width: 18px; text-align: center; opacity: 0.9; }

.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--topbar-h);
  background: var(--glass-2);
  border-bottom: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px;
  position: sticky; top: 0; z-index: 30;
  box-shadow: 0 1px 0 rgba(120,53,15,0.06);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .topbar { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}
.topbar .page-title { font-weight: 700; font-size: 1.15rem; font-family: var(--font-display); }
.topbar .user-menu { display: flex; align-items: center; gap: 10px; }
.topbar .user-menu img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--ink-100); border: 2px solid var(--ring-surface); box-shadow: var(--shadow-sm); }
.sidebar-toggle { display: none; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--ink-700); }

.content { padding: 26px; max-width: 1400px; width: 100%; margin: 0 auto; position: relative; z-index: 1; }

@media (max-width: 960px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .sidebar-toggle { display: inline-block; }
}

/* ---------- Cards & layout helpers ---------- */
.card {
  background: var(--glass-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  margin-bottom: 22px;
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .card { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
}
.card::before {
  content: "";
  position: absolute; top: 0; left: 22px; right: 22px; height: 3px;
  background: var(--brand-gradient);
  border-radius: 0 0 4px 4px;
  opacity: 0.85;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.card-header h2, .card-header h3 { margin: 0; }

.grid { display: grid; gap: 18px; }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; } }

.stat-card { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.stat-card .value {
  font-size: 2rem; font-weight: 800; font-family: var(--font-display);
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-card .label { color: var(--ink-500); font-size: 0.85rem; }
.stat-card .delta { font-size: 0.8rem; font-weight: 600; }
.stat-card .delta.up { color: var(--success); }
.stat-card .delta.down { color: var(--danger); }

/* ---------- Dashboard: monthly trend mini bar-chart ---------- */
.trend-legend { display: flex; gap: 18px; margin-bottom: 14px; font-size: 0.82rem; color: var(--ink-500); }
.trend-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.trend-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.trend-swatch-reg { background: var(--info); }
.trend-swatch-sel { background: var(--brand-500); }
.trend-chart {
  display: flex; align-items: flex-end; gap: 14px; overflow-x: auto;
  padding-bottom: 4px;
}
.trend-col { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 44px; }
.trend-bars {
  display: flex; align-items: flex-end; gap: 4px; height: 120px; width: 100%;
  justify-content: center;
}
.trend-bar { width: 12px; min-height: 3px; border-radius: 4px 4px 0 0; }
.trend-bar-reg { background: var(--info); }
.trend-bar-sel { background: var(--brand-500); }
.trend-counts { font-size: 0.72rem; color: var(--ink-500); margin-top: 8px; white-space: nowrap; }
.trend-month { font-size: 0.76rem; color: var(--ink-700); font-weight: 600; margin-top: 2px; white-space: nowrap; }
@media (max-width: 900px) { .trend-col { min-width: 60px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 999px;
  font-size: 0.88rem; font-weight: 650; border: 1px solid transparent;
  cursor: pointer; background: var(--ink-100); color: var(--ink-700);
  line-height: 1.2;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); filter: brightness(1.03); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand-gradient); color: #fff; box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35); }
.btn-primary:hover { box-shadow: 0 6px 20px rgba(234, 88, 12, 0.48); }
.btn-success { background: linear-gradient(135deg, #12b76a, #059669); color: #fff; box-shadow: 0 4px 14px rgba(18,183,106,0.3); }
.btn-danger { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; box-shadow: 0 4px 14px rgba(220,38,38,0.3); }
.btn-outline { background: var(--glass-1); border: 1px solid var(--ink-300); color: var(--ink-700); }
.btn-outline:hover { background: var(--surface-opaque); }
.btn-sm { padding: 6px 13px; font-size: 0.78rem; }
.btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
label { display: block; font-size: 0.82rem; font-weight: 650; color: var(--ink-700); margin-bottom: 5px; }
label .req { color: var(--danger); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], input[type=search], input[type=file],
select, textarea {
  width: 100%; padding: 10px 13px; border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm); font-size: 0.9rem; font-family: var(--font);
  background: var(--input-bg); color: var(--ink-900);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent-violet); box-shadow: 0 0 0 4px var(--brand-100); background: var(--surface-opaque);
}
textarea { resize: vertical; min-height: 90px; }
.help-text { font-size: 0.78rem; color: var(--ink-500); margin-top: 4px; }
.field-error { font-size: 0.78rem; color: var(--danger); margin-top: 4px; font-weight: 600; }
.checkbox-group label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.checkbox-group input { width: auto; }
/* The staff-message compose page's recipient search (see
   data-message-recipient-search in app.js) hides non-matching rows via the
   `hidden` attribute - same cascade gotcha as .notif-panel/.lightbox-overlay
   above: the unconditional `display: flex` one line up otherwise beats the
   browser's own [hidden] rule at equal specificity. */
.checkbox-group label[hidden] { display: none; }

/* ---------- Searchable combobox (progressive enhancement of <select data-combobox>) ---------- */
/* Without an explicit width here, this wrapper collapses to a tiny
   content-based size inside a flex row (.filter-bar) or a grid cell
   (.form-row) instead of filling the field like every other input does -
   width:100% makes it fill its field normally, and min-width is a hard
   floor so it still reads as a normal-sized field even inside a narrow
   flex item. .filter-bar already scrolls horizontally
   (overflow-x:auto) and .form-row already collapses to fewer columns on
   narrow screens, so this stays responsive on mobile without extra rules. */
.combobox { position: relative; width: 100%; min-width: 240px; }
.combobox-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.combobox-input { cursor: text; }
.combobox-input:disabled { background: var(--ink-100); cursor: not-allowed; }
.combobox-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  max-height: 320px; overflow-y: auto; background: var(--surface-opaque); border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgba(33,29,25,0.18); padding: 5px;
}
.combobox-option { padding: 10px 12px; border-radius: 6px; font-size: 0.92rem; cursor: pointer; color: var(--ink-900); }
.combobox-option:hover, .combobox-option.is-active { background: var(--brand-50); }
.combobox-option.is-selected { font-weight: 650; color: var(--accent-violet); }
.combobox-option[aria-disabled="true"] { color: var(--ink-500); cursor: not-allowed; }
.combobox-empty { padding: 10px 12px; font-size: 0.88rem; color: var(--ink-500); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--glass-border); border-radius: var(--radius-md); background: var(--glass-1); }
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; min-width: 640px; }
table.data-table th {
  text-align: left; background: var(--table-tint); color: var(--ink-700);
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  padding: 12px 14px; border-bottom: 1px solid var(--ink-100); white-space: nowrap;
}
table.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--table-border); vertical-align: middle; }
table.data-table tbody tr { transition: background 0.12s ease; }
table.data-table tbody tr:hover { background: var(--table-tint); }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table th.text-right,
table.data-table td.text-right { text-align: right; }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px; border-radius: 999px; font-size: 0.75rem; font-weight: 650;
  background: var(--ink-100); color: var(--ink-700);
}
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-danger  { background: var(--danger-bg); color: var(--danger-text); }
.badge-info    { background: var(--info-bg); color: var(--info-text); }

/* ---------- Notification bell (top bar, next to Log out) ---------- */
.notif { position: relative; }
.notif-bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-1);
  cursor: pointer;
  font-size: 1.05rem;
  color: var(--ink-700);
  transition: background 0.15s ease, transform 0.1s ease;
}
.notif-bell:hover { background: var(--glass-1-hover); }
.notif-bell:active { transform: scale(0.94); }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--ring-surface);
}
.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--glass-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 60;
}
/* The [hidden] attribute is how assets/js/app.js opens/closes this panel
   (notifPanel.hidden = true/false) - without this rule, .notif-panel's own
   "display: flex" above (an author rule) wins the cascade over the
   browser's default "[hidden] { display: none }" (a same-specificity but
   lower-priority user-agent rule), so the panel would stay visible even
   while [hidden] is set. */
.notif-panel[hidden] { display: none; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .notif-panel { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}
.notif-panel-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--ink-100);
  font-weight: 700;
  font-family: var(--font-display);
}
.notif-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; }
.notif-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
}
a.notif-item:hover { background: var(--ink-50); }
.notif-item-icon {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 700; color: #fff;
}
.notif-item-icon.violet { background: var(--accent-violet); }
.notif-item-icon.blue   { background: var(--accent-blue); }
.notif-item-icon.pink   { background: var(--brand-500); }
.notif-item-icon.amber  { background: var(--accent-amber); color: var(--ink-900); }
.notif-item-icon.teal   { background: var(--accent-teal); }
.notif-item-icon.success{ background: var(--success); }
.notif-item-icon.info   { background: var(--info); }
.notif-item-icon.warning{ background: var(--warning); }
.notif-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notif-item-title { display: block; font-weight: 650; font-size: 0.85rem; line-height: 1.3; }
.notif-item-desc { display: block; font-size: 0.8rem; color: var(--ink-500); margin-top: 1px; line-height: 1.35; overflow-wrap: anywhere; }
.notif-item-time { display: block; font-size: 0.72rem; color: var(--ink-300); margin-top: 3px; }
.notif-empty { padding: 26px 14px; text-align: center; color: var(--ink-500); font-size: 0.85rem; }
/* Small unread dot - shown on any notification item still unread (a
   staff-message item that its recipient hasn't opened yet, or - same rule
   the badge count itself uses - any other item newer than the last time
   the bell was opened). See renderNotifications() in app.js. */
.notif-item-unread-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-500); margin-top: 6px;
}

/* ---------- Click-to-enlarge lightbox (staff photos, employer logos,
   image message attachments) ---------- */
.img-zoomable { cursor: zoom-in; }
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 15, 20, 0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
/* Same cascade gotcha as .notif-panel above: an author rule with an
   unconditional `display` beats the browser's own [hidden] rule at equal
   specificity, so this override is required or the overlay never hides. */
.lightbox-overlay[hidden] { display: none; }
.lightbox-overlay img {
  max-width: 92vw; max-height: 92vh;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: absolute; top: 18px; right: 24px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff; border: none;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,0.22); }

@media (max-width: 960px) {
  .notif-panel { position: fixed; top: var(--topbar-h); right: 8px; left: 8px; width: auto; }
}

/* ---------- Alerts / flash messages ---------- */
.alert { padding: 13px 17px; border-radius: var(--radius-md); margin-bottom: 16px; font-size: 0.88rem; border: 1px solid transparent; }
.alert-success { background: var(--success-bg); color: var(--success-text); border-color: #abefc6; }
.alert-error   { background: var(--danger-bg);  color: var(--danger-text); border-color: #fecdca; }
.alert-info    { background: var(--info-bg);    color: var(--info-text); border-color: #b9e6fe; }

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #241b13 0%, #7c2d12 45%, #c2410c 100%);
  padding: 20px; position: relative; overflow: hidden; z-index: 1;
}
.auth-card {
  background: var(--glass-bg-strong);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(20, 10, 5, 0.4);
  padding: 40px; width: 100%; max-width: 400px; position: relative; z-index: 2;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .auth-card { -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
}
.auth-card .logo { text-align: center; margin-bottom: 18px; font-weight: 800; font-size: 1.25rem; font-family: var(--font-display); color: var(--ink-900); }
.auth-card .logo img { height: 96px; width: auto; border-radius: 14px; background: #fff; padding: 6px; box-shadow: var(--shadow-sm); }
.auth-card .subtitle { text-align: center; color: var(--ink-500); margin-bottom: 24px; font-size: 0.88rem; }

/* ---------- Misc ---------- */
.text-muted { color: var(--ink-500); }
.d-flex { display: flex; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 14px; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.pagination { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--ink-300); font-size: 0.85rem; background: var(--glass-1); }
.pagination a:hover { text-decoration: none; background: var(--surface-opaque); }
.pagination .current { background: var(--brand-gradient); color: #fff; border-color: transparent; }
.pagination-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; margin-top: 16px;
}
.pagination-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.per-page-picker { display: flex !important; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.per-page-picker select { width: auto; padding: 6px 10px; font-size: 0.85rem; }

/* ---------- Inline "quick update" status controls ---------- */
select.badge-select {
  appearance: none; -webkit-appearance: none;
  width: auto; padding: 5px 28px 5px 12px; border-radius: 999px; border: 1px solid transparent;
  font-size: 0.75rem; font-weight: 650; cursor: pointer;
  background-color: var(--ink-100); color: var(--ink-700);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
select.badge-select:focus { box-shadow: 0 0 0 3px var(--brand-100); }
select.badge-select.badge-success { background-color: var(--success-bg); color: var(--success-text); }
select.badge-select.badge-warning { background-color: var(--warning-bg); color: var(--warning-text); }
select.badge-select.badge-danger  { background-color: var(--danger-bg); color: var(--danger-text); }
select.badge-select.badge-info    { background-color: var(--info-bg); color: var(--info-text); }

.id-chip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; color: var(--ink-500); }

/* Transient feedback when a quick-update / inline AJAX action completes. */
tr.row-saving { opacity: 0.6; }
tr.row-flash-success td { transition: background 0.3s ease; background: var(--success-bg) !important; }
tr.row-flash-error td { transition: background 0.3s ease; background: var(--danger-bg) !important; }
.empty-state { text-align: center; padding: 48px 20px; color: var(--ink-500); }
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
.filter-bar .form-group { margin-bottom: 0; min-width: 160px; }

/* ============================================================
   Theme picker: Liquid Glass (default, above) / Dark / Light
   ------------------------------------------------------------
   Every staff member picks one from the switcher next to the
   notification bell (see .theme-switcher below, templates/layout/app.php,
   core/Theme.php, and modules/theme/set.php). The choice is saved per
   account - not per browser - so it's the same on every device the next
   time that person logs in.

   Both blocks below override ONLY the "theme-variant tokens" defined at
   the end of :root plus the base --ink-* scale - the brand/accent colors
   (the orange gradient, its glows, badge/alert hues) are deliberately
   IDENTICAL in all three themes, so the app always reads as "Jobutsav",
   just lighter or darker. [data-theme="x"] has the same CSS specificity
   as :root (both 0-1-0), so - same rule as an Artifact's light/dark
   handling - source order is what makes these actually win; keep them
   after :root in the file.
   ============================================================ */
[data-theme="dark"] {
  --ink-900: #f3ede4;   /* primary text - was-dark, now-light */
  --ink-700: #c9beae;   /* secondary text */
  --ink-500: #a3978a;   /* muted text */
  --ink-300: #4a4238;   /* borders, dividers */
  --ink-100: #2a241c;   /* subtle fill (badge bg, table header rule) */
  --ink-50:  #131110;   /* page background */

  --glass-bg: rgba(38, 32, 25, 0.55);
  --glass-bg-strong: rgba(38, 32, 25, 0.82);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-1: rgba(255, 255, 255, 0.06);
  --glass-1-hover: rgba(255, 255, 255, 0.12);
  --glass-2: var(--glass-bg-strong);
  --surface-opaque: #211c16;
  --input-bg: rgba(255, 255, 255, 0.05);
  --table-tint: rgba(242, 102, 15, 0.10);
  --table-border: rgba(255, 255, 255, 0.08);
  --body-glow-1: rgba(194, 65, 12, 0.16);
  --body-glow-2: rgba(87, 83, 78, 0.20);
  --body-glow-3: rgba(251, 146, 60, 0.14);
  --ring-surface: #211c16;

  /* Sidebar was already dark in Liquid Glass - Dark theme just deepens it
     slightly further so it still reads as a distinct panel against the
     now-also-dark content area, instead of the two blending into one. */
  --sidebar-grad-1: #171310;
  --sidebar-grad-2: #1d1712;
  --sidebar-grad-3: #0e0c0a;

  --success-bg: rgba(18, 183, 106, 0.16);
  --success-text: #4ade80;
  --warning-bg: rgba(202, 138, 4, 0.16);
  --warning-text: #fbbf24;
  --danger-bg: rgba(220, 38, 38, 0.16);
  --danger-text: #f87171;
  --info-bg: rgba(11, 165, 236, 0.16);
  --info-text: #38bdf8;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.5);
}
/* Alerts additionally set a border-color inline (.alert-success etc.) that
   isn't behind a variable - soften those three to match the dark palette. */
[data-theme="dark"] .alert-success { border-color: rgba(74, 222, 128, 0.35); }
[data-theme="dark"] .alert-error   { border-color: rgba(248, 113, 113, 0.35); }
[data-theme="dark"] .alert-info    { border-color: rgba(56, 189, 248, 0.35); }
/* input-focus and combobox-option:hover reference --brand-100 (a light
   peachy tint) for their focus ring/highlight - fine as a bright accent on
   a dark surface as-is, no override needed. Scrollbars and the browser's
   own light-by-default form-control chrome are the one thing CSS variables
   can't reach - this line asks the browser to draw those in dark instead. */
[data-theme="dark"] { color-scheme: dark; }

[data-theme="light"] {
  /* Same ink scale as Liquid Glass (already light-on-light), just a touch
     cooler/flatter and with a pure white page instead of a warm cream one. */
  --ink-50: #ffffff;

  /* Flat and minimal: full opacity, no blur, plain borders - the
     "professional, no-frills" option next to the two glass looks. */
  --glass-bg: #ffffff;
  --glass-bg-strong: #ffffff;
  --glass-border: #e7e2d9;
  --glass-blur: blur(0px);
  --glass-1: #f7f4ef;
  --glass-1-hover: #ffffff;
  --glass-2: #ffffff;
  --surface-opaque: #ffffff;
  --input-bg: #ffffff;
  --body-glow-1: rgba(194, 65, 12, 0.04);
  --body-glow-2: rgba(87, 83, 78, 0.03);
  --body-glow-3: rgba(251, 146, 60, 0.04);

  /* Sidebar goes light too, so the whole shell reads as one flat, bright
     surface rather than Liquid Glass/Dark's "dark rail, bright content". */
  --sidebar-grad-1: #ffffff;
  --sidebar-grad-2: #ffffff;
  --sidebar-grad-3: #ffffff;
  --sidebar-shadow-color: rgba(33, 29, 25, 0.08);
  --sidebar-border: #ece7de;
  --sidebar-border-soft: #ece7de;
  --sidebar-text: var(--ink-700);
  --sidebar-text-strong: var(--ink-900);
  --sidebar-text-muted: var(--ink-500);
  --sidebar-link-text: var(--ink-700);
  --sidebar-hover-bg: var(--brand-50);

  --shadow-sm: 0 1px 3px rgba(33, 29, 25, 0.06);
  --shadow-md: 0 8px 20px rgba(33, 29, 25, 0.10);
  color-scheme: light;
}
/* The sidebar's own logo/active-nav-link text was hardcoded white assuming
   a permanently-dark sidebar (true for Liquid Glass/Dark, not Light) - flip
   just those two to the ink scale so they stay legible on Light's white rail. */
[data-theme="light"] .sidebar-brand { color: var(--sidebar-text-strong); }
[data-theme="light"] .sidebar a.nav-link:hover { color: var(--sidebar-text-strong); }
[data-theme="light"] .sidebar-brand .dot { box-shadow: none; }
[data-theme="light"] .bg-orbs { opacity: 0.5; }

/* ---------- Theme switcher (top bar, next to the notification bell) ---------- */
.theme-switcher {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: var(--glass-1); border: 1px solid var(--glass-border);
}
.theme-switcher button {
  border: none; background: transparent; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; color: var(--ink-500);
  transition: background 0.15s ease, color 0.15s ease;
}
.theme-switcher button:hover { background: var(--glass-1-hover); color: var(--ink-900); }
.theme-switcher button.is-active {
  background: var(--brand-gradient); color: #fff;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35);
}
.theme-switcher button:disabled { cursor: default; opacity: 0.7; }

@media print {
  .sidebar, .topbar, .no-print, .bg-orbs { display: none !important; }
  .main { margin-left: 0; }
  body { background: #fff; }
  .card { background: #fff; box-shadow: none; }
}

/* ============================================================
   Dashboard 2.0 - hero banner, smart-insight cards, KPI icons,
   journey funnel, sparkline, thin bar lists, share bars, salary
   columns, feed/leaderboard lists and the hover tooltip.
   Data colours (validated for light + dark with the dataviz
   validator): --dv-a blue, --dv-b orange, --dv-o neutral "other".
   ============================================================ */
:root {
  --dv-a: #0ba5ec;   /* blue   - registrations / "the many" */
  --dv-b: #f2660f;   /* orange - selections / placements (matches brand) */
  --dv-o: #a8a29e;   /* neutral - "other" */
}
[data-theme="dark"] {
  --dv-a: #0a96d6;
  --dv-b: #e8590c;
  --dv-o: #78716c;
}

@keyframes dashRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dashGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dashGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: no-preference) {
  .dash-hero, .insight, .dash-kpi { animation: dashRise .45s ease both; }
  .insight { animation-delay: var(--d, 0ms); }
  .hb-fill, .funnel-fill, .share-seg, .meter-fill { transform-origin: left center; animation: dashGrow .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
  .col-bar { transform-origin: bottom center; animation: dashGrowY .7s cubic-bezier(.2,.7,.2,1) both; }
}

/* ---- Hero ---- */
.dash-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between;
  gap: 18px 28px; flex-wrap: wrap; margin-bottom: 18px; padding: 22px 26px; border-radius: 18px;
  background: var(--brand-gradient-soft); border: 1px solid var(--glass-border, var(--ink-100));
}
.dash-hero::before, .dash-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.dash-hero::before { width: 220px; height: 220px; right: -60px; top: -90px; background: radial-gradient(circle, rgba(251,146,60,.35), transparent 70%); }
.dash-hero::after  { width: 160px; height: 160px; left: 38%; bottom: -90px; background: radial-gradient(circle, rgba(194,65,12,.22), transparent 70%); }
.dash-hero-text { position: relative; z-index: 1; min-width: 240px; }
.dash-hero-text h1 { margin: 2px 0 4px; }
.dash-hero-text p { margin: 0; }
.dash-hero-date { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-600); }
.dash-hero-pills { position: relative; z-index: 1; display: flex; gap: 12px; flex-wrap: wrap; }
.dash-pill {
  display: flex; flex-direction: column; min-width: 120px; max-width: 200px; padding: 10px 16px; border-radius: 14px;
  background: var(--glass-1); border: 1px solid var(--glass-border, var(--ink-100));
}
.dash-pill-num { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.15; color: var(--ink-900); }
.dash-pill-lbl { font-size: .74rem; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Section titles ---- */
.dash-section-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 26px 0 12px; }
.dash-section-title h2 { margin: 0; font-size: 1.15rem; }
.dash-section-title span { font-size: .85rem; }
.dash-sub { font-size: .8rem; }
.dash-foot { font-size: 12px; margin: 12px 0 0; }
.dash-h4 { margin: 16px 0 8px; font-size: .85rem; color: var(--ink-700); }

/* ---- Smart insights ---- */
.dash-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-bottom: 8px; }
.insight {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
  background: var(--glass-2); border: 1px solid var(--glass-border, var(--ink-100)); border-left: 4px solid var(--ink-300);
}
.insight-brand   { border-left-color: var(--brand-500); }
.insight-info    { border-left-color: var(--info); }
.insight-success { border-left-color: var(--success); }
.insight-warning { border-left-color: var(--warning); }
.insight-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; font-size: 1.1rem; border-radius: 10px; background: var(--ink-100); }
.insight-brand .insight-icon   { background: var(--brand-50); }
.insight-info .insight-icon    { background: var(--info-bg); }
.insight-success .insight-icon { background: var(--success-bg); }
.insight-warning .insight-icon { background: var(--warning-bg); }
[data-theme="dark"] .insight-brand .insight-icon { background: rgba(242,102,15,.16); }
.insight-title { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.insight-text { font-size: .9rem; color: var(--ink-900); line-height: 1.4; margin-top: 2px; }

/* ---- KPI cards: corner icon + meter ---- */
.dash-kpi { position: relative; }
.dash-kpi::after {
  content: attr(data-icon); position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: grid; place-items: center; font-size: 1.05rem; border-radius: 10px; background: var(--brand-gradient-soft);
}
.meter { height: 6px; border-radius: 999px; background: var(--ink-100); margin-top: 8px; overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: var(--brand-gradient); }

/* ---- Journey funnel ---- */
.funnel { display: flex; flex-direction: column; gap: 14px; }
.funnel-row { display: grid; grid-template-columns: 150px 1fr 110px; align-items: center; gap: 12px; outline-offset: 3px; }
.funnel-label { font-size: .86rem; color: var(--ink-700); font-weight: 600; }
.funnel-track { height: 16px; border-radius: 8px; background: var(--ink-100); overflow: hidden; }
.funnel-fill { height: 100%; border-radius: 0 8px 8px 0; background: var(--dv-b); opacity: var(--o, 1); }
.funnel-val { display: flex; flex-direction: column; line-height: 1.2; text-align: right; color: var(--ink-900); }
.funnel-conv { font-size: .7rem; color: var(--ink-500); }
@media (max-width: 600px) { .funnel-row { grid-template-columns: 90px 1fr 80px; gap: 8px; } }

/* ---- Sparkline ---- */
.spark-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; font-size: .84rem; }
.spark-big { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--ink-900); }
.spark { position: relative; height: 120px; }
.spark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.spark-line { fill: none; stroke: var(--dv-a); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-area { fill: var(--dv-a); opacity: .14; }
.spark-hits { position: absolute; inset: 0; display: flex; }
.spark-hit { flex: 1; position: relative; outline: none; }
.spark-hit:hover, .spark-hit:focus { background: linear-gradient(to right, transparent calc(50% - 1px), var(--ink-300) calc(50% - 1px), var(--ink-300) calc(50% + 1px), transparent calc(50% + 1px)); }
.spark-hit:hover::after, .spark-hit:focus::after {
  content: ""; position: absolute; left: 50%; top: var(--y); width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--dv-a); box-shadow: 0 0 0 2px var(--surface-opaque);
}
.spark-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: .72rem; color: var(--ink-500); }

/* ---- Thin horizontal bar lists ---- */
.hb-list { display: flex; flex-direction: column; gap: 10px; }
.hb-row { display: grid; grid-template-columns: minmax(90px, 36%) 1fr auto; align-items: center; gap: 10px; font-size: .86rem; outline-offset: 3px; border-radius: 6px; }
.hb-row + .hb-row { margin-top: 10px; }
.hb-list .hb-row + .hb-row { margin-top: 0; }
.hb-label { color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-val { color: var(--ink-900); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 2.2em; }
.hb-track { display: block; height: 8px; border-radius: 999px; background: var(--ink-100); overflow: hidden; }
.hb-track-2 { height: auto; background: none; display: flex; flex-direction: column; gap: 2px; overflow: visible; }
.hb-track-2 .hb-fill { height: 6px; }
.hb-fill { display: block; height: 100%; border-radius: 0 999px 999px 0; }
.hb-brand, .hb-b { background: var(--dv-b); }
.hb-a { background: var(--dv-a); }
.hb-o { background: var(--dv-o); }
.hb-row:hover .hb-fill, .hb-row:focus .hb-fill { filter: brightness(1.12); }
.hb-pair { grid-template-columns: minmax(90px, 30%) 1fr auto; }
@media (max-width: 600px) { .hb-row, .hb-pair { grid-template-columns: minmax(70px, 34%) 1fr auto; } }

/* ---- Legend (shared) ---- */
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: .82rem; color: var(--ink-700); }
.legend-top { margin: 0 0 12px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }

/* ---- Share (stacked 100%) bars ---- */
.share-row { margin-bottom: 14px; }
.share-label { font-size: .84rem; color: var(--ink-700); font-weight: 600; margin-bottom: 6px; }
.share-bar { display: flex; gap: 2px; height: 18px; }
.share-seg { min-width: 4px; border-radius: 4px; outline-offset: 2px; }
.share-empty { color: var(--ink-500); font-size: .8rem; align-items: center; }
.seg-a { background: var(--dv-a); }
.seg-b { background: var(--dv-b); }
.seg-o { background: var(--dv-o); }
.share-seg:hover, .share-seg:focus { filter: brightness(1.12); }

/* ---- Chips / mini stats ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { padding: 5px 12px; border-radius: 999px; background: var(--ink-100); font-size: .8rem; color: var(--ink-700); }
.chip strong { color: var(--ink-900); }
.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mini-stat { padding: 10px 12px; border-radius: 12px; background: var(--ink-100); text-align: center; }
.mini-num { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--ink-900); }
.mini-lbl { font-size: .72rem; color: var(--ink-500); }
@media (max-width: 600px) { .mini-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- Salary columns ---- */
.cols { display: flex; align-items: flex-end; gap: 10px; height: 190px; }
.col-item { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; outline-offset: 2px; }
.col-val { font-size: .8rem; font-weight: 700; color: var(--ink-900); margin-bottom: 4px; }
.col-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.col-bar { width: min(44px, 70%); border-radius: 4px 4px 0 0; background: var(--dv-b); }
.col-item:hover .col-bar, .col-item:focus .col-bar { filter: brightness(1.12); }
.col-lbl { margin-top: 8px; font-size: .68rem; color: var(--ink-500); text-align: center; line-height: 1.25; }

/* ---- Feed + ranking lists ---- */
.feed, .rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.feed-item { display: flex; align-items: center; gap: 12px; }
.feed-avatar {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%;
  font-weight: 800; color: #fff; background: var(--brand-gradient);
}
.feed-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.feed-main a, .rank-main a { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-sub { font-size: .76rem; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.feed-time { font-size: .7rem; color: var(--ink-500); }
.rank-item { display: flex; align-items: center; gap: 12px; outline-offset: 3px; border-radius: 8px; }
.rank-no { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink-100); color: var(--ink-700); font-size: .78rem; font-weight: 800; }
.rank-item:nth-child(1) .rank-no { background: var(--brand-gradient); color: #fff; }
.rank-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.rank-val { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-900); }

/* ---- Tooltip ---- */
.dash-tip {
  position: fixed; z-index: 3000; pointer-events: none; max-width: 280px; padding: 7px 11px; border-radius: 8px;
  font-size: .78rem; font-weight: 600; line-height: 1.3; color: var(--ink-900);
  background: var(--surface-opaque); border: 1px solid var(--ink-300); box-shadow: var(--shadow-md);
}
.dash-tip[hidden] { display: none; }

@media print { .dash-tip { display: none !important; } .dash-hero { background: #fff; border: 1px solid #ddd; } }

/* Let cards in 2/3/4-column grids shrink to their column so a wide table
   scrolls inside its own .table-wrap instead of stretching the whole page
   sideways (it did on the dashboard's Drive Type / Top Employers row). */
.grid > .card { min-width: 0; }
/* Tables inside narrow half-width cards don't need the 640px floor the
   full-width tables use - lets 3-4 column tables fit without a sideways scroll. */
.grid table.data-table { min-width: 0; }

/* ---------- Job Drive page: Quick Links ---------- */
.quick-links .ql-group { margin-bottom: 18px; }
.quick-links .ql-group:last-child { margin-bottom: 0; }
.ql-title { font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 8px; }
.ql-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ql-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; text-decoration: none;
  background: var(--glass-1); border: 1px solid var(--ink-300); color: var(--ink-900); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ql-item:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--brand-400); box-shadow: var(--shadow-sm); }
.ql-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--brand-gradient-soft); font-size: 1rem; }
.ql-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ql-text strong { font-size: .88rem; }
.ql-text small { font-size: .74rem; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.ql-jump .chip { text-decoration: none; }
.ql-jump .chip:hover { background: var(--brand-50); }

/* ---- Dashboard: Needs attention (per-drive pending items) ---- */
.att-card { border-top: 3px solid var(--danger); }
/* Collapsible wrapper: closed by default, the summary bar is the toggle */
.att-wrap { margin: 22px 0 8px; }
.att-summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 16px; background: var(--glass-2); border: 1px solid var(--glass-border, var(--ink-100));
  border-left: 4px solid var(--danger); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s;
}
.att-summary::-webkit-details-marker { display: none; }
.att-summary::marker { content: ''; }
.att-summary:hover { border-color: var(--brand-500); border-left-color: var(--danger); box-shadow: var(--shadow-md, var(--shadow-sm)); }
.att-summary:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; }
.att-sum-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.att-sum-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--danger-bg); font-size: 1.1rem; }
.att-sum-text { display: flex; flex-direction: column; min-width: 0; }
.att-sum-text strong { font-size: 1.05rem; color: var(--ink-900); }
.att-sum-text small { font-size: .8rem; color: var(--ink-500); }
.att-sum-side { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.att-sum-hint { font-size: .78rem; font-weight: 700; color: var(--ink-500); }
.att-wrap[open] .att-sum-hint { font-size: 0; }
.att-wrap[open] .att-sum-hint::after { content: 'Hide'; font-size: .78rem; }
.att-arrow {
  width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-500); color: #fff; transition: transform .2s ease;
}
.att-arrow::before { content: ''; width: 8px; height: 8px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.att-wrap[open] .att-arrow { transform: rotate(180deg); }
.att-wrap[open] > .att-summary { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.att-wrap > .att-card { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .att-arrow { transition: none; } }
@media (max-width: 560px) {
  .att-summary { padding: 12px 14px; }
  .att-sum-side { margin-left: 50px; }
}
.att-clear { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--success-text); }
.att-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.att-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.att-stat { display: flex; flex-direction: column; min-width: 120px; padding: 10px 14px; border-radius: 12px; background: var(--glass-2, var(--ink-50)); border: 1px solid var(--glass-border, var(--ink-100)); }
.att-stat strong { font-size: 1.5rem; line-height: 1.1; color: var(--ink-900); }
.att-stat span { font-size: .78rem; color: var(--ink-500); }
.att-stat-critical { background: var(--danger-bg); border-color: transparent; }
.att-stat-critical strong { color: var(--danger-text); }
.att-stat-ok { background: var(--success-bg); border-color: transparent; }
.att-stat-ok strong { color: var(--success-text); }
.att-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; }
.att-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.att-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 600; color: var(--ink-700);
  background: var(--glass-2, var(--ink-50)); border: 1px solid var(--glass-border, var(--ink-100));
  transition: border-color .15s, background .15s;
}
.att-chip b { font-weight: 800; color: var(--ink-900); }
.att-chip:hover { border-color: var(--brand-500); }
.att-chip.is-on { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.att-chip.is-on b { color: #fff; }
.att-list { display: flex; flex-direction: column; gap: 10px; }
.att-row {
  display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 14px; align-items: start;
  padding: 12px 14px; border-radius: 14px; border: 1px solid var(--glass-border, var(--ink-100));
  border-left: 4px solid var(--ink-300); background: var(--glass-2, transparent);
}
.att-row[hidden] { display: none; }
.att-row.att-critical { border-left-color: var(--danger); }
.att-row.att-warning { border-left-color: var(--warning); }
.att-row.att-info { border-left-color: var(--info); }
.att-drive { min-width: 0; }
.att-name { font-weight: 700; color: var(--ink-900); text-decoration: none; word-break: break-word; }
.att-name:hover { color: var(--brand-500); text-decoration: underline; }
.att-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-top: 6px; font-size: .78rem; color: var(--ink-500); }
.att-issues { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; min-width: 0; }
.att-issue {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
  padding: 8px 10px; border-radius: 10px; background: var(--ink-50, rgba(0,0,0,.03));
}
.att-issue.att-critical { background: var(--danger-bg); }
.att-issue.att-warning { background: var(--warning-bg); }
.att-issue.att-info { background: var(--info-bg); }
.att-ico { font-size: .95rem; }
.att-txt { display: flex; flex-direction: column; min-width: 0; }
.att-txt strong { font-size: .84rem; color: var(--ink-900); }
.att-issue.att-critical .att-txt strong { color: var(--danger-text); }
.att-issue.att-warning .att-txt strong { color: var(--warning-text); }
.att-issue.att-info .att-txt strong { color: var(--info-text); }
.att-txt small { font-size: .74rem; color: var(--ink-600, var(--ink-500)); line-height: 1.3; }
.att-fix {
  white-space: nowrap; font-size: .76rem; font-weight: 700; text-decoration: none; padding: 5px 10px; border-radius: 999px;
  color: var(--brand-600, var(--brand-500)); background: var(--surface-opaque, #fff); border: 1px solid var(--glass-border, var(--ink-100));
}
.att-fix:hover { border-color: var(--brand-500); background: var(--brand-500); color: #fff; }
.att-foot { text-align: center; margin-top: 12px; }
.att-foot[hidden] { display: none; }
.att-empty { margin: 8px 0 0; }
@media (max-width: 900px) {
  .att-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .att-issues { grid-template-columns: 1fr; }
  .att-issue { grid-template-columns: auto 1fr; }
  .att-fix { grid-column: 2; justify-self: start; }
  .att-stat { min-width: 0; flex: 1 1 30%; padding: 8px 10px; }
  .att-stat strong { font-size: 1.25rem; }
  .att-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .att-chip { flex: none; white-space: nowrap; }
}

/* Phones: the top bar (name + photo + theme switch + bell + Log out) was wider
   than the screen and pushed every page sideways. Drop the name and photo on
   small screens (both are shown in full on wider screens) and tighten gaps. */
@media (max-width: 600px) {
  .topbar .user-menu { gap: 6px; min-width: 0; }
  .topbar .user-menu > .text-muted, .topbar .user-menu > img { display: none; }
  .topbar .user-menu .btn { white-space: nowrap; }
  .topbar { padding: 0 14px; gap: 8px; }
  .topbar > :first-child { min-width: 0; flex: 1 1 auto; }
  .topbar .page-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Student Journey: which drives the card covers */
.journey-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 14px; font-size: .8rem; }
.journey-scope .chip { font-size: .74rem; }

/* =====================================================================
   KPI info cards (templates/partials/kpi.php) - same look as the sign-in
   portal: orange = student side, deep blue = employer / jobs side.
   Mark colours validated (dataviz validator): light #f2660f / #1d4ed8,
   dark #e8590c / #3b82f6 - all checks pass on both surfaces.
   ===================================================================== */
.kx {
  --kx-c: #f2660f; --kx-g1: #f2660f; --kx-g2: #f59e0b; --kx-soft: rgba(242, 102, 15, .12);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.kx-emp { --kx-c: #1d4ed8; --kx-g1: #1e3a8a; --kx-g2: #0e7490; --kx-soft: rgba(29, 78, 216, .11); }
[data-theme="dark"] .kx { --kx-c: #e8590c; --kx-soft: rgba(232, 89, 12, .16); }
[data-theme="dark"] .kx-emp { --kx-c: #3b82f6; --kx-soft: rgba(59, 130, 246, .16); }
.kx:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, var(--shadow-sm)); }
.kx-glow {
  position: absolute; z-index: -1; width: 150px; height: 150px; right: -60px; top: -70px; border-radius: 50%;
  background: radial-gradient(circle, var(--kx-soft), transparent 70%); pointer-events: none;
}
.kx::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--kx-g1), var(--kx-g2));
}
.kx-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kx-ico {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; color: #fff;
  background: linear-gradient(135deg, var(--kx-g1), var(--kx-g2)); box-shadow: 0 6px 14px -6px var(--kx-g1);
}
.kx-ico svg { width: 19px; height: 19px; }
.kx-label { font-size: .8rem; font-weight: 700; color: var(--ink-500); line-height: 1.25; min-width: 0; }
.kx-pill { margin-left: auto; flex: none; font-size: .7rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--kx-soft); color: var(--ink-900); }
.kx-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.kx-stack .kx-body { flex-direction: column; align-items: stretch; }
.kx-num { min-width: 0; }
.kx-value { font-family: var(--font-display); font-size: 1.85rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--ink-900); white-space: nowrap; }
.kx-sub { font-size: .76rem; color: var(--ink-500); margin-top: 4px; line-height: 1.35; }
.kx-viz { flex: none; min-width: 0; }
.kx-stack .kx-viz { width: 100%; }

/* ring */
.kx-ring { position: relative; width: 62px; height: 62px; outline-offset: 3px; }
.kx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kx-ring circle { fill: none; stroke-width: 6; }
.kx-ring-track { stroke: var(--ink-100); }
.kx-ring-arc { stroke: var(--kx-c); stroke-linecap: round; }
.kx-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: var(--ink-900); }

/* sparkline */
.kx-spark { display: block; width: 100%; height: 46px; overflow: visible; }
.kx-spark-area { fill: var(--kx-soft); }
.kx-spark-line { fill: none; stroke: var(--kx-c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kx-spark-dot { fill: var(--kx-c); stroke: var(--glass-2, #fff); stroke-width: 2; vector-effect: non-scaling-stroke; }
.kx-hit { fill: transparent; cursor: default; }
.kx-hit:hover { fill: rgba(0, 0, 0, .04); }

/* mini columns */
.kx-bars { display: flex; align-items: flex-end; gap: 3px; height: 50px; width: 92px; }
.kx-stack .kx-bars { width: 100%; height: 44px; }
.kx-bar {
  flex: 1 1 0; min-width: 6px; height: var(--h); border-radius: 4px 4px 1px 1px; background: var(--kx-c); opacity: .9;
  transform-origin: bottom; animation: kxGrow .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms);
}
.kx-bar:hover, .kx-bar:focus-visible { opacity: 1; outline: 2px solid var(--kx-c); outline-offset: 2px; }
@keyframes kxGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* share bar */
.kx-split-bar { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden; background: transparent; }
.kx-split-bar span { min-width: 0; flex-basis: 0; }
.kx-split-a { background: var(--kx-c); border-radius: 999px 0 0 999px; }
.kx-split-b { background: var(--ink-100); border-radius: 0 999px 999px 0; }
.kx-split-legend { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 7px; font-size: .72rem; color: var(--ink-500); }
.kx-split-legend b { color: var(--ink-900); font-weight: 800; }
.kx-split-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.kx-key-a { background: var(--kx-c); }
.kx-key-b { background: var(--ink-300, #d6d3d1); }

/* hero = full gradient, like the sign-in portal cards */
.kx-hero { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--kx-g1), var(--kx-g2)); box-shadow: 0 16px 34px -18px var(--kx-g1); }
.kx-hero::before { display: none; }
.kx-hero .kx-glow { width: 190px; height: 190px; right: -70px; top: -90px; background: rgba(255, 255, 255, .14); }
.kx-hero::after {
  content: ''; position: absolute; z-index: -1; width: 120px; height: 120px; right: 26px; bottom: -86px; border-radius: 50%;
  border: 20px solid rgba(255, 255, 255, .09); pointer-events: none;
}
.kx-hero .kx-ico { background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .35); box-shadow: none; }
.kx-hero .kx-label, .kx-hero .kx-sub { color: rgba(255, 255, 255, .9); }
.kx-hero .kx-value { color: #fff; }
.kx-hero .kx-pill { background: rgba(0, 0, 0, .16); color: #fff; }
.kx-hero .kx-ring-track { stroke: rgba(255, 255, 255, .25); }
.kx-hero .kx-ring-arc { stroke: #fff; }
.kx-hero .kx-ring span { color: #fff; }
.kx-hero .kx-spark-area { fill: rgba(255, 255, 255, .18); }
.kx-hero .kx-spark-line { stroke: #fff; }
.kx-hero .kx-spark-dot { fill: #fff; stroke: var(--kx-g1); }
.kx-hero .kx-hit:hover { fill: rgba(255, 255, 255, .12); }
.kx-hero .kx-bar { background: #fff; opacity: .85; }
.kx-hero .kx-bar:hover, .kx-hero .kx-bar:focus-visible { outline-color: #fff; }
.kx-hero .kx-split-a { background: #fff; }
.kx-hero .kx-split-b { background: rgba(255, 255, 255, .28); }
.kx-hero .kx-split-legend { color: rgba(255, 255, 255, .88); }
.kx-hero .kx-split-legend b { color: #fff; }
.kx-hero .kx-key-a { background: #fff; }
.kx-hero .kx-key-b { background: rgba(255, 255, 255, .4); }
[data-theme="dark"] .kx-hero { --kx-g1: #c2410c; --kx-g2: #d97706; }
[data-theme="dark"] .kx-emp.kx-hero { --kx-g1: #1e3a8a; --kx-g2: #0e7490; }

.kx-grid { margin-bottom: 18px; }
.kx-grid > .kx { margin-bottom: 0; }
/* Tablets/phones: two cards per row instead of one long column; the first
   headline card of a 3-card row spans the full width so nothing is orphaned. */
@media (max-width: 900px) {
  .grid.kx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid-cols-3.kx-grid > .kx:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .kx { padding: 14px 14px 13px; gap: 10px; border-radius: 16px; }
  .kx-top { gap: 8px; align-items: flex-start; }
  .kx-ico { width: 30px; height: 30px; border-radius: 9px; }
  .kx-ico svg { width: 16px; height: 16px; }
  .kx-label { font-size: .74rem; }
  .kx-pill { font-size: .64rem; padding: 2px 7px; }
  .kx-body { flex-direction: column; align-items: stretch; gap: 8px; }
  .kx-value { font-size: 1.45rem; }
  .kx-sub { font-size: .7rem; }
  .kx-ring { width: 54px; height: 54px; }
  .kx-ring span { font-size: .6rem; letter-spacing: -.02em; }
  .kx-bars { width: 100%; height: 38px; }
  .kx-split-legend { font-size: .66rem; }
}
@media (max-width: 340px) {
  .grid.kx-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kx, .kx-bar { transition: none; animation: none; }
}
@media print {
  .kx, .kx-hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
  .kx-tip { display: none !important; }
}
.kx-bars-x { display: flex; gap: 3px; margin-top: 5px; }
.kx-bars-x span { flex: 1 1 0; min-width: 0; text-align: center; font-size: .64rem; font-weight: 600; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-hero .kx-bars-x span { color: rgba(255, 255, 255, .85); }