/* ==========================================================================
   Workari Theme
   Design tokens + AdminLTE overrides. Load AFTER adminlte.min.css.
   All tokens are CSS custom properties so future pages can opt in by
   reusing the --wk-* variables instead of hard-coded values.
   ========================================================================== */

/* ------------  DESIGN TOKENS  ------------ */
:root {
  /* Surfaces */
  --wk-bg:         oklch(97.2% 0 0);      /* page bg */
  --wk-bg-2:       oklch(98.6% 0 0);      /* sidebar/navbar bg */
  --wk-surface:    #FFFFFF;                /* card bg */
  --wk-surface-2:  oklch(98.2% 0 0);       /* table head / hover */

  /* Ink (text) ramp */
  --wk-ink:    #15181C;
  --wk-ink-2:  #242830;
  --wk-ink-3:  #4A5059;
  --wk-ink-4:  #77808B;
  --wk-ink-5:  #B8BCC3;

  /* Lines / borders */
  --wk-line:    #D8D4CB;
  --wk-line-2:  #E4E0D6;
  --wk-line-3:  #EDE9DF;

  /* Accent: blue (primary brand) */
  --wk-accent:      #1481BA;
  --wk-accent-2:    #2E97CC;
  --wk-accent-3:    #0E6A9B;
  --wk-accent-ink:  #0A3E5C;
  --wk-accent-wash: #E7F2F8;

  /* Accents: status + priority */
  --wk-ok:          #3E8F5E;
  --wk-ok-wash:     #E1ECE4;
  --wk-warn:        #D99822;
  --wk-warn-wash:   #F1E4C8;
  --wk-orange:      #BC6525;
  --wk-orange-wash: #F0D8C1;
  --wk-danger:      #B35042;
  --wk-danger-wash: #EFD6CE;
  --wk-neutral-wash:#F1EFE8;

  /* Pill color pairs (bg / ink) */
  --wk-pill-new-bg:   #DCEBF2; --wk-pill-new-ink:   #0E3F56;
  --wk-pill-sched-bg: #F4DFA3; --wk-pill-sched-ink: #5A3F08;
  --wk-pill-hold-bg:  #F1D9D1; --wk-pill-hold-ink:  #50241A;
  --wk-pill-prog-bg:  #BFDCC8; --wk-pill-prog-ink:  #154029;
  --wk-pill-low-bg:   #EAECEF; --wk-pill-low-ink:   #5A6270;

  /* Radii */
  --wk-radius:    6px;
  --wk-radius-sm: 4px;

  /* Shadow */
  --wk-shadow-1: 0 1px 0 rgba(22,25,30,0.02);
  --wk-shadow-pop: 0 8px 24px -10px rgba(22,25,30,0.18);

  /* Fonts */
  --wk-font-sans:    'Open Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wk-font-display: 'Open Sans', ui-sans-serif, system-ui, sans-serif;
  --wk-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ------------  BASE TYPOGRAPHY  ------------ */
html, body {
  font-family: var(--wk-font-sans);
  background: var(--wk-bg);
  color: var(--wk-ink);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.content-wrapper,
.main-footer,
.main-header {
  background: var(--wk-bg);
  color: var(--wk-ink);
  font-family: var(--wk-font-sans);
}
.content-wrapper { background: var(--wk-bg); }

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

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--wk-font-display);
  color: var(--wk-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.content-header h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ------------  PUBLIC NAVBAR (landing / logged-out)  ------------ */
.navbar.bg-dark {
  background: var(--wk-ink) !important;
}
.navbar.bg-dark .navbar-brand,
.navbar.bg-dark .nav-link {
  color: #F6F5F1 !important;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ------------  AUTH PAGES (login, password reset flow)  ------------ */
/* Centered single-column card between the public fixed-top navbar (46px)
   and the footer (~48px). Matches the app card styling. */
.auth-page {
  min-height: calc(100vh - 46px - 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 16px 32px;
  background: var(--wk-bg);
}
.auth-card {
  width: 100%;
  max-width: 400px;
}
.auth-card .card-header {
  text-align: center;
}
.auth-card .card-title {
  display: block;
  float: none;
  font-size: 18px;
  font-weight: 500;
}
.auth-card .card-body p {
  color: var(--wk-ink-3);
  font-size: 13.5px;
}
.auth-meta {
  font-size: 13px;
  color: var(--wk-ink-4);
  text-align: center;
  margin-top: 14px;
}

/* ------------  PUBLIC NAVBAR (logged-out, non-landing: login, password reset, etc.)  ------------ */
/* Mirrors .main-header.navbar so public pages feel like a continuation of the app. */
.public-navbar {
  background: var(--wk-bg-2);
  border-bottom: 1px solid var(--wk-line);
  min-height: 46px;
  padding: 0 24px;
}
.public-navbar > .container {
  min-height: 46px;
  align-items: center;
}
.public-navbar .navbar-brand {
  color: var(--wk-ink);
  font-family: var(--wk-font-display);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.02em;
  font-size: 16px;
  padding: .5rem .75rem .5rem 0;
  margin-right: 0;
}
.public-navbar .navbar-brand:hover {
  color: var(--wk-ink-2);
}
.public-navbar .nav-link {
  color: var(--wk-ink-2);
  font-size: 13px;
  font-weight: 500;
  padding: .5rem .75rem;
}
.public-navbar .nav-link:hover {
  color: var(--wk-ink);
  background: transparent;
}

/* ------------  APP NAVBAR (logged-in topbar)  ------------ */
/* Sticky at every viewport so the topbar (including the mobile hamburger) is
   always reachable while scrolling. z-index sits above content but below the
   mobile sidebar overlay (1045) and its backdrop (1035). */
.main-header.navbar {
  background: var(--wk-bg-2);
  border-bottom: 1px solid var(--wk-line);
  min-height: 46px;
  height: 46px;
  padding: 0 24px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 1040;
}
.main-header.navbar .navbar-nav .nav-link,
.main-header.navbar .navbar-nav .nav-link.font-weight-bold {
  color: var(--wk-ink-2);
  font-size: 13px;
  font-weight: 500;
  padding: .5rem .75rem;
}
/* Left nav (org switcher) shrinks and ellipsizes so the org name never
   pushes into — or past — the right nav items as the viewport narrows.
   The <ul> must stay overflow:visible so the Bootstrap dropdown menu can
   escape the navbar. Ellipsis is enforced on .nav-link below. */
.main-header.navbar > .navbar-nav:first-child {
  min-width: 0;
  flex: 0 1 auto;
}
.main-header.navbar > .navbar-nav:first-child > .nav-item {
  min-width: 0;
  max-width: 100%;
}
.main-header.navbar > .navbar-nav:first-child .nav-link {
  max-width: 100%;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-header.navbar > .navbar-nav.ml-auto {
  flex: 0 0 auto;
  white-space: nowrap;
}
.main-header.navbar .navbar-nav .nav-link:hover {
  color: var(--wk-ink);
  background: transparent;
}
.main-header .dropdown-menu {
  border: 1px solid var(--wk-line);
  border-radius: var(--wk-radius);
  box-shadow: var(--wk-shadow-pop);
  padding: 6px;
}
.main-header .dropdown-menu .dropdown-item {
  border-radius: var(--wk-radius-sm);
  font-size: 13px;
  color: var(--wk-ink-2);
  padding: 6px 10px;
}
.main-header .dropdown-menu .dropdown-item:hover {
  background: var(--wk-surface-2);
  color: var(--wk-ink);
}

/* ------------  SIDEBAR (light)  ------------ */
/* Overrides both sidebar-dark-primary and sidebar-light-primary so the
   theme works no matter which AdminLTE modifier the template uses.
   The aside carries `elevation-4` (AdminLTE's heavy 0 14px 28px shadow);
   we want a flat 1px right border, not a drop shadow, so suppress it. */
.main-sidebar,
.main-sidebar.sidebar-dark-primary,
.main-sidebar.sidebar-light-primary {
  /* Compact sidebar: was AdminLTE's 250px default. Sized to fit the longest
     static nav label ("Submission Link") with breathing room. Cascades into
     content/header/footer margins below and the user-menu width override. */
  width: 220px;
  background-color: var(--wk-bg-2) !important;
  border-right: 1px solid var(--wk-line);
  box-shadow: none !important;
}
.main-sidebar .brand-link,
.main-sidebar.sidebar-dark-primary .brand-link,
.main-sidebar.sidebar-light-primary .brand-link {
  /* Match the compact sidebar width. AdminLTE's bare `.brand-link {width:250px}`
     and `.main-sidebar:hover .brand-link {width:250px}` rules would otherwise
     overflow the 220px sidebar by 30px on hover. Higher specificity here wins
     over both. The collapsed-state 4.6rem !important override still wins when
     sidebar-no-expand is hovered/focused. */
  width: 220px;
  background-color: var(--wk-bg-2) !important;
  border-bottom: 1px solid var(--wk-line);
  color: var(--wk-ink) !important;
  min-height: 46px;
  height: 46px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-family: var(--wk-font-display);
}
.main-sidebar .brand-link .brand-text,
.main-sidebar.sidebar-dark-primary .brand-link .brand-text,
.main-sidebar.sidebar-light-primary .brand-link .brand-text {
  color: var(--wk-ink) !important;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.02em;
  font-size: 15px;
}
.main-sidebar .brand-link .brand-image {
  max-height: 28px;
  width: 28px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 8px;
  margin-right: 2px;
  opacity: 1;
}

/* Sidebar nav items */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link,
.main-sidebar .nav-sidebar > .nav-item > .nav-link {
  color: var(--wk-ink-2) !important;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 12px;
  margin: 2px 8px;
  border-radius: var(--wk-radius);
  display: flex;
  align-items: center;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link:hover,
.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
  background: var(--wk-line-3) !important;
  color: var(--wk-ink) !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  background: var(--wk-ink) !important;
  color: #F6F5F1 !important;
  box-shadow: none;
}
.sidebar-dark-primary .nav-sidebar .nav-link.active p,
.sidebar-light-primary .nav-sidebar .nav-link.active p,
.main-sidebar .nav-sidebar .nav-link.active p {
  color: #F6F5F1 !important;
}
.main-sidebar .nav-sidebar .nav-link .nav-icon {
  color: var(--wk-ink-3);
  font-size: 14px;
  margin-right: 10px;
  width: 16px;
  text-align: center;
}
.main-sidebar .nav-sidebar .nav-link.active .nav-icon {
  color: #F6F5F1;
}
.main-sidebar .nav-sidebar .nav-link p {
  color: var(--wk-ink-2);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  /* AdminLTE sets `white-space: normal` here, which lets multi-word labels
     ("Search Jobs", "Submission Link") wrap to a second line during the
     viewport-crossing reflow when the auto-collapse toggle fires. The
     sidebar is statically sized so wrapping should never happen — pin to
     nowrap so the label stays on one line in every transient state. */
  white-space: nowrap;
}
.main-sidebar .nav-sidebar .nav-header {
  color: var(--wk-ink-4) !important;
  background: transparent !important;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  padding: 14px 20px 4px;
}
.main-sidebar .sidebar {
  padding-bottom: 12px;
  overflow-x: hidden !important;
}
/* AdminLTE sets `overflow-y: hidden` on .main-sidebar without setting
   overflow-x. Per CSS spec, when one axis is non-visible the other axis is
   coerced from `visible` to `auto`, so the aside ends up with
   overflow-x:auto. With ~1px of subpixel content overflow, that surfaces a
   barely-movable horizontal scrollbar. Set overflow-x explicitly to suppress
   it. */
.main-sidebar {
  overflow-x: hidden !important;
}

/* Push content/header/footer to match the compact sidebar width. Mirrors
   AdminLTE's full selector — body:not()×3 .{content-wrapper,main-header,main-footer}
   at 0,4,1 — so source order wins. The mobile (≤500px) and collapsed overrides
   further down / in base.html still take precedence in their states because
   they use !important. */
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header,
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer {
  margin-left: 220px;
}

/* ------------  USER CARD (sidebar bottom)  ------------ */
/* Make the sidebar a flex column so the user card pins to the bottom while
   the nav scrolls above it. The brand-link stays top, .sidebar takes the
   remaining vertical space, .wk-user-card-wrap anchors at the bottom. */
.main-sidebar {
  display: flex;
  flex-direction: column;
}
.main-sidebar .sidebar {
  flex: 1 1 auto;
  min-height: 0;
}
.wk-user-card-wrap {
  flex: 0 0 auto;
  border-top: 1px solid var(--wk-line);
  padding: 8px;
  background: var(--wk-bg-2);
  position: relative;
}
.wk-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: var(--wk-radius);
  color: var(--wk-ink-2);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}
.wk-user-card:hover,
.wk-user-card[aria-expanded="true"] {
  background: var(--wk-line-3);
  color: var(--wk-ink);
}
.wk-user-card:focus { outline: none; }
.wk-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wk-ink-2) 0%, var(--wk-ink-3) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}
.wk-user-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-user-chevron {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--wk-ink-4);
  transition: transform 120ms ease;
}
.wk-user-card[aria-expanded="true"] .wk-user-chevron {
  transform: rotate(180deg);
}

/* The dropdown menu pops upward (Bootstrap .dropup). Sized to fit inside the
   220px sidebar with the 8px wrap padding on either side (220 - 16 = 204). */
.wk-user-menu {
  width: 204px;
  min-width: 0;
  border: 1px solid var(--wk-line);
  border-radius: var(--wk-radius);
  box-shadow: var(--wk-shadow-pop);
  padding: 6px;
  margin-bottom: 6px;
  background: var(--wk-surface);
}
.wk-user-menu-header {
  padding: 8px 10px 6px;
}
.wk-user-menu-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--wk-ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-user-menu-email {
  font-size: 12px;
  color: var(--wk-ink-4);
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-user-menu .dropdown-divider {
  border-top-color: var(--wk-line);
  margin: 4px 0;
}
.wk-user-menu .dropdown-item {
  border-radius: var(--wk-radius-sm);
  padding: 7px 10px;
  font-size: 14px;
  color: var(--wk-ink-2);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.wk-user-menu .dropdown-item:hover,
.wk-user-menu .dropdown-item:focus {
  background: var(--wk-line-3);
  color: var(--wk-ink);
}
.wk-user-menu .dropdown-item i {
  color: var(--wk-ink-4);
  width: 16px;
  text-align: center;
  margin-right: 10px;
  font-size: 13px;
}
.wk-user-menu-form {
  margin: 0;
}
.wk-user-menu-form .dropdown-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

/* Collapsed sidebar: show only the avatar, hide name + chevron. */
.sidebar-mini.sidebar-collapse .wk-user-card-wrap {
  padding: 8px 0;
}
.sidebar-mini.sidebar-collapse .wk-user-card {
  justify-content: center;
  padding: 6px;
  gap: 0;
}
.sidebar-mini.sidebar-collapse .wk-user-name,
.sidebar-mini.sidebar-collapse .wk-user-chevron {
  display: none !important;
}

/* When the user card dropdown is open, the menu (204px wide) can extend
   past the sidebar — especially when the sidebar is collapsed to ~64px.
   Override overflow:hidden on .main-sidebar so the menu isn't clipped.
   The chained .sidebar-mini.sidebar-collapse selectors are needed to
   beat the equally-specific overflow-x:hidden rule in base.html's
   inline <style> block (loaded last, would otherwise win the cascade). */
.main-sidebar:has(.wk-user-card[aria-expanded="true"]),
.sidebar-mini.sidebar-collapse .main-sidebar:has(.wk-user-card[aria-expanded="true"]) {
  overflow: visible !important;
}

/* ------------  BREADCRUMB  ------------ */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 13.5px;
  color: var(--wk-ink-4);
}
.breadcrumb-item a {
  color: var(--wk-accent);
  text-decoration: none;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--wk-ink-5);
  content: "/";
}
.breadcrumb-item.active,
.breadcrumb-item.active a {
  color: var(--wk-ink-4);
}

/* ------------  BUTTONS  ------------ */
.btn {
  font-family: var(--wk-font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--wk-radius);
  border: 1px solid var(--wk-line);
  background: var(--wk-surface);
  color: var(--wk-ink-2);
  transition: background 0.15s, border-color 0.15s;
  line-height: 1.25;
}
.btn:hover { background: var(--wk-surface-2); color: var(--wk-ink); }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px var(--wk-accent-wash); outline: none; }

