/* ==========================================================================
   Roomnix brand theme — mirrors the roomnix.com landing page.
   Loaded on every page by inc/theme_head.php; rules are scoped to
   html[data-theme="swiss"] so they win over same-specificity page CSS.

   Landing = strict Swiss (0 radius, black 1px rules). The app is a dense
   all-day work tool, so it keeps the palette + type but softens the edges:
   hairline grey borders and a small radius. Tune via the tokens below.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
html[data-theme="swiss"] {
    /* brand palette (same values as Roomnix/index.css) */
    --rn-red:        #e10600;
    --rn-red-dark:   #b80500;
    --rn-red-soft:   #fff1f0;
    --rn-red-rgb:    225, 6, 0;
    --rn-ink:        #0a0a0a;
    --rn-ink-2:      #2b2b2b;
    --rn-ink-rgb:    10, 10, 10;
    --rn-muted:      #5a5a5a;
    --rn-faint:      #8a8a8a;
    --rn-hairline:   #dcdcdc;
    --rn-paper:      #ffffff;
    --rn-paper-2:    #f4f4f2;

    /* app-specific softening */
    --rn-radius:     3px;
    --rn-font-display: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --rn-font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Bootstrap 5.3 globals */
    --bs-primary:            var(--rn-red);
    --bs-primary-rgb:        var(--rn-red-rgb);
    --bs-primary-text-emphasis: var(--rn-red-dark);
    --bs-primary-bg-subtle:  var(--rn-red-soft);
    --bs-primary-border-subtle: #f5b3b0;
    --bs-secondary-rgb:      90, 90, 90;
    --bs-dark:               var(--rn-ink);
    --bs-dark-rgb:           var(--rn-ink-rgb);
    --bs-light:              var(--rn-paper-2);
    --bs-light-rgb:          244, 244, 242;

    --bs-body-font-family:   var(--rn-font-body);
    --bs-body-color:         var(--rn-ink);
    --bs-body-color-rgb:     var(--rn-ink-rgb);
    --bs-body-bg:            var(--rn-paper);
    --bs-secondary-color:    var(--rn-muted);
    --bs-tertiary-bg:        var(--rn-paper-2);
    --bs-emphasis-color:     var(--rn-ink);

    --bs-link-color:         var(--rn-ink);
    --bs-link-color-rgb:     var(--rn-ink-rgb);
    --bs-link-hover-color:   var(--rn-red);
    --bs-link-hover-color-rgb: var(--rn-red-rgb);

    --bs-border-color:       var(--rn-hairline);
    --bs-border-radius:      var(--rn-radius);
    --bs-border-radius-sm:   var(--rn-radius);
    --bs-border-radius-lg:   var(--rn-radius);
    --bs-border-radius-xl:   var(--rn-radius);
    --bs-border-radius-xxl:  var(--rn-radius);

    --bs-focus-ring-color:   rgba(var(--rn-red-rgb), .25);
}

