/* =============================================================================
   Thalia Code Deploy — Premium SaaS Theme
   -----------------------------------------------------------------------------
   A presentation-only override layer on top of SB Admin 2 / Bootstrap 4.
   Loaded AFTER sb-admin-2.min.css. Changes NO markup, classes, IDs, or JS —
   it only restyles the existing class vocabulary into a modern SaaS look
   (Linear / Stripe / Vercel / Clerk direction) with light + dark themes.

   Sections:
     1.  Design tokens (light + dark)
     2.  Base / typography
     3.  Layout: page wrapper, container, page heading
     4.  Sidebar
     5.  Topbar
     6.  Cards (incl. border-left KPI cards)
     7.  Buttons
     8.  Forms & inputs
     9.  Tables + DataTables
     10. Badges & chips
     11. Alerts
     12. Modals & dropdowns
     13. Utilities, scrollbars, focus, animations
     14. Login page
     15. Responsive & reduced-motion
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
   /* Brand — refined indigo */
   --t-primary:        #4f46e5;
   --t-primary-hover:  #4338ca;
   --t-primary-active: #3730a3;
   --t-primary-soft:   #eef2ff;
   --t-primary-ring:   rgba(79, 70, 229, 0.35);

   /* Semantic */
   --t-success:        #16a34a;
   --t-success-soft:   #dcfce7;
   --t-success-fg:     #166534;
   --t-danger:         #dc2626;
   --t-danger-hover:   #b91c1c;
   --t-danger-soft:    #fee2e2;
   --t-danger-fg:      #991b1b;
   --t-warning:        #d97706;
   --t-warning-soft:   #fef3c7;
   --t-warning-fg:     #92400e;
   --t-info:           #0891b2;
   --t-info-soft:      #cffafe;
   --t-info-fg:        #155e75;

   /* Neutrals / surfaces (light) */
   --t-bg:             #f6f7f9;   /* app background */
   --t-bg-subtle:      #eef0f4;
   --t-surface:        #ffffff;   /* cards, modals */
   --t-surface-2:      #fbfbfd;   /* nested / header strips */
   --t-elevated:       #ffffff;

   /* Text */
   --t-text:           #0f172a;   /* slate-900 */
   --t-text-secondary: #475569;   /* slate-600 */
   --t-text-muted:     #64748b;   /* slate-500 */
   --t-text-faint:     #94a3b8;   /* slate-400 */
   --t-on-primary:     #ffffff;

   /* Lines */
   --t-border:         #e5e7eb;
   --t-border-strong:  #d1d5db;
   --t-divider:        #eceef2;

   /* Radii */
   --t-radius-xs: 8px;
   --t-radius-sm: 10px;
   --t-radius:    14px;
   --t-radius-lg: 18px;
   --t-radius-pill: 999px;

   /* Elevation */
   --t-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
   --t-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
   --t-shadow:    0 4px 12px -2px rgba(16, 24, 40, 0.08), 0 2px 6px -2px rgba(16, 24, 40, 0.05);
   --t-shadow-md: 0 12px 28px -6px rgba(16, 24, 40, 0.12), 0 4px 10px -4px rgba(16, 24, 40, 0.07);
   --t-shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, 0.18);

   /* Sidebar (dark rail even in light mode — premium SaaS feel) */
   --t-sidebar-bg:      #0f1729;
   --t-sidebar-bg-2:    #0b1220;
   --t-sidebar-text:    #cbd5e1;
   --t-sidebar-text-dim:#8091a7;
   --t-sidebar-active:  #ffffff;
   --t-sidebar-active-bg: rgba(99, 102, 241, 0.18);
   --t-sidebar-hover-bg:  rgba(148, 163, 184, 0.10);
   --t-sidebar-border:  rgba(148, 163, 184, 0.12);

   /* Motion */
   --t-ease: cubic-bezier(0.16, 1, 0.3, 1);
   --t-dur:  180ms;

   --t-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html[data-theme="dark"] {
   --t-primary:        #818cf8;
   --t-primary-hover:  #a5b4fc;
   --t-primary-active: #c7d2fe;
   --t-primary-soft:   rgba(99, 102, 241, 0.16);
   --t-primary-ring:   rgba(129, 140, 248, 0.45);

   --t-success:        #34d399;
   --t-success-soft:   rgba(16, 185, 129, 0.16);
   --t-success-fg:     #6ee7b7;
   --t-danger:         #f87171;
   --t-danger-hover:   #fca5a5;
   --t-danger-soft:    rgba(239, 68, 68, 0.16);
   --t-danger-fg:      #fca5a5;
   --t-warning:        #fbbf24;
   --t-warning-soft:   rgba(245, 158, 11, 0.16);
   --t-warning-fg:     #fcd34d;
   --t-info:           #22d3ee;
   --t-info-soft:      rgba(6, 182, 212, 0.16);
   --t-info-fg:        #67e8f9;

   --t-bg:             #0a0f1c;
   --t-bg-subtle:      #0d1424;
   --t-surface:        #111827;
   --t-surface-2:      #0f1626;
   --t-elevated:       #151d2e;

   --t-text:           #f1f5f9;
   --t-text-secondary: #cbd5e1;
   --t-text-muted:     #94a3b8;
   --t-text-faint:     #64748b;
   --t-on-primary:     #0a0f1c;

   --t-border:         #1f2937;
   --t-border-strong:  #2b3648;
   --t-divider:        #1a2334;

   --t-surface:        #111827;
   --t-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
   --t-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
   --t-shadow:    0 4px 14px -2px rgba(0, 0, 0, 0.55);
   --t-shadow-md: 0 14px 32px -8px rgba(0, 0, 0, 0.6);
   --t-shadow-lg: 0 28px 56px -12px rgba(0, 0, 0, 0.7);

   --t-sidebar-bg:      #0b1120;
   --t-sidebar-bg-2:    #080d18;
   --t-sidebar-border:  rgba(148, 163, 184, 0.10);
}

