:root {
    --brand-primary: #c0132b; /* red from logo */
    --brand-dark: #0b2a4a;    /* navy ring */
    --brand-accent: #f4b400;  /* gold ribbon */
    --brand-light: #f7f8fb;
    --brand-text: #1f2937;
}

/* Base typography tweaks */
body {
    color: var(--brand-text);
    background-color: var(--brand-light);
}

/* Navbar branding */
.navbar-branding { background-color: var(--brand-dark) !important; }
.navbar .navbar-brand img.brand-logo { height: 28px; width: auto; margin-right: 8px; }
.navbar .navbar-brand .brand-text { font-weight: 600; letter-spacing: .2px; }

/* Links and accents */
a, .link-primary { color: var(--brand-primary); }
a:hover, .link-primary:hover { color: #a20f23; }

/* Buttons */
.btn-brand { background-color: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.btn-brand:hover { background-color: #a20f23; border-color: #a20f23; color: #fff; }
.btn-outline-brand { color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-outline-brand:hover { background-color: var(--brand-primary); color: #fff; }

/* Map Bootstrap primary to brand */
.btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: #a20f23; border-color: #a20f23; }
.btn-outline-primary { color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-outline-primary:hover { background-color: var(--brand-primary); color: #fff; }

/* Tabs */
.nav-tabs .nav-link.active { color: var(--brand-dark); border-color: var(--brand-dark) var(--brand-dark) #fff; }
.nav-tabs .nav-link { color: var(--brand-primary); }
.nav-tabs .nav-link:hover { color: #a20f23; }

/* DataTables header */
.table thead th { background-color: #f0f3f8; }
.table.table-bordered thead th { background-color: #e8eef7; }
.table-striped>tbody>tr:nth-of-type(odd)>* { --bs-table-accent-bg: rgba(240,244,248,.5); }

/* Alerts accents (subtle brand) */
.alert-primary { background-color: rgba(192,19,43,.1); border-color: rgba(192,19,43,.25); color: var(--brand-primary); }

/* Booking Room Slot table */
td.slot-cell { padding: 0; }
.booking-link {
    width: 100%;
    margin: 0;
    background: var(--brand-primary);
    display: block;
    color: #FFF;
    text-decoration: none;
}

/* Transparent/low-opacity utility for outline icon buttons */
.btn-ghost { background-color: transparent !important; }

/* Primary outline ghost: keep transparent at rest; subtle tint on hover/active */
.btn-outline-primary.btn-ghost:hover,
.btn-outline-primary.btn-ghost:active,
.btn-outline-primary.btn-ghost:focus,
.btn-outline-primary.btn-ghost:focus:hover {
    background-color: rgba(192, 19, 43, 0.12); /* brand primary with low opacity */
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* Danger outline ghost: subtle tint using Bootstrap danger rgb var when available */
.btn-outline-danger.btn-ghost:hover,
.btn-outline-danger.btn-ghost:active,
.btn-outline-danger.btn-ghost:focus,
.btn-outline-danger.btn-ghost:focus:hover {
    background-color: rgba(var(--bs-danger-rgb, 220, 53, 69), 0.12);
    color: var(--bs-danger, #dc3545);
    border-color: var(--bs-danger, #dc3545);
}

/* Ensure focus ring from Bootstrap is visible */
.btn-ghost:focus { outline: 0; box-shadow: var(--bs-btn-focus-box-shadow, 0 0 0 .25rem rgba(13,110,253,.25)); }

/* Sticky first column for Rent Room appointment grid */
#appointment-grid thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 5; /* above body cells */
    background-color: #f0f3f8; /* match header bg */
    box-shadow: 2px 0 0 rgba(0,0,0,.06);
}
#appointment-grid tbody th:first-child {
    position: sticky;
    left: 0;
    z-index: 4; /* below header */
    background-color: #fff; /* ensure text readable over scrolled cells */
    box-shadow: 2px 0 0 rgba(0,0,0,.06);
}