/* ============================================================================
   hub-skin.css — Vault reskin to match the FMCSR Safety Hub look.

   Loaded LAST from head.php so it overrides the Material/Bootstrap-3 theme in
   styles.css. It is presentation only: no markup contract, no ids, no JS hooks
   are changed. The palette, fonts, radii and component treatments are lifted
   from HUB/fmcrs_data/lib/ui.php ("Ocean Breeze", flat, hairline cards).
   ============================================================================ */

:root {
  --ink:#03045E; --ink-soft:#0A1A6B; --paper:#F7FAFC; --card:#FFFFFF;
  --line:#D4E4EC; --line-soft:#E8F4F8; --stone:#4A5568; --stone-soft:#8293A0;
  --blue:#0077B6; --blue-soft:#CAF0F8; --amber:#D97706; --amber-soft:#FEF3E2;
  --red:#B91C1C; --red-soft:#FEE2E2; --green:#15803D; --green-soft:#DCFCE7;
  --surf:#00B4D8; --frost:#90E0EF; --cyan:#CAF0F8;
  --serif:'IBM Plex Serif',Georgia,serif;
  --sans:'IBM Plex Sans',-apple-system,system-ui,sans-serif;
  --mono:'IBM Plex Mono',SFMono-Regular,Menlo,monospace;
  --r:12px;
  /* status stoplight, as in HUB */
  --st-none:#C0392B; --st-ack:#D97706; --st-work:#0077B6; --st-done:#15803D;
  --row-none:#FDECEA; --row-ack:#FEF4E3; --row-work:#E7F2FB; --row-done:#E9F5EC;
}