html[data-theme="swiss"] ::selection { background: var(--rn-red); color: #fff; }

/* ---- Typography --------------------------------------------------------- */
html[data-theme="swiss"] body { font-family: var(--rn-font-body); }

html[data-theme="swiss"] h1, html[data-theme="swiss"] .h1,
html[data-theme="swiss"] h2, html[data-theme="swiss"] .h2,
html[data-theme="swiss"] h3, html[data-theme="swiss"] .h3,
html[data-theme="swiss"] h4, html[data-theme="swiss"] .h4,
html[data-theme="swiss"] .modal-title {
    font-family: var(--rn-font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--rn-ink);
}

/* ---- Buttons ------------------------------------------------------------ */
html[data-theme="swiss"] .btn { font-weight: 600; }

html[data-theme="swiss"] .btn-primary {
    --bs-btn-bg: var(--rn-red);
    --bs-btn-border-color: var(--rn-red);
    --bs-btn-hover-bg: var(--rn-ink);
    --bs-btn-hover-border-color: var(--rn-ink);
    --bs-btn-active-bg: var(--rn-ink);
    --bs-btn-active-border-color: var(--rn-ink);
    --bs-btn-disabled-bg: var(--rn-red);
    --bs-btn-disabled-border-color: var(--rn-red);
    --bs-btn-focus-shadow-rgb: var(--rn-red-rgb);
}
html[data-theme="swiss"] .btn-dark {
    --bs-btn-bg: var(--rn-ink);
    --bs-btn-border-color: var(--rn-ink);
    --bs-btn-hover-bg: var(--rn-red);
    --bs-btn-hover-border-color: var(--rn-red);
    --bs-btn-active-bg: var(--rn-red);
    --bs-btn-active-border-color: var(--rn-red);
}
html[data-theme="swiss"] .btn-outline-primary {
    --bs-btn-color: var(--rn-red);
    --bs-btn-border-color: var(--rn-red);
    --bs-btn-hover-bg: var(--rn-red);
    --bs-btn-hover-border-color: var(--rn-red);
    --bs-btn-active-bg: var(--rn-red);
    --bs-btn-active-border-color: var(--rn-red);
    --bs-btn-disabled-color: var(--rn-red);
    --bs-btn-disabled-border-color: var(--rn-red);
    --bs-btn-focus-shadow-rgb: var(--rn-red-rgb);
}
html[data-theme="swiss"] .btn-outline-dark,
html[data-theme="swiss"] .btn-outline-secondary {
    --bs-btn-color: var(--rn-ink);
    --bs-btn-border-color: var(--rn-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--rn-ink);
    --bs-btn-hover-border-color: var(--rn-ink);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--rn-ink);
    --bs-btn-active-border-color: var(--rn-ink);
}
/* .btn-secondary is used ~85x as "Cancel/Close" — keep it quiet, not ink */
html[data-theme="swiss"] .btn-secondary {
    --bs-btn-color: var(--rn-ink);
    --bs-btn-bg: var(--rn-paper-2);
    --bs-btn-border-color: var(--rn-hairline);
    --bs-btn-hover-color: var(--rn-ink);
    --bs-btn-hover-bg: #e8e8e5;
    --bs-btn-hover-border-color: #c8c8c8;
    --bs-btn-active-color: var(--rn-ink);
    --bs-btn-active-bg: #dededa;
    --bs-btn-active-border-color: #c8c8c8;
}
/* .btn-danger stays a "danger" action but follows the brand red */
html[data-theme="swiss"] .btn-danger {
    --bs-btn-bg: var(--rn-red);
    --bs-btn-border-color: var(--rn-red);
    --bs-btn-hover-bg: var(--rn-red-dark);
    --bs-btn-hover-border-color: var(--rn-red-dark);
    --bs-btn-active-bg: var(--rn-red-dark);
    --bs-btn-active-border-color: var(--rn-red-dark);
}

/* ---- Forms (Bootstrap hardcodes blue focus/checked colors) -------------- */
html[data-theme="swiss"] .form-control:focus,
html[data-theme="swiss"] .form-select:focus,
html[data-theme="swiss"] .form-check-input:focus {
    border-color: rgba(var(--rn-red-rgb), .55);
    box-shadow: 0 0 0 .2rem rgba(var(--rn-red-rgb), .15);
}
html[data-theme="swiss"] .form-check-input:checked {
    background-color: var(--rn-red);
    border-color: var(--rn-red);
}
html[data-theme="swiss"] .form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28225, 6, 0, 0.5%29'/%3e%3c/svg%3e");
}
html[data-theme="swiss"] .form-range::-webkit-slider-thumb { background-color: var(--rn-red); }
html[data-theme="swiss"] .form-range::-moz-range-thumb     { background-color: var(--rn-red); }

/* ---- Components --------------------------------------------------------- */
html[data-theme="swiss"] .nav-pills {
    --bs-nav-pills-link-active-bg: var(--rn-ink);
}
html[data-theme="swiss"] .nav-tabs {
    --bs-nav-tabs-link-active-color: var(--rn-ink);
}
html[data-theme="swiss"] .nav-tabs .nav-link.active { box-shadow: inset 0 -2px 0 var(--rn-red); }
html[data-theme="swiss"] .nav {
    --bs-nav-link-color: var(--rn-ink-2);
    --bs-nav-link-hover-color: var(--rn-red);
}
html[data-theme="swiss"] .dropdown-menu {
    --bs-dropdown-link-active-bg: var(--rn-ink);
    --bs-dropdown-border-color: var(--rn-hairline);
}
html[data-theme="swiss"] .pagination {
    --bs-pagination-color: var(--rn-ink);
    --bs-pagination-hover-color: var(--rn-red);
    --bs-pagination-focus-color: var(--rn-red);
    --bs-pagination-active-bg: var(--rn-ink);
    --bs-pagination-active-border-color: var(--rn-ink);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--rn-red-rgb), .15);
}
html[data-theme="swiss"] .list-group {
    --bs-list-group-active-bg: var(--rn-ink);
    --bs-list-group-active-border-color: var(--rn-ink);
}
html[data-theme="swiss"] .progress,
html[data-theme="swiss"] .progress-stacked {
    --bs-progress-bar-bg: var(--rn-red);
}
html[data-theme="swiss"] .accordion {
    --bs-accordion-active-color: var(--rn-ink);
    --bs-accordion-active-bg: var(--rn-paper-2);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--rn-red-rgb), .15);
}

