/**
 * BillPosware Theme - Light/Dark Mode Symmetric UI
 * Light: White Sidebar & Header | Icons Green/Gold
 * Dark: Dark Navy #0a192f everywhere
 */
:root {
    /* Responsive font size - scales with screen (large=bigger, small=readable) */
    --bp-font-base: clamp(14px, 0.9rem + 0.4vw, 17px);
    --bp-font-sidebar: clamp(14px, 0.95rem + 0.35vw, 16px);
    --bp-font-card: clamp(14px, 0.95rem + 0.4vw, 17px);
    --bp-font-nav: clamp(14px, 0.9rem + 0.35vw, 16px);

    --bp-forest-green: #228B22;
    --bp-icon-green: #22c55e;
    --bp-gold: #c9a227;
    --bp-dark-grey: #4a5568;
    --bp-sidebar-bg: #ffffff;
    --bp-header-bg: #4CAF50;
    --bp-header-border: rgba(0,0,0,0.06);
    --bp-menu-text: #4a5568;
    --bp-icon-primary: #228B22;
    --bp-icon-secondary: #c9a227;
    --bp-border: #e5e7eb;
    --bp-shadow: 0 1px 3px rgba(0,0,0,0.08);
    --bp-btn-border: #e5e7eb;
    --bp-btn-color: #228B22;
    --bp-btn-shadow: 2px 2px 0 #c9a227;
}

body.dark-mode {
    --bp-sidebar-bg: #0a192f;
    --bp-header-bg: #0a192f;
    --bp-header-border: #1e293b;
    --bp-menu-text: #cbd5e1;
    --bp-icon-primary: #34d399;
    --bp-icon-secondary: #fcd34d;
    --bp-border: #1e293b;
    --bp-shadow: 0 4px 12px rgba(0,0,0,0.4);
    --bp-btn-border: rgba(233,167,2,0.3);
    --bp-btn-color: #fcd34d;
    --bp-btn-shadow: 2px 2px 0 rgba(249,196,64,0.4);
}