/* ---- base ---------------------------------------------------------------- */
html, body {
  background: var(--paper) !important;
  color: var(--ink);
  font-family: var(--sans) !important;
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body, .static-content-wrapper, .page-content, .container-fluid { background-color: var(--paper) !important; }
a { color: var(--blue); text-decoration: none; transition: color .14s ease; }
a:hover, a:focus { color: #023E8A; text-decoration: underline; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
hr { border-top: 1px solid var(--line); }
u { text-decoration-color: var(--surf); }
::selection { background: var(--cyan); color: var(--ink); }

/* Kill the Material theme's shadows and ripples everywhere: HUB is flat. */
.panel, .btn, .btn-raised, .well, .card, .alert, .label, .badge, .form-control,
.nav-tabs, .tab-container, .static-sidebar-wrapper, .dropdown-menu, .modal-content,
.progress, .progress-bar, .widget, .shadow-sm {
  box-shadow: none !important;
}
.ripple-container, .ripple-wrapper, .ink { display: none !important; }

/* The theme keeps panels/alerts/cards invisible until Velocity reveals them.
   Never gate content on that: everything is visible, Velocity may still fade. */
.animated-content .panel:not(.no-animate), .animated-content .alert:not(.ui-pnotify-container),
.animated-content .card, .animated-content .info-tile {
  visibility: visible !important; opacity: 1 !important; transform: none !important;
}

/* ---- app frame (main.php) ------------------------------------------------ */
#wrapper, #layout-static { background: var(--paper); }
html, body, #wrapper { min-height: 100vh; }
/* the wrapper is display:table; its inner .panel is a plain block, which breaks
   the 100% height chain to the table-row. Make it the table instead. */
#wrapper > .panel { display: table; width: 100%; height: 100%; min-height: 100vh; table-layout: fixed; }
/* the two structural wrappers are .panel in markup but are not cards */
#wrapper > .panel, .static-sidebar-wrapper > .panel {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible;
}
.static-sidebar-wrapper, .static-sidebar,
.sidebar-bleachedcedar.static-sidebar-wrapper, .sidebar-bleachedcedar.fixed-sidebar {
  width: 236px;
  background: #fff !important;
  border-right: 1px solid var(--line);
  color: var(--ink);
}
.static-sidebar-wrapper > .panel, .static-sidebar > .sidebar { background: #fff !important; border: 0; margin: 0; }
.static-sidebar .sidebar { padding: 22px 14px 14px; }
.static-content-wrapper { background: var(--paper) !important; }
.static-content { padding: 26px 34px 80px; }
.page-content > .container-fluid { padding-left: 0; padding-right: 0; }

/* brand block at the top of the sidebar */
.sidebar .widget#widget-profileinfo { height: auto; overflow: visible; padding: 2px 12px 4px; }
.sidebar .widget#widget-profileinfo img { display: none; }
.sidebar .brand {
  font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--ink);
  line-height: 1.25;
}
.sidebar .brand .accent { color: var(--blue); }
.sidebar .brand-sub { font-size: 11.5px; color: var(--stone-soft); line-height: 1.4; margin-top: 2px; }

/* the "who / which company" strip is an iframe (smallframe.php); frame it like HUB's .carrier */
.sidebar > iframe[name="smallframe"] {
  display: block; width: 100%; height: 68px; margin: 0 0 8px;
  border: 0; border-bottom: 1px solid var(--line); background: transparent;
}
body.sidebar-info { background: #fff !important; padding: 0 12px 10px; font-size: 11.5px; color: var(--stone-soft); line-height: 1.4; overflow: hidden; }
body.sidebar-info .panel, body.sidebar-info .panel-primary { margin: 0; padding: 0; border: 0 !important; background: transparent !important; }
body.sidebar-info .panel-heading, body.sidebar-info .panel-primary > .panel-heading {
  margin: 0; padding: 0 !important; background: transparent !important; border: 0 !important;
  color: var(--stone-soft) !important; font: inherit !important; font-family: var(--sans) !important;
}
body.sidebar-info u { text-decoration: none; color: var(--ink); font-weight: 600; }

/* accordion groups become HUB's uppercase workflow labels */
.sidebar .panel-group { margin: 0; }
.sidebar .panel-group .panel, .sidebar .panel-group .panel-default {
  background: transparent !important; border: 0 !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; overflow: visible;
}
.sidebar .panel-group > .panel > a { display: block; border-radius: 6px; }
.sidebar .panel-group > .panel > a:hover { background: var(--line-soft); text-decoration: none; }
.sidebar .panel-group .panel-heading {
  display: block; width: 100%; margin: 0; background: transparent !important; border: 0 !important; padding: 12px 12px 6px !important;
}
.sidebar .panel-group .panel-heading h2 {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  margin: 0; padding: 0; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--blue); line-height: 1.4;
}
.sidebar .panel-group .panel-heading h2::after {
  content: "\203A"; font-size: 14px; line-height: 1; color: var(--stone-soft); letter-spacing: 0;
  transition: transform .18s ease; transform: rotate(90deg);
}
.sidebar .panel-group > .panel > a.collapsed .panel-heading h2::after { transform: none; }
.sidebar .panel-group .panel-body { margin: 0; padding: 0 !important; border: 0 !important; }

/* nav items */
.sidebar nav.widget-body > ul.acc-menu { padding: 0 !important; margin: 0; }
.sidebar nav.widget-body > ul.acc-menu > li { border: 0 !important; }
.sidebar-bleachedcedar nav.widget-body > ul.acc-menu li a,
.sidebar nav.widget-body > ul.acc-menu > li > a {
  display: flex; align-items: center; gap: 10px;
  color: var(--stone) !important; background: transparent !important;
  padding: 9px 12px !important; margin: 1px 0; border: 0 !important; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; line-height: 1.3; text-transform: none; letter-spacing: 0;
  transition: background .14s ease, color .14s ease;
}
.sidebar-bleachedcedar nav.widget-body > ul.acc-menu > li:hover > a,
.sidebar nav.widget-body > ul.acc-menu > li > a:hover {
  background: var(--line-soft) !important; color: var(--ink) !important; text-decoration: none;
}
.sidebar-bleachedcedar nav.widget-body > ul.acc-menu > li.active > a,
.sidebar nav.widget-body > ul.acc-menu > li.active > a {
  background: var(--blue) !important; color: #fff !important;
}
.sidebar-bleachedcedar nav.widget-body > ul.acc-menu > li > a > span.icon,
.sidebar nav.widget-body > ul.acc-menu > li > a > span.icon {
  display: inline-flex; width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto;
  align-items: center; justify-content: center; background: var(--line-soft); color: var(--stone) !important;
  margin: 0; padding: 0; font-size: 0; line-height: 1;
}
.sidebar nav.widget-body > ul.acc-menu > li > a > span.icon .material-icons { font-size: 14px; line-height: 1; color: inherit; }
.sidebar nav.widget-body > ul.acc-menu > li.active > a > span.icon { background: rgba(255,255,255,.25); color: #fff !important; }
.sidebar nav.widget-body > ul.acc-menu > li > a > span:not(.icon) { flex: 1 1 auto; }
.sidebar-bleachedcedar nav.widget-body > ul.acc-menu li.nav-separator { background: transparent; color: var(--stone-soft); }

/* sidebar footer (version / sign out), optional element */
.sidebar .side-foot { margin-top: 18px; padding: 14px 12px 4px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--stone); }
.sidebar .side-foot a { color: var(--stone); }
.sidebar .side-foot .ver { display: block; color: var(--stone-soft); font-size: 11px; }

/* ---- page head (main.php) ------------------------------------------------ */
.pagehead { margin: 0 0 20px; }
.pagehead .crumb { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); margin-bottom: 2px; }
.pagehead h1 { font-family: var(--serif); font-weight: 700; font-size: 26px; margin: 0 0 4px; letter-spacing: -.01em; }