/* -----------------------------------------------------------------------------
   2. BASE / TYPOGRAPHY
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body,
body.bg-gradient-primary {
   font-family: var(--t-font) !important;
   background: var(--t-bg) !important;
   color: var(--t-text) !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   letter-spacing: -0.006em;
   transition: background-color var(--t-dur) var(--t-ease), color var(--t-dur) var(--t-ease);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: var(--t-font) !important;
   color: var(--t-text) !important;
   font-weight: 650;
   letter-spacing: -0.02em;
}

a { color: var(--t-primary); transition: color var(--t-dur) var(--t-ease); }
a:hover { color: var(--t-primary-hover); }

/* Remap SB Admin text utilities to tokens */
.text-primary  { color: var(--t-primary) !important; }
.text-success  { color: var(--t-success) !important; }
.text-danger   { color: var(--t-danger) !important; }
.text-warning  { color: var(--t-warning) !important; }
.text-info     { color: var(--t-info) !important; }
.text-secondary,
.text-gray-600 { color: var(--t-text-secondary) !important; }
.text-gray-800, .text-gray-900, .text-dark { color: var(--t-text) !important; }
.text-gray-700 { color: var(--t-text-secondary) !important; }
.text-gray-500, .text-muted { color: var(--t-text-muted) !important; }
.text-gray-400, .text-gray-300 { color: var(--t-text-faint) !important; }
.text-white, .text-white-50 { color: #fff !important; }
.text-white-50 { color: rgba(255,255,255,0.72) !important; }

hr, .sidebar-divider {
   border-color: var(--t-divider) !important;
   opacity: 1;
}

/* -----------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
#content-wrapper { background: var(--t-bg) !important; }
#content { background: transparent !important; }

.container-fluid { padding: 1.75rem 1.75rem 2.5rem; max-width: 1600px; }

/* Page heading block */
.container-fluid > .d-sm-flex.mb-4:first-child,
.container-fluid > .d-sm-flex.align-items-center {
   margin-bottom: 1.5rem !important;
}
.container-fluid > .d-sm-flex h1.h3 {
   font-size: 1.5rem;
   font-weight: 700;
   letter-spacing: -0.025em;
   color: var(--t-text) !important;
}

/* Footer */
.sticky-footer,
footer.sticky-footer .bg-white,
.sticky-footer.bg-white {
   background: transparent !important;
}
.sticky-footer .copyright { color: var(--t-text-faint) !important; font-size: 0.8rem; }

/* -----------------------------------------------------------------------------
   4. SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar,
.sidebar.bg-gradient-primary,
ul.navbar-nav.sidebar {
   background: linear-gradient(180deg, var(--t-sidebar-bg) 0%, var(--t-sidebar-bg-2) 100%) !important;
   border-right: 1px solid var(--t-sidebar-border);
   box-shadow: none !important;
}
/* Widen the expanded rail slightly so full nav labels fit inside the pills.
   Scoped to desktop only (>=768px) so SB Admin's mobile collapse/off-canvas
   behavior is untouched. SB Admin forces 14rem !important here, so we match it. */
@media (min-width: 768px) {
   .sidebar,
   .sidebar.bg-gradient-primary,
   ul.navbar-nav.sidebar { width: 15rem !important; }
}

.sidebar .sidebar-brand {
   height: 4.25rem;
   padding: 0 1.25rem;
   font-family: var(--t-font);
   font-weight: 700;
   letter-spacing: -0.01em;
   font-size: 0.98rem;
   color: #fff;
   text-transform: none;
}
.sidebar .sidebar-brand-icon i {
   color: var(--t-primary);
   font-size: 1.35rem;
}
html[data-theme="dark"] .sidebar .sidebar-brand-icon i { color: var(--t-primary); }
.sidebar .sidebar-brand-icon.rotate-n-15 { transform: none; } /* de-tilt the logo */
.sidebar .sidebar-brand-text sup { color: var(--t-sidebar-text-dim); font-weight: 500; }

.sidebar hr.sidebar-divider {
   border-top: 1px solid var(--t-sidebar-border) !important;
   margin: 0.75rem 1rem;
}

.sidebar .nav-item { margin: 0.125rem 0.6rem; }
.sidebar .nav-item .nav-link {
   display: flex;
   align-items: center;
   gap: 0.7rem;
   /* Override SB Admin 2's fixed width:14rem (== full sidebar width) which,
      combined with the .nav-item horizontal margin, overflowed the rail. */
   width: auto !important;
   min-width: 0;
   padding: 0.6rem 0.85rem;
   border-radius: var(--t-radius-sm);
   color: var(--t-sidebar-text) !important;
   font-size: 0.86rem;
   font-weight: 500;
   line-height: 1.2;
   white-space: nowrap;
   overflow: hidden;
   transition: background-color var(--t-dur) var(--t-ease),
               color var(--t-dur) var(--t-ease);
}
.sidebar .nav-item .nav-link span {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
}
.sidebar .nav-item .nav-link i {
   color: var(--t-sidebar-text-dim) !important;
   font-size: 0.95rem;
   width: 1.25rem;
   margin: 0;
   text-align: center;
   transition: color var(--t-dur) var(--t-ease);
}
.sidebar .nav-item .nav-link span { color: inherit !important; font-size: 0.86rem; }

.sidebar .nav-item .nav-link:hover {
   background: var(--t-sidebar-hover-bg);
   color: #fff !important;
}
.sidebar .nav-item .nav-link:hover i { color: var(--t-sidebar-text) !important; }

/* Active state — the current page is marked with .nav-item.active in the layout
   (driven by the current route), giving a distinct highlighted pill. */
.sidebar .nav-item.active > .nav-link {
   background: var(--t-sidebar-active-bg) !important;
   color: #fff !important;
   font-weight: 600;
   box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.25);
}
.sidebar .nav-item.active > .nav-link i { color: var(--t-primary) !important; }

