/* ═══════════════════════════════════════════════════════════════
   EUSBD Enquiry Hub v3.0 — Horizon Luxe Design System
   Navy: #0A1E45  Gold: #C9A540  Fonts: Cormorant Garamond / Outfit
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --esbd-navy: #0A1E45;
    --esbd-navy-dark: #06132E;
    --esbd-navy-light: #0F2A5C;
    --esbd-gold: #C9A540;
    --esbd-gold-light: #D4B55C;
    --esbd-gold-pale: #F5EDDA;
    --esbd-gold-glow: rgba(201,165,64,.12);
    --esbd-white: #FFFFFF;
    --esbd-off-white: #F8F6F2;
    --esbd-cream: #FAF8F4;
    --esbd-text: #1A1A2E;
    --esbd-text-muted: #6B7280;
    --esbd-text-light: #9CA3AF;
    --esbd-border: #E5E1D8;
    --esbd-border-light: #EDE9E0;
    --esbd-success: #059669;
    --esbd-success-bg: #ECFDF5;
    --esbd-error: #DC2626;
    --esbd-error-bg: #FEF2F2;
    --esbd-warning: #D97706;
    --esbd-warning-bg: #FFFBEB;
    --esbd-info: #2563EB;
    --esbd-info-bg: #EFF6FF;
    --esbd-shadow-sm: 0 1px 2px rgba(10,30,69,.05);
    --esbd-shadow: 0 2px 8px rgba(10,30,69,.08);
    --esbd-shadow-lg: 0 8px 30px rgba(10,30,69,.12);
    --esbd-shadow-xl: 0 12px 40px rgba(10,30,69,.15);
    --esbd-radius: 14px;
    --esbd-radius-sm: 10px;
    --esbd-radius-lg: 20px;
    --esbd-radius-xl: 24px;
    --esbd-transition: all .2s ease;
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Outfit', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* ═══ STANDALONE BODY ═══ */
body.eusbd-standalone {
    margin: 0; padding: 0; min-height: 100vh;
    background: var(--esbd-off-white);
    color: var(--esbd-text);
    font-family: var(--font-body);
    font-size: 15px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ═══ HEADER ═══ */
.eusbd-header {
    background: linear-gradient(135deg, var(--esbd-navy) 0%, var(--esbd-navy-dark) 100%);
    color: var(--esbd-white);
    box-shadow: 0 2px 12px rgba(10,30,69,.2);
    position: sticky; top: 0; z-index: 100;
    border-bottom: 3px solid var(--esbd-gold);
}
.eusbd-header-inner {
    max-width: 1560px; margin: 0 auto;
    padding: 14px 28px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.eusbd-header-left {
    display: flex; align-items: center; gap: 14px;
}
.eusbd-header-logo {
    height: 48px; width: 48px; border-radius: 12px;
    object-fit: cover; flex-shrink: 0;
    background: var(--esbd-white); padding: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: transform .2s;
}
.eusbd-header-logo:hover { transform: scale(1.05); }
.eusbd-header-title {
    font-family: var(--font-heading);
    font-size: 22px; font-weight: 600;
    margin: 0; line-height: 1.2;
    letter-spacing: .02em;
}
.eusbd-header-sub {
    font-size: 12px; color: var(--esbd-gold-light);
    margin: 2px 0 0; font-weight: 300;
    letter-spacing: .03em;
}
.eusbd-header-nav {
    display: flex; align-items: center; gap: 8px;
}
.eusbd-nav-btn {
    display: inline-block; padding: 8px 20px;
    border-radius: 9999px;
    border: 1px solid rgba(201,165,64,.4);
    background: transparent; color: var(--esbd-white);
    font-size: 13px; font-weight: 500;
    cursor: pointer; font-family: var(--font-body);
    transition: var(--esbd-transition);
    text-decoration: none;
    letter-spacing: .02em;
}
.eusbd-nav-btn:hover {
    background: rgba(201,165,64,.15);
    border-color: var(--esbd-gold);
}
.eusbd-nav-btn.active {
    background: var(--esbd-gold);
    color: var(--esbd-navy);
    border-color: var(--esbd-gold);
    font-weight: 600;
}

/* ═══ MAIN ═══ */
.eusbd-main {
    max-width: 1560px; margin: 0 auto;
    padding: 32px 28px;
}

/* ═══ CARDS ═══ */
.eusbd-card {
    background: var(--esbd-white);
    border-radius: var(--esbd-radius-xl);
    border: 1px solid var(--esbd-border);
    box-shadow: var(--esbd-shadow);
    overflow: hidden;
    transition: var(--esbd-transition);
}
.eusbd-card:hover { box-shadow: var(--esbd-shadow-lg); }
.eusbd-card-narrow { max-width: 920px; margin: 0 auto; }
.eusbd-card-header {
    padding: 24px 32px;
    border-bottom: 1px solid var(--esbd-border-light);
    background: linear-gradient(180deg, var(--esbd-cream) 0%, var(--esbd-white) 100%);
}
.eusbd-card-header h2, .eusbd-card-header h3 {
    font-family: var(--font-heading);
    font-size: 24px; font-weight: 600;
    margin: 0; color: var(--esbd-navy);
}
.eusbd-card-body { padding: 32px; }
.eusbd-subtitle {
    font-size: 14px; color: var(--esbd-text-muted);
    margin: 6px 0 0; font-weight: 300;
}

/* ═══ GRID ═══ */
.eusbd-grid-2 {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 20px 32px;
}
@media(max-width:768px){ .eusbd-grid-2 { grid-template-columns: 1fr; } }

/* ═══ FIELDS ═══ */
.eusbd-field { margin-bottom: 0; }
.eusbd-field label {
    display: block; font-size: 13px; font-weight: 500;
    color: var(--esbd-navy); margin-bottom: 6px;
    letter-spacing: .02em;
}
.eusbd-field label .req { color: var(--esbd-gold); font-weight: 700; }
.eusbd-field input[type="text"],
.eusbd-field input[type="email"],
.eusbd-field input[type="number"],
.eusbd-field input[type="file"],
.eusbd-field select,
.eusbd-field textarea {
    width: 100%; border-radius: var(--esbd-radius-sm);
    border: 1px solid var(--esbd-border);
    padding: 12px 16px; background: var(--esbd-white);
    font-size: 14px; font-family: var(--font-body);
    color: var(--esbd-text); outline: none;
    transition: var(--esbd-transition);
    -webkit-appearance: none; appearance: none;
}
.eusbd-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230A1E45' d='M6 8.825L.35 3.175l.7-.7L6 7.425l4.95-4.95.7.7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.eusbd-field input:focus,
.eusbd-field select:focus,
.eusbd-field textarea:focus {
    border-color: var(--esbd-gold);
    box-shadow: 0 0 0 3px var(--esbd-gold-glow);
}
.eusbd-field textarea { resize: vertical; min-height: 140px; }
.eusbd-full { margin-top: 20px; }

/* ═══ READ-ONLY ═══ */
.eusbd-ro { margin-bottom: 0; }
.eusbd-ro label {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--esbd-text-muted); margin-bottom: 4px;
    text-transform: uppercase; letter-spacing: .06em;
}
.eusbd-ro-box {
    border-radius: var(--esbd-radius-sm);
    border: 1px solid var(--esbd-border-light);
    background: var(--esbd-cream);
    padding: 10px 14px; font-size: 14px;
    color: var(--esbd-text); min-height: 42px;
}

/* ═══ BUTTONS ═══ */
.eusbd-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 12px 28px;
    border-radius: var(--esbd-radius-sm);
    background: linear-gradient(135deg, var(--esbd-navy) 0%, var(--esbd-navy-light) 100%);
    color: var(--esbd-white); font-weight: 600;
    font-size: 14px; border: none; cursor: pointer;
    font-family: var(--font-body);
    transition: var(--esbd-transition);
    letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(10,30,69,.2);
}
.eusbd-btn-primary:hover {
    background: linear-gradient(135deg, var(--esbd-navy-light) 0%, var(--esbd-navy) 100%);
    box-shadow: 0 4px 16px rgba(10,30,69,.3);
    transform: translateY(-1px);
}
.eusbd-btn-gold {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 12px 28px;
    border-radius: var(--esbd-radius-sm);
    background: linear-gradient(135deg, var(--esbd-gold) 0%, var(--esbd-gold-light) 100%);
    color: var(--esbd-navy); font-weight: 600;
    font-size: 14px; border: none; cursor: pointer;
    font-family: var(--font-body);
    transition: var(--esbd-transition);
    letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(201,165,64,.25);
}
.eusbd-btn-gold:hover {
    box-shadow: 0 4px 16px rgba(201,165,64,.4);
    transform: translateY(-1px);
}
.eusbd-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 20px;
    border-radius: var(--esbd-radius-sm);
    background: var(--esbd-white);
    color: var(--esbd-navy); font-size: 14px;
    border: 1px solid var(--esbd-border);
    cursor: pointer; font-family: var(--font-body);
    font-weight: 500;
    transition: var(--esbd-transition);
}
.eusbd-btn-secondary:hover {
    background: var(--esbd-cream);
    border-color: var(--esbd-gold);
}
.eusbd-actions {
    margin-top: 24px; display: flex;
    align-items: center; gap: 12px; flex-wrap: wrap;
}

