/* =====================================================================
   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 and lock screen
     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;
}

.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 */
.lh-form p {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 14px;
    max-width: 360px;
}

.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;
}

/* ----- 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;
}

/* 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;
}

/* 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 */
.cashup-row.is-match td {
    background: #e3f4e8;
    color: #1e6b3a;
}

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

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

/* 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;
}

/* 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 AND LOCK SCREEN
   ===================================================================== */

/* ----- 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;
}

/* ----- 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;
}


/* =====================================================================
   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;
    }
}

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

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