/* ═══════════════════════════════════════════════════════════
   CITYSTAY Design System
   Brand tokens extracted from login.css
   Primary: #ffae00 | Font: Titillium Web
   ═══════════════════════════════════════════════════════════ */

/* ── Default page card spacing ──
   Any card that is a direct child of the main content container
   gets mt-2 mb-4 by default — no explicit classes needed on new pages. */
.app-content .container-fluid > .card {
    margin-top:    0.5rem;   /* equivalent to mt-2 */
    margin-bottom: 1.5rem;   /* equivalent to mb-4 */
}

:root {
    /* --cs-primary / --cs-primary-dark / --cs-primary-light are already
       declared at :root by shared/css/tokens.css (loaded first on every
       page that also loads this file, see Change 2) — not redeclared here
       to avoid a self-referential var() cycle; this file just consumes
       them below. */
    --cs-input-bg:      var(--cs-surface-8);
    --cs-input-radius:  10px;

    /* Bootstrap 5 overrides */
    --bs-primary:            var(--cs-primary);
    /* --bs-primary-rgb kept as a literal on purpose: Bootstrap needs comma-
       separated RGB *components* here, which a hex var(--cs-primary) can't
       supply without a preprocessor. This must be kept in sync with
       --cs-primary (#ffae00) in shared/css/tokens.css by hand if the brand
       colour ever changes. */
    --bs-primary-rgb:        255, 174, 0;
    --bs-link-color:         var(--cs-primary-dark);
    --bs-link-hover-color:   var(--cs-link-hover);
    --bs-body-font-family:   "Titillium Web", "Source Sans 3", sans-serif;
    --bs-btn-border-radius:  10px;
    --bs-border-radius:      10px;

    /* Semantic button colours — secondary/success/danger/warning keep their
       OWN hue (grey/green/red/amber), never brand orange. Base colour reuses
       Bootstrap's own --bs-secondary/--bs-success/--bs-danger/--bs-warning
       (already the correct hue, untouched above); the "-dark" hover/active
       shade is Bootstrap 5's own documented darken-on-hover value, pinned
       here as a --cs-* token so the whole semantic set is explicitly OWNED
       by the design system — same role --cs-primary-dark plays for
       .btn-primary — instead of an implicit Bootstrap default that could
       silently drift on a Bootstrap upgrade. */
    --cs-secondary:      var(--bs-secondary);
    --cs-secondary-dark: #5c636a;
    --cs-success:        var(--bs-success);
    --cs-success-dark:   #157347;
    --cs-danger:         var(--bs-danger);
    --cs-danger-dark:    #bb2d3b;
    --cs-warning:        var(--bs-warning);
    --cs-warning-dark:   #ffca2c;

    /* Shared --mf-* tokens (also declared locally in monthFilter.php). Promoted
       to :root so components rendered on pages WITHOUT monthFilter (e.g. the
       date-entry forms with air-datepicker) can resolve them. Single source. */
    --mf-brand:       var(--cs-primary);
    --mf-brand-dark:  #e69c00;
    --mf-tint:        #fff6e0;
    --mf-tint-strong: #ffe9bf;
    --mf-ink:         #2c3038;
    --mf-muted:       #8a909a;
    --mf-line:        #e2e5ea;
    --mf-bg:          var(--cs-bg-page);
    --mf-card:        #ffffff;
    --mf-disabled:    #c5cad2;
    --mf-on-brand:    #ffffff;
    --mf-shadow:      0 10px 34px rgba(20,25,40,0.22);
}

/* ── 1. Font ── */
body, input, button, select, textarea {
    font-family: "Titillium Web", "Source Sans 3", sans-serif;
}

