/* The booking domain's styles: the desks' palettes, the public barber pages,
   the map and the booking grid. Everything is drawn from the tokens in
   main/v3/css/landing.css and barber/css/atelier.css (the customer's look),
   so the dark theme applies here too. */

/* ------------------------------------------------------------ desks ---- */
/* Each desk swaps the palette tokens and nothing else — see "Panel colour"
   in src/core/CLAUDE.md.

   The barber's desk is the owner's "Sartorial Atelier" design
   (docs/muzer-service/ui.md): graphite and brass, and it opens DARK — DeskMixin
   hands the page the desk's own light / dark (`Barber.desk_dark_mode`). Its
   light variant is warm parchment with the same graphite rail and brass, so
   in either mode it never reads as the customer's cool navy and porcelain.
   The salon's is the rose, unchanged.

   A barber's and a salon manager's other pages wear the same palette — the
   public site, the customer's own pages (`.landing-body.role-barber` /
   `.role-salon`, put on <body> by apps/platform/service/role_service.py, the
   owner's call 2026-10-16): one set of tokens, two selectors. */

.panel-shell.theme-barber,
.landing-body.role-barber {
    --brand: #8a6a2b;
    --brand-dark: #6f5420;
    --brand-darker: #4a3812;
    --brand-soft: #f1e8d6;
    --brand-softer: #f8f3e9;
    --brand-rgb: 138, 106, 43;
    --on-brand: #ffffff;
    --gold: #c5a059;
    --gold-rgb: 197, 160, 89;
    --gold-ink: #7a5c1e;
    --gold-soft: #f6eedc;
    --gold-line: #e6d5b0;
    --ink: #1f2124;
    --ink-muted: #665e52;
    --ink-faint: #736b5e; /* 5:1 on parchment */
    --line: #e7dfd0;
    --surface: #fffdf9;
    --surface-2: #f1ebdf;
    --page: #f6f2ea;
    --accent: #c5a059;
    --rail: #17181c;
    --rail-deep: #101114;
    --rail-soft: rgba(233, 193, 118, 0.08);
    --rail-text: rgba(236, 231, 222, 0.7);
    --shadow-1: 0 1px 3px rgba(31, 33, 36, 0.05), 0 4px 12px rgba(31, 33, 36, 0.04);
    --shadow-2: 0 12px 32px -4px rgba(31, 33, 36, 0.12), 0 4px 12px -2px rgba(31, 33, 36, 0.05);
}

[data-bs-theme="dark"] .panel-shell.theme-barber,
[data-bs-theme="dark"] .landing-body.role-barber {
    --brand: #e9c176;
    --brand-dark: #f3d49a;
    --brand-darker: #ffe7b8;
    --brand-soft: #2b2518;
    --brand-softer: #221e16;
    --brand-rgb: 233, 193, 118;
    --on-brand: #1c1406;
    --gold: #e9c176;
    --gold-rgb: 233, 193, 118;
    --gold-ink: #e9c176;
    --gold-soft: #2b2518;
    --gold-line: #4d4026;
    --ink: #e6e3dc;
    --ink-muted: #a39a8b;
    --ink-faint: #938a7c; /* 5:1 on graphite */
    --line: #2f3137;
    --surface: #1b1c20;
    --surface-2: #141518;
    --page: #121316;
    --accent: #e9c176;
    --rail: #0c0d10;
    --rail-deep: #08090b;
    --rail-soft: rgba(233, 193, 118, 0.07);
    --rail-text: rgba(230, 227, 220, 0.64);
    --ok: #74cf9f;
    --ok-soft: #13261c;
    --warn: #f5bc7e;
    --warn-soft: #2d2213;
    --bad: #ffb4ab;
    --bad-soft: #35181a;
    --info: #a9c3e8;
    --info-soft: #172131;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-2: 0 12px 32px -4px rgba(0, 0, 0, 0.55), 0 4px 12px -2px rgba(0, 0, 0, 0.35);
}

.panel-shell.theme-salon,
.landing-body.role-salon {
    --brand: #c2356b;
    --brand-dark: #9d2a56;
    --brand-darker: #6c1b39;
    --brand-soft: #fae3ec;
    --brand-softer: #fdf2f6;
    --brand-rgb: 194, 53, 107;
    --line: #eee6e9;
    --page: #f8f6f7;
    --rail: #34101f;
    --accent: #e0729c;
}

[data-bs-theme="dark"] .panel-shell.theme-salon,
[data-bs-theme="dark"] .landing-body.role-salon {
    --brand: #e0729c;
    --brand-dark: #c8567f;
    --brand-darker: #f3b3cb;
    --brand-soft: #3e1a29;
    --brand-softer: #2f1420;
    --brand-rgb: 224, 114, 156;
    --ink: #f1e9ec;
    --ink-muted: #b8a3ab;
    --line: #3a2630;
    --surface: #1f1419;
    --page: #150d11;
    --rail: #12090d;
    --accent: #eb9ab8;
}