/* ═══ MESSAGES ═══ */
.eusbd-message {
    padding: 16px 20px; border-radius: var(--esbd-radius);
    margin-bottom: 20px; font-size: 14px;
    display: flex; align-items: flex-start; gap: 10px;
}
.eusbd-message.success {
    background: var(--esbd-success-bg);
    border: 1px solid #A7F3D0;
    color: #047857;
}
.eusbd-message.error {
    background: var(--esbd-error-bg);
    border: 1px solid #FECACA;
    color: #B91C1C;
}
.eusbd-inline-msg { font-size: 14px; color: var(--esbd-success); }

/* ═══ SPINNER ═══ */
.eusbd-spinner {
    display: inline-block; width: 20px; height: 20px;
    border: 2px solid var(--esbd-border);
    border-top-color: var(--esbd-gold);
    border-radius: 50%;
    animation: eusbd-spin .6s linear infinite;
}
@keyframes eusbd-spin { to { transform: rotate(360deg); } }

/* ═══ STATUS RESULT ═══ */
.eusbd-status-result {
    margin-top: 28px; border-radius: var(--esbd-radius);
    border: 1px solid var(--esbd-border);
    padding: 24px; background: var(--esbd-white);
    animation: eusbd-fadeIn .3s ease;
}
.eusbd-status-result h3 {
    font-family: var(--font-heading);
    font-size: 20px; font-weight: 600;
    margin: 0 0 16px; color: var(--esbd-navy);
}