/* ── 1b. CANONICAL BUTTON SET — component reference ──
   The button "library" for this app. Pick a class by MEANING, not by
   copying whatever another page happens to use — this block is the source
   of truth (mirrors how cs-datatable.js documents the table factory).

   COLOUR (semantic — pick by what the button DOES):
     .btn-primary  / .btn-outline-primary
                              THE main action on the page (brand orange —
                              usually at most one solid primary per view).
                              Outline-primary = same action, lower emphasis.
     .btn-secondary / .btn-outline-secondary
                              neutral action — Cancel, Back, Close, "more".
     .btn-success  / .btn-outline-success
                              confirm / save / approve (green).
     .btn-danger   / .btn-outline-danger
                              delete / cancel-with-consequence / reject (red).
     .btn-warning  / .btn-outline-warning
                              caution / needs-review / requires-decision,
                              not (yet) destructive (amber).
   Outline-* = the same meaning at lower visual weight — e.g. a row of
   several actions where only one should visually dominate.

   SIZE (pick by CONTEXT, not colour — never combine two size classes):
     (default)   normal button — forms, page-level actions, modals.
     .btn-sm     compact — toolbars, card headers, secondary controls.
     .btn-xs     densest — per-row actions inside data tables.

   All variants above automatically get the brand's rounded corners
   (--cs-input-radius) and the brand's mobile 44px tap-target rule (the
   in-table .btn-xs/.btn-sm media rule near the bottom of this file) —
   nothing extra to add when picking a class.

   ⚠ !important EXCEPTIONS (conscious, CLOSED — do not add more without the same
   documentation, per the CLAUDE.md no-!important norm):
     1. The whole button skin above (.btn-primary … .btn-outline-warning) uses
        !important to override AdminLTE/Bootstrap's own high-specificity rules.
     2. `.sidebar-wrapper .btn-outline-secondary` (section 13, near bottom) is
        ALSO !important — because exception (1) made the GLOBAL
        .btn-outline-secondary !important, and !important beats specificity, so
        the sidebar's own treatment had to become !important too to keep winning
        in its scope (the sidebar Logout button). These two are the only sanctioned
        !important uses in the button layer; a NEW rule must NOT use !important. */

/* ── 2. Primary buttons ── */
.btn-primary {
    background-color: var(--cs-primary) !important;
    border-color:     var(--cs-primary) !important;
    color:            var(--cs-black) !important;
    border-radius:    var(--cs-input-radius);
    font-weight:      600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--cs-primary-dark) !important;
    border-color:     var(--cs-primary-dark) !important;
    color:            var(--cs-black) !important;
}

/* ── 2b. Secondary buttons ── */
.btn-secondary {
    background-color: var(--cs-secondary) !important;
    border-color:     var(--cs-secondary) !important;
    color:            #fff !important;
    border-radius:    var(--cs-input-radius);
    font-weight:      600;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
    background-color: var(--cs-secondary-dark) !important;
    border-color:     var(--cs-secondary-dark) !important;
    color:            #fff !important;
}

/* ── 2c. Success buttons ── */
.btn-success {
    background-color: var(--cs-success) !important;
    border-color:     var(--cs-success) !important;
    color:            #fff !important;
    border-radius:    var(--cs-input-radius);
    font-weight:      600;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background-color: var(--cs-success-dark) !important;
    border-color:     var(--cs-success-dark) !important;
    color:            #fff !important;
}

/* ── 2d. Danger buttons ── */
.btn-danger {
    background-color: var(--cs-danger) !important;
    border-color:     var(--cs-danger) !important;
    color:            #fff !important;
    border-radius:    var(--cs-input-radius);
    font-weight:      600;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    background-color: var(--cs-danger-dark) !important;
    border-color:     var(--cs-danger-dark) !important;
    color:            #fff !important;
}

/* ── 2e. Warning buttons ──
   Text stays BLACK in both states (idle + hover) — same contrast choice
   Bootstrap makes for amber, kept here for readability. */
.btn-warning {
    background-color: var(--cs-warning) !important;
    border-color:     var(--cs-warning) !important;
    color:            #000 !important;
    border-radius:    var(--cs-input-radius);
    font-weight:      600;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    background-color: var(--cs-warning-dark) !important;
    border-color:     var(--cs-warning-dark) !important;
    color:            #000 !important;
}

