/* =============================================================================
   triton.css — Triton Digital global design system
   Loaded by base.html on every admin page.
   Covers: variables, typography, layout, cards, buttons, badges, tables,
   forms, alerts, tabs, empty states, metric cards, status chips, and more.
   ============================================================================= */

/* ── 1. CSS Variables ──────────────────────────────────────────────────────── */
:root {
    /* ── Triton brand palette ── */
    --td-navy:           #242052;   /* Triton logo purple-navy (shell/header)  */
    --td-blue:           #1A95D5;   /* Triton web primary blue                 */
    --td-blue-tap:       #27639E;   /* TAP UI brand blue (darker, richer)      */
    --td-blue-mid:       #0095DA;   /* secondary blue                          */
    --td-blue-light:     #43A9E0;   /* lighter blue                            */
    --td-blue-pale:      #74CCE5;   /* pale blue accent                        */
    --td-blue-selection: #DFEFFF;   /* TAP row-selected / autocomplete bg      */
    --td-purple:         #943CD7;   /* gradient midpoint purple                */
    --td-purple-dark:    #4B00A1;   /* gradient deep purple                    */
    --td-orange:         #FE7D4C;   /* gradient warm orange                    */

    /* ── Gradient ── */
    --td-gradient:       linear-gradient(225deg, #FE7D4C 0%, #E06F7E 11%, #943CD7 31%, #4B00A1 53%, #5D2CD0 72%, #12AFDE 100%);
    --td-gradient-h:     linear-gradient(90deg, #FE7D4C 0%, #943CD7 40%, #12AFDE 100%);
    --td-gradient-cta:   linear-gradient(135deg, #242052 0%, #1a1a5e 50%, #0a3d6b 100%);

    /* ── Surfaces (TAP-sourced) ── */
    --td-bg:             #f5f9fb;   /* TAP body background — cool blue-grey   */
    --td-surface:        #ffffff;
    --td-surface-soft:   #F7F8F8;   /* TAP tableHeaderGreyBg / surface-soft   */
    --td-border:         #DFE3E8;   /* TAP grey100 — authentic Triton border   */
    --td-border-strong:  #97AABC;   /* TAP grey300                             */

    /* ── Text (TAP blue-grey palette) ── */
    --td-text:           #273645;   /* TAP grey700 — deep blue-grey headlines  */
    --td-text-soft:      #516272;   /* TAP grey500 — body text                 */
    --td-text-muted:     #97AABC;   /* TAP grey300 — secondary / placeholder   */

    /* ── Status colors (TAP-sourced, exact match) ── */
    --td-success:        #00B94A;   /* TAP statusGreen                         */
    --td-success-bg:     rgba(0,185,74,0.08);
    --td-success-text:   #00B94A;
    --td-warning:        #F07300;   /* TAP statusOrange                        */
    --td-warning-bg:     rgba(240,115,0,0.08);
    --td-warning-text:   #F07300;
    --td-danger:         #E41717;   /* TAP errorRed                            */
    --td-danger-bg:      rgba(228,23,23,0.08);
    --td-danger-text:    #E41717;
    --td-info:           #63AEE2;   /* TAP statusBlue                          */
    --td-info-bg:        rgba(99,174,226,0.1);
    --td-info-text:      #27639E;

    /* ── Radii & shadows ── */
    --td-radius-sm:      4px;       /* TAP borderRadiusOne                     */
    --td-radius:         8px;
    --td-radius-lg:      12px;
    --td-shadow-sm:      0 1px 2px rgba(39,54,69,0.06), 0 1px 3px rgba(39,54,69,0.04);
    --td-shadow:         0 1px 3px rgba(39,54,69,0.06), 0 4px 12px rgba(39,54,69,0.08);
    --td-shadow-lg:      0 4px 20px rgba(39,54,69,0.12);
}

/* ── 2. Base & Typography ──────────────────────────────────────────────────── */
body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--td-bg);
    background-image:
        radial-gradient(ellipse 120% 40% at 50% 0%, rgba(26,149,213,0.07) 0%, transparent 55%);
    color: var(--td-text);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

a { color: var(--td-blue); }
a:hover { color: var(--td-blue-mid); }

code, .code {
    font-family: 'Monaco', ui-monospace, 'Courier New', monospace;
    background: var(--td-surface-soft);
    padding: 0.15rem 0.4rem;
    border-radius: var(--td-radius-sm);
    font-size: 0.88em;
    color: var(--td-navy);
    border: 1px solid var(--td-border);
}
/* Inside dark code blocks, let the container control colors */
.config-code code, .code-block code {
    background: transparent;
    border: none;
    color: inherit;
    padding: 0;
}

pre {
    background: var(--td-surface-soft);
    padding: 1rem;
    border-radius: var(--td-radius);
    overflow-x: auto;
    border: 1px solid var(--td-border);
    font-size: 0.875rem;
}
/* Dark code blocks: let parent container control bg/color */
.config-code pre, .code-block pre, pre.dark {
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
}

/* ── 3. Header / Nav ───────────────────────────────────────────────────────── */
.header {
    background: var(--td-navy);
    color: white;
    padding: 0;
    margin-bottom: 2rem;
    box-shadow: 0 2px 12px rgba(36, 32, 82, 0.35);
    position: relative;
}
.header::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--td-gradient-h);
}
.header-inner {
    padding: 0.75rem 0;
}
.header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}
.header-brand:hover { opacity: 0.9; }
.header-logo { height: 28px; width: auto; }
.header-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.25);
}
.header-product {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    line-height: 1.2;
}
.header-tenant { font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.55); }
.header nav { display: flex; align-items: center; gap: 0.25rem; }
.header a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.3rem 0.65rem;
    border-radius: var(--td-radius-sm);
    transition: background 0.15s, color 0.15s;
}
.header a:hover { color: #fff; background: rgba(255,255,255,0.12); }
.header-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.75);
    font-size: 0.82rem;
    font-weight: 500;
    margin-right: 0.5rem;
}

