/* ============================================
   JobManthan - Government Jobs Portal
   Complete Styles with Dark/Light Theme
   ============================================ */

/* --- CSS Custom Properties (Dark Default) --- */
:root {
  --bg: #0f0f0f;
  --bg-secondary: #151515;
  --card: #1a1a1a;
  --card-hover: #222222;
  --text: #f8fafc;
  --text-secondary: #cbd5e1;
  --muted: #8b95a7;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --accent: #f97316;
  --accent-hover: #ea580c;
  --accent-soft: rgba(249, 115, 22, 0.12);
  --green: #10b981;
  --green-soft: rgba(16, 185, 129, 0.12);
  --amber: #f59e0b;
  --amber-soft: rgba(245, 158, 11, 0.12);
  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, 0.12);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);
  --overlay: rgba(0, 0, 0, 0.7);
  --header-bg: rgba(15, 15, 15, 0.92);
  --filter-bg: rgba(15, 15, 15, 0.95);
  --skeleton-base: #222222;
  --skeleton-shine: #2a2a2a;
  --scrollbar-track: #1a1a1a;
  --scrollbar-thumb: #333333;
  --scrollbar-thumb-hover: #444444;
}

/* --- Light Theme --- */
html.light {
  --bg: #f8fafc;
  --bg-secondary: #f1f5f9;
  --card: #ffffff;
  --card-hover: #f8fafc;
  --text: #0f172a;
  --text-secondary: #334155;
  --muted: #64748b;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --accent: #f97316;
  --accent-hover: #ea580c;
  --accent-soft: rgba(249, 115, 22, 0.08);
  --green: #10b981;
  --green-soft: rgba(16, 185, 129, 0.08);
  --amber: #f59e0b;
  --amber-soft: rgba(245, 158, 11, 0.08);
  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, 0.08);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
  --overlay: rgba(0, 0, 0, 0.4);
  --header-bg: rgba(248, 250, 252, 0.92);
  --filter-bg: rgba(248, 250, 252, 0.95);
  --skeleton-base: #e2e8f0;
  --skeleton-shine: #f1f5f9;
  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--accent-hover);
}

img {
  max-width: 100%;
  display: block;
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* --- Container --- */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .container {
    padding: 0 24px;
  }
}

/* ============================================
   HEADER
   ============================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--text);
}

.brand-icon {
  width: 36px;
  height: 36px;
  background: var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 20px;
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
  background: #fff;
}

.footer-brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #fff;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.brand-name span {
  color: var(--accent);
}

.brand-tagline {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

/* Global Search */
.global-search {
  flex: 1;
  max-width: 420px;
  position: relative;
  display: none;
}

@media (min-width: 768px) {
  .global-search {
    display: block;
  }
}

.global-search input {
  width: 100%;
  padding: 8px 12px 8px 38px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.global-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.global-search input::placeholder {
  color: var(--muted);
}

.global-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  max-height: 380px;
  overflow-y: auto;
  display: none;
  z-index: 200;
}

.search-dropdown.active {
  display: block;
}

