/* ==========================================================================
   SN Job Alerts — "Digital Gazette" design system
   Tokens + bespoke components (masthead, notices, panels, footer) plus
   restyles of the Bootstrap primitives (card/btn/badge/table/alert/
   pagination/breadcrumb/list-group) still used on detail pages, so every
   page inherits the new look without needing an individual rewrite.
   ========================================================================== */

:root{
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --ink:#1E293B;
  --ink-soft:#64748B;
  --ink-faint:#94A3B8;
  --rule:#E2E8F0;
  --rule-strong:#CBD5E1;
  --brand:#1565C0;
  --brand-dark:#0D47A1;
  --brand-soft:#E3EFFC;
  --brand-light:#4C9BE8;
  --brand-light-dark:#2E7FD1;
  --header-bg:#F59E0B;
  --urgent:#DC2626;
  --urgent-soft:#FCE8E8;
  --positive:#16A34A;
  --positive-soft:#E1F6E8;
  --gold:#F59E0B;
  --gold-soft:#FEF3DA;
  --footer-bg:#0D1B2E;
  --footer-text:#E7ECE6;
  --footer-rule:#243347;
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 6px 16px rgba(15,23,42,.06);
}
/* Site is intentionally light-only — no dark-mode variant — regardless of
   the visitor's OS preference, so branding stays consistent for every user. */

/* ---------- base ---------- */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:"Newsreader", ui-serif, Georgia, serif; text-wrap:balance; font-weight:600; color:var(--ink); }
.page-title{ color:var(--ink); font-weight:700; }
a{ color:var(--brand); }
.mono, .date-mono{ font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; font-variant-numeric: tabular-nums; }
svg.icon{ width:15px; height:15px; flex:none; stroke:currentColor; stroke-width:1.6; fill:none; vertical-align:-2px; }

/* ---------- shared section header (used across every content page) ---------- */
.section-title{
  font-family:"IBM Plex Sans",sans-serif; font-weight:700; font-size:1rem; color:#fff;
  background:var(--brand); padding:.65rem 1rem; margin:0 0 1rem; text-align:center;
}

