/* =========================================================
   FIX & DRIVE — ADMIN (login.html + bookings.html)
   Matches the main website: black + white + light blue,
   DM Serif Display headings, Cormorant Garamond text,
   rounded 3D buttons.
   ========================================================= */

:root {
    --black: #000000;
    --ink: #080807;               /* header / dark panels (same as the site header) */
    --white: #ffffff;
    --blue: #57d7f4;              /* main accent (same as --copper on the site) */
    --blue-dark: #147a91;         /* readable blue on white backgrounds */
    --muted: #5f6b6e;
    --border: #d9e3e6;
    --paper: #ffffff;
    --page: #f4f8f9;
    --green: #176321;
    --amber: #986817;
    --red: #9D3530;
    --btn-edge: #6b6b6b;
    --shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

button,
a {
    font: inherit;
}

a {
    color: inherit;
}

body.admin-page {
    margin: 0;
    min-height: 100vh;
    color: var(--black);
    background: var(--page);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 18px;
}


/* =========================================================
   BOOKINGS PAGE — HEADER (same look as the website header)
   ========================================================= */

.admin-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 76px;
    padding: 10px clamp(20px, 4.5vw, 76px);
    color: var(--white);
    background: var(--ink);
    border-top: 3px solid var(--blue);
    border-bottom: 1px solid rgba(87, 215, 244, 0.3);
}

.admin-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.admin-brand img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}

.admin-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 24px;
    color: var(--white);
    white-space: nowrap;
}

.brand-label {
    margin-top: 5px;
    color: var(--blue);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 5px;
}

.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-site-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f4eee8;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-decoration: none;
    transition: color 0.2s ease;
}

.admin-site-link:hover,
.admin-site-link:focus-visible {
    color: var(--blue);
}

.admin-logout {
    padding: 10px 18px;
    border: 2px solid var(--white);
    border-radius: 10px;
    color: var(--black);
    background: var(--white);
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    cursor: pointer;
    box-shadow: 0 3px 0 #8a8a8a, 0 8px 14px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.admin-logout:hover,
.admin-logout:focus-visible {
    background: var(--blue);
    transform: translateY(-2px);
    box-shadow: 0 5px 0 #8a8a8a, 0 12px 18px rgba(0, 0, 0, 0.45);
}

.admin-logout:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #8a8a8a;
}


/* =========================================================
   BOOKINGS PAGE — LAYOUT
   ========================================================= */

.admin-main {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
    padding: clamp(30px, 5vw, 56px) 0 90px;
}

.page-heading {
    padding: clamp(34px, 6vw, 60px) clamp(22px, 4vw, 52px);
    border-bottom: 3px solid var(--blue);
    border-radius: 12px;
    color: var(--white);
    background:
        linear-gradient(
            100deg,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.76) 55%,
            rgba(8, 60, 74, 0.7) 100%
        ),
        url("../assets/images/backg.jpg") center / cover no-repeat;
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--blue-dark);
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.page-heading .eyebrow {
    color: var(--blue);
}

