/* =========================================================
   ETNawlonERP — Unified Token-Driven Theme Engine
   Semantic Design Tokens & Native Dark/Light Mode System
   Owner Decision D-3: Default Theme is Light
   ========================================================= */

/* --- 1. TYPOGRAPHY SCALING --- */
html[data-font-size="S"] { font-size: 12px; }
html[data-font-size="M"] { font-size: 13.5px; }
html[data-font-size="L"] { font-size: 15px; }

/* --- 2. THEME DESIGN TOKENS --- */

/* Default Theme: LIGHT (per Owner Decision D-3 & OWNER-RULES.md §12) */
:root,
html,
html[data-theme="light"] {
    /* Brand & Accent */
    --et-brand-primary: #0284c7;
    --et-brand-primary-rgb: 2, 132, 199;
    --et-primary: #0284c7;
    --et-primary-hover: #0369a1;
    --et-primary-active: #075985;
    --et-accent-cyan: #0284c7;

    /* Backgrounds & Canvas */
    --et-bg-canvas: #f8fafc;
    --et-bg-surface: #ffffff;
    --et-bg-card: #ffffff;
    --et-bg-sidebar: #0f172a;
    --et-bg-topbar: #ffffff;
    --et-bg-input: #ffffff;
    --et-bg-subtle: #f1f5f9;
    --et-bg-hover: #f1f5f9;
    --et-surface-elevated: #ffffff;

    /* Borders */
    --et-border-color: #e2e8f0;
    --et-border-subtle: #cbd5e1;
    --et-border-focus: #0284c7;

    /* Typography */
    --et-text-primary: #0f172a;
    --et-text-secondary: #475569;
    --et-text-muted: #64748b;
    --et-text-inverse: #f8fafc;

    /* Semantic Status Tokens */
    --et-danger: #dc2626;
    --et-danger-subtle: #fee2e2;
    --et-danger-text: #991b1b;
    --et-danger-border: #fca5a5;

    --et-warning: #d97706;
    --et-warning-subtle: #fef3c7;
    --et-warning-text: #92400e;
    --et-warning-border: #fcd34d;

    --et-success: #16a34a;
    --et-success-subtle: #dcfce7;
    --et-success-text: #166534;
    --et-success-border: #86efac;

    --et-info: #0284c7;
    --et-info-subtle: #e0f2fe;
    --et-info-text: #075985;
    --et-info-border: #7dd3fc;

    /* Shadows & Overlays */
    --et-focus-ring: rgba(2, 132, 199, 0.25);
    --et-overlay: rgba(15, 23, 42, 0.45);
    --et-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --et-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --et-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);

    /* OSRAD & Legacy Compatibility Variables */
    --osrad-bg-primary: var(--et-bg-card);
    --osrad-bg-secondary: var(--et-bg-canvas);
    --osrad-bg-tertiary: var(--et-bg-subtle);
    --osrad-text-primary: var(--et-text-primary);
    --osrad-text-secondary: var(--et-text-muted);
    --osrad-border: var(--et-border-color);
    --erp-bg-page: var(--et-bg-canvas);
    --erp-border: var(--et-border-color);

    color-scheme: light;
}

/* Explicit Dark Theme */
:root[data-theme="dark"],
html[data-theme="dark"] {
    /* Brand & Accent */
    --et-brand-primary: #38bdf8;
    --et-brand-primary-rgb: 56, 189, 248;
    --et-primary: #38bdf8;
    --et-primary-hover: #0ea5e9;
    --et-primary-active: #0284c7;
    --et-accent-cyan: #38bdf8;

    /* Backgrounds & Canvas */
    --et-bg-canvas: #070c19;
    --et-bg-surface: #0e172a;
    --et-bg-card: #0f1c34;
    --et-bg-sidebar: #091122;
    --et-bg-topbar: #0b1428;
    --et-bg-input: #0a1324;
    --et-bg-subtle: #162644;
    --et-bg-hover: rgba(56, 189, 248, 0.08);
    --et-surface-elevated: #162644;

    /* Borders */
    --et-border-color: #1a2a47;
    --et-border-subtle: #24395d;
    --et-border-focus: #38bdf8;

    /* Typography */
    --et-text-primary: #f8fafc;
    --et-text-secondary: #cbd5e1;
    --et-text-muted: #94a3b8;
    --et-text-inverse: #0f172a;

    /* Semantic Status Tokens */
    --et-danger: #ef4444;
    --et-danger-subtle: rgba(239, 68, 68, 0.15);
    --et-danger-text: #fca5a5;
    --et-danger-border: rgba(239, 68, 68, 0.3);

    --et-warning: #f59e0b;
    --et-warning-subtle: rgba(245, 158, 11, 0.15);
    --et-warning-text: #fde68a;
    --et-warning-border: rgba(245, 158, 11, 0.3);

    --et-success: #22c55e;
    --et-success-subtle: rgba(34, 197, 94, 0.15);
    --et-success-text: #86efac;
    --et-success-border: rgba(34, 197, 94, 0.3);

    --et-info: #38bdf8;
    --et-info-subtle: rgba(56, 189, 248, 0.15);
    --et-info-text: #bae6fd;
    --et-info-border: rgba(56, 189, 248, 0.3);

    /* Shadows & Overlays */
    --et-focus-ring: rgba(56, 189, 248, 0.25);
    --et-overlay: rgba(0, 0, 0, 0.7);
    --et-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --et-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --et-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

    /* OSRAD & Legacy Compatibility Variables */
    --osrad-bg-primary: var(--et-bg-card);
    --osrad-bg-secondary: var(--et-bg-canvas);
    --osrad-bg-tertiary: var(--et-bg-topbar);
    --osrad-text-primary: var(--et-text-primary);
    --osrad-text-secondary: var(--et-text-muted);
    --osrad-border: var(--et-border-color);
    --erp-bg-page: var(--et-bg-canvas);
    --erp-border: var(--et-border-color);

    color-scheme: dark;
}

