/* TREKK360 Data Transfer Portal - Custom Styles */

/* Chromeless embed mode for iframe viewers */
body.trekk-embed { margin: 0; padding: 0; overflow: hidden; }

/*TREKK COLOR PALETTE*/
/* TREKK COLOR PALETTE (style guide accurate) */
:root {
  /* Theme toggle - light mode is default */
  --theme-mode: light;
  
  /* Primary bases */
    --trekk-maroon:        #8A2432;  /* TREKK Red (Pantone 202C) */
    --trekk-grey-dark:     #595959;  /* Pantone 425C */
    --trekk-grey-light:    #BBBBBB;  /* Cool Gray 4C */
    --trekk-white:         #FFFFFF;

    /* Preferred tints (mix with white by %): */
    /* Red */
    --trekk-maroon-10:     #963A46;  /* 10% tint */
    --trekk-maroon-20:     #A1505B;  /* 20% tint */
    --trekk-maroon-40:     #B97C84;  /* 40% tint */

    /* Dark Gray (425C) */
    --trekk-grey-dark-10:  #6A6A6A;
    --trekk-grey-dark-20:  #7A7A7A;
    --trekk-grey-dark-40:  #9B9B9B;

    /* Light Gray (Cool Gray 4C) */
    --trekk-grey-light-10: #C2C2C2;
    --trekk-grey-light-20: #C9C9C9;
    --trekk-grey-light-40: #D6D6D6;

    /* Semantic helpers (optional; use your taste) */
    --trekk-bg-light:      #F7F7F7;  /* page bg */
    --trekk-bg-medium:     #ECEEEF;  /* muted surfaces */
    --trekk-text-dark:     #2B2B2B;  /* body text */
    --trekk-text-medium:   #6C757D;  /* secondary text */

    /* LEGACY ALIASES (keeps existing CSS working) */
    --trekk-maroon-dark:   var(--trekk-maroon-10);   /* previously a random value */
    --trekk-maroon-light:  var(--trekk-maroon-20);   /* use official tint */
    --trekk-grey:          var(--trekk-grey-dark);   /* was #666; fix to 425C */
    
    /* Status Colors */
    --trekk-success: #28A745;
    --trekk-warning: #FFC107;
    --trekk-danger: #DC3545;
    --trekk-info: var(--trekk-grey); /* fixed */

    /* Fallback header height */
    --trekk-header-height: 120px;

    --vh: 1vh;                /* corrected 1vh for mobile safari */
    --trekk-header-h: 0px;    /* populated by JS */
    --trekk-footer-h: 0px;    /* populated by JS */
    
    /* Light theme sidebar (matches header red) */
    --sidebar-bg: var(--trekk-maroon);
    --sidebar-text: rgba(255,255,255,0.9);
    --sidebar-text-muted: rgba(255,255,255,0.5);
    --sidebar-hover-bg: rgba(255,255,255,0.15);
    --sidebar-active-bg: rgba(0,0,0,0.2);
    --sidebar-border: rgba(255,255,255,0.15);
    --sidebar-toggle-bg: rgba(255,255,255,0.15);
    --sidebar-toggle-hover: rgba(255,255,255,0.25);

    /* Card header tokens */
    --trekk-card-header-bg: rgba(138, 36, 50, 0.15);
    --trekk-card-header-text: var(--trekk-maroon);

    /* Shared horizontal gutters (match Bootstrap px-3 / px-lg-4) */
    --trekk-gutter-sm: 1rem;   /* ~px-3 */
    --trekk-gutter-lg: 1.5rem; /* ~px-lg-4 */
}

/* Dark theme overrides */
[data-theme="dark"] {
  /* Portal dark palette */
  --trekk-bg-light: #0f1115;
  --trekk-bg-medium: #161a1f;
  --trekk-bg-card: #1f242b;
  --trekk-text-dark: #e8ecf2;
  --trekk-text-medium: #b7c0cf;
  --trekk-text-muted: #7f8896;
  --trekk-border: #262c34;
  --trekk-divider: #1c222a;
  --trekk-accent: #b01e3c;
  --trekk-success: #39b96b;
  --trekk-warning: #f2a33c;
  --trekk-danger: #e75b5b;

  /* Sidebar / header */
  --sidebar-bg: #0f1115;
  --sidebar-text: #e8ecf2;
  --sidebar-text-muted: rgba(232, 236, 242, 0.55);
  --sidebar-hover-bg: rgba(255,255,255,0.05);
  --sidebar-active-bg: rgba(176, 30, 60, 0.18);
  --sidebar-border: rgba(255,255,255,0.08);
  --sidebar-toggle-bg: rgba(255,255,255,0.08);
  --sidebar-toggle-hover: rgba(255,255,255,0.14);

  /* Card headers in dark mode follow the sidebar accent */
  --trekk-card-header-bg: var(--sidebar-active-bg);
  --trekk-card-header-text: var(--trekk-text-dark);

  --header-bg: #0f1115;
  --footer-bg: #0f1115;
}

/* Dark theme body styles */
[data-theme="dark"] body {
  background: var(--trekk-bg-light);
  color: var(--trekk-text-dark);
  font-family: "Inter", "Segoe UI", sans-serif;
}

/* Dark mode header - match sidebar charcoal */
[data-theme="dark"] .trekk-hero-section {
  background: var(--header-bg);
  border-bottom: 1px solid var(--trekk-divider);
}

/* Base card styling in dark mode */
[data-theme="dark"] .card {
  background-color: var(--trekk-bg-card);
  border-color: var(--trekk-border);
  color: var(--trekk-text-dark);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  border-radius: 10px;
}

/* Card headers in dark mode - subtle maroon tint like sidebar active */
[data-theme="dark"] .card-header {
  background: var(--sidebar-active-bg);
  border-color: var(--trekk-divider);
  color: var(--trekk-text-dark);
  font-weight: 600;
  letter-spacing: 0.01em;
}

[data-theme="dark"] .card-header h5,
[data-theme="dark"] .card-header h6,
[data-theme="dark"] .card-header .card-title {
  color: var(--trekk-text-dark);
}

/* Tables in dark mode */
[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--trekk-text-dark);
  --bs-table-border-color: var(--trekk-divider);
  --bs-table-striped-color: var(--trekk-text-dark);
  --bs-table-active-color: var(--trekk-text-dark);
  --bs-table-hover-color: var(--trekk-text-dark);
  --bs-table-color-type: var(--trekk-text-dark);
  --bs-table-color-state: var(--trekk-text-dark);
}

[data-theme="dark"] .table thead {
  background-color: #1b2027;
}

[data-theme="dark"] .table thead th {
  color: var(--trekk-text-dark);
  border-bottom-color: var(--trekk-divider);
}

[data-theme="dark"] .table .link-dark {
  color: var(--trekk-text-dark) !important;
}

[data-theme="dark"] .table .link-dark:hover,
[data-theme="dark"] .table .link-dark:focus {
  color: #ffffff !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: rgba(255,255,255,0.03);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(255,255,255,0.08);
  --bs-table-color-state: var(--trekk-text-dark);
}

[data-theme="dark"] .table-danger {
  --bs-table-color: var(--trekk-text-dark);
  --bs-table-striped-color: var(--trekk-text-dark);
  --bs-table-active-color: var(--trekk-text-dark);
  --bs-table-hover-color: var(--trekk-text-dark);
  --bs-table-bg: rgba(231, 91, 91, 0.12);
  --bs-table-striped-bg: rgba(231, 91, 91, 0.16);
  --bs-table-active-bg: rgba(231, 91, 91, 0.22);
  --bs-table-hover-bg: rgba(231, 91, 91, 0.20);
  --bs-table-border-color: rgba(231, 91, 91, 0.30);
  color: var(--trekk-text-dark);
}

[data-theme="dark"] .table-warning {
  --bs-table-color: var(--trekk-text-dark);
  --bs-table-striped-color: var(--trekk-text-dark);
  --bs-table-active-color: var(--trekk-text-dark);
  --bs-table-hover-color: var(--trekk-text-dark);
  --bs-table-bg: rgba(242, 163, 60, 0.13);
  --bs-table-striped-bg: rgba(242, 163, 60, 0.17);
  --bs-table-active-bg: rgba(242, 163, 60, 0.23);
  --bs-table-hover-bg: rgba(242, 163, 60, 0.20);
  --bs-table-border-color: rgba(242, 163, 60, 0.30);
  color: var(--trekk-text-dark);
}