/* ── 4. Page Layout Helpers ────────────────────────────────────────────────── */
/* Main content area gets a subtle Triton personality */
.container > *:first-child,
.container-fluid > *:first-child {
    margin-top: 0;
}

/* Page-level section header banner */
.td-page-banner {
    background: var(--td-navy);
    background-image:
        radial-gradient(ellipse 80% 100% at 100% 50%, rgba(26,149,213,0.25) 0%, transparent 60%);
    color: white;
    padding: 1.5rem 0 1.25rem;
    margin: -0 0 2rem;
    position: relative;
}
.td-page-banner::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--td-gradient-h);
}
.td-page-banner h1, .td-page-banner h2 {
    color: white; margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 700;
}
.td-page-banner p { color: rgba(255,255,255,0.7); margin: 0; font-size: 0.9rem; }

.td-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.75rem;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--td-border);
    position: relative;
}
.td-page-header::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 60px; height: 2px;
    background: var(--td-gradient-h);
}
.td-page-header h1, .td-page-header h2, .page-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--td-navy);
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}
.td-page-header p, .page-header p { color: var(--td-text-muted); font-size: 0.9rem; margin: 0; }
/* Legacy page-header alias */
.page-header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--td-border);
    position: relative;
}
.page-header::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 60px; height: 2px;
    background: var(--td-gradient-h);
}
.page-header h1 { font-size: 1.6rem; font-weight: 700; color: var(--td-navy); margin-bottom: 0.35rem; }
.page-header p  { color: var(--td-text-muted); }

.back-button-container { margin-bottom: 1.5rem; }
.btn-back { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }

/* ── 4b. Tenant Sidebar Layout ─────────────────────────────────────────────── */
/* Shared two-column layout used by Settings, Users, Setup Checklist, etc.     */
.settings-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2rem;
    min-height: 600px;
    align-items: start;
}
.settings-nav {
    background: var(--td-surface);
    border-radius: var(--td-radius);
    padding: 0.875rem;
    box-shadow: var(--td-shadow);
    border: 1px solid var(--td-border);
    border-top: 3px solid var(--td-blue-tap);
    height: fit-content;
    position: sticky;
    top: 1rem;
}
.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.875rem;
    margin-bottom: 0.15rem;
    border-radius: var(--td-radius-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-size: 0.84rem;
    color: var(--td-text-soft);
    text-decoration: none;
}
.settings-nav-item:hover {
    background: var(--td-surface-soft);
    color: var(--td-navy);
    text-decoration: none;
}
.settings-nav-item.active {
    background: var(--td-info-bg);
    color: var(--td-blue-tap);
    font-weight: 600;
}
.settings-nav-icon {
    width: 18px;
    text-align: center;
    opacity: 0.75;
    flex-shrink: 0;
}
.settings-nav-separator {
    height: 1px;
    background: var(--td-border);
    margin: 0.625rem 0;
}
.settings-nav-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--td-text-muted);
    padding: 0.6rem 0.875rem 0.2rem;
}
.settings-content {
    background: var(--td-surface);
    border-radius: var(--td-radius);
    padding: 2rem;
    box-shadow: var(--td-shadow);
    border: 1px solid var(--td-border);
    min-width: 0;
}
.settings-section   { display: none; }
.settings-section.active { display: block; }
.settings-header    { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--td-border); }
.settings-header h2 { font-size: 1.25rem; font-weight: 600; color: var(--td-navy); margin: 0; }
.settings-header p  { color: var(--td-text-muted); margin: 0.4rem 0 0; font-size: 0.875rem; }

