/* ============================================================
   Teleport — Bootstrap 5 site-wide styles

   Layered top-to-bottom so cascade order matches intent:
     1. Brand tokens               — raw Teleport palette
     2. Bootstrap token overrides  — global primary / radius / link
     3. Theme tokens               — light + dark surface, text, bg
     4. Bootstrap component over.  — button variants
     5. Site components            — Teleport-specific .tp-* classes
     6. Utilities                  — small helpers, media queries
   ============================================================ */


/* ============================================================
   1. Brand tokens
   ============================================================ */
:root {
    /* Raw Teleport brand red — use for illustrations, icons, etc. */
    --tp-red:            #EA1B22;
    --tp-red-rgb:        234, 27, 34;

    /* Bootstrap-weight primary red:
       hsl(357°, 88%, 45%) — same hue as --tp-red, saturation and
       lightness tuned to match Bootstrap blue (#0d6efd / 216°/98%/52%)
       in perceived contrast so it works correctly as a UI primary.   */
    --tp-primary:        #D60D18;
    --tp-primary-rgb:    214, 13, 24;
    --tp-primary-hover:  #B60B14;   /* shade 15% */
    --tp-primary-active: #A10A12;   /* shade 25% */
}


/* ============================================================
   2. Bootstrap token overrides (global, theme-agnostic)
   ============================================================ */
:root {
    /* Primary color — override every CSS custom property the
       compiled SCSS would have derived from $primary.                */
    --bs-primary:               var(--tp-primary);
    --bs-primary-rgb:           var(--tp-primary-rgb);

    /* Contextual palette
         bg-subtle     = tint  80% (20% color + 80% white)
         border-subtle = tint  60% (40% color + 60% white)
         text-emphasis = shade 60% (40% color + 60% black)            */
    --bs-primary-bg-subtle:     #F7CFD1;
    --bs-primary-border-subtle: #EF9EA3;
    --bs-primary-text-emphasis: #56050A;

    /* Links */
    --bs-link-color:            var(--tp-primary);
    --bs-link-color-rgb:        var(--tp-primary-rgb);
    --bs-link-hover-color:      var(--tp-primary-hover);

    /* Reduced corner rounding */
    --bs-border-radius:         0.2rem;   /* default 0.375rem */
    --bs-border-radius-sm:      0.15rem;  /* default 0.25rem  */
    --bs-border-radius-lg:      0.3rem;   /* default 0.5rem   */
    --bs-border-radius-xl:      0.4rem;   /* default 1rem     */
    --bs-border-radius-2xl:     0.6rem;   /* default 2rem     */
}

/* Dark-mode primary palette
     bg-subtle     = shade 80% (20% color + 80% black)
     border-subtle = shade 40% (60% color + 40% black)
     text-emphasis = tint  40% (60% color + 40% white)                */
[data-bs-theme="dark"] {
    --bs-primary-bg-subtle:     #2B0305;
    --bs-primary-border-subtle: #80080E;
    --bs-primary-text-emphasis: #E66E74;
}


/* ============================================================
   3. Theme tokens — surfaces, text, component backgrounds

   Both themes apply a barely-perceptible warm shift off Bootstrap's
   neutral grey ramp so body / secondary / tertiary / component
   surfaces sit on the same warm tone. The text-side tokens and
   their -rgb companions are warm-shifted in lockstep so that
   rgba(var(--bs-*-color-rgb), α) overlays inherit the warm cast.
   ============================================================ */