@keyframes eusbd-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══ WORKSPACE THREE-COLUMN GRID ═══ */
.eusbd-workspace-grid {
    display: grid;
    grid-template-columns: 5fr 4fr 3fr;
    gap: 24px; align-items: start;
}
@media(max-width:1200px){ .eusbd-workspace-grid { grid-template-columns: 1fr; } }

/* ═══ PANELS ═══ */
.eusbd-panel {
    background: var(--esbd-white);
    border-radius: var(--esbd-radius-lg);
    box-shadow: var(--esbd-shadow);
    border: 1px solid var(--esbd-border);
    overflow: hidden;
    transition: var(--esbd-transition);
}
.eusbd-panel:hover { box-shadow: var(--esbd-shadow-lg); }
.eusbd-panel-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--esbd-border-light);
    background: linear-gradient(180deg, var(--esbd-cream) 0%, var(--esbd-white) 100%);
}
.eusbd-panel-header h3 {
    font-family: var(--font-heading);
    font-weight: 600; margin: 0;
    color: var(--esbd-navy); font-size: 17px;
}
.eusbd-panel-body { padding: 22px; }
.eusbd-detail-grid { font-size: 14px; }
.eusbd-detail-grid .eusbd-field label { font-size: 12px; }
.eusbd-detail-grid .eusbd-field select { padding: 8px 12px; font-size: 14px; }
.eusbd-right-col { display: flex; flex-direction: column; gap: 24px; }

/* ═══ ACTIVITY ═══ */
.eusbd-muted { font-size: 12px; color: var(--esbd-text-muted); margin: 0 0 12px; }
.eusbd-activity-list {
    list-style: none; margin: 0; padding: 0;
    max-height: 700px; overflow-y: auto;
}
.eusbd-activity-item {
    padding: 14px 16px; border-radius: var(--esbd-radius);
    margin-bottom: 12px;
    animation: eusbd-fadeIn .3s ease;
}
.eusbd-activity-item:last-child { margin-bottom: 0; }
.eusbd-activity-email {
    border: 1px solid #BFD7ED; background: #F0F5FA;
    border-left: 3px solid var(--esbd-navy);
}
.eusbd-activity-comment {
    border: 1px solid #A7F3D0; background: var(--esbd-success-bg);
    border-left: 3px solid var(--esbd-success);
}
.eusbd-activity-note {
    border: 1px solid #FDE68A; background: var(--esbd-warning-bg);
    border-left: 3px solid var(--esbd-warning);
}
.eusbd-activity-system {
    border: 1px solid var(--esbd-border-light);
    background: var(--esbd-cream);
    border-left: 3px solid var(--esbd-border);
}
.eusbd-activity-meta {
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
}
.eusbd-activity-time {
    font-size: 12px; color: var(--esbd-text-muted);
}
.eusbd-activity-who {
    font-size: 11px; padding: 2px 10px;
    border-radius: 9999px; background: var(--esbd-white);
    border: 1px solid var(--esbd-border);
    color: var(--esbd-navy); font-weight: 500;
}
.eusbd-activity-text {
    margin: 8px 0 0; font-size: 14px;
    color: var(--esbd-text); line-height: 1.6;
}

/* ═══ COMPOSE ═══ */
.eusbd-compose-modes {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}
.eusbd-mode-btn {
    padding: 7px 16px; border-radius: 9999px;
    border: 1px solid var(--esbd-border);
    background: var(--esbd-white);
    color: var(--esbd-navy); font-size: 12px;
    cursor: pointer; font-family: var(--font-body);
    font-weight: 500;
    transition: var(--esbd-transition);
}
.eusbd-mode-btn.active, .eusbd-mode-btn:hover {
    background: var(--esbd-navy);
    color: var(--esbd-white);
    border-color: var(--esbd-navy);
}
#eusbd-compose-text {
    width: 100%; border-radius: var(--esbd-radius-sm);
    border: 1px solid var(--esbd-border);
    padding: 14px 16px; font-size: 14px;
    font-family: var(--font-body);
    resize: vertical; min-height: 180px;
    outline: none; color: var(--esbd-text);
}
#eusbd-compose-text:focus {
    border-color: var(--esbd-gold);
    box-shadow: 0 0 0 3px var(--esbd-gold-glow);
}
.eusbd-record-info { display: flex; flex-direction: column; gap: 12px; }
.eusbd-record-info .eusbd-ro-box { padding: 8px 12px; font-size: 14px; }

/* ═══ ADMIN WRAP ═══ */
.eusbd-admin-wrap {
    font-family: var(--font-body);
    color: var(--esbd-text); max-width: 1200px;
}
.eusbd-admin-wrap .eusbd-field input,
.eusbd-admin-wrap .eusbd-field select { max-width: 100%; }

@media(max-width:640px){
    .eusbd-card-body { padding: 20px; }
    .eusbd-card-header { padding: 16px 20px; }
    .eusbd-header-inner { padding: 12px 16px; }
    .eusbd-main { padding: 20px 16px; }
}