/* Flat surfaces: landing uses no shadows; keep a whisper for floating layers */
html[data-theme="swiss"] .card { box-shadow: none; }
html[data-theme="swiss"] .shadow-sm,
html[data-theme="swiss"] .shadow { box-shadow: 0 1px 2px rgba(0, 0, 0, .06) !important; }
html[data-theme="swiss"] .shadow-lg { box-shadow: 0 8px 24px rgba(0, 0, 0, .10) !important; }

html[data-theme="swiss"] .table { --bs-table-border-color: var(--rn-hairline); }
html[data-theme="swiss"] .table > thead th {
    font-weight: 600;
    color: var(--rn-muted);
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .04em;
}

/* ---- Sidebar (sidebar.php / css/sidebar.css) ---------------------------- */
html[data-theme="swiss"] #sidebar { background-color: var(--rn-ink); }
html[data-theme="swiss"] #sidebar .nav-link { color: rgba(255, 255, 255, .82); }
html[data-theme="swiss"] #sidebar .nav-link:hover {
    background-color: var(--rn-ink-2);
    color: #fff;
}
html[data-theme="swiss"] #sidebar .nav-link.active {
    background-color: transparent;
    color: #fff;
    box-shadow: inset 3px 0 0 var(--rn-red);
}

/* ☰ toggle (.btn-outline-secondary in sidebar.php). The themed outline is ink
   on transparent, which vanishes over the ink sidebar; a filled ink button
   reads both over the sidebar and, when it is collapsed, over the white page. */
html[data-theme="swiss"] #sidebarToggle {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--rn-ink);
    --bs-btn-border-color: rgba(255, 255, 255, .25);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--rn-red);
    --bs-btn-hover-border-color: var(--rn-red);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--rn-red-dark);
    --bs-btn-active-border-color: var(--rn-red-dark);
}

/* ---- Calendar & rates grid (calendar.css / rates.css) ------------------- */
/* Room-type summary rows: neutral paper instead of blue-grey + mint green.
   Sold out is the brand red itself, so it is the one thing that shouts. */
html[data-theme="swiss"] .room-type-cell,
html[data-theme="swiss"] .room-type-row .day-cell {
    background-color: var(--rn-paper-2);
}
html[data-theme="swiss"] .room-type-cell { color: var(--rn-ink); }

html[data-theme="swiss"] .room-type-row .day-cell.avail-open {
    background-color: var(--rn-paper-2);
}
html[data-theme="swiss"] .room-type-row .day-cell.avail-open span {
    color: var(--rn-ink);
    font-weight: 600;
}
html[data-theme="swiss"] .room-type-row .day-cell.avail-open:hover {
    background-color: #e8e8e5;
}
html[data-theme="swiss"] .room-type-row .day-cell.avail-zero {
    background-color: var(--rn-red);
}
html[data-theme="swiss"] .room-type-row .day-cell.avail-zero span {
    color: #fff;
    font-weight: 700;
}
html[data-theme="swiss"] .room-type-row .day-cell.avail-zero:hover {
    background-color: var(--rn-red-dark);
}

/* Grid lines: hairline grey instead of the beige #c2b593 */
html[data-theme="swiss"] .day-cell { border-color: var(--rn-hairline); }

/* ---- Support chat widget (chat.php) — ink instead of orange ------------- */
html[data-theme="swiss"] #chat-toggle { background: var(--rn-ink); }
html[data-theme="swiss"] #chat-toggle:hover { background: var(--rn-red); }
html[data-theme="swiss"] #chat-box { border-color: var(--rn-ink); }
html[data-theme="swiss"] #chat-header { background: var(--rn-ink); }
html[data-theme="swiss"] .chat-msg.hotel_user { color: var(--rn-ink); }

