/* Wahat360 ERP theme — brand colours taken from the Wahat360 logo */
:root {
    --w-primary: #2e9fd3;
    --w-primary-600: #1f88bb;
    --w-primary-50: #eaf6fc;
    --w-ink: #0f141a;
    --w-ink-2: #334155;
    --w-muted: #64748b;
    --w-bg: #f3f6fa;
    --w-card: #ffffff;
    --w-border: #e3e9f0;
    --w-sidebar: #ffffff;
    --w-sidebar-w: 264px;
    --w-success: #16a34a;
    --w-danger: #dc2626;
    --w-warning: #d97706;
    --bs-primary: #2e9fd3;
    --bs-primary-rgb: 46, 159, 211;
    --bs-link-color: #1f88bb;
    --bs-link-color-rgb: 31, 136, 187;
    --bs-body-font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
    --bs-body-color: #1e293b;
    --bs-border-color: #e3e9f0;
}

body { background: var(--w-bg); font-size: .875rem; color: var(--bs-body-color); }
a { text-decoration: none; }
.btn-primary { --bs-btn-bg: var(--w-primary); --bs-btn-border-color: var(--w-primary); --bs-btn-hover-bg: var(--w-primary-600); --bs-btn-hover-border-color: var(--w-primary-600); --bs-btn-active-bg: var(--w-primary-600); --bs-btn-disabled-bg: var(--w-primary); --bs-btn-disabled-border-color: var(--w-primary); }
.btn-outline-primary { --bs-btn-color: var(--w-primary-600); --bs-btn-border-color: var(--w-primary); --bs-btn-hover-bg: var(--w-primary); --bs-btn-hover-border-color: var(--w-primary); --bs-btn-active-bg: var(--w-primary-600); }
.btn-dark { --bs-btn-bg: var(--w-ink); --bs-btn-border-color: var(--w-ink); }
.text-primary { color: var(--w-primary-600) !important; }
.bg-primary { background-color: var(--w-primary) !important; }
.text-bg-primary { background-color: var(--w-primary) !important; color: #fff !important; }
.form-control:focus, .form-select:focus { border-color: #8fcbe9; box-shadow: 0 0 0 .2rem rgba(46, 159, 211, .18); }
.form-check-input:checked { background-color: var(--w-primary); border-color: var(--w-primary); }
.form-label { font-weight: 500; color: var(--w-ink-2); margin-bottom: .25rem; font-size: .8rem; }
.form-control, .form-select { font-size: .85rem; }

/* ---------- shell ---------- */
.w-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--w-sidebar-w); background: var(--w-sidebar); border-right: 1px solid var(--w-border); display: flex; flex-direction: column; z-index: 1040; transition: transform .2s ease; }
.w-brand { height: 68px; display: flex; align-items: center; padding: 0 1.25rem; border-bottom: 1px solid var(--w-border); }
.w-brand img { height: 34px; width: auto; }
.w-nav { overflow-y: auto; padding: .75rem .75rem 2rem; flex: 1; }
.w-nav .nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; font-weight: 600; padding: 1rem .75rem .35rem; }
.w-nav a.nav-item-link, .w-nav button.nav-item-link { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .5rem .75rem; border-radius: .6rem; color: var(--w-ink-2); font-weight: 500; border: 0; background: none; text-align: left; }
.w-nav .nav-item-link i.bi { font-size: 1.05rem; color: #7b8aa0; width: 1.2rem; text-align: center; }
.w-nav .nav-item-link:hover { background: var(--w-primary-50); color: var(--w-primary-600); }
.w-nav .nav-item-link:hover i.bi { color: var(--w-primary); }
.w-nav .nav-item-link.active { background: var(--w-primary); color: #fff; box-shadow: 0 6px 16px rgba(46, 159, 211, .28); }
.w-nav .nav-item-link.active i.bi { color: #fff; }
.w-nav .nav-item-link .chev { margin-left: auto; font-size: .75rem; transition: transform .2s; }
.w-nav .nav-item-link[aria-expanded="true"] .chev { transform: rotate(90deg); }
.w-nav .sub { padding: .15rem 0 .25rem 2.4rem; }
.w-nav .sub a { display: block; padding: .32rem .6rem; border-radius: .45rem; color: var(--w-muted); font-size: .82rem; }
.w-nav .sub a:hover { color: var(--w-primary-600); background: var(--w-primary-50); }
.w-nav .sub a.active { color: var(--w-primary-600); font-weight: 600; background: var(--w-primary-50); }
.w-side-foot { padding: .75rem 1.25rem; border-top: 1px solid var(--w-border); font-size: .72rem; color: #94a3b8; }

.w-main { margin-left: var(--w-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.w-topbar { height: 68px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--w-border); display: flex; align-items: center; gap: .75rem; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1030; }
.w-topbar .page-title { font-weight: 600; font-size: 1.05rem; color: var(--w-ink); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-chip { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--w-border); background: #fff; border-radius: 999px; padding: .35rem .8rem; font-size: .8rem; color: var(--w-ink-2); font-weight: 500; }
.w-chip:hover { border-color: var(--w-primary); color: var(--w-primary-600); }
.w-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--w-ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .8rem; }
.w-content { padding: 1.5rem; flex: 1; }
.w-footer { padding: .9rem 1.5rem; color: #94a3b8; font-size: .75rem; }

@media (max-width: 991.98px) {
    .w-sidebar { transform: translateX(-100%); }
    body.sidebar-open .w-sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
    .w-main { margin-left: 0; }
    .w-content { padding: 1rem; }
    .w-topbar { padding: 0 1rem; }
}

/* ---------- components ---------- */
.card { border: 1px solid var(--w-border); border-radius: .9rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.card-header { background: #fff; border-bottom: 1px solid var(--w-border); padding: .85rem 1.1rem; font-weight: 600; border-radius: .9rem .9rem 0 0 !important; }
.card-title-sm { font-size: .95rem; font-weight: 600; margin: 0; color: var(--w-ink); }
.kpi { padding: 1.1rem 1.2rem; position: relative; overflow: hidden; }
.kpi .kpi-label { color: var(--w-muted); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.kpi .kpi-value { font-size: 1.45rem; font-weight: 700; color: var(--w-ink); margin-top: .2rem; }
.kpi .kpi-icon { position: absolute; right: 1rem; top: 1rem; width: 42px; height: 42px; border-radius: .75rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; background: var(--w-primary-50); color: var(--w-primary); }
.kpi.dark { background: linear-gradient(135deg, #0f141a 0%, #1f2a37 100%); color: #fff; border: 0; }
.kpi.dark .kpi-label { color: #9fb3c8; }
.kpi.dark .kpi-value { color: #fff; }
.kpi.dark .kpi-icon { background: rgba(46, 159, 211, .2); color: #5cc0ee; }
.kpi.brand { background: linear-gradient(135deg, #2e9fd3 0%, #1b7fb0 100%); color: #fff; border: 0; }
.kpi.brand .kpi-label { color: #d7efff; }
.kpi.brand .kpi-value { color: #fff; }
.kpi.brand .kpi-icon { background: rgba(255, 255, 255, .18); color: #fff; }

.table { --bs-table-hover-bg: #f5fafd; margin-bottom: 0; font-size: .84rem; }
.table > thead th { background: #f8fafc; color: var(--w-muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--w-border); white-space: nowrap; }
.table td, .table th { vertical-align: middle; }
.table-report td, .table-report th { padding: .45rem .7rem; }
.table-report tr.group-row td { font-weight: 600; background: #fbfdff; }
.table-report tr.total-row td { font-weight: 700; border-top: 2px solid var(--w-ink); background: #f8fafc; }
.table-report tr.subtotal-row td { font-weight: 600; border-top: 1px solid #cbd5e1; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.indent-1 { padding-left: 1.6rem !important; } .indent-2 { padding-left: 2.8rem !important; } .indent-3 { padding-left: 4rem !important; } .indent-4 { padding-left: 5.2rem !important; }
.badge { font-weight: 500; }
.text-muted-2 { color: #94a3b8; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.empty-state { padding: 3rem 1rem; text-align: center; color: var(--w-muted); }
.empty-state i { font-size: 2.2rem; color: #c3d3e2; display: block; margin-bottom: .5rem; }

/* select2 */
.select2-container { width: 100% !important; font-size: .85rem; }
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { border: 1px solid #dee2e6; border-radius: .375rem; min-height: 33px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 31px; padding-left: .7rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 31px; }
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--w-primary); }
.select2-container--open .select2-dropdown { border-color: #8fcbe9; z-index: 2000; }
.select2-sm + .select2-container .select2-selection--single { min-height: 31px; }

/* voucher entry grid */
.entry-grid th { font-size: .7rem; }
.entry-grid td { padding: .3rem .3rem; }
.entry-grid .form-control, .entry-grid .form-select { padding: .3rem .45rem; font-size: .82rem; }
.entry-grid .form-select { padding-right: 1.9rem; background-position: right .5rem center; min-width: 100%; }
.entry-grid td.line-no { color: #94a3b8; width: 32px; text-align: center; }
.totals-box { background: #f8fafc; border: 1px solid var(--w-border); border-radius: .75rem; padding: .9rem 1.1rem; }
.totals-box .row-t { display: flex; justify-content: space-between; padding: .2rem 0; }
.totals-box .grand { font-size: 1.15rem; font-weight: 700; border-top: 1px dashed #cbd5e1; margin-top: .35rem; padding-top: .5rem; color: var(--w-ink); }
.source-tag { font-size: .68rem; background: var(--w-primary-50); color: var(--w-primary-600); border-radius: .3rem; padding: .05rem .35rem; }

/* login */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-hero { background: radial-gradient(circle at 20% 20%, #1c3b52 0%, #0f141a 55%); color: #fff; padding: 3.5rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-hero:after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; border: 60px solid rgba(46, 159, 211, .12); right: -160px; bottom: -160px; }
.login-hero h1 { font-weight: 700; font-size: 2.4rem; line-height: 1.2; }
.login-hero h1 span { color: #4cb6e6; }
.login-hero .feat { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; color: #cbd5e1; }
.login-hero .feat i { color: #4cb6e6; font-size: 1.2rem; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 2rem; background: #fff; }
.login-card { width: 100%; max-width: 400px; }
@media (max-width: 900px) { .login-wrap { grid-template-columns: 1fr; } .login-hero { display: none; } }


/* report */
.report-head { display: none; }
.filter-bar { background: #fff; border: 1px solid var(--w-border); border-radius: .9rem; padding: .9rem 1rem; margin-bottom: 1rem; }
.report-tile { display: flex; gap: .9rem; padding: 1rem; border: 1px solid var(--w-border); border-radius: .8rem; background: #fff; color: var(--w-ink-2); height: 100%; transition: all .12s; }
.report-tile:hover { border-color: var(--w-primary); box-shadow: 0 6px 18px rgba(46, 159, 211, .12); }
.report-tile i { font-size: 1.4rem; color: var(--w-primary); }
.report-tile .t { font-weight: 600; color: var(--w-ink); }
.report-tile .d { font-size: .76rem; color: var(--w-muted); }

/* toast */
.w-toast-wrap { position: fixed; top: 80px; right: 20px; z-index: 3000; display: flex; flex-direction: column; gap: .5rem; }
.w-toast { min-width: 280px; max-width: 420px; background: var(--w-ink); color: #fff; border-radius: .7rem; padding: .75rem 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); display: flex; gap: .6rem; align-items: flex-start; animation: wslide .2s ease; }
.w-toast.success i { color: #4ade80; } .w-toast.error i { color: #f87171; } .w-toast.info i { color: #5cc0ee; }
@keyframes wslide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* print */
@media print {
    @page { size: A4; margin: 12mm; }
    body { background: #fff !important; font-size: 10.5pt; }
    .w-sidebar, .w-topbar, .w-footer, .no-print, .filter-bar, .btn, .page-actions { display: none !important; }
    .w-main { margin: 0 !important; }
    .w-content { padding: 0 !important; }
    .card { border: 0 !important; box-shadow: none !important; }
    .card-header { padding-left: 0; }
    .report-head { display: flex !important; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--w-ink); padding-bottom: 8px; margin-bottom: 12px; }
    .report-head img { height: 34px; }
    .table > thead th { background: #eef2f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a { color: inherit !important; }
}