[data-theme="dark"] .table-info {
  --bs-table-color: var(--trekk-text-dark);
  --bs-table-striped-color: var(--trekk-text-dark);
  --bs-table-active-color: var(--trekk-text-dark);
  --bs-table-hover-color: var(--trekk-text-dark);
  --bs-table-bg: rgba(77, 171, 247, 0.12);
  --bs-table-striped-bg: rgba(77, 171, 247, 0.16);
  --bs-table-active-bg: rgba(77, 171, 247, 0.22);
  --bs-table-hover-bg: rgba(77, 171, 247, 0.19);
  --bs-table-border-color: rgba(77, 171, 247, 0.30);
  color: var(--trekk-text-dark);
}

[data-theme="dark"] .table-active {
  --bs-table-color: var(--trekk-text-dark);
  --bs-table-striped-color: var(--trekk-text-dark);
  --bs-table-active-color: var(--trekk-text-dark);
  --bs-table-hover-color: var(--trekk-text-dark);
  --bs-table-bg: rgba(255, 255, 255, 0.09);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.11);
  --bs-table-active-bg: rgba(255, 255, 255, 0.14);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.12);
  --bs-table-border-color: var(--trekk-divider);
  color: var(--trekk-text-dark);
}

/* Table light header override */
[data-theme="dark"] .table-light,
[data-theme="dark"] thead.table-light th {
  background-color: #333 !important;
  color: var(--trekk-text-dark) !important;
  --bs-table-bg: #333;
}

[data-theme="dark"] .bg-light {
  background-color: var(--trekk-bg-medium) !important;
}

[data-theme="dark"] .text-muted {
  color: var(--trekk-text-medium) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--trekk-bg-card);
  border-color: var(--trekk-border);
  color: var(--trekk-text-dark);
  border-radius: 10px;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--trekk-bg-medium);
  border-color: var(--trekk-accent);
  color: var(--trekk-text-dark);
  box-shadow: 0 0 0 3px rgba(176, 30, 60, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--trekk-text-muted);
}

[data-theme="dark"] .border-top {
  border-color: var(--trekk-divider) !important;
}

[data-theme="dark"] .list-group-item {
  background-color: transparent;
  border-color: var(--trekk-divider);
  color: var(--trekk-text-dark);
}

/* Nav pills in dark mode */
[data-theme="dark"] .nav-pills .nav-link {
  color: var(--trekk-text-dark);
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
}

[data-theme="dark"] .nav-pills .nav-link:hover {
  background-color: rgba(255,255,255,0.05);
}

[data-theme="dark"] .nav-pills .nav-link.active {
  background: var(--trekk-accent);
  border-color: var(--trekk-accent);
  color: #fff;
}

[data-theme="dark"] .btn-primary {
  background: var(--trekk-accent);
  border-color: var(--trekk-accent);
  color: #fff;
}

[data-theme="dark"] .btn-primary:hover {
  background: #c43757;
  border-color: #c43757;
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-light {
  background: transparent;
  border-color: var(--trekk-border);
  color: var(--trekk-text-dark);
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-light:hover {
  border-color: var(--trekk-accent);
  color: var(--trekk-accent);
}

[data-theme="dark"] .trekk-sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
}

[data-theme="dark"] .trekk-sidebar-link.active {
  background: var(--sidebar-active-bg);
  border-left: 3px solid var(--trekk-accent);
  color: #fff;
}

[data-theme="dark"] .trekk-sidebar-link:hover {
  background: var(--sidebar-hover-bg);
}

[data-theme="dark"] .card,
[data-theme="dark"] .card-header,
[data-theme="dark"] .trekk-card {
  border-radius: 10px;
}

[data-theme="dark"] .badge.bg-success,
[data-theme="dark"] .badge-success {
  background: rgba(62,201,120,0.28);
  border: 1px solid rgba(62,201,120,0.55);
  color: #f5fff9;
  font-weight: 700;
}

[data-theme="dark"] .badge.bg-danger,
[data-theme="dark"] .badge-danger {
  background: rgba(240,117,117,0.3);
  border: 1px solid rgba(240,117,117,0.6);
  color: #fff7f7;
  font-weight: 700;
}

[data-theme="dark"] .badge.bg-warning,
[data-theme="dark"] .badge-warning {
  background: rgba(243,172,74,0.28);
  border: 1px solid rgba(243,172,74,0.55);
  color: #231400;
  font-weight: 700;
}

[data-theme="dark"] .badge.bg-primary,
[data-theme="dark"] .badge-primary {
  background: rgba(193,54,80,0.3);
  border: 1px solid rgba(193,54,80,0.6);
  color: #fff4f7;
  font-weight: 700;
}

[data-theme="dark"] .badge.bg-info,
[data-theme="dark"] .badge-info {
  background: rgba(116,162,232,0.28);
  border: 1px solid rgba(116,162,232,0.55);
  color: #0a1730;
  font-weight: 700;
}

[data-theme="dark"] .progress,
[data-theme="dark"] .progress-bar {
  background-color: var(--trekk-divider);
}

[data-theme="dark"] .progress-bar {
  background-color: var(--trekk-accent);
  background-image: none;
}

[data-theme="dark"] .nav-pills .nav-link.active {
  background-color: var(--trekk-maroon);
  color: #fff;
}

/* Nav tabs in dark mode */
[data-theme="dark"] .nav-tabs {
  border-bottom-color: #3d3d3d;
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--trekk-text-dark);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: #4d4d4d #4d4d4d #3d3d3d;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--trekk-bg-card);
  border-color: #3d3d3d #3d3d3d var(--trekk-bg-card);
  color: var(--trekk-text-dark);
}

/* Badges in dark mode */
[data-theme="dark"] .badge.bg-light {
  background-color: #444 !important;
  color: var(--trekk-text-dark) !important;
}

/* Buttons outline variants */
[data-theme="dark"] .btn-outline-secondary {
  color: var(--trekk-text-dark);
  border-color: #4d4d4d;
}

[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #3d3d3d;
  border-color: #4d4d4d;
  color: #fff;
}

/* Modal dark mode */
[data-theme="dark"] .modal-content {
  background-color: var(--trekk-bg-card);
  border-color: #3d3d3d;
  color: var(--trekk-text-dark);
}

[data-theme="dark"] .modal-header {
  background-color: var(--trekk-maroon);
  border-bottom-color: var(--trekk-maroon);
  color: #fff;
}

[data-theme="dark"] .modal-header .btn-close {
  filter: invert(1);
}

[data-theme="dark"] .modal-footer {
  border-top-color: #3d3d3d;
}

/* Dropdown dark mode */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--trekk-bg-card);
  border-color: #3d3d3d;
}

[data-theme="dark"] .dropdown-item {
  color: var(--trekk-text-dark);
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: #3d3d3d;
}

/* Alert dark mode */
[data-theme="dark"] .alert {
  border-color: #3d3d3d;
}

/* Input group dark mode */
[data-theme="dark"] .input-group-text {
  background-color: #333;
  border-color: #4d4d4d;
  color: var(--trekk-text-dark);
}

/* Form switch dark mode */
[data-theme="dark"] .form-check-input {
  background-color: #4d4d4d;
  border-color: #5d5d5d;
}

[data-theme="dark"] .form-check-input:checked {
  background-color: var(--trekk-maroon);
  border-color: var(--trekk-maroon);
}

/* Breadcrumb dark mode */
[data-theme="dark"] .breadcrumb {
  background-color: transparent;
}

[data-theme="dark"] .breadcrumb-item a {
  color: var(--trekk-maroon-40);
}

[data-theme="dark"] .breadcrumb-item.active {
  color: var(--trekk-text-medium);
}

/* Progress bar dark mode */
[data-theme="dark"] .progress {
  background-color: #333;
}

/* Pagination dark mode */
[data-theme="dark"] .page-link {
  background-color: var(--trekk-bg-card);
  border-color: #3d3d3d;
  color: var(--trekk-text-dark);
}

[data-theme="dark"] .page-link:hover {
  background-color: #3d3d3d;
  border-color: #4d4d4d;
}

[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--trekk-maroon);
  border-color: var(--trekk-maroon);
}

[data-theme="dark"] .page-item.disabled .page-link {
  background-color: #2d2d2d;
  color: #666;
}

/* ArcGIS/Webmap components dark mode */
[data-theme="dark"] .esri-widget,
[data-theme="dark"] .esri-feature-table {
  background-color: var(--trekk-bg-card) !important;
  color: var(--trekk-text-dark) !important;
}