/* Light: White | Dark: #0a192f */
body.dark-mode { background-color: #0a192f !important; }
body.dark-mode .content-wrapper { background-color: #0a192f !important; }
body.dark-mode .main-header { background-color: #0a192f !important; }
body.dark-mode .main-sidebar,
body.dark-mode .sidebar,
body.dark-mode .left-side { background-color: #0a192f !important; }

/* Header & Sidebar logo row: 60px height, white/dark bg, same border-bottom */
.bp-modern-header {
    height: 60px !important;
    min-height: 60px !important;
    background-color: var(--bp-header-bg) !important;
    border-bottom: 1px solid var(--bp-header-border, var(--bp-border)) !important;
}
body.dark-mode .bp-modern-header { background-color: #0a192f !important; }

.sidebar-logo-container, .sidebar-logo-wrap {
    height: 60px !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

.bp-pos-header-wrapper { background-color: var(--bp-header-bg) !important; box-shadow: var(--bp-shadow) !important; border-color: var(--bp-border) !important; }

.modern-sidebar, .side-bar.modern-sidebar {
    background: var(--bp-sidebar-bg) !important;
    border-color: var(--bp-border) !important;
    box-shadow: var(--bp-shadow) !important;
}
.modern-sidebar::before { opacity: 0 !important; }
body.dark-mode .modern-sidebar::before { opacity: 1 !important; }

.sidebar-logo-container, .sidebar-logo-wrap { background: transparent !important; }
body.dark-mode .sidebar-logo-container, body.dark-mode .sidebar-logo-wrap { background: linear-gradient(135deg, #0a192f 0%, #0d1321 100%) !important; }

/* Sidebar nav items */
.bp-nav .nav-item { color: var(--bp-menu-text) !important; }
body.dark-mode .bp-nav .nav-item { color: var(--bp-menu-text, #cbd5e1) !important; }

.bp-nav .nav-item .nav-item-icon i,
.bp-nav .nav-item .nav-item-icon svg { color: #4CAF50 !important; filter: none !important; }

/* Dark mode: active states */
body.dark-mode .bp-nav .nav-item.active { background: #388E3C !important; color: #fff !important; }
body.dark-mode .bp-nav .nav-item.active .nav-item-icon i,
body.dark-mode .bp-nav .nav-item.active .nav-item-icon svg { color: #fff !important; }
body.dark-mode .bp-nav .nav-item:hover { background: rgba(255,255,255,0.06) !important; }
body.dark-mode .bp-nav .nav-sub .nav-sub-item.active { background: rgba(76,175,80,0.2) !important; color: #66BB6A !important; }
body.dark-mode .nav-section-divider { background: #1e293b !important; }
body.dark-mode .nav-user-name { color: #cbd5e1 !important; }
body.dark-mode .nav-user-role { color: #64748b !important; }
body.dark-mode .bp-net-label { color: #cbd5e1 !important; }

/* Sidebar text */
#side-bar .nav-item > span:not(.nav-item-icon):not(.nav-item-chevron) {
    font-weight: 600 !important;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* Sidebar: same font as Superadmin so Khmer "hands and feet" render correctly */
.side-bar, .modern-sidebar, #side-bar,
.bp-nav .nav-item, .bp-nav .nav-item span {
    font-family: 'Noto Sans Khmer', 'Battambang', sans-serif !important;
}

.bp-brand-btn { border-color: var(--bp-btn-border) !important; color: var(--bp-btn-color) !important; box-shadow: var(--bp-btn-shadow) !important; }
.bp-brand-btn:hover { border-color: var(--bp-icon-secondary) !important; color: var(--bp-icon-secondary) !important; }
.bp-brand-btn svg { stroke: currentColor !important; }

.bp-menu-item, .bp-menu-item-lang { color: var(--bp-menu-text) !important; }
.bp-dropdown-menu { background-color: var(--bp-sidebar-bg) !important; border-color: var(--bp-border) !important; }

/* Table header: Light = light green bg + dark text + small green line - Apply All System */
.table thead th, .table > thead > tr > th,
table.dataTable thead th, .dataTables_wrapper table thead th,
.box-table thead th, #contact_table .contact-table-header th, #contact_table thead.contact-table-header th,
.modern-data-card .table thead th, .hrm-content-wrapper .table thead th,
.hrm-attendance-table thead th, .khqr-list-table thead th {
    background-color: #e8f5e9 !important;
    color: rgba(0,0,0,0.75) !important;
    border-color: var(--bp-border) !important;
    border-right: 1px solid rgba(0,0,0,0.06) !important;
    border-bottom: 2px solid rgba(30, 154, 92, 0.35) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    padding: 12px 10px !important;
    font-family: 'Noto Sans Khmer', 'Battambang', sans-serif !important;
}
.table > thead > tr > th:first-child { border-top-left-radius: 10px; }
.table > thead > tr > th:last-child { border-top-right-radius: 10px; border-right-color: rgba(30, 154, 92, 0.2) !important; }
/* Invoice items table header — ពណ៌ប្រេសជិតស (Product, Quantity, Unit Price, Subtotal) */
.bp-inline-items-wrap .bp-invoice-items-table thead th,
.bp-inline-items-wrap .bp-invoice-items-thead th {
    background: #f1f5f9 !important; color: #475569 !important;
    border-bottom: 1px solid #e2e8f0 !important; border-right-color: #e2e8f0 !important;
}
body.dark-mode .table thead th, body.dark-mode .table > thead > tr > th,
body.dark-mode .box-table thead th, body.dark-mode #contact_table .contact-table-header th,
body.dark-mode .modern-data-card .table thead th, body.dark-mode .hrm-content-wrapper .table thead th,
body.dark-mode .hrm-attendance-table thead th, body.dark-mode .khqr-list-table thead th {
    background-color: #1a2b4b !important; color: #ffffff !important;
    border-right-color: rgba(255,255,255,0.08) !important;
    border-bottom: 2px solid rgba(255,255,255,0.15) !important;
    box-shadow: none !important;
}
body.dark-mode .table > thead > tr > th:last-child { border-right-color: rgba(255,255,255,0.12) !important; }

/* Table footer: same background and text color as table header - Full System */
.table tfoot tr, .table tfoot tr.footer-total, .table tfoot tr.bg-gray,
.table > tfoot > tr > td, .table > tfoot > tr > th,
table.dataTable tfoot th, table.dataTable tfoot td,
.dataTables_wrapper .table tfoot th, .dataTables_wrapper .table tfoot td {
    background-color: #e8f5e9 !important;
    color: rgba(0,0,0,0.75) !important;
    border-color: var(--bp-border) !important;
    font-weight: 600 !important;
}
body.dark-mode .table tfoot tr, body.dark-mode .table tfoot tr.footer-total, body.dark-mode .table tfoot tr.bg-gray,
body.dark-mode .table > tfoot > tr > td, body.dark-mode .table > tfoot > tr > th,
body.dark-mode table.dataTable tfoot th, body.dark-mode table.dataTable tfoot td {
    background-color: #1a2b4b !important;
    color: #ffffff !important;
}

/* Table empty state (គ្មានទិន្នន័យ): 70-80% black text */
table.dataTable td.dataTables_empty,
table.dataTable th.dataTables_empty {
    color: rgba(0,0,0,0.75) !important;
}

/* Font Siemreap for Khmer - Full app symmetry when Khmer is selected */
html.bp-lang-kh, html.bp-lang-kh body,
html.bp-lang-kh .sidebar, html.bp-lang-kh .main-sidebar,
html.bp-lang-kh .sidebar-menu, html.bp-lang-kh .content-wrapper,
html.bp-lang-kh .table, html.bp-lang-kh .box,
html.bp-lang-kh .main-header, html.bp-lang-kh .bp-modern-header,
/* Same font as Superadmin - Noto Sans Khmer for correct Khmer rendering across all sections */
html.bp-lang-kh .main-content, html.bp-lang-kh .content,
html.bp-lang-kh .modal, html.bp-lang-kh .form-control,
html.bp-lang-kh .btn, html.bp-lang-kh .dropdown-menu,
html.bp-lang-kh .breadcrumb, html.bp-lang-kh h1, html.bp-lang-kh h2, html.bp-lang-kh h3,
html.bp-lang-kh .bp-pos-header-wrapper, html.bp-lang-kh .smartmenu,
html.bp-lang-kh #side-bar, html.bp-lang-kh .left-side,
html.bp-lang-kh .wrapper,
/* Apply to content wrapper for all pages (like Superadmin) */
.content-wrapper, .main-content, .content, #scrollable-container,
.wrapper, .small-box, .info-box { font-family: 'Noto Sans Khmer', 'Battambang', sans-serif !important; }

/* Responsive font size - large screen = bigger, small screen = readable */
body { font-size: var(--bp-font-base) !important; }
.content-wrapper, .main-content, .content, #scrollable-container { font-size: var(--bp-font-base) !important; }
#side-bar .nav-item, #side-bar .nav-item span,
#side-bar .nav-sub-item, #side-bar .nav-sub-item span { font-size: var(--bp-font-sidebar) !important; }
.small-box p, .small-box .small-box-footer, .info-box .info-box-text { font-size: var(--bp-font-card) !important; }
.superadmin-nav-bar .nav a, .superadmin-nav-bar .navbar-brand { font-size: var(--bp-font-nav) !important; }
/* Dashboard card numbers - scale with screen */
.small-box h3 { font-size: clamp(28px, 2rem + 1.5vw, 42px) !important; }

/* Font Awesome Icons - Green for symmetry (no square box) */
.fa, .fas, .far, .fab, .fal, .fad,
.dropdown-menu i.fa, .dropdown-menu i.fas, .dropdown-menu i.far,
.btn-group i.fa, .btn-group i.fas, .table .fa, .table .fas { color: var(--bp-icon-green, #22c55e) !important; background: none !important; border: none !important; box-shadow: none !important; }
body.dark-mode .fa, body.dark-mode .fas, body.dark-mode .far { color: #34d399 !important; }

/* Superadmin Module — BillPosware Brand: green, transitions, animations */
.superadmin-nav-bar, .superadmin-nav-bar .navbar,
.superadmin-nav-bar .navbar-brand, .superadmin-nav-bar .nav a { font-family: 'Noto Sans Khmer', 'Battambang', sans-serif !important; }
.superadmin-nav-bar .navbar-brand {
    color: #4CAF50 !important;
    font-weight: 600;
    transition: color .25s ease, transform .25s cubic-bezier(0.34,1.56,0.64,1);
}
.superadmin-nav-bar .navbar-brand:hover { color: #388E3C !important; transform: translateX(2px); }
.superadmin-nav-bar .navbar-brand i { color: #4CAF50 !important; }
.superadmin-nav-bar .nav > li > a {
    color: #4a5568 !important;
    transition: color .25s ease, background .25s ease, transform .25s cubic-bezier(0.34,1.56,0.64,1);
}
.superadmin-nav-bar .nav > li > a:hover {
    color: #388E3C !important;
    background: #DBF5DC !important;
    transform: translateX(3px);
}
.superadmin-nav-bar .nav > li.active > a {
    background: #4CAF50 !important;
    color: #fff !important;
    font-weight: 600;
}
.superadmin-nav-bar .nav > li.active > a i { color: #fff !important; }
.superadmin-nav-bar .nav > li > a i { color: #4CAF50 !important; transition: color .25s ease, transform .25s cubic-bezier(0.34,1.56,0.64,1); }
.superadmin-nav-bar .nav > li > a:hover i { color: #388E3C !important; transform: translateX(2px); }
.superadmin-content-wrapper { font-family: 'Noto Sans Khmer', 'Battambang', sans-serif !important; }

/* Header alignment: bp-modern-header and superadmin-nav-bar same width on all screen sizes */
.superadmin-nav-bar { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
.superadmin-nav-bar .navbar { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.bp-modern-header .tw-px-5,
.superadmin-nav-bar .tw-px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
@media (max-width: 1200px) {
    .bp-modern-header .tw-px-5,
    .superadmin-nav-bar .tw-px-5 { padding-left: 1rem !important; padding-right: 1rem !important; }
}
@media (max-width: 992px) {
    .bp-modern-header .tw-px-5,
    .superadmin-nav-bar .tw-px-5 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}
@media (max-width: 768px) {
    .bp-modern-header .tw-px-5,
    .superadmin-nav-bar .tw-px-5 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
}

/* Superadmin date filter buttons — BillPosware green active state */
.bp-date-filter-group .bp-date-filter-btn {
    border: 1px solid #E5E7EB;
    background: #fff;
    color: #4a5568;
    border-radius: 10px;
    padding: 8px 16px;
    font-weight: 600;
    transition: all .25s cubic-bezier(0.34,1.56,0.64,1);
}
.bp-date-filter-group .bp-date-filter-btn:hover {
    background: #DBF5DC;
    color: #388E3C;
    border-color: #4CAF50;
}
.bp-date-filter-group .bp-date-filter-btn.active {
    background: #4CAF50 !important;
    color: #fff !important;
    border-color: #4CAF50 !important;
}

/* Superadmin "More Information" link — BillPosware green */
.content a.small-box-footer {
    color: #4CAF50 !important;
    transition: color .25s ease;
}
.content a.small-box-footer:hover {
    color: #388E3C !important;
}

/* BillPosware Modal — Dark mode overrides */
body.dark-mode .modal-body {
    background: #1e2133 !important;
    color: #cbd5e1 !important;
}
body.dark-mode .modal-footer {
    background: #1e2133 !important;
    border-top-color: #2a2d3e !important;
}
body.dark-mode .modal-body .bp-modal-password-wrap {
    background: #1a1d2e;
    border-color: #2a2d3e;
}
body.dark-mode .modal-body .bp-modal-password-wrap .bp-modal-password-icon {
    background: #0f172a;
    border-right-color: #2a2d3e;
    color: #4CAF50;
}
body.dark-mode .modal-body .bp-modal-password-wrap input {
    background: transparent;
    color: #cbd5e1;
}