/* Sunrise ERP admin design system — aligned to OnePlateform SuperAdmin */
:root {
    /* Brand colors from the Sunrise logo */
    --op-primary: #112e67;
    --op-primary-hover: #0a1d42;
    --op-primary-light: rgba(17,46,103,.10);
    --op-accent: #f3c623;
    --op-accent-hover: #d4a91a;
    --op-success: #71dd37;
    --op-info: #03c3ec;
    --op-warning: #ffab00;
    --op-danger: #ff3e1d;
    --op-body-bg: #f5f5f9;
    --op-card-bg: #fff;
    --op-sidebar-bg: #2b2c40;
    --op-heading-color: #566a7f;
    --op-body-color: #697a8d;
    --op-muted-color: #a1acb8;
    --op-border-color: #e4e6e8;
    --op-border-light: #f1f3f5;
    --op-shadow-sm: 0 1px 3px rgba(67,89,113,.12);
    --op-shadow-card: 0 2px 6px rgba(67,89,113,.12);
    --op-radius: 8px;
    --op-font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html, body { font-family: var(--op-font); background: var(--op-body-bg); color: var(--op-body-color); }
body { font-size: .9375rem; }
.erp-layout { background: var(--op-body-bg); }
.erp-sidebar { background: var(--op-sidebar-bg); box-shadow: 0 0 18px rgba(67,89,113,.08); }
.sidebar-header { height: 64px; padding: 0 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand { font-family: var(--op-font); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.sidebar-logo { width: 34px; height: 34px; object-fit: contain; }
.sidebar-nav { padding: 1rem .75rem; }
.sidebar-menu-toggle, .sidebar-menu-item, .sidebar-submenu-item { border-radius: 8px; color: rgba(255,255,255,.72); min-height: 42px; }
.sidebar-menu-toggle:hover, .sidebar-menu-item:hover, .sidebar-submenu-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-menu-item.active, .sidebar-submenu-item.active { background: var(--op-accent); color: var(--op-primary); box-shadow: 0 2px 6px rgba(243,198,35,.28); }
.menu-icon { width: 24px; }
.erp-main { background: var(--op-body-bg); }
.erp-topbar { height: 64px; background: var(--op-card-bg); border-bottom: 1px solid var(--op-border-light); box-shadow: 0 1px 0 rgba(67,89,113,.03); }
.topbar-username { color: var(--op-heading-color); font-weight: 600; }
.erp-content { padding: 1.25rem; max-width: 1600px; }
.page-header { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--op-border-light); }
.page-title { color: var(--op-heading-color); font-size: 1.5rem; font-weight: 700; letter-spacing: -.015em; }
.page-subtitle { color: var(--op-body-color); }
.card, .dashboard-panel, .settings-panel, .report-category, .master-card, .data-table-container, .op-card { background: var(--op-card-bg); border: 1px solid var(--op-border-light); border-radius: 12px; box-shadow: var(--op-shadow-sm); }
.dashboard-panel, .settings-panel, .report-category { overflow: hidden; }
.panel-header, .settings-panel > h3 { border-bottom-color: var(--op-border-light); color: var(--op-heading-color); }
.btn-primary, .btn-primary:focus { background: var(--op-primary); border-color: var(--op-primary); color: #fff; }
.btn-primary:hover { background: var(--op-primary-hover); border-color: var(--op-primary-hover); }
.btn-outline-primary { color: var(--op-primary); border-color: var(--op-primary); }
.btn-outline-primary:hover { background: var(--op-primary); border-color: var(--op-primary); }
.form-input, .form-control, .form-select, textarea { background: var(--op-card-bg); border: 1px solid var(--op-border-color); border-radius: 6px; color: var(--op-heading-color); }
.form-input:focus, .form-control:focus, .form-select:focus, textarea:focus { border-color: var(--op-primary); box-shadow: 0 0 0 3px rgba(17,46,103,.15); outline: 0; }
.data-table, .table { color: var(--op-body-color); }
.data-table th, .table th { background: #f8f9fa; color: var(--op-body-color); border-color: var(--op-border-light); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.data-table td, .table td { border-color: var(--op-border-light); font-size: .875rem; }
.status-badge { border-radius: 6px; font-weight: 600; }
.op-settings-hub { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 1rem; }
.op-settings-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; color: inherit; text-decoration: none; background: var(--op-card-bg); border: 1px solid var(--op-border-light); border-radius: 12px; box-shadow: var(--op-shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.op-settings-card:hover { color: inherit; transform: translateY(-2px); border-color: rgba(243,198,35,.7); box-shadow: 0 6px 16px rgba(67,89,113,.14); }
.op-settings-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: var(--op-primary); background: rgba(243,198,35,.22); font-size: 1.25rem; }
.op-settings-card h2 { margin: 0 0 .25rem; color: var(--op-heading-color); font-size: .95rem; font-weight: 600; }
.op-settings-card p { margin: 0; color: var(--op-body-color); font-size: .8125rem; }
@media (max-width: 768px) { .erp-content { padding: 1rem; } .op-settings-hub { grid-template-columns: 1fr; } }

html.dark, :root[data-theme="dark"] { --op-body-bg:#0a1d42; --op-card-bg:#112e67; --op-sidebar-bg:#071631; --op-heading-color:#fff; --op-body-color:#fff; --op-muted-color:rgba(255,255,255,.72); --op-border-color:rgba(255,255,255,.2); --op-border-light:rgba(255,255,255,.12); }
html.dark .page-title, html.dark .page-subtitle, html.dark .panel-header, html.dark label, html.dark p, html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
:root[data-theme="dark"] .page-title, :root[data-theme="dark"] .page-subtitle, :root[data-theme="dark"] .panel-header, :root[data-theme="dark"] label, :root[data-theme="dark"] p, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6 { color: #fff; }
html.dark .form-input, html.dark .form-control, html.dark .form-select, html.dark textarea, :root[data-theme="dark"] .form-input, :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select, :root[data-theme="dark"] textarea { background: #0a1d42; color: #fff; border-color: rgba(255,255,255,.25); }