/* ============================================================================
   desolabs.css — DesoLabs Design System
   Single CSS file. Loaded AFTER tailwind + app.css.
   Tag+class selectors for specificity over Tailwind Preflight.
   ============================================================================ */

/* === PREFLIGHT FIX === */
svg { display: inline; }

/* === LAYOUT === */
div.dl-shell { display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; }
div.dl-right-col { flex:1; display:flex; flex-direction:column; min-width:0; }
main.dl-main { flex:1; overflow:auto; padding:2rem; min-height:0; }
main.dl-main-lg { flex:1; padding:32px; overflow-y:auto; min-height:0; }
.dl-spacer { flex:1; }
.dl-relative { position:relative; }
.dl-body { height:100vh; height:100dvh; }

/* === TOPBAR === */
header.dl-topbar { display:flex; align-items:center; padding:0 16px; height:40px; flex-shrink:0; background:#0a0f1a; border-bottom:1px solid #1e293b; font-size:13px; flex-wrap:nowrap; overflow:hidden; }
header.dl-admin-header { display:flex; align-items:center; justify-content:flex-end; padding:0 24px; height:40px; flex-shrink:0; background:#0a0f1a; border-bottom:1px solid #1e293b; font-size:13px; flex-wrap:nowrap; overflow:visible; }
a.dl-brand { color:#e2e8f0; font-weight:700; font-size:14px; text-decoration:none; margin-right:8px; letter-spacing:-0.02em; }
span.dl-sep { color:#1e293b; margin:0 12px; font-size:16px; }
span.dl-sep-wide { color:#1e293b; margin:0 12px; margin-right:16px; font-size:16px; }
span.dl-version { color:#475569; font-size:11px; margin-right:12px; }
span.dl-version-mono { color:#475569; font-size:11px; margin-right:12px; font-family:monospace; }

/* === NAV LINKS === */
a.dl-nav { display:flex; align-items:center; gap:6px; color:#64748b; text-decoration:none; padding:5px 10px; border-radius:4px; margin-right:4px; }
a.dl-nav:hover { color:#94a3b8; }
a.dl-nav.active { color:#e2e8f0; background:rgba(99,102,241,0.12); }

/* === USER DROPDOWN === */
button.dl-user-trigger { display:flex; align-items:center; gap:4px; background:none; border:none; cursor:pointer; color:#94a3b8; font-size:12px; padding:4px 8px; border-radius:4px; }
button.dl-user-trigger:hover { color:#e2e8f0; }
div.dl-user-menu { position:absolute; right:0; top:100%; margin-top:4px; width:200px; background:#1e293b; border:1px solid #334155; border-radius:8px; box-shadow:0 25px 50px rgba(0,0,0,0.5); z-index:50; padding:4px 0; }
.dl-user-menu-head { padding:8px 12px; border-bottom:1px solid #334155; }
.dl-user-menu-label { font-size:11px; color:#64748b; }
.dl-user-menu-name { font-size:13px; color:#e2e8f0; font-weight:500; }
.dl-user-menu-client { font-size:11px; color:#a78bfa; margin-top:2px; }
button.dl-menu-item { width:100%; text-align:left; padding:8px 12px; font-size:13px; color:#cbd5e1; background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:8px; }
button.dl-menu-item:hover { background:#0f172a; }
button.dl-menu-item.danger { color:#f87171; }

/* === ROLE BADGES === */
.dl-role-switch { display:flex; gap:4px; margin-right:12px; }
a.dl-role-badge { font-size:10px; padding:2px 6px; text-decoration:none; }
a.dl-role-badge.dim { opacity:0.5; }
span.dl-client-badge { font-size:10px; padding:2px 6px; background:rgba(168,85,247,0.15); color:#c084fc; border:1px solid rgba(168,85,247,0.3); border-radius:4px; }

/* === MODAL === */
div.dl-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:50; display:flex; align-items:center; justify-content:center; }
div.dl-modal-box { background:#1e293b; border:1px solid #334155; border-radius:12px; padding:24px; width:28rem; max-width:90vw; max-height:90vh; overflow-y:auto; box-shadow:0 25px 50px rgba(0,0,0,0.5); }
.dl-modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid #334155; }
.dl-modal-title { font-size:16px; font-weight:600; color:#fff; }
button.dl-modal-close { color:#94a3b8; background:none; border:none; cursor:pointer; }
.dl-alert { margin-bottom:12px; padding:8px; border-radius:6px; font-size:14px; }
.dl-pw-section { margin-top:20px; padding-top:16px; border-top:1px solid #334155; }
.dl-pw-title { font-size:14px; font-weight:500; color:#fff; margin-bottom:12px; }

/* === FORM === */
label.dl-label { font-size:12px; color:#64748b; display:block; margin-bottom:4px; }
input.dl-input, select.dl-input, textarea.dl-input { width:100%; background:#0f172a; border:1px solid #334155; border-radius:6px; padding:8px 12px; font-size:14px; color:#e2e8f0; outline:none; }
input.dl-input:focus, select.dl-input:focus { border-color:#2563eb; }
.dl-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dl-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.dl-stack { display:flex; flex-direction:column; gap:12px; }
.dl-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.dl-actions-sm { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
/* Unified button system — icon+text, compact, dark */
.dl-btn, button.dl-btn, a.dl-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:6px; border:1px solid #1e293b;
  background:#0c1220; color:#94a3b8; font-size:12px; font-family:inherit;
  cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0;
  text-decoration:none; line-height:1.4;
}
.dl-btn:hover { background:#111827; color:#e2e8f0; border-color:#334155; }
.dl-btn:disabled { opacity:0.5; cursor:not-allowed; }
.dl-btn.primary { background:#0c1a2e; color:#60a5fa; border-color:#1e3a5f; }
.dl-btn.primary:hover { background:#0f2440; color:#93bbfd; }
.dl-btn.success { background:#031a09; color:#4ade80; border-color:#14532d; }
.dl-btn.success:hover { background:#052e16; }
.dl-btn.danger { background:#1a0505; color:#f87171; border-color:#7f1d1d; }
.dl-btn.danger:hover { background:#2d0a0a; }
.dl-btn.ghost { background:transparent; border-color:#334155; }
.dl-btn.ghost:hover { background:#111827; color:#e2e8f0; }
.dl-btn svg { flex-shrink:0; }
/* Legacy compat — keep old classes working during migration */
button.dl-btn-ghost { padding:5px 12px; font-size:12px; color:#94a3b8; border:1px solid #334155; border-radius:6px; background:transparent; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:all 0.15s; }
button.dl-btn-ghost:hover { color:#e2e8f0; background:#111827; }
button.dl-btn-primary { padding:5px 12px; font-size:12px; color:#60a5fa; background:#0c1a2e; border:1px solid #1e3a5f; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:all 0.15s; }
button.dl-btn-primary:hover { background:#0f2440; color:#93bbfd; }
button.dl-btn-bare { background:none; border:none; cursor:pointer; }

/* === ICONS === */
svg.icon-xs { width:12px; height:12px; }
svg.icon-sm { width:14px; height:14px; }
svg.icon-md { width:16px; height:16px; }
svg.icon-lg { width:20px; height:20px; }
svg.icon-xl { width:24px; height:24px; }
svg.icon-2xl { width:40px; height:40px; }

/* === CONTEXT MENU === */
.dl-ctx { position:relative; }
button.dl-ctx-trigger { background:none; border:none; cursor:pointer; padding:4px 8px; font-size:18px; color:#94a3b8; line-height:1; }
div.dl-ctx-menu { position:absolute; right:0; z-index:100; min-width:180px; background:#283347; border:1px solid rgba(255,255,255,0.15); border-radius:8px; box-shadow:0 12px 32px rgba(0,0,0,0.6),0 0 0 1px rgba(0,0,0,0.3); padding:6px; font-size:13px; }
button.dl-ctx-item, a.dl-ctx-item { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px 10px; background:none; border:none; color:#e2e8f0; cursor:pointer; border-radius:5px; font-size:13px; text-decoration:none; white-space:nowrap; }
button.dl-ctx-item:hover, a.dl-ctx-item:hover { background:rgba(255,255,255,0.08); }
button.dl-ctx-item.primary, a.dl-ctx-item.primary { color:#60a5fa; }
button.dl-ctx-item.danger, a.dl-ctx-item.danger { color:#f87171; }
button.dl-ctx-item.danger:hover, a.dl-ctx-item.danger:hover { background:rgba(248,113,113,0.1); }
.dl-ctx-divider { height:1px; background:rgba(255,255,255,0.08); margin:4px 2px; }

/* === TOAST === */
.dl-toast { position:fixed; bottom:24px; right:24px; z-index:100; padding:10px 20px; border-radius:8px; font-size:14px; }

/* === SEARCH & FILTER === */
.dl-search-sm { max-width:320px; }
.dl-search-md { max-width:360px; }
.dl-search-lg { max-width:400px; }
.dl-filter-sm { width:120px; }
.dl-filter-md { width:150px; }
.dl-filter-lg { width:160px; }
.dl-filter-xl { width:180px; }

/* === DROPDOWN === */
.dl-dropdown-wrap { position:relative; }
div.dl-dropdown { position:absolute; top:100%; left:0; right:0; max-height:200px; overflow-y:auto; background:#0f172a; border:1px solid #334155; border-radius:6px; z-index:20; }
.dl-dropdown-item { padding:6px 12px; cursor:pointer; font-size:12px; color:#94a3b8; }
.dl-dropdown-item.active { color:#e2e8f0; }
.dl-dropdown-item:hover { background:rgba(255,255,255,0.04); }

/* === STATS GRIDS === */
.dl-stats-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.dl-stats-7 { display:grid; grid-template-columns:repeat(7,1fr); gap:12px; margin-bottom:24px; }
.dl-grid-2col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dl-grid-2col-sm { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dl-grid-2fr1fr { display:grid; grid-template-columns:2fr 1fr; gap:16px; }
.dl-grid-1-2-2 { display:grid; grid-template-columns:1fr 2fr 2fr; gap:12px; }

/* === CARDS & CONTAINERS === */
.dl-card-tight { padding:14px 18px; }
.dl-card-normal { padding:16px; }
.dl-card-scroll { max-height:calc(100vh - 200px); display:flex; flex-direction:column; }
.dl-scroll-y { overflow-y:auto; flex:1; }
.dl-flex-col { display:flex; flex-direction:column; }
.dl-flex-shrink-0 { flex-shrink:0; }

/* === BADGE & TEXT === */
.dl-badge-sm { font-size:11px; font-weight:500; padding:2px 8px; border-radius:4px; white-space:nowrap; }
.dl-badge-action { font-size:11px; font-weight:600; padding:3px 8px; border-radius:4px; white-space:nowrap; }
.dl-text-upper { font-size:11px; text-transform:uppercase; letter-spacing:0.05em; }
.dl-text-xs { font-size:11px; }
.dl-text-sm { font-size:12px; }
.dl-text-nowrap { white-space:nowrap; }

/* === TABLES === */
table.dl-table { width:100%; border-collapse:collapse; font-size:13px; }
table.dl-table th, table.dl-table td { padding:6px 4px; }
table.dl-table thead tr { border-bottom:1px solid #2d3548; }
.dl-col-xs { width:50px; }
.dl-col-sm { width:60px; }
.dl-col-md { width:75px; }
.dl-col-lg { width:110px; }
.dl-col-xl { width:130px; }
.dl-col-2xl { width:140px; }
.dl-text-right { text-align:right; }

/* === FORM SECTIONS === */
.dl-form-section { display:flex; flex-direction:column; gap:12px; }
.dl-section-title { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:#64748b; }
.dl-section-divider { border-top:1px solid #334155; padding-top:12px; margin-top:4px; }

/* === MODAL VARIANTS === */
div.dl-modal-box-lg { background:#1e293b; border:1px solid #334155; border-radius:12px; padding:24px; max-width:36rem; max-height:85vh; overflow-y:auto; box-shadow:0 25px 50px rgba(0,0,0,0.5); }

/* === STATE === */
.dl-disabled { opacity:0.5; cursor:not-allowed; }
.dl-opacity-60 { opacity:0.6; }

/* === WARNING/INFO BOXES === */
.dl-warn-box { background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.3); padding:12px; border-radius:8px; }
.dl-locked-box { background:#0f172a; border:1px solid #1e293b; border-radius:8px; padding:12px; margin-bottom:8px; }

/* === TOGGLE SWITCH === */
.dl-toggle { width:36px; height:20px; background:#334155; border-radius:10px; position:relative; cursor:pointer; transition:background 0.2s; }

/* === MISC === */
.dl-test-logo { height:28px; opacity:0.6; }
.dl-test-label { color:#475569; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.dl-center-msg { text-align:center; color:#64748b; font-size:14px; padding:40px; }
.dl-checkbox { width:16px; height:16px; }
.dl-mb-20 { margin-bottom:20px; }
.dl-mb-24 { margin-bottom:24px; }
.dl-mt-12 { margin-top:12px; }
.dl-dup-row { display:flex; justify-content:space-between; padding:3px 0; font-size:12px; }
.dl-input-sm { font-size:13px; }

/* === GRIDS (extended) === */
.dl-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }

/* === STAT CARD ACCENTS === */
.dl-stat-blue { border-left:3px solid #3b82f6; }
.dl-stat-amber { border-left:3px solid #f59e0b; }
.dl-stat-purple { border-left:3px solid #8b5cf6; }
.dl-stat-green { border-left:3px solid #10b981; }

/* === INLINE FLEX HELPERS === */
.dl-flex-center-gap4 { display:flex; align-items:center; gap:4px; margin-top:4px; }
.dl-flex-center-gap3 { display:flex; align-items:center; gap:3px; }

/* === CSAT === */
.dl-star-gold { color:#fbbf24; }
.dl-star-sm { font-size:13px; }
.dl-csat-question { background:#0f172a; border:1px solid #1e293b; border-radius:8px; padding:10px 12px; display:flex; justify-content:space-between; align-items:center; }
.dl-ml-4 { margin-left:4px; }

/* === INLINE-BLOCK RELATIVE === */
.dl-inline-relative { position:relative; display:inline-block; }

/* === BRANDING === */
.dl-color-row { display:flex; align-items:center; gap:6px; }
.dl-color-swatch { display:inline-block; width:16px; height:16px; border-radius:3px; }
.dl-color-swatch-border { display:inline-block; width:16px; height:16px; border-radius:3px; border:1px solid rgba(255,255,255,0.1); }
.dl-logo-thumb { width:28px; height:28px; object-fit:contain; border-radius:4px; }
.dl-modal-overlay-raw { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,0.6); }
.dl-modal-draggable { width:600px; max-height:85vh; box-shadow:0 25px 50px rgba(0,0,0,0.5); }
.dl-modal-dragbar { padding:16px 20px 12px; cursor:move; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; justify-content:space-between; align-items:center; user-select:none; }
button.dl-modal-dragbar-close { font-size:20px; line-height:1; background:none; border:none; cursor:pointer; }
.dl-modal-body { overflow-y:auto; padding:16px 20px; flex:1; }
.dl-form-gap { display:flex; flex-direction:column; gap:12px; }
.dl-grid-2-gap { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dl-grid-3-gap { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.dl-logo-field { display:flex; align-items:center; gap:8px; }
.dl-logo-preview { width:36px; height:36px; object-fit:contain; border-radius:4px; border:1px solid rgba(255,255,255,0.1); }
.dl-upload-label { cursor:pointer; display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:6px; font-size:12px; color:#94a3b8; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); }
.dl-hidden { display:none; }
.dl-url-input { font-size:11px; }
.dl-color-picker { width:32px; height:32px; border:none; background:transparent; cursor:pointer; padding:0; }
.dl-flex-1-min0 { flex:1; min-width:0; }
.dl-preview-box { padding:12px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); }
.dl-preview-center { display:flex; flex-direction:column; align-items:center; gap:4px; }
.dl-preview-logo { width:40px; height:40px; object-fit:contain; border-radius:4px; }
.dl-preview-brand { font-size:14px; font-weight:700; }
.dl-preview-subtitle { font-size:10px; text-transform:uppercase; letter-spacing:2px; }
.dl-preview-btn { width:140px; height:28px; margin-top:4px; border-radius:6px; }
.dl-preview-powered { font-size:10px; margin-top:2px; }
.dl-modal-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.06); }

/* === VSPHERE === */
.dl-status-dot { display:inline-block; width:10px; height:10px; border-radius:50%; }
.dl-checkbox-lg { width:18px; height:18px; }
.dl-vm-scroll { max-height:400px; overflow-y:auto; }
.dl-modal-wide { max-width:48rem; }

/* === LAB REQUESTS === */
.dl-urgency-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.dl-urgency-red { background:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,0.18); }
.dl-urgency-amber { background:#f59e0b; box-shadow:0 0 0 2px rgba(245,158,11,0.18); }
.dl-urgency-green { background:#10b981; box-shadow:0 0 0 2px rgba(16,185,129,0.18); }
.dl-urgency-slate { background:#64748b; box-shadow:0 0 0 2px rgba(100,116,139,0.18); }
.badge-pending { background:#d9770620; color:#fbbf24; }
.badge-in_progress { background:#2563eb20; color:#60a5fa; }
.badge-rejected { background:#dc262620; color:#f87171; }
.dl-lab-req-meta { font-size:11px; color:#64748b; }
.dl-lab-req-modal { background:#0f172a; border:1px solid #1e293b; padding:24px; border-radius:8px; max-width:32rem; width:92%; max-height:80vh; overflow-y:auto; }
.dl-lab-req-changes { max-height:60vh; overflow-y:auto; }
.dl-lab-req-change-row { padding:10px 12px; border-bottom:1px solid #1e293b; font-size:12px; }
.dl-lab-req-change-row:last-child { border-bottom:none; }
.dl-lab-req-change-type { color:#60a5fa; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; }
.dl-lab-req-change-when { color:#64748b; font-size:11px; }
.dl-lab-req-change-diff { color:#cbd5e1; margin-top:4px; }
.dl-lab-req-change-old { color:#f87171; text-decoration:line-through; }
.dl-lab-req-change-new { color:#34d399; }

/* === AUTO-FILL GRIDS === */
.dl-grid-auto-200 { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.dl-grid-auto-180 { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }

/* === FLEX HELPERS (session costs) === */
.dl-flex-between { display:flex; align-items:center; justify-content:space-between; }
.dl-inline-flex-gap { display:inline-flex; align-items:center; gap:6px; }
.dl-inline-block { display:inline-block; }

/* === OVERFLOW === */
.dl-overflow-x { overflow-x:auto; }

/* === SPACING EXTRAS === */
.dl-mb-12 { margin-bottom:12px; }
.dl-mt-8 { margin-top:8px; }

/* === COST TABLE === */
table.dl-cost-table { width:100%; border-collapse:collapse; font-size:13px; }
table.dl-cost-table thead tr { border-bottom:1px solid rgba(255,255,255,0.1); }
table.dl-cost-table th { text-align:left; padding:8px 12px; color:#94a3b8; font-weight:500; font-size:12px; }
table.dl-cost-table td { padding:8px 12px; color:#e2e8f0; }
table.dl-cost-table tbody tr { border-bottom:1px solid rgba(255,255,255,0.04); }
table.dl-cost-table tfoot tr { border-top:2px solid rgba(255,255,255,0.15); }
table.dl-cost-table tfoot td { padding:10px 12px; }
.dl-cost-label { font-weight:500; }
.dl-cost-formula { color:#64748b; font-size:11px; font-family:Menlo,monospace; }
.dl-cost-subtotal { font-weight:600; }
.dl-cost-footer-label { text-align:right; color:#94a3b8; font-size:13px; font-weight:500; }
.dl-cost-footer-total { text-align:right; color:#34d399; font-weight:700; font-size:15px; }

/* === ACCENT & TOTAL === */
.dl-accent-left-green { border-left:4px solid #34d399; }
.dl-total-green { color:#34d399; font-size:24px; font-weight:700; }

/* === TAB NAVIGATION === */
.dl-tab-bar { display:flex; gap:2px; margin-bottom:24px; border-bottom:1px solid #1e293b; padding-bottom:0; flex-wrap:nowrap; overflow-x:auto; }
button.dl-tab-btn { padding:10px 16px; font-size:13px; font-weight:500; background:none; border:none; border-top:none; border-left:none; border-right:none; cursor:pointer; white-space:nowrap; }

/* === FILTER BAR === */
.dl-filter-bar { display:flex; gap:12px; margin-bottom:16px; align-items:center; flex-wrap:nowrap; }
.dl-filter-field { display:flex; align-items:center; gap:6px; }
.dl-filter-date { width:150px; }

/* === BILLING TABLES === */
table.dl-billing-table { width:100%; border-collapse:collapse; }
table.dl-billing-table th { text-align:left; padding:8px 12px; font-size:12px; color:#64748b; font-weight:500; }
table.dl-billing-table th.dl-text-center { text-align:center; }
table.dl-billing-table th.dl-text-right { text-align:right; }
table.dl-billing-table td { padding:8px 12px; font-size:13px; color:#94a3b8; }
table.dl-billing-table td.dl-cell-primary { color:#e2e8f0; font-weight:500; }
table.dl-billing-table td.dl-text-center { text-align:center; }
table.dl-billing-table td.dl-text-right { text-align:right; }
table.dl-billing-table tr.dl-billing-row { border-bottom:1px solid #1e293b; }
table.dl-billing-table thead tr { border-bottom:1px solid #1e293b; }

/* === BILLING GROUP CARD === */
.dl-billing-card { padding:0; overflow:hidden; }
.dl-billing-group-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#0f172a; border-bottom:1px solid #1e293b; }
.dl-billing-group-header-simple { display:flex; align-items:center; padding:12px 16px; background:#0f172a; border-bottom:1px solid #1e293b; }
.dl-billing-header-left { display:flex; align-items:center; gap:8px; }
.dl-billing-checkbox { accent-color:#2563eb; }
.dl-ml-8 { margin-left:8px; }
.dl-col-checkbox { width:40px; }

/* === BILLING LINK === */
a.dl-billing-link { text-decoration:none; color:inherit; }
a.dl-billing-detail { color:#60a5fa; font-size:10px; margin-left:4px; text-decoration:none; }
a.dl-billing-detail-text { color:#60a5fa; font-size:11px; text-decoration:none; }

/* === BILLING STICKY FOOTER === */
.dl-billing-footer { position:sticky; bottom:0; background:#0f172a; border-top:1px solid #1e293b; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; border-radius:0 0 8px 8px; margin-top:-4px; }
.dl-billing-footer-left { display:flex; align-items:center; gap:16px; }
.dl-billing-footer-right { display:flex; gap:8px; }
/* dl-btn-blue / dl-btn-green now defined in reusable color section below */

/* === BILLING TFOOT === */
table.dl-billing-table tfoot tr { border-top:2px solid #334155; background:#0f172a; }
table.dl-billing-table tfoot td { padding:10px 12px; font-size:13px; color:#e2e8f0; font-weight:600; }

/* === QUOTES TABLE === */
.dl-quotes-head tr { background:#111827; color:#94a3b8; font-size:11px; text-transform:uppercase; }
table.dl-billing-table td.dl-cell-accent { color:#60a5fa; font-weight:500; }
table.dl-billing-table td.dl-cell-success { text-align:right; color:#22c55e; font-weight:500; }
table.dl-billing-table td.dl-cell-actions { text-align:center; white-space:nowrap; }
/* dl-btn-link-* are aliases for dl-btn-blue / dl-btn-red used in billing actions */
.dl-btn-link-blue { color:#60a5fa; border-color:#1e3a5f; background:transparent; }
.dl-btn-link-blue:hover { background:#0c1a2e; color:#93bbfd; }
.dl-btn-link-danger { color:#f87171; border-color:#7f1d1d; background:transparent; }
.dl-btn-link-danger:hover { background:#1a0505; }

/* === PROFORMA MODAL === */
.dl-modal-billing { max-width:800px; max-height:85vh; overflow-y:auto; }
.dl-modal-narrow { max-width:400px; }
.dl-modal-header-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
h3.dl-modal-h3 { color:#e2e8f0; font-size:18px; font-weight:600; margin:0; }
h3.dl-modal-h3-sm { color:#e2e8f0; font-size:16px; font-weight:600; margin:0 0 12px; }
button.dl-modal-x { background:none; border:none; color:#64748b; cursor:pointer; font-size:20px; padding:4px; }
.dl-proforma-group { margin-bottom:24px; }
.dl-proforma-client-header { border-bottom:2px solid #334155; padding-bottom:8px; margin-bottom:12px; }
span.dl-proforma-label { color:#e2e8f0; font-size:15px; font-weight:600; }
span.dl-proforma-client { color:#60a5fa; font-size:15px; font-weight:600; }
.dl-proforma-session { margin-bottom:16px; }
.dl-proforma-session-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid #1e293b; }
.dl-proforma-session-left { flex:1; display:flex; align-items:center; gap:8px; }
span.dl-proforma-course { color:#e2e8f0; font-size:13px; font-weight:600; }
a.dl-proforma-detail-link { color:#60a5fa; font-size:11px; text-decoration:none; }
.dl-proforma-col-center { width:120px; text-align:center; color:#94a3b8; font-size:12px; }
.dl-proforma-col-right { width:100px; text-align:right; color:#e2e8f0; font-size:13px; font-weight:600; }
.dl-proforma-col-pdf { width:40px; text-align:center; }
a.dl-proforma-pdf { color:#60a5fa; font-size:10px; text-decoration:none; padding:2px 6px; border:1px solid #1e3a5f; border-radius:4px; }

/* === PROFORMA COST ITEMS === */
.dl-proforma-item { display:flex; align-items:center; justify-content:space-between; padding:4px 0 4px 24px; }
.dl-proforma-item-left { display:flex; align-items:center; gap:6px; }
span.dl-proforma-arrow { color:#475569; font-size:11px; }
span.dl-proforma-cat { color:#94a3b8; font-size:12px; }
.dl-proforma-formula { flex:1; text-align:center; color:#64748b; font-size:11px; padding:0 8px; font-family:Menlo,monospace; }
.dl-proforma-formula-plain { flex:1; text-align:center; color:#64748b; font-size:11px; padding:0 8px; }
.dl-proforma-item-amount { width:100px; text-align:right; color:#94a3b8; font-size:12px; }

/* === PROFORMA SUBTOTAL / GRAND TOTAL === */
.dl-proforma-subtotal { display:flex; justify-content:flex-end; border-top:1px solid #334155; padding-top:8px; margin-top:8px; }
span.dl-proforma-subtotal-label { color:#94a3b8; font-size:13px; margin-right:12px; }
span.dl-proforma-subtotal-value { color:#e2e8f0; font-size:14px; font-weight:600; width:100px; text-align:right; }
.dl-proforma-grand { border-top:2px solid #334155; padding-top:12px; display:flex; justify-content:flex-end; align-items:center; gap:16px; }
span.dl-proforma-grand-label { color:#e2e8f0; font-size:16px; font-weight:700; }
span.dl-proforma-grand-value { color:#10b981; font-size:18px; font-weight:700; }

/* === MODAL ACTIONS === */
.dl-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; padding-top:12px; border-top:1px solid #1e293b; }
.dl-confirm-actions { display:flex; justify-content:flex-end; gap:8px; }
p.dl-confirm-text { color:#94a3b8; font-size:14px; margin:0 0 20px; }
p.dl-confirm-text strong { color:#e2e8f0; }

/* === BILLING Z-INDEX === */
.dl-z-modal { z-index:100; }

/* === SETTINGS === */
.dl-sub-tab-bar { display:flex; gap:0; margin-bottom:20px; border-bottom:1px solid #334155; }
button.dl-sub-tab-btn { padding:10px 20px; font-size:13px; font-weight:500; background:none; border:none; border-top:none; border-left:none; border-right:none; cursor:pointer; white-space:nowrap; }
.dl-settings-readonly { opacity:0.7; }
.dl-settings-stat-card { background:#0f172a; padding:12px; border-radius:8px; border:1px solid #1e293b; }
.dl-settings-stat-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.dl-settings-stat-grid-auto { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:20px; }
.dl-settings-filter-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.dl-settings-filter-row-lg { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.dl-settings-btn-inline { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #1e293b; background:#0c1220; color:#94a3b8; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; }
.dl-settings-btn-inline:hover { background:#131b2e; border-color:#334155; color:#e2e8f0; }
.dl-settings-btn-inline-lg { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:6px; border:1px solid #1e3a5f; background:#0c1a2e; color:#60a5fa; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; }
.dl-settings-btn-inline-lg:hover { background:#0f2440; border-color:#2563eb; }
.dl-settings-footer { display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.dl-settings-sched-flex { display:flex; gap:8px; }
.dl-settings-sched-col { display:flex; flex-direction:column; align-items:center; gap:2px; }
.dl-settings-sched-th { text-align:center; cursor:pointer; }

/* === LOG VIEWER === */
.dl-log-output { background:#0a0e17; border:1px solid #1e293b; border-radius:8px; padding:12px; height:60vh; overflow-y:auto; font-family:monospace; font-size:12px; line-height:1.6; user-select:text; }
.dl-log-ts { color:#475569; }
.dl-log-container { color:#60a5fa; margin:0 4px; }
.dl-log-sort-label { font-size:11px; }
.dl-log-date-input { max-width:190px; font-size:12px; padding:4px 8px; }
.dl-log-reset-btn { cursor:pointer; background:none; border:none; text-decoration:underline; }

/* === BACKUP === */
.dl-backup-danger-box { background:rgba(220,38,38,0.1); border:1px solid rgba(220,38,38,0.3); border-radius:8px; padding:12px; margin-bottom:12px; }
.dl-backup-checkbox { width:14px; height:14px; }
.dl-backup-restore-btn { background:#dc2626; border-color:#dc2626; color:white; }
.dl-form-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.dl-field-label { display:block; font-size:12px; color:#94a3b8; margin-bottom:4px; }
@media (max-width:640px){ .dl-form-grid-2 { grid-template-columns:1fr; } }

/* === EMAIL LOG STATS === */
.dl-email-stat { border-radius:8px; padding:8px 16px; display:flex; align-items:center; gap:8px; }
.dl-email-stat-green { background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.2); }
.dl-email-stat-red { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.2); }
.dl-email-stat-blue { background:rgba(59,130,246,0.1); border:1px solid rgba(59,130,246,0.2); }
.dl-email-stat-gray { background:rgba(148,163,184,0.1); border:1px solid rgba(148,163,184,0.2); }
.dl-email-stat-value { font-size:20px; font-weight:700; }
.dl-email-stat-value-green { font-size:20px; font-weight:700; color:#4ade80; }
.dl-email-stat-value-red { font-size:20px; font-weight:700; color:#f87171; }
.dl-email-stat-value-blue { font-size:20px; font-weight:700; color:#60a5fa; }
.dl-email-stat-value-gray { font-size:20px; font-weight:700; color:#94a3b8; }
.dl-email-stat-label-green { color:#86efac; font-size:12px; }
.dl-email-stat-label-red { color:#fca5a5; font-size:12px; }
.dl-email-stat-label-blue { color:#93c5fd; font-size:12px; }
.dl-email-stat-label-gray { color:#cbd5e1; font-size:12px; }
.dl-email-error-row { font-size:12px; color:#f87171; padding:6px 12px; background:rgba(239,68,68,0.05); border-radius:4px; margin-bottom:4px; }
.dl-email-badge-tpl { font-size:11px; font-weight:500; padding:2px 8px; border-radius:4px; background:rgba(148,163,184,0.15); color:#94a3b8; }
.dl-sched-check-color-sub { color:#38bdf8; }
.dl-sched-check-color-admin { color:#f59e0b; }
.dl-toast-success { background:#059669; color:white; }
.dl-toast-error { background:#dc2626; color:white; }
.dl-email-cell-truncate { max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* === EMAIL SCHEDULE === */
.dl-sched-check-applicable { accent-color:#4ade80; cursor:pointer; }
.dl-sched-check-trainer { accent-color:#c084fc; cursor:pointer; }
.dl-sched-check-client { accent-color:#60a5fa; cursor:pointer; }
.dl-sched-check-subclient { accent-color:#38bdf8; cursor:pointer; }
.dl-sched-check-admin { accent-color:#f59e0b; cursor:pointer; }
.dl-sched-check-enabled { accent-color:#059669; cursor:pointer; }
.dl-sched-check-blue { accent-color:#3b82f6; width:16px; height:16px; }
.dl-sched-na { color:#334155; font-size:11px; }
.dl-sched-recipient-wrap { display:flex; gap:12px; flex-wrap:wrap; }
.dl-sched-recipient-label { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; color:#e2e8f0; }

/* === FIELDS / TOGGLE === */
.dl-toggle-wrap { position:relative; display:inline-block; width:36px; height:20px; cursor:pointer; }
.dl-toggle-hidden { opacity:0; width:0; height:0; }
.dl-toggle-track { position:absolute; top:0; left:0; right:0; bottom:0; border-radius:10px; transition:background 0.2s; }
.dl-toggle-track-on { background:#3b82f6; }
.dl-toggle-track-off { background:#334155; }
.dl-toggle-knob { position:absolute; top:2px; width:16px; height:16px; background:white; border-radius:50%; transition:left 0.2s; }
.dl-toggle-knob-on { left:18px; }
.dl-toggle-knob-off { left:2px; }
.dl-fields-input-sm { font-size:13px; padding:4px 8px; max-width:280px; }
.dl-fields-col-order { width:40px; }
.dl-fields-col-toggle { width:120px; text-align:center; }
.dl-fields-td-center { text-align:center; }

/* === IAM === */
.dl-iam-section-title { font-size:14px; font-weight:600; color:#f1f5f9; margin-bottom:8px; }
.dl-iam-section-subtitle { font-weight:400; color:#64748b; font-size:12px; }
.dl-iam-badge-role { padding:3px 10px; border-radius:6px; font-size:12px; font-weight:500; background:rgba(59,130,246,0.15); color:#60a5fa; }
.dl-iam-badge-builtin { font-size:11px; color:#475569; padding:2px 8px; border:1px solid #334155; border-radius:4px; }
.dl-iam-perm-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.dl-iam-perm-label { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:13px; }
.dl-iam-perm-check { accent-color:#3b82f6; }
.dl-iam-policy-type-btn { flex:1; padding:8px; border-radius:8px; font-size:13px; border:1px solid #334155; cursor:pointer; }
.dl-iam-policy-type-active { background:#2563eb; border-color:#2563eb; color:white; }
.dl-iam-policy-type-inactive { background:transparent; color:#94a3b8; }
.dl-iam-policy-type-wrap { display:flex; gap:6px; }
.dl-iam-selected-user { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:#1e3a5f; border:1px solid #2563eb40; border-radius:6px; font-size:12px; color:#60a5fa; }
.dl-iam-clear-btn { background:none; border:none; color:#60a5fa; cursor:pointer; font-size:14px; }
.dl-iam-user-results { max-height:150px; overflow-y:auto; margin-top:4px; border:1px solid #334155; border-radius:8px; }
.dl-iam-user-result-item { padding:8px 12px; cursor:pointer; font-size:13px; color:#e2e8f0; transition:background .1s; }
.dl-iam-user-result-item:hover { background:#1e293b; }
.dl-iam-user-result-meta { color:#475569; font-size:11px; }
.dl-iam-builtin-row { opacity:0.8; }
.dl-iam-role-badge-base { padding:3px 10px; border-radius:6px; font-size:12px; font-weight:500; }
.dl-iam-mb-section { margin-bottom:20px; }

/* === CONTEXT MENU (enhanced) === */
button.dl-ctx-item.primary:hover { background:rgba(255,255,255,0.08); }
.dl-ctx-menu-positioned { position:absolute; right:0; z-index:100; min-width:150px; background:#283347; border:1px solid rgba(255,255,255,0.15); border-radius:8px; box-shadow:0 12px 32px rgba(0,0,0,0.6); padding:6px; font-size:13px; }

/* === BRANDING (enhanced) === */
.dl-branding-modal-overlay { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,0.6); }
.dl-branding-default-row { display:flex; align-items:center; gap:8px; margin-top:8px; }
.dl-branding-checkbox { width:16px; height:16px; accent-color:#2563eb; }
.dl-vm-checkbox { width:18px; height:18px; }

/* === LOG VIEWER PULSE === */
@keyframes logPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.dl-log-live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; }
.dl-log-live-dot-active { background:#fff; animation:logPulse 1.5s infinite; }
.dl-log-live-dot-paused { background:#64748b; }
.dl-log-live-btn-active { background:#059669; border-color:#059669; color:white; }

/* === MISC SETTINGS === */
.dl-text-center { text-align:center; }
.dl-card-no-pad { padding:0; }
.dl-overflow-visible { overflow:visible; }
.dl-font-mono-xs { font-family:monospace; font-size:12px; resize:vertical; }
.dl-font-mono-11 { font-family:monospace; font-size:11px; }
.dl-input-max-120 { max-width:120px; }
.dl-input-max-200 { max-width:200px; }
.dl-select-max-220 { max-width:220px; font-size:13px; }
.dl-select-max-140 { max-width:140px; font-size:13px; }
.dl-export-icon { width:13px; height:13px; }
.dl-mr-0 { margin-right:0; }
.dl-gap-flex-1 { flex:1; }
.dl-modal-max-24 { max-width:24rem; }
.dl-modal-max-28 { max-width:28rem; }
.dl-modal-max-36 { max-width:36rem; }
.dl-modal-max-48 { max-width:48rem; }
.dl-modal-max-560 { max-width:560px; }
.dl-modal-max-480 { max-width:480px; }
.dl-modal-preview { max-width:48rem; max-height:80vh; overflow:hidden; display:flex; flex-direction:column; }
.dl-preview-iframe { flex:1; border:1px solid #2d3548; border-radius:8px; min-height:400px; background:white; }
.dl-filter-w-120 { width:120px; }
.dl-filter-w-140 { width:140px; }
.dl-filter-w-160 { width:160px; }
.dl-filter-w-180 { width:180px; }

/* === CONNECTIONS === */
.dl-conn-filter-protocol { width:150px; }
.dl-conn-search { max-width:300px; }
.dl-conn-latency-badge { font-size:10px; padding:1px 5px; border-radius:4px; font-family:Menlo,monospace; font-weight:600; }
.dl-conn-latency-none { color:#334155; font-size:11px; }
.dl-conn-health-dot { display:inline-block; width:10px; height:10px; border-radius:50%; box-shadow:0 0 4px currentColor; vertical-align:middle; }
.dl-health-ok { background:#22c55e; color:#22c55e; }
.dl-health-ko { background:#ef4444; color:#ef4444; }
.dl-health-unknown { background:#64748b; color:#64748b; animation: dl-pulse 1.2s ease-in-out infinite; }
@keyframes dl-pulse { 0%, 100% { opacity:0.3; } 50% { opacity:0.9; } }
.dl-conn-ctx-divider { height:1px; background:rgba(255,255,255,0.08); margin:4px 2px; }
.dl-conn-modal-max { max-width:32rem; }
.dl-conn-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dl-conn-section-sep { border-top:1px solid #2d3548; padding-top:12px; margin-top:4px; }
.dl-conn-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.dl-conn-grid-3-mt { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:8px; }
.dl-conn-vm-list { max-height:200px; overflow-y:auto; margin-top:8px; border:1px solid #2d3548; border-radius:8px; }
.dl-conn-vm-row { border-bottom:1px solid #2d3548; }
.dl-conn-test-sep { border-top:1px solid #2d3548; margin-top:16px; padding-top:12px; }
.dl-conn-test-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #1e293b; background:#0c1220; color:#94a3b8; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; }
.dl-conn-test-btn:hover { background:#131b2e; border-color:#334155; color:#e2e8f0; }
.dl-conn-assoc-overlay { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,0.6); }
.dl-conn-assoc-modal { width:640px; max-height:80vh; box-shadow:0 25px 50px rgba(0,0,0,0.5); }
.dl-conn-assoc-header { padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; justify-content:space-between; align-items:center; }
.dl-conn-assoc-close { font-size:20px; line-height:1; background:none; border:none; cursor:pointer; }
.dl-conn-assoc-body { overflow-y:auto; padding:16px 20px; flex:1; }
table.dl-conn-assoc-table { width:100%; font-size:13px; }
table.dl-conn-assoc-table thead tr { border-bottom:1px solid rgba(255,255,255,0.06); text-align:left; color:#94a3b8; }
table.dl-conn-assoc-table th { padding:8px 12px; }
table.dl-conn-assoc-table tbody tr { border-bottom:1px solid rgba(255,255,255,0.03); }
table.dl-conn-assoc-table td { padding:8px 12px; }
.dl-conn-assoc-td-user { color:white; font-weight:500; }
.dl-conn-assoc-td-course { color:#94a3b8; }
.dl-conn-assoc-td-date { color:#64748b; font-size:12px; white-space:nowrap; }
.dl-conn-assoc-status { font-size:11px; padding:2px 8px; border-radius:4px; font-weight:600; }
button.dl-ctx-item.success { color:#34d399; }
button.dl-ctx-item.success:hover { background:rgba(255,255,255,0.08); }
button.dl-ctx-item.purple { color:#a78bfa; }
button.dl-ctx-item.purple:hover { background:rgba(255,255,255,0.08); }

/* === CLASS DETAIL === */
.dl-grid-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.dl-grid-auto-fill-180 { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.dl-mt-16 { margin-top:16px; }
.dl-btn-confirm { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #14532d; background:#031a09; color:#4ade80; font-size:12px; cursor:pointer; white-space:nowrap; transition:all 0.15s; }
.dl-btn-confirm:hover { background:#052e16; }

/* Class detail: day chips */
.dl-day-chips { display:flex; flex-wrap:wrap; gap:6px; max-height:120px; overflow-y:auto; }
.dl-day-chip { font-size:12px; }

/* Class detail: conflicts */
.dl-class-conflicts { background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.3); border-radius:8px; padding:16px; }
.dl-class-conflicts-title { color:#fbbf24; margin-bottom:8px; }
.dl-class-conflict-list { display:flex; flex-direction:column; gap:8px; }
.dl-class-conflict-row { display:flex; align-items:center; gap:12px; background:rgba(0,0,0,0.2); border-radius:6px; padding:8px 12px; }
.dl-class-conflict-icon { color:#fbbf24; font-size:18px; }
.dl-class-conflict-body { flex:1; }

/* Class detail: certificate link */
a.dl-class-cert-link { font-size:11px; padding:2px 8px; border-radius:4px; background:rgba(34,197,94,0.15); color:#4ade80; text-decoration:none; white-space:nowrap; }
a.dl-class-cert-link:hover { background:rgba(34,197,94,0.25); }

/* Class detail: materials sent badge */
.dl-class-sent-badge { display:inline-block; padding:1px 8px; border-radius:9999px; font-size:11px; background:rgba(34,197,94,0.15); color:#4ade80; }

/* Class detail: email status pill */
.dl-class-email-pill { display:inline-block; padding:1px 8px; border-radius:9999px; font-size:11px; font-weight:500; }

/* Class detail: email subject truncate */
.dl-class-email-subject { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Class detail: email template table */
table.dl-class-email-table { width:100%; border-collapse:collapse; font-size:13px; }
table.dl-class-email-table thead tr { border-bottom:2px solid rgba(255,255,255,0.1); }
table.dl-class-email-table th { padding:8px 10px; color:#94a3b8; font-weight:500; }
table.dl-class-email-table th.dl-class-th-left { text-align:left; }
table.dl-class-email-table th.dl-class-th-center { text-align:center; width:70px; }
table.dl-class-email-table th.dl-class-th-green { color:#4ade80; }
table.dl-class-email-table th.dl-class-th-purple { color:#c084fc; }
table.dl-class-email-table th.dl-class-th-blue { color:#60a5fa; }
table.dl-class-email-table th.dl-class-th-cyan { color:#38bdf8; }
table.dl-class-email-table th.dl-class-th-amber { color:#f59e0b; }
table.dl-class-email-table tbody tr { border-bottom:1px solid rgba(255,255,255,0.04); }
table.dl-class-email-table td { padding:8px 10px; color:#e2e8f0; }
table.dl-class-email-table td.dl-class-td-center { text-align:center; padding:8px 6px; }
.dl-class-email-check { accent-color:#059669; width:16px; height:16px; cursor:pointer; }
.dl-class-email-na { color:#334155; }
.dl-class-email-label { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:4px; }

/* Class detail: Step 4 compact email table */
table.dl-class-email-sm { width:100%; border-collapse:collapse; font-size:12px; }
table.dl-class-email-sm thead tr { border-bottom:2px solid rgba(255,255,255,0.1); }
table.dl-class-email-sm th { padding:6px 8px; color:#94a3b8; font-weight:500; font-size:11px; }
table.dl-class-email-sm th.dl-class-th-left { text-align:left; }
table.dl-class-email-sm th.dl-class-th-center { text-align:center; width:60px; }
table.dl-class-email-sm th.dl-class-th-green { color:#4ade80; }
table.dl-class-email-sm th.dl-class-th-purple { color:#c084fc; }
table.dl-class-email-sm th.dl-class-th-blue { color:#60a5fa; }
table.dl-class-email-sm th.dl-class-th-amber { color:#f59e0b; }
table.dl-class-email-sm tbody tr { border-bottom:1px solid rgba(255,255,255,0.04); }
table.dl-class-email-sm td { padding:6px 8px; color:#e2e8f0; font-size:11px; }
table.dl-class-email-sm td.dl-class-td-center { text-align:center; padding:6px 4px; }
.dl-class-email-check-sm { accent-color:#059669; width:14px; height:14px; cursor:pointer; }
.dl-class-email-na-sm { color:#334155; font-size:10px; }

/* Class detail: email stats grid */
.dl-class-email-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }

/* Class detail: recipient chips container */
.dl-class-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }

/* Class detail: recipient chip (pill) */
.dl-class-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:9999px; font-size:12px; font-weight:500; }
button.dl-class-chip-close { background:none; border:none; color:inherit; cursor:pointer; font-size:14px; line-height:1; padding:0 2px; opacity:0.7; }
button.dl-class-chip-close:hover { opacity:1; }

/* Class detail: dropdown selector */
.dl-class-dropdown-trigger { text-align:left; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.dl-class-dropdown-menu { position:absolute; left:0; right:0; top:100%; margin-top:4px; z-index:60; background:#283347; border:1px solid rgba(255,255,255,0.15); border-radius:8px; box-shadow:0 12px 32px rgba(0,0,0,0.5); max-height:260px; overflow-y:auto; }
.dl-class-dropdown-section { padding:4px 6px; border-bottom:1px solid rgba(255,255,255,0.06); }
.dl-class-dropdown-section-last { padding:4px 6px; }
.dl-class-dropdown-heading { padding:4px 10px; font-size:10px; text-transform:uppercase; color:#64748b; letter-spacing:0.05em; }
button.dl-class-dropdown-item { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:7px 10px; background:none; border:none; cursor:pointer; border-radius:5px; font-size:13px; }
button.dl-class-dropdown-item:hover { background:rgba(255,255,255,0.05); }
button.dl-class-dropdown-item.dl-color-blue { color:#60a5fa; }
button.dl-class-dropdown-item.dl-color-purple { color:#c084fc; }
button.dl-class-dropdown-item.dl-color-default { color:#e2e8f0; }
button.dl-class-dropdown-item-sm { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:6px 10px; background:none; border:none; cursor:pointer; border-radius:5px; font-size:13px; color:#e2e8f0; }
button.dl-class-dropdown-item-sm:hover { background:rgba(255,255,255,0.05); }
.dl-class-check-icon { width:16px; text-align:center; }
.dl-class-check-green { color:#4ade80; }
.dl-class-check-purple { color:#c084fc; }
.dl-class-meta-right { color:#64748b; font-size:11px; margin-left:auto; }

/* Class detail: textarea mono */
.dl-class-textarea-mono { font-family:monospace; font-size:12px; resize:vertical; }

/* Class detail: modal sizes */
.dl-modal-max-32 { max-width:32rem; }
.dl-modal-max-44 { max-width:44rem; }
.dl-modal-max-56 { max-width:56rem; }

/* Class detail: toast */
.dl-class-toast { position:fixed; bottom:24px; right:24px; z-index:100; padding:10px 20px; border-radius:8px; font-size:14px; background:#059669; color:white; }

/* Class detail: wizard modal */
.dl-wizard-modal { max-width:44rem; max-height:85vh; display:flex; flex-direction:column; }
.dl-wizard-close { background:none; border:none; font-size:20px; cursor:pointer; }

/* Class detail: wizard steps */
.dl-wizard-steps-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
.dl-wizard-step { padding:12px; border-radius:8px; cursor:pointer; text-align:center; border:2px solid transparent; transition:all .15s; }
.dl-wizard-step-num { font-size:18px; font-weight:700; margin-bottom:2px; }
.dl-wizard-step-label { font-size:12px; font-weight:500; }

/* Class detail: wizard form body */
.dl-wizard-form { flex:1; overflow-y:auto; padding-right:4px; }

/* Class detail: wizard footer */
.dl-wizard-footer { display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:12px; border-top:1px solid #334155; }
.dl-wizard-footer-right { display:flex; gap:8px; }

/* Class detail: autocomplete search */
.dl-class-autocomplete { position:relative; }
.dl-class-autocomplete-results { position:absolute; left:0; right:0; top:100%; z-index:50; max-height:150px; overflow-y:auto; border:1px solid #334155; border-radius:8px; background:#0f172a; margin-top:2px; }
.dl-class-autocomplete-results-sm { max-height:120px; }
.dl-class-autocomplete-item { padding:6px 12px; cursor:pointer; font-size:13px; color:#e2e8f0; }
.dl-class-autocomplete-item:hover { background:#1e293b; }
.dl-class-input-sm { font-size:13px; padding:6px 10px; }

/* Class detail: selected tag (inline badge for course/client/trainer) */
.dl-class-tag { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:6px; font-size:12px; }
.dl-class-tag-blue { background:#1e3a5f; border:1px solid #2563eb40; color:#60a5fa; }
.dl-class-tag-green { background:#052e16; border:1px solid #22c55e40; color:#22c55e; }
button.dl-class-tag-remove { background:none; border:none; cursor:pointer; font-size:14px; }
button.dl-class-tag-remove-blue { color:#60a5fa; }
button.dl-class-tag-remove-green { color:#22c55e; }
.dl-class-tag-wrap { margin-top:4px; }

/* Class detail: status button group */
.dl-class-status-group { display:flex; gap:6px; flex-wrap:wrap; }
button.dl-class-status-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #1e293b; background:#0c1220; color:#94a3b8; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; }
button.dl-class-status-btn:hover { background:#131b2e; border-color:#334155; color:#e2e8f0; }

/* Class detail: trainer multi-select */
.dl-class-trainer-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.dl-class-trainer-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:#1e3a5f; border:1px solid #2563eb40; border-radius:6px; font-size:12px; color:#60a5fa; }
button.dl-class-trainer-chip-remove { background:none; border:none; color:#60a5fa; cursor:pointer; font-size:14px; padding:0 2px; }
.dl-class-no-trainer { font-size:12px; color:#475569; padding:4px 0; display:block; margin-bottom:6px; }
.dl-class-trainer-results { max-height:120px; overflow-y:auto; margin-top:4px; border:1px solid #334155; border-radius:8px; }
.dl-class-trainer-result { padding:6px 12px; cursor:pointer; font-size:13px; color:#e2e8f0; transition:background .1s; }
.dl-class-trainer-result:hover { background:#1e293b; }
.dl-class-trainer-meta { color:#475569; font-size:11px; }

/* Class detail: mini calendar date picker */
.dl-class-picker { margin-bottom:8px; background:#0f172a; border:1px solid #334155; border-radius:8px; padding:12px; width:280px; }
.dl-class-picker-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
button.dl-class-picker-arrow { background:none; border:none; color:#94a3b8; cursor:pointer; font-size:16px; padding:2px 6px; }
.dl-class-picker-title { font-size:13px; color:#e2e8f0; font-weight:500; }
.dl-class-picker-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; margin-bottom:4px; }
.dl-class-picker-weekday { font-size:10px; color:#64748b; padding:2px 0; }
.dl-class-picker-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; }
.dl-class-picker-day { padding:4px 0; font-size:12px; cursor:pointer; border-radius:4px; transition:all .1s; }
.dl-class-picker-day:hover { background:#1e293b; }

/* Class detail: days list scroll */
.dl-class-days-scroll { max-height:260px; overflow-y:auto; }

/* Class detail: day time inputs */
input.dl-class-day-date { width:140px; padding:4px 6px; }
input.dl-class-day-time { width:100px; padding:4px 6px; }

/* Class detail: per-day trainer override row */
.dl-class-day-trainer-row { margin-top:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dl-class-day-trainer-label { font-size:11px; color:#64748b; white-space:nowrap; }
.dl-class-day-trainer-chip { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; background:#1e3a5f; border:1px solid #2563eb40; border-radius:5px; font-size:11px; color:#60a5fa; }
button.dl-class-day-trainer-remove { background:none; border:none; color:#60a5fa; cursor:pointer; font-size:13px; padding:0 1px; }
.dl-class-day-trainer-default { font-size:11px; color:#475569; font-style:italic; }
.dl-class-day-trainer-search { position:relative; display:inline-block; }
input.dl-class-day-trainer-input { font-size:11px; padding:2px 6px; background:#0f172a; border:1px solid #334155; border-radius:4px; color:#94a3b8; width:140px; }
.dl-class-day-trainer-dropdown { position:absolute; top:100%; left:0; min-width:180px; max-height:120px; overflow-y:auto; border:1px solid #334155; border-radius:6px; background:#0f172a; z-index:20; margin-top:2px; }
.dl-class-day-trainer-opt { padding:4px 8px; cursor:pointer; font-size:11px; color:#e2e8f0; transition:background .1s; }
.dl-class-day-trainer-opt:hover { background:#1e293b; }
.dl-class-day-trainer-opt-meta { color:#475569; font-size:10px; }

/* Class detail: section divider */
.dl-class-section-sep { border-top:1px solid #334155; padding-top:12px; }

/* Class detail: delivery grid */
.dl-class-grid-1-2 { display:grid; grid-template-columns:1fr 2fr; gap:12px; }

/* Class detail: cost panel */
.dl-class-cost-panel { background:#0f172a; border:1px solid #1e293b; border-radius:8px; padding:16px; }
.dl-class-cost-heading { color:#94a3b8; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:12px; }
.dl-class-cost-heading-inline { color:#94a3b8; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; margin:0; }
.dl-class-cost-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.dl-class-cost-field-row { display:flex; align-items:center; gap:4px; }

/* Class detail: segmented control */
.dl-class-segmented { display:flex; background:#1e293b; border-radius:6px; padding:3px; gap:3px; margin-bottom:16px; }
button.dl-class-segment { flex:1; padding:8px 16px; border-radius:4px; border:none; cursor:pointer; font-size:13px; font-weight:600; transition:all .15s; }
.dl-class-segmented-sm { display:flex; background:#1e293b; border-radius:6px; padding:3px; gap:3px; }
.dl-class-inclusive-row { display:flex; align-items:flex-end; gap:16px; }

/* Class detail: scope/frequency toggle group (small) */
.dl-class-toggle-group { display:flex; background:#0f172a; border-radius:5px; padding:2px; gap:2px; }
button.dl-class-toggle-btn { padding:4px 10px; border-radius:3px; border:none; cursor:pointer; font-size:11px; font-weight:500; transition:all .15s; }
.dl-class-toggle-label { color:#64748b; font-size:10px; font-weight:500; display:block; margin-bottom:4px; }
.dl-class-toggles-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* Class detail: cost item card */
.dl-class-cost-item { border-radius:8px; padding:14px 14px 14px 18px; background:#1e293b; position:relative; overflow:hidden; }
.dl-class-cost-item-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.dl-class-cost-item-label { color:#64748b; font-size:11px; font-weight:500; display:block; margin-bottom:4px; }
button.dl-class-cost-delete { position:absolute; top:8px; right:8px; background:none; border:none; color:#f87171; cursor:pointer; font-size:18px; line-height:1; padding:2px 6px; border-radius:4px; }
button.dl-class-cost-delete:hover { background:rgba(248,113,113,0.15); }
.dl-class-cost-desc { margin-bottom:10px; }
.dl-class-cost-items-list { display:flex; flex-direction:column; gap:12px; }

/* Class detail: add cost item button (dashed) */
button.dl-class-add-cost-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #1e293b; background:#0c1220; color:#94a3b8; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; width:100%; margin-top:12px; justify-content:center; font-weight:600; }
button.dl-class-add-cost-btn:hover { background:#131b2e; border-color:#334155; color:#e2e8f0; }

/* Class detail: cost preview panel */
.dl-class-preview-panel { background:#0a0f1a; border:1px solid #1e293b; border-radius:8px; padding:16px; }
.dl-class-preview-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
button.dl-class-preview-calc { color:#60a5fa; background:none; border:1px solid #1e3a5f; cursor:pointer; padding:6px 16px; border-radius:4px; font-size:12px; font-weight:600; transition:all .15s; }
button.dl-class-preview-calc:hover { background:rgba(37,99,235,0.1); }
.dl-class-preview-items { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.dl-class-preview-row { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; background:#1e293b; border-radius:6px; }
.dl-class-preview-row-left { display:flex; align-items:center; gap:8px; flex:1; }
.dl-class-preview-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dl-class-preview-name { color:#e2e8f0; font-size:13px; font-weight:500; }
.dl-class-preview-formula { color:#64748b; font-size:11px; flex:1; text-align:right; margin-right:12px; }
.dl-class-preview-amount { color:#e2e8f0; font-size:13px; font-weight:600; white-space:nowrap; }
.dl-class-preview-total { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-top:2px solid #334155; margin-top:4px; }
.dl-class-preview-total-label { color:#94a3b8; font-size:13px; font-weight:600; }
.dl-class-preview-total-value { color:#22c55e; font-size:20px; font-weight:700; }
.dl-class-preview-empty { color:#475569; font-size:12px; text-align:center; padding:8px 0; }
.dl-class-recalc-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #1e3a5f; background:#0c1a2e; color:#60a5fa; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; }
.dl-class-recalc-btn:hover { background:#0f2440; border-color:#2563eb; }
.dl-class-calc-hint { color:#64748b; font-size:10px; margin-top:2px; }

/* Class detail: cost table (hidden pricing section) */
table.dl-class-cost-table { width:100%; border-collapse:collapse; font-size:13px; }
table.dl-class-cost-table thead tr { border-bottom:1px solid rgba(255,255,255,0.1); }
table.dl-class-cost-table th { text-align:left; padding:6px 8px; color:#94a3b8; font-weight:500; font-size:11px; }
table.dl-class-cost-table th.dl-text-right { text-align:right; }
table.dl-class-cost-table td { padding:6px 8px; }
table.dl-class-cost-table td.dl-text-right { text-align:right; }
table.dl-class-cost-table tbody tr { border-bottom:1px solid rgba(255,255,255,0.04); }
table.dl-class-cost-table tfoot tr { border-top:2px solid rgba(255,255,255,0.15); }
.dl-class-cost-override { color:#fbbf24; font-size:10px; margin-left:4px; }
.dl-class-cost-time { font-size:11px; }
.dl-class-cost-subtotal-label { padding:8px; text-align:right; color:#94a3b8; font-size:12px; font-weight:500; }
.dl-class-cost-subtotal-value { padding:8px; text-align:right; color:#34d399; font-weight:700; }
.dl-class-cost-student-count { font-size:11px; margin-top:6px; }
.dl-class-cost-grand-row { margin-top:12px; border-top:1px solid rgba(255,255,255,0.1); padding-top:12px; display:flex; justify-content:space-between; align-items:center; }
.dl-class-cost-grand-value { color:#34d399; font-size:18px; font-weight:700; }
.dl-class-quote-download { margin-top:12px; display:flex; justify-content:flex-end; }
.dl-class-quote-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #1e3a5f; background:#0c1a2e; color:#60a5fa; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; }
.dl-class-quote-btn:hover { background:#0f2440; border-color:#2563eb; }

/* Class detail: assign modal */
.dl-class-search-results { max-height:180px; overflow-y:auto; margin-top:6px; border:1px solid #2d3548; border-radius:8px; }
.dl-class-search-row { border-bottom:1px solid #2d3548; }
.dl-class-selected-templates { margin-top:8px; display:flex; flex-wrap:wrap; gap:4px; }
.dl-class-template-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; }

/* Class detail: connections modal */
.dl-class-conn-list { display:flex; flex-direction:column; gap:4px; }
.dl-class-conn-results { max-height:180px; overflow-y:auto; margin-top:6px; border:1px solid #2d3548; border-radius:8px; }
.dl-class-conn-row { border-bottom:1px solid #2d3548; }

/* Class detail: survey stars */
.dl-class-star { font-size:18px; }

/* Class detail: survey yes/no dots */
.dl-class-yesno-row { display:flex; align-items:center; gap:12px; }
.dl-class-yesno-item { display:flex; align-items:center; gap:4px; }
.dl-class-dot-green { display:inline-block; width:12px; height:12px; border-radius:50%; background:#22c55e; }
.dl-class-dot-red { display:inline-block; width:12px; height:12px; border-radius:50%; background:#ef4444; }

/* Class detail: survey comment */
.dl-class-comment { border-left:3px solid #334155; }

/* Class detail: max-height scroll containers */
.dl-class-scroll-400 { max-height:400px; overflow-y:auto; }

/* Class detail: form opacity */
.dl-class-readonly { opacity:0.7; }

/* Class detail: form input width overrides */
.dl-class-flex-1 { flex:1; }

/* === SURVEY === */
.dl-tab-bar-scroll { display:flex; gap:2px; margin-bottom:24px; border-bottom:1px solid #1e293b; padding-bottom:0; overflow-x:auto; }
.dl-survey-table { width:100%; border-collapse:collapse; }
.dl-survey-table thead tr { border-bottom:1px solid #1e293b; }
.dl-survey-table th { padding:12px 16px; font-size:12px; color:#64748b; font-weight:500; }
.dl-survey-table th.dl-text-left { text-align:left; }
.dl-survey-table th.dl-text-center { text-align:center; }
.dl-survey-table th.dl-text-right { text-align:right; }
.dl-survey-table td { padding:10px 16px; font-size:13px; }
.dl-survey-table td.dl-cell-name { color:#e2e8f0; font-weight:500; }
.dl-survey-table td.dl-cell-desc { color:#94a3b8; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-survey-table td.dl-cell-muted { color:#94a3b8; }
.dl-survey-table td.dl-cell-muted-center { color:#94a3b8; text-align:center; }
.dl-survey-table td.dl-cell-center { text-align:center; }
.dl-survey-table td.dl-cell-right { text-align:right; }
.dl-survey-table tbody tr { border-bottom:1px solid #1e293b; }
.dl-survey-table-sm th { padding:8px 12px; font-size:12px; color:#64748b; font-weight:500; }
.dl-survey-table-sm th.dl-text-left { text-align:left; }
.dl-survey-table-sm th.dl-text-center { text-align:center; }
.dl-survey-table-sm td { padding:8px 12px; font-size:13px; }
.dl-survey-table-sm td.dl-td-primary { color:#e2e8f0; }
.dl-survey-table-sm td.dl-td-muted { color:#94a3b8; }
.dl-survey-table-sm td.dl-td-center { text-align:center; }
.dl-survey-table-sm td.dl-td-muted-center { color:#94a3b8; text-align:center; }
.dl-survey-default-badge { font-size:11px; }
.dl-survey-no-badge { color:#64748b; font-size:12px; }
.dl-survey-star-gold { color:#fbbf24; }
.dl-survey-star-lg { font-size:18px; }
.dl-survey-star-md { font-size:14px; }
.dl-survey-star-sm { font-size:12px; }
.dl-survey-star-rating { font-size:16px; }
.dl-survey-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.dl-survey-section-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.dl-survey-rate-wrap { display:flex; align-items:center; gap:16px; }
.dl-survey-rate-track { flex:1; background:#1e293b; border-radius:6px; height:10px; overflow:hidden; }
.dl-survey-rate-fill { height:100%; border-radius:6px; background:linear-gradient(90deg,#3b82f6,#8b5cf6); }
.dl-survey-question-card { background:#0f172a; border:1px solid #1e293b; border-radius:8px; padding:12px; }
.dl-survey-question-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.dl-survey-stars-row { display:flex; align-items:center; gap:4px; }
.dl-survey-stars-row-center { display:flex; align-items:center; justify-content:center; gap:3px; }
.dl-survey-stars-rating { display:flex; align-items:center; gap:6px; }
.dl-survey-yesno-row { display:flex; gap:12px; font-size:13px; }
.dl-survey-yesno-yes { color:#22c55e; }
.dl-survey-yesno-no { color:#ef4444; }
.dl-survey-progress-track { background:#1e293b; border-radius:4px; height:6px; overflow:hidden; }
.dl-survey-progress-fill { height:100%; border-radius:4px; background:#3b82f6; }
.dl-survey-progress-mt { background:#1e293b; border-radius:4px; height:6px; margin-top:8px; overflow:hidden; }
.dl-survey-comment { background:#1e293b; border-left:3px solid #334155; padding:6px 10px; margin-top:4px; border-radius:0 4px 4px 0; font-size:13px; color:#cbd5e1; }
.dl-survey-comment-block { background:#0f172a; border-left:3px solid #334155; padding:8px 12px; margin-bottom:6px; border-radius:0 4px 4px 0; }
.dl-survey-search-wrap { position:relative; max-width:500px; }
.dl-survey-dropdown { position:absolute; top:100%; left:0; right:0; max-height:250px; overflow-y:auto; background:#1e293b; border:1px solid #334155; border-radius:8px; margin-top:4px; z-index:50; }
.dl-survey-dropdown-item { padding:8px 12px; cursor:pointer; font-size:13px; color:#e2e8f0; border-bottom:1px solid #0f172a; }
.dl-survey-dropdown-item:hover { background:rgba(255,255,255,0.04); }
.dl-survey-dropdown-empty { padding:8px 12px; font-size:13px; color:#64748b; }
.dl-survey-answer-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid #1e293b; }
.dl-survey-answer-text { max-width:50%; text-align:right; }
.dl-survey-modal { max-width:700px; max-height:90vh; overflow-y:auto; }
.dl-survey-form-label-inline { margin-bottom:0; }
.dl-survey-add-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #1e3a5f; background:#0c1a2e; color:#60a5fa; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; }
.dl-survey-add-btn:hover { background:#0f2440; border-color:#2563eb; }
.dl-survey-q-card { background:#0f172a; border:1px solid #1e293b; }
.dl-survey-q-select { width:auto; padding:4px 8px; font-size:12px; }
.dl-survey-q-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.dl-survey-q-options { display:flex; gap:8px; align-items:center; }
.dl-survey-q-section-select { width:120px; padding:4px 8px; font-size:12px; }
.dl-survey-q-max-input { width:60px; padding:4px 8px; font-size:12px; }
.dl-survey-q-remove { color:#f87171; }
.dl-survey-type-badge { font-size:10px; padding:2px 6px; border-radius:4px; }
.dl-survey-result-card { background:#0f172a; border:1px solid #1e293b; }
.dl-survey-stat-row { display:flex; align-items:center; gap:4px; margin-top:4px; }
button.dl-survey-ctx-edit { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px 10px; background:none; border:none; color:#60a5fa; cursor:pointer; border-radius:5px; font-size:13px; }
button.dl-survey-ctx-edit:hover { background:rgba(255,255,255,0.08); }
button.dl-survey-ctx-delete { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px 10px; background:none; border:none; color:#f87171; cursor:pointer; border-radius:5px; font-size:13px; }
button.dl-survey-ctx-delete:hover { background:rgba(248,113,113,0.1); }
button.dl-survey-ctx-view { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px 10px; background:none; border:none; color:#e2e8f0; cursor:pointer; border-radius:5px; font-size:13px; }
button.dl-survey-ctx-view:hover { background:rgba(255,255,255,0.08); }

/* === CALENDAR PAGE === */

/* Legend bar */
.dl-cal-legend { display:flex; gap:16px; align-items:center; margin-bottom:12px; padding:8px 12px; background:#1e293b; border-radius:8px; flex-wrap:wrap; }
.dl-cal-legend-title { font-size:11px; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.dl-cal-legend-item { display:inline-flex; align-items:center; gap:5px; font-size:12px; }
.dl-cal-legend-item.scheduled { color:#93c5fd; }
.dl-cal-legend-item.active { color:#86efac; }
.dl-cal-legend-item.provisional { color:#fde68a; }
.dl-cal-legend-item.completed { color:#cbd5e1; }
.dl-cal-legend-item.cancelled { color:#fca5a5; }
.dl-cal-legend-item.invoiced { color:#c4b5fd; }
.dl-cal-legend-dot { width:12px; height:12px; border-radius:3px; display:inline-block; }
.dl-cal-legend-dot.scheduled { background:#3b82f6; }
.dl-cal-legend-dot.active { background:#22c55e; }
.dl-cal-legend-dot.provisional { background:#eab308; }
.dl-cal-legend-dot.completed { background:#64748b; }
.dl-cal-legend-dot.cancelled { background:#ef4444; }
.dl-cal-legend-dot.invoiced { background:#8b5cf6; }

/* Reusable colored buttons — variants by color (#215)
   Use class="dl-btn dl-btn-{color}" for any colored button.
   Default: tinted background (always visible color).
   Hover: slightly brighter.
   .active modifier: full-saturated background for selected/pressed state. */
.dl-btn.dl-btn-blue { color:#60a5fa; background:rgba(59,130,246,0.12); border-color:rgba(59,130,246,0.4); }
.dl-btn.dl-btn-blue:hover { background:rgba(59,130,246,0.2); color:#93c5fd; }
.dl-btn.dl-btn-blue.active { background:#1e3a8a; color:#dbeafe; border-color:#3b82f6; }
.dl-btn.dl-btn-green { color:#22c55e; background:rgba(34,197,94,0.12); border-color:rgba(34,197,94,0.4); }
.dl-btn.dl-btn-green:hover { background:rgba(34,197,94,0.2); color:#4ade80; }
.dl-btn.dl-btn-green.active { background:#14532d; color:#dcfce7; border-color:#22c55e; }
.dl-btn.dl-btn-yellow { color:#eab308; background:rgba(234,179,8,0.12); border-color:rgba(234,179,8,0.4); }
.dl-btn.dl-btn-yellow:hover { background:rgba(234,179,8,0.2); color:#facc15; }
.dl-btn.dl-btn-yellow.active { background:#713f12; color:#fef3c7; border-color:#eab308; }
.dl-btn.dl-btn-red { color:#ef4444; background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.4); }
.dl-btn.dl-btn-red:hover { background:rgba(239,68,68,0.2); color:#f87171; }
.dl-btn.dl-btn-red.active { background:#7f1d1d; color:#fee2e2; border-color:#ef4444; }
.dl-btn.dl-btn-purple { color:#8b5cf6; background:rgba(139,92,246,0.12); border-color:rgba(139,92,246,0.4); }
.dl-btn.dl-btn-purple:hover { background:rgba(139,92,246,0.2); color:#a78bfa; }
.dl-btn.dl-btn-purple.active { background:#5b21b6; color:#ede9fe; border-color:#8b5cf6; }
.dl-btn.dl-btn-gray { color:#94a3b8; background:rgba(148,163,184,0.12); border-color:rgba(148,163,184,0.4); }
.dl-btn.dl-btn-gray:hover { background:rgba(148,163,184,0.2); color:#cbd5e1; }
.dl-btn.dl-btn-gray.active { background:#475569; color:#f1f5f9; border-color:#94a3b8; }

/* Filter bar */
.dl-cal-filter-bar { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; align-items:center; }
.dl-cal-filter-sep { width:1px; height:20px; background:#334155; margin:0 4px; }
.dl-cal-filter-field { display:flex; align-items:center; gap:6px; }
.dl-cal-date-input { width:140px; font-size:12px; }
.dl-cal-search-input { width:260px; font-size:13px; }
.dl-cal-provisional-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #1e293b; background:#0c1220; color:#94a3b8; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; }
.dl-cal-provisional-btn:hover { background:#131b2e; border-color:#334155; color:#e2e8f0; }

/* Table */
.dl-cal-table { font-size:13px; }

/* Pagination */
.dl-cal-pagination { border-top:1px solid #1e293b; }

/* Toast */
.dl-cal-toast { background:#059669; color:white; }

/* Modal wizard */
.dl-cal-modal { max-width:44rem; max-height:85vh; display:flex; flex-direction:column; }
.dl-cal-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
.dl-cal-step { padding:12px; border-radius:8px; cursor:pointer; text-align:center; border:2px solid transparent; transition:all .15s; }
.dl-cal-step-num { font-size:18px; font-weight:700; margin-bottom:2px; }
.dl-cal-step-label { font-size:11px; font-weight:500; }

/* Dropdown (reusable for course/client/trainer search) */
.dl-cal-dropdown { position:absolute; left:0; right:0; top:100%; z-index:50; max-height:200px; overflow-y:auto; background:#1e293b; border:1px solid #334155; border-radius:6px; margin-top:2px; }

/* Clear button in input */
.dl-cal-input-clear { position:absolute; right:8px; top:50%; transform:translateY(-50%); margin-top:10px; }

/* No-trainer placeholder */
.dl-cal-placeholder { padding:16px; text-align:center; background:#1e293b; border:1px dashed #334155; border-radius:8px; }
svg.dl-cal-placeholder-icon { width:32px; height:32px; margin:0 auto 8px; color:#475569; }

/* Loading indicator */
.dl-cal-loading { padding:8px; text-align:center; }

/* Availability legend (mini) */
.dl-cal-avail-legend { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.dl-cal-avail-item { display:inline-flex; align-items:center; gap:4px; font-size:11px; }
.dl-cal-avail-item.free { color:#4ade80; }
.dl-cal-avail-item.partial { color:#fbbf24; }
.dl-cal-avail-item.busy { color:#f87171; }
.dl-cal-avail-dot { width:10px; height:10px; border-radius:2px; display:inline-block; }
.dl-cal-avail-dot.free { background:#16a34a40; border:1px solid #22c55e; }
.dl-cal-avail-dot.partial { background:#d9770640; border:1px solid #d97706; }
.dl-cal-avail-dot.busy { background:#dc262640; border:1px solid #dc2626; }

/* Day picker */
.dl-cal-day-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.dl-cal-day-grid.dl-disabled { opacity:0.3; pointer-events:none; }

/* Day slot row */
.dl-cal-day-label { width:70px; }
.dl-cal-time-input { width:90px; padding:2px 6px; }
.dl-cal-slot-trainers { position:relative; flex:1; min-width:120px; }
.dl-cal-slot-trainer-wrap { display:flex; flex-wrap:wrap; gap:3px; align-items:center; }
.dl-cal-slot-tag { display:inline-flex; align-items:center; gap:2px; padding:1px 6px; background:#1e3a5f; border:1px solid #2563eb40; border-radius:4px; font-size:10px; color:#60a5fa; }
.dl-cal-slot-tag-default { display:inline-flex; align-items:center; gap:2px; padding:1px 6px; background:#1e3a5f50; border:1px dashed #2563eb40; border-radius:4px; font-size:10px; color:#60a5fa80; }
.dl-cal-slot-tag-close { background:none; border:none; color:inherit; cursor:pointer; font-size:11px; padding:0; }
.dl-cal-slot-search { font-size:10px; padding:1px 4px; background:transparent; border:1px solid #334155; border-radius:3px; color:#94a3b8; width:80px; }
.dl-cal-slot-results { position:absolute; top:100%; left:0; right:0; max-height:120px; overflow-y:auto; border:1px solid #334155; border-radius:6px; background:#0f172a; z-index:20; margin-top:2px; }
.dl-cal-slot-result-item { padding:4px 8px; cursor:pointer; font-size:11px; color:#e2e8f0; }
.dl-cal-slot-result-item:hover { background:#1e293b; }
.dl-cal-slot-result-meta { color:#475569; font-size:10px; }

/* Section divider */
.dl-cal-section-divider { border-top:1px solid #334155; padding-top:12px; }

/* Meeting platform grid */
.dl-cal-grid-1-2 { display:grid; grid-template-columns:1fr 2fr; gap:12px; }

/* Pricing mode toggle */
.dl-cal-toggle-group { display:flex; gap:0; border:1px solid #334155; border-radius:6px; overflow:hidden; }
.dl-cal-toggle-group-narrow { max-width:320px; }
.dl-cal-toggle-group-mt { margin-top:4px; }
.dl-cal-toggle-btn { flex:1; padding:8px 12px; border:none; cursor:pointer; font-size:12px; font-weight:600; }
.dl-cal-toggle-btn-sm { flex:1; padding:6px 10px; border:none; cursor:pointer; font-size:11px; }

/* Num days row */
.dl-cal-flex-input { display:flex; align-items:center; gap:4px; }
.dl-cal-reset-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #334155; background:transparent; color:#94a3b8; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; }
.dl-cal-reset-btn:hover { background:rgba(51,65,85,0.3); color:#e2e8f0; }

/* Cost item row */
.dl-cal-cost-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; padding:8px; background:#0a0f1a; border:1px solid #1e293b; border-radius:6px; }
.dl-cal-cost-select { width:120px; font-size:12px; padding:4px 8px; }
.dl-cal-cost-amount { width:100px; font-size:12px; padding:4px 8px; }
.dl-cal-cost-desc { width:140px; font-size:11px; padding:4px 8px; }
.dl-cal-cost-scope { width:110px; font-size:11px; padding:4px 6px; }
.dl-cal-cost-freq { width:100px; font-size:11px; padding:4px 6px; }
.dl-cal-cost-day-mode { width:110px; font-size:11px; padding:4px 6px; }
.dl-cal-cost-remove { color:#ef4444; background:none; border:none; cursor:pointer; font-size:16px; padding:4px; }
.dl-cal-cost-add { color:#60a5fa; background:none; border:1px dashed #334155; cursor:pointer; padding:6px 12px; border-radius:6px; font-size:12px; width:100%; }

/* Cost preview */
.dl-cal-preview { background:#0a0f1a; border:1px solid #1e293b; border-radius:8px; padding:12px; }
.dl-cal-preview-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dl-cal-preview-title { color:#94a3b8; font-size:12px; font-weight:600; }
.dl-cal-preview-calc-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #1e3a5f; background:#0c1a2e; color:#60a5fa; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; font-weight:600; }
.dl-cal-preview-calc-btn:hover { background:#0f2440; border-color:#2563eb; }
.dl-cal-preview-row { display:flex; justify-content:space-between; font-size:11px; color:#94a3b8; margin-bottom:2px; }
.dl-cal-preview-total { color:#22c55e; font-size:18px; font-weight:700; margin-top:4px; }
.dl-cal-preview-hint { color:#475569; font-size:11px; }

/* Survey select */
.dl-cal-survey-select { max-width:300px; }

/* Branding placeholder */
.dl-cal-branding-empty { padding:12px; background:#1e293b; border:1px dashed #334155; border-radius:8px; }

/* Email settings table */
.dl-cal-email-table { width:100%; border-collapse:collapse; font-size:12px; }
.dl-cal-email-table thead tr { border-bottom:2px solid rgba(255,255,255,0.1); }
.dl-cal-email-table th { text-align:left; padding:6px 8px; color:#94a3b8; font-weight:500; }
.dl-cal-email-table th.dl-cal-email-col { text-align:center; padding:6px 4px; font-weight:500; width:56px; }
.dl-cal-email-col-student { color:#4ade80; }
.dl-cal-email-col-trainer { color:#c084fc; }
.dl-cal-email-col-client { color:#60a5fa; }
.dl-cal-email-col-subclient { color:#38bdf8; }
.dl-cal-email-col-admin { color:#f59e0b; }
.dl-cal-email-table tbody tr { border-bottom:1px solid rgba(255,255,255,0.04); }
.dl-cal-email-table td { padding:6px 8px; color:#cbd5e1; }
.dl-cal-email-table td.dl-cal-email-cell { text-align:center; padding:6px 4px; }
.dl-cal-email-check { accent-color:#059669; width:15px; height:15px; cursor:pointer; }
.dl-cal-email-na { color:#334155; font-size:11px; }

/* Busy warning modal */
.dl-cal-busy-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:200; display:flex; align-items:center; justify-content:center; }
.dl-cal-busy-box { background:#1e293b; border:1px solid #334155; border-radius:12px; padding:20px; max-width:420px; width:90%; }
.dl-cal-busy-header { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.dl-cal-busy-scroll { max-height:200px; overflow-y:auto; margin-bottom:16px; }
.dl-cal-busy-detail { padding:8px; background:#0f172a; border-radius:6px; margin-bottom:6px; }
.dl-cal-busy-name { font-size:13px; font-weight:500; color:#f1f5f9; }
.dl-cal-busy-status { font-size:11px; color:#94a3b8; margin-top:2px; }
.dl-cal-busy-event { font-size:11px; color:#cbd5e1; margin-top:4px; padding-left:8px; border-left:2px solid #334155; }
.dl-cal-busy-event-time { color:#60a5fa; }
.dl-cal-busy-event-source { color:#22c55e; font-size:10px; }
.dl-cal-busy-loading { font-size:11px; color:#64748b; margin-top:4px; }
.dl-cal-busy-actions { display:flex; gap:8px; justify-content:flex-end; }
.dl-cal-force-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #7f1d1d; background:#1a0505; color:#f87171; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; }
.dl-cal-force-btn:hover { background:#2a0a0a; border-color:#dc2626; }

/* Warning icon */
.dl-cal-warn-icon { color:#fbbf24; flex-shrink:0; }
.dl-cal-conflict-indicator { color:#fbbf24; margin-right:3px; }

/* Modal footer */
.dl-cal-modal-footer { display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:12px; border-top:1px solid #334155; }
.dl-cal-modal-footer-right { display:flex; gap:8px; }

/* Overflow container */
.dl-cal-overflow-x { overflow-x:auto; }

/* Flex:1 for form area */
.dl-cal-form-flex { flex:1; padding-right:4px; }
.dl-cal-form-scroll { overflow-y:auto; }
.dl-cal-form-visible { overflow:visible; }

/* Context menu item (delete) */
button.dl-cal-ctx-delete { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px 10px; background:none; border:none; color:#f87171; cursor:pointer; border-radius:5px; font-size:13px; }
button.dl-cal-ctx-delete:hover { background:rgba(248,113,113,0.1); }

/* Checkbox sizing */
.dl-cal-checkbox { width:16px; height:16px; }

/* === CUSTOMER PORTAL === */

/* Page header */
.dl-customer-header { margin-bottom:24px; }
.dl-customer-title { font-size:24px; font-weight:700; color:#f1f5f9; margin:0; }
.dl-customer-subtitle { font-size:14px; color:#64748b; margin:4px 0 0; }

/* Summary stat cards grid */
.dl-customer-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.dl-customer-stat-card { background:#1e293b; border:1px solid #334155; border-radius:10px; padding:16px; }
.dl-customer-stat-label { font-size:12px; color:#64748b; margin:0 0 4px; }
.dl-customer-stat-value { font-size:28px; font-weight:700; color:#e2e8f0; margin:0; }
.dl-customer-stat-value-green { font-size:28px; font-weight:700; color:#4ade80; margin:0; }
.dl-customer-stat-value-yellow { font-size:28px; font-weight:700; color:#fbbf24; margin:0; }
.dl-customer-stat-value-blue { font-size:28px; font-weight:700; color:#60a5fa; margin:0; }

/* Loading state */
.dl-customer-loading { text-align:center; padding:40px; color:#64748b; }
.dl-customer-loading-lg { text-align:center; padding:60px; color:#64748b; }

/* Panel (card wrapper) */
.dl-customer-panel { background:#1e293b; border:1px solid #334155; border-radius:10px; overflow:hidden; }
.dl-customer-panel-pad { background:#1e293b; border:1px solid #334155; border-radius:10px; padding:20px; }

/* Table */
table.dl-customer-table { width:100%; border-collapse:collapse; font-size:13px; }
table.dl-customer-table thead tr { border-bottom:1px solid #334155; }
table.dl-customer-table th { text-align:left; padding:10px 14px; color:#64748b; font-weight:500; }
table.dl-customer-table th.dl-text-center { text-align:center; }
table.dl-customer-table th.dl-text-right { text-align:right; }
table.dl-customer-table td { padding:10px 14px; }
table.dl-customer-table td.dl-text-center { text-align:center; }
table.dl-customer-table td.dl-text-right { text-align:right; }
table.dl-customer-table td.dl-cell-primary { color:#e2e8f0; font-weight:500; }
table.dl-customer-table td.dl-cell-sub { color:#475569; font-size:11px; }
table.dl-customer-table td.dl-cell-muted { color:#94a3b8; }
table.dl-customer-table tbody tr { border-bottom:1px solid #1e293b; }
table.dl-customer-table tbody tr.dl-customer-row-hover { cursor:pointer; }
table.dl-customer-table tbody tr.dl-customer-row-hover:hover { background:#0f172a; }

/* Table (smaller padding variant) */
table.dl-customer-table-sm { width:100%; border-collapse:collapse; font-size:13px; }
table.dl-customer-table-sm thead tr { border-bottom:1px solid #334155; }
table.dl-customer-table-sm th { text-align:left; padding:8px 14px; color:#64748b; font-weight:500; }
table.dl-customer-table-sm th.dl-text-center { text-align:center; }
table.dl-customer-table-sm th.dl-text-right { text-align:right; }
table.dl-customer-table-sm td { padding:8px 14px; }
table.dl-customer-table-sm td.dl-text-center { text-align:center; }
table.dl-customer-table-sm td.dl-text-right { text-align:right; }
table.dl-customer-table-sm td.dl-cell-primary { color:#e2e8f0; }
table.dl-customer-table-sm td.dl-cell-muted { color:#94a3b8; }
table.dl-customer-table-sm td.dl-cell-mono { color:#94a3b8; font-family:monospace; }
table.dl-customer-table-sm tbody tr { border-bottom:1px solid #1e293b; }

/* Status badge (base, dynamic color via :style) */
.dl-customer-badge { padding:2px 8px; border-radius:4px; font-size:11px; font-weight:500; }
.dl-customer-badge-lg { padding:4px 12px; border-radius:6px; font-size:12px; font-weight:600; }

/* Inline elements */
.dl-customer-inline { display:inline-block; margin-right:4px; }
.dl-customer-muted-dash { color:#475569; }

/* Confirm button (green) — success variant */
button.dl-customer-btn-confirm { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #14532d; background:#031a09; color:#4ade80; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; margin-right:4px; }
button.dl-customer-btn-confirm:hover { background:#052e10; border-color:#16a34a; }
button.dl-customer-btn-confirm-lg { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:6px; border:1px solid #14532d; background:#031a09; color:#4ade80; font-size:13px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; font-weight:500; }
button.dl-customer-btn-confirm-lg:hover { background:#052e10; border-color:#16a34a; }

/* Detail link button — primary variant */
a.dl-customer-btn-detail { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #1e3a5f; background:#0c1a2e; color:#60a5fa; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; text-decoration:none; }
a.dl-customer-btn-detail:hover { background:#0f2440; border-color:#2563eb; }

/* Cancel / danger button — danger variant */
button.dl-customer-btn-cancel { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:6px; border:1px solid #7f1d1d; background:#1a0505; color:#f87171; font-size:13px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; font-weight:500; }
button.dl-customer-btn-cancel:hover { background:#2a0a0a; border-color:#dc2626; }

/* Danger confirm button (red) — danger variant */
button.dl-customer-btn-danger { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #7f1d1d; background:#1a0505; color:#f87171; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; }
button.dl-customer-btn-danger:hover { background:#2a0a0a; border-color:#dc2626; }

/* Empty state */
.dl-customer-empty { text-align:center; padding:40px; color:#475569; }
.dl-customer-empty-sm { text-align:center; padding:30px; color:#475569; font-size:13px; }
.dl-customer-no-data { color:#475569; font-size:13px; margin:0; }

/* Modal */
.dl-customer-modal-box { background:#1e293b; border:1px solid #334155; border-radius:12px; padding:24px; width:24rem; max-width:90vw; }
.dl-customer-modal-title { font-size:16px; font-weight:600; color:#fff; margin:0 0 12px; }
.dl-customer-modal-text { font-size:14px; color:#94a3b8; margin:0 0 20px; }
.dl-customer-modal-text strong { color:#e2e8f0; }
.dl-customer-modal-actions { display:flex; justify-content:flex-end; gap:8px; }

/* Back link */
a.dl-customer-back { display:inline-flex; align-items:center; gap:4px; color:#64748b; font-size:13px; text-decoration:none; margin-bottom:16px; }
a.dl-customer-back:hover { color:#e2e8f0; }

/* Detail header */
.dl-customer-detail-header { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.dl-customer-detail-title { font-size:22px; font-weight:700; color:#f1f5f9; margin:0; }
.dl-customer-detail-subtitle { font-size:13px; color:#64748b; margin:4px 0 0; }

/* Section title inside panels */
.dl-customer-section-title { font-size:14px; font-weight:600; color:#e2e8f0; margin:0 0 16px; }
.dl-customer-section-title-sm { font-size:14px; font-weight:600; color:#e2e8f0; margin:0 0 12px; }

/* Info grid (2 columns) */
.dl-customer-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:13px; }
.dl-customer-info-label { color:#64748b; }
.dl-customer-info-value { color:#e2e8f0; margin:2px 0 0; font-weight:500; }
.dl-customer-info-value-plain { color:#e2e8f0; margin:2px 0 0; }
.dl-customer-info-notes { color:#94a3b8; margin:2px 0 0; white-space:pre-line; }
.dl-customer-info-block { margin-top:12px; font-size:13px; }

/* Link (blue) */
a.dl-customer-link { color:#60a5fa; text-decoration:none; }

/* Right column flex layout */
.dl-customer-right-col { display:flex; flex-direction:column; gap:16px; }

/* Trainer row */
.dl-customer-trainer-row { display:flex; align-items:center; gap:8px; padding:6px 0; }
.dl-customer-trainer-avatar { width:28px; height:28px; background:#334155; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.dl-customer-trainer-name { color:#e2e8f0; font-size:13px; }

/* Session day row */
.dl-customer-day-row { display:flex; justify-content:space-between; padding:4px 0; font-size:13px; border-bottom:1px solid #1e293b; }
.dl-customer-day-date { color:#e2e8f0; }
.dl-customer-day-time { color:#64748b; }

/* Days column layout */
.dl-customer-days-col { display:flex; flex-direction:column; gap:4px; }

/* Actions gap row */
.dl-customer-actions-row { display:flex; gap:8px; }

/* Action message */
.dl-customer-action-msg { margin-top:8px; padding:6px 10px; border-radius:6px; font-size:13px; }

/* Panel header (with title and count) */
.dl-customer-panel-header { padding:16px 20px; border-bottom:1px solid #334155; display:flex; align-items:center; justify-content:space-between; }
.dl-customer-panel-header-simple { padding:16px 20px; border-bottom:1px solid #334155; }
.dl-customer-panel-count { color:#64748b; font-size:12px; }

/* Certificate download link */
a.dl-customer-cert-link { color:#60a5fa; text-decoration:none; font-size:12px; display:inline-flex; align-items:center; gap:4px; }

/* Info grid (2-col main layout) */
.dl-customer-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }

/* Flex-1 utility */
.dl-customer-flex-1 { flex:1; }

/* Green primary button (for confirm actions) — success variant */
button.dl-customer-btn-primary-green { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:6px; border:1px solid #14532d; background:#031a09; color:#4ade80; font-size:12px; font-family:inherit; cursor:pointer; white-space:nowrap; transition:all 0.15s; flex-shrink:0; }
button.dl-customer-btn-primary-green:hover { background:#052e10; border-color:#16a34a; }

/* Cell classes for table td without table prefix */
.dl-cell-primary { color:#e2e8f0; font-weight:500; }
.dl-cell-sub { color:#475569; font-size:11px; }
.dl-cell-muted { color:#94a3b8; }

/* === STUDENT PAGES === */

/* Student: standalone page shell (full viewport, no overflow) */
.dl-student-shell { display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; }

/* Student: guide topbar (compact) */
.dl-student-topbar { display:flex; align-items:center; padding:0 16px; height:44px; flex-shrink:0; background:#0a0f1a; border-bottom:1px solid #1e293b; font-size:13px; gap:12px; }

/* Student: back link */
a.dl-student-back { color:#94a3b8; text-decoration:none; display:flex; align-items:center; gap:4px; }

/* Student: separator */
.dl-student-sep { color:#1e293b; font-size:16px; }

/* Student: title */
.dl-student-title { color:#e2e8f0; font-weight:600; }

/* Student: guide nav buttons */
button.dl-student-nav-btn { background:none; border:1px solid #334155; border-radius:4px; color:#94a3b8; padding:2px 8px; cursor:pointer; font-size:12px; }

/* Student: page indicator */
.dl-student-page-indicator { color:#94a3b8; font-size:12px; }

/* Student: TOC button */
button.dl-student-toc-btn { background:none; border:1px solid #334155; border-radius:4px; color:#94a3b8; padding:2px 8px; cursor:pointer; font-size:12px; display:flex; align-items:center; gap:4px; }

/* Student: TOC dropdown */
.dl-student-toc-dropdown { position:absolute; right:0; top:100%; margin-top:4px; width:280px; max-height:400px; overflow-y:auto; background:#1e293b; border:1px solid #334155; border-radius:8px; box-shadow:0 25px 50px rgba(0,0,0,0.5); z-index:50; padding:4px 0; }

/* Student: TOC item */
button.dl-student-toc-item { width:100%; text-align:left; padding:6px 12px; font-size:12px; background:none; border:none; cursor:pointer; display:block; }
button.dl-student-toc-item.active { color:#e2e8f0; background:#0f172a; }
button.dl-student-toc-item:not(.active) { color:#94a3b8; }

/* Student: guide main area */
.dl-student-guide-main { flex:1; overflow:auto; padding:2rem; min-height:0; }

/* Student: guide container */
.dl-student-guide-container { max-width:900px; margin:0 auto; }

/* Student: centered message */
.dl-student-center-msg { text-align:center; padding:3rem 0; }

/* Student: retry button */
button.dl-student-retry { margin-top:8px; color:#60a5fa; cursor:pointer; background:none; border:none; text-decoration:underline; font-size:13px; }

/* Student: empty state message */
.dl-student-empty-msg { text-align:center; color:#64748b; padding:3rem 0; }

/* Student: image modal */
.dl-student-img-modal { position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:100; display:flex; align-items:center; justify-content:center; cursor:zoom-out; }
.dl-student-img-modal img { max-width:95vw; max-height:95vh; border-radius:8px; }

/* Student index: body dvh override */
.dl-student-body { height:100vh; height:100dvh; overflow:hidden; }

/* Student index: pause badge */
.dl-student-pause-badge { font-size:9px; padding:1px 5px; border-radius:8px; background:#422006; color:#f59e0b; font-weight:700; }

/* Student index: latency badge */
.dl-student-latency { font-size:10px; padding:1px 5px; border-radius:4px; font-family:Menlo,Monaco,monospace; font-weight:600; }

/* Student index: exercise badge counter */
.dl-student-exercise-count { position:absolute; top:-2px; right:-4px; background:#3b82f6; color:white; font-size:8px; padding:0 3px; border-radius:6px; font-weight:700; min-width:14px; text-align:center; line-height:14px; }

/* Student index: role badges */
a.dl-student-role-badge { font-size:10px; padding:2px 5px; text-decoration:none; opacity:0.5; }
span.dl-student-role-badge-current { font-size:10px; padding:2px 5px; opacity:1; }

/* Student index: connection cards wrapper */
.dl-student-conn-cards { display:flex; flex-wrap:wrap; gap:1rem; }

/* Student index: connection card */
.dl-student-conn-card { width:160px; padding:20px 16px; }

/* Student index: connection card icon container */
.dl-student-conn-icon { width:3rem; height:3rem; }

/* Student index: side panel tab header */
.dl-student-tab-header { height:32px; }

/* Student index: progress bar container */
.dl-student-progress-bar { width:128px; height:6px; }

/* Student index: guide error box */
.dl-student-guide-error { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3); }
.dl-student-guide-error-text { color:#f87171; font-size:0.875rem; }
.dl-student-guide-retry-link { color:#60a5fa; cursor:pointer; background:none; border:none; text-decoration:underline; }

/* Student index: exercises header */
.dl-student-exercises-header { padding:12px 16px; border-bottom:1px solid #1e293b; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; }
.dl-student-exercises-title { color:#e2e8f0; font-size:13px; font-weight:600; }

/* Student index: exercise item */
.dl-student-exercise-item { padding:10px 16px; border-bottom:1px solid #111827; display:flex; flex-direction:column; gap:6px; }

/* Student index: exercise item row */
.dl-student-exercise-row { display:flex; align-items:center; gap:8px; }

/* Student index: exercise number badge */
.dl-student-exercise-num { font-size:11px; font-weight:700; min-width:20px; text-align:center; border-radius:4px; padding:2px 0; }

/* Student index: exercise link */
a.dl-student-exercise-link { flex:1; color:#e2e8f0; font-size:13px; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Student index: exercise duration */
.dl-student-exercise-duration { color:#475569; font-size:11px; flex-shrink:0; }

/* Student index: exercise complete button */
button.dl-student-exercise-done { padding:4px 12px; background:#052e16; color:#22c55e; border:1px solid #166534; border-radius:4px; font-size:11px; cursor:pointer; font-weight:600; display:flex; align-items:center; gap:4px; }

/* Student index: exercise mark button */
button.dl-student-exercise-mark { padding:4px 12px; background:#1e3a5f; color:#60a5fa; border:1px solid #1e40af; border-radius:4px; font-size:11px; cursor:pointer; font-weight:600; display:flex; align-items:center; gap:4px; }

/* Student index: exercise list scroll container */
.dl-student-exercises-list { flex:1; overflow-y:auto; padding:8px 0; }

/* Student index: exercise footer */
.dl-student-exercises-footer { padding:8px 16px; border-top:1px solid #1e293b; flex-shrink:0; }

/* Student index: exercise footer row */
.dl-student-exercises-footer-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }

/* Student index: exercise footer label */
.dl-student-exercises-label { color:#94a3b8; font-size:12px; }
.dl-student-exercises-pct { color:#94a3b8; font-size:11px; }

/* Student index: exercise progress bar */
.dl-student-exercises-progress { height:6px; background:#1e293b; border-radius:3px; overflow:hidden; }
.dl-student-exercises-progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#3b82f6,#22c55e); transition:width 0.3s; }

/* Student index: console sidebar icon container */
.dl-student-console-icon { width:1.25rem; height:1.25rem; }

/* Student index: send text progress bar */
.dl-student-sendtext-progress-track { width:60px; height:4px; background:#1e293b; border-radius:4px; overflow:hidden; }
.dl-student-sendtext-progress-fill { height:100%; background:#3b82f6; border-radius:4px; transition:width 0.2s; }

/* Student index: send text editor layout */
.dl-student-sendtext-body { flex:1; min-height:0; display:flex; flex-direction:column; position:relative; }
.dl-student-sendtext-editor { flex:1; min-height:0; overflow:hidden; position:relative; }

/* Student index: send text inner wrapper */
.dl-student-sendtext-inner { flex:1; position:relative; overflow:hidden; }

/* Student index: send text line numbers */
.dl-student-sendtext-linenums { min-width:2.5rem; background:#0f1520; color:#475569; font:0.75rem/1.5rem 'JetBrains Mono',monospace; overflow:hidden; }

/* Student index: send text highlight overlay */
/* Student index: send text textarea (plain editable — Prism overlay removed #279) */
.dl-student-sendtext-textarea { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0.5rem 0.75rem; font:0.8125rem/1.5rem 'JetBrains Mono',monospace; tab-size:2; white-space:pre; overflow:auto; color:#cbd5e1; background:#0a0f1a; border:none; outline:none; resize:none; caret-color:#e2e8f0; }

/* Student index: send text resize handle */
.dl-student-sendtext-resize { position:absolute; bottom:0; right:0; width:20px; height:20px; cursor:nwse-resize; opacity:0.4; transition:opacity 0.15s; }
.dl-student-sendtext-resize:hover { opacity:1; }

/* Student index: settings keyboard layout select */
select.dl-student-kb-select { background:#0f172a; border:1px solid #334155; color:#e2e8f0; padding:4px 8px; border-radius:4px; font-size:12px; min-width:80px; flex-shrink:0; }

/* Student index: whiteboard LIVE button override */
.dl-student-wb-live { color:#f59e0b; border-color:#92400e; background:#1a1005; animation:wb-pulse 2s infinite; }

/* Student index: checklist page width */
.dl-student-toc-check-col { width:16px; }

/* Student index: inline flex + gap shortcuts */
.dl-student-inline-flex-gap4 { display:inline-flex; align-items:center; gap:4px; }

/* Student history: certificate link */
a.dl-student-cert-link { display:inline-block; font-size:12px; padding:2px 8px; border-radius:4px; background:rgba(34,197,94,0.15); color:#4ade80; text-decoration:none; }
a.dl-student-cert-link:hover { background:rgba(34,197,94,0.25); }

/* Student history: CSAT star row */
.dl-student-csat-stars { display:flex; align-items:center; gap:3px; }

/* Student history: CSAT star */
.dl-student-csat-star { font-size:13px; }

/* Student history: CSAT score */
.dl-student-csat-score { margin-left:2px; }

/* Student index: min-height:0 helper */
.dl-min-h-0 { min-height:0; }

/* === GUIDE CONTENT (shared between student/index and student/guide) === */
.guide-content h1 { font-size:1.5rem; font-weight:700; color:#e2e8f0; margin:1.5rem 0 0.75rem; }
.guide-content h2 { font-size:1.25rem; font-weight:600; color:#e2e8f0; margin:1.25rem 0 0.5rem; }
.guide-content h3 { font-size:1.1rem; font-weight:600; color:#e2e8f0; margin:1rem 0 0.5rem; }
.guide-content p { color:#94a3b8; margin:0.5rem 0; line-height:1.7; }
.guide-content pre { background:#0f1419; border:1px solid #2d3548; border-radius:0.5rem; padding:1rem; margin:0.75rem 0; overflow-x:auto; }
.guide-content code { font-family:'JetBrains Mono',monospace; font-size:0.85rem; }
.guide-content p code, .guide-content li code { background:#242b3d; padding:0.15rem 0.4rem; border-radius:0.25rem; color:#60a5fa; cursor:pointer; }
.guide-content p code:hover, .guide-content li code:hover { background:#2d3548; }
.guide-content ul, .guide-content ol { padding-left:1.5rem; margin:0.5rem 0; color:#94a3b8; }
.guide-content li { margin:0.25rem 0; }
.guide-content ul li { list-style:disc; }
.guide-content ol li { list-style:decimal; }
.guide-content blockquote.bq-output { border-left:3px solid #334155; padding:0.5rem 1rem; margin:0.75rem 0; background:#0b0f18; border-radius:0 0.25rem 0.25rem 0; color:#475569; font-family:'JetBrains Mono',monospace; font-size:0.82rem; line-height:1.6; }
.guide-content blockquote.bq-output p { color:#475569; }
.guide-content blockquote.bq-output code { color:#64748b; background:transparent; cursor:default; }
.guide-content blockquote.bq-output pre { background:transparent; border:none; padding:0; margin:0; }
.guide-content blockquote.bq-note { border-left:3px solid #d97706; padding:0.75rem 1rem 0.75rem 0.75rem; margin:0.75rem 0; background:rgba(217,119,6,0.08); border-radius:0 0.375rem 0.375rem 0; color:#fbbf24; font-family:inherit; font-size:0.875rem; line-height:1.6; display:flex; gap:0.5rem; align-items:flex-start; }
.guide-content blockquote.bq-note p { color:#fcd34d; margin:0; }
.guide-content blockquote.bq-note p:first-of-type { margin-top:0; }
.guide-content blockquote.bq-note code { color:#fbbf24; background:rgba(217,119,6,0.15); cursor:default; }
.guide-content .bq-note-icon { color:#d97706; margin-top:2px; }
.guide-content blockquote:not(.bq-output):not(.bq-note) { border-left:3px solid #334155; padding:0.5rem 1rem; margin:0.75rem 0; background:#0f1419; border-radius:0 0.25rem 0.25rem 0; color:#475569; font-size:0.85rem; }
.guide-content blockquote.bq-info { border-left:3px solid #3b82f6; padding:0.5rem 1rem; margin:0.75rem 0; background:rgba(59,130,246,0.06); border-radius:0 0.25rem 0.25rem 0; }
.guide-content blockquote.bq-info p { color:#93c5fd; }
.guide-content blockquote.bq-warn { border-left:3px solid #f59e0b; padding:0.5rem 1rem; margin:0.75rem 0; background:rgba(245,158,11,0.06); border-radius:0 0.25rem 0.25rem 0; }
.guide-content blockquote.bq-warn p { color:#fcd34d; }
.guide-content a { color:#60a5fa; text-decoration:underline; }
.guide-content img { max-width:100%; border-radius:0.5rem; margin:0.75rem 0; cursor:pointer; }
.guide-content table { width:100%; border-collapse:collapse; margin:0.75rem 0; }
.guide-content th, .guide-content td { border:1px solid #2d3548; padding:0.5rem; }
.guide-content th { background:#242b3d; color:#e2e8f0; }
/* Guide lightbox overlay */
.guide-img-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:200; display:flex; align-items:center; justify-content:center; cursor:zoom-out; }
.guide-img-overlay img { max-width:95vw; max-height:90vh; border-radius:0.5rem; box-shadow:0 25px 50px rgba(0,0,0,0.5); }
/* Copy/Type buttons */
.copy-btn { position:sticky; float:right; top:0.5rem; right:0.5rem; z-index:1; }
.type-btn { position:sticky; float:right; top:0.5rem; right:0.5rem; z-index:1; margin-right:4px; }
/* Always-visible scrollbar for guide */
.guide-scroll { overflow-y:scroll !important; scrollbar-width:thin; scrollbar-color:#334155 #0f172a; }
.guide-scroll::-webkit-scrollbar { width:8px; }
.guide-scroll::-webkit-scrollbar-track { background:#0f172a; }
.guide-scroll::-webkit-scrollbar-thumb { background:#334155; border-radius:4px; min-height:40px; }
.guide-scroll::-webkit-scrollbar-thumb:hover { background:#475569; }

/* === TRAINER HISTORY === */
.dl-trainer-search-wrap { width:280px; }
.dl-trainer-search-input { width:100%; background:#0f172a; border:1px solid #334155; border-radius:6px; padding:8px 12px 8px 36px; font-size:13px; color:#e2e8f0; outline:none; }
.dl-trainer-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#64748b; }
.dl-trainer-badge-pill { font-size:11px; padding:2px 8px; border-radius:9999px; }
a.dl-trainer-cert-link { font-size:11px; padding:2px 8px; border-radius:4px; background:rgba(34,197,94,0.15); color:#4ade80; text-decoration:none; }
a.dl-trainer-cert-link:hover { background:rgba(34,197,94,0.25); }

/* === TRAINER COURSE DETAIL === */
.dl-trainer-fullscreen { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction:column; overflow:hidden; }
.dl-trainer-course-info { display:inline-flex; align-items:center; gap:10px; padding:0 8px 0 4px; flex-shrink:0; }
.dl-trainer-course-name { color:#e2e8f0; font-weight:600; font-size:13px; }
.dl-trainer-online-pill { display:inline-flex; align-items:center; gap:3px; font-size:11px; padding:2px 8px; border-radius:10px; background:#0c1220; border:1px solid #1e293b; }
.dl-trainer-online-count { color:#22c55e; font-weight:600; }
.dl-trainer-online-sep { color:#334155; }
.dl-trainer-online-total { color:#64748b; }
.dl-trainer-badge-countdown-green { font-size:9px; padding:1px 5px; border-radius:8px; background:#052e16; color:#22c55e; font-weight:700; }
.dl-trainer-badge-countdown-amber { font-size:9px; padding:1px 5px; border-radius:8px; background:#422006; color:#f59e0b; font-weight:700; }
.dl-trainer-badge-countdown-red { font-size:9px; padding:1px 5px; border-radius:8px; background:#7f1d1d; color:#ef4444; font-weight:700; }
.dl-trainer-badge-countdown-blue { font-size:9px; padding:1px 5px; border-radius:8px; background:#1e3a5f; color:#60a5fa; font-weight:700; }
.dl-trainer-vsphere-group { display:inline-flex; align-items:center; gap:2px; flex-shrink:0; }
.dl-trainer-vsphere-label { color:#475569; font-size:10px; padding:0 4px; }
.dl-trainer-vm-btn { background:none; border:none; cursor:pointer; padding:2px; display:flex; align-items:center; color:#334155; border-radius:2px; }
.dl-trainer-vm-btn.dl-trainer-vm-start:hover { color:#22c55e; }
.dl-trainer-vm-btn.dl-trainer-vm-shutdown:hover { color:#f59e0b; }
.dl-trainer-vm-btn.dl-trainer-vm-reset:hover { color:#ef4444; }
.dl-trainer-vm-start-hover:hover { color:#22c55e; }
.dl-trainer-vm-shutdown-hover:hover { color:#f59e0b; }
.dl-trainer-vm-reset-hover:hover { color:#ef4444; }
.dl-trainer-spacer { flex:1; }
.dl-trainer-main-area { flex:1; display:flex; overflow:hidden; min-height:0; }
.dl-trainer-sidebar-section { padding:12px 14px; border-bottom:1px solid #1e293b; flex-shrink:0; position:relative; }
.dl-trainer-sidebar-controls { padding:8px 14px; border-bottom:1px solid #1e293b; flex-shrink:0; display:flex; align-items:center; gap:8px; }
.dl-trainer-sidebar-btn-flex { flex:1; justify-content:center; padding:7px 0; font-size:12px; gap:6px; }
.dl-trainer-student-list { flex:1; overflow-y:auto; padding:6px 0; }
.dl-trainer-student-row { display:flex; align-items:center; padding:8px 14px; cursor:pointer; user-select:none; gap:10px; border-bottom:1px solid #111827; }
.dl-trainer-avatar { width:32px; height:32px; min-width:32px; min-height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; text-transform:uppercase; line-height:1; }
.dl-trainer-student-info { flex:1; min-width:0; }
.dl-trainer-student-name { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2; }
.dl-trainer-student-status-line { font-size:11px; margin-top:2px; display:flex; align-items:center; gap:5px; }
.dl-trainer-status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.dl-trainer-mid-sep { color:#334155; }
.dl-trainer-conn-count { color:#64748b; }
.dl-trainer-chevron { width:14px; height:14px; flex-shrink:0; transition:transform 0.15s; overflow:hidden; }
.dl-trainer-conn-tree { padding:4px 14px 8px 54px; background:#0a0f1a; border-bottom:1px solid #111827; }
.dl-trainer-conn-row { display:flex; align-items:center; padding:6px 10px; cursor:pointer; gap:8px; margin-top:2px; border-radius:6px; }
.dl-trainer-conn-icon { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex-shrink:0; }
.dl-trainer-conn-label { flex:1; font-size:12px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-trainer-vm-actions { display:inline-flex; align-items:center; gap:2px; flex-shrink:0; margin-left:auto; }
.dl-trainer-empty-state { padding:40px 16px; text-align:center; }
.dl-trainer-empty-icon { color:#334155; margin:0 auto 12px; }
.dl-trainer-empty-text { color:#64748b; font-size:13px; }
.dl-trainer-no-results { padding:24px 16px; text-align:center; color:#64748b; font-size:13px; }
.dl-trainer-sidebar-footer { border-top:1px solid #1e293b; padding:8px 12px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; }
.dl-trainer-version { font-size:11px; color:#94a3b8; font-weight:500; }
.dl-trainer-clock-wrap { display:flex; align-items:center; gap:6px; }
.dl-trainer-clock-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#22c55e; animation:tr-pulse 2.5s ease-in-out infinite; }
.dl-trainer-clock-time { font-size:11px; color:#94a3b8; }
.dl-trainer-display-panel { flex:1; display:flex; flex-direction:column; background:#040609; min-width:0; min-height:0; position:relative; }
.dl-trainer-edge-left { left:0; border-radius:0 4px 4px 0; }
.dl-trainer-edge-right { right:0; border-radius:4px 0 0 4px; }
.dl-trainer-placeholder-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; }
.dl-trainer-placeholder-bg { position:absolute; inset:0; opacity:0.3; }
.dl-trainer-placeholder-content { text-align:center; position:relative; z-index:1; }
.dl-trainer-placeholder-text { color:#475569; font-size:12px; font-family:'Menlo','Monaco','Consolas',monospace; font-weight:500; }
.dl-trainer-placeholder-hint { color:#334155; font-size:10px; font-family:'Menlo','Monaco','Consolas',monospace; margin-top:8px; }
.dl-trainer-loading-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:3; background:rgba(4,6,9,0.85); }
.dl-trainer-loading-content { text-align:center; }
.dl-trainer-loading-spinner { margin:0 auto 16px; animation:tr-spin 1s linear infinite; }
.dl-trainer-loading-label { color:#60a5fa; font-size:12px; font-family:'Menlo','Monaco','Consolas',monospace; font-weight:600; }
.dl-trainer-loading-sublabel { color:#334155; font-size:10px; font-family:'Menlo','Monaco','Consolas',monospace; margin-top:6px; }
.dl-trainer-toolbar { display:flex; align-items:center; gap:0; height:32px; border-bottom:1px solid #111827; flex-shrink:0; font-family:'Menlo','Monaco','Consolas',monospace; font-size:11px; transition:opacity 0.15s; background:#060a12; position:relative; z-index:10; }
.dl-trainer-toolbar-section { display:flex; align-items:center; gap:6px; padding:0 10px; height:100%; border-right:1px solid #111827; }
.dl-trainer-toolbar-status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; transition:all 0.3s; }
.dl-trainer-toolbar-connecting { color:#eab308; font-size:10px; }
.dl-trainer-toolbar-error { color:#ef4444; font-size:10px; }
.dl-trainer-toolbar-label-section { display:flex; align-items:center; gap:8px; padding:0 10px; height:100%; flex:1; min-width:0; }
.dl-trainer-toolbar-label { color:#cbd5e1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-trainer-badge-live { background:#7f1d1d; color:#fef2f2; font-size:11px; padding:3px 8px; border-radius:3px; font-weight:700; letter-spacing:0.06em; border:1px solid #991b1b; flex-shrink:0; }
.dl-trainer-badge-direct { background:#064e3b; color:#d1fae5; font-size:11px; padding:3px 8px; border-radius:3px; font-weight:700; letter-spacing:0.06em; border:1px solid #065f46; flex-shrink:0; }
.dl-trainer-badge-live-ro { background:#374151; color:#e5e7eb; font-size:11px; padding:3px 8px; border-radius:3px; font-weight:700; letter-spacing:0.06em; border:1px solid #4b5563; flex-shrink:0; }
.dl-trainer-badge-vsphere { background:#1e3a8a; color:#dbeafe; font-size:11px; padding:3px 8px; border-radius:3px; font-weight:700; letter-spacing:0.06em; border:1px solid #1e40af; flex-shrink:0; }
/* Per-connection observe buttons (#304): 3-button mutual exclusion in the student sidebar. */
.dl-trainer-observe-actions { display:inline-flex; align-items:center; gap:3px; flex-shrink:0; margin-left:auto; }
.dl-trainer-btn-share-rw, .dl-trainer-btn-share-ro, .dl-trainer-btn-direct { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; letter-spacing:0.04em; padding:2px 6px; border-radius:3px; border:1px solid transparent; cursor:pointer; line-height:1; transition:background 0.12s, border-color 0.12s; }
.dl-trainer-btn-share-rw { background:#7f1d1d; color:#fef2f2; border-color:#991b1b; }
.dl-trainer-btn-share-rw:hover { background:#991b1b; border-color:#b91c1c; }
.dl-trainer-btn-share-ro { background:#374151; color:#e5e7eb; border-color:#4b5563; }
.dl-trainer-btn-share-ro:hover { background:#4b5563; border-color:#6b7280; }
.dl-trainer-btn-direct { background:#064e3b; color:#d1fae5; border-color:#065f46; }
.dl-trainer-btn-direct:hover { background:#065f46; border-color:#047857; }
.dl-trainer-vm-btn.dl-trainer-vm-observe:hover { color:#60a5fa; }
.dl-trainer-kick-btn { background:#7c2d12; color:#fff5ec; font-size:11px; padding:3px 8px; border-radius:3px; font-weight:600; border:1px solid #9a3412; cursor:pointer; flex-shrink:0; margin-left:4px; transition:background 0.15s; }
.dl-trainer-kick-btn:hover { background:#9a3412; }
.dl-trainer-kick-btn:disabled { opacity:0.5; cursor:wait; }
.dl-trainer-toolbar-duration { color:#334155; font-size:9px; flex-shrink:0; }
.dl-trainer-toolbar-actions { display:flex; align-items:center; height:100%; border-left:1px solid #111827; }
.dl-trainer-toolbar-action-btn { background:none; border:none; border-right:1px solid #111827; cursor:pointer; padding:0 10px; height:100%; display:flex; align-items:center; color:#334155; }
.dl-trainer-toolbar-action-btn:hover { color:#64748b; }
.dl-trainer-toolbar-guide-btn { background:none; border:none; border-right:1px solid #111827; cursor:pointer; font-size:10px; font-family:inherit; padding:0 10px; height:100%; display:inline-flex; align-items:center; gap:4px; }
.dl-trainer-toolbar-guide-badge { font-size:8px; padding:1px 4px; border-radius:2px; background:#1e3a5f; color:#60a5fa; font-weight:700; }
.dl-trainer-toolbar-close-btn { color:#7f1d1d; background:none; border:none; cursor:pointer; padding:0 10px; height:100%; display:flex; align-items:center; gap:4px; font-size:10px; font-family:inherit; }
.dl-trainer-toolbar-close-btn:hover { color:#ef4444; background:#7f1d1d15; }
.dl-trainer-content-area { flex:1; display:flex; overflow:hidden; min-height:0; }
#observe-display.dl-trainer-canvas { flex:1; overflow:hidden; background:#040609; min-height:0; user-select:none; -webkit-user-select:none; }
/* vSphere WMKS inner container (#200) — fills the parent display area with a black background */
.vsphere-wmks-container { width:100%; height:100%; background:#000; }
.dl-trainer-guide-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid #111827; flex-shrink:0; }
.dl-trainer-guide-header-left { display:flex; align-items:center; gap:8px; }
.dl-trainer-guide-icon { color:#60a5fa; }
.dl-trainer-guide-title { color:#e2e8f0; font-size:13px; font-weight:600; }
.dl-trainer-guide-close { color:#64748b; background:none; border:none; cursor:pointer; padding:2px; display:flex; align-items:center; }
.dl-trainer-guide-nav { display:flex; align-items:center; justify-content:space-between; padding:6px 12px; border-bottom:1px solid #111827; flex-shrink:0; font-size:12px; font-family:'Menlo','Monaco','Consolas',monospace; }
.dl-trainer-guide-nav-left { display:flex; align-items:center; gap:6px; }
.dl-trainer-guide-page-btn { background:none; border:1px solid #1e293b; color:#94a3b8; cursor:pointer; padding:3px 8px; border-radius:4px; font-size:12px; font-family:inherit; }
.dl-trainer-guide-page-label { color:#94a3b8; font-weight:600; min-width:50px; text-align:center; }
.dl-trainer-guide-sync { display:flex; align-items:center; gap:6px; }
.dl-trainer-guide-sync-label { color:#475569; font-size:10px; }
.dl-trainer-guide-stu-btn { background:none; border:1px solid #1e293b; color:#64748b; cursor:pointer; padding:1px 6px; border-radius:3px; font-size:9px; font-family:inherit; }
.dl-trainer-guide-sync-btn { background:#1e3a5f; border:1px solid #1e40af; color:#60a5fa; cursor:pointer; padding:1px 8px; border-radius:3px; font-size:9px; font-family:inherit; font-weight:700; }
.dl-trainer-guide-body { flex:1; overflow-y:auto; min-height:0; padding:16px; font-size:14px; line-height:1.7; }
.dl-trainer-guide-loading { flex:1; display:flex; align-items:center; justify-content:center; }
.dl-trainer-guide-loading-inner { text-align:center; }
.dl-trainer-guide-loading-text { color:#334155; font-size:11px; font-family:'Menlo','Monaco','Consolas',monospace; }
.dl-trainer-exercise-header { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid #1e293b; flex-shrink:0; cursor:move; user-select:none; }
.dl-trainer-exercise-header-left { display:flex; align-items:center; gap:10px; }
.dl-trainer-exercise-title { color:#f1f5f9; font-size:14px; font-weight:600; }
.dl-trainer-exercise-status-running { font-size:11px; padding:2px 8px; border-radius:4px; background:#052e16; color:#22c55e; font-weight:700; font-family:'Menlo',monospace; }
.dl-trainer-exercise-status-paused { font-size:10px; padding:2px 8px; border-radius:4px; background:#422006; color:#f59e0b; font-weight:700; }
.dl-trainer-exercise-status-paused-time { font-size:11px; padding:2px 8px; border-radius:4px; background:#1c1917; color:#f59e0b; font-weight:700; font-family:'Menlo',monospace; }
.dl-trainer-exercise-status-expired { font-size:10px; padding:2px 8px; border-radius:4px; background:#7f1d1d; color:#ef4444; font-weight:700; }
.dl-trainer-panel-close { color:#64748b; background:none; border:none; cursor:pointer; padding:4px; display:flex; align-items:center; }
.dl-trainer-exercise-body { flex:1; overflow-y:auto; padding:16px; min-height:0; }
.dl-trainer-exercise-intro { color:#94a3b8; font-size:13px; margin-bottom:14px; line-height:1.5; }
.dl-trainer-exercise-empty { text-align:center; padding:24px; color:#64748b; font-size:13px; }
.dl-trainer-exercise-open-guide { margin-top:8px; color:#60a5fa; background:none; border:none; cursor:pointer; text-decoration:underline; font-size:13px; }
.dl-trainer-exercise-list { display:flex; flex-direction:column; gap:5px; }
.dl-trainer-exercise-page { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:6px; border:1px solid #1e293b; background:#0a0f1a; }
.dl-trainer-exercise-check { accent-color:#3b82f6; width:16px; height:16px; cursor:pointer; flex-shrink:0; }
.dl-trainer-exercise-page-name { flex:1; color:#e2e8f0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.4; }
.dl-trainer-exercise-time-wrap { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.dl-trainer-exercise-time-input { width:48px; background:#1e293b; border:1px solid #334155; color:#f1f5f9; border-radius:4px; padding:3px 6px; font-size:12px; text-align:center; }
.dl-trainer-exercise-time-label { color:#94a3b8; font-size:11px; }
.dl-trainer-exercise-deadline { color:#60a5fa; font-size:11px; font-family:'Menlo',monospace; min-width:38px; text-align:right; }
.dl-trainer-exercise-item { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:6px; background:#0a0f1a; border:1px solid #1e293b; }
.dl-trainer-exercise-item-num { color:#3b82f6; font-size:12px; font-weight:700; min-width:20px; text-align:center; }
.dl-trainer-exercise-item-name { flex:1; color:#e2e8f0; font-size:13px; line-height:1.4; }
.dl-trainer-exercise-item-duration { color:#94a3b8; font-size:12px; flex-shrink:0; }
.dl-trainer-exercise-items-list { display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.dl-trainer-exercise-total { display:flex; align-items:center; gap:8px; margin-bottom:14px; color:#94a3b8; font-size:13px; }
.dl-trainer-exercise-actions { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.dl-trainer-btn-start { padding:8px 20px; background:#22c55e; color:white; border:none; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; }
.dl-trainer-btn-delete { padding:8px 16px; background:#7f1d1d; color:#ef4444; border:1px solid #991b1b; border-radius:6px; font-size:13px; cursor:pointer; }
.dl-trainer-btn-pause { padding:8px 20px; background:#92400e; color:#fbbf24; border:none; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; }
.dl-trainer-btn-resume { padding:8px 20px; background:#22c55e; color:white; border:none; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; }
.dl-trainer-btn-new-assignment { padding:8px 20px; background:#3b82f6; color:white; border:none; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; }
.dl-trainer-exercise-pause-col { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.dl-trainer-exercise-adjust-row { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:6px; background:#0a0f1a; border:1px solid #1e293b; }
.dl-trainer-exercise-adjust-label { color:#94a3b8; font-size:12px; white-space:nowrap; }
.dl-trainer-exercise-adjust-input { width:60px; padding:4px 8px; background:#111827; border:1px solid #334155; border-radius:4px; color:#f1f5f9; font-size:13px; text-align:center; }
.dl-trainer-exercise-adjust-unit { color:#94a3b8; font-size:12px; }
.dl-trainer-exercise-adjust-btn { padding:4px 14px; background:#1e3a5f; color:#60a5fa; border:1px solid #1e40af; border-radius:4px; font-size:12px; cursor:pointer; font-weight:600; }
.dl-trainer-exercise-summary-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.dl-trainer-exercise-summary-title { color:#f1f5f9; font-size:14px; font-weight:600; }
.dl-trainer-exercise-refresh { color:#60a5fa; background:none; border:none; cursor:pointer; font-size:11px; text-decoration:underline; }
.dl-trainer-exercise-table-wrap { overflow-x:auto; }
table.dl-trainer-exercise-table { width:100%; border-collapse:collapse; font-size:12px; }
table.dl-trainer-exercise-table thead tr { border-bottom:2px solid #334155; }
table.dl-trainer-exercise-table th { padding:6px 8px; color:#94a3b8; font-weight:600; }
table.dl-trainer-exercise-table th.dl-text-left { text-align:left; }
table.dl-trainer-exercise-table th.dl-text-center { text-align:center; }
table.dl-trainer-exercise-table th.dl-trainer-th-ex { text-align:center; padding:6px 4px; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.dl-trainer-exercise-table tbody tr { border-bottom:1px solid #1e293b; }
table.dl-trainer-exercise-table td { padding:6px 8px; color:#e2e8f0; }
table.dl-trainer-exercise-table td.dl-text-center { text-align:center; padding:6px 4px; font-size:14px; }
table.dl-trainer-exercise-table td.dl-trainer-td-total { text-align:center; padding:6px 8px; color:#94a3b8; font-size:11px; }
.dl-trainer-exercise-no-data { text-align:center; padding:16px; color:#64748b; font-size:12px; }
.dl-trainer-exercise-expired-section { margin-top:14px; padding-top:14px; border-top:1px solid #1e293b; text-align:center; }
.dl-trainer-exercise-footer { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-top:1px solid #1e293b; flex-shrink:0; background:#0c1220; border-radius:0 0 10px 10px; }
.dl-trainer-exercise-footer-total { color:#94a3b8; font-size:13px; }
.dl-trainer-exercise-footer-total strong { color:#f1f5f9; }
.dl-trainer-btn-assign { padding:8px 24px; background:#3b82f6; color:white; border:none; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; }
.dl-trainer-resize-corner { position:absolute; bottom:0; right:0; width:16px; height:16px; cursor:nwse-resize; z-index:1; }
.dl-trainer-survey-panel { position:absolute; top:0; right:0; bottom:0; width:420px; background:#0f172a; border-left:1px solid #1e293b; z-index:40; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; }
.dl-trainer-survey-header { display:flex; justify-content:space-between; align-items:center; }
.dl-trainer-survey-h3 { font-size:16px; font-weight:600; color:#f1f5f9; }
.dl-trainer-survey-close { background:none; border:none; color:#64748b; cursor:pointer; font-size:18px; }
.dl-trainer-survey-send-btn { width:100%; padding:10px; border-radius:8px; border:1px solid #334155; background:#1e293b; color:#e2e8f0; font-size:14px; cursor:pointer; transition:all .15s; }
.dl-trainer-survey-send-btn:hover { border-color:#3b82f6; }
.dl-trainer-survey-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dl-trainer-survey-stat-card { background:#1e293b; border:1px solid #334155; border-radius:8px; padding:12px; text-align:center; }
.dl-trainer-survey-stat-value { font-size:20px; font-weight:700; color:#f1f5f9; }
.dl-trainer-survey-stat-label { font-size:11px; color:#64748b; }
.dl-trainer-survey-empty { text-align:center; color:#64748b; font-size:14px; padding:20px 0; }
.dl-trainer-survey-result { background:#1e293b; border:1px solid #334155; border-radius:8px; padding:12px; }
.dl-trainer-survey-result-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.dl-trainer-survey-result-text { font-size:13px; color:#e2e8f0; font-weight:500; }
.dl-trainer-survey-role-badge { font-size:10px; padding:2px 6px; border-radius:4px; }
.dl-trainer-survey-rating-row { display:flex; align-items:center; gap:6px; }
.dl-trainer-survey-star { font-size:16px; }
.dl-trainer-survey-avg { color:#f1f5f9; font-weight:700; font-size:13px; }
.dl-trainer-survey-count { color:#64748b; font-size:11px; }
.dl-trainer-survey-yesno { display:flex; gap:12px; font-size:13px; }
.dl-trainer-survey-yes { color:#22c55e; }
.dl-trainer-survey-no { color:#ef4444; }
.dl-trainer-survey-comment { background:#0f172a; border-left:3px solid #334155; padding:6px 10px; margin-top:4px; border-radius:0 4px 4px 0; font-size:13px; color:#cbd5e1; }
.dl-trainer-csat-section { margin-top:20px; border-top:1px solid #1e293b; padding-top:16px; }
.dl-trainer-csat-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.dl-trainer-csat-h4 { font-size:14px; font-weight:600; color:#f1f5f9; }
.dl-trainer-csat-refresh { background:none; border:1px solid #334155; color:#94a3b8; cursor:pointer; padding:4px 10px; border-radius:6px; font-size:11px; }
.dl-trainer-csat-refresh:hover { border-color:#3b82f6; }
.dl-trainer-csat-loading { text-align:center; color:#64748b; font-size:13px; padding:12px 0; }
.dl-trainer-csat-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px; }
.dl-trainer-csat-card { background:#1e293b; border:1px solid #334155; border-radius:8px; padding:10px; text-align:center; }
.dl-trainer-csat-value-row { display:flex; align-items:center; justify-content:center; gap:3px; }
.dl-trainer-csat-value { font-size:18px; font-weight:700; color:#f1f5f9; }
.dl-trainer-csat-star { color:#fbbf24; font-size:16px; }
.dl-trainer-csat-label { font-size:10px; color:#64748b; margin-top:2px; }
.dl-trainer-csat-total { color:#64748b; font-size:11px; text-align:center; }
.dl-trainer-csat-empty { text-align:center; color:#64748b; font-size:13px; padding:12px 0; }
.dl-trainer-latency-panel { right:16px; top:80px; width:520px; max-height:60vh; background:#111827; border:1px solid #334155; border-radius:10px; box-shadow:0 25px 60px rgba(0,0,0,0.7); display:flex; flex-direction:column; font-family:-apple-system,BlinkMacSystemFont,sans-serif; }
.dl-trainer-latency-header { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid #1e293b; flex-shrink:0; }
.dl-trainer-latency-header-left { display:flex; align-items:center; gap:8px; }
.dl-trainer-latency-title { color:#f1f5f9; font-size:14px; font-weight:600; }
.dl-trainer-latency-header-right { display:flex; align-items:center; gap:8px; }
.dl-trainer-latency-refresh { color:#60a5fa; background:none; border:none; cursor:pointer; font-size:11px; text-decoration:underline; }
.dl-trainer-latency-body { flex:1; overflow-y:auto; padding:12px; }
.dl-trainer-latency-loading { text-align:center; padding:20px; color:#64748b; font-size:13px; }
.dl-trainer-latency-empty { text-align:center; padding:20px; color:#64748b; font-size:13px; }
table.dl-trainer-latency-table { width:100%; border-collapse:collapse; font-size:12px; }
table.dl-trainer-latency-table thead tr { border-bottom:2px solid #334155; }
table.dl-trainer-latency-table th { padding:6px 8px; color:#94a3b8; font-weight:600; }
table.dl-trainer-latency-table th.dl-text-left { text-align:left; }
table.dl-trainer-latency-table th.dl-text-center { text-align:center; }
table.dl-trainer-latency-table tbody tr { border-bottom:1px solid #1e293b; }
table.dl-trainer-latency-table td { padding:6px 8px; }
table.dl-trainer-latency-table td.dl-trainer-td-name { color:#e2e8f0; font-weight:500; }
table.dl-trainer-latency-table td.dl-text-center { text-align:center; }
.dl-trainer-latency-mono { text-align:center; padding:6px 8px; color:#94a3b8; font-size:11px; font-family:Menlo,monospace; }
.dl-trainer-latency-proto { font-size:10px; padding:1px 4px; border-radius:3px; background:rgba(100,116,139,0.15); color:#94a3b8; text-transform:uppercase; }
.dl-trainer-latency-note { color:#475569; font-size:10px; margin-top:12px; line-height:1.4; }
.dl-trainer-break-overlay { display:flex; flex-direction:column; align-items:center; justify-content:center; position:fixed; inset:0; z-index:200; background:#060a12; }
.dl-trainer-break-setup { text-align:center; width:100%; max-width:700px; padding:20px; }
.dl-trainer-break-logo { width:380px; margin:0 auto 20px; display:block; }
.dl-trainer-break-course-title { color:#e2e8f0; font-size:40px; font-weight:800; margin-bottom:6px; letter-spacing:-0.01em; }
.dl-trainer-break-subtitle { color:#475569; font-size:14px; margin-bottom:48px; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; }
.dl-trainer-break-inputs { display:flex; gap:32px; justify-content:center; align-items:center; margin-bottom:24px; }
.dl-trainer-break-input-group { text-align:center; }
.dl-trainer-break-input-label { color:#64748b; font-size:12px; font-weight:600; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.05em; }
.dl-trainer-break-btn-round { width:40px; height:40px; border-radius:10px; background:#1e293b; border:1px solid #334155; color:#e2e8f0; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-weight:700; }
.dl-trainer-break-stepper { display:flex; align-items:center; gap:10px; justify-content:center; }
.dl-trainer-break-minutes-input { width:80px; font-size:40px; text-align:center; background:#111827; border:2px solid #334155; color:#f1f5f9; border-radius:10px; padding:6px 0; font-weight:700; font-family:'Menlo','Monaco',monospace; -moz-appearance:textfield; }
.dl-trainer-break-time-input { font-size:40px; text-align:center; background:#111827; border:2px solid #334155; color:#f1f5f9; border-radius:10px; padding:6px 12px; font-weight:700; font-family:'Menlo','Monaco',monospace; cursor:pointer; }
.dl-trainer-break-unit-label { color:#475569; font-size:12px; margin-top:6px; }
.dl-trainer-break-separator { color:#475569; font-size:16px; font-weight:500; }
.dl-trainer-break-preview { color:#60a5fa; font-size:22px; margin-bottom:40px; font-weight:600; }
.dl-trainer-break-preview-detail { color:#475569; margin-left:8px; font-size:16px; }
.dl-trainer-break-buttons { display:flex; gap:12px; justify-content:center; }
.dl-trainer-break-start-btn { padding:14px 48px; background:#22c55e; color:#fff; border:none; border-radius:10px; font-size:16px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:8px; transition:background 0.15s; }
.dl-trainer-break-start-btn:hover { background:#16a34a; }
.dl-trainer-break-cancel-btn { padding:14px 32px; background:transparent; color:#64748b; border:1px solid #334155; border-radius:10px; font-size:14px; cursor:pointer; transition:all 0.15s; }
.dl-trainer-break-cancel-btn:hover { color:#94a3b8; border-color:#475569; }
.dl-trainer-break-countdown { display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; height:100%; }
.dl-trainer-break-topbar { width:100%; display:flex; align-items:center; padding:12px 20px; gap:12px; flex-shrink:0; }
.dl-trainer-break-back-btn { width:40px; height:40px; border-radius:8px; background:#1e293b; border:1px solid #334155; color:#94a3b8; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.15s; }
.dl-trainer-break-back-btn:hover { color:#f1f5f9; }
.dl-trainer-break-topbar-logo { height:32px; opacity:0.6; }
.dl-trainer-break-topbar-course { color:#64748b; font-size:14px; font-weight:600; }
.dl-trainer-break-paused-indicator { margin-left:auto; color:#eab308; font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
.dl-trainer-break-center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:0; }
.dl-trainer-break-controls { padding-bottom:48px; display:flex; gap:16px; justify-content:center; align-items:center; flex-shrink:0; }
.dl-trainer-break-circle-btn { width:64px; height:64px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.dl-trainer-break-extend-btn { width:64px; height:64px; border-radius:50%; background:#1e293b; color:#60a5fa; border:1px solid #1e3a5f; cursor:pointer; font-size:18px; font-weight:800; font-family:Menlo,monospace; transition:all 0.15s; }
.dl-trainer-break-extend-btn:hover { background:#0f1a2e; }
.dl-trainer-break-extend-btn-sm { font-size:17px; }
.dl-trainer-break-restart-btn { width:64px; height:64px; border-radius:50%; background:#1e293b; color:#eab308; border:1px solid #854d0e; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.dl-trainer-break-stop-btn { width:64px; height:64px; border-radius:50%; background:#7f1d1d; color:#ef4444; border:1px solid #991b1b; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.dl-trainer-exercise-total strong { color:#f1f5f9; }
.dl-no-underline { text-decoration:none; }
.dl-trainer-placeholder-icon { width:40px; height:40px; color:#334155; margin:0 auto 14px; }
.dl-trainer-spinner-lg { width:40px; height:40px; }
.dl-trainer-spinner-md { width:24px; height:24px; color:#334155; }
svg.icon-xxl { width:28px; height:28px; }
svg.icon-2xl { width:32px; height:32px; }
.dl-trainer-resize-grip { width:16px; height:16px; opacity:0.3; }
.dl-color-amber { color:#f59e0b; }
.dl-trainer-search-icon-sidebar { left:24px; }

/* ============================================================================
   STATE-DRIVEN CLASSES — replacement for previously dynamic :style bindings
   ============================================================================ */

/* --- Status badges (green/red/amber/blue/slate) --- */
.dl-badge-status-sent { background:rgba(34,197,94,0.15); color:#4ade80; }
.dl-badge-status-failed { background:rgba(239,68,68,0.15); color:#f87171; }
.dl-badge-status-queued { background:rgba(59,130,246,0.15); color:#60a5fa; }
.dl-badge-status-muted { background:rgba(100,116,139,0.15); color:#94a3b8; }
.dl-badge-status-provisional { background:rgba(234,179,8,0.15); color:#facc15; }
.dl-badge-status-provisioned { background:rgba(34,197,94,0.15); color:#4ade80; }
.dl-badge-status-completed { background:rgba(148,163,184,0.15); color:#94a3b8; }
.dl-badge-status-pending { background:rgba(234,179,8,0.15); color:#facc15; }

/* --- Role badges --- */
.dl-badge-role-trainer { background:rgba(168,85,247,0.15); color:#c084fc; }
.dl-badge-role-students { background:rgba(59,130,246,0.15); color:#60a5fa; }
.dl-badge-role-student { background:rgba(34,197,94,0.15); color:#4ade80; }
.dl-badge-role-group { background:rgba(59,130,246,0.15); color:#60a5fa; }
.dl-badge-role-active { background:rgba(59,130,246,0.15); color:#60a5fa; }
.dl-badge-role-inactive { background:rgba(148,163,184,0.1); color:#64748b; }

/* --- Base role pills (iam) --- */
.dl-role-pill-admin { background:#7f1d1d; color:#fca5a5; }
.dl-role-pill-trainer { background:#1e3a5f; color:#60a5fa; }
.dl-role-pill-client { background:#052e16; color:#86efac; }
.dl-role-pill-generic { background:#1e293b; color:#94a3b8; }

/* --- Question type badges (survey) --- */
.dl-badge-qtype-rating { background:rgba(59,130,246,0.15); color:#60a5fa; }
.dl-badge-qtype-yesno { background:rgba(168,85,247,0.15); color:#c084fc; }
.dl-badge-qtype-text { background:rgba(34,197,94,0.15); color:#4ade80; }

/* --- Email trigger type badges --- */
.dl-badge-trigger-before { background:rgba(59,130,246,0.15); color:#60a5fa; }
.dl-badge-trigger-after { background:rgba(168,85,247,0.15); color:#c084fc; }
.dl-badge-trigger-event { background:rgba(34,197,94,0.15); color:#4ade80; }
.dl-badge-trigger-default { background:rgba(100,116,139,0.15); color:#94a3b8; }

/* --- Stepper / wizard steps --- */
.dl-step { background:#1e293b; border-color:#334155; color:#64748b; }
.dl-step-active { background:#1e3a5f; border-color:#2563eb; color:#fff; }
.dl-step-done { background:#0f172a; border-color:#22c55e; color:#22c55e; }
.dl-step-pending { background:#1e293b; border-color:#334155; color:#64748b; }

/* --- Toggle buttons (pill segmented) --- */
.dl-toggle-on { background:#1e293b; color:#e2e8f0; box-shadow:0 1px 3px rgba(0,0,0,0.3); }
.dl-toggle-off { background:transparent; color:#94a3b8; }
.dl-toggle-on-bordered { background:#1e293b; color:#e2e8f0; border:1px solid #475569; }
.dl-toggle-off-bordered { background:transparent; color:#94a3b8; }
.dl-toggle-off-bordered-dim { background:transparent; color:#64748b; }
.dl-toggle-cal-on { background:#1e293b; color:#e2e8f0; box-shadow:0 1px 3px rgba(0,0,0,0.3); }
.dl-toggle-cal-off { background:#0f172a; color:#94a3b8; }

/* --- Status filter button (pill) ---
   Higher specificity (button.dl-class-status-btn.dl-status-btn-*) so the
   active/inactive colors win over the base `button.dl-class-status-btn` rule. */
button.dl-class-status-btn.dl-status-btn-on,
.dl-status-btn-on { background:#2563eb; border-color:#2563eb; color:#fff; }
button.dl-class-status-btn.dl-status-btn-on:hover { background:#1d4ed8; border-color:#1d4ed8; color:#fff; }
button.dl-class-status-btn.dl-status-btn-off,
.dl-status-btn-off { background:transparent; color:#94a3b8; }

/* --- Schedule table used-cells --- */
.dl-cell-used { background:#1e3a5f; color:#60a5fa; font-weight:600; }
.dl-cell-free { color:#94a3b8; }

/* --- Positioning flips for above/below --- */
.dl-pos-above { bottom:100%; top:auto; }
.dl-pos-below { top:100%; }

/* --- Latency color/bg states --- */
.dl-latency-good { color:#22c55e; background:rgba(34,197,94,0.15); }
.dl-latency-mid { color:#f59e0b; background:rgba(245,158,11,0.15); }
.dl-latency-bad { color:#ef4444; background:rgba(239,68,68,0.15); }

/* --- Toast error/success --- */
.dl-toast-error { background:#dc2626; color:#fff; }
.dl-toast-success { background:#059669; color:#fff; }

/* --- Alert success/error (inline) --- */
.dl-alert-error { background:rgba(239,68,68,0.1); color:#f87171; }
.dl-alert-success { background:rgba(34,197,94,0.1); color:#4ade80; }

/* --- Star rating colors --- */
.dl-star-on { color:#fbbf24; }
.dl-star-off { color:#475569; }

/* --- Yes/No inline --- */
.dl-yesno-yes { color:#22c55e; }
.dl-yesno-no { color:#ef4444; }

/* --- Log levels (settings log viewer) --- */
.dl-log-error { color:#f87171; }
.dl-log-warn { color:#fbbf24; }
.dl-log-debug { color:#818cf8; }
.dl-log-info { color:#94a3b8; }

/* --- Session costs table zebra --- */
.dl-row-zebra { background:rgba(255,255,255,0.02); }

/* --- Vsphere endpoint status dot --- */
.dl-dot-ok { background:#22c55e; }
.dl-dot-error { background:#ef4444; }
.dl-dot-unknown { background:#6b7280; }

/* --- Form header selection highlights (calendar) --- */
.dl-form-selected { color:#60a5fa; }

/* --- Display toggles for panels --- */
.dl-display-block { display:block; }
.dl-display-none { display:none; }

/* --- Guide nav disabled --- */
.dl-nav-disabled { opacity:0.3; cursor:default; }
.dl-nav-opacity-03 { opacity:0.3; }

/* --- Student index countdown colors --- */
.dl-cd-green { color:#22c55e; }
.dl-cd-amber { color:#f59e0b; }
.dl-cd-red { color:#ef4444; }

/* --- Student exercise completed row --- */
.dl-exercise-done { background:rgba(34,197,94,0.05); }
.dl-exercise-num-done { color:#22c55e; background:#052e16; }
.dl-exercise-num-pending { color:#64748b; background:#0f172a; }

/* --- Trainer break flashing button --- */
.dl-break-btn-flash { background:#7f1d1d; color:#ef4444; }

/* --- Trainer student card states --- */
.dl-trainer-st-chev-open { transform:rotate(180deg); color:#94a3b8; }
.dl-trainer-st-chev-closed { color:#475569; }
.dl-trainer-st-name-disabled { color:#991b1b; }
.dl-trainer-st-name-active { color:#4ade80; }
.dl-trainer-st-name-muted { color:#64748b; }

/* --- Trainer observe toolbar guide btn --- */
.dl-trainer-guide-btn-on { color:#60a5fa; background:#0c1a2e; }
.dl-trainer-guide-btn-off { color:#475569; }

/* --- Trainer break pause/resume btn --- */
.dl-break-pause-green { background:#22c55e; color:#fff; border:none; }
.dl-break-pause-dark { background:#1e293b; color:#e2e8f0; border:1px solid #334155; }

/* --- Break timer input focused --- */
.dl-input-focus-blue { border-color:#3b82f6; }

/* --- Centered fixed modal (shown/hidden) --- */
.dl-modal-centered-shown { display:flex; flex-direction:column; position:fixed; z-index:51; left:50%; top:50%; transform:translate(-50%,-50%); }
.dl-modal-centered-hidden { display:none; }

/* --- Student side tab panels (manual/exercises/consoles) --- */
.dl-side-tab-panel-open { display:flex; flex-direction:column; flex:1; overflow:hidden; min-height:0; }
.dl-side-tab-panel-open-scroll { display:flex; flex-direction:column; flex:1; overflow:auto; min-height:0; }
.dl-side-tab-panel-closed { display:none; }

/* --- Trainer avatar states --- */
.dl-trainer-avatar-disabled { background:#2d1017; color:#f87171; border:2px solid #991b1b; }
.dl-trainer-avatar-active { background:#052e16; color:#4ade80; border:2px solid #166534; }
.dl-trainer-avatar-idle { background:#1e293b; color:#e2e8f0; border:2px solid #334155; }

/* --- Trainer student name states --- */
.dl-trainer-stname-disabled { color:#991b1b; text-decoration:line-through; text-decoration-color:#991b1b40; }
.dl-trainer-stname-active { color:#f1f5f9; }
.dl-trainer-stname-idle { color:#e2e8f0; }

/* --- Trainer status dot --- */
.dl-trainer-statusdot-disabled { background:#991b1b; }
.dl-trainer-statusdot-active { background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,0.4); }
.dl-trainer-statusdot-idle { background:#475569; }

/* --- Trainer observe status --- */
.dl-trainer-observe-connected { opacity:1; }
.dl-trainer-observe-hidden { opacity:0; pointer-events:none; height:0; overflow:hidden; }

/* --- Trainer toolbar status dot --- */
.dl-trainer-tb-dot-connected { background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,0.5); }
.dl-trainer-tb-dot-connecting { background:#eab308; box-shadow:0 0 6px rgba(234,179,8,0.3); }
.dl-trainer-tb-dot-error { background:#ef4444; box-shadow:0 0 4px rgba(239,68,68,0.3); }

/* --- Trainer break timer container (visible/hidden) --- */
.dl-trainer-break-visible { display:flex; flex-direction:column; align-items:center; justify-content:center; position:fixed; inset:0; z-index:200; background:#060a12; }
.dl-trainer-break-hidden { display:none; }
.dl-block-hidden { display:none; }
.dl-block-default {}

/* --- Trainer break pause btn states --- */
.dl-trainer-break-pause-active { background:#22c55e; color:#fff; border:none; }
.dl-trainer-break-pause-idle { background:#1e293b; color:#e2e8f0; border:1px solid #334155; }

/* --- Trainer latency cell base --- */
.dl-trainer-latency-cell { font-family:Menlo,monospace; font-size:11px; padding:1px 5px; border-radius:4px; font-weight:600; }

/* --- Trainer break countdown display --- */
.dl-trainer-break-countdown-display { font-size:clamp(160px,32vw,380px); font-weight:800; font-family:Menlo,Monaco,Consolas,monospace; line-height:1; letter-spacing:0.05em; user-select:none; margin-bottom:20px; color:#f1f5f9; }
.dl-trainer-break-countdown-flash { animation:breakFlash 0.5s ease-in-out infinite; color:#ef4444; }
.dl-trainer-break-endtime { font-size:24px; margin-bottom:16px; font-weight:600; color:#60a5fa; }
.dl-trainer-break-endtime-flash { color:#f87171; }