/* The deep surface on those pages (the ink card, the promo band, the wash
   over a photo — atelier.css's `--deep*`): the desk's graphite with a brass
   glow, as its own cards are (desk.css), and the salon's deep rose. */
.landing-body.role-barber {
    --deep: #2a2b31;
    --deep-end: #111215;
    --deep-rgb: 17, 18, 21;
    --deep-night: #26272c;
    --deep-night-end: #0e0f12;
    --deep-text: #ece7de;
    --deep-soft: #cfc7b9;
    --deep-muted: #b9b2a5;
    --deep-eyebrow: #e9c176;
    --deep-label: #f3dcae;
    --deep-glow: rgba(233, 193, 118, 0.14);
}

.landing-body.role-salon {
    --deep: #6c1b39;
    --deep-end: #34101f;
    --deep-rgb: 52, 16, 31;
    --deep-night: #5a1730;
    --deep-night-end: #2a0c18;
    --deep-text: #fdf0f5;
    --deep-soft: #f0c9d8;
    --deep-muted: #e3b3c6;
    --deep-eyebrow: #f3b3cb;
    --deep-label: #fbd5e3;
    --deep-glow: rgba(224, 114, 156, 0.18);
}

.panel-sidebar.is-salon .panel-brand-mark,
.panel-sidebar.is-salon .panel-rail-nav .nav-link.active {
    background-color: var(--accent);
}

/* the barber's rail: brass on graphite, the page you are on marked by an
   edge — the customer's rail does the same in champagne on navy */
.panel-sidebar.is-barber .panel-brand-mark {
    background-color: var(--gold);
    color: #1c1406;
}

.landing-body .panel-sidebar.is-barber .panel-rail-nav .nav-link.active {
    background-color: rgba(var(--gold-rgb), 0.13);
    color: var(--gold);
}

.panel-sidebar.is-barber .rail-mode-chip {
    color: var(--gold);
}

/* the desk's own sections, under the page title */
.desk-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.desk-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.desk-checklist li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--fs-md);
}

.desk-checklist li.is-done {
    color: var(--ink-muted);
}

.desk-checklist li.is-done i {
    color: var(--brand);
}

.desk-checklist li.is-todo i {
    color: var(--gold-ink);
}

/* ------------------------------------------------------- the week ---- */

.week-table {
    display: grid;
    gap: 0.35rem;
}

.week-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px dashed var(--line);
    font-size: var(--fs-md);
}

.week-row:last-child {
    border-bottom: 0;
}

.week-row .week-day {
    font-weight: 600;
    min-width: 5.5rem;
}

.week-row .week-hours {
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.week-row.is-closed .week-hours {
    color: var(--ink-muted);
}

.weekday-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.weekday-picker div {
    display: contents;
}

.weekday-picker label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    font-size: var(--fs-md);
    cursor: pointer;
}

.weekday-picker label:has(input:checked) {
    border-color: var(--brand);
    color: var(--brand);
}

/* ----------------------------------------------------------- maps ---- */
/* The maps are the map module's — the box, the pins, a place's picture are
   map/base_map.css, loaded with each map (map/components/map_css.html,
   static_map.html). The domain's own: a popup's note is the barber's
   rating, drawn as the stars are (`.rating-stars`). */

.leaflet-popup-content .map-popup-note {
    margin-top: 0.25rem;
    color: #e0a526;
    font-size: var(--fs-md);
    letter-spacing: 0.05em;
    opacity: 1;
}

/* ------------------------------------------------------ barber cards ---- */