.search-dropdown-header {
  padding: 8px 14px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.search-dropdown-footer {
  padding: 7px 14px;
  font-size: 10px;
  color: var(--muted);
  background: var(--bg);
  border-top: 1px solid var(--border);
  text-align: center;
}

.search-dropdown-empty {
  padding: 22px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.search-dropdown-item {
  /* Also an <a> containing block children — needs block layout. */
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border);
}

.search-dropdown-item:last-child {
  border-bottom: none;
}

.search-dropdown-item:hover,
.search-dropdown-item.selected {
  background: var(--accent-soft);
}

.search-dropdown-item .sdi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.search-dropdown-item .sdi-org {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-dropdown-item .sdi-cat {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}

.search-dropdown-item .sdi-cat.tech { background: rgba(6,182,212,0.15); color: #06b6d4; }
.search-dropdown-item .sdi-cat.nontech { background: rgba(249,115,22,0.15); color: #f97316; }
.search-dropdown-item .sdi-cat.medical { background: rgba(236,72,153,0.15); color: #ec4899; }

.search-dropdown-item .sdi-name {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-dropdown-item .sdi-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--muted);
  flex-wrap: wrap;
}

.search-dropdown-item .sdi-meta svg {
  width: 11px;
  height: 11px;
  vertical-align: -1px;
}

.search-dropdown-item .sdi-meta .exp {
  color: var(--red);
}

/* Header Nav */
.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 1;
  min-width: 0;
}

.header-nav-link {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  transition: all 0.2s;
}

.header-nav-link:hover {
  background: var(--card-hover);
  color: var(--text);
}

.header-nav-link.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 900px) {
  .header-nav {
    display: none;
  }
}

/* Primary Nav duplicated inside the mobile drawer (side-panel).
   Hidden by default/desktop since the header-nav above already shows these links. */
.side-panel-primary-nav {
  display: none;
}

@media (max-width: 900px) {
  .side-panel-primary-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  .side-panel-primary-nav .header-nav-link {
    display: block;
    width: 100%;
    padding: 10px 12px;
    white-space: normal;
  }
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.theme-toggle:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.theme-toggle .icon-moon {
  display: none;
}

html.light .theme-toggle .icon-sun {
  display: none;
}

html.light .theme-toggle .icon-moon {
  display: block;
}

/* ============================================
   STATS BAR
   ============================================ */
.stats-bar {
  padding: 0;
  margin-bottom: 16px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

@media (max-width: 1023px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 639px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
}

.stat-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 20px;
  height: 20px;
}

.stat-icon.orange { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.stat-icon.emerald { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.stat-icon.amber { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.stat-icon.sky { background: rgba(14, 165, 233, 0.15); color: #0ea5e9; }
.stat-icon.violet { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

.stat-info .stat-number {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.stat-info .stat-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* ============================================
   PAGE LAYOUT (Side Panel + Main Content)
   ============================================ */
.page-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* --- Side Panel --- */
.side-panel {
  width: 240px;
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  position: sticky;
  top: 60px;
  overflow: hidden;
  z-index: 50;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
}

.side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.side-panel-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.side-panel-header svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

/* Collapse / Expand Button */
.side-panel-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}

.side-panel-collapse-btn:hover {
  background: var(--card-hover);
  color: var(--text);
  border-color: var(--border-strong);
}

.side-panel-collapse-btn .icon-expand {
  display: none;
}

/* --- Collapsed State (desktop) --- */
.page-layout.panel-collapsed .side-panel {
  width: 56px;
}

.page-layout.panel-collapsed .side-panel-header-left span {
  display: none;
}

.page-layout.panel-collapsed .side-panel-collapse-btn .icon-collapse {
  display: none;
}

.page-layout.panel-collapsed .side-panel-collapse-btn .icon-expand {
  display: block;
}

.page-layout.panel-collapsed .side-nav-item {
  padding: 10px;
  justify-content: center;
}

.page-layout.panel-collapsed .side-nav-info {
  display: none;
}

.page-layout.panel-collapsed .side-nav-divider {
  margin: 6px 8px;
}

/* Tooltip on collapsed nav items */
.page-layout.panel-collapsed .side-nav-item {
  position: relative;
}

.page-layout.panel-collapsed .side-nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--text);
  color: var(--bg);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
}

.page-layout.panel-collapsed .side-nav-item:hover::after {
  opacity: 1;
}

/* On mobile when collapsed, keep the overlay-based drawer behavior */
@media (max-width: 1023px) {
  .side-panel-collapse-btn {
    display: none;
  }
}

.side-panel-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Side Nav Items */
.side-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: var(--text-secondary);
  border: 1px solid transparent;
}

.side-nav-item:hover {
  background: var(--card-hover);
  color: var(--text);
}

.side-nav-item.active {
  color: var(--text);
  font-weight: 600;
}

.side-nav-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.side-nav-icon svg {
  width: 16px;
  height: 16px;
}

.side-nav-info {
  min-width: 0;
  flex: 1;
}

.side-nav-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-nav-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.2;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Side Nav Divider */
.side-nav-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

/* Side Nav Color Themes */
.side-nav-item.orange { }
.side-nav-item.orange .side-nav-icon { background: rgba(249,115,22,0.15); color: #f97316; }
.side-nav-item.orange.active { background: linear-gradient(135deg, rgba(249,115,22,0.12), rgba(249,115,22,0.04)); border-color: rgba(249,115,22,0.25); }

.side-nav-item.emerald { }
.side-nav-item.emerald .side-nav-icon { background: rgba(16,185,129,0.15); color: #10b981; }
.side-nav-item.emerald.active { background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04)); border-color: rgba(16,185,129,0.25); }

.side-nav-item.amber { }
.side-nav-item.amber .side-nav-icon { background: rgba(245,158,11,0.15); color: #f59e0b; }
.side-nav-item.amber.active { background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.04)); border-color: rgba(245,158,11,0.25); }

.side-nav-item.cyan { }
.side-nav-item.cyan .side-nav-icon { background: rgba(6,182,212,0.15); color: #06b6d4; }
.side-nav-item.cyan.active { background: linear-gradient(135deg, rgba(6,182,212,0.12), rgba(6,182,212,0.04)); border-color: rgba(6,182,212,0.25); }

.side-nav-item.rose { }
.side-nav-item.rose .side-nav-icon { background: rgba(244,63,94,0.15); color: #f43f5e; }
.side-nav-item.rose.active { background: linear-gradient(135deg, rgba(244,63,94,0.12), rgba(244,63,94,0.04)); border-color: rgba(244,63,94,0.25); }

.side-nav-item.violet { }
.side-nav-item.violet .side-nav-icon { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.side-nav-item.violet.active { background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(139,92,246,0.04)); border-color: rgba(139,92,246,0.25); }

.side-nav-item.sky { }
.side-nav-item.sky .side-nav-icon { background: rgba(14,165,233,0.15); color: #0ea5e9; }
.side-nav-item.sky.active { background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(14,165,233,0.04)); border-color: rgba(14,165,233,0.25); }

.side-nav-item.lime { }
.side-nav-item.lime .side-nav-icon { background: rgba(132,204,22,0.15); color: #84cc16; }
.side-nav-item.lime.active { background: linear-gradient(135deg, rgba(132,204,22,0.12), rgba(132,204,22,0.04)); border-color: rgba(132,204,22,0.25); }

.side-nav-item.fuchsia { }
.side-nav-item.fuchsia .side-nav-icon { background: rgba(217,70,239,0.15); color: #d946ef; }
.side-nav-item.fuchsia.active { background: linear-gradient(135deg, rgba(217,70,239,0.12), rgba(217,70,239,0.04)); border-color: rgba(217,70,239,0.25); }

.side-nav-item.pink { }
.side-nav-item.pink .side-nav-icon { background: rgba(236,72,153,0.15); color: #ec4899; }
.side-nav-item.pink.active { background: linear-gradient(135deg, rgba(236,72,153,0.12), rgba(236,72,153,0.04)); border-color: rgba(236,72,153,0.25); }

.side-nav-item.teal { }
.side-nav-item.teal .side-nav-icon { background: rgba(20,184,166,0.15); color: #14b8a6; }
.side-nav-item.teal.active { background: linear-gradient(135deg, rgba(20,184,166,0.12), rgba(20,184,166,0.04)); border-color: rgba(20,184,166,0.25); }

.side-nav-item.yellow { }
.side-nav-item.yellow .side-nav-icon { background: rgba(234,179,8,0.15); color: #eab308; }
.side-nav-item.yellow.active { background: linear-gradient(135deg, rgba(234,179,8,0.12), rgba(234,179,8,0.04)); border-color: rgba(234,179,8,0.25); }

.side-nav-item.red { }
.side-nav-item.red .side-nav-icon { background: rgba(239,68,68,0.15); color: #ef4444; }
.side-nav-item.red.active { background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.04)); border-color: rgba(239,68,68,0.25); }

/* Side Nav Count Badge */
.side-nav-count {
  font-size: 10px;
  font-weight: 700;
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: auto;
  white-space: nowrap;
}

.page-layout.panel-collapsed .side-nav-count {
  display: none;
}

/* Side Panel Overlay (mobile) */
.side-panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: 60px;
  background: rgba(0,0,0,0.5);
  z-index: 45;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.side-panel-overlay.active {
  display: block;
}

/* Side Panel Toggle Button */
.side-panel-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.side-panel-toggle:hover {
  background: var(--card-hover);
  border-color: var(--border-strong);
}

.side-panel-toggle svg {
  width: 18px;
  height: 18px;
}

/* --- Main Content Area --- */
.main-content {
  flex: 1;
  min-width: 0;
  padding: 20px 24px 0;
  max-width: 100%;
}

.ticker-section {
  margin-bottom: 16px;
}

/* ============================================
   MOBILE RESPONSIVE - Side Panel
   ============================================ */
@media (max-width: 1023px) {
  .side-panel-toggle {
    display: flex;
  }

  .side-panel {
    position: fixed;
    left: 0;
    top: 60px;
    height: calc(100vh - 60px);
    width: 240px !important;     /* v7.2: always full-width on mobile, even if desktop is collapsed */
    transform: translateX(-100%);
    z-index: 55;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
  }

  .side-panel.open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  /* v7.2: On mobile, always show the full nav labels + icons — the
     collapsed (icon-only) state is a desktop-only affordance. */
  .side-panel .side-nav-info,
  .side-panel .side-panel-header-left span,
  .side-panel .side-nav-count {
    display: block !important;
  }
  .side-panel .side-nav-item {
    padding: 10px 12px !important;
    justify-content: flex-start !important;
  }
  .side-panel .side-nav-item::after {
    display: none !important;   /* suppress the collapsed-rail tooltip */
  }

  .main-content {
    padding: 16px 16px 0;
  }
}

@media (max-width: 639px) {
  .main-content {
    padding: 12px 12px 0;
  }
}

/* ============================================
   NEWS TICKER
   ============================================ */
.ticker {
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  background: var(--card);
  height: 40px;
}

.ticker-label {
  background: var(--accent);
  color: white;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  flex-shrink: 0;
  white-space: nowrap;
}

.ticker-track-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  /* v6.1: Slowed from 40s to 90s so users can read each item comfortably. */
  animation: ticker-scroll 90s linear infinite;
}

.ticker-track:hover {
  animation-play-state: paused;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: color 0.2s;
}

.ticker-item:hover {
  color: var(--accent);
}

.ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================
   FILTER BAR
   ============================================ */
.filter-bar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.filter-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

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

.filter-pill {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.filter-pill:hover {
  border-color: var(--accent);
  color: var(--text);
}

.filter-pill.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.filter-select {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
  max-width: 180px;
}

.filter-select:focus {
  border-color: var(--accent);
}

.filter-search-input {
  padding: 6px 12px 6px 34px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
  width: 180px;
  position: relative;
}

.filter-search-input:focus {
  border-color: var(--accent);
}

.filter-search-wrapper {
  position: relative;
  flex-shrink: 0;
}

.filter-search-wrapper svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
}

.filter-active-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.filter-active-count strong {
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 639px) {
  .filter-search-input {
    width: 140px;
  }
}

/* ============================================
   MAIN CONTENT (2-Column)
   ============================================ */
.content-section {
  padding-bottom: 32px;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1023px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Job Listings Card --- */
.job-listings-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.job-listings-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.job-listings-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.job-listings-title svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.opportunities-badge {
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
}

/* --- Per-Job Vacancy Badge (left column of job row) --- */
.job-vac-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.job-vacancy-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(6, 182, 212, 0.08);
  border: 1.5px solid rgba(6, 182, 212, 0.2);
  min-width: 80px;
  transition: all 0.2s;
}

.job-vacancy-badge-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.2px;
  line-height: 1;
  margin-bottom: 2px;
  white-space: nowrap;
}

.job-vacancy-badge-count {
  font-size: 24px;
  font-weight: 800;
  color: #06b6d4;
  line-height: 1.1;
}

.job-row:hover .job-vacancy-badge {
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.14);
}

/* --- Vertical Divider between columns --- */
.job-row-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 4px 0;
}

.job-listings-body {
  max-height: 700px;
  overflow-y: auto;
  padding: 0;
}

/* --- Skeleton Loading --- */
.skeleton-row {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-line {
  height: 14px;
  background: var(--skeleton-base);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.skeleton-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-50 { width: 50%; }

@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* --- Job Row --- */
.job-row {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.job-row:last-child {
  border-bottom: none;
}

.job-row:hover {
  background: var(--accent-soft);
}

.job-row.expired {
  /* Expired recruitments stay FULLY visible and interactive. Expiry is shown
     only via the Expired badge, the red last-date and the Closed application
     status — never by fading, blurring, greying or disabling the card. */
  opacity: 1;
}

/* Three-column grid: Vacancy Badge | Post Details | Action Buttons */
.job-row-grid {
  display: grid;
  grid-template-columns: auto 1px 1fr 1px auto;
  gap: 0;
  align-items: center;
}

.job-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.job-org-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

.category-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.category-badge.tech { background: rgba(6,182,212,0.15); color: #06b6d4; }
.category-badge.nontech { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.category-badge.medical { background: rgba(236,72,153,0.15); color: #ec4899; }

.new-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent);
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.job-post-name {
  font-size: 20px;
  color: var(--muted);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.job-info-col {
  padding: 4px 16px;
}

.job-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.job-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.job-meta-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.job-meta-item.expired-date {
  color: var(--red);
  font-weight: 600;
}

/* --- Action Buttons Column --- */
.job-actions-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 140px;
  padding: 4px 0 4px 16px;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}

.btn-action svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* View Details button - orange/primary */
.btn-details {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-details:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

/* Notification button - teal/blue */
.btn-notice {
  background: rgba(6, 182, 212, 0.12);
  color: #06b6d4;
  border-color: rgba(6, 182, 212, 0.25);
}

.btn-notice:hover {
  background: rgba(6, 182, 212, 0.22);
  border-color: rgba(6, 182, 212, 0.5);
  color: #22d3ee;
  transform: translateY(-1px);
}

/* Apply button - green */
.btn-apply {
  background: var(--green);
  color: white;
  border-color: var(--green);
}

.btn-apply:hover {
  background: #059669;
  border-color: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Share button - violet */
.btn-share {
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
  border-color: rgba(139, 92, 246, 0.25);
}

.btn-share:hover {
  background: rgba(139, 92, 246, 0.22);
  border-color: rgba(139, 92, 246, 0.5);
  color: #c4b5fd;
  transform: translateY(-1px);
}

/* Disabled button */
.btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--bg-secondary);
  color: var(--muted);
  border: 1px solid var(--border);
}

.btn-action:hover,
.btn-details:hover,
.btn-orange:hover,
.btn-apply:hover,
.btn-notice:hover,
.btn-share:hover {
    color: #fff !important;
}

.btn-details:hover svg,
.btn-orange:hover svg,
.btn-apply:hover svg {
    color: #fff !important;
    fill: currentColor;
}

/* Mobile: stack job row grid vertically, badge becomes inline, buttons become horizontal */
@media (max-width: 639px) {
  .job-row-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .job-row-divider {
    display: none;
  }
  .job-vac-col {
    justify-content: flex-start;
  }
  .job-vacancy-badge {
    flex-direction: row;
    gap: 6px;
    padding: 5px 12px;
    min-width: unset;
  }
  .job-vacancy-badge-label {
    margin-bottom: 0;
  }
  .job-vacancy-badge-count {
    font-size: 18px;
  }
  .job-info-col {
    padding: 0;
  }
  .job-actions-col {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: unset;
    padding: 0;
  }
  .btn-action {
    flex: 1;
    min-width: 0;
    justify-content: center;
    padding: 7px 8px;
    font-size: 11px;
  }
}

/* Tablet: slightly narrower action column */
@media (min-width: 640px) and (max-width: 768px) {
  .job-actions-col {
    min-width: 120px;
    padding: 4px 0 4px 12px;
  }
  .btn-action {
    padding: 6px 10px;
    font-size: 11px;
  }
  .job-vacancy-badge {
    padding: 6px 12px;
    min-width: 70px;
  }
  .job-vacancy-badge-count {
    font-size: 20px;
  }
  .job-info-col {
    padding: 4px 12px;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}

.btn svg {
  width: 14px;
  height: 14px;
}

.btn-outline {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.btn-green {
  background: var(--green);
  color: white;
  border-color: var(--green);
}

.btn-green:hover {
  background: #059669;
  border-color: #059669;
}

.btn-orange {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-orange:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 6px 10px;
}

.btn-ghost:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.btn-sm {
  padding: 4px 10px;
  font-size: 11px;
}

/* --- Notice Board --- */
.notice-board-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: 155px;
}

@media (max-width: 1023px) {
  .notice-board-card {
    position: static;
  }
}

.notice-board-header {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: white;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.notice-board-header svg {
  width: 18px;
  height: 18px;
}

.notice-board-body {
  max-height: 480px;
  overflow-y: auto;
  padding: 8px 0;
}

.notice-item {
  padding: 12px 16px;
  border-left: 3px solid transparent;
  transition: background 0.15s;
  cursor: pointer;
}

.notice-item:hover {
  background: var(--accent-soft);
}

.notice-item.pinned {
  border-left-color: var(--accent);
  background: rgba(249, 115, 22, 0.04);
}

.notice-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.notice-pin-icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
}

.notice-new-flag {
  margin-left: auto;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}

.notice-org {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-post {
  font-size: 12px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
  line-height: 1.4;
}

.notice-date {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.notice-date.exp {
  color: var(--red);
}

.notice-date svg {
  width: 12px;
  height: 12px;
}

/* ============================================
   INFO SECTIONS (3 Columns)
   ============================================ */
.info-sections {
  padding-bottom: 32px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 767px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}

.info-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.info-card-header {
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}

.info-card-header svg {
  width: 18px;
  height: 18px;
}

.info-card-header.green { color: var(--green); background: var(--green-soft); }
.info-card-header.amber { color: var(--amber); background: var(--amber-soft); }
.info-card-header.orange { color: var(--accent); background: var(--accent-soft); }

/* ============================================
   CATEGORY CONTENT SECTIONS
   ============================================ */
.cat-content-section {
  display: none;
  margin-bottom: 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}

.cat-content-section.visible {
  display: block;
}

.cat-content-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  color: var(--cyan);
  background: var(--cyan-soft, rgba(6,182,212,0.08));
}

.cat-content-header svg {
  width: 18px;
  height: 18px;
}

.cat-content-header.rose { color: #f43f5e; background: rgba(244,63,94,0.08); }
.cat-content-header.violet { color: #8b5cf6; background: rgba(139,92,246,0.08); }
.cat-content-header.sky { color: #0ea5e9; background: rgba(14,165,233,0.08); }
.cat-content-header.lime { color: #84cc16; background: rgba(132,204,22,0.08); }
.cat-content-header.fuchsia { color: #d946ef; background: rgba(217,70,239,0.08); }
.cat-content-header.teal { color: #14b8a6; background: rgba(20,184,166,0.08); }
.cat-content-header.yellow { color: #eab308; background: rgba(234,179,8,0.08); }
.cat-content-header.pink { color: #ec4899; background: rgba(236,72,153,0.08); }
.cat-content-header.red { color: #ef4444; background: rgba(239,68,68,0.08); }
.cat-content-header.emerald { color: #10b981; background: rgba(16,185,129,0.08); }
.cat-content-header.cyan { color: #06b6d4; background: rgba(6,182,212,0.08); }

html.light .cat-content-header { background: transparent; }
html.light .cat-content-header.rose { background: rgba(244,63,94,0.06); }
html.light .cat-content-header.violet { background: rgba(139,92,246,0.06); }
html.light .cat-content-header.sky { background: rgba(14,165,233,0.06); }
html.light .cat-content-header.lime { background: rgba(132,204,22,0.06); }
html.light .cat-content-header.fuchsia { background: rgba(217,70,239,0.06); }
html.light .cat-content-header.teal { background: rgba(20,184,166,0.06); }
html.light .cat-content-header.yellow { background: rgba(234,179,8,0.06); }
html.light .cat-content-header.pink { background: rgba(236,72,153,0.06); }
html.light .cat-content-header.red { background: rgba(239,68,68,0.06); }
html.light .cat-content-header.emerald { background: rgba(16,185,129,0.06); }
html.light .cat-content-header.cyan { background: rgba(6,182,212,0.06); }

/* Count badge inside cat-content-header */
.cat-content-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-left: auto;
}

.cat-content-body {
  padding: 4px 0;
  max-height: 500px;
  overflow-y: auto;
}

/* Cat Content Item (reuses notice-item-like style) */
.cat-content-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
}

.cat-content-item:last-child {
  border-bottom: none;
}

.cat-content-item:hover {
  background: var(--card-hover);
}

.cat-content-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.cat-content-item-info {
  flex: 1;
  min-width: 0;
}

.cat-content-item-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.cat-content-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.cat-content-item-org {
  font-size: 11px;
  color: var(--muted);
}

.cat-content-item-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}

.cat-content-item-date {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}

.cat-content-item-vac {
  font-size: 11px;
  color: var(--green);
  font-weight: 600;
}

.cat-content-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* Linked live vacancies group (inside side-panel sections) */
.cat-linked-group {
  margin-bottom: 6px;
}

.cat-linked-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 4px 8px;
}

.cat-linked-label svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.cat-linked-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 4px;
}

/* Live vacancy item — clickable, opens job modal */
.cat-content-item-live {
  cursor: pointer;
  border-left: 2px solid var(--accent);
}

.cat-content-item-live:hover {
  border-left-color: var(--accent);
}

.cat-live-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fff;
  background: var(--accent);
  border-radius: 9999px;
  vertical-align: middle;
}

.cat-type-tag {
  background: rgba(249, 115, 22, 0.15) !important;
  color: var(--accent) !important;
  text-transform: capitalize;
}

.info-card-body {
  padding: 12px 0;
  max-height: 320px;
  overflow-y: auto;
}

.info-item {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item:hover {
  background: var(--accent-soft);
}

.info-item-org {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.info-item-post {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.info-item-date {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.info-card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.info-view-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
}

.info-view-all:hover {
  color: var(--accent-hover);
}

.info-view-all svg {
  width: 14px;
  height: 14px;
}

/* ============================================
   JOB DETAIL MODAL
   ============================================ */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-overlay.active {
  display: flex;
}

.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 768px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-xl);
}

@media (max-width: 639px) {
  .modal {
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
    max-width: 100%;
  }
  .modal-overlay {
    padding: 0;
  }
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 10;
}

.modal-close:hover {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red);
}

.modal-close svg {
  width: 18px;
  height: 18px;
}

.modal-header-section {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;   /* stamp always pushed to the right edge */
  gap: 12px;
  padding: 28px 24px 16px;
  border-bottom: 1px solid var(--border);
}

/* Job title block (org name + post name) — takes all available space so the
   "Last Updated" stamp sits flush right. */
.modal-header-text {
  flex: 1 1 auto;
  min-width: 0;                     /* allows text truncation in a flex child */
}

/* v5 — "Last Updated" stamp, right side of the job details header.
   Uses flexbox (not absolute positioning) so it's always on the right at
   every screen size. Shown only when the job carries a usable
   updatedAt/createdAt timestamp; legacy records render no stamp (omitted in JS). */
.modal-last-updated {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 45%;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  cursor: default;
  margin-top: 2px;                  /* visually align with the first line of text */
}

.modal-last-updated-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.modal-last-updated-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* In the modal POPUP the top-right corner has the close (X) button. Add
   right padding to the header so the stamp never slides under it. */
.modal-overlay .modal-header-section {
  padding-right: 52px;
}

.modal-org {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 4px;
  line-height: 1.4;
  /* Long institution names (with commas and slashes) should wrap on word
     boundaries and never overflow or break mid-word on narrow screens. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.modal-post {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: normal;
}

/* On very small screens, let the stamp shrink and wrap gracefully. */
@media (max-width: 639px) {
  .modal-last-updated {
    max-width: 60%;
    font-size: 10px;
  }
}

/* Quick Stats */
.modal-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 639px) {
  .modal-quick-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.quick-stat {
  background: var(--bg);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.quick-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.quick-stat-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

/* Modal Section */
.modal-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-section:last-of-type {
  border-bottom: none;
}

.modal-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== View Details modal tabs (Overview / Eligibility / Extra Information) ===== */
.modal-tabs {
  display: flex;
  gap: 4px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--card);
  padding: 4px 0 0;
  margin: 4px 0 18px;
  border-bottom: 1px solid var(--border);
}
.modal-tab {
  flex: 1;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  padding: 11px 10px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  white-space: nowrap;
}
.modal-tab:hover { color: var(--text); }
.modal-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.modal-tab-pane { display: none; }
.modal-tab-pane.active { display: block; animation: modalTabFade .18s ease; }
@keyframes modalTabFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
  .modal-tab { font-size: 13px; padding: 10px 6px 11px; }
}

.modal-section-title svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

/* Info Grid */
.info-text-block {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.info-text-block p {
  margin-bottom: 8px;
}

.info-text-block .info-label {
  font-weight: 600;
  color: var(--text);
}

/* Tables */
.modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.modal-table th {
  text-align: left;
  padding: 8px 12px;
  background: var(--bg);
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
}

.modal-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: top;
  line-height: 1.5;
}

.modal-table tr:last-child td {
  border-bottom: none;
}

.modal-table .post-name-cell {
  font-weight: 600;
  color: var(--text);
  white-space: normal;
  min-width: 140px;
}

/* ==========================================================
   IMPORTANT INFORMATION — description block + meta rows
   ========================================================== */
.info-description-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.info-description-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}

.info-description-label svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.info-description-body {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.info-description-body p {
  margin: 0;
}

.info-description-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-description-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.info-description-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.info-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.info-meta-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.info-meta-row .info-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.info-meta-row .info-value {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
}

/* ==========================================================
   ELIGIBILITY TABLE — decorated vacancy badge + responsive
   ========================================================== */
.modal-table-wrap {
  width: 100%;
}

.post-name-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 8px;
  word-break: break-word;
}

/* Post name row: post name + per-post share button.
   The share button opens the share popup pre-filled with THIS particular
   post's details (post name, count, qualification, pay level). */
.post-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.post-name-row .post-name-text {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* Per-post share button — compact, subtle, sits at the top-right of each
   Eligibility Criteria row. */
.btn-post-share {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  line-height: 1;
  white-space: nowrap;
}

.btn-post-share svg {
  width: 13px;
  height: 13px;
}

.btn-post-share:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn-post-share:active {
  transform: scale(0.96);
}

/* On very narrow screens hide the "Share" text label so only the icon shows. */
@media (max-width: 480px) {
  .btn-post-share-label {
    display: none;
  }
  .btn-post-share {
    padding: 6px;
  }
}

/* Highlight ring flashed on a post row when the page is opened via a
   per-post deep-link (?job=<id>&post=<index>) so the recipient can see
   exactly which post was shared. */
.post-deeplink-highlight {
  animation: post-deeplink-flash 1.1s ease-out 2;
  border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.55);
}

@keyframes post-deeplink-flash {
  0%   { background-color: rgba(249, 115, 22, 0.22); }
  50%  { background-color: rgba(249, 115, 22, 0.08); }
  100% { background-color: transparent; }
}

/* Decorated vacancy badge — big & prominent */
.post-vacancy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  border-radius: 10px;
  padding: 7px 12px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.post-vacancy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.post-vacancy-icon svg {
  width: 12px;
  height: 12px;
  color: #fff;
}

.post-vacancy-count {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.3px;
}

.post-vacancy-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.92;
}

/* Descriptive (non-numeric) count variant — e.g. "Dynamic (based on service requirements)" */
.post-vacancy-badge-text {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px dashed var(--border-strong);
  box-shadow: none;
  max-width: 100%;
}

.post-vacancy-count-text {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1px;
  white-space: normal;
  word-break: break-word;
}

.post-reservation-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.res-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--accent-soft);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 6px;
  padding: 2px 7px;
  line-height: 1.5;
}

.res-chip b {
  color: var(--accent);
  font-weight: 700;
}

/* Qualification column — wraps naturally, no horizontal scroll */
.qual-cell {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 200px;
}

.qual-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.qual-line:last-child {
  margin-bottom: 0;
}

.qual-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 1px 6px;
  margin-bottom: 3px;
}

.qual-val {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.qual-empty {
  color: var(--muted);
}

/* === Discipline highlight — makes the Discipline row stand out from
   Essential / Desired so recruiters/job-seekers can scan it instantly. === */
.qual-line-discipline {
  padding: 8px 10px;
  margin-bottom: 12px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  gap: 4px;
}

.qual-tag-discipline {
  color: #ffffff;
  background: var(--accent);
  letter-spacing: 0.5px;
  padding: 2px 8px;
  box-shadow: 0 1px 2px rgba(249, 115, 22, 0.35);
}

.qual-val-discipline {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13.5px;
  letter-spacing: 0.1px;
}

/* Pay Level (now merged into the Post column) */
.post-paylevel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.post-paylevel-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.paylevel-pill {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 8px;
  padding: 5px 10px;
  line-height: 1.4;
  word-break: break-word;
}

/* Responsive stacked-card table on mobile (no horizontal scroll) */
@media (max-width: 639px) {
  .modal-table-responsive {
    border: none;
  }

  .modal-table-responsive thead {
    display: none;
  }

  .modal-table-responsive,
  .modal-table-responsive tbody,
  .modal-table-responsive tr,
  .modal-table-responsive td {
    display: block;
    width: 100%;
  }

  .modal-table-responsive tr {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 6px 4px;
    overflow: hidden;
  }

  .modal-table-responsive tr:last-child {
    margin-bottom: 0;
  }

  .modal-table-responsive td {
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .modal-table-responsive tr:last-child td:last-child {
    border-bottom: none;
  }

  .modal-table-responsive td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  /* On mobile the pay level sits inside the Post card, fully visible */
  .post-paylevel {
    margin-top: 6px;
  }

  .qual-cell {
    min-width: 0;
  }

  .post-name-cell {
    min-width: 0;
  }
}

/* ==========================================================
   EXAM PATTERN & SELECTION PROCESS — unified renderer
   ========================================================== */
.exam-flow {
  margin-bottom: 14px;
}

.exam-flow-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}

.exam-flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
}

.exam-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.exam-flow-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.exam-flow-step-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}

.exam-flow-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  align-self: center;
}

.exam-flow-arrow svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 639px) {
  .exam-flow-steps {
    flex-direction: column;
    align-items: stretch;
  }

  .exam-flow-step {
    width: 100%;
  }

  .exam-flow-arrow {
    transform: rotate(90deg);
    align-self: center;
    padding: 2px 0;
  }
}

/* Exam stats grid (questions / marks / duration) */
.exam-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 4px 0 12px;
}

@media (max-width: 639px) {
  .exam-stats-grid {
    grid-template-columns: 1fr;
  }
}

.exam-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.exam-stat-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.2;
  margin-bottom: 4px;
  word-break: break-word;
}

.exam-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.exam-pattern-test-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  padding: 6px 12px;
  background: var(--accent-soft);
  border-radius: 8px;
  display: inline-block;
}

.exam-marking-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--amber-soft);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.exam-marking-note svg {
  width: 15px;
  height: 15px;
  color: var(--amber);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Multi-stage exam pattern (e.g. SSC CGL Tier-I + Tier-II) */
.exam-stages-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 12px;
}

.exam-stage-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px;
}

.exam-stage-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.exam-stage-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.exam-stage-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.exam-stage-mode {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.exam-stage-block .exam-stats-grid {
  margin-top: 0;
  margin-bottom: 10px;
}

.exam-stage-block .modal-table-wrap {
  margin-top: 4px;
}

/* Interview-only callout */
.exam-pattern-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 16px;
}

.exam-pattern-callout-muted {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
}

.exam-pattern-callout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.exam-pattern-callout-muted .exam-pattern-callout-icon {
  background: var(--bg-secondary);
  color: var(--muted);
}

.exam-pattern-callout-icon svg {
  width: 18px;
  height: 18px;
}

.exam-pattern-callout-body {
  flex: 1;
  min-width: 0;
}

.exam-pattern-callout-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.exam-pattern-callout-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Subjects breakdown table — reuses modal-table + responsive stack */
.exam-subjects-table .subj-name-cell {
  font-weight: 600;
  color: var(--text);
  white-space: normal;
  word-break: break-word;
}

/* Subject chip list — shown when subjects have no questions/marks data
   (e.g. Agniveervayu subjects: ["English","Mathematics","Physics",...]) */
.exam-subjects-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.exam-subject-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(249, 115, 22, 0.25);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

/* Date Cards */
.date-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 639px) {
  .date-cards-grid {
    grid-template-columns: 1fr;
  }
}

.date-card {
  background: var(--bg);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.date-card-icon svg {
  width: 16px;
  height: 16px;
}

.date-card-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.date-card-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* Fee Cards */
.fee-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 639px) {
  .fee-cards-grid {
    grid-template-columns: 1fr;
  }
}

.fee-card {
  background: var(--bg);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  border: 1px solid var(--border);
}

.fee-card-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.fee-card-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

/* Fee conditions / notes (rendered under the fee cards) */
.fee-notes-list {
  grid-column: 1 / -1;
  list-style: none;
  margin: 6px 0 0;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fee-notes-list li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.fee-notes-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.fee-notes-single {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Selection Process */
.selection-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: selection;
}

.selection-list li {
  counter-increment: selection;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
}

.selection-list li::before {
  content: counter(selection);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ==========================================================
   How To Apply — mode pill, blocks, lists, notes, address
   ========================================================== */

/* Mode / Type pill */
.apply-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green);
  padding: 8px 16px;
  background: var(--green-soft);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 999px;
  margin-bottom: 16px;
}

.apply-mode svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.apply-mode-offline {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(249, 115, 22, 0.25);
}

/* Generic labeled block inside How To Apply */
.apply-block {
  margin-bottom: 16px;
}

.apply-block:last-child {
  margin-bottom: 0;
}

.apply-block-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.apply-block-label svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
}

.apply-plain-value {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

/* Steps list reuses the numbered .selection-list look, tuned for links inside */
.apply-steps li a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Bullet lists: required forms, enclosures, rules */
.apply-bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
}

.apply-bullet-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.apply-bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* Website / link row */
.apply-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  word-break: break-all;
  background: var(--accent-soft);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
}

.apply-link svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.apply-link:hover {
  background: var(--accent-hover);
  color: #fff;
  border-color: var(--accent-hover);
}

.apply-link:hover svg {
  color: #fff;
}

/* Submission address */
.apply-address-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

.apply-address-card svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--accent);
  margin-top: 2px;
}

