/* ==========================================================================
   Seabery Enterprise Theme — Salesforce Lightning Aesthetic
   Inter for UI | Gilroy Heavy for impact | PP Supply Mono for data
   Colors: Dark Blue #062556, Orange #FF6B00, Medium Blue #06B4E9
   ========================================================================== */

/* === Fonts === */
@font-face {
    font-family: 'Gilroy';
    src: url('/static/fonts/Gilroy-Heavy.otf') format('opentype');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('/static/fonts/Gilroy-Medium.otf') format('opentype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'PP Supply Mono';
    src: url('/static/fonts/PPSupplyMono-Regular.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
}

/* ========================================================================
   EDITORIAL-INDUSTRIAL LAYER — "Gilroy emociona, Inter trabaja"
   Applied to hero areas + big KPI numbers + section titles.
   Tables, NBA body text, forms stay on Inter.
   ======================================================================== */

.ed-hero {
    position: relative;
    background: #062556;
    background-image:
        linear-gradient(135deg, rgba(6,37,86,.96) 0%, rgba(6,37,86,.78) 55%, rgba(255,107,0,.28) 100%),
        url('/static/img/login-hero-bg.jpg');
    background-size: cover;
    background-position: center right;
    border-radius: 10px;
    padding: 44px 52px;
    margin-bottom: 28px;
    overflow: hidden;
    color: #fff;
    min-height: 220px;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

/* Compact variant — for working pages (deals list, quote builder, orders).
   ~80px tall: partner must see the table/form above the fold. */
.ed-hero-compact {
    position: relative;
    background: #062556;
    background-image:
        linear-gradient(110deg, rgba(6,37,86,.97) 0%, rgba(6,37,86,.82) 60%, rgba(255,107,0,.22) 100%),
        url('/static/img/login-hero-bg.jpg');
    background-size: cover;
    background-position: center right;
    border-radius: 10px;
    padding: 18px 24px;
    margin-bottom: 18px;
    overflow: hidden;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ed-hero-compact::before {
    content: '';
    position: absolute;
    left: 0; top: 22%; height: 56%; width: 3px;
    background: var(--sb-orange);
    box-shadow: 0 0 16px rgba(255,107,0,.55);
}
.ed-hero-compact > * { position: relative; z-index: 1; }
.ed-hero-compact .ed-kicker { margin-bottom: 4px; font-size: .66rem; }
.ed-hero-compact .ed-title  { font-size: 1.5rem; margin: 0; letter-spacing: -.3px; }
.ed-hero-compact .ed-subtitle { margin: 2px 0 0; font-size: .78rem; color: rgba(255,255,255,.7); max-width: none; }
.ed-hero-compact-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ed-hero-compact-stat {
    display: inline-flex; flex-direction: column; align-items: flex-start;
    padding: 0 16px; border-left: 1px solid rgba(255,255,255,.15);
}
.ed-hero-compact-stat:first-child { border-left: none; padding-left: 0; }
.ed-hero-compact-stat .v {
    font-family: 'Gilroy', sans-serif; font-weight: 800; font-size: 1.3rem;
    color: #fff; letter-spacing: -.3px; line-height: 1;
}
.ed-hero-compact-stat .v.accent { color: var(--sb-orange); }
.ed-hero-compact-stat .k {
    font-family: var(--font-mono); font-size: .58rem; letter-spacing: .15em;
    text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 4px;
}
.ed-hero::before {
    content: '';
    position: absolute;
    left: 0; top: 28%; height: 44%; width: 4px;
    background: var(--sb-orange);
    box-shadow: 0 0 24px rgba(255,107,0,.5);
}
.ed-hero > * { position: relative; z-index: 1; }
.ed-hero-text { flex: 1 1 360px; }
.ed-hero-visual {
    flex: 0 0 260px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .92;
}
.ed-hero-visual img {
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.4));
}

.ed-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Gilroy', sans-serif;
    font-weight: 500;
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sb-orange);
    margin-bottom: 12px;
}
.ed-kicker::before {
    content: '';
    width: 24px; height: 2px; background: var(--sb-orange);
}

