/* =====================================================================
   LIGHTHOUSE: base.css
   Shared styles for every page.

   How this file is laid out:
     1. Page and navbar
     2. Forms, buttons and shared page pieces
     3. Office, schedules and clients
     4. Paydesk, gift cards, reports and cash-up
     5. Pop-ups: PIN, Switch user, lock screen and Lighthouse
        pop-ups (lhConfirm / lhAlert, which replace confirm and alert)
     6. SCREEN SIZES (all media queries live here, at the bottom,
        so they always win over the normal rules above):
          - Tablets and phones (1024px or less)
          - Phones (700px or less)
          - Reduced motion
   ===================================================================== */


/* =====================================================================
   1. PAGE AND NAVBAR
   ===================================================================== */

body {
    margin: 0;
    font-family: "Nunito", sans-serif;
    color: #1f2933;
    background: #faf8ff;
}

.page {
    padding: 24px;
}

/* Softer bold everywhere: semi-bold instead of full bold */
h1, h2, h3, h4, strong, b {
    font-weight: 600;
}

/* Hidden on screen, but still read out by screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ----- Navbar ----- */
.navbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
}

/* LOGO: the lighthouse drawing next to the name */
.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 18px;
    color: #1f2933;
    text-decoration: none;
}

.navbar-logo {
    height: 2rem;
    width: auto;
}

/* NAVBAR MENU (desktop): one row. Diary, Office and search sit in the middle,
   Switch / Log out on the right. On tablets and phones this folds into the burger. */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

/* margin-left: auto shares the spare space, so these float to the middle */
.navbar-links {
    display: flex;
    gap: 20px;
    margin-left: auto;
}

.navbar-links a {
    color: #52606d;
    text-decoration: none;
    font-weight: 500;
}

.navbar-links a:hover {
    color: #1f2933;
}

/* The burger button is hidden on desktop (shown in SCREEN SIZES below) */
.nav-burger {
    display: none;
}

/* Client search in the navbar */
.navbar-search input {
    width: 220px;
    padding: 6px 12px;
    border: 1px solid #c9bdf2;
    border-radius: 999px;
    background: #faf8ff;
    font: inherit;
    font-size: 14px;
}

.navbar-search input:focus-visible {
    outline: 2px solid #a893e6;
    outline-offset: 1px;
    background: #ffffff;
}

/* Logged-in user, Switch and Log out (pushed to the right) */
.navbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    font-size: 14px;
    color: #52606d;
}

.nav-user {
    font-size: 14px;
    color: #555555;
}

.logout-form {
    margin: 0;
}

.logout-form button {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 14px;
    background: #f3efff;
    color: #4b3a8c;
    border: 2px solid #c9bdf2;
    border-radius: 8px;
    cursor: pointer;
}

.logout-form button:hover {
    background: #e6dfff;
    border-color: #9d8ae0;
}

/* Switch user button in the navbar */
.nav-switch {
    padding: 4px 10px;
    border: 1px solid #c9bdf2;
    border-radius: 8px;
    background: #faf8ff;
    color: #4c388c;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.nav-switch:hover {
    border-color: #a893e6;
    background: #f1ecff;
}

/* "Works best on desktop" notice: hidden on desktop,
   shown on tablets and phones (see SCREEN SIZES below) */
.desktop-notice {
    display: none;
}

/* ----- Messages (e.g. "Client saved") shown at the top of every page ----- */
.messages {
    margin: 1rem 0;
}

.message {
    background: #f1edfc;
    border-left: 4px solid #6b52c8;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    margin: 0 0 0.5rem;
}

.message-success {
    background: #eaf7ee;
    border-left-color: #3a9a5b;
}

.message-warning {
    background: #fff6e5;
    border-left-color: #d99a2b;
}

.message-error {
    background: #fdecec;
    border-left-color: #c94a4a;
}


/* =====================================================================
   2. FORMS, BUTTONS AND SHARED PAGE PIECES
   ===================================================================== */

/* ----- Login brand: logo, name and tagline above the log in box ----- */
.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 32px auto 0;
    text-align: center;
}

.login-brand__logo {
    height: 64px;
    width: auto;
}

.login-brand__name {
    margin: 6px 0 0;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #1f2933;
}

.login-brand__tagline {
    margin: 0;
    font-size: 0.95rem;
    color: #6b5fa5;
}

/* The box sits a little closer when the brand is above it */
.login-brand + .login-box {
    margin-top: 24px;
}

/* ----- Form pages (login, booking) ----- */
.login-box,
.form-box {
    max-width: 480px;
    margin: 40px auto;
    padding: 28px 32px;
    background: #ffffff;
    border: 2px solid #dddddd;
    border-radius: 12px;
}

.login-box h1,
.form-box h1 {
    margin-top: 0;
    font-size: 24px;
}

.login-box label,
.form-box label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
}

.login-box input,
.login-box select,
.login-box textarea,
.form-box input,
.form-box select,
.form-box textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 15px;
    padding: 8px 10px;
    border: 2px solid #dddddd;
    border-radius: 8px;
}

.login-box input:focus,
.login-box select:focus,
.login-box textarea:focus,
.form-box input:focus,
.form-box select:focus,
.form-box textarea:focus {
    outline: none;
    border-color: #9d8ae0;
}