/* Keyboard focus ring */
.sidebar .nav-item .nav-link:focus-visible {
   outline: 2px solid var(--t-primary-ring);
   outline-offset: -2px;
}

.sidebar .sidebar-brand:hover { text-decoration: none; }

/* Collapsed / toggled sidebar keeps rounded items */
.sidebar.toggled .nav-item .nav-link { justify-content: center; }

/* -----------------------------------------------------------------------------
   5. TOPBAR
   -------------------------------------------------------------------------- */
.topbar,
.navbar.topbar {
   height: 4.25rem;
   background: color-mix(in srgb, var(--t-surface) 82%, transparent) !important;
   -webkit-backdrop-filter: saturate(180%) blur(12px);
   backdrop-filter: saturate(180%) blur(12px);
   border-bottom: 1px solid var(--t-border);
   box-shadow: none !important;
   margin-bottom: 0 !important;
}
/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, white 50%, black)) {
   .topbar, .navbar.topbar { background: var(--t-surface) !important; }
}

.topbar .nav-item .nav-link { color: var(--t-text-secondary) !important; }
.topbar .topbar-divider { border-right: 1px solid var(--t-border); }
.topbar .img-profile {
   height: 2.1rem; width: 2.1rem;
   border: 2px solid var(--t-border);
   box-shadow: var(--t-shadow-xs);
}
.topbar #sidebarToggleTop { color: var(--t-text-secondary); }
.topbar #sidebarToggleTop:hover { background: var(--t-bg-subtle); }
.topbar .text-gray-600 { color: var(--t-text-secondary) !important; font-weight: 500; }