.ed-title {
    font-family: 'Gilroy', sans-serif;
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: #fff;
    margin: 0 0 10px;
}
.ed-subtitle {
    font-family: var(--font);
    font-weight: 500;
    font-size: .92rem;
    color: rgba(255,255,255,.76);
    letter-spacing: .005em;
    max-width: 520px;
}
.ed-meta {
    display: flex; gap: 18px; margin-top: 18px;
    font-family: var(--font-mono); font-size: .68rem;
    color: rgba(255,255,255,.55); letter-spacing: .08em; text-transform: uppercase;
}
.ed-meta strong { color: #fff; font-family: var(--font); font-weight: 600; letter-spacing: normal; text-transform: none; margin-right: 6px; }

/* Section eyebrow pattern — "01 · PRIORITIES" */
.ed-section {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 32px 0 14px;
    padding-left: 14px;
    border-left: 3px solid var(--sb-orange);
}
.ed-section-index {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--sb-orange);
    font-weight: 600;
    letter-spacing: .1em;
}
.ed-section-title {
    font-family: 'Gilroy', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    color: #2F3E4E;
    letter-spacing: -.2px;
    margin: 0;
}
.ed-section-cta {
    margin-left: auto;
    font-family: var(--font-mono); font-size: .7rem;
    color: #475569; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase;
}