.btn-primary {
  background: var(--wk-accent);
  border-color: var(--wk-accent);
  color: #FFFFFF;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--wk-accent-3);
  border-color: var(--wk-accent-3);
  color: #FFFFFF;
}

.btn-secondary {
  background: var(--wk-surface);
  border-color: var(--wk-line);
  color: var(--wk-ink-2);
}
.btn-secondary:hover {
  background: var(--wk-surface-2);
  border-color: var(--wk-line);
  color: var(--wk-ink);
}

.btn-outline-secondary {
  background: var(--wk-surface);
  border-color: var(--wk-line);
  color: var(--wk-ink-2);
}
.btn-outline-secondary:hover {
  background: var(--wk-surface-2);
  border-color: var(--wk-line);
  color: var(--wk-ink);
}

.btn-danger {
  background: var(--wk-danger);
  border-color: var(--wk-danger);
  color: #FFFFFF;
}
.btn-danger:hover { background: #9A4137; border-color: #9A4137; color: #FFFFFF; }

.btn-success {
  background: var(--wk-ok);
  border-color: var(--wk-ok);
  color: #FFFFFF;
}
.btn-success:hover { background: #327A4D; border-color: #327A4D; }

.btn-warning {
  background: var(--wk-warn);
  border-color: var(--wk-warn);
  color: #15181C;
}
.btn-warning:hover { background: #BF851C; border-color: #BF851C; color: #15181C; }

.btn-link {
  color: var(--wk-accent);
  font-weight: 500;
}
.btn-link:hover { color: var(--wk-accent-3); }

.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-lg { padding: 11px 18px; font-size: 15px; }

/* card-tool icon buttons (collapse/expand/etc.) */
.btn-tool {
  width: 28px; height: 28px;
  padding: 0;
  border-radius: var(--wk-radius-sm);
  border: none;
  background: transparent;
  color: var(--wk-ink-4);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.btn-tool:hover {
  background: var(--wk-surface-2);
  color: var(--wk-ink-2);
}
.btn-tool:focus, .btn-tool.focus { box-shadow: none; }
.btn-tool:focus-visible { box-shadow: 0 0 0 2px var(--wk-accent-wash); }

/* Icon-only borderless button (delete x, trash, kebab, etc.).
   Strips the .btn border + focus ring; adds a subtle hover background and
   a keyboard-only focus ring. */
.wk-icon-btn {
  width: 32px; height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--wk-ink-4);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  line-height: 1;
}
.wk-icon-btn:hover {
  background: var(--wk-surface-2);
  color: var(--wk-ink-2);
}
.wk-icon-btn:focus, .wk-icon-btn.focus { box-shadow: none; outline: none; }
.wk-icon-btn:focus-visible { box-shadow: 0 0 0 2px var(--wk-accent-wash); }
.wk-icon-btn.text-danger:hover { background: #FEF2F2; color: #B91C1C; }
.wk-icon-btn-sm { width: 30px; height: 30px; font-size: 14px; }

/* ------------  CARDS  ------------ */
.card {
  background: var(--wk-surface);
  border: 1px solid var(--wk-line);
  border-radius: var(--wk-radius);
  box-shadow: var(--wk-shadow-1);
  position: relative;
  overflow: hidden;
}
/* top accent bar — uses --wk-card-accent which each .card-* variant sets */
.card.card-outline::before,
.card.card-primary::before,
.card.card-secondary::before,
.card.card-danger::before,
.card.card-success::before,
.card.card-warning::before,
.card.card-info::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--wk-card-accent, var(--wk-accent));
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}
.card.card-outline.card-primary,
.card.card-primary               { --wk-card-accent: var(--wk-accent); border-top: 0; }
.card.card-outline.card-secondary,
.card.card-secondary             { --wk-card-accent: var(--wk-ink-4); border-top: 0; }
.card.card-outline.card-danger,
.card.card-danger                { --wk-card-accent: var(--wk-danger); border-top: 0; }
.card.card-outline.card-success,
.card.card-success               { --wk-card-accent: var(--wk-ok); border-top: 0; }
.card.card-outline.card-warning,
.card.card-warning               { --wk-card-accent: var(--wk-warn); border-top: 0; }
.card.card-outline.card-info,
.card.card-info                  { --wk-card-accent: var(--wk-accent); border-top: 0; }

.card .card-header {
  background: var(--wk-surface);
  border-bottom: 1.5px solid var(--wk-line);
  padding: 13px 16px;
  min-height: 0;
}
.card .card-header.border-0 {
  border-bottom: 1.5px solid var(--wk-line) !important;
}
.card .card-title {
  font-family: var(--wk-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--wk-ink);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  float: none;
}
.card .card-title > i,
.card .card-title .fas,
.card .card-title .far,
.card .card-title .fab {
  color: var(--wk-card-accent, var(--wk-accent));
  font-size: 14px;
  margin-right: 0 !important;
}
.card.card-secondary .card-title > i { color: var(--wk-ink-4); }
/* When a card variant sets --wk-card-accent, let the title icon take that color
   even if the template put .text-muted / .text-* on the <i>. */
.card.card-primary  .card-title > i.text-muted,
.card.card-success  .card-title > i.text-muted,
.card.card-warning  .card-title > i.text-muted,
.card.card-danger   .card-title > i.text-muted,
.card.card-info     .card-title > i.text-muted {
  color: var(--wk-card-accent) !important;
}
.card .card-title small {
  font-size: 13px;
  color: var(--wk-ink-4);
  font-weight: 500;
  margin-left: 6px !important;
}
.card .card-tools { margin-left: auto; display: inline-flex; gap: 2px; float: none; }
.card .card-body { padding: 14px 16px; color: var(--wk-ink-2); font-size: 14px; }
.card .card-body.p-0 { padding: 0; }
.card .card-footer {
  background: var(--wk-surface-2);
  border-top: 1px solid var(--wk-line-2);
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--wk-ink-4);
}
.card .card-footer a { color: var(--wk-accent); font-weight: 500; text-decoration: none; }
.card .card-footer.bg-white { background: var(--wk-surface-2) !important; }
.card .card-header > .card-title + .card-tools { margin-left: auto; }
/* AdminLTE gives card-headers flex with display:flex on parent — make sure it stays clean */
.card > .card-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* ------------  KPI STAT CARDS (.wip-stat-*)  ------------ */
.wip-stat-card {
  background: var(--wk-surface);
  border: 1px solid var(--wk-line);
  border-left: 3px solid var(--wk-ink-5);
  border-radius: var(--wk-radius);
  box-shadow: var(--wk-shadow-1);
  padding: 10px 14px 12px 16px;
  position: relative;
}
.wip-stat-card.stat-secondary { border-left-color: var(--wk-ink-4); }
.wip-stat-card.stat-success   { border-left-color: var(--wk-ok); }
.wip-stat-card.stat-warning   { border-left-color: var(--wk-warn); }
.wip-stat-card.stat-orange    { border-left-color: var(--wk-orange); }
.wip-stat-card.stat-danger    { border-left-color: var(--wk-danger); }

.wip-stat-label {
  font-family: var(--wk-font-sans);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wk-ink);
  font-weight: 700;
  margin-bottom: 2px;
}
.wip-stat-value {
  font-family: var(--wk-font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--wk-ink);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.wip-stat-card.stat-success .wip-stat-value { color: var(--wk-ok); }
.wip-stat-card.stat-warning .wip-stat-value { color: var(--wk-warn); }
.wip-stat-card.stat-orange  .wip-stat-value { color: var(--wk-orange); }
.wip-stat-card.stat-danger  .wip-stat-value { color: var(--wk-danger); }
/* KPI host cards shouldn't get the usual card top bar */
.wip-stat-card,
.card:has(> .card-body > .wip-stat-card) { box-shadow: var(--wk-shadow-1); }
.card > .card-body > .wip-stat-card { border-left-width: 3px; }
/* suppress double-border when KPI is wrapped in a .card */
.card.shadow-none { box-shadow: none !important; border: none; background: transparent; }
.card.shadow-none::before { display: none; }

/* KPI row responsive behavior (overview page).
   ≥1080px: full styling, 4 cards per row.
   650–1079px: compact styling so longer labels ("Scheduled This Week",
     "New This Week") fit better at narrower 4-up widths.
   <650px:    stack 2-up. Overrides Bootstrap's col-sm-3 (which kicks in at
     576px) so cards never crush at 580–649. */

/* Always equalize card heights inside the KPI row, so a single label wrapping
   to 2 lines doesn't make one card taller than its neighbors. The visible
   card surface is the inner .wip-stat-card (the .card.shadow-none wrapper is
   transparent), so the stretch must reach all the way through. */
.kpi-row > [class*="col-"] { display: flex; }
.kpi-row > [class*="col-"] > .card.shadow-none {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.kpi-row > [class*="col-"] > .card.shadow-none > .card-body.wip-stat-card {
  flex: 1 1 auto;
}

@media (max-width: 1079.98px) {
  .kpi-row .wip-stat-card { padding: 7px 10px 9px 12px; }
  .kpi-row .wip-stat-label { font-size: 10.5px; letter-spacing: 0.06em; }
  .kpi-row .wip-stat-value { font-size: 22px; }
}
@media (max-width: 649.98px) {
  .kpi-row { row-gap: 0.5rem; }
  .kpi-row > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 0 !important;
  }
}

/* ------------  TABLES  ------------ */
.table {
  color: var(--wk-ink-2);
  font-size: 13px;
  margin-bottom: 0;
}
.table thead.thead-light th,
.table thead th {
  background: var(--wk-surface-2);
  color: var(--wk-ink-3);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-top: none;
  border-bottom: 1.5px solid var(--wk-line);
  padding: 8px 10px;
  white-space: nowrap;
}
.table thead th:first-child { padding-left: 16px; }
.table thead th:last-child  { padding-right: 16px; }

.table tbody td {
  padding: 8px 10px;
  border-top: none;
  border-bottom: 1px solid var(--wk-line-2);
  vertical-align: middle;
  color: var(--wk-ink-2);
}
.table tbody td:first-child { padding-left: 16px; }
.table tbody td:last-child  { padding-right: 16px; }
.table tbody tr:last-child td { border-bottom: none; }

.table-hover tbody tr:hover,
.table-hover tbody tr:hover td { background: var(--wk-surface-2); color: var(--wk-ink); }

.table.table-sm td, .table.table-sm th { padding: 7px 10px; }
.table.table-sm thead th { padding: 8px 10px; }

/* Sortable header hover/icon */
.wip-sort-th {
  cursor: pointer;
  user-select: none;
}
.wip-sort-th:hover {
  background-color: var(--wk-line-3) !important;
  color: var(--wk-ink-2);
}
.wip-sort-icon {
  font-size: 0.65rem;
  margin-left: 0.35rem;
  opacity: 0.35;
}
.wip-sort-th.sort-asc .wip-sort-icon,
.wip-sort-th.sort-desc .wip-sort-icon {
  opacity: 1;
  color: var(--wk-ink-2);
}

/* ------------  BADGES (status + priority)  ------------ */
.badge {
  font-family: var(--wk-font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  padding: 2px 8px;
  border-radius: var(--wk-radius-sm);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
/* Status — neutral/new */
.badge-secondary {
  background: var(--wk-pill-new-bg);
  color: var(--wk-pill-new-ink);
  border: none;
}
/* Status — info / primary */
.badge-info,
.badge-primary {
  background: var(--wk-accent-wash);
  color: var(--wk-accent-ink);
  border: none;
}
/* In Progress / success */
.badge-success {
  background: var(--wk-pill-prog-bg);
  color: var(--wk-pill-prog-ink);
  border: none;
}
/* Scheduled / warning / Medium priority */
.badge-warning {
  background: var(--wk-pill-sched-bg);
  color: var(--wk-pill-sched-ink);
  border: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11.5px;
}
/* Danger / High priority */
.badge-danger {
  background: var(--wk-pill-hold-bg);
  color: var(--wk-pill-hold-ink);
  border: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11.5px;
}

/* ------------  INACTIVE MARKER  ------------ */
/* Inline "(Inactive)" marker for users/orgs that have been deactivated.
   Italic + brand-danger color is intentionally distinct from solid status
   pills so it never reads as a "status." */
.user-inactive {
  color: var(--wk-danger);
  font-style: italic;
  font-weight: 400;
}

/* ------------  ALERTS  ------------ */
.alert {
  border-radius: var(--wk-radius);
  border: 1px solid transparent;
  padding: 12px 16px;
  font-size: 13.5px;
}
.alert-danger {
  background: var(--wk-danger-wash);
  border-color: var(--wk-danger);
  color: var(--wk-pill-hold-ink);
}
.alert-warning {
  background: var(--wk-warn-wash);
  border-color: var(--wk-warn);
  color: var(--wk-pill-sched-ink);
}
.alert-success {
  background: var(--wk-ok-wash);
  border-color: var(--wk-ok);
  color: var(--wk-pill-prog-ink);
}
.alert-info {
  background: var(--wk-accent-wash);
  border-color: var(--wk-accent);
  color: var(--wk-accent-ink);
}

/* ------------  MODALS  ------------ */
.modal-content {
  border: 1px solid var(--wk-line);
  border-radius: var(--wk-radius);
  box-shadow: var(--wk-shadow-pop);
}
.modal-header {
  border-bottom: 1.5px solid var(--wk-line);
  padding: 14px 16px;
}
.modal-header .modal-title {
  font-family: var(--wk-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--wk-ink);
  letter-spacing: -0.01em;
}
.modal-footer {
  border-top: 1px solid var(--wk-line-2);
  padding: 12px 16px;
  background: var(--wk-surface-2);
}

/* ------------  FORMS  ------------ */
.form-control {
  font-family: var(--wk-font-sans);
  font-size: 14px;
  color: var(--wk-ink);
  background: var(--wk-surface);
  border: 1px solid var(--wk-line);
  border-radius: var(--wk-radius-sm);
  padding: 7px 10px;
  height: auto;
  line-height: 1.45;
}
.form-control:focus {
  border-color: var(--wk-accent);
  box-shadow: 0 0 0 3px var(--wk-accent-wash);
  outline: none;
}
label { font-weight: 600; font-size: 13px; color: var(--wk-ink-2); }
.form-group label { margin-bottom: 4px; }

/* ------------  TEXT COLOR UTILITIES  ------------ */
.text-primary { color: var(--wk-accent) !important; }
.text-success { color: var(--wk-ok) !important; }
.text-warning { color: var(--wk-warn) !important; }
.text-orange  { color: var(--wk-orange) !important; }
.text-danger  { color: var(--wk-danger) !important; }
.text-muted   { color: var(--wk-ink-4) !important; }
.text-secondary { color: var(--wk-ink-3) !important; }

/* Background utilities used on stat wrappers etc. */
.bg-white { background-color: var(--wk-surface) !important; }

/* ------------  FOOTER  ------------ */
.main-footer {
  background: var(--wk-bg-2);
  border-top: 1px solid var(--wk-line);
  color: var(--wk-ink-4);
  font-size: 12.5px;
  padding: 12px 16px;
}
.main-footer a { color: var(--wk-ink-4); }
.main-footer a:hover { color: var(--wk-ink-2); }

/* ------------  CONTENT SECTIONS  ------------ */
/* Selectors include .content-wrapper > X to outrank AdminLTE's own
   `.content-wrapper > .content { padding: 0 0.5rem; }` rule. */
.content-wrapper > .content-header,
.content-header {
  padding: 20px 32px 6px;
  background: transparent;
}
.content-wrapper > .content,
.content {
  padding: 6px 32px 32px;
}
/* Flatten nested container-fluid padding so cols align to the section edge
   (plus their own 15px col padding). Without this the h1 in content-header
   appears offset right of the cards below it. */
.content-header > .container-fluid,
.content > .container-fluid {
  padding-left: 0;
  padding-right: 0;
}
.content-header h1.m-0,
.content-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--wk-ink);
  letter-spacing: -0.02em;
}

/* ------------  TRIAL BANNER + MESSAGE ALERTS PADDING  ------------ */
.content-wrapper > .alert-dismissible {
  margin: 12px 32px 0;
}

/* ------------  RESPONSIVE NAV OVERRIDES  ------------ */
/* When the sidebar is collapsed, icon color still visible */
.sidebar-mini.sidebar-collapse .main-sidebar .nav-sidebar .nav-link .nav-icon {
  color: var(--wk-ink-3);
}
.sidebar-mini.sidebar-collapse .main-sidebar .nav-sidebar .nav-link.active .nav-icon {
  color: #F6F5F1;
}

/* ------------  MOBILE NAV (≤500px overlay pattern)  ------------ */
/* At ≤500px the sidebar hides and is reachable only via a hamburger in the
   topnav. The sidebar slides in over the page content with a darkening
   backdrop. The topnav becomes sticky so it's always reachable. Above 500px
   nothing here applies — desktop/tablet behavior is unchanged. */
.wk-mobile-hamburger {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--wk-ink-2);
  font-size: 18px;
  width: 40px;
  height: 40px;
  border-radius: var(--wk-radius);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.wk-mobile-hamburger:hover,
.wk-mobile-hamburger:focus {
  background: var(--wk-line-3);
  color: var(--wk-ink);
  outline: none;
}
.wk-mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1035;
}