.page-heading h1 {
    margin: 0;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(40px, 7vw, 72px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.02em;
}

.page-description,
.section-description {
    color: var(--muted);
    line-height: 1.45;
}

.page-description {
    max-width: 540px;
    margin: 18px 0 0;
    font-size: 20px;
}

.page-heading .page-description {
    color: rgba(255, 255, 255, 0.82);
}

.bookings-section {
    padding-top: 38px;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.section-heading h2 {
    margin: 0;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 400;
}

.section-description {
    margin: 8px 0 0;
}

.pending-counter {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--paper);
}

.pending-counter span {
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.pending-counter strong {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border-radius: 50%;
    color: var(--black);
    background: var(--blue);
    font-family: Arial, sans-serif;
    font-size: 13px;
}

.message {
    display: none;
    margin: 0 0 18px;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--paper);
    overflow-wrap: anywhere;
}

.message.is-visible {
    display: block;
}

.message.is-error {
    color: var(--red);
    border-color: #DDB9B6;
}


/* =========================================================
   BOOKING CARDS
   ========================================================= */

.bookings-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.booking-card {
    min-width: 0;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--border);
    border-left: 4px solid var(--blue);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

.booking-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.booking-header h3 {
    margin: 0 0 8px;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 29px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.booking-id {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    overflow-wrap: anywhere;
}

.booking-id strong {
    color: var(--blue-dark);
    font-family: Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.04em;
}

.booking-status {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.booking-status::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.booking-status.pending {
    color: var(--amber);
    background: #FBF3E2;
}

.booking-status.accepted {
    color: var(--green);
    background: #EAF4ED;
}

.booking-status.rejected {
    color: var(--red);
    background: #F9EBE9;
}

.booking-status.unknown {
    color: var(--muted);
    background: #eef2f3;
}

.booking-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding-top: 22px;
}

.booking-detail {
    min-width: 0;
}

.booking-detail > strong {
    display: block;
    margin-bottom: 10px;
    color: var(--blue-dark);
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0.16em;
}

.booking-detail p {
    margin: 4px 0;
    padding: 0;
    color: #1f2a2c;
    line-height: 1.35;
    text-align: left;
    text-indent: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* only the customer's own free text keeps its line breaks */
.booking-detail p.booking-text {
    white-space: pre-line;
}

.no-requests,
.empty-state {
    padding: 56px 20px;
    text-align: center;
    border: 1px dashed #b9cdd2;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
}

.no-requests-icon,
.empty-icon {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 50%;
    color: var(--black);
    background: var(--blue);
    font-family: Arial, sans-serif;
}

.no-requests h3,
.empty-state h3 {
    margin: 0;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 25px;
    font-weight: 400;
}

.no-requests p,
.empty-state p {
    margin: 8px 0 0;
    color: var(--muted);
}


/* =========================================================
   DONE / CANCEL BUTTONS + SOUND BUTTON (3D, like the website)
   ========================================================= */

.booking-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.booking-action-button,
.enable-sound-button {
    min-height: 42px;
    padding: 10px 22px;
    border: 2px solid var(--black);
    border-radius: 10px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--btn-edge), 0 10px 16px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease,
                background 0.2s ease, color 0.2s ease;
}

.booking-action-button {
    min-width: 120px;
}

.done-button,
.enable-sound-button {
    color: var(--white);
    background: var(--black);
}

.cancel-button {
    color: var(--black);
    background: var(--white);
}

.booking-action-button:hover:not(:disabled),
.enable-sound-button:hover:not(:disabled) {
    background: var(--blue);
    color: var(--black);
    transform: translateY(-3px);
    box-shadow: 0 7px 0 var(--btn-edge), 0 16px 22px rgba(0, 0, 0, 0.25);
}

.cancel-button:hover:not(:disabled) {
    background: #fbe9e7;
    border-color: var(--red);
    color: var(--red);
}

.booking-action-button:active:not(:disabled),
.enable-sound-button:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--btn-edge);
}

.booking-action-button:disabled,
.enable-sound-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.booking-notification-controls {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 18px;
}

.enable-sound-button:disabled {
    background: var(--green);
    border-color: var(--green);
    box-shadow: none;
    cursor: default;
    opacity: 1;
}


/* =========================================================
   ADMIN LOGIN PAGE (compact, dark card like the site header)
   ========================================================= */

body.admin-login-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--black);          /* shown only while the image loads */
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 17px;
}

/* A fixed pseudo-element is used instead of "background-attachment: fixed"
   because iPhones/Android browsers ignore that property. */
body.admin-login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.62) 50%,
            rgba(8, 60, 74, 0.78) 100%
        ),
        url("../assets/images/backg.jpg") center / cover no-repeat;
}

.admin-login-container {
    width: min(350px, calc(100% - 32px));
    padding: 16px 0;
}

.admin-login-card {
    padding: 20px 24px 24px;
    border: 1px solid rgba(87, 215, 244, 0.3);
    border-top: 3px solid var(--blue);
    border-radius: 12px;
    color: var(--white);
    background: var(--ink);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* back arrow + logo row */
.admin-login-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.admin-back {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    color: var(--white);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, transform 0.15s ease;
}

.admin-back:hover,
.admin-back:focus-visible {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--black);
    transform: translateX(-2px);
    outline: none;
}

.admin-login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.admin-login-brand img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex-shrink: 0;
}

.admin-login-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.admin-login-brand-name {
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 20px;
    color: var(--white);
    white-space: nowrap;
}