/* Light theme — ~1% warm shift from #ffffff / #212529 */
[data-bs-theme="light"],
:root:not([data-bs-theme="dark"]) {
    /* Surfaces */
    --bs-body-bg:             #fffdfb;
    --bs-body-bg-rgb:         255, 253, 251;
    --bs-secondary-bg:        #eaecec;
    --bs-secondary-bg-rgb:    234, 236, 236;
    --bs-tertiary-bg:         #f5f5f5;   /* ~3% below body so it stays visible */
    --bs-tertiary-bg-rgb:     245, 245, 245;

    /* Text */
    --bs-body-color:          #232527;
    --bs-body-color-rgb:      35, 37, 39;
    --bs-emphasis-color:      #0a0807;   /* warm off-black so rgba overlays warm too */
    --bs-emphasis-color-rgb:  10, 8, 7;
    --bs-secondary-color:     rgba(35, 37, 39, 0.75);
    --bs-secondary-color-rgb: 35, 37, 39;
    --bs-tertiary-color:      rgba(35, 37, 39, 0.5);
    --bs-tertiary-color-rgb:  35, 37, 39;

    /* Component surfaces — explicit so behaviour doesn't depend on
       whether the component falls back to body-bg or hard-coded #fff. */
    --bs-card-bg:             #fffefd;
    --bs-dropdown-bg:         #fffefd;
    --bs-modal-content-bg:    #fffefd;
    --bs-popover-bg:          #fffefd;
    --bs-offcanvas-bg:        #fffefd;
    --bs-toast-bg:            rgba(255, 254, 253, 0.85);
}

/* Dark theme — ~1.5% warm shift from BS dark defaults */
[data-bs-theme="dark"] {
    /* Surfaces */
    --bs-body-bg:             #232527;
    --bs-body-bg-rgb:         35, 37, 39;
    --bs-secondary-bg:        #36383a;
    --bs-secondary-bg-rgb:    54, 56, 58;
    --bs-tertiary-bg:         #2d2e2f;
    --bs-tertiary-bg-rgb:     45, 46, 47;

    /* Text */
    --bs-body-color:          #e3e1de;
    --bs-body-color-rgb:      227, 225, 222;
    --bs-emphasis-color:      #fdfbf8;   /* warm off-white so rgba overlays warm too */
    --bs-emphasis-color-rgb:  253, 251, 248;
    --bs-secondary-color:     rgba(227, 225, 222, 0.75);
    --bs-secondary-color-rgb: 227, 225, 222;
    --bs-tertiary-color:      rgba(227, 225, 222, 0.5);
    --bs-tertiary-color-rgb:  227, 225, 222;

    /* Component surfaces */
    --bs-card-bg:             #232527;
    --bs-dropdown-bg:         #232527;
    --bs-modal-content-bg:    #232527;
    --bs-popover-bg:          #232527;
    --bs-offcanvas-bg:        #232527;
    --bs-toast-bg:            rgba(35, 37, 39, 0.85);
}


/* ============================================================
   4. Bootstrap component overrides
   ============================================================ */
.btn-primary {
    --bs-btn-bg:                    var(--tp-primary);
    --bs-btn-border-color:          var(--tp-primary);
    --bs-btn-hover-bg:              var(--tp-primary-hover);
    --bs-btn-hover-border-color:    var(--tp-primary-hover);
    --bs-btn-active-bg:             var(--tp-primary-active);
    --bs-btn-active-border-color:   var(--tp-primary-active);
    --bs-btn-disabled-bg:           var(--tp-primary);
    --bs-btn-disabled-border-color: var(--tp-primary);
    --bs-btn-focus-shadow-rgb:      var(--tp-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color:                 var(--tp-primary);
    --bs-btn-border-color:          var(--tp-primary);
    --bs-btn-hover-bg:              var(--tp-primary);
    --bs-btn-hover-border-color:    var(--tp-primary);
    --bs-btn-active-bg:             var(--tp-primary);
    --bs-btn-active-border-color:   var(--tp-primary);
    --bs-btn-disabled-color:        var(--tp-primary);
    --bs-btn-disabled-border-color: var(--tp-primary);
    --bs-btn-focus-shadow-rgb:      var(--tp-primary-rgb);
}

/* Nav pills active state.
   Bootstrap 5.3 compiles --bs-nav-pills-link-active-bg to the literal blue hex
   (#0d6efd) rather than var(--bs-primary), so the global token override in
   section 2 cannot reach it and the active pill stays blue. Re-point it at the
   brand red so active tabs match the rest of the primary palette site-wide.
   The active text colour stays Bootstrap's white, which keeps good contrast. */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--tp-primary);
}

