/* DH WEBSITE CHÍNH V9 — Unified DH SEO light/dark runtime theme.
   The tokens mirror DH SEO/modules/theme_manager.py and are applied across
   storefront, auth, customer portal, admin workspace and CRM. */

:root,
html[data-theme="light"] {
  --dh-primary:#0291F9;
  --dh-primary-hover:#0077D6;
  --dh-secondary:#203D71;
  --dh-navy:#0A1529;
  --dh-bg:#F8FAFC;
  --dh-card-bg:#FFFFFF;
  --dh-sidebar-bg:#FFFFFF;
  --dh-border:#E2E8F0;
  --dh-border-soft:#EEF2F7;
  --dh-text-main:#0A1529;
  --dh-text-strong:#203D71;
  --dh-text-muted:#64748B;
  --dh-card-shadow:0 4px 18px rgba(10,21,41,.04);
  --dh-card-shadow-hover:0 10px 28px rgba(2,145,249,.10);
  --dh-badge-bg:#E0F2FE;
  --dh-badge-fg:#0284C7;
  --dh-input-bg:#FFFFFF;
  --dh-row-bg:#FFFFFF;
  --dh-row-alt:#F8FAFC;
  --dh-header-bg:rgba(255,255,255,.97);
  --dh-overlay:rgba(7,11,26,.48);
  --dh-success:#10B981;
  --dh-warning:#F59E0B;
  --dh-danger:#EF4444;
  --dh-info-soft:#F0F9FF;
  --dh-success-soft:#ECFDF5;
  --dh-warning-soft:#FFF7ED;
  --dh-danger-soft:#FEF2F2;
  --dh-auth-hero-a:#F7FBFF;
  --dh-auth-hero-b:#E7F4FF;
  --dh-auth-icon:#0369A1;
  --dh-auth-icon-bg:#FFFFFF;
  --dh-sidebar-link:#475569;
  --dh-sidebar-link-hover:#0369A1;
  --dh-sidebar-link-bg:#F0F9FF;
  --dh-footer-bg:#0A1529;
  --dh-footer-fg:#CBD5E1;
  --canvas:var(--dh-bg);
  --surface:var(--dh-card-bg);
  --line:var(--dh-border);
  --text:var(--dh-text-main);
  --muted:var(--dh-text-muted);
  --navy:var(--dh-navy);
  --navy2:var(--dh-secondary);
  --purple:var(--dh-primary);
  --purple2:#38BDF8;
  --shadow:var(--dh-card-shadow);
}

html[data-theme="dark"] {
  --dh-primary:#0291F9;
  --dh-primary-hover:#38BDF8;
  --dh-secondary:#38BDF8;
  --dh-navy:#F8FAFC;
  --dh-bg:#0F172A;
  --dh-card-bg:#1E293B;
  --dh-sidebar-bg:#0B1329;
  --dh-border:#334155;
  --dh-border-soft:#27364A;
  --dh-text-main:#F8FAFC;
  --dh-text-strong:#E2E8F0;
  --dh-text-muted:#94A3B8;
  --dh-card-shadow:0 6px 24px rgba(0,0,0,.35);
  --dh-card-shadow-hover:0 10px 30px rgba(0,0,0,.44);
  --dh-badge-bg:#1E3A8A;
  --dh-badge-fg:#93C5FD;
  --dh-input-bg:#111C31;
  --dh-row-bg:#1E293B;
  --dh-row-alt:#172236;
  --dh-header-bg:rgba(11,19,41,.97);
  --dh-overlay:rgba(0,0,0,.64);
  --dh-success:#34D399;
  --dh-warning:#FBBF24;
  --dh-danger:#F87171;
  --dh-info-soft:#112C46;
  --dh-success-soft:#0C302A;
  --dh-warning-soft:#352612;
  --dh-danger-soft:#3A1D25;
  --dh-auth-hero-a:#0B1329;
  --dh-auth-hero-b:#10284A;
  --dh-auth-icon:#7DD3FC;
  --dh-auth-icon-bg:#16243A;
  --dh-sidebar-link:#B6C2D5;
  --dh-sidebar-link-hover:#E0F2FE;
  --dh-sidebar-link-bg:#102B47;
  --dh-footer-bg:#070D1B;
  --dh-footer-fg:#94A3B8;
  --canvas:var(--dh-bg);
  --surface:var(--dh-card-bg);
  --line:var(--dh-border);
  --text:var(--dh-text-main);
  --muted:var(--dh-text-muted);
  --navy:var(--dh-navy);
  --navy2:var(--dh-secondary);
  --purple:var(--dh-primary);
  --purple2:#38BDF8;
  --shadow:var(--dh-card-shadow);
}