.admin-login-brand-tagline {
    margin-top: 4px;
    color: var(--blue);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 4px;
}

.admin-login-header {
    margin-bottom: 16px;
}

.admin-login-header h1 {
    margin: 0;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
}

.admin-login-header p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 16px;
    line-height: 1.3;
}

.admin-form-group {
    margin-bottom: 14px;
}

.admin-form-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--blue);
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.admin-form-group input {
    width: 100%;
    min-height: 44px;
    padding: 9px 14px;
    border: 2px solid transparent;
    border-radius: 8px;
    color: var(--black);
    background: var(--white);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 18px;      /* 16px+ stops iPhones zooming into the field */
    font-weight: 600;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-form-group input::placeholder {
    color: #8c9a9d;
    font-weight: 500;
}

.admin-form-group input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(87, 215, 244, 0.3);
}

/* password field with the eye button on the right */
.admin-password-wrap {
    position: relative;
}

.admin-password-wrap input {
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: #5f6b6e;
    background: transparent;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: var(--blue-dark);
    background: #eaf6f9;
    outline: none;
}

.password-toggle .eye-off {
    display: none;
}

.password-toggle.is-visible .eye {
    display: none;
}

.password-toggle.is-visible .eye-off {
    display: block;
}

.admin-login-error {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #ff6b5e;
    border-radius: 8px;
    color: #ffc2bb;
    background: rgba(255, 107, 94, 0.12);
    font-size: 16px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.admin-login-error[hidden] {
    display: none;
}

/* same look as the website buttons on dark backgrounds */
#adminLoginButton {
    width: 100%;
    min-height: 46px;
    padding: 11px 18px;
    border: 2px solid var(--white);
    border-radius: 10px;
    color: var(--black);
    background: var(--white);
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    cursor: pointer;
    box-shadow: 0 4px 0 #8a8a8a, 0 10px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

#adminLoginButton:hover:not(:disabled),
#adminLoginButton:focus-visible {
    background: var(--blue);
    transform: translateY(-3px);
    box-shadow: 0 7px 0 #8a8a8a, 0 16px 22px rgba(0, 0, 0, 0.5);
    outline: none;
}

#adminLoginButton:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #8a8a8a;
}