/* Theme toggle button (added in topbar markup) */
.theme-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 2.4rem; height: 2.4rem;
   border-radius: var(--t-radius-sm);
   border: 1px solid var(--t-border);
   background: var(--t-surface);
   color: var(--t-text-secondary);
   cursor: pointer;
   transition: all var(--t-dur) var(--t-ease);
}
.theme-toggle:hover {
   background: var(--t-bg-subtle);
   color: var(--t-text);
   border-color: var(--t-border-strong);
}
.theme-toggle:focus-visible { outline: 2px solid var(--t-primary-ring); outline-offset: 2px; }
.theme-toggle .fa-sun { display: none; }
.theme-toggle .fa-moon { display: inline; }
html[data-theme="dark"] .theme-toggle .fa-sun { display: inline; }
html[data-theme="dark"] .theme-toggle .fa-moon { display: none; }

/* -----------------------------------------------------------------------------
   6. CARDS
   -------------------------------------------------------------------------- */
.card {
   background: var(--t-surface) !important;
   border: 1px solid var(--t-border) !important;
   border-radius: var(--t-radius) !important;
   box-shadow: var(--t-shadow-sm) !important;
   transition: box-shadow var(--t-dur) var(--t-ease),
               transform var(--t-dur) var(--t-ease),
               border-color var(--t-dur) var(--t-ease);
}
.card.shadow, .card.shadow-lg, .card.shadow-sm {
   box-shadow: var(--t-shadow-sm) !important;
}
.card:hover { box-shadow: var(--t-shadow) !important; }

.card .card-header {
   background: transparent !important;
   border-bottom: 1px solid var(--t-divider) !important;
   padding: 1.05rem 1.35rem;
   border-radius: var(--t-radius) var(--t-radius) 0 0 !important;
}
.card .card-header h6,
.card .card-header .m-0.font-weight-bold {
   font-size: 0.95rem !important;
   font-weight: 650 !important;
   color: var(--t-text) !important;
   letter-spacing: -0.01em;
}
.card .card-body { padding: 1.35rem; color: var(--t-text); }

/* Nested cards (instance details) sit flatter */
.card .card { box-shadow: none !important; background: var(--t-surface-2) !important; }

/* KPI / border-left accent cards */
.card.border-left-primary { border-left: 4px solid var(--t-primary) !important; }
.card.border-left-success { border-left: 4px solid var(--t-success) !important; }
.card.border-left-info    { border-left: 4px solid var(--t-info) !important; }
.card.border-left-warning { border-left: 4px solid var(--t-warning) !important; }
.card.border-left-danger  { border-left: 4px solid var(--t-danger) !important; }
.card[class*="border-left-"] { border-radius: var(--t-radius) !important; }

.card .text-xl { font-size: 0.72rem !important; letter-spacing: 0.06em; font-weight: 700 !important; color: var(--t-text-muted) !important; }
.card .text-primary.text-uppercase { color: var(--t-text-muted) !important; }

/* Big glyphs in KPI cards */
.card .fa-2x { color: var(--t-text-faint) !important; opacity: 0.55; }

/* -----------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
   font-family: var(--t-font);
   font-weight: 550;
   font-size: 0.85rem;
   letter-spacing: -0.006em;
   border-radius: var(--t-radius-sm);
   padding: 0.5rem 0.95rem;
   border: 1px solid transparent;
   box-shadow: none;
   transition: background-color var(--t-dur) var(--t-ease),
               border-color var(--t-dur) var(--t-ease),
               color var(--t-dur) var(--t-ease),
               box-shadow var(--t-dur) var(--t-ease),
               transform 90ms var(--t-ease);
   cursor: pointer;
}
.btn:focus, .btn:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px var(--t-primary-ring);
}
.btn:active { transform: translateY(0.5px) scale(0.99); }
.btn.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.8rem; border-radius: var(--t-radius-xs); }
.btn.btn-lg { padding: 0.7rem 1.2rem; font-size: 0.95rem; }

/* Primary */
.btn-primary {
   background: var(--t-primary) !important;
   border-color: var(--t-primary) !important;
   color: var(--t-on-primary) !important;
   box-shadow: var(--t-shadow-xs);
}
.btn-primary:hover { background: var(--t-primary-hover) !important; border-color: var(--t-primary-hover) !important; }
.btn-primary:active { background: var(--t-primary-active) !important; }

