/* ============================================================================
   Star Health — design-system layer for the legal desk
   ----------------------------------------------------------------------------
   Purely additive CSS loaded after the Creative theme and base.html: nothing
   here changes layout, geometry, z-index or behaviour. It restates colour,
   type, radius, border and shadow so the product reads as part of the Star
   Health ecosystem rather than as a separately branded tool.

   Palette follows the 2026 Star Health logo (img/star-health-logo*.png,
   single-colour navy #173172) and the type and neutrals of starhealth.in:
     navy   #173172 / #0f214c             buttons, active states, icons
     link   #2249aa                       text links (the logo navy is too close
                                          to body text to read as a link)
     ink    #122659                       page titles, KPI numbers
     coral  #ee744d                       sparing accent (notification badge)
     soft   #e7ebf6 / #f2f4f7             tinted surfaces
     line   #e4e4e7 / #e5e7eb             borders
     type   Poppins (display), Manrope (body)

   Removing the <link> to this file restores the previous appearance exactly.
   ========================================================================= */

/* ── Fonts (self-hosted, split by unicode-range so a page only fetches the
      subsets it actually renders; ₹ lives in latin-ext / devanagari) ─────── */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-devanagari-400.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-devanagari-500.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-devanagari-600.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-devanagari-700.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --sh-navy:            #173172;   /* primary: buttons, active states (the logo navy) */
  --sh-navy-deep:       #0f214c;   /* hover / pressed */
  --sh-navy-ink:        #122659;   /* deep navy: page titles, KPI numbers */
  --sh-navy-text:       #173172;   /* navy as running text / icons */
  --sh-navy-soft:       #e7ebf6;   /* tinted surface */
  --sh-navy-tint:       rgba(23, 49, 114, .08);
  --sh-navy-tint-2:     rgba(23, 49, 114, .14);
  --sh-blue:            #2249aa;   /* links — a lighter step of the logo navy */
  --sh-blue-hover:      #173172;
  --sh-blue-soft:       #e7ebf6;
  --sh-coral:           #ee744d;   /* accent — used sparingly */
  --sh-coral-soft:      #fff3e8;

  /* Neutrals */
  --sh-ink:             #1e2235;
  --sh-ink-2:           #3d4258;
  --sh-ink-muted:       #5b5c75;
  --sh-ink-faint:       #8b8fa6;
  --sh-line:            #e4e4e7;
  --sh-line-soft:       #eef0f4;
  --sh-line-strong:     #d5d9e3;
  --sh-surface:         #ffffff;
  --sh-surface-alt:     #f5f6fa;
  --sh-surface-2:       #f2f4f7;
  --sh-bg:              #f5f6fa;

  /* Semantic */
  --sh-success:         #2e9e5e;
  --sh-success-soft:    #e8f6ee;
  --sh-warning:         #d97706;
  --sh-warning-soft:    #fff5e6;
  --sh-danger:          #d63b3b;
  --sh-danger-soft:     #fdeeee;
  --sh-info:            #0e7fa8;
  --sh-info-soft:       #e6f5fb;

  /* Shape */
  --sh-radius-sm:       6px;
  --sh-radius:          8px;
  --sh-radius-lg:       12px;
  --sh-shadow-xs:       0 1px 2px rgba(23, 49, 114, .05);
  --sh-shadow-sm:       0 1px 3px rgba(23, 49, 114, .06), 0 1px 2px rgba(23, 49, 114, .04);
  --sh-shadow-md:       0 6px 18px rgba(23, 49, 114, .08);
  --sh-shadow-lg:       0 14px 34px rgba(23, 49, 114, .12);
  --sh-focus-ring:      0 0 0 3px rgba(23, 49, 114, .18);

  /* Type */
  --sh-font-body:       "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
                        Roboto, "Helvetica Neue", Arial, sans-serif;
  --sh-font-display:    "Poppins", "Manrope", -apple-system, BlinkMacSystemFont,
                        "Segoe UI", Roboto, Arial, sans-serif;

  /* ── Compatibility aliases. Older module CSS and a handful of templates
        still read the --star-* names; they now resolve to the brand tokens. */
  --star-primary:          var(--sh-navy);
  --star-primary-soft:     var(--sh-navy-soft);
  --star-accent:           var(--sh-coral);
  --star-accent-soft:      var(--sh-coral-soft);
  --star-ink:              var(--sh-ink);
  --star-ink-muted:        var(--sh-ink-muted);
  --star-line:             var(--sh-line);
  --star-surface:          var(--sh-surface);
  --star-surface-alt:      var(--sh-surface-alt);
  --star-font:             var(--sh-font-body);
  --star-radius:           var(--sh-radius);
  --star-focus-ring:       var(--sh-focus-ring);

  /* Status semantic tones (used by .status-pill-*) */
  --status-pending-bg:     #fff7e6;
  --status-pending-fg:     #a15c00;
  --status-pending-br:     #f5d48a;

  --status-registered-bg:  var(--sh-blue-soft);
  --status-registered-fg:  #1d4ed8;
  --status-registered-br:  #bfd7fb;

  --status-disposed-bg:    #f1f2f6;
  --status-disposed-fg:    #4b5064;
  --status-disposed-br:    #d5d9e3;

  --status-open-bg:        var(--sh-success-soft);
  --status-open-fg:        #176a3f;
  --status-open-br:        #b9e5c9;

  --status-defective-bg:   var(--sh-danger-soft);
  --status-defective-fg:   #b02a2a;
  --status-defective-br:   #f5b8b8;

  /* Next-date relative labels */
  --date-today-fg:         #a15c00;
  --date-tomorrow-fg:      var(--sh-blue);
  --date-upcoming-fg:      var(--sh-ink-2);
  --date-past-fg:          #b02a2a;
  --date-iso-fg:           var(--sh-ink-faint);
}
/* ── Existing list-page components (status pills, date cells, zone pills,
      filter chips, closed-cases banner, shimmer) — unchanged in shape, now
      reading the brand tokens above. ─────────────────────────────────────── */
