/*
 * Boutique (light) and Midnight (dark) theme styles. <body> carries
 * "skin-mc skin-bq" (+ "bq-dark" for Midnight, see partials/bq_scheme.php);
 * modern.css styles the components from the --mc-* variables set here, and
 * this file adds the fonts, the backgrounds and the page shell.
 */

@font-face { font-family: 'Kantumruy Pro'; font-weight: 400; font-display: swap; src: url('../fonts/modern/kantumruy-pro-khmer-400-normal.woff2') format('woff2'); unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC; }
@font-face { font-family: 'Kantumruy Pro'; font-weight: 500; font-display: swap; src: url('../fonts/modern/kantumruy-pro-khmer-500-normal.woff2') format('woff2'); unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC; }
@font-face { font-family: 'Kantumruy Pro'; font-weight: 600; font-display: swap; src: url('../fonts/modern/kantumruy-pro-khmer-600-normal.woff2') format('woff2'); unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC; }
@font-face { font-family: 'Kantumruy Pro'; font-weight: 700; font-display: swap; src: url('../fonts/modern/kantumruy-pro-khmer-700-normal.woff2') format('woff2'); unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC; }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/modern/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/modern/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/modern/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('../fonts/modern/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-display: swap; src: url('../fonts/modern/inter-latin-800-normal.woff2') format('woff2'); }

/* ---------- Colours ---------- */
body.skin-bq {
    --mc-bg: #f8f3ee;
    --mc-surface: #fffdfa;
    --mc-surface-2: #f5ede6;
    --mc-border: #ecdfd5;
    --mc-text: #3b2a26;
    --mc-muted: #9a857c;
    --mc-accent: #b76e79;
    --mc-accent-soft: #f6e6e6;
    --mc-accent-text: #ffffff;
    --mc-success: #3f9f76;
    --mc-warning: #d99a3a;
    --mc-danger: #d0555e;
    --mc-info: #5d8fb0;
    --mc-purple: #8e6bb3;
    --mc-navy: #5b4a45;
    --mc-radius: 18px;
    --mc-radius-sm: 12px;
    --mc-shadow: 0 1px 2px rgba(90, 50, 40, .04), 0 8px 24px rgba(120, 70, 60, .07);
    --mc-shadow-lg: 0 20px 44px rgba(90, 50, 40, .16);
    --bq-grad: linear-gradient(135deg, #c98690 0%, #9c5662 100%);
    --bq-glow: 0 10px 22px rgba(156, 86, 98, .28);
    --bq-chip: #f1e7df;
    --bq-page: radial-gradient(900px 500px at 0% 0%, #fbe4e1 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #f3e6da 0%, transparent 60%), #f8f3ee;
}
body.skin-bq.bq-dark {
    --mc-bg: #0b0b12;
    --mc-surface: #14141f;
    --mc-surface-2: #1b1b29;
    --mc-border: #26263b;
    --mc-text: #ecebff;
    --mc-muted: #8b8ba7;
    --mc-accent: #a78bfa;
    --mc-accent-soft: #221f3a;
    --mc-success: #34d399;
    --mc-warning: #fbbf24;
    --mc-danger: #fb7185;
    --mc-info: #38bdf8;
    --mc-purple: #a78bfa;
    --mc-navy: #3f3f5a;
    --mc-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset;
    --mc-shadow-lg: 0 20px 44px rgba(0, 0, 0, .55);
    --bq-grad: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    --bq-glow: 0 10px 24px rgba(139, 92, 246, .35);
    --bq-chip: #1f1f30;
    --bq-page: radial-gradient(700px 420px at 90% -5%, rgba(139, 92, 246, .22), transparent 70%), radial-gradient(700px 520px at -5% 105%, rgba(236, 72, 153, .12), transparent 70%), #0b0b12;
    color-scheme: dark;
}

/* ---------- Type ---------- */
body.skin-bq,
body.skin-bq *:not(.fa):not(.glyphicon):not([class^="fa-"]):not([class*=" fa-"]):not(.re-icon) {
    font-family: 'Inter', 'Kantumruy Pro', 'Battambang', sans-serif;
}
body.skin-bq { -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
body.skin-bq h1, body.skin-bq h2, body.skin-bq h3 { letter-spacing: -.02em; }

/* ---------- Page ---------- */
body.skin-bq,
body.skin-bq .wrapper,
body.skin-bq .content-wrapper,
body.skin-bq .right-side { background: transparent !important; }
html:has(body.skin-bq), body.skin-bq { background: var(--bq-page) fixed !important; min-height: 100%; }
body.skin-bq #app-bg { display: none !important; }

/* ---------- Shell: icon rail (rail.css) instead of top bar + side menu ---------- */
body.skin-bq .main-header,
body.skin-bq .main-sidebar { display: none !important; }
body.skin-bq .wrapper > .mp-rail { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030; }
body.skin-bq .content-wrapper,
body.skin-bq .main-footer { margin-left: 104px !important; padding-top: 0 !important; }
body.skin-bq .main-footer {
    background: transparent !important; border: 0 !important; color: var(--mc-muted); font-size: 12px; padding: 14px 24px 18px;
}
body.skin-bq .main-footer a { color: var(--mc-muted); }
@media (max-width: 767px) {
    body.skin-bq .content-wrapper,
    body.skin-bq .main-footer { margin-left: 0 !important; }
    body.skin-bq .main-footer { padding-bottom: 96px; }
    body.skin-bq .wrapper > .mp-rail { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* ---------- Page title ---------- */
body.skin-bq .content-header { padding: 22px 24px 8px; }
body.skin-bq .content-header > h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--mc-text); }
/* Where you are is shown by the rail, like on the dashboard: no breadcrumb. */
body.skin-bq .content-header > .breadcrumb { display: none; }

/* ---------- Cards, buttons ---------- */
body.skin-bq .box,
body.skin-bq .small-box,
body.skin-bq .info-box,
body.skin-bq .panel,
body.skin-bq .nav-tabs-custom { border-radius: 20px !important; }
body.skin-bq .box-header { padding: 14px 18px; }
body.skin-bq .box-body { padding: 14px 18px; }
body.skin-bq .btn-primary,
body.skin-bq .btn.bg-primary,
body.skin-bq .pagination > .active > a,
body.skin-bq .pagination > .active > span {
    background: var(--bq-grad) !important;
    border-color: transparent !important;
    box-shadow: var(--bq-glow);
}
body.skin-bq .btn { border-radius: 12px !important; }
body.skin-bq .btn-app > .fa { color: var(--mc-accent); }
body.skin-bq .modal-content { border-radius: 22px !important; }
body.skin-bq .modal-backdrop.in { opacity: .45; }
body.skin-bq.bq-dark .modal-backdrop.in { opacity: .7; }

/* ---------- Report summary boxes: KPI cards like the dashboard ---------- */
body.skin-bq .info-box[class*="bg-"] {
    background: var(--mc-surface) !important; color: var(--mc-text) !important;
    border: 1px solid var(--mc-border) !important; box-shadow: var(--mc-shadow) !important;
    min-height: 104px; padding: 14px; display: flex; gap: 14px; align-items: flex-start;
}
body.skin-bq .info-box[class*="bg-"] .info-box-icon {
    float: none; flex: none; width: 48px; height: 48px; line-height: 48px; font-size: 20px; border-radius: 14px !important;
    background: var(--mc-accent-soft) !important; color: var(--mc-accent) !important;
}
body.skin-bq .info-box.bg-yellow .info-box-icon { background: color-mix(in srgb, var(--mc-warning) 16%, transparent) !important; color: var(--mc-warning) !important; }
body.skin-bq .info-box.bg-red .info-box-icon { background: color-mix(in srgb, var(--mc-danger) 14%, transparent) !important; color: var(--mc-danger) !important; }
body.skin-bq .info-box.bg-green .info-box-icon { background: color-mix(in srgb, var(--mc-success) 14%, transparent) !important; color: var(--mc-success) !important; }
body.skin-bq .info-box[class*="bg-"] .info-box-content { margin: 0; padding: 0; min-width: 0; flex: 1; }
body.skin-bq .info-box[class*="bg-"] .info-box-text { color: var(--mc-muted) !important; font-size: 12px; font-weight: 600; text-transform: none; }
body.skin-bq .info-box[class*="bg-"] .info-box-number { color: var(--mc-text) !important; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
body.skin-bq .info-box[class*="bg-"] .progress { background: var(--mc-surface-2) !important; height: 4px; border-radius: 4px; margin: 8px 0 6px; }
body.skin-bq .info-box[class*="bg-"] .progress-bar { background: var(--bq-grad) !important; border-radius: 4px; }
body.skin-bq .info-box[class*="bg-"] .progress-description { color: var(--mc-muted) !important; font-size: 12px; white-space: normal; }

/* ---------- Report calendars ---------- */
body.skin-bq .calendar .table,
body.skin-bq .calendar .table td,
body.skin-bq .calendar .table th { border-color: var(--mc-border) !important; background: transparent !important; color: var(--mc-text); }
body.skin-bq .calendar .table th { background: var(--mc-surface-2) !important; }
body.skin-bq .calendar .table th a,
body.skin-bq .calendar .table th .text-center { color: var(--mc-text) !important; font-weight: 700; }
body.skin-bq .calendar .cl_wday { background: transparent !important; color: var(--mc-muted) !important; }

/* ---------- Login ---------- */
body.skin-bq.app-login { background: var(--bq-page) fixed !important; }
body.skin-bq .login-box-body { border-radius: 26px !important; padding: 28px !important; }
body.skin-bq .login-box-body .btn-primary { height: 46px; font-size: 16px; }

/* ================= Dashboard (dashboard_bq.php) ================= */
body.skin-bq .content-wrapper:has(.bq-dash) > .content-header { display: none; }
.bq-dash { padding: 20px 22px 24px; }
.bq-dash-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.bq-dash-head > div:first-child { flex: 1; min-width: 240px; }
.bq-dash-head h1 { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.4; color: var(--mc-text); }
.bq-dash-head p { margin: 0; color: var(--mc-muted); font-size: 13.5px; }
.bq-dash-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bq-pill {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; font-weight: 600; font-size: 13px;
    background: var(--mc-surface); border: 1px solid var(--mc-border); color: var(--mc-text) !important; box-shadow: var(--mc-shadow);
}
.bq-pill.warn { color: #b45309 !important; background: #fff4e5; border-color: #fde2bd; }
body.bq-dark .bq-pill.warn { color: #fdba74 !important; background: rgba(251, 146, 60, .14); border-color: rgba(251, 146, 60, .25); }
.bq-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 14px; font-weight: 700;
    background: var(--bq-grad); color: #fff !important; box-shadow: var(--bq-glow);
}
.bq-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.bq-kpi {
    background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: 20px; padding: 16px 18px; box-shadow: var(--mc-shadow);
    color: var(--mc-text); min-width: 0;
}
.bq-kpi.hero { background: var(--bq-grad); border-color: transparent; color: #fff; box-shadow: var(--bq-glow); }
.bq-kpi-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--mc-muted); }
.bq-kpi.hero .bq-kpi-top, .bq-kpi.hero .bq-kpi-bot { color: rgba(255, 255, 255, .85); }
.bq-kpi-top em { font-style: normal; font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.bq-kpi-top em.up { color: #047857; background: rgba(16, 185, 129, .13); }
.bq-kpi-top em.down { color: #be123c; background: rgba(244, 63, 94, .13); }
body.bq-dark .bq-kpi-top em.up { color: #6ee7b7; }
body.bq-dark .bq-kpi-top em.down { color: #fda4af; }
.bq-kpi.hero .bq-kpi-top em { color: #fff; background: rgba(255, 255, 255, .22); }
.bq-kpi > b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin: 6px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-kpi-bot { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; font-size: 12px; color: var(--mc-muted); }
.bq-kpi .bq-spark { color: var(--mc-accent); flex: none; }
.bq-kpi.hero .bq-spark { color: #fff; }

.bq-bento { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: minmax(0, auto); gap: 14px; }
.bq-card {
    background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: 20px; padding: 16px 18px; box-shadow: var(--mc-shadow);
    color: var(--mc-text); min-width: 0;
}
.bq-card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.bq-card-h b { display: block; font-size: 15px; font-weight: 700; }
.bq-card-h span { display: block; font-size: 12px; color: var(--mc-muted); }
.bq-card-h a { font-size: 12.5px; font-weight: 700; color: var(--mc-accent) !important; white-space: nowrap; }
.bq-chart-card { grid-column: 1 / 3; }
.bq-top { grid-column: 3; grid-row: 1 / 3; }
.bq-seg { display: flex; background: var(--mc-surface-2); border-radius: 12px; padding: 3px; }
.bq-seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--mc-muted); }
.bq-seg button.on { background: var(--mc-surface); color: var(--mc-text); box-shadow: var(--mc-shadow); }
.bq-chart { position: relative; height: 230px; }
.bq-chart svg { display: block; overflow: visible; }
.bq-tip {
    position: absolute; pointer-events: none; padding: 7px 11px; border-radius: 10px; white-space: nowrap;
    background: var(--mc-text); color: var(--mc-bg); box-shadow: var(--mc-shadow-lg); font-size: 12px;
}
.bq-tip span { display: block; opacity: .8; }
.bq-tip b { font-size: 14px; }
.bq-tp { display: grid; grid-template-columns: 16px 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--mc-border); }
.bq-tp:last-child { border-bottom: 0; }
.bq-tp .rank { font-weight: 800; color: var(--mc-muted); font-size: 13px; }
.bq-tp-av { position: relative; width: 42px; height: 42px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: rgba(0, 0, 0, .45); }
.bq-tp-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bq-tp-main span { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-bar { height: 6px; border-radius: 999px; background: var(--bq-chip); margin-top: 6px; overflow: hidden; }
.bq-bar i { display: block; height: 100%; border-radius: 999px; background: var(--mc-accent); }
.bq-tp > b { font-size: 14px; }
.bq-rs { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 76px; gap: 10px; align-items: center; padding: 7px 0; }
.bq-av { width: 34px; height: 34px; border-radius: 11px; background: var(--mc-accent-soft); color: var(--mc-accent); display: grid; place-items: center; font-weight: 700; }
.bq-rs-main span { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-rs-main small { font-size: 11.5px; color: var(--mc-muted); }
.bq-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--mc-surface-2); color: var(--mc-muted); }
.bq-status.paid { color: #047857; background: rgba(16, 185, 129, .13); }
.bq-status.due, .bq-status.partial { color: #b45309; background: rgba(245, 158, 11, .15); }
body.bq-dark .bq-status.paid { color: #6ee7b7; }
.bq-rs > b { text-align: right; font-size: 13.5px; }
.bq-stack { display: flex; gap: 3px; height: 12px; border-radius: 999px; overflow: hidden; margin: 4px 0 12px; }
.bq-stack i { display: block; min-width: 4px; }
.bq-pl { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; gap: 8px; align-items: center; padding: 5px 0; font-size: 13px; }
.bq-pl > i { width: 10px; height: 10px; border-radius: 3px; }
.bq-pl em { font-style: normal; text-align: right; color: var(--mc-muted); font-size: 12px; }
/* Payment colours: accent first, then steps that stay apart in both schemes. */
.bq-dash .c0 { background: var(--mc-accent); }
.bq-dash .c1 { background: #d9a5a0; }
.bq-dash .c2 { background: #8c6a5d; }
.bq-dash .c3 { background: #c9b8ad; }
.bq-dash .c4 { background: var(--mc-border); }
body.bq-dark .bq-dash .c1 { background: #f472b6; }
body.bq-dark .bq-dash .c2 { background: #38bdf8; }
body.bq-dark .bq-dash .c3 { background: #fbbf24; }
.bq-empty { color: var(--mc-muted); font-size: 13px; margin: 8px 0; }
@media (max-width: 1100px) {
    .bq-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bq-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bq-chart-card { grid-column: 1 / -1; }
    .bq-top { grid-column: auto; grid-row: auto; }
}
@media (max-width: 640px) {
    .bq-kpis, .bq-bento { grid-template-columns: minmax(0, 1fr); }
    .bq-dash { padding: 14px 12px; }
}
@media (max-width: 767px) {
    body.skin-bq .main-sidebar { margin: 0; border-radius: 0; border-width: 0 1px 0 0 !important; }
    body.skin-bq .bq-dash-head h1 { font-size: 22px; }
}