/* ═══ COMPREHENSIVE MOBILE RESPONSIVE ═══ */

/* Header: stack on small screens */
@media(max-width:768px){
    .eusbd-header-inner {
        flex-direction: column; align-items: flex-start; gap: 12px;
    }
    .eusbd-header-nav {
        flex-wrap: wrap; width: 100%; gap: 6px;
    }
    .eusbd-header-title { font-size: 18px; }
    .eusbd-header-logo { height: 40px; width: 40px; }
    .eusbd-nav-btn { padding: 6px 14px; font-size: 12px; }
}

/* Wizard steps: compact on mobile */
@media(max-width:600px){
    .eusbd-wizard-steps { gap: 0; padding: 0; }
    .eusbd-wizard-step span:not(.eusbd-ws-num) { display: none; }
    .eusbd-ws-connector { width: 24px; margin: 0 4px; }
    .eusbd-ws-num { width: 36px; height: 36px; font-size: 14px; }
}

/* Greeting banner */
@media(max-width:640px){
    .eusbd-greeting-banner { padding: 20px 20px; }
    .eusbd-greeting-banner h2 { font-size: 22px; }
}

/* Filter bar: stack on mobile */
@media(max-width:768px){
    .eusbd-filters-bar {
        flex-direction: column; align-items: stretch;
    }
    .eusbd-filter-select { width: 100%; }
    .eusbd-filter-search { min-width: 100%; }
    .eusbd-filter-actions { width: 100%; }
    .eusbd-filter-actions .eusbd-btn-secondary { flex: 1; text-align: center; }
}

/* Table: horizontal scroll with readable min-widths */
@media(max-width:900px){
    .eusbd-table { min-width: 700px; }
    .eusbd-table th, .eusbd-table td { padding: 10px 8px; font-size: 12px; }
}

/* Touch targets: ensure ≥44px on mobile */
@media(max-width:768px){
    .eusbd-field input[type="text"],
    .eusbd-field input[type="email"],
    .eusbd-field input[type="number"],
    .eusbd-field select,
    .eusbd-field textarea {
        padding: 14px 16px; font-size: 16px; /* 16px prevents iOS zoom */
    }
    .eusbd-btn-primary, .eusbd-btn-gold, .eusbd-btn-secondary {
        padding: 14px 24px; font-size: 15px; min-height: 48px;
    }
    .eusbd-detail-grid .eusbd-field select {
        padding: 12px 14px; font-size: 15px; min-height: 44px;
    }
    .eusbd-mode-btn { padding: 10px 14px; font-size: 13px; }
}

/* Login card: full-width on mobile */
@media(max-width:500px){
    .eusbd-login-card {
        max-width: 100%; padding: 32px 24px;
        border-radius: var(--esbd-radius-lg);
    }
    .eusbd-login-title { font-size: 24px; }
}

/* Pagination: stack on mobile */
@media(max-width:600px){
    .eusbd-pagination {
        flex-direction: column; align-items: center; text-align: center;
    }
    .eusbd-page-link { padding: 10px 16px; }
}

/* Actions: full-width buttons on small screens */
@media(max-width:480px){
    .eusbd-actions {
        flex-direction: column;
    }
    .eusbd-actions .eusbd-btn-primary,
    .eusbd-actions .eusbd-btn-gold,
    .eusbd-actions .eusbd-btn-secondary {
        width: 100%; text-align: center; justify-content: center;
    }
}

/* Footer */
@media(max-width:640px){
    .eusbd-footer { padding: 24px 16px; font-size: 11px; }
}

/* Compose section: full width textarea */
@media(max-width:768px){
    #eusbd-compose-text { min-height: 140px; font-size: 15px; }
    .eusbd-email-field-row { flex-wrap: wrap; }
    .eusbd-compose-hint { font-size: 11px; }
}

/* Workspace 3-col grid: stack properly */
@media(max-width:1200px){
    .eusbd-workspace-grid {
        grid-template-columns: 1fr; gap: 20px;
    }
}

/* Analytics: single column earlier */
@media(max-width:700px){
    .eusbd-analytics-grid { grid-template-columns: 1fr; gap: 16px; }
    .eusbd-hbar-label { min-width: 70px; font-size: 11px; }
}

/* Record info on mobile */
@media(max-width:768px){
    .eusbd-record-info .eusbd-ro-box { font-size: 13px; }
}

/* Status result card */
@media(max-width:640px){
    .eusbd-status-result { padding: 20px 16px; }
}

/* Important items label */
@media(max-width:640px){
    .eusbd-important-label { font-size: 18px; }
}

/* ═══ DASHBOARD: Greeting banner ═══ */
.eusbd-greeting-banner {
    background: linear-gradient(135deg, var(--esbd-navy) 0%, var(--esbd-navy-light) 100%);
    border-radius: var(--esbd-radius-xl);
    padding: 32px 36px; margin-bottom: 28px;
    color: var(--esbd-white);
    position: relative; overflow: hidden;
}
.eusbd-greeting-banner::after {
    content: '';
    position: absolute; top: -40px; right: -20px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, var(--esbd-gold-glow) 0%, transparent 70%);
    border-radius: 50%;
}
.eusbd-greeting-banner h2 {
    font-family: var(--font-heading);
    font-size: 28px; font-weight: 600;
    margin: 0 0 4px; position: relative;
}
.eusbd-greeting-banner h2 span { color: var(--esbd-gold-light); }
.eusbd-greeting-banner p {
    font-size: 14px; color: rgba(255,255,255,.7);
    margin: 0; font-weight: 300;
    position: relative;
}