/* ── Status pills ────────────────────────────────────────────────────────── */
.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid transparent;
  vertical-align: middle;
}
.status-pill--pending     { background: var(--status-pending-bg);    color: var(--status-pending-fg);    border-color: var(--status-pending-br); }
.status-pill--registered  { background: var(--status-registered-bg); color: var(--status-registered-fg); border-color: var(--status-registered-br); }
.status-pill--disposed    { background: var(--status-disposed-bg);   color: var(--status-disposed-fg);   border-color: var(--status-disposed-br); }
.status-pill--open        { background: var(--status-open-bg);       color: var(--status-open-fg);       border-color: var(--status-open-br); }
.status-pill--defective   { background: var(--status-defective-bg);  color: var(--status-defective-fg);  border-color: var(--status-defective-br); }
.status-pill--neutral     { background: var(--status-disposed-bg);   color: var(--status-disposed-fg);   border-color: var(--status-disposed-br); }

/* ── Next-date relative labels ───────────────────────────────────────────── */
.date-cell              { line-height: 1.25; }
.date-cell__label       { font-weight: 600; font-size: 12px; }
.date-cell__label--today    { color: var(--date-today-fg); }
.date-cell__label--tomorrow { color: var(--date-tomorrow-fg); }
.date-cell__label--upcoming { color: var(--date-upcoming-fg); }
.date-cell__label--past     { color: var(--date-past-fg); }
.date-cell__iso         { display: block; font-size: 11px; color: var(--date-iso-fg); margin-top: 1px; }

/* ── Table polish (scoped to the main case listing) ──────────────────────── */
#kt_project_users_table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: var(--sh-surface-alt) !important;
}
#kt_project_users_table tbody tr {
  transition: background-color .15s ease;
}
#kt_project_users_table tbody tr:hover {
  background-color: var(--star-surface-alt);
}
#kt_project_users_table tbody td {
  padding-top: .45rem;
  padding-bottom: .45rem;    /* row density — from ~64px to ~48px */
}

/* ── Shimmer skeleton (replaces "Loading..." text) ───────────────────────── */
.star-shimmer {
  display: inline-block;
  min-width: 36px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #eceef3 25%, #f5f6fa 37%, #eceef3 63%);
  background-size: 400% 100%;
  animation: star-shimmer 1.4s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes star-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Zone pill (case list column) ────────────────────────────────────────── */
.zone-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--star-accent-soft);
  color: #9a4a1e;
  border: 1px solid #f7cdb5;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.zone-pill--none {
  background: transparent;
  color: var(--star-ink-muted);
  border-color: var(--star-line);
  font-weight: 500;
}

/* ── Active filter chips bar (Phase D) ───────────────────────────────────── */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 8px 12px;
  margin: 0 0 10px 0;
  background: var(--sh-surface-alt);
  border: 1px solid var(--star-line);
  border-radius: 8px;
  font-size: 12px;
}
.filter-chips__lead {
  color: var(--star-ink-muted);
  font-weight: 600;
  margin-right: 6px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;
  background: #fff;
  border: 1px solid var(--star-line);
  border-radius: 999px;
  line-height: 1.2;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.filter-chip:hover {
  border-color: var(--star-primary);
}
.filter-chip__key {
  color: var(--star-ink-muted);
  font-weight: 500;
}
.filter-chip__val {
  color: var(--star-ink);
  font-weight: 600;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--star-ink-muted);
  background: transparent;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  margin-left: 2px;
}
.filter-chip__x:hover {
  background: var(--star-primary);
  color: #fff;
  text-decoration: none;
}
.filter-chips__clear {
  margin-left: auto;
  color: var(--star-primary);
  font-weight: 600;
  text-decoration: none;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px dashed var(--star-primary);
  font-size: 11px;
}
.filter-chips__clear:hover {
  background: var(--star-primary);
  color: #fff;
  text-decoration: none;
}

/* ── Closed-cases notice banner ──────────────────────────────────────────── */
.closed-hidden-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 0 0 10px 0;
  background: var(--star-accent-soft);
  border: 1px solid #f7cdb5;
  border-radius: 8px;
  font-size: 13px;
  color: var(--star-ink);
}
.closed-hidden-banner__icon {
  color: var(--star-accent);
  font-size: 18px;
  line-height: 1;
}
.closed-hidden-banner__text strong {
  color: var(--star-accent);
  font-weight: 700;
}
.closed-hidden-banner__link {
  margin-left: auto;
  font-weight: 600;
  color: var(--star-primary);
  text-decoration: none;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--star-primary);
  font-size: 12px;
  transition: background .12s ease, color .12s ease;
}
.closed-hidden-banner__link:hover {
  background: var(--star-primary);
  color: #fff;
  text-decoration: none;
}
.closed-hidden-banner--showing-all {
  background: var(--star-surface-alt);
  border-color: var(--star-line);
}
.closed-hidden-banner--showing-all .closed-hidden-banner__icon {
  color: var(--star-ink-muted);
}

/* ── Stat card subtle colour wash ────────────────────────────────────────── */

/* ── Base & typography ───────────────────────────────────────────────────── */

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

body {
  font-family: var(--sh-font-body);
  color: var(--sh-ink);
  background-color: var(--sh-bg) !important;   /* base.html paints #f7f7f7 */
  border-top: 0;                               /* Creative theme's 2px grey rule */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "tnum" 0;
}

.btn,
.form-control,
.custom-select,
.input-group-text,
.dropdown-menu,
.popover,
.tooltip,
.select2-container,
.swal2-popup,
.jq-toast-wrap,
.toastify,
table,
.card,
.card-box {
  font-family: var(--sh-font-body);
}

/* Display face for the hierarchy: page titles, section headings, KPI numbers.
   Sizes are the theme's own — only face, weight, colour and tracking change,
   so nothing reflows. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title,
.header-title,
.card-title,
.modal-title,
.swal2-title {
  font-family: var(--sh-font-display);
  font-weight: 600;
  color: var(--sh-ink);
  letter-spacing: -.012em;
  line-height: 1.3;
}

h1, .h1 { letter-spacing: -.02em; }

.page-title-box .page-title,
.page-title {
  color: var(--sh-navy-ink);
  font-weight: 600;
}

.header-title,
.card-title {
  color: var(--sh-ink);
  font-weight: 600;
}

.sub-header,
.header-title + p,
.card-title + p {
  color: var(--sh-ink-muted);
}

/* KPI / counter numbers: display face with lining, tabular figures so
   columns of numbers stay aligned. */
[data-plugin="counterup"],
.stat-item h4,
.stat-item h3,
.stat-item h2,
.widget-rounded-circle h3,
.widget-rounded-circle h4,
.kpi-value,
.stat-number,
.count-number {
  font-family: var(--sh-font-display);
  font-weight: 600;
  color: var(--sh-navy-ink);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.02em;
}