@media (max-width: 768px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav    { position: static; }
}

/* ── 5. Cards ──────────────────────────────────────────────────────────────── */
.td-card, .custom-card {
    background: var(--td-surface);
    border-radius: var(--td-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--td-shadow);
    border: 1px solid var(--td-border);
}
.td-card h2, .custom-card h2,
.td-card h3, .custom-card h3 {
    color: var(--td-navy);
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Bootstrap card override — every card gets a rainbow top accent */
.card {
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius);
    box-shadow: var(--td-shadow);
    border-top: 3px solid transparent;
    border-image: var(--td-gradient-h) 1;
    border-image-slice: 1;
    /* Re-apply radius (border-image removes border-radius on some browsers) */
    overflow: hidden;
    margin-bottom: 2rem;
}
/* Card header: Triton navy with white text */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.5rem;
    background: var(--td-navy);
    border-bottom: none;
    color: white;
}
.card-header h2, .card-header h3,
.card-header .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin: 0;
}
.card-header a { color: rgba(255,255,255,0.85); }
.card-header .btn-primary {
    background-color: var(--td-blue) !important;
    border-color: var(--td-blue) !important;
}
.card-header .btn-secondary {
    background-color: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.25) !important;
    color: white !important;
}
.card-header .btn-secondary:hover {
    background-color: rgba(255,255,255,0.2) !important;
}
.card-body { padding: 1.5rem; }

/* Top-accent card variant (explicit, kept for back-compat) */
.td-card--accent {
    border-top: 3px solid var(--td-blue);
}
.td-card--accent-gradient {
    border-top: 3px solid transparent;
    border-image: var(--td-gradient-h) 1;
    border-image-slice: 1;
}