/* ---- Dashboard (dashboard.php / css/dashboard.css) ---------------------- */
/* Status tiles become one hairline strip like Statistics: no boxes, no
   coloured icons, label over a big number; the open tile gets the red bar. */
html[data-theme="swiss"] .status-container,
html[data-theme="swiss"] .display-container {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin-top: 28px;
}
html[data-theme="swiss"] .status-container { overflow: hidden; }
html[data-theme="swiss"] .status-container h4,
html[data-theme="swiss"] .display-container h4 {
    font-family: var(--rn-font-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.02em;
}
html[data-theme="swiss"] .status-container > .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 0 -1px 0 0;            /* hide the last column's right hairline */
    border-top: 1px solid var(--rn-ink);
}
/* Meal row under the status row: same columns so tiles line up, and no
   second black rule (the tiles above already draw the hairline). */
html[data-theme="swiss"] .status-container > .row.status-meals {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    border-top: 0;
}
@media (min-width: 1200px) {
    html[data-theme="swiss"] .status-container > .row,
    html[data-theme="swiss"] .status-container > .row.status-meals {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}
html[data-theme="swiss"] .status-container > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0 !important;
    border-right: 1px solid var(--rn-hairline);
    border-bottom: 1px solid var(--rn-hairline);
}
html[data-theme="swiss"] .status-card {
    position: relative;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 18px 18px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
html[data-theme="swiss"] .status-container .status-card:hover {
    background: var(--rn-paper-2);
    transform: none;
    box-shadow: none;
}
html[data-theme="swiss"] .status-card.is-selected {
    background: var(--rn-paper-2);
    box-shadow: inset 0 4px 0 var(--rn-red);
}
html[data-theme="swiss"] .status-card .status-icon { display: none; }
/* label above the number (markup has number first) */
html[data-theme="swiss"] .status-card > div {
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
}
html[data-theme="swiss"] .status-card .status-text {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--rn-muted);
}
html[data-theme="swiss"] .status-card.is-selected .status-text { color: var(--rn-ink); }
html[data-theme="swiss"] .status-card .status-number {
    font-family: var(--rn-font-display);
    font-weight: 800;
    font-size: clamp(22px, 1.1rem + .8vw, 30px);
    letter-spacing: -.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
html[data-theme="swiss"] .status-number.meal-pax { font-size: clamp(20px, 1rem + .6vw, 26px); }
/* Reminders due: say it with the number, not a pink box */
html[data-theme="swiss"] .reminder-alert { background: transparent; border: 0; box-shadow: none; }
html[data-theme="swiss"] .reminder-alert .status-number,
html[data-theme="swiss"] .reminder-alert .status-text { color: var(--rn-red); }

/* Details panel: reminders as a ruled list instead of yellow alerts */
html[data-theme="swiss"] .display-container .reminder-list { border-top: 1px solid var(--rn-ink); }
html[data-theme="swiss"] .display-container .reminder-list .alert-warning {
    background: transparent;
    color: var(--rn-ink);
    border: 0;
    border-bottom: 1px solid var(--rn-hairline);
    border-left: 3px solid var(--rn-red);
    border-radius: 0;
    margin-bottom: 0 !important;
    padding: 12px 14px;
}

/* Trial banner + system announcements */
html[data-theme="swiss"] .rn-trial,
html[data-theme="swiss"] .rn-announce {
    background: var(--rn-paper-2);
    border: 0;
    border-left: 4px solid var(--rn-red);
    border-radius: 0;
    box-shadow: none;
}
html[data-theme="swiss"] .rn-trial-title,
html[data-theme="swiss"] .rn-trial-text,
html[data-theme="swiss"] .rn-announce-head,
html[data-theme="swiss"] .rn-announce-title,
html[data-theme="swiss"] .rn-announce-body { color: var(--rn-ink); }
html[data-theme="swiss"] .rn-announce-head {
    font-size: 11.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--rn-muted);
}
html[data-theme="swiss"] .rn-announce-meta { color: var(--rn-muted); }
html[data-theme="swiss"] .rn-announce-close { color: var(--rn-ink); }
html[data-theme="swiss"] .rn-announce-close:hover { color: var(--rn-red); }
html[data-theme="swiss"] .rn-trial-cta { background: var(--rn-ink); border-radius: var(--rn-radius); }
html[data-theme="swiss"] .rn-trial-cta:hover { background: var(--rn-red); color: #fff; }