/* Checkboxes, radios and switches.
   Bootstrap 5.3 bakes blue (#0d6efd / #86b7fe) in as literal hex in the
   *compiled* CSS for the checked fill, the focus ring, and the focus-state
   switch-thumb SVG. None of these read --bs-primary, so the global token
   override in section 2 cannot reach them — re-point them at the brand red. */
.form-check-input:checked {
    background-color: var(--tp-primary);
    border-color:     var(--tp-primary);
}

.form-check-input:focus {
    border-color: var(--tp-primary);
    box-shadow:   0 0 0 .25rem rgba(var(--tp-primary-rgb), .25);
}

/* Switch thumb glow while focused + unchecked. The colour lives inside a
   data-URI string, where var() cannot be interpolated, so the hex is inline
   and must stay in sync with --tp-primary (#D60D18). The checked state keeps
   Bootstrap's white thumb, so this is scoped to :not(:checked). */
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23D60D18'/%3e%3c/svg%3e");
}

/* Contextual table rows/cells (.table-danger / .table-warning).
   Bootstrap 5.3 compiles these with a fixed light tint and a hard-coded
   near-black text colour, so in dark mode the row stays a pale wash and any
   .text-muted child (which resolves to a *light* --bs-secondary-color) turns
   light-on-light and becomes unreadable.
   Re-point only the --bs-table-* variables at the theme-aware *-bg-subtle /
   border-subtle tokens and let text fall back to the themed --bs-body-color.
   Because the variables flow through Bootstrap's own base / striped / hover
   cell rules, this stays correct on striped + hover tables, and the tint now
   darkens in dark mode so neutral and muted text regain contrast. */
.table-danger {
    --bs-table-color:         var(--bs-body-color);
    --bs-table-bg:            var(--bs-danger-bg-subtle);
    --bs-table-border-color:  var(--bs-danger-border-subtle);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg:    var(--bs-danger-bg-subtle);
    --bs-table-active-color:  var(--bs-body-color);
    --bs-table-active-bg:     var(--bs-danger-border-subtle);
    --bs-table-hover-color:   var(--bs-body-color);
    --bs-table-hover-bg:      var(--bs-danger-border-subtle);
}

.table-warning {
    --bs-table-color:         var(--bs-body-color);
    --bs-table-bg:            var(--bs-warning-bg-subtle);
    --bs-table-border-color:  var(--bs-warning-border-subtle);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg:    var(--bs-warning-bg-subtle);
    --bs-table-active-color:  var(--bs-body-color);
    --bs-table-active-bg:     var(--bs-warning-border-subtle);
    --bs-table-hover-color:   var(--bs-body-color);
    --bs-table-hover-bg:      var(--bs-warning-border-subtle);
}


/* ============================================================
   5. Site components
   ============================================================ */

/* ── Theme-aware brand logo ─────────────────────────────────── */
/* Show the light logo in light mode, dark logo in dark mode.
   Falls back to the other variant when only one is supplied.    */
[data-bs-theme="dark"]  .tp-logo-light { display: none !important; }
[data-bs-theme="light"] .tp-logo-dark  { display: none !important; }

.tp-brand-logo {
    max-height: 128px;
    width: auto;
}

/* ── Footer links ───────────────────────────────────────────── */
.footer-link:hover {
    color: var(--bs-body-color) !important;
}

/* ── Generic dimmed dropdown button (.tp-dropdown) ─────────── */
/* Use on .btn-outline-secondary toggles where the default solid
   secondary hover/focus fill is too dominant. Pulls the hover /
   focus / open surface from the warm secondary-bg ramp.         */