/* ── 3. Outline-primary buttons ── */
.btn-outline-primary {
    color:        var(--cs-primary-dark) !important;
    border-color: var(--cs-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active,
.btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary {
    background-color: var(--cs-primary) !important;
    border-color:     var(--cs-primary) !important;
    color:            var(--cs-black) !important;
}

/* ── 3b. Outline-secondary buttons ──
   Global rule — the sidebar has its own higher-specificity variant
   (.sidebar-wrapper .btn-outline-secondary, section 13 below) which still
   wins inside the sidebar; this rule covers every other outline-secondary
   button on the page. */
.btn-outline-secondary {
    color:        var(--cs-secondary) !important;
    border-color: var(--cs-secondary) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary.active,
.btn-outline-secondary:active,
.btn-check:checked + .btn-outline-secondary {
    background-color: var(--cs-secondary) !important;
    border-color:     var(--cs-secondary) !important;
    color:            #fff !important;
}

/* ── 3c. Outline-success buttons ── */
.btn-outline-success {
    color:        var(--cs-success) !important;
    border-color: var(--cs-success) !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success.active,
.btn-outline-success:active,
.btn-check:checked + .btn-outline-success {
    background-color: var(--cs-success) !important;
    border-color:     var(--cs-success) !important;
    color:            #fff !important;
}

/* ── 3d. Outline-danger buttons ── */
.btn-outline-danger {
    color:        var(--cs-danger) !important;
    border-color: var(--cs-danger) !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger.active,
.btn-outline-danger:active,
.btn-check:checked + .btn-outline-danger {
    background-color: var(--cs-danger) !important;
    border-color:     var(--cs-danger) !important;
    color:            #fff !important;
}

/* ── 3e. Outline-warning buttons ── */
.btn-outline-warning {
    color:        var(--cs-warning) !important;
    border-color: var(--cs-warning) !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning.active,
.btn-outline-warning:active,
.btn-check:checked + .btn-outline-warning {
    background-color: var(--cs-warning) !important;
    border-color:     var(--cs-warning) !important;
    color:            #000 !important;
}

/* ── 3f. Button size — btn-xs (dense in-table actions) ──
   Bootstrap 5 dropped .btn-xs entirely; re-added here as its own size
   step (Bootstrap-3-era reference values), one notch below .btn-sm.
   Radius comes from the blanket ".btn" rule below (section 4), same as
   every other size — nothing extra needed here. The mobile tap-target
   min-height/min-width:44px override for .btn-xs inside a table (section
   15, further down) is UNAFFECTED by this rule: it targets ".table .btn-xs"
   / "td .btn-xs" (higher specificity) inside a narrower-viewport media
   query, so it always wins on phones — this rule only sets desktop/tablet
   sizing. */
.btn-xs {
    padding:     .15rem .4rem;
    font-size:   .75rem;
    line-height: 1.5;
}

/* ── 4. All buttons — rounded ── */
.btn {
    border-radius: var(--cs-input-radius);
}

/* ── 5. Links ── */
a:not(.nav-link):not(.btn):not(.dropdown-item):not(.brand-link) {
    color: var(--cs-primary-dark);
}
a:not(.nav-link):not(.btn):not(.dropdown-item):not(.brand-link):hover {
    color: var(--cs-primary);
}

/* ── 6. Form controls ── */
.form-control,
.form-select {
    border-radius:    var(--cs-input-radius);
    background-color: var(--cs-input-bg);
    border:           1px solid rgba(0, 0, 0, 0.1);
}
.form-control:focus,
.form-select:focus {
    border-color:     var(--cs-primary);
    box-shadow:       0 0 0 3px var(--cs-primary-shadow-ring);
    background-color: var(--cs-surface-3);
}
.input-group > .form-control:not(:first-child),
.input-group > .form-control:not(:last-child) {
    border-radius: 0;
}
.input-group > .form-control:first-child {
    border-radius: var(--cs-input-radius) 0 0 var(--cs-input-radius);
}
.input-group > .form-control:last-child {
    border-radius: 0 var(--cs-input-radius) var(--cs-input-radius) 0;
}

/* ── 7. Cards ── */
.card {
    border-radius: var(--cs-input-radius);
}
.card-header {
    border-left: 3px solid var(--cs-primary);
    font-weight: 600;
}

/* ── 8. Sidebar – active & hover states ──
   AdminLTE 4 uses its own CSS vars on .sidebar-wrapper.
   Override them at the aside level so they cascade correctly. */
.app-sidebar {
    --lte-sidebar-submenu-active-color: var(--cs-primary);
    --lte-sidebar-submenu-active-bg:    var(--cs-primary-light);
    --lte-sidebar-hover-color:          var(--cs-primary);
    --lte-sidebar-hover-bg:             var(--cs-primary-light);
}
/* Fallback explicit rules in case the vars aren't enough */
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active,
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active:hover,
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active:focus {
    color:            var(--cs-primary) !important;
    background-color: var(--cs-primary-light) !important;
}
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link:not(.active):hover {
    color: var(--cs-primary) !important;
}
/* Active icon dot */
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active .nav-icon {
    color: var(--cs-primary) !important;
}

/* ── 9. Sidebar brand text ── */
.sidebar-brand .brand-text {
    color: var(--cs-primary) !important;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ── 10. Page titles / headings ── */
.card-title {
    font-weight: 700;
}

/* ── 11. Focus ring ── */
*:focus-visible {
    outline:        2px solid var(--cs-primary);
    outline-offset: 2px;
}

/* ── 12. Badges ── */
.badge.bg-primary {
    background-color: var(--cs-primary) !important;
    color: var(--cs-black) !important;
}

/* ── 13. Sidebar user panel (bottom) ── */
/* !important REQUIRED: the global .btn-outline-secondary rules (section above) use
   !important, which beats this rule's higher specificity — so the sidebar's own
   treatment must ALSO be !important to keep winning here (panel HIGH fix). */
.sidebar-wrapper .btn-outline-secondary {
    border-color: rgba(0,0,0,0.2) !important;
    color: var(--cs-text-muted-1) !important;
}
.sidebar-wrapper .btn-outline-secondary:hover {
    background-color: var(--cs-primary-light) !important;
    border-color: var(--cs-primary) !important;
    color: var(--cs-primary-dark) !important;
}

.dropdown-menu {
    min-height: 550px;
    min-width: 350px;
}


/* Custom CSS styles for tooltips and table filters */
tr.has-tooltip {
    cursor: help;
}
tr.has-tooltip:hover {
    background-color: var(--cs-surface-4);
}

.tooltip-inner {
    /* WHY: one discreet size system-wide (owner 2026-07-22) — !important on font-size
       is needed to override AdminLTE/Bootstrap's own `.tooltip-inner` font rule (higher
       specificity); the surrounding declarations here were already !important for the
       same reason. Short labels (e.g. ↻ refresh) render width-to-content and compact;
       rich review-row tooltips keep the 600px cap so their multi-line HTML still wraps
       wide, but at the same discreet font. Sanctioned exception, CLOSED — no new ones. */
    max-width: 600px !important;
    background-color: var(--cs-surface-5) !important;
	font-size: 11.5px !important;
    line-height: 1.35;
    color: var(--cs-text-dark-1) !important;
    text-align: start !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    border: 1px solid var(--cs-border-2);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.tooltip-inner hr {
    margin: 8px 0;
    opacity: 0.2;
    border-top: 1px solid var(--cs-black);
}

/* Styles for DataTable column filters*/

thead tr.filters th {
    padding: 4px;
}
thead tr.filters input,
thead tr.filters select {
    width: 100%;
    font-size: 0.85em;
}

/* ── air-datepicker themed to match monthFilter (all colours via --mf-*) ──
   Maps air-datepicker's --adp-* variables to our brand tokens. The one thing
   air-datepicker exposes no variable for is the popup shadow → 1 override. */
.air-datepicker {
    --adp-accent-color:                        var(--mf-brand);
    --adp-cell-background-color-selected:       var(--mf-brand);
    --adp-cell-background-color-selected-hover: var(--mf-brand-dark);
    --adp-cell-background-color-hover:          var(--mf-tint);
    --adp-color-current-date:                   var(--mf-brand-dark);
    --adp-border-color:                         var(--mf-line);
    --adp-border-radius:                        10px;
    --adp-nav-arrow-color:                      var(--mf-ink);
    --adp-color:                                var(--mf-ink);
    --adp-background-color:                      var(--mf-card);
    --adp-day-name-color:                        var(--mf-brand-dark);
    box-shadow: var(--mf-shadow);
}

/* The --adp-* variable indirection above themes the popup chrome, but the SELECTED
   cell colour would not reach the cells reliably (the cell inherits the var from the
   .air-datepicker container at only 0,1,0 specificity). Color the selected cell rules
   DIRECTLY — same/higher specificity than the library's own cell rules (0,2,0 / 0,3,0),
   loaded after air-datepicker.css → guaranteed to win. Still driven by --mf-*, no hex.
   Covers day, month and year views (they all share .air-datepicker-cell.-selected-). */
.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-current- {
    background: var(--mf-brand);
    color:      var(--mf-on-brand);
}
.air-datepicker-cell.-selected-.-focus- {
    background: var(--mf-brand-dark);
    color:      var(--mf-on-brand);
}

/* ── 14. Mobile responsive pass (2026-07-09) — first @media rules in this file ──
   Layout/fit fixes only, no colour/style changes. Desktop (>480px) is byte-for-
   byte unchanged — everything below is additive and scoped to narrow viewports. */
@media (max-width: 480px) {
    /* Family 5: the shared searchable dropdown (orderedDropdown / roomPickerDropdown)
       is 350px min-width — on a 360-390px phone that leaves ~10px margin either side,
       clipping against the viewport edge. Cap it to the viewport instead of removing
       the min-width (keeps desktop/tablet behavior identical). */
    .dropdown-menu {
        max-width: calc(100vw - 20px);
    }

    /* Family 5: review-row tooltips (600px max-width) can't shrink via Popper's
       flip alone — cap to viewport on phones so the tooltip text stays reachable
       instead of overflowing off-screen. */
    .tooltip-inner {
        max-width: calc(100vw - 24px) !important;
    }
}

/* ── 15. UX-AUDIT FALA 1 — tap targets (WCAG 2.5.5, 2026-07-17) ──
   Dense TABLES (e.g. monthly-income, unit-attributes) use .btn-xs/.btn-sm per-row
   action buttons that fall well under the 44px touch target on phones. Scoped to
   IN-TABLE buttons only (panel MED-2: a blanket rule blew up deliberately-compact
   sidebar/inline buttons like the Logout pill). 44×44 (min-width too, panel MED-1:
   icon-only buttons were becoming tall-narrow pills). Desktop sizing untouched. */
@media (max-width: 767.98px) {
    .table .btn-xs,
    .table .btn-sm,
    td .btn-xs,
    td .btn-sm {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
/* ── MOBILE-AUDIT (feat/mobile-audit, 2026-07-22) — scroll affordance on wide
   tables. NOT numbered as a sequential section on purpose — the live test
   deployment already carries a later, unpushed "UX-AUDIT FALA 1" tap-target pass
   this branch doesn't have yet (based on origin/test); a fixed section number here
   would collide once that lands. Recon (P6 mobile sweep, dashboard / monthly-income
   / yearly-income / operations-costs / reservations / cs-margin, viewports 360/390/
   768): every wide data table already sits inside a correctly-behaving horizontal-
   scroll container — Bootstrap `.table-responsive` (overflow-x:auto) or DataTables'
   own `.dt-scroll-body` (scrollX) — so there is NO page-level horizontal overflow
   anywhere (measured overflow_px=0 on all 6 views × all 3 viewports). The remaining
   gap is pure DISCOVERABILITY: e.g. yearly-income is 16 columns (Property/Room/Unit
   + Jan–Dec + Total) squeezed into a ~286px-wide scroll window on a 360px phone —
   the extra columns are only reachable by a swipe the user has no visual cue exists
   (mobile browsers hide inert scrollbars until touched).
   FIRST ATTEMPT (kept only in this comment as a lesson, not shipped): the classic
   Lea Verou "background-attachment: local/scroll" scroll-shadow trick paints the
   shadow as the CONTAINER's own `background`, which sits BEHIND its children in
   the paint order — invisible here because our tables are fully opaque edge-to-
   edge (`.table-striped` rows), so the table paints over it completely. Proven
   wrong with a same-page before/after screenshot + pixel sample (identical RGB at
   the edge either way) before shipping — see handoff for the proof shot.
   SHIPPED FIX: a `::after` pseudo-element, absolutely positioned to the
   container's own right edge (NOT the scrolled content — it does not move as the
   table scrolls under it), painted ON TOP (default pseudo-element stacking = last
   child = topmost), `pointer-events:none` so it never blocks taps/scrolls. Always
   shows a right-edge fade while a `.table-responsive`/`.dt-scroll-body` exists —
   deliberately NOT scroll-position-aware (that needs a JS scroll listener, out of
   "simple CSS fix" scope for this pass); flagged as a candidate follow-up in the
   handoff. No layout change otherwise, purely additive.
   BREAKPOINT: 991.98px (Bootstrap lg), not the 767.98px convention used elsewhere
   in this file — deliberate. §14/15's 767.98px is a touch-target cutoff (phones vs
   "wide enough to use a mouse"); this is a discoverability hint, and the sweep
   found yearly-income (16 cols) STILL overflowing at exactly 768px (measured
   wide_tables=3 there), i.e. the one viewport this task was asked to cover. A
   subtle edge fade is harmless on a mouse-driven tablet/small-laptop too — no
   downside to the wider scope, unlike the 44px touch-target rule which would be
   wrong to apply to a mouse pointer.
   MOBILE-SCROLL-FADE-FIX (feat/night-cleanup, 2026-07-22): the fade below
   originally showed UNCONDITIONALLY on every `.table-responsive`/`.dt-scroll-
   body`, including tables that never overflow (e.g. the 3-column channel-split
   table) — a false "more content →" affordance that trains users to ignore it.
   Now gated on `.is-scrollable`, a class toggled by
   /public/dashboard/js/scroll-fade-toggle.js only when the container actually
   overflows (el.scrollWidth > el.clientWidth), on page load + on resize.
   Colour extracted to the --cs-scroll-fade token (public/shared/css/tokens.css). */
@media (max-width: 991.98px) {
    .table-responsive,
    .dt-scroll-body {
        position: relative;
    }
    .table-responsive.is-scrollable::after,
    .dt-scroll-body.is-scrollable::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 22px;
        background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--cs-scroll-fade));
        pointer-events: none;
        z-index: 2;
    }
}

/* Review-source badges (BLOK 7.2) — brand colours live as tokens here, not as
   inline hex duplicated across the list/detail views (panel 2026-07-25, H1). */
:root {
    --cs-source-airbnb-bg:  #ff5a5f;
    --cs-source-booking-bg: #003580;
}
.badge-source-airbnb  { background: var(--cs-source-airbnb-bg);  color: #fff; }
.badge-source-booking { background: var(--cs-source-booking-bg); color: #fff; }