.barber-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.barber-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.barber-card-cover {
    aspect-ratio: 16 / 9;
    background-color: var(--brand-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.barber-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.barber-card-cover i {
    font-size: 2.5rem;
    color: var(--brand);
}

.barber-card-body {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

.barber-card-title {
    font-size: var(--fs-base);
    font-weight: 700;
    margin: 0;
}

.barber-card-title a {
    color: inherit;
    text-decoration: none;
}

.barber-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.barber-card {
    position: relative;
}

.barber-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    font-size: var(--fs-md);
    color: var(--ink-muted);
}

.barber-card-meta i {
    margin-inline-end: 0.25rem;
}

.rating-stars {
    color: #e0a526;
    font-size: var(--fs-md);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.rating-stars .rating-count {
    color: var(--ink-muted);
    margin-inline-start: 0.3rem;
    letter-spacing: 0;
}

/* ------------------------------------------------------ barber page ---- */

.barber-hero {
    position: relative;
    min-height: 14rem;
    background-color: var(--brand-soft);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.barber-hero-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.barber-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 100%);
}

.barber-hero .container {
    position: relative;
    color: #fff;
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}

.barber-hero h1 {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
}

.barber-hero .rating-stars .rating-count {
    color: rgba(255, 255, 255, 0.8);
}

.service-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px dashed var(--line);
}

.service-row:last-child {
    border-bottom: 0;
}

.service-row-title {
    font-weight: 600;
    margin: 0;
}

.service-row-meta {
    font-size: var(--fs-md);
    color: var(--ink-muted);
}

.service-row-price {
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.6rem;
}

.gallery-grid a,
.gallery-grid .gallery-tile {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--brand-soft);
    position: relative;
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-tile-caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 0.35rem 0.5rem;
    font-size: var(--fs-xs);
    color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.gallery-tile-actions {
    position: absolute;
    top: 0.35rem;
    inset-inline-end: 0.35rem;
    display: flex;
    gap: 0.25rem;
}

.gallery-tile.is-hidden img {
    opacity: 0.45;
}

/* --------------------------------------------------- booking grid ---- */

.day-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    scrollbar-width: thin;
}

.day-chip {
    flex: 0 0 auto;
    min-width: 5.2rem;
    text-align: center;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    color: inherit;
    text-decoration: none;
    font-size: var(--fs-md);
    line-height: 1.35;
}

.day-chip strong {
    display: block;
    font-size: var(--fs-base);
}

.day-chip.is-active {
    border-color: var(--brand);
    background-color: var(--brand-soft);
    color: var(--brand-darker);
}

.day-chip.is-empty {
    opacity: 0.45;
    pointer-events: none;
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
    gap: 0.5rem;
}

.slot-grid input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.slot-grid label {
    display: block;
    text-align: center;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.slot-grid input:checked + label {
    border-color: var(--brand);
    background-color: var(--brand);
    color: #fff;
}

.slot-grid input:focus-visible + label {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ------------------------------------------------------- statuses ---- */

.money-figure {
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    border-inline-start: 2px solid var(--line);
}

.timeline li {
    position: relative;
    padding: 0 0 0.9rem;
    padding-inline-start: 1.1rem;
    font-size: var(--fs-md);
}

.timeline li::before {
    content: "";
    position: absolute;
    inset-inline-start: -7px;
    top: 0.35rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--brand);
    border: 2px solid var(--surface);
}

.v1-map-box {
    width: 100%;
    height: 22rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.service-group-title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--ink-muted);
    margin: 1rem 0 0.25rem;
}

.service-group-title:first-of-type {
    margin-top: 0.25rem;
}

/* ------------------------------------------------ support tickets ---- */

.ticket-thread {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ticket-bubble {
    max-width: 44rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background-color: var(--surface);
}

.ticket-bubble.is-staff {
    align-self: flex-end;
    background-color: var(--brand-soft);
    border-color: transparent;
}

.ticket-bubble-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--fs-md);
    color: var(--ink-muted);
    margin-bottom: 0.35rem;
}

.ticket-bubble p {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.ticket-attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: var(--fs-md);
}

/* -------------------------------------------------- the preference ---- */

.choice-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.5rem;
}

.choice-tiles > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.choice-tiles label {
    margin: 0;
    cursor: pointer;
}

/* ------------------------------------------------- gallery picture ---- */

.gallery-stage {
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--brand-soft);
    text-align: center;
}

.gallery-stage img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.gallery-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

/* ------------------------- admin-panel classes the desks' pages use ---- */
/* The desk and salon pages borrow a few classes from the admin panel's
   stylesheet (`panels_admin_skin.css`), which the user panel never loads —
   so on a desk they had no rules at all (docs/muzer-service/ui.md §5). The same
   rules, drawn from the tokens. */

.panel-shell .receipt-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 3rem;
}

@media (min-width: 768px) {
    .panel-shell .receipt-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.panel-shell .receipt-grid > .receipt-row:last-child {
    border-bottom: 1px dashed var(--line);
}

.panel-shell .dash-label {
    color: var(--ink);
    font-size: var(--fs-md);
    font-weight: 700;
}

.panel-shell .admin-row-title {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.panel-shell a.admin-row-title:hover {
    color: var(--brand);
}

.panel-shell .admin-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px dashed var(--line);
}

.panel-shell .admin-switch-row:last-child {
    border-bottom: 0;
}

.panel-shell .admin-switch-row .form-check-input {
    width: 2.6em;
    height: 1.4em;
    cursor: pointer;
}

@media (min-width: 1200px) {
    .panel-shell .admin-sticky {
        position: sticky;
        top: 1rem;
    }
}