/* Semantic solids */
.btn-success { background: var(--t-success) !important; border-color: var(--t-success) !important; color: #fff !important; }
.btn-success:hover { filter: brightness(0.94); }
.btn-danger  { background: var(--t-danger) !important; border-color: var(--t-danger) !important; color: #fff !important; }
.btn-danger:hover  { background: var(--t-danger-hover) !important; border-color: var(--t-danger-hover) !important; }
.btn-warning { background: var(--t-warning) !important; border-color: var(--t-warning) !important; color: #fff !important; }
.btn-warning:hover { filter: brightness(0.94); }
.btn-info    { background: var(--t-info) !important; border-color: var(--t-info) !important; color: #fff !important; }
.btn-info:hover { filter: brightness(0.94); }
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-info { color: #0a0f1c !important; }

/* Secondary → subtle neutral */
.btn-secondary {
   background: var(--t-surface) !important;
   border-color: var(--t-border-strong) !important;
   color: var(--t-text-secondary) !important;
}
.btn-secondary:hover { background: var(--t-bg-subtle) !important; color: var(--t-text) !important; }

/* Outline buttons */
.btn-outline-primary { color: var(--t-primary) !important; border-color: var(--t-border-strong) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--t-primary-soft) !important; border-color: var(--t-primary) !important; }

/* Link buttons */
.btn-link { color: var(--t-primary) !important; box-shadow: none !important; }

/* Icon-split (used heavily) */
.btn-icon-split {
   padding: 0 !important;
   overflow: hidden;
   display: inline-flex;
   align-items: stretch;
}
.btn-icon-split .icon {
   background: rgba(0, 0, 0, 0.12);
   padding: 0.5rem 0.6rem;
   display: flex;
   align-items: center;
}
.btn-icon-split .text { padding: 0.5rem 0.85rem; display: flex; align-items: center; }
.btn-icon-split.btn-sm .icon { padding: 0.35rem 0.5rem; }
.btn-icon-split.btn-sm .text { padding: 0.35rem 0.7rem; }

/* Circle buttons */
.btn-circle {
   border-radius: 50% !important;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

/* Btn group cohesion */
.btn-group .btn { border-radius: var(--t-radius-xs); }
.btn-group .btn + .btn { margin-left: 0.4rem; }
.btn-group .btn.ml-1 { margin-left: 0.4rem !important; }

/* User/block buttons (login) */
.btn-user { border-radius: var(--t-radius-sm) !important; padding: 0.65rem 1rem !important; font-weight: 600; }
.btn-block { width: 100%; }

/* Disabled */
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* -----------------------------------------------------------------------------
   8. FORMS & INPUTS
   -------------------------------------------------------------------------- */
label, .form-group > label {
   font-size: 0.82rem;
   font-weight: 600;
   color: var(--t-text-secondary);
   margin-bottom: 0.4rem;
   letter-spacing: -0.004em;
}

.form-control,
.form-control-user,
textarea.form-control,
select.form-control {
   font-family: var(--t-font);
   font-size: 0.9rem !important;
   color: var(--t-text) !important;
   background: var(--t-surface) !important;
   border: 1px solid var(--t-border-strong) !important;
   border-radius: var(--t-radius-sm) !important;
   padding: 0.55rem 0.8rem !important;
   min-height: 2.6rem;
   box-shadow: var(--t-shadow-xs);
   transition: border-color var(--t-dur) var(--t-ease),
               box-shadow var(--t-dur) var(--t-ease),
               background-color var(--t-dur) var(--t-ease);
}
textarea.form-control { min-height: auto; line-height: 1.5; }
.form-control-user { min-height: 2.9rem; }

.form-control::placeholder { color: var(--t-text-faint) !important; }
.form-control:focus,
.form-control-user:focus {
   border-color: var(--t-primary) !important;
   box-shadow: 0 0 0 3px var(--t-primary-ring) !important;
   background: var(--t-surface) !important;
   color: var(--t-text) !important;
}
.form-control:disabled, .form-control[readonly] {
   background: var(--t-bg-subtle) !important;
   color: var(--t-text-muted) !important;
   cursor: not-allowed;
}

.form-text, small.form-text, .text-muted small { color: var(--t-text-muted) !important; font-size: 0.78rem; }

/* Search boxes styled as pill inputs where used */
.navbar-search .form-control { background: var(--t-bg-subtle) !important; border-color: var(--t-border) !important; }

/* Input group buttons align to input radius */
.input-group .btn { border-radius: 0 var(--t-radius-sm) var(--t-radius-sm) 0; }

/* -----------------------------------------------------------------------------
   9. TABLES + DATATABLES
   -------------------------------------------------------------------------- */
.table {
   color: var(--t-text) !important;
   margin-bottom: 0;
   font-size: 0.875rem;
}
.table thead th {
   background: var(--t-surface-2);
   color: var(--t-text-muted) !important;
   font-size: 0.72rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   border-top: none !important;
   border-bottom: 1px solid var(--t-border) !important;
   padding: 0.7rem 0.9rem;
   vertical-align: middle;
   position: sticky;
   top: 0;
   z-index: 2;
}
.table td, .table th {
   border-top: 1px solid var(--t-divider) !important;
   padding: 0.75rem 0.9rem;
   vertical-align: middle;
   color: var(--t-text);
}
.table tbody th[scope="row"] { font-weight: 600; color: var(--t-text) !important; }
.table.table-bordered,
.table.table-bordered td,
.table.table-bordered th { border-color: var(--t-divider) !important; }
.table.table-bordered { border-radius: var(--t-radius-sm); overflow: hidden; }

.table tbody tr { transition: background-color 120ms var(--t-ease); }
.table tbody tr:hover { background: var(--t-bg-subtle) !important; }

/* Numeric alignment aid */
.table td small { color: var(--t-text-muted); }

/* Instance details key/value tables (th in first column) */
.table-bordered tr > th:first-child {
   width: 34%;
   background: var(--t-surface-2);
   color: var(--t-text-secondary) !important;
   font-weight: 600;
}

/* DataTables (v1.x and v2.x) controls */
.dataTables_wrapper { color: var(--t-text-secondary); padding-top: 0.25rem; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
   color: var(--t-text-secondary) !important;
   font-size: 0.82rem;
   margin-bottom: 0.6rem;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
div.dt-container .dt-length select,
div.dt-container .dt-search input {
   background: var(--t-surface) !important;
   color: var(--t-text) !important;
   border: 1px solid var(--t-border-strong) !important;
   border-radius: var(--t-radius-xs) !important;
   padding: 0.4rem 0.6rem !important;
   min-height: 2.2rem;
   box-shadow: var(--t-shadow-xs);
}
.dataTables_wrapper .dataTables_filter input:focus,
div.dt-container .dt-search input:focus {
   border-color: var(--t-primary) !important;
   box-shadow: 0 0 0 3px var(--t-primary-ring) !important;
   outline: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button,
div.dt-container .dt-paging .dt-paging-button {
   border-radius: var(--t-radius-xs) !important;
   border: 1px solid transparent !important;
   color: var(--t-text-secondary) !important;
   padding: 0.35rem 0.7rem !important;
   margin: 0 0.1rem;
   background: transparent !important;
   transition: all var(--t-dur) var(--t-ease);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
div.dt-container .dt-paging .dt-paging-button:hover {
   background: var(--t-bg-subtle) !important;
   border-color: var(--t-border) !important;
   color: var(--t-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
div.dt-container .dt-paging .dt-paging-button.current {
   background: var(--t-primary) !important;
   border-color: var(--t-primary) !important;
   color: var(--t-on-primary) !important;
   box-shadow: var(--t-shadow-xs);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.4; }
table.dataTable thead th.sorting,
table.dataTable thead th { position: relative; }

/* -----------------------------------------------------------------------------
   10. BADGES & CHIPS
   -------------------------------------------------------------------------- */
.badge {
   font-family: var(--t-font);
   font-weight: 600;
   font-size: 0.72rem;
   letter-spacing: 0.01em;
   padding: 0.32em 0.7em;
   border-radius: var(--t-radius-pill);
   border: 1px solid transparent;
   line-height: 1.4;
}
.badge-success {
   background: var(--t-success-soft) !important;
   color: var(--t-success-fg) !important;
   border-color: color-mix(in srgb, var(--t-success) 30%, transparent);
}
.badge-danger {
   background: var(--t-danger-soft) !important;
   color: var(--t-danger-fg) !important;
   border-color: color-mix(in srgb, var(--t-danger) 30%, transparent);
}
.badge-warning {
   background: var(--t-warning-soft) !important;
   color: var(--t-warning-fg) !important;
   border-color: color-mix(in srgb, var(--t-warning) 30%, transparent);
}
.badge-info {
   background: var(--t-info-soft) !important;
   color: var(--t-info-fg) !important;
   border-color: color-mix(in srgb, var(--t-info) 30%, transparent);
}
.badge-primary {
   background: var(--t-primary-soft) !important;
   color: var(--t-primary) !important;
   border-color: color-mix(in srgb, var(--t-primary) 30%, transparent);
}
.badge-secondary {
   background: var(--t-bg-subtle) !important;
   color: var(--t-text-secondary) !important;
   border-color: var(--t-border);
}
/* status-dot before running/stopped badges reads nicely without extra markup */
.badge-success::before,
.badge-danger::before,
.badge-warning::before {
   content: "";
   display: inline-block;
   width: 0.4em; height: 0.4em;
   border-radius: 50%;
   margin-right: 0.45em;
   vertical-align: 0.08em;
   background: currentColor;
}

/* -----------------------------------------------------------------------------
   11. ALERTS
   -------------------------------------------------------------------------- */
.alert {
   border-radius: var(--t-radius-sm);
   border: 1px solid transparent;
   padding: 0.85rem 1.05rem;
   font-size: 0.875rem;
   display: flex;
   align-items: flex-start;
   gap: 0.6rem;
   box-shadow: var(--t-shadow-xs);
}
.alert-success { background: var(--t-success-soft) !important; color: var(--t-success-fg) !important; border-color: color-mix(in srgb, var(--t-success) 28%, transparent) !important; }
.alert-danger  { background: var(--t-danger-soft) !important;  color: var(--t-danger-fg) !important;  border-color: color-mix(in srgb, var(--t-danger) 28%, transparent) !important; }
.alert-warning { background: var(--t-warning-soft) !important; color: var(--t-warning-fg) !important; border-color: color-mix(in srgb, var(--t-warning) 28%, transparent) !important; }
.alert-info    { background: var(--t-info-soft) !important;    color: var(--t-info-fg) !important;    border-color: color-mix(in srgb, var(--t-info) 28%, transparent) !important; }

/* -----------------------------------------------------------------------------
   12. MODALS & DROPDOWNS
   -------------------------------------------------------------------------- */
.modal-content {
   background: var(--t-surface) !important;
   border: 1px solid var(--t-border) !important;
   border-radius: var(--t-radius-lg) !important;
   box-shadow: var(--t-shadow-lg) !important;
   overflow: hidden;
}
.modal-header {
   border-bottom: 1px solid var(--t-divider) !important;
   padding: 1.15rem 1.4rem;
   background: transparent !important;
}
.modal-title { font-weight: 650; font-size: 1.05rem; color: var(--t-text) !important; letter-spacing: -0.015em; }
.modal-body { padding: 1.4rem; color: var(--t-text); }
.modal-footer { border-top: 1px solid var(--t-divider) !important; padding: 1rem 1.4rem; gap: 0.5rem; }
.modal-footer > :not(:first-child) { margin-left: 0; }
.modal .close { color: var(--t-text-muted); opacity: 1; text-shadow: none; font-weight: 400; transition: color var(--t-dur) var(--t-ease); }
.modal .close:hover { color: var(--t-text); }
.modal-backdrop.show { opacity: 0.55; background: #0b1120; }
html[data-theme="dark"] .modal-backdrop.show { opacity: 0.7; }

/* Dropdowns */
.dropdown-menu {
   background: var(--t-surface) !important;
   border: 1px solid var(--t-border) !important;
   border-radius: var(--t-radius-sm) !important;
   box-shadow: var(--t-shadow-md) !important;
   padding: 0.35rem;
}
.dropdown-item {
   border-radius: var(--t-radius-xs);
   color: var(--t-text-secondary) !important;
   font-size: 0.86rem;
   padding: 0.5rem 0.7rem;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--t-bg-subtle) !important; color: var(--t-text) !important; }
.dropdown-item i { color: var(--t-text-faint) !important; }
.dropdown-header { color: var(--t-text-faint) !important; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.dropdown-divider { border-color: var(--t-divider); }

/* -----------------------------------------------------------------------------
   13. UTILITIES / SCROLLBARS / FOCUS / ANIMATIONS
   -------------------------------------------------------------------------- */
.bg-white { background: var(--t-surface) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: var(--t-shadow-sm) !important; }

/* Scroll to top */
.scroll-to-top {
   background: var(--t-primary) !important;
   border-radius: var(--t-radius-sm) !important;
   box-shadow: var(--t-shadow-md);
   opacity: 0.9;
   transition: transform var(--t-dur) var(--t-ease), opacity var(--t-dur) var(--t-ease);
}
.scroll-to-top:hover { opacity: 1; transform: translateY(-2px); }

/* Focus-visible baseline for accessibility */
a:focus-visible, button:focus-visible,
[tabindex]:focus-visible, .dropdown-item:focus-visible {
   outline: 2px solid var(--t-primary-ring);
   outline-offset: 2px;
   border-radius: 4px;
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--t-border-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
   background: var(--t-border-strong);
   border-radius: 999px;
   border: 3px solid var(--t-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--t-text-faint); }

/* Text selection */
::selection { background: var(--t-primary-soft); color: var(--t-primary-active); }
html[data-theme="dark"] ::selection { color: var(--t-text); }

/* Entrance animation for content cards */
@keyframes t-rise {
   from { opacity: 0; transform: translateY(8px); }
   to   { opacity: 1; transform: translateY(0); }
}
#content .container-fluid .card { animation: t-rise 0.4s var(--t-ease) both; }
#content .container-fluid .row > [class*="col-"]:nth-child(2) .card { animation-delay: 0.04s; }
#content .container-fluid .row > [class*="col-"]:nth-child(3) .card { animation-delay: 0.08s; }
#content .container-fluid .row > [class*="col-"]:nth-child(4) .card { animation-delay: 0.12s; }

/* Skeleton helper (available for future loading states) */
.t-skeleton {
   background: linear-gradient(90deg, var(--t-bg-subtle) 25%, var(--t-border) 37%, var(--t-bg-subtle) 63%);
   background-size: 400% 100%;
   animation: t-shimmer 1.4s ease infinite;
   border-radius: var(--t-radius-xs);
}
@keyframes t-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* -----------------------------------------------------------------------------
   14. LOGIN PAGE
   -------------------------------------------------------------------------- */
body.bg-gradient-primary {
   background:
      radial-gradient(1200px 600px at 15% -10%, rgba(79, 70, 229, 0.14), transparent 60%),
      radial-gradient(1000px 500px at 110% 110%, rgba(14, 165, 233, 0.12), transparent 55%),
      var(--t-bg) !important;
   min-height: 100vh;
   min-height: 100dvh;
   display: flex;
   align-items: center;
}
body.bg-gradient-primary .card {
   border-radius: var(--t-radius-lg) !important;
   box-shadow: var(--t-shadow-lg) !important;
   border: 1px solid var(--t-border) !important;
}
body.bg-gradient-primary .card:hover { box-shadow: var(--t-shadow-lg) !important; }
.bg-login-image {
   background:
      linear-gradient(150deg, var(--t-primary) 0%, #6d28d9 55%, #0ea5e9 100%);
   position: relative;
}
.bg-login-image::after {
   content: "Thalia Code Deploy";
   position: absolute;
   left: 2rem; bottom: 2rem;
   color: rgba(255, 255, 255, 0.92);
   font-family: var(--t-font);
   font-weight: 700;
   font-size: 1.4rem;
   letter-spacing: -0.02em;
   text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
body.bg-gradient-primary h1.h4 {
   font-weight: 700;
   font-size: 1.5rem;
   color: var(--t-text) !important;
   margin-bottom: 1.5rem !important;
}
body.bg-gradient-primary .p-5 { padding: 2.75rem !important; }
/* Login validation error messages (raw <div> from the controller) */
body.bg-gradient-primary form > div:not(.form-group) {
   background: var(--t-danger-soft);
   color: var(--t-danger-fg);
   border: 1px solid color-mix(in srgb, var(--t-danger) 28%, transparent);
   border-radius: var(--t-radius-sm);
   padding: 0.6rem 0.85rem;
   font-size: 0.85rem;
   margin-bottom: 1rem;
}

/* -----------------------------------------------------------------------------
   15. RESPONSIVE & REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
   .container-fluid { padding: 1.1rem 1rem 2rem; }
   .container-fluid > .d-sm-flex h1.h3 { font-size: 1.3rem; }
   .card .card-header { padding: 0.9rem 1.05rem; }
   .card .card-body { padding: 1.05rem; }
   .table { font-size: 0.82rem; }
   .btn-icon-split .text { padding-left: 0.65rem; padding-right: 0.65rem; }
   .bg-login-image::after { font-size: 1.1rem; left: 1.25rem; bottom: 1.25rem; }
}

/* Keep DataTables/tables scrollable rather than overflowing on small screens */
.table-responsive { border-radius: var(--t-radius-sm); }

@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
   }
}