/* ---- tabs -> pill tabs --------------------------------------------------- */
.panel.tab-container, .tab-container {
  margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important;
  border-radius: 0 !important; overflow: visible !important;
}
.tab-container > .nav.nav-tabs, .tab-container > .nav-tabs, .nav-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px !important; padding: 0; border: 0 !important; background: transparent !important;
}
.nav-tabs > li { float: none; margin: 0; }
.tab-container > .nav.nav-tabs > li > a, .tab-container > .nav.nav-tabs > li > a:hover, .tab-container > .nav.nav-tabs > li > a:focus,
.nav-tabs > li > a, .nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 !important;
  padding: 8px 16px; border-radius: 99px !important; font-size: 13px; font-weight: 600;
  color: var(--ink) !important; background: var(--card) !important; border: 1px solid var(--line) !important;
  text-transform: none; letter-spacing: 0; line-height: 1.3; transition: all .14s ease;
}
.tab-container > .nav.nav-tabs > li > a:hover, .nav-tabs > li > a:hover {
  border-color: var(--blue) !important; background: var(--line-soft) !important; text-decoration: none;
}
.tab-container > .nav.nav-tabs > li.active > a, .tab-container > .nav.nav-tabs > li.active > a:hover, .tab-container > .nav.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important;
}
.nav-tabs > li > a .icon:empty { display: none; }
.tab-container .tab-content, .tab-content, .tab-content.panel, .panel-white, .tab-container .tab-content .tab-pane {
  background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
}
.tab-content > .tab-pane iframe { background: transparent; }

/* ---- panels -> hairline cards ------------------------------------------- */
/* The card carries the side padding itself; heading, body and footer pull back
   out to the edge. Several pages print text or controls directly inside the
   .panel, outside any body, and this way they still sit inside the card. */
