@font-face { font-family: 'Klasik Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/klasik-inter-400.ttf') format('truetype'); }
@font-face { font-family: 'Klasik Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/klasik-inter-500.ttf') format('truetype'); }
@font-face { font-family: 'Klasik Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/klasik-inter-600.ttf') format('truetype'); }
@font-face { font-family: 'Klasik Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/klasik-inter-700.ttf') format('truetype'); }
@font-face { font-family: 'Klasik Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/klasik-inter-800.ttf') format('truetype'); }

/* Klasik is an opt-in layer. No grid, column, width, order or visibility changes. */
@media screen {
    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) {
        color-scheme: dark;
        --klasik-chrome: #101d17;
        --klasik-accent-text: #a6ddbc;
        --klasik-control-border: #426650;
        --klasik-on-primary: #f1f7f3;
        --klasik-selection: #234333;
        --bg-main: #0b1411 !important;
        --bg-sidebar: #101d17 !important;
        --bg-card: #14221b !important;
        --bg-card-hover: #1b2e24 !important;
        --panel: #14221b !important;
        --panel-bg: #14221b !important;
        --panel-secondary: #1b2e24 !important;
        --panel-glass: #14221b !important;
        --panel-border: #30483a !important;
        --panel-border-inner: #263e30 !important;
        --panel-glass-border: #30483a !important;
        --border: #30483a !important;
        --glass-border: #30483a !important;
        --text-heading: #f1f7f3 !important;
        --text-primary: #f1f7f3 !important;
        --text-main: #e1ece5 !important;
        --text-secondary: #adc2b5 !important;
        --text-muted: #adc2b5 !important;
        --accent: #0C3527 !important;
        --primary: #0C3527 !important;
        --accent-rgb: 12, 53, 39 !important;
        --accent-hover: #174e39 !important;
        --accent-active: #d9efe9 !important;
        --text-accent: #a6ddbc !important;
        --secondary-surface: #234333 !important;
        --hover-bg: #1f382a !important;
        --panel-bg-alpha: 1 !important;
        --card-bg-alpha: 1 !important;
        --panel-blur: 0px !important;
        --glass-blur: none !important;
        --ios-shadow: none !important;
        --ios-shadow-hover: none !important;
        --shadow-glass: none !important;
        --crm-primary: #0C3527 !important;
        --crm-text-on-primary: #f1f7f3 !important;
        --crm-bg-glass: #14221b !important;
        --crm-bg-card: #14221b !important;
        --crm-border: #30483a !important;
        --erp-primary: #0C3527 !important;
        --erp-bg: #0b1411 !important;
    }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) body {
        background: var(--bg-main) !important;
        color: var(--text-main);
        font-family: 'Klasik Inter', 'Inter', system-ui, sans-serif !important;
        font-size: 12.5px;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
    }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(button, input, select, textarea, h1, h2, h3, h4, h5, h6, p, label, th, td, .nav-item, .value, .stat-value) {
        font-family: 'Klasik Inter', 'Inter', system-ui, sans-serif !important;
    }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(.sidebar, .topbar, .top-header, .header, .glass-panel, .portal-header, .bottom-nav) {
        background: var(--klasik-chrome) !important;
        border-color: var(--panel-border) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(.card, .stat-card, .stat-card-glass, .prod-kpi-card, .crm-card, .modal-content, .card-profile, .action-card, .history-card, .invoice-card, .voucher-card, .modal-card, .access-card) {
        background: var(--panel) !important;
        border: 1px solid var(--panel-border) !important;
        border-radius: 20px !important;
        color: var(--text-main);
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(h1, .greeting h2, #view-title, .page-title) {
        font-size: 19px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        letter-spacing: -0.5px;
        color: var(--text-heading) !important;
    }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(h2, h3, h4, h5, h6, .card-title, .section-title) {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        line-height: 1.5 !important;
        color: var(--text-heading) !important;
    }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(.card .value, .stat-value, .stat-number, .metric-value, .kpi-value) {
        font-size: 26px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        letter-spacing: -1px;
        font-variant-numeric: tabular-nums;
    }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(.nav-item, .greeting p, #view-subtitle, .card p) {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(.nav-section, .stat-label, .card .label) {
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        letter-spacing: 1px;
        color: var(--text-muted) !important;
    }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) .card:has(> .value) > h3,
    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) .stat-card-glass > div:last-child > div:first-child {
        font-size: 10.5px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        color: var(--text-muted) !important;
    }
    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) .stat-card-glass > div:last-child > div:nth-child(2) {
        font-family: 'Klasik Inter', 'Inter', system-ui, sans-serif !important;
        font-size: 26px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        letter-spacing: -1px;
    }

    /* Keep forest green as the primary fill, with a readable mint text accent. */
    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(
        [style^="color: var(--accent)"], [style*="; color: var(--accent)"],
        [style^="color:var(--accent)"], [style*=";color:var(--accent)"],
        [style^="color: var(--primary)"], [style*="; color: var(--primary)"],
        [style^="color: #0C3527"], [style*="; color: #0C3527"],
        [style^="color:#0C3527"], [style*=";color:#0C3527"],
        .text-accent, .text-primary
    ) { color: var(--klasik-accent-text) !important; }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(
        [style^="color: #1e293b"], [style*="; color: #1e293b"],
        [style^="color: #0F172A"], [style*="; color: #0F172A"],
        [style^="color: #111827"], [style*="; color: #111827"],
        [style^="color:#1e293b"], [style*=";color:#1e293b"]
    ) { color: var(--text-main) !important; }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(
        .bg-white, .bg-gray-50, .bg-gray-100, .bg-erp-dark, .bg-erp-card,
        .dark\:bg-erp-dark, .dark\:bg-erp-card
    ) { background-color: var(--panel) !important; color: var(--text-main); }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900, .text-slate-800) { color: var(--text-main) !important; }
    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(.bottom-nav-item.active, .text-erp-green) { color: var(--klasik-accent-text) !important; }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(.nav-item.active, .nav-item:hover) {
        background: var(--klasik-selection) !important;
        color: var(--klasik-on-primary) !important;
        border-color: var(--klasik-control-border) !important;
    }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(button, .btn, .ios-btn) {
        font-size: 12px !important;
        font-weight: 700;
        line-height: 1.5;
    }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(.btn-primary, .ios-btn-primary) {
        background: #0C3527 !important;
        color: var(--klasik-on-primary) !important;
        border: 1px solid var(--klasik-control-border) !important;
        box-shadow: none !important;
    }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
        background: var(--klasik-chrome) !important;
        color: var(--text-main) !important;
        border-color: var(--klasik-control-border) !important;
        border-radius: 9px;
        font-size: 12.5px !important;
        line-height: 1.5;
    }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(input, textarea)::placeholder { color: var(--text-muted) !important; }
    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(button, a, input, select, textarea):focus-visible {
        outline: 2px solid var(--klasik-accent-text);
        outline-offset: 2px;
    }

    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) th {
        background: var(--panel-secondary) !important;
        color: var(--text-muted) !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        line-height: 1.5;
        letter-spacing: 0.6px;
        border-color: var(--panel-border) !important;
    }
    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) td {
        font-size: 12.5px !important;
        line-height: 1.5;
        border-color: var(--panel-border) !important;
    }
    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) tbody tr:hover { background: var(--panel-secondary) !important; }

    /* Solid Klasik surfaces stay independent of wallpaper settings. */
    html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(#workspace-wallpaper-layer, #workspace-dim-overlay) { opacity: 0 !important; }

    @media (max-width: 767px) {
        html:is([data-workspace-preset="klasik"], [data-workspace-preset="klasik_light"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
            font-size: 16px !important;
        }
    }
}

@media screen {
    html[data-workspace-preset="klasik_light"] {
        color-scheme: light;
        --bg-main: #f1f6f3 !important;
        --bg-sidebar: #ffffff !important;
        --bg-card: #ffffff !important;
        --bg-card-hover: #e9f2ec !important;
        --panel: #ffffff !important;
        --panel-bg: #ffffff !important;
        --panel-secondary: #e9f2ec !important;
        --panel-glass: #ffffff !important;
        --panel-border: #9bb3a4 !important;
        --panel-border-inner: #c7d8ce !important;
        --panel-glass-border: #9bb3a4 !important;
        --border: #9bb3a4 !important;
        --glass-border: #9bb3a4 !important;
        --text-heading: #102c1e !important;
        --text-primary: #102c1e !important;
        --text-main: #203b2e !important;
        --text-secondary: #486151 !important;
        --text-muted: #486151 !important;
        --text-accent: #0c3527 !important;
        --secondary-surface: #d9efe9 !important;
        --hover-bg: #e9f2ec !important;
        --success: #146139 !important;
        --warning: #7b4b00 !important;
        --danger: #aa2424 !important;
        --info: #235775 !important;
        --crm-bg-glass: #ffffff !important;
        --crm-bg-card: #ffffff !important;
        --crm-border: #9bb3a4 !important;
        --erp-bg: #f1f6f3 !important;
        --klasik-chrome: #ffffff;
        --klasik-accent-text: #0c3527;
        --klasik-control-border: #718b7c;
        --klasik-selection: #0c3527;
    }

    /* Intermediate color fades can make a readable pair temporarily disappear. */
    html[data-workspace-preset="klasik_light"] * {
        transition-property: opacity, transform, box-shadow, border-color, width, height, max-height, min-height, margin, padding, left, top, right, bottom !important;
    }
    html[data-workspace-preset="klasik_light"] .nav-item { color: var(--text-main) !important; }

    html[data-workspace-preset="klasik_light"] :is(.nav-item.active, .nav-item:hover) { color: #ffffff !important; }
    html[data-workspace-preset="klasik_light"] :is(.btn-primary, .ios-btn-primary) { color: #ffffff !important; }
    html[data-workspace-preset="klasik_light"] :is(.btn-danger, button[onclick="confirmLogout()"]) {
        background: #aa2424 !important;
        color: #ffffff !important;
    }
    html[data-workspace-preset="klasik_light"] :is(input, select, textarea):disabled {
        opacity: 1;
        color: #486151 !important;
        background: #e9f2ec !important;
    }
    html[data-workspace-preset="klasik_light"] #modal-theme-customizer .modal-content > div {
        border-color: #9bb3a4 !important;
    }
    html[data-workspace-preset="klasik_light"] #modal-theme-customizer button[onclick="closeThemeCustomizerModal()"] {
        background: #d9efe9 !important;
        color: #0c3527 !important;
        border: 1px solid #718b7c !important;
    }
    html[data-workspace-preset="klasik_light"] #modal-theme-customizer .modal-content > div[style*="background:"] {
        background: #f1f6f3 !important;
    }
    html[data-workspace-preset="klasik_light"] .theme-preset-card[data-preset="klasik_light"] {
        border: 2px solid #0c3527 !important;
        box-shadow: 0 0 0 2px rgba(12, 53, 39, 0.14) !important;
    }
    html[data-workspace-preset="klasik_light"] :is(input[type="range"], input[type="checkbox"], input[type="radio"]) {
        accent-color: #0c3527 !important;
    }
    html[data-workspace-preset="klasik_light"] input[type="color"] { border-color: #718b7c !important; }
    /* Readability corrections are transient and only active in Klasik Light. */
    html[data-workspace-preset="klasik_light"] body [data-klasik-contrast="text"][data-klasik-contrast][data-klasik-contrast] {
        color: var(--klasik-readable-color) !important;
        -webkit-text-fill-color: var(--klasik-readable-color) !important;
    }
    html[data-workspace-preset="klasik_light"] [data-klasik-placeholder]::placeholder {
        color: #486151 !important;
        opacity: 1;
    }
    html[data-workspace-preset="klasik_light"] .nav-item[style*="opacity"] {
        opacity: 1 !important;
        color: #486151 !important;
    }
}

/* R07: transient text corrections apply to every saved workspace palette.
   No geometry, typography or column rules are introduced here. */
@media screen {
    html[data-workspace-preset] * {
        transition-property: opacity, transform, box-shadow, border-color, width, height, max-height, min-height, margin, padding, left, top, right, bottom !important;
    }
    html[data-workspace-preset] body [data-klasik-contrast="text"][data-klasik-contrast][data-klasik-contrast][data-klasik-contrast] {
        color: var(--klasik-readable-color) !important;
        -webkit-text-fill-color: var(--klasik-readable-color) !important;
    }
    html[data-workspace-preset] [data-klasik-placeholder]::placeholder {
        color: var(--workspace-placeholder-color) !important;
        opacity: 1;
    }
}