/* Big editorial KPIs */
.ed-kpi {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ed-kpi::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--sb-orange);
    opacity: 0; transition: opacity .15s;
}
.ed-kpi:hover { box-shadow: 0 8px 24px rgba(6,37,86,.08); transform: translateY(-1px); }
.ed-kpi:hover::before { opacity: 1; }
.ed-kpi-label {
    font-family: var(--font-mono);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #475569;
    margin-bottom: 6px;
}
.ed-kpi-value {
    font-family: 'Gilroy', sans-serif;
    font-weight: 800;
    font-size: 2.8rem;
    line-height: 1;
    color: #2F3E4E;
    letter-spacing: -1px;
    margin-bottom: 4px;
}
.ed-kpi-value.accent { color: var(--sb-orange); }
.ed-kpi-trend {
    font-family: var(--font);
    font-size: .72rem;
    font-weight: 500;
    color: #475569;
    letter-spacing: .005em;
}
.ed-kpi-trend .up   { color: #2E844A; font-weight: 600; }
.ed-kpi-trend .down { color: #C23934; font-weight: 600; }

.ed-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
@media (max-width: 980px) { .ed-kpi-grid { grid-template-columns: repeat(2, 1fr); } }

/* === Tokens === */
:root {
    --sb-dark-blue:    #062556;
    --sb-orange:       #FF6B00;
    --sb-orange-light: #FF8533;
    --sb-orange-bg:    #FFF3EC;
    --sb-medium-blue:  #06B4E9;
    --sb-medium-blue-bg: #E8F8FE;
    --sb-medium-grey:  #B8C3CE;
    --sb-soft-grey:    #E4EBEF;

    --navy:        #062556;
    --navy-light:  #0a3472;
    --navy-dark:   #031a3d;
    --blue:        #06B4E9;
    --blue-light:  #38c5f0;
    --blue-bg:     #E8F8FE;
    --gray-50:     #F3F2F2;
    --gray-100:    #ECEBEA;
    --gray-200:    #DDDBDA;
    --gray-300:    #C9C7C5;
    --white:       #FFFFFF;

    --font:        'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display:'Gilroy', 'Inter', Arial, sans-serif;
    --font-mono:   'PP Supply Mono', 'Courier New', monospace;

    --radius:      8px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --sidebar-w:   256px;
    --sidebar-collapsed-w: 56px;
    --topbar-h:    48px;
    --transition:  .15s ease;

    --shadow:      0 2px 4px rgba(0,0,0,.07);
    --shadow-md:   0 2px 8px rgba(0,0,0,.1);
    --shadow-lg:   0 4px 16px rgba(0,0,0,.12);
}

/* === Base === */
html { font-size: 13.5px; }
body {
    font-family: var(--font);
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga", "calt";
    background: var(--gray-50);
    color: #2F3E4E;
    letter-spacing: .01em;
}

/* Crisp secondary text — darken greys so they hold on tinted backgrounds */
:root {
    --text-muted:   #475569;
    --text-subtle:  #334155;
}

/* Monetary values: bold + slate gray for maximum legibility */
.font-mono, [style*="var(--font-mono)"] {
    font-family: var(--font-mono);
}

/* === Sidebar — Salesforce-style dark nav === */
.sidebar {
    width: var(--sidebar-w);
    background: var(--sb-dark-blue);
    border-right: none;
    transition: width var(--transition);
}

.sidebar-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-logo { gap: 10px; }
img.logo-icon, span.logo-icon {
    width: 28px; height: 28px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    display: block;
    object-fit: contain;
}
.logo-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -.2px;
    color: #fff;
}

.sidebar-user {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    gap: 10px;
}
.avatar {
    width: 32px; height: 32px;
    background: var(--sb-orange);
    font-size: .7rem;
    font-weight: 700;
}
.user-name { font-size: .8rem; font-weight: 600; color: #f1f5f9; }
.user-role {
    font-family: var(--font-mono);
    font-size: .6rem;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Nav items — compact Lightning style */
.sidebar-nav { padding: 8px 0; }
.sidebar-nav li a,
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    margin: 1px 8px;
    border-radius: 6px;
    border-left: none;
    color: rgba(255,255,255,.55);
    font-size: .8rem;
    font-weight: 500;
    transition: all var(--transition);
    text-decoration: none;
}
.sidebar-nav li a:hover,
.sidebar-link:hover {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.9);
    text-decoration: none;
}
.sidebar-nav li a.active {
    background: rgba(255,107,0,.15);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}
.sidebar-nav li a.active .nav-icon { opacity: 1; color: var(--sb-orange); }
.nav-icon { width: 16px; font-size: .85rem; opacity: .45; display: flex; align-items: center; justify-content: center; }
.nav-disabled { opacity: .25; }
.nav-soon-tag {
    font-family: var(--font-mono);
    font-size: .5rem;
    letter-spacing: .5px;
    background: rgba(255,255,255,.06);
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: auto;
}

.sidebar-footer { border-top: 1px solid rgba(255,255,255,.08); padding: 8px 0; }
.sidebar-collapse-btn {
    display: block; width: 100%; padding: 8px;
    background: none; border: none; color: rgba(255,255,255,.25);
    cursor: pointer; font-size: .7rem;
}
.sidebar-collapse-btn:hover { color: rgba(255,255,255,.5); }

/* Collapsed */
.sidebar.collapsed { width: var(--sidebar-collapsed-w); }
.sidebar.collapsed .logo-text,
.sidebar.collapsed .user-info,
.sidebar.collapsed .nav-soon-tag,
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .sidebar-header,
.sidebar.collapsed .sidebar-user { justify-content: center; padding: 12px 0; }
.sidebar.collapsed .sidebar-nav li a { justify-content: center; padding: 8px 0; margin: 1px 4px; }
.sidebar.collapsed .nav-icon { width: auto; font-size: 1rem; }
.sidebar.collapsed + .main-content { margin-left: var(--sidebar-collapsed-w); }

/* === Topbar — Salesforce header bar === */
.main-content {
    margin-left: var(--sidebar-w);
    transition: margin-left var(--transition);
}
.topbar {
    height: var(--topbar-h);
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    padding: 0 20px;
    gap: 12px;
}
.topbar-center { gap: 0; }
.page-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .95rem;
    color: var(--sb-dark-blue);
    letter-spacing: -.1px;
    line-height: 1.2;
}
.breadcrumbs {
    font-family: var(--font-mono);
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--gray-300);
    margin-top: 1px;
}
.breadcrumbs a { color: var(--gray-300); }
.breadcrumbs a:hover { color: var(--sb-orange); }
.breadcrumbs .current { color: #4A5568; }
.env-badge {
    font-family: var(--font-mono);
    font-size: .55rem;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--sb-orange-bg);
    color: var(--sb-orange);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* === Content area === */
.content { padding: 20px; animation: fadeIn .15s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* === Cards — Lightning card style === */
.card {
    background: #fff;
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-200);
    transition: box-shadow var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: none; }

.card-header { margin-bottom: 12px; }
.card-title {
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #475569;
}
.card-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 2px 6px rgba(6,37,86,.12), inset 0 1px 0 rgba(255,255,255,.18);
}
.card-icon svg { width: 20px; height: 20px; stroke-width: 2.25; }
.card-icon.blue   { background: linear-gradient(135deg, #06B4E9 0%, #0891C4 100%); }
.card-icon.green  { background: linear-gradient(135deg, #2E844A 0%, #1F6236 100%); }
.card-icon.orange { background: linear-gradient(135deg, #FF8533 0%, #FF6B00 100%); }
.card-icon.navy   { background: linear-gradient(135deg, #0a3472 0%, #062556 100%); }

.card-value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.75rem;
    color: #2F3E4E;
    letter-spacing: -.3px;
    line-height: 1.1;
}
.card-subtitle {
    font-size: .75rem;
    color: #475569;
    margin-top: 2px;
}
.cards-grid { gap: 12px; }

/* === Tables — Salesforce data table === */
.table-container {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.table-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-200);
}
.table-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .85rem;
    color: var(--sb-dark-blue);
}

table { border-collapse: collapse; }
th {
    font-family: var(--font);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 8px 16px;
    background: #FAFAF9;
    color: #475569;
    border-bottom: 1px solid var(--gray-200);
    text-align: left;
}
td {
    padding: 10px 16px;
    font-size: .8rem;
    color: #2F3E4E;
    border-bottom: 1px solid #F3F2F2;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: #F3F3F3; }

code, td code {
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .2px;
    color: #444;
}

/* Sortable headers */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--sb-orange); }
th.sort-asc i, th.sort-desc i { opacity: 1; color: var(--sb-orange); }

/* === Buttons — Salesforce action buttons === */
.btn {
    border-radius: 4px;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: 0;
    padding: 8px 16px;
    transition: all var(--transition);
}
.btn:active { transform: scale(0.98); }

.btn-primary {
    background: var(--sb-orange);
    color: #fff;
    border: 1px solid var(--sb-orange);
    box-shadow: none;
}
.btn-primary:hover {
    background: var(--sb-orange-light);
    border-color: var(--sb-orange-light);
}

.btn-secondary {
    border: 1px solid var(--gray-200);
    background: #fff;
    color: #2F3E4E;
}
.btn-secondary:hover {
    background: #F3F2F2;
    border-color: var(--gray-300);
}

.btn-danger { background: #C23934; color: #fff; border: 1px solid #C23934; }
.btn-sm { padding: 5px 12px; font-size: .75rem; }

/* === Badges — Salesforce pill badges === */
.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 12px;
    font-family: var(--font);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 2px 10px;
}
.badge-active  { background: #E3F8E8; color: #2E844A; }
.badge-pending { background: var(--sb-orange-bg); color: #B95000; }
.badge-expired { background: #FEE2E2; color: #C23934; }
.badge-info    { background: var(--sb-medium-blue-bg); color: #0176D3; }

/* === Welcome Hero === */
.welcome-hero {
    background: linear-gradient(135deg, var(--sb-dark-blue) 0%, #0a3472 60%, #0D4A8A 100%);
    border-radius: var(--radius);
    padding: 24px 28px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.welcome-hero::after {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 160px; height: 160px;
    background: url('/static/img/hyper-icon-white.svg') center/contain no-repeat;
    opacity: .04;
    pointer-events: none;
}
.welcome-hero > * { position: relative; z-index: 1; }
.welcome-hero h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.2px; color: #fff; font-size: 1.3rem; }
.welcome-hero p { color: rgba(255,255,255,.65); font-size: .85rem; }

/* === Kanban — Clean pipeline === */
.kanban-board { gap: 10px; }
.kanban-column {
    min-width: 260px; max-width: 300px;
    background: #F3F2F2;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}
.kanban-column-header {
    padding: 12px 14px;
    background: #fff;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 2px solid var(--sb-orange);
}
.kanban-column-title {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #4A5568;
}
.kanban-count {
    font-family: var(--font-mono);
    font-size: .65rem;
    background: var(--sb-orange-bg);
    color: var(--sb-orange);
    padding: 1px 6px;
    border-radius: 10px;
}
.kanban-value { font-family: var(--font-mono); font-size: .7rem; color: #475569; }
.kanban-cards { padding: 8px; max-height: 65vh; }
.kanban-card {
    background: #fff;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--sb-orange);
    box-shadow: none;
    transition: box-shadow var(--transition);
}
.kanban-card:hover { box-shadow: var(--shadow-md); transform: none; }
.kanban-card-title { font-weight: 600; font-size: .8rem; color: #2F3E4E; }
.kanban-card-title:hover { color: var(--sb-orange); }
.kanban-card-account { font-size: .7rem; color: #475569; }
.kanban-card-value { font-family: var(--font-mono); font-weight: 400; font-size: .75rem; color: #4A5568; }
.kanban-card-footer { gap: 4px; }
.kanban-empty { color: #C9C7C5; font-size: .75rem; padding: 20px 10px; }

.btn-stage-move {
    width: 22px; height: 22px;
    border-radius: 4px;
    border: 1px solid var(--gray-200);
    font-size: .65rem;
    color: #475569;
}
.btn-stage-move:hover { background: var(--sb-orange-bg); color: var(--sb-orange); border-color: var(--sb-orange); }
.kanban-card-actions { display: none; top: 6px; right: 6px; gap: 2px; }
.kanban-card:hover .kanban-card-actions { display: flex; }

/* === Timeline chat bubbles === */
.timeline-note { margin-bottom: 14px; gap: 10px; }
.timeline-note .note-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    font-size: .65rem; font-weight: 700;
}
.timeline-note.note-partner .note-avatar { background: var(--sb-orange-bg); color: var(--sb-orange); }
.timeline-note.note-seabery .note-avatar { background: var(--sb-medium-blue-bg); color: #0176D3; }
.timeline-note.note-escalation .note-avatar { background: #FEE2E2; color: #C23934; }

.note-bubble {
    flex: 1;
    background: #FAFAF9;
    border-radius: 8px;
    border-top-left-radius: 2px;
    padding: 10px 14px;
    border: 1px solid var(--gray-200);
}
.timeline-note.note-partner .note-bubble { background: var(--sb-orange-bg); border-color: rgba(255,107,0,.12); border-top-left-radius: 8px; border-top-right-radius: 2px; }
.timeline-note.note-escalation .note-bubble { background: #FEF2F2; border-color: rgba(194,57,52,.1); }
.note-author { font-weight: 600; font-size: .75rem; color: #4A5568; }
.note-date { font-family: var(--font-mono); font-size: .6rem; color: #C9C7C5; }
.note-text { font-size: .8rem; color: #4A5568; line-height: 1.5; }

/* === Forms — Clean inputs === */
.form-group input,
.form-group select,
.form-group textarea {
    border-radius: 4px;
    border: 1px solid var(--gray-200);
    padding: 8px 12px;
    font-family: var(--font);
    font-weight: 400;
    font-size: .85rem;
    color: #2F3E4E;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--sb-orange);
    box-shadow: 0 0 0 3px rgba(255,107,0,.1);
    outline: none;
}
.form-group label {
    font-size: .75rem;
    font-weight: 600;
    color: #4A5568;
    margin-bottom: 4px;
}

/* === Flash messages === */
.flash {
    border-radius: 4px;
    border-left: 3px solid;
    padding: 10px 14px;
    font-size: .8rem;
}
.flash-error   { border-left-color: #C23934; background: #FEF2F2; color: #C23934; }
.flash-success { border-left-color: #2E844A; background: #E3F8E8; color: #2E844A; }
.flash-info    { border-left-color: #0176D3; background: var(--sb-medium-blue-bg); color: #0176D3; }
.flash-warning { border-left-color: var(--sb-orange); background: var(--sb-orange-bg); color: #B95000; }

/* === Login hero === */
.login-hero {
    background:
        linear-gradient(160deg, rgba(2,14,31,.88) 0%, rgba(6,37,86,.82) 40%, rgba(10,52,114,.78) 100%),
        url('/static/img/login-hero-bg.jpg') center/cover no-repeat;
    position: relative;
    overflow: hidden;
    padding: 48px 56px;
    align-items: flex-start;
    justify-content: center;
}
.login-hero-pattern {
    position: absolute; inset: 0; z-index: 1;
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 60% at 30% 50%, black, transparent);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 50%, black, transparent);
}
.login-hero-orb { position: absolute; border-radius: 50%; z-index: 1; filter: blur(50px); }
.login-hero-orb-1 { top: -10%; right: -5%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,107,0,.08), transparent 70%); }
.login-hero-orb-2 { bottom: -15%; left: -5%; width: 250px; height: 250px; background: radial-gradient(circle, rgba(6,180,233,.06), transparent 70%); }
.login-hero h1 { font-family: var(--font-display); font-weight: 800; color: #fff; }
.login-btn {
    background: var(--sb-orange);
    border: 1px solid var(--sb-orange);
    border-radius: 4px;
    font-weight: 600;
}
.login-btn:hover { background: var(--sb-orange-light); border-color: var(--sb-orange-light); }
.demo-users h3 { font-size: .6rem; letter-spacing: .7px; color: #475569; font-weight: 600; }
.demo-user-btn { border-radius: 6px; transition: all var(--transition); }
.demo-user-btn:hover { border-color: var(--sb-orange); background: var(--sb-orange-bg); }

/* === Modal === */
.modal { border-radius: var(--radius-xl); }
.modal-title { font-family: var(--font-display); font-weight: 800; color: var(--sb-dark-blue); }

/* === Scrollbar === */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }
.sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); }

/* Dark mode disabled — Salesforce Lightning is always light mode.
   The sidebar stays dark (Dark Blue) for contrast, but all content areas are light. */