/* ==========================================================================
   KAIZEN UI — design system for the Kaizen Employability Platform portal
   Loaded AFTER style.css on every page. It:
     1. re-points the tokens every existing page already uses to the Kaizen brand
        (blue -> teal -> green, from the logo), so old pages re-theme for free;
     2. defines the shared shell (navbar, footer) and components (k-*).
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* Brand (sampled from the Kaizen logo) */
  --k-blue-800: #0f3d8c;
  --k-blue-700: #134ba8;
  --k-blue-600: #1a5fd0;
  --k-blue-500: #2f74e4;
  --k-blue-100: #dce8ff;
  --k-blue-50:  #eef4ff;
  --k-teal-500: #0e9fae;
  --k-teal-50:  #e6f7f8;
  --k-green-700: #2e7d22;
  --k-green-600: #3c9a2e;
  --k-green-500: #58b82b;
  --k-green-50:  #edf8e8;
  --k-amber-600: #b45309;
  --k-amber-50:  #fff6e5;
  --k-red-600:   #c0362c;
  --k-red-50:    #fdeeec;

  /* Neutrals */
  --k-ink:      #152033;
  --k-ink-2:    #3b4658;
  --k-muted:    #66738a;
  --k-subtle:   #95a0b3;
  --k-border:   #e3e8f0;
  --k-border-2: #d3dae6;
  --k-bg:       #f5f7fb;
  --k-surface:  #ffffff;
  --k-surface-2:#f9fafc;

  --k-grad-brand: linear-gradient(115deg, #1a5fd0 0%, #0e9fae 55%, #58b82b 100%);
  --k-grad-hero:  radial-gradient(1200px 500px at 85% -10%, rgba(88,184,43,.14), transparent 60%),
                  radial-gradient(900px 500px at -10% 10%, rgba(26,95,208,.14), transparent 60%),
                  linear-gradient(180deg, #f7faff 0%, #ffffff 100%);

  --k-radius-sm: 8px;
  --k-radius:    12px;
  --k-radius-lg: 18px;
  --k-radius-xl: 24px;
  --k-shadow-sm: 0 1px 2px rgba(21,32,51,.06), 0 1px 3px rgba(21,32,51,.06);
  --k-shadow:    0 4px 14px rgba(21,32,51,.07), 0 1px 3px rgba(21,32,51,.05);
  --k-shadow-lg: 0 18px 40px rgba(21,32,51,.10), 0 4px 10px rgba(21,32,51,.05);
  --k-ring:      0 0 0 3px rgba(26,95,208,.22);
  --k-font:      'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --k-container: 1200px;
  --k-nav-h:     68px;

  /* Legacy tokens used across existing pages -> Kaizen brand */
  --g-blue:        var(--k-blue-600);
  --g-blue-light:  var(--k-blue-500);
  --g-blue-dark:   var(--k-blue-700);
  --g-green:       var(--k-green-600);
  --g-green-light: var(--k-green-500);
  --accent:        var(--k-blue-600);
  --accent-light:  var(--k-blue-500);
  --accent-dark:   var(--k-blue-700);
  --accent-glow:   rgba(26,95,208,.15);
  --gradient-primary: linear-gradient(135deg, #1a5fd0 0%, #2f74e4 100%);
  --gradient-blue:    linear-gradient(135deg, #1a5fd0 0%, #0e9fae 100%);
  --gradient-google:  var(--k-grad-brand);
  --gradient-hero:    var(--k-grad-hero);
  --bg-primary:    var(--k-surface);
  --bg-secondary:  var(--k-bg);
  --bg-tertiary:   #eef1f6;
  --bg-elevated:   var(--k-surface);
  --bg-card:       var(--k-surface);
  --text-primary:  var(--k-ink);
  --text-secondary:var(--k-ink-2);
  --text-muted:    var(--k-muted);
  --border-color:  var(--k-border);
  --border-focus:  var(--k-blue-600);
  --shadow-accent: 0 6px 18px rgba(26,95,208,.25);
  --shadow-blue:   var(--k-ring);
  --font-sans:     var(--k-font);
  --font-display:  var(--k-font);
  --nav-height:    var(--k-nav-h);
  --color-success: var(--k-green-600);
  --color-danger:  var(--k-red-600);
}

[data-theme="dark"] {
  --k-ink: #e8edf5; --k-ink-2: #c3ccda; --k-muted: #93a0b5; --k-subtle: #6c7a90;
  --k-border: #283246; --k-border-2: #33405a;
  --k-bg: #0d1422; --k-surface: #141d2e; --k-surface-2: #182236;
  --k-blue-50: rgba(47,116,228,.14); --k-blue-100: rgba(47,116,228,.24);
  --k-green-50: rgba(88,184,43,.14); --k-teal-50: rgba(14,159,174,.14);
  --k-amber-50: rgba(245,158,11,.14); --k-red-50: rgba(239,68,68,.14);
  --k-grad-hero: radial-gradient(1000px 500px at 85% -10%, rgba(88,184,43,.12), transparent 60%),
                 radial-gradient(900px 500px at -10% 10%, rgba(26,95,208,.18), transparent 60%),
                 linear-gradient(180deg, #0f1728 0%, #0d1422 100%);
  --bg-tertiary: #1b2538;
}

/* ---------- 2. BASE ------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }  /* off-canvas mobile menu must not widen the page */
/* Legacy style.css sets body{overflow-x:hidden}, which turns <body> into a scroll box and breaks every
   position:sticky element (header, admin sidebar, job detail pane). <html> already clips sideways overflow. */
body:not(.k-admin-nav-open):not(.kp-jd-open) { overflow: visible !important; }
body {
  font-family: var(--k-font);
  background: var(--k-bg);
  color: var(--k-ink);
  text-rendering: optimizeLegibility;
}
body::before, body::after { display: none !important; } /* remove old noise/blob overlays */
h1, h2, h3, h4, h5 { font-family: var(--k-font); color: inherit; letter-spacing: -.015em; }
a { color: var(--k-blue-600); }
:focus-visible { outline: 2px solid var(--k-blue-500); outline-offset: 2px; }
::selection { background: var(--k-blue-100); }
img { max-width: 100%; }

.k-container { width: 100%; max-width: var(--k-container); margin: 0 auto; padding: 0 20px; }
.k-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.k-grad-text { background: var(--k-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 3. NAVBAR ---------------------------------------------------- */
.k-nav {
  position: sticky; top: 0; z-index: 1000;
  height: var(--k-nav-h);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--k-border);
}
[data-theme="dark"] .k-nav { background: rgba(13,20,34,.92); }
.k-nav.scrolled { box-shadow: var(--k-shadow-sm); }
.k-nav .nav-container {
  max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 20px;
}
.k-brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.k-brand img { height: 42px; width: auto; display: block; }
.k-brand .k-brand-dark { display: none; }
[data-theme="dark"] .k-brand .k-brand-light { display: none; }
[data-theme="dark"] .k-brand .k-brand-dark { display: block; }

.k-nav .nav-menu { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; }
.k-nav .nav-center { display: flex; align-items: center; gap: 2px; margin: 0 auto 0 12px; }
.k-nav .nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px; border-radius: 10px;
  font-size: .875rem; font-weight: 600; color: var(--k-ink-2);
  text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s;
}
.k-nav .nav-link i { font-size: .82rem; color: var(--k-subtle); transition: color .15s; }
.k-nav .nav-link:hover { background: var(--k-blue-50); color: var(--k-blue-700); }
.k-nav .nav-link:hover i, .k-nav .nav-link.active i { color: var(--k-blue-600); }
.k-nav .nav-link.active { background: var(--k-blue-50); color: var(--k-blue-700); }
[data-theme="dark"] .k-nav .nav-link:hover, [data-theme="dark"] .k-nav .nav-link.active { color: #cfe0ff; }

.k-nav .nav-right { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.k-icon-btn {
  position: relative; width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--k-border); background: var(--k-surface);
  color: var(--k-ink-2); cursor: pointer; text-decoration: none; font-size: .9rem;
  transition: border-color .15s, color .15s, background .15s;
}
.k-icon-btn:hover { border-color: var(--k-blue-500); color: var(--k-blue-600); background: var(--k-blue-50); }
.k-icon-btn .notification-count, .k-badge-dot {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--k-red-600); color: #fff;
  font-size: .68rem; font-weight: 800; display: grid; place-items: center;
  border: 2px solid var(--k-surface);
}
.k-nav .language-selector select {
  height: 38px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--k-border); background: var(--k-surface); color: var(--k-ink-2);
  font: 600 .8rem var(--k-font); cursor: pointer;
}
.k-nav .theme-toggle { width: 38px; height: 38px; border-radius: 10px; }

.k-nav .user-menu-wrapper { position: relative; }
.k-nav .user-btn {
  display: flex; align-items: center; gap: 9px; height: 40px;
  padding: 0 12px 0 4px; border-radius: 999px;
  border: 1px solid var(--k-border); background: var(--k-surface);
  font: 600 .86rem var(--k-font); color: var(--k-ink); cursor: pointer;
}
.k-nav .user-btn:hover, .k-nav .user-btn.open { border-color: var(--k-blue-500); }
.k-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  background: var(--k-grad-brand); color: #fff; font-weight: 800; font-size: .8rem;
}
.k-avatar img { width: 100%; height: 100%; object-fit: cover; }
.k-pro-tag { background: linear-gradient(135deg,#f59e0b,#f97316); color: #fff; padding: 2px 7px; border-radius: 6px; font-size: .62rem; font-weight: 800; letter-spacing: .04em; }
.k-nav .user-btn .fa-chevron-down { font-size: .65rem; color: var(--k-subtle); transition: transform .2s; }
.k-nav .user-btn.open .fa-chevron-down { transform: rotate(180deg); }

.k-nav .dropdown-menu {
  min-width: 250px; top: calc(100% + 10px);
  border-radius: 14px; border: 1px solid var(--k-border);
  background: var(--k-surface); box-shadow: var(--k-shadow-lg); padding: 8px;
}
.k-dd-head { display: flex; gap: 10px; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid var(--k-border); margin-bottom: 6px; }
.k-dd-head .k-dd-name { font-weight: 700; font-size: .9rem; color: var(--k-ink); }
.k-dd-head .k-dd-mail { font-size: .75rem; color: var(--k-muted); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-dd-role { display: inline-block; margin-top: 3px; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--k-green-700); background: var(--k-green-50); padding: 2px 7px; border-radius: 6px; }
.k-nav .dropdown-item { border-radius: 9px; padding: 9px 10px; font-size: .86rem; font-weight: 500; color: var(--k-ink-2); }
.k-nav .dropdown-item:hover { background: var(--k-blue-50); color: var(--k-blue-700); }
.k-nav .dropdown-item.k-danger { color: var(--k-red-600); }
.k-nav .dropdown-item.k-danger i { color: var(--k-red-600); }
.k-nav .dropdown-item.k-danger:hover { background: var(--k-red-50); }

/* "More" menu for admins */
.k-more { position: relative; }
.k-more > button { border: 0; background: none; cursor: pointer; font-family: var(--k-font); }
.k-more-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; z-index: 1001;
  background: var(--k-surface); border: 1px solid var(--k-border); border-radius: 14px;
  box-shadow: var(--k-shadow-lg); padding: 8px; display: none;
}
.k-more.open .k-more-menu { display: block; }
.k-more-menu a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 9px; font-size: .86rem; color: var(--k-ink-2); text-decoration: none; }
.k-more-menu a i { width: 16px; text-align: center; color: var(--k-subtle); }
.k-more-menu a:hover { background: var(--k-blue-50); color: var(--k-blue-700); }

.k-nav .mobile-menu-toggle {
  display: none; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--k-border); background: var(--k-surface);
  flex-direction: column; gap: 4px; align-items: center; justify-content: center; cursor: pointer;
}
.k-nav .mobile-menu-toggle span { width: 17px; height: 2px; border-radius: 2px; background: var(--k-ink-2); transition: transform .2s, opacity .2s; }
.k-nav .mobile-menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.k-nav .mobile-menu-toggle.open span:nth-child(2) { opacity: 0; }
.k-nav .mobile-menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .k-nav .nav-link span.k-hide-md { display: none; }
}
@media (max-width: 980px) {
  /* backdrop-filter makes the bar the containing block of the fixed menu, which would clip it to the bar's height */
  .k-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--k-surface); }
  .k-nav .mobile-menu-toggle { display: flex; margin-left: auto; }
  .k-nav .nav-menu {
    position: fixed; left: 0; right: 0; top: var(--k-nav-h); bottom: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px;
    background: var(--k-surface); padding: 18px 20px 40px; overflow-y: auto;
    /* fade + small slide; never parked off-screen sideways (that widened the layout viewport on phones) */
    opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .k-nav .nav-menu.active { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
  .k-nav .nav-center { flex-direction: column; align-items: stretch; margin: 0; gap: 4px; }
  .k-nav .nav-link { padding: 13px 14px; font-size: .95rem; }
  .k-nav .nav-link span.k-hide-md { display: inline; }
  .k-nav .nav-right { flex-wrap: wrap; margin: 0; padding-top: 14px; border-top: 1px solid var(--k-border); }
  .k-nav .auth-buttons { width: 100%; }
  .k-nav .auth-buttons .k-btn { flex: 1; }
  .k-more-menu { position: static; box-shadow: none; border: 0; padding: 0 0 0 12px; }
  .k-nav .dropdown-menu { right: auto; left: 0; }
}
@media (max-width: 480px) { .k-brand img { height: 36px; } }

/* ---------- 4. BUTTONS --------------------------------------------------- */
.k-btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 20px; border-radius: 11px;
  font: 700 .9rem/1 var(--k-font); letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.btn::after { display: none; }
.k-btn:active, .btn:active { transform: translateY(1px); }
.k-btn-primary, .btn-primary, .btn-accent {
  background: var(--k-blue-600); color: #fff; box-shadow: 0 1px 2px rgba(19,75,168,.3);
}
.k-btn-primary:hover, .btn-primary:hover, .btn-accent:hover {
  background: var(--k-blue-700); color: #fff; transform: none; box-shadow: 0 6px 16px rgba(26,95,208,.28);
}
.k-btn-success { background: var(--k-green-600); color: #fff; }
.k-btn-success:hover { background: var(--k-green-700); color: #fff; }
.k-btn-outline, .btn-outline {
  background: var(--k-surface); color: var(--k-blue-700); border-color: var(--k-blue-100);
}
.k-btn-outline:hover, .btn-outline:hover { border-color: var(--k-blue-600); background: var(--k-blue-50); transform: none; }
[data-theme="dark"] .k-btn-outline, [data-theme="dark"] .btn-outline { color: #9dbfff; border-color: rgba(157,191,255,.35); }
[data-theme="dark"] .k-btn-outline:hover, [data-theme="dark"] .btn-outline:hover { color: #cfe0ff; border-color: #9dbfff; }
.k-btn-ghost, .btn-secondary, .btn-ghost {
  background: var(--k-surface); color: var(--k-ink-2); border-color: var(--k-border);
}
.k-btn-ghost:hover, .btn-secondary:hover, .btn-ghost:hover { border-color: var(--k-border-2); color: var(--k-ink); background: var(--k-surface-2); }
.k-btn-white { background: #fff; color: var(--k-blue-700); }
.k-btn-white:hover { background: #f1f5ff; color: var(--k-blue-800); }
.k-btn-glass { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.k-btn-glass:hover { background: rgba(255,255,255,.2); color: #fff; }
.k-btn-sm, .btn-sm { min-height: 34px; padding: 0 14px; font-size: .8rem; border-radius: 9px; }
.k-btn-lg, .btn-lg { min-height: 52px; padding: 0 26px; font-size: 1rem; border-radius: 13px; }
.k-btn-block, .btn-block { width: 100%; }
.btn-xs { min-height: 28px; padding: 0 10px; font-size: .74rem; border-radius: 8px; }
.btn-success { background: var(--k-green-600); color: #fff; }
.btn-danger  { background: var(--k-red-600); color: #fff; }
.btn-warning { background: #f59e0b; color: #1c1917; }

/* ---------- 5. FORMS ----------------------------------------------------- */
.k-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.k-label, .form-group label { font-size: .84rem; font-weight: 700; color: var(--k-ink); }
.k-input, .k-select, .k-textarea,
.form-group input:not([type=checkbox]):not([type=radio]):not([type=file]),
.form-group select, .form-group textarea, .form-control {
  width: 100%; min-height: 46px; padding: 10px 14px;
  border: 1.5px solid var(--k-border-2); border-radius: 11px;
  background: var(--k-surface); color: var(--k-ink);
  font: 500 .92rem var(--k-font);
  transition: border-color .15s, box-shadow .15s;
}
.k-textarea, .form-group textarea { min-height: 110px; resize: vertical; }
.k-input:focus, .k-select:focus, .k-textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus, .form-control:focus {
  outline: none; border-color: var(--k-blue-600); box-shadow: var(--k-ring);
}
.k-input::placeholder, .form-group input::placeholder { color: var(--k-subtle); }
.k-help { font-size: .78rem; color: var(--k-muted); }

/* ---------- 6. SURFACES -------------------------------------------------- */
.k-card {
  background: var(--k-surface); border: 1px solid var(--k-border);
  border-radius: var(--k-radius-lg); box-shadow: var(--k-shadow-sm);
}
.k-card-pad { padding: 22px; }
.alert { border-radius: 12px; }
.alert-success { background: var(--k-green-50); color: var(--k-green-700); border-color: rgba(60,154,46,.25); }
.alert-info    { background: var(--k-blue-50);  color: var(--k-blue-700);  border-color: rgba(26,95,208,.2); }
.alert-error, .alert-danger { background: var(--k-red-50); color: var(--k-red-600); border-color: rgba(192,54,44,.22); }
.alert-warning { background: var(--k-amber-50); color: var(--k-amber-600); border-color: rgba(180,83,9,.25); }

/* Chips / badges */
.k-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-size: .76rem; font-weight: 700; line-height: 1.2;
  background: var(--k-surface-2); color: var(--k-ink-2); border: 1px solid var(--k-border);
}
.k-chip i { font-size: .72rem; color: var(--k-subtle); }
.k-chip-blue  { background: var(--k-blue-50);  color: var(--k-blue-700);  border-color: transparent; }
.k-chip-green { background: var(--k-green-50); color: var(--k-green-700); border-color: transparent; }
.k-chip-teal  { background: var(--k-teal-50);  color: #0b7581;            border-color: transparent; }
.k-chip-amber { background: var(--k-amber-50); color: var(--k-amber-600); border-color: transparent; }
.k-chip-blue i, .k-chip-green i, .k-chip-teal i, .k-chip-amber i { color: inherit; }
[data-theme="dark"] .k-chip-blue  { color: #9dbfff; }
[data-theme="dark"] .k-chip-green { color: #97d977; }
[data-theme="dark"] .k-chip-teal  { color: #67d3de; }
[data-theme="dark"] .k-chip-amber { color: #fbbf24; }

/* Tables inside dashboards */
table { border-collapse: collapse; }
.table, .data-table, .admin-table {
  width: 100%; background: var(--k-surface);
}
.table th, .data-table th, .admin-table th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--k-muted); background: var(--k-surface-2); font-weight: 800;
}

/* ---------- 7. FOOTER ---------------------------------------------------- */
.k-footer { background: #0f1a2c; color: #b9c4d6; margin-top: 56px; font-size: .88rem; }
.k-footer a { color: #d7deea; text-decoration: none; }
.k-footer a:hover { color: #fff; }
.k-footer-top { display: grid; grid-template-columns: 1.35fr .9fr .9fr 1.25fr; gap: 28px 32px; padding: 36px 0 24px; align-items: start; }
.k-footer-logo { display: inline-flex; background: #fff; padding: 7px 12px; border-radius: 12px; margin-bottom: 12px; }
.k-footer-brand .k-footer-logo img { height: 32px; width: auto; display: block; }
.k-footer-brand p { font-size: .84rem; line-height: 1.6; max-width: 300px; color: #9fb0c8; margin: 0; }
.k-footer h4 { color: #fff; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; margin: 4px 0 12px; }
.k-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.k-footer ul li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; line-height: 1.45; }
.k-footer ul li > i { width: 16px; flex-shrink: 0; margin-top: 3px; text-align: center; color: var(--k-green-500); }
.k-footer ul li > a, .k-footer ul li > span { min-width: 0; overflow-wrap: anywhere; }
.k-social { display: flex; gap: 8px; margin-top: 14px; }
.k-social a { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.07); font-size: .9rem; }
.k-social a:hover { background: var(--k-blue-600); }
.k-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08); padding: 14px 0 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; font-size: .78rem; color: #8193ad;
}
.k-footer-bottom nav { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 900px) { .k-footer-top { grid-template-columns: 1fr 1fr; } .k-footer-brand { grid-column: 1 / -1; } .k-footer-brand p { max-width: none; } }
@media (max-width: 560px) { .k-footer-top > div:last-child { grid-column: 1 / -1; } }
@media (max-width: 420px) { .k-footer-top { gap: 22px 18px; padding-top: 28px; } .k-footer-bottom { justify-content: center; text-align: center; } }

/* ---------- Admin panel shell (one sidebar for all admin pages) ---------- */
.k-admin-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0; max-width: none; margin: 0; padding: 0; align-items: start; }
.k-admin-main { min-width: 0; padding: 22px 28px 36px; }
.k-admin-nav { position: sticky; top: var(--k-nav-h, 64px); height: calc(100vh - var(--k-nav-h, 64px)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--k-surface); border: 0; border-right: 1px solid var(--k-border); border-radius: 0; padding: 10px 10px 24px; scrollbar-width: thin; }
.k-admin-nav-head { display: none; align-items: center; justify-content: space-between; padding: 6px 6px 10px; font-weight: 800; color: var(--k-ink); }
.k-admin-nav-head i { color: var(--k-blue-600); margin-right: 6px; }
.k-admin-group { padding: 4px 0 6px; border-bottom: 1px solid var(--k-border); }
.k-admin-group:last-of-type { border-bottom: 0; }
.k-admin-group-label { display: block; padding: 8px 10px 4px; font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--k-subtle); }
.k-admin-nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; font-size: .85rem; font-weight: 600; color: var(--k-ink-2); text-decoration: none; }
.k-admin-nav a i { width: 16px; text-align: center; font-size: .82rem; color: var(--k-subtle); }
.k-admin-nav a:hover { background: var(--k-surface-2); color: var(--k-blue-700); }
.k-admin-nav a.on { background: var(--k-blue-50); color: var(--k-blue-700); }
.k-admin-nav a.on i { color: var(--k-blue-600); }
[data-theme="dark"] .k-admin-nav a.on, [data-theme="dark"] .k-admin-nav a:hover { color: #cfe0ff; }
.k-admin-nav em { margin-left: auto; font-style: normal; font-size: .66rem; font-weight: 800; line-height: 1.5; background: #ef4444; color: #fff; border-radius: 999px; padding: 0 7px; }
.k-admin-nav .k-admin-out { margin-top: 6px; color: #b91c1c; }
.k-admin-bar, .k-admin-scrim { display: none; }
/* Profile card + collapse (same feel as the counsellor / candidate menu) */
.k-adm-me { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 6px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--k-border); }
.k-adm-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--k-grad-brand, linear-gradient(135deg, #1a5fd0, #0e7f8b)); color: #fff; font-weight: 800; font-size: .78rem; }
.k-adm-who { min-width: 0; } .k-adm-who b { display: block; font-size: .84rem; color: var(--k-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-adm-who small { display: block; font-size: .68rem; font-weight: 700; color: var(--k-blue-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-adm-fold { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--k-border); background: var(--k-surface); color: var(--k-muted); cursor: pointer; display: grid; place-items: center; font-size: .72rem; }
.k-adm-fold:hover { color: var(--k-blue-700); border-color: var(--k-blue-600); }
/* Retire the per-page sidebars/layout wrappers now that the shell provides navigation */
.k-admin-main aside.sidebar, .k-admin-main .admin-sidebar { display: none !important; }
.k-admin-main .dashboard-container, .k-admin-main .admin-wrap, .k-admin-main .admin-layout {
  display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
.k-admin-main .main-content, .k-admin-main .admin-main, .k-admin-main .admin-content { min-width: 0; max-width: 100%; margin: 0; padding-left: 0; padding-right: 0; }
.k-admin-main img, .k-admin-main video { max-width: 100%; height: auto; }
.k-admin-page .k-footer { margin-top: 20px; }
.k-admin-page .k-footer { display: none; }
.k-admin-page .k-nav .nav-container { max-width: none; padding-left: 20px; padding-right: 24px; }
.k-admin-page .k-brand img { height: 36px; width: auto; }
@media (max-width: 1100px) {
  .k-admin-shell { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .k-admin-main { padding: 6px 14px 28px; }
  .k-admin-bar { padding-left: 14px !important; padding-right: 14px !important; }
  .k-admin-bar { display: flex; align-items: center; gap: 12px; position: sticky; top: var(--k-nav-h, 64px); z-index: 40; padding: 8px 0; background: var(--k-bg); }
  .k-admin-bar b { font-size: .95rem; color: var(--k-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .k-admin-nav { position: fixed; top: 0; bottom: 0; left: 0; width: min(290px, 86vw); height: auto; max-height: none; border-radius: 0 16px 16px 0; box-shadow: var(--k-shadow-lg); z-index: 1600;
    transform: translateX(-105%); visibility: hidden; transition: transform .22s ease, visibility .22s; }
  .k-admin-nav-head { display: flex; }
  body.k-admin-nav-open .k-admin-nav { transform: none; visibility: visible; }
  body.k-admin-nav-open .k-admin-scrim { display: block; position: fixed; inset: 0; z-index: 1500; background: rgba(10,17,30,.45); }
  body.k-admin-nav-open { overflow: hidden; }
}

/* Desktop: the admin sidebar is pinned to the left edge, full height under the header;
   only the content on the right scrolls. (fixed, so no ancestor CSS can unstick it) */
@media (min-width: 1101px) {
  .k-admin-shell { display: block; padding-left: 250px; }
  .k-admin-nav { position: fixed; top: var(--k-nav-h, 68px); left: 0; bottom: 0; width: 250px; height: auto; z-index: 30; }
  .k-admin-main { min-height: calc(100vh - var(--k-nav-h, 68px)); }
  .k-admin-shell, .k-admin-nav { transition: padding-left .18s ease, width .18s ease; }
  html.k-adm-mini .k-admin-shell { padding-left: 64px; }
  html.k-adm-mini .k-admin-nav { width: 64px; padding-left: 8px; padding-right: 8px; overflow-x: hidden; }
  html.k-adm-mini .k-adm-me { grid-template-columns: 1fr; justify-items: center; }
  html.k-adm-mini .k-adm-who, html.k-adm-mini .k-admin-group-label, html.k-adm-mini .k-admin-nav a span { display: none; }
  html.k-adm-mini .k-adm-fold i { transform: rotate(180deg); }
  html.k-adm-mini .k-admin-nav a { justify-content: center; padding: 9px 0; position: relative; }
  html.k-adm-mini .k-admin-nav a i { width: auto; font-size: .95rem; }
  html.k-adm-mini .k-admin-nav em { position: absolute; top: 3px; right: 6px; font-size: .56rem; padding: 0 4px; }
}
@media (max-width: 1100px) { .k-adm-fold { display: none; } }

/* ---------- Candidate / employer shell: one left menu on every account page ---------- */
.k-rs-shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1280px; padding-top: 16px; padding-bottom: 32px; }
.k-rs-main { min-width: 0; }
.k-rs-side { position: sticky; top: calc(var(--k-nav-h, 68px) + 14px); max-height: calc(100vh - var(--k-nav-h, 68px) - 28px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--k-surface); border: 1px solid var(--k-border); border-radius: 14px; box-shadow: var(--k-shadow-sm); padding: 12px 10px; scrollbar-width: thin; }
.k-rs-me { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 2px 4px 12px; border-bottom: 1px solid var(--k-border); margin-bottom: 4px; }
.k-rs-av { position: relative; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--k-grad-brand); color: #fff; font-weight: 800; font-size: .85rem; }
.k-rs-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.k-rs-who { min-width: 0; line-height: 1.25; }
.k-rs-who strong { display: block; font-size: .88rem; color: var(--k-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-rs-who span { display: block; font-size: .74rem; color: var(--k-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-rs-pct { grid-column: 1 / -1; display: block; position: relative; margin-top: 8px; height: 22px; border-radius: 8px; background: var(--k-surface-2); border: 1px solid var(--k-border); overflow: hidden; text-decoration: none; }
.k-rs-pct i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #58b82b, #0e9fae); opacity: .25; }
.k-rs-pct.warn i { background: linear-gradient(90deg, #f59e0b, #fbbf24); opacity: .35; }
.k-rs-pct span { position: relative; z-index: 1; display: block; text-align: center; font-size: .72rem; font-weight: 800; line-height: 20px; color: var(--k-ink-2); }
.k-rs-hint { grid-column: 1 / -1; margin: 6px 0 0; font-size: .72rem; color: var(--k-amber-600); }
.k-rs-group { margin: 8px 0 2px; padding: 0 8px; font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--k-subtle); }
.k-rs-link { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: .84rem; font-weight: 600; color: var(--k-ink-2); text-decoration: none; }
.k-rs-link > i:first-child { width: 16px; text-align: center; font-size: .8rem; color: var(--k-subtle); }
.k-rs-link span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-rs-link:hover { background: var(--k-surface-2); color: var(--k-blue-700); }
.k-rs-link.is-on { background: var(--k-blue-50); color: var(--k-blue-700); }
.k-rs-link.is-on > i:first-child { color: var(--k-blue-600); }
.k-rs-link.is-locked { color: var(--k-subtle); }
.k-rs-link em { font-style: normal; font-size: .66rem; font-weight: 800; line-height: 1.6; min-width: 20px; text-align: center; background: var(--k-blue-50); color: var(--k-blue-700); border-radius: 999px; padding: 0 6px; }
.k-rs-lock { font-size: .68rem; color: var(--k-subtle); }
[data-theme="dark"] .k-rs-link.is-on, [data-theme="dark"] .k-rs-link:hover { color: #cfe0ff; }

/* Old per-page wrappers: the shell already gives width, gutters and background */
.k-rs-main > :is(.container, .k-container, .applications-container, .recruiters-container, .fav-page, .bs-page, .cn-page, .en-page,
  .candidate-settings-page, .employer-settings-page, .mcc-page, .emc-page, .rq-wrap, .mj-page, .pj-page, .rs-page, .ms-page, .ia-page,
  .ej-page, .ep-page, .kp-profile-wrap, .candidate-meetings-page, div[style*="max-width"]) {
  width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; background: transparent !important; }
.k-rs-main :is(.candidate-sidebar, .employer-sidebar, .cd-sidebar) { display: none !important; }
/* Counsellor pages: old two-column wrapper → full width inside the shell */
.k-rs-main > .cd-wrap { display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.k-rs-main .cd-main { padding: 0 !important; min-width: 0; }
.k-rs-main .cd-hero { padding: 16px 20px !important; border-radius: 14px !important; margin-bottom: 14px !important; }
.k-rs-main .cd-hero h1 { color: inherit; }
.k-rs-stats { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.k-rs-stats a { display: grid; text-align: center; padding: 6px 4px; border-radius: 9px; background: var(--k-surface-2); border: 1px solid var(--k-border); text-decoration: none; }
.k-rs-stats b { font-size: 1.05rem; color: var(--k-ink); line-height: 1.1; }
.k-rs-stats span { font-size: .66rem; font-weight: 700; color: var(--k-muted); text-transform: uppercase; letter-spacing: .04em; }
.k-rs-stats a.hot { background: #fff6e5; border-color: #fde3b0; }
.k-rs-stats a.hot b { color: #b45309; }
@media (max-width: 960px) { .k-rs-stats { display: none; } }
.k-rs-main :is(.candidate-settings-page, .employer-settings-page) { display: block !important; }
.k-rs-main > .container > main, .k-rs-main > .container > .candidate-meetings-page { padding: 0 !important; margin: 0 !important; overflow: visible !important; }
.k-rs-main > .kp-band { border-radius: 14px; margin: 0 0 16px; padding: 22px 0; }
.k-rs-main > .kp-band .k-container, .k-rs-main > .kp-band .container { padding: 0 22px; }

/* Compact, consistent page heads */
.k-rs-main h1 { font-size: 1.3rem !important; line-height: 1.25 !important; margin: 0 0 4px !important; letter-spacing: -.01em; }
.k-rs-main h1 i { font-size: .95em; }
.k-rs-main h2 { font-size: 1.08rem !important; }
.k-rs-main h2 i, .k-rs-main h3 i { font-size: .95em; }
.k-rs-main .section { padding: 18px 20px !important; margin: 0 0 16px !important; border-radius: 14px !important; border: 1px solid var(--k-border); box-shadow: none !important; }
.k-rs-main .section h2 { margin: 0 0 12px !important; }
/* Settings pages */
.k-rs-main :is(.candidate-card, .employer-card) { padding: 18px 20px !important; margin-bottom: 14px !important; border-radius: 14px !important; box-shadow: none !important; border: 1px solid var(--k-border) !important; }
.k-rs-main :is(.candidate-card, .employer-card) :is(h2, h3) { font-size: 1.02rem !important; margin: 0 0 12px !important; }
.k-rs-main :is(.candidate-card, .employer-card) :is(input, select, textarea) { min-height: 40px !important; padding: 8px 12px !important; height: auto !important; }
.k-rs-main :is(.candidate-card, .employer-card) .info-row { padding: 9px 0 !important; font-size: .88rem; }
.k-rs-main :is(.candidate-card, .employer-card) .form-group { margin-bottom: 10px !important; }
.k-rs-main :is(.candidate-page-header, .employer-page-header) { margin: 0 0 14px !important; }
/* Find candidates: the filter row has less width inside the shell */
.k-rs-main .rs-search-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: end; gap: 10px !important; }
.k-rs-main .rs-premium-banner { padding: 16px 20px !important; margin-bottom: 14px !important; }
.k-rs-main .rs-premium-banner h2, .k-rs-main .rs-premium-banner h3 { font-size: 1.02rem !important; }
@media (max-width: 1100px) { .k-rs-main .rs-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* Icons inside buttons stay text-sized (some pages style every icon in an empty state as a 3rem graphic) */
.k-rs-main :is(a, button)[class*="btn"] > i { font-size: 1em !important; width: auto !important; height: auto !important; margin: 0 !important; opacity: 1 !important; position: static !important; }
.k-rs-main :is(.page-header, .dashboard-topbar, .page-top, .cn-topbar, .en-topbar, .ia-topbar, .ej-topbar, .pj-topbar, .ms-topbar, .mj-topbar, .rs-topbar, .ep-topbar, .bs-topbar, .fav-header) {
  margin: 0 0 14px !important; padding: 0 !important; min-height: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
.k-rs-main :is(.page-header, .dashboard-topbar, .page-top, .cn-topbar, .en-topbar, .ia-topbar, .ej-topbar, .pj-topbar) p { margin: 0 !important; font-size: .86rem !important; }
.k-rs-main .rq-hero { padding: 18px 20px !important; margin: 0 0 16px !important; border-radius: 14px !important; }
.k-rs-main .rq-hero p { font-size: .88rem !important; margin: 4px 0 0 !important; }

.k-rs-main .dashboard-topbar { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.k-rs-main .dashboard-topbar h1 { margin: 0 !important; }
.k-rs-main .btn { padding: 8px 14px; font-size: .85rem; border-radius: 10px; }
/* Stat tiles */
.k-rs-main .meeting-stats-row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px !important; margin: 0 0 14px !important; }
.k-rs-main .meeting-stat-card { display: flex !important; align-items: center; gap: 12px; padding: 12px 14px !important; margin: 0 !important; background: var(--k-surface) !important; border: 1px solid var(--k-border) !important; border-radius: 12px !important; box-shadow: none !important; }
.k-rs-main .meeting-stat-card small { font-size: .76rem; color: var(--k-muted); }
.k-rs-main .stat-big { font-size: 1.25rem !important; font-weight: 800; line-height: 1.1; }
.k-rs-main .stat-icon-lg { font-size: 1.15rem !important; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--k-surface-2); }
/* Tabs and filter pills */
.k-rs-main .tabs-nav { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 0 0 12px !important; border-bottom: 1px solid var(--k-border); }
.k-rs-main .tabs-nav::-webkit-scrollbar { display: none; }
.k-rs-main .tab-link { padding: 8px 12px !important; font-size: .84rem !important; white-space: nowrap; }
.k-rs-main .filters, .k-rs-main .filter-tabs { gap: 6px !important; margin: 0 0 14px !important; flex-wrap: wrap; }
.k-rs-main :is(.filters, .filter-tabs) > a, .k-rs-main .filter-btn, .k-rs-main .filter-tab { padding: 6px 12px !important; font-size: .8rem !important; border-width: 1px !important; }
/* Empty states */
.k-rs-main :is(.empty-state, .fav-empty, .mcc-empty-banner, .emc-empty-banner, .cn-empty, .en-empty, .no-applications, .no-data) { padding: 28px 20px !important; }
.k-rs-main :is(.mcc-empty-banner, .emc-empty-banner) i { font-size: 2rem !important; margin-bottom: 8px !important; }
.k-rs-main :is(.mcc-empty-banner, .emc-empty-banner) h3 { font-size: 1rem !important; margin: 0 0 4px !important; }
.k-rs-main :is(.mcc-empty-banner, .emc-empty-banner) p { font-size: .86rem !important; margin: 0 auto !important; }
.k-rs-main :is(.empty-state, .fav-empty, .bs-no-apps) > i:first-child { font-size: 2.2rem !important; margin-bottom: 10px !important; }
.k-rs-main :is(.empty-state, .fav-empty, .bs-no-apps, .mcc-empty-banner, .emc-empty-banner) :is(a, button) i { font-size: inherit !important; margin: 0 !important; opacity: 1 !important; display: inline !important; color: inherit !important; }
.k-rs-main .empty-state { background: var(--k-surface); border: 1px solid var(--k-border); border-radius: 14px; text-align: center; }
.k-rs-main .bs-no-apps { padding: 28px 20px !important; }
.k-rs-main :is(.empty-state, .fav-empty) h3 { font-size: 1rem !important; margin: 0 0 4px !important; }
.k-rs-main :is(.empty-state, .fav-empty) p { font-size: .86rem !important; margin: 0 !important; }

@media (max-width: 960px) {
  .k-rs-shell { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 10px; }
  .k-rs-side { position: static; max-height: none; padding: 8px; overflow: hidden; min-width: 0; }
  .k-rs-me { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 0 2px 8px; margin: 0; }
  .k-rs-av { width: 34px; height: 34px; }
  .k-rs-pct { grid-column: auto; margin: 0; width: 104px; }
  .k-rs-hint, .k-rs-group { display: none; }
  .k-rs-nav { display: flex; gap: 6px; overflow-x: auto; padding-top: 8px; scrollbar-width: none; }
  .k-rs-nav::-webkit-scrollbar { display: none; }
  .k-rs-link { flex: 0 0 auto; border: 1px solid var(--k-border); border-radius: 999px; padding: 5px 11px; font-size: .8rem; }
  .k-rs-link span { overflow: visible; }
}

/* Legacy admin page wrappers: the shell already provides padding and scrolling */
.k-admin-main > main, .k-admin-main main[style] { padding: 0 !important; overflow: visible !important; min-width: 0; }
.k-admin-main .sticky-toolbar {
  position: sticky; top: var(--k-nav-h, 68px) !important; z-index: 20 !important;
  margin: -22px -28px 18px !important; padding: 16px 28px 14px !important;
  background: color-mix(in srgb, var(--k-bg) 92%, transparent) !important; backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--k-border) !important; box-shadow: none !important;
}
@media (max-width: 1100px) { .k-admin-main .sticky-toolbar { position: static; margin: 0 0 14px !important; padding: 0 !important; background: none !important; border: 0 !important; } }

/* Admin tables: one line per row, readable columns, actions side by side */
.k-admin-main table td { white-space: nowrap; }
.k-admin-main table td:nth-child(2), .k-admin-main table td:nth-child(3) { white-space: normal; min-width: 170px; max-width: 300px; }
.k-admin-main table td span, .k-admin-main table td small { white-space: nowrap; }
.k-admin-main table td:last-child > div, .k-admin-main table td:last-child > form, .k-admin-main table td:last-child { flex-wrap: nowrap !important; white-space: nowrap; }
.k-admin-main table td:last-child button, .k-admin-main table td:last-child a.btn, .k-admin-main table td:last-child > div > a {
  width: 30px; height: 30px; padding: 0 !important; display: inline-grid; place-items: center; border-radius: 8px !important; font-size: 12px !important; }
.k-admin-main table td:last-child form { display: inline-flex !important; margin: 0; }
/* Actions column stays visible on the right while the rest of a wide table scrolls */
.k-admin-main table td:last-child, .k-admin-main table th:last-child {
  position: sticky; right: 0; z-index: 1; background: var(--k-surface); box-shadow: -8px 0 10px -8px rgba(15,23,42,.18); }
.k-admin-main table thead th:last-child { background: var(--k-surface-2); }
.k-admin-main table tbody tr:hover td:last-child { background: var(--k-surface-2); }
.k-admin-main .card, .k-admin-main [class*="table-card"] { border-radius: 14px; }

/* Compact data tables in the admin panel */
.k-admin-main table th, .k-admin-main table td { padding: 8px 10px !important; vertical-align: middle; }
.k-admin-main table thead th { font-size: 10.5px !important; letter-spacing: .04em; white-space: nowrap; }
.k-admin-main table tbody tr { transition: background .12s; }
.k-admin-main table tbody tr:hover { background: var(--k-surface-2); }
.k-admin-main table td img[style*="border-radius:50%"], .k-admin-main table td [style*="border-radius:50%"][style*="width:4"] { width: 34px !important; height: 34px !important; }
.k-docs { display: inline-flex; gap: 4px; }
.k-docs span { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; background: var(--k-surface-2); color: var(--k-subtle); border: 1px solid var(--k-border); }
.k-docs span.on { background: var(--k-green-50); color: var(--k-green-700); border-color: transparent; }

/* Admin pages on phones: stack form/layout grids, keep stat tiles two-up */
@media (max-width: 760px) {
  .k-admin-main :is(.ac-form-grid, .ac-form-grid-3, .add-row, .addblog-layout, .adm-filter-inner, .ae-form-grid, .ae-form-grid-3,
    .an-layout, .cm-grid, .cm-grid-3, .compare-grid, .contact-grid, .csl-fg-row, .cst-row, .cst-mode-grid, .eb-layout, .em-grid,
    .form-row-2col, .form-row-3col, .two-col, .search-container, .role-selector),
  .k-admin-main [style*="grid-template-columns:1fr 1fr"], .k-admin-main [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .k-admin-main :is(.dashboard-grid, .ab-stats, .adm-analytics, .an-stats, .cd-grid, .csl-metrics, .csl-stats, .el-stats, .pay-stats,
    .rep-stats, .stat-cards, .admin-stats-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important;
  }
  .k-admin-main :is(.dashboard-grid, .admin-stats-grid) > * { padding: 14px !important; min-width: 0; }
  .k-admin-main :is(.dashboard-grid, .admin-stats-grid) h3, .k-admin-main .stat-number { font-size: 1.35rem !important; }
  .k-admin-main table { font-size: .82rem; }
  .k-admin-main :is(.page-header, .adm-header, .admin-header) { flex-wrap: wrap; gap: 10px; }
}

/* Admin "login as" banner */
.k-impersonate { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; background: #7c2d12; color: #ffedd5; font-size: .84rem; text-align: center; }
.k-impersonate a { color: #fff; font-weight: 800; text-decoration: underline; }

/* Hide the legacy footer styling if an old page still prints it next to ours */
.k-footer ~ footer.footer { display: none; }

/* ---------- 8. FLOATING HELP (WhatsApp) --------------------------------- */
.k-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 999px;
  background: #1fa855; color: #fff; text-decoration: none; font-weight: 700; font-size: .88rem;
  box-shadow: 0 10px 24px rgba(31,168,85,.35);
}
.k-wa i { font-size: 1.25rem; }
.k-wa:hover { background: #178f47; color: #fff; }
@media (max-width: 640px) { .k-wa span { display: none; } .k-wa { padding: 14px; } }

/* ---------- 9. TOAST ----------------------------------------------------- */
.k-toast-wrap { position: fixed; top: calc(var(--k-nav-h, 68px) + 14px); right: 18px; z-index: 3000; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.k-toast {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 12px 14px; border-radius: 12px;
  background: #111a2b; color: #fff; text-decoration: none; border-left: 4px solid #22c55e;
  box-shadow: 0 14px 34px rgba(8, 15, 30, .28); font-size: .87rem; font-weight: 600; line-height: 1.45;
  animation: k-toast-in .25s ease; transition: opacity .3s, transform .3s;
}
.k-toast > i { margin-top: 2px; font-size: 1rem; }
.k-toast > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.k-toast b { display: block; font-weight: 800; margin-bottom: 1px; }
.k-toast span span { font-weight: 500; color: #d7deea; }
.k-toast > span:only-of-type > span:only-child { color: #fff; font-weight: 600; }
.k-toast button { background: none; border: 0; color: #93a0b5; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.k-toast button:hover { color: #fff; }
.k-toast.ok  { border-left-color: #22c55e; } .k-toast.ok  > i { color: #86efac; }
.k-toast.err { border-left-color: #ef4444; } .k-toast.err > i { color: #fca5a5; }
.k-toast.info { border-left-color: #3b82f6; } .k-toast.info > i { color: #93c5fd; }
a.k-toast:hover { background: #18243b; }
.k-toast.out { opacity: 0; transform: translateX(20px); }
@media (max-width: 560px) { .k-toast-wrap { right: 16px; left: 16px; width: auto; top: auto; bottom: 16px; } }
@keyframes k-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Admin announcements banner + chat badge ---------- */
.k-ann-wrap { display: grid; gap: 8px; padding-top: 12px; max-width: 1280px; }
.k-ann { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 14px; border-radius: 12px;
  background: var(--k-blue-50); border: 1px solid #c9dbfb; color: var(--k-ink); transition: opacity .2s; }
.k-ann > i { color: var(--k-blue-600); margin-top: 3px; }
.k-ann.is-important { background: #fff6e5; border-color: #fde3b0; }
.k-ann.is-important > i { color: #d97706; }
.k-ann b { font-size: .9rem; }
.k-ann p { margin: 2px 0; font-size: .85rem; color: var(--k-ink-2); }
.k-ann small { font-size: .72rem; color: var(--k-muted); }
.k-ann-x { border: 1px solid var(--k-border); background: var(--k-surface); color: var(--k-ink-2); border-radius: 8px; padding: 5px 10px; font: 700 .76rem var(--k-font); cursor: pointer; white-space: nowrap; }
[data-theme="dark"] .k-ann { background: rgba(26,95,208,.15); border-color: rgba(106,160,240,.3); }
[data-theme="dark"] .k-ann.is-important { background: rgba(217,119,6,.15); border-color: rgba(253,227,176,.3); }
.k-nav-badge { font-style: normal; display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: #25d366; color: #fff; font: 800 .66rem/18px var(--k-font); text-align: center; }
@media (max-width: 640px) { .k-ann { grid-template-columns: auto minmax(0, 1fr); } .k-ann-x { grid-column: 2; justify-self: start; } }
/* ── Popup (counsellor: new interview · candidate/employer: consent) ── */
.k-pop { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .55); animation: kPopIn .18s ease-out; }
.k-pop[hidden] { display: none; }
.k-pop-card { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--k-surface, #fff); color: var(--k-ink, #0f172a); border-radius: 18px; padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, .35); text-align: center; }
.k-pop-ic { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; color: #fff; background: var(--k-grad-brand, #2563eb); box-shadow: 0 0 0 8px rgba(37, 99, 235, .12); }
.k-pop-card h2 { margin: 0 0 4px; font-size: 1.12rem; font-weight: 800; }
.k-pop-sub { margin: 0 0 12px; font-size: .88rem; color: var(--k-muted, #64748b); }
.k-pop-terms { text-align: left; white-space: pre-line; font-size: .86rem; line-height: 1.55; background: var(--k-surface-2, #f8fafc); border: 1px solid var(--k-border, #e2e8f0); border-radius: 12px; padding: 12px 14px; max-height: 40vh; overflow: auto; margin-bottom: 10px; }
.k-pop-agree { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: .84rem; font-weight: 600; margin-bottom: 12px; cursor: pointer; }
.k-pop-act { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
body.k-pop-on { overflow: hidden; }
.k-pop-terms[hidden], .k-pop-agree[hidden] { display: none; }
@keyframes kPopIn { from { opacity: 0; } to { opacity: 1; } }

/* Long option text must never widen a page column */
.k-rs-main select { max-width: 100%; }
/* My counsellor card: keep the coloured header (white name on it), just more compact */
.k-rs-main :is(.mcc-head, .emc-head) { padding: 16px 18px !important; gap: 14px !important; border-radius: 0 !important; }
.k-rs-main :is(.mcc-avatar, .emc-avatar) { width: 56px !important; height: 56px !important; font-size: 22px !important; }
.k-rs-main :is(.mcc-head, .emc-head) h2 { color: #fff !important; }
.k-pop-fee { text-align: left; font-size: .9rem; font-weight: 600; line-height: 1.5; color: var(--k-ink, #0f172a); background: #fff7e6; border: 1.5px solid #f5c26b; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.k-pop-fee[hidden] { display: none; }
[data-theme="dark"] .k-pop-fee { background: #3a2b12; border-color: #8a6a2a; color: #fde7c0; }

/* Top bar never wider than the screen: compact mode switched on by the header script when links don't fit */
.k-nav .nav-center { min-width: 0; }
.k-nav.k-nav-tight .nav-center { gap: 0; margin-left: 8px; }
.k-nav.k-nav-tight .nav-link { padding: 7px 7px; gap: 5px; font-size: .8rem; }
.k-nav.k-nav-tight .nav-link i { font-size: .74rem; }
.k-nav.k-nav-icons .nav-link span.k-hide-md { display: none; }
.k-nav.k-nav-icons .nav-link { padding: 9px 10px; }
.k-nav.k-nav-tight .user-btn > span.notranslate:not(.k-avatar) { display: none; }
.k-nav.k-nav-tight .nav-right { gap: 6px; margin-left: 8px; }
@media (min-width: 981px) and (max-width: 1100px) { .k-nav .user-btn > span.notranslate:not(.k-avatar) { display: none; } }

/* Full profile sections (includes/profile_view.php) — counsellor client page and admin profile page */
.cl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
.cl-sub { margin: 14px 0 6px; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--k-blue-600); }
.cl-dl { display: grid; gap: 6px; margin: 0; }
.cl-dl div { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 10px; font-size: .84rem; border-bottom: 1px dashed var(--k-border); padding-bottom: 5px; }
.cl-dl div:last-child { border-bottom: 0; }
.cl-dl dt { color: var(--k-muted); }
.cl-dl dd { margin: 0; font-weight: 600; color: var(--k-ink); overflow-wrap: anywhere; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-chips span { font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--k-blue-50); color: var(--k-blue-700); }
.cl-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cl-tl li { border-left: 3px solid var(--k-blue-100); padding: 2px 10px; font-size: .86rem; }
.cl-tl b { color: var(--k-ink); } .cl-tl span { color: var(--k-ink-2); font-weight: 600; } .cl-tl em { display: block; font-style: normal; font-size: .76rem; color: var(--k-muted); }
.cl-tl p { margin: 4px 0 0; color: var(--k-ink-2); }
.cl-logo { max-height: 56px; max-width: 180px; object-fit: contain; margin-bottom: 4px; }
@media (max-width: 700px) { .cl-two { grid-template-columns: 1fr; } .cl-dl div { grid-template-columns: 100px minmax(0,1fr); } }
/* Names that open a full profile */
.kp-plink { color: inherit; text-decoration: none; }
.kp-plink:hover { color: var(--k-blue-600, #1a5fd0); text-decoration: underline; }

/* Counsellor → recommend jobs / candidates (counsellor/client.php) */
.rc-form { display: grid; gap: 10px; }
.rc-fl { display: grid; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--k-muted); }
.rc-fl small { font-weight: 500; }
.rc-form select, .rc-form input[type=text], .rc-form input[type=search] { width: 100%; max-width: 100%; min-width: 0; border: 1.5px solid var(--k-border-2); border-radius: 9px; padding: 7px 10px; font: 500 .86rem var(--k-font); background: var(--k-surface); color: var(--k-ink); }
.rc-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-search { position: relative; display: block; }
.rc-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--k-surface); border: 1px solid var(--k-border); border-radius: 10px; box-shadow: var(--k-shadow-md, 0 10px 30px rgba(0,0,0,.12)); max-height: 260px; overflow: auto; padding: 4px; }
.rc-results button { display: grid; gap: 1px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 9px; border-radius: 8px; cursor: pointer; color: var(--k-ink); }
.rc-results button:hover { background: var(--k-blue-50); }
.rc-results small { color: var(--k-muted); font-size: .74rem; }
.rc-results em { display: block; padding: 8px; color: var(--k-muted); font-size: .82rem; }
.rc-picked { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-picked:empty { display: none; }
.rc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--k-blue-50); color: var(--k-blue-700); font-size: .8rem; font-weight: 700; }
.rc-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }

/* Candidate dashboard → jobs recommended by the counsellor */
.kh-reco { border-color: var(--k-blue-100); }
.kh-reco-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kh-reco-list li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--k-border); transition: opacity .3s; }
.kh-reco-list li:first-child { border-top: 0; }
.kh-reco-title { font-weight: 700; font-size: .92rem; color: var(--k-ink); text-decoration: none; }
.kh-reco-title:hover { color: var(--k-blue-600); }
.kh-reco-list span { display: block; font-size: .8rem; color: var(--k-muted); }
.kh-reco-list em { display: block; font-size: .78rem; color: var(--k-ink-2); margin-top: 2px; }
.kh-reco-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .kh-reco-list li { grid-template-columns: 1fr; } .kh-reco-act { justify-content: flex-start; } }

/* ── Dark mode for counsellor pages (generated from their own light colours) ── */
[data-theme="dark"] .cd-sidebar { background: var(--k-surface) !important; border-color: var(--k-border) !important; }
[data-theme="dark"] .cd-avatar-name { color: var(--k-ink) !important; }
[data-theme="dark"] .cd-avatar-code { color: var(--k-muted) !important; }
[data-theme="dark"] .cd-nav a { color: var(--k-muted) !important; }
[data-theme="dark"] .cal-grid { background: var(--k-surface) !important; border-color: var(--k-border) !important; }
[data-theme="dark"] .cal-weekdays div { color: var(--k-muted) !important; }
[data-theme="dark"] .cal-daynum { color: var(--k-ink) !important; }
[data-theme="dark"] .cd-section { background: var(--k-surface) !important; border-color: var(--k-border) !important; }
[data-theme="dark"] .cd-section-title { color: var(--k-ink) !important; }
[data-theme="dark"] .fu-item .fu-name { color: var(--k-ink) !important; }
[data-theme="dark"] .fu-item .fu-summary { color: var(--k-muted) !important; }
[data-theme="dark"] .cd-empty { color: var(--k-muted) !important; }
[data-theme="dark"] .cl-av img { background: var(--k-surface) !important; }
[data-theme="dark"] .cd-stat { background: var(--k-surface) !important; border-color: var(--k-border) !important; }
[data-theme="dark"] .cd-stat-lbl { color: var(--k-muted) !important; }
[data-theme="dark"] .cd-req-name { color: var(--k-ink) !important; }
[data-theme="dark"] .cd-req-meta { color: var(--k-muted) !important; }
[data-theme="dark"] .cd-req-meta i { color: var(--k-muted) !important; }
[data-theme="dark"] .cd-table th { color: var(--k-muted) !important; }
[data-theme="dark"] .cd-table td { color: var(--k-ink) !important; }
[data-theme="dark"] .cd-tl-desc { color: var(--k-ink) !important; }
[data-theme="dark"] .cd-tl-time { color: var(--k-muted) !important; }
[data-theme="dark"] .fu-card { background: var(--k-surface) !important; border-color: var(--k-border) !important; }
[data-theme="dark"] .iv-card { background: var(--k-surface) !important; border-color: var(--k-border) !important; }
[data-theme="dark"] .pc-search { background: var(--k-surface) !important; }
[data-theme="dark"] .pc-filter { background: var(--k-surface) !important; color: var(--k-ink) !important; }
[data-theme="dark"] .pc-card { background: var(--k-surface) !important; border-color: var(--k-border) !important; }
[data-theme="dark"] .pc-name { color: var(--k-ink) !important; }
[data-theme="dark"] .pc-meta i { color: var(--k-muted) !important; }
[data-theme="dark"] .pc-btn-ghost { color: var(--k-ink) !important; }
[data-theme="dark"] .pc-tab { color: var(--k-muted) !important; }
[data-theme="dark"] .pc-tl-item .pc-tl-top { color: var(--k-ink) !important; }
[data-theme="dark"] .pc-tl-item .pc-tl-time { color: var(--k-muted) !important; }
[data-theme="dark"] .pc-note { color: var(--k-ink) !important; }
[data-theme="dark"] .pc-note-time { color: var(--k-muted) !important; }
[data-theme="dark"] .pc-empty-mini { color: var(--k-muted) !important; }
[data-theme="dark"] .cd-empty { color: var(--k-muted) !important; background: var(--k-surface) !important; border-color: var(--k-border) !important; }
[data-theme="dark"] .ec-card { background: var(--k-surface) !important; border-color: var(--k-border) !important; }
[data-theme="dark"] .ec-name { color: var(--k-ink) !important; }
[data-theme="dark"] .ec-meta i { color: var(--k-muted) !important; }
[data-theme="dark"] .ec-btn-ghost { color: var(--k-ink) !important; }
[data-theme="dark"] .ec-tl-item .ec-tl-top { color: var(--k-ink) !important; }
[data-theme="dark"] .ec-tl-item .ec-tl-time { color: var(--k-muted) !important; }
[data-theme="dark"] .ec-note { color: var(--k-ink) !important; }
[data-theme="dark"] .ec-note-time { color: var(--k-muted) !important; }
[data-theme="dark"] .ec-empty-mini { color: var(--k-muted) !important; }
[data-theme="dark"] .nt-card { background: var(--k-surface) !important; border-color: var(--k-border) !important; }
[data-theme="dark"] .pp-av img { background: var(--k-surface) !important; }
[data-theme="dark"] .prof-card { background: var(--k-surface) !important; border-color: var(--k-border) !important; }
[data-theme="dark"] .prof-upload label { color: var(--k-ink) !important; }
[data-theme="dark"] .prof-upload small { color: var(--k-muted) !important; }
[data-theme="dark"] .prof-field label { color: var(--k-ink) !important; }
[data-theme="dark"] .set-field label { color: var(--k-ink) !important; }
[data-theme="dark"] .plat-label { color: var(--k-muted) !important; }
[data-theme="dark"] .plat-val { color: var(--k-ink) !important; }
[data-theme="dark"] .plat-note { color: var(--k-muted) !important; }
/* Inline light colours inside the role pages (old markup) */
[data-theme="dark"] .k-rs-main [style*="background:#fff"], [data-theme="dark"] .k-rs-main [style*="background: #fff"], [data-theme="dark"] .k-rs-main [style*="background:white"] { background: var(--k-surface) !important; }
[data-theme="dark"] .k-rs-main [style*="background:#f8f9fc"], [data-theme="dark"] .k-rs-main [style*="background:#f8faff"], [data-theme="dark"] .k-rs-main [style*="background:#f9fafb"], [data-theme="dark"] .k-rs-main [style*="background:#f3f4f6"], [data-theme="dark"] .k-rs-main [style*="background:#fafafa"], [data-theme="dark"] .k-rs-main [style*="background: #f5f5f5"], [data-theme="dark"] .k-rs-main [style*="background:#f5f5f5"] { background: var(--k-surface-2) !important; }
[data-theme="dark"] .k-rs-main [style*="color:#1a1d2e"], [data-theme="dark"] .k-rs-main [style*="color:#111"], [data-theme="dark"] .k-rs-main [style*="color:#1f2937"], [data-theme="dark"] .k-rs-main [style*="color:#374151"], [data-theme="dark"] .k-rs-main [style*="color:#333"], [data-theme="dark"] .k-rs-main [style*="color: #333"], [data-theme="dark"] .k-rs-main [style*="color:#2d3748"] { color: var(--k-ink) !important; }
[data-theme="dark"] .k-rs-main [style*="color:#6b7280"], [data-theme="dark"] .k-rs-main [style*="color:#8a93a8"], [data-theme="dark"] .k-rs-main [style*="color:#9ca3af"], [data-theme="dark"] .k-rs-main [style*="color: #666"], [data-theme="dark"] .k-rs-main [style*="color:#666"], [data-theme="dark"] .k-rs-main [style*="color: #999"] { color: var(--k-muted) !important; }
/* Dark mode: counsellor buttons, pills, calendar cells, request cards, sidebar box */
[data-theme="dark"] .ec-btn-ghost, [data-theme="dark"] .pc-btn-ghost { background: var(--k-surface-2) !important; color: var(--k-ink) !important; border: 1px solid var(--k-border); }
[data-theme="dark"] .ec-btn-ghost:hover, [data-theme="dark"] .pc-btn-ghost:hover { background: var(--k-border) !important; }
[data-theme="dark"] .ec-btn-success, [data-theme="dark"] .pc-btn-success { background: rgba(30,142,62,.18) !important; color: #6fd29a !important; }
[data-theme="dark"] .ec-job-pill { background: rgba(37,99,235,.16) !important; color: #a9c7ff !important; }
[data-theme="dark"] .cal-cell { background: var(--k-surface-2) !important; border-color: var(--k-border) !important; }
[data-theme="dark"] .cal-cell.today { background: rgba(14,159,174,.14) !important; border-color: #0e9fae !important; }
[data-theme="dark"] .cal-cell.empty { background: transparent !important; }
[data-theme="dark"] .cd-req-card { background: var(--k-surface-2) !important; border-color: var(--k-border) !important; }
[data-theme="dark"] .cd-req-name { color: var(--k-ink) !important; }
[data-theme="dark"] .k-rs-stats a.hot { background: #3a2b12; border-color: #8a6a2a; }
[data-theme="dark"] .k-rs-side { scrollbar-color: var(--k-border) transparent; }

/* Recommendation rows (counsellor client page + Recommendations page) */
.rc-list { list-style: none; margin: 0; padding: 0; }
.rc-list li { display: grid; grid-template-columns: 170px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--k-border); }
.rc-list li:first-child { border-top: 0; }
.rc-dir { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 4px 8px; border-radius: 8px; text-align: center; }
.rc-dir.emp { background: rgba(14,124,134,.1); color: #0e7c86; }
.rc-dir.cand { background: var(--k-blue-50); color: var(--k-blue-700); }
.rc-main { min-width: 0; font-size: .88rem; color: var(--k-ink-2); }
.rc-main b { color: var(--k-ink); }
.rc-main small { display: block; font-size: .76rem; color: var(--k-muted); margin-top: 2px; }
[data-theme="dark"] .rc-dir.emp { background: rgba(14,159,174,.18); color: #67d4df; }
[data-theme="dark"] .rc-dir.cand { background: rgba(37,99,235,.18); color: #a9c7ff; }
@media (max-width: 700px) { .rc-list li { grid-template-columns: 1fr auto; } .rc-dir { grid-column: 1 / -1; justify-self: start; } }

/* Recommendation composer (counsellor/recommendations.php) */
.rcx { margin-bottom: 14px; }
.rcx-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.rcx-tabs button { border: 1.5px solid var(--k-border-2); background: var(--k-surface); color: var(--k-ink-2); border-radius: 10px; padding: 8px 14px; font: 700 .86rem var(--k-font); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.rcx-tabs button.on { background: var(--k-blue-600); border-color: var(--k-blue-600); color: #fff; }
.rcx-help { margin: 0 0 12px; font-size: .82rem; color: var(--k-muted); }
.rcx-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.rcx-step { position: relative; padding-left: 34px; min-width: 0; }
.rcx-n { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--k-blue-50); color: var(--k-blue-700); font-weight: 800; font-size: .8rem; }
.rcx-grid select[size] { width: 100%; min-height: 180px; border: 1.5px solid var(--k-border-2); border-radius: 10px; padding: 4px; font: 500 .86rem var(--k-font); background: var(--k-surface); color: var(--k-ink); }
.rcx-grid select[size] optgroup { font-weight: 800; color: var(--k-muted); }
.rcx-grid select[size] option { padding: 5px 8px; border-radius: 6px; color: var(--k-ink); font-weight: 500; }
.rcx-grid input[type=search], .rcx-grid input[type=text] { width: 100%; min-width: 0; border: 1.5px solid var(--k-border-2); border-radius: 9px; padding: 7px 10px; font: 500 .86rem var(--k-font); background: var(--k-surface); color: var(--k-ink); }
#rcxJobFilter { margin-bottom: 6px; }
.rcx-link { font-size: .78rem; font-weight: 700; margin-top: 4px; }
.rcx-empty { font-size: .82rem; color: var(--k-muted); }
.rcx-send { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--k-surface-2); border: 1px solid var(--k-border); }
.rcx-summary { margin: 0; font-size: .88rem; color: var(--k-ink-2); min-width: 0; }
.rcx-h { font-size: 1rem; margin: 6px 0 8px; }
@media (max-width: 860px) { .rcx-grid { grid-template-columns: 1fr; } }
#compose, #list, #recommend, #reco { scroll-margin-top: 84px; }

/* ── Admin list pages: one size for every toolbar button (export, add, filters, search) ── */
.k-admin-main .export-btn-group { display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; }
.k-admin-main .export-btn, .k-admin-main .btn-add-employer, .k-admin-main .btn-add-candidate, .k-admin-main .btn-add-job {
  height: 40px; min-height: 40px; padding: 0 14px; border-radius: 10px; font-size: 13px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; box-sizing: border-box; }
.k-admin-main .btn-add-employer, .k-admin-main .btn-add-candidate, .k-admin-main .btn-add-job { padding: 0 18px; }
.k-admin-main .sticky-toolbar > div:first-child > div:last-child { flex-wrap: nowrap; }
.k-admin-main .sf-pills { gap: 6px; }
.k-admin-main .sf-pill, .k-admin-main .sticky-toolbar ~ div a[href^="?"][style*="border-radius:20px"] { height: 34px; padding: 0 14px !important; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; box-sizing: border-box; }
.k-admin-main #searchForm { align-items: center; }
.k-admin-main #searchForm .search-input-live, .k-admin-main #searchForm select { height: 40px; box-sizing: border-box; }
.k-admin-main #searchForm > button, .k-admin-main #searchForm > a { height: 40px !important; padding: 0 16px !important; display: inline-flex !important; align-items: center; gap: 6px; border-radius: 10px !important; box-sizing: border-box; font-size: 13px !important; white-space: nowrap; }
@media (max-width: 900px) {
  .k-admin-main .sticky-toolbar > div:first-child > div:last-child, .k-admin-main .export-btn-group { flex-wrap: wrap; }
  .k-admin-main .export-btn { height: 36px; min-height: 36px; padding: 0 10px; }
}
[data-theme="dark"] .k-admin-main .export-btn { background: transparent; }
[data-theme="dark"] .k-admin-main .sf-pill:not(.active) { color: var(--k-ink-2, #c3ccda); border-color: var(--k-border-2, #33405a); background: transparent; }

/* Native scrollbars and form controls follow the theme */
[data-theme="dark"] { color-scheme: dark; }

/* ── Admin list pages, compact: title, buttons, status tabs and source pills take two short rows ── */
.k-admin-main .sticky-toolbar { padding-top: 10px !important; padding-bottom: 10px !important; margin-bottom: 10px !important; }
.k-admin-main .sticky-toolbar h1 { font-size: 18px !important; }
.k-admin-main .sticky-toolbar p { font-size: 11.5px !important; margin-top: 0 !important; }
.k-admin-main .export-btn, .k-admin-main .btn-add-employer, .k-admin-main .btn-add-candidate, .k-admin-main .btn-add-job { height: 34px; min-height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; box-shadow: none; }
.k-admin-main .kp-tabs { display: inline-flex !important; flex-wrap: wrap; gap: 6px !important; margin: 0 8px 8px 0 !important; vertical-align: top; }
.k-admin-main .kp-tabs > a { height: 30px; padding: 0 11px !important; display: inline-flex; align-items: center; gap: 4px; font-size: 12px !important; box-sizing: border-box; white-space: nowrap; }
.k-admin-main .kp-tabs > a span { padding: 0 6px !important; margin-left: 2px !important; font-size: 10.5px !important; line-height: 17px; }
.k-admin-main .sf-pills { display: inline-flex !important; flex-wrap: wrap; gap: 6px !important; margin: 0 0 8px !important; vertical-align: top; }
.k-admin-main .sf-pill { height: 30px; padding: 0 11px !important; font-size: 12px !important; }
.k-admin-main #searchForm { gap: 6px !important; margin-bottom: 8px !important; }
.k-admin-main #searchForm .search-input-live, .k-admin-main #searchForm select, .k-admin-main #searchForm > button, .k-admin-main #searchForm > a { height: 36px !important; font-size: 12.5px !important; }
.k-admin-main #searchForm select { padding: 0 8px; border-radius: 9px; border: 1px solid var(--border-color); background: var(--bg-card, #fff); color: var(--text-primary); font-weight: 600; max-width: 170px; }
.k-admin-main .csl-stats + div, .k-admin-main .kp-tabs + form { margin-bottom: 10px !important; }
@media (max-width: 760px) {
  .k-admin-main .kp-tabs, .k-admin-main .sf-pills { display: flex !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .k-admin-main .kp-tabs::-webkit-scrollbar, .k-admin-main .sf-pills::-webkit-scrollbar { display: none; }
}

/* ── Compact page banners and toolbars (counsellor pages) ── */
.cd-hero { padding: 14px 20px !important; border-radius: 16px !important; box-shadow: 0 6px 18px rgba(14,159,174,.2) !important; }
.cd-hero::after { width: 140px !important; height: 140px !important; }
.cd-hero h1 { font-size: clamp(1.05rem, 1.8vw, 1.3rem) !important; margin: 0 0 2px !important; }
.cd-hero p { font-size: .82rem !important; }
.cd-main { gap: 14px !important; }
.pc-toolbar { gap: 6px !important; }
.pc-search, .pc-filter, .pc-toolbar input, .pc-toolbar select { padding: 7px 11px !important; border-radius: 10px !important; font-size: 12.5px !important; height: 36px; box-sizing: border-box; }
.pc-toolbar select { width: auto; max-width: 190px; }

/* "KaizenBMS Career Launchpad" next to the logo for visitors */
.k-brand { display: inline-flex; align-items: center; }
.k-brand-tag { margin-left: 10px; padding-left: 10px; border-left: 2px solid var(--k-border); font-weight: 800; font-size: .74rem; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase;
  background: linear-gradient(90deg, #1a5fd0, #0e9fae 70%, #58b82b); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
@media (max-width: 380px) { .k-brand-tag { display: none; } }

/* Collapsible menu: icon rail on wide screens (toggle remembered per device) */
.k-rs-fold { position: absolute; top: 10px; right: 8px; z-index: 2; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--k-border); background: var(--k-surface); color: var(--k-subtle); display: grid; place-items: center; font-size: .7rem; cursor: pointer; padding: 0; }
.k-rs-fold:hover { color: var(--k-blue-700); border-color: var(--k-blue-100); }
.k-rs-me .k-rs-who { padding-right: 22px; }
html.k-rs-mini .k-rs-shell { grid-template-columns: 58px minmax(0, 1fr); }
html.k-rs-mini .k-rs-side { padding: 40px 6px 10px; overflow-x: hidden; }
html.k-rs-mini .k-rs-fold { right: 50%; transform: translateX(50%) rotate(180deg); }
html.k-rs-mini .k-rs-me { grid-template-columns: 1fr; justify-items: center; padding: 0 0 8px; }
html.k-rs-mini .k-rs-who, html.k-rs-mini .k-rs-stats, html.k-rs-mini .k-rs-hint, html.k-rs-mini .k-rs-group, html.k-rs-mini .k-rs-link span, html.k-rs-mini .k-rs-lock { display: none; }
html.k-rs-mini .k-rs-pct { width: 40px; height: 6px; margin-top: 6px; border-radius: 4px; }
html.k-rs-mini .k-rs-pct span { display: none; }
html.k-rs-mini .k-rs-pct i { opacity: .9; }
html.k-rs-mini .k-rs-nav { display: grid; gap: 2px; padding-top: 4px; }
html.k-rs-mini .k-rs-link { justify-content: center; padding: 9px 0; position: relative; }
html.k-rs-mini .k-rs-link > i:first-child { width: auto; font-size: .92rem; }
html.k-rs-mini .k-rs-link em { position: absolute; top: 2px; right: 2px; min-width: 16px; padding: 0 4px; font-size: .58rem; }
@media (max-width: 960px) {
  .k-rs-fold { display: none; }
  .k-rs-me .k-rs-who { padding-right: 0; }
  html.k-rs-mini .k-rs-shell { grid-template-columns: minmax(0, 1fr); }
  html.k-rs-mini .k-rs-side { padding: 8px; }
  html.k-rs-mini .k-rs-me { grid-template-columns: 34px minmax(0, 1fr) auto; justify-items: stretch; }
  html.k-rs-mini .k-rs-who, html.k-rs-mini .k-rs-link span { display: block; }
  html.k-rs-mini .k-rs-pct { width: 104px; height: 22px; margin: 0; }
  html.k-rs-mini .k-rs-pct span { display: block; }
  html.k-rs-mini .k-rs-nav { display: flex; }
  html.k-rs-mini .k-rs-link { padding: 5px 11px; }
}

/* Live updates: shown when the page's data changed while the user was typing / choosing (includes/header.php) */
.kp-live-pill { position: fixed; left: 16px; bottom: 16px; z-index: 2600; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 9px 14px; background: #1a5fd0; color: #fff; font: 700 .82rem var(--k-font, sans-serif); box-shadow: 0 10px 24px rgba(26,95,208,.35); cursor: pointer; animation: kpLiveIn .25s ease-out; }
.kp-live-pill:hover { background: #154db0; }
@keyframes kpLiveIn { from { transform: translateY(12px); opacity: 0; } }

/* "Filters" collapsible window used on job lists (admin/manage-jobs.php, employer/my-jobs.php) */
.kfx { background: var(--k-surface, #fff); border: 1px solid var(--k-border, #e5e7eb); border-radius: 12px; padding: 0 12px; margin: 0 0 12px; }
.kfx > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 0; font-weight: 800; font-size: .84rem; color: var(--k-ink, #0f172a); }
.kfx > summary::-webkit-details-marker { display: none; }
.kfx > summary i { color: var(--k-blue-600, #1a5fd0); }
.kfx > summary small { font-weight: 700; font-size: .72rem; color: var(--k-blue-700, #1a4fb0); background: var(--k-blue-50, #e8f0fe); padding: 1px 8px; border-radius: 999px; }
.kfx > summary::after { content: '▸'; margin-left: auto; color: var(--k-subtle, #94a3b8); } .kfx[open] > summary::after { content: '▾'; }
.kfx[open] { padding-bottom: 10px; }