/* --- 3. BASE BODY & SHELL STYLES --- */
body {
    background-color: var(--et-bg-canvas);
    color: var(--et-text-primary);
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Structural Shell Elements */
.et-shell,
main.content,
.dashboard-container {
    background-color: var(--et-bg-canvas);
    color: var(--et-text-primary);
}

.et-sidebar {
    background-color: var(--et-bg-sidebar);
    border-right: 1px solid var(--et-border-color);
}

.et-topbar {
    background-color: var(--et-bg-topbar);
    border-bottom: 1px solid var(--et-border-color);
    color: var(--et-text-primary);
}

/* --- 4. CARDS & PANELS --- */
.card,
.et-card,
.admin-card,
.et-panel,
.et-audit-panel,
.detail-panel,
.form-panel,
.kpi-card {
    background-color: var(--et-bg-card);
    border: 1px solid var(--et-border-color);
    border-radius: 8px;
    color: var(--et-text-primary);
    box-shadow: var(--et-shadow-sm);
}

/* --- 5. DATA GRIDS & TABLES --- */
table,
.table,
.data-table,
.et-grid {
    background-color: var(--et-bg-card);
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--et-border-color);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    color: var(--et-text-primary);
}

table thead,
.table thead,
.data-table thead,
.et-grid thead {
    background-color: var(--et-bg-topbar);
    color: var(--et-text-primary);
    border-bottom: 2px solid var(--et-border-color);
}

table thead th,
.table thead th,
.data-table thead th,
.et-grid thead th {
    background-color: var(--et-bg-topbar);
    color: var(--et-text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.65rem;
    border-bottom: 2px solid var(--et-border-color);
    border-right: 1px solid var(--et-border-color);
}

table tbody td,
.table tbody td,
.data-table tbody td,
.et-grid tbody td {
    background-color: var(--et-bg-card);
    color: var(--et-text-primary);
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--et-border-color);
    border-right: 1px solid var(--et-border-color);
    vertical-align: middle;
}

table tbody tr:hover,
.table tbody tr:hover,
.data-table tbody tr:hover,
.et-grid tbody tr:hover {
    background-color: var(--et-bg-hover);
}

/* --- 6. TOOLBARS & FOOTERS --- */
.et-command-bar,
.et-grid-toolbar,
.admin-toolbar,
.modal-header,
.drawer-header,
.et-modal-header,
.et-dynamic-drawer__header {
    background-color: var(--et-bg-topbar);
    border-bottom: 1px solid var(--et-border-color);
    color: var(--et-text-primary);
}

footer,
.modal-footer,
.drawer-footer,
.et-modal-footer,
.et-dynamic-drawer__footer,
.et-confirm-dialog__actions,
.et-grid-pager {
    background-color: var(--et-bg-topbar);
    border-top: 1px solid var(--et-border-color);
    color: var(--et-text-primary);
}

/* --- 7. MODALS, DRAWERS & DIALOGS --- */
.modal-content,
.drawer,
.et-modal,
.et-dynamic-drawer__panel,
.et-confirm-dialog,
.et-alert-dialog,
.et-lookup-dialog__panel {
    background-color: var(--et-bg-surface);
    border: 1px solid var(--et-border-color);
    border-radius: 8px;
    color: var(--et-text-primary);
    box-shadow: var(--et-shadow-lg);
}

/* --- 8. FORM CONTROLS & INPUTS --- */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="email"],
input[type="password"],
select,
textarea,
.form-control,
.form-select,
.et-input {
    background-color: var(--et-bg-input);
    border: 1px solid var(--et-border-color);
    color: var(--et-text-primary);
    border-radius: 6px;
    padding: 0.4rem 0.65rem;
    font-size: 0.875rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.et-input:focus {
    background-color: var(--et-bg-input);
    border-color: var(--et-border-focus);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--et-focus-ring);
    color: var(--et-text-primary);
}

/* Disabled input state */
input:disabled,
select:disabled,
textarea:disabled,
.form-control:disabled,
.form-select:disabled {
    background-color: var(--et-bg-subtle);
    color: var(--et-text-muted);
    cursor: not-allowed;
    opacity: 0.75;
}

/* --- 9. BUTTONS & CHIPS --- */
.et-button,
.et-command-button,
.et-icon-button {
    font-weight: 500;
    border-radius: 6px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.et-audit-chip {
    background-color: var(--et-bg-subtle);
    border: 1px solid var(--et-border-color);
    color: var(--et-text-secondary);
    border-radius: 12px;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
}

/* --- 10. TYPOGRAPHY & TEXT UTILITIES --- */
h1, h2, h3, h4, h5, h6,
strong, b, label {
    color: var(--et-text-primary);
}

p, small, .text-muted {
    color: var(--et-text-muted);
}