.login-box button,
.form-box button {
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 20px;
    background: #6b55c9;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.login-box button:hover,
.form-box button:hover {
    background: #5642ad;
}

.form-box a {
    margin-left: 12px;
    color: #666666;
}

.login-error,
.form-error,
.errorlist {
    color: #b3261e;
    font-size: 14px;
}

.helptext {
    display: block;
    font-size: 12px;
    color: #777777;
    margin-top: 4px;
}

/* ----- Shared page pieces ----- */
.back-link {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: #555;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

.panel {
    background: #fff;
    border: 1px solid #e3e3ea;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    max-width: 640px;
}

.panel h2 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.panel--wide {
    max-width: 900px;
}

/* ----- CENTRED PAGES -----
   Office forms, client pages, Reports and the Paydesk sit in one column in the
   middle of the screen, instead of hugging the left edge on a big screen.
   The column is a panel's full width (640px + padding + border = 690px), so the
   back link, title and panels all line up down its left edge. It's the same
   width as the online booking pages (.page--book), so all of Lighthouse lines up.
   :has() looks at what's on the page, so no template needs changing:
     - a page with a panel anywhere on it (even inside a form) gets the narrow column
     - a page with a wide panel, or the Reports boxes, gets the wide column (900px + 50px)
   The diary and the Office cards have no panels, so they keep the full width.
   New page? Put its content in a .panel (or .panel--wide) and it centres by itself. */
.page:has(.panel) {
    max-width: 690px;
    margin-left: auto;
    margin-right: auto;
}

.page:has(.panel--wide),
.page:has(> .report-boxes) {
    max-width: 950px;
}

/* On Reports, the panels stretch to match the row of boxes above them */
.page:has(> .report-boxes) > .panel {
    max-width: none;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.field label {
    font-weight: 600;
    font-size: 0.95rem;
}

.field input,
.rota-table input[type="time"] {
    padding: 0.45rem 0.6rem;
    border: 1px solid #cfd2dc;
    border-radius: 8px;
    font: inherit;
}

.field-error {
    color: #b00020;
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
}

.btn-primary {
    padding: 0.65rem 1.4rem;
    background: #2f3a5a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:hover {
    background: #3d4a70;
}

/* ----- Buttons (shared across all pages) ----- */
.date-nav-btn {
    padding: 6px 12px;
    border: 1px solid #a893e6;
    border-radius: 8px;
    background: #ffffff;
    color: #4b3a8c;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

.date-nav-btn:hover,
.date-nav-btn:focus-visible {
    background: #f1ecff;
}

/* The button for the page/report on screen */
.date-nav-btn.is-current {
    background: #2f7d4f;
    color: #fff;
    border-color: #2f7d4f;
}

/* ----- Lighthouse forms (shared across all pages) -----
   Add class="lh-form" to any <form> to give it this style */

/* The schedule's therapist dropdown, and every field in a Lighthouse form */
.schedule-controls select,
.lh-form input,
.lh-form select,
.lh-form textarea {
    padding: 8px 12px;
    border: 1px solid #a893e6;
    border-radius: 8px;
    background: #ffffff;
    color: inherit;
    font: inherit;
}

.schedule-controls select:focus-visible,
.lh-form input:focus-visible,
.lh-form select:focus-visible,
.lh-form textarea:focus-visible {
    outline: 2px solid #a893e6;
    outline-offset: 1px;
}

/* Label on top, field underneath, one per line.
   Fields stretch to fill the panel (previously stopped at 360px, which left
   the right half of a centred panel empty) */
.lh-form p {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 14px;
}

/* Tick boxes and radio buttons stay small on the left,
   instead of floating in the middle of the stretched row */
.lh-form input[type="checkbox"],
.lh-form input[type="radio"] {
    align-self: flex-start;
}

.lh-form label {
    font-size: 14px;
    color: #6b5fa5;
}

/* Buttons sit in a row with a little space between */
.lh-form .date-nav-btn {
    margin-right: 6px;
}

/* Error messages in soft red */
.lh-form .errorlist {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    color: #a33a3a;
    font-size: 14px;
}

/* Warnings: "Lighthouse suggests, staff decide" */
.lh-form .form-warning {
    max-width: 360px;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: #fbf0d6;
    border: 1px solid #e0b860;
    border-radius: 8px;
    color: #6b4f12;
    font-size: 14px;
}

.lh-form .form-warning p {
    margin: 0;
}

/* A small line of help above a form, e.g. "New client? + New client" */
.form-hint {
    font-size: 14px;
    color: #555;
}

/* "Use this client" choices inside a warning */
.lh-form .match-choice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* Out-of-hours warning on the booking form */
.out-of-hours-warning {
    background: #ececef;
    border-left: 4px solid #999;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}

/* ----- Clickable lists ----- */
.link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.link-list li + li {
    border-top: 1px solid #f0f0f4;
}

.link-list a {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.25rem;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.link-list a:hover {
    color: #2f3a5a;
    background: #f7f8fb;
}

.link-list__arrow {
    color: #999;
}

.link-list__empty {
    padding: 0.75rem 0.25rem;
    color: #666;
}


/* =====================================================================
   3. OFFICE, SCHEDULES AND CLIENTS
   ===================================================================== */

/* ----- Office cards ----- */
.office-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}

.office-card {
    display: block;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e3e3ea;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.office-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.office-card h2 {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
}

.office-card p {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
}

.office-card--soon {
    opacity: 0.6;
}

.office-card__badge {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    background: #eef0f6;
    border-radius: 999px;
}

/* ----- Rooms & Equipment (#33) ----- */

/* Rooms & Equipment page: a quiet lavender line under each room,
   e.g. "Needed for Massage, Hot Stones" */
.room-services {
    display: block;
    margin-top: 2px;
    font-size: 0.85rem;
    font-weight: 400;
    color: #6b5fa5;
}

/* Services & Prices: the room after the price, on the same line */
.service-room {
    font-weight: 400;
    color: #6b5fa5;
}

/* ----- Consultation Forms (Office): preview of a form -----
   Each question with its (switched-off) answer boxes, and a small
   lavender staff note underneath (type, optional, ⚠️ flags) */
.cf-intro {
    margin: 0 0 1rem;
    color: #555555;
}

.cf-question {
    padding: 14px 0;
    border-bottom: 1px solid #f0edf8;
}

.cf-question:last-child {
    border-bottom: none;
}

.cf-question__text {
    margin: 0 0 8px;
    font-weight: 600;
}

.cf-question__number {
    color: #6b5fa5;
}

.cf-required {
    color: #b3261e;
}

.cf-answer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

/* Text boxes fill the row, like on the tablet */
.cf-answer input[type="text"],
.cf-answer input[type="date"],
.cf-answer textarea {
    flex: 1 1 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #d9d3ec;
    border-radius: 8px;
    background: #faf9fd;
    font: inherit;
}

.cf-answer input[type="date"] {
    flex: 0 0 auto;
}

.cf-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Tick boxes and pick-one options: one per line */
.cf-choice--block {
    flex: 1 1 100%;
}

.cf-note {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: #6b5fa5;
}

/* Managers: ↑ ↓ Change Remove under each question */
.cf-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.cf-add {
    margin: 16px 0 0;
}

/* A tick box with its words beside it (not above), e.g. "Must be answered" */
.lh-form .lh-tick {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    font-size: 1rem;
}

/* Tick boxes and radio buttons in Lighthouse lavender, not the browser's blue
   (the same colour as the client-mode consultation form) */
.lh-form .lh-tick input {
    accent-color: #6b55c9;
}

/* ----- Rota page ----- */
.rota-settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.week-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.week-tab {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: #eef0f6;
    color: inherit;
    text-decoration: none;
    font-size: 0.9rem;
}

.week-tab.is-active {
    background: #2f3a5a;
    color: #fff;
}

.rota-table {
    width: 100%;
    border-collapse: collapse;
}

.rota-table th {
    text-align: left;
    font-size: 0.85rem;
    color: #666;
    padding: 0 0.5rem 0.5rem;
    border-bottom: 1px solid #e3e3ea;
}

.rota-table td {
    padding: 0.5rem;
    border-bottom: 1px solid #f0f0f4;
}

.rota-table .rota-day {
    font-weight: 600;
}

.rota-table tr.is-off td {
    opacity: 0.5;
}

/* ----- Team schedules calendar ----- */

/* Team member dropdown and month navigation */
.schedule-controls,
.schedule-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.schedule-nav h2 {
    margin: 0;
    min-width: 10rem;
    text-align: center;
}

/* The month grid: 7 equal columns */
.schedule-calendar {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.schedule-calendar th {
    padding: 0.5rem;
    font-weight: 600;
    color: #6b5fa5;
}

.schedule-calendar td {
    border: 1px solid #e8e3f7;
    height: 5.5rem;
    padding: 0;
    vertical-align: top;
}

/* The whole square is the link */
.schedule-day {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    padding: 0.4rem;
    color: inherit;
    text-decoration: none;
}

.schedule-day:hover,
.schedule-day:focus-visible {
    background: #f3effd;
}

.day-number {
    font-weight: 600;
}

/* Days from the months either side are faded */
.other-month .schedule-day {
    opacity: 0.45;
}

/* Today gets a lavender outline */
.is-today {
    outline: 2px solid #a893e6;
    outline-offset: -2px;
}

/* Usual rota hours, and non-working days */
.schedule-hours {
    font-size: 0.85rem;
}

.schedule-off {
    font-size: 0.85rem;
    color: #999;
}

/* Badges for changes */
.schedule-badge {
    align-self: flex-start;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.schedule-badge.status-working  { background: #ece6fb; color: #5a4a9c; }
.schedule-badge.status-off      { background: #eeeeee; color: #555; }
.schedule-badge.status-sick     { background: #fde2e2; color: #a33a3a; }
.schedule-badge.status-holiday  { background: #dff3e6; color: #2e7d4f; }
.schedule-badge.status-training { background: #fbf0d6; color: #8a6a1f; }

/* Short labels ("Off") only show on phones (see SCREEN SIZES) */
.label-short {
    display: none;
}

/* ----- Clients ----- */
.client-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
}

.client-search input {
    flex: 1;
    min-width: 200px;
    max-width: 360px;
    padding: 8px 12px;
    border: 1px solid #a893e6;
    border-radius: 8px;
    font: inherit;
}

.client-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 0.75rem 0.25rem;
}

.client-row__name {
    font-weight: 600;
}

.client-row__details {
    color: #666;
    font-size: 14px;
}

/* Booking tables on the client page */
.client-bookings {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.client-bookings th {
    text-align: left;
    font-weight: 600;
    color: #6b5fa5;
    padding: 0 0.5rem 0.5rem;
    border-bottom: 1px solid #e8e3f7;
}

.client-bookings td {
    padding: 0.5rem;
    border-bottom: 1px solid #f0f0f4;
}

.client-bookings a {
    color: #4b3a8c;
}

/* Status badges, matching the diary colours */
.booking-status {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #ece6fb;
    color: #5a4a9c;
}

.booking-status.status-finished  { background: #fbf3df; color: #8a6a1f; }
.booking-status.status-cancelled,
.booking-status.status-no_show   { background: #eeeeee; color: #666; }

/* ----- Follow-ups on the client record log ----- */
.follow-up {
    border-left: 3px solid #d9d0f5;
    margin: 0.75rem 0 0.75rem 1rem;
    padding-left: 1rem;
}

.follow-up-add {
    margin: 0.75rem 0 0 1rem;
}

.follow-up-add summary {
    cursor: pointer;
    color: #6b52c8;
}


/* =====================================================================
   4. PAYDESK, GIFT CARDS, REPORTS AND CASH-UP
   ===================================================================== */

/* ----- Paydesk ----- */
.paid-in-full {
    background: #eaf7ee;
    border-left: 4px solid #3a9a5b;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
}

/* Paydesk till: details on the left, buttons at the right edge */
.till-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #eee8fa;
}

.till-row:last-child {
    border-bottom: none;
}

.till-buttons {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Paydesk: who the bill is for, kept small so the bill is the focus */
.paydesk-who {
    font-size: 1rem;
    margin: 0 0 1rem;
}

/* Client names on the Paydesk link to their client file.
   Lighthouse lavender with no underline (not the browser's default blue),
   underlined on hover so staff can still tell it's a link.
   Covers the bill page, Deposit, Sale (.paydesk-who) and the
   "Find a client" results on the Paydesk till (.till-row h3) */
.paydesk-who a,
.till-row h3 a {
    color: #6b5fa5;
    font-weight: 600;
    text-decoration: none;
}

.paydesk-who a:hover,
.paydesk-who a:focus-visible,
.till-row h3 a:hover,
.till-row h3 a:focus-visible {
    text-decoration: underline;
}

/* The Paydesk bill: each line with its price on the right */
.bill-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #eee;
}

.bill-line--total {
    font-weight: 600;
    border-bottom: none;
    border-top: 2px solid #ddd;
    margin-bottom: 1rem;
}

/* A bill item line: the box on the left, money and Discount on the right */
.bill-line--item {
    border-bottom: none;
    padding: 0.25rem 0;
}

/* Cash change: stands out at the bottom of the bill */
.bill-line--change {
    background: #fff4d6;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-weight: 600;
    color: #7a5200;
}

/* Small "−" button to take one product off */
.bill-line__remove {
    margin-left: 0.5rem;
    border: 1px solid #ccc;
    background: none;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    cursor: pointer;
}

/* Right-hand side of a bill line: money, buttons */
.bill-line__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    text-align: right;
    min-width: 20rem;
}

.bill-line__price {
    color: #333;
}

/* Money already sorted: discounts and deposits */
.bill-line__paid {
    color: #2e7d5b;
    font-size: 0.9rem;
    font-style: italic;
}

/* The amount still to pay: the number that matters */
.bill-line__to-pay {
    color: #4b3a7a;
}

/* The box: just the item and its normal price */
.bill-item-box {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: #f6f3fd;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}

.bill-item-box__end {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* The bill as a table: item box | notes and − + | to pay | Discount */
.bill-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem 7rem 6rem;
    align-items: center;
    gap: 1rem;
}

.bill-grid__middle {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

.bill-grid__amount {
    text-align: right;
}

.inline-form {
    display: inline-flex;
    gap: 0.25rem;
}

/* The Discount button (soft lavender) and its little pop-up box */
.line-discount {
    position: relative;
}

.line-discount summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.2rem 0.7rem;
    border: 1px solid #ece6fb;
    border-radius: 999px;
    background: #ece6fb;
    color: #4b3a7a;
}

.line-discount summary::-webkit-details-marker {
    display: none;
}

.line-discount__box {
    position: absolute;
    right: 0;
    top: 2.2rem;
    z-index: 10;
    width: 16rem;
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    text-align: left;
}

/* + Add product */
.add-product {
    margin-bottom: 1rem;
}

.add-product summary {
    display: inline-block;
    list-style: none;
    margin-bottom: 0.5rem;
}

.add-product__search {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Live product search box on the Paydesk: matches the navbar search */
.add-product__input {
    display: block;
    width: 100%;
    max-width: 24rem;
    margin: 0.5rem 0;
    padding: 0.55rem 1rem;
    font: inherit;
    border: 1px solid #c9bdf0;
    border-radius: 999px;
    background: #fff;
    outline: none;
}

.add-product__input:focus {
    border-color: #8b74d6;
    box-shadow: 0 0 0 3px #ece6fb;
}

/* The results list under the search box */
#product-results .bill-line {
    max-width: 32rem;
}

/* A product's brand, in bold grey before its name (_product_name.html),
   so the brand and the product are easy to tell apart in lists */
.product-brand {
    font-weight: 700;
    color: #6b6880;
}

/* The size as a small lavender tag, e.g. [74g] */
.product-size {
    display: inline-block;
    margin-left: 0.2rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: #ece6fb;
    color: #4b3a8c;
    font-size: 0.8rem;
    font-weight: 600;
    vertical-align: 1px;
}

/* Stock page: the price in dark lavender, and the stock count smaller and grey */
.product-price {
    margin-left: 0.5rem;
    font-weight: 600;
    color: #4b3a8c;
}

.product-stock {
    margin-left: 0.5rem;
    font-size: 0.9rem;
    color: #6b6880;
}

/* Office → Stock → product form: Lighthouse's own Brand dropdown (brand-picker.js) */
.brand-picker {
    position: relative;     /* so the list sits just under the Brand box */
    display: block;
}

/* The form stretches boxes that sit straight inside each field (.lh-form p is a flex column).
   The Brand box is inside .brand-picker instead, so it's stretched here to match the others. */
.brand-picker input {
    width: 100%;
    box-sizing: border-box;
}

.brand-picker__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;            /* above the fields underneath */
    min-width: 14rem;
    max-height: 14rem;      /* long lists scroll */
    overflow-y: auto;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background: #ffffff;
    border: 1px solid #a893e6;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(75, 58, 140, 0.15);
}

.brand-picker__option {
    padding: 0.45rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
}

.brand-picker__option:hover,
.brand-picker__option.is-highlighted {
    background: #ece6fb;    /* Lighthouse lavender, the same as the search box focus */
}

/* Paydesk: + Add product and + Gift card side by side under the bill */
.bill-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* ----- Gift cards (Office) ----- */

/* Search box and buttons in one row */
.gift-search {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.gift-search input {
    flex: 1;
    min-width: 200px;
    padding: 0.5rem 0.7rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font: inherit;
    text-transform: uppercase;
}

/* Table scrolls sideways on small screens */
.gift-table-wrap {
    overflow-x: auto;
}

.gift-table {
    width: 100%;
    border-collapse: collapse;
}

.gift-table th,
.gift-table td {
    text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
}

.gift-table th {
    font-weight: 600;
    color: #666;
    font-size: 0.9rem;
}

/* Status labels */
.gift-status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.gift-status--ok      { background: #e3f4e8; color: #1e6b3a; }
.gift-status--waiting { background: #fff4d6; color: #7a5200; }
.gift-status--expired { background: #fde4e4; color: #9b2c2c; }
.gift-status--used    { background: #eee;    color: #666; }

/* ----- Reports (Office) ----- */

/* Today / This week / This month buttons */
.report-periods {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* From / To date range */
.report-range {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.report-range label {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    color: #666;
    gap: 0.25rem;
}

.report-range input {
    padding: 0.45rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font: inherit;
}

.report-dates {
    margin: 1.5rem 0 0.75rem;
}

/* Headline number boxes */
.report-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.report-box {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
}

.report-box__label {
    font-size: 0.9rem;
    color: #666;
}

.report-box__amount {
    font-size: 1.5rem;
    font-weight: 600;
}

/* "Taken" stands out, in the same green as the diary */
.report-box--main {
    background: #e3f4e8;
    border-color: #b9e2c6;
    color: #1e6b3a;
}

/* Report tables */
.report-table {
    width: 100%;
    border-collapse: collapse;
}

.report-table th,
.report-table td {
    text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid #eee;
}

.report-table th {
    font-weight: 600;
    color: #666;
    font-size: 0.9rem;
}

/* Money column lines up on the right */
.report-table th:last-child,
.report-table td:last-child {
    text-align: right;
}

/* ----- Cash-up ----- */
.report-cashup__amount {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
}

.cashup-input {
    width: 100%;
    max-width: 120px;
    padding: 0.4rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font: inherit;
}

.cashup-diff {
    font-weight: 600;
    white-space: nowrap;
}

/* Counted matches Lighthouse (cash-up, and stock take rows too) */
.stocktake-row.is-match td,
.cashup-row.is-match td {
    background: #e3f4e8;
    color: #1e6b3a;
}

/* Counted is over or short */
.stocktake-row.is-different td,
.cashup-row.is-different td {
    background: #fff4d6;
    color: #7a5200;
}

.stocktake-row.is-match .cashup-input,
.stocktake-row.is-different .cashup-input,
.cashup-row.is-match .cashup-input,
.cashup-row.is-different .cashup-input {
    background: #fff;
}

/* ----- KPIs (Reports → KPIs, and Office → KPIs) ----- */

/* One card per KPI, side by side, wrapping onto more rows on smaller screens */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.kpi-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 12px;
}

/* Hit = green, not hit yet = amber (the same colours as the cash-up) */
.kpi-card.is-hit {
    background: #e3f4e8;
    border-color: #b9e2c6;
}

.kpi-card.is-not-hit {
    background: #fff9ea;
    border-color: #f3e2ae;
}

.kpi-card__label {
    font-weight: 600;
    color: #4b3a8c;
}

.kpi-card__actual {
    font-size: 1.6rem;
    font-weight: 700;
}

.kpi-card__target {
    font-size: 0.9rem;
    color: #6b6880;
}

.kpi-card__status {
    font-weight: 600;
    font-size: 0.9rem;
}

.kpi-card.is-hit .kpi-card__status {
    color: #1e6b3a;
}

.kpi-card.is-not-hit .kpi-card__status {
    color: #7a5200;
}

/* The progress bar: a lavender track, filled up to how close the KPI is to its target */
.kpi-bar {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #ece6fb;
    overflow: hidden;
}

.kpi-bar__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #8b74d6;
}

.kpi-card.is-hit .kpi-bar__fill {
    background: #2e8b57;
}

/* Office → KPIs: lavender tick boxes, a little bigger so they're easy to click */
.kpi-settings input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #8b74d6;
}

/* Office → KPIs: the Retail % suggestion, in a soft lavender note */
.kpi-suggestion {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 8px;
    background: #ece6fb;
    color: #4b3a8c;
    font-size: 0.85rem;
}

/* Office → KPIs: £ or % next to each target box */
.kpi-target {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

/* ----- Stock take (Office → Stock) ----- */

/* The tip and the Print button on one row */
.stocktake-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.stocktake-actions .form-hint {
    margin: 0;
    max-width: 34rem;
}

/* A brand heading row inside the table, e.g. "Dermalogica".
   ".report-table .stocktake-brand th" so it beats the table's "last column on the right" rule */
.report-table .stocktake-brand th {
    padding-top: 1rem;
    color: #4b3a8c;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;
    border-bottom: 2px solid #ece6fb;
}

.stocktake-input {
    max-width: 90px;
}

.stocktake-diff {
    font-weight: 600;
    white-space: nowrap;
}

/* Only on paper (e.g. the "Counted by" line on the count sheet) */
.print-only {
    display: none;
}

/* Previous / date / Next / Today */
.cashup-days {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.cashup-pick {
    display: flex;
    gap: 0.5rem;
}

.cashup-pick input {
    padding: 0.45rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font: inherit;
}

/* Status banners at the top */
.cashup-banner {
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.cashup-banner--done {
    background: #e3f4e8;
    color: #1e6b3a;
}

.cashup-banner--warning {
    background: #fff4d6;
    color: #7a5200;
}

/* Reports → Products → Stock: small labels next to the stock count.
   Same colours as the cash-up banners: amber for Running low, red for Out of stock. */
.stock-flag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.stock-flag--low {
    background: #fff4d6;
    color: #7a5200;
}

.stock-flag--out {
    background: #fde2e2;
    color: #9b1c1c;
}

/* Note box */
.cashup-note {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 1rem 0;
    font-weight: 600;
}

.cashup-note textarea {
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font: inherit;
    font-weight: normal;
}


/* =====================================================================
   5. POP-UPS: PIN, SWITCH USER, LOCK SCREEN AND LIGHTHOUSE POP-UPS
   ===================================================================== */

/* ----- PIN pop-up (every page): small, centred, in Lighthouse lavender ----- */
.pin-popup {
    width: min(320px, calc(100vw - 32px));
    padding: 24px 20px 20px;
    border: none;
    border-top: 6px solid #a893e6;      /* Lighthouse lavender strip across the top */
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(76, 56, 140, 0.25);
    text-align: center;
    font-family: inherit;
}

/* Soft lavender wash behind the pop-up */
.pin-popup::backdrop {
    background: rgba(88, 70, 160, 0.35);
    backdrop-filter: blur(2px);
}

.pin-popup h2 {
    margin: 0 0 6px;
    color: #4c388c;
    font-size: 1.3rem;
}

.pin-popup .helptext {
    margin: 0 0 16px;
}

/* Big, spaced-out dots, with a lavender border like the other Lighthouse boxes */
.pin-popup input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    font-family: inherit;
    font-size: 1.8rem;
    letter-spacing: 0.6em;
    text-align: center;
    border: 2px solid #c9bdf2;
    border-radius: 10px;
    background: #faf8ff;
    color: #2b2340;
}

.pin-popup input[type="password"]:focus {
    outline: none;
    border-color: #a893e6;
    box-shadow: 0 0 0 4px rgba(168, 147, 230, 0.25);
}

/* Wrong PIN: a soft red note with a little shake, so it's noticed */
.pin-popup-error {
    margin: 10px 0 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fdecea;
    color: #b3261e;
    font-size: 0.9rem;
    animation: pin-shake 0.3s;
}

@keyframes pin-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.pin-popup-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

/* "Open" is the main button, so it's filled lavender */
.pin-popup-buttons button[type="submit"] {
    background: #a893e6;
    border-color: #a893e6;
    color: #ffffff;
    font-weight: 700;
}

.pin-popup-buttons button[type="submit"]:hover {
    background: #9580d9;
    border-color: #9580d9;
}

/* ----- Lighthouse pop-ups: lhConfirm() and lhAlert() (lh-dialog.js) -----
   These replace the browser's grey confirm() and alert() boxes.
   Same family as the PIN pop-up: white card, lavender strip on top,
   soft lavender wash behind. A little wider, because messages
   (like booking warnings) can be a few lines long. */
.lh-dialog {
    box-sizing: border-box;              /* padding counts inside the width, so it never spills off a phone screen */
    width: min(380px, calc(100vw - 32px));
    padding: 22px 22px 18px;
    border: none;
    border-top: 6px solid #a893e6;      /* Lighthouse lavender strip across the top */
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(76, 56, 140, 0.25);
    color: #1f2933;
    font-family: inherit;
}

.lh-dialog::backdrop {
    background: rgba(88, 70, 160, 0.35);
    backdrop-filter: blur(2px);
}

.lh-dialog__title {
    margin: 0 0 8px;
    color: #4c388c;
    font-size: 1.2rem;
}

.lh-dialog__message {
    margin: 0;
    line-height: 1.45;
}

/* Warnings from Django, one per line, in a soft amber box
   (amber = "check this", the same meaning as everywhere else in Lighthouse) */
.lh-dialog__list {
    margin: 12px 0 0;
    padding: 10px 12px 10px 30px;
    border-left: 4px solid #e0a800;
    border-radius: 8px;
    background: #fff8e1;
    color: #5c4300;
    font-size: 0.95rem;
    line-height: 1.45;
}

/* When there's a list, the question sits underneath it */
.lh-dialog__list + .lh-dialog__buttons {
    margin-top: 16px;
}

/* Buttons on the right, main button last (where the eye finishes reading) */
.lh-dialog__buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* The main button (Move, Save, OK...) is filled lavender, like "Open" on the PIN pop-up */
.lh-dialog__ok {
    background: #a893e6;
    border-color: #a893e6;
    color: #ffffff;
    font-weight: 700;
}

.lh-dialog__ok:hover {
    background: #9580d9;
    border-color: #9580d9;
}

/* DANGER (e.g. Delete booking): red strip and a red main button,
   so staff can see at a glance this one can't be undone */
.lh-dialog--danger {
    border-top-color: #b3413a;
}

.lh-dialog--danger .lh-dialog__ok {
    background: #b3413a;
    border-color: #b3413a;
}

.lh-dialog--danger .lh-dialog__ok:hover {
    background: #9a342e;
    border-color: #9a342e;
}

/* Keyboard users: a clear ring shows which button Enter will press */
.lh-dialog__buttons button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(168, 147, 230, 0.45);
}

/* ----- Switch user pop-up extras (uses the .pin-popup styles above) ----- */

/* Labels sit above each box, lined up on the left */
.pin-popup .switch-label {
    display: block;
    margin: 12px 0 4px;
    text-align: left;
    font-weight: 600;
    color: #4c388c;
}

/* The username box: same lavender style as the PIN box, normal letter spacing */
.pin-popup input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    font-family: inherit;
    font-size: 1.1rem;
    border: 2px solid #c9bdf2;
    border-radius: 10px;
    background: #faf8ff;
    color: #2b2340;
}

.pin-popup input[type="text"]:focus {
    outline: none;
    border-color: #a893e6;
    box-shadow: 0 0 0 4px rgba(168, 147, 230, 0.25);
}

/* ----- Lock screen (#12): covers everything after 5 minutes of nothing happening ----- */

/* The whole screen, washed in Lighthouse lavender */
.lock-screen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 16px;
    border: none;
    box-sizing: border-box;
    background: linear-gradient(160deg, #a893e6 0%, #7c66c9 100%);
}

/* Only lay it out when it's open (a closed <dialog> must stay hidden) */
.lock-screen[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lock-screen::backdrop {
    background: #7c66c9;
}

/* The white card in the middle, matching the PIN pop-up */
.lock-screen-card {
    width: min(340px, 100%);
    padding: 28px 22px 20px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(40, 25, 90, 0.35);
    text-align: center;
}

/* The lighthouse drawing at the top of the card, centred above the name */
.lock-screen-logo {
    display: block;
    height: 52px;
    width: auto;
    margin: 0 auto 6px;
}

.lock-screen-brand {
    margin: 0 0 4px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #a893e6;
}

.lock-screen-card h2 {
    margin: 0 0 8px;
    color: #4c388c;
}

.lock-screen-card .switch-label {
    display: block;
    margin: 12px 0 4px;
    text-align: left;
    font-weight: 600;
    color: #4c388c;
}

/* Username and PIN boxes: same lavender style as the PIN pop-up */
.lock-screen-card input[type="text"],
.lock-screen-card input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    font-family: inherit;
    border: 2px solid #c9bdf2;
    border-radius: 10px;
    background: #faf8ff;
    color: #2b2340;
}

.lock-screen-card input[type="text"] {
    font-size: 1.1rem;
}

.lock-screen-card input[type="password"] {
    font-size: 1.8rem;
    letter-spacing: 0.6em;
    text-align: center;
}

.lock-screen-card input:focus {
    outline: none;
    border-color: #a893e6;
    box-shadow: 0 0 0 4px rgba(168, 147, 230, 0.25);
}

/* "Log out instead": a quiet link-style button underneath */
.lock-screen-logout {
    margin-top: 14px;
}

.lock-screen-link {
    border: none;
    background: none;
    color: #7c66c9;
    font-family: inherit;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

/* Two-step code page: "Send a new code" and "Log out" as quiet links under the Log in button */
.two-step-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #eeeeee;
}

/* .login-box in front makes this stronger than ".login-box button" (the big purple style) */
.login-box .two-step-link {
    padding: 0;
    background: none;
    color: #6b55c9;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: underline;
}

.login-box .two-step-link:hover {
    background: none;
    color: #5642ad;
}

/* ----- ONLINE BOOKING: the free times on page 2 ----- */
.time-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 16px;
}

/* Buttons in a row (the Cancel booking page) */
.book-date-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* ----- ONLINE BOOKING: the month calendar on page 2 -----
   Replaces the old date box and "Show times" button.
   White = has free times (a link), grey = full, closed or past,
   lavender = the day chosen. 7 equal columns, Monday first. */
.book-cal__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.book-cal__nav h2 {
    margin: 0;
    text-align: center;
}

/* ‹ and › : square, big enough for a thumb */
.book-cal__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
}

/* No ‹ on this month: a blank space keeps the month name in the middle */
.book-cal__arrow--off {
    visibility: hidden;
}

.book-cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.book-cal__head {
    padding-bottom: 4px;
    text-align: center;
    font-size: 0.85rem;
    color: #6b5fa5;
}

.book-cal__day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;                    /* fills its column, tall enough for a thumb */
    border: 1px solid #a893e6;
    border-radius: 8px;
    background: #ffffff;
    color: #4b3a8c;
    font-weight: 600;
    text-decoration: none;
}

a.book-cal__day:hover,
a.book-cal__day:focus-visible {
    background: #f1ecff;
}

/* Full, closed or past: grey, and not a link, so it can't be tapped */
.book-cal__day.is-full {
    border-color: #ececf1;
    background: #f4f4f7;
    color: #a0a0ad;
    font-weight: 400;
}

/* Days from the months either side: just an empty space */
.book-cal__day--blank {
    border: none;
    background: none;
}

/* Today gets a lavender outline from the shared .is-today rule
   (the same as the Team schedules calendar), so clients know where they are */

/* The chosen day: filled Lighthouse lavender */
.book-cal__day.is-chosen {
    border-color: #8b6fc0;
    background: #8b6fc0;
    color: #ffffff;
}

/* Chosen but full (e.g. today is fully booked): lavender outline only */
.book-cal__day.is-full.is-chosen {
    border: 2px solid #8b6fc0;
    background: #f4f4f7;
    color: #6b5fa5;
}

.book-cal__key {
    margin: 12px 0 0;
    font-size: 0.85rem;
    color: #777777;
}

/* ----- ONLINE BOOKING: "Next available" dates, one tidy row each -----
   A <details> drop-down: tap the row to open that day's times, tap again to close */
.book-later {
    border-top: 1px solid #eee8fa;
}

.book-later summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    list-style: none;
    cursor: pointer;
}

.book-later__when {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.book-later__from {
    font-size: 0.9rem;
    color: #6b5fa5;
}

.book-later summary::-webkit-details-marker {
    display: none;
}

/* Looks like a small lavender button (it's part of the row, so the whole row opens it) */
.book-later__btn {
    flex-shrink: 0;
    padding: 4px 12px;
    border: 1px solid #a893e6;
    border-radius: 8px;
    background: #ffffff;
    color: #4b3a8c;
    font-size: 0.9rem;
}

.book-later summary:hover .book-later__btn,
.book-later summary:focus-visible .book-later__btn {
    background: #f1ecff;
}

/* Open: the button changes to "Hide times" */
.book-later[open] .book-later__btn {
    font-size: 0;
}

.book-later[open] .book-later__btn::after {
    content: "Hide times";
    font-size: 0.9rem;
}

/* ----- ONLINE BOOKING: "Made a mistake?" and call/email links ----- */
.book-help {
    margin: 16px 0;
}

/* "Made a mistake?" with the Cancel button beside it (wraps underneath on small phones) */
.book-help__undo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Text links on the booking pages (call / email, next available dates), not buttons */
.book-link {
    color: #4b3a8c;
    font-weight: 600;
    text-decoration-color: #a893e6;
    text-underline-offset: 3px;
}

.book-link:hover,
.book-link:focus-visible {
    color: #2f3a5a;
}

/* ----- ONLINE BOOKING: cancellation and privacy policies (above the Book button) ----- */
.book-policy {
    margin: 8px 0 12px;
    padding: 12px 14px;
    background: #f6f4fc;
    border-left: 3px solid #a893e6;
    border-radius: 8px;
}

/* ".book-policy" in front so it beats the ".panel h2" spacing */
.book-policy .book-policy__title {
    margin: 0 0 6px;
    font-size: 1rem;
    color: #4b3a8c;
}

.book-policy__privacy {
    margin: 0 0 16px;
    font-size: 0.9rem;
    color: #555;
}

/* ----- ONLINE BOOKING: "Powered by Lighthouse" at the bottom of the booking pages ----- */
.book-powered {
    margin: 32px 0 24px;
    text-align: center;
    font-size: 0.85rem;
    color: #888;
}

.book-powered a {
    color: #8B6FC0;
    font-weight: 600;
    text-decoration: none;
}

.book-powered a:hover,
.book-powered a:focus-visible {
    text-decoration: underline;
}

/* ONLINE BOOKING HEADER: the business's name at the top of the public booking pages,
   in place of the staff navbar. Same white bar and line underneath as the navbar,
   so it still feels part of the page */
.book-header {
    display: flex;
    flex-wrap: wrap;               /* on a narrow phone, "Back to website" drops under the name */
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 16px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
}

.book-header-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    text-decoration: none;
}

.book-header-back {
    font-size: 0.9rem;
    font-weight: 600;
    color: #8B6FC0;                /* Lighthouse lavender, same as "Powered by Lighthouse" */
    text-decoration: none;
}

.book-header-name:hover,
.book-header-name:focus-visible,
.book-header-back:hover,
.book-header-back:focus-visible {
    text-decoration: underline;
}

/* The main button on a booking page (Book, Book something else, Keep my booking).
   Filled lavender, so it stands out from the outline .date-nav-btn buttons */
.book-btn {
    display: inline-block;
    padding: 0.55rem 1.4rem;
    border: 1px solid #a893e6;
    border-radius: 8px;
    background: #f1ecff;
    color: #4b3a8c;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.book-btn:hover,
.book-btn:focus-visible {
    background: #e3d9ff;
}

/* ----- ONLINE BOOKING: honeypot (hidden trap for bots, see OnlineBookingForm) ----- */
.book-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ----- ONLINE BOOKING: centre the booking pages on big screens -----
   The booking pages are one narrow column (690px, the same as .service-cards),
   so on a desktop they sit in the middle instead of hugging the left edge.
   The header's padding grows to match, so the business name lines up with
   the left of the column and "Back" with the right. */
.page--book {
    max-width: 690px;
    margin: 0 auto;
}

.book-header {
    padding-left: max(24px, calc((100% - 690px) / 2));
    padding-right: max(24px, calc((100% - 690px) / 2));
}

/* Phones: the page has 16px either side (see .page at 700px), so the header matches */
@media (max-width: 700px) {
    .book-header {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ----- ONLINE BOOKING: services page, one card per service ----- */
.service-cards {
    display: grid;
    gap: 1rem;
    max-width: 690px;   /* a panel's full width (640px + its padding), so every booking page lines up */
}

/* The whole card is one link */
.service-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3e3ea;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;   /* same as .panel */
    color: inherit;
    text-decoration: none;
}

.service-card:hover,
.service-card:focus-visible {
    border-color: #b9bfd6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Top line: name on the left, price on the right */
.service-card__top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 600;
}

.service-card__price {
    white-space: nowrap;
}

.service-card__time {
    margin-top: 0.15rem;
    font-size: 0.9rem;
    color: #666;
}

/* The date and time, once they've picked one */
.service-card__when {
    margin-top: 0.5rem;
    font-weight: 600;
    color: #4b3a8c;
}

.service-card__desc {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #666;
}

/* Date page: the chosen service at the top. Not a link, so no hover effect */
.service-card--summary {
    max-width: 640px;
    margin-bottom: 1.25rem;
}

.service-card--summary:hover {
    border-color: #e3e3ea;
    box-shadow: none;
}

/* Looks like a button, but it's part of the card link */
.service-card__btn {
    align-self: flex-end;
    margin-top: 0.75rem;
    padding: 0.4rem 1.1rem;
    border: 1px solid #a893e6;   /* Lighthouse lavender, like the other buttons */
    border-radius: 8px;
    background: #f1ecff;
    color: #4b3a8c;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Hovering anywhere on the card fills the button a little darker */
.service-card:hover .service-card__btn,
.service-card:focus-visible .service-card__btn {
    background: #e3d9ff;
}

/* =====================================================================
   6. SCREEN SIZES
   All media queries live here, so they always come after (and win over)
   the normal rules above. Bigger screens first, then smaller ones,
   so phone rules can fine-tune the tablet rules.
   ===================================================================== */

/* ---------------------------------------------------------------------
   TABLETS AND PHONES (1024px wide or less)
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {

    /* ----- BURGER: the navbar menu folds away behind the ☰ button.
             nav-menu.js adds .is-open when it's tapped ----- */

    /* The navbar can grow onto a second line when the menu opens */
    .navbar {
        flex-wrap: wrap;
        gap: 12px;
        padding: 10px 16px;
    }

    /* The ☰ button: on the right, big enough to tap easily */
    .nav-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 10px;
        margin-left: auto;
        border: 1px solid #c9bdf2;
        border-radius: 8px;
        background: #faf8ff;
        cursor: pointer;
    }

    .nav-burger-bar {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: #4c388c;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    /* When open, the ☰ turns into an ✕ so staff know how to close it */
    .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(2) {
        opacity: 0;
    }

    .nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* The menu: hidden until the burger opens it, then a full-width list
       on its own line underneath the logo and burger.
       flex: 0 0 100% cancels the desktop "flex: 1", which kept it on the same row */
    .nav-menu {
        display: none;
        flex: 0 0 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-top: 12px;
        border-top: 1px solid #eee8fa;
    }

    .nav-menu.is-open {
        display: flex;
    }

    /* Diary and Office: one per line, with room for a thumb */
    .navbar-links {
        margin-left: 0;
        flex-direction: column;
        gap: 0;
    }

    .navbar-links a {
        padding: 10px 4px;
    }

    /* Search fills the menu's width */
    .navbar-search input {
        width: 100%;
        box-sizing: border-box;
    }

    /* Hi, Switch and Log out in a row underneath */
    .navbar-user {
        margin-left: 0;
        flex-wrap: wrap;
    }

    /* ----- "Works best on desktop" notice ----- */
    .desktop-notice {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px 12px;
        margin-bottom: 16px;
        padding: 10px 14px;
        background: #f3efff;
        border: 1px solid #c9bdf2;
        border-radius: 8px;
        font-size: 14px;
        color: #4b3a8c;
    }

    .desktop-notice p {
        margin: 0;
    }
}

/* ---------------------------------------------------------------------
   PHONES (700px wide or less)
   --------------------------------------------------------------------- */
@media (max-width: 700px) {

    /* A little less space around the page, so there's more room for content */
    .page {
        padding: 16px;
    }

    /* Smaller page headings so long ones (like the diary date) fit better */
    h1 {
        font-size: 1.5rem;
    }

    /* White boxes: a little less padding, so there's more room inside */
    .panel {
        padding: 1rem;
    }

    /* ----- SCHEDULES: the month calendar fits seven days on a phone ----- */

    /* Team member dropdown and Show can wrap if the name is long */
    .schedule-controls {
        flex-wrap: wrap;
    }

    /* Previous, month and Next all fit on one line */
    .schedule-nav {
        justify-content: space-between;
        gap: 6px;
    }

    .schedule-nav h2 {
        min-width: 0;
        font-size: 1.05rem;
    }

    /* The calendar uses the whole width of its box */
    .schedule-panel {
        padding: 0.5rem;
    }

    .schedule-calendar th {
        padding: 4px 0;
        font-size: 0.75rem;
    }

    .schedule-calendar td {
        height: 4rem;
    }

    .schedule-day {
        gap: 2px;
        padding: 3px;
    }

    .day-number {
        font-size: 0.85rem;
    }

    /* Times stack: 10:00 on top, 18:00 underneath, no dash */
    .schedule-hours,
    .schedule-off {
        font-size: 0.65rem;
        line-height: 1.2;
    }

    .time-start,
    .time-end {
        display: block;
    }

    .time-dash {
        display: none;
    }

    /* "Not working" becomes "Off" */
    .label-long {
        display: none;
    }

    .label-short {
        display: inline;
    }

    /* Badges (sick, holiday...) fill the square, with smaller text */
    .schedule-badge {
        align-self: stretch;
        padding: 1px 2px;
        border-radius: 4px;
        font-size: 0.6rem;
        line-height: 1.2;
        text-align: center;
        overflow: hidden;
    }

    /* Paydesk bill: item box on top, the rest underneath */
    .bill-grid {
        grid-template-columns: 1fr auto auto;
    }

    .bill-grid .bill-item-box {
        grid-column: 1 / -1;
    }

    /* ----- BUTTONS: each button stays in one piece, and a row of buttons
             wraps neatly onto new lines with a little space between
             (stops "Change my PIN" breaking in half, and buttons overlapping) ----- */
    .date-nav-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        margin-bottom: 6px;
    }

    /* ----- STACKED TABLES: add class="stack-table" to a <table>, and
             data-label="Date" (etc.) to each <td>. On phones each row
             becomes its own card, with the label on the left ----- */

    /* The column headings aren't needed: each value carries its own label.
       (Hidden like .visually-hidden, so screen readers still read them) */
    .stack-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .stack-table,
    .stack-table tbody {
        display: block;
        width: 100%;
    }

    /* Each row: a soft lavender card */
    .stack-table tr {
        display: block;
        margin-bottom: 10px;
        padding: 8px 12px;
        border: 1px solid #e8e3f7;
        border-radius: 10px;
        background: #fdfcff;
    }

    /* Each value: label on the left, value on the right */
    .stack-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px solid #f3f0fa;
        text-align: right;
    }

    .stack-table td:last-child {
        border-bottom: none;
    }

    /* The label comes from data-label="..." on the <td> */
    .stack-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.85rem;
        color: #6b5fa5;
        text-align: left;
    }

    /* A cell with no label (e.g. a Payments drop-down) uses the whole width */
    .stack-table td:not([data-label]) {
        display: block;
        text-align: left;
    }

    /* A row that's just a drop-down (e.g. ▶ Payments under a visit) joins
       onto the card above it, so they read as one visit */
    .stack-table tr:has(+ tr > td[colspan]) {
        margin-bottom: 0;
        border-bottom: none;
        border-radius: 10px 10px 0 0;
    }

    .stack-table tr:has(> td[colspan]) {
        border-top: 1px dashed #e8e3f7;
        border-radius: 0 0 10px 10px;
    }

    /* Boxes to type in (e.g. cash-up Counted) keep a sensible size */
    .stack-table td input {
        max-width: 140px;
    }

    /* Lighthouse pop-ups: big, full-width buttons that are easy to tap.
       column-reverse puts the main button on top on phones */
    .lh-dialog__buttons {
        flex-direction: column-reverse;
    }

    .lh-dialog__buttons button {
        width: 100%;
        padding: 10px 12px;
        justify-content: center;   /* words in the middle (phone buttons are inline-flex, see BUTTONS above) */
        margin-bottom: 0;          /* the gap already spaces them */
    }
}

/* ---------------------------------------------------------------------
   REDUCED MOTION: respect people who turn animations off
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .pin-popup-error {
        animation: none;
    }

    .nav-burger-bar {
        transition: none;
    }
}

/* =====================================================================
   PRINTING (Reports, Stock Take and past stock takes: the 🖨 Print buttons)
   Only what's useful on paper: no navbar, buttons, tabs or date pickers.
   Mark anything else that shouldn't print with class="no-print".
   ===================================================================== */
@media print {
    .navbar,
    .back-link,
    .messages,
    .desktop-notice,
    .no-print,
    .date-nav-btn {
        display: none !important;
    }

    .print-only {
        display: block;
    }

    body {
        background: #ffffff;
    }

    /* Panels print as plain sections, without shadows or coloured backgrounds */
    .panel {
        box-shadow: none;
        border: none;
        padding: 0;
        margin: 0 0 1rem;
    }

    /* Keep each row together, so a row is never split across two pages */
    tr {
        break-inside: avoid;
    }

    /* Stock take: the New stock level boxes print as empty boxes to write in */
    .stocktake-input {
        border: 1px solid #000000;
        width: 70px;
    }

    /* No up/down arrows in the boxes on paper */
    .stocktake-input::-webkit-inner-spin-button,
    .stocktake-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .stocktake-input {
        -moz-appearance: textfield;
    }

    /* The grey example text in empty boxes doesn't print */
    textarea::placeholder {
        color: transparent;
    }

    /* KPI cards keep their borders on paper, and don't split across pages */
    .kpi-card {
        break-inside: avoid;
    }

    /* No green or amber on paper */
    .stocktake-row td {
        background: none !important;
        color: #000000 !important;
    }
}