/* ═══ DASHBOARD: Important Items ═══ */
.eusbd-important-label {
    font-family: var(--font-heading);
    font-size: 20px; font-weight: 600;
    color: var(--esbd-navy); margin: 0 0 4px;
}
.eusbd-important-sub {
    font-size: 13px; color: var(--esbd-text-muted);
    margin: 0 0 16px;
}

/* ═══ DASHBOARD: Filters bar ═══ */
.eusbd-filters-bar {
    display: flex; align-items: center;
    gap: 10px; flex-wrap: wrap; margin-bottom: 24px;
    background: var(--esbd-white);
    padding: 16px 20px;
    border-radius: var(--esbd-radius);
    border: 1px solid var(--esbd-border);
    box-shadow: var(--esbd-shadow-sm);
}
.eusbd-filter-select {
    border-radius: var(--esbd-radius-sm);
    border: 1px solid var(--esbd-border);
    padding: 9px 32px 9px 12px; font-size: 13px;
    font-family: var(--font-body);
    color: var(--esbd-text); background: var(--esbd-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230A1E45' d='M6 8.825L.35 3.175l.7-.7L6 7.425l4.95-4.95.7.7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    -webkit-appearance: none; appearance: none; outline: none;
    transition: var(--esbd-transition);
}
.eusbd-filter-select:focus {
    border-color: var(--esbd-gold);
    box-shadow: 0 0 0 3px var(--esbd-gold-glow);
}
.eusbd-filter-search { flex: 1; min-width: 200px; }
.eusbd-filter-search input {
    width: 100%; border-radius: var(--esbd-radius-sm);
    border: 1px solid var(--esbd-border);
    padding: 9px 14px 9px 36px;
    font-size: 13px; font-family: var(--font-body);
    color: var(--esbd-text); outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239CA3AF' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.867-3.834zm-5.44.856a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    transition: var(--esbd-transition);
}
.eusbd-filter-search input:focus {
    border-color: var(--esbd-gold);
    box-shadow: 0 0 0 3px var(--esbd-gold-glow);
}
.eusbd-filter-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ═══ DASHBOARD: Stats row ═══ */
.eusbd-stats-row {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 14px; margin-bottom: 28px;
}
@media(max-width:1100px){ .eusbd-stats-row { grid-template-columns: repeat(3, 1fr); } }
@media(max-width:600px){ .eusbd-stats-row { grid-template-columns: repeat(2, 1fr); } }
.eusbd-stat-card {
    background: var(--esbd-white);
    border: 1px solid var(--esbd-border);
    border-radius: var(--esbd-radius);
    padding: 20px 18px; text-align: center;
    box-shadow: var(--esbd-shadow-sm);
    border-top: 3px solid var(--esbd-border);
    transition: var(--esbd-transition);
    cursor: default;
}
.eusbd-stat-card:hover {
    box-shadow: var(--esbd-shadow);
    transform: translateY(-2px);
}
.eusbd-stat-number {
    font-family: var(--font-heading);
    font-size: 36px; font-weight: 700;
    color: var(--esbd-navy); line-height: 1;
}
.eusbd-stat-label {
    font-size: 11px; color: var(--esbd-text-muted);
    margin-top: 6px; text-transform: uppercase;
    letter-spacing: .06em; font-weight: 600;
}
.eusbd-stat-open { border-top-color: var(--esbd-info); }
.eusbd-stat-open .eusbd-stat-number { color: var(--esbd-info); }
.eusbd-stat-pending { border-top-color: var(--esbd-warning); }
.eusbd-stat-pending .eusbd-stat-number { color: var(--esbd-warning); }
.eusbd-stat-resolved { border-top-color: var(--esbd-success); }
.eusbd-stat-resolved .eusbd-stat-number { color: var(--esbd-success); }
.eusbd-stat-sla { border-top-color: var(--esbd-error); }
.eusbd-stat-sla .eusbd-stat-number { color: var(--esbd-error); }
.eusbd-stat-attention { border-top-color: #F59E0B; }
.eusbd-stat-attention .eusbd-stat-number { color: #D97706; }
.eusbd-stat-total { border-top-color: var(--esbd-gold); }
.eusbd-stat-total .eusbd-stat-number { color: var(--esbd-navy); }

/* ═══ DASHBOARD: Table ═══ */
.eusbd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.eusbd-table thead { background: var(--esbd-cream); }
.eusbd-table th {
    padding: 12px 14px; text-align: left;
    font-weight: 600; color: var(--esbd-navy);
    border-bottom: 2px solid var(--esbd-border);
    font-size: 11px; text-transform: uppercase;
    letter-spacing: .06em; white-space: nowrap;
}
.eusbd-table td {
    padding: 14px; border-bottom: 1px solid var(--esbd-border-light);
    color: var(--esbd-text); vertical-align: middle;
}
.eusbd-table-row-link {
    cursor: pointer; transition: var(--esbd-transition);
}
.eusbd-table-row-link:hover {
    background: var(--esbd-gold-glow);
}
.eusbd-badge {
    display: inline-block; padding: 3px 12px;
    border-radius: 9999px; font-size: 11px;
    font-weight: 600; white-space: nowrap;
    letter-spacing: .02em;
}
.eusbd-badge-open { background: #DBEAFE; color: #1E40AF; }
.eusbd-badge-pending { background: #FEF3C7; color: #92400E; }
.eusbd-badge-on-hold { background: #F3F4F6; color: #4B5563; }
.eusbd-badge-resolved { background: #D1FAE5; color: #065F46; }
.eusbd-badge-closed { background: #F3F4F6; color: #6B7280; }
.eusbd-badge-low { background: #F3F4F6; color: #4B5563; }
.eusbd-badge-moderate { background: #FEF3C7; color: #92400E; }
.eusbd-badge-high { background: #FED7AA; color: #9A3412; }
.eusbd-badge-urgent { background: #FECACA; color: #991B1B; }
.eusbd-badge-needs-attention {
    background: #FEF3C7; color: #B45309;
    border: 1px solid #F59E0B;
}
.eusbd-badge-blocked {
    background: #FECACA; color: #991B1B;
    border: 1px solid #EF4444;
}
.eusbd-sla-ok {
    color: var(--esbd-success); font-size: 12px;
    font-weight: 600; display: flex; align-items: center; gap: 4px;
}
.eusbd-sla-ok::before {
    content: ''; width: 6px; height: 6px;
    border-radius: 50%; background: var(--esbd-success);
}
.eusbd-sla-breach {
    color: var(--esbd-error); font-size: 12px;
    font-weight: 600; display: flex; align-items: center; gap: 4px;
}
.eusbd-sla-breach::before {
    content: ''; width: 6px; height: 6px;
    border-radius: 50%; background: var(--esbd-error);
    animation: eusbd-pulse 1.5s ease infinite;
}
@keyframes eusbd-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

/* ═══ LOGIN PAGE ═══ */
.eusbd-login-card {
    width: 100%; max-width: 460px;
    background: var(--esbd-white);
    border-radius: var(--esbd-radius-xl);
    border: 1px solid var(--esbd-border);
    box-shadow: var(--esbd-shadow-xl);
    padding: 44px 40px;
    text-align: center;
    animation: eusbd-fadeIn .4s ease;
}
.eusbd-login-logo { margin-bottom: 24px; }
.eusbd-login-logo img {
    width: 80px; height: 80px;
    border-radius: 18px; object-fit: cover;
    box-shadow: var(--esbd-shadow-lg);
    border: 3px solid var(--esbd-gold-pale);
}
.eusbd-login-title {
    font-family: var(--font-heading);
    font-size: 28px; font-weight: 700;
    color: var(--esbd-navy); margin: 0 0 6px;
}
.eusbd-login-sub {
    font-size: 14px; color: var(--esbd-text-muted);
    margin: 0 0 28px; font-weight: 300;
}
.eusbd-login-card .eusbd-field { text-align: left; }
.eusbd-login-card .eusbd-field label {
    font-size: 13px; font-weight: 600;
    color: var(--esbd-navy); margin-bottom: 6px;
}
.eusbd-login-card .eusbd-field input[type="text"],
.eusbd-login-card .eusbd-field input[type="password"] {
    padding: 14px 16px; font-size: 15px;
    border-radius: var(--esbd-radius-sm);
}

/* Sign out link in header */
.eusbd-header-user {
    font-size: 13px; color: var(--esbd-gold-light);
    padding: 0 4px; font-weight: 400;
}
.eusbd-nav-btn-logout {
    border-color: rgba(255,255,255,.2) !important;
    font-size: 12px !important;
    padding: 6px 14px !important;
    opacity: .8;
}
.eusbd-nav-btn-logout:hover {
    opacity: 1;
    background: rgba(220,38,38,.2) !important;
    border-color: rgba(220,38,38,.4) !important;
}

/* ═══ PAGINATION ═══ */
.eusbd-pagination {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-top: 20px; flex-wrap: wrap; gap: 12px;
}
.eusbd-pagination-info {
    font-size: 13px; color: var(--esbd-text-muted);
}
.eusbd-pagination-links { display: flex; gap: 4px; }
.eusbd-page-link {
    display: inline-block; padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--esbd-border);
    background: var(--esbd-white);
    color: var(--esbd-navy); text-decoration: none;
    font-size: 14px; transition: var(--esbd-transition);
}
.eusbd-page-link.active, .eusbd-page-link:hover {
    background: var(--esbd-navy);
    color: var(--esbd-white);
    border-color: var(--esbd-navy);
}

/* ═══ COMPOSE ATTACHMENT ═══ */
.eusbd-compose-attachment { margin-top: 10px; margin-bottom: 4px; }
.eusbd-file-label {
    font-size: 13px; color: var(--esbd-text-light); padding: 6px 0;
}
.eusbd-file-label.has-file {
    color: var(--esbd-navy); font-weight: 500;
}
.eusbd-compose-hint {
    font-size: 12px; color: var(--esbd-text-light);
    margin-top: 10px; margin-bottom: 0;
    padding: 10px 14px;
    background: var(--esbd-cream);
    border-radius: var(--esbd-radius-sm);
    border: 1px solid var(--esbd-border-light);
}

/* ═══ EMAIL TEMPLATE IN COMPOSE ═══ */
.eusbd-email-template {
    background: var(--esbd-cream);
    border: 1px solid var(--esbd-border);
    border-radius: var(--esbd-radius);
    margin-bottom: 8px; overflow: hidden;
}
.eusbd-email-header-bar {
    background: linear-gradient(135deg, var(--esbd-navy) 0%, var(--esbd-navy-light) 100%);
    padding: 10px 16px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 2px solid var(--esbd-gold);
}
.eusbd-email-logo {
    width: 28px; height: 28px;
    border-radius: 6px; object-fit: cover;
    background: var(--esbd-white); padding: 1px;
}
.eusbd-email-brand {
    color: var(--esbd-white); font-size: 13px;
    font-weight: 600; letter-spacing: .03em;
    font-family: var(--font-heading);
}
.eusbd-email-fields {
    padding: 10px 16px;
    border-bottom: 1px solid var(--esbd-border-light);
}
.eusbd-email-field-row {
    display: flex; align-items: center;
    gap: 8px; padding: 3px 0; font-size: 12px;
}
.eusbd-email-label {
    color: var(--esbd-text-muted); font-weight: 600;
    min-width: 52px; text-transform: uppercase;
    font-size: 10px; letter-spacing: .05em;
}
.eusbd-email-value {
    color: var(--esbd-text); font-size: 12px;
    word-break: break-all;
}
.eusbd-email-greeting {
    padding: 10px 16px 6px;
    font-size: 13px; color: var(--esbd-navy);
}

.eusbd-email-signature {
    background: var(--esbd-cream);
    border: 1px solid var(--esbd-border-light);
    border-radius: var(--esbd-radius-sm);
    padding: 12px 16px; margin-top: 8px;
}
.eusbd-email-signature p {
    margin: 0; font-size: 13px;
    color: var(--esbd-navy); line-height: 1.5;
}

/* ═══ ANALYTICS GRID ═══ */
.eusbd-analytics-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 20px; margin-top: 28px;
}
@media(max-width:900px){ .eusbd-analytics-grid { grid-template-columns: 1fr; } }

/* Vertical bar chart */
.eusbd-bar-chart {
    display: flex; align-items: flex-end;
    gap: 8px; height: 160px; padding-top: 8px;
}
.eusbd-bar-col {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; height: 100%;
}
.eusbd-bar-value {
    font-size: 12px; font-weight: 700;
    color: var(--esbd-navy); margin-bottom: 4px;
}
.eusbd-bar-track {
    flex: 1; width: 100%; max-width: 40px;
    background: var(--esbd-cream); border-radius: 8px 8px 0 0;
    position: relative; overflow: hidden;
    display: flex; align-items: flex-end;
}
.eusbd-bar-fill {
    width: 100%; border-radius: 8px 8px 0 0;
    transition: height .6s cubic-bezier(.4,0,.2,1);
    min-height: 3px;
    background: linear-gradient(180deg, var(--esbd-gold) 0%, var(--esbd-gold-light) 100%) !important;
}
.eusbd-bar-label {
    font-size: 11px; color: var(--esbd-text-muted);
    margin-top: 6px; font-weight: 600;
}

/* Horizontal bar chart */
.eusbd-horiz-bars { display: flex; flex-direction: column; gap: 10px; }
.eusbd-hbar-row { display: flex; align-items: center; gap: 10px; }
.eusbd-hbar-label {
    font-size: 12px; color: var(--esbd-navy);
    min-width: 90px; font-weight: 500; text-align: right;
}
.eusbd-hbar-track {
    flex: 1; height: 22px;
    background: var(--esbd-cream);
    border-radius: 11px; overflow: hidden;
}
.eusbd-hbar-fill {
    height: 100%; border-radius: 11px;
    transition: width .6s cubic-bezier(.4,0,.2,1);
    min-width: 4px;
}
.eusbd-hbar-value {
    font-size: 13px; font-weight: 700;
    color: var(--esbd-navy); min-width: 28px;
}

/* Priority legend */
.eusbd-priority-donut {
    display: flex; flex-direction: column;
    gap: 14px; padding: 8px 0;
}
.eusbd-donut-item { display: flex; align-items: center; gap: 10px; }
.eusbd-donut-dot {
    width: 14px; height: 14px;
    border-radius: 4px; flex-shrink: 0;
}
.eusbd-donut-label {
    font-size: 14px; color: var(--esbd-navy); flex: 1;
}
.eusbd-donut-value {
    font-family: var(--font-heading);
    font-size: 20px; font-weight: 700;
    color: var(--esbd-navy);
}

/* ═══ FOOTER ═══ */
.eusbd-footer {
    text-align: center;
    padding: 32px 28px;
    font-size: 12px;
    color: var(--esbd-text-muted);
    border-top: 1px solid var(--esbd-border-light);
    margin-top: 40px;
}
.eusbd-footer a {
    color: var(--esbd-gold);
    text-decoration: none;
    font-weight: 500;
}
.eusbd-footer a:hover { text-decoration: underline; }

/* ═══ EMBEDDABLE WIDGET ═══ */
.eusbd-widget-trigger {
    position: fixed; bottom: 28px; right: 28px;
    z-index: 9999;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--esbd-navy) 0%, var(--esbd-navy-light) 100%);
    color: var(--esbd-white);
    border: 3px solid var(--esbd-gold);
    cursor: pointer;
    box-shadow: var(--esbd-shadow-xl);
    display: flex; align-items: center; justify-content: center;
    transition: var(--esbd-transition);
    font-size: 24px;
}
.eusbd-widget-trigger:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 32px rgba(10,30,69,.3);
}
.eusbd-widget-trigger .eusbd-wt-label {
    position: absolute; right: 70px;
    background: var(--esbd-navy); color: var(--esbd-white);
    padding: 6px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--esbd-shadow);
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
    font-family: var(--font-body);
}
.eusbd-widget-trigger:hover .eusbd-wt-label { opacity: 1; }

.eusbd-widget-popup {
    position: fixed; bottom: 100px; right: 28px;
    z-index: 9998;
    width: 420px; max-height: 80vh;
    background: var(--esbd-white);
    border-radius: var(--esbd-radius-xl);
    border: 1px solid var(--esbd-border);
    box-shadow: var(--esbd-shadow-xl);
    overflow: hidden;
    display: none;
    animation: eusbd-slideUp .3s ease;
}
.eusbd-widget-popup.open { display: block; }
@keyframes eusbd-slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.eusbd-widget-popup-header {
    background: linear-gradient(135deg, var(--esbd-navy) 0%, var(--esbd-navy-light) 100%);
    padding: 18px 22px;
    border-bottom: 2px solid var(--esbd-gold);
    display: flex; align-items: center; justify-content: space-between;
}
.eusbd-widget-popup-header h3 {
    font-family: var(--font-heading);
    color: var(--esbd-white); font-size: 18px;
    font-weight: 600; margin: 0;
}
.eusbd-widget-close {
    background: none; border: none;
    color: rgba(255,255,255,.7); font-size: 22px;
    cursor: pointer; padding: 0; line-height: 1;
    transition: color .2s;
}
.eusbd-widget-close:hover { color: var(--esbd-white); }
.eusbd-widget-popup-body {
    padding: 22px; max-height: 60vh;
    overflow-y: auto;
}

@media(max-width:480px){
    .eusbd-widget-popup {
        width: calc(100vw - 24px);
        right: 12px; bottom: 88px;
    }
}

/* ═══ TABS (for workspace sections) ═══ */
.eusbd-tabs {
    display: flex; gap: 0; margin-bottom: 24px;
    border-bottom: 2px solid var(--esbd-border);
}
.eusbd-tab {
    padding: 10px 22px; font-size: 14px;
    font-weight: 500; color: var(--esbd-text-muted);
    cursor: pointer; border: none; background: none;
    font-family: var(--font-body);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: var(--esbd-transition);
}
.eusbd-tab:hover { color: var(--esbd-navy); }
.eusbd-tab.active {
    color: var(--esbd-navy);
    border-bottom-color: var(--esbd-gold);
    font-weight: 600;
}
.eusbd-tab-panel { display: none; }
.eusbd-tab-panel.active { display: block; animation: eusbd-fadeIn .3s ease; }

/* ═══ FORM WIZARD STEPS (submit page) ═══ */
.eusbd-wizard-steps {
    display: flex; align-items: center;
    justify-content: center; gap: 0;
    margin-bottom: 32px; padding: 0 20px;
}
.eusbd-wizard-step {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500;
    color: var(--esbd-text-light);
    transition: var(--esbd-transition);
}
.eusbd-wizard-step.active { color: var(--esbd-navy); }
.eusbd-wizard-step.active .eusbd-ws-num {
    background: var(--esbd-gold);
    color: var(--esbd-navy);
    border-color: var(--esbd-gold);
}
.eusbd-wizard-step.completed .eusbd-ws-num {
    background: var(--esbd-success);
    color: var(--esbd-white);
    border-color: var(--esbd-success);
}
.eusbd-wizard-step.completed { color: var(--esbd-success); }
.eusbd-ws-num {
    width: 30px; height: 30px;
    border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    border: 2px solid var(--esbd-border);
    font-weight: 700; font-size: 13px;
    flex-shrink: 0;
    transition: var(--esbd-transition);
}
.eusbd-ws-connector {
    width: 40px; height: 2px;
    background: var(--esbd-border);
    margin: 0 8px;
    transition: var(--esbd-transition);
}
.eusbd-ws-connector.active { background: var(--esbd-gold); }

/* ═══ QUICK ACTIONS ═══ */
.eusbd-quick-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--esbd-border-light);
}
.eusbd-quick-btn {
    padding: 6px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 500;
    border: 1px solid var(--esbd-border);
    background: var(--esbd-white);
    color: var(--esbd-navy);
    cursor: pointer; font-family: var(--font-body);
    transition: var(--esbd-transition);
}
.eusbd-quick-btn:hover {
    background: var(--esbd-gold-glow);
    border-color: var(--esbd-gold);
}
.eusbd-quick-btn.resolve {
    background: var(--esbd-success-bg);
    border-color: var(--esbd-success);
    color: var(--esbd-success);
}
.eusbd-quick-btn.resolve:hover { background: #D1FAE5; }
.eusbd-quick-btn.escalate {
    background: var(--esbd-error-bg);
    border-color: var(--esbd-error);
    color: var(--esbd-error);
}
.eusbd-quick-btn.escalate:hover { background: #FECACA; }