.layout-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.layout-option { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 12px; padding: 14px; border: 1px solid var(--panel-line, #dce4e8); border-radius: 8px; background: var(--app-surface, white); color: var(--panel-text, #202a30); text-align: left; }
.layout-option:hover { border-color: #0b8a75; }
.layout-option[aria-checked="true"] { border-color: #0b8a75; box-shadow: 0 0 0 2px #0b8a7520; }
.layout-option-copy { display: grid; gap: 4px; min-width: 0; }
.layout-option-copy strong { font-size: 14px; }
.layout-option-copy small { color: var(--panel-muted, #657879); font-size: 12px; }
.layout-option-check { align-self: center; width: 20px; color: #0b8a75; opacity: 0; }
.layout-option[aria-checked="true"] .layout-option-check { opacity: 1; }
.layout-preview { display: grid; grid-column: 1 / -1; grid-template-columns: 28px 1fr; grid-template-rows: 16px 48px; gap: 5px; padding: 7px; height: 84px; border: 1px solid #dce4e8; border-radius: 5px; background: #f0f5f4; }
.layout-preview span { background: #dde7e4; border-radius: 3px; }
.layout-preview-classic span:first-child { grid-column: 1 / -1; background: #3479df; }
.layout-preview-modern span:first-child { grid-row: 1 / -1; background: #164c45; }
.layout-preview-modern span:nth-child(2) { background: #fff; }

html[data-layout="modern"] { --layout-rail-width: 240px; --layout-accent: #087f6b; --layout-rail: #183e38; --layout-nav-text: #cadbd5; --layout-bg: #f3f6f5; --layout-surface: #fff; --layout-line: #dce5e1; --layout-text: #243830; --layout-selected: #176b54; --layout-selected-hover: #125b47; --layout-selected-text: #fff; --layout-selected-marker: #82e1b5; --layout-tab-hover: #e1eee7; }
html[data-layout="modern"][data-theme="dark"] { --layout-rail: #131c19; --layout-nav-text: #bdccc5; --layout-bg: #151a18; --layout-surface: #1d2521; --layout-line: #35423b; --layout-text: #e4eee8; --layout-accent: #56cba9; --layout-selected: #27684f; --layout-selected-hover: #307b5e; --layout-selected-marker: #9be9bc; --layout-tab-hover: #2b3b32; }
html[data-layout="modern"][data-nav-collapsed="true"] { --layout-rail-width: 76px; }
html[data-layout="modern"] #app-view:not(.hidden) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 64px minmax(0, 1fr) !important; padding-left: var(--layout-rail-width) !important; width: 100%; height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; background: var(--layout-bg) !important; }
html[data-layout="modern"] #app-view::before { content: ''; position: fixed; inset: 0 auto 0 0; width: var(--layout-rail-width); background: var(--layout-rail); z-index: 30; }
html[data-layout="modern"] #app-view > .sidebar { position: relative !important; inset: auto !important; display: grid !important; grid-template-columns: 40px minmax(0, 1fr) 42px !important; align-items: center; gap: 12px !important; width: 100% !important; height: 64px !important; min-height: 0 !important; padding: 0 20px !important; border: 0 !important; border-bottom: 1px solid var(--layout-line) !important; border-radius: 0 !important; background: var(--layout-surface) !important; box-shadow: none !important; overflow: visible !important; z-index: 35; }
html[data-layout="modern"] #app-view > .sidebar { backdrop-filter: none !important; filter: none !important; transform: none !important; contain: none !important; }
html[data-layout="modern"] #app-view { --ui-font: Inter, 'Segoe UI', Arial, sans-serif; font-family: var(--ui-font); }
html[data-layout="modern"] #app-view :is(button, input, select, textarea) { font-family: var(--ui-font) !important; }
html[data-layout="modern"] #app-view .sidebar-brand { align-items: center !important; margin: 0 !important; box-shadow: none !important; }
html[data-layout="modern"] #app-view .sidebar-brand strong { font-weight: 700; }
html[data-layout="modern"] #app-view #tabs-bar { height: 40px !important; align-self: center !important; transform: none !important; }
html[data-layout="modern"] #app-view .workspace-menu .nav-button.active > svg { color: var(--layout-selected-text) !important; transform: none; }
html[data-layout="modern"] #app-view :is(.settings-card, .settings-hero) { border-top: 1px solid var(--layout-line) !important; background: var(--layout-surface) !important; }
html[data-layout="modern"] #app-view :is(.settings-card, .settings-hero)::before { display: none !important; }
html[data-layout="modern"] #app-view .settings-hero { border-left: 3px solid var(--layout-accent) !important; }
html[data-layout="modern"] #app-view #dashboard-view { --dash-blue: var(--layout-accent); --dash-ink: var(--layout-text); --dash-muted: #657a70; --dash-line: var(--layout-line); --dash-page: var(--layout-bg); background: var(--layout-bg) !important; }
html[data-layout="modern"][data-theme="dark"] #app-view #dashboard-view { --dash-muted: #a2b6ab; }
html[data-layout="modern"] #app-view #dashboard-view :is(.board-welcome, .dashboard-actions, .dashboard-card, .dashboard-chart, .finance-pie-card, .board-panel) { background: var(--layout-surface) !important; border-color: var(--layout-line) !important; box-shadow: 0 2px 8px #173d2d08 !important; }
html[data-layout="modern"] #app-view #dashboard-view .board-welcome .big-action { background: #087f6b !important; box-shadow: 0 4px 12px #087f6b20 !important; }
html[data-layout="modern"] #app-view #dashboard-view .dashboard-motto { color: var(--layout-accent) !important; }
html[data-layout="modern"] #app-view[data-active-view="new-sale"] > .content { display: grid !important; grid-template-rows: minmax(0, 1fr); padding: 8px !important; overflow: hidden !important; }
html[data-layout="modern"] #app-view #new-sale-view { height: 100% !important; min-height: 0 !important; }
html[data-layout="modern"] #app-view .sidebar-brand { position: fixed !important; top: 0; left: 0; display: flex !important; width: var(--layout-rail-width); height: 76px; padding: 14px 18px !important; gap: 10px; border: 0 !important; border-radius: 0 !important; background: var(--layout-rail) !important; overflow: hidden; }
html[data-layout="modern"] #app-view .sidebar-brand img { width: 38px !important; height: 38px !important; flex: 0 0 38px; border-radius: 8px !important; }
html[data-layout="modern"] #app-view .sidebar-brand div { min-width: 0; }
html[data-layout="modern"] #app-view .sidebar-brand strong { color: #fff !important; font-size: 13px !important; white-space: normal; line-height: 1.3; }
html[data-layout="modern"] #app-view .sidebar-brand span { display: block; margin-top: 3px; color: #adc8bd !important; font-size: 11px !important; }
html[data-layout="modern"] #app-view > .sidebar { grid-template-columns: 44px minmax(0, 1fr) 42px !important; column-gap: 16px !important; }
html[data-layout="modern"] #app-view #top-menu-toggle { grid-column: 1; grid-row: 1; display: grid !important; place-items: center; align-self: center; width: 44px !important; min-width: 44px !important; max-width: 44px; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #b5d9cb !important; border-radius: 8px !important; color: #14634b !important; background: #e4f3ec !important; box-shadow: none !important; backdrop-filter: none !important; transition: background .15s ease, border-color .15s ease, color .15s ease; }
html[data-layout="modern"] #app-view #top-menu-toggle[aria-expanded="true"] { background: #176b54 !important; border-color: #176b54 !important; color: #fff !important; }
html[data-layout="modern"] #app-view #top-menu-toggle:hover { background: #ceeadc !important; border-color: #73b79c !important; color: #104b39 !important; }
html[data-layout="modern"] #app-view #top-menu-toggle[aria-expanded="true"]:hover { background: #11523f !important; border-color: #11523f !important; color: #fff !important; }
html[data-layout="modern"] #app-view #top-menu-toggle:active { box-shadow: inset 0 2px 4px #072e2426 !important; }
html[data-layout="modern"] #app-view #top-menu-toggle::before,
html[data-layout="modern"] #app-view #top-menu-toggle::after { display: none !important; }
html[data-layout="modern"] #app-view #top-menu-toggle > svg { display: block; width: 23px !important; height: 23px !important; color: inherit !important; stroke-width: 2 !important; }
html[data-layout="modern"][data-theme="dark"] #app-view #top-menu-toggle { background: #233e32 !important; border-color: #416553 !important; color: #a1e2c2 !important; }
html[data-layout="modern"][data-theme="dark"] #app-view #top-menu-toggle[aria-expanded="true"] { background: #2c775a !important; border-color: #4a9b7a !important; color: #fff !important; }
html[data-layout="modern"][data-theme="dark"] #app-view #top-menu-toggle:hover { background: #31563f !important; border-color: #66b18e !important; color: #fff !important; }
html[data-layout="modern"] #top-menu-toggle > span { display: none; }
html[data-layout="modern"] #app-view .workspace-menu { position: fixed !important; inset: 76px auto 0 0 !important; display: flex !important; flex-direction: column; align-items: stretch; gap: 3px !important; width: var(--layout-rail-width) !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 4px 12px 24px !important; border: 0 !important; border-radius: 0 !important; background: var(--layout-rail) !important; box-shadow: none !important; overflow: auto !important; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #527268 transparent; z-index: 40; }
html[data-layout="modern"] #app-view .workspace-menu .menu-label { flex: 0 0 auto; margin: 17px 10px 6px !important; padding: 0 !important; color: #90b3a5 !important; font-size: 10px !important; font-weight: 600; text-transform: uppercase; }
html[data-layout="modern"] #app-view .workspace-menu .nav-button { display: flex !important; flex: 0 0 auto; align-items: center; justify-content: flex-start; gap: 11px; width: 100%; min-height: 39px !important; height: auto; margin: 0 !important; padding: 9px 10px !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: var(--layout-nav-text) !important; font-size: 12px !important; font-weight: 500 !important; text-transform: none !important; text-align: left; box-shadow: none !important; }
html[data-layout="modern"] #app-view .workspace-menu .nav-button svg { flex: 0 0 18px; width: 18px; height: 18px; color: inherit !important; }
html[data-layout="modern"] #app-view .workspace-menu .nav-button span { overflow-wrap: anywhere; white-space: normal; line-height: 1.3; }
html[data-layout="modern"] #app-view .workspace-menu .nav-button:hover { background: #ffffff12 !important; color: #fff !important; }
html[data-layout="modern"] #app-view .workspace-menu .nav-button.active { background: var(--layout-selected) !important; color: var(--layout-selected-text) !important; font-weight: 700 !important; box-shadow: inset 3px 0 var(--layout-selected-marker), 0 3px 8px #071c1726 !important; }
html[data-layout="modern"] #app-view .workspace-menu .nav-button.active:hover { background: var(--layout-selected-hover) !important; }
html[data-layout="modern"] #app-view .workspace-menu .nav-button.active > span { color: var(--layout-selected-text) !important; }
html[data-layout="modern"] #app-view .workspace-menu .nav-button.disabled { opacity: .48; }
html[data-layout="modern"] #app-view #tabs-bar { grid-column: 2; grid-row: 1; position: static !important; display: flex !important; min-width: 0 !important; width: auto !important; height: 44px !important; align-items: center; gap: 4px !important; margin: 0 !important; padding: 4px !important; border: 1px solid var(--layout-line) !important; border-radius: 8px !important; background: var(--layout-bg) !important; box-shadow: inset 0 1px 2px #173d2d05 !important; backdrop-filter: none !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--layout-line) transparent; }
html[data-layout="modern"] #app-view .tab-button { display: inline-flex !important; position: relative; flex: 0 0 auto; align-items: center; justify-content: flex-start; gap: 8px !important; width: auto; max-width: 240px; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 10px !important; border: 1px solid transparent !important; border-radius: 5px !important; background: transparent !important; color: var(--layout-text) !important; font-size: 12px !important; font-weight: 500 !important; text-transform: none !important; box-shadow: none !important; transition: background .15s ease, border-color .15s ease; }
html[data-layout="modern"] #app-view .tab-button:hover { background: var(--layout-tab-hover) !important; color: var(--layout-accent) !important; }
html[data-layout="modern"] #app-view .tab-button.active { border-color: var(--layout-selected) !important; background: var(--layout-selected) !important; color: var(--layout-selected-text) !important; font-weight: 700 !important; box-shadow: 0 2px 5px #173d2d24 !important; }
html[data-layout="modern"] #app-view .tab-button.active:hover { background: var(--layout-selected-hover) !important; border-color: var(--layout-selected-hover) !important; }
html[data-layout="modern"] #app-view .tab-button.active > span { color: var(--layout-selected-text) !important; }
html[data-layout="modern"] #app-view .tab-button::after { display: none !important; }
html[data-layout="modern"] #app-view .tab-button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-layout="modern"] #app-view .tab-button > svg { flex: 0 0 16px; width: 16px !important; height: 16px !important; color: inherit !important; opacity: 1; }
html[data-layout="modern"] #app-view .tab-button [data-close-tab] { display: grid; place-items: center; flex: 0 0 22px; width: 22px !important; height: 22px !important; margin: 0 -4px 0 2px; padding: 3px !important; border: 0 !important; border-radius: 4px !important; background: transparent !important; color: inherit !important; opacity: .65 !important; }
html[data-layout="modern"] #app-view .tab-button [data-close-tab]:hover { background: #dc35451a !important; color: #ca3443 !important; opacity: 1 !important; }
html[data-layout="modern"] #app-view .tab-button.active [data-close-tab] { background: #ffffff18 !important; color: #fff !important; opacity: 1 !important; }
html[data-layout="modern"] #app-view .tab-button.active [data-close-tab]:hover { background: #ffffff35 !important; color: #fff !important; }
html[data-layout="modern"] #app-view .tab-button [data-close-tab] svg { width: 14px !important; height: 14px !important; }
html[data-layout="modern"] #app-view .tab-button:focus-visible { outline: 2px solid var(--layout-accent); outline-offset: -2px; }
html[data-layout="modern"] #app-view .sync-box { display: none !important; }
html[data-layout="modern"] #app-view .account-menu-wrap { grid-column: 3; grid-row: 1; position: relative !important; inset: auto !important; }
html[data-layout="modern"] #app-view #account-menu-toggle { background: #cceee0 !important; color: #155a43 !important; border: 1px solid #abd6c4 !important; }
html[data-layout="modern"] #app-view > .content { width: 100% !important; min-width: 0; min-height: 0; height: 100% !important; padding: 18px !important; background: var(--layout-bg) !important; overflow: auto !important; }
html[data-layout="modern"] #app-view .view-panel { background: var(--layout-bg) !important; }
html[data-layout="modern"] #app-view > .content > .topbar { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html[data-layout="modern"] #app-view :is(.primary-button, .board-welcome-sell) { background: #087f6b !important; border-color: #087f6b !important; color: white !important; box-shadow: 0 3px 8px #087f6b20 !important; }
html[data-layout="modern"] #app-view :is(.primary-button, .board-welcome-sell):hover { background: #076554 !important; }
html[data-layout="modern"] #app-view :is(.settings-hero, .settings-card, .reports-hero, .reports-result, .board-panel, .board-welcome) { border-radius: 8px !important; box-shadow: 0 2px 8px #173d2d06 !important; }
html[data-layout="modern"] #app-view .board-welcome { border-color: var(--layout-line) !important; }
html[data-layout="modern"] #layout-nav-backdrop { display: none; }
html[data-layout="modern"][data-nav-collapsed="true"] #app-view .sidebar-brand div,
html[data-layout="modern"][data-nav-collapsed="true"] #app-view .workspace-menu :is(.menu-label, .nav-button span, .nav-count) { display: none !important; }
html[data-layout="modern"][data-nav-collapsed="true"] #app-view .workspace-menu .nav-button { justify-content: center; min-height: 43px !important; }
html[data-layout="modern"] :is(.layout-option, .workspace-menu .nav-button, #top-menu-toggle):focus-visible { outline: 3px solid #4fc5a5; outline-offset: 2px; }
html[data-layout="modern"] #app-view .sidebar-brand { top: 0 !important; left: 0 !important; height: 76px !important; max-height: none !important; font-family: Inter, 'Segoe UI', Arial, sans-serif !important; }
html[data-layout="modern"] #app-view .workspace-menu .nav-button.active > svg { color: var(--layout-selected-text) !important; stroke: currentColor !important; }
html[data-layout="modern"] #app-view #settings-view :is(.settings-card, .settings-hero)::after { display: none !important; }

/* WhatsApp's legacy header colors must not override the modern shell. */
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view > .sidebar { background: var(--layout-surface) !important; border-color: var(--layout-line) !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .sidebar-brand,
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .workspace-menu { background: var(--layout-rail) !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view #tabs-bar { background: var(--layout-bg) !important; border-color: var(--layout-line) !important; box-shadow: inset 0 1px 2px #173d2d05 !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .tab-button { color: var(--layout-text) !important; background: transparent !important; border-color: transparent !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .tab-button:hover { color: var(--layout-accent) !important; background: var(--layout-tab-hover) !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .tab-button.active { color: var(--layout-selected-text) !important; background: var(--layout-selected) !important; border-color: var(--layout-selected) !important; box-shadow: 0 2px 5px #173d2d24 !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .tab-button.active:hover { background: var(--layout-selected-hover) !important; border-color: var(--layout-selected-hover) !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .tab-button :is(span, svg, strong) { color: inherit !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .tab-button [data-close-tab] { background: transparent !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .tab-button [data-close-tab]:hover { background: #dc35451a !important; color: #ca3443 !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .tab-button.active [data-close-tab] { background: #ffffff18 !important; color: #fff !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .tab-button.active [data-close-tab]:hover { background: #ffffff35 !important; color: #fff !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .workspace-menu .nav-button { color: var(--layout-nav-text) !important; background: transparent !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .workspace-menu .nav-button:hover { color: #fff !important; background: #ffffff12 !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .workspace-menu .nav-button.active { color: var(--layout-selected-text) !important; background: var(--layout-selected) !important; box-shadow: inset 3px 0 var(--layout-selected-marker), 0 3px 8px #071c1726 !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .workspace-menu .nav-button.active:hover { background: var(--layout-selected-hover) !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view .workspace-menu .nav-button :is(span, svg) { color: inherit !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view #top-menu-toggle { background: #e4f3ec !important; border-color: #b5d9cb !important; color: #14634b !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view #top-menu-toggle[aria-expanded="true"] { background: #176b54 !important; border-color: #176b54 !important; color: #fff !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view #top-menu-toggle:hover { background: #ceeadc !important; border-color: #73b79c !important; color: #104b39 !important; }
:root[data-layout="modern"][data-theme-variant="whatsapp"] #app-view #top-menu-toggle[aria-expanded="true"]:hover { background: #11523f !important; border-color: #11523f !important; color: #fff !important; }

@media (max-width: 1023px) {
  html[data-layout="modern"] { --layout-rail-width: 240px !important; }
  html[data-layout="modern"] #app-view:not(.hidden) { padding-left: 0 !important; }
  html[data-layout="modern"] #app-view::before { top: 64px; }
  html[data-layout="modern"] #app-view .sidebar-brand { top: 64px !important; }
  html[data-layout="modern"] #app-view .workspace-menu { top: 140px !important; }
  html[data-layout="modern"] #app-view::before,
  html[data-layout="modern"] #app-view .sidebar-brand,
  html[data-layout="modern"] #app-view .workspace-menu { visibility: hidden; transform: translateX(-100%); }
  html[data-layout="modern"].modern-menu-open #app-view::before,
  html[data-layout="modern"].modern-menu-open #app-view .sidebar-brand,
  html[data-layout="modern"].modern-menu-open #app-view .workspace-menu { visibility: visible; transform: none; }
  html[data-layout="modern"].modern-menu-open #app-view .sidebar-brand { z-index: 41; }
  html[data-layout="modern"].modern-menu-open #app-view::before { z-index: 30; }
  html[data-layout="modern"] #app-view #layout-nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 64px 0 0; z-index: 39; padding: 0; border: 0; border-radius: 0; background: #071c1780; }
  html[data-layout="modern"] #app-view > .sidebar { padding: 0 12px !important; gap: 8px !important; }
  html[data-layout="modern"] #app-view > .content { padding: 10px !important; }
  html[data-layout="modern"] #app-view .workspace-menu :is(.menu-label, .nav-button span, .nav-count:not(.hidden)),
  html[data-layout="modern"] #app-view .sidebar-brand div { display: block !important; }
  html[data-layout="modern"] #app-view .workspace-menu .nav-button { justify-content: flex-start !important; }
}
@media (max-width: 480px) {
  html[data-layout="modern"] #app-view .tab-button { max-width: 180px; min-height: 34px !important; gap: 6px !important; padding: 0 8px !important; }
  .layout-selector { grid-template-columns: minmax(0, 1fr); }
  .layout-option { grid-template-columns: 88px minmax(0, 1fr) 20px; align-items: center; gap: 10px; padding: 10px; }
  .layout-preview { grid-column: auto; height: 64px; grid-template-rows: 12px 1fr; }
}
@media print {
  html[data-layout="modern"] #app-view::before,
  html[data-layout="modern"] #app-view > .sidebar { display: none !important; }
  html[data-layout="modern"] #app-view:not(.hidden) { display: block !important; padding-left: 0 !important; height: auto !important; overflow: visible !important; }
}