/* Highlighted note rows: envelope superscription, last date */
.apply-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  line-height: 1.55;
}

.apply-note:last-child {
  margin-bottom: 0;
}

.apply-note strong {
  color: var(--text);
}

.apply-note svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--accent);
  margin-top: 1px;
}

.apply-note-deadline {
  border-left-color: var(--red);
  background: var(--red-soft);
}

.apply-note-deadline svg {
  color: var(--red);
}

/* Legacy title/value card layout (still supported for older records) */
.apply-container {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.apply-card {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.apply-card:last-child {
  border-bottom: none;
}

.apply-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.apply-value {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.55;
  white-space: pre-line;
}

/* Important Links */
.important-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
  text-decoration: none;
  color: #60a5fa;
  font-size: 18px;
  font-weight: 700;
}
.important-link-row:hover {
  color: #93c5fd;
  text-decoration: underline;
}

.important-link-row:last-child {
  margin-bottom: 0;
}

.important-link-row:hover {
  background: var(--accent-soft);
}

.important-link-row svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
}

.important-link-row:hover svg {
  color: var(--accent);
}

/* Modal Footer */
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 639px) {
  .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--card);
    padding: 12px 16px;
  }
}

/* ============================================
   INLINE VIEW ALL SECTIONS
   ============================================ */