/* ── 6. Metric / KPI Cards ─────────────────────────────────────────────────── */
.metric-card {
    background: var(--td-surface);
    border-radius: var(--td-radius);
    padding: 1.5rem;
    box-shadow: var(--td-shadow);
    border: 1px solid var(--td-border);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.metric-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
}
/* Triton-branded metric card accent colors */
.metric-card.revenue::before    { background: linear-gradient(90deg, var(--td-blue), var(--td-blue-light)); }
.metric-card.buys::before       { background: linear-gradient(90deg, var(--td-navy), var(--td-purple)); }
.metric-card.workflows::before  { background: linear-gradient(90deg, var(--td-orange), #E06F7E); }
.metric-card.advertisers::before{ background: linear-gradient(90deg, var(--td-purple), var(--td-blue)); }
.metric-card.active::before     { background: linear-gradient(90deg, var(--td-success), #34d399); }
.metric-card.pending::before    { background: linear-gradient(90deg, var(--td-warning), #fbbf24); }

a.metric-card:hover {
    cursor: pointer;
    transform: translateY(-2px);
    box-shadow: var(--td-shadow-lg);
    text-decoration: none;
    color: inherit;
}
.metric-label {
    color: var(--td-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.5rem;
}
.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--td-navy);
    line-height: 1.2;
}
.metric-change { font-size: 0.875rem; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.25rem; }
.metric-change.positive { color: var(--td-success); }
.metric-change.negative { color: var(--td-danger); }
.metric-change.neutral  { color: var(--td-text-muted); }

/* ── 7. Buttons ────────────────────────────────────────────────────────────── */
/* Override Bootstrap & per-page redefinitions with Triton palette */
.btn-primary, a.btn-primary {
    background-color: var(--td-blue) !important;
    border-color: var(--td-blue) !important;
    color: #fff !important;
    font-weight: 500;
    transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.btn-primary:hover, .btn-primary:focus, a.btn-primary:hover {
    background-color: var(--td-blue-mid) !important;
    border-color: var(--td-blue-mid) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26,149,213,0.3) !important;
}
.btn-primary:active { transform: translateY(0) !important; }

/* Secondary: clean gray */
.btn-secondary, a.btn-secondary {
    background-color: var(--td-surface-soft) !important;
    border-color: var(--td-border) !important;
    color: var(--td-text-soft) !important;
}
.btn-secondary:hover { background-color: var(--td-border) !important; color: var(--td-text) !important; }

/* Danger: keep red semantics */
.btn-danger, a.btn-danger {
    background-color: var(--td-danger-bg) !important;
    border-color: #fca5a5 !important;
    color: var(--td-danger-text) !important;
}
.btn-danger:hover {
    background-color: #fecaca !important;
    border-color: var(--td-danger) !important;
    color: var(--td-danger-text) !important;
}

/* Success */
.btn-success, a.btn-success {
    background-color: var(--td-success-bg) !important;
    border-color: #6ee7b7 !important;
    color: var(--td-success-text) !important;
}
.btn-success:hover { background-color: #a7f3d0 !important; }

/* Info — Triton blue-pale */
.btn-info, a.btn-info {
    background-color: var(--td-info-bg) !important;
    border-color: var(--td-blue-pale) !important;
    color: var(--td-info-text) !important;
}

/* Warning */
.btn-warning, a.btn-warning {
    background-color: var(--td-warning-bg) !important;
    border-color: #fde68a !important;
    color: var(--td-warning-text) !important;
}

/* Hover lift for all buttons */
.btn {
    font-family: 'Poppins', sans-serif;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active               { transform: translateY(0); }
.btn:disabled             { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* td-btn-* standalone (landing page etc.) */
.td-btn-primary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--td-blue);
    color: white;
    text-decoration: none;
    font-weight: 600; font-size: 0.95rem;
    padding: 0.85rem 2rem;
    border-radius: var(--td-radius-sm);
    border: none; cursor: pointer;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.td-btn-primary:hover {
    background: var(--td-blue-mid); color: white; text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26,149,213,0.35);
}

/* ── 8. Status Badges ──────────────────────────────────────────────────────── */
/* TAP-style: outlined/bordered pills — colored border + text, minimal fill  */
.status-badge, .status, .td-status {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border: 1px solid currentColor;
}

/* Active / Live — TAP statusGreen */
.status-active, .td-status--active {
    color: var(--td-success);
    border-color: rgba(0,185,74,0.4);
    background: rgba(0,185,74,0.07);
}
/* Completed / Approved — green */
.status-completed, .status-approved,
.td-status--completed, .td-status--approved {
    color: var(--td-success);
    border-color: rgba(0,185,74,0.4);
    background: rgba(0,185,74,0.07);
}
/* Pending / Pending approval / Requires approval — TAP statusOrange */
.status-pending, .status-pending_approval, .status-requires_approval,
.status-pending_creatives, .status-pending_start,
.td-status--pending {
    color: var(--td-warning);
    border-color: rgba(240,115,0,0.35);
    background: rgba(240,115,0,0.07);
}
/* Rejected / Failed / Error — TAP errorRed */
.status-rejected, .status-failed, .status-error,
.td-status--rejected, .td-status--failed {
    color: var(--td-danger);
    border-color: rgba(228,23,23,0.35);
    background: rgba(228,23,23,0.07);
}
/* Draft / Inactive — TAP statusGrey */
.status-draft, .status-inactive, .status-idle,
.td-status--draft, .td-status--inactive {
    color: #444444;
    border-color: rgba(68,68,68,0.3);
    background: rgba(68,68,68,0.05);
}
/* Paused — TAP statusOrange (dimmer) */
.status-paused, .td-status--paused {
    color: var(--td-warning);
    border-color: rgba(240,115,0,0.35);
    background: rgba(240,115,0,0.05);
}
/* Cancelled */
.status-cancelled, .status-canceled, .td-status--cancelled {
    color: #444444;
    border-color: rgba(68,68,68,0.25);
    background: rgba(68,68,68,0.04);
    text-decoration: line-through;
}
/* In progress / Submitting — TAP statusBlue */
.status-in_progress, .status-submitting, .status-connecting,
.td-status--in-progress {
    color: var(--td-info);
    border-color: rgba(99,174,226,0.45);
    background: rgba(99,174,226,0.08);
}
/* Completing */
.status-completing, .td-status--completing {
    color: var(--td-blue-tap);
    border-color: rgba(39,99,158,0.35);
    background: rgba(39,99,158,0.07);
}
/* System / role badges */
.status-super_admin { color: var(--td-purple); border-color: rgba(148,60,215,0.35); background: rgba(148,60,215,0.07); border-radius: 3px; }
.status-admin       { color: var(--td-blue-tap); border-color: rgba(39,99,158,0.35); background: rgba(39,99,158,0.07); border-radius: 3px; }
.status-manager     { color: var(--td-warning); border-color: rgba(240,115,0,0.35); background: rgba(240,115,0,0.07); border-radius: 3px; }
.status-viewer      { color: var(--td-text-soft); border-color: var(--td-border); background: var(--td-surface-soft); border-radius: 3px; }

/* ── 9. Generic Badge / Pill ───────────────────────────────────────────────── */
.td-badge, .badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.6rem;
    border-radius: 100px;
    font-size: 0.72rem; font-weight: 600;
    background: var(--td-info-bg);
    color: var(--td-blue-mid);
    border: 1px solid var(--td-blue-pale);
}
/* Bootstrap contextual bg-* badges: preserve Bootstrap's white text */
.badge.bg-success  { background-color: var(--td-success) !important; color: #fff !important; border: none; }
.badge.bg-danger   { background-color: var(--td-danger)  !important; color: #fff !important; border: none; }
.badge.bg-warning  { background-color: var(--td-warning) !important; color: #fff !important; border: none; }
.badge.bg-info     { background-color: var(--td-info)    !important; color: #fff !important; border: none; }
.badge.bg-primary  { background-color: var(--td-blue-tap) !important; color: #fff !important; border: none; }
.badge.bg-secondary { background-color: var(--td-text-soft) !important; color: #fff !important; border: none; }
.badge-secondary { background: var(--td-surface-soft); color: var(--td-text-muted); border-color: var(--td-border); }
.badge-critical  { background: var(--td-danger-bg);  color: var(--td-danger-text);  border-color: #fca5a5; }
.badge-recommended { background: var(--td-warning-bg); color: var(--td-warning-text); border-color: #fde68a; }
.badge-optional  { background: var(--td-info-bg);    color: var(--td-blue-mid);     border-color: var(--td-blue-pale); }
.format-badge {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    background: var(--td-surface-soft);
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius-sm);
    font-size: 0.8rem;
    font-family: ui-monospace, monospace;
    color: var(--td-text-soft);
}

/* ── 10. Tables ────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--td-border); vertical-align: middle; }
th {
    background: var(--td-navy);
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: none;
}
tbody tr:nth-child(even) td { background: rgba(36,32,82,0.02); }
tr:hover td { background: rgba(26,149,213,0.05) !important; }

/* Bootstrap .table overrides */
.table th {
    font-weight: 600;
    background: var(--td-navy);
    color: rgba(255,255,255,0.9);
    border-bottom: none;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.table td { vertical-align: middle; border-bottom: 1px solid var(--td-border); }
.table-hover tbody tr:hover td { background: rgba(26,149,213,0.05) !important; }
.table-striped tbody tr:nth-of-type(odd) td { background: rgba(36,32,82,0.02); }

/* Thead explicit override */
thead th, thead td {
    background: var(--td-navy) !important;
    color: rgba(255,255,255,0.9) !important;
    border-bottom: none !important;
}

/* ── 11. Forms ─────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-group label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--td-text-soft);
}
.form-group input, .form-group select, .form-group textarea,
.form-control {
    font-family: 'Poppins', sans-serif;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius-sm);
    font-size: 0.9rem;
    color: var(--td-text);
    background: var(--td-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.form-control:focus {
    outline: none;
    border-color: var(--td-blue-tap);
    box-shadow: 0 0 0 1px var(--td-blue-tap);
}
.form-group textarea { min-height: 120px; }
.form-group input:invalid  { border-color: var(--td-danger); }
.form-group input:valid    { border-color: var(--td-success); }

/* ── 12. Alerts ────────────────────────────────────────────────────────────── */
.alert {
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--td-radius-sm);
    position: relative;
    animation: td-slide-in 0.25s ease-out;
    border: 1px solid;
}
.alert-error, .alert-danger {
    background: var(--td-danger-bg);
    color: var(--td-danger);
    border-color: rgba(228,23,23,0.35);
}
.alert-success {
    background: var(--td-success-bg);
    color: var(--td-success);
    border-color: rgba(0,185,74,0.35);
    font-weight: 600;
}
.alert-info {
    background: var(--td-info-bg);
    color: var(--td-info-text);
    border-color: rgba(99,174,226,0.4);
}
.alert-warning {
    background: var(--td-warning-bg);
    color: var(--td-warning-text);
    border-color: #fde68a;
}

@keyframes td-slide-in {
    from { transform: translateY(-6px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── 13. Tabs ──────────────────────────────────────────────────────────────── */
.tabs {
    display: flex;
    border-bottom: 2px solid var(--td-border);
    margin-bottom: 1rem;
}
.tab {
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--td-text-muted);
    transition: color 0.15s;
}
.tab:hover { color: var(--td-blue); }
.tab.active { border-bottom-color: var(--td-blue); color: var(--td-blue); font-weight: 600; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Filter tabs (e.g. creative management) */
.filter-tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: 500;
    color: var(--td-text-muted);
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    text-decoration: none;
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
}
.filter-tab:hover { color: var(--td-navy); text-decoration: none; }
.filter-tab.active { color: var(--td-blue); border-bottom-color: var(--td-blue); font-weight: 600; }
.filter-tab .badge { margin-left: 0.3rem; }
.filter-tab.active .badge { background: var(--td-info-bg); color: var(--td-blue); }

/* ── 14. Empty State ───────────────────────────────────────────────────────── */
.empty-state, .td-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--td-text-muted);
}
.empty-state-icon, .td-empty-state-icon { font-size: 3.5rem; margin-bottom: 1.25rem; opacity: 0.6; }
.empty-state-message, .td-empty-state-message {
    font-size: 1.1rem;
    color: var(--td-text-soft);
    max-width: 560px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}
.empty-state-actions, .td-empty-state-actions { margin-top: 1.5rem; }

/* ── 15. Status Dot (live indicator) ──────────────────────────────────────── */
.status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    animation: td-pulse 2s ease-in-out infinite;
}
.status-dot.active     { background: var(--td-success); }
.status-dot.connecting { background: var(--td-warning); }
.status-dot.idle       { background: var(--td-text-muted); animation: none; }

@keyframes td-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* ── 16. Activity Feed ─────────────────────────────────────────────────────── */
.activity-feed {
    background: var(--td-surface);
    border-radius: var(--td-radius);
    padding: 1.5rem;
    box-shadow: var(--td-shadow);
    border: 1px solid var(--td-border);
    display: flex;
    flex-direction: column;
}
.activity-item {
    margin-bottom: 0.75rem;
    border-radius: var(--td-radius-sm);
    border: 1px solid var(--td-border);
    overflow: hidden;
    background: var(--td-surface);
    animation: td-slide-in 0.3s ease-out;
    transition: box-shadow 0.2s;
}
.activity-item:hover { box-shadow: var(--td-shadow-sm); }
.activity-item.action-required {
    border-left: 4px solid var(--td-warning);
    background: var(--td-warning-bg);
}

/* ── 17. Product Cards ─────────────────────────────────────────────────────── */
.product-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}
.product-card {
    background: var(--td-surface);
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    box-shadow: var(--td-shadow-sm);
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--td-shadow-lg);
}
.product-card-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--td-surface-soft), var(--td-border));
    min-height: 120px;
}
.product-card-content { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }

/* ── 18. Creative Cards ────────────────────────────────────────────────────── */
.creative-card {
    background: var(--td-surface);
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius);
    padding: 1.5rem;
    transition: box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--td-shadow-sm);
}
.creative-card:hover { box-shadow: var(--td-shadow); }
.review-card {
    background: var(--td-surface);
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius);
    padding: 2rem;
    transition: box-shadow 0.2s;
    box-shadow: var(--td-shadow-sm);
}
.review-card:hover { box-shadow: var(--td-shadow); }

/* ── 19. View Toggle ───────────────────────────────────────────────────────── */
.view-toggle {
    background: transparent;
    border: 1px solid var(--td-border);
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    border-radius: var(--td-radius-sm);
    color: var(--td-text-muted);
    transition: all 0.15s;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
}
.view-toggle:hover { background: var(--td-border); color: var(--td-text); }
.view-toggle.active { background: var(--td-blue); color: white; border-color: var(--td-blue); }

/* ── 20. Breadcrumb ────────────────────────────────────────────────────────── */
.breadcrumb { margin-bottom: 1rem; }
.breadcrumb a { color: var(--td-text-muted); text-decoration: none; font-size: 0.875rem; }
.breadcrumb a:hover { color: var(--td-navy); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--td-text-muted); }

/* ── 21. Detail Row (key–value pairs) ─────────────────────────────────────── */
.detail-rows { display: flex; flex-direction: column; gap: 0.75rem; }
.detail-row { display: flex; align-items: flex-start; gap: 1rem; font-size: 0.9rem; }
.detail-row .label, .detail-label {
    font-weight: 600;
    color: var(--td-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 150px;
    flex-shrink: 0;
    padding-top: 0.1rem;
}
.detail-row .value, .detail-value { flex: 1; color: var(--td-text); }

/* ── 22. Setup / Checklist Banners ─────────────────────────────────────────── */
.checklist-header {
    background: var(--td-navy);
    background-image:
        radial-gradient(ellipse 80% 60% at 90% 50%, rgba(26,149,213,0.25) 0%, transparent 65%),
        radial-gradient(ellipse 40% 80% at 10% 80%, rgba(148,60,215,0.15) 0%, transparent 55%);
    color: white;
    border-radius: var(--td-radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.checklist-header::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--td-gradient-h);
}
.checklist-header h1, .checklist-header h2 {
    color: white;
    margin: 0 0 0.4rem;
}
.checklist-header p { color: rgba(255,255,255,0.75); }

.ready-banner {
    background: linear-gradient(135deg, var(--td-success) 0%, #059669 100%);
    color: white;
    padding: 2rem;
    border-radius: var(--td-radius);
    text-align: center;
    margin-bottom: 1.5rem;
}
.ready-banner h2 { color: white; margin: 0 0 0.5rem; font-size: 1.4rem; }
.ready-banner p  { margin: 0; opacity: 0.92; }

/* Priority steps info box */
.priority-steps {
    background: var(--td-info-bg);
    border: 1px solid var(--td-blue-pale);
    border-radius: var(--td-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.priority-steps h3 {
    margin: 0 0 0.75rem;
    color: var(--td-blue-mid);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.priority-steps li { color: var(--td-blue-mid); }

/* Task items */
.task-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--td-radius-sm);
    margin-bottom: 0.75rem;
    border: 1px solid var(--td-border);
    transition: all 0.2s;
    background: var(--td-surface);
}
.task-item:hover { border-color: var(--td-border-strong); box-shadow: var(--td-shadow-sm); }
.task-item.complete  { background: var(--td-success-bg); border-color: #6ee7b7; }
.task-item.incomplete{ background: var(--td-danger-bg);  border-color: #fca5a5; }
.task-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.2rem; color: var(--td-navy); }
.task-description { font-size: 0.875rem; color: var(--td-text-muted); margin-bottom: 0.35rem; }
.task-details { font-size: 0.75rem; color: var(--td-text-muted); font-style: italic; }
.task-action a {
    display: inline-block;
    padding: 0.45rem 1rem;
    background: var(--td-blue);
    color: white;
    border-radius: var(--td-radius-sm);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.15s;
}
.task-action a:hover {
    background: var(--td-blue-mid);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26,149,213,0.3);
}

/* ── 23. AI / Special Badges ────────────────────────────────────────────────── */
.ai-badge {
    background: linear-gradient(135deg, var(--td-navy) 0%, var(--td-purple) 100%);
    color: white;
    padding: 0.2rem 0.7rem;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ── 24. Misc Utilities ────────────────────────────────────────────────────── */
.td-divider { border: none; border-top: 1px solid var(--td-border); margin: 1.5rem 0; }
.td-muted   { color: var(--td-text-muted); font-size: 0.875rem; }
.td-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--td-text-muted);
    margin-bottom: 0.35rem;
    display: block;
}

/* Highlight row animation (e.g. navigating via anchor) */
tr.highlight-row {
    background-color: rgba(26,149,213,0.08) !important;
    animation: td-highlight-fade 3s ease-in-out forwards;
}
@keyframes td-highlight-fade {
    0%   { background-color: rgba(26,149,213,0.2); }
    100% { background-color: transparent; }
}

/* details/summary link styling */
details summary {
    cursor: pointer;
    color: var(--td-blue);
    font-size: 0.875rem;
}
details summary:hover { text-decoration: underline; }

/* signup_complete / onboarding step circles */
.step-circle {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.25rem;
    color: white;
    margin: 0 auto 0.75rem;
}
.step-circle--1 { background: linear-gradient(135deg, var(--td-navy), var(--td-blue)); }
.step-circle--2 { background: linear-gradient(135deg, var(--td-purple-dark), var(--td-purple)); }
.step-circle--3 { background: linear-gradient(135deg, var(--td-blue), var(--td-blue-light)); }

/* ── 25. Bootstrap Overrides ───────────────────────────────────────────────── */
/* Bootstrap text/bg utilities */
.text-primary       { color: var(--td-blue)  !important; }
.bg-primary         { background-color: var(--td-blue)  !important; }
.border-primary     { border-color: var(--td-blue-pale) !important; }
.text-muted         { color: var(--td-text-muted) !important; }

/* Fix Bootstrap's default link-in-nav color for Triton dark header */
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.8); }
.navbar-dark .navbar-nav .nav-link:hover { color: #fff; }

/* ── 26. Triton Deep-Brand Overrides ──────────────────────────────────────── */

/* Sidebar / left-nav if present: Triton navy */
.sidebar, .left-nav, .nav-sidebar {
    background: var(--td-navy);
    color: rgba(255,255,255,0.85);
}
.sidebar a, .left-nav a, .nav-sidebar a {
    color: rgba(255,255,255,0.75);
}
.sidebar a:hover, .left-nav a:hover, .nav-sidebar a:hover,
.sidebar a.active, .left-nav a.active {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

/* Page content wrapper: subtle left accent stripe on larger screens */
@media (min-width: 992px) {
    .container { max-width: 1200px; }
}

/* Section divider: thin rainbow rule */
.td-section-divider {
    border: none;
    border-top: 1px solid var(--td-border);
    margin: 2rem 0;
    position: relative;
}
.td-section-divider::before {
    content: '';
    display: block;
    position: absolute;
    top: -1px; left: 0;
    width: 80px; height: 2px;
    background: var(--td-gradient-h);
}

/* Section titles inside cards/panels */
.section-title, h2.section-title, h3.section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--td-navy);
    letter-spacing: -0.01em;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--td-border);
    margin-bottom: 1.25rem;
    position: relative;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 36px; height: 2px;
    background: var(--td-gradient-h);
}

/* List group: Triton styling */
.list-group-item {
    border-color: var(--td-border);
    font-family: 'Poppins', sans-serif;
    transition: background 0.12s;
}
.list-group-item:hover { background: rgba(26,149,213,0.04); }
.list-group-item.active {
    background-color: var(--td-navy) !important;
    border-color: var(--td-navy) !important;
}

/* Nav pills: Triton */
.nav-pills .nav-link.active {
    background-color: var(--td-navy) !important;
    color: #fff !important;
}
.nav-pills .nav-link:not(.active):hover {
    background: rgba(36,32,82,0.06);
    color: var(--td-navy);
}

/* Nav tabs: Triton underline */
.nav-tabs .nav-link.active {
    color: var(--td-navy);
    border-bottom-color: var(--td-blue);
    font-weight: 600;
}
.nav-tabs .nav-link:hover { color: var(--td-navy); }

/* Modal: Triton header */
.modal-header {
    background: var(--td-navy);
    color: white;
    border-bottom: none;
}
.modal-header .modal-title { color: white; font-weight: 600; }
.modal-header .btn-close { filter: invert(1) grayscale(1); }

/* Progress bars */
.progress { border-radius: var(--td-radius-sm); background: var(--td-border); }
.progress-bar { background: var(--td-blue); }

/* Pagination */
.page-item.active .page-link {
    background-color: var(--td-navy) !important;
    border-color: var(--td-navy) !important;
}
.page-link { color: var(--td-blue); font-family: 'Poppins', sans-serif; }
.page-link:hover { color: var(--td-navy); background: rgba(36,32,82,0.06); }

/* Dropdowns */
.dropdown-item:hover, .dropdown-item:focus {
    background: rgba(26,149,213,0.08);
    color: var(--td-navy);
}
.dropdown-item.active { background: var(--td-navy); color: white; }

/* Inline data rows (detail pages) */
.data-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--td-border);
    font-size: 0.9rem;
}
.data-row:last-child { border-bottom: none; }
.data-row .key {
    font-weight: 600;
    color: var(--td-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 160px;
    flex-shrink: 0;
}
.data-row .val { color: var(--td-text); flex: 1; }

/* Inline flash messages */
.flash-messages { position: fixed; top: 70px; right: 1.5rem; z-index: 1050; width: 360px; }

/* Search/filter bar */
.search-bar, .filter-bar {
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--td-surface);
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--td-shadow-sm);
}
.search-bar input {
    flex: 1; border: none; outline: none; background: transparent;
    font-family: 'Poppins', sans-serif; font-size: 0.9rem; color: var(--td-text);
}