.panel {
  background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 14px !important;
  margin: 0 0 16px; padding: 0 18px; overflow: hidden;
}
.panel > .panel-heading, .panel-heading {
  background: var(--card) !important; color: var(--ink) !important;
  font-family: var(--serif); font-size: 15px; font-weight: 700; line-height: 1.3;
  margin: 0 -18px; padding: 14px 18px 12px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
  border-left: 3px solid transparent !important; border-radius: 0 !important;
  overflow-wrap: anywhere; word-break: break-word;
}
.panel-heading a, .panel-heading a:hover { color: inherit; }
.panel-body { padding: 16px 18px; color: var(--ink); }
.panel > .panel-body { margin: 0 -18px; }
.panel-footer { background: var(--paper) !important; border-top: 1px solid var(--line) !important; padding: 12px 18px; }
.panel > .panel-footer { margin: 0 -18px; }
.panel.panel-body { padding: 14px 18px; }
.panel > .panel-heading + .panel-body { padding-top: 14px; }
.panel > .panel-body:first-child { padding-top: 16px; }
.panel > :not(.panel-heading):not(.panel-body):not(.panel-footer):first-child { margin-top: 12px; }
.panel > :not(.panel-heading):not(.panel-body):not(.panel-footer):last-child { margin-bottom: 12px; }
.panel > .panel-heading ~ :not(.panel-heading):not(.panel-body):not(.panel-footer) { margin-top: 10px; }
.panel > table, .panel > .table-responsive { margin-left: -18px; margin-right: -18px; width: calc(100% + 36px); }
.panel-body > .panel:last-child { margin-bottom: 0; }
/* the panel's bare text lines (a company or location under a name) read as a sub line */
.panel-sub { font-size: 12.5px; color: var(--stone); line-height: 1.45; padding: 8px 0 0; }
/* a strip of filter controls above a list, on its own card */
.filterbar { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 10px; margin: 0 0 14px; }
.filterbar form { margin: 0; }
.filterbar form + form { margin-top: 8px; }
.filterbar select.btn, .filterbar .form-control, .filterbar input[type=text] { width: 100%; margin: 0 0 6px; }
.filterbar .btn { margin-top: 2px; }
.filterbar label { display: inline; font-size: 12.5px; font-weight: 500; color: var(--ink); letter-spacing: 0; }
/* the wide variant keeps its own grid layout (the audit filter row) */
.filterbar-wide { padding: 14px 16px 8px; }
.filterbar-wide select.btn, .filterbar-wide .form-control, .filterbar-wide input[type=text] { width: auto; margin: 0; }
.filterbar-wide .btn { margin-top: 0; }
/* a Bootstrap row given an explicit 100% width must not bleed with negative margins */
.row[style*="width: 100%"] { margin-left: 0; margin-right: 0; }

/* status lives in the heading's left accent, not in a coloured fill */
.panel-primary > .panel-heading   { border-left-color: var(--blue) !important; }
.panel-success > .panel-heading,
.panel-olive > .panel-heading     { border-left-color: var(--green) !important; }
.panel-warning > .panel-heading,
.panel-goldenrod > .panel-heading { border-left-color: var(--amber) !important; }
.panel-danger > .panel-heading,
.panel-red > .panel-heading       { border-left-color: var(--st-none) !important; }
.panel-secondary > .panel-heading,
.panel-default > .panel-heading   { border-left-color: var(--line) !important; }
.panel-info > .panel-heading      { border-left-color: var(--surf) !important; }
/* the tint the row carries in HUB, about a tenth of strength */
.panel-warning > .panel-heading { background: var(--row-ack) !important; }
.panel-danger  > .panel-heading { background: var(--row-none) !important; }
.panel-success > .panel-heading { background: var(--row-done) !important; }
.panel-primary > .panel-heading, .panel-warning > .panel-heading, .panel-danger > .panel-heading, .panel-success > .panel-heading { color: var(--ink) !important; }
.panel-primary, .panel-success, .panel-warning, .panel-danger, .panel-default, .panel-info { border-color: var(--line) !important; }

/* Bootstrap 4 leftovers used in a few pages */
.card { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 14px; }
.bg-white { background: var(--card) !important; }
.rounded { border-radius: 12px !important; }