.stat-item p,
.stat-item .text-muted {
  font-weight: 500;
  letter-spacing: .01em;
}

/* Form labels & small copy */
label,
.form-label,
.col-form-label {
  color: var(--sh-ink-2);
  font-weight: 600;
  font-size: .8125rem;
}

small,
.small,
.font-11,
.font-12,
.font-13 {
  letter-spacing: 0;
}

.text-muted,
small.text-muted,
.text-muted a:not(.btn) {
  color: var(--sh-ink-muted) !important;
}

.text-dark { color: var(--sh-ink) !important; }

b, strong { font-weight: 600; }

hr { border-top-color: var(--sh-line-soft); }

/* Links */
a { color: var(--sh-blue); }
a:hover, a:focus { color: var(--sh-blue-hover); }

/* Selection colour in the brand */
::selection { background: var(--sh-navy-tint-2); color: var(--sh-ink); }

/* ── Brand colour utilities (theme's #3283f6 → Star navy) ────────────────── */

.text-primary,
a.text-primary:hover,
a.text-primary:focus { color: var(--sh-navy) !important; }

.bg-primary { background-color: var(--sh-navy) !important; }
.bg-soft-primary { background-color: var(--sh-navy-soft) !important; }
.border-primary { border-color: var(--sh-navy) !important; }

.bg-success { background-color: var(--sh-success) !important; }
.bg-danger  { background-color: var(--sh-danger) !important; }
.bg-warning { background-color: var(--sh-warning) !important; }
.bg-info    { background-color: var(--sh-info) !important; }
.text-success { color: var(--sh-success) !important; }
.text-danger  { color: var(--sh-danger) !important; }
.text-warning { color: var(--sh-warning) !important; }
.text-info    { color: var(--sh-info) !important; }

.bg-light { background-color: var(--sh-surface-alt) !important; }

.progress { background-color: var(--sh-line-soft); border-radius: 999px; }
.progress-bar { background-color: var(--sh-navy); }

/* Avatar tiles used for icon circles in widgets */
.avatar-title { font-weight: 600; }

/* ── Top bar (logo + utilities) ──────────────────────────────────────────── */

.navbar-custom {
  background-color: var(--sh-surface) !important;
  /* A slim brand rule at the very top of the window and a hairline under the
     bar — both drawn as shadows so the fixed 70px bar keeps its height. */
  box-shadow: inset 0 3px 0 var(--sh-navy), 0 1px 0 var(--sh-line);
}

.navbar-custom .logo-box .logo img {
  height: 50px;
  width: auto;
  max-width: none;
  vertical-align: middle;
}

.navbar-custom .logo-box .logo-sm img {
  height: 30px;
}

.navbar-custom .topnav-menu .nav-link {
  color: var(--sh-navy-text);
  transition: color .15s ease, background-color .15s ease;
}

.navbar-custom .topnav-menu .nav-link:hover,
.navbar-custom .topnav-menu .nav-link:focus,
.navbar-custom .topnav-menu .show > .nav-link {
  color: var(--sh-navy-deep);
  background-color: var(--sh-navy-tint);
}

.navbar-custom .topnav-menu .nav-link i {
  vertical-align: middle;
}

.navbar-custom .nav-user,
.navbar-custom .pro-user-name {
  color: var(--sh-ink);
  font-weight: 600;
  font-size: .8125rem;
}

.navbar-custom .pro-user-name i { color: var(--sh-ink-faint); }

/* Hamburger lines (theme paints them white for a dark bar) */
body[data-layout-mode=horizontal] .navbar-toggle span {
  background-color: var(--sh-navy-text);
}

.navbar-custom .button-menu-mobile { color: var(--sh-navy-text); }

/* Search box in the bar, if a page renders it */
.navbar-custom .app-search .form-control {
  background-color: var(--sh-surface-alt);
  color: var(--sh-ink);
}
.navbar-custom .app-search .form-control::placeholder { color: var(--sh-ink-faint); }
.navbar-custom .app-search .btn {
  background-color: var(--sh-surface-alt);
  color: var(--sh-ink-muted);
}

/* Drafting notification bell — inline-styled in navbar.html; only the colour
   accents are lifted here. */
#vdNotifyCount { background: var(--sh-coral) !important; }
#vdNotifyMenu {
  border-color: var(--sh-line) !important;
  border-radius: var(--sh-radius-lg) !important;
  box-shadow: var(--sh-shadow-lg) !important;
}

/* ── Menu bar (horizontal top navigation) ───────────────────────────────── */

.topnav,
.topnav.shadow-lg {
  background-color: var(--sh-surface) !important;
  box-shadow: 0 1px 0 var(--sh-line), 0 2px 6px rgba(23, 49, 114, .04) !important;
}

.topnav .navbar-nav .nav-link {
  font-family: var(--sh-font-body);
  font-size: .875rem;
  font-weight: 600;
  color: var(--sh-ink-2);
  letter-spacing: .005em;
  border-radius: var(--sh-radius) !important;
  transition: color .15s ease, background-color .15s ease;
}

.topnav .navbar-nav .nav-link i {
  color: var(--sh-navy-text);
  opacity: .85;
}

.topnav .navbar-nav .nav-link:hover,
.topnav .navbar-nav .nav-link:focus,
.topnav .navbar-nav .nav-item:hover > .nav-link,
.topnav .navbar-nav .show > .nav-link {
  color: var(--sh-navy);
  background-color: var(--sh-navy-tint);
}

.topnav .navbar-nav .nav-link.active,
.topnav .navbar-nav .nav-item.active > .nav-link,
.topnav .navbar-nav > .dropdown.active > a {
  color: var(--sh-navy) !important;
  background-color: var(--sh-navy-tint);
}

.topnav .arrow-down:after { border-color: currentColor; opacity: .6; }

/* Menu dropdowns */
.topnav .dropdown-menu {
  border: 1px solid var(--sh-line);
  box-shadow: var(--sh-shadow-md);
  padding: .35rem;
}

.topnav .dropdown-item {
  color: var(--sh-ink-2);
  font-weight: 500;
  border-radius: var(--sh-radius-sm);
}

.topnav .dropdown-item i { color: var(--sh-navy-text); opacity: .8; }