[data-theme="dark"] .esri-feature-table__header {
  background-color: #333 !important;
}

/* Dashboard filters bar */
.dashboard-filters {
  background-color: #f8f9fa;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 0.5rem 0.75rem;
}

.dashboard-scope-bar {
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  border-radius: 10px;
}

.dashboard-scope-bar .form-select,
.dashboard-scope-bar .form-control {
  border-radius: 10px;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  height: calc(1.5rem + 0.5rem);
  border: 1px solid rgba(0,0,0,0.25);
}

.dashboard-filters .form-label {
  color: var(--trekk-text-dark) !important;
  margin-bottom: 0.2rem;
}

[data-theme="dark"] .dashboard-filters {
  background-color: rgba(138, 36, 50, 0.12) !important;
  border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .dashboard-scope-bar {
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

[data-theme="dark"] .dashboard-filters .form-label {
  color: var(--trekk-text-dark) !important;
}

[data-theme="dark"] .dashboard-filters .form-select,
[data-theme="dark"] .dashboard-filters .form-control {
  background-color: #1a1a1a;
  border-color: #3d3d3d;
  color: var(--trekk-text-dark);
}

.dashboard-scope-bar .form-select:focus,
.dashboard-scope-bar .form-control:focus {
  border-color: rgba(138, 36, 50, 0.5);
  box-shadow: 0 0 0 0.15rem rgba(138, 36, 50, 0.18);
}

.scope-pill {
  background: var(--trekk-maroon);
  color: #fff;
  letter-spacing: 0.02em;
}

.filter-chip {
  background-color: rgba(138, 36, 50, 0.1);
  border: 1px solid rgba(138, 36, 50, 0.2);
  color: var(--trekk-text-dark);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
}

.filter-chip.chip-danger {
  background-color: rgba(220, 53, 69, 0.12);
  border-color: rgba(220, 53, 69, 0.35);
  color: var(--trekk-danger);
}

[data-theme="dark"] .filter-chip {
  background-color: rgba(176, 30, 60, 0.2);
  border-color: rgba(176, 30, 60, 0.35);
  color: var(--trekk-text-dark);
}

[data-theme="dark"] .filter-chip.chip-danger {
  background-color: rgba(231, 91, 91, 0.18);
  border-color: rgba(231, 91, 91, 0.4);
  color: var(--trekk-danger);
}

.context-bar {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 0.6rem 0.8rem 0.5rem;
  background: #f9fafb;
}

[data-theme="dark"] .context-bar {
  background: var(--trekk-bg-card);
  border-color: var(--trekk-border);
}

.context-bar .dashboard-filters {
  border: none;
  background: transparent;
  padding: 0;
}

.context-bar .dashboard-scope-bar {
  box-shadow: none;
  border: none;
  padding: 0;
}

.context-combined {
  position: relative;
  overflow: hidden;
  padding: 0.75rem 0.9rem;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

.context-combined::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(138, 36, 50, 0.95);
}

[data-theme="dark"] .context-combined {
  background: rgba(138, 36, 50, 0.22);
  border-color: var(--trekk-border);
  box-shadow: none;
}

[data-theme="dark"] .context-combined::before {
  height: 0;
}

.context-combined .scope-row-wrapper {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 0.65rem;
}

[data-theme="dark"] .context-combined .scope-row-wrapper {
  border-top-color: var(--trekk-divider);
}

.context-combined .dashboard-scope-bar {
  background: rgba(138, 36, 50, 0.06);
  border: 1px solid rgba(138, 36, 50, 0.12);
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  box-shadow: none;
}

[data-theme="dark"] .context-combined .dashboard-scope-bar {
  background: transparent;
  border: none;
  box-shadow: none;
}

.context-combined .dashboard-filters {
  background: transparent;
  border: none;
  padding: 0;
}

.context-combined .dashboard-filters {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

[data-theme="dark"] .context-combined .dashboard-filters {
  border: none;
  box-shadow: none;
}

.context-combined .kpi-label,
.context-combined .scope-inline-label {
  color: var(--trekk-text-medium);
}

[data-theme="dark"] .context-combined .kpi-label,
[data-theme="dark"] .context-combined .scope-inline-label {
  color: var(--trekk-text-muted);
}

.scope-inline-label {
  font-size: 0.9rem;
  color: var(--trekk-text-dark);
  white-space: nowrap;
}

[data-theme="dark"] .scope-inline-label {
  color: var(--trekk-text-dark);
}

.scope-inline-select {
  min-width: 160px;
  width: auto;
}

.scope-summary-row {
  font-size: 0.85rem;
  line-height: 1.2;
}

.scope-summary-inline {
  min-height: 32px;
}

.kpi-strip {
  border-top: none;
  overflow-x: auto;
  padding-top: 0.35rem;
}

[data-theme="dark"] .kpi-strip {
  border-top-color: var(--trekk-divider);
}

.kpi-chip {
  min-width: 120px;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  background: rgba(138, 36, 50, 0.06);
  cursor: default;
  border-left: 1px solid rgba(138, 36, 50, 0.12);
}

.kpi-chip:first-child {
  border-left: none;
}

[data-theme="dark"] .kpi-chip {
  border-left-color: rgba(255,255,255,0.12);
  background: rgba(138, 36, 50, 0.18);
}

[data-theme="dark"] .kpi-chip:first-child {
  border-left-color: transparent;
}

.kpi-value {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.1;
}

.kpi-sub {
  margin-top: 0.05rem;
}

/* Dark mode for trekk-smart-card - keep surfaces dark and use accent sparingly */
[data-theme="dark"] .trekk-smart-card {
  background-color: var(--trekk-bg-card, #252525);
  border-color: var(--trekk-border);
}

[data-theme="dark"] .trekk-smart-card .card-header {
  background: var(--sidebar-active-bg);
  color: var(--trekk-text-dark);
  border-bottom-color: var(--trekk-divider);
}

[data-theme="dark"] .trekk-smart-card .card-header .nav-pills .nav-link {
  color: var(--trekk-text-dark);
}

[data-theme="dark"] .trekk-smart-card .card-header .nav-pills .nav-link:hover {
  color: var(--trekk-text-dark);
  background-color: rgba(255,255,255,0.05);
}

[data-theme="dark"] .trekk-smart-card .card-header .nav-pills .nav-link.active {
  background-color: var(--trekk-accent);
  color: #fff;
}

[data-theme="dark"] .trekk-smart-card .card-header .header-client-code {
  color: #f3f6fb;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.32);
}

.trekk-smart-card .card-header .header-client-code {
  color: #4a111a;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(74, 17, 26, 0.25);
  opacity: 1;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
}

/* Dashboard stat cards (KPI row at top) */
.dashboard-stat-card {
  border: 1px solid rgba(0,0,0,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border-radius: 10px;
  background-color: #f4f5f7;
}

.dashboard-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dashboard-stat-card .card-body {
  padding: 0.75rem 0.9rem;
}

.dashboard-stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.dashboard-stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.dashboard-stat-card .stat-label {
  font-size: 0.75rem;
  color: var(--trekk-text-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.15rem;
}

/* Dashboard inner cards (inside tabs) */
.dashboard-card {
  border: 2px solid var(--trekk-maroon);
  background: linear-gradient(180deg, rgba(138, 36, 50, 0.08) 0%, rgba(138, 36, 50, 0.03) 100%);
}

.dashboard-card .card-header {
  background: linear-gradient(180deg, rgba(138, 36, 50, 0.16) 0%, rgba(138, 36, 50, 0.09) 100%) !important;
  color: var(--trekk-text-dark) !important;
  border-bottom: 1px solid rgba(138, 36, 50, 0.2);
  padding: 0.75rem 1rem;
}

.dashboard-card .card-header .text-muted {
  color: var(--trekk-text-medium) !important;
}

.dashboard-card .card-header h6 {
  font-weight: 600;
  color: var(--trekk-text-dark);
}

.dashboard-card .card-header .badge {
  background-color: rgba(138, 36, 50, 0.16) !important;
}

/* Dark mode for dashboard cards - clean dark styling */
[data-theme="dark"] .dashboard-stat-card {
  background-color: var(--trekk-bg-card, #252525);
  border-color: #3d3d3d;
}

[data-theme="dark"] .dashboard-stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

[data-theme="dark"] .dashboard-stat-card .stat-label {
  color: var(--trekk-text-medium);
}

/* Dashboard inner cards in dark mode - dark surfaces */
[data-theme="dark"] .dashboard-card {
  background-color: var(--trekk-bg-card, #252525);
  border-color: var(--trekk-border);
}

[data-theme="dark"] .dashboard-card .card-header {
  background: var(--sidebar-active-bg) !important;
  color: var(--trekk-text-dark) !important;
  border-bottom-color: var(--trekk-divider);
}

[data-theme="dark"] .dashboard-card .card-header h6 {
  color: var(--trekk-text-dark);
}

[data-theme="dark"] .dashboard-card .card-header .text-muted {
  color: var(--trekk-text-muted);
}

[data-theme="dark"] .dashboard-card .card-header .badge {
  background-color: rgba(255,255,255,0.08) !important;
}

[data-theme="dark"] .dashboard-card .card-body {
  color: var(--trekk-text-dark);
  background: var(--trekk-bg-card, #252525);
}

[data-theme="dark"] .dashboard-card .list-group-item {
  background-color: transparent;
  border-color: var(--trekk-divider);
  color: var(--trekk-text-dark);
}

[data-theme="dark"] .dashboard-card .table {
  color: var(--trekk-text-dark);
}

[data-theme="dark"] .dashboard-card .table thead {
  background-color: #1b2027;
}

[data-theme="dark"] .dashboard-card .table-hover tbody tr:hover {
  background-color: rgba(255,255,255,0.05);
}

.dashboard-card .card-body {
  padding: 0.9rem 1rem;
}

.dashboard-card .table td,
.dashboard-card .table th {
  padding: 0.5rem 0.75rem;
}

.dashboard-card .card-body {
  background: var(--trekk-bg-medium);
}


.table-sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #f8f9fa;
}

[data-theme="dark"] .table-sticky-wrapper {
  background-color: transparent;
}

.table-sticky-wrapper {
  position: relative;
  max-height: 360px;
  overflow-y: auto;
}

[data-theme="dark"] .table-sticky-header thead th {
  background-color: #1b2027;
}

.client-project-row {
  cursor: pointer;
  transition: background-color 0.08s ease;
}

.client-project-row:hover {
  background-color: rgba(0,0,0,0.03);
}

[data-theme="dark"] .client-project-row:hover {
  background-color: rgba(255,255,255,0.04);
}

.pipeline-row-issue {
  background-color: rgba(220, 53, 69, 0.06);
}

[data-theme="dark"] .pipeline-row-issue {
  background-color: rgba(231, 91, 91, 0.08);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  background-color: var(--trekk-text-medium);
}

.status-dot-danger {
  background-color: var(--trekk-danger);
  box-shadow: 0 0 0 4px rgba(231, 91, 91, 0.15);
}

#client-project-search {
  min-width: 180px;
}

.progress-thin {
  height: 6px;
}

/* Main fills exactly the space between header and footer */
.trekk-main{
  flex: 1 0 auto;
  /* Let document/body scroll so footer is in normal page flow */
  overflow: visible;
  /* Account for sticky header */
  padding-top: 1rem;
  /* Standard bottom breathing room */
  padding-bottom: 1rem;
}

:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .trekk-smart-card,
:root:not([data-theme="dark"]) .dashboard-card {
  background: linear-gradient(180deg, rgba(138, 36, 50, 0.08) 0%, rgba(138, 36, 50, 0.03) 100%);
}

:root:not([data-theme="dark"]) .dashboard-card {
  border: 1px solid rgba(138, 36, 50, 0.35);
}

:root:not([data-theme="dark"]) .table > :not(caption) > * > * {
  border-bottom-color: rgba(0,0,0,0.10);
}

/*GLOBAL STYLES*/
html, body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    background-color: var(--trekk-bg-light);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--trekk-text-dark);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Sticky header */
.trekk-hero-section {
    background: var(--trekk-maroon);
    color: var(--trekk-white);
    padding: 1rem 0;
    margin-bottom: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.trekk-hero-title {
    color: var(--trekk-white);
    font-weight: 700;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.trekk-hero-subtitle {
    color: #f1dadd;
    margin: 0;
}

.trekk-header-actions .btn {
    border-width: 2px;
    margin-left: .25rem;
}

/*HEADER (deprecated)*/
.trekk-header {
    background: linear-gradient(135deg, var(--trekk-maroon) 0%, var(--trekk-maroon-dark) 100%);
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* (Consolidated) */
.trekk-logo {
    max-height: 60px;
    width: auto;
    margin-left: 0; /* align with content gutters */
}

.trekk-title { color: white; font-weight: 600; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.trekk-subtitle { color: var(--trekk-bg-light); font-size: 0.9rem; margin: 0; }
.user-info { text-align: right; color: white; }
.user-name { font-weight: 600; color: var(--trekk-white); }

/*FLEXIBLE PAGE LAYOUT*/
.trekk-page { 
    /* Page content fills main and pushes footer down */
    flex: 1 0 auto;
    margin-top: 0;
    padding-bottom: 2rem; /* breathing room above footer */
}

/* Blob browser: tighter bottom padding to avoid initial overflow */
.trekk-page.browser-page {
  padding-bottom: .5rem;
}
.trekk-stretch-row { min-height: 100%; }
.trekk-stretch-col { min-height: 100%; display: flex; flex-direction: column; min-height: 0; }
.trekk-card-fill { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.trekk-card-fill > .card-body { flex: 1 1 auto; min-height: 0; overflow: auto; }

/*DYNAMIC CONTAINER SYSTEM*/
.trekk-main-content { flex: 0 0 auto; width: 75%; }
.trekk-narrow-sidebar { flex: 0 0 auto; width: 25%; }
.trekk-dynamic-col { display: flex; flex-direction: column; }

/* Smart card */
.trekk-smart-card {
    height: auto;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--trekk-maroon);
    border-radius: 0.375rem;
    background: linear-gradient(180deg, rgba(138, 36, 50, 0.08) 0%, rgba(138, 36, 50, 0.03) 100%);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.trekk-smart-card .card-header {
    background: var(--trekk-card-header-bg);
    color: var(--trekk-card-header-text);
    border-bottom: none;
}

.trekk-smart-card .card-header .nav-pills .nav-link {
    color: var(--trekk-card-header-text);
}

.trekk-smart-card .card-header .nav-pills .nav-link:hover {
    color: var(--trekk-card-header-text);
    background-color: rgba(138, 36, 50, 0.12);
}

.trekk-smart-card .card-header .nav-pills .nav-link.active {
    background-color: var(--trekk-maroon);
    color: #fff;
}

.trekk-smart-card .card-body { flex: 1; padding: 1.25rem; }

/* Browser card */
.trekk-smart-card.trekk-browser-card { height: auto; overflow: visible; }
.trekk-smart-card.trekk-browser-card .card-body { overflow: visible; height: auto; }

/* Initial height for Browse Files before results load */
.trekk-browser-card.is-initial {
  /* Fill nearly all space between header/footer on load
     min: safety floor; preferred: max space - 24px; max: max space - 12px */
  min-height: clamp(360px,
                   calc(var(--vh) * 100 - var(--trekk-header-h) - var(--trekk-footer-h) - 64px),
                   calc(var(--vh) * 100 - var(--trekk-header-h) - var(--trekk-footer-h) - 48px));
}

/* Blob table */
.blob-table {
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #dee2e6;
}

/* Blob browser checkbox styling */
#blob-results .form-check-input,
#blob-results input[type="checkbox"] {
  accent-color: var(--trekk-maroon);
  border-color: var(--trekk-maroon);
}
#blob-results .form-check-input:focus {
  border-color: var(--trekk-maroon);
  box-shadow: 0 0 0 0.14rem rgba(138, 36, 50, 0.35);
}
#blob-results .form-check-input:disabled {
  opacity: 0.7;
}

/* Sidebar card */
.trekk-sidebar-card {
    height: auto;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: white;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.trekk-sidebar-card .card-body {
    flex: 1;
    padding: 1.25rem;
    overflow-y: auto;
    min-height: 0;
}

/* Hide Client/Project columns in Users table inline view */
#users-table td:nth-child(5),
#users-table td:nth-child(6) {
  display: none;
}


@media (max-width: 768px) {
    .trekk-dynamic-row { flex-direction: column; gap: 1rem; }
    .trekk-sidebar-card { max-height: 50vh; }
}

/*MAIN CONTENT*/
.trekk-container {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 2rem;
    margin-top: 2rem;
}

/* Dashboard scroll pane for long content */
.dashboard-scroll-pane {
    min-height: 0;
    max-height: clamp(320px,
                      calc(var(--vh) * 100 - var(--trekk-header-h) - var(--trekk-footer-h) - 220px),
                      55vh);
    overflow-y: auto;
}

@media (max-width: 991.98px) {
  .dashboard-scroll-pane {
    max-height: none;
  }
}

.processing-toolbar .form-select-sm.w-auto {
  min-width: 72px;
}

.processing-toolbar .form-check {
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.processing-toolbar .form-check-input {
  margin: 0;
}

.processing-toolbar .table-search-slot {
  min-width: 200px;
  max-width: 260px;
}

.processing-toolbar .table-search-slot .input-group {
  width: 100%;
}

@media (max-width: 767.98px) {
  .processing-toolbar {
    gap: 0.75rem;
  }
  .processing-toolbar .table-search-slot {
    min-width: 0;
    max-width: none;
    width: 100%;
    justify-content: flex-start;
    margin-left: 0 !important;
  }
  .processing-toolbar .table-search-slot .input-group {
    max-width: none !important;
  }
}

/*GLOBAL CARD APPEARANCE*/
.card {
    border: 3px solid var(--trekk-maroon);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    background: var(--trekk-bg-medium);
}
.card-header {
    background: var(--trekk-card-header-bg);
    color: var(--trekk-card-header-text);
    display: flex;
    align-items: center;
    min-height: 56px; /* unify header bar height */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { margin: 0; }

/*QUICK LINKS SECTION*/
.quick-links-title {
    color: var(--trekk-maroon);
    font-weight: 600;
    border-bottom: 3px solid var(--trekk-maroon);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
}
.trekk-card {
    background: white;
    border: 2px solid var(--trekk-bg-medium);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}
.trekk-card:hover {
    border-color: var(--trekk-maroon-light);
    box-shadow: 0 6px 20px rgba(139, 38, 53, 0.2);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.trekk-card-icon { font-size: 2rem; color: var(--trekk-maroon-light); margin-bottom: 0.5rem; }
.trekk-card-title { color: var(--trekk-maroon); font-weight: 600; margin-bottom: 0.5rem; font-size: 1.2rem; }
.trekk-card-description { color: var(--trekk-grey); font-size: 0.95rem; margin: 0; }

/*BUTTONS - TREKK UNIFIED BUTTON SYSTEM*/
/* Base styles for all TREKK buttons - ensures consistent sizing */
/* Using .btn prefix for higher specificity over Bootstrap */
.btn.btn-trekk,
.btn.btn-trekk-primary,
.btn.btn-trekk-secondary,
.btn.btn-trekk-outline,
.btn.btn-trekk-danger,
.btn-trekk,
.btn-trekk-primary,
.btn-trekk-secondary,
.btn-trekk-outline,
.btn-trekk-danger {
    font-weight: 600 !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 6px !important;
    transition: all 0.3s ease;
    line-height: 1.5 !important;
    white-space: nowrap;
}

/* Primary button - maroon gradient */
.btn.btn-trekk,
.btn.btn-trekk-primary,
.btn-trekk,
.btn-trekk-primary {
    background: linear-gradient(135deg, var(--trekk-maroon) 0%, var(--trekk-maroon-dark) 100%) !important;
    border: none !important;
    color: white !important;
}
.btn.btn-trekk:hover,
.btn.btn-trekk-primary:hover,
.btn-trekk:hover,
.btn-trekk-primary:hover {
    background: linear-gradient(135deg, var(--trekk-maroon-light) 0%, var(--trekk-maroon) 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 38, 53, 0.3);
    color: white !important;
}

/* Secondary button - gray */
.btn.btn-trekk-secondary,
.btn-trekk-secondary {
    background: var(--trekk-grey) !important;
    border: none !important;
    color: white !important;
}
.btn.btn-trekk-secondary:hover,
.btn-trekk-secondary:hover {
    background: linear-gradient(135deg, var(--trekk-maroon) 0%, var(--trekk-maroon-dark) 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 38, 53, 0.3);
    color: white !important;
}

/* Outline button - maroon border, transparent bg */
.btn.btn-trekk-outline,
.btn-trekk-outline {
    background: rgba(138, 36, 50, 0.08) !important;
    border: 2px solid var(--trekk-maroon) !important;
    color: var(--trekk-maroon) !important;
}
[data-theme="dark"] .btn.btn-trekk-outline,
[data-theme="dark"] .btn-trekk-outline {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--sidebar-text) !important;
    color: var(--sidebar-text) !important;
}
.btn.btn-trekk-outline:hover,
.btn-trekk-outline:hover {
    background: var(--trekk-maroon) !important;
    border-color: var(--trekk-maroon) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 38, 53, 0.3);
}
[data-theme="dark"] .btn.btn-trekk-outline:hover,
[data-theme="dark"] .btn-trekk-outline:hover {
    background: var(--sidebar-active-bg) !important;
    border-color: var(--trekk-accent) !important;
    color: var(--sidebar-text) !important;
}

/* Danger button - red */
.btn.btn-trekk-danger,
.btn-trekk-danger {
    background: var(--trekk-danger) !important;
    border: none !important;
    color: white !important;
}
.btn.btn-trekk-danger:hover,
.btn-trekk-danger:hover {
    background: #C82333 !important;
    color: white !important;
}

/* Large button variant */
.btn.btn-trekk.btn-lg,
.btn.btn-trekk-primary.btn-lg,
.btn-trekk.btn-lg,
.btn-trekk-primary.btn-lg {
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
}

/* Disabled state - MUST match enabled size exactly */
.btn.btn-trekk:disabled,
.btn.btn-trekk.disabled,
.btn.btn-trekk-primary:disabled,
.btn.btn-trekk-primary.disabled,
.btn.btn-trekk-secondary:disabled,
.btn.btn-trekk-secondary.disabled,
.btn.btn-trekk-outline:disabled,
.btn.btn-trekk-outline.disabled,
.btn.btn-trekk-danger:disabled,
.btn.btn-trekk-danger.disabled,
.btn-trekk:disabled,
.btn-trekk.disabled,
.btn-trekk-primary:disabled,
.btn-trekk-primary.disabled,
.btn-trekk-secondary:disabled,
.btn-trekk-secondary.disabled,
.btn-trekk-outline:disabled,
.btn-trekk-outline.disabled,
.btn-trekk-danger:disabled,
.btn-trekk-danger.disabled {
    background: var(--trekk-grey-light) !important;
    border: none !important;
    color: var(--trekk-grey-dark) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    pointer-events: none;
}

/* Reports tab controls: keep theme colors in both light/dark modes */
#report-range-group .report-range-btn {
    background: rgba(138, 36, 50, 0.07);
    border: 1px solid rgba(138, 36, 50, 0.45);
    color: var(--trekk-maroon);
}
#report-range-group .report-range-btn:hover {
    background: rgba(138, 36, 50, 0.14);
    border-color: var(--trekk-maroon);
    color: var(--trekk-maroon);
}
#report-range-group .report-range-btn.report-range-btn-active {
    background: linear-gradient(135deg, var(--trekk-maroon) 0%, var(--trekk-maroon-dark) 100%);
    border-color: var(--trekk-maroon);
    color: #fff;
}
#report-range-group .report-range-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(138, 36, 50, 0.25);
}

.report-download-btn {
    background: rgba(138, 36, 50, 0.08);
    border: 1px solid rgba(138, 36, 50, 0.55);
    color: var(--trekk-maroon);
    font-weight: 600;
}
.report-download-btn:hover {
    background: rgba(138, 36, 50, 0.16);
    border-color: var(--trekk-maroon);
    color: var(--trekk-maroon);
}
.report-download-btn:disabled,
.report-download-btn.disabled {
    background: rgba(89, 89, 89, 0.18);
    border-color: rgba(89, 89, 89, 0.35);
    color: rgba(89, 89, 89, 0.7);
}

[data-theme="dark"] #report-range-group .report-range-btn {
    background: rgba(176, 30, 60, 0.12);
    border-color: rgba(176, 30, 60, 0.55);
    color: #f0c7d0;
}
[data-theme="dark"] #report-range-group .report-range-btn:hover {
    background: rgba(176, 30, 60, 0.22);
    border-color: var(--trekk-accent);
    color: #ffdbe2;
}
[data-theme="dark"] #report-range-group .report-range-btn.report-range-btn-active {
    background: linear-gradient(135deg, var(--trekk-accent) 0%, #8a2337 100%);
    border-color: var(--trekk-accent);
    color: #fff;
}
[data-theme="dark"] .report-download-btn {
    background: rgba(176, 30, 60, 0.12);
    border-color: rgba(176, 30, 60, 0.6);
    color: #f0c7d0;
}
[data-theme="dark"] .report-download-btn:hover {
    background: rgba(176, 30, 60, 0.22);
    border-color: var(--trekk-accent);
    color: #ffdbe2;
}
[data-theme="dark"] .report-download-btn:disabled,
[data-theme="dark"] .report-download-btn.disabled {
    background: rgba(127, 136, 150, 0.2);
    border-color: rgba(127, 136, 150, 0.35);
    color: rgba(183, 192, 207, 0.7);
}

/*TREKK FORM CONTROLS*/
.form-select:focus,
.form-control:focus {
    border-color: var(--trekk-maroon);
    box-shadow: 0 0 0 0.25rem rgba(138, 36, 50, 0.25);
}

/*TREKK TOGGLE SWITCH STYLES*/
.form-check-input:checked {
    background-color: var(--trekk-maroon);
    border-color: var(--trekk-maroon);
}
.form-check-input:focus {
    border-color: var(--trekk-maroon-light);
    box-shadow: 0 0 0 0.25rem rgba(138, 36, 50, 0.25);
}
.form-switch .form-check-input:checked {
    background-color: var(--trekk-maroon);
    border-color: var(--trekk-maroon);
}

/*TREKK MODAL STYLES*/
.modal-header.trekk-modal-header {
    background: linear-gradient(135deg, var(--trekk-maroon) 0%, var(--trekk-maroon-dark) 100%);
    color: var(--trekk-white);
    border-bottom: none;
}
.modal-header.trekk-modal-header .modal-title {
    color: var(--trekk-white);
    font-weight: 600;
}
.modal-header.trekk-modal-header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}
.modal-header.trekk-modal-header .btn-close:hover {
    opacity: 1;
}
.modal-header.trekk-modal-header .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}
.modal-content.trekk-modal {
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.modal-footer.trekk-modal-footer {
    border-top: 1px solid var(--trekk-grey-light);
    background: var(--trekk-bg-light);
}

/*UPLOAD PAGE STYLES*/
.upload-form-container {
    background: var(--trekk-bg-medium);
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.drop-zone {
    border: 3px dashed var(--trekk-maroon-light);
    background: linear-gradient(45deg, rgba(139, 38, 53, 0.05) 0%, rgba(139, 38, 53, 0.1) 100%);
    border-radius: 10px;
    padding: 3rem;
    text-align: center;
    transition: all 0.3s ease;
    margin: 1.5rem 0;
}
.drop-zone:hover {
    background: linear-gradient(45deg, rgba(139, 38, 53, 0.1) 0%, rgba(139, 38, 53, 0.15) 100%);
    border-color: var(--trekk-maroon);
}
.drop-zone.dragover {
    background: linear-gradient(45deg, rgba(139, 38, 53, 0.15) 0%, rgba(139, 38, 53, 0.2) 100%);
    border-color: var(--trekk-maroon);
    transform: scale(1.02);
}
.drop-zone i.fa-cloud-upload-alt { color: var(--trekk-maroon); }

/*FORM ELEMENTS*/
.form-control {
    border: 2px solid var(--trekk-bg-medium);
    border-radius: 8px;
    padding: 0.75rem;
    transition: all 0.3s ease;
}
.form-control:focus {
    border-color: var(--trekk-maroon-light);
    box-shadow: 0 0 0 0.2rem rgba(139, 38, 53, 0.25);
}
.form-select { border: 2px solid var(--trekk-bg-medium); border-radius: 8px; padding: 0.75rem; }
.form-select:focus {
    border-color: var(--trekk-maroon-light);
    box-shadow: 0 0 0 0.2rem rgba(139, 38, 53, 0.25);
}

/*MESSAGES/ALERTS*/
.alert-success { background: linear-gradient(135deg, var(--trekk-success) 0%, #1E7E34 100%); border: none; color: white; border-radius: 8px; }
.alert-danger  { background: linear-gradient(135deg, var(--trekk-danger) 0%, #C82333 100%); border: none; color: white; border-radius: 8px; }
.alert-warning { background: linear-gradient(135deg, var(--trekk-warning) 0%, #E0A800 100%); border: none; color: white; border-radius: 8px; }

/*CONSOLE OUTPUT*/
.console-output {
    background: var(--trekk-text-dark);
    color: #00FF00;
    font-family: 'Courier New', monospace;
    padding: 1rem;
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
    border: 2px solid var(--trekk-grey);
}

/* Upload console specific styling */
#upload-console {
    max-height: 300px;
    min-height: 150px;
    overflow-y: auto;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}


@media (max-width: 768px) {
    .trekk-container { padding: 1rem; margin-top: 1rem; }
    .trekk-header { text-align: center; }
    .user-info { text-align: center; margin-top: 1rem; }
    .trekk-logo { max-height: 60px; margin-left: 0; } 
    .trekk-page { 
        min-height: auto; 
        padding-bottom: 1rem; 
    }
    
    /* Stack layout on mobile */
    .trekk-main-content { 
        width: 100%; 
        margin-bottom: 1rem; 
    }
    .trekk-narrow-sidebar { 
        width: 100%; 
    }
    
    /* Adjust console height on mobile */
    #upload-console {
        max-height: 200px;
        min-height: 100px;
    }
    
    /* Make cards more mobile-friendly */
    .trekk-smart-card .card-body {
        padding: 1rem;
    }
    
    /* Adjust drop zone for mobile */
    .drop-zone {
        padding: 2rem 1rem;
        margin: 1rem 0;
    }
}

/*SIDEBAR STYLES (legacy)*/
.sidebar-card {
    background: white;
    border: 3px solid var(--trekk-maroon);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 6px 20px rgba(139, 38, 53, 0.2);
    position: sticky;
    top: 2rem;
}
.sidebar-card-title {
    color: var(--trekk-maroon);
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

/*UTILITY CLASSES*/
.text-trekk-maroon { color: var(--trekk-maroon) !important; }
.text-trekk-grey { color: var(--trekk-grey) !important; }
.text-trekk-white { color: var(--trekk-white) !important; }
.bg-trekk-light { background-color: var(--trekk-bg-light) !important; }
.bg-trekk { 
    background-color: rgba(138, 36, 50, 0.15) !important; 
    color: var(--trekk-maroon);
}
[data-theme="dark"] .bg-trekk { 
    background-color: var(--sidebar-active-bg) !important; 
    color: var(--trekk-text-dark);
}

/*ANIMATIONS*/
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.6s ease-out; }


.trekk-header-left {
  gap: 1rem;             /* for gaps between logo + text */
}

.trekk-logo {
  max-height: 60px;
  width: auto;
  flex-shrink: 0;        /* static logo size */
  margin-left: 0;        /* align flush with gutters */
}

.trekk-header-text {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically align text to logo middle */
}

/*Header left pin*/
.trekk-header-left { gap: 1rem; }
.trekk-logo { max-height: 60px; width: auto; flex-shrink: 0; margin-left: 0; }
.trekk-header-text { display: flex; flex-direction: column; justify-content: center; }

/*Blob browser page (moved from inline)*/
.blob-item { cursor: pointer; transition: background-color .2s; }
.blob-item:hover { background-color: #f8f9fa; }
.blob-item.selected { background-color: #e3f2fd; }

.file-icon { width: 20px; text-align: center; }

/* sticky action bar above the table */
.action-buttons {
  position: sticky; top: 0; background: #fff; z-index: 10;
  padding: 1rem 0; border-bottom: 1px solid #dee2e6;
}

/* download queue cards */
.download-item {
  border: 1px solid #dee2e6; border-radius: .375rem; margin-bottom: .75rem;
  padding: .75rem; background: #f8f9fa; transition: all .2s;
}
.download-item:hover {
  background: #f1f3f5;
}
.download-item.completed { background: #d4edda; border-color: #c3e6cb; }
.download-item.failed    { background: #f8d7da; border-color: #f5c6cb; }
.download-item.processing{ background: #fff3cd; border-color: #ffeaa7; }

[data-theme="dark"] .download-item {
  background: var(--trekk-bg-card);
  border-color: var(--trekk-border);
}
[data-theme="dark"] .download-item:hover {
  background: rgba(255,255,255,0.04);
}
[data-theme="dark"] .download-item.completed {
  background: rgba(57,185,107,0.12);
  border-color: rgba(57,185,107,0.45);
}
[data-theme="dark"] .download-item.failed {
  background: rgba(231,91,91,0.14);
  border-color: rgba(231,91,91,0.4);
}
[data-theme="dark"] .download-item.processing {
  background: rgba(242,163,60,0.18);
  border-color: rgba(242,163,60,0.45);
}

.download-progress { height: 4px; background: #e9ecef; border-radius: 2px; overflow: hidden; margin-top: .5rem; }
.download-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #007bff, #0056b3);
  transition: width .3s ease;
  animation: progress-animation 2s infinite;
}
@keyframes progress-animation { 0%{opacity:.7} 50%{opacity:1} 100%{opacity:.7} }

.download-status  { font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }
.download-filename{ font-size: .85rem; font-weight: 500; color: #495057; }
.download-meta    { font-size: .75rem; color: #6c757d; }

/* Dark mode for download elements */
[data-theme="dark"] .download-filename { color: var(--trekk-text-dark); }
[data-theme="dark"] .download-meta { color: var(--trekk-text-medium); }

/* ----- Sticky layout shell ----- */
.trekk-shell {                  /* body */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* Body wrapper contains sidebar + main scrollable area */
.trekk-body-wrapper {
  flex: 1 0 auto;
  display: flex;
  overflow: visible;
  min-height: 0; /* Important for flex child scrolling */
}

.trekk-main {                   /* <main> content area */
  flex: 1 0 auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Reusable responsive gutters: keep header aligned with cards */
.trekk-gutters { padding-left: var(--trekk-gutter-sm); padding-right: var(--trekk-gutter-sm); }
@media (min-width: 992px) {
  .trekk-gutters { padding-left: var(--trekk-gutter-lg); padding-right: var(--trekk-gutter-lg); }
}

/* Optional: add ~10% total extra horizontal padding (≈5% each side) */
.trekk-gutters-10 { padding-left: calc(var(--trekk-gutter-sm) + 1vw); padding-right: calc(var(--trekk-gutter-sm) + 1vw); }
@media (min-width: 992px) {
  .trekk-gutters-10 { padding-left: calc(var(--trekk-gutter-lg) + 1vw); padding-right: calc(var(--trekk-gutter-lg) + 1vw); }
}

/* ----- Footer styling ----- */
/* Footer in normal document flow (non-sticky) */
.trekk-footer {
  position: relative;
  background: var(--trekk-bg-medium);
  color: var(--trekk-text-dark);
  font-size: 0.8rem;
  line-height: 1.2;
  padding-top: .5rem;
  padding-bottom: .35rem;
  width: 100%;
  z-index: auto;
  box-shadow: none;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Hard guard: footer must never float over content */
#trekkFooter.trekk-footer {
  position: static !important;
  inset: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

.trekk-footer-logo {
  height: 64px;
  margin-bottom: 0.2rem;
  opacity: .9;
  transition: opacity .2s ease;
}
.footer-brand-link:hover .trekk-footer-logo { opacity: 1; }

.footer-copyright {
  font-size: 0.72rem;
  color: var(--trekk-text-medium);
}

/* Dark mode footer - match header exactly */
[data-theme="dark"] .trekk-footer {
  background: var(--header-bg);
  border-top: 1px solid var(--trekk-divider);
  box-shadow: none;
}

[data-theme="dark"] .footer-copyright {
  color: rgba(255,255,255,0.5);
}

/* Sticky shell: header on top, footer on bottom, content fills the rest */
html, body { height: 100%; }

/* --- Keep main filling between header and footer --- */
/* Rely on the computed min-height set at the top
   .trekk-main { min-height: calc(var(--vh)*100 - var(--trekk-header-h) - var(--trekk-footer-h)) } */


/* Equal-height sidebar that ends where the main card ends */
.sidebar-col { min-height: 0; }                 /* allow flex children to shrink */

@media (min-width: 992px) {
  .sidebar-col { display: flex; flex-direction: column; }
}

/* Let the queue card fill the remaining column height, not the page */
.download-queue-card {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;              
}

.download-queue-card .card-body {
  flex: 1 1 auto;
  min-height: 0;                                 
  overflow-y: auto;
}

@media (min-width: 992px) {
  .sidebar-col { min-height: 0; }                
  #quick-actions-card { flex: 0 0 auto; }         
  #download-queue-card { min-height: 0; }
  #download-queue-card .card-body {
    overflow-y: auto;
    min-height: 0;
  }
}

.nav-pills .nav-link {
  color: var(--trekk-grey-dark);
  border-radius: 999px;
}
.nav-pills .nav-link:hover {
  color: var(--trekk-maroon);
  background: rgba(138, 36, 50, 0.08);
}
.nav-pills .nav-link.active {
  color: #fff;
  background-color: var(--trekk-maroon);
  box-shadow: 0 0 0 .1rem rgba(138,36,50,.25);
}

.btn-trekk-secondary {
  background-color: var(--trekk-bg-medium);
  border-color: var(--trekk-bg-medium);
  color: var(--trekk-grey-dark);
}

.trekk-admin-pills .nav-link {
  color: var(--trekk-maroon);
  border-radius: .75rem;
}
.trekk-admin-pills .nav-link.active {
  background: var(--trekk-maroon);
  color: #fff;
}
.trekk-admin-pills .nav-link:not(.active):hover {
  background: rgba(138,36,50,.08); /* light maroon wash */
}

/* ============================================
   GLOBAL LEFT SIDEBAR
   ============================================ */

:root {
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 56px;
  --sidebar-transition: 0.25s ease;
}

/* Body wrapper for sidebar + main content */
.trekk-body-wrapper {
  position: relative;
  min-height: 0;
}

/* Sidebar container */
.trekk-sidebar {
  position: fixed;
  top: var(--trekk-header-h, 70px);
  left: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--trekk-header-h, 70px));
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  z-index: 1040;
  transition: width var(--sidebar-transition), transform var(--sidebar-transition), background 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 10px rgba(0,0,0,0.15);
  overflow: hidden;
}

.trekk-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 1rem;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Toggle button */
.trekk-sidebar-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: var(--sidebar-toggle-bg);
  border: none;
  border-radius: 6px;
  color: var(--sidebar-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform var(--sidebar-transition);
  z-index: 10;
}
.trekk-sidebar-toggle:hover {
  background: var(--sidebar-toggle-hover);
}
.trekk-sidebar[data-collapsed="true"] .trekk-sidebar-toggle {
  transform: rotate(180deg);
}

/* Navigation */
.trekk-sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  margin-top: 2.5rem;
}

.trekk-sidebar-section {
  padding: 0 0.75rem;
  margin-bottom: 1.25rem;
}

.trekk-sidebar-section-title {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sidebar-text-muted);
  padding: 0 0.5rem;
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--sidebar-transition);
}

.trekk-sidebar-section-bottom {
  margin-top: auto;
  border-top: 1px solid var(--sidebar-border);
  padding-top: 1rem;
}

.trekk-sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trekk-sidebar-menu li {
  margin-bottom: 2px;
}

.trekk-sidebar-link {
  display: flex;
  align-items: center;
  padding: 0.6rem 0.75rem;
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.trekk-sidebar-link:hover {
  background: var(--sidebar-hover-bg);
  color: #fff;
}
.trekk-sidebar-link.active {
  background: var(--sidebar-active-bg);
  color: #fff;
}
.trekk-sidebar-link i {
  width: 20px;
  text-align: center;
  margin-right: 12px;
  font-size: 1rem;
  flex-shrink: 0;
}
.trekk-sidebar-text {
  opacity: 1;
  transition: opacity var(--sidebar-transition);
  overflow: hidden;
}

/* Collapsed state */
.trekk-sidebar[data-collapsed="true"] {
  width: var(--sidebar-collapsed-width);
}
.trekk-sidebar[data-collapsed="true"] .trekk-sidebar-section-title {
  opacity: 0;
}
.trekk-sidebar[data-collapsed="true"] .trekk-sidebar-text {
  opacity: 0;
  width: 0;
}
.trekk-sidebar[data-collapsed="true"] .trekk-sidebar-link {
  justify-content: center;
  padding: 0.6rem 0;
}
.trekk-sidebar[data-collapsed="true"] .trekk-sidebar-link i {
  margin-right: 0;
}

/* Adjust main content for sidebar */
.trekk-body-wrapper {
  margin-left: var(--sidebar-width);
  transition: margin-left var(--sidebar-transition);
}
body.sidebar-collapsed .trekk-body-wrapper {
  margin-left: var(--sidebar-collapsed-width);
}
body.no-sidebar .trekk-body-wrapper {
  margin-left: 0;
}

/* Header spans full width - sidebar sits below it */
.trekk-hero-section {
  margin-left: 0;
  transition: none;
}
body.sidebar-collapsed .trekk-hero-section {
  margin-left: 0;
}

/* Tooltip for collapsed state */
.trekk-sidebar[data-collapsed="true"] .trekk-sidebar-link {
  position: relative;
}
.trekk-sidebar[data-collapsed="true"] .trekk-sidebar-link::after {
  content: attr(data-title);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #333;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 1050;
}
.trekk-sidebar[data-collapsed="true"] .trekk-sidebar-link:hover::after {
  opacity: 1;
}

/* Mobile: hide sidebar by default, show as overlay */
@media (max-width: 991.98px) {
  .trekk-sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width);
    top: var(--trekk-header-h, 70px);
    height: calc(100vh - var(--trekk-header-h, 70px));
  }
  .trekk-sidebar.mobile-open {
    transform: translateX(0);
  }
  .trekk-sidebar[data-collapsed="true"] {
    width: var(--sidebar-width);
  }
  
  .trekk-body-wrapper,
  body.sidebar-collapsed .trekk-body-wrapper,
  .trekk-hero-section,
  body.sidebar-collapsed .trekk-hero-section {
    margin-left: 0;
  }
  
  /* Mobile menu toggle button in header */
  .trekk-mobile-menu-btn {
    display: flex !important;
  }
  
  /* Overlay backdrop */
  .trekk-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1039;
  }
  .trekk-sidebar-backdrop.show {
    display: block;
  }
}

/* ============================================
   Light mode canvas & KPI wash
   ============================================ */

/* Proof hook: temporarily swap background-color to #ff69b4 to verify canvas targeting */
:root:not([data-theme="dark"]) body.trekk-shell,
:root:not([data-theme="dark"]) body.trekk-shell .trekk-body-wrapper,
:root:not([data-theme="dark"]) body.trekk-shell .trekk-main {
  background-color: var(--trekk-bg-light);
}

:root:not([data-theme="dark"]) body.trekk-shell .trekk-main .trekk-page {
  background-color: var(--trekk-bg-light);
}

:root[data-canvas-debug="true"]:not([data-theme="dark"]) body.trekk-shell .trekk-main {
  background-color: #ff69b4 !important;
}

/* KPI strip aligns with scope wash */
:root:not([data-theme="dark"]) .context-combined .kpi-strip {
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.5rem;
}

/* KPI tiles keep the same tint without heavy saturation */
:root:not([data-theme="dark"]) .context-combined .kpi-strip .kpi-chip {
  background: rgba(138, 36, 50, 0.04);
  border: 1px solid rgba(138, 36, 50, 0.12);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
}

@media (min-width: 992px) {
  .trekk-mobile-menu-btn {
    display: none !important;
  }
}

/* =====================================================
   UTILITY CLASSES - Replace common inline styles
   ===================================================== */

/* Hidden by default - use JS to show */
.trekk-hidden { display: none; }

/* Console/Terminal output styling */
.trekk-console {
  background: var(--trekk-bg-card, #2d3748);
  color: #e2e8f0;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  max-height: 300px;
  overflow-y: auto;
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.trekk-console.trekk-console-tall { max-height: 400px; }

[data-theme="dark"] .trekk-console {
  background: #1a1f2a;
  border: 1px solid var(--trekk-divider);
}

/* File list container */
.trekk-file-list {
  max-height: 300px;
  overflow-y: auto;
  background-color: var(--trekk-bg-light);
  border-radius: 8px;
  padding: 0.5rem;
}
[data-theme="dark"] .trekk-file-list {
  background-color: var(--trekk-bg-card);
}

.trekk-file-item {
  background-color: #fff;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
[data-theme="dark"] .trekk-file-item {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--trekk-divider) !important;
}

/* Progress bar height */
.trekk-progress { height: 20px; }

/* Login card max width */
.trekk-login-card {
  max-width: 520px;
  width: 100%;
}

/* Login logo */
.trekk-login-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

/* Table column widths */
.trekk-col-actions { width: 110px; }
.trekk-col-narrow { width: 120px; }
.trekk-col-truncate { max-width: 260px; }
.trekk-col-truncate-wide { max-width: 380px; }

/* Input max widths */
.trekk-input-sm { max-width: 160px; }
.trekk-input-md { max-width: 200px; }
.trekk-input-lg { max-width: 260px; }
.trekk-input-xl { max-width: 320px; }

/* Modal extra wide */
.modal-xxl { max-width: 95vw; }

/* ================================================================
   AUTH PAGE – 4-tier button hierarchy + divider
   ================================================================ */

/* --- Auth page title --- */
.trekk-auth-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--trekk-maroon);
}
[data-theme="dark"] .trekk-auth-title {
  color: #e8ecf2;
}

/* --- Tier 1: Primary CTA (Sign In) --- */
.btn-auth-primary {
  display: block;
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--trekk-maroon) 0%, var(--trekk-maroon-10) 100%);
  color: #fff;
  transition: all 0.25s ease;
  line-height: 1.5;
}
.btn-auth-primary:hover,
.btn-auth-primary:focus {
  background: linear-gradient(135deg, var(--trekk-maroon-10) 0%, var(--trekk-maroon) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(138, 36, 50, 0.35);
  color: #fff;
}
.btn-auth-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(138, 36, 50, 0.25);
}

/* --- Tier 2: Secondary CTA (Entra login) --- */
.btn-auth-secondary {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  border: 2px solid var(--trekk-maroon);
  background: rgba(138, 36, 50, 0.06);
  color: var(--trekk-maroon);
  transition: all 0.25s ease;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
}
.btn-auth-secondary:hover,
.btn-auth-secondary:focus {
  background: var(--trekk-maroon);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(138, 36, 50, 0.25);
  text-decoration: none;
}
[data-theme="dark"] .btn-auth-secondary {
  border-color: var(--trekk-accent);
  background: rgba(176, 30, 60, 0.12);
  color: var(--trekk-text-dark);
}
[data-theme="dark"] .btn-auth-secondary:hover,
[data-theme="dark"] .btn-auth-secondary:focus {
  background: var(--trekk-accent);
  border-color: var(--trekk-accent);
  color: #fff;
}

/* --- Tier 3: Registration actions (pill-shaped, neutral) --- */
.btn-auth-register {
  display: block;
  width: 100%;
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 50px;
  border: 1.5px solid var(--trekk-grey-light, #BBBBBB);
  background: transparent;
  color: var(--trekk-grey-dark, #595959);
  transition: all 0.25s ease;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
}
.btn-auth-register:hover,
.btn-auth-register:focus {
  border-color: var(--trekk-maroon);
  color: var(--trekk-maroon);
  background: rgba(138, 36, 50, 0.04);
  text-decoration: none;
}
[data-theme="dark"] .btn-auth-register {
  border-color: var(--trekk-border, #262c34);
  color: var(--trekk-text-medium, #b7c0cf);
}
[data-theme="dark"] .btn-auth-register:hover,
[data-theme="dark"] .btn-auth-register:focus {
  border-color: var(--trekk-accent);
  color: var(--trekk-text-dark);
  background: rgba(176, 30, 60, 0.08);
}

/* --- Tier 4: Utility text links (Forgot / Resend) --- */
.trekk-auth-utility-link {
  font-size: 0.8rem;
  color: var(--trekk-text-medium, #6C757D);
  text-decoration: none;
  transition: color 0.2s ease;
}
.trekk-auth-utility-link:hover,
.trekk-auth-utility-link:focus {
  color: var(--trekk-maroon);
  text-decoration: none;
}
[data-theme="dark"] .trekk-auth-utility-link {
  color: var(--trekk-text-muted, #7f8896);
}
[data-theme="dark"] .trekk-auth-utility-link:hover,
[data-theme="dark"] .trekk-auth-utility-link:focus {
  color: var(--trekk-text-dark);
}

/* --- Auth divider ("or" separator) --- */
.trekk-auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--trekk-text-medium, #6C757D);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.trekk-auth-divider::before,
.trekk-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--trekk-bg-medium, #ECEEEF);
}
[data-theme="dark"] .trekk-auth-divider {
  color: var(--trekk-text-muted, #7f8896);
}
[data-theme="dark"] .trekk-auth-divider::before,
[data-theme="dark"] .trekk-auth-divider::after {
  background: var(--trekk-border, #262c34);
}