.viewall-inline-section {
  display: none;
  margin-bottom: 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}

.viewall-inline-section.visible {
  display: block;
}

.viewall-inline-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  color: var(--green);
  background: rgba(16,185,129,0.08);
  position: relative;
}

.viewall-inline-header svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.viewall-inline-header.green { color: #10b981; background: rgba(16,185,129,0.08); }
.viewall-inline-header.amber { color: #f59e0b; background: rgba(245,158,11,0.08); }
.viewall-inline-header.orange { color: #f97316; background: rgba(249,115,22,0.08); }

html.light .viewall-inline-header { background: transparent; }
html.light .viewall-inline-header.green { background: rgba(16,185,129,0.06); }
html.light .viewall-inline-header.amber { background: rgba(245,158,11,0.06); }
html.light .viewall-inline-header.orange { background: rgba(249,115,22,0.06); }

.viewall-inline-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-left: auto;
  margin-right: 8px;
}

.viewall-inline-close {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--accent-soft);
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.viewall-inline-close:hover {
  background: var(--red-soft);
  color: var(--red);
}

.viewall-inline-body {
  padding: 4px 0;
  max-height: 600px;
  overflow-y: auto;
}

/* Items inside inline view-all — same style as cat-content items */
.viewall-inline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
  gap: 12px;
}

.viewall-inline-item:last-child {
  border-bottom: none;
}

.viewall-inline-item:hover {
  background: var(--accent-soft);
}

.viewall-inline-item-info {
  flex: 1;
  min-width: 0;
}

.viewall-inline-item-org {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewall-inline-item-post {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.viewall-inline-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.viewall-inline-item-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.viewall-inline-item-badge.tech { background: rgba(6,182,212,0.15); color: #06b6d4; }
.viewall-inline-item-badge.nontech { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.viewall-inline-item-badge.medical { background: rgba(236,72,153,0.15); color: #ec4899; }

.viewall-inline-item-date {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.viewall-inline-item-date.expired {
  color: var(--red);
  font-weight: 600;
}

.viewall-inline-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 639px) {
  .viewall-inline-item {
    padding: 10px 16px;
  }
}

/* ============================================
   ABOUT SECTION
   ============================================ */
.about-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-block h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.about-block p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.about-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-block ul li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  padding-left: 16px;
  position: relative;
}

.about-block ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.about-block ul li strong {
  color: var(--text);
}

.about-section .cat-content-body {
  max-height: none;
}

/* ============================================
   AI CHATBOT
   ============================================ */
.chatbot-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4);
  transition: all 0.3s;
  z-index: 500;
}

.chatbot-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 28px rgba(249, 115, 22, 0.5);
}

.chatbot-fab.hidden {
  display: none;
}

.chatbot-window {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: 500px;
  height: 70vh;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  z-index: 500;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.chatbot-window.active {
  display: flex;
}

@media (max-width: 639px) {
  .chatbot-window {
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    height: 85vh;
    border-radius: 16px 16px 0 0;
  }
}

.chatbot-header {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: white;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.chatbot-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chatbot-header-left svg {
  width: 22px;
  height: 22px;
}

.chatbot-header-text h3 {
  font-size: 14px;
  font-weight: 700;
}

.chatbot-header-text p {
  font-size: 11px;
  opacity: 0.85;
}

.chatbot-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.chatbot-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.chatbot-close svg {
  width: 16px;
  height: 16px;
}

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-message {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.chat-message.bot {
  align-self: flex-start;
  background: var(--bg);
  color: var(--text-secondary);
  border-bottom-left-radius: 4px;
}

.chat-message.user {
  align-self: flex-end;
  background: var(--accent);
  color: white;
  border-bottom-right-radius: 4px;
}

/* Typing Indicator */
.typing-indicator {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 10px 14px;
  align-self: flex-start;
  background: var(--bg);
  border-radius: 12px;
  border-bottom-left-radius: 4px;
}

.typing-indicator span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: typing-bounce 1.4s ease-in-out infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

/* Chat Result Card */
.chat-result-card {
  /* MUST be block: this element is an <a> that contains block-level children
     (status table, meta rows). As an inline element it cannot contain them,
     which made the borders bleed and the "View Details" link overlap the
     next card. */
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  overflow: hidden;          /* contain children, stop bleed */
  transition: border-color 0.2s, transform 0.15s;
}

.chat-result-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* Expired-exam card: muted appearance with a red "Expired" tag */
.chat-result-card.is-expired {
  opacity: 0.78;
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.03);
}
.chat-result-card.is-expired:hover {
  border-color: var(--red);
  opacity: 1;
}

.chat-result-tag {
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.chat-result-tag-expired {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.chat-result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-result-org {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-result-cat {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.chat-result-cat.tech { background: rgba(6,182,212,0.15); color: #06b6d4; }
.chat-result-cat.nontech { background: rgba(249,115,22,0.15); color: #f97316; }
.chat-result-cat.medical { background: rgba(236,72,153,0.15); color: #ec4899; }

.chat-result-name {
  font-size: 12px;
  color: var(--text);
  margin: 3px 0;
  line-height: 1.35;
}

.chat-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 10.5px;
  color: var(--muted);
}

.chat-result-meta .exp { color: var(--red); }

.chat-result-date {
  font-size: 11px;
  color: var(--muted);
}

.chat-result-btn {
  margin-top: 6px;
  display: inline-block;
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}

.chat-more {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* Quick-reply chips shown inside chatbot replies */
.chat-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.chat-quick-reply {
  padding: 5px 11px;
  border-radius: 14px;
  font-size: 11.5px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  font-weight: 500;
}

.chat-quick-reply:hover {
  background: var(--accent);
  color: #fff;
}

/* Quick Pills */
.chatbot-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 16px 10px;
  flex-shrink: 0;
}

.chat-pill {
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.chat-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Chat Input */
.chatbot-input-area {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.chatbot-input {
  flex: 1;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.chatbot-input:focus {
  border-color: var(--accent);
}

.chatbot-input::placeholder {
  color: var(--muted);
}

.chatbot-send {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}

.chatbot-send:hover {
  background: var(--accent-hover);
}

.chatbot-send svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  margin-top: auto;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-brand-icon {
  width: 28px;
  height: 28px;
  background: var(--accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}

.footer-brand-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}

.footer-brand-name span {
  color: var(--accent);
}

.footer-copyright {
  font-size: 12px;
  color: var(--muted);
  margin-left: 12px;
}

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 13px;
  color: var(--muted);
  transition: color 0.2s;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--accent);
}

@media (max-width: 639px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-copyright {
    margin-left: 0;
    margin-top: 4px;
  }
}

/* ============================================
   UTILITY / ANIMATION
   ============================================ */
.no-results {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}

.no-results svg {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  opacity: 0.5;
}

.no-results p {
  font-size: 14px;
}

.fade-in {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Section Title */
.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

/* Responsive modal adjustments */
@media (max-width: 639px) {
  .modal-header-section {
    padding: 18px 16px 12px;
  }

  .modal-org {
    font-size: 13px;
    line-height: 1.35;
  }

  .modal-section {
    padding: 16px;
  }

  .modal-quick-stats {
    padding: 12px 16px;
  }

  .modal-footer {
    padding: 12px 16px;
  }

  .modal-post {
    font-size: 17px;
  }

  .fee-cards-grid {
    grid-template-columns: 1fr;
  }

  .date-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   SHARE POST MODAL
   ================================================================ */
.share-overlay .share-modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  max-width: 460px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-xl);
  padding: 28px 24px 22px;
  animation: share-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes share-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 639px) {
  .share-overlay .share-modal {
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
    max-width: 100%;
    padding: 24px 18px 20px;
  }
  .share-overlay {
    padding: 0;
  }
}

/* Header row: icon + title */
.share-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  padding-right: 36px; /* leave room for the close button */
}

.share-header-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-header-text h3 {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.share-header-text p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Post preview card */
.share-post-preview {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 20px;
}

.share-post-org {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 3px;
}

.share-post-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 6px;
}

.share-post-meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* Per-post detail chips — shown only when sharing a PARTICULAR post.
   Each chip shows a label (Vacancies / Qualification / Pay Level / Location)
   and its value. */
.share-post-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.share-detail-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 9px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 0;
  flex: 1 1 110px;
  max-width: 100%;
}

.share-detail-chip-k {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.share-detail-chip-v {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}

/* Section titles */
.share-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 10px;
}

/* Social share grid */
.share-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}

@media (max-width: 639px) {
  .share-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
}

.share-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  position: relative;
  overflow: hidden;
}

.share-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tile, var(--accent));
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 0;
}

.share-tile > * {
  position: relative;
  z-index: 1;
}

.share-tile:hover {
  transform: translateY(-2px);
  border-color: var(--tile, var(--accent));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  color: #fff;
}

.share-tile:hover::before {
  opacity: 1;
}

.share-tile:active {
  transform: translateY(0);
}

.share-tile-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tile, var(--accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.share-tile:hover .share-tile-icon {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  transform: scale(1.06);
}

.share-tile-icon svg {
  width: 18px;
  height: 18px;
}

.share-tile-label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

/* Copy link row */
.share-copy-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 14px;
}

.share-link-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.share-link-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.share-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

.share-copy-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}

.share-copy-btn.copied {
  background: var(--green);
  border-color: var(--green);
}

.share-copy-btn svg {
  width: 14px;
  height: 14px;
}

/* Native share button (mobile) */
.share-native-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.share-native-btn:hover {
  background: var(--card-hover);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.share-native-btn svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
/* =====================================================================
   DYNAMIC JOB DETAILS PAGE (details.php)
   Scoped to .details-page so the in-page modal is completely unaffected.
   ===================================================================== */

/* ---- 1. Remove ALL internal scrolling ----
   The page reuses the modal's content styles, but on a real page nothing
   should scroll inside a card — the user scrolls the page once. */
.details-page .modal,
.details-page #job-detail-root,
.details-page .modal-tab-pane,
.details-page .modal-section,
.details-page .modal-table-wrap,
.details-page .info-text-block,
.details-page .steps-list,
.details-page .exam-stages,
.details-page .date-cards-grid,
.details-page .fee-cards-grid {
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  height: auto !important;
}
/* Tables may still scroll sideways on small screens (that's horizontal,
   not the vertical clipping we're removing). */
.details-page .modal-table-wrap { overflow-x: auto !important; }

.details-page .modal {
  border: none;
  box-shadow: none;
  background: transparent;
  max-width: 100%;
}

/* ---- 4. Back to top ---- */
.jd-top {
  position: fixed;
  right: 18px;
  bottom: 84px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  display: none;
  align-items: center; justify-content: center;
  box-shadow: var(--shadow-xl);
  z-index: 60;
}
.jd-top.show { display: flex; }
@media (min-width: 640px) { .jd-top { bottom: 24px; } }

/* ---- 5. Prev / Next navigation ---- */

/* ---- 7. Print stylesheet ---- */
@media print {
  .header, .side-panel, .jd-top,   .details-page .modal-tab-pane + .modal-tab-pane { margin-top: 14px; }
  body { background: #fff !important; color: #000 !important; }
  .modal-section { break-inside: avoid; page-break-inside: avoid; }
  a[href]:after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
  .jd-print-mark { display: block !important; text-align: center;
    border-bottom: 2px solid #f97316; margin-bottom: 14px; padding-bottom: 8px; }
  .jd-print-mark .pm-brand { font-size: 20px; font-weight: 800; }
  .jd-print-mark .pm-url { font-size: 11px; color: #666; }
}
.jd-print-mark { display: none; }

/* ---- 8. Clickable job card affordance ---- */
.job-card-clickable { cursor: pointer; }
.job-title-link { text-decoration: none; color: inherit; display: block; }
.job-title-link:hover { color: var(--accent); }



/* ---- Ad slots (site-wide). Empty slots take no space at all. ---- */
.jm-ad, .jd-ad { text-align: center; }
.jm-ad:empty, .jd-ad:empty { display: none !important; margin: 0 !important; padding: 0 !important; }
.jm-ad-label {
  display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); opacity: .7; margin-bottom: 4px;
}

/* =====================================================================
   JOB DETAILS PAGE — status note, ad slots, similar-jobs cards
   ===================================================================== */


/* Ad slots — take zero space until you put an ad in them */
.jd-ad { margin: 0 0 18px; text-align: center; }
.jd-ad:empty { display: none !important; margin: 0 !important; }
.jd-ad-bottom { margin-top: 26px; }

/* Similar jobs */

/* =====================================================================
   QUICK STATS — closed cards with full borders, placed above the tabs
   ===================================================================== */

/* Give each stat a complete border so the card reads as a closed box
   rather than an open background block. */
.quick-stat {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 66px;
}
.quick-stat-value { line-height: 1.25; }
.quick-stat-label {
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
}

/* On the details page the stats sit above the tab bar. Give the strip a
   little more breathing room and its own separation from the tabs. */
.details-page .modal-quick-stats {
  padding: 4px 0 18px;
  border-bottom: none;
}
.details-page .quick-stat {
  background: var(--card);
  box-shadow: 0 1px 2px rgba(16,32,48,.04);
}
.details-page .quick-stat:hover { border-color: rgba(249,115,22,.45); }

/* Tabs sit directly under the stats — keep a clean divider between them. */
.details-page .modal-tabs { margin-top: 0; }

/* The modal header (org + post) also gets edge padding removed on the page,
   since the page already provides its own gutters. The details page has NO
   close button, so we don't need the extra right padding the modal popup uses. */
.details-page .modal-header-section { padding-left: 0; padding-right: 0; }
.details-page .modal-quick-stats { padding-left: 0; padding-right: 0; }
.details-page .modal-section { padding-left: 0; padding-right: 0; }

/* Three stats look better as 3 columns; four as 4. Let it flow naturally
   instead of forcing 4 fixed columns that leave a gap. */
.modal-quick-stats {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
@media (max-width: 639px) {
  .modal-quick-stats { grid-template-columns: repeat(2, 1fr); }
  .quick-stat { min-height: 60px; }
}

/* =====================================================================
   DETAILS PAGE — bordered card + width alignment with Similar Jobs
   ===================================================================== */

/* One shared width for every block on the page, so the card, the Similar
   Jobs grid and the prev/next nav all line up on the same left/right edge. */
/* Page container width — shared by the page and its card. */
.details-page {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* The bordered card holding the job body. */
.jd-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 18px 20px 22px;
  box-shadow: 0 1px 3px rgba(16, 32, 48, .05);
}

/* Inside the card the modal wrapper must not add its own frame or padding. */
.details-page .jd-card .modal {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  max-width: 100%;
}

/* Sticky tabs need the card's background so rows don't show through. */
.details-page .jd-card .modal-tabs {
  background: var(--card);
}

/* Mobile gutters for the page container. */
@media (max-width: 639px) {
  .details-page { padding-left: 12px; padding-right: 12px; }
}

/* =====================================================================
   DETAILS PAGE TABS — prominent, but NOT sticky
   ===================================================================== */
.details-page .modal-tabs {
  position: static;          /* explicitly cancel the modal's sticky */
  top: auto;
  z-index: auto;
  background: transparent;
  gap: 6px;
  padding: 0;
  margin: 0 0 18px;          /* tabs now lead the card, above the org name */
  border-bottom: 2px solid var(--border);
}

/* Larger, clearer tab targets so the three sections are obvious. */
.details-page .modal-tab {
  font-size: 15px;
  font-weight: 700;
  padding: 12px 18px 13px;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;       /* sit the underline on the container border */
  border-radius: 8px 8px 0 0;
  transition: color .15s, background .15s, border-color .15s;
}
.details-page .modal-tab:hover {
  color: var(--text);
  background: var(--bg);
}
.details-page .modal-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}

@media (max-width: 639px) {
  .details-page .modal-tab { font-size: 13px; padding: 11px 8px 12px; }
}

/* =====================================================================
   RECRUITMENT STATUS BADGES — shared by cards, chatbot, search, details
   ===================================================================== */
.status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.status-badge.on {
  color: #10b981;
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.08);
}
.status-badge .sb-icon { font-size: 10px; }
.status-badges.compact .sb-label { display: none; }
.status-badges.compact .status-badge { padding: 4px 7px; }

/* ---- Chatbot status summary ---- */
.chat-status {
  margin: 8px 0 4px;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg);
}
.chat-status-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  font-size: 11.5px;
  border-bottom: 1px solid var(--border);
}
.chat-status-row:last-child { border-bottom: none; }
.chat-status-row span:first-child { color: var(--muted); }
.chat-status-row span:last-child { font-weight: 600; }

/* ---- Chatbot direct answer + CTA ---- */
.chat-answer {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.chat-cta { margin-top: 9px; }
.chat-cta-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
}
.chat-cta-btn:hover { background: var(--accent-hover); }

/* =====================================================================
   CHATBOT — smaller, collapsible panel on phones
   ===================================================================== */
@media (max-width: 639px) {
  .chatbot-window {
    /* Was 85vh full-bleed, which covered the whole screen. */
    height: 62vh;
    max-height: 62vh;
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    right: 8px;
    left: 8px;
    bottom: 8px;
    border-radius: 14px;
  }
  .chatbot-window .chat-result-card { padding: 9px 10px; }
  .chatbot-window .chat-status-row { padding: 5px 9px; font-size: 11px; }
  .chat-answer { font-size: 12.5px; padding: 10px 11px; }
  .status-badge { font-size: 10px; padding: 3px 7px; }
}
@media (max-width: 380px) {
  .chatbot-window { height: 58vh; max-height: 58vh; }
}

/* Collapsed state — header only, so the chat can be tucked away without
   closing it and losing the conversation. */
.chatbot-window.collapsed {
  height: auto !important;
  max-height: none !important;
}
.chatbot-window.collapsed .chatbot-messages,
.chatbot-window.collapsed .chatbot-input-area,
.chatbot-window.collapsed .chatbot-suggestions {
  display: none !important;
}
.chatbot-collapse {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 2px 6px;
  opacity: .9;
}
.chatbot-collapse:hover { opacity: 1; }

/* =====================================================================
   RECRUITMENT STATUS BLOCK — job details page
   ===================================================================== */
.rec-status {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  padding: 14px 16px;
  margin: 4px 0 18px;
}
.rec-status-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.rec-status-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13.5px;
}
.rec-status-row:last-child { border-bottom: none; }
.rs-label { color: var(--muted); font-weight: 600; }
.rs-value { font-weight: 700; white-space: nowrap; }
.rs-value.rs-open     { color: #10b981; }
.rs-value.rs-upcoming { color: #f59e0b; }
.rs-value.rs-closed   { color: #ef4444; }
.rs-value.rs-unknown  { color: var(--muted); }
.rs-value.rs-yes      { color: #10b981; }
.rs-value.rs-no       { color: var(--muted); }
.rs-btn {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  white-space: nowrap;
}
.rs-btn:hover { background: var(--accent-hover); }
.rs-btn-spacer { display: block; width: 1px; }

@media (max-width: 560px) {
  .rec-status-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .rec-status-row .rs-btn { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
  .rs-btn-spacer { display: none; }
}

/* =====================================================================
   CHATBOT CARD — internal layout fixes
   =====================================================================
   The card is an <a> with block-level children. Before this fix it rendered
   inline, which made borders bleed and the "View Details" link overlap the
   next card. Only the properties that need changing are overridden here —
   the base rules above still supply fonts, colours and spacing. */
.chat-result-card > * { max-width: 100%; }

/* Let a long organisation name wrap instead of forcing the row wider. */
.chat-result-top { flex-wrap: wrap; }

/* The status table must sit on its own line, clear of the meta row. */
.chat-result-card .chat-status {
  display: block;
  clear: both;
  margin: 8px 0 0;
}

/* "View Details" becomes a full-width footer row inside the card so it can
   never collide with whatever follows. */
.chat-result-btn {
  display: block;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  text-align: right;
}

/* =====================================================================
   APPLICATION STATUS BADGE — one style, used on every page
   ===================================================================== */
.app-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 6px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.app-status .as-dot { font-size: 9px; }

.app-status.is-upcoming    { color: #d97706; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); }
.app-status.is-active      { color: #059669; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3); }
.app-status.is-closingsoon { color: #ea580c; background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.3); }
.app-status.is-closed      { color: #dc2626; background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.3); }
.app-status.is-unknown     { color: var(--muted); background: var(--bg); border-color: var(--border); }

/* On the details page the badge sits directly above the organisation name. */
.modal-header-text .app-status { margin-bottom: 8px; }

/* In the chatbot the badge leads the card. */
.chat-result-card .app-status { font-size: 10.5px; padding: 3px 8px; margin-bottom: 5px; }

/* Recruitment status block: now only exam milestones, no title row. */
.rec-status { margin-top: 12px; }

/* Milestone action button shown directly below a chatbot job card. */
.chat-cta-inline {
  margin: -2px 0 10px;
  padding-left: 2px;
}
.chat-cta-inline .chat-cta-btn {
  font-size: 12px;
  padding: 7px 13px;
}


/* =====================================================================
   CHATBOT COMPACT CARD — 3 lines: status · org · milestones
   ===================================================================== */
.chat-result-card-compact {
  display: block !important;
  padding: 10px 13px;
  margin: 8px 0 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.chat-result-card-compact:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
/* Line 1 — application status + category type, small */
.chat-cc-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.chat-cc-status {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}
.chat-cc-status.is-upcoming    { color: #d97706; }
.chat-cc-status.is-active      { color: #059669; }
.chat-cc-status.is-closingsoon { color: #ea580c; }
.chat-cc-status.is-closed      { color: #dc2626; }
.chat-cc-status.is-unknown     { color: var(--muted); }
/* Category type pill on line 1 */
.chat-cc-type {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
}
/* Line 2 — full organisation name */
.chat-cc-org {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 6px;
}
/* Line 3 — milestone availability, single row */
.chat-cc-ms {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow: hidden;
}
.chat-ms {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.chat-ms-on  { color: #059669; }
.chat-ms-off { color: #dc2626; }

/* =====================================================================
   JOB DETAILS PAGE — safe text wrapping (details page only)
   =====================================================================
   Scoped to .details-page so cards, lists, chatbot and search elsewhere are
   untouched. Long institution names, states and values wrap on word
   boundaries and never overflow their container on phone or desktop. */
.details-page .modal-org,
.details-page .modal-post,
.details-page .modal-section-title,
.details-page .quick-stat-value,
.details-page .quick-stat-label,
.details-page .rs-label,
.details-page .rs-value,
.details-page .detail-value,
.details-page .detail-label {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  min-width: 0;
}

/* Quick-stat cards: let the value wrap to a second line instead of
   overflowing, and keep the text centred/tidy when it does. */
.details-page .quick-stat {
  min-width: 0;
  overflow: hidden;
}
.details-page .quick-stat-value {
  line-height: 1.25;
  white-space: normal;
}

/* =====================================================================
   BUTTON TEXT FLASH FIX (item 3)
   =====================================================================
   `transition: all` was animating the `color` property on hover/active. When
   a button's background and text colour change together, the text colour
   transitions THROUGH a shade close to the new background, making the label
   briefly vanish then reappear. Restricting transitions to background,
   border, box-shadow and transform keeps the text colour instant and stable.
   Applies to every button type named in the spec. */
.btn,
.btn-action,
.btn-p, .btn-s, .btn-d,
.filter-pill,
.side-nav-item,
.top-tab,
.chat-cta-btn,
.rs-btn,
.job-apply-btn,
.notice-cta,
.view-all-btn,
.nav-link,
.chatbot-fab,
a.btn, button.btn {
  transition: background-color .2s ease,
              border-color .2s ease,
              box-shadow .2s ease,
              transform .1s ease,
              opacity .2s ease !important;
}
/* Text colour changes are applied instantly so a label can never fade out. */
.btn:hover, .btn:active, .btn:focus,
.btn-action:hover, .btn-action:active,
.filter-pill:hover, .filter-pill:active,
.top-tab:hover, .top-tab:active,
.chat-cta-btn:hover, .rs-btn:hover {
  transition-property: background-color, border-color, box-shadow, transform, opacity;
}
/* Guarantee button labels are always painted above any pseudo-element and
   never inherit a transitioning colour. */
.btn *, .btn-action *, .filter-pill *, .top-tab * {
  transition: none;
}

/* =====================================================================
   PROMINENT LAST DATE on vacancy cards (item 6)
   ===================================================================== */
.job-lastdate {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 2px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(249,115,22,.08);
  border: 1px solid rgba(249,115,22,.2);
}
.job-lastdate .jld-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.job-lastdate .jld-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.2;
}
.job-lastdate.is-expired {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.25);
}
.job-lastdate.is-expired .jld-value { color: #dc2626; }

/* Application status badge on cards — larger, badge style (item 7) */
.job-info-col > .app-status {
  font-size: 12px;
  padding: 5px 12px;
  margin-bottom: 7px;
}
@media (max-width: 480px) {
  .job-lastdate .jld-value { font-size: 15px; }
}

/* =====================================================================
   REUSABLE EMPTY STATE (items 10 & 11)
   ===================================================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 6px;
}
.empty-state-icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 6px;
  opacity: .9;
}
.empty-state-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.empty-state-msg {
  font-size: 13.5px;
  color: var(--muted);
  max-width: 340px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.empty-state-btn {
  appearance: none;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease;
}
.empty-state-btn:hover {
  background: var(--accent-hover, #ea580c);
  box-shadow: 0 2px 8px rgba(249,115,22,.25);
  transform: translateY(-1px);
}
.empty-state-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* =====================================================================
   SYLLABUS TAB — professional headed bullet lists (items 2-4)
   ===================================================================== */
.syllabus-block {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.syllabus-group {
  border-left: 3px solid var(--accent);
  padding-left: 14px;
}
.syllabus-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.syllabus-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.syllabus-item {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: break-word;
}
.syllabus-item::before {
  content: '•';
  position: absolute;
  left: 4px;
  color: var(--accent);
  font-weight: 700;
}
/* Nested topics — indented, lighter marker */
.syllabus-item.syllabus-sub {
  padding-left: 34px;
  font-size: 13px;
  color: var(--muted);
}
.syllabus-item.syllabus-sub::before {
  content: '◦';
  left: 20px;
}

/* =====================================================================
   DEDICATED "NEW JOBS" PAGE (index.html?view=newjobs)
   Shows ONLY the New Jobs list — hides every other homepage section.
   ===================================================================== */
body.only-newjobs .stats-bar,
body.only-newjobs .ticker-section,
body.only-newjobs .content-section,
body.only-newjobs .info-sections,
body.only-newjobs .filter-bar,
body.only-newjobs .job-listings-card,
body.only-newjobs .cat-content-section,
body.only-newjobs .viewall-inline-section:not(#viewall-new-section),
body.only-newjobs .side-panel,
body.only-newjobs .side-panel-toggle {
  display: none !important;
}
/* Keep the New Jobs section always visible and full-width on this page. */
body.only-newjobs #viewall-new-section {
  display: block !important;
  margin: 0 auto;
  max-width: 900px;
}
body.only-newjobs .main-content {
  padding-top: 20px;
}

/* =====================================================================
   v6 — UI/UX, Dynamic Tabs & Syllabus Improvements
   ===================================================================== */

/* ----- 1. NEW Badge — single shared style, with size variants ----- */
/* The same .new-badge class is used everywhere: job cards, New Jobs card,
   search results, related jobs, details page, ticker, homepage cards,
   tag pages. Variants only switch size; colour is identical everywhere. */
.new-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}
.new-badge.new-badge-card    { font-size: 10px;   font-weight: 700; padding: 2px 7px;  border-radius: 4px;  }
.new-badge.new-badge-ticker  { font-size: 9px;    font-weight: 700; padding: 1px 6px;  border-radius: 4px;  }
.new-badge.new-badge-notice  { font-size: 8.5px;  font-weight: 800; padding: 2px 6px;  border-radius: 4px;  margin-left: auto; }
.new-badge.new-badge-pill    { font-size: 10px;   font-weight: 700; padding: 2px 8px;  border-radius: 10px; }

/* Notice board: keep the old .notice-new-flag working as an alias so any
   legacy markup still renders identically. */
.notice-new-flag { margin-left: auto; }
.notice-new-flag,
.notice-item-header .new-badge { margin-left: auto; flex-shrink: 0; }

/* ----- 2. Sidebar collapse: hover affordance + dark-mode aware rail ----- */
.page-layout.panel-collapsed .side-panel { width: 56px; }
.page-layout.panel-collapsed .side-panel:hover { width: 240px; }
/* When hovering the collapsed rail, surface the labels so users can read
   the menu without first expanding it. The hover-expand only happens on
   devices with a fine pointer (mouse/trackpad) — touch devices use the
   dedicated expand button. */
@media (hover: hover) and (pointer: fine) {
  .page-layout.panel-collapsed .side-panel:hover .side-nav-info,
  .page-layout.panel-collapsed .side-panel:hover .side-panel-header-left span,
  .page-layout.panel-collapsed .side-panel:hover .side-nav-count {
    display: block;
  }
  .page-layout.panel-collapsed .side-panel:hover .side-nav-item {
    padding: 10px 12px;
    justify-content: flex-start;
  }
  /* Suppress the tooltip when the panel is hovered-open. */
  .page-layout.panel-collapsed .side-panel:hover .side-nav-item::after {
    display: none;
  }
}

/* ----- 3. Ticker v6.1 — simplified item layout ----- */
/* Only the NEW badge and the "Org - Post Name" title are rendered.
   All other chips (org/category/state/last-date) were removed per user
   request. The chip styles below are retained for backward compatibility
   in case any third-party markup still references them. */
.ticker-item {
  padding: 0 20px;
  gap: 8px;
}
.ticker-new-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.ticker-title {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
/* Legacy chip styles — no longer used by the ticker renderer but kept for
   backward compatibility. */
.ticker-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.ticker-meta::before {
  content: '·';
  margin: 0 2px;
  color: var(--muted);
  font-weight: 700;
}
.ticker-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--card-hover, rgba(0,0,0,0.05));
  color: var(--text-secondary, var(--muted));
  white-space: nowrap;
  border: 1px solid var(--border);
}
.ticker-chip-date {
  background: rgba(249,115,22,0.10);
  color: var(--accent);
  border-color: rgba(249,115,22,0.25);
  font-weight: 600;
}
.ticker-chip-date.is-expired {
  background: rgba(239,68,68,0.10);
  color: var(--red, #ef4444);
  border-color: rgba(239,68,68,0.25);
}
.ticker-chip-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.85;
  margin-right: 4px;
}

/* ----- 4. Syllabus tab — Share button in the section header ----- */
.syllabus-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.syllabus-section-title-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.btn-syllabus-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  flex-shrink: 0;
}
.btn-syllabus-share:hover {
  background: var(--accent-strong, #ea580c);
  box-shadow: 0 2px 8px rgba(249,115,22,0.25);
}
.btn-syllabus-share:active {
  transform: translateY(1px);
}
.btn-syllabus-share svg {
  width: 14px;
  height: 14px;
}
.btn-syllabus-share-label {
  font-size: 12px;
  font-weight: 600;
}
/* On very narrow screens, hide the "Share" label and keep just the icon. */
@media (max-width: 480px) {
  .btn-syllabus-share-label { display: none; }
  .btn-syllabus-share { padding: 6px 8px; }
}

/* ----- 5. Syllabus linked job item — "Syllabus" pill ----- */
.cat-syllabus-pill {
  background: rgba(6,182,212,0.15) !important;
  color: #06b6d4 !important;
  font-weight: 700;
}

/* ----- 6. Dynamic section rendering (.dyn-section-body and friends) ----- */
/* Used by the generic renderSection(title, data) helper for any extra
   field rendered inside the Extra Information tab. */
.modal-section-anchor-wrap {
  display: block;
}
.dyn-section-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dyn-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
.dyn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dyn-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.dyn-list li::before {
  content: '•';
  position: absolute;
  left: 4px;
  color: var(--accent);
  font-weight: 700;
}
.dyn-group {
  border-left: 3px solid var(--accent);
  padding-left: 14px;
}
.dyn-group-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.dyn-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}
.dyn-row:last-child { border-bottom: none; }
.dyn-row-label {
  font-weight: 600;
  color: var(--muted);
  min-width: 140px;
  flex-shrink: 0;
}
.dyn-row-value {
  color: var(--text);
  flex: 1;
  word-break: break-word;
}

/* ----- 7. Hash-target highlight (when arrived via #section) ----- */
/* A brief, subtle flash so users know which section the URL hash pointed to. */
.modal-section[data-section-anchor]:target,
.modal-section-anchor-wrap:target {
  animation: dyn-hash-flash 1.6s ease-out;
}
@keyframes dyn-hash-flash {
  0%   { background: rgba(249,115,22,0.18); }
  100% { background: transparent; }
}

/* ----- 8. Mobile drawer: smoother slide + better backdrop ----- */
@media (max-width: 1023px) {
  .side-panel {
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.32s;
    will-change: transform;
  }
  .side-panel-overlay {
    transition: opacity 0.25s;
    opacity: 0;
  }
  .side-panel-overlay.active {
    opacity: 1;
  }
}

/* ----- 9. Hide-empty insurance: never show empty tab panes ----- */
.modal-tab-pane:empty { display: none; }
.modal-tabs:empty { display: none; }


/* =====================================================================
   v7 — Tags system, Deadline highlighter, Footer pages
   ===================================================================== */

/* ----- 1. Tag chips (.job-tag) — small rounded, reused everywhere ----- */
.job-tags {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.job-tags-card { display: inline-flex; }
.job-tags-detail { gap: 6px; }

.job-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.10);
  color: var(--accent);
  border: 1px solid rgba(249, 115, 22, 0.22);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  cursor: pointer;
}
.job-tag:hover {
  background: rgba(249, 115, 22, 0.18);
  border-color: rgba(249, 115, 22, 0.4);
  color: var(--accent-hover, #ea580c);
  text-decoration: none;
}
.job-tag:active { transform: translateY(1px); }

/* Card variant: smaller, tighter — fits in the job-row-header */
.job-tag-card {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 8px;
}

/* Detail variant: slightly larger, used in the tags block at the bottom */
.job-tag-detail {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
}

/* Count badge shown on the related-tags chips (tag.php) */
.job-tag-count {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.18);
  padding: 0 5px;
  border-radius: 8px;
  margin-left: 4px;
  min-width: 14px;
  text-align: center;
}

/* ----- 2. Tags block at bottom of job details page ----- */
.modal-tags-block {
  margin: 16px 0;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary, var(--card));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.modal-tags-block-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.modal-tags-block-label svg { width: 14px; height: 14px; opacity: 0.7; }
.modal-tags-block-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ----- 3. Deadline pill — sits next to the last-date value ----- */
.deadline-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  margin-left: 8px;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.4;
  vertical-align: middle;
}
.deadline-pill-closing {
  background: rgba(249, 115, 22, 0.14);
  color: var(--accent);
  border-color: rgba(249, 115, 22, 0.32);
}
.deadline-pill-expired {
  background: rgba(239, 68, 68, 0.14);
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.32);
}

/* ----- 4. Static content pages (About / Contact / Terms / Privacy) ----- */
.static-page {
  padding: 24px 0 60px;
  min-height: calc(100vh - 60px);
}
.static-article {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 4px;
}
.static-crumb {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}
.static-crumb a { color: var(--accent); text-decoration: none; }
.static-crumb a:hover { text-decoration: underline; }
.static-crumb span[aria-hidden="true"] { margin: 0 6px; opacity: 0.6; }

.static-article-header {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.static-article-header h1 {
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -0.4px;
  line-height: 1.2;
}
.static-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary, var(--muted));
  margin: 0;
}

.static-section {
  margin-bottom: 32px;
}
.static-section h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  letter-spacing: -0.2px;
}
.static-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 18px 0 8px;
}
.static-section p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary, var(--text));
  margin: 0 0 12px;
}
.static-section p strong { color: var(--text); font-weight: 700; }
.static-section a { color: var(--accent); text-decoration: none; }
.static-section a:hover { text-decoration: underline; }

.static-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.static-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary, var(--text));
}
.static-list li::before {
  content: '•';
  position: absolute;
  left: 6px;
  top: 0;
  color: var(--accent);
  font-weight: 700;
}
.static-list li strong { color: var(--text); }

.static-feature-grid {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.static-feature-grid li {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.static-feature-grid li strong {
  font-size: 14px;
  color: var(--text);
  font-weight: 700;
}
.static-feature-grid li span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.static-disclaimer {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 32px 0;
}
.static-disclaimer h2 {
  border-bottom-color: rgba(245, 158, 11, 0.22);
}

.static-email {
  font-size: 18px;
  font-weight: 700;
  margin: 12px 0 !important;
}
.static-email a { color: var(--accent); }

.static-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}
.static-table th,
.static-table td {
  padding: 10px 14px;
  text-align: left;
  border: 1px solid var(--border);
}
.static-table th {
  background: var(--bg-secondary, var(--card));
  font-weight: 700;
  color: var(--text);
}
.static-table td { color: var(--text-secondary, var(--text)); }

/* Forms (contact page) */
.static-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 16px 0;
  max-width: 560px;
}
.static-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.static-form-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.static-form-row input,
.static-form-row select,
.static-form-row textarea {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.static-form-row input:focus,
.static-form-row select:focus,
.static-form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
.static-form-row textarea { resize: vertical; min-height: 80px; }

/* ----- 5. Tag page (tag.php) ----- */
.tag-page {
  padding: 24px 0 60px;
  min-height: calc(100vh - 60px);
}
.tag-page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.tag-page-header h1 {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tag-page-header h1 svg { color: var(--accent); }

.tag-related {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.tag-related h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
}
.tag-related-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ----- 6. Responsive tweaks ----- */
@media (max-width: 768px) {
  .static-article-header h1 { font-size: 26px; }
  .static-section h2 { font-size: 18px; }
  .static-feature-grid { grid-template-columns: 1fr; }
  .modal-tags-block { flex-direction: column; align-items: flex-start; }
}

/* ----- 7. Footer polish (already exists, just ensures links are visible) ----- */
.footer-links a {
  color: var(--text-secondary, var(--muted));
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--accent); text-decoration: underline; }

/* ----- 8. Job-row-header: ensure tags wrap nicely on narrow cards ----- */
.job-row-header {
  flex-wrap: wrap;
  gap: 6px;
}
.job-row-header .job-tags {
  /* Tags sit inline with the org name + category badge, wrapping to a new
     line on narrow cards. */
  flex-basis: auto;
}

/* =====================================================================
   v7.1 — Featured Recruitments strip (above the ticker)
   =====================================================================
   The admin curates 5–6 recruitments via the admin panel. They appear
   as a horizontal scrollable strip of compact cards ABOVE the ticker.
   The stats bar + Notice Board stay in their original v7 positions.
   Each card links to the existing /jobs/<slug> details page. */

/* ----- 1. The strip container ----- */
/* v7.3: Highlighted with a gradient border + subtle glow so the featured
   strip stands out from the stats bar above and the ticker below. */
.featured-strip {
  margin-bottom: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 10px;
  position: relative;
  /* Subtle accent-tinted background to make the strip pop */
  background-image: linear-gradient(135deg, rgba(249,115,22,0.04) 0%, transparent 60%);
}
.featured-strip[style*="display:none"],
.featured-strip[hidden] { display: none !important; }

/* Accent left-edge bar — a visual "highlight" marker */
.featured-strip::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 10px;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-hover, #ea580c));
  border-radius: 0 3px 3px 0;
}

.featured-strip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.featured-strip-header svg { color: var(--accent); flex-shrink: 0; }
.featured-strip-header span {
  background: var(--accent-soft);
  padding: 3px 10px;
  border-radius: 12px;
  /* v7.3: subtle pulse animation to draw attention */
  animation: featured-header-pulse 2.5s ease-in-out infinite;
}
@keyframes featured-header-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.3); }
  50%      { box-shadow: 0 0 0 4px rgba(249,115,22,0); }
}

/* v7.4: Scroll navigation arrows — sit on the right side of the header */
.featured-strip-nav {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.featured-strip-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.featured-strip-nav-btn:hover:not(:disabled) {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.featured-strip-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.featured-strip-nav-btn svg { pointer-events: none; }

/* v7.4: Scroll wrapper — clips overflow + adds fade edges */
.featured-strip-scroll-wrap {
  position: relative;
  margin: 0 -2px;
}

/* ----- 2. The horizontal scroll track ----- */
.featured-strip-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 10px;
  margin: 0 -2px;
  /* v7.4: Make the scrollbar PROMINENT so users know they can scroll right.
     Firefox: scrollbar-width + scrollbar-color. WebKit: ::-webkit-scrollbar. */
  scrollbar-width: auto;                        /* Firefox: auto = visible */
  scrollbar-color: var(--accent) var(--card-hover, rgba(255,255,255,0.05));
  scroll-behavior: smooth;
}
/* WebKit: thick, accent-colored scrollbar */
.featured-strip-track::-webkit-scrollbar {
  height: 10px;
}
.featured-strip-track::-webkit-scrollbar-track {
  background: var(--card-hover, rgba(255,255,255,0.04));
  border-radius: 5px;
  border: 1px solid var(--border);
}
.featured-strip-track::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 5px;
  border: 2px solid var(--card);
  /* v7.4: gradient makes the thumb look "draggable" */
  background-image: linear-gradient(135deg, var(--accent), var(--accent-hover, #ea580c));
}
.featured-strip-track::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(135deg, var(--accent-hover, #ea580c), var(--accent));
}
.featured-strip-track > * {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

/* v7.4: "Scroll right for more" hint — sits below the track, fades out
   once the user actually scrolls. */
.featured-strip-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  padding: 4px 6px 0;
  transition: opacity 0.4s;
  opacity: 1;
  /* v7.4: gentle bounce animation to draw the eye */
  animation: featured-hint-bounce 1.8s ease-in-out infinite;
}
.featured-strip-scroll-hint svg {
  animation: featured-hint-arrow 1.8s ease-in-out infinite;
}
@keyframes featured-hint-bounce {
  0%, 100% { transform: translateX(0); opacity: 0.85; }
  50%      { transform: translateX(-3px); opacity: 1; }
}
@keyframes featured-hint-arrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

.featured-loading {
  padding: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  width: 100%;
  flex: 1 1 100%;
}

/* ----- 3. Each compact featured card ----- */
/* v7.3: Cards have a highlighted appearance — accent-tinted left border +
   subtle gradient background — so they stand out from regular job cards. */
.featured-strip-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary, var(--card));
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
  min-height: 130px;
  position: relative;
  overflow: hidden;
}
.featured-strip-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(249,115,22,0.15), var(--shadow);
  border-color: var(--accent);
  border-left-color: var(--accent);
  background: var(--card-hover, var(--card));
  text-decoration: none;
}
/* v7.3: Focus state for keyboard navigation */
.featured-strip-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* v7.3: Active (clicking) state */
.featured-strip-card:active {
  transform: translateY(-1px);
}

.featured-strip-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
  min-height: 22px;
}
.featured-strip-card-org {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.featured-strip-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}

.featured-strip-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 11.5px;
  margin-bottom: 10px;
  flex: 1;
}
.featured-strip-card-date {
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.featured-strip-card-date.is-expired { color: var(--red); }
.featured-strip-card-vac {
  color: var(--green);
  font-weight: 700;
  white-space: nowrap;
}

.featured-strip-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}
.featured-strip-card-cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.featured-strip-card-share {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.featured-strip-card-share:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.featured-strip-card-share svg { width: 13px; height: 13px; pointer-events: none; }

/* ----- 4. Custom card (ads / announcements) ----- */
.featured-strip-custom-card {
  background: linear-gradient(135deg, rgba(249,115,22,0.06), rgba(249,115,22,0.02));
  border-color: rgba(249,115,22,0.25);
}
.featured-strip-custom-img {
  width: 100%;
  height: 60px;
  background-size: cover;
  background-position: center;
  background-color: var(--accent-soft);
  border-radius: 6px;
  margin-bottom: 8px;
}
.featured-strip-card-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----- 5. Hide on dedicated New Jobs page ----- */
body.only-newjobs .featured-strip { display: none !important; }

/* ----- 6. Responsive — narrower cards on small screens ----- */
@media (max-width: 639px) {
  .featured-strip { padding: 12px 12px 8px; }
  .featured-strip-track > * { flex: 0 0 230px; }
  .featured-strip-card { padding: 10px 12px; min-height: 120px; }
  .featured-strip-card-name { font-size: 13px; min-height: 34px; }
}

/* ----- 7. Dark-mode tweaks ----- */
html.light .featured-strip-custom-card {
  background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(249,115,22,0.03));
}