/**
 * panel-theme.css
 * ----------------
 * Shared black / white / gold theme for the admin and employee panels, and the
 * sign-in page - unifying them with the luxury look already established on the
 * public site (index.php, booking.php use the same #C59D5F gold).
 *
 * Approach: redefine Bootstrap 5's own CSS custom properties rather than
 * hand-overriding every utility class. Bootstrap's utilities (btn-*, bg-*,
 * text-*, border-*, including the bg-opacity-10 badge variants already used
 * throughout these panels) all read from --bs-{color} / --bs-{color}-rgb, so
 * this cascades everywhere automatically:
 *   - "primary" (Bootstrap blue) -> near-black, used for neutral/primary actions
 *     and the "Online" category badges.
 *   - "warning" (Bootstrap amber) -> brand gold, since every existing gold
 *     accent in these panels (icons, active nav, stat-card borders, "Pending"
 *     badges) was already piggybacking on text-warning/bg-warning/btn-warning.
 * success/danger/info are deliberately left as Bootstrap's defaults (green/
 * red/cyan) - those carry real meaning (Completed/Declined/In-Progress) and
 * should stay visually distinct from the brand palette and from each other,
 * not be flattened into gold.
 */

:root {
    --bs-primary: #161616;
    --bs-primary-rgb: 22, 22, 22;
    --bs-primary-text-emphasis: #161616;
    --bs-primary-bg-subtle: #e6e6e6;
    --bs-primary-border-subtle: #161616;

    --bs-warning: #C59D5F;
    --bs-warning-rgb: 197, 157, 95;
    --bs-warning-text-emphasis: #8a6b3a;
    --bs-warning-bg-subtle: #f5ecdd;
    --bs-warning-border-subtle: #C59D5F;

    --bs-link-color: #C59D5F;
    --bs-link-color-rgb: 197, 157, 95;
    --bs-link-hover-color: #a8834a;
    --bs-link-hover-color-rgb: 168, 131, 74;
}

/* btn-warning/btn-outline-warning text stays readable on the gold background */
.btn-warning,
.btn-check:checked + .btn-warning {
    color: #000;
}
.btn-outline-warning {
    color: #8a6b3a;
}
.btn-outline-warning:hover,
.btn-outline-warning:active {
    color: #000;
}

/* btn-primary/btn-outline-primary text stays readable on the near-black background */
.btn-primary {
    color: #fff;
}
.btn-outline-primary {
    color: #161616;
    border-color: #161616;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
    color: #fff;
    background-color: #161616;
    border-color: #161616;
}

/* Focus rings pick up the brand gold instead of Bootstrap's default blue */
.form-control:focus,
.form-select:focus {
    border-color: #C59D5F;
    box-shadow: 0 0 0 0.25rem rgba(197, 157, 95, 0.25);
}

/* Sidebar / top-nav scrollbar and misc chrome already dark (#161616) across every
   panel - just make sure focus outlines on nav links use the same gold. */
.admin-sidebar .nav-link:focus-visible,
.employee-sidebar .nav-link:focus-visible {
    outline: 2px solid #C59D5F;
    outline-offset: -2px;
}

/* table-dark headers (used throughout for the main data tables) get a gold
   heading tint instead of plain white, matching the brand accent. */
table thead.table-dark th,
.table-dark thead th {
    color: #C59D5F;
}

/* ------------------------------------------------------------------
 * Scroll-triggered entrance animation, shared site-wide (see
 * js/scroll-reveal.js). Add class="reveal" to any section/card/row
 * wrapper; the script adds "is-visible" the moment it scrolls into
 * view. Pure presentation - never hides content if JS fails to run
 * (see the "no-js" fallback rule below).
 * ------------------------------------------------------------------ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}