.topnav .dropdown-item:hover,
.topnav .dropdown-item:focus {
  color: var(--sh-navy);
  background-color: var(--sh-navy-tint);
}

.topnav .dropdown-item.active,
.topnav .dropdown-item:active {
  color: var(--sh-navy);
  background-color: var(--sh-navy-tint);
}

/* ── Page title strip ────────────────────────────────────────────────────── */

/* The theme sets the title's line-height to a fixed 75px and floats the
   action block with a 22px top margin. The strip is now a flex row: crumb
   line on top, title left, actions right, ~56px tall. Floats are ignored by
   flex, so the markup does not change. */
.page-title-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  min-height: 56px;
  padding: 8px 0 6px;
}
.page-title-box .page-title {
  flex: 1 1 auto;
  order: 0;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
}
.page-title-box .page-title-right {
  order: 1;
  float: none;
  margin: 0 0 0 auto;
}
.page-title-box .page-title-right .btn { vertical-align: middle; }

/* Breadcrumbs: the theme hid them; both the markup version and the trail
   written by star-ui.js share one look. */
.page-title-box .breadcrumb {
  display: flex;
  padding: 0;
  margin: 0;
  flex-basis: 100%;
  order: -1;
  background: transparent;
  font-size: .75rem;
}
.breadcrumb { background-color: transparent; }
.breadcrumb-item,
.breadcrumb-item a { color: var(--sh-ink-muted); }
.breadcrumb-item.active { color: var(--sh-ink-2); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--sh-ink-faint); }

.sh-crumb {
  flex-basis: 100%;
  order: -1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  line-height: 1.2;
  color: var(--sh-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sh-crumb a { color: var(--sh-ink-muted); font-weight: 500; }
.sh-crumb a:hover { color: var(--sh-navy); }
.sh-crumb__sep { color: var(--sh-ink-faint); }
.sh-crumb__here { color: var(--sh-ink-2); font-weight: 600; }

/* Tables wrapped by star-ui.js when they overflow */
.sh-scroll { -webkit-overflow-scrolling: touch; }
.sh-scroll > .table { margin-bottom: 0; }

/* ── Cards & surfaces ────────────────────────────────────────────────────── */

.card,
.card-box {
  background-color: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius-lg) !important;
  box-shadow: var(--sh-shadow-xs);
}

.card .card-header,
.card-header {
  background-color: var(--sh-surface);
  border-bottom: 1px solid var(--sh-line-soft);
  color: var(--sh-ink);
  font-weight: 600;
  border-top-left-radius: var(--sh-radius-lg);
  border-top-right-radius: var(--sh-radius-lg);
}

.card-footer {
  background-color: var(--sh-surface-alt);
  border-top: 1px solid var(--sh-line-soft) !important;
  color: var(--sh-ink-muted);
  border-bottom-left-radius: var(--sh-radius-lg);
  border-bottom-right-radius: var(--sh-radius-lg);
}

/* Cards that are links or carry an onclick should acknowledge the pointer,
   nothing more. */
a > .card:hover,
a.card:hover,
.card[onclick]:hover,
.card[role="button"]:hover {
  border-color: var(--sh-line-strong);
  box-shadow: var(--sh-shadow-sm);
}

/* Stat / KPI widgets */
.widget-rounded-circle.card,
.widget-rounded-circle.card.stat-card {
  border: 1px solid var(--sh-line);
  box-shadow: var(--sh-shadow-xs);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.widget-rounded-circle.card:hover,
.widget-rounded-circle.card.stat-card:hover {
  transform: none;
  border-color: var(--sh-line-strong);
  box-shadow: var(--sh-shadow-sm);
}

.stat-item {
  border-radius: var(--sh-radius);
  transition: background-color .15s ease;
}
.stat-item[onclick]:hover { background-color: var(--sh-surface-alt); cursor: pointer; }

/* Inbox rows on the dashboard */
.inbox-widget .inbox-item {
  border-bottom-color: var(--sh-line-soft);
}
.inbox-widget .inbox-item:hover { background-color: var(--sh-surface-alt); }
.inbox-widget .court-title { color: var(--sh-navy-text); font-weight: 600; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  font-family: var(--sh-font-body);
  font-weight: 600;
  letter-spacing: .005em;
  border-radius: var(--sh-radius) !important;   /* base.html says 10px !important */
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease;
}

.btn-xs { border-radius: var(--sh-radius-sm) !important; }

.btn:focus,
.btn.focus,
.btn:focus-visible {
  box-shadow: var(--sh-focus-ring) !important;
  outline: none;
}

.btn:disabled,
.btn.disabled {
  opacity: .55;
  cursor: not-allowed;
}

.btn i + span,
.btn span + i { margin-left: .35rem; }

/* Primary */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--sh-navy);
  border-color: var(--sh-navy);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: var(--sh-navy-deep);
  border-color: var(--sh-navy-deep);
}
.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--sh-navy);
  border-color: var(--sh-navy);
}

.btn-outline-primary {
  color: var(--sh-navy);
  border-color: var(--sh-navy);
  background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: var(--sh-navy);
  border-color: var(--sh-navy);
}

.btn-soft-primary {
  color: var(--sh-navy);
  background-color: var(--sh-navy-soft);
  border-color: var(--sh-navy-soft);
}
.btn-soft-primary:hover,
.btn-soft-primary:focus,
.btn-soft-primary:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: var(--sh-navy);
  border-color: var(--sh-navy);
}

/* Secondary: the theme paints it solid black, which fights every primary
   action beside it. Rendered as a quiet neutral — white, thin border. */
.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: var(--sh-ink-2);
  background-color: var(--sh-surface);
  border-color: var(--sh-line-strong);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.focus,
.btn-secondary:not(:disabled):not(.disabled):active {
  color: var(--sh-ink);
  background-color: var(--sh-surface-alt);
  border-color: var(--sh-ink-faint);
}
.btn-secondary.disabled,
.btn-secondary:disabled {
  color: var(--sh-ink-muted);
  background-color: var(--sh-surface);
  border-color: var(--sh-line-strong);
}
.btn-outline-secondary {
  color: var(--sh-ink-2);
  border-color: var(--sh-line-strong);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
  color: var(--sh-ink);
  background-color: var(--sh-surface-alt);
  border-color: var(--sh-ink-faint);
}