/* Info panel (key-value summary boxes) */
.info-panel {
    background: var(--td-surface);
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border-left: 4px solid var(--td-blue);
    box-shadow: var(--td-shadow-sm);
}
.info-panel h3, .info-panel h4 {
    color: var(--td-navy);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 0.75rem;
}

/* Triton-branded horizontal rule */
hr {
    border: none;
    border-top: 1px solid var(--td-border);
    margin: 1.5rem 0;
}

/* Make select elements match Poppins */
select, select.form-select, select.form-control {
    font-family: 'Poppins', sans-serif;
}
select.form-select:focus, select.form-control:focus {
    border-color: var(--td-blue);
    box-shadow: 0 0 0 3px rgba(26,149,213,0.15);
}

/* Copy-to-clipboard / small action buttons */
.btn-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.65rem;
    font-family: 'Poppins', sans-serif;
}

/* Triton table link overrides */
.table a { color: var(--td-blue); font-weight: 500; }
.table a:hover { color: var(--td-navy); }

/* Tenant header / page sub-titles */
.tenant-name, .page-subtitle {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--td-navy);
    margin-bottom: 0.25rem;
}

/* Card within a card (nested) */
.td-inner-card {
    background: var(--td-surface-soft);
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius-sm);
    padding: 1rem;
    margin-bottom: 1rem;
}