#adminLoginButton:disabled {
    opacity: 0.6;
    cursor: wait;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {
    .admin-header {
        min-height: 68px;
        padding: 8px 16px;
    }

    .admin-brand img {
        width: 46px;
        height: 46px;
    }

    .brand-name {
        font-size: 19px;
    }

    .brand-label {
        font-size: 10px;
        letter-spacing: 4px;
    }

    .admin-site-link span {
        display: none;            /* arrow only on phones */
    }

    .admin-site-link {
        width: 36px;
        height: 36px;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 50%;
    }

    .admin-main {
        width: min(calc(100% - 28px), 1240px);
        padding-top: 24px;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .pending-counter {
        gap: 8px;
        padding: 9px 10px;
    }

    .pending-counter span {
        font-size: 9px;
    }

    .booking-header {
        flex-direction: column;
    }

    .booking-details {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .booking-notification-controls {
        justify-content: stretch;
    }

    .enable-sound-button {
        width: 100%;
    }

    .admin-login-container {
        width: calc(100% - 24px);
        padding: 12px 0;
    }
}

@media (max-width: 480px) {
    .booking-actions {
        flex-direction: row;
    }

    .booking-action-button {
        width: 100%;
    }
}

/* =========================================================
   BOOKING CARDS ON PHONES (compact)
   ========================================================= */
@media (max-width: 640px) {
    .bookings-list { gap: 14px; }

    .booking-card {
        padding: 16px;
        border-left-width: 3px;
    }

    .booking-header {
        gap: 10px;
        padding-bottom: 12px;
    }

    .booking-header h3 {
        margin-bottom: 4px;
        font-size: 22px;
    }

    .booking-id { font-size: 14px; }

    .booking-status {
        padding: 6px 10px;
        font-size: 9px;
    }

    /* 2 small columns instead of one long list */
    .booking-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 12px;
        padding-top: 14px;
    }

    .booking-detail > strong {
        margin-bottom: 4px;
        font-size: 9px;
    }

    .booking-detail p {
        margin: 2px 0;
        font-size: 15px;
        line-height: 1.25;
    }

    /* long content gets the full width */
    .booking-detail:first-child,
    .booking-problem {
        grid-column: 1 / -1;
    }

    .booking-actions {
        gap: 10px;
        margin-top: 14px;
        padding-top: 14px;
    }

    .booking-action-button {
        min-width: 0;
        flex: 1;
        min-height: 40px;
        padding: 8px 12px;
    }
}

@media (max-width: 380px) {
    .booking-details { grid-template-columns: 1fr; }
}

/* ---------- CONFIRM button (green, matches the "accepted" badge) ---------- */
.confirm-button {
    color: var(--white);
    background: var(--green);
    border-color: var(--green);
}

.confirm-button:hover:not(:disabled) {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}

/* ---------- Reviews admin page ---------- */
.review-stars-admin {
    color: var(--amber);
    font-size: 1.1rem;
    letter-spacing: 0.15em;
}

/* Fix & Drive admin refresh — neutral paper with olive actions */
body.admin-bookings-page {
    --black:#10100f;
    --ink:#FCFCFC;
    --white:#FCFCFC;
    --blue:#2D3B15;
    --blue-dark:#2D3B15;
    --muted:#696258;
    --border:rgba(45,59,21,.16);
    --paper:#FCFCFC;
    --page:#f1f2ed;
    --btn-edge:#2D3B15;
    --shadow:0 12px 30px rgba(38,40,33,.055);
    margin:0;
    min-height:100vh;
    background:#f1f2ed;
    color:#262821;
    font-family:"Century Gothic","Gabie Sans Serif",Arial,sans-serif;
    font-size:15px;
}
.admin-bookings-page .admin-header {
    min-height:76px;
    padding:10px clamp(20px,5vw,76px);
    border:0;
    border-bottom:1px solid rgba(45,59,21,.16);
    background:#FCFCFC;
    color:#262821;
}
.admin-bookings-page .admin-brand img { width:52px; height:52px; }
.admin-bookings-page .brand-name { color:#262821; font:700 16px/1.1 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; letter-spacing:.1em; }
.admin-bookings-page .brand-label { color:#2D3B15; font:700 9px/1.2 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; letter-spacing:.17em; }
.admin-bookings-page .admin-header-actions { gap:clamp(12px,2vw,24px); }
.admin-bookings-page .admin-site-link { color:#696258; font:600 11px/1.3 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; letter-spacing:.08em; }
.admin-bookings-page .admin-site-link:hover,.admin-bookings-page .admin-site-link:focus-visible { color:#2D3B15; }
.admin-bookings-page .admin-logout {
    min-height:40px;
    padding:10px 16px;
    border:1px solid #2D3B15;
    border-radius:2px;
    background:#2D3B15;
    color:#fff;
    box-shadow:none;
    font:700 10px/1.2 "Century Gothic","Gabie Sans Serif",Arial,sans-serif;
    letter-spacing:.1em;
}
.admin-bookings-page .admin-logout:hover,.admin-bookings-page .admin-logout:focus-visible { background:#3c4e1d; color:#fff; transform:none; box-shadow:none; }
.admin-bookings-page .admin-logout:active { transform:translateY(1px); }
.admin-bookings-page .admin-main { width:min(1160px,calc(100% - 48px)); padding:42px 0 80px; }
.admin-bookings-page .page-heading {
    padding:clamp(28px,5vw,50px);
    border:0;
    border-left:3px solid #2D3B15;
    border-radius:0;
    background:#FCFCFC;
    color:#262821;
}
.admin-bookings-page .page-heading .eyebrow,.admin-bookings-page .eyebrow { color:#2D3B15; font:700 10px/1.4 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; letter-spacing:.15em; }
.admin-bookings-page .page-heading h1 { color:#262821; font:700 clamp(2.3rem,5vw,3.8rem)/1.05 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; letter-spacing:-.065em; }
.admin-bookings-page .page-description { max-width:580px; color:#696258; font:400 13px/1.7 "Gabie Sans Serif","Century Gothic",Arial,sans-serif; }
.admin-bookings-page .bookings-section { padding-top:42px; }
.admin-bookings-page .section-heading { align-items:center; margin-bottom:20px; }
.admin-bookings-page .section-heading h2 { color:#262821; font:700 clamp(1.6rem,3vw,2.2rem)/1.2 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; letter-spacing:-.05em; }
.admin-bookings-page .section-description { color:#696258; font-size:.82rem; }
.admin-bookings-page .pending-counter { gap:12px; padding:9px 12px; border-radius:2px; border-color:var(--border); background:#FCFCFC; }
.admin-bookings-page .pending-counter span { color:#696258; font:700 9px/1.3 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; letter-spacing:.1em; }
.admin-bookings-page .pending-counter strong { min-width:30px; height:30px; border-radius:2px; color:#fff; background:#2D3B15; font:700 12px "Century Gothic","Gabie Sans Serif",Arial,sans-serif; }
.admin-bookings-page .booking-notification-controls { margin-bottom:15px; }
.admin-bookings-page .enable-sound-button,.admin-bookings-page .booking-action-button {
    min-height:40px;
    padding:10px 16px;
    border:1px solid #2D3B15;
    border-radius:2px;
    box-shadow:none;
    font:700 10px/1.25 "Century Gothic","Gabie Sans Serif",Arial,sans-serif;
    letter-spacing:.08em;
}
.admin-bookings-page .enable-sound-button,.admin-bookings-page .done-button { background:#2D3B15; color:#fff; }
.admin-bookings-page .cancel-button { border-color:rgba(45,59,21,.3); background:#fff; color:#55564f; }
.admin-bookings-page .booking-action-button:hover:not(:disabled),.admin-bookings-page .enable-sound-button:hover:not(:disabled) { transform:translateY(-1px); background:#3c4e1d; border-color:#3c4e1d; color:#fff; box-shadow:none; }
.admin-bookings-page .cancel-button:hover:not(:disabled) { background:#f8eeeb; border-color:var(--red); color:var(--red); }
.admin-bookings-page .enable-sound-button:disabled { background:#e8eee2; border-color:#d6decd; color:#2D3B15; }
.admin-bookings-page .booking-card { padding:clamp(20px,3vw,28px); border:1px solid var(--border); border-left:3px solid #2D3B15; border-radius:2px; background:#FCFCFC; box-shadow:none; }
.admin-bookings-page .booking-header { border-color:var(--border); }
.admin-bookings-page .booking-header h3 { color:#262821; font:700 1.35rem/1.25 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; letter-spacing:-.035em; }
.admin-bookings-page .booking-id { color:#696258; font:400 .77rem/1.5 "Gabie Sans Serif","Century Gothic",Arial,sans-serif; }
.admin-bookings-page .booking-id strong,.admin-bookings-page .booking-detail > strong { color:#2D3B15; font:700 9px/1.4 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; letter-spacing:.13em; }
.admin-bookings-page .booking-details { gap:22px; }
.admin-bookings-page .booking-detail p { color:#55564f; font:400 .8rem/1.65 "Gabie Sans Serif","Century Gothic",Arial,sans-serif; }
.admin-bookings-page .booking-status { border-radius:2px; }
.admin-bookings-page .booking-status.unknown { color:#696258; background:#f1f2ed; }
.admin-bookings-page .no-requests,.admin-bookings-page .empty-state { padding:48px 20px; border:1px dashed rgba(45,59,21,.24); border-radius:2px; background:rgba(252,252,252,.75); }
.admin-bookings-page .empty-icon,.admin-bookings-page .no-requests-icon { width:42px; height:42px; border-radius:2px; color:#fff; background:#2D3B15; }
.admin-bookings-page .empty-state h3,.admin-bookings-page .no-requests h3 { color:#262821; font:700 1.15rem/1.3 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; }
.admin-bookings-page .empty-state p,.admin-bookings-page .no-requests p { color:#696258; font-size:.82rem; }
.admin-bookings-page .message { border-radius:2px; background:#FCFCFC; color:#262821; font-size:.82rem; }

body.admin-login-page {
    --black:#262821;
    --ink:#FCFCFC;
    --white:#FCFCFC;
    --blue:#2D3B15;
    --blue-dark:#2D3B15;
    --muted:#696258;
    --border:rgba(45,59,21,.17);
    margin:0;
    min-height:100vh;
    min-height:100dvh;
    background:#f1f2ed;
    color:#262821;
    font:400 15px/1.6 "Gabie Sans Serif","Century Gothic",Arial,sans-serif;
}
body.admin-login-page::before { display:none; }
.admin-login-container { width:min(420px,calc(100% - 32px)); padding:28px 0; }
.admin-login-card { padding:clamp(24px,6vw,38px); border:1px solid rgba(45,59,21,.15); border-top:3px solid #2D3B15; border-radius:3px; background:#FCFCFC; color:#262821; box-shadow:0 20px 55px rgba(38,40,33,.09); }
.admin-login-top { margin-bottom:26px; padding-bottom:18px; border-color:rgba(45,59,21,.15); }
.admin-back { width:38px; height:38px; border:1px solid rgba(45,59,21,.2); border-radius:2px; color:#2D3B15; }
.admin-back:hover,.admin-back:focus-visible { background:#2D3B15; border-color:#2D3B15; color:#fff; }
.admin-login-brand-name { color:#262821; font:700 15px/1.2 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; letter-spacing:.1em; }
.admin-login-brand-tagline { color:#2D3B15; font:700 8px/1.2 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; letter-spacing:.16em; }
.admin-login-header { margin-bottom:24px; }
.admin-login-header h1 { color:#262821; font:700 clamp(1.8rem,7vw,2.3rem)/1.1 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; letter-spacing:-.06em; }
.admin-login-header p { color:#696258; font-size:.82rem; }
.admin-form-group { margin-bottom:18px; }
.admin-form-group label { color:#2D3B15; font:700 9px/1.4 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; letter-spacing:.13em; }
.admin-form-group input { min-height:48px; padding:11px 13px; border:1px solid rgba(45,59,21,.22); border-radius:2px; background:#fff; color:#262821; font:400 16px/1.4 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; }
.admin-form-group input::placeholder { color:#92938c; }
.admin-form-group input:focus { border-color:#2D3B15; box-shadow:0 0 0 3px rgba(45,59,21,.12); }
.password-toggle { color:#696258; border-radius:2px; }
.password-toggle:hover,.password-toggle:focus-visible { background:#f1f2ed; color:#2D3B15; }
.admin-login-error { border:1px solid #e2c0bb; border-radius:2px; color:#9d3530; background:#fbefed; font-size:.8rem; }
#adminLoginButton { width:100%; min-height:46px; padding:12px 18px; border:1px solid #2D3B15; border-radius:2px; background:#2D3B15; color:#fff; box-shadow:none; font:700 10px/1.2 "Century Gothic","Gabie Sans Serif",Arial,sans-serif; letter-spacing:.12em; }
#adminLoginButton:hover:not(:disabled),#adminLoginButton:focus-visible { transform:translateY(-1px); border-color:#3c4e1d; background:#3c4e1d; color:#fff; box-shadow:none; }
#adminLoginButton:active:not(:disabled) { transform:translateY(1px); box-shadow:none; }
.admin-login-page :focus-visible,.admin-bookings-page :focus-visible { outline:2px solid #2D3B15; outline-offset:3px; }
@media(max-width:640px) {
    .admin-bookings-page .admin-header { min-height:66px; padding:8px 14px; }
    .admin-bookings-page .admin-brand img { width:42px; height:42px; }
    .admin-bookings-page .brand-name { font-size:13px; }
    .admin-bookings-page .brand-label { font-size:8px; }
    .admin-bookings-page .admin-main { width:calc(100% - 28px); padding-top:24px; }
    .admin-bookings-page .page-heading { padding:25px 21px; }
    .admin-bookings-page .section-heading { align-items:flex-start; }
    .admin-bookings-page .booking-header { flex-direction:column; }
    .admin-bookings-page .booking-details { grid-template-columns:1fr; gap:16px; }
    .admin-bookings-page .booking-actions { flex-direction:column; gap:8px; }
    .admin-bookings-page .booking-action-button { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
    .admin-bookings-page *,body.admin-login-page * { transition-duration:.01ms!important; animation-duration:.01ms!important; }
}
.admin-bookings-page .confirm-button { border-color:#2D3B15; background:#2D3B15; color:#fff; }
.admin-bookings-page .confirm-button:hover:not(:disabled) { border-color:#3c4e1d; background:#3c4e1d; color:#fff; }