/* ---------- masthead ---------- */
.masthead{ background:var(--header-bg); padding:0; }
.masthead .wrap{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.wordmark{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.wordmark .mark{
  width:168px; height:112px; border-radius:3px; background:#fff; color:var(--header-bg);
  display:flex; align-items:center; justify-content:center; font-family:"Newsreader",serif;
  font-weight:600; font-size:1.3rem; flex:none; overflow:hidden;
}
.wordmark .mark.has-logo{ background:transparent; border-radius:0; }
.wordmark .mark img{ width:100%; height:100%; object-fit:contain; }
.wordmark .site-name{ margin:0; font-size:1.45rem; font-weight:600; color:#fff; font-family:"Newsreader", ui-serif, Georgia, serif; }
.wordmark .tagline{ margin:.15rem 0 0; font-size:.8rem; color:#fff; font-weight:700; font-family:"IBM Plex Sans",sans-serif; }

.telegram-btn{
  display:flex; align-items:center; gap:.5rem; background:#26A5E4; color:#fff;
  padding:.6rem 1.1rem; border-radius:999px; font-size:.85rem; font-weight:700;
  text-decoration:none; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:background-color .15s ease, transform .15s ease;
}
.telegram-btn i{ font-size:1.05rem; }
.telegram-btn:hover{ background:#1c8bc4; color:#fff; transform:translateY(-1px); }
@media (max-width: 860px){
  .telegram-btn{ display:none; }
}

.telegram-float{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:1200;
  width:56px; height:56px; border-radius:50%; background:#26A5E4; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
  box-shadow:0 4px 14px rgba(0,0,0,.25); text-decoration:none;
  transition:transform .15s ease, background-color .15s ease;
}
.telegram-float:hover{ background:#1c8bc4; color:#fff; transform:scale(1.08); }
@media (max-width: 480px){
  .telegram-float{ width:48px; height:48px; font-size:1.4rem; right:1rem; bottom:1rem; }
}

nav.primary{ background:var(--header-bg); position:sticky; top:0; z-index:1000; border-top:1px solid rgba(255,255,255,.15); }
nav.primary .wrap{ display:flex; gap:1.7rem; flex-wrap:wrap; }

nav.primary a.nav-mini-logo{
  display:flex; align-items:center; gap:.45rem; text-decoration:none; padding:0; border-bottom:none;
  opacity:0; transform:translateY(-6px); pointer-events:none; max-width:0; overflow:hidden;
  transition:opacity .25s ease, transform .25s ease, max-width .25s ease, margin .25s ease;
}
.nav-mini-logo .mark{ display:none; }
.nav-mini-logo .mark.has-logo{ background:transparent; border-radius:0; padding:0; }
.nav-mini-logo .mark img{ width:100%; height:100%; object-fit:contain; }
.nav-mini-logo-name{
  color:#fff; font-weight:700; font-size:1rem; white-space:nowrap;
  font-family:"Newsreader", ui-serif, Georgia, serif;
}
nav.primary.scrolled .nav-mini-logo{
  opacity:1; transform:translateY(0); pointer-events:auto; max-width:260px; margin-right:1rem;
}
nav.primary a{
  display:block; padding:.6rem 0; color:#fff; text-decoration:none;
  font-size:1rem; font-weight:700; border-bottom:2px solid transparent;
}
nav.primary a.active{ color:#fff; border-bottom-color:var(--gold); }
nav.primary a:hover{ color:#fff; opacity:.85; }
.nav-toggle{ display:none; background:transparent; border:0; color:#fff; padding:.6rem 0; cursor:pointer; }
.nav-toggle svg{ width:22px; height:22px; }

.quicklinks{ background:var(--surface); border-bottom:1px solid var(--rule); }
.quicklinks .wrap{ display:flex; flex-wrap:wrap; gap:.5rem; padding:.6rem 0; }
.pill{
  display:inline-flex; align-items:center; border:1px solid transparent; border-radius:999px;
  padding:.28rem .75rem; font-size:.76rem; font-weight:600; color:var(--brand); background:var(--brand-soft);
  text-decoration:none; white-space:nowrap; transition:background-color .12s ease, color .12s ease;
}
.pill:hover{ background:var(--header-bg); color:#fff; }

@media (max-width: 860px){
  nav.primary .wrap{ display:none; flex-direction:column; gap:0; }
  nav.primary .wrap.open{ display:flex; }
  nav.primary a{ border-bottom:1px solid rgba(255,255,255,.12); }
  .nav-toggle{ display:block; }
}

/* ---------- notices (job listing rows — replaces the old .job-card) ---------- */
.notice-list{ border-top:1px solid var(--rule); overflow:hidden; }
.notice{ padding:1.1rem 1rem; margin:0 -1rem; border-bottom:1px solid var(--rule); position:relative; }
.notice-main{ min-width:0; }
.notice-top{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.cat-tag{
  font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--brand); background:var(--brand-soft); padding:.15rem .5rem; border-radius:2px;
}
.advt{ font-size:.72rem; color:var(--ink-faint); }
.status-pill{
  font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:.15rem .5rem; border-radius:2px;
}
.status-pill.active{ color:var(--positive); background:var(--positive-soft); }
.status-pill.closed{ color:var(--ink-faint); background:var(--rule); }
.notice-actions{ display:flex; gap:.5rem; margin-top:.6rem; }
.notice-actions a{
  font-size:.78rem; font-weight:600; padding:.35rem .8rem; border-radius:2px; text-decoration:none;
  border:1px solid var(--brand); color:var(--brand);
}
.notice-actions a:hover{ background:var(--brand); color:#fff; }
.notice-actions a.apply{ background:var(--positive); border-color:var(--positive); color:#fff; }
.notice-actions a.apply:hover{ background:#128038; border-color:#128038; }
.notice h2, .notice h3{ margin:.35rem 0 .2rem; font-size:1.05rem; font-weight:700; line-height:1.35; }
.notice h2 a, .notice h3 a{ text-decoration:none; color:var(--ink); }
.notice .org{ font-size:.85rem; color:var(--ink-soft); margin:0 0 .5rem; }
.notice .org .sample{ font-style:italic; color:var(--ink-faint); }
.notice .meta{ display:flex; flex-wrap:wrap; gap:.9rem; font-size:.8rem; color:var(--ink); }
.notice .meta span{ display:inline-flex; align-items:center; gap:.35rem; max-width:100%; overflow-wrap:break-word; word-break:break-word; }
.notice .meta .vacancy-count{ color:var(--positive); font-weight:700; }

.stamp{
  margin-left:auto; flex:none;
  border:1.5px solid var(--urgent); color:var(--urgent); text-align:center;
  padding:.28rem .55rem; min-width:6.4rem;
}
.stamp .lbl{ display:block; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.stamp .date{ display:block; font-size:.8rem; font-weight:600; margin-top:.1rem; }
.stamp.closed{ border-color:var(--ink-faint); color:var(--ink-faint); }

/* ---------- homepage hero / search ---------- */
.hero-search{
  position:relative; border-bottom:1px solid var(--rule); padding:2.2rem 0;
  background:linear-gradient(180deg, #FFCE85 0%, #FFFFFF 50%, #9FDCAA 100%);
}
.hero-card{ background:var(--surface); border:1px solid var(--rule); box-shadow:var(--shadow); border-radius:4px; padding:1.6rem 1.8rem; }
.hero-search h1{ margin:0 0 .3rem; font-size:1.7rem; }
.hero-search .sub{ margin:0 0 1.1rem; color:var(--ink-soft); font-size:.95rem; }
.hero-form{ padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.hero-form input[type="search"]{ flex:2 1 220px; }
.hero-form select{ flex:1 1 150px; }
.hero-form input, .hero-form select{
  border:1px solid var(--rule-strong); border-radius:2px; padding:.55rem .7rem; font:inherit; font-size:.87rem;
  background:var(--surface); color:var(--ink);
}
.hero-form input:focus, .hero-form select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.hero-form button{
  flex:0 0 auto; border:0; background:var(--brand); color:#fff; padding:.55rem 1.4rem; font:inherit; font-weight:600;
  font-size:.87rem; border-radius:2px; cursor:pointer; display:flex; align-items:center; gap:.4rem;
}
.hero-form button:hover{ background:var(--brand-dark); }
@media (max-width:640px){ .hero-form input, .hero-form select, .hero-form button{ flex:1 1 100%; } }

/* ---------- quick nav cards ---------- */
.quick-nav{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:.9rem; margin:1.6rem 0; }
@media (max-width:860px){ .quick-nav{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:480px){ .quick-nav{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.quick-nav a{
  display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; text-decoration:none;
  background:var(--surface); border:1px solid var(--rule); border-radius:4px; padding:1rem .5rem; color:var(--ink);
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease; min-width:0;
}
.quick-nav a:hover{ border-color:var(--brand); box-shadow:var(--shadow); transform:translateY(-2px); }
.quick-nav .icon-wrap{
  width:42px; height:42px; border-radius:50%; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.quick-nav span.label{ font-size:.95rem; font-weight:600; }

/* ---------- category grid ---------- */
.category-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.9rem; }
@media (max-width:700px){ .category-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:420px){ .category-grid{ grid-template-columns:minmax(0, 1fr); } }
.category-grid a{
  display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink);
  background:var(--surface); border:1px solid var(--rule); border-radius:4px; padding:.85rem .9rem;
  transition:border-color .12s ease, box-shadow .12s ease; min-width:0;
}
.category-grid a > span:last-child{ min-width:0; }
.category-grid .name, .category-grid .count{ overflow-wrap:break-word; }
.category-grid a:hover{ border-color:var(--brand); box-shadow:var(--shadow); }
.category-grid .icon-wrap{
  width:38px; height:38px; border-radius:6px; background:var(--brand-soft); color:var(--brand); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.category-grid .name{ font-size:.86rem; font-weight:600; line-height:1.25; }
.category-grid .count{ font-size:.74rem; color:var(--ink-soft); font-weight:400; }

/* ---------- important updates feed ---------- */
.updates-feed{ list-style:none; margin:0; padding:0; }
.updates-feed li{
  display:flex; align-items:flex-start; gap:.75rem; padding:.8rem 0; border-bottom:1px solid var(--rule);
}
.updates-feed li:last-child{ border-bottom:0; }
.updates-feed .tag{
  flex:none; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:.2rem .5rem; border-radius:2px; color:#fff; margin-top:.1rem;
}
.updates-feed .tag.result{ background:var(--positive); }
.updates-feed .tag.admit{ background:var(--brand); }
.updates-feed .tag.answer{ background:var(--gold); }
.updates-feed .body a{ font-size:.9rem; font-weight:500; text-decoration:none; color:var(--ink); }
.updates-feed .body a:hover{ color:var(--brand); text-decoration:underline; }
.updates-feed .body .when{ display:block; font-size:.76rem; color:var(--ink-soft); margin-top:.15rem; }

.filter-bar{
  background:var(--surface); border:1px solid var(--rule); box-shadow:var(--shadow);
  padding:1rem 1.1rem; margin-bottom:1.5rem;
}

/* ---------- homepage category sections ---------- */
.job-section{ background:var(--surface); border:1px solid var(--rule); box-shadow:var(--shadow); margin-bottom:1.5rem; }
.job-section-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 1.1rem; background:var(--brand); color:#fff;
}
.job-section-head.primary{ background:var(--gold); }
.job-section-head h2{
  margin:0; font-size:1.05rem; font-weight:700; color:#fff; font-family:"IBM Plex Sans",sans-serif;
  display:flex; align-items:center; gap:.5rem;
}
.job-section-head.primary h2{ color:var(--footer-bg); }
.job-section-head .view-all{ font-size:.8rem; font-weight:700; color:#fff; opacity:.85; text-decoration:none; white-space:nowrap; }
.job-section-head .view-all:hover{ opacity:1; text-decoration:underline; }
.job-section-head.primary .view-all{ color:var(--footer-bg); opacity:.75; }
.job-section-head.primary .view-all:hover{ opacity:1; }
.job-section .notice-list{ border-top:0; padding:0 1rem; overflow:hidden; }
.job-section .notice-list .notice:last-child{ border-bottom:0; }
.job-section .empty-note{ padding:1rem 1.1rem; margin:0; }

/* ---------- simple linked-list job widgets (homepage sections) ---------- */
.job-list{ list-style:none; margin:0; padding:.25rem 1.1rem; }
.job-list li{ padding:.55rem 0; border-bottom:1px dashed var(--rule); font-size:.88rem; line-height:1.4; }
.job-list li:last-child{ border-bottom:0; }
.job-list a{ color:var(--ink); text-decoration:none; font-weight:600; }
.job-list a:hover{ color:var(--brand); text-decoration:underline; }
.job-list .count{ color:var(--positive); font-size:.8rem; margin-left:.35rem; font-weight:700; }
.job-list .status-pill{ margin-left:.5rem; vertical-align:middle; }
.job-list.job-list-urgent li{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
.job-list .days-left{
  display:inline-block; flex-shrink:0; min-width:5.2rem; text-align:center;
  font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--urgent); background:var(--urgent-soft); padding:.2rem .5rem; border-radius:2px;
}
.job-list .days-left.critical{ color:#fff; background:var(--urgent); }

/* ---------- job listing table (category / state / latest-jobs pages) ---------- */
.job-table-wrap{ margin:0; }
.job-show-all-wrap{ padding:1rem; border-top:1px solid var(--rule); }
.job-table{ font-size:.9rem; margin-bottom:0; }
.job-table thead th{
  background:var(--brand-light); color:#fff; font-family:"IBM Plex Sans",sans-serif;
  font-weight:600; white-space:nowrap;
  border-top-color:var(--brand-light); border-bottom-color:var(--brand-light);
  border-left-color:var(--ink-soft); border-right-color:var(--ink-soft);
}
.job-table thead th:first-child{ border-left-color:var(--brand-light); }
.job-table thead th:last-child{ border-right-color:var(--brand-light); }
.job-table td{ vertical-align:middle; }
.job-table .cat-tag{ text-decoration:none; }
.job-table .cat-tag:hover{ background:var(--brand-light); color:#fff; }
.job-table{ table-layout:fixed; min-width:780px; }
.job-table .col-post{ white-space:normal; min-width:220px; }
.job-table .col-qualification{ width:190px; white-space:normal; overflow-wrap:break-word; word-break:break-word; }
.job-table .col-tag{ width:100px; white-space:normal; }
.job-table .col-date{ width:112px; white-space:nowrap; padding-left:.9rem; padding-right:.9rem; }
.job-table .col-details{ width:80px; white-space:nowrap; }
.job-table .col-details .btn{ padding:.3rem .5rem; font-size:.82rem; background:var(--brand-light); border-color:var(--brand-light); }
.job-table .col-details .btn:hover{ background:var(--brand-light-dark); border-color:var(--brand-light-dark); }

/* nudges the sidebar's first card down to line up with the orange job-count
   bar in the main column, which sits below a heading + description that the
   sidebar doesn't have (the ad slot above it is currently disabled/empty).
   Only applies once the sidebar sits beside the main column (lg+); below
   that they stack, so no offset is needed. */
@media (min-width:992px){
  .sidebar-align{ margin-top:4.5rem; }
}

/* mobile job cards: boxed and spaced apart instead of a flush, divider-only list */
@media (max-width:767.98px){
  .job-section .notice-list{ padding-top:1rem; }
  .job-section .notice-list .notice{
    border:2px solid var(--brand-light); border-radius:8px;
    margin:0 0 1rem; padding:1rem;
  }
  .job-section .notice-list .notice:last-child{ border:2px solid var(--brand-light); margin-bottom:0; }

  /* Job-table's mobile fallback wraps each card in a .job-row div (so overflow
     rows can be hidden individually) — .notice's own :last-child would otherwise
     always match, since each card is an only-child of its own wrapper. The
     wrapper owns the spacing/last-child logic in that case instead. */
  .job-section .notice-list .job-row{ margin-bottom:1rem; }
  .job-section .notice-list .job-row:last-child{ margin-bottom:0; }
  .job-section .notice-list .job-row .notice{ margin-bottom:0; }
}

/* ---------- sidebar panels ---------- */
.panel{ background:var(--surface); border:1px solid var(--rule); box-shadow:var(--shadow); margin-bottom:1.25rem; }
.panel-head{
  padding:.65rem 1rem; font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:#fff; display:flex; align-items:center; gap:.45rem;
}
.panel-head.positive{ background:var(--positive); }
.panel-head.brand{ background:var(--brand); }
.panel-head.ink{ background:var(--ink); }
.panel-body{ padding:.3rem 1rem .6rem; }
.panel-list{ list-style:none; margin:0; padding:0; }
.panel-list li{ list-style:none; }
.panel-list a{ display:block; padding:.55rem 0; border-bottom:1px solid var(--rule); text-decoration:none; color:var(--ink); font-size:.85rem; line-height:1.35; }
.panel-list li:last-child a{ border-bottom:0; }
.panel-list a:hover{ color:var(--brand); }
.empty-note{ padding:.85rem 0; font-size:.83rem; color:var(--ink-faint); font-style:italic; }

.cat-cloud{ display:flex; flex-wrap:wrap; gap:.4rem; padding:.8rem 1rem .95rem; }
.cat-cloud a{
  border:1px solid var(--rule-strong); border-radius:999px; padding:.26rem .65rem; font-size:.76rem;
  text-decoration:none; color:var(--ink-soft);
}
.cat-cloud a:hover{ border-color:var(--brand); color:var(--brand); }

.ad-slot{
  display:flex; align-items:center; justify-content:center; min-height:90px;
  border:1px dashed var(--rule-strong); background:var(--paper); color:var(--ink-faint);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; text-align:center;
}

/* ---------- footer ---------- */
footer{ background:var(--footer-bg); color:var(--footer-text); margin-top:1rem; }
footer a{ color:var(--footer-text); }
.footer-top{ padding-block:2.4rem 1.6rem; }
.footer-cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
.footer-cols h4, .footer-cols h6{
  margin:0 0 .8rem; font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700;
  color:#fff; font-family:"IBM Plex Sans",sans-serif;
}
.footer-cols ul{ margin:0; padding:0; list-style:none; }
.footer-cols li{ margin-bottom:.5rem; font-size:.83rem; }
.footer-cols a{ text-decoration:none; opacity:.85; }
.footer-cols a:hover{ opacity:1; text-decoration:underline; }
.footer-brand-row{ display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; }
.footer-brand-row .mark{
  width:48px; height:48px; border-radius:3px; background:var(--gold); color:var(--footer-bg);
  display:flex; align-items:center; justify-content:center; font-family:"Newsreader",serif; font-weight:600; flex:none;
}
.footer-brand-row .mark.has-logo{ background:#fff; border-radius:4px; padding:4px; }
.footer-brand-row span{ font-family:"Newsreader",serif; font-size:1.05rem; font-weight:600; }
.footer-tagline{ font-size:.82rem; opacity:.75; max-width:26ch; margin:0; }
.footer-social{ display:flex; gap:.6rem; margin-top:.8rem; }
.footer-social a{ opacity:.85; }
.footer-social a:hover{ opacity:1; }

.footer-legal{ border-top:1px solid var(--footer-rule); padding:1.2rem 0; }
.footer-legal .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:flex-start; }
.legal-links{ display:flex; flex-wrap:wrap; gap:.35rem .7rem; list-style:none; margin:0; padding:0; font-size:.78rem; }
.legal-links li a{ text-decoration:none; opacity:.85; }
.legal-links li a:hover{ opacity:1; }
.disclaimer{ font-size:.76rem; opacity:.6; max-width:64ch; line-height:1.5; margin:.6rem 0 0; }
.copyright{ font-size:.76rem; opacity:.6; white-space:nowrap; }

@media (max-width:780px){ .footer-cols{ grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   Bootstrap primitive restyles — everything below re-skins the classes
   Bootstrap's CSS still provides (grid, cards, tables, buttons, badges,
   alerts, pagination, breadcrumbs, list-groups) so untouched detail-page
   templates automatically pick up the new palette & type without edits.
   ========================================================================== */

.card{ border:1px solid var(--rule); border-radius:0; box-shadow:var(--shadow); background:var(--surface); color:var(--ink); }
.card-header{ background:var(--brand); color:#fff; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; border-bottom:0; }
.card-footer{ background:var(--surface); border-top:1px solid var(--rule); }
.list-group-item{ background:var(--surface); color:var(--ink); border-color:var(--rule); }
.list-group-item a{ text-decoration:none; }

.btn{ border-radius:2px; font-weight:500; font-size:.86rem; }
.btn-primary{ background:var(--brand); border-color:var(--brand); }
.btn-primary:hover{ background:var(--brand-dark); border-color:var(--brand-dark); }
.btn-outline-primary{ color:var(--brand); border-color:var(--brand); }
.btn-outline-primary:hover{ background:var(--brand); border-color:var(--brand); }
.btn-success{ background:var(--positive); border-color:var(--positive); }
.btn-success:hover{ background:#128038; border-color:#128038; }
.btn-outline-success{ color:var(--positive); border-color:var(--positive); }
.btn-outline-success:hover{ background:var(--positive); border-color:var(--positive); }
.btn-secondary, .btn-outline-secondary{ --bs-btn-color:var(--ink-soft); }
.btn-warning{ background:var(--gold); border-color:var(--gold); color:#fff; }
.btn-warning:hover{ background:#C97D0A; border-color:#C97D0A; color:#fff; }
.btn-dark{ background:var(--ink); border-color:var(--ink); }

.badge.text-bg-light{ background:var(--brand-soft) !important; color:var(--brand) !important; }
.badge.text-bg-secondary{ background:var(--ink-faint) !important; }
.badge.text-bg-danger{ background:var(--urgent) !important; }
.badge.text-bg-success{ background:var(--positive) !important; }
.last-date-badge{ font-size:.72rem; letter-spacing:.02em; }

.table{ color:var(--ink); --bs-border-width:2px; }
.table th, .table td{ overflow-wrap:break-word; word-break:break-word; }
.table th.bg-light, .table td{ background:var(--surface); border-color:var(--ink-soft); border-width:2px; }
.table th.bg-light{ background:var(--paper) !important; font-family:"IBM Plex Sans",sans-serif; font-weight:600; font-size:1rem; }
.table-bordered{ border-color:var(--ink-soft); border-width:2px; }

/* CKEditor-generated content (job description, page content, etc.) — CKEditor
   wraps tables/images in <figure> and doesn't apply Bootstrap's .table classes,
   so these give that raw markup the same look as the rest of the site. */
.richtext-content{ overflow-x:auto; }
.richtext-content table{
  width:100%; border-collapse:collapse; margin:0 0 1rem; color:var(--ink);
  border:2px solid var(--ink-soft);
}
.richtext-content table th, .richtext-content table td{
  border:2px solid var(--ink-soft); padding:.5rem .75rem; text-align:left; vertical-align:top;
  overflow-wrap:break-word; word-break:break-word;
}
.richtext-content table th{
  background:var(--paper); font-weight:600; font-family:"IBM Plex Sans",sans-serif; font-size:.85rem;
}
.richtext-content figure.table{ margin:0 0 1rem; max-width:100%; overflow-x:auto; }
.richtext-content figure.table table{ margin:0; }
.richtext-content figure.image{ margin:0 0 1rem; max-width:100%; }
.richtext-content figure.image img{ max-width:100%; height:auto; display:block; }
.richtext-content figure.image figcaption{
  color:var(--ink-soft); font-size:.85rem; text-align:center; padding:.4rem 0 0;
}
.richtext-content figure.image.image-style-side{ float:right; margin:0 0 1rem 1.25rem; max-width:50%; }
.richtext-content figure.image.image-style-align-left{ float:left; margin:0 1.25rem 1rem 0; }
.richtext-content figure.image.image-style-align-right{ float:right; margin:0 0 1rem 1.25rem; }
.richtext-content figure.image.image-style-align-center{ margin-left:auto; margin-right:auto; }
.richtext-content blockquote{
  border-left:3px solid var(--brand); margin:0 0 1rem; padding:.25rem 0 .25rem 1rem; color:var(--ink-soft);
}
.richtext-content pre{
  background:var(--paper); border:1px solid var(--rule); border-radius:4px;
  padding:.75rem 1rem; overflow-x:auto; font-size:.85rem;
}

.alert-success{ background:var(--positive-soft); color:var(--positive); border-color:var(--positive); }
.alert-secondary{ background:var(--paper); color:var(--ink-soft); border-color:var(--rule-strong); }

.breadcrumb-item a{ color:var(--brand); text-decoration:none; }
.breadcrumb-item a:hover{ text-decoration:underline; }
.breadcrumb-item.active{ color:var(--ink-faint); }
.breadcrumb-item + .breadcrumb-item::before{ color:var(--ink-faint); }

.pagination .page-link{ color:var(--brand); border-color:var(--rule); border-radius:0; }
.pagination .page-item.active .page-link{ background:var(--brand); border-color:var(--brand); }
.pagination .page-item.disabled .page-link{ color:var(--ink-faint); background:var(--paper); }

.form-control, .form-select{ border-color:var(--rule-strong); background:var(--surface); color:var(--ink); border-radius:2px; }
.form-control:focus, .form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 .2rem var(--brand-soft); }
.input-group .btn{ border-radius:0; }

.bg-white{ background:var(--surface) !important; }
.bg-light{ background:var(--paper) !important; }
.text-muted{ color:var(--ink-soft) !important; }
.border-bottom{ border-color:var(--rule) !important; }
hr{ border-color:var(--rule); }