.tp-dropdown {
    color: var(--bs-emphasis-color) !important;
    opacity: 0.9;
    transition: opacity 0.15s ease,
                background-color 0.15s ease,
                box-shadow 0.15s ease;
}

.tp-dropdown.dropdown-toggle::after {
    /* Toggle uses an explicit Bootstrap Icon chevron instead. */
    display: none;
}

.tp-dropdown:hover {
    opacity: 1;
    background-color: rgba(var(--bs-secondary-bg-rgb), 0.9) !important;
}

.tp-dropdown.show,
.tp-dropdown:active {
    opacity: 1;
    background-color: rgba(var(--bs-secondary-bg-rgb), 1) !important;
}

.tp-dropdown:focus-visible {
    /* Soften Bootstrap's 0.5-alpha focus ring to a subtle warm outline. */
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-emphasis-color-rgb), 0.25) !important;
    background-color: rgba(var(--bs-secondary-bg-rgb), 1) !important;
}

/* ── Clickable cards (.tp-card-link) ───────────────────────── */
/* Use on a .card whose entire body is wrapped in an <a>. Signals
   the whole card is clickable with a pointer cursor plus a hover/
   focus lift, primary border and deeper shadow. Honors the user's
   reduced-motion preference. */
.tp-card-link {
    cursor: pointer;
    /* Sit on the tertiary surface so the card stands out a bit from the
       page background (card-bg ~= body-bg in both themes). On hover it
       brightens up to the normal card surface to feel like it lifts. */
    background-color: var(--bs-tertiary-bg);
    transition: transform 0.15s ease,
                box-shadow 0.15s ease,
                border-color 0.15s ease,
                background-color 0.15s ease;
}

.tp-card-link:hover,
.tp-card-link:focus-within {
    background-color: var(--bs-card-bg);
    border-color: var(--bs-primary);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

@media (prefers-reduced-motion: reduce) {
    .tp-card-link {
        transition: none;
    }

    .tp-card-link:hover,
    .tp-card-link:focus-within {
        transform: none;
    }
}


/* Info tables — labeled key/value tables (e.g. account, tenant info).
   Primary accent, roomy padding; pair with table-sm/striped/hover and a
   colgroup (table-layout: fixed) for equal columns. */
.info-table {
    --bs-table-striped-bg: rgba(var(--bs-secondary-rgb), 0.06);
    --bs-table-hover-bg: rgba(var(--bs-secondary-rgb), 0.12);
    border-top: 3px solid rgba(var(--bs-secondary-rgb), 0.6);
}

/* table-sm hardcodes cell padding (ignores --bs-table-cell-padding-*),
   so override it with the same structural selector. */
.info-table > :not(caption) > * > * {
    padding: 0.5rem;
}

.info-table td {
    word-break: break-word;
}


/* ============================================================
   6. Utilities
   ============================================================ */

/* Alpine.js x-cloak — hide elements until Alpine initializes. */
[x-cloak] { display: none !important; }

/* Narrow viewport: full-bleed player.
   Offsets exactly the Bootstrap col padding (--bs-gutter-x / 2)
   on each side; avoids 100vw which includes the scrollbar width. */
@media (max-width: 767.98px) {
    .narrow-view-no-margin {
        margin-left:  calc(-.5 * var(--bs-gutter-x, 1.5rem));
        margin-right: calc(-.5 * var(--bs-gutter-x, 1.5rem));
        width: calc(100% + var(--bs-gutter-x, 1.5rem)) !important;
    }
}


/* ── Feed grid ─────────────────────────────────────────────── */
.tp-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(177px, 177px));
    gap: 5px;
    padding: 0.5rem;
    background-color: var(--bs-tertiary-bg);
    overflow: hidden;
}

.tp-feed-grid__item {
    height: 100px;
    overflow: hidden;
}