/* =========================================================
   RUBY — CENTRAL THEME
   =========================================================

   Every page in this project carries its own inline <style>
   block, which is why a colour change used to mean editing
   43 files. This file is the one place brand values live.

   Load it BEFORE the page's own <style> block so a page can
   still override anything locally.

   ---------------------------------------------------------
   ON THE STATUS COLOURS

   Available stays green and Occupied stays red, unchanged —
   the existing colour coding is deliberate and is left
   exactly as it was. The brand mark is used in black or
   white wherever it sits near those states, so the wordmark
   never competes with a red "fully booked" badge.
   ---------------------------------------------------------  */

:root {

    /* ---------- BRAND ---------- */
    --ruby:            #9F1239;   /* primary brand red      */
    --ruby-dark:       #7D0E2E;   /* hover / pressed        */
    --ruby-light:      #C81E4A;   /* lighter accent         */
    --ruby-tint:       #FFF1F2;   /* pale wash for panels   */

    /* Legacy primary. Buttons and links across the site are
       still coded to this blue. Repointing this single value
       to var(--ruby) switches the whole UI over in one edit,
       once you're ready — nothing else needs to change. */
    --brand-primary:   #1E5EFF;
    --brand-primary-dark: #1748C7;

    /* ---------- STATUS (unchanged) ---------- */
    --status-available: #16A34A;
    --status-occupied:  #DC2626;
    --status-held:      #D97706;
    --status-settled:   #059669;

    /* ---------- NEUTRALS ---------- */
    --text:            #1F2937;
    --text-muted:      #6B7280;
    --text-faint:      #9CA3AF;
    --border:          #E5E7EB;
    --surface:         #FFFFFF;
    --surface-alt:     #FAFAFA;

    /* ---------- SIDEBAR (owner + admin portals) ---------- */
    --sidebar-bg:      #111827;
    --sidebar-text:    #E5E7EB;

    /* ---------- SHAPE ---------- */
    --radius-sm:       8px;
    --radius-md:       12px;
    --radius-pill:     50px;
}


/* =========================================================
   BRAND LOGO
   =========================================================

   The wordmark replaces the old "Zam<span>Stay</span>" text.
   Three variants ship in /images:

     ruby-logo.png        ruby red   — light backgrounds
     ruby-logo-white.png  white      — dark sidebars, hero nav

   Sizing is driven by height so the wordmark's aspect ratio
   is never distorted, whatever the container width.
   ========================================================= */

.brand-logo {
    display: block;
    height: 44px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Sidebar lockup — owner and admin portals. The sidebar is
   dark, so this is where the white variant is used. */
.logo .brand-logo,
.logo-img {
    height: 52px;
    width: auto;
    margin: 0 auto 40px;
    display: block;
    object-fit: contain;
}

/* Top navigation bar (guest-facing pages). */
.topbar .brand-logo,
nav .brand-logo {
    height: 38px;
    margin: 0;
}

/* index.html's nav sits transparent over the hero image and
   turns white on scroll. The white wordmark reads over the
   hero; the coloured one takes over once the bar is solid. */
nav .brand-logo.on-hero { display: block; }
nav .brand-logo.on-solid { display: none; }

nav.scrolled .brand-logo.on-hero { display: none; }
nav.scrolled .brand-logo.on-solid { display: block; }

/* Anchor wrapping a logo shouldn't inherit link underlines. */
a.logo,
a.brand {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 600px) {

    .brand-logo {
        height: 34px;
    }

    .logo .brand-logo,
    .logo-img {
        height: 42px;
        margin-bottom: 28px;
    }

}


/* =========================================================
   PORTAL SIDEBAR  (owner + admin)
   =========================================================

   THE BUG

   The sidebar is position:fixed with height:100vh and no overflow
   handling. The owner menu carries nine links, the admin menu ten.
   On a laptop — roughly 640px of usable viewport once browser
   chrome is accounted for — that column is taller than the screen,
   so the last entries fall off the bottom. Settings and Logout end
   up unreachable: there is nothing to scroll, because the sidebar
   never had overflow-y set. Only admin-bookings.html ever did.

   THE FIX, in three parts

     1. The column scrolls when it genuinely has to.
     2. Logout sits at the bottom of the column when there is room,
        which is where people look for it anyway.
     3. On short screens the spacing tightens, so in most cases
        everything fits and no scrolling is needed at all.

   Scoped with `body ` so these win against the .sidebar rules
   declared in each page's own inline <style> block, which loads
   after this file.

   Below 900px each page turns the sidebar into a full-width,
   height:auto block that stacks above the content — nothing is cut
   off there, so the height-dependent rules stay behind a
   min-width:901px guard and leave mobile alone.
   ========================================================= */

body .sidebar {
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    /* Stops a scroll gesture that reaches the end of the sidebar
       from carrying on and scrolling the page behind it. */
    overscroll-behavior: contain;

    /* Unobtrusive scrollbar for the dark column. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

body .sidebar::-webkit-scrollbar {
    width: 8px;
}

body .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 4px;
}

body .sidebar::-webkit-scrollbar-track {
    background: transparent;
}

body .sidebar .menu {
    display: flex;
    flex-direction: column;

    /* Takes the height left over below the logo. min-height:0 is
       required — without it a flex child refuses to shrink past its
       content and the scrolling above never engages. */
    flex: 1 1 auto;
    min-height: 0;
}


@media (min-width: 901px) {

    /* Logout is always the last link. auto margin pushes it to the
       bottom when the menu is shorter than the screen; when it is
       taller, the margin collapses to nothing and the link simply
       scrolls into view like any other. */
    body .sidebar .menu > a:last-child {
        margin-top: auto;
        margin-bottom: 0;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }

}


/* Laptop-height windows: tighten enough that all ten admin links
   fit without scrolling. */
@media (min-width: 901px) and (max-height: 800px) {

    body .sidebar .logo .brand-logo {
        height: 40px;
        margin-bottom: 20px;
    }

    body .sidebar .menu a {
        padding: 10px 15px;
        margin-bottom: 5px;
    }

}


/* Very short windows — a small laptop, or a browser with several
   toolbars open. */
@media (min-width: 901px) and (max-height: 640px) {

    body .sidebar {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    body .sidebar .logo .brand-logo {
        height: 32px;
        margin-bottom: 14px;
    }

    body .sidebar .menu a {
        padding: 8px 14px;
        margin-bottom: 3px;
        font-size: 14px;
    }

}