/* ---- buttons ------------------------------------------------------------- */
.btn, .btn:focus, .btn:active, .btn.active {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .01em; line-height: 1.3;
  padding: 9px 20px; border: 1px solid transparent; border-radius: 10px;
  text-transform: none; white-space: normal; text-decoration: none;
  transition: all .16s ease; outline: none;
}
.btn.btn-block { display: flex; width: 100%; }
.btn-xs, .btn-group-xs > .btn, .btn-small { padding: 5px 12px; font-size: 12px; border-radius: 8px; }
.btn-sm, .btn-group-sm > .btn { padding: 6px 14px; font-size: 12px; border-radius: 8px; }
.btn-lg { padding: 11px 24px; font-size: 14px; }
.btn-label { text-align: left; justify-content: flex-start; }
.btn + .btn, .btn-block + .btn-block { margin-top: 4px; }
.btn svg.bi { width: 14px; height: 14px; flex: 0 0 auto; }
.btn:focus-visible { outline: 2px solid var(--surf); outline-offset: 2px; }
.btn[disabled], .btn.disabled { opacity: .45; cursor: default; }

/* primary action */
.btn-inverse, .btn-primary, .btn-info, .btn-success,
.btn-inverse:hover, .btn-primary:hover, .btn-inverse:focus, .btn-primary:focus, .btn-inverse:active, .btn-primary:active {
  background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important;
}
.btn-inverse:hover, .btn-primary:hover, .btn-info:hover, .btn-success:hover { background: #023E8A !important; border-color: #023E8A !important; }
.btn-inverse:active, .btn-primary:active { background: #012A5E !important; }
.btn-warning, .btn-warning:hover { background: var(--amber) !important; color: #fff !important; border-color: var(--amber) !important; }
.btn-warning:hover { background: #B45309 !important; }
.btn-danger, .btn-danger:hover { background: var(--st-none) !important; color: #fff !important; border-color: var(--st-none) !important; }
.btn-danger:hover { background: #9B2C2C !important; }

/* ghost / secondary action */
.btn-default, .btn-outline-default, .btn-outline-secondary, .btn-secondary, .btn-link,
.btn-default:focus, .btn-default:active, .btn-default.active {
  background: var(--card) !important; color: var(--ink) !important; border-color: var(--line) !important;
}
.btn-default:hover, .btn-outline-default:hover, .btn-outline-secondary:hover, .btn-secondary:hover {
  background: var(--cyan) !important; border-color: var(--surf) !important; color: var(--ink) !important;
}
.btn-raised, .btn-raised:hover, .btn-raised:focus, .btn-raised:active { box-shadow: none !important; }
.btn-group { display: block; }
.btn-group > .btn, .btn-group > div > .btn { float: none; }
.btn-group .btn.btn-block + .btn.btn-block { margin-top: 4px; }

/* a <select> that the app dresses as a button */
select.btn, select.btn.btn-raised {
  appearance: auto; -webkit-appearance: menulist; text-align: left;
  background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line) !important;
  font-weight: 500; padding: 7px 12px; height: auto;
}
select.btn:focus { border-color: var(--surf) !important; box-shadow: 0 0 0 3px rgba(0,180,216,.15) !important; }

/* plain <button> / <input type=submit> with no class */
button:not(.btn):not(.dt-button):not(.close), input[type=submit]:not(.btn), input[type=button]:not(.btn) {
  font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 8px 18px;
  border: 1px solid var(--blue); border-radius: 10px; background: var(--blue); color: #fff; cursor: pointer;
}
button:not(.btn):not(.dt-button):not(.close):hover { background: #023E8A; }

/* ---- forms --------------------------------------------------------------- */
.form-control, input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=tel], input[type=search], input[type=file], select, textarea {
  font-family: var(--sans); font-size: 13.5px; color: var(--ink);
  padding: 8px 14px; height: auto; line-height: 1.4;
  background: #fff !important; border: 1px solid var(--line) !important; border-radius: 10px !important;
  background-image: none !important; box-shadow: none !important;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--surf) !important; box-shadow: 0 0 0 3px rgba(0,180,216,.15) !important;
}
input::placeholder, textarea::placeholder { color: var(--stone-soft); }
input[type=checkbox], input[type=radio] { accent-color: var(--ink); width: 15px; height: 15px; vertical-align: middle; margin: 0 6px 0 0; }
input[type=file] { padding: 6px 10px; }
label, .control-label { font-size: 11px; font-weight: 600; color: var(--stone); letter-spacing: .05em; margin-bottom: 4px; }
.form-group { margin-bottom: 12px; }
.form-group .form-control { width: 100%; }
/* material "floating label" underline treatment is gone */
.form-group.is-focused .form-control, .form-control-wrapper .form-control { background-image: none !important; }
.form-group .form-control:focus ~ .material-input:after, .form-group .form-control:focus ~ .material-input:before { display: none !important; }
.form-group label.control-label { color: var(--stone) !important; }
.checkbox label, .radio label { font-size: 13.5px; font-weight: 400; color: var(--ink); letter-spacing: 0; }
.checkbox .checkbox-material, .radio .circle { display: none !important; }
fieldset legend { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.datepicker { font-family: var(--sans); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(3,4,94,.08); }
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td span.active { background: var(--blue) !important; background-image: none !important; }
.datepicker table tr td.today { background: var(--cyan) !important; color: var(--ink); }

/* ---- tables -------------------------------------------------------------- */
table { border-collapse: collapse; font-size: 13.5px; }
.table, table.dataTable { width: 100%; background: transparent; margin-bottom: 16px; }
.table > thead > tr > th, table.dataTable thead th, table.dataTable thead td, th {
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--stone-soft); text-align: left; padding: 10px 12px; white-space: nowrap;
  border: 0 !important; border-bottom: 1.5px solid var(--line) !important; background: transparent !important;
  vertical-align: bottom;
}
.table > tbody > tr > td, .table > tbody > tr > th, table.dataTable tbody td, td {
  padding: 10px 12px; vertical-align: middle; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important;
  color: var(--ink); line-height: 1.45;
}
.table-condensed > tbody > tr > td, .table-condensed > thead > tr > th { padding: 7px 10px; }
.table > tbody > tr:last-child > td { border-bottom: 0 !important; }
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th,
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background: transparent !important; }
.table-hover > tbody > tr:hover > td, table.dataTable tbody tr:hover td, tbody tr:hover td { background: rgba(0,180,216,.04) !important; }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th { border: 1px solid var(--line) !important; }
.table > tbody > tr.success > td { background: var(--row-done) !important; }
.table > tbody > tr.warning > td { background: var(--row-ack) !important; }
.table > tbody > tr.danger > td  { background: var(--row-none) !important; }
.table > tbody > tr.info > td    { background: var(--row-work) !important; }
.table > tbody > tr.active > td  { background: var(--line-soft) !important; }
td .btn, th .btn { margin: 0; }
td .btn + .btn { margin-top: 3px; }

/* datatables chrome */
.dataTables_wrapper { font-family: var(--sans); }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { font-size: 12px; color: var(--stone-soft); padding-top: 8px; }
.dataTables_wrapper .dataTables_filter input {
  font-family: var(--sans); font-size: 13px; padding: 8px 14px; margin-left: 8px;
  border: 1px solid var(--line) !important; border-radius: 10px !important; background: var(--card) !important;
}
.dataTables_wrapper .dataTables_length select { padding: 6px 10px; border-radius: 10px !important; margin: 0 4px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px !important; font-size: 13px; border: 1px solid transparent !important; background: transparent !important;
  color: var(--ink) !important; padding: 5px 11px; margin: 0 2px; transition: background .14s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--line-soft) !important; color: var(--ink) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .4; }
.dt-buttons { margin-bottom: 8px; }
.dt-button, button.dt-button, div.dt-button, a.dt-button,
.dt-button:hover:not(.disabled), button.dt-button:hover:not(.disabled) {
  font-family: var(--sans); font-size: 12px; font-weight: 600; padding: 6px 14px; margin-right: 6px;
  background: var(--card) !important; background-image: none !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow: none !important; cursor: pointer;
}
.dt-button:hover:not(.disabled) { background: var(--cyan) !important; border-color: var(--surf) !important; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after { color: var(--stone-soft); opacity: .7; }
table.dataTable.no-footer { border-bottom: 0 !important; }

/* ---- alerts -> flash ----------------------------------------------------- */
.alert {
  border-radius: 10px; padding: 11px 16px; margin: 0 0 16px; font-size: 13.5px; line-height: 1.5;
  background: var(--line-soft); border: 1px solid var(--line); color: var(--ink);
}
.alert-success, .alert-success.alert-dark { background: var(--green-soft) !important; border-color: #BFDCCB !important; color: var(--green) !important; }
.alert-danger  { background: var(--red-soft) !important; border-color: #E0BABA !important; color: var(--red) !important; }
.alert-warning { background: var(--amber-soft) !important; border-color: #F3D9B1 !important; color: #92400E !important; }
.alert-info, .alert-primary { background: var(--cyan) !important; border-color: var(--frost) !important; color: #0353A4 !important; }
.alert-dark:not(.alert-success) { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
.alert a { font-weight: 600; color: inherit; text-decoration: underline; }
.alert .close { color: inherit; opacity: .5; text-shadow: none; }

/* ---- labels / badges -> pills ------------------------------------------- */
.label, .badge {
  display: inline-flex; align-items: center; font-family: var(--sans);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 99px; white-space: nowrap; line-height: 1.4;
  background: var(--line-soft); color: var(--stone);
}
.label-default, .badge-default { background: var(--line-soft) !important; color: var(--stone) !important; }
.label-primary, .badge-primary, .label-info, .badge-info { background: var(--cyan) !important; color: #0353A4 !important; }
.label-success, .badge-success { background: var(--green-soft) !important; color: #166534 !important; }
.label-warning, .badge-warning { background: var(--frost) !important; color: #023E8A !important; }
.label-danger, .badge-danger   { background: var(--red-soft) !important; color: #9B2C2C !important; }

/* ---- progress -> rollup bar --------------------------------------------- */
.progress {
  height: 8px; border-radius: 99px; background: var(--line) !important; margin: 6px 0 4px; overflow: hidden;
}
.progress-bar { height: 8px; line-height: 8px; font-size: 0; background-image: none !important; background-color: var(--blue); }
.progress-bar-success, .progress-bar-olive     { background-color: var(--st-done) !important; }
.progress-bar-warning, .progress-bar-goldenrod { background-color: var(--st-ack) !important; }
.progress-bar-danger, .progress-bar-red        { background-color: var(--st-none) !important; }
.progress-bar-info, .progress-bar-primary      { background-color: var(--st-work) !important; }
.progress-striped .progress-bar, .progress-bar-striped { background-image: none !important; animation: none !important; }

/* ---- modals / dropdowns -------------------------------------------------- */
.modal-content { border-radius: 16px; border: 0; box-shadow: 0 24px 70px rgba(3,4,94,.18), 0 0 0 1px rgba(3,4,94,.06) !important; padding: 8px; }
.modal-header { border-bottom: 1px solid var(--line); }
.modal-title { font-family: var(--serif); font-size: 18px; }
.modal-footer { border-top: 1px solid var(--line); }
.modal-backdrop.in { background: rgba(3,4,94,.4); opacity: 1; }
.dropdown-menu { border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(3,4,94,.08) !important; padding: 6px; }
.dropdown-menu > li > a { border-radius: 8px; padding: 7px 12px; font-size: 13px; color: var(--ink); }
.dropdown-menu > li > a:hover { background: var(--line-soft); }

/* ---- misc components used in the vault pages ----------------------------- */
.text-muted { color: var(--stone-soft) !important; }
.well { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.spinner { border-color: var(--line); border-top-color: var(--surf); }
pre, code { font-family: var(--mono); font-size: 12.5px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
iframe { border: 0; }
.material-icons { vertical-align: middle; }
.animated-content .static-content-wrapper, .animated-content .panel { animation: none !important; }
/* queue notice strips (queueid.php) live in a 60px-high frame above the tabs, so
   they are compact: two strips must fit. The markup keeps its inline purple /
   green; the skin maps them to the stoplight washes — amber = work waiting,
   green = clear, blue = an item is selected. */
body.queue-bar { background: transparent !important; margin: 0; padding: 0; overflow: hidden; }
.queue-notice, div[style*="background: purple"], div[style*="background: green"] {
  display: block; border-radius: 8px; padding: 4px 12px !important; margin: 0 0 3px; line-height: 1.35;
  font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid transparent; border-left-width: 3px; transition: opacity .6s ease;
}
.queue-waiting, div[style*="background: purple"] {
  background: var(--row-ack) !important; color: #92400E !important; border-color: #F3D9B1; border-left-color: var(--st-ack);
}
.queue-clear, div[style*="background: green"] {
  background: var(--row-done) !important; color: var(--green) !important; border-color: #BFDCCB; border-left-color: var(--st-done);
}
.queue-selected, div.queue-selected[style*="background: purple"] {
  background: var(--row-work) !important; color: #0353A4 !important; border-color: var(--frost); border-left-color: var(--st-work);
}
.queue-notice.fade-out { opacity: 0; }

/* ---- login (index.php + config/login.php) -------------------------------- */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background: var(--paper); }
.login-card { width: min(420px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 30px 32px 28px; }
.login-card .form-group { margin: 0; }
.login-card .brand { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: -.01em; margin: 0 0 2px; }
.login-card .brand .accent { color: var(--blue); }
.login-card .crumb { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; }
.login-card label { display: block; margin: 12px 0 4px; }
.login-card input[type=text], .login-card input[type=password] { width: 100%; }
.login-card .btn, .login-card button { width: 100%; margin-top: 18px; }
#loader { display: none !important; }

/* ---- page entrance, as in HUB: only on a true load, respects reduced motion */
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.static-content > .page-content > .container-fluid > * { animation: riseIn .38s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* buttons inside table cells stay small */
td button:not(.btn), td input[type=submit]:not(.btn) { padding: 5px 12px; font-size: 12px; border-radius: 8px; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 920px) {
  .static-content { padding: 18px 16px 60px; }
  .static-sidebar-wrapper, .static-sidebar { width: 200px; }
}
/* the narrow list frames (company / location / driver / asset columns, ~240px) */
@media (max-width: 360px) {
  body { font-size: 13px; }
  .container-fluid { padding-left: 6px; padding-right: 6px; }
  .panel { padding: 0 12px; border-radius: 12px !important; margin-bottom: 10px; }
  .panel-heading, .panel > .panel-heading { margin: 0 -12px; padding: 10px 12px 8px !important; font-size: 13.5px; }
  .panel-body { margin: 0 -12px; padding: 10px 12px; }
  .panel-footer { margin: 0 -12px; }
  .panel > table, .panel > .table-responsive { margin-left: -12px; margin-right: -12px; width: calc(100% + 24px); }
  .btn-xs, .btn-small { padding: 5px 10px; font-size: 11.5px; }
  .filterbar { padding: 10px 10px 8px; border-radius: 12px; }
}
@media print {
  .static-sidebar-wrapper, .nav-tabs { display: none !important; }
  .static-content { padding: 0; }
  body, .static-content-wrapper { background: #fff !important; }
}