@media (max-width: 500px) {
  .wk-mobile-hamburger { display: inline-flex; }

  /* Sidebar slides in from the left as an overlay. Force the full 220px
     expanded look even if the user previously toggled .sidebar-collapse on
     desktop. body. prefix outranks the existing .sidebar-mini.sidebar-collapse
     overrides in base.html's inline <style> block. */
  .main-sidebar,
  body.sidebar-mini.sidebar-collapse .main-sidebar,
  body.sidebar-mini.sidebar-collapse .main-sidebar::before {
    width: 220px !important;
    margin-left: 0 !important;
    transform: translateX(-100%);
    transition: transform 220ms ease !important;
    z-index: 1045 !important;
    box-shadow: none;
  }
  /* Open state — match the hide-rule specificity (body + 3 classes) so the
     translateX(0) wins regardless of whether AdminLTE has auto-applied
     .sidebar-collapse at this viewport width. */
  body.sidebar-mini.wk-mobile-nav-open .main-sidebar,
  body.sidebar-mini.sidebar-collapse.wk-mobile-nav-open .main-sidebar {
    transform: translateX(0);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
  }
  body.wk-mobile-nav-open .wk-mobile-nav-backdrop { display: block; }
  body.wk-mobile-nav-open { overflow: hidden; }

  /* Reveal the labels/headers/user-card text that the desktop collapsed
     state had hidden. */
  body.sidebar-mini.sidebar-collapse .brand-text,
  body.sidebar-mini.sidebar-collapse .sidebar .nav-sidebar .nav-link p,
  body.sidebar-mini.sidebar-collapse .sidebar .nav-sidebar .nav-header,
  body.sidebar-mini.sidebar-collapse .wk-user-name,
  body.sidebar-mini.sidebar-collapse .wk-user-chevron {
    display: revert !important;
    visibility: visible !important;
  }
  body.sidebar-mini.sidebar-collapse .wk-user-card {
    justify-content: flex-start !important;
    padding: 6px 8px !important;
    gap: 10px !important;
  }
  body.sidebar-mini.sidebar-collapse .wk-user-card-wrap { padding: 8px !important; }

  /* Kill ALL transitions and animations on sidebar contents at this width.
     AdminLTE has transitions on .nav-link width, .nav-link p margin-left,
     plus fadeIn/fadeOut animations driven by :hover and .sidebar-focused
     states — none of which make sense in overlay mode (the sidebar is
     either fully visible or fully off-canvas). The slide-in transition on
     .main-sidebar itself is preserved because it's a direct child rule. */
  .main-sidebar .sidebar,
  .main-sidebar .sidebar *,
  .main-sidebar .brand-link,
  .main-sidebar .brand-link *,
  .main-sidebar .wk-user-card-wrap,
  .main-sidebar .wk-user-card-wrap * {
    transition: none !important;
    animation: none !important;
  }

  /* Pin labels/brand-text to their visible/expanded values so AdminLTE's
     hover/focus rules (which try to fade them out under .sidebar-no-expand)
     can't change layout. body. prefix outranks AdminLTE's specificity. */
  body.sidebar-mini.sidebar-collapse .sidebar-no-expand.main-sidebar .sidebar .brand-text,
  body.sidebar-mini.sidebar-collapse .sidebar-no-expand.main-sidebar .sidebar .nav-sidebar .nav-link p,
  body.sidebar-mini.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .sidebar .brand-text,
  body.sidebar-mini.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .sidebar .nav-sidebar .nav-link p,
  body.sidebar-mini.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused .sidebar .brand-text,
  body.sidebar-mini.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused .sidebar .nav-sidebar .nav-link p {
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: 0 !important;
    width: auto !important;
    display: inline-block !important;
  }

  /* Pin the nav-link itself to the expanded width. AdminLTE collapses
     .nav-link to 2.5rem in sidebar-mini.sidebar-collapse and expands it
     back to 242px on :hover or .sidebar-focused — that toggle is what
     reads as "spastic" inside the open overlay. Lock width regardless of
     hover/focus state. Use auto so the link fits inside .sidebar's
     content area (220px - 14px sidebar padding - 16px nav-link margin =
     ~190px); a fixed pixel value would overflow and make the browser
     scroll-into-view on hover, shifting the layout 2px. */
  body.sidebar-mini.sidebar-collapse .sidebar-no-expand.main-sidebar .sidebar .nav-sidebar .nav-link,
  body.sidebar-mini.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .sidebar .nav-sidebar .nav-link,
  body.sidebar-mini.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused .sidebar .nav-sidebar .nav-link {
    width: auto !important;
  }

  /* Pin the brand-link to fill the sidebar width regardless of hover/focus.
     AdminLTE's sidebar-no-expand:hover rule shrinks brand-link to 4.6rem,
     which collapses its border-bottom to a partial-width line (the rest of
     the strip below "Workari" then has nothing drawing it). Stretch to 220px
     so the border-bottom always spans the full sidebar. */
  body.sidebar-mini.sidebar-collapse .sidebar-no-expand.main-sidebar .brand-link,
  body.sidebar-mini.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .brand-link,
  body.sidebar-mini.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused .brand-link {
    width: 220px !important;
  }

  /* AdminLTE drops .nav-icon margin-right from 10px → 0 on hover/focus,
     which shifts every label 10px sideways when the cursor enters the
     sidebar. Lock it consistently so the labels never reposition. */
  body.sidebar-mini.sidebar-collapse .sidebar-no-expand.main-sidebar .sidebar .nav-link .nav-icon,
  body.sidebar-mini.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .sidebar .nav-link .nav-icon,
  body.sidebar-mini.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused .sidebar .nav-link .nav-icon {
    margin-right: 0.5rem !important;
  }

  /* Content + footer + topnav reclaim full width regardless of collapse state. */
  .content-wrapper,
  .main-footer,
  .main-header,
  body.sidebar-mini.sidebar-collapse .content-wrapper,
  body.sidebar-mini.sidebar-collapse .main-footer,
  body.sidebar-mini.sidebar-collapse .main-header {
    margin-left: 0 !important;
  }

  /* The desktop "Collapse" toggle in the sidebar makes no sense at this
     width — the sidebar is an overlay, not a collapsible rail. Hide the row. */
  .nav-sidebar .nav-item:has(> .nav-link[data-widget="pushmenu"]) {
    display: none;
  }
}

/* ------------  PRINT (safety)  ------------ */
@media print {
  body { background: #FFFFFF; }
  .main-sidebar, .main-header, .main-footer { display: none !important; }
  .content-wrapper { margin-left: 0 !important; }
}