/* Kantin Berkah — yellowish-orange theme (overrides Bootstrap 5.3 primary) */

:root {
    --bs-primary: #f39c12;
    --bs-primary-rgb: 243, 156, 18;

    /* Links */
    --bs-link-color: #e0800c;
    --bs-link-color-rgb: 224, 128, 12;
    --bs-link-hover-color: #b45309;
    --bs-link-hover-color-rgb: 180, 83, 9;
}

/* Backgrounds (navbar, etc.) */
.bg-primary {
    background-color: #f39c12 !important;
}

.bg-primary-subtle {
    background-color: #f9e9d1 !important;
}

/* Primary buttons */
.btn-primary {
    --bs-btn-bg: #f39c12;
    --bs-btn-border-color: #f39c12;
    --bs-btn-hover-bg: #e0800c;
    --bs-btn-hover-border-color: #e0800c;
    --bs-btn-active-bg: #c96f0a;
    --bs-btn-active-border-color: #c96f0a;
    --bs-btn-disabled-bg: #f39c12;
    --bs-btn-disabled-border-color: #f39c12;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 243, 156, 18;
}

/* Outline primary buttons */
.btn-outline-primary {
    --bs-btn-color: #c96f0a;
    --bs-btn-border-color: #f39c12;
    --bs-btn-hover-bg: #f39c12;
    --bs-btn-hover-border-color: #f39c12;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #e0800c;
    --bs-btn-active-border-color: #e0800c;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #f39c12;
    --bs-btn-disabled-border-color: #f39c12;
    --bs-btn-focus-shadow-rgb: 243, 156, 18;
}

/* Accent text / icons */
.text-primary {
    color: #d97706 !important;
}

/* Form focus ring in theme color */
.form-control:focus,
.form-select:focus {
    border-color: #f6bd6a;
    box-shadow: 0 0 0 0.25rem rgba(243, 156, 18, 0.25);
}

/* Subtle warm tint for the page background */
body.bg-body-tertiary {
    background-color: #fdf7ee !important;
}

/* Dark mode. Bootstrap 5.3 recolors its own components from [data-bs-theme="dark"]; these
   overrides neutralise the surfaces to Facebook's cool-grey dark palette (page #18191a,
   cards #242526, raised #3a3b3c) and keep the orange brand as an ACCENT only — links,
   buttons, the SIAP "ready" highlight, the logo, .text-primary. That's the same
   neutral-surface + brand-accent split Facebook uses with its blue. */
[data-bs-theme="dark"] {
    /* Text: Facebook's near-white primary and grey secondary. */
    --bs-body-color: #e4e6eb;
    --bs-secondary-color: #b0b3b8;

    /* Links: the brand orange, lifted lighter so the accent stays legible on the greys. */
    --bs-link-color: #f6bd6a;
    --bs-link-color-rgb: 246, 189, 106;
    --bs-link-hover-color: #f8cd8a;
    --bs-link-hover-color-rgb: 248, 205, 138;

    /* Orange brand-accent tokens — the one splash of colour against the neutral surfaces
       (the highlighted SIAP order card via .bg-primary-subtle, emphasis text). */
    --bs-primary-bg-subtle: #3a2708;
    --bs-primary-border-subtle: #573c11;
    --bs-primary-text-emphasis: #f0a935;

    /* Neutral surface tokens, Facebook cool-grey (no warm tint). Ordered so the strongly
       raised surfaces (SELESAI cards, rekap total rows, the total-tagihan field) sit a clear
       step above cards, and tertiary panels (ai-box, dropdown hover) sit just above them. */
    --bs-secondary-bg: #3a3b3c;
    --bs-tertiary-bg: #303233;
}

/* The page is the darkest layer (Facebook #18191a); cards sit a clear step above it. */
[data-bs-theme="dark"] body.bg-body-tertiary {
    background-color: #18191a !important;
}

/* Raised surfaces sit one clear step above the page (Facebook surface #242526). Separation
   comes from a soft shadow (FB-style) plus a hairline border, not a heavy outline. */
[data-bs-theme="dark"] .card {
    --bs-card-bg: #242526;
    --bs-card-border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .card.shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

/* Facebook-style top bar: same tone as the cards, no bright colour block — the orange logo
   carries the brand. Just a hairline divider separates it from the page. The navbar's own
   data-bs-theme="dark" keeps the links/brand text white. */
[data-bs-theme="dark"] .navbar.bg-primary {
    background-color: #242526 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .bg-primary-subtle {
    background-color: var(--bs-primary-bg-subtle) !important;
}

[data-bs-theme="dark"] .text-primary {
    color: #f0a935 !important;
}

/* Tom Select filter dropdowns in dark mode. The vendored bootstrap5 CSS hardcodes a dark-grey
   text color (#343a40) on the control and dropdown, and only the keyboard-highlighted .active
   option overrides it (to --bs-body-color) — so every other option rendered dark-grey-on-dark
   and was nearly invisible. Recolor text to the theme body color, theme the selected pills
   (which hardcode a light #efefef bg), and switch native option checkboxes to the dark scheme. */
[data-bs-theme="dark"] .ts-control,
[data-bs-theme="dark"] .ts-control input,
[data-bs-theme="dark"] .ts-dropdown,
[data-bs-theme="dark"] .ts-dropdown .option {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-dropdown {
    color-scheme: dark;  /* native option checkboxes render for a dark surface */
}

[data-bs-theme="dark"] .ts-wrapper.multi .ts-control > div {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* Order cards: a FIXED number of columns per row, set by the card-size toggle on the list page
   via --orderan-cols — Kecil = 3, Sedang = 2, Besar = 1 (default 3). minmax(0, 1fr) lets the
   columns shrink below their content width so the count is honoured at any container width.
   Phones (<576px) collapse to a single column below, since 3 order cards on a phone are unusable. */
.orderan-grid {
    display: grid;
    grid-template-columns: repeat(var(--orderan-cols, 3), minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

@media (max-width: 575.98px) {
    .orderan-grid {
        grid-template-columns: 1fr;
    }
}

/* Below the 1400px cap, drop Bootstrap's md/lg/xl container max-width caps (720/960/1140px) so
   the shared container spans the FULL viewport width instead of being boxed into the middle with
   wasted side gutters. Phones (<768px) are already full width; ≥1400px gets the 1600px cap below. */
@media (max-width: 1399.98px) {
    .container {
        max-width: none;
    }
}

/* Widen the shared Bootstrap container on large screens so both the navbar and the page
   content use more of the viewport — and stay the SAME width (aligned) everywhere. The
   order-card grid fills this extra room; other pages stay centered via their own columns. */
@media (min-width: 1400px) {
    .container {
        max-width: 1600px;
    }
}