html { background:var(--dh-bg); color-scheme:light; }
html[data-theme="dark"] { color-scheme:dark; }
body,button,input,select,textarea { font-family:'Inter', system-ui, sans-serif!important; }
h1,h2,h3,h4,h5,h6 { font-family:'Plus Jakarta Sans', 'Inter', system-ui, sans-serif!important; }
body { background:var(--dh-bg)!important; color:var(--dh-text-main)!important; }
body,.site-header,.workspace-sidebar,.workspace-topbar,.workspace-card,.stat-card,.license-card,
.auth-art,.auth-form-area,.auth-panel,.commerce-product,.catalog-sidebar,.commerce-white-card,
.checkout-v7-card,.demo-guide-card,input,select,textarea,.data-table tr,.crm-column,.crm-opportunity-card {
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Theme switch, shared by storefront, portal and admin. */
.theme-toggle {
  width:38px;height:38px;display:inline-grid;place-items:center;flex:none;
  border:1px solid var(--dh-border);border-radius:10px;background:var(--dh-card-bg);
  color:var(--dh-text-strong);box-shadow:0 2px 8px rgba(10,21,41,.05);cursor:pointer;
  font-size:18px;line-height:1;
}
.theme-toggle:hover { border-color:var(--dh-primary);color:var(--dh-primary);background:var(--dh-info-soft); }
.workspace-theme-toggle { width:34px;height:34px;border-radius:9px;box-shadow:none; }

/* Public navigation. */
.site-header { background:var(--dh-header-bg)!important;border-bottom:1px solid var(--dh-border)!important;box-shadow:0 3px 16px rgba(10,21,41,.035)!important; }
.site-brand,.site-header .brand-word { color:var(--dh-text-strong)!important; }
.site-header .brand-mark { background:var(--dh-card-bg)!important;border:1px solid var(--dh-border)!important; }
.site-header .brand-word span { color:var(--dh-primary)!important; }
.site-header .brand-word small,.site-header .site-links { color:var(--dh-text-muted)!important; }
.site-header .site-links a,.site-header .nav-login { color:var(--dh-text-strong)!important; }
.site-header .site-links a:hover,.site-header .nav-login:hover { color:var(--dh-primary)!important; }
.site-header .btn-outline { color:var(--dh-text-strong)!important;border-color:var(--dh-border)!important;background:transparent!important; }
.site-header .mobile-nav.open { background:var(--dh-card-bg)!important;color:var(--dh-text-main)!important;border-color:var(--dh-border)!important; }
.site-header .mobile-nav.open a { border-bottom-color:var(--dh-border)!important; }

/* Common typography / forms. */
h1,h2,h3,h4,h5,h6,.page-header h1,.card-title h2,.auth-panel h1,.auth-simple-card h1 { color:var(--dh-text-main)!important; }
p,.section-intro p,.page-header p,.auth-panel>p,.auth-simple-card>p,.cell-subtitle { color:var(--dh-text-muted)!important; }
label { color:var(--dh-text-strong)!important; }
input,select,textarea {
  background:var(--dh-input-bg)!important;color:var(--dh-text-main)!important;
  border-color:var(--dh-border)!important;
}
input::placeholder,textarea::placeholder { color:var(--dh-text-muted)!important;opacity:.78; }
input:disabled,select:disabled,textarea:disabled { opacity:.72; }
.form-utilities,.auth-bottom { color:var(--dh-text-muted)!important;border-color:var(--dh-border)!important; }
.form-utilities a,.auth-bottom a,.view-all,.table-link,.back-link { color:var(--dh-primary)!important; }
.btn-primary,.commerce-button.primary { background:var(--dh-primary)!important;border-color:var(--dh-primary)!important;color:#fff!important; }
.btn-primary:hover,.commerce-button.primary:hover { background:var(--dh-primary-hover)!important;border-color:var(--dh-primary-hover)!important; }
.btn-light,.commerce-button.card-cta { background:var(--dh-info-soft)!important;color:var(--dh-primary-hover)!important;border-color:color-mix(in srgb,var(--dh-primary) 30%,var(--dh-border))!important; }
.btn-outline { border-color:var(--dh-border)!important;color:var(--dh-text-strong)!important; }

/* Login / register / password screens — same visual language as DH SEO. */
.auth-page { background:var(--dh-bg)!important; }
.auth-art {
  background:linear-gradient(145deg,var(--dh-auth-hero-a),var(--dh-auth-hero-b))!important;
  color:var(--dh-text-main)!important;border-right:1px solid var(--dh-border)!important;
}
.auth-art-glow { background:radial-gradient(circle,rgba(2,145,249,.18),transparent 70%)!important; }
.auth-art .hero-kicker { color:var(--dh-primary)!important; }
.auth-art h2 { color:var(--dh-text-main)!important; }
.auth-art h2 span { background:none!important;color:var(--dh-primary)!important;-webkit-text-fill-color:initial!important; }
.auth-art p { color:var(--dh-text-muted)!important; }
.auth-art-display span {
  background:var(--dh-auth-icon-bg)!important;border-color:var(--dh-border)!important;
  color:var(--dh-auth-icon)!important;box-shadow:var(--dh-card-shadow)!important;
}
.auth-form-area { background:var(--dh-bg)!important; }
.auth-panel { background:transparent!important;color:var(--dh-text-main)!important; }
.auth-simple { background:var(--dh-bg)!important; }
.auth-simple-card { background:var(--dh-card-bg)!important;border-color:var(--dh-border)!important;box-shadow:var(--dh-card-shadow)!important; }
.demo-login-box {
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 20px;padding:13px 14px;
  border:1px solid color-mix(in srgb,var(--dh-primary) 28%,var(--dh-border));border-radius:11px;background:var(--dh-info-soft);
}
.demo-login-box>div { display:grid;gap:2px;min-width:0; }
.demo-login-box strong { color:var(--dh-primary);font-size:10px;letter-spacing:.08em; }
.demo-login-box span { color:var(--dh-text-main);font-size:11px;font-weight:750;overflow-wrap:anywhere; }
.demo-login-box small { color:var(--dh-text-muted);font-size:10px; }

/* Storefront and product catalog. */
.commerce-app,.commerce-section,.catalog-page,.product-detail-page,.checkout-v7,.demo-guide { background:var(--dh-bg)!important;color:var(--dh-text-main)!important; }
.commerce-section:nth-of-type(odd) { background:var(--dh-card-bg)!important; }
.commerce-hero { background:linear-gradient(118deg,var(--dh-bg) 0%,var(--dh-info-soft) 58%,color-mix(in srgb,var(--dh-primary) 11%,var(--dh-bg)) 100%)!important;color:var(--dh-text-main)!important;border-bottom-color:var(--dh-border)!important; }
.commerce-hero h1,.commerce-product h3,.section-intro h2,.commerce-white-card h2,.commerce-contact h2,.demo-guide h1,.demo-guide-card h2 { color:var(--dh-text-main)!important; }
.commerce-hero-copy>p,.commerce-product-desc,.demo-guide p { color:var(--dh-text-muted)!important; }
.commerce-preview,.commerce-product,.catalog-sidebar,.commerce-white-card,.commerce-contact .contact-form,
.checkout-v7-card,.demo-guide-card,.product-detail-card,.pricing-card {
  background:var(--dh-card-bg)!important;border-color:var(--dh-border)!important;box-shadow:var(--dh-card-shadow)!important;color:var(--dh-text-main)!important;
}
.commerce-product:hover { border-color:var(--dh-primary)!important;box-shadow:var(--dh-card-shadow-hover)!important; }
.preview-appbar,.preview-stage { background:var(--dh-card-bg)!important;color:var(--dh-text-main)!important; }
.preview-sidebar { background:var(--dh-bg)!important;border-color:var(--dh-border)!important; }
.preview-sidebar .selected,.catalog-filter.active { background:var(--dh-info-soft)!important;color:var(--dh-primary)!important; }
.catalog-filter { color:var(--dh-text-muted)!important; }
.catalog-filter:hover { background:var(--dh-info-soft)!important;color:var(--dh-primary)!important; }
.commerce-product-logo { background:var(--dh-info-soft)!important;border-color:var(--dh-border)!important;color:var(--dh-primary)!important; }
.commerce-product-tag.quiet { background:var(--dh-row-alt)!important;border-color:var(--dh-border)!important;color:var(--dh-text-muted)!important; }
.checkout-v7-summary>div,.checkout-v7-bank>span,.demo-guide-checks>div { border-color:var(--dh-border)!important; }
.checkout-v7-summary strong,.checkout-v7-empty h3,.checkout-v7-heading h1 { color:var(--dh-text-main)!important; }
.checkout-v7-empty { background:var(--dh-row-alt)!important;color:var(--dh-text-muted)!important;border-color:var(--dh-border)!important; }

/* Workspace shell: same white/blue DH SEO in light, Deep Space Dark in dark. */
.workspace-body,.workspace-content,.workspace-main { background:var(--dh-bg)!important;color:var(--dh-text-main)!important; }
.workspace-sidebar,.portal-sidebar { background:var(--dh-sidebar-bg)!important;color:var(--dh-sidebar-link)!important;border-right:1px solid var(--dh-border)!important;box-shadow:none!important; }
.sidebar-head,.sidebar-bottom,.sidebar-user { border-color:var(--dh-border)!important; }
.sidebar-logo { background:var(--dh-info-soft)!important;border:1px solid var(--dh-border)!important; }
.sidebar-brand strong,.sidebar-user strong { color:var(--dh-text-main)!important; }
.sidebar-brand small,.sidebar-user small,.sidebar-label { color:var(--dh-text-muted)!important; }
.sidebar-link { color:var(--dh-sidebar-link)!important; }
.sidebar-link .ico { color:var(--dh-text-muted)!important; }
.sidebar-link:hover { color:var(--dh-sidebar-link-hover)!important;background:var(--dh-info-soft)!important; }
.sidebar-link.active { color:#fff!important;background:var(--dh-primary)!important;box-shadow:0 6px 18px rgba(2,145,249,.20)!important; }
.sidebar-link.active .ico { color:#fff!important; }
.nav-count { background:color-mix(in srgb,var(--dh-primary) 12%,var(--dh-card-bg))!important;color:var(--dh-primary)!important; }
.sidebar-link.active .nav-count { background:rgba(255,255,255,.2)!important;color:#fff!important; }
.user-avatar,.topbar-avatar { background:var(--dh-info-soft)!important;color:var(--dh-primary)!important;border:1px solid var(--dh-border)!important; }
.workspace-topbar { background:var(--dh-header-bg)!important;border-bottom:1px solid var(--dh-border)!important; }
.breadcrumbs { color:var(--dh-text-muted)!important; }
.breadcrumbs strong { color:var(--dh-text-strong)!important; }
.breadcrumbs .ico { color:var(--dh-text-muted)!important; }
.workspace-search label { background:var(--dh-input-bg)!important;border-color:var(--dh-border)!important;color:var(--dh-text-muted)!important; }
.topbar-website { color:var(--dh-text-muted)!important; }
.topbar-website:hover { color:var(--dh-primary)!important; }
.page-overline { color:var(--dh-primary)!important; }
.page-overline span { color:var(--dh-text-muted)!important; }
.workspace-footer { color:var(--dh-text-muted)!important;border-color:var(--dh-border)!important; }

/* Admin/portal cards, grids, tables, details. */
.workspace-card,.stat-card,.license-card,.create-panel,.profile-card,.portal-ticket,.row-edit-form,
.quick-actions a,.ledger-grid>div,.crm-value-box>div,.crm-column,.crm-opportunity-card,.crm-timeline-body,
.setting-card,.data-panel,.summary-card {
  background:var(--dh-card-bg)!important;border-color:var(--dh-border)!important;box-shadow:var(--dh-card-shadow)!important;color:var(--dh-text-main)!important;
}
.workspace-card:hover,.stat-card:hover,.quick-actions a:hover { border-color:color-mix(in srgb,var(--dh-primary) 45%,var(--dh-border))!important; }
.card-title,.setting-line,.license-line,.portal-ticket,.crm-task-row,.crm-column-total,.crm-timeline-item:before { border-color:var(--dh-border-soft)!important; }
.card-title h2,.license-card h3,.quick-actions strong,.crm-value-box strong,.crm-opportunity-card strong,.crm-timeline-body strong { color:var(--dh-text-main)!important; }
.quick-actions small,.license-card p,.crm-task-row small,.crm-opportunity-card small,.crm-opportunity-card em,.crm-card-meta em,.crm-timeline-body>small { color:var(--dh-text-muted)!important; }
.stat-card small,.ledger-grid small,.crm-value-box small { color:var(--dh-text-muted)!important; }
.stat-card strong,.ledger-grid strong,.crm-card-meta b,.crm-opportunity-card span { color:var(--dh-primary)!important; }
.stat-icon.sky,.stat-icon.lavender,.stat-icon.mint,.stat-icon.peach { background:var(--dh-info-soft)!important;color:var(--dh-primary)!important; }
.portal-welcome,.overview-welcome { background:linear-gradient(120deg,var(--dh-secondary),var(--dh-primary))!important;color:#fff!important; }
.portal-welcome h2,.portal-welcome p,.portal-welcome a,.overview-welcome h2,.overview-welcome p,.overview-welcome a { color:#fff!important; }
.welcome-badge { color:#E0F2FE!important; }

.data-table { color:var(--dh-text-main)!important; }
.data-table thead th { background:var(--dh-row-alt)!important;color:var(--dh-text-muted)!important;border-color:var(--dh-border)!important; }
.data-table tbody tr,.data-table td { background:var(--dh-row-bg)!important;border-color:var(--dh-border-soft)!important;color:var(--dh-text-main)!important; }
.data-table tbody tr:hover td { background:var(--dh-row-alt)!important; }
.data-table code,.promo-code { background:var(--dh-row-alt)!important;color:var(--dh-primary)!important; }
.row-edit-form,.log-details,.ticket-conversation p { background:var(--dh-card-bg)!important;border-color:var(--dh-border)!important;color:var(--dh-text-main)!important; }
.log-details,.crm-opportunity-card p,.crm-timeline-body p { color:var(--dh-text-muted)!important; }

/* CRM Twenty-inspired workspace with DH SEO tokens. */
.crm-column { background:var(--dh-row-alt)!important; }
.crm-column-head>span,.crm-empty-column,.crm-links span { background:var(--dh-card-bg)!important;border-color:var(--dh-border)!important;color:var(--dh-text-muted)!important; }
.crm-opportunity-card { background:var(--dh-card-bg)!important;color:var(--dh-text-main)!important; }
.crm-opportunity-card:hover { border-color:var(--dh-primary)!important;box-shadow:var(--dh-card-shadow-hover)!important; }
.crm-timeline-icon,.crm-card-title span,.crm-chip { background:var(--dh-info-soft)!important;color:var(--dh-primary)!important;border-color:color-mix(in srgb,var(--dh-primary) 28%,var(--dh-border))!important; }
.crm-column-total,.crm-opportunity-card p,.crm-timeline-item:before { border-color:var(--dh-border)!important; }

/* Notices retain semantic colors in both modes. */
.notice.success,.info-strip.success { background:var(--dh-success-soft)!important;color:var(--dh-success)!important;border-color:color-mix(in srgb,var(--dh-success) 45%,var(--dh-border))!important; }
.notice.error { background:var(--dh-danger-soft)!important;color:var(--dh-danger)!important;border-color:color-mix(in srgb,var(--dh-danger) 45%,var(--dh-border))!important; }
.notice.warning,.info-strip.warning,.checkout-demo-warning { background:var(--dh-warning-soft)!important;color:var(--dh-warning)!important;border-color:color-mix(in srgb,var(--dh-warning) 45%,var(--dh-border))!important; }
.info-strip { background:var(--dh-info-soft)!important;color:var(--dh-primary-hover)!important;border-color:color-mix(in srgb,var(--dh-primary) 30%,var(--dh-border))!important; }
.demo-banner { background:var(--dh-warning-soft)!important;color:var(--dh-warning)!important;border-color:color-mix(in srgb,var(--dh-warning) 45%,var(--dh-border))!important; }
.demo-banner a { color:var(--dh-warning)!important; }

/* Footer and dark-mode visual cleanup. */
.site-footer { background:var(--dh-footer-bg)!important;color:var(--dh-footer-fg)!important; }
.site-footer .site-brand,.site-footer strong { color:#F8FAFC!important; }
.site-footer p,.site-footer span,.site-footer a { color:var(--dh-footer-fg)!important; }
.site-footer a:hover { color:#7DD3FC!important; }
html[data-theme="dark"] img { color-scheme:normal; }
html[data-theme="dark"] .commerce-product-tag.ready { background:#0C302A!important;color:#6EE7B7!important;border-color:#166534!important; }
html[data-theme="dark"] .commerce-product-tag.manual,.state-qualified,.state-ready_to_issue,.state-submitted,.state-contacted,.state-sent,.state-in_progress,.state-waiting_customer { background:#112C46!important;color:#7DD3FC!important;border-color:#1D4D6D!important; }
html[data-theme="dark"] .badge-state { background:#172236!important;border-color:#334155!important;color:#CBD5E1!important; }
html[data-theme="dark"] .state-active,html[data-theme="dark"] .state-paid,html[data-theme="dark"] .state-fulfilled,html[data-theme="dark"] .state-issued,html[data-theme="dark"] .state-won,html[data-theme="dark"] .state-matched,html[data-theme="dark"] .state-accepted,html[data-theme="dark"] .state-signed,html[data-theme="dark"] .state-done { background:#0C302A!important;border-color:#166534!important;color:#6EE7B7!important; }
html[data-theme="dark"] .state-draft,html[data-theme="dark"] .state-new,html[data-theme="dark"] .state-unpaid,html[data-theme="dark"] .state-pending,html[data-theme="dark"] .state-open,html[data-theme="dark"] .state-underpaid,html[data-theme="dark"] .state-unmatched { background:#352612!important;border-color:#6B4E16!important;color:#FCD34D!important; }
html[data-theme="dark"] .state-suspended,html[data-theme="dark"] .state-cancelled,html[data-theme="dark"] .state-revoked,html[data-theme="dark"] .state-lost,html[data-theme="dark"] .state-urgent,html[data-theme="dark"] .state-overpaid,html[data-theme="dark"] .state-expired { background:#3A1D25!important;border-color:#6B2737!important;color:#FCA5A5!important; }

@media(max-width:760px){
  .header-theme-toggle{margin-left:auto}
  .workspace.sidebar-open .sidebar-overlay{background:var(--dh-overlay)!important}
  .sidebar-close{color:var(--dh-text-main)!important}
}
@media(max-width:560px){.demo-login-box{align-items:flex-start;flex-direction:column}.demo-login-box .btn{width:100%}}