/* ============================================================================
   Unity Surge IT Solutions - global theme
   Dark by default, light via [data-theme="light"] on <html>.
   Every colour the app paints with comes from the tokens below, so flipping
   the theme re-skins pages that hard-code their own palette in <style> blocks.
   ========================================================================= */

/* ---------- Tokens: dark (default) ---------- */
:root {
  color-scheme: dark;

  /* ground */
  --us-bg:            #050d18;
  --us-bg-2:          #081422;
  --us-surface:       #0c1b2d;
  --us-surface-2:     #112436;
  --us-surface-3:     #17304a;
  --us-elevated:      #1b3a57;

  /* lines */
  --us-border:        #1c3149;
  --us-border-strong: #2a4a6b;

  /* type */
  --us-text:          #e7f1fb;
  --us-text-2:        #9ab0c6;
  --us-text-3:        #6d859c;
  --us-text-invert:   #04192e;

  /* brand */
  --us-primary:       #03aafb;
  --us-primary-2:     #38c6ff;
  --us-primary-3:     #0183b7;
  --us-primary-deep:  #0166a8;
  --us-accent:        #01cffe;
  --us-navy:          #04192e;
  --us-navy-2:        #072744;
  --us-navy-3:        #0b3a63;
  --us-steel:         #878b96;
  --us-on-primary:    #ffffff;
  /* The navy family stays dark in BOTH themes - it is the brand ground, and
     the app is full of banners that pair it with hard-coded white text. Text
     that sits on it therefore needs a colour that never flips. */
  --us-on-navy:       #e7f1fb;
  --us-on-navy-2:     #a8c2da;

  /* brand washes */
  --us-primary-soft:  rgba(3, 170, 251, .14);
  --us-primary-line:  rgba(3, 170, 251, .35);
  --us-grad:          linear-gradient(135deg, #03aafb 0%, #0166a8 100%);
  --us-grad-soft:     linear-gradient(135deg, rgba(3,170,251,.18), rgba(1,102,168,.08));
  --us-grad-navy:     linear-gradient(135deg, #04192e 0%, #0b3a63 60%, #0166a8 100%);

  /* status */
  --us-success:       #22d07a;
  --us-success-soft:  rgba(34, 208, 122, .15);
  --us-warning:       #f5a524;
  --us-warning-soft:  rgba(245, 165, 36, .15);
  --us-danger:        #ff5a6e;
  --us-danger-soft:   rgba(255, 90, 110, .15);
  --us-info:          #03aafb;
  --us-info-soft:     rgba(3, 170, 251, .15);

  /* depth */
  --us-shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --us-shadow:     0 6px 20px rgba(0,0,0,.45);
  --us-shadow-lg:  0 18px 48px rgba(0,0,0,.55);
  --us-glow:       0 0 0 3px rgba(3,170,251,.25);

  --us-radius-sm: 8px;
  --us-radius:    14px;
  --us-radius-lg: 20px;
  --us-ring:      0 0 0 3px rgba(3,170,251,.30);

  --us-icon-invert: 1;
}

/* ---------- Tokens: light ---------- */
:root[data-theme="light"] {
  color-scheme: light;

  --us-bg:            #eef3f9;
  --us-bg-2:          #e4ebf4;
  --us-surface:       #ffffff;
  --us-surface-2:     #f4f8fc;
  --us-surface-3:     #e8f0f8;
  --us-elevated:      #ffffff;

  --us-border:        #d8e2ee;
  --us-border-strong: #bccbdd;

  --us-text:          #04192e;
  --us-text-2:        #47596e;
  --us-text-3:        #71859b;
  --us-text-invert:   #ffffff;

  --us-primary:       #0183b7;
  --us-primary-2:     #03aafb;
  --us-primary-3:     #045a80;
  --us-primary-deep:  #034a6b;
  --us-accent:        #0183b7;
  --us-navy:          #04192e;
  --us-navy-2:        #0b3a63;
  --us-navy-3:        #0166a8;
  --us-steel:         #6b7480;
  --us-on-primary:    #ffffff;
  --us-on-navy:       #e7f1fb;
  --us-on-navy-2:     #a8c2da;

  --us-primary-soft:  rgba(1, 131, 183, .10);
  --us-primary-line:  rgba(1, 131, 183, .28);
  --us-grad:          linear-gradient(135deg, #03aafb 0%, #0166a8 100%);
  --us-grad-soft:     linear-gradient(135deg, rgba(3,170,251,.12), rgba(1,102,168,.05));
  --us-grad-navy:     linear-gradient(135deg, #04192e 0%, #0b3a63 60%, #0166a8 100%);

  --us-success:       #0f9d63;
  --us-success-soft:  rgba(15, 157, 99, .12);
  --us-warning:       #b9720b;
  --us-warning-soft:  rgba(185, 114, 11, .12);
  --us-danger:        #d93a4e;
  --us-danger-soft:   rgba(217, 58, 78, .12);
  --us-info:          #0183b7;
  --us-info-soft:     rgba(1, 131, 183, .12);

  --us-shadow-sm:  0 1px 2px rgba(15, 35, 60, .08);
  --us-shadow:     0 6px 20px rgba(15, 35, 60, .10);
  --us-shadow-lg:  0 18px 48px rgba(15, 35, 60, .14);
  --us-glow:       0 0 0 3px rgba(1,131,183,.20);
  --us-ring:       0 0 0 3px rgba(1,131,183,.22);

  --us-icon-invert: 0;
}

/* ---------- Ground ---------- */
html { background: var(--us-bg); }

body {
  background-color: var(--us-bg) !important;
  background-image:
    radial-gradient(900px 500px at 12% -8%, var(--us-primary-soft), transparent 60%),
    radial-gradient(760px 460px at 96% 2%, var(--us-primary-soft), transparent 55%) !important;
  background-attachment: fixed !important;
  color: var(--us-text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Pages that want a flat ground opt out with .us-plain on <body> */
body.us-plain { background-image: none !important; }

::selection { background: var(--us-primary); color: #fff; }

h1, h2, h3, h4, h5, h6 { color: var(--us-text); font-weight: 700; letter-spacing: -.01em; }
hr { border-color: var(--us-border); opacity: 1; }
a { color: var(--us-primary-2); text-decoration: none; }
a:hover { color: var(--us-accent); }
small, .text-muted { color: var(--us-text-2) !important; }
code, kbd, pre { color: var(--us-accent); }

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--us-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--us-border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--us-primary-3); background-clip: padding-box; }

/* ---------- Bootstrap variable bridge ---------- */
:root {
  --bs-body-bg: var(--us-bg);
  --bs-body-color: var(--us-text);
  --bs-border-color: var(--us-border);
  --bs-primary: var(--us-primary);
  --bs-link-color: var(--us-primary-2);
  --bs-link-hover-color: var(--us-accent);
  --bs-emphasis-color: var(--us-text);
  --bs-secondary-color: var(--us-text-2);
  --bs-tertiary-bg: var(--us-surface-2);
  --bs-heading-color: var(--us-text);
}

/* ---------- Surfaces ---------- */
.card, .modal-content, .dropdown-menu, .list-group-item, .accordion-item,
.offcanvas, .toast, .popover {
  background-color: var(--us-surface);
  color: var(--us-text);
  border-color: var(--us-border);
}

.card {
  border: 1px solid var(--us-border);
  border-radius: var(--us-radius);
  box-shadow: var(--us-shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.card:hover { border-color: var(--us-border-strong); box-shadow: var(--us-shadow); }

.card-header, .card-footer, .modal-header, .modal-footer, .accordion-button {
  background-color: var(--us-surface-2);
  border-color: var(--us-border);
  color: var(--us-text);
}
.accordion-button:not(.collapsed) { background: var(--us-primary-soft); color: var(--us-text); }
.accordion-button::after { filter: invert(var(--us-icon-invert)) grayscale(1) brightness(1.6); }

.modal-content {
  border: 1px solid var(--us-border);
  border-radius: var(--us-radius-lg);
  box-shadow: var(--us-shadow-lg);
}
.modal-backdrop.show { opacity: .7; }
.btn-close { filter: invert(var(--us-icon-invert)) grayscale(1) brightness(2); opacity: .8; }

.dropdown-menu {
  border: 1px solid var(--us-border);
  border-radius: var(--us-radius-sm);
  box-shadow: var(--us-shadow);
  padding: 6px;
}
.dropdown-item { color: var(--us-text); border-radius: 6px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--us-primary-soft); color: var(--us-text); }
.dropdown-divider { border-color: var(--us-border); }

/* ---------- Navbar chrome ---------- */
.navbar {
  background-color: var(--us-navy) !important;
  background-image: var(--us-grad-soft) !important;
  border-bottom: 1px solid var(--us-border);
  backdrop-filter: saturate(140%) blur(8px);
}
.navbar .navbar-brand, .navbar .nav-link, .navbar .navbar-text, .navbar .dropdown-toggle {
  color: var(--us-on-navy) !important;
}
.navbar .nav-link:hover { color: var(--us-primary-2) !important; }
.navbar .dropdown-toggle {
  background-color: rgba(255, 255, 255, .08) !important;
  border-radius: 999px;
}
.navbar-toggler { border-color: var(--us-border-strong); }

.nav-tabs { border-bottom-color: var(--us-border); }
.nav-tabs .nav-link { color: var(--us-text-2); border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link:hover { color: var(--us-text); border-bottom-color: var(--us-border-strong); }
.nav-tabs .nav-link.active {
  color: var(--us-primary-2);
  background: transparent;
  border-bottom-color: var(--us-primary);
}
.nav-pills .nav-link { color: var(--us-text-2); border-radius: 999px; }
.nav-pills .nav-link.active { background: var(--us-grad); color: #fff; }

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--us-text);
  --bs-table-border-color: var(--us-border);
  --bs-table-striped-bg: var(--us-surface-2);
  --bs-table-striped-color: var(--us-text);
  --bs-table-hover-bg: var(--us-primary-soft);
  --bs-table-hover-color: var(--us-text);
  color: var(--us-text);
  border-color: var(--us-border);
}
.table > thead, .table thead th, .thead-light, .table-light {
  background-color: var(--us-surface-2) !important;
  color: var(--us-text) !important;
  border-color: var(--us-border) !important;
}
.table thead th {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--us-text-2) !important;
}
.table > :not(caption) > * > * { border-bottom-color: var(--us-border); }
.table-bordered > :not(caption) > * > * { border-color: var(--us-border); }
.table-responsive { border-radius: var(--us-radius); }

/* ---------- Forms ---------- */
.form-control, .form-select, .input-group-text, textarea, select,
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
input[type="datetime-local"], input[type="time"], input[type="month"] {
  background-color: var(--us-surface-2);
  border: 1px solid var(--us-border);
  color: var(--us-text);
  border-radius: var(--us-radius-sm);
}
.form-control:focus, .form-select:focus, textarea:focus, select:focus,
input:focus-visible, .form-check-input:focus {
  background-color: var(--us-surface-2);
  border-color: var(--us-primary);
  color: var(--us-text);
  box-shadow: var(--us-ring);
  outline: none;
}
.form-control::placeholder, textarea::placeholder { color: var(--us-text-3); }
.form-control:disabled, .form-select:disabled, [readonly] {
  background-color: var(--us-surface-3);
  color: var(--us-text-2);
}
.form-label, label { color: var(--us-text-2); font-weight: 600; }
.form-check-input { background-color: var(--us-surface-3); border-color: var(--us-border-strong); }
.form-check-input:checked { background-color: var(--us-primary); border-color: var(--us-primary); }
.input-group-text { color: var(--us-text-2); }

/* native pickers / option lists follow the theme */
option, optgroup { background: var(--us-surface); color: var(--us-text); }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(var(--us-icon-invert));
  opacity: .75;
  cursor: pointer;
}

/* ---------- Buttons ---------- */
.btn { border-radius: var(--us-radius-sm); font-weight: 600; transition: transform .12s ease, box-shadow .2s ease, filter .2s ease; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--us-ring); }

.btn-primary, .btn-info {
  background: var(--us-grad);
  border: none;
  color: #fff;
  box-shadow: 0 4px 14px rgba(3,170,251,.28);
}
.btn-primary:hover, .btn-info:hover { filter: brightness(1.1); color: #fff; box-shadow: 0 6px 20px rgba(3,170,251,.38); }

.btn-secondary { background: var(--us-surface-3); border: 1px solid var(--us-border-strong); color: var(--us-text); }
.btn-secondary:hover { background: var(--us-elevated); color: var(--us-text); border-color: var(--us-primary-line); }

.btn-success { background: var(--us-success); border-color: var(--us-success); color: #04231a; }
.btn-success:hover { filter: brightness(1.08); color: #04231a; }
.btn-danger  { background: var(--us-danger);  border-color: var(--us-danger);  color: #fff; }
.btn-warning { background: var(--us-warning); border-color: var(--us-warning); color: #2b1a02; }
.btn-light   { background: var(--us-surface-2); border-color: var(--us-border); color: var(--us-text); }
.btn-dark    { background: var(--us-navy); border-color: var(--us-border-strong); color: var(--us-on-navy); }

.btn-outline-primary { border-color: var(--us-primary-line); color: var(--us-primary-2); background: transparent; }
.btn-outline-primary:hover { background: var(--us-primary-soft); border-color: var(--us-primary); color: var(--us-primary-2); }
.btn-outline-secondary { border-color: var(--us-border-strong); color: var(--us-text-2); }
.btn-outline-secondary:hover { background: var(--us-surface-3); color: var(--us-text); }
.btn-outline-light { border-color: var(--us-border-strong); color: var(--us-text); }
.btn-outline-light:hover { background: var(--us-surface-3); color: var(--us-text); }

/* ---------- Badges / alerts / misc ---------- */
.badge.bg-primary   { background: var(--us-grad) !important; color: #fff; }
.badge.bg-secondary { background: var(--us-surface-3) !important; color: var(--us-text); }
.badge.bg-success   { background: var(--us-success) !important; color: #04231a; }
.badge.bg-danger    { background: var(--us-danger) !important;  color: #fff; }
.badge.bg-warning   { background: var(--us-warning) !important; color: #2b1a02; }
.badge.bg-info      { background: var(--us-info) !important;    color: #04192e; }
.badge.bg-light     { background: var(--us-surface-3) !important; color: var(--us-text) !important; }
.badge.bg-dark      { background: var(--us-navy) !important;    color: var(--us-on-navy); }

.alert { border-radius: var(--us-radius); border: 1px solid var(--us-border); background: var(--us-surface-2); color: var(--us-text); }
.alert-primary { background: var(--us-primary-soft); border-color: var(--us-primary-line); color: var(--us-text); }
.alert-success { background: var(--us-success-soft); border-color: var(--us-success); color: var(--us-text); }
.alert-danger  { background: var(--us-danger-soft);  border-color: var(--us-danger);  color: var(--us-text); }
.alert-warning { background: var(--us-warning-soft); border-color: var(--us-warning); color: var(--us-text); }
.alert-info    { background: var(--us-info-soft);    border-color: var(--us-info);    color: var(--us-text); }

.progress { background: var(--us-surface-3); border-radius: 999px; }
.progress-bar { background: var(--us-grad); }

.page-link { background: var(--us-surface-2); border-color: var(--us-border); color: var(--us-text-2); }
.page-link:hover { background: var(--us-surface-3); color: var(--us-text); }
.page-item.active .page-link { background: var(--us-grad); border-color: transparent; color: #fff; }

.list-group-item-action:hover { background: var(--us-surface-2); color: var(--us-text); }
.spinner-border, .spinner-grow { color: var(--us-primary); }
.tooltip-inner { background: var(--us-navy); color: var(--us-on-navy); }

/* Bootstrap light/dark helpers pinned to the theme so they stay legible */
.text-dark  { color: var(--us-text) !important; }
.text-white { color: #fff !important; }
.bg-white   { background-color: var(--us-surface) !important; }
.bg-light   { background-color: var(--us-surface-2) !important; }
.bg-dark    { background-color: var(--us-navy) !important; color: var(--us-on-navy); }
.border     { border-color: var(--us-border) !important; }

/* ---------- Brand marks ---------- */
/* Every page points straight at assets/brand/ now (the old logo.png /
   logo2.jpg / icon.PNG are gone); theme.js only picks the cut for the ground. */
.us-logo, img[data-us-logo-base] {
  opacity: 1;
  transition: opacity .15s ease;
}
/* Sizing stays with the page. This used to force `height: auto` at the same
   specificity as rules like `.header-brand img { height: 38px }`, and since
   theme.css loads later it won, blowing the 1978px wordmark up to full size.
   :where() has zero specificity, so any page rule wins; object-fit keeps the
   wider Unity Surge wordmark undistorted in a box sized for the old logo. */
:where(.us-logo, img[data-us-logo-base]) {
  max-width: 100%;
  object-fit: contain;
}

/* ---------- Theme toggle ---------- */
.us-theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 11px;
  border-radius: 999px;
  border: 1px solid var(--us-border-strong);
  background: var(--us-surface);
  color: var(--us-text);
  font: 600 13px/1 "Inter", "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: var(--us-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.us-theme-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--us-primary);
  box-shadow: var(--us-shadow-lg), var(--us-glow);
}
.us-theme-toggle .us-tt-icon {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--us-grad);
  color: #fff;
  font-size: 13px;
  flex: 0 0 auto;
}
.us-theme-toggle .us-tt-label { white-space: nowrap; }
@media (max-width: 575.98px) {
  .us-theme-toggle { right: 12px; bottom: 12px; padding: 9px; }
  .us-theme-toggle .us-tt-label { display: none; }
}
@media print { .us-theme-toggle { display: none !important; } }

/* Cross-fade while the theme flips */
.us-theming, .us-theming * {
  transition: background-color .28s ease, border-color .28s ease, color .28s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .us-theming, .us-theming * { transition: none !important; }
  .btn, .card, .us-theme-toggle { transition: none !important; }
}

/* ============================================================================
   Motion - subtle, quick, and switched off for reduced-motion users
   ========================================================================= */
@keyframes us-rise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes us-pop    { from { opacity: 0; transform: scale(.96); }       to { opacity: 1; transform: none; } }
@keyframes us-shimmer{ from { background-position: -200% 0; }           to { background-position: 200% 0; } }

/* content arrives with a short rise; later siblings a beat behind */
.card, .alert, .table-responsive, .modal-content { animation: us-rise .45s cubic-bezier(.22,1,.36,1) both; }
.card:nth-child(2), .alert:nth-child(2) { animation-delay: .05s; }
.card:nth-child(3), .alert:nth-child(3) { animation-delay: .10s; }
.card:nth-child(4), .alert:nth-child(4) { animation-delay: .15s; }
.card:nth-child(n+5), .alert:nth-child(n+5) { animation-delay: .20s; }
.modal.show .modal-content { animation: us-pop .28s cubic-bezier(.22,1,.36,1) both; }
.dropdown-menu.show { animation: us-pop .18s ease-out both; transform-origin: top right; }

/* buttons: lift on hover, settle on press, brand glow on the primary */
.btn { transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background-color .15s, border-color .15s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary:hover, .btn-info:hover { box-shadow: 0 8px 24px rgba(3,170,251,.42); }

/* inputs: focus ring eases in instead of snapping */
.form-control, .form-select, textarea, select, input {
  transition: border-color .18s ease, box-shadow .22s ease, background-color .18s ease;
}

/* tables: rows respond to the pointer */
.table tbody tr { transition: background-color .15s ease; }
.table-hover tbody tr:hover td { color: var(--us-text); }

/* badges and pills settle in */
.badge { transition: transform .15s ease; }
.badge:hover { transform: translateY(-1px); }

/* plain text links get a sliding underline; anything with a class is a styled
   element (button, card, tile) that paints its own background */
a:not([class]) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .2s ease, color .15s ease;
}
a:not([class]):hover { background-size: 100% 1px; }
a:not([class]):has(img) { background-image: none !important; }

/* the theme toggle icon rotates through the switch */
.us-theme-toggle .us-tt-icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.us-theme-toggle:hover .us-tt-icon { transform: rotate(20deg); }
.us-theming .us-theme-toggle .us-tt-icon { transform: rotate(360deg); }

@media (prefers-reduced-motion: reduce) {
  .card, .alert, .table-responsive, .modal-content, .modal.show .modal-content, .dropdown-menu.show { animation: none !important; }
  .btn, .badge, .btn:hover, .badge:hover { transform: none !important; }
  a:not([class]) { transition: none !important; }
}

/* ============================================================================
   Floating tables
   Every table in the system sits in one of a handful of wrappers. These rules
   lift that wrapper off the page - rounded, bordered, shadowed - and give the
   header and rows a little depth. Deliberately container-and-paint only: no
   padding, height or box-sizing, because /sli draws its table as two tables
   side by side whose rows must stay pixel-aligned.
   ========================================================================= */
.table-container, .tablewrap, .table-card, .tbl-wrap, .table-responsive,
.freeze-pane-container, .scrollable-columns-wrapper, .data-table-wrap,
.us-table-float {
  border-radius: var(--us-radius) !important;
  border: 1px solid var(--us-border) !important;
  background: var(--us-surface);
  box-shadow: var(--us-shadow), 0 1px 0 rgba(255, 255, 255, .03) inset !important;
  transition: box-shadow .25s ease, border-color .25s ease;
}
/* a touch more lift while you are working in it */
.table-container:hover, .tablewrap:hover, .table-card:hover,
.tbl-wrap:hover, .table-responsive:hover, .us-table-float:hover {
  box-shadow: var(--us-shadow-lg), 0 0 0 1px var(--us-primary-soft) !important;
  border-color: var(--us-border-strong) !important;
}

/* header sits above the rows and casts a shadow onto them while scrolling */
.table-container thead th, .tablewrap thead th, .table-card thead th,
.tbl-wrap thead th, .table-responsive thead th,
.data-table thead th, .all-records-table thead th,
.fixed-columns-table thead th, .scrollable-columns-table thead th,
.results-table thead th, .freeze-table thead th {
  box-shadow: 0 1px 0 var(--us-border), 0 6px 12px -8px rgba(0, 0, 0, .55);
  backdrop-filter: saturate(140%) blur(2px);
}

/* rows: quiet banding, and they lift on hover instead of just changing colour */
.table-container tbody tr, .tablewrap tbody tr, .table-card tbody tr,
.tbl-wrap tbody tr, .table-responsive tbody tr, .us-table-float tbody tr {
  transition: background-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.table-container tbody tr:hover, .tablewrap tbody tr:hover, .table-card tbody tr:hover,
.tbl-wrap tbody tr:hover, .table-responsive tbody tr:hover, .us-table-float tbody tr:hover {
  box-shadow: inset 3px 0 0 var(--us-primary), 0 2px 12px -4px rgba(0, 0, 0, .45);
}

/* last row keeps the wrapper's rounded corner instead of cutting across it */
.table-container tbody tr:last-child td, .tablewrap tbody tr:last-child td,
.table-card tbody tr:last-child td, .tbl-wrap tbody tr:last-child td,
.table-responsive tbody tr:last-child td { border-bottom: 0; }

/* cards and panels that hold tables get the same lift, so nothing looks flat
   next to a floating table */
.card, .panel, .dash-card, .stat-card, .qa-card, .app-card, .home-tile,
.item-card, .hero-card, .result-card, .kpi, .modal-content {
  box-shadow: var(--us-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .table-container, .tablewrap, .table-card, .tbl-wrap, .table-responsive,
  .us-table-float, .table-container tbody tr, .tablewrap tbody tr { transition: none !important; }
}