.btn-light,
.btn-light:not(:disabled):not(.disabled).active {
  color: var(--sh-ink-2);
  background-color: var(--sh-surface-alt);
  border-color: var(--sh-line);
}
.btn-light:hover,
.btn-light:focus,
.btn-light:not(:disabled):not(.disabled):active {
  color: var(--sh-ink);
  background-color: var(--sh-surface-2);
  border-color: var(--sh-line-strong);
}

.btn-link { color: var(--sh-blue); font-weight: 600; }
.btn-link:hover { color: var(--sh-blue-hover); text-decoration: none; }

/* Semantic buttons: same hues, one notch more enterprise than the theme's
   pastels. */
.btn-success { background-color: var(--sh-success); border-color: var(--sh-success); color: #fff; }
.btn-success:hover, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active { background-color: #257f4b; border-color: #257f4b; color: #fff; }
.btn-danger  { background-color: var(--sh-danger); border-color: var(--sh-danger); color: #fff; }
.btn-danger:hover, .btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active { background-color: #b82f2f; border-color: #b82f2f; color: #fff; }
.btn-warning { background-color: var(--sh-warning); border-color: var(--sh-warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active { background-color: #b45309; border-color: #b45309; color: #fff; }
.btn-info    { background-color: var(--sh-info); border-color: var(--sh-info); color: #fff; }
.btn-info:hover, .btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active { background-color: #0b678a; border-color: #0b678a; color: #fff; }

.btn-outline-success { color: var(--sh-success); border-color: var(--sh-success); }
.btn-outline-success:hover { background-color: var(--sh-success); border-color: var(--sh-success); color: #fff; }
.btn-outline-danger  { color: var(--sh-danger);  border-color: var(--sh-danger); }
.btn-outline-danger:hover  { background-color: var(--sh-danger);  border-color: var(--sh-danger);  color: #fff; }
.btn-outline-info    { color: var(--sh-info);    border-color: var(--sh-info); }
.btn-outline-info:hover    { background-color: var(--sh-info);    border-color: var(--sh-info);    color: #fff; }

.btn-soft-success { color: #1f7a48; background-color: var(--sh-success-soft); border-color: var(--sh-success-soft); }
.btn-soft-success:hover { color: #fff; background-color: var(--sh-success); border-color: var(--sh-success); }
.btn-soft-danger  { color: #b02a2a; background-color: var(--sh-danger-soft);  border-color: var(--sh-danger-soft); }
.btn-soft-danger:hover  { color: #fff; background-color: var(--sh-danger);  border-color: var(--sh-danger); }
.btn-soft-warning { color: #9a5a00; background-color: var(--sh-warning-soft); border-color: var(--sh-warning-soft); }
.btn-soft-warning:hover { color: #fff; background-color: var(--sh-warning); border-color: var(--sh-warning); }
.btn-soft-info    { color: #0b678a; background-color: var(--sh-info-soft);    border-color: var(--sh-info-soft); }
.btn-soft-info:hover    { color: #fff; background-color: var(--sh-info);    border-color: var(--sh-info); }
.btn-soft-secondary { color: var(--sh-ink-2); background-color: var(--sh-surface-2); border-color: var(--sh-surface-2); }
.btn-soft-secondary:hover { color: var(--sh-ink); background-color: var(--sh-line); border-color: var(--sh-line); }

/* Ladda spinner buttons inherit the primary */
.ladda-button[data-style] { border-radius: var(--sh-radius) !important; }

/* ── Badges ──────────────────────────────────────────────────────────────── */

.badge {
  font-family: var(--sh-font-body);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--sh-radius-sm);
  border-color: transparent;            /* theme draws a 1px black border */
}
.badge-pill { border-radius: 999px; }

.badge-primary   { color: #fff; background-color: var(--sh-navy); }
.badge.bg-primary { color: #fff; }
.badge-secondary { color: var(--sh-ink-2); background-color: var(--sh-line); }
.badge-success   { color: #fff; background-color: var(--sh-success); }
.badge-danger    { color: #fff; background-color: var(--sh-danger); }
.badge-warning   { color: #fff; background-color: var(--sh-warning); }
.badge-info      { color: #fff; background-color: var(--sh-info); }
.badge-dark      { color: #fff; background-color: var(--sh-ink-2); }
.badge-light     { color: var(--sh-ink-2); background-color: var(--sh-surface-alt); border-color: var(--sh-line); }

.badge-soft-primary   { color: var(--sh-navy);   background-color: var(--sh-navy-soft); }
.badge-soft-secondary { color: var(--sh-ink-2);  background-color: var(--sh-surface-2); }
.badge-soft-success   { color: #1f7a48;          background-color: var(--sh-success-soft); }
.badge-soft-danger    { color: #b02a2a;          background-color: var(--sh-danger-soft); }
.badge-soft-warning   { color: #9a5a00;          background-color: var(--sh-warning-soft); }
.badge-soft-info      { color: #0b678a;          background-color: var(--sh-info-soft); }
.badge-soft-dark      { color: var(--sh-ink);    background-color: var(--sh-line-soft); }

.badge-soft-primary[href]:hover,
.badge-soft-primary[href]:focus { color: var(--sh-navy); background-color: var(--sh-navy-tint-2); }

/* Dashboard inbox status chips */
.badgedb.bg-primary {
  background-color: var(--sh-navy-soft) !important;
  color: var(--sh-navy);
}

/* ── Tabs, pills & bordered navs ─────────────────────────────────────────── */

.nav-tabs { border-bottom-color: var(--sh-line); }

.nav-tabs .nav-link {
  color: var(--sh-ink-muted);
  font-weight: 600;
  border-radius: var(--sh-radius) var(--sh-radius) 0 0 !important;
  transition: color .15s ease, background-color .15s ease;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: var(--sh-navy);
  border-color: transparent transparent var(--sh-line);
  background-color: var(--sh-navy-tint);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--sh-navy);
  background-color: var(--sh-surface);
  border-color: var(--sh-line) var(--sh-line) var(--sh-surface);
}

/* Bordered (underline) tabs: active gets a navy rule */
.nav-bordered { border-bottom: 2px solid var(--sh-line) !important; }
.nav-bordered li a,
.nav-bordered .nav-link { color: var(--sh-ink-muted); font-weight: 600; }
.nav-bordered li a:hover,
.nav-bordered .nav-link:hover { color: var(--sh-navy); }
.nav-bordered a.active,
.nav-bordered .nav-link.active {
  color: var(--sh-navy) !important;
  border-bottom: 2px solid var(--sh-navy) !important;
  background-color: transparent;
}

.nav-pills .nav-link {
  color: var(--sh-ink-2);
  font-weight: 600;
  border-radius: var(--sh-radius) !important;
}
.nav-pills .nav-link:hover { color: var(--sh-navy); background-color: var(--sh-navy-tint); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: var(--sh-navy);
}

/* Segmented button groups used as filters */
.btn-group > .btn-light.active,
.btn-group > .btn-outline-primary.active,
.btn-group-toggle > .btn.active {
  color: #fff;
  background-color: var(--sh-navy);
  border-color: var(--sh-navy);
}

/* ── Forms ───────────────────────────────────────────────────────────────── */

.form-control,
.custom-select,
.custom-file-label,
textarea.form-control {
  border-color: var(--sh-line-strong);
  border-radius: var(--sh-radius) !important;   /* base.html says 10px !important */
  color: var(--sh-ink);
  background-color: var(--sh-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control::placeholder { color: var(--sh-ink-faint); opacity: 1; }

.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.custom-select:hover:not(:focus):not(:disabled) {
  border-color: var(--sh-ink-faint);
}

.form-control:focus,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label,
textarea.form-control:focus {
  border-color: var(--sh-navy);
  box-shadow: var(--sh-focus-ring);
  color: var(--sh-ink);
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
  background-color: var(--sh-surface-alt);
  color: var(--sh-ink-muted);
  border-color: var(--sh-line);
}

.form-control.is-invalid,
.form-control.parsley-error,
.was-validated .form-control:invalid { border-color: var(--sh-danger); }
.form-control.is-invalid:focus,
.form-control.parsley-error:focus { box-shadow: 0 0 0 3px rgba(214, 59, 59, .15); }
.invalid-feedback,
.parsley-errors-list { color: var(--sh-danger); }
.parsley-errors-list {
  list-style: none;
  padding: 0;
  margin: .3rem 0 0;
  font-size: .78rem;
  font-weight: 500;
}
.parsley-errors-list li::before { content: "\2022  "; color: var(--sh-danger); }
.parsley-success { border-color: var(--sh-success) !important; }
.form-control.is-valid { border-color: var(--sh-success); }
/* Select2 inside an .input-group / beside .form-control-sm keeps the same height */
.form-control-sm ~ .select2-container .select2-selection--single { height: calc(1.5em + .5rem + 2px) !important; }

.input-group-text {
  background-color: var(--sh-surface-alt);
  border-color: var(--sh-line-strong);
  color: var(--sh-ink-muted);
  border-radius: var(--sh-radius);
}

.form-text,
.form-group small,
.help-block { color: var(--sh-ink-muted); }

/* Checkboxes, radios, switches */
.custom-control-label::before { border-color: var(--sh-line-strong); }
.custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--sh-navy);
  background-color: var(--sh-navy);
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--sh-focus-ring); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--sh-navy); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff; }

.form-check-input { accent-color: var(--sh-navy); }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--sh-navy); }

/* Bootstrap-datepicker & flatpickr selections */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
  background: var(--sh-navy) !important;
  background-image: none !important;
  border-color: var(--sh-navy) !important;
  color: #fff !important;
}
.datepicker table tr td.today { background-color: var(--sh-coral-soft) !important; color: var(--sh-ink); }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
  background: var(--sh-navy);
  border-color: var(--sh-navy);
}
.flatpickr-day.today { border-color: var(--sh-coral); }
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday { background: var(--sh-navy); color: #fff; fill: #fff; }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--sh-navy); }

/* Quill editor chrome */
.ql-toolbar.ql-snow,
.ql-container.ql-snow { border-color: var(--sh-line-strong); }
.ql-toolbar.ql-snow { border-radius: var(--sh-radius) var(--sh-radius) 0 0; background: var(--sh-surface-alt); }
.ql-container.ql-snow { border-radius: 0 0 var(--sh-radius) var(--sh-radius); }
.ql-snow .ql-picker-label:hover,
.ql-snow .ql-picker-item:hover,
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active { color: var(--sh-navy); }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--sh-navy); }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--sh-navy); }

/* ── Select2: agree with the inputs beside it. Border, radius, focus and
      chip colours only — geometry and z-index are Select2's own. ─────────── */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: var(--sh-line-strong);
  border-radius: var(--sh-radius) !important;
  background-color: var(--sh-surface);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--sh-ink) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--sh-ink-faint);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--sh-ink-muted) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--sh-ink-muted) transparent;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--sh-navy);
  box-shadow: var(--sh-focus-ring);
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: var(--sh-surface-alt);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-selection__choice {
  background-color: var(--sh-navy-soft) !important;   /* base.html paints #24336e */
  border: 1px solid transparent !important;
  color: var(--sh-navy) !important;
  border-radius: var(--sh-radius-sm) !important;
  font-weight: 600;
}
/* A few pages paint the chip charcoal with a white "×"; on the brand chip that
   "×" would vanish, so the glyph colour is pinned too. */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--sh-navy) !important;
  border-right-color: rgba(23, 49, 114, .25) !important;
  opacity: .7;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--sh-navy-deep) !important;
  opacity: 1;
}

.select2-dropdown {
  border-color: var(--sh-line);
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-shadow-md);
  overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: var(--sh-line-strong);
  border-radius: var(--sh-radius-sm);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--sh-navy);
  box-shadow: var(--sh-focus-ring);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--sh-navy);
  color: #fff;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--sh-navy-soft);
  color: var(--sh-navy);
}
.select2-container--default .select2-results__group { color: var(--sh-ink-muted); }

/* Switchery toggles are coloured by JS; the resting track is styled here. */
.switchery { border-color: var(--sh-line-strong) !important; }

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table { color: var(--sh-ink); }

.table thead th,
.table > thead > tr > th {
  background-color: var(--sh-surface-alt) !important;   /* theme forces #fff on th */
  border-bottom: 1px solid var(--sh-line) !important;
  border-top: none;
  color: var(--sh-ink-muted);
  font-family: var(--sh-font-body);
  font-size: .6875rem !important;   /* base.html says 13px !important */
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.table td,
.table th { border-top-color: var(--sh-line-soft); }

.table-bordered,
.table-bordered td,
.table-bordered th { border-color: var(--sh-line) !important; }

/* Alignment. base.html used to centre every cell, which made names, case
   numbers and dates hard to scan. Text now reads from the left; a cell that
   holds only a checkbox or a row-action control stays centred; numbers go
   right with the `.num` / `.text-right` helpers. */
.table th,
.table td { text-align: left; }
.table th.text-center,
.table td.text-center { text-align: center; }
.table th:has(> input[type="checkbox"]:only-child),
.table td:has(> input[type="checkbox"]:only-child),
.table td:has(> .table-action-btn:only-child),
.table td:has(> .dropdown:only-child > .table-action-btn),
.table td:has(> .row-icon-btn:first-child) { text-align: center; }
.table th.num,
.table td.num,
.table th.text-right,
.table td.text-right { text-align: right; font-variant-numeric: tabular-nums; }
.table td .badge,
.table td .status-pill { vertical-align: middle; }

/* Row hover: the theme pins td backgrounds to white, so the tint has to land
   on the cells themselves. */
.table-hover tbody tr:hover,
.table-hover tbody tr:hover td,
.table tbody tr:hover td { background-color: var(--sh-surface-alt) !important; }

.table tbody td a:not(.btn):not(.badge):not(.dropdown-item) { color: var(--sh-blue); font-weight: 500; }
.table tbody td a:not(.btn):not(.badge):not(.dropdown-item):hover { color: var(--sh-blue-hover); }

.table tbody tr td.dataTables_empty,
.table tbody tr.no-records td {
  color: var(--sh-ink-muted);
  padding: 2rem 1rem;
  text-align: center;
}

.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(odd) td { background-color: #fafbfd !important; }

/* Bootstrap-table toolbar & pagination */
.bootstrap-table .fixed-table-container { border-radius: var(--sh-radius); }
.bootstrap-table .fixed-table-toolbar .btn { font-weight: 600; }
.fixed-table-pagination .page-list .btn { border-color: var(--sh-line-strong); }

/* DataTables (where used) */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { color: var(--sh-navy); }

/* Case list header colour that star-theme's earlier version pinned */
#kt_project_users_table thead th {
  background-color: var(--sh-surface-alt) !important;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */

.page-link {
  color: var(--sh-ink-2);
  border-color: var(--sh-line);
  font-weight: 600;
  min-width: 34px;
  text-align: center;
}
.page-link:hover {
  color: var(--sh-navy);
  background-color: var(--sh-navy-tint);
  border-color: var(--sh-line);
}
.page-link:focus { box-shadow: var(--sh-focus-ring); }
.page-item.active .page-link {
  color: #fff;
  background-color: var(--sh-navy);
  border-color: var(--sh-navy);
}
.page-item.disabled .page-link { color: var(--sh-ink-faint); border-color: var(--sh-line); }
.pagination-rounded .page-link { border-radius: var(--sh-radius) !important; }
.page-item:first-child .page-link { border-top-left-radius: var(--sh-radius); border-bottom-left-radius: var(--sh-radius); }
.page-item:last-child .page-link { border-top-right-radius: var(--sh-radius); border-bottom-right-radius: var(--sh-radius); }

/* ── Dropdowns ───────────────────────────────────────────────────────────── */

.dropdown-menu {
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius-lg) !important;   /* base.html says 10px !important */
  box-shadow: var(--sh-shadow-md);
  color: var(--sh-ink);
  padding: .35rem;
}
.dropdown-item {
  color: var(--sh-ink-2);
  border-radius: var(--sh-radius-sm);
  font-weight: 500;
}
.dropdown-item i { color: var(--sh-ink-muted); }
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--sh-navy);
  background-color: var(--sh-navy-tint);
}
.dropdown-item:hover i,
.dropdown-item:focus i { color: var(--sh-navy); }
.dropdown-item.active,
.dropdown-item:active {
  color: var(--sh-navy);
  background-color: var(--sh-navy-tint);
}
.dropdown-item.text-danger:hover { color: var(--sh-danger) !important; background-color: var(--sh-danger-soft); }
.dropdown-divider { border-top-color: var(--sh-line-soft); }
.dropdown-header { color: var(--sh-ink-muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }

/* Row-action controls declared in base.html (three-dot menu, icon buttons):
   colour only, the geometry stays as declared there. */
.table-action-btn,
a.table-action-btn,
.card-drop,
a.card-drop { color: var(--sh-ink-muted); }
.table-action-btn:hover,
.table-action-btn:focus,
.table-action-btn[aria-expanded="true"],
.card-drop:hover,
.card-drop:focus,
.card-drop[aria-expanded="true"] {
  background-color: var(--sh-navy-tint);
  color: var(--sh-navy);
}
.row-icon-btn { color: var(--sh-navy-text); }
.row-icon-btn:hover,
.row-icon-btn:focus { background-color: var(--sh-navy-tint); color: var(--sh-navy-deep); }

/* ── Modals ──────────────────────────────────────────────────────────────── */

.modal-content {
  border: none;
  border-radius: var(--sh-radius-lg) !important;
  box-shadow: var(--sh-shadow-lg);
}
.modal-header {
  border-bottom: 1px solid var(--sh-line-soft);
  background-color: var(--sh-surface);
  border-top-left-radius: var(--sh-radius-lg);
  border-top-right-radius: var(--sh-radius-lg);
}
.modal-header.bg-primary,
.modal-header.bg-light,
.modal-header.bg-dark { border-bottom: 0; }
.modal-header.bg-primary .modal-title { color: #fff; }
.modal-footer {
  border-top: 1px solid var(--sh-line-soft);
  background-color: var(--sh-surface-alt);
  border-bottom-left-radius: var(--sh-radius-lg);
  border-bottom-right-radius: var(--sh-radius-lg);
}
.modal-title { font-size: 1rem; }
.modal-backdrop.show { opacity: .45; }
.close { color: var(--sh-ink); text-shadow: none; opacity: .45; }
.close:hover { opacity: .8; }

/* SweetAlert2 */
.swal2-popup { border-radius: var(--sh-radius-lg) !important; }
.swal2-styled.swal2-confirm {
  background-color: var(--sh-navy) !important;
  border-radius: var(--sh-radius) !important;
  font-weight: 600;
}
.swal2-styled.swal2-cancel {
  background-color: var(--sh-surface) !important;
  color: var(--sh-ink-2) !important;
  border: 1px solid var(--sh-line-strong) !important;
  border-radius: var(--sh-radius) !important;
  font-weight: 600;
}
.swal2-styled:focus { box-shadow: var(--sh-focus-ring) !important; }

/* Toasts */
.jq-toast-single { border-radius: var(--sh-radius); font-family: var(--sh-font-body); }
.toastify { border-radius: var(--sh-radius); font-family: var(--sh-font-body); font-weight: 500; }

/* Right-hand slide-in bar (declared in base.html) */
.right-bar { background-color: var(--sh-surface); box-shadow: var(--sh-shadow-lg); }

/* ── Alerts ──────────────────────────────────────────────────────────────── */

.alert {
  border-radius: var(--sh-radius);
  border-width: 1px;
  font-weight: 500;
}
.alert-primary   { color: var(--sh-navy);  background-color: var(--sh-navy-soft);    border-color: #d5d9ec; }
.alert-secondary { color: var(--sh-ink-2); background-color: var(--sh-surface-2);    border-color: var(--sh-line); }
.alert-success   { color: #1f7a48;         background-color: var(--sh-success-soft); border-color: #cdebd8; }
.alert-danger    { color: #b02a2a;         background-color: var(--sh-danger-soft);  border-color: #f5cfcf; }
.alert-warning   { color: #8a5200;         background-color: var(--sh-warning-soft); border-color: #f7dfb5; }
.alert-info      { color: #0b678a;         background-color: var(--sh-info-soft);    border-color: #c4e6f2; }
.alert-light     { color: var(--sh-ink-2); background-color: var(--sh-surface-alt);  border-color: var(--sh-line); }
.alert .alert-link { font-weight: 700; color: inherit; }

/* ── List groups, accordions, misc surfaces ──────────────────────────────── */

.list-group-item { border-color: var(--sh-line-soft); color: var(--sh-ink); }
.list-group-item.active { background-color: var(--sh-navy); border-color: var(--sh-navy); }
.list-group-item-action:hover,
.list-group-item-action:focus { background-color: var(--sh-surface-alt); color: var(--sh-ink); }

.accordion .card { border-radius: var(--sh-radius) !important; }
.accordion .card-header { background-color: var(--sh-surface); }

.popover { border-color: var(--sh-line); border-radius: var(--sh-radius); box-shadow: var(--sh-shadow-md); }
.tooltip-inner { background-color: var(--sh-ink); border-radius: var(--sh-radius-sm); font-weight: 500; }
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^=top] .arrow::before { border-top-color: var(--sh-ink); }
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^=bottom] .arrow::before { border-bottom-color: var(--sh-ink); }

.jumbotron { background-color: var(--sh-surface-alt); border-radius: var(--sh-radius-lg); }

/* Spinners in the brand */
.spinner-border.text-primary,
.spinner-grow.text-primary { color: var(--sh-navy) !important; }

/* Scrollbars: quiet, thin, only in engines that expose them */
.inbox-scrollable::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
#vdNotifyList::-webkit-scrollbar { width: 8px; height: 8px; }
.inbox-scrollable::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb,
#vdNotifyList::-webkit-scrollbar-thumb { background: var(--sh-line-strong); border-radius: 999px; }
.inbox-scrollable::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track { background: transparent; }

/* ── Empty states ────────────────────────────────────────────────────────── */

.sh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 20px;
  color: var(--sh-ink-muted);
}
.sh-empty--fill { height: 100%; min-height: 220px; }
.sh-empty__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sh-navy-soft);
  color: var(--sh-navy);
  font-size: 26px;
  margin-bottom: 12px;
}
.sh-empty__title {
  font-family: var(--sh-font-display);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--sh-ink);
  margin-bottom: 4px;
}
.sh-empty__text { font-size: .8125rem; max-width: 320px; }
.sh-empty .btn { margin-top: 14px; }

/* Skeleton block for content that arrives by AJAX (pair with .star-shimmer for inline) */
.sh-skeleton {
  border-radius: var(--sh-radius);
  background: linear-gradient(90deg, #eceef3 25%, #f5f6fa 37%, #eceef3 63%);
  background-size: 400% 100%;
  animation: star-shimmer 1.4s ease-in-out infinite;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer,
footer.footer {
  background-color: var(--sh-surface) !important;
  border-top: 1px solid var(--sh-line);
  color: var(--sh-ink-muted) !important;
  /* One line, as thin as it reads: the theme's 19/20px padding made a 61px
     band that ate a chat pane's last message on a laptop. .content-page
     still reserves 65px, so the strip sits ~30px below the page content. */
  padding: 6px 15px 7px;
  line-height: 20px;
}
.footer,
.footer a,
.footer [style*="color: white"],
.footer [style*="color:white"] {
  color: var(--sh-ink-muted) !important;
}
.footer a:hover { color: var(--sh-navy) !important; }
.footer .footer-powered { color: var(--sh-ink-faint) !important; }
.footer .footer-powered a { font-weight: 600; }

/* ── Focus visibility for keyboard users ─────────────────────────────────── */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sh-navy);
  outline-offset: 2px;
}

/* Case list — the SCN / WS "+" menu on consumer rows (WS / Evidence Affidavit) */
.aw-plus-menu { min-width: 230px; padding: 6px 0; border-radius: 10px; box-shadow: 0 8px 24px rgba(23,49,114,.14); border: 1px solid var(--sh-line, #e4e7ee); }
.aw-plus-menu .dropdown-item { font-size: 13px; padding: 7px 14px; color: var(--sh-navy-text); display: flex; align-items: center; gap: 8px; }
.aw-plus-menu .dropdown-item i { opacity: .75; }
.aw-plus-menu .dropdown-item:hover, .aw-plus-menu .dropdown-item:focus { background: var(--sh-navy-tint); color: var(--sh-navy-deep); }
.aw-plus-menu form { margin: 0; }
/* The list card clips to its rounded corners (matter_master_dynamic.html
   .card:has(#kt_project_users_table) {overflow:hidden}) and the page shell
   clips too — a menu opened on the last rows would be cut off. Lifted only
   while a row menu is open, so the corners stay clipped the rest of the time. */
.card:has(.aw-plus-menu.show),
.content-page:has(.aw-plus-menu.show) { overflow: visible !important; }
.aw-plus-menu.show { z-index: 1030; }