/* ==========================================================================
   Zuri Tours ERP — brand system
   Palette taken from the logo: forest green #063a21 + safari gold #c5964a
   ========================================================================== */

/* ---------- Fonts (self-hosted; variable weights; from Google Fonts, SIL Open Font License) ---------- */

@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/dmsans-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/dmsans-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/outfit-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/outfit-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    /* Brand */
    --green-950: #03231a;
    --green-900: #042c18;
    --green-800: #063a21;
    --green-700: #0b4d2e;
    --green-600: #13653d;
    --green-500: #1f7f4f;
    --green-100: #e3efe6;
    --green-50: #f1f7f2;
    --gold-600: #a77a30;
    --gold-500: #c5964a;
    --gold-300: #e2c48c;
    --gold-100: #f7eedb;

    /* Neutrals (warm, savanna-toned) */
    --canvas: #f6f5f0;
    --surface: #ffffff;
    --surface-2: #faf9f5;
    --ink: #17231c;
    --ink-2: #3c4a42;
    --muted: #6c776f;
    --subtle: #98a199;
    --line: #e8e6de;
    --line-soft: #f0eee8;

    /* Status tones */
    --sky: #3d7aa8;
    --sky-bg: #e8f1f8;
    --rose: #b9444f;
    --rose-bg: #fbecec;
    --sand: #8c6a3c;
    --sand-bg: #f4ece0;

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgb(23 35 28 / 4%);
    --shadow: 0 1px 2px rgb(23 35 28 / 4%), 0 4px 16px rgb(23 35 28 / 4%);
    --shadow-lg: 0 24px 64px rgb(3 35 26 / 22%);
    --ring: 0 0 0 3px rgb(197 150 74 / 35%);

    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
    --sidebar-w: 264px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute always wins over component display rules. */
[hidden] { display: none !important; }
html { min-height: 100%; }
body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font: 400 14px/1.5 var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--green-600); }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); }
code {
    padding: 1px 6px;
    border-radius: 5px;
    background: rgb(6 58 33 / 8%);
    font-size: .9em;
}
:focus-visible { outline: none; box-shadow: var(--ring); }

.icon {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 50;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--green-800);
    color: #fff;
    text-decoration: none;
    transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* ---------- Shell ---------- */

.app-shell { min-height: 100vh; }
.main-shell {
    min-height: 100vh;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
}

/* ---------- Sidebar ---------- */

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    padding: 20px 14px 14px;
    color: #fff;
    background:
        radial-gradient(120% 60% at 0% 0%, rgb(197 150 74 / 12%), transparent 60%),
        linear-gradient(180deg, var(--green-800) 0%, var(--green-900) 100%);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 15%) transparent;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 18px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgb(255 255 255 / 8%);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.brand-emblem { width: 54px; height: 54px; flex: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 600 20px/1.1 var(--font-display);
    letter-spacing: -.3px;
    color: #f7f3e8;
}
.brand-chip {
    padding: 2px 6px 1px;
    border-radius: 5px;
    background: var(--gold-500);
    color: var(--green-900);
    font: 700 10px/1.3 var(--font-display);
    letter-spacing: .6px;
}
.brand small {
    margin-top: 4px;
    color: rgb(226 196 140 / 75%);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.side-nav { display: flex; flex-direction: column; gap: 2px; padding-bottom: 24px; }
.nav-section {
    padding: 20px 12px 8px;
    color: rgb(255 255 255 / 60%);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.nav-link {
    position: relative;
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.nav-link .icon { color: #fff; opacity: .85; transition: opacity .15s; }
.nav-link:hover, .nav-toggle[aria-expanded="true"] { background: rgb(255 255 255 / 6%); color: #fff; }
.nav-link:hover .icon { opacity: 1; }
.nav-toggle.current { background: rgb(255 255 255 / 6%); font-weight: 600; }
.nav-link.active {
    background: linear-gradient(90deg, rgb(197 150 74 / 22%), rgb(197 150 74 / 6%));
    color: #fff;
    font-weight: 600;
}
.nav-link.active::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--gold-500);
}
.nav-link.active .icon { color: var(--gold-300); opacity: 1; }
.nav-chevron { width: 16px; height: 16px; margin-left: auto; transition: transform .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); color: var(--gold-300); }

.nav-submenu {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 6px 21px;
    padding: 2px 0 2px 12px;
    border-left: 1px solid rgb(255 255 255 / 12%);
}
.nav-submenu[hidden] { display: none; }
.nav-submenu a {
    padding: 8px 10px;
    border-radius: 6px;
    color: #fff;
    opacity: .85;
    font-size: 13px;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.nav-submenu a:hover { background: rgb(255 255 255 / 6%); opacity: 1; }
.nav-submenu a.active { background: rgb(197 150 74 / 20%); font-weight: 600; opacity: 1; }

.help-card {
    margin-top: auto;
    padding: 14px;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: var(--radius);
    background: rgb(255 255 255 / 4%);
}
.help-icon {
    width: 30px;
    height: 30px;
    padding: 6px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: rgb(197 150 74 / 20%);
    color: var(--gold-300);
}
.help-card strong { display: block; color: #fff; font-size: 13.5px; }
.help-card p { margin: 4px 0 12px; color: rgb(255 255 255 / 75%); font-size: 12.5px; line-height: 1.5; }
.help-card a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: var(--radius-sm);
    color: #f7f3e8;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s, border-color .15s;
}
.help-card a:hover { background: rgb(255 255 255 / 7%); border-color: rgb(226 196 140 / 40%); }
.help-card a .icon { width: 15px; height: 15px; }

.sidebar-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 14px 6px 0;
    border-top: 1px solid rgb(255 255 255 / 8%);
}
.profile-text { min-width: 0; flex: 1; }
.profile-text strong, .profile-text small { display: block; }
.profile-text strong { color: #fff; font-size: 13.5px; font-weight: 600; }
.profile-text small { color: rgb(255 255 255 / 70%); font-size: 12px; }
.sidebar-profile { gap: 4px; padding: 10px 0 0; }
.profile-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px; border-radius: var(--radius-sm); color: inherit; text-decoration: none; transition: background-color .15s; }
.profile-link:hover, .profile-link.active { background: rgb(255 255 255 / 6%); }
.sidebar-profile .icon-button { color: rgb(223 233 226 / 60%); }
.sidebar-profile .icon-button:hover { background: rgb(240 138 148 / 16%); color: #ffd5d9; }
a.top-avatar { text-decoration: none; }
a.top-avatar:hover { box-shadow: var(--ring); }

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgb(3 35 26 / 45%);
    backdrop-filter: blur(2px);
}

/* ---------- Topbar ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 32px;
    border-bottom: 1px solid var(--line);
    background: rgb(255 255 255 / 85%);
    backdrop-filter: saturate(180%) blur(10px);
}
.breadcrumb { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.breadcrumb .icon { width: 14px; height: 14px; color: var(--subtle); }
.breadcrumb strong { color: var(--ink); font-weight: 600; }

.search-box {
    width: 300px;
    height: 38px;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--subtle);
    cursor: text;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.search-box:focus-within { border-color: var(--gold-500); background: #fff; box-shadow: var(--ring); }
.search-box .icon { width: 17px; height: 17px; }
.search-box input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font-size: 13.5px;
}
.search-box input::placeholder { color: var(--subtle); }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-box kbd {
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #fff;
    color: var(--muted);
    font: 500 11px var(--font-body);
    white-space: nowrap;
}

.icon-button {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    transition: background-color .15s, color .15s;
}
.icon-button:hover { background: var(--line-soft); color: var(--ink); }
.icon-button.outlined { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.icon-button.outlined .icon { width: 16px; height: 16px; }
.notify i {
    position: absolute;
    right: 9px;
    top: 8px;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--gold-500);
}
.mobile-menu { margin-left: -8px; }

/* ---------- Collapsed sidebar (desktop icon rail) ---------- */

@media (min-width: 961px) {
    .sidebar { transition: width .2s ease; }
    .main-shell { transition: margin-left .2s ease; }
    html.sidebar-collapsed { --sidebar-w: 76px; }
    .sidebar-collapsed .sidebar { overflow-x: hidden; }
    .sidebar-collapsed .brand { justify-content: center; padding: 4px 0 18px; }
    .sidebar-collapsed .brand-emblem { width: 40px; height: 40px; }
    .sidebar-collapsed .brand-text,
    .sidebar-collapsed .nav-chevron,
    .sidebar-collapsed .nav-soon,
    .sidebar-collapsed .nav-submenu,
    .sidebar-collapsed .help-card,
    .sidebar-collapsed .profile-text,
    .sidebar-collapsed .sidebar-profile .icon-button { display: none; }
    .sidebar-collapsed .nav-section { height: 1px; margin: 12px 8px; padding: 0; background: rgb(255 255 255 / 10%); font-size: 0; }
    /* Labels are bare text nodes, so font-size: 0 hides them while the icons keep their size. */
    .sidebar-collapsed .nav-link { justify-content: center; gap: 0; padding: 0; font-size: 0; }
    .sidebar-collapsed .sidebar-profile { justify-content: center; margin-top: auto; }
    .sidebar-collapsed .profile-link { flex: none; }
}

/* ---------- Avatars ---------- */

.avatar {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-700);
    font: 600 12.5px var(--font-display);
    letter-spacing: .3px;
}
.avatar-gold { background: linear-gradient(145deg, var(--gold-300), var(--gold-500)); color: var(--green-900); }
.avatar-soft { background: var(--gold-100); color: var(--gold-600); }
.top-avatar { width: 36px; height: 36px; margin-left: 4px; }

/* ---------- Content ---------- */

.main-content {
    width: 100%;
    max-width: 1480px;
    flex: 1;
    margin: 0 auto;
    padding: 32px 32px 40px;
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.eyebrow {
    margin-bottom: 6px;
    color: var(--gold-600);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.page-heading h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.6px; line-height: 1.15; }
.page-heading p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; }
.heading-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Buttons ---------- */

.button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.button:active { transform: translateY(1px); }
.button .icon { width: 17px; height: 17px; }
.button-primary {
    background: var(--green-800);
    color: #fff;
    box-shadow: 0 1px 2px rgb(6 58 33 / 20%), inset 0 1px 0 rgb(255 255 255 / 8%);
}
.button-primary:hover { background: var(--green-700); }
.button-secondary { border-color: var(--line); background: #fff; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.button-secondary:hover { border-color: #d8d5ca; background: var(--surface-2); }
.full-button { width: 100%; }

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--green-600);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.text-link::after { content: "→"; transition: transform .15s; }
.text-link:hover { color: var(--green-800); }
.text-link:hover::after { transform: translateX(2px); }

/* ---------- Notice ---------- */

.notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid #ecdcb9;
    border-radius: var(--radius);
    background: #fcf7ec;
    color: #6b5222;
    font-size: 13.5px;
}
.notice .icon { margin-top: 1px; color: var(--gold-600); }

/* ---------- Tones ---------- */

.tone-green { --tone: var(--green-600); --tone-bg: var(--green-100); }
.tone-gold  { --tone: var(--gold-600);  --tone-bg: var(--gold-100); }
.tone-sky   { --tone: var(--sky);       --tone-bg: var(--sky-bg); }
.tone-rose  { --tone: var(--rose);      --tone-bg: var(--rose-bg); }
.tone-sand  { --tone: var(--sand);      --tone-bg: var(--sand-bg); }

/* ---------- Metric cards ---------- */

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.metric-card, .panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.metric-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "top top" "value spark" "foot foot";
    align-items: end;
    column-gap: 12px;
    padding: 18px 20px;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.metric-card:hover { box-shadow: 0 2px 4px rgb(23 35 28 / 4%), 0 12px 28px rgb(23 35 28 / 7%); transform: translateY(-1px); }
.metric-top { grid-area: top; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.metric-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--tone-bg);
    color: var(--tone);
}
.metric-value {
    grid-area: value;
    display: block;
    margin-top: 8px;
    font: 600 30px/1.15 var(--font-display);
    letter-spacing: -.8px;
    font-variant-numeric: tabular-nums;
}
.metric-foot { grid-area: foot; display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--subtle); font-size: 12.5px; }
.trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 600;
}
.trend .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.trend.up { background: var(--green-100); color: var(--green-600); }
.trend.down { background: var(--rose-bg); color: var(--rose); }
.sparkline {
    grid-area: spark;
    width: 96px;
    margin-bottom: 4px;
    height: 34px;
    overflow: visible;
    color: var(--tone);
}
.sparkline path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sparkline .area { fill: currentColor; stroke: none; opacity: .1; }

/* ---------- Panels ---------- */

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}
.panel { min-width: 0; padding: 20px; }
.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.panel-heading h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }

/* ---------- Calendar ---------- */

.calendar-controls { display: flex; align-items: center; gap: 6px; }
.month-label { min-width: 118px; text-align: center; font: 600 14px var(--font-display); }
.calendar {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
}
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-days {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-soft);
}
.calendar-days span {
    padding: 9px 0;
    text-align: center;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.calendar-cell {
    min-height: 82px;
    min-width: 0;
    padding: 6px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}
.calendar-cell:nth-child(7n) { border-right: 0; }
.calendar-dates .calendar-cell:nth-last-child(-n+7) { border-bottom: 0; }
.calendar-cell.outside { background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(23 35 28 / 2%) 6px 7px); }
.day-number {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.past .day-number { color: var(--subtle); }
.today { background: var(--green-50); }
.today .day-number { background: var(--green-800); color: #fff; font-weight: 600; }
.event {
    display: block;
    margin-top: 4px;
    padding: 3px 7px;
    overflow: hidden;
    border-left: 3px solid var(--ev);
    border-radius: 5px;
    background: var(--ev-bg);
    color: var(--ev-ink);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    cursor: default;
}
.event-safari  { --ev: var(--green-600); --ev-bg: var(--green-100); --ev-ink: var(--green-700); }
.event-trek    { --ev: var(--sky);       --ev-bg: var(--sky-bg);    --ev-ink: #2b5a7e; }
.event-beach   { --ev: #2a9d8f;          --ev-bg: #e2f4f1;          --ev-ink: #1d6f65; }
.event-private { --ev: var(--gold-500);  --ev-bg: var(--gold-100);  --ev-ink: #7d5a20; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 14px; color: var(--muted); font-size: 12.5px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--ev); }

/* ---------- Activity ---------- */

.activity-list, .lead-list { margin: 0; padding: 0; list-style: none; }
.activity-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
}
.activity-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 50px;
    bottom: -2px;
    width: 1px;
    background: var(--line);
}
.activity-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 10px;
    background: var(--tone-bg);
    color: var(--tone);
}
.activity-icon .icon { width: 17px; height: 17px; }
.activity-item > div { min-width: 0; flex: 1; padding-top: 1px; }
.activity-item strong, .lead-item strong { display: block; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.activity-item p, .lead-item p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.activity-item time { padding-top: 2px; color: var(--subtle); font-size: 12px; white-space: nowrap; }

/* ---------- Table ---------- */

.table-wrap { position: relative; margin: 0 -20px; overflow-x: auto; }
.table-wrap.table-flush { margin: -20px; }
.table-flush th { border-top: 0; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th {
    padding: 10px;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
}
th:first-child, td:first-child { padding-left: 20px; }
th:last-child, td:last-child { padding-right: 20px; }
td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-2);
    font-size: 13.5px;
    white-space: nowrap;
    vertical-align: middle;
}
tbody tr { transition: background-color .12s; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td small { display: block; margin-top: 1px; color: var(--subtle); font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.guest { display: flex; align-items: center; gap: 10px; }
.guest strong { color: var(--ink); font-weight: 600; }
.payment { min-width: 120px; }
.progress {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--line-soft);
    overflow: hidden;
}
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--gold-500); }
.progress i.full { background: var(--green-500); }
.payment small { margin-top: 5px; font-variant-numeric: tabular-nums; }

/* ---------- Badges ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--b-bg);
    color: var(--b-ink);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge-success { --b-bg: var(--green-100); --b-ink: var(--green-600); }
.badge-info    { --b-bg: var(--sky-bg);    --b-ink: #2f6690; }
.badge-warning { --b-bg: var(--gold-100);  --b-ink: #8a6424; }
.badge-danger  { --b-bg: var(--rose-bg);   --b-ink: var(--rose); }
.badge-neutral { --b-bg: var(--line-soft); --b-ink: var(--muted); }

/* ---------- Leads ---------- */

.lead-list { margin-bottom: 16px; }
.lead-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-soft);
}
.lead-item:last-child { border-bottom: 0; }
.lead-item > div { min-width: 0; flex: 1; }
.lower-grid .lead-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 24px; }
.lower-grid .lead-item:last-child { border-bottom: 1px solid var(--line-soft); }

.empty-state { display: grid; place-items: center; gap: 12px; padding: 40px 0; color: var(--muted); }
.empty-state .icon { width: 28px; height: 28px; color: var(--gold-500); }
.empty-state p { margin: 0; }

/* ---------- Forms ---------- */

.req { color: var(--rose); font-weight: 600; }
.form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}
.form-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.form-section { padding: 24px; }
.form-section-head { display: flex; gap: 14px; margin-bottom: 4px; }
.form-section-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.form-section-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.step {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: var(--green-800);
    color: #fff;
    font: 600 13px var(--font-display);
}

fieldset.field { border: 0; padding: 0; min-width: 0; }
.field { margin: 20px 0 0; }
.label {
    display: block;
    margin-bottom: 7px;
    padding: 0;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
}
/* Bordered inputs: green at rest, darker on hover, a soft ring while typing. */
:root { --input-border: #5c9e78; --input-border-hover: var(--green-500); --input-ring: rgb(19 101 61 / 14%); }
.input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid var(--input-border);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-size: 14.5px;
    box-shadow: inset 0 1px 2px rgb(27 38 32 / 5%);
    transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--subtle); }
.input:hover:not(:disabled, [readonly]) { border-color: var(--input-border-hover); }
.input:focus, .input:focus:hover { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 4px var(--input-ring), inset 0 1px 2px rgb(27 38 32 / 5%); }
.input[readonly] { border-style: dashed; background-color: var(--surface-2); color: var(--muted); box-shadow: none; }
.input:disabled { border-color: var(--line); background-color: var(--surface-2); box-shadow: none; }
select.input {
    appearance: none;
    padding-right: 40px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236c776f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
}
input[type="date"].input { padding-right: 10px; }
input[type="number"].input { font-variant-numeric: tabular-nums; }
.input-wrap > .input-date { padding-left: 42px; cursor: pointer; }

/* Date picker (flatpickr) in brand colours */
.flatpickr-calendar {
    width: 312px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-body);
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { display: none; }
.flatpickr-calendar.open { margin-top: 6px; }
.flatpickr-months { padding: 4px 0 6px; }
.flatpickr-months .flatpickr-month { height: 40px; color: var(--ink); fill: var(--ink); }
.flatpickr-current-month { padding-top: 8px; font: 600 15px/1 var(--font-display); }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 600; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    top: 8px;
    padding: 8px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    fill: var(--muted);
}
.flatpickr-months .flatpickr-prev-month { left: 8px; }
.flatpickr-months .flatpickr-next-month { right: 8px; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: var(--green-50); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--green-700); }
span.flatpickr-weekday { color: var(--subtle); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-days, .dayContainer { width: 100%; min-width: 0; max-width: none; }
.flatpickr-day {
    max-width: none;
    height: 40px;
    line-height: 38px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}
.flatpickr-day:hover, .flatpickr-day:focus { border-color: transparent; background: var(--green-50); }
.flatpickr-day.today { border-color: var(--gold-500); }
.flatpickr-day.today:hover { border-color: var(--gold-500); background: var(--gold-100); color: var(--ink); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
    border-color: var(--green-700);
    background: var(--green-700);
    color: #fff;
    font-weight: 600;
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--subtle); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: #d3d0c6; background: none; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .icon { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--subtle); pointer-events: none; }
.input-wrap > .icon + .input { padding-left: 42px; }
.input-wrap.has-prefix .prefix {
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    display: grid;
    place-items: center;
    padding: 0 12px;
    border-right: 1px solid var(--line);
    border-radius: 9px 0 0 9px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
}
.input-wrap.has-prefix .input { padding-left: 66px; }
.hint { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; }

/* Validation (ASP.NET unobtrusive validation classes) */
.field-error { display: block; margin-top: 6px; color: var(--rose); font-size: 12.5px; font-weight: 500; }
.field-error:empty, .field-validation-valid { display: none; }
.input.input-validation-error { border-color: var(--rose); background-color: #fffafa; }
.input.input-validation-error:focus { box-shadow: 0 0 0 4px rgb(185 68 79 / 15%); }
.form-alert {
    padding: 12px 14px;
    border: 1px solid #f0c9cc;
    border-radius: var(--radius);
    background: var(--rose-bg);
    color: var(--rose);
    font-size: 13.5px;
}
.form-alert.validation-summary-valid { display: none; }
.form-alert ul { margin: 0; padding-left: 18px; }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field-row-price { grid-template-columns: 140px minmax(0, 1fr); }

/* Tour picker */
.tour-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tour-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dcd9ce;
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.tour-option:hover { border-color: #bdb8a8; }
.tour-option input, .segmented input {
    appearance: none;
    width: 18px;
    height: 18px;
    flex: none;
    margin: 0;
    border: 1.5px solid #bdb8a8;
    border-radius: 50%;
    background: #fff;
    transition: border .15s;
}
.tour-option input:checked, .segmented input:checked { border: 5px solid var(--green-700); }
.tour-option input:focus-visible, .segmented input:focus-visible { box-shadow: var(--ring); }
.tour-option:has(input:checked), .segmented label:has(input:checked) {
    border-color: var(--green-700);
    background: var(--green-50);
    box-shadow: 0 0 0 1px var(--green-700);
}
.tour-body { min-width: 0; flex: 1; }
.tour-body strong { display: block; font-size: 14px; font-weight: 600; }
.tour-body small, .tour-price small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.tour-price { text-align: right; color: var(--ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Guests stepper */
.stepper { display: flex; }
.stepper .input { border-radius: 0; text-align: center; -moz-appearance: textfield; }
.stepper .input::-webkit-inner-spin-button, .stepper .input::-webkit-outer-spin-button { -webkit-appearance: none; }
.stepper-btn {
    width: 44px;
    flex: none;
    border: 1px solid #dcd9ce;
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 18px;
    transition: background-color .15s;
}
.stepper-btn:hover { background: var(--line-soft); }
.stepper-btn:first-child { border-right: 0; border-radius: 10px 0 0 10px; }
.stepper-btn:last-child { border-left: 0; border-radius: 0 10px 10px 0; }

/* Deposit shortcuts */
.deposit-row { display: flex; gap: 10px; flex-wrap: wrap; }
.deposit-row .input-wrap { flex: 1 1 220px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
    height: 44px;
    padding: 0 14px;
    border: 1px solid #dcd9ce;
    border-radius: 10px;
    background: #fff;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    transition: border-color .15s, background-color .15s;
}
.chip:hover { border-color: var(--gold-500); background: var(--gold-100); }

/* Status radio cards */
.segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.segmented label {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dcd9ce;
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.segmented input { margin-top: 1px; }
.segmented strong { display: block; font-size: 14px; }
.segmented small { display: block; margin-top: 1px; color: var(--muted); font-size: 12.5px; }

.form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    padding: 12px 14px 12px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / 92%);
    backdrop-filter: blur(8px);
    box-shadow: 0 -2px 6px rgb(23 35 28 / 3%), 0 8px 24px rgb(23 35 28 / 8%);
}
.form-actions .spacer { flex: 1; }
.button-ghost { background: transparent; color: var(--muted); }
.button-ghost:hover { background: var(--line-soft); color: var(--ink); }

/* Booking summary */
.form-aside { position: sticky; top: 84px; }
.summary-card { padding: 20px; }
.summary-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.summary-head img { width: 40px; height: 40px; }
.summary-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.summary-head p { margin: 1px 0 0; color: var(--muted); font-size: 12.5px; }
.summary-list { margin: 0; padding: 14px 0; }
.summary-list div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; }
.summary-list dt { color: var(--muted); }
.summary-list dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.summary-money { border-top: 1px dashed var(--line); }
.summary-list .summary-balance { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.summary-balance dt { color: var(--ink); font-weight: 600; }
.summary-balance dd { color: var(--green-700); font: 600 18px var(--font-display); }

/* ---------- Toast ---------- */

.toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 32px);
    padding: 10px 8px 10px 16px;
    border-radius: var(--radius);
    background: var(--green-800);
    color: #fff;
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    animation: toast-in .25s ease-out;
}
.toast > .icon { color: var(--gold-300); }
.toast .icon-button { width: 32px; height: 32px; color: rgb(255 255 255 / 75%); }
.toast .icon-button:hover { background: rgb(255 255 255 / 10%); color: #fff; }
.toast.hiding { animation: toast-out .2s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(12px); } }

/* ---------- List toolbar & filters ---------- */

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: -4px 0 16px;
}
.filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 12px; background: var(--line-soft); }
.filter-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.filter-tabs a:hover { color: var(--ink); }
.filter-tabs a.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.filter-tabs .count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgb(23 35 28 / 7%);
    font-size: 11.5px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.filter-tabs a.active .count { background: var(--green-100); color: var(--green-700); }
.toolbar-search { flex: 0 1 300px; }
.toolbar-search .input { height: 40px; }
td small a { color: inherit; text-decoration: none; }
td small a:hover { color: var(--green-600); text-decoration: underline; }

/* ---------- Pill radios (lead source) ---------- */

.pill-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-options label { position: relative; cursor: pointer; }
.pill-options input { position: absolute; opacity: 0; pointer-events: none; }
.pill-options span {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    border: 1px solid #dcd9ce;
    border-radius: 999px;
    background: #fff;
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 500;
    transition: border-color .15s, background-color .15s, color .15s;
}
.pill-options label:hover span { border-color: #bdb8a8; }
.pill-options input:checked + span { border-color: var(--green-700); background: var(--green-800); color: #fff; }
.pill-options input:focus-visible + span { box-shadow: var(--ring); }
.segmented-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Toggle switch ---------- */

.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
    position: relative;
    width: 42px;
    height: 24px;
    flex: none;
    border-radius: 999px;
    background: #cfccc1;
    transition: background-color .15s;
}
.switch-track::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
    transition: transform .15s;
}
.switch input:checked + .switch-track { background: var(--green-700); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { box-shadow: var(--ring); }
.switch strong { display: block; font-size: 14px; }
.switch small { display: block; margin-top: 1px; color: var(--muted); font-size: 12.5px; }
.switch-list { display: grid; }
.switch-list .switch { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.switch-list .switch:first-child { padding-top: 0; }
.switch-list .switch:last-child { padding-bottom: 0; border-bottom: 0; }

/* ---------- Tips list ---------- */

.tips { margin: 0; padding: 14px 0 0; list-style: none; display: grid; gap: 12px; }
.tips li { display: flex; gap: 10px; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.tips .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--green-600); }

/* ---------- Tour cards ---------- */

.tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tour-card { display: flex; flex-direction: column; padding: 20px; }
.tour-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tour-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--green-100), var(--gold-100));
    color: var(--green-700);
}
.tour-card h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.tour-dest { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.tour-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0;
    padding: 12px 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}
.tour-facts dt { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.tour-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tour-card .button, .tour-card > .hint { margin-top: auto; }
.tour-card.inactive { background: var(--surface-2); }
.tour-card.inactive h2, .tour-card.inactive .tour-icon { opacity: .6; }

/* ---------- Itinerary dashboard ---------- */

.itinerary-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.itinerary-metrics .metric-card { min-height: 142px; }
.itinerary-metrics .metric-value { font-variant-numeric: tabular-nums; }
.itinerary-heading .eyebrow span { padding: 0 5px; color: var(--subtle); }
.itinerary-preview { margin-bottom: 18px; }
.itinerary-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 20px;
    margin-bottom: 20px;
}
.itinerary-overview-grid > .panel { min-height: 250px; }
.period-label, .chart-key { color: var(--muted); font-size: 12px; }
.heading-icon { color: var(--gold-600); }
.status-chart-layout { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 70px); min-height: 176px; }
.status-donut {
    width: 168px;
    height: 168px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--status-gradient);
    position: relative;
}
.status-donut::before { content: ""; position: absolute; inset: 23px; border-radius: 50%; background: var(--surface); }
.status-donut > div { z-index: 1; display: grid; justify-items: center; }
.status-donut strong { font: 600 30px/1.1 var(--font-display); color: var(--ink); }
.status-donut span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.status-legend { width: min(100%, 235px); margin: 0; padding: 0; list-style: none; }
.status-legend li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.status-legend li:last-child { border-bottom: 0; }
.legend-name { display: flex; align-items: center; gap: 9px; color: var(--ink-2); }
.status-legend strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.status-legend small { color: var(--muted); font-weight: 400; }
.status-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--status-color); }
.status-dot.tone-gold { --status-color: var(--gold-500); }
.status-dot.tone-green { --status-color: var(--green-600); }
.status-dot.tone-sky { --status-color: var(--sky); }
.status-dot.tone-sand { --status-color: var(--sand); }
.status-donut { --status-gold: var(--gold-500); --status-green: var(--green-600); --status-sky: var(--sky); --status-sand: #d7c29c; }
.upcoming-list { display: grid; }
.upcoming-item { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.upcoming-item:last-child { border-bottom: 0; }
.upcoming-date { width: 42px; height: 46px; flex: none; display: grid; align-content: center; justify-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.upcoming-date strong { font: 600 17px/1.1 var(--font-display); color: var(--green-800); }
.upcoming-date small { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.upcoming-info { min-width: 0; flex: 1; }
.upcoming-info strong, .upcoming-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upcoming-info strong { color: var(--ink); font-size: 13px; font-weight: 600; }
.upcoming-info span { margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.upcoming-item .badge { font-size: 10.5px; }
.destinations-panel { align-self: stretch; }
.destination-list { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.destination-row { display: flex; justify-content: space-between; margin-bottom: 5px; color: var(--ink-2); font-size: 12.5px; }
.destination-row strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.destination-track { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--line-soft); }
.destination-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-700), var(--gold-500)); }
.itinerary-activity-panel { min-height: 0 !important; }
.itinerary-activity-list { display: grid; }
.itinerary-activity-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.itinerary-activity-item:last-child { border-bottom: 0; }
.activity-mark { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--tone-bg); color: var(--tone); }
.activity-mark.tone-green { --tone: var(--green-600); --tone-bg: var(--green-100); }
.activity-mark.tone-sky { --tone: var(--sky); --tone-bg: var(--sky-bg); }
.activity-mark.tone-sand { --tone: var(--sand); --tone-bg: var(--sand-bg); }
.activity-mark .icon { width: 16px; height: 16px; }
.itinerary-activity-item > div { min-width: 0; flex: 1; }
.itinerary-activity-item strong, .itinerary-activity-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itinerary-activity-item strong { color: var(--ink); font-size: 12.5px; font-weight: 600; }
.itinerary-activity-item span { margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.itinerary-activity-item time { color: var(--subtle); font-size: 11px; white-space: nowrap; }
.monthly-panel { margin-bottom: 20px; }
.chart-key { display: inline-flex; align-items: center; gap: 7px; }
.chart-key i { width: 9px; height: 9px; border-radius: 3px; background: var(--green-600); }
.monthly-chart { height: 190px; display: flex; gap: 12px; padding: 8px 8px 0 0; }
.chart-y-axis { width: 28px; display: flex; flex-direction: column; justify-content: space-between; padding: 0 0 27px; color: var(--subtle); font-size: 10px; text-align: right; }
.monthly-plot { position: relative; flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
.chart-gridline { position: absolute; left: 0; right: 0; height: 1px; border-top: 1px dashed var(--line); pointer-events: none; }
.chart-gridline:nth-child(1) { top: 0; }
.chart-gridline:nth-child(2) { top: 50%; }
.chart-gridline:nth-child(3) { bottom: 27px; }
.month-column { z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 4px; }
.month-value { min-height: 17px; color: var(--green-700); font-size: 10px; font-weight: 600; }
.month-column > i { width: min(30px, 70%); min-height: 2px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--green-500), var(--green-800)); transition: height .2s; }
.month-label { width: 100%; padding: 7px 0 4px; color: var(--muted); font-size: 10px; text-align: center; }
.chart-empty { display: grid; min-height: 130px; place-items: center; padding: 20px; color: var(--muted); font-size: 13px; text-align: center; }

/* ---------- Finance ---------- */

.metric-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-progress { gap: 10px; }
.metric-progress .progress { width: 110px; }
.notice-warning { border-color: #ecdcb9; }

/* ---------- Module landing ---------- */

.module-page { display: flex; flex-direction: column; align-items: flex-start; max-width: 640px; padding: 32px; }
.module-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 16px;
    background: linear-gradient(145deg, var(--green-700), var(--green-900));
    color: var(--gold-300);
}
.module-icon .icon { width: 26px; height: 26px; }
.module-page h2 { margin: 12px 0 4px; font-size: 20px; font-weight: 600; }
.module-page > p { margin: 0; color: var(--muted); }
.module-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

/* ---------- Nav extras ---------- */

.nav-soon {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgb(255 255 255 / 10%);
    color: rgb(255 255 255 / 70%);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.metric-card .metric-foot.text-link { justify-self: start; margin-top: 10px; }

/* ---------- Lead detail ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--subtle); }
.optional { color: var(--subtle); font-weight: 400; }
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.back-link .icon { width: 15px; height: 15px; }
.back-link:hover { color: var(--ink); }
.lead-title { display: flex; align-items: center; gap: 16px; }
.lead-title h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lead-title h1 .badge { font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0; }
.lead-title p { margin-top: 4px; }
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.page-heading p a { color: var(--green-600); font-weight: 600; }

.row-link { color: inherit; text-decoration: none; }
.row-link:hover strong { color: var(--green-600); text-decoration: underline; text-underline-offset: 3px; }
.row-actions { width: 1%; text-align: right; }
.row-actions .icon-button { width: 34px; height: 34px; }

.button-danger { background: var(--rose); color: #fff; }
.button-danger:hover { background: #9e3540; }
.button-danger-text { color: var(--rose); }
.button-danger-text:hover { background: var(--rose-bg); color: var(--rose); }

/* Progress pipeline */
.progress-panel { margin-bottom: 20px; }
.pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.stage { position: relative; display: flex; align-items: center; gap: 12px; padding-right: 16px; }
.stage:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 52px;
    right: 12px;
    top: 50%;
    height: 2px;
    border-radius: 2px;
    background: var(--line);
    z-index: 0;
}
.stage-text { position: relative; z-index: 1; padding-right: 10px; background: var(--surface); }
.stage-done:not(:last-child)::after { background: var(--green-500); }
.stage-dot {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: none;
    border: 2px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--muted);
    font: 600 14px var(--font-display);
}
.stage-dot .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.stage-text strong { display: block; font-size: 14px; }
.stage-text small { display: block; color: var(--muted); font-size: 12px; }
.stage-done .stage-dot { border-color: var(--green-600); background: var(--green-600); color: #fff; }
.stage-current .stage-dot { border-color: var(--gold-500); background: var(--gold-100); color: var(--gold-600); box-shadow: 0 0 0 5px rgb(197 150 74 / 15%); }
.stage-current strong { color: var(--gold-600); }
.stage-lost .stage-dot { border-color: var(--rose); background: var(--rose); color: #fff; }
.stage-lost strong { color: var(--rose); }
.stage-skipped .stage-dot { border-style: dashed; color: var(--subtle); }
.stage-skipped strong { color: var(--subtle); }
.stage-done:last-child .stage-dot { box-shadow: 0 0 0 5px rgb(31 127 79 / 15%); }

.lead-grid { align-items: start; }
.lead-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.lead-aside { position: sticky; top: 84px; }

/* Status picker */
.field-flush { margin-top: 0; }
.status-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.status-option { position: relative; cursor: pointer; }
.status-option input { position: absolute; opacity: 0; pointer-events: none; }
.status-option > span {
    display: block;
    height: 100%;
    padding: 12px;
    border: 1px solid #dcd9ce;
    border-top: 3px solid var(--st);
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.status-option:hover > span { border-color: #bdb8a8; border-top-color: var(--st); }
.status-option strong { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 14px; }
.status-option em {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--line-soft);
    color: var(--muted);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
}
.status-option small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.status-option input:checked + span { border-color: var(--st); background: var(--st-bg); box-shadow: 0 0 0 1px var(--st); }
.status-option input:focus-visible + span { box-shadow: var(--ring); }
.status-new       { --st: #2f6690;          --st-bg: var(--sky-bg); }
.status-contacted { --st: var(--muted);     --st-bg: var(--line-soft); }
.status-quoted    { --st: var(--gold-500);  --st-bg: var(--gold-100); }
.status-won       { --st: var(--green-600); --st-bg: var(--green-50); }
.status-lost      { --st: var(--rose);      --st-bg: var(--rose-bg); }
.textarea { height: auto; min-height: 84px; padding: 10px 14px; line-height: 1.5; resize: vertical; }
.status-actions { display: flex; justify-content: flex-end; margin-top: 16px; }

/* Timeline */
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline-item { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: var(--line-soft);
}
.timeline-dot { width: 14px; height: 14px; flex: none; margin-top: 3px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.dot-new { background: #2f6690; }
.dot-contacted { background: var(--muted); }
.dot-quoted { background: var(--gold-500); }
.dot-won { background: var(--green-600); }
.dot-lost { background: var(--rose); }
.timeline-body { min-width: 0; flex: 1; }
.timeline-head { display: flex; justify-content: space-between; gap: 12px; }
.timeline-head strong { font-size: 14px; }
.timeline-head time { color: var(--subtle); font-size: 12px; white-space: nowrap; }
.timeline-body p {
    margin: 6px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 13.5px;
}

/* Contact card */
.contact-list { margin: 0; padding: 0; list-style: none; }
.contact-list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list .icon { margin-top: 10px; color: var(--subtle); }
.contact-list small { display: block; color: var(--muted); font-size: 12px; }
.contact-list a { color: var(--green-600); text-decoration: none; word-break: break-all; }
.contact-list a:hover { text-decoration: underline; }
.contact-actions { display: flex; gap: 8px; margin-top: 16px; }
.contact-actions .button { flex: 1; }

/* Delete confirmation */
.danger-panel { max-width: 560px; padding: 28px; }
.danger-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 14px;
    background: var(--rose-bg);
    color: var(--rose);
}
.danger-panel h2 { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.danger-panel > p { margin: 0; color: var(--ink-2); }
.danger-panel .summary-list { margin: 16px 0; padding: 12px 16px; border-radius: var(--radius); background: var(--surface-2); }

/* ---------- Lead hero ---------- */

.avatar-xl { width: 72px; height: 72px; font-size: 24px; box-shadow: 0 0 0 4px rgb(255 255 255 / 12%); }
.avatar-sm { width: 26px; height: 26px; font-size: 10.5px; }
.avatar-empty { background: var(--line-soft); color: var(--subtle); }
.person { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.hint-error { color: var(--rose); }
.aside-note { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 4px 0; }

.lead-hero {
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.hero-band {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 28px 28px 26px;
    overflow: hidden;
    color: #f7f3e8;
    background:
        radial-gradient(90% 140% at 100% 0%, rgb(197 150 74 / 22%), transparent 55%),
        linear-gradient(135deg, var(--green-700) 0%, var(--green-800) 45%, var(--green-900) 100%);
}
.hero-watermark {
    position: absolute;
    right: -30px;
    bottom: -70px;
    width: 260px;
    height: 260px;
    opacity: .07;
    pointer-events: none;
}
.hero-identity { position: relative; display: flex; align-items: center; gap: 18px; min-width: 0; }
.hero-eyebrow { color: var(--gold-300); font-size: 11.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
.hero-band h1 { margin: 2px 0 8px; color: #fff; font-size: 32px; font-weight: 600; letter-spacing: -.6px; line-height: 1.1; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: rgb(247 243 232 / 78%); font-size: 13.5px; }
.hero-meta li { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta .icon { width: 15px; height: 15px; color: var(--gold-300); }
.hero-side { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex: none; }
.hero-actions { display: flex; align-items: center; gap: 8px; }

.hero-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    background: rgb(255 255 255 / 12%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}
.hero-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #fff); box-shadow: 0 0 0 3px rgb(255 255 255 / 15%); }
.status-pill-new { --dot: #7fb6e0; }
.status-pill-contacted { --dot: #cfd6d1; }
.status-pill-quoted { --dot: var(--gold-300); }
.status-pill-won { --dot: #62d394; }
.status-pill-lost { --dot: #f08a94; }

.button-on-dark { border-color: rgb(255 255 255 / 22%); background: rgb(255 255 255 / 10%); color: #fff; }
.button-on-dark:hover { background: rgb(255 255 255 / 18%); }
.icon-on-dark { color: rgb(255 255 255 / 70%); border: 1px solid rgb(255 255 255 / 18%); }
.icon-on-dark:hover { background: rgb(240 138 148 / 18%); color: #ffd5d9; }
.button-gold { background: var(--gold-500); color: var(--green-900); }
.button-gold:hover { background: var(--gold-300); }

.hero-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--line-soft); }
.fact { min-width: 0; padding: 20px 24px; }
.fact + .fact { border-left: 1px solid var(--line-soft); }
.fact dt { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.fact dt .icon { width: 15px; height: 15px; color: var(--gold-600); }
.fact dd { margin: 8px 0 2px; color: var(--ink); font: 600 18px/1.25 var(--font-display); letter-spacing: -.2px; }
.fact small { color: var(--muted); font-size: 12.5px; }
.fact small a { color: var(--green-600); font-weight: 600; }
.fact-accent { color: var(--green-600); font-weight: 600; }
.fact-warning { color: var(--gold-600) !important; }
.fact-person { display: flex; align-items: center; gap: 8px; }
.fact-person .avatar { width: 28px; height: 28px; font-size: 11px; }

.hero-progress { padding: 20px 28px 24px; }
.hero-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.hero-progress-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.hero-progress-head span { color: var(--muted); font-size: 13px; }

/* Trip brief */
.brief { display: grid; gap: 18px; }
.brief-row h3 { margin: 0 0 8px; color: var(--muted); font: 600 11.5px var(--font-body); letter-spacing: .6px; text-transform: uppercase; }
.brief-row p { margin: 0; }
.brief-note { padding: 10px 14px; border-left: 3px solid var(--gold-500); border-radius: 0 8px 8px 0; background: var(--gold-100); color: var(--ink-2); font-size: 13.5px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d6e5da;
    border-radius: 999px;
    background: var(--green-50);
    color: var(--green-700);
    font-size: 13px;
    font-weight: 500;
}
.tag .icon { width: 14px; height: 14px; }
.tag-gold { border-color: #ecdcb9; background: #fcf7ec; color: #7d5a20; }

/* Consultant picker */
.consultant-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.consultant-option { position: relative; cursor: pointer; }
.consultant-option input { position: absolute; opacity: 0; pointer-events: none; }
.consultant-option > span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #dcd9ce;
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.consultant-option strong { font-size: 13.5px; font-weight: 600; }
.consultant-option:hover > span { border-color: #bdb8a8; }
.consultant-option input:checked + span { border-color: var(--green-700); background: var(--green-50); box-shadow: 0 0 0 1px var(--green-700); }
.consultant-option input:focus-visible + span { box-shadow: var(--ring); }
.enquiry-card .summary-list dd { max-width: 190px; }

/* ---------- Leads list ---------- */

.st-new       { --st: #3d7aa8; }
.st-contacted { --st: #8a948d; }
.st-quoted    { --st: var(--gold-500); }
.st-won       { --st: var(--green-600); }
.st-lost      { --st: var(--rose); }

/* Summary strip */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.stat { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 22px; color: inherit; text-decoration: none; }
.stat + .stat { border-left: 1px solid var(--line-soft); }
.stat-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border-radius: 12px; background: var(--tone-bg); color: var(--tone); }
.stat strong { display: block; font: 600 26px/1.1 var(--font-display); letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.stat span:not(.stat-icon) { display: block; margin-top: 2px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.stat small { display: block; color: var(--muted); font-size: 12px; }
.stat-link { transition: background-color .15s; }
.stat-link:hover { background: var(--surface-2); }
.stat-alert strong { color: var(--rose); }
.stat-alert small { color: var(--rose); font-weight: 600; }

/* Stage tabs + funnel */
.leads-panel-main { padding: 0; overflow: hidden; }
.pipeline-filter { padding: 16px 20px 0; }
.stage-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.stage-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 12px;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.stage-tab:hover { color: var(--ink); }
.stage-tab.active { border-bottom-color: var(--st, var(--green-800)); color: var(--ink); }
.stage-name { display: inline-flex; align-items: center; gap: 7px; }
.stage-name i { width: 8px; height: 8px; border-radius: 50%; background: var(--st); }
.stage-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--line-soft);
    color: var(--muted);
    font-size: 11.5px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.stage-tab.active .stage-count { background: var(--st, var(--green-800)); color: #fff; }
.funnel-bar { display: flex; gap: 2px; height: 6px; margin: 0 -20px; background: var(--line-soft); }
.funnel-bar span { min-width: 4px; background: var(--st); transition: flex-grow .3s; }

/* Toolbar */
.list-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.list-toolbar .input { height: 40px; font-size: 13.5px; }
.toolbar-grow { flex: 1 1 260px; }
.toolbar-select { flex: 0 1 200px; }
.view-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.view-toggle a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 7px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.view-toggle a .icon { width: 16px; height: 16px; }
.view-toggle a:hover { color: var(--ink); }
.view-toggle a.active { background: var(--green-800); color: #fff; }

.active-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px 0; color: var(--muted); font-size: 13px; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    background: var(--green-100);
    color: var(--green-700);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}
.filter-chip .icon { width: 14px; height: 14px; }
.filter-chip:hover { background: #d3e6d9; }
.clear-link::after { content: none; }

/* Table */
.lead-table th:first-child, .lead-table td:first-child { padding-left: 20px; }
.lead-table th { border-top: 0; }
.leads-panel-main .table-wrap { margin: 0; }
.leads-panel-main .active-filters + .table-wrap, .leads-panel-main .active-filters + .board { margin-top: 12px; }
.lead-table td { padding-top: 14px; padding-bottom: 14px; }
tr[data-href] { cursor: pointer; }
.lead-table tbody tr:hover .row-link strong { color: var(--green-600); }
.avatar-ring { position: relative; background: var(--gold-100); color: var(--gold-600); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--st); }
.countdown { color: var(--green-600); font-weight: 600; }
.money { color: var(--ink); font-weight: 600; }
.mini-tags { display: flex; flex-wrap: wrap; gap: 4px; max-width: 230px; }
.mini-tags span {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gold-100);
    color: #7d5a20;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.row-chevron { width: 16px; height: 16px; color: var(--subtle); vertical-align: middle; transition: transform .15s, color .15s; }
tr[data-href]:hover .row-chevron { color: var(--green-600); transform: translateX(2px); }
.row-actions .icon-button { opacity: 0; transition: opacity .15s; }
tr:hover .row-actions .icon-button, .row-actions .icon-button:focus-visible { opacity: 1; }

/* Board */
.board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; padding: 16px 20px 20px; overflow-x: auto; }
.board-col { display: flex; flex-direction: column; min-width: 0; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.board-col header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-top: 3px solid var(--st);
    border-radius: 14px 14px 0 0;
    font-size: 13.5px;
    font-weight: 600;
}
.board-cards { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 12px; }
.board-card {
    display: block;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.board-card:hover { border-color: #cfcbbd; box-shadow: 0 6px 18px rgb(23 35 28 / 8%); transform: translateY(-1px); }
.board-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.board-card-head strong { font-size: 14px; }
.board-card > small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.board-facts { display: grid; gap: 4px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line-soft); list-style: none; color: var(--ink-2); font-size: 12.5px; }
.board-facts li { display: flex; align-items: center; gap: 7px; }
.board-facts .icon { width: 14px; height: 14px; color: var(--subtle); }
.board-card .mini-tags { margin-top: 10px; }
.board-empty { margin: 0; padding: 18px 0; color: var(--subtle); font-size: 12.5px; text-align: center; }

/* Rich empty state */
.empty-rich { padding: 56px 20px; text-align: center; }
.empty-rich h2 { margin: 0; font-size: 18px; font-weight: 600; }
.empty-rich p { max-width: 360px; }
.empty-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--green-50); }
.empty-icon .icon { width: 26px; height: 26px; color: var(--green-600); }

/* ---------- Leads dashboard ---------- */

:root {
    --viz-series: #1f7f4f;      /* single-series marks (validated against the white surface) */
    --viz-other: #b9bdb6;       /* de-emphasis / "Other" */
    --viz-grid: #eceae3;        /* hairline gridlines */
}

.range-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -6px 0 18px; }
.range-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.range-label .icon { width: 16px; height: 16px; }

.stat small .delta, .delta { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; font-weight: 600; color: var(--muted); }
.delta .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.delta-up { color: var(--green-600); }
.delta-down { color: var(--rose); }

.dash-grid { display: grid; gap: 20px; margin-bottom: 20px; }
.dash-grid-a { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.dash-grid-b { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
.dash-grid-c { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 20px; }
.chart-card { display: flex; flex-direction: column; }
.chart-empty { margin: auto 0; padding: 28px 0; color: var(--subtle); text-align: center; font-size: 13.5px; }

/* Horizontal bars: label | bar + value at the tip */
.bar-list, .funnel { margin: 0; padding: 0; list-style: none; }
.bar-list li, .funnel-step {
    display: grid;
    grid-template-columns: minmax(80px, 38%) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 6px 4px;
    border-radius: 8px;
    outline: none;
    cursor: default;
}
.bar-list li:hover, .bar-list li:focus-visible, .funnel-step:hover, .funnel-step:focus-visible { background: var(--surface-2); }
.bar-list li:focus-visible, .funnel-step:focus-visible { box-shadow: var(--ring); }
.bar-label { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; color: var(--ink-2); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.bar-plot { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 36px; }
.bar { display: block; height: 12px; min-width: 3px; border-radius: 0 4px 4px 0; background: var(--viz-series); transition: filter .15s; }
.bar-other { background: var(--viz-other); }
li:hover > .bar-plot .bar, li:focus-visible > .bar-plot .bar { filter: brightness(1.15); }
.bar-value { margin-right: -36px; color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar-value small { margin-left: 4px; color: var(--muted); font-weight: 500; }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--st); }

/* Funnel */
.funnel-step { grid-template-columns: 110px minmax(0, 1fr); padding: 8px 4px; }
.funnel-step .bar { height: 16px; }
.funnel-conv { display: flex; align-items: center; gap: 4px; margin: 0 0 0 122px; color: var(--muted); font-size: 12px; }
.funnel-conv .icon { width: 13px; height: 13px; color: var(--subtle); }

/* Column chart */
.columns { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin: 4px 0 0; }
.columns-axis { display: flex; flex-direction: column; justify-content: space-between; height: 180px; color: var(--subtle); font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; transform: translateY(-7px); }
.columns-plot { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 180px; border-bottom: 1px solid var(--line); }
.columns-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.columns-grid i { display: block; height: 1px; background: var(--viz-grid); }
.columns-grid i:last-child { background: transparent; }
.column { position: relative; display: flex; flex: 1 1 0; justify-content: center; align-items: flex-end; height: 100%; outline: none; }
.column:focus-visible { border-radius: 6px; box-shadow: var(--ring); }
.column-bar { position: relative; width: min(100%, 24px); border-radius: 4px 4px 0 0; background: var(--viz-series); transition: filter .15s; }
.column:hover .column-bar, .column:focus-visible .column-bar { filter: brightness(1.15); }
.column-bar b { position: absolute; bottom: 100%; left: 50%; margin-bottom: 4px; transform: translateX(-50%); color: var(--ink); font-size: 12px; font-weight: 600; }
.column-label { position: absolute; top: 100%; left: 50%; margin-top: 6px; transform: translateX(-50%); color: var(--muted); font-size: 11px; white-space: nowrap; }
.table-view { margin-top: 34px; }
.table-view summary { color: var(--green-600); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.table-view table { margin-top: 8px; }
.table-view th, .table-view td { padding: 6px 8px; font-size: 12.5px; }

.chart-tip {
    position: absolute;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-width: 240px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--green-900);
    color: rgb(255 255 255 / 75%);
    font-size: 12px;
    box-shadow: 0 8px 24px rgb(3 35 26 / 25%);
    pointer-events: none;
}
.chart-tip strong { color: #fff; font-size: 13.5px; }
.chart-tip[hidden] { display: none; }

/* Attention & upcoming lists */
.attention-list, .upcoming-list { margin: 0; padding: 0; list-style: none; }
.attention-list li, .upcoming-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.attention-list li:last-child, .upcoming-list li:last-child { border-bottom: 0; }
.attention-list li > div, .upcoming-list li > div:not(.upcoming-side) { min-width: 0; flex: 1; }
.attention-list p, .upcoming-list p { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; }
.attention-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 10px; background: var(--gold-100); color: var(--gold-600); }
.attention-icon .icon { width: 17px; height: 17px; }
.all-clear { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--green-50); }
.all-clear > .icon { width: 28px; height: 28px; color: var(--green-600); }
.all-clear p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.date-chip {
    width: 46px;
    flex: none;
    padding: 5px 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
}
.date-chip b { display: block; color: var(--ink); font: 600 18px var(--font-display); }
.upcoming-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.upcoming-side small { color: var(--green-600); font-size: 12px; font-weight: 600; }

/* Win-rate meter */
.meter { display: inline-block; width: 90px; height: 6px; margin-right: 8px; overflow: hidden; border-radius: 999px; background: var(--green-100); vertical-align: middle; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--viz-series); }
.meter-value { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Zuri loader (branded loading animation) ---------- */

.zuri-loader { position: relative; display: inline-grid; place-items: center; width: 108px; height: 108px; }
.zuri-loader img { position: relative; z-index: 1; width: 64px; height: 64px; animation: zuri-breathe 1.6s ease-in-out infinite; }
.zuri-loader-orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 55%, rgb(197 150 74 / 15%) 65%, var(--gold-500) 92%, transparent 93%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    animation: zuri-spin 1.1s linear infinite;
}
.zuri-loader-orbit::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1px;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: var(--gold-500);
    box-shadow: 0 0 10px var(--gold-300);
    transform: rotate(-90deg) translate(0, 0);
}
.zuri-loader-glow { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle, rgb(31 127 79 / 14%), transparent 70%); animation: zuri-breathe 1.6s ease-in-out infinite; }
@keyframes zuri-spin { to { transform: rotate(360deg); } }
@keyframes zuri-breathe { 0%, 100% { transform: scale(.94); opacity: .85; } 50% { transform: scale(1.04); opacity: 1; } }

/* ---------- Chart of accounts ---------- */

/* One colour per account type, used for dots in tabs, rows and the type picker */
.coa-asset     { --coa: #3d7aa8; }
.coa-liability { --coa: var(--rose); }
.coa-equity    { --coa: #7b5ea7; }
.coa-income    { --coa: var(--green-600); }
.coa-expense   { --coa: var(--gold-500); }
.coa-dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--coa); }

.stat strong .stat-sep { display: inline; margin: 0 3px; color: var(--subtle); font-size: inherit; font-weight: 500; }

.coa-panel { padding: 0; overflow: hidden; }
.coa-panel .tab { text-decoration: none; }
.coa-panel .tab.active { border-bottom-color: var(--green-700); color: var(--green-700); }
.coa-panel .list-toolbar { justify-content: space-between; }
.coa-panel .toolbar-search { flex: 0 1 360px; }
.coa-inactive-toggle { align-items: center; }
.coa-inactive-toggle strong { font-size: 13.5px; font-weight: 500; }
.coa-panel .table-wrap { margin: 0; }

.coa-table th, .coa-table td { padding-top: 11px; padding-bottom: 11px; vertical-align: middle; }
.coa-table th:first-child, .coa-table td:first-child { padding-left: 24px; }
.coa-code-col { width: 92px; }
.coa-code { color: var(--ink-2); font: 600 13.5px var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.coa-name { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: calc(var(--depth, 0) * 22px); }
.coa-name > span:first-of-type { min-width: 0; }
.coa-name strong { display: block; color: var(--ink); font-size: 14px; font-weight: 500; }
.coa-name small { display: block; max-width: 520px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.coa-name .badge { flex: none; }
.coa-folder { width: 16px; height: 16px; color: var(--gold-600); }
.coa-header td { background: var(--surface-2); }
.coa-header .coa-name strong { font-weight: 700; }
.coa-header .coa-code { color: var(--ink); font-weight: 700; }
.coa-inactive td { color: var(--subtle); }
.coa-inactive .coa-name strong, .coa-inactive .coa-code { color: var(--subtle); text-decoration: line-through; text-decoration-color: rgb(152 161 153 / 50%); }
.coa-type { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.coa-table tr[data-href] { cursor: pointer; }
.coa-table tbody tr[data-href]:hover td { background: var(--green-50); }

.coa-empty { max-width: 720px; margin: 0 auto; }
.coa-empty p { max-width: 520px; margin: 8px auto 0; color: var(--muted); }
.coa-empty .empty-icon { margin: 0 auto 12px; }
.coa-empty .module-actions { justify-content: center; margin-top: 22px; }

/* Form */
.coa-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.coa-type-option { position: relative; cursor: pointer; }
.coa-type-option input { position: absolute; opacity: 0; pointer-events: none; }
.coa-type-option > span {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid #dcd9ce;
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.coa-type-option strong { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.coa-type-option .coa-dot { order: -1; }
.coa-type-option > span { grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.coa-type-option small { grid-column: 2; color: var(--muted); font-size: 12px; }
.coa-type-option:hover > span { border-color: #bdb8a8; }
.coa-type-option input:checked + span { border-color: var(--green-700); background: var(--green-50); box-shadow: 0 0 0 1px var(--green-700); }
.coa-type-option input:focus-visible + span { box-shadow: var(--ring); }
.coa-type-option input:disabled + span { opacity: .45; cursor: not-allowed; }
.field-row-code { grid-template-columns: 180px minmax(0, 1fr); }
.coa-code-input { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .3px; }
.coa-help h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.coa-danger { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: none; margin-top: 20px; }
.coa-danger p { max-width: 620px; }

@media (max-width: 960px) {
    .coa-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .coa-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field-row-code { grid-template-columns: minmax(0, 1fr); }
    .coa-danger { flex-direction: column; align-items: stretch; }
    .coa-table th:nth-child(4), .coa-table td:nth-child(4), .coa-table th:nth-child(5), .coa-table td:nth-child(5) { display: none; }
    .coa-name small { display: none; }
}

/* ---------- Suppliers ---------- */

/* One colour per supplier type */
.type-accommodation { --sup: var(--green-600); --sup-bg: var(--green-50); }
.type-transport     { --sup: #3d7aa8; --sup-bg: var(--sky-bg); }
.type-park          { --sup: var(--gold-600); --sup-bg: var(--gold-100); }
.type-other         { --sup: var(--muted); --sup-bg: var(--line-soft); }

.supplier-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 10px;
    background: var(--sup-bg);
    color: var(--sup);
}
.supplier-icon .icon { width: 18px; height: 18px; }
.supplier-icon-lg { width: 52px; height: 52px; border-radius: 14px; }
.supplier-icon-lg .icon { width: 26px; height: 26px; }

.coa-panel .tab .icon { width: 15px; height: 15px; }
.supplier-table td { vertical-align: middle; }
.supplier-table th:first-child, .supplier-table td:first-child { padding-left: 24px; }
.supplier-table tr[data-href] { cursor: pointer; }
.supplier-table tbody tr[data-href]:hover td { background: var(--green-50); }
.supplier-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.supplier-name strong { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
.supplier-name small, .supplier-table td > small { display: block; color: var(--muted); font-size: 12px; }
.supplier-type { color: var(--ink-2); font-size: 13.5px; }
.supplier-setup { margin-top: 2px; }
.supplier-setup.is-missing { color: var(--gold-600) !important; font-weight: 600; }
.supplier-contact { display: block; font-size: 13.5px; font-weight: 500; }
.nowrap { white-space: nowrap; }

.mode-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.mode-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    background: var(--sky-bg);
    color: #2b5a7e;
    font-size: 11.5px;
    font-weight: 600;
}
.mode-chip .icon { width: 12px; height: 12px; }

/* Type chooser */
.supplier-type-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.supplier-type-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 24px;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.supplier-type-card:hover { border-color: var(--sup); box-shadow: var(--shadow), 0 0 0 3px var(--sup-bg); transform: translateY(-2px); }
.supplier-type-card strong { margin-top: 6px; font: 600 18px var(--font-display); }
.supplier-type-card p { flex: 1; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.supplier-type-card .mode-chips { margin: 0; }
.supplier-type-card .text-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--sup); font-weight: 600; }
.supplier-type-card .text-link .icon { width: 15px; height: 15px; }

/* Supplier page */
.setup-empty { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--muted); }
.setup-empty .icon { width: 26px; height: 26px; flex: none; color: var(--gold-500); }
.setup-empty p { margin: 0; font-size: 13.5px; }
.setup-group { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; color: var(--ink-2); font: 600 13px var(--font-body); letter-spacing: .4px; text-transform: uppercase; }
.setup-group:first-of-type { margin-top: 0; }
.setup-group .icon { width: 16px; height: 16px; color: #3d7aa8; }
.setup-table td { vertical-align: middle; }
.setup-table td strong { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
.setup-table td small { display: block; color: var(--muted); font-size: 12px; }
.setup-table td .badge { margin-top: 4px; }
.fee-table thead tr:first-child th { border-bottom: 0; padding-bottom: 2px; }
.fee-table thead tr:last-child th { padding-top: 2px; color: var(--subtle); font-size: 10.5px; }
.fee-table th[scope="colgroup"] { text-align: center; }
.fee-table .fee-kind-row th { background: var(--surface-2, #f6f7f5); color: var(--ink, inherit); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 8px 12px; }
.fee-table .fee-kind-row .icon { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: var(--brand, currentColor); }
.fee-table td .badge { margin: 4px 4px 0 0; }
.fee-table .fee-when { color: var(--subtle); font-size: 11.5px; max-width: 46ch; white-space: normal; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
.detail-grid dt { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.detail-grid dd { margin: 4px 0 0; color: var(--ink); font-size: 14px; }
.detail-wide { grid-column: 1 / -1; }
.supplier-notes { margin: 0; white-space: pre-line; }

/* Forms */
.form-subhead { margin: 24px 0 10px; padding-top: 18px; border-top: 1px solid var(--line-soft); color: var(--ink); font-size: 14px; font-weight: 600; }
.plan-code { margin-right: 6px; font-weight: 700; }
.pill-options input:checked + span .plan-code { color: var(--gold-300); }
.pill-options span .icon { width: 15px; height: 15px; margin-right: 6px; }
.input-wrap.has-suffix .input { padding-right: 56px; }
.input-wrap.has-suffix .suffix { position: absolute; right: 14px; color: var(--muted); font-size: 13px; pointer-events: none; }
.prefix-select { width: 76px; padding: 0 6px; border: 0; border-right: 1px solid #dcd9ce; background: var(--surface-2); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.input-wrap.has-prefix .prefix-select + .input { padding-left: 90px; }
.item-form { max-width: 820px; }
.item-form .form-actions { margin-top: 20px; }
.fee-grid { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px 12px; }
.fee-grid > strong { color: var(--muted); font-size: 12px; letter-spacing: .4px; text-transform: uppercase; }
.fee-grid-label { color: var(--ink); font-size: 14px; font-weight: 600; }
.fee-grid-label small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }

@media (max-width: 1100px) {
    .supplier-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .supplier-type-grid { grid-template-columns: minmax(0, 1fr); }
    .supplier-table th:nth-child(3), .supplier-table td:nth-child(3), .supplier-table th:nth-child(4), .supplier-table td:nth-child(4) { display: none; }
    .detail-grid { grid-template-columns: minmax(0, 1fr); }
    .fee-grid { grid-template-columns: minmax(110px, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Supplier photos, seasons & rates ---------- */

.button-sm { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
.button-sm .icon { width: 14px; height: 14px; }
.photo-count { font-size: 12.5px; font-variant-numeric: tabular-nums; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.photo { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.photo[draggable="true"] { cursor: grab; }
.photo.is-dragging { opacity: .4; }
.photo.is-cover { border-color: var(--gold-500); box-shadow: 0 0 0 1px var(--gold-500); }
.photo:first-child.is-cover { grid-column: span 2; grid-row: span 2; }
.photo-frame { position: relative; display: block; overflow: hidden; border-radius: 11px 11px 0 0; background: var(--line-soft); aspect-ratio: 4 / 3; }
.photo:first-child.is-cover .photo-frame { flex: 1; aspect-ratio: auto; min-height: 260px; }
.photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.photo-frame:hover img { transform: scale(1.03); }
.photo-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--gold-500);
    color: var(--green-900);
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
}
.photo-badge-room { top: auto; bottom: 8px; background: rgb(3 35 26 / 75%); color: #fff; backdrop-filter: blur(4px); }
.photo-meta { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 4px 4px 4px 10px; }
.photo-caption { flex: 1; min-width: 0; overflow: hidden; color: var(--ink-2); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.photo-menu { position: relative; }
.photo-menu summary { list-style: none; width: 32px; height: 32px; cursor: pointer; }
.photo-menu summary::-webkit-details-marker { display: none; }
.photo-menu-panel {
    position: absolute;
    right: 0;
    bottom: 38px;
    z-index: 10;
    width: 260px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.photo-edit { display: grid; gap: 6px; }
.photo-edit .label { margin: 4px 0 0; font-size: 12.5px; }
.photo-edit .input { height: 38px; font-size: 13.5px; }
.photo-edit .button { justify-self: start; margin-top: 4px; }
.photo-menu-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.photo-menu-actions .button { min-height: 34px; font-size: 12.5px; }

.photo-upload { display: grid; gap: 12px; }
.dropzone {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 26px 16px;
    border: 2px dashed #d3cfc2;
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--muted);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--green-600); background: var(--green-50); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone .icon { width: 30px; height: 30px; margin-bottom: 4px; color: var(--gold-500); }
.dropzone strong { color: var(--ink); font-size: 14px; }
.dropzone small { font-size: 12.5px; }
.text-link-plain { color: var(--green-600); text-decoration: underline; text-underline-offset: 3px; }
.photo-upload-options { display: flex; align-items: center; gap: 10px; }
.photo-upload-options .label { margin: 0; white-space: nowrap; }
.photo-upload-options .input { max-width: 360px; }
.photo-upload-status { margin: 0; color: var(--rose); font-size: 13px; font-weight: 500; }

/* Seasons */
.season-list { display: grid; margin: 0; padding: 0; list-style: none; }
.season-item { display: grid; grid-template-columns: minmax(140px, auto) 1fr auto auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.season-item:last-child { border-bottom: 0; }
.season-name { display: flex; align-items: center; gap: 8px; }
.season-name strong { font-size: 14px; }
.season-periods { display: flex; flex-wrap: wrap; gap: 6px; }
.period-chip { padding: 3px 10px; border-radius: 999px; background: var(--line-soft); color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.season-item.is-current .period-chip { box-shadow: inset 0 0 0 1px var(--season, var(--green-600)); }
.period-list { display: grid; gap: 8px; }
.period-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.period-to { color: var(--muted); font-size: 13px; }
.period-add { justify-self: start; margin-top: 10px; }
.season-taken { margin-top: 20px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); }
.season-taken h3 { margin: 0 0 6px; color: var(--muted); font: 600 12px var(--font-body); letter-spacing: .4px; text-transform: uppercase; }
.season-taken ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.season-taken strong { margin-right: 6px; color: var(--ink); }

/* Rate grid */
.rate-panel { padding: 0; overflow: hidden; }
.rate-panel .table-wrap { margin: 0; }
.rate-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.rate-currency { width: 140px; }
.rate-currency .input { height: 40px; }
.rate-toolbar .hint { margin: 0 0 10px; }
.rate-table { min-width: 720px; }
.rate-table th, .rate-table td { padding: 6px 8px; }
.rate-table thead th { background: var(--surface); }
.rate-charge-col { width: 200px; padding-left: 20px !important; }
.rate-season { padding-top: 12px !important; border-left: 1px solid var(--line-soft); text-align: center; }
.rate-season strong { display: block; color: var(--ink); font-size: 13.5px; text-transform: none; letter-spacing: 0; }
.rate-season small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.rate-table thead tr:last-child th:nth-child(odd) { border-left: 1px solid var(--line-soft); }
.rate-plan th { padding: 12px 20px 6px !important; background: var(--green-50); color: var(--green-700); font-size: 13px; text-align: left; }
.rate-plan .plan-code { display: inline-block; min-width: 28px; margin-right: 8px; font-weight: 700; }
.rate-charge { padding-left: 20px !important; color: var(--ink-2); font-size: 13px; font-weight: 500; text-align: left; white-space: nowrap; }
.rate-cell { min-width: 90px; border-left: 1px solid var(--line-soft); }
.rate-cell-res { border-left: 0; }
.rate-cell .input { height: 36px; padding: 0 8px; border-radius: 8px; font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; }
.rate-cell .input:not(:placeholder-shown) { background: #fff; }
.rate-cell .input::-webkit-inner-spin-button { display: none; }
.rate-form .form-actions { margin-top: 20px; }

@media (max-width: 640px) {
    .photo:first-child.is-cover { grid-column: span 1; grid-row: span 1; }
    .season-item { grid-template-columns: 1fr auto; }
    .season-periods { grid-column: 1 / -1; order: 3; }
    .photo-upload-options { flex-direction: column; align-items: stretch; }
}

/* ---------- Suppliers list (cards) ---------- */

.sup-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 32px;
    margin-bottom: 18px;
    padding: 30px 32px 26px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    color: #f7f3e8;
    background:
        radial-gradient(70% 120% at 100% 0%, rgb(197 150 74 / 26%), transparent 60%),
        radial-gradient(50% 90% at 0% 100%, rgb(31 127 79 / 35%), transparent 70%),
        linear-gradient(135deg, var(--green-700) 0%, var(--green-800) 50%, var(--green-900) 100%);
    box-shadow: var(--shadow);
}
.sup-hero .hero-watermark { right: 220px; bottom: -110px; width: 320px; height: 320px; }
.sup-hero-text { position: relative; }
.sup-hero h1 { margin: 2px 0 8px; color: #fff; font-size: 34px; font-weight: 600; letter-spacing: -.7px; line-height: 1.1; }
.sup-hero p { max-width: 560px; margin: 0; color: rgb(247 243 232 / 80%); font-size: 14.5px; line-height: 1.5; }
.sup-hero-side { position: relative; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 18px; }
.sup-hero-stats { display: flex; gap: 6px; margin: 0; }
.sup-hero-stats div {
    min-width: 76px;
    padding: 10px 14px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 12px;
    background: rgb(255 255 255 / 7%);
    text-align: center;
    backdrop-filter: blur(4px);
}
.sup-hero-stats dt { color: rgb(226 196 140 / 85%); font-size: 10.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; }
.sup-hero-stats dd { margin: 2px 0 0; color: #fff; font: 600 24px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.sup-hero .button-gold { min-height: 44px; padding: 0 20px; box-shadow: 0 8px 20px -6px rgb(0 0 0 / 40%); }

.sup-search {
    position: relative;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px -10px rgb(0 0 0 / 35%);
}
.sup-search > .icon { flex: none; color: var(--subtle); }
.sup-search input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ink);
    font-size: 15px;
}
.sup-search input::placeholder { color: var(--subtle); }
.sup-search .button { min-height: 42px; border-radius: 10px; }
.sup-search:focus-within { box-shadow: 0 10px 30px -10px rgb(0 0 0 / 35%), 0 0 0 3px rgb(226 196 140 / 60%); }

.sup-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.sup-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sup-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 8px 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s;
}
.sup-chip .icon { width: 16px; height: 16px; color: var(--sup, var(--green-600)); }
.sup-chip span {
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--line-soft);
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.sup-chip:hover { border-color: #c9c5b8; color: var(--ink); }
.sup-chip.active { border-color: var(--green-800); background: var(--green-800); color: #fff; box-shadow: 0 6px 14px -6px rgb(6 58 33 / 50%); }
.sup-chip.active .icon { color: var(--gold-300); }
.sup-chip.active span { background: rgb(255 255 255 / 16%); color: #fff; }
.sup-filters-right { display: flex; align-items: center; gap: 14px; }
.sup-toggle { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.sup-toggle.on .switch-track { background: var(--green-700); }
.sup-toggle.on .switch-track::after { transform: translateX(18px); }
.sup-notice { margin-bottom: 18px; }
.sup-empty { display: grid; justify-items: center; gap: 6px; padding: 48px 20px; text-align: center; }
.sup-empty h2 { margin: 6px 0 0; font-size: 19px; font-weight: 600; }
.sup-empty p { margin: 0 0 10px; color: var(--muted); }

.sup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.sup-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.sup-card:hover { transform: translateY(-3px); border-color: #ddd9cc; box-shadow: 0 16px 34px -16px rgb(3 35 26 / 30%); }
.sup-card.is-inactive { opacity: .65; }
.sup-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sup-bg); }
.sup-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sup-card:hover .sup-card-media img { transform: scale(1.05); }
.sup-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 28%), transparent 34%, transparent 70%, rgb(0 0 0 / 12%)); pointer-events: none; }
.sup-card-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--sup);
    background:
        radial-gradient(circle at 30% 20%, rgb(255 255 255 / 70%), transparent 45%),
        repeating-linear-gradient(135deg, transparent 0 14px, rgb(255 255 255 / 30%) 14px 15px),
        var(--sup-bg);
}
.sup-card-placeholder .icon { width: 54px; height: 54px; stroke-width: 1.3; opacity: .7; }
.sup-card-type, .sup-card-stars, .sup-card-inactive {
    position: absolute;
    top: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}
.sup-card-type { left: 12px; background: rgb(255 255 255 / 92%); color: var(--sup); box-shadow: 0 2px 8px rgb(0 0 0 / 15%); }
.sup-card-type .icon { width: 13px; height: 13px; }
.sup-card-stars { right: 12px; background: rgb(3 35 26 / 70%); color: var(--gold-300); letter-spacing: 1px; backdrop-filter: blur(4px); }
.sup-card-inactive { top: auto; bottom: 12px; left: 12px; background: var(--rose); color: #fff; }
.sup-card-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 16px 18px 14px; }
.sup-card-body h2 { margin: 0; font: 600 17px/1.25 var(--font-display); letter-spacing: -.2px; }
.sup-card-body h2 a { color: var(--ink); text-decoration: none; }
.sup-card-body h2 a:hover { color: var(--green-700); }
.sup-card-place { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: -4px 0 0; color: var(--muted); font-size: 12.5px; }
.sup-card-place span { display: inline-flex; align-items: center; gap: 4px; }
.sup-card-place span:first-child { color: var(--subtle); font-weight: 600; letter-spacing: .3px; }
.sup-card-place .icon { width: 13px; height: 13px; color: var(--gold-600); }
.sup-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sup-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 7px;
    background: var(--gold-100);
    color: #7d5a20;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
}
.sup-tag .icon { width: 12px; height: 12px; }
.sup-tag-mode { background: var(--sky-bg); color: #2b5a7e; }
.sup-tag-setup { background: var(--line-soft); color: var(--ink-2); font-weight: 600; letter-spacing: 0; }
.sup-tag-setup.is-missing { background: #fdf3e2; color: var(--gold-600); }
.sup-card-price { display: flex; align-items: baseline; gap: 6px; margin-top: auto; padding-top: 4px; }
.sup-card-price small { color: var(--muted); font-size: 12px; }
.sup-card-price strong { color: var(--green-700); font: 600 20px var(--font-display); letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.sup-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px 10px 18px;
    border-top: 1px solid var(--line-soft);
    background: var(--surface-2);
}
.sup-card-contact { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-2); font-size: 13px; }
.sup-card-contact > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-card-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.sup-card-actions .icon-button { width: 34px; height: 34px; }
.sup-card-open { color: var(--green-700); }
.sup-flag { display: grid; place-items: center; width: 28px; height: 28px; margin-right: 2px; border-radius: 8px; background: #fdf3e2; color: var(--gold-600); }
.sup-flag .icon { width: 15px; height: 15px; }

.sup-card-add {
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 360px;
    border: 2px dashed #d3cfc2;
    background: transparent;
    box-shadow: none;
    color: var(--ink-2);
    text-align: center;
    text-decoration: none;
}
.sup-card-add:hover { border-color: var(--green-600); background: var(--green-50); box-shadow: none; }
.sup-card-add-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; background: var(--green-800); color: #fff; }
.sup-card-add strong { font: 600 16px var(--font-display); }
.sup-card-add small { color: var(--muted); }

.supplier-thumb { width: 44px; height: 36px; flex: none; border-radius: 8px; object-fit: cover; }

@media (max-width: 960px) {
    .sup-hero { grid-template-columns: minmax(0, 1fr); }
    .sup-hero-side { flex-direction: row; align-items: center; flex-wrap: wrap; }
    .sup-hero .hero-watermark { right: -40px; }
}
@media (max-width: 640px) {
    .sup-hero { padding: 22px 18px; }
    .sup-hero h1 { font-size: 28px; }
    .sup-hero-stats div { min-width: 0; padding: 8px 10px; }
    .sup-hero-stats dd { font-size: 19px; }
    .sup-search .button { display: none; }
    .sup-filters-right { width: 100%; justify-content: space-between; }
    .sup-card-add { min-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
    .sup-card, .sup-card-media img { transition: none; }
}

/* Operations module */
.ops-calendar-heading { margin-bottom: 22px; }
.ops-calendar-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.ops-calendar-metric { display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 19px 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm); }
.ops-calendar-metric-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 13px; }
.ops-calendar-metric-icon .icon { width: 21px; height: 21px; }
.ops-calendar-metric-icon.green { color: #14784b; background: #e2f5e9; }
.ops-calendar-metric-icon.gold { color: #ad7815; background: #fff3dc; }
.ops-calendar-metric-icon.rose { color: #af4b4d; background: #fce8e7; }
.ops-calendar-metric small, .ops-calendar-metric strong { display: block; }
.ops-calendar-metric small { color: var(--muted); font-size: 12px; font-weight: 600; }
.ops-calendar-metric strong { margin-top: 2px; color: var(--green-800); font: 700 28px var(--font-display); line-height: 1.1; }
.ops-calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 16px; align-items: start; }
.ops-month-panel { padding: 0; overflow: hidden; }
.ops-month-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 23px 24px 12px; }
.ops-month-toolbar h2, .ops-agenda-heading h2 { margin: 3px 0 0; color: var(--green-800); font: 700 23px var(--font-display); }
.ops-month-controls { display: flex; align-items: center; gap: 6px; }
.ops-today-link { padding: 8px 11px; border-radius: 8px; color: var(--green-700); font-size: 12px; font-weight: 700; text-decoration: none; }
.ops-today-link:hover { background: #e8f6ec; }
.ops-month-arrow { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 8px; color: var(--green-800); }
.ops-month-arrow:hover { background: var(--surface-2); }
.ops-month-arrow .icon { width: 15px; height: 15px; }
.ops-calendar-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 24px 17px; color: var(--muted); font-size: 11px; }
.ops-calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ops-calendar-legend i { width: 8px; height: 8px; border-radius: 50%; }
.legend-departure { background: #158456; }.legend-tour { background: #c8922d; }.legend-return { background: #377fa0; }
.ops-month-scroll { overflow-x: auto; }
.ops-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 665px; border-top: 1px solid var(--line); }
.ops-weekday { padding: 12px 10px; border-bottom: 1px solid var(--line); color: var(--muted); background: #f9faf8; font-size: 11px; font-weight: 750; letter-spacing: .05em; text-align: center; text-transform: uppercase; }
.ops-day { min-width: 0; min-height: 125px; padding: 8px 6px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: #fff; }
.ops-day:nth-child(7n) { border-right: 0; }
.ops-day.outside { background: #fafbf9; }
.ops-day.today { background: #f2faf4; box-shadow: inset 0 0 0 1px #bfe7cb; }
.ops-day-top { display: flex; justify-content: space-between; align-items: center; min-height: 27px; margin-bottom: 4px; padding: 0 3px; }
.ops-day-number { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--ink-2); font-size: 12px; font-weight: 750; }
.ops-day.outside .ops-day-number { color: #aeb9b2; }
.ops-day.today .ops-day-number { background: var(--green-700); color: #fff; }
.ops-today-marker { color: var(--green-700); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.ops-day-events { display: grid; gap: 3px; }
.ops-day-event { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 6px; border-radius: 5px; color: #0a6942; background: #e0f2e7; font-size: 10px; font-weight: 700; line-height: 1.25; text-decoration: none; }
.ops-day-event:hover { filter: brightness(.94); }
.ops-day-event.tour { color: #866014; background: #fff1d2; }
.ops-day-event.return { color: #296c8c; background: #e3f1f8; }
.ops-event-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: currentColor; }
.ops-event-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-more-events { padding: 3px 5px; color: var(--muted); font-size: 10px; font-weight: 650; }
.ops-month-agenda { padding: 0; overflow: hidden; }
.ops-agenda-heading { padding: 22px 20px 17px; border-bottom: 1px solid var(--line-soft); }
.ops-agenda-heading h2 { font-size: 21px; }.ops-agenda-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.ops-agenda-list { max-height: 735px; overflow-y: auto; }
.ops-agenda-item { display: flex; gap: 10px; padding: 15px 16px; border-bottom: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.ops-agenda-item:hover { background: #f7faf7; }
.ops-agenda-date { display: grid; align-content: center; justify-items: center; width: 43px; height: 48px; flex: none; border-radius: 9px; color: var(--green-800); background: #e9f5ec; }
.ops-agenda-date strong { font-size: 17px; line-height: 1; }.ops-agenda-date small { margin-top: 2px; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.ops-agenda-info { min-width: 0; }.ops-agenda-info > strong, .ops-agenda-info > small { display: block; }
.ops-agenda-ref { color: var(--green-700); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; }
.ops-agenda-ref span { color: #bac4bc; }.ops-agenda-info > strong { margin-top: 4px; color: var(--green-800); font-size: 12.5px; line-height: 1.3; }
.ops-agenda-info > small { margin-top: 4px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.ops-agenda-resources { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ops-agenda-resources > span { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 3px 5px; border-radius: 5px; color: var(--ink-2); background: var(--surface-2); font-size: 10px; }
.ops-agenda-resources .icon { width: 11px; height: 11px; flex: none; }
.ops-agenda-empty { display: grid; justify-items: center; gap: 7px; padding: 44px 16px; color: var(--muted); font-size: 12px; text-align: center; }
.ops-agenda-empty .icon { width: 27px; height: 27px; color: var(--green-700); }.ops-agenda-empty strong { color: var(--green-800); font-size: 13px; }
@media (max-width: 1150px) { .ops-calendar-layout { grid-template-columns: minmax(0, 1fr); } .ops-agenda-list { max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ops-calendar-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .ops-calendar-metric { gap: 7px; min-height: 80px; padding: 10px; } .ops-calendar-metric-icon { width: 29px; height: 29px; border-radius: 7px; } .ops-calendar-metric-icon .icon { width: 15px; height: 15px; } .ops-calendar-metric small { font-size: 9px; line-height: 1.2; } .ops-calendar-metric strong { font-size: 20px; } .ops-month-toolbar { padding: 16px 15px 10px; } .ops-month-toolbar h2 { font-size: 19px; } .ops-calendar-legend { padding: 0 15px 13px; } .ops-agenda-list { grid-template-columns: 1fr; } }
.ops-panel { margin-top: 20px; }
.ops-table-wrap { overflow-x: auto; }
.ops-table { width: 100%; border-collapse: collapse; }
.ops-table th { padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
.ops-table td { padding: 14px 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); font-size: 13px; vertical-align: middle; }
.ops-table td strong, .ops-table td small, .ops-table td a { display: block; }
.ops-table td a { color: inherit; text-decoration: none; }
.ops-table td a:hover strong { color: var(--green-700); }
.ops-table td small { margin-top: 2px; color: var(--muted); }
.ops-progress { display: block; width: 110px; height: 6px; overflow: hidden; border-radius: 99px; background: #e5ece8; }
.ops-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-500), #2fb36b); }
.ops-progress-lg { width: 100%; height: 9px; margin: 8px 0 18px; }
.phase-pill[class*="ops-"] { background: #edf4f0; color: var(--green-800); }
.phase-pill.ops-ready, .phase-pill.ops-completed { background: #dcf3e6; color: var(--green-700); }
.phase-pill.ops-departed, .phase-pill.ops-inprogress { background: #e0effd; color: #17679a; }
.phase-pill.ops-cancelled { background: #fde9e7; color: var(--rose); }
.ops-filter { display: grid; grid-template-columns: minmax(260px, 1fr) 220px auto; gap: 10px; align-items: center; margin-bottom: 16px; padding: 12px; }
.ops-filter .search-box { width: auto; }
.ops-tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ops-tour-card { display: block; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.ops-tour-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ops-card-top { display: flex; justify-content: space-between; gap: 12px; }
.ops-card-top > span:first-child small, .ops-card-top > span:first-child strong { display: block; }
.ops-card-top small { color: var(--gold-600); font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.ops-card-top strong { margin-top: 3px; color: var(--green-800); font: 700 17px var(--font-display); }
.ops-tour-card > p { margin: 12px 0; color: var(--muted); font-size: 13px; }
.ops-card-date { display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: 13px; }
.ops-card-date .icon { width: 15px; color: var(--gold-600); }
.ops-readiness { margin-top: 16px; }
.ops-readiness > span:first-child { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.ops-readiness .ops-progress { width: 100%; }
.ops-calendar { margin-bottom: 16px; }
.ops-calendar > h2 { margin: 0 0 12px; }
.ops-calendar-row { display: grid; grid-template-columns: 58px minmax(190px, 1fr) minmax(220px, 1.5fr) auto; gap: 14px; align-items: center; padding: 12px 8px; border-top: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.ops-calendar-row time { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 10px; background: var(--surface-2); }
.ops-calendar-row time b { line-height: 1; color: var(--green-800); font-size: 18px; }
.ops-calendar-row time small, .ops-calendar-tour small { color: var(--muted); font-size: 11px; }
.ops-calendar-tour strong, .ops-calendar-tour small { display: block; }
.ops-calendar-resources { display: flex; flex-wrap: wrap; gap: 5px; }
.ops-calendar-resources em { padding: 4px 7px; border-radius: 6px; background: #edf4f0; color: var(--green-800); font-size: 11px; font-style: normal; }
.ops-band { background: linear-gradient(120deg, #073d2a, #0a5b3c); }
.ops-tabs { position: sticky; top: 64px; z-index: 4; display: flex; gap: 4px; overflow-x: auto; margin: 0 0 16px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.96); }
.ops-tabs a { padding: 7px 10px; border-radius: 8px; color: var(--ink-2); font-size: 12px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.ops-tabs a:hover { background: var(--surface-2); color: var(--green-700); }
.ops-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ops-detail-main { display: grid; gap: 16px; }
.ops-detail-grid aside { position: sticky; top: 120px; }
.ops-score { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #dcf3e6; color: var(--green-700); font-weight: 800; }
.ops-gates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 16px; }
.ops-gates span { display: flex; gap: 6px; align-items: center; padding: 9px; border-radius: 9px; background: #f5f6f5; color: var(--muted); font-size: 11px; font-weight: 650; }
.ops-gates span.done { background: #e6f6ed; color: var(--green-700); }
.ops-gates .icon { width: 14px; height: 14px; }
.ops-list, .ops-checklist, .ops-timeline { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ops-list li, .ops-checklist li { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 10px; }
.ops-list li > span:nth-child(2), .ops-checklist li > span:nth-child(2) { flex: 1; min-width: 0; }
.ops-list strong, .ops-list small, .ops-checklist strong, .ops-checklist small { display: block; }
.ops-list small, .ops-checklist small { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.voucher-tag { padding: 5px 8px; border-radius: 7px; background: #fff4d8; color: #876010; font-size: 11px; }
.ops-assignment-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: end; min-width: 0; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.ops-assignment-form label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 650; }
.ops-assignment-form .input { width: 100%; min-width: 0; max-width: 100%; margin: 0; }
.ops-assignment-form > .button { grid-column: 1 / -1; justify-self: end; }
.check-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #edf0ee; color: #9aa6a0; }
.check-completed .check-mark, .check-overridden .check-mark { background: #dcf3e6; color: var(--green-700); }
.check-overridden .check-mark { background: #fff0c7; color: #936a0a; }
.ops-checklist form { display: flex; gap: 7px; align-items: center; }
.ops-override { position: relative; }
.ops-override summary { cursor: pointer; color: var(--gold-600); font-size: 11px; font-weight: 700; }
.ops-override[open] { display: flex; gap: 5px; align-items: center; }
.ops-timeline li { position: relative; display: flex; gap: 10px; padding-bottom: 12px; }
.ops-timeline li > i { width: 9px; height: 9px; flex: none; margin-top: 4px; border: 2px solid #fff; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 2px #f1dfad; }
.ops-timeline strong, .ops-timeline small { display: block; }
.ops-timeline strong { font-size: 12px; font-weight: 600; }
.ops-timeline small { margin-top: 3px; color: var(--muted); font-size: 10.5px; }
@media (max-width: 1200px) { .ops-detail-grid { grid-template-columns: minmax(0, 1fr); } .ops-detail-grid aside { position: static; } }
@media (max-width: 760px) { .ops-filter, .ops-assignment-form { grid-template-columns: minmax(0, 1fr); } .ops-assignment-form > .button { width: 100%; } .ops-calendar-row { grid-template-columns: 50px 1fr; } .ops-calendar-resources, .ops-calendar-row > .phase-pill { grid-column: 2; } .ops-gates { grid-template-columns: repeat(2, 1fr); } .ops-list li { flex-wrap: wrap; } }

/* ---------- Hotel & lodge workspace ---------- */

.hotel-crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.hotel-crumbs a { color: var(--muted); text-decoration: none; }
.hotel-crumbs a:hover { color: var(--green-700); text-decoration: underline; }
.hotel-crumbs .icon { width: 13px; height: 13px; color: var(--subtle); }
.hotel-crumbs span { color: var(--ink); font-weight: 600; }

.hotel-hero {
    position: relative;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 18px 26px 18px 18px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    color: #f7f3e8;
    background:
        radial-gradient(70% 120% at 100% 0%, rgb(197 150 74 / 24%), transparent 60%),
        linear-gradient(135deg, var(--green-700), var(--green-800) 55%, var(--green-900));
}
.hotel-hero-media { position: relative; width: 180px; height: 120px; overflow: hidden; border-radius: 12px; background: var(--green-50); box-shadow: 0 8px 20px -8px rgb(0 0 0 / 45%); }
.hotel-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hotel-hero-media .sup-card-placeholder .icon { width: 40px; height: 40px; }
.hotel-hero h1 { margin: 4px 0 8px; color: #fff; font-size: 28px; font-weight: 600; letter-spacing: -.5px; line-height: 1.15; }
.hotel-hero .hero-meta { gap: 6px 16px; }
.hotel-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.hotel-hero-side small { color: rgb(247 243 232 / 72%); font-size: 12.5px; }
.hotel-hero-side .button { margin-top: 6px; }

.contract-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    background: rgb(255 255 255 / 12%);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}
.contract-pill i { width: 8px; height: 8px; border-radius: 50%; background: #cfd6d1; }
.contract-pill.is-live { background: #e8f6ee; color: var(--green-700); }
.contract-pill.is-live i { background: #2fb36b; box-shadow: 0 0 0 3px rgb(47 179 107 / 25%); }
.panel .contract-pill:not(.is-live) { background: var(--line-soft); color: var(--muted); }
.contract-pill.status-draft { background: var(--gold-100) !important; color: #7d5a20 !important; }
.contract-pill.status-draft i { background: var(--gold-500); }
.contract-pill.status-expired i, .contract-pill.status-archived i { background: var(--subtle); }

.hotel-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 20px;
    padding: 0 10px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    scrollbar-width: none;
}
.hotel-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 14px 13px;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s;
}
.hotel-tab .icon { width: 16px; height: 16px; }
.hotel-tab:hover { color: var(--ink); }
.hotel-tab.active { border-bottom-color: var(--gold-500); color: var(--green-800); }
.hotel-tab.active .icon { color: var(--gold-600); }
.tab-details { --tab: #3d7aa8; }
.tab-rooms { --tab: #7a68c2; }
.tab-contracts { --tab: #d38b26; }
.tab-rates { --tab: #1f7f4f; }
.tab-children { --tab: #c0505c; }
.tab-supplements { --tab: #2b8a9e; }
.hotel-tab { padding-block: 11px 9px; }
.hotel-tab.active { border-bottom-color: var(--tab); }
.hotel-tab-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: color-mix(in srgb, var(--tab) 12%, #fff); color: var(--tab); transition: background-color .15s, color .15s, transform .15s, box-shadow .15s; }
.hotel-tab .hotel-tab-icon .icon { width: 15px; height: 15px; color: inherit; }
.hotel-tab:hover .hotel-tab-icon { transform: translateY(-1px); }
.hotel-tab.active .hotel-tab-icon { background: var(--tab); color: #fff; box-shadow: 0 6px 12px -4px color-mix(in srgb, var(--tab) 70%, transparent); }
.hotel-tab em { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--green-100); color: var(--green-700); font-size: 11.5px; font-style: normal; text-align: center; }
.hotel-tab em.is-empty { background: #fdf3e2; color: var(--gold-600); }

.hotel-panel { margin-bottom: 20px; }
.hotel-explainer h3, .hotel-panel h3.setup-group { margin-top: 0; }
.hotel-explainer h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.hotel-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.hotel-section-head h2 { margin: 0; font-size: 20px; font-weight: 600; }
.hotel-section-head p { max-width: 720px; margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }

.occupancy-dots { display: inline-flex; gap: 2px; margin-right: 8px; vertical-align: middle; }
.occupancy-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-600); }

/* Set-up checklist */
.glance-list { display: grid; margin: 0; padding: 0; list-style: none; }
.glance-list a { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.glance-list li:last-child a { border-bottom: 0; }
.glance-list a:hover strong { color: var(--green-700); }
.glance-dot { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border: 2px solid var(--line); border-radius: 50%; }
.is-done .glance-dot { border-color: var(--green-700); background: var(--green-700); color: #fff; }
.glance-dot .icon { width: 13px; height: 13px; stroke-width: 3; }
.glance-list strong { display: block; font-size: 13.5px; }
.glance-list small { display: block; color: var(--muted); font-size: 12px; }
.glance-list li:not(.is-done) small { color: var(--gold-600); }
.glance-go { width: 15px; height: 15px; margin-left: auto; color: var(--subtle); }

/* Contracts */
.contract-card { margin-bottom: 18px; border-left: 4px solid var(--line); }
.contract-card.status-live { border-left-color: #2fb36b; }
.contract-card.status-draft { border-left-color: var(--gold-500); }
.contract-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.contract-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.contract-title h3 { margin: 0; font: 600 18px var(--font-display); }
.contract-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.contract-meta span { display: inline-flex; align-items: center; gap: 5px; }
.contract-meta .icon { width: 14px; height: 14px; color: var(--gold-600); }
.contract-actions { display: flex; gap: 8px; flex: none; }
.coverage-label { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 12.5px; font-weight: 600; }
.coverage-label .icon { width: 14px; height: 14px; }
.coverage-label.is-complete { color: var(--green-600); }
.coverage-label.is-gap { color: var(--gold-600); }
.season-rates { color: var(--green-600); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.season-rates:hover { text-decoration: underline; }
.contract-add-season { margin-top: 8px; }
.contract-terms { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.contract-terms summary { color: var(--ink-2); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.contract-terms .detail-grid { margin-top: 12px; }

/* Rates matrix */
.rate-grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); align-items: start; }
.rate-manager { padding: 24px; }
.rate-manager-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.rate-manager-head h2 { margin: 0; font: 600 20px var(--font-display); }
.rate-manager-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.rate-pickers .field-row { margin-bottom: 6px; }
.season-dates { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.seg-toggle { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 12px; background: var(--line-soft); }
.seg-toggle label { position: relative; cursor: pointer; }
.seg-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.seg-toggle span { display: block; padding: 9px 10px; border-radius: 9px; color: var(--muted); font-size: 13.5px; font-weight: 600; text-align: center; transition: background-color .15s, color .15s, box-shadow .15s; }
.seg-toggle label:hover span { color: var(--ink); }
.seg-toggle input:checked + span { background: #fff; color: var(--green-800); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.seg-toggle input:focus-visible + span { box-shadow: var(--ring); }
.basis-options { display: grid; gap: 6px; }
.basis-options label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.basis-options label:hover { background: var(--surface-2); }
.basis-options input { width: 18px; height: 18px; margin: 0; accent-color: var(--green-800); }
.basis-options label:has(input:checked) { background: var(--green-50); font-weight: 600; }

.rate-entry { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.rate-entry-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.rate-entry-head h3 { margin: 0; font: 600 16px var(--font-display); }
.rate-entry-head span { color: var(--muted); font-size: 12.5px; }
.rate-entry-table th, .rate-entry-table td { padding: 10px 6px; }
.rate-entry-table thead th { padding-top: 4px; background: none; }
.rate-entry-table tbody th { color: var(--ink); font-size: 14px; font-weight: 500; text-align: left; }
.rate-entry-table tbody th small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.rate-input { display: inline-flex; align-items: center; width: 170px; height: 40px; border: 1.5px solid var(--input-border); border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.rate-input:focus-within { border-color: var(--green-600); box-shadow: 0 0 0 3px rgb(19 101 61 / 15%); }
.rate-input span { padding: 0 8px 0 12px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.rate-input input { flex: 1; min-width: 0; height: 100%; padding: 0 12px 0 0; border: 0; outline: none; background: transparent; font: 600 15px var(--font-display); text-align: right; font-variant-numeric: tabular-nums; }
.rate-input input::-webkit-inner-spin-button { display: none; }
.rate-total { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate-basis-hint { margin: 8px 0 0; }
.rate-entry-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }
.rate-dirty { color: var(--gold-600); font-size: 12.5px; font-weight: 600; }
.rate-side { display: grid; gap: 20px; }
.rate-side .panel { margin: 0; }
.coverage-table th, .coverage-table td { padding: 6px 4px; text-align: center; }
.coverage-table thead th { font-size: 10.5px; }
.coverage-table thead th small { display: block; color: var(--subtle); }
.coverage-table tbody th { max-width: 120px; color: var(--ink-2); font-size: 12.5px; font-weight: 500; text-align: left; }
.coverage-contract th { padding-top: 12px !important; color: var(--muted) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .5px; text-transform: uppercase; text-align: left !important; }
.coverage-cell { display: grid; place-items: center; width: 34px; height: 30px; margin: auto; border-radius: 8px; background: var(--line-soft); color: var(--subtle); font-size: 12px; font-weight: 700; text-decoration: none; }
.coverage-cell.is-filled { background: var(--green-100); color: var(--green-700); }
.coverage-cell:hover { box-shadow: 0 0 0 2px var(--green-600); }
.coverage-table td.is-current .coverage-cell { box-shadow: 0 0 0 2px var(--gold-500); }
.copy-form { display: grid; gap: 6px; }
.copy-form .label { margin: 6px 0 0; }
.copy-form .button { margin-top: 8px; justify-self: start; }

/* Children */
.age-ruler { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 3px; margin-bottom: 8px; }
.age-cell { display: grid; place-items: center; height: 38px; border-radius: 7px; font-size: 12px; }
.age-cell b { font-weight: 600; }
.age-free { background: #dcf3e6; color: var(--green-700); }
.age-paid { background: var(--gold-100); color: #7d5a20; }
.age-adult { background: var(--green-800); color: #fff; }
.age-unset { background: var(--line-soft); color: var(--subtle); }
.age-not-accepted { background: repeating-linear-gradient(135deg, var(--rose-bg) 0 6px, #fff 6px 9px); color: var(--rose); }
.age-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 4px; padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.age-legend li { display: inline-flex; align-items: center; gap: 6px; }
.age-legend i { width: 14px; height: 14px; border-radius: 4px; }
.child-settings .button { margin-top: 16px; }

/* Supplements */
.supplement-list { display: grid; margin: 0; padding: 0; list-style: none; }
.supplement-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.supplement-item:last-child { border-bottom: 0; }
.supplement-item.is-off { opacity: .55; }
.supplement-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--gold-100); color: var(--gold-600); }
.kind-discount .supplement-icon { background: #dcf3e6; color: var(--green-700); }
.supplement-icon .icon { width: 17px; height: 17px; }
.supplement-body strong { display: block; font-size: 14.5px; }
.supplement-body small { display: block; margin-top: 4px; }
.supplement-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; font-size: 12.5px; }
.sup-tag-mandatory { background: var(--rose-bg); color: var(--rose); }
.supplement-value { color: var(--ink); font: 600 15px var(--font-display); white-space: nowrap; font-variant-numeric: tabular-nums; }
.supplement-value.is-discount { color: var(--green-700); }
.switch-inline { margin-top: 8px; }

/* Season and supplement colours: one per season name, one per supplement type */
.season-peak { --season: #c8553d; }
.season-high { --season: #d38b26; }
.season-mid { --season: #2f9e64; }
.season-low { --season: #2b8a9e; }
.season-other-0 { --season: #7a68c2; }
.season-other-1 { --season: #3d7aa8; }
.season-other-2 { --season: #b0607e; }
.tone-gold { --tone: #b8862f; }
.tone-rose { --tone: #c0505c; }
.tone-orange { --tone: #d0702a; }
.tone-olive { --tone: #7d8a2e; }
.tone-sky { --tone: #3d7aa8; }
.tone-green { --tone: #1f7f4f; }
.tone-teal { --tone: #2b8a9e; }
.season-swatch { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--season, var(--subtle)); }
.season-chip { background: color-mix(in srgb, var(--season, #98a199) 13%, #fff); color: color-mix(in srgb, var(--season, #3c4a42) 72%, #000); }

/* Contract timeline: seasons laid out across the contract's dates */
.season-timeline { position: relative; margin: 4px 0 6px; padding-top: 20px; }
.timeline-track { position: relative; height: 36px; overflow: hidden; border-radius: 10px; background: repeating-linear-gradient(135deg, #fbf6ec 0 6px, #f3ecdc 6px 12px); box-shadow: inset 0 0 0 1px var(--line); }
.timeline-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 9px;
    overflow: hidden;
    border-right: 2px solid #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--season) 78%, #fff), var(--season));
    color: #fff;
    transform-origin: left;
    transition: filter .15s;
    animation: timeline-grow .6s cubic-bezier(.2, .8, .2, 1) both;
}
.timeline-seg:hover { filter: brightness(1.1) saturate(1.1); }
.timeline-seg b { overflow: hidden; font-size: 11.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 1px rgb(0 0 0 / 18%); }
@keyframes timeline-grow { from { transform: scaleX(0); opacity: 0; } }
.timeline-today { position: absolute; top: 0; width: 0; height: 0; }
.timeline-today b { position: absolute; top: 0; left: 0; padding: 0 7px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; white-space: nowrap; transform: translateX(-50%); }
.timeline-today::after { content: ""; position: absolute; top: 16px; left: -1px; height: 44px; border-left: 2px solid var(--ink); }
.timeline-months { position: relative; height: 20px; margin-top: 4px; }
.timeline-months span { position: absolute; top: 0; padding-left: 5px; border-left: 1px solid #d9d5c8; color: var(--muted); font-size: 11px; line-height: 16px; white-space: nowrap; }
.season-item { padding-left: 12px; border-left: 3px solid var(--season, var(--line)); }
.season-item.is-current { background: linear-gradient(90deg, color-mix(in srgb, var(--season, #2fb36b) 8%, #fff), transparent 70%); }

/* Room type cards */
.roomtype-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.roomtype-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: transform .2s, box-shadow .2s, border-color .2s; }
.roomtype-card:hover { border-color: #d9d5c8; box-shadow: 0 16px 32px -14px rgb(6 58 33 / 28%); transform: translateY(-2px); }
.roomtype-card.is-inactive { opacity: .6; }
.roomtype-card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-50); }
.roomtype-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.roomtype-card:hover .roomtype-card-media img { transform: scale(1.05); }
.roomtype-card-placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    background:
        radial-gradient(60% 80% at 85% 10%, rgb(197 150 74 / 28%), transparent 60%),
        linear-gradient(140deg, #e3efe6, #cfe4d6 55%, #f7eedb);
    color: var(--green-600);
}
.roomtype-card-placeholder .icon { width: 46px; height: 46px; opacity: .5; stroke-width: 1.4; }
.roomtype-card-flag { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / 92%); color: var(--ink-2); font-size: 11.5px; font-weight: 700; box-shadow: 0 2px 6px rgb(0 0 0 / 10%); }
.roomtype-card-body { flex: 1; padding: 14px 16px 12px; }
.roomtype-card-body h3 { margin: 0; font: 600 17px var(--font-display); letter-spacing: -.2px; }
.roomtype-card-body > p { margin: 2px 0 12px; color: var(--muted); font-size: 12.5px; }
.room-guests { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.guest-icons { display: inline-flex; align-items: flex-end; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, #7a68c2 12%, #fff); color: #6455ad; }
.guest-icons .icon { width: 15px; height: 15px; margin-right: -3px; stroke-width: 2.2; }
.guest-icons .guest-child { width: 11px; height: 11px; color: var(--gold-600); }
.room-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.room-facts li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.room-facts .icon { width: 12px; height: 12px; stroke-width: 2.6; }
.room-facts .is-yes { background: var(--green-50); color: var(--green-700); }
.room-facts .is-no { background: var(--line-soft); color: var(--muted); }
.roomtype-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.room-price small { display: block; color: var(--muted); font-size: 11px; line-height: 1.3; }
.room-price strong { display: block; color: var(--green-800); font: 600 18px var(--font-display); font-variant-numeric: tabular-nums; }
.room-price.is-missing strong { color: var(--gold-600); font-size: 14px; }
.roomtype-card-actions { display: flex; align-items: center; gap: 6px; }

/* Rates matrix in the season's colour */
.rate-manager { border-top: 4px solid var(--season, var(--line)); }
.rate-entry { border-color: color-mix(in srgb, var(--season, #e8e6de) 28%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--season, #fff) 7%, #fff), var(--surface-2) 140px); }
.rate-entry-head h3 { display: flex; align-items: center; gap: 8px; }
.occupancy-label { display: flex; align-items: center; gap: 12px; }
.occupancy-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 36px; padding: 0 8px; border-radius: 10px; background: color-mix(in srgb, var(--season, #1f7f4f) 14%, #fff); color: color-mix(in srgb, var(--season, #1f7f4f) 82%, #000); }
.occupancy-badge .icon { width: 15px; height: 15px; margin: 0 -2px; stroke-width: 2.2; }
.coverage-table tbody th .season-swatch { margin-right: 7px; vertical-align: -1px; }
.coverage-table .coverage-cell.is-filled { background: color-mix(in srgb, var(--season, #1f7f4f) 16%, #fff); color: color-mix(in srgb, var(--season, #1f7f4f) 80%, #000); }

/* Supplements in their type's colour */
.supplement-panel .panel-heading { align-items: center; }
.supplement-panel .panel-heading > div { margin-right: auto; }
.supplement-panel-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: #fff; box-shadow: 0 6px 14px -6px rgb(167 122 48 / 70%); }
.kind-discount .supplement-panel-icon { background: linear-gradient(135deg, #2fb36b, var(--green-600)); box-shadow: 0 6px 14px -6px rgb(19 101 61 / 70%); }
.supplement-panel-icon .icon { width: 19px; height: 19px; }
.supplement-item { margin: 0 -12px; padding: 14px 12px; border-radius: 12px; transition: background-color .15s; }
.supplement-item:hover { background: var(--surface-2); }
.supplement-item .supplement-icon { width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--tone, #b8862f) 13%, #fff); color: var(--tone, var(--gold-600)); }
.sup-tag-tone { background: color-mix(in srgb, var(--tone, #b8862f) 12%, #fff); color: color-mix(in srgb, var(--tone, #b8862f) 78%, #000); }

@media (prefers-reduced-motion: reduce) {
    .timeline-seg { animation: none; }
    .roomtype-card, .roomtype-card-media img { transition: none; }
}
@media (max-width: 1100px) {
    .rate-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
    .hotel-hero { grid-template-columns: 120px minmax(0, 1fr); }
    .hotel-hero-media { width: 120px; height: 90px; }
    .hotel-hero-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; }
}
@media (max-width: 640px) {
    .hotel-hero { grid-template-columns: minmax(0, 1fr); padding: 18px; }
    .hotel-hero-media { width: 100%; height: 150px; }
    .hotel-hero h1 { font-size: 23px; }
    .contract-head, .hotel-section-head { flex-direction: column; align-items: stretch; }
    .seg-toggle { grid-auto-flow: row; }
    .rate-input { width: 130px; }
    .rate-entry-table th:nth-child(3), .rate-entry-table td:nth-child(3) { display: none; }
    .age-ruler { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .supplement-item { grid-template-columns: auto minmax(0, 1fr) auto; }
    .supplement-value { grid-column: 2; }
}

/* ---------- Saving state (forms) ---------- */

.button.is-busy { pointer-events: none; }
.button.is-busy:not(.is-loading) { opacity: .55; }
.button.is-loading { cursor: progress; }
.button-spinner {
    width: 16px;
    height: 16px;
    flex: none;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .9;
    animation: zuri-spin .7s linear infinite;
}

.saving-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgb(246 245 240 / 72%);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    cursor: progress;
    animation: saving-in .2s ease-out;
}
@keyframes saving-in { from { opacity: 0; } }
.saving-card {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 240px;
    padding: 26px 32px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.saving-card .zuri-loader { margin-bottom: 6px; }
.saving-card strong { color: var(--ink); font: 600 16px var(--font-display); }
.saving-card small { color: var(--muted); font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
    .saving-overlay { animation: none; }
}

/* ---------- Lead picker ---------- */

.picker-dialog {
    width: min(1120px, calc(100% - 32px));
    max-height: min(820px, calc(100vh - 48px));
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: transparent;
    overflow: hidden;
    box-shadow: 0 40px 120px rgb(3 35 26 / 40%);
}
.picker-dialog::backdrop { background: rgb(3 35 26 / 55%); backdrop-filter: blur(6px); }
.picker-dialog[open] { animation: picker-in .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes picker-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.picker-shell {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    height: min(780px, calc(100vh - 48px));
    border-radius: 28px;
    overflow: hidden;
    background: var(--surface);
}
.picker-inline { height: auto; min-height: calc(100vh - 220px); border: 1px solid var(--line); box-shadow: var(--shadow); }
.picker-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px 40px 32px;
    border-right: 1px solid var(--line-soft);
    background:
        radial-gradient(120% 70% at 0% 100%, rgb(197 150 74 / 12%), transparent 60%),
        linear-gradient(180deg, #fbfaf6, var(--surface-2));
}
.picker-logo { width: 150px; height: auto; margin: -8px 0 28px -6px; }
.picker-intro h2 { margin: 0; font-size: 34px; font-weight: 700; line-height: 1.12; letter-spacing: -.8px; }
.picker-intro h2 em { color: var(--green-600); font-style: normal; }
.picker-intro > p { margin: 16px 0 28px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.picker-features { display: grid; gap: 16px; margin: 0 0 28px; padding: 0; list-style: none; }
.picker-features li { display: flex; align-items: center; gap: 14px; }
.picker-features li > span { width: 42px; height: 42px; display: grid; place-items: center; flex: none; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--green-700); box-shadow: var(--shadow-sm); }
.picker-features strong { display: block; font-size: 14.5px; }
.picker-features small { color: var(--muted); font-size: 12.5px; }
.picker-back { margin-top: auto; width: 100%; min-height: 48px; border: 1px solid #e9b4b9; border-radius: 999px; background: transparent; color: var(--rose); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.picker-back:hover { background: var(--rose-bg); }

.picker-main { position: relative; display: flex; flex-direction: column; min-height: 0; }
.picker-head { padding: 36px 40px 22px; border-bottom: 1px solid var(--line-soft); }
.picker-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.picker-title-row h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.3px; }
.picker-count { margin-left: auto; color: var(--green-600); font-size: 13.5px; font-weight: 700; }
.picker-x { margin-right: -10px; }
.picker-search .input { height: 50px; border-color: transparent; border-radius: 999px; background: var(--surface-2); font-size: 15px; }
.picker-search .input:focus { background: #fff; }
.picker-search > .icon + .input { padding-left: 46px; }
.picker-search > .icon { left: 18px; }

.picker-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 24px 32px 32px; scrollbar-width: thin; }
.picker-state { display: grid; place-items: center; align-content: center; gap: 14px; min-height: 100%; padding: 40px 0; color: var(--muted); text-align: center; }
.picker-state p { margin: 0; font-size: 14.5px; }
.picker-state[hidden] { display: none; }
.picker-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.picker-list li[hidden] { display: none; }
.pick-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 26px;
    border: 1px solid var(--line-soft);
    border-radius: 20px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 2px rgb(23 35 28 / 4%), 0 6px 18px rgb(23 35 28 / 4%);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pick-card:hover, .pick-card:focus-visible { border-color: var(--green-600); box-shadow: 0 0 0 1px var(--green-600), 0 12px 28px rgb(6 58 33 / 10%); transform: translateY(-1px); }
.pick-avatar { width: 64px; height: 64px; display: grid; place-items: center; flex: none; border-radius: 50%; background: linear-gradient(145deg, var(--green-700), var(--green-900)); color: #fff; font: 700 20px var(--font-display); letter-spacing: .5px; }
.pick-body { min-width: 0; flex: 1; }
.pick-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 600 18px var(--font-display); letter-spacing: -.2px; }
.pick-status { padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--st) 14%, #fff); color: color-mix(in srgb, var(--st) 80%, #000); font: 600 11px var(--font-body); }
.pick-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; color: var(--ink-2); font-size: 14px; }
.pick-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.pick-meta .icon { width: 15px; height: 15px; color: var(--muted); }
.pick-existing { padding: 1px 8px; border-radius: 999px; background: var(--gold-100); color: #7d5a20 !important; font-size: 12px; font-weight: 600; }
.pick-date { flex: none; text-align: right; color: var(--ink-2); font-size: 14.5px; }
.pick-date small { display: block; color: var(--green-700); font-size: 14px; font-weight: 700; }
.picker-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 14px; background: rgb(255 255 255 / 88%); backdrop-filter: blur(4px); color: var(--ink-2); font-weight: 600; }
.picker-overlay[hidden] { display: none; }
.picker-overlay p { margin: 0; }

/* ---------- Itinerary builder ---------- */

.builder-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.builder-back { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.builder-back:hover { color: var(--green-700); border-color: #cfcbbd; }
.builder-heading { min-width: 0; flex: 1; }
.builder-heading h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.5px; }
.crumbs { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--muted); font-size: 13.5px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--green-600); }
.crumbs .icon { width: 14px; height: 14px; }
.builder-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.trip-meta { display: grid; grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr) auto auto; align-items: end; gap: 16px 20px; margin-bottom: 20px; }
.input-lg { height: 48px; font: 600 17px var(--font-display); }
.trip-client { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); text-align: left; }
.trip-client:hover { border-color: #cfcbbd; }
.trip-client small { display: block; color: var(--muted); font-size: 11px; }
.trip-client strong { font-size: 13.5px; }
.trip-summary { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding-left: 20px; border-left: 1px solid var(--line-soft); }
.trip-summary strong { font: 600 15px var(--font-display); }
.trip-summary small { color: var(--muted); font-size: 12.5px; }
.trip-summary .summary-warn { color: var(--gold-600); font-weight: 600; }

.builder-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.day-rail { position: sticky; top: 84px; max-height: calc(100vh - 104px); display: flex; flex-direction: column; padding: 18px 16px; }
.day-rail-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 14px; }
.day-rail-head h2 { margin: 0; font: 700 13px var(--font-body); letter-spacing: 1px; text-transform: uppercase; }
.text-button-strong { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--green-700); font-size: 13.5px; font-weight: 700; }
.text-button-strong:hover { background: var(--green-50); }
.text-button-strong .icon { width: 16px; height: 16px; }
.day-list { display: grid; gap: 10px; margin: 0; padding: 2px 4px 4px; overflow-y: auto; list-style: none; scrollbar-width: thin; }
.day-item { position: relative; }
.day-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 14px 44px 14px 16px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--green-700);
    border-radius: 14px;
    background: #fff;
    text-align: left;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.day-card:hover { border-color: #cfcbbd; border-top-color: var(--green-700); }
.day-card.active { border-color: var(--green-800); background: linear-gradient(135deg, var(--green-700), var(--green-900)); color: #fff; box-shadow: 0 10px 24px rgb(6 58 33 / 25%); }
.day-card-top { display: flex; justify-content: space-between; gap: 8px; }
.day-num { font-size: 12.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.day-date { color: var(--muted); font-size: 12px; }
.day-card.active .day-date { color: rgb(255 255 255 / 70%); }
.day-title { font: 600 15px var(--font-display); line-height: 1.3; }
.day-sub { display: flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--muted); font-size: 12px; }
.day-sub .icon { width: 13px; height: 13px; flex: none; }
.day-sub.warn { color: var(--gold-600); font-weight: 600; }
.day-card.active .day-sub { color: rgb(255 255 255 / 75%); }
.day-card.active .day-sub.warn { color: var(--gold-300); }
.day-more { position: absolute; top: 12px; right: 6px; width: 32px; height: 32px; }
.day-card.active + .day-more { color: rgb(255 255 255 / 80%); }
.day-card.active + .day-more:hover { background: rgb(255 255 255 / 12%); color: #fff; }
.day-menu {
    position: absolute;
    top: 44px;
    right: 6px;
    z-index: 10;
    display: grid;
    min-width: 170px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgb(23 35 28 / 16%);
}
.day-menu button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-size: 13.5px; text-align: left; }
.day-menu button .icon { width: 15px; height: 15px; }
.day-menu button:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.day-menu button:disabled { opacity: .4; cursor: default; }
.day-menu .danger { color: var(--rose); }
.day-menu .icon.flip { transform: rotate(180deg); }
.day-menu .danger:hover:not(:disabled) { background: var(--rose-bg); color: var(--rose); }

.day-editor { padding: 0; overflow: hidden; }
.day-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; padding: 22px 24px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.readonly-field { display: flex; align-items: center; height: 44px; padding: 0 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 14.5px; white-space: nowrap; text-overflow: ellipsis; }
.readonly-field.placeholder { color: var(--subtle); }
.tabs { display: flex; gap: 4px; padding: 0 16px; overflow-x: auto; border-bottom: 1px solid var(--line-soft); scrollbar-width: none; }
.tab { display: inline-flex; align-items: center; gap: 6px; padding: 16px 12px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { border-bottom-color: var(--green-700); color: var(--green-700); }
.tab-count:empty { display: none; }
.tab-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--green-100); color: var(--green-700); font-size: 11.5px; }
.tab-panel { padding: 22px 24px 8px; }
.tab-panel h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.field-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-row [hidden], .field-row-3[hidden] { display: none; }
.travel-day-hint { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--sky-bg); color: #2b5a7e; }

.activity-editor { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.activity-row { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.activity-row-head { display: grid; grid-template-columns: auto 140px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.activity-num { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--green-700); color: #fff; font-size: 12px; font-weight: 700; }
.activity-row .input { height: 40px; background: #fff; }
.activity-row .textarea { height: auto; min-height: 56px; }
.quick-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.quick-label { margin: 0 4px 0 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.chip-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 999px; }

.meal-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.meal-option { position: relative; cursor: pointer; }
.meal-option input { position: absolute; opacity: 0; pointer-events: none; }
.meal-option > span { display: flex; align-items: center; justify-content: space-between; padding: 16px; border: 1px solid #dcd9ce; border-radius: 12px; background: #fff; transition: border-color .15s, background-color .15s; }
.meal-option strong { font-size: 14.5px; }
.meal-option small { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--line-soft); color: var(--muted); font-weight: 700; }
.meal-option input:checked + span { border-color: var(--green-700); background: var(--green-50); box-shadow: 0 0 0 1px var(--green-700); }
.meal-option input:checked + span small { background: var(--green-700); color: #fff; }
.meal-option input:focus-visible + span { box-shadow: var(--ring); }

.image-add { display: flex; gap: 10px; margin-top: 16px; }
.image-add .input-wrap { flex: 1; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 16px 0; padding: 0; list-style: none; }
.image-tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--line-soft); }
.image-tile img { width: 100%; height: 100%; object-fit: cover; }
.image-tile.broken img { visibility: hidden; }
.image-tile.broken::after { content: "Image unavailable"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.image-tile .icon-button { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; background: rgb(255 255 255 / 90%); }
[data-map-link] { margin: 16px 0 8px; }
[data-map-link][hidden] { display: none; }

.day-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 14px 24px; border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.day-footer .button:disabled { opacity: .4; cursor: default; }

/* Lead info drawer */
.drawer-backdrop { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; background: rgb(3 35 26 / 40%); backdrop-filter: blur(2px); }
.drawer-backdrop[hidden] { display: none; }
.drawer { width: min(420px, 100%); height: 100%; padding: 24px; overflow-y: auto; background: var(--surface); box-shadow: -20px 0 60px rgb(3 35 26 / 25%); animation: drawer-in .22s ease-out; }
@keyframes drawer-in { from { transform: translateX(30px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.drawer-head h2 { margin: 0; font-size: 20px; }
.drawer-head p { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.drawer-head .icon-button { margin-left: auto; align-self: flex-start; }
.drawer-facts { display: grid; gap: 0; margin: 8px 0 18px; }
.drawer-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.drawer-facts dt { color: var(--muted); }
.drawer-facts dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word; }
.drawer-facts a { color: var(--green-600); }
.drawer h3 { margin: 18px 0 8px; color: var(--muted); font: 600 11.5px var(--font-body); letter-spacing: .6px; text-transform: uppercase; }
.drawer-link { margin-top: 24px; }

/* Quick preview dialog */
.preview-dialog { width: min(640px, calc(100% - 32px)); max-height: calc(100vh - 64px); }
.preview-days { display: grid; gap: 10px; max-height: 60vh; margin: 12px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.preview-day { padding: 12px 14px; border: 1px solid var(--line-soft); border-left: 3px solid var(--green-600); border-radius: 10px; background: var(--surface-2); }
.preview-day-head { display: flex; justify-content: space-between; font-size: 12px; }
.preview-day strong { display: block; margin-top: 2px; font-size: 15px; }
.preview-day p { margin: 4px 0 0; color: var(--ink-2); font-size: 13px; }

/* Itineraries index */
.trips-panel { margin-bottom: 28px; }
.section-heading { margin: 0 0 14px; }
.section-heading h2 { margin: 0; font-size: 20px; font-weight: 600; }
.section-heading p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }

/* ---------- Printable itinerary ---------- */

.trip-hero .hero-band { align-items: center; }
.trip-hero-emblem { width: 64px; height: 64px; flex: none; }
.trip-days { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.trip-day { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; }
.trip-day-date { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 18px; text-align: center; }
.trip-day-date::after { content: ""; position: absolute; top: 112px; bottom: -18px; left: 50%; width: 2px; background: var(--line); }
.trip-day:last-child .trip-day-date::after { display: none; }
.trip-day-num { padding: 3px 10px; border-radius: 999px; background: var(--green-800); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.trip-day-date strong { margin-top: 8px; font: 600 30px/1 var(--font-display); }
.trip-day-date small { margin-top: 4px; color: var(--muted); font-size: 12.5px; text-transform: uppercase; }
.trip-day-card { padding: 22px 24px; }
.trip-day-card h2 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.3px; }
.trip-day-story { margin: 8px 0 0; color: var(--ink-2); line-height: 1.65; }
.trip-activities { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.trip-activities li { display: flex; gap: 12px; align-items: flex-start; }
.trip-activities p { margin: 2px 0 0; color: var(--ink-2); font-size: 13.5px; }
.time-chip { flex: none; min-width: 78px; padding: 3px 8px; border-radius: 999px; background: var(--gold-100); color: #7d5a20; font-size: 11.5px; font-weight: 600; text-align: center; }
.trip-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-soft); }
.trip-facts dt { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.trip-facts dt .icon { width: 14px; height: 14px; color: var(--gold-600); }
.trip-facts dd { margin: 4px 0 0; font-size: 14px; }
.trip-facts dd small { display: block; color: var(--muted); font-size: 12.5px; }
.trip-facts dd a { color: var(--green-600); }
.trip-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 16px; }
.trip-images img { width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; object-fit: cover; }
.team-note { display: flex; gap: 8px; margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--sky-bg); color: #2b5a7e; font-size: 13px; }
.team-note .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.trip-doc-footer { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 32px 0 8px; color: var(--muted); font-size: 12.5px; text-align: center; }
.trip-doc-footer p { margin: 0; }

@media print {
    .sidebar, .topbar, .app-footer, .no-print, .skip-link, .toast { display: none !important; }
    .main-shell { margin: 0; }
    .main-content { padding: 0; max-width: none; }
    body { background: #fff; }
    .lead-hero, .panel { box-shadow: none; }
    .trip-day { break-inside: avoid; }
    .hero-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Rooms & occupancy ---------- */

.rooming { margin-top: 22px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.rooming-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rooming-head h4 { margin: 0; font: 600 16px var(--font-display); }
.rooming-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.rooming-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rooming-actions .button { min-height: 38px; }

.allocation { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; }
.allocation.ok { background: var(--green-50); }
.allocation.warn { background: #fcf7ec; }
.alloc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.alloc-chip .icon { width: 14px; height: 14px; }
.alloc-chip.ok { color: var(--green-600); }
.alloc-chip.warn { color: var(--gold-600); }
.alloc-note { color: var(--ink-2); }
.allocation.warn .alloc-note { color: #7d5a20; font-weight: 600; }

.room-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.room-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.room-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.room-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--green-800); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.room-badge .icon { width: 14px; height: 14px; }
.room-type { width: auto; min-width: 160px; height: 38px; font-weight: 600; }
.room-beds { color: var(--muted); font-size: 12.5px; }
.room-actions { display: flex; gap: 2px; margin-left: auto; }
.room-actions .icon-button { width: 34px; height: 34px; }
.icon-danger:hover { background: var(--rose-bg); color: var(--rose); }

.room-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 16px; margin-top: 14px; }
.counter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.counter-label { color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.counter { display: inline-flex; align-items: center; width: max-content; border: 1px solid #dcd9ce; border-radius: 10px; background: #fff; overflow: hidden; }
.counter-btn { width: 38px; height: 38px; border: 0; background: var(--surface-2); color: var(--ink-2); font-size: 18px; line-height: 1; transition: background-color .15s; }
.counter-btn:hover:not(:disabled) { background: var(--line-soft); }
.counter-btn:disabled { color: #c9c5b8; cursor: default; }
.counter-value { min-width: 44px; text-align: center; font: 600 15px var(--font-display); font-variant-numeric: tabular-nums; }
.counter-hint { color: var(--subtle); font-size: 11.5px; }
.counter-field select.input { height: 40px; }

.child-ages { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.child-age-row { display: flex; gap: 8px; flex-wrap: wrap; }
.child-age { width: auto; min-width: 150px; height: 38px; }
.child-age.missing { border-color: var(--gold-500); background-color: #fffcf5; }

.room-extras { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.room-extras .input { height: 38px; flex: 1; font-size: 13.5px; }
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--green-700); }

.room-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; }
.room-status .icon { width: 15px; height: 15px; flex: none; }
.room-status.ok { background: var(--green-50); color: var(--green-600); }
.room-status.info { background: var(--sky-bg); color: #2b5a7e; }
.room-status.warn { background: #fcf7ec; color: #7d5a20; }
.room-status .text-button-strong { margin-left: auto; padding: 2px 8px; font-size: 12.5px; }
.room-empty { padding: 18px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 13.5px; text-align: center; }
.rooming-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

/* Rooms on the printable itinerary */
.trip-rooms { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-2); }
.trip-rooms li { padding-left: 12px; border-left: 2px solid var(--green-100); }
.trip-rooms span { font-weight: 600; color: var(--ink); }
.trip-rooms em { display: block; color: var(--muted); font-style: normal; }

/* ---------- Simple content pages ---------- */

.prose { max-width: 760px; }
.prose h1 { margin: 0 0 12px; font-size: 28px; font-weight: 600; letter-spacing: -.5px; }
.prose h2 { margin: 24px 0 8px; font-size: 18px; font-weight: 600; }
.prose p { color: var(--ink-2); line-height: 1.65; }

/* ---------- Footer ---------- */

.app-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 32px;
    border-top: 1px solid var(--line);
    color: var(--subtle);
    font-size: 12.5px;
}
.tagline { color: var(--gold-600); font-weight: 500; }

/* ---------- Responsive ---------- */

@media (max-width: 1440px) {
    .dash-grid-c { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .col-interest { display: none; }
    .lower-grid { grid-template-columns: minmax(0, 1fr); }
    .lower-grid .leads-panel { display: grid; grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1280px) {
    .trip-meta { grid-template-columns: minmax(0, 1fr) minmax(160px, 220px); }
    .trip-title-field { grid-column: 1 / -1; }
    .builder-grid { grid-template-columns: minmax(0, 1fr); }
    .day-rail { position: static; max-height: none; }
    .day-list { display: flex; overflow-x: auto; padding-bottom: 8px; }
    .day-item { flex: 0 0 230px; }
    .dash-grid-a, .dash-grid-b { grid-template-columns: minmax(0, 1fr); }
    .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat:nth-child(3) { border-left: 0; }
    .stat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
    .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fact:nth-child(3) { border-left: 0; }
    .fact:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
    .lead-aside { position: static; }
    .status-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .form-layout { grid-template-columns: minmax(0, 1fr); }
    .form-aside { position: static; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
    .picker-shell { grid-template-columns: minmax(0, 1fr); }
    .picker-intro { display: none; }
    .sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: none;
    }
    .sidebar.open { transform: none; box-shadow: 20px 0 60px rgb(3 35 26 / 30%); }
    .main-shell { margin-left: 0; }
    .topbar { padding: 0 20px; }
    .main-content { padding: 24px 20px 32px; }
    .app-footer { padding: 16px 20px; }
}

@media (max-width: 640px) {
    .topbar { height: 58px; gap: 6px; padding: 0 12px 0 16px; }
    .breadcrumb > span, .breadcrumb .icon { display: none; }
    .search-box { width: 38px; padding: 0; border-color: transparent; background: transparent; justify-content: center; }
    .search-box input, .search-box kbd { display: none; }
    .search-box:focus-within { width: 100%; padding: 0 12px; }
    .search-box:focus-within input { display: block; }
    .main-content { padding: 20px 16px 28px; }
    .page-heading { flex-direction: column; align-items: stretch; }
    .page-heading h1 { font-size: 24px; }
    .heading-actions .button { flex: 1; }
    .metric-grid { gap: 12px; }
    .metric-card { padding: 14px; }
    .metric-value { font-size: 24px; }
    .metric-foot { flex-wrap: wrap; font-size: 11.5px; }
    .sparkline { display: none; }
    .panel { padding: 16px; }
    .panel-heading { flex-wrap: wrap; }
    .table-wrap { margin: 0 -16px; }
    th:first-child, td:first-child { padding-left: 16px; }
    .calendar-cell { min-height: 52px; padding: 4px; }
    .day-number { width: 22px; height: 22px; font-size: 11.5px; }
    .event { display: block; height: 6px; margin-top: 3px; padding: 0; border-left: 0; background: var(--ev); font-size: 0; }
    .app-footer { flex-direction: column; gap: 2px; padding: 14px 16px; }
    .field-row, .field-row-price { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .segmented, .segmented-3, .metric-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .toolbar-search { flex: 1 1 100%; }
    .rooming { padding: 14px; }
    .rooming-actions, .rooming-actions .button { width: 100%; }
    .room-head { gap: 8px; }
    .room-actions { order: 2; }
    .room-type { order: 3; flex: 1 1 100%; min-width: 0; }
    .room-beds { order: 4; width: 100%; }
    .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .counter { width: 100%; }
    .counter-value { flex: 1; min-width: 0; }
    .room-extras { flex-direction: column; align-items: stretch; }
    .child-age { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .picker-dialog { width: 100%; max-width: none; max-height: none; height: 100%; margin: 0; border-radius: 0; }
    .picker-title-row h3 { font-size: 20px; }
    .picker-shell { height: 100vh; border-radius: 0; }
    .picker-inline { height: auto; border-radius: var(--radius-lg); }
    .picker-head { padding: 20px 18px 16px; }
    .picker-body { padding: 16px; }
    .pick-card { flex-wrap: wrap; gap: 12px 14px; padding: 16px; }
    .pick-avatar { width: 48px; height: 48px; font-size: 16px; }
    .pick-date { width: 100%; padding-left: 62px; text-align: left; }
    .pick-date small { display: inline; margin-right: 6px; }
    .builder-head { flex-wrap: wrap; }
    .builder-actions { width: 100%; }
    .builder-actions .button { flex: 1 1 auto; }
    .trip-meta { grid-template-columns: minmax(0, 1fr); }
    .trip-summary { padding-left: 0; border-left: 0; }
    .day-top, .field-row-3, .meal-options { grid-template-columns: minmax(0, 1fr); }
    .tab-panel, .day-top { padding-left: 16px; padding-right: 16px; }
    .activity-row-head { grid-template-columns: auto minmax(0, 1fr) auto; }
    .activity-row-head input { grid-column: 1 / -1; grid-row: 2; }
    .image-add { flex-direction: column; }
    .day-footer { padding: 12px 16px; }
    .day-footer .button-ghost { padding: 0 8px; font-size: 0; }
    .day-footer .button-ghost .icon { width: 20px; height: 20px; }
    .trip-day { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .trip-day-date { flex-direction: row; gap: 8px; padding-top: 0; }
    .trip-day-date::after { display: none; }
    .trip-day-date strong { margin: 0; font-size: 18px; }
    .trip-day-date small { margin: 0; }
    .dash-grid-c { grid-template-columns: minmax(0, 1fr); }
    .range-filter .view-toggle { width: 100%; overflow-x: auto; }
    .range-filter .view-toggle a { flex: 1 0 auto; justify-content: center; padding: 0 10px; }
    .funnel-step { grid-template-columns: 92px minmax(0, 1fr); }
    .funnel-conv { margin-left: 104px; }
    .stat { padding: 14px; gap: 10px; }
    .stat-icon { width: 34px; height: 34px; border-radius: 10px; }
    .stat strong { font-size: 21px; }
    .stat small { display: none; }
    .pipeline-filter { padding: 12px 16px 0; }
    .funnel-bar { margin: 0 -16px; }
    .list-toolbar { padding: 12px 16px; }
    /* Row 1: search + view switch. Row 2: the two dropdowns, half width each. */
    .toolbar-grow { flex: 1 1 calc(100% - 110px); min-width: 0; }
    .view-toggle { order: 1; }
    .view-toggle span { display: none; }
    .toolbar-select { order: 2; flex: 1 1 calc(50% - 5px); min-width: 0; }
    .toolbar-select > .icon { display: none; }
    .list-toolbar .toolbar-select > .icon + .input { padding-left: 12px; }

    /* Lead rows become stacked cards: name + status on top, trip underneath. */
    .lead-table, .lead-table tbody { display: block; }
    .lead-table thead { display: none; }
    .lead-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "lead status" "trip trip";
        gap: 8px 12px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--line-soft);
    }
    .lead-table td { display: none; padding: 0 !important; border: 0; white-space: normal; }
    .lead-table td:nth-child(1) { display: block; grid-area: lead; }
    .lead-table td:nth-child(2) { display: block; grid-area: trip; padding-left: 50px !important; font-size: 13px; }
    .lead-table td:nth-child(6) { display: block; grid-area: status; text-align: right; }
    .board { grid-template-columns: repeat(5, 260px); padding: 12px 16px 16px; }
    .hero-band { flex-direction: column; padding: 22px 18px; }
    .hero-band h1 { font-size: 25px; }
    .avatar-xl { width: 54px; height: 54px; font-size: 18px; }
    .hero-identity { align-items: flex-start; gap: 14px; }
    .hero-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
    .fact { padding: 16px 18px; }
    .fact dd { font-size: 16px; }
    .hero-progress { padding: 18px; }
    .pipeline { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .stage:not(:last-child)::after { left: 19px; right: auto; top: 40px; bottom: -14px; width: 2px; height: auto; }
    .status-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lead-title { align-items: flex-start; }
    .avatar-lg { width: 44px; height: 44px; font-size: 15px; }
    .row-actions .icon-button:first-child { display: none; }
    .module-page { padding: 20px; }
    .form-section { padding: 18px; }
    .form-actions { position: static; flex-wrap: wrap; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
    .form-actions .spacer { display: none; }
    .form-actions .button-primary { order: -1; flex: 1 1 100%; }
    .form-actions .button-secondary { flex: 1; }
    .toast { left: 16px; right: 16px; bottom: 16px; }
}

@media (max-width: 380px) {
    .metric-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 1280px) {
    .itinerary-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .itinerary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .itinerary-overview-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .status-chart-layout { flex-direction: column; gap: 12px; padding: 8px 0; }
    .status-legend { width: 100%; }
    .upcoming-item { flex-wrap: wrap; }
    .upcoming-item .badge { margin-left: 54px; }
    .monthly-chart { height: 160px; gap: 6px; }
    .month-column { padding: 0 1px; }
    .month-label { font-size: 8px; }
    .month-value { font-size: 8px; }
    .itinerary-activity-item { align-items: flex-start; }
    .itinerary-activity-item time { font-size: 10px; }
}

@media (max-width: 380px) {
    .itinerary-metrics { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Lead form ---------- */

/* Header: brand band with the four steps underneath */
.form-hero .hero-band { padding: 26px 28px; }
.form-hero .hero-band p { max-width: 560px; margin: 0; color: rgb(247 243 232 / 78%); font-size: 14px; line-height: 1.5; }
.form-hero .hero-band .req { color: var(--gold-300); }
.form-hero .hero-band h1 { margin-bottom: 6px; }
.hero-icon {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    flex: none;
    border: 1px solid rgb(226 196 140 / 30%);
    border-radius: 18px;
    background: rgb(197 150 74 / 16%);
    color: var(--gold-300);
}
.hero-icon .icon { width: 26px; height: 26px; }

.form-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.form-steps li + li { border-left: 1px solid var(--line-soft); }
.form-steps a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s;
}
.form-steps a:hover { background: var(--surface-2); }
.form-steps a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.form-steps li.current a::after { transform: none; }
.form-steps strong { display: block; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.form-steps small { display: block; color: var(--muted); font-size: 12px; }
.form-step-dot {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: none;
    border: 1.5px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    font: 600 13px var(--font-display);
    transition: background-color .2s, border-color .2s, color .2s;
}
.form-steps li.current .form-step-dot { border-color: var(--gold-500); color: var(--gold-600); }
.form-steps li.done .form-step-dot {
    border-color: var(--green-700);
    background: var(--green-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 15px;
    color: transparent;
}

/* Sections: icon tile, step label and a live "Complete" chip */
[data-lead-form] .form-section {
    padding: 26px 28px 28px;
    scroll-margin-top: 84px;
    transition: border-color .2s, box-shadow .2s;
}
[data-lead-form] .form-section:focus-within { border-color: rgb(19 101 61 / 28%); box-shadow: var(--shadow), 0 0 0 4px rgb(19 101 61 / 5%); }
[data-lead-form] .form-section-head { align-items: flex-start; margin: -2px 0 6px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
[data-lead-form] .form-section-head > div { flex: 1; min-width: 0; }
[data-lead-form] .form-section-head h2 { font-size: 18px; letter-spacing: -.2px; }
[data-lead-form] .step {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--green-50);
    color: var(--green-700);
    box-shadow: inset 0 0 0 1px var(--green-100);
    transition: background-color .2s, color .2s;
}
[data-lead-form] .step .icon { width: 20px; height: 20px; }
[data-lead-form] .is-complete .step { background: var(--green-700); color: #fff; box-shadow: none; }
.step-label { display: block; margin-bottom: 2px; color: var(--gold-600); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.step-state {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--line-soft);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.step-state:empty { display: none; }
.is-complete .step-state { background: var(--green-50); color: var(--green-700); }

/* One tick shape, used as a mask so it takes the element's colour */
.is-complete .step-state::before,
[data-lead-form] .pill-options input[type="checkbox"]:checked + span::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.is-complete .step-state::before { background: currentColor; }

/* Softer inputs that turn white while editing */
[data-lead-form] .input { border-radius: 12px; background-color: var(--surface-2); }
[data-lead-form] .input:hover, [data-lead-form] .input:focus { background-color: #fff; }
[data-lead-form] .input-wrap > .icon { transition: color .15s; }
[data-lead-form] .input-wrap:focus-within > .icon { color: var(--green-600); }
[data-lead-form] .stepper-btn { background: #fff; }
[data-lead-form] .stepper-btn:first-child { border-radius: 12px 0 0 12px; }
[data-lead-form] .stepper-btn:last-child { border-radius: 0 12px 12px 0; }
[data-lead-form] .stepper .input { border-radius: 0; background-color: #fff; font: 600 16px var(--font-display); }
[data-lead-form] .input-wrap.has-prefix .prefix { border-radius: 11px 0 0 11px; }

/* Chosen interests and destinations get a gold tick */
[data-lead-form] .pill-options span { gap: 6px; background: #fff; }
[data-lead-form] .pill-options input[type="checkbox"]:checked + span::before { background: var(--gold-300); }
[data-lead-form] .pill-options input:checked + span { box-shadow: 0 2px 6px rgb(6 58 33 / 18%); }

/* Starting status: colour-coded cards */
.status-cards label { position: relative; overflow: hidden; background: #fff; }
.status-cards label::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--st); opacity: .5; transition: opacity .15s; }
.status-cards input { accent-color: var(--green-700); }
.status-cards strong { display: flex; align-items: center; gap: 7px; }
.status-cards strong::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st); }
.status-cards label:hover { border-color: #bdb8a8; }
.status-cards label:has(input:checked) { border-color: var(--green-700); background: var(--green-50); box-shadow: 0 0 0 1px var(--green-700); }
.status-cards label:has(input:checked)::before { opacity: 1; }

/* Summary: a dark "ticket" with the guest and form progress */
.enquiry-card { padding: 0; overflow: hidden; }
.enquiry-card > .summary-list, .enquiry-card > .hint { margin-inline: 20px; }
.enquiry-card > .hint:not(:empty) { margin-bottom: 18px; }
.enquiry-ticket {
    position: relative;
    padding: 18px 20px 22px;
    overflow: hidden;
    color: #f7f3e8;
    background:
        radial-gradient(90% 120% at 100% 0%, rgb(197 150 74 / 24%), transparent 60%),
        linear-gradient(150deg, var(--green-700), var(--green-900));
}
/* Ticket perforation along the bottom edge */
.enquiry-ticket::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -5px;
    height: 10px;
    background: radial-gradient(circle at 7px 5px, var(--surface) 4px, transparent 4.5px) repeat-x 0 0 / 14px 10px;
}
.enquiry-watermark { position: absolute; right: -24px; top: -22px; width: 140px; height: 140px; opacity: .08; pointer-events: none; }
.enquiry-label { position: relative; color: var(--gold-300); font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; }
.enquiry-who { position: relative; display: flex; align-items: center; gap: 12px; margin: 12px 0 18px; }
.enquiry-who > div { min-width: 0; }
.enquiry-who strong { display: block; overflow: hidden; color: #fff; font: 600 19px/1.2 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.enquiry-who small { display: block; margin-top: 2px; color: rgb(247 243 232 / 70%); font-size: 13px; }
.enquiry-who .avatar { flex: none; box-shadow: 0 0 0 3px rgb(255 255 255 / 12%); }
.enquiry-progress { position: relative; }
.enquiry-progress-head { display: flex; justify-content: space-between; margin-bottom: 7px; color: rgb(247 243 232 / 75%); font-size: 12px; font-weight: 600; }
.enquiry-progress-head span:last-child { color: var(--gold-300); font-variant-numeric: tabular-nums; }
.enquiry-meter { height: 6px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / 12%); }
.enquiry-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); transition: width .35s ease; }
.enquiry-ticket + .summary-list { padding-top: 18px; }

@media (max-width: 960px) {
    .form-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-steps li:nth-child(3) { border-left: 0; }
    .form-steps li:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}

@media (max-width: 640px) {
    .form-hero .hero-band { padding: 22px 18px; }
    .hero-icon { display: none; }
    .form-steps a { padding: 12px 14px; }
    .form-steps small { display: none; }
    [data-lead-form] .form-section { padding: 20px 16px 22px; }
    .step-state { display: none; }
}

/* ---------- Sign-out screens ---------- */

.auth-page {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(60% 50% at 85% 10%, rgb(197 150 74 / 20%), transparent 70%),
        radial-gradient(50% 60% at 0% 100%, rgb(31 127 79 / 30%), transparent 70%),
        linear-gradient(160deg, var(--green-800) 0%, var(--green-900) 55%, var(--green-950) 100%);
}
.auth-watermark {
    position: fixed;
    right: -120px;
    bottom: -140px;
    width: 560px;
    height: 560px;
    opacity: .05;
    pointer-events: none;
}
.auth-shell {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 40px 16px;
}
.auth-brand { display: inline-flex; align-items: center; gap: 12px; color: #f7f3e8; font: 600 22px var(--font-display); letter-spacing: -.3px; text-decoration: none; }
.auth-brand .brand-chip { margin-left: 4px; vertical-align: 3px; }

.auth-card {
    width: 100%;
    max-width: 440px;
    padding: 36px 36px 32px;
    border: 1px solid rgb(255 255 255 / 60%);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 30px 80px rgb(3 20 12 / 45%);
    text-align: center;
    animation: auth-in .35s ease-out;
}
@keyframes auth-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.auth-card h1 { margin: 18px 0 6px; font-size: 26px; font-weight: 600; letter-spacing: -.5px; }
.auth-card > p { margin: 0 auto; max-width: 320px; color: var(--muted); font-size: 14.5px; }

.auth-avatar { position: relative; display: inline-block; }
.auth-avatar .avatar-xl { box-shadow: 0 0 0 6px var(--gold-100); }
.auth-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background: var(--green-700);
    color: #fff;
}
.auth-badge .icon { width: 14px; height: 14px; }
.auth-check {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green-700);
    color: #fff;
    box-shadow: 0 0 0 8px var(--green-50), 0 0 0 9px var(--green-100);
    animation: auth-pop .45s .1s cubic-bezier(.2, 1.4, .4, 1) both;
}
.auth-check .icon { width: 36px; height: 36px; stroke-width: 2.2; }
@keyframes auth-pop { from { transform: scale(.4); opacity: 0; } }

.auth-account {
    margin: 24px 0 0;
    padding: 14px 16px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: var(--surface-2);
}
.auth-account-label { display: block; color: var(--gold-600); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.auth-account strong { display: block; margin-top: 4px; font-size: 15px; }
.auth-account small { display: block; color: var(--muted); font-size: 12.5px; word-break: break-word; }

.auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.auth-actions .button { min-height: 46px; border-radius: 12px; font-size: 14px; }
.auth-actions-single { grid-template-columns: 1fr; }
.auth-card > .auth-note { display: flex; align-items: center; justify-content: center; gap: 7px; max-width: none; margin: 18px 0 0; color: var(--muted); font-size: 12.5px; }
.auth-note .icon { width: 15px; height: 15px; color: var(--gold-600); }

.auth-foot { margin: 0; color: rgb(247 243 232 / 55%); font-size: 12.5px; }
.auth-foot a { color: var(--gold-300); text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .auth-card { padding: 28px 20px 24px; border-radius: 18px; }
    .auth-actions { grid-template-columns: 1fr; }
    .auth-actions .button-primary { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card, .auth-check { animation: none; }
}

/* ---------- Login ---------- */

.login-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 40%)), url("../img/login-bg.webp") center / cover no-repeat #3a2a2a;
    color: #fff;
    font-family: 'Outfit', var(--font-body);
}
.login-card {
    width: 100%;
    max-width: 450px;
    padding: 48px;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 24px;
    background: rgb(255 255 255 / 15%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 50%);
    animation: login-in .8s cubic-bezier(.4, 0, .2, 1);
}
@keyframes login-in { from { opacity: 0; transform: translateY(30px); } }

.login-header { margin-bottom: 40px; text-align: center; }
.login-header h1 { margin: 0 0 8px; color: #fff; font: 700 40px/1.1 'Outfit', sans-serif; letter-spacing: -1px; }
.login-header p { margin: 0; color: rgb(255 255 255 / 80%); font-size: 17.5px; }

.login-group { margin-bottom: 24px; }
.login-group label { display: block; margin-bottom: 8px; color: rgb(255 255 255 / 90%); font-size: 14.5px; font-weight: 500; }
.login-input { position: relative; display: flex; align-items: center; }
.login-input > .icon {
    position: absolute;
    left: 16px;
    width: 20px;
    height: 20px;
    color: rgb(255 255 255 / 60%);
    pointer-events: none;
    transition: color .3s, transform .3s;
}
.login-input:focus-within > .icon { color: #2ecc71; transform: scale(1.1); }
.login-input input {
    width: 100%;
    padding: 13px 16px 13px 48px;
    border: 1.5px solid rgb(255 255 255 / 30%);
    border-radius: 12px;
    outline: none;
    background: rgb(255 255 255 / 5%);
    color: #fff;
    font: 400 16px 'Outfit', sans-serif;
    transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.login-input input[type="password"], .login-input input#Password { padding-right: 48px; }
.login-input input::placeholder { color: rgb(255 255 255 / 40%); }
/* Edge adds its own reveal button; ours is used instead. */
.login-input input::-ms-reveal, .login-input input::-ms-clear { display: none; }
.login-input input:focus { border-color: rgb(255 255 255 / 50%); background: rgb(255 255 255 / 8%); box-shadow: 0 0 0 4px rgb(255 255 255 / 10%); }
.login-input input:-webkit-autofill,
.login-input input:-webkit-autofill:hover,
.login-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    -webkit-box-shadow: inset 0 0 0 1000px rgb(255 255 255 / 5%);
    transition: background-color 5000s ease-in-out;
}
.login-input input.input-validation-error { border-color: rgb(255 138 128 / 80%); }
.login-reveal {
    position: absolute;
    right: 8px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgb(255 255 255 / 60%);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.login-reveal:hover { background: rgb(255 255 255 / 10%); color: #fff; }
.login-reveal .icon { width: 18px; height: 18px; }
.login-error { display: block; margin-top: 6px; color: #ffc9c2; font-size: 13px; font-weight: 500; }
.login-error:empty { display: none; }

.login-alert {
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid rgb(255 138 128 / 45%);
    border-radius: 12px;
    background: rgb(185 68 79 / 28%);
    color: #fff;
    font-size: 14px;
}
.login-alert.validation-summary-valid { display: none; }
.login-alert ul { margin: 0; padding: 0; list-style: none; }

.login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 32px; font-size: 13.5px; }
.remember-me { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.remember-me input { width: 14px; height: 14px; margin: 0; accent-color: #2ecc71; }
.login-link { padding: 0; border: 0; background: none; color: rgb(255 255 255 / 50%); font: 500 15px 'Outfit', sans-serif; text-decoration: none; cursor: pointer; }
.login-link:hover { color: #fff; text-decoration: underline; }

.login-btn {
    position: relative;
    width: 100%;
    padding: 16px;
    border: 0;
    border-radius: 12px;
    background: #0a4d3c;
    color: #fff;
    font: 600 17.5px 'Outfit', sans-serif;
    cursor: pointer;
    box-shadow: 0 10px 20px -5px rgb(10 77 60 / 40%);
    transition: background-color .3s, transform .3s, box-shadow .3s;
}
.login-btn:hover { background: #146c54; transform: translateY(-2px); box-shadow: 0 15px 25px -5px rgb(10 77 60 / 50%); }
.login-btn:active { transform: none; }
.login-btn:focus-visible { outline: 3px solid rgb(46 204 113 / 60%); outline-offset: 2px; }
.login-btn.loading { color: transparent; pointer-events: none; }
.login-btn.loading::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 22px;
    height: 22px;
    margin: auto;
    border: 2.5px solid rgb(255 255 255 / 35%);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin .7s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }

.login-footer { margin-top: 32px; color: rgb(255 255 255 / 60%); font-size: 14.5px; text-align: center; }
.login-footer p { margin: 0; }
.login-footer a { color: #fff; font-weight: 600; text-decoration: none; }
.login-footer a:hover { text-decoration: underline; }

/* "Authenticating..." state: spinner plus text instead of a bare spinner */
.login-btn.loading[data-loading-text] { display: flex; align-items: center; justify-content: center; gap: 10px; background: #146c54; color: #fff; }
.login-btn.loading[data-loading-text]::after { display: none; }
.login-spinner {
    width: 18px;
    height: 18px;
    flex: none;
    border: 2.5px solid rgb(255 255 255 / 35%);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin .7s linear infinite;
}

/* Sign-in error dialog ("Pole Sana!"), matching the Zuri web app */
.error-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgb(0 0 0 / 40%);
    font-family: 'Outfit', sans-serif;
    animation: error-modal-fade .2s ease-out;
}
.error-modal-overlay.closing { animation: error-modal-fade .18s ease-in reverse forwards; }
@keyframes error-modal-fade { from { opacity: 0; } }
.error-modal-card {
    position: relative;
    outline: none;
    width: 100%;
    max-width: 440px;
    padding: 48px 40px;
    overflow: hidden;
    border: 1px solid rgb(10 77 60 / 10%);
    border-radius: 32px;
    background: rgb(255 255 255 / 90%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 30px 60px rgb(0 0 0 / 20%);
    color: #1e293b;
    text-align: center;
    animation: error-modal-zoom .3s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes error-modal-zoom { from { opacity: 0; transform: scale(.9); } }

.shuka-accent { position: absolute; top: 0; left: 0; z-index: 11; width: 100%; height: 6px; overflow: hidden; }
.shuka-accent img { width: 100%; height: 100%; object-fit: cover; }
.error-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: 8px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #94a3b8;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}
.error-modal-close:hover { background: rgb(0 0 0 / 5%); color: #1e293b; }
.error-modal-close .icon { width: 20px; height: 20px; stroke-width: 2; }

.error-modal-header, .error-modal-content, .error-modal-footer { position: relative; z-index: 5; }
.error-modal-header { display: flex; justify-content: center; margin-bottom: 32px; }
.mascot-container { position: relative; display: inline-block; }
.error-mascot {
    width: 160px;
    height: 160px;
    border: 6px solid #fff;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 15px 35px rgb(0 0 0 / 15%);
    animation: gentle-pulse 4s ease-in-out infinite;
}
@keyframes gentle-pulse { 50% { filter: brightness(1.05); transform: scale(1.05); } }
.status-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
    color: #dc3545;
}
.status-indicator .icon { width: 24px; height: 24px; stroke-width: 2; }

.badge-subtle {
    display: inline-block;
    margin-bottom: 8px;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.bg-soft-danger { background: #fff1f2; color: #e11d48; }
.error-modal-content h3 { margin: 0 0 8px; color: #1e293b; font: 700 28px/1.2 'Outfit', sans-serif; }
.message-text { margin-top: 16px; color: #64748b; font-size: 16px; line-height: 1.6; text-align: left; }

.error-modal-footer { margin-top: 32px; }
.btn-primary-green {
    width: 100%;
    padding: 16px 19px;
    border: 0;
    border-radius: 10px;
    background: #0a4d3c;
    color: #fff;
    font: 600 16px 'Outfit', sans-serif;
    cursor: pointer;
    box-shadow: 0 16px 48px rgb(0 0 0 / 17.5%);
    transition: background-color .3s, transform .3s, box-shadow .3s;
}
.btn-primary-green:hover { background: #146c54; transform: translateY(-2px); box-shadow: 0 4px 12px rgb(10 77 60 / 20%); }
.btn-primary-green:focus-visible, .error-modal-dismiss:focus-visible, .error-modal-close:focus-visible { outline: 3px solid rgb(46 204 113 / 55%); outline-offset: 2px; }
.error-modal-dismiss {
    width: 100%;
    margin-top: 8px;
    padding: 6px 12px;
    border: 0;
    background: none;
    color: #6c757d;
    font: 400 14px 'Outfit', sans-serif;
    cursor: pointer;
}
.error-modal-dismiss:hover { color: #1e293b; }

.kilimanjaro-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 32px;
    opacity: .05;
    pointer-events: none;
}
.kilimanjaro-bg img { width: 80%; max-width: 400px; height: auto; }

@media (max-width: 480px) {
    .error-modal-card { padding: 40px 24px 32px; border-radius: 26px; }
    .error-mascot { width: 128px; height: 128px; }
    .error-modal-content h3 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .error-modal-overlay, .error-modal-card, .error-mascot { animation: none; }
}

/* Password screens (forgot / reset), same glass card as the login */
.login-badge {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 20px;
    background: rgb(255 255 255 / 12%);
    color: #fff;
    box-shadow: 0 10px 24px -8px rgb(0 0 0 / 40%);
}
.login-badge .icon { width: 28px; height: 28px; }
.login-badge-warn { color: #ffd88a; }
.login-header h1.login-title { font-size: 32px; letter-spacing: -.6px; }
.login-header p strong { color: #fff; font-weight: 600; word-break: break-word; }
.login-header p { line-height: 1.45; }
a.login-btn { display: block; text-align: center; text-decoration: none; }
.login-back { display: inline-flex; align-items: center; gap: 6px; }
.login-back .icon { width: 16px; height: 16px; transition: transform .2s; }
.login-back:hover .icon { transform: translateX(-3px); }

.login-alert-success { display: flex; align-items: center; gap: 8px; border-color: rgb(46 204 113 / 45%); background: rgb(10 77 60 / 55%); }
.login-alert-success .icon { width: 18px; height: 18px; flex: none; color: #2ecc71; }

.login-dev {
    display: grid;
    gap: 6px;
    margin: -12px 0 24px;
    padding: 12px 14px;
    border: 1px dashed rgb(255 216 138 / 55%);
    border-radius: 12px;
    background: rgb(0 0 0 / 25%);
    color: rgb(255 255 255 / 80%);
    font-size: 13px;
    text-align: center;
}
.login-dev a { color: #ffd88a; font-weight: 600; }

.login-strength { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.login-strength-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 1; }
.login-strength-bar i { height: 4px; border-radius: 999px; background: rgb(255 255 255 / 18%); transition: background-color .25s; }
.login-strength-label { min-width: 62px; color: rgb(255 255 255 / 75%); font-size: 12.5px; font-weight: 500; text-align: right; }
.login-strength[data-strength="1"] i:nth-child(-n+1) { background: #ff8a80; }
.login-strength[data-strength="2"] i:nth-child(-n+2) { background: #ffd88a; }
.login-strength[data-strength="3"] i:nth-child(-n+3) { background: #9be7b4; }
.login-strength[data-strength="4"] i { background: #2ecc71; }

@media (max-width: 480px) {
    .login-card { padding: 36px 24px; border-radius: 20px; }
    .login-header { margin-bottom: 32px; }
    .login-header h1 { font-size: 32px; }
    .login-header p { font-size: 16px; }
    .login-header h1.login-title { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-card { animation: none; }
}

/* ---------- Itinerary costing ---------- */

.inline-form { display: inline; }
.input-sm { height: 34px; padding: 0 9px; border-radius: 8px; font-size: 13px; }
select.input-sm { padding-right: 26px; background-position: right 8px center; }

/* Build → Cost → Quote steps */
.trip-steps { display: flex; align-items: center; gap: 8px; margin: -4px 0 18px; padding: 8px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); scrollbar-width: none; }
.trip-step { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 190px; padding: 8px 12px; border-radius: 12px; color: var(--ink-2); text-decoration: none; transition: background-color .15s; }
.trip-step:hover { background: var(--surface-2); }
.trip-step strong { display: block; font-size: 14px; }
.trip-step small { display: block; color: var(--muted); font-size: 12px; }
.trip-step-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--line-soft); color: var(--muted); }
.trip-step-icon .icon { width: 17px; height: 17px; }
.trip-step.done .trip-step-icon { background: var(--green-100); color: var(--green-700); }
.trip-step.active { background: var(--green-50); }
.trip-step.active strong { color: var(--green-800); }
.trip-step.active .trip-step-icon { background: linear-gradient(135deg, var(--green-600), var(--green-800)); color: #fff; box-shadow: 0 6px 14px -6px rgb(6 58 33 / 60%); }
.trip-step-sep { width: 16px; height: 16px; flex: none; color: var(--subtle); }

.trip-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--gold-100); color: #7d5a20; font-size: 12.5px; font-weight: 700; }
.trip-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }
.trip-status.status-sent { background: var(--sky-bg); color: #2f6690; }
.trip-status.status-sent i { background: var(--sky); }
.trip-status.status-confirmed { background: #e8f6ee; color: var(--green-700); }
.trip-status.status-confirmed i { background: #2fb36b; box-shadow: 0 0 0 3px rgb(47 179 107 / 25%); }
.builder-actions form { display: contents; }
.builder-actions { align-items: center; }

.costing-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.costing-side { position: sticky; top: 84px; display: grid; gap: 16px; }
.costing-side .panel { margin: 0; }

/* Cost sheet */
.cost-sheet { padding: 20px 20px 16px; }
.cost-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.cost-table thead th { padding: 8px 8px; border-bottom: 1px solid var(--line); background: none; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.cost-table td, .cost-table tbody th { padding: 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.cost-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cost-group-head th, .cost-group-head td { padding-top: 16px !important; border-bottom: 1px solid var(--line) !important; background: none; font-weight: 700; }
.cost-group-head th { color: var(--ink); font: 600 14.5px var(--font-display); text-align: left; }
.cost-group-head th small { margin-left: 6px; color: var(--muted); font: 500 12px var(--font-body); }
.cost-group-head td { color: var(--ink-2); font-size: 13px; }
.cost-cat-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 9px; border-radius: 8px; background: color-mix(in srgb, var(--cat) 13%, #fff); color: var(--cat); vertical-align: -7px; }
.cost-cat-icon .icon { width: 14px; height: 14px; }
.cat-accommodation { --cat: #d38b26; }
.cat-vehicle { --cat: #1f7f4f; }
.cat-flights { --cat: #3d7aa8; }
.cat-transfers { --cat: #2b8a9e; }
.cat-parkfees { --cat: #7d8a2e; }
.cat-guide { --cat: #7a68c2; }
.cat-other { --cat: #98a199; }
.cost-item { min-width: 260px; }
.cost-item strong { display: block; font-weight: 600; }
.cost-item small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; color: var(--muted); font-size: 12px; }
.cost-desc { width: 100%; font-weight: 600; }
.cost-day { padding: 1px 7px; border-radius: 6px; background: var(--line-soft); color: var(--ink-2); font-weight: 600; }
.cost-fx { color: var(--sky); }
.cost-num { width: 78px; text-align: right; font-variant-numeric: tabular-nums; }
.cost-table [data-qty] { width: 60px; }
.cost-money { display: inline-flex; gap: 4px; }
.cost-money select { width: 70px; }
.cost-item .cost-desc { min-width: 240px; }
.cost-markup { display: inline-flex; width: 72px; }
.input-wrap.cost-markup > .cost-num { width: 100%; padding-left: 8px; padding-right: 22px; }
.cost-markup .suffix { right: 8px; font-size: 12px; }
.cost-selling { color: var(--green-800); font-weight: 700; }
.cost-row:hover td { background: var(--surface-2); }
.cost-row.source-edited td:first-child { box-shadow: inset 3px 0 0 var(--gold-500); }
.cost-row.source-manual td:first-child { box-shadow: inset 3px 0 0 var(--subtle); }
.cost-row.no-fx [data-cost], .cost-row.no-fx [data-selling] { color: var(--rose); }
.cost-row.is-removed td { opacity: .45; }
.cost-row.is-removed .cost-desc { text-decoration: line-through; }
.cost-row.is-new td { background: #fffdf6; }
.cost-new-meta { display: flex; gap: 4px; margin-bottom: 4px; }
.cost-new-meta select { flex: 1; min-width: 0; }
.cost-remove { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--subtle); cursor: pointer; }
.cost-remove:hover { background: var(--rose-bg); color: var(--rose); }
.cost-remove input { position: absolute; opacity: 0; }
.cost-remove:has(input:checked) { background: var(--rose); color: #fff; }
.cost-remove:has(input:focus-visible) { box-shadow: var(--ring); }
.cost-remove .icon { width: 16px; height: 16px; }
.cost-total th, .cost-total td { padding: 14px 8px; border-top: 2px solid var(--ink); background: var(--surface-2); font: 600 15px var(--font-display); }
.cost-total th { text-align: left; }
.cost-total td:last-of-type, .cost-total [data-total-selling] { color: var(--green-800); }
.cost-sheet-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }

/* Price card */
.price-card { padding: 22px; overflow: hidden; background: radial-gradient(90% 70% at 100% 0%, rgb(197 150 74 / 14%), transparent 60%), var(--surface); }
.price-label { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.price-total { display: block; margin: 4px 0 2px; color: var(--green-800); font: 700 32px/1.1 var(--font-display); letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.price-pp { color: var(--ink-2); font-size: 13.5px; }
.price-bar { display: flex; height: 10px; margin: 16px 0 14px; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg, #2fb36b, var(--green-600)); }
.price-bar-cost { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-300), var(--gold-500)); transition: width .3s; }
.price-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; }
.price-facts dt { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.price-facts dd { margin: 2px 0 0; font: 600 15px var(--font-display); font-variant-numeric: tabular-nums; }
.dot-cost { background: var(--gold-500); }
.dot-profit { background: #2fb36b; }
.cost-breakdown { display: grid; gap: 8px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-soft); list-style: none; }
.cost-breakdown li { display: grid; grid-template-columns: 150px 1fr 36px; align-items: center; gap: 10px; font-size: 12.5px; }
.cost-breakdown li > span:first-child { display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.cost-breakdown .icon { width: 14px; height: 14px; flex: none; color: var(--cat); }
.cost-breakdown-bar { height: 6px; overflow: hidden; border-radius: 999px; background: var(--line-soft); }
.cost-breakdown-bar i { display: block; height: 100%; border-radius: inherit; background: var(--cat); }
.cost-breakdown .num { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

.cost-warnings { border-left: 4px solid var(--gold-500); background: #fffaf0; }
.cost-warnings h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #7d5a20; font: 600 15px var(--font-display); }
.cost-warnings h3 .icon { width: 17px; height: 17px; }
.cost-warnings ul { display: grid; gap: 8px; margin: 0; padding: 0 0 0 18px; color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.cost-warning-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 13px; }

.cost-settings .field-row { gap: 10px; }
.cost-settings .cost-money { display: flex; }
.cost-settings .cost-money select { width: 96px; flex: none; }
.cost-fx-link { display: inline-block; margin-top: 12px; font-size: 13px; }
.seg-toggle-3 span { padding-inline: 4px; font-size: 12.5px; }

/* Exchange rates */
.fx-panel { max-width: 760px; }
.fx-list { display: grid; }
.fx-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "code input updated" "code inverse inverse"; align-items: center; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.fx-code { grid-area: code; display: grid; place-items: center; width: 56px; height: 44px; border-radius: 12px; background: var(--green-50); color: var(--green-700); font: 700 15px var(--font-display); letter-spacing: .5px; }
.fx-input { grid-area: input; display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 600; }
.fx-input .input { max-width: 200px; text-align: right; font: 600 15px var(--font-display); font-variant-numeric: tabular-nums; }
.fx-updated { grid-area: updated; font-size: 12px; }
.fx-inverse { grid-area: inverse; color: var(--muted); font-size: 12px; }

/* Builder: lodge card, transport and fees */
.lodge-card { display: flex; align-items: center; gap: 14px; margin: -4px 0 16px; padding: 10px 14px 10px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.lodge-card.is-unpriced { border-color: #f0dcae; background: #fffaf0; }
.lodge-card-media { display: grid; place-items: center; width: 84px; height: 60px; flex: none; overflow: hidden; border-radius: 10px; background: linear-gradient(140deg, #e3efe6, #f7eedb); color: var(--green-600); }
.lodge-card-media img { width: 100%; height: 100%; object-fit: cover; }
.lodge-card-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--gold-100); color: var(--gold-600); }
.lodge-card-body { min-width: 0; flex: 1; }
.lodge-card-body strong { display: block; font-size: 14.5px; }
.lodge-card-body small { display: block; color: var(--muted); font-size: 12.5px; }
.lodge-stars { color: var(--gold-500); font-size: 12px; letter-spacing: 1px; }
.lodge-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.transport-hint:empty { display: none; }
.transport-hint { margin: -6px 0 14px; }

.fee-picker { margin-top: 22px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.fee-picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.fee-picker-head h4 { margin: 0; font: 600 15px var(--font-display); }
.fee-picker-head p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.fee-count { padding: 2px 10px; border-radius: 999px; background: var(--green-100); color: var(--green-700); font-size: 12px; font-weight: 700; }
.fee-count:empty { display: none; }
.fee-list { display: grid; gap: 6px; }
.fee-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s, background-color .15s; }
.fee-option:hover { border-color: #cfcbbd; }
.fee-option.is-on { border-color: var(--green-600); background: var(--green-50); }
.fee-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--green-700); }
.fee-text strong { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.fee-text small { display: block; color: var(--muted); font-size: 12px; }
.fee-suggest { padding: 1px 7px; border-radius: 6px; background: var(--gold-100); color: #7d5a20; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.fee-price { color: var(--ink-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Quote (preview) */
.trip-ref { display: block; font-size: 12px; }
.trip-margin { display: block; font-size: 11.5px; }
.fact-price dd { color: var(--green-800); }
.trip-day-card.has-photo { display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-template-areas: "title photo" "body photo"; column-gap: 22px; }
.trip-day-card.has-photo > * { grid-column: 1; }
.trip-day-card.has-photo > .trip-day-photo { grid-area: photo; grid-column: 2; grid-row: 1 / span 20; }
.trip-day-photo { position: relative; margin: 0; overflow: hidden; align-self: start; border-radius: 14px; aspect-ratio: 4 / 3; box-shadow: 0 10px 24px -12px rgb(0 0 0 / 35%); }
.trip-day-photo img { width: 100%; height: 100%; object-fit: cover; }
.trip-day-photo figcaption { position: absolute; inset: auto 0 0; padding: 24px 12px 10px; background: linear-gradient(transparent, rgb(0 0 0 / 60%)); color: #fff; font-size: 12.5px; font-weight: 600; }

.trip-price { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr); gap: 28px; margin: 22px 0 0; padding: 28px; background: radial-gradient(80% 120% at 0% 0%, rgb(197 150 74 / 14%), transparent 60%), var(--surface); }
.trip-price-main small { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.trip-price-main strong { display: block; margin: 6px 0 4px; color: var(--green-800); font: 700 38px/1.05 var(--font-display); letter-spacing: -1px; }
.trip-price-main span { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.trip-price-main p { margin: 12px 0 0; font-size: 12.5px; }
.trip-price-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.trip-price-lists h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 15px var(--font-display); }
.trip-price-lists h3 .icon { width: 16px; height: 16px; color: var(--green-600); }
.trip-price-lists div:last-child h3 .icon { color: var(--rose); }
.trip-price-lists ul { display: grid; gap: 7px; margin: 0; padding: 0 0 0 18px; color: var(--ink-2); font-size: 13.5px; }
.trip-price-action { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--line-soft); }

/* Itineraries list: search and status filter. */
.trip-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; }
.trip-search { flex: 1 1 320px; max-width: 520px; }
.trip-search .input { height: 44px; border-radius: 12px; box-shadow: var(--shadow-sm); font-size: 14px; }
.trip-status-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.trip-status-pills button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font: 500 13px var(--font-body, inherit); cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .15s, background-color .15s, color .15s; }
.trip-status-pills button:hover { border-color: var(--gold-500, #c5964a); color: var(--ink); }
.trip-status-pills button i { width: 8px; height: 8px; border-radius: 50%; background: var(--subtle); }
/* Same dots as the cards' status badges. */
.trip-status-pills .st-draft i { background: var(--gold-500); }
.trip-status-pills .st-sent i { background: var(--sky); }
.trip-status-pills .st-confirmed i { background: #2fb36b; }
.trip-status-pills button span { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--line-soft); color: var(--muted); font-size: 11.5px; font-weight: 700; text-align: center; }
.trip-status-pills button.active { border-color: var(--green-800); background: var(--green-800); color: #fff; }
.trip-status-pills button.active span { background: rgb(255 255 255 / 16%); color: #fff; }
.trip-status-pills button.active i { box-shadow: 0 0 0 2px rgb(255 255 255 / 60%); }
.trip-result-count { margin-left: auto; color: var(--muted); font-size: 13px; }
.trip-card[hidden], .trip-no-match[hidden] { display: none; }

/* Quote options (alternatives) and optional extras. */
.quote-options-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 0 0 18px; padding: 14px 18px; }
.quote-options-head { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.quote-options-head .band-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--gold-100, #f7eedb); color: var(--gold-600, #b07d2c); }
.quote-options-head .icon { width: 18px; height: 18px; }
.quote-options-head strong { display: block; font: 600 14.5px var(--font-display); }
.quote-options-head small { color: var(--muted); font-size: 12.5px; }
.quote-option-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.quote-option-tabs a { display: flex; flex-direction: column; padding: 7px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink-2); text-decoration: none; transition: border-color .15s; }
.quote-option-tabs a:hover { border-color: var(--gold-500, #c5964a); }
.quote-option-tabs a.active { border-color: var(--green-700); background: var(--green-800, #0f3d2a); color: #fff; }
.quote-option-tabs strong { font-size: 13.5px; }
.quote-option-tabs small { color: inherit; font-size: 11.5px; opacity: .75; }
.quote-options-forms { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.quote-option-form { display: flex; gap: 6px; }
.quote-option-form .input { width: 170px; }
/* The price and the lists stay side by side on the first row; options and extras run full width below. */
.trip-price > .trip-price-main { grid-row: 1; }
.trip-price > .trip-price-lists { grid-row: 1; grid-column: 2; }
.quote-compare, .quote-extras { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.quote-compare h3, .quote-extras h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 15px var(--font-display); }
.quote-compare h3 .icon, .quote-extras h3 .icon { width: 16px; height: 16px; color: var(--gold-600, #b07d2c); }
.quote-extras h3 small { color: var(--muted); font: 500 12.5px var(--font-body, inherit); }
.quote-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.quote-compare-card { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.quote-compare-card:hover { border-color: var(--gold-500, #c5964a); box-shadow: var(--shadow-sm); }
.quote-compare-card.current { border-color: var(--green-700); box-shadow: inset 0 0 0 1px var(--green-700); }
.quote-compare-label { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.quote-compare-label em { color: var(--green-700); font-style: normal; letter-spacing: 0; text-transform: none; }
.quote-compare-card strong { color: var(--green-800); font: 700 26px/1.15 var(--font-display); }
.quote-compare-card small { color: var(--muted); font-size: 12.5px; }
.quote-compare-card ul { display: grid; gap: 3px; margin: 10px 0 0; padding: 10px 0 0 16px; border-top: 1px dashed var(--line); color: var(--ink-2); font-size: 12.5px; }
.quote-extras ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.quote-extras li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.quote-extras li:last-child { border-bottom: 0; }
.quote-extras li span small { display: block; color: var(--muted); font-size: 12px; }
.quote-extras li b { white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.quote-extras li b small { color: var(--muted); font-size: 12px; font-weight: 500; }

/* Per-person sheet: the cost sheet day by day, per adult, per child and shared. */
.cost-line-options { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.cost-optional { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.cost-optional input { width: 15px; height: 15px; accent-color: var(--gold-600, #b07d2c); }
.cost-row.is-optional td { background: #fffaf0; }
.cost-row.is-optional .cost-selling { color: var(--gold-700, #8a6424); }
.cat-extras { --cat: #b07d2c; }
.cat-extras .cost-group-head th { color: #8a6424; }
.cost-payer { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); font-size: 12px; }
.cost-payer > span:first-child { font-weight: 600; }
.cost-payer select { width: auto; min-width: 150px; height: 28px; padding-block: 0; font-size: 12px; }
.pp-sheet { margin-top: 20px; }
.pp-sheet .panel-heading { align-items: flex-start; }
.pp-sheet .panel-heading p { max-width: 720px; }
.pp-mode { flex: none; width: 200px; }
.pp-sheet:not(.selling) .pp-s, .pp-sheet.selling .pp-c { display: none; }
.pp-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.pp-card { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(120% 140% at 100% 0%, var(--pp-tint), transparent 60%), #fff; }
.pp-card small { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pp-card strong { color: var(--ink); font: 600 26px/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.pp-card em { color: var(--muted); font-size: 12.5px; font-style: normal; }
.pp-card footer { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--ink-2); font-size: 13px; }
.pp-card footer b { font-variant-numeric: tabular-nums; }
.pp-card.tone-adult { --pp-tint: #fbefd9; }
.pp-card.tone-child { --pp-tint: #e3eff8; }
.pp-card.tone-shared { --pp-tint: #e2f1e8; }
.pp-card.tone-total { --pp-tint: rgb(197 150 74 / 22%); border-color: rgb(197 150 74 / 45%); background: linear-gradient(150deg, #0f3d2a, #072519); }
.pp-card.tone-total small, .pp-card.tone-total em { color: rgb(255 255 255 / 70%); }
.pp-card.tone-total strong { color: #fff; }
.pp-card.tone-total footer { border-top-color: rgb(255 255 255 / 18%); color: var(--gold-300, #e2c48c); }
.pp-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.pp-tabs button { display: inline-flex; align-items: center; gap: 8px; margin-bottom: -1px; padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: 600 14px var(--font-body, inherit); cursor: pointer; }
.pp-tabs button > span { padding: 1px 8px; border-radius: 999px; background: var(--line-soft); color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pp-tabs button:hover { color: var(--ink); }
.pp-tabs button.active { border-bottom-color: var(--green-700); color: var(--green-800); }
.pp-tabs button.active > span { background: var(--green-100, #e2f1e8); color: var(--green-800); }
.pp-note { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-table th, .pp-table td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.pp-table thead th { position: sticky; top: 0; background: var(--surface-2, #f7f5f0); color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.pp-table thead .cost-cat-icon { width: 22px; height: 22px; margin-right: 6px; vertical-align: -6px; }
.pp-table thead .cost-cat-icon .icon { width: 13px; height: 13px; }
.pp-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-table tbody tr:hover { background: var(--surface-2, #f7f5f0); }
.pp-table tbody tr.pp-empty { color: var(--subtle); }
.pp-date { width: 1%; white-space: nowrap; }
.pp-date strong, .pp-day strong { display: block; color: var(--ink); font-weight: 600; }
.pp-date small, .pp-day small { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.pp-day { min-width: 220px; }
.pp-day small .icon { width: 12px; height: 12px; }
.pp-dash { color: var(--line); }
.pp-rowtotal { color: var(--ink); font-weight: 600; }
.pp-table tfoot th, .pp-table tfoot td { border-top: 2px solid var(--line); border-bottom: 0; background: #fffaf0; color: var(--ink); font-weight: 700; }
.pp-table tfoot .pp-split th, .pp-table tfoot .pp-split td { border-top: 1px solid var(--line-soft); background: var(--green-50, #f0f7f2); color: var(--green-800); }
.pp-grand { font-size: 14px; }
@media (max-width: 760px) {
    .pp-sheet .panel-heading { flex-direction: column; }
    .pp-mode { width: 100%; }
}

@media (max-width: 1200px) {
    .costing-grid { grid-template-columns: minmax(0, 1fr); }
    .costing-side { position: static; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (max-width: 760px) {
    .trip-day-card.has-photo { display: block; }
    .trip-day-photo { margin-bottom: 14px; aspect-ratio: 16 / 9; }
    .trip-price, .trip-price-lists { grid-template-columns: minmax(0, 1fr); }
    .trip-price > .trip-price-main, .trip-price > .trip-price-lists { grid-row: auto; grid-column: auto; }
    .trip-step { min-width: 160px; }
    .trip-step small { display: none; }
    .fx-row { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "code input" "code updated" "code inverse"; }
}
@media print {
    .trip-steps, .trip-price-action { display: none !important; }
    .trip-price { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
}

/* ---------- Itineraries: lively ---------- */

/* One colour per destination (Costing.PlaceTone / placeTone()) */
.place-0 { --place: #d38b26; }
.place-1 { --place: #2f9e64; }
.place-2 { --place: #3d7aa8; }
.place-3 { --place: #c0505c; }
.place-4 { --place: #7a68c2; }
.place-5 { --place: #2b8a9e; }

/* Gradient header band (builder and costing) */
.trip-band {
    position: relative;
    margin-bottom: 18px;
    padding: 20px 24px 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    color: #f7f3e8;
    background:
        radial-gradient(60% 140% at 100% 0%, rgb(197 150 74 / 30%), transparent 60%),
        radial-gradient(40% 90% at 0% 100%, rgb(47 179 107 / 18%), transparent 70%),
        linear-gradient(135deg, var(--green-700), var(--green-800) 55%, var(--green-900));
    box-shadow: 0 18px 40px -24px rgb(3 35 26 / 70%);
}
.trip-band::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -80px;
    width: 280px;
    height: 280px;
    background: url("../img/zuri-emblem-light.png") center / contain no-repeat;
    opacity: .07;
    pointer-events: none;
}
.trip-band-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
.trip-band .builder-back { border-color: rgb(255 255 255 / 22%); background: rgb(255 255 255 / 10%); color: #fff; box-shadow: none; }
.trip-band .builder-back:hover { background: rgb(255 255 255 / 18%); color: #fff; }
.trip-band .builder-heading h1 { margin: 2px 0 0; color: #fff; font-size: 26px; }
.trip-band .crumbs, .trip-band .crumbs a { color: rgb(247 243 232 / 70%); }
.trip-band .crumbs a:hover { color: var(--gold-300); }
.trip-band .builder-actions { position: relative; z-index: 1; }
.trip-band .trip-status { background: rgb(255 255 255 / 14%); color: #fff; }
.trip-band .trip-status.status-confirmed { background: #e8f6ee; color: var(--green-700); }
.trip-band-facts {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: 18px -24px 0;
    padding: 0;
    border-top: 1px solid rgb(255 255 255 / 12%);
    background: rgb(0 0 0 / 14%);
    list-style: none;
}
.trip-band-facts li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 20px; }
/* The text beside the icon must be able to shrink, so a long route ends in "…" instead of running into the next fact. */
.trip-band-facts li > span:last-child { min-width: 0; }
.trip-band-facts li + li { border-left: 1px solid rgb(255 255 255 / 10%); }
.trip-band-facts small { display: block; color: rgb(247 243 232 / 62%); font-size: 10.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.trip-band-facts strong { display: block; overflow: hidden; color: #fff; font: 600 15px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.trip-band-facts em { display: block; color: rgb(247 243 232 / 70%); font-size: 12px; font-style: normal; }
.band-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: rgb(255 255 255 / 10%); color: var(--gold-300); }
.band-icon .icon { width: 17px; height: 17px; }
.band-price .band-icon { background: var(--gold-500); color: var(--green-900); }
.band-price strong { color: var(--gold-300); font-size: 18px; }
.band-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 1px; padding: 0; border: 0; background: none; color: var(--gold-300); font-size: 12px; font-weight: 700; cursor: pointer; }
.band-link:hover { color: #fff; }
.band-link .icon { width: 13px; height: 13px; }

/* Builder: tabs with icons, colourful day cards */
.day-editor .tab { gap: 8px; }
.tab-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--tab) 12%, #fff); color: var(--tab); transition: background-color .15s, color .15s; }
.tab-icon .icon { width: 14px; height: 14px; }
.tab[aria-selected="true"] .tab-icon { background: var(--tab); color: #fff; }
.tab-acc { --tab: #d38b26; }
.tab-act { --tab: #7d8a2e; }
.tab-tr { --tab: #1f7f4f; }
.tab-meal { --tab: #c0505c; }
.tab-note { --tab: #7a68c2; }
.tab-img { --tab: #3d7aa8; }
.tab-route { --tab: #2b8a9e; }
.day-card[class*="place-"] { border-top-color: var(--place); }
.day-card[class*="place-"]:hover { border-top-color: var(--place); }
.day-card.active[class*="place-"] { background: linear-gradient(135deg, color-mix(in srgb, var(--place) 55%, var(--green-800)), var(--green-900)); }
.day-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.day-tags:empty { display: none; }
.day-place { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--place, #98a199) 14%, #fff); color: color-mix(in srgb, var(--place, #3c4a42) 78%, #000); font-size: 11px; font-weight: 700; }
.day-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; background: var(--line-soft); color: var(--ink-2); font-size: 11px; font-weight: 700; }
.day-tag .icon { width: 11px; height: 11px; }
.day-card.active .day-place { background: rgb(255 255 255 / 18%); color: #fff; }
.day-card.active .day-tag { background: rgb(255 255 255 / 14%); color: #fff; }

/* Itinerary list: tiles and trip cards */
.trip-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.trip-tile { display: flex; align-items: center; gap: 14px; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--tone) 12%, transparent), transparent 60%), var(--surface); box-shadow: var(--shadow-sm); }
.trip-tile-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--tone); color: #fff; box-shadow: 0 8px 16px -8px var(--tone); }
.trip-tile-icon .icon { width: 20px; height: 20px; }
.trip-tile small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.trip-tile strong { display: block; margin: 2px 0; font: 700 20px/1.2 var(--font-display); letter-spacing: -.3px; }
.trip-tile span:not(.trip-tile-icon) { color: var(--muted); font-size: 12.5px; }

.trips-section { margin-bottom: 30px; }
.trip-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.trip-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.trip-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgb(6 58 33 / 35%); }
.trip-card-media { position: relative; display: block; height: 150px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--place, #2f9e64) 70%, var(--green-800)), var(--green-900)); }
.trip-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.trip-card:hover .trip-card-media img { transform: scale(1.05); }
.trip-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / 35%)); }
/* No lodge photo yet: savanna art tinted with the destination's colour. */
.trip-card-art { position: absolute; inset: 0; background: url("../img/zebra.webp") center 35% / cover no-repeat; }
.trip-card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--place, #2f9e64) 55%, transparent), rgb(3 35 26 / 35%)); mix-blend-mode: multiply; }
.trip-card-art .icon { display: none; }
.trip-card-media .trip-status { position: absolute; top: 12px; left: 12px; z-index: 1; box-shadow: 0 4px 12px rgb(0 0 0 / 15%); }
.trip-card-media .trip-status.status-draft { background: #fff; }
.trip-card-dates { position: absolute; right: 12px; bottom: 10px; z-index: 1; display: grid; justify-items: center; min-width: 56px; padding: 6px 8px; border-radius: 12px; background: rgb(255 255 255 / 94%); color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.trip-card-dates strong { color: var(--ink); font: 700 20px/1 var(--font-display); }
.trip-card-body { flex: 1; padding: 16px 18px 12px; }
.trip-card-ref { color: var(--muted); font-size: 12px; font-weight: 600; }
.trip-card-body h3 { margin: 4px 0 10px; font: 600 17px/1.3 var(--font-display); letter-spacing: -.2px; }
.trip-card-body h3 a { color: var(--ink); text-decoration: none; }
.trip-card-body h3 a:hover { color: var(--green-700); }
.trip-route { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 14px; padding: 0; list-style: none; }
.trip-route li { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--place) 13%, #fff); color: color-mix(in srgb, var(--place) 78%, #000); font-size: 11.5px; font-weight: 700; }
.trip-route li + li::before { content: "→"; margin: 0 4px 0 -2px; color: var(--subtle); font-weight: 400; }
.trip-card-client { display: flex; align-items: center; gap: 10px; }
.trip-card-client strong { display: block; font-size: 13.5px; }
.trip-card-client small { display: block; color: var(--muted); font-size: 12px; }
.trip-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.trip-card-price strong { display: block; color: var(--green-800); font: 700 18px var(--font-display); font-variant-numeric: tabular-nums; }
.trip-card-price small { display: block; color: var(--muted); font-size: 11.5px; }
.trip-card-price.is-missing strong { color: var(--gold-600); font-size: 14px; }
.margin-meter { display: block; width: 120px; height: 4px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--line); }
.margin-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-500), #2fb36b); }
.trip-card-actions { display: flex; align-items: center; gap: 4px; }

/* Costing: donut, category bands, inline inputs */
.price-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cost-donut { position: relative; display: grid; place-items: center; width: 96px; height: 96px; flex: none; border-radius: 50%; animation: donut-in .7s ease-out; }
.cost-donut::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 1px 3px rgb(0 0 0 / 8%); }
.cost-donut span { position: relative; display: grid; justify-items: center; line-height: 1.1; }
.cost-donut strong { color: var(--green-800); font: 700 20px var(--font-display); }
.cost-donut small { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
@keyframes donut-in { from { opacity: 0; transform: rotate(-90deg) scale(.85); } }
.price-head .price-total { font-size: 28px; }

.cost-group-head { background: linear-gradient(90deg, color-mix(in srgb, var(--cat) 11%, #fff), #fff 75%); }
.cost-group-head th, .cost-group-head td { background: transparent !important; }
.cost-group-head th { box-shadow: inset 4px 0 0 var(--cat); padding-left: 12px !important; }
.cost-group-head [data-group-selling] { color: color-mix(in srgb, var(--cat) 70%, #000); }
.cost-row td:first-child { padding-left: 12px; }
.cost-table .input-sm { border-color: transparent; background: var(--surface-2); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.cost-table .input-sm:hover { border-color: var(--line); background: #fff; }
.cost-table .input-sm:focus { border-color: var(--green-600); background: #fff; box-shadow: 0 0 0 3px rgb(19 101 61 / 12%); }
.cost-table .cost-desc { background: transparent; font-weight: 600; }
.cost-row:hover .input-sm { background: #fff; }
.cost-selling { font-size: 14px; }
.cost-total { background: linear-gradient(90deg, var(--green-50), var(--surface-2)); }
.cost-total th, .cost-total td { background: transparent; }
.cost-table textarea.cost-desc { display: block; height: auto; min-height: 0; padding: 5px 9px; line-height: 1.35; resize: none; overflow: hidden; }
.cost-total [data-total-selling] { font-size: 18px; }
.costing-side .price-card { border-top: 4px solid var(--gold-500); }

@media (max-width: 1100px) {
    .trip-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .trip-tiles { grid-template-columns: minmax(0, 1fr); }
    .trip-band { padding: 16px 16px 0; }
    .trip-band-top { flex-wrap: wrap; }
    .trip-band-facts { margin: 16px -16px 0; }
    .trip-band-facts li + li { border-left: 0; border-top: 1px solid rgb(255 255 255 / 10%); }
    .trip-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .trip-card, .trip-card-media img, .cost-donut { transition: none; animation: none; }
}

/* ---------- Bookings ---------- */

.text-danger { color: var(--rose) !important; }
.notice-danger { border-color: #f0c4c8; background: var(--rose-bg); color: #7a2b33; }
.notice-danger .icon { color: var(--rose); }
.notice-danger .inline-form { margin-left: auto; }

/* Phase pills: upcoming / travelling / completed / cancelled */
.phase-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--sky-bg); color: #2f6690; font-size: 12px; font-weight: 700; white-space: nowrap; }
.phase-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); }
.phase-pill.phase-inprogress { background: #e8f6ee; color: var(--green-700); }
.phase-pill.phase-inprogress i { background: #2fb36b; box-shadow: 0 0 0 3px rgb(47 179 107 / 25%); animation: pulse-dot 1.8s ease-in-out infinite; }
.phase-pill.phase-completed { background: var(--line-soft); color: var(--muted); }
.phase-pill.phase-completed i { background: var(--subtle); }
.phase-pill.phase-cancelled { background: var(--rose-bg); color: var(--rose); }
.phase-pill.phase-cancelled i { background: var(--rose); }
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 6px rgb(47 179 107 / 0%); } }
.trip-band .phase-pill { background: rgb(255 255 255 / 14%); color: #fff; }
.trip-band .phase-pill.phase-inprogress { background: #e8f6ee; color: var(--green-700); }
.trip-band .phase-pill.phase-cancelled { background: var(--rose-bg); color: var(--rose); }
.booking-band.phase-cancelled { filter: saturate(.55); }
.band-of { color: rgb(247 243 232 / 65%); font-size: 13px; font-weight: 500; }

/* Filter tabs */
.booking-filters { display: flex; gap: 6px; margin-bottom: 16px; padding: 6px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); scrollbar-width: none; }
.booking-filter { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.booking-filter:hover { background: var(--surface-2); color: var(--ink); }
.booking-filter em { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--line-soft); color: var(--ink-2); font-size: 11.5px; font-style: normal; text-align: center; }
.booking-filter.active { background: var(--green-800); color: #fff; }
.booking-filter.active em { background: rgb(255 255 255 / 18%); color: #fff; }
.filter-overdue:not(.active) em:not(:empty) { background: var(--rose-bg); color: var(--rose); }

/* Booking rows */
.booking-list { display: grid; gap: 12px; }
.booking-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 220px 110px 130px;
    align-items: center;
    gap: 20px;
    padding: 14px 20px 14px 14px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--place, var(--green-600));
    border-radius: 16px;
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.booking-row:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgb(6 58 33 / 30%); }
.booking-row.phase-cancelled, .booking-row.phase-completed { border-left-color: var(--line); }
.booking-row.phase-cancelled { opacity: .7; }
.booking-row.phase-cancelled strong { text-decoration: line-through; text-decoration-color: rgb(185 68 79 / 50%); }
.booking-date { display: grid; justify-items: center; padding: 8px 0; border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--place, #2f9e64) 16%, #fff), #fff); line-height: 1.1; }
.booking-date small { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.booking-date strong { color: var(--ink); font: 700 26px/1.1 var(--font-display); }
.booking-main { display: grid; gap: 3px; min-width: 0; }
.booking-ref { color: var(--muted); font-size: 12px; font-weight: 600; }
.booking-main > strong { overflow: hidden; font: 600 16px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.booking-guest { color: var(--ink-2); font-size: 13px; }
.booking-main .trip-route { margin: 4px 0 0; }
.booking-pay { display: grid; gap: 6px; }
.booking-pay-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.booking-pay-top strong { font: 700 16px var(--font-display); font-variant-numeric: tabular-nums; }
.booking-pay-top small, .pay-note { color: var(--muted); font-size: 12px; }
.pay-bar { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: var(--line-soft); }
.pay-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-500), #2fb36b); transition: width .4s; }
.pay-bar.is-paid i { background: #2fb36b; }
.pay-bar.is-overdue i { background: linear-gradient(90deg, var(--rose), #e07a84); }
.booking-suppliers { display: grid; justify-items: center; gap: 2px; }
.booking-suppliers small { color: var(--muted); font-size: 11.5px; }
.supplier-ring { --p: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(#2fb36b calc(var(--p) * 1%), var(--line-soft) 0); }
.supplier-ring::before { content: ""; grid-area: 1 / 1; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); }
.supplier-ring b { grid-area: 1 / 1; position: relative; font-size: 12px; font-weight: 700; }
.supplier-ring-lg { width: 60px; height: 60px; }
.supplier-ring-lg::before { width: 48px; height: 48px; }
.supplier-ring-lg b { font-size: 14px; }
.booking-phase { display: grid; justify-items: end; gap: 4px; }
.booking-phase small { color: var(--muted); font-size: 12px; }

/* Booking page */
.booking-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.booking-main-col { display: grid; gap: 20px; min-width: 0; }
.booking-main-col > .panel { margin: 0; }
.booking-side { position: sticky; top: 84px; display: grid; gap: 16px; }
.booking-side .panel { margin: 0; }

.reservation-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.reservation { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 14px; border: 1px solid var(--line); border-left: 4px solid var(--res, var(--gold-500)); border-radius: 14px; background: var(--surface); }
.reservation.status-torequest { --res: var(--gold-500); }
.reservation.status-requested { --res: var(--sky); }
.reservation.status-confirmed { --res: #2fb36b; background: linear-gradient(90deg, #f3fbf6, var(--surface) 40%); }
.reservation.status-cancelled { --res: var(--subtle); opacity: .6; }
.reservation-icon { width: 38px; height: 38px; margin: 0; border-radius: 11px; vertical-align: 0; }
.reservation-icon .icon { width: 18px; height: 18px; }
.reservation-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reservation-head strong { font: 600 15px var(--font-display); }
.reservation-body p { margin: 4px 0 6px; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.reservation-body small { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 12px; }
.reservation-body small span { display: inline-flex; align-items: center; gap: 5px; }
.reservation-body small .icon { width: 13px; height: 13px; }
.res-pill { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.res-torequest { background: var(--gold-100); color: #7d5a20; }
.res-requested { background: var(--sky-bg); color: #2f6690; }
.res-confirmed { background: #dcf3e6; color: var(--green-700); }
.res-cancelled { background: var(--line-soft); color: var(--muted); }
.res-ref { color: var(--green-700); font-size: 12px; font-weight: 700; }
.reservation-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; max-width: 330px; }
.confirm-res { display: flex; gap: 4px; }
.confirm-res .input-sm { width: 130px; }
.res-edit { position: relative; }
.res-edit > summary, .add-reservation > summary { list-style: none; cursor: pointer; }
.res-edit > summary::-webkit-details-marker, .add-reservation > summary::-webkit-details-marker, .schedule-edit > summary::-webkit-details-marker { display: none; }
.res-edit[open] > summary { background: var(--green-50); color: var(--green-700); }
.reservation:has(.res-edit[open]) { grid-template-columns: auto minmax(0, 1fr); }
.reservation:has(.res-edit[open]) .reservation-actions { grid-column: 1 / -1; max-width: none; justify-content: stretch; }
.reservation:has(.res-edit[open]) .res-edit { flex: 1 1 100%; }
.res-edit-panel { display: grid; gap: 10px; margin-top: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.reservation-form { display: grid; gap: 12px; }
.reservation-form .field-row { gap: 12px; }
.reservation-form .res-name { margin-top: 6px; }
.reservation-form .cost-money { display: flex; }
.reservation-form .cost-money select { width: 84px; flex: none; }
.reservation-form > .button { justify-self: start; }
.add-reservation { margin-top: 14px; }
.add-reservation[open] > summary { margin-bottom: 4px; }

.plan-days { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.plan-day { display: flex; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; border-radius: 12px; border-left: 3px solid var(--place, var(--line)); background: var(--surface-2); }
.plan-day.is-today { background: #f3fbf6; box-shadow: inset 0 0 0 1px #bfe6cf; }
.plan-date { display: grid; justify-items: center; width: 44px; flex: none; line-height: 1.1; }
.plan-date b { font: 700 18px var(--font-display); }
.plan-date small { color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.plan-body { flex: 1; min-width: 0; }
.plan-body strong { display: block; font-size: 13.5px; }
.plan-body small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; color: var(--muted); font-size: 12px; }
.notes-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.danger-zone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 20px; border-color: #f0c4c8; }
.danger-zone h2 { margin: 0 0 4px; color: var(--rose); font-size: 16px; }
.danger-zone p { margin: 0; color: var(--muted); font-size: 13px; }
.cancel-form { display: flex; gap: 8px; }
.cancel-form .input { flex: 1; }

/* Payments card */
.pay-card { padding: 22px; background: radial-gradient(90% 60% at 100% 0%, rgb(47 179 107 / 10%), transparent 60%), var(--surface); border-top: 4px solid #2fb36b; }
.pay-head { display: flex; align-items: center; gap: 18px; }
.pay-ring { --p: 0; position: relative; display: grid; place-items: center; width: 104px; height: 104px; flex: none; border-radius: 50%; background: conic-gradient(#2fb36b calc(var(--p) * 1%), var(--line-soft) 0); animation: donut-in .7s ease-out; }
.pay-ring.is-overdue { background: conic-gradient(var(--gold-500) calc(var(--p) * 1%), #f6d5d8 0); }
.pay-ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--surface); }
.pay-ring b, .pay-ring small { position: relative; grid-area: 1 / 1; }
.pay-ring b { margin-top: -12px; color: var(--green-800); font: 700 22px var(--font-display); }
.pay-ring small { margin-top: 26px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.pay-head dl { display: grid; gap: 8px; margin: 0; }
.pay-head dt { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.pay-head dd { margin: 0; font: 600 15px var(--font-display); font-variant-numeric: tabular-nums; }
.pay-paid { color: var(--green-700) !important; }
.summary-sub { margin: 20px 0 10px; color: var(--ink-2); font: 700 11.5px var(--font-body); letter-spacing: .6px; text-transform: uppercase; }

.instalments { position: relative; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.instalments li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; }
.instalments li + li::before { content: ""; position: absolute; top: -14px; left: 12px; height: 26px; border-left: 2px dashed var(--line); }
.inst-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--line); border-radius: 50%; background: var(--surface); color: #fff; }
.inst-dot .icon { width: 13px; height: 13px; stroke-width: 3; }
.inst-paid .inst-dot { border-color: #2fb36b; background: #2fb36b; }
.inst-overdue .inst-dot { border-color: var(--rose); background: var(--rose-bg); }
.inst-due .inst-dot { border-color: var(--gold-500); background: var(--gold-100); }
.inst-part .inst-dot { border-color: #2fb36b; background: linear-gradient(90deg, #2fb36b 50%, #fff 50%); }
.inst-body strong { display: block; font-size: 13.5px; }
.inst-body small { display: block; color: var(--muted); font-size: 12px; }
.inst-overdue .inst-body small { color: var(--rose); font-weight: 600; }
.inst-paid b { color: var(--green-700); }
.instalments b { font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.schedule-edit { margin-top: 8px; }
.schedule-edit > summary { list-style: none; cursor: pointer; display: inline-flex; }
.schedule-form { display: grid; gap: 6px; margin-top: 10px; }
.schedule-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 96px; gap: 6px; }
.schedule-form .button { justify-self: start; margin-top: 4px; }
.pay-form { display: grid; gap: 10px; margin-top: 4px; padding-top: 4px; }
.pay-form .field-row { gap: 10px; }
.payment-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.payment-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.payment-list li > span:nth-child(2) { flex: 1; min-width: 0; }
.payment-list strong { display: block; color: var(--green-800); font-size: 14px; }
.payment-list small { display: block; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.payment-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: #dcf3e6; color: var(--green-700); }
.payment-icon .icon { width: 15px; height: 15px; }
.margin-card .summary-sub, .guest-card .summary-sub { margin-top: 0; }
.guest-row { display: flex; align-items: center; gap: 12px; }
.guest-row strong { display: block; }
.guest-row small { color: var(--muted); font-size: 12.5px; }
.guest-contacts { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; }
.guest-contacts li { display: flex; align-items: center; gap: 8px; }
.guest-contacts .icon { width: 15px; height: 15px; color: var(--gold-600); }

/* Booking forms: terms and schedule preview */
.terms-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-bottom: 14px; }
.deposit-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.deposit-picker .chip.is-on { border-color: var(--green-700); background: var(--green-700); color: #fff; }
.deposit-custom { width: 96px; }
.deposit-custom .input { padding-left: 12px; padding-right: 26px; }
.balance-days .input { padding-left: 12px; padding-right: 140px; }
.balance-days .suffix { font-size: 12.5px; }
.booking-summary .summary-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding: 14px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.booking-summary .summary-total span { color: var(--muted); font-size: 13px; font-weight: 600; }
.booking-summary .summary-total strong { color: var(--green-800); font: 700 22px var(--font-display); }
.schedule-preview { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.schedule-preview li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.schedule-preview li.is-now { border-color: #bfe6cf; background: #f3fbf6; }
.schedule-preview strong { display: block; font-size: 13px; }
.schedule-preview small { display: block; color: var(--muted); font-size: 11.5px; }
.schedule-preview b { font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.schedule-preview li.muted { border: 0; background: none; padding: 0; font-size: 12.5px; }
.reservation-preview { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.reservation-preview li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.reservation-preview li > span:nth-child(2) { flex: 1; min-width: 0; }
.reservation-preview strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reservation-preview small { color: var(--muted); font-size: 11.5px; }
.reservation-preview .cost-cat-icon { margin: 0; vertical-align: 0; }
.next-steps { display: grid; gap: 6px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-soft); list-style: none; color: var(--ink-2); font-size: 12.5px; }
.next-steps li { display: flex; align-items: center; gap: 7px; }
.next-steps .icon { width: 14px; height: 14px; color: #2fb36b; }
.confirm-anyway { margin-top: 12px; font-weight: 600; }
.confirm-layout { margin-top: 0; }
.trip-price-action { gap: 10px; align-items: center; }
.booked-note { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--green-700); font-size: 14px; }
.booked-note .icon { width: 16px; height: 16px; }

@media (max-width: 1200px) {
    .booking-row { grid-template-columns: 74px minmax(0, 1fr) 200px 110px; }
    .booking-phase { grid-column: 2 / -1; justify-items: start; grid-auto-flow: column; align-items: center; justify-content: start; }
    .booking-grid { grid-template-columns: minmax(0, 1fr); }
    .booking-side { position: static; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}
@media (max-width: 760px) {
    .booking-row { grid-template-columns: 64px minmax(0, 1fr); }
    .booking-pay, .booking-suppliers, .booking-phase { grid-column: 1 / -1; }
    .booking-suppliers { justify-items: start; grid-auto-flow: column; align-items: center; justify-content: start; gap: 8px; }
    .reservation { grid-template-columns: auto minmax(0, 1fr); }
    .reservation-actions { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
    .danger-zone, .terms-grid { grid-template-columns: minmax(0, 1fr); }
    .cancel-form { flex-direction: column; }
}
@media print {
    .booking-side { position: static; }
    .reservation-actions, .add-reservation, .pay-form, .schedule-edit, .danger-zone, .notes-actions { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .phase-pill.phase-inprogress i, .pay-ring { animation: none; }
}

/* ---------- Finance ---------- */

.finance-nav { display: flex; gap: 4px; margin: -4px 0 18px; padding: 6px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); scrollbar-width: none; }
.finance-nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.finance-nav-link .icon { width: 15px; height: 15px; }
.finance-nav-link:hover { background: var(--surface-2); color: var(--ink); }
.finance-nav-link.active { background: var(--green-800); color: #fff; }
.finance-error { display: flex; align-items: center; gap: 10px; }
.finance-error .icon { width: 18px; height: 18px; flex: none; }
.field-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-actions-inline { margin-top: 18px; padding: 16px 0 0; border-top: 1px solid var(--line-soft); background: none; box-shadow: none; position: static; }
.fin-form-title { margin: 0 0 14px; font: 600 17px var(--font-display); }
.fin-narrow { max-width: 860px; }
.fin-money { display: flex; }
.fin-money select { width: 90px; flex: none; }
.fin-foot-hint { margin: 12px 20px 16px; }

/* Status pills */
.doc-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--line-soft); color: var(--ink-2); font: 700 11px var(--font-body); letter-spacing: .3px; text-decoration: none; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.doc-status .icon { width: 12px; height: 12px; }
.doc-draft { background: var(--gold-100); color: #7d5a20; }
.doc-posted, .doc-open { background: var(--sky-bg); color: #2f6690; }
.doc-paid { background: #dcf3e6; color: var(--green-700); }
.doc-part { background: #e8f6ee; color: var(--green-600); }
.doc-overdue { background: var(--rose-bg); color: var(--rose); }
.doc-void, .doc-reversed { background: var(--line-soft); color: var(--muted); text-decoration: line-through; }
h1 .doc-status { font-size: 12px; vertical-align: 6px; }
.deferred-tag { margin-left: 6px; padding: 1px 7px; border: 1px dashed #d8c08e; border-radius: 6px; color: #7d5a20; font-size: 10.5px; font-weight: 700; }
.doc-table tbody tr { cursor: pointer; }
.pay-bar.mini { width: 90px; height: 4px; margin: 4px 0 0 auto; }

/* Overview */
.fin-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.fin-tile { position: relative; display: grid; gap: 2px; padding: 18px 18px 16px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(100% 120% at 100% 0%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 60%), var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; }
.fin-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgb(6 58 33 / 30%); }
.fin-tile-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 12px; background: var(--tone); color: #fff; box-shadow: 0 8px 16px -8px var(--tone); }
.fin-tile-icon .icon { width: 19px; height: 19px; }
.fin-tile small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.fin-tile strong { font: 700 22px/1.2 var(--font-display); letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.fin-tile span:last-child { color: var(--muted); font-size: 12.5px; }
.fin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.fin-main, .fin-side { display: grid; gap: 20px; min-width: 0; }
.fin-main > .panel, .fin-side > .panel { margin: 0; }
.fin-side-title { margin-top: 0; }
.fin-month { text-align: right; }
.fin-month small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.fin-month strong { display: block; font: 700 20px var(--font-display); }
.fin-month span { color: var(--muted); font-size: 12px; }
.fin-chart { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 12px; height: 200px; padding: 10px 4px 0; border-bottom: 1px solid var(--line); }
.fin-chart-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fin-bars { display: flex; flex: 1; align-items: flex-end; justify-content: center; gap: 4px; width: 100%; }
.fin-bars i { width: min(26px, 40%); min-height: 2px; border-radius: 6px 6px 0 0; animation: bar-grow .6s ease-out both; transform-origin: bottom; }
@keyframes bar-grow { from { transform: scaleY(0); } }
.bar-revenue { background: linear-gradient(180deg, #2fb36b, var(--green-600)); }
.bar-cost { background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); }
.fin-chart-col small { padding-bottom: 6px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.fin-legend { display: flex; gap: 16px; margin: 10px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.fin-legend li { display: inline-flex; align-items: center; gap: 6px; }
.fin-legend i { width: 12px; height: 12px; border-radius: 3px; }
.cash-list, .todo-list, .recent-entries, .booking-invoices { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cash-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.cash-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--sky-bg); color: var(--sky); }
.cash-icon.is-cash { background: #dcf3e6; color: var(--green-700); }
.cash-icon .icon { width: 17px; height: 17px; }
.cash-name { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.cash-name strong { display: block; overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.cash-name small { color: var(--muted); font-size: 11.5px; }
.cash-name:hover strong { color: var(--green-700); }
.cash-amount { text-align: right; font-variant-numeric: tabular-nums; }
.cash-amount strong { display: block; font: 600 15px var(--font-display); }
.cash-amount small { color: var(--muted); font-size: 11.5px; }
.todo-list a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: border-color .15s, background-color .15s; }
.todo-list a:hover { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 6%, #fff); }
.todo-list a span:nth-child(2) { flex: 1; }
.todo-list b { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--tone); color: #fff; font-size: 12px; text-align: center; }
.todo-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: color-mix(in srgb, var(--tone, var(--green-600)) 13%, #fff); color: var(--tone, var(--green-700)); }
.todo-icon .icon { width: 15px; height: 15px; }
.recent-entries li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.recent-entries li:last-child { border-bottom: 0; }
.recent-entries a { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.recent-entries strong { display: block; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.recent-entries small { color: var(--muted); font-size: 11.5px; }
.recent-entries b { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.src-invoice { --tone: #3d7aa8; } .src-receipt { --tone: #2fb36b; } .src-bill { --tone: #d38b26; } .src-supplierpayment { --tone: #d0702a; }
.src-expense { --tone: #c0505c; } .src-transfer { --tone: #2b8a9e; } .src-recognition { --tone: #1f7f4f; } .src-reversal { --tone: #98a199; } .src-manual { --tone: #7a68c2; }
.src-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 12%, #fff); color: color-mix(in srgb, var(--tone) 80%, #000); font-size: 12px; font-weight: 600; white-space: nowrap; }
.src-pill .icon { width: 12px; height: 12px; }
.fin-vat-hint { margin: 0; }

/* Document forms */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.doc-side { display: grid; gap: 16px; }
/* Nothing beside the form (a draft): the form takes the full width. */
.doc-layout:not(:has(> .doc-side > *)) { grid-template-columns: minmax(0, 1fr); }
.doc-layout:not(:has(> .doc-side > *)) > .doc-side { display: none; }
.doc-side .panel { margin: 0; }
.doc-form { padding: 22px; }
.doc-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.doc-fields:disabled .input { border-color: transparent; background: var(--surface-2); color: var(--ink); opacity: 1; }
.doc-lines { width: 100%; margin: 8px 0 6px; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.doc-lines thead th { padding: 8px 6px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-align: left; text-transform: uppercase; }
.doc-lines thead th.num { text-align: right; }
.doc-lines td { padding: 6px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.doc-lines td.num { text-align: right; font-variant-numeric: tabular-nums; }
.doc-lines tbody .input-sm { width: 100%; }
.doc-lines .cost-num { width: 90px; }
.doc-lines .doc-price { width: 120px; }
[data-kind="bill"] .doc-lines th:first-child, [data-kind="expense"] .doc-lines th:first-child { width: 48%; }
.doc-lines tfoot td { border-bottom: 0; color: var(--ink-2); font-weight: 600; }
.doc-total td { padding-top: 10px; border-top: 2px solid var(--ink) !important; color: var(--green-800) !important; font: 700 16px var(--font-display) !important; }
.journal-diff { font-size: 12.5px; font-weight: 700; }
.journal-diff.is-ok { color: var(--green-600); }
.journal-diff.is-off { color: var(--rose); }
.journal-memo { grid-column: span 2; }
.alloc-table tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--rose); }
.alloc-input { display: inline-flex; align-items: center; gap: 6px; }
.alloc-done { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.alloc-done li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.doc-booking { display: grid; gap: 2px; color: inherit; text-decoration: none; }
.doc-booking strong { font-size: 13.5px; }
.doc-booking small { color: var(--muted); font-size: 12px; }
.void-panel { display: grid; gap: 8px; border-color: #f0c4c8; }
.void-panel .button { justify-self: start; }

/* Journal entry panel */
.journal-card .panel-heading h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.journal-card .panel-heading h2 .icon { width: 16px; height: 16px; color: var(--gold-600); }
.journal-card.status-reversed { opacity: .75; }
.journal-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.journal-table th, .journal-table td { padding: 7px 6px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.journal-table thead th { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.journal-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.journal-table tfoot th, .journal-table tfoot td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 700; }
.jl-fx { display: block; color: var(--sky); font-size: 11px; }

/* Reports */
.report-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.report-tab { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; text-decoration: none; }
.report-tab:hover { border-color: var(--green-600); color: var(--green-700); }
.report-tab.active { border-color: var(--green-800); background: var(--green-800); color: #fff; }
.report-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; padding: 14px 18px; }
.report-filters .field { min-width: 170px; }
.report-account { min-width: 320px !important; }
.report-panel { padding: 8px 24px 24px; }
.report-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.report-table th, .report-table td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.report-table thead th { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-table td a { color: var(--ink); text-decoration: none; }
.report-table td a:hover { color: var(--green-700); text-decoration: underline; }
.rt-head th { padding-top: 20px; color: var(--green-800); font: 700 12px var(--font-body); letter-spacing: .6px; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.rt-sub th, .rt-sub td { background: var(--surface-2); font-weight: 700; }
.rt-total th, .rt-total td { padding-top: 12px; border-top: 2px solid var(--ink); border-bottom: 0; color: var(--green-800); font: 700 16px var(--font-display); }
.rt-total.is-loss th, .rt-total.is-loss td { color: var(--rose); }
.bs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.report-account-title { margin: 16px 0 6px; font: 600 18px var(--font-display); }
.report-account-title small { margin-left: 8px; color: var(--muted); font: 500 12.5px var(--font-body); }
.aging-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 16px 0 18px; }
.aging-bucket { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-top: 3px solid var(--bk); }
.aging-bucket small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.aging-bucket strong { display: block; margin: 4px 0 2px; font: 700 17px var(--font-display); font-variant-numeric: tabular-nums; }
.aging-bucket span { color: var(--muted); font-size: 12px; }
.bucket-0 { --bk: #2fb36b; } .bucket-1 { --bk: var(--gold-500); } .bucket-2 { --bk: #d0702a; } .bucket-3 { --bk: var(--rose); } .bucket-4 { --bk: #7a2b33; }
.age-pill { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--bk) 14%, #fff); color: color-mix(in srgb, var(--bk) 80%, #000); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.vat-table { max-width: 640px; }

/* Booking page: invoices and bills */
.invoices-card .panel-heading { margin-bottom: 8px; }
.booking-invoices li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.booking-invoices a { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.booking-invoices strong { display: block; font-size: 13.5px; }
.booking-invoices small { color: var(--muted); font-size: 11.5px; }
.booking-invoices b { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bill-link { text-transform: none; letter-spacing: 0; font-size: 11.5px; }

@media (max-width: 1200px) {
    .fin-grid, .doc-layout { grid-template-columns: minmax(0, 1fr); }
    .fin-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .fin-tiles, .bs-grid { grid-template-columns: minmax(0, 1fr); }
    .field-row-4 { grid-template-columns: 1fr 1fr; }
    .aging-summary { grid-template-columns: 1fr 1fr; }
    .journal-memo { grid-column: auto; }
    .doc-lines thead { display: none; }
}
@media print {
    .finance-nav, .report-tabs, .report-filters, .void-panel, .form-actions-inline { display: none !important; }
    .doc-layout { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .fin-bars i { animation: none; }
    .fin-tile { transition: none; }
}
.receipt-account { min-width: 200px; }
.fin-side, .fin-side > .panel, .doc-side, .doc-side > .panel { min-width: 0; }
.fin-side > .panel { overflow: hidden; }
.doc-entry { margin-top: 20px; }

/* ---------- Users & roles ---------- */

.role-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 20px; }
.role-card { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s; }
.role-card:hover { transform: translateY(-2px); border-color: var(--green-600); box-shadow: 0 14px 28px -16px rgb(6 58 33 / 30%); }
.role-card.is-owner { background: radial-gradient(100% 120% at 100% 0%, rgb(197 150 74 / 18%), transparent 60%), var(--surface); }
.role-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.role-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--green-50); color: var(--green-700); }
.is-owner .role-icon { background: var(--gold-500); color: var(--green-900); }
.role-icon .icon { width: 18px; height: 18px; }
.role-users { font: 700 18px var(--font-display); }
.role-users small { color: var(--muted); font: 500 11.5px var(--font-body); }
.role-card strong { font: 600 16px var(--font-display); }
.role-card > small { min-height: 34px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.role-meter { display: block; height: 5px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: var(--line-soft); }
.role-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-500), #2fb36b); }
.role-count { color: var(--ink-2); font-size: 12px; font-weight: 600; }
.role-assign .input-sm { min-width: 170px; }
.role-pill { padding: 3px 10px; border-radius: 999px; background: var(--green-50); color: var(--green-700); font-size: 12px; font-weight: 700; }
.table-hint { margin: 12px 20px 16px; }
.copy-role .input { min-width: 220px; }

.rights-toolbar { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.rights-total { margin-right: auto; color: var(--ink-2); font-size: 14px; }
.rights-total strong { font: 700 18px var(--font-display); color: var(--green-800); }
.rights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.rights-group { margin: 0; padding: 0 0 6px; border-top: 4px solid var(--line); overflow: hidden; }
.rights-group.is-part { border-top-color: var(--gold-500); }
.rights-group.is-full { border-top-color: #2fb36b; }
.rights-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px 10px; float: left; }
.rights-head + * { clear: both; }
.rights-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--green-50); color: var(--green-700); }
.rights-icon .icon { width: 16px; height: 16px; }
.rights-head strong { display: block; font: 600 14.5px var(--font-display); }
.rights-head small { color: var(--muted); font-size: 12px; }
.rights-group-all { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.right-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--line-soft); cursor: pointer; }
.right-row:hover { background: var(--surface-2); }
.right-row input, .rights-group-all input { width: 17px; height: 17px; margin: 2px 0 0; flex: none; accent-color: var(--green-700); }
.right-row strong { display: block; font-size: 13.5px; }
.right-row small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.right-row:has(input:checked) strong { color: var(--green-800); }

/* ===================================================================== Fleet */
.h1-sub { margin-left: 6px; color: var(--muted); font-size: .55em; font-weight: 600; letter-spacing: .02em; }
.block { display: block; }
.fleet-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.fleet-side { display: grid; gap: 16px; min-width: 0; }
.fleet-side > .panel { margin: 0; }
.vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; min-width: 0; }
.vehicle-card { --state: var(--green-500); --state-bg: var(--green-50); position: relative; display: grid; align-content: start; gap: 10px; padding: 16px 16px 14px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; transition: box-shadow .15s, transform .15s, border-color .15s; }
.vehicle-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--state); }
.vehicle-card:hover { border-color: #d9d5c8; box-shadow: var(--shadow); transform: translateY(-1px); }
.vehicle-card:focus-visible { box-shadow: var(--ring); outline: none; }
.vehicle-card.state-ontour { --state: var(--sky); --state-bg: var(--sky-bg); }
.vehicle-card.state-offroad { --state: var(--rose); --state-bg: var(--rose-bg); }
.vehicle-card.state-blocked { --state: var(--gold-500); --state-bg: var(--gold-100); }
.vehicle-card-top { display: flex; align-items: center; gap: 10px; }
.vehicle-badge { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--state-bg); color: var(--state); }
.vehicle-id { display: grid; min-width: 0; }
.vehicle-id strong { font-size: 16px; letter-spacing: .01em; }
.vehicle-id small { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.vehicle-state { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 9px; border-radius: 999px; background: var(--state-bg); color: var(--state); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.vehicle-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vehicle-model { color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.vehicle-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.vehicle-chips span { padding: 2px 8px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 600; }
.vehicle-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.vehicle-stats span { display: grid; gap: 1px; min-width: 0; }
.vehicle-stats small { color: var(--subtle); font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.vehicle-stats strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.vehicle-tour { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 8px; background: var(--sky-bg); color: var(--sky); font-size: 12.5px; font-weight: 650; }
.vehicle-tour.is-off { background: var(--rose-bg); color: var(--rose); }
.vehicle-tour .icon { flex: none; width: 15px; height: 15px; }
.vehicle-flags { display: flex; gap: 6px; }
.flag-danger, .flag-warn { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.flag-danger { background: var(--rose-bg); color: var(--rose); }
.flag-warn { background: var(--gold-100); color: var(--gold-600); }
.flag-inline { margin-left: 8px; vertical-align: 1px; }
.vehicle-status { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--green-50); color: var(--green-600); font-size: 12px; font-weight: 700; vertical-align: 5px; }
.vehicle-status.status-offroad { background: var(--rose-bg); color: var(--rose); }
.vehicle-status.status-sold { background: var(--line-soft); color: var(--muted); }

.fleet-alerts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fleet-alert { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-2); }
.fleet-alert a { display: grid; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.fleet-alert a:hover strong { text-decoration: underline; }
.fleet-alert strong { font-size: 13px; }
.fleet-alert small { color: var(--muted); font-size: 12px; }
.fleet-alert-icon { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--gold-100); color: var(--gold-600); }
.fleet-alert-icon .icon { width: 15px; height: 15px; }
.alert-danger { border-color: #f1d3d5; background: #fdf6f6; }
.alert-danger .fleet-alert-icon { background: var(--rose-bg); color: var(--rose); }
.alert-info .fleet-alert-icon { background: var(--sky-bg); color: var(--sky); }
.driver-mini { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.driver-mini a { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; color: inherit; text-decoration: none; }
.driver-mini a:hover { background: var(--surface-2); }
.driver-mini span:last-child { display: grid; min-width: 0; }
.driver-mini strong { font-size: 13px; }
.driver-mini small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.driver-mini .avatar-sm { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green-100); color: var(--green-700); font-size: 12px; font-weight: 700; }
.driver-tours { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.driver-tours li { display: grid; gap: 1px; }
.driver-tours small { color: var(--muted); font-size: 12px; }

.fleet-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.fleet-detail-grid > .panel { min-width: 0; margin: 0; }
.expiry { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--green-50); color: var(--green-600); font-size: 12.5px; font-weight: 650; }
.expiry-soon { background: var(--gold-100); color: var(--gold-600); padding: 1px 6px; border-radius: 5px; font-weight: 650; }
.expiry-expired { background: var(--rose-bg); color: var(--rose); padding: 1px 6px; border-radius: 5px; font-weight: 650; }
.doc-missing { margin: 10px 0 0; color: var(--rose); }
.inline-add { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.inline-add > summary, .inline-add-panel > summary { display: inline-flex; align-items: center; gap: 6px; color: var(--green-700); font-size: 13.5px; font-weight: 650; cursor: pointer; list-style: none; }
.inline-add > summary::-webkit-details-marker, .inline-add-panel > summary::-webkit-details-marker { display: none; }
.inline-add > summary .icon, .inline-add-panel > summary .icon { width: 16px; height: 16px; }
.inline-add .inline-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; align-items: end; margin-top: 12px; }
.inline-add .inline-form label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 11.5px; font-weight: 650; }
.inline-add .inline-form .input { width: 100%; min-width: 0; }
.inline-add-panel[open] > summary { margin-bottom: 14px; }
.trip-log-list { display: grid; margin: 0; padding: 0; list-style: none; }
.trip-log-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.trip-log-list li:last-child { border-bottom: 0; }
.trip-log-date { flex: none; width: 104px; color: var(--muted); font-size: 12.5px; font-weight: 650; }
.trip-log-main { display: grid; flex: 1; min-width: 0; }
.trip-log-main strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.trip-log-main small { color: var(--muted); font-size: 12px; }
.odo-form { display: inline-flex; align-items: center; gap: 6px; }
.odo-form .input { width: 100px; }
form.inline { display: inline; }
.row-live td { background: #f3f8fb; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 14px 18px; border: 1px dashed #ecc9cc; border-radius: var(--radius); color: var(--muted); font-size: 13px; }
.fleet-form fieldset { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.fleet-form legend { margin-bottom: 10px; color: var(--ink); font-size: 14px; font-weight: 700; }
.check-row { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 4px; }
.field-end { display: flex; align-items: flex-end; }
.field-end .button { width: 100%; }
.job-text { margin: 0 0 12px; color: var(--ink-2); white-space: pre-line; }
.pay-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; padding: 0; border: 0; }
.pay-choice legend { margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.radio-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--green-600); background: var(--green-50); box-shadow: 0 0 0 1px var(--green-600); }
.radio-card input { margin: 2px 0 0; accent-color: var(--green-700); }
.radio-card span { display: grid; gap: 2px; }
.radio-card strong { font-size: 13px; }
.radio-card small { color: var(--muted); font-size: 12px; }
.cost-bars { min-width: 140px; }
.cost-bars .bar { height: 7px; margin: 2px 0; border-radius: 4px; }
.cost-bars .bar-cost, .key-cost { background: var(--rose); }
.cost-bars .bar-recovered, .key-recovered { background: var(--green-500); }
.cost-legend { color: var(--muted); font-size: 12px; white-space: nowrap; }
.cost-legend .key { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 8px; border-radius: 3px; vertical-align: -1px; }

/* Operations: assigning from the fleet register */
.assign-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.assign-card { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.assign-card h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.assign-card h3 .icon { width: 17px; height: 17px; color: var(--green-600); }
.assign-card label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 11.5px; font-weight: 650; }
.assign-card .input { width: 100%; min-width: 0; max-width: 100%; margin: 0; }
.assign-card select option:disabled { color: #a9aea8; }
.assign-hire, .assign-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.assign-hire[hidden] { display: none; }
.assign-hire:has(> label:only-child) { grid-template-columns: minmax(0, 1fr); }
.assign-card .button { justify-self: start; }

@media (max-width: 1200px) {
    .fleet-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
    .fleet-detail-grid, .assign-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .inline-add .inline-form, .pay-choice, .assign-hire, .assign-dates, .vehicle-grid { grid-template-columns: minmax(0, 1fr); }
    .danger-zone { flex-direction: column; align-items: stretch; }
    .trip-log-list li { flex-wrap: wrap; }
}

/* ===================================================================== Customers */
.customers-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.customers-toolbar .booking-filters { margin: 0; }
.search-form { min-width: 240px; }
.search-form .input { width: 100%; }
.customer-name { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.customer-name > span:last-child { display: grid; min-width: 0; }
.customer-name small { color: var(--muted); font-size: 12px; }
.customer-layout { align-items: start; }
.customer-main { display: grid; gap: 16px; min-width: 0; }
.customer-main > .panel { margin: 0; }
.customer-notes { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.aging-list { display: grid; gap: 0; margin: 0 0 12px; }
.aging-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.aging-list dt { color: var(--muted); }
.aging-list dd { margin: 0; font-weight: 650; }
.aging-list .is-late dd { color: var(--rose); }
.aging-list .aging-total { border-bottom: 0; }
.aging-list .aging-total dt, .aging-list .aging-total dd { color: var(--ink); font-weight: 750; }
.aging-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 14px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
.aging-strip > div { padding: 9px 12px; background: var(--surface-2); }
.aging-strip dt { color: var(--muted); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.aging-strip dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 700; }
.statement-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.statement-range label { display: grid; gap: 5px; color: var(--muted); font-size: 11.5px; font-weight: 650; }
.statement-closing { display: grid; justify-items: end; }
.statement-closing small { color: var(--muted); font-size: 12px; }
.statement-closing strong { font-size: 20px; }
.statement-opening td { color: var(--muted); font-style: italic; }
.statement-open-title { margin: 16px 0 8px; }
.row-overdue td { color: var(--rose); }
.text-green { color: var(--green-600); }
.bill-to { margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--line); }
.credit-accept { margin-top: 8px; white-space: normal; color: var(--rose); }
@media (max-width: 640px) {
    .aging-strip { grid-template-columns: minmax(0, 1fr); }
    .search-form { min-width: 0; width: 100%; }
}

/* ----- Customers: list rows ----- */
.customer-table td { vertical-align: middle; }
.initials { display: inline-grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--green-100); color: var(--green-700); font: 700 13px var(--font-display); letter-spacing: .02em; }
.initials.kind-agent { background: var(--sky-bg); color: var(--sky); }
.initials.kind-company { background: var(--sand-bg); color: var(--sand); }
.customer-name strong { font-size: 14px; }
.kind-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--green-50); color: var(--green-700); font-size: 12px; font-weight: 650; white-space: nowrap; }
.kind-pill .icon { width: 13px; height: 13px; }
.kind-pill.kind-agent { background: var(--sky-bg); color: var(--sky); }
.kind-pill.kind-company { background: var(--sand-bg); color: var(--sand); }
.trip-date { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.trip-date .icon { width: 14px; height: 14px; color: var(--subtle); }
.terms-cell { display: grid; gap: 4px; min-width: 150px; }
.terms-cell > span:first-child { font-size: 13px; }
.terms-cell small { font-size: 11.5px; }
.credit-meter { display: block; width: 100%; max-width: 160px; height: 5px; overflow: hidden; border-radius: 3px; background: var(--line-soft); }
.credit-meter > i, .credit-meter > b { display: block; height: 100%; border-radius: 3px; background: var(--green-500); }
.credit-meter.is-high > i, .credit-meter.is-high > b { background: var(--gold-500); }
.credit-meter.is-over > i, .credit-meter.is-over > b { background: var(--rose); }
.credit-meter.on-dark { margin-top: 6px; background: rgb(255 255 255 / 16%); }
.balance-cell strong { display: block; font-size: 14px; }
.balance-cell small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; }
.row-inactive td { opacity: .6; }

/* ----- Customers: details band ----- */
.customer-band .trip-band-top { align-items: flex-start; }
.band-avatar { display: grid; flex: none; place-items: center; width: 56px; height: 56px; border: 2px solid rgb(255 255 255 / 22%); border-radius: 50%; background: rgb(255 255 255 / 12%); color: #fff; font: 700 19px var(--font-display); }
.customer-band.kind-agent .band-avatar { background: color-mix(in srgb, var(--sky) 55%, transparent); }
.customer-band.kind-company .band-avatar { background: color-mix(in srgb, var(--gold-500) 45%, transparent); }
.customer-band .builder-heading { flex: 1; min-width: 0; }
.customer-band .builder-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.band-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.band-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / 10%); color: rgb(247 243 232 / 88%); font-size: 12px; font-weight: 600; }
.band-tag .icon { width: 13px; height: 13px; color: var(--gold-300); }
.band-tag.is-off { background: var(--rose); color: #fff; }
.band-credit.is-over strong { color: #ffb4b9; }

/* ----- Customers: editor ----- */
.customer-editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.customer-editor-main { display: grid; gap: 16px; min-width: 0; }
.customer-editor-main > .panel { margin: 0; }
.customer-editor .form-section-head { margin-bottom: 16px; }
.customer-editor-side { position: sticky; top: 84px; display: grid; gap: 14px; }
.kind-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kind-card { --tone: var(--green-600); --tone-bg: var(--green-50); position: relative; display: grid; align-content: start; gap: 6px; padding: 18px 16px 16px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.kind-card.kind-agent { --tone: var(--sky); --tone-bg: var(--sky-bg); }
.kind-card.kind-company { --tone: var(--sand); --tone-bg: var(--sand-bg); }
.kind-card:hover { border-color: color-mix(in srgb, var(--tone) 40%, var(--line)); transform: translateY(-1px); }
.kind-card input { position: absolute; opacity: 0; pointer-events: none; }
.kind-card:has(input:focus-visible) { box-shadow: var(--ring); }
.kind-card:has(input:checked) { border-color: var(--tone); background: color-mix(in srgb, var(--tone-bg) 55%, #fff); box-shadow: 0 0 0 1px var(--tone), 0 10px 24px -16px var(--tone); }
.kind-card-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 12px; background: var(--tone-bg); color: var(--tone); }
.kind-card-icon .icon { width: 22px; height: 22px; }
.kind-card:has(input:checked) .kind-card-icon { background: var(--tone); color: #fff; }
.kind-card-check { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--line); border-radius: 50%; color: transparent; transition: all .15s; }
.kind-card-check .icon { width: 13px; height: 13px; }
.kind-card:has(input:checked) .kind-card-check { border-color: var(--tone); background: var(--tone); color: #fff; }
.kind-card strong { font: 600 15px var(--font-display); }
.kind-card small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.kind-card ul { display: grid; gap: 4px; margin: 6px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line); list-style: none; }
.kind-card li { position: relative; padding-left: 16px; color: var(--ink-2); font-size: 12px; }
.kind-card li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.currency-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.currency-pills label { cursor: pointer; }
.currency-pills input { position: absolute; opacity: 0; pointer-events: none; }
.currency-pills span { display: inline-block; min-width: 58px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 650; text-align: center; transition: all .15s; }
.currency-pills label:hover span { border-color: var(--green-500); }
.currency-pills input:checked + span { border-color: var(--green-700); background: var(--green-700); color: #fff; }
.currency-pills input:focus-visible + span { box-shadow: var(--ring); }
.term-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.term-chip { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.term-chip:hover { border-color: var(--green-500); }
.term-chip.active { border-color: var(--green-700); background: var(--green-50); color: var(--green-700); box-shadow: 0 0 0 1px var(--green-700); }
.term-custom { width: 130px; }
.term-custom .input { height: 38px; }

.customer-preview { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--surface), var(--surface-2)); box-shadow: var(--shadow-sm); }
.preview-label { display: block; margin-bottom: 10px; color: var(--subtle); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.preview-card { --tone: var(--green-600); --tone-bg: var(--green-50); display: grid; justify-items: center; gap: 4px; padding: 22px 16px 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.kind-agent .preview-card { --tone: var(--sky); --tone-bg: var(--sky-bg); }
.kind-company .preview-card { --tone: var(--sand); --tone-bg: var(--sand-bg); }
.preview-avatar { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--tone-bg); color: var(--tone); font: 700 22px var(--font-display); box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--tone-bg); }
.preview-card > strong { max-width: 100%; overflow: hidden; font: 600 17px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.preview-kind { padding: 2px 10px; border-radius: 999px; background: var(--tone-bg); color: var(--tone); font-size: 11.5px; font-weight: 700; }
.preview-lines { display: grid; gap: 6px; width: 100%; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-soft); list-style: none; text-align: left; }
.preview-lines li { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-2); font-size: 12.5px; }
.preview-lines li[hidden] { display: none; }
.preview-lines li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-lines .icon { flex: none; width: 14px; height: 14px; color: var(--subtle); }
.preview-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 12px; }
.preview-terms span { display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); text-align: left; }
.preview-terms span[hidden] { display: none; }
.preview-terms small { color: var(--subtle); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.preview-terms b { font-size: 13px; }
.preview-tip { display: flex; gap: 8px; margin: 14px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.preview-tip .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--gold-600); }
.preview-tip span[hidden] { display: none; }
.customer-editor-actions { display: grid; gap: 8px; }
.customer-editor-actions .button { justify-content: center; width: 100%; }
.customer-editor-actions .check { justify-content: center; margin-top: 4px; }
.customer-editor-actions .text-button-strong { justify-self: center; }

@media (max-width: 1100px) {
    .customer-editor { grid-template-columns: minmax(0, 1fr); }
    .customer-editor-side { position: static; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .kind-cards { grid-template-columns: minmax(0, 1fr); }
    .kind-card ul { display: none; }
    .customer-band .trip-band-top { flex-wrap: wrap; }
    .customer-band .builder-actions { width: 100%; margin-left: 0; }
    .band-avatar { width: 44px; height: 44px; font-size: 15px; }
}

/* ===================================================================== Operations: dashboard, tour files, calendar */
.tone-prep { --tone: #b7832f; --tone-bg: #fbf1de; --tone-ink: #7a5419; }
.tone-ready { --tone: var(--green-500); --tone-bg: var(--green-50); --tone-ink: var(--green-700); }
.tone-road { --tone: var(--sky); --tone-bg: var(--sky-bg); --tone-ink: #285a80; }
.tone-done { --tone: #8a948d; --tone-bg: #eef0ed; --tone-ink: #59635c; }
.tone-off { --tone: var(--rose); --tone-bg: var(--rose-bg); --tone-ink: #8e2f39; }
.status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--tone-bg); color: var(--tone-ink); font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.status-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.tone-dot { display: inline-block; width: 7px; height: 7px; margin: 0 4px 1px 6px; border-radius: 50%; background: var(--tone); vertical-align: middle; }

/* Readiness ring and check chips */
.ready-ring { --ring-c: var(--green-500); position: relative; display: grid; flex: none; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(var(--ring-c) calc(var(--p) * 1%), var(--line-soft) 0); }
.ready-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.ready-ring b { position: relative; font: 700 13px var(--font-display); }
.ready-ring b::after { content: "%"; margin-left: 1px; color: var(--muted); font-size: 9px; }
.ready-ring[style*="--p:100"] { --ring-c: var(--green-600); }
.ops-gate-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.gate-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 6px; font-size: 11.5px; font-weight: 650; }
.gate-chip .icon { width: 12px; height: 12px; }
.gate-chip.is-done { background: var(--green-50); color: var(--green-700); }
.gate-chip.is-missing { background: var(--rose-bg); color: var(--rose); }
.ops-tour-team { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.ops-tour-team > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.ops-tour-team .icon { flex: none; width: 14px; height: 14px; color: var(--subtle); }
.ops-tour-team .is-missing { color: var(--rose); }
.ops-tour-team .is-missing .icon { color: var(--rose); }

/* Bands */
.ops-band .band-lede { margin: 6px 0 0; color: rgb(247 243 232 / 78%); font-size: 14px; }
.ops-band .builder-heading { flex: 1; min-width: 0; }
.ops-band .builder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.trip-band-facts li.band-alert .band-icon { background: var(--rose); color: #fff; }
.trip-band-facts li.band-alert strong { color: #ffc2c7; }

/* The builder's header reflows by its own width (it narrows when the sidebar is open):
   the buttons move under the title rather than being cut off, and the facts go two by two. */
.trip-builder .trip-band { container-type: inline-size; }
@container (max-width: 940px) {
    .trip-builder .trip-band-top { flex-wrap: wrap; row-gap: 14px; }
    .trip-builder .trip-band .builder-heading { flex: 1 1 calc(100% - 70px); }
    .trip-builder .trip-band .builder-actions { flex: 1 1 100%; padding-left: 60px; }
    .trip-builder .trip-band-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trip-builder .trip-band-facts li:nth-child(odd) { border-left: 0; }
    .trip-builder .trip-band-facts li:nth-child(n + 3) { border-top: 1px solid rgb(255 255 255 / 10%); }
}
@container (max-width: 520px) {
    .trip-builder .trip-band .builder-actions { padding-left: 0; }
    .trip-builder .trip-band-facts { grid-template-columns: minmax(0, 1fr); }
    .trip-builder .trip-band-facts li { border-left: 0; }
    .trip-builder .trip-band-facts li + li { border-top: 1px solid rgb(255 255 255 / 10%); }
}
/* Every day tab stays in view: they wrap to a second line instead of hiding off the edge. */
.day-editor .tabs { flex-wrap: wrap; row-gap: 0; }
.icon-button.on-dark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 10px; background: rgb(255 255 255 / 10%); color: #fff; }
.icon-button.on-dark:hover { background: rgb(255 255 255 / 18%); }
.view-switch { display: inline-flex; padding: 3px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 11px; background: rgb(0 0 0 / 18%); }
.view-switch a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; color: rgb(247 243 232 / 80%); font-size: 13px; font-weight: 650; text-decoration: none; }
.view-switch a .icon { width: 15px; height: 15px; }
.view-switch a:hover { color: #fff; }
.view-switch a.active { background: #fff; color: var(--green-800); box-shadow: var(--shadow-sm); }

/* Dashboard */
.ops-dash { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.ops-dash > .panel, .ops-dash-side > .panel { margin: 0; }
.ops-dash-side { display: grid; gap: 16px; min-width: 0; }
.ops-day-group { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.ops-day-group:first-of-type { border-top: 0; }
.ops-day-label { display: grid; align-content: start; gap: 1px; padding-top: 10px; }
.ops-day-label strong { font: 600 15px var(--font-display); }
.ops-day-label small { color: var(--muted); font-size: 12px; }
.ops-day-group.is-today .ops-day-label strong { color: var(--green-600); }
.ops-day-tours { display: grid; gap: 10px; min-width: 0; }
.ops-tour-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ring main team" "ring gates gates"; gap: 6px 14px; align-items: center; padding: 12px 14px 12px 16px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.ops-tour-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tone); }
.ops-tour-row:hover { border-color: #d6d2c4; box-shadow: var(--shadow); }
.ops-tour-row .ready-ring { grid-area: ring; }
.ops-tour-main { grid-area: main; display: grid; gap: 1px; min-width: 0; }
.ops-tour-main strong { overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.ops-tour-main small { color: var(--muted); font-size: 12.5px; }
.ops-tour-ref { display: flex; align-items: center; gap: 8px; color: var(--gold-600); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.ops-tour-row .ops-tour-team { grid-area: team; justify-content: flex-end; }
.ops-tour-row .ops-gate-chips { grid-area: gates; }
.ops-later { margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--line); }
.ops-later .summary-sub { margin: 0 0 8px; }
.ops-later-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 90px 38px; gap: 12px; align-items: center; padding: 8px 6px; border-radius: 8px; color: inherit; text-decoration: none; }
.ops-later-row:hover { background: var(--surface-2); }
.ops-later-row span:nth-child(2) { display: grid; min-width: 0; }
.ops-later-row strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ops-later-row small { color: var(--muted); font-size: 12px; }
.ops-later-row b { font-size: 12px; text-align: right; }
.ops-later-date { color: var(--muted); font-size: 12.5px; font-weight: 650; }
.mini-progress { display: block; height: 5px; overflow: hidden; border-radius: 3px; background: var(--line-soft); }
.mini-progress i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold-500), var(--green-500)); }
.road-list, .blocker-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.road-list a, .blocker-list a { display: grid; gap: 5px; padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-2); color: inherit; text-decoration: none; }
.road-list a:hover, .blocker-list a:hover { border-color: var(--line); background: var(--surface); }
.road-top, .blocker-top { display: flex; justify-content: space-between; gap: 10px; }
.road-top strong, .blocker-top strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.road-day { flex: none; color: var(--sky); font-size: 12px; font-weight: 700; }
.road-bar { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--sky-bg); }
.road-bar i { display: block; height: 100%; border-radius: 3px; background: var(--sky); }
.road-list small { color: var(--muted); font-size: 12px; }
.road-team { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.road-team .icon { width: 13px; height: 13px; margin-left: 4px; }
.road-team .icon:first-child { margin-left: 0; }
.blocker-when { flex: none; color: var(--rose); font-size: 12px; font-weight: 700; }
.blocker-missing { display: flex; flex-wrap: wrap; gap: 5px; }
.blocker-missing span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--rose-bg); color: var(--rose); font-size: 11.5px; font-weight: 650; }
.blocker-missing .icon { width: 12px; height: 12px; }

/* Tour files */
.tourfile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.tourfile-card { position: relative; display: grid; align-content: start; gap: 12px; padding: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tourfile-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tone); }
.tourfile-card:hover { border-color: #d6d2c4; box-shadow: var(--shadow); transform: translateY(-1px); }
.tourfile-top { display: flex; align-items: flex-start; gap: 12px; }
.tourfile-date { display: grid; flex: none; justify-items: center; width: 52px; padding: 6px 0; border-radius: 10px; background: var(--tone-bg); color: var(--tone-ink); }
.tourfile-date small { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.tourfile-date strong { font: 700 20px/1.1 var(--font-display); }
.tourfile-head { display: grid; flex: 1; gap: 2px; min-width: 0; }
.tourfile-ref { color: var(--gold-600); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.tourfile-head strong { font: 600 16px/1.25 var(--font-display); }
.tourfile-head small { color: var(--muted); font-size: 12.5px; }
.tourfile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.tourfile-when { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.tourfile-when .icon { width: 14px; height: 14px; color: var(--subtle); }
.tourfile-card .ops-tour-team { padding-top: 10px; border-top: 1px dashed var(--line); }

/* Calendar: tours */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.cal-layout > .panel { margin: 0; }
.cal-panel { padding: 0; overflow: hidden; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 18px; height: 8px; border-radius: 4px; background: var(--tone); }
.cal-legend .legend-flag { margin-left: auto; color: var(--rose); }
.cal-legend .legend-flag .icon { width: 14px; height: 14px; }
.cal-legend .legend-note { margin-left: auto; }
.cal-scroll { overflow-x: auto; }
.cal-grid { min-width: 760px; }
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cal-head span { padding: 9px 10px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cal-head .is-weekend { color: var(--gold-600); }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 32px repeat(var(--lanes), 26px) minmax(14px, 1fr); row-gap: 4px; min-height: 118px; border-bottom: 1px solid var(--line-soft); }
.cal-week:last-child { border-bottom: 0; }
.cal-day { display: flex; align-items: flex-start; justify-content: space-between; grid-row: 1 / -1; padding: 7px 9px; border-left: 1px solid var(--line-soft); }
.cal-day:first-child { border-left: 0; }
.cal-day.is-weekend { background: #fbfaf6; }
.cal-day.is-outside { background: repeating-linear-gradient(135deg, #faf9f5 0 6px, #f6f5f0 6px 12px); }
.cal-day.is-outside .cal-day-num { color: var(--subtle); }
.cal-day.is-today { background: color-mix(in srgb, var(--green-50) 70%, #fff); box-shadow: inset 0 3px 0 var(--green-500); }
.cal-day-num { font: 600 14px var(--font-display); }
.cal-day.is-today .cal-day-num { display: grid; place-items: center; width: 26px; height: 26px; margin: -3px 0 0 -4px; border-radius: 50%; background: var(--green-600); color: #fff; font-size: 13px; }
.cal-departs { display: inline-flex; align-items: center; gap: 3px; color: var(--gold-600); font-size: 11px; font-weight: 700; }
.cal-departs .icon { width: 12px; height: 12px; }
.cal-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; min-width: 0; margin: 0 -1px; padding: 0 8px; overflow: hidden; background: var(--tone-bg); color: var(--tone-ink); font-size: 12px; text-decoration: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 28%, transparent); transition: filter .15s, box-shadow .15s; }
.cal-bar.starts { margin-left: 5px; border-left: 3px solid var(--tone); border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
.cal-bar.ends { margin-right: 5px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; }
.cal-bar:hover { z-index: 2; box-shadow: inset 0 0 0 1px var(--tone), 0 4px 12px -6px var(--tone); filter: saturate(1.15); }
.cal-bar-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-bar-text b { margin-right: 5px; font-weight: 750; }
.cal-bar-text em { color: color-mix(in srgb, var(--tone-ink) 70%, transparent); font-style: normal; }
.cal-flag { flex: none; width: 13px; height: 13px; color: var(--rose); }
.cal-agenda { padding: 0; overflow: hidden; }
.cal-agenda-head { padding: 18px 18px 12px; border-bottom: 1px solid var(--line-soft); }
.cal-agenda-head h2 { margin: 0; font-size: 18px; }
.cal-agenda-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.cal-agenda-list { display: grid; gap: 0; max-height: 820px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; }
.agenda-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border-radius: 10px; color: inherit; text-decoration: none; }
.agenda-card:hover { background: var(--surface-2); }
.agenda-date { display: grid; justify-items: center; padding: 5px 0; border-radius: 9px; background: var(--tone-bg); color: var(--tone-ink); }
.agenda-date strong { font: 700 18px/1.1 var(--font-display); }
.agenda-date small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.agenda-body { display: grid; gap: 3px; min-width: 0; }
.agenda-ref { color: var(--muted); font-size: 11.5px; font-weight: 650; }
.agenda-body strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.agenda-body small { color: var(--muted); font-size: 12px; }
.agenda-body .ops-gate-chips { margin-top: 3px; }
.agenda-card .ready-ring { width: 40px; height: 40px; }

/* Calendar: fleet & guides board */
.rb-panel { padding: 0; overflow: hidden; }
.rb-scroll { overflow-x: auto; }
.rb { min-width: calc(220px + var(--days) * 34px); }
.rb-row { display: grid; grid-template-columns: 220px repeat(var(--days), minmax(30px, 1fr)); grid-template-rows: 44px; border-bottom: 1px solid var(--line-soft); }
.rb-row > * { grid-row: 1; }
.rb-head { position: sticky; top: 0; z-index: 3; grid-template-rows: 46px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.rb-label { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 0 12px; border-right: 1px solid var(--line); background: var(--surface); grid-column: 1; }
.rb-head .rb-label { background: var(--surface-2); }
.rb-label > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.rb-label strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.rb-label a { color: inherit; text-decoration: none; }
.rb-label a:hover strong { text-decoration: underline; }
.rb-label small { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.rb-icon { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--green-50); color: var(--green-600); }
.rb-icon .icon { width: 14px; height: 14px; }
.rb-icon.is-alert { background: var(--rose-bg); color: var(--rose); }
.rb-use { flex: none; color: var(--ink-2); font-size: 12px; font-style: normal; font-weight: 700; }
.rb-use small { color: var(--subtle); font-weight: 600; }
.rb-day { display: grid; place-items: center; align-content: center; gap: 0; border-left: 1px solid var(--line-soft); font: 600 12.5px var(--font-display); }
.rb-day small { color: var(--subtle); font: 700 9.5px var(--font-body, inherit); letter-spacing: .05em; }
.rb-day.is-weekend { background: #f4f1e8; }
.rb-day.is-today { background: var(--green-600); color: #fff; }
.rb-day.is-today small { color: rgb(255 255 255 / 75%); }
.rb-cell { border-left: 1px solid var(--line-soft); }
.rb-cell.is-weekend { background: #fbfaf6; }
.rb-cell.is-today { background: color-mix(in srgb, var(--green-50) 80%, #fff); box-shadow: inset 1px 0 0 var(--green-500), inset -1px 0 0 var(--green-500); }
.rb-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; min-width: 0; margin: 7px 2px; padding: 0 8px; overflow: hidden; border-left: 3px solid var(--tone); border-radius: 7px; background: var(--tone-bg); color: var(--tone-ink); font-size: 12px; text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 25%, transparent); }
.rb-bar:hover { box-shadow: inset 0 0 0 1px var(--tone), 0 4px 12px -6px var(--tone); }
.rb-bar b { flex: none; font-weight: 750; }
.rb-bar span { overflow: hidden; text-overflow: ellipsis; }
/* Short trips: the label runs on past the bar into the free days. */
.rb-bar.is-short { overflow: visible; }
.rb-bar.is-short b, .rb-bar.is-short span { position: relative; z-index: 2; overflow: visible; }
.rb-bar.is-short span { padding: 0 6px; border-radius: 4px; background: rgb(255 255 255 / 92%); color: var(--ink-2); }
.rb-bar.is-dashed { border-left-style: dashed; background: repeating-linear-gradient(135deg, var(--rose-bg) 0 8px, #fff4f4 8px 16px); }
.rb-group { position: sticky; left: 0; display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rb-group .icon { width: 14px; height: 14px; }
.rb-group.is-alert { color: var(--rose); }
.rb-empty { padding: 40px 20px; }

@media (max-width: 1200px) {
    .ops-dash, .cal-layout { grid-template-columns: minmax(0, 1fr); }
    .cal-agenda-list { max-height: none; }
}
@media (max-width: 760px) {
    .ops-band .builder-actions { width: 100%; margin-left: 0; }
    .ops-band .trip-band-top { flex-wrap: wrap; }
    .ops-day-group { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .ops-day-label { display: flex; gap: 8px; align-items: baseline; padding-top: 0; }
    .ops-tour-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ring main" "team team" "gates gates"; }
    .ops-tour-row .ops-tour-team { justify-content: flex-start; }
    .ops-later-row { grid-template-columns: 54px minmax(0, 1fr) 38px; }
    .ops-later-row .mini-progress { display: none; }
    .tourfile-grid { grid-template-columns: minmax(0, 1fr); }
    .rb-row { grid-template-columns: 150px repeat(var(--days), minmax(30px, 1fr)); }
    .rb { min-width: calc(150px + var(--days) * 32px); }
    .rb-use { display: none; }
}

/* ----- Operations: tour file ----- */
.tour-band .builder-heading { flex: 1; min-width: 0; }
.tour-band .band-tag.status-chip { background: var(--tone-bg); color: var(--tone-ink); }
.band-tag-link { text-decoration: none; }
.band-tag-link:hover { background: rgb(255 255 255 / 18%); color: #fff; }
.status-steps { position: relative; z-index: 1; display: flex; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: step; }
.status-steps li { position: relative; display: flex; flex: 1; align-items: center; gap: 8px; color: rgb(247 243 232 / 55%); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.status-steps li:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 10px; border-radius: 1px; background: rgb(255 255 255 / 16%); }
.status-steps li.is-done::after { background: var(--gold-300); }
.step-dot { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border: 1.5px solid rgb(255 255 255 / 28%); border-radius: 50%; font-size: 11px; }
.step-dot .icon { width: 13px; height: 13px; }
.status-steps li.is-done { color: rgb(247 243 232 / 85%); }
.status-steps li.is-done .step-dot { border-color: var(--gold-300); background: var(--gold-300); color: var(--green-900); }
.status-steps li.is-current { color: #fff; }
.status-steps li.is-current .step-dot { border-color: #fff; background: #fff; color: var(--green-800); box-shadow: 0 0 0 4px rgb(255 255 255 / 14%); }
.ready-ring.on-dark { --ring-c: var(--gold-300); width: 40px; height: 40px; background: conic-gradient(var(--ring-c) calc(var(--p) * 1%), rgb(255 255 255 / 14%) 0); }
.ready-ring.on-dark::before { background: var(--green-800); }
.ready-ring.on-dark b { color: #fff; font-size: 12px; }
.ready-ring.on-dark b::after { color: rgb(247 243 232 / 60%); }
.tour-band .trip-band-facts li.band-ready { gap: 12px; }

.tour-tabs { align-items: center; }
.tour-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 12.5px; }
.tour-tabs a .icon { width: 14px; height: 14px; color: var(--subtle); }
.tour-tabs em { padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-style: normal; font-weight: 700; }

.gate-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gate-card { display: grid; gap: 3px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.gate-card:hover { box-shadow: var(--shadow); }
.gate-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px; border-radius: 10px; }
.gate-icon .icon { width: 17px; height: 17px; }
.gate-card strong { font: 600 14px var(--font-display); }
.gate-card small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.gate-card.is-done { border-color: #cfe7d9; background: linear-gradient(160deg, #f4faf6, var(--surface)); }
.gate-card.is-done .gate-icon { background: var(--green-600); color: #fff; }
.gate-card.is-missing { border-color: #f0d3d6; background: linear-gradient(160deg, #fdf5f5, var(--surface)); }
.gate-card.is-missing .gate-icon { background: var(--rose-bg); color: var(--rose); }
.gate-card.is-missing small { color: var(--rose); font-weight: 600; }
.control-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); color: var(--ink-2); font-size: 13.5px; }

.supplier-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.supplier-rows li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line-soft); border-left: 3px solid var(--line); border-radius: 10px; }
.supplier-rows li.row-res-confirmed { border-left-color: var(--green-500); }
.supplier-rows li.row-res-requested { border-left-color: var(--gold-500); }
.supplier-rows li.row-res-torequest { border-left-color: var(--rose); }
.supplier-main { display: grid; flex: 1; min-width: 0; }
.supplier-main strong { font-size: 13.5px; }
.supplier-main small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.team-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.team-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.team-icon { display: grid; flex: none; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--green-50); color: var(--green-600); }
.team-icon .icon { width: 20px; height: 20px; }
.team-card.is-guide .team-icon { background: var(--sky-bg); color: var(--sky); }
.team-main { display: grid; flex: 1; gap: 1px; min-width: 0; }
.team-main small { color: var(--subtle); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.team-main strong { overflow: hidden; font: 600 15px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.team-main strong a { color: inherit; }
.team-main em { color: var(--muted); font-size: 12px; font-style: normal; }
.team-card.is-empty { border-style: dashed; background: #fdf8f8; }
.team-card.is-empty .team-icon { background: var(--rose-bg); color: var(--rose); }
.team-card.is-empty strong { color: var(--rose); }
.assign-details { margin-top: 14px; }
.assign-details > summary { display: inline-flex; align-items: center; gap: 6px; color: var(--green-700); font-size: 13.5px; font-weight: 650; cursor: pointer; list-style: none; }
.assign-details > summary::-webkit-details-marker { display: none; }
.assign-details > summary .icon { width: 16px; height: 16px; }
.assign-details .assign-grid { margin-top: 12px; }

.checklist-count { color: var(--muted); font-size: 13px; white-space: nowrap; }
.checklist-count b { color: var(--ink); font: 700 18px var(--font-display); }
.checklist-bar { height: 6px; margin: 0 0 14px; }
.tour-checklist li { padding: 11px 12px; transition: background-color .15s; }
.tour-checklist li.check-completed { background: #f6fbf8; }
.tour-checklist li.check-completed strong { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 40%, transparent); }
.tour-checklist li.check-overridden { background: #fffaf0; }
.tour-checklist small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.check-tag { padding: 0 6px; border-radius: 4px; background: var(--surface-2); color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.check-tag.is-required { background: var(--gold-100); color: var(--gold-600); }
.tour-checklist .button-sm .icon { width: 13px; height: 13px; }

.tour-timeline li { padding-bottom: 14px; }
.tour-timeline li:not(:last-child)::before { content: ""; position: absolute; top: 14px; bottom: 0; left: 4px; width: 1px; background: var(--line); }
.tour-timeline li.ev-status > i { background: var(--green-500); box-shadow: 0 0 0 2px var(--green-100); }
.tour-timeline li.ev-team > i { background: var(--sky); box-shadow: 0 0 0 2px var(--sky-bg); }
.tour-timeline li.ev-override > i { background: var(--rose); box-shadow: 0 0 0 2px var(--rose-bg); }
.tour-timeline li.ev-voucher > i { background: var(--sand); box-shadow: 0 0 0 2px var(--sand-bg); }

@media (max-width: 1100px) {
    .gate-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .status-steps { overflow-x: auto; padding-bottom: 4px; }
    .status-steps li { flex: none; }
    .status-steps li:not(:last-child)::after { width: 18px; flex: none; }
    .team-cards { grid-template-columns: minmax(0, 1fr); }
    .tour-band .trip-band-top { flex-wrap: wrap; }
    .tour-band .builder-actions { width: 100%; }
    .supplier-rows li { flex-wrap: wrap; }
}
.tour-band .button:disabled, .control-action .button:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.6); }
@media (max-width: 760px) {
    .supplier-rows .supplier-main { flex: 1 1 calc(100% - 56px); }
    .supplier-rows li > .res-pill { margin-left: 50px; }
    .supplier-rows li > form, .supplier-rows li > .button { margin-left: auto; }
    .tour-checklist li { flex-wrap: wrap; }
    .tour-checklist li > span:nth-child(2) { flex: 1 1 calc(100% - 44px); }
    .tour-checklist li > form { width: 100%; padding-left: 38px; }
}

/* ===================================================================== Settings */
.settings-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items: start; }
.settings-side { position: sticky; top: 84px; }
.settings-nav { display: grid; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.settings-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.settings-nav a .icon { width: 17px; height: 17px; color: var(--subtle); }
.settings-nav a:hover { background: var(--surface-2); color: var(--green-700); }
.settings-nav a.active { background: var(--green-50); color: var(--green-700); box-shadow: inset 3px 0 0 var(--green-600); }
.settings-nav a.active .icon { color: var(--green-600); }
.settings-error { margin-top: 12px; }
.settings-main { display: grid; gap: 16px; min-width: 0; }
.settings-main > .panel, .settings-main > form > .panel { margin: 0; }
.settings-main > form { display: grid; gap: 16px; min-width: 0; }
.settings-main .form-section-head { margin-bottom: 16px; }
.settings-main .form-section-head .step { background: var(--green-50); color: var(--green-700); border-radius: 10px; width: 34px; height: 34px; }
.settings-main .form-section-head .step .icon { width: 17px; height: 17px; }
.settings-actions { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgb(255 255 255 / 94%); box-shadow: var(--shadow); backdrop-filter: blur(6px); color: var(--muted); font-size: 13px; }
.field-span-2 { grid-column: span 2; }
.readonly-value { display: flex; align-items: center; height: 44px; padding: 0 14px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-2); font-weight: 700; }

.settings-identity { display: flex; align-items: center; gap: 16px; }
.identity-logo { display: grid; flex: none; place-items: center; width: 72px; height: 72px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.identity-logo img { max-width: 60px; max-height: 60px; object-fit: contain; }
.identity-logo b { color: var(--green-700); font: 700 24px var(--font-display); }
.identity-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.identity-text strong { font: 600 20px var(--font-display); }
.identity-text small { color: var(--muted); font-size: 13px; }
.identity-text em { overflow: hidden; color: var(--ink-2); font-size: 13px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.settings-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-card { display: grid; align-content: start; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.settings-card:hover { border-color: #d6d2c4; box-shadow: var(--shadow); transform: translateY(-1px); }
.settings-card-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 4px; border-radius: 12px; background: var(--green-50); color: var(--green-600); }
.settings-card-icon .icon { width: 20px; height: 20px; }
.settings-card strong { font: 600 16px var(--font-display); }
.settings-card > small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.settings-card-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--ink-2); font-size: 12.5px; font-weight: 650; }
.settings-card-status > i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }
.settings-card.is-ok .settings-card-status > i { background: var(--green-500); }
.settings-card-status .mini-progress { flex: 1; min-width: 80px; }
.settings-subhead { margin: 8px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.settings-links { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.settings-links a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--line-soft); color: inherit; text-decoration: none; }
.settings-links a:first-child { border-top: 0; }
.settings-links a:hover { background: var(--surface-2); }
.settings-links a > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.settings-links strong { font-size: 14px; }
.settings-links small { color: var(--muted); font-size: 12.5px; }
.settings-links em { color: var(--ink-2); font-size: 12.5px; font-style: normal; font-weight: 650; white-space: nowrap; }
.settings-links .chevron { width: 16px; height: 16px; color: var(--subtle); }
.settings-link-icon { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.settings-link-icon .icon { width: 17px; height: 17px; }

.brand-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; }
.brand-upload { margin: 0; }
.brand-drop { display: grid; place-items: center; height: 150px; margin-bottom: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: repeating-conic-gradient(#f4f3ee 0 25%, #fff 0 50%) 0 0 / 18px 18px; }
.brand-drop img { max-width: 100%; max-height: 120px; object-fit: contain; }
.brand-drop.is-wide img { max-height: 120px; width: 100%; object-fit: contain; }
.brand-drop.is-empty { border-style: dashed; background: var(--surface-2); }
.brand-placeholder { display: grid; justify-items: center; gap: 6px; color: var(--subtle); font-size: 13px; font-weight: 600; }
.brand-placeholder .icon { width: 26px; height: 26px; }
.brand-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-actions label.button { cursor: pointer; }
.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.swatch { cursor: pointer; }
.swatch input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.swatch span { display: block; width: 38px; height: 38px; border: 3px solid #fff; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .15s, transform .15s; }
.swatch:hover span { transform: scale(1.06); }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--c), 0 4px 10px -4px var(--c); }
.swatch input:focus-visible + span { box-shadow: var(--ring); }
.swatch-custom { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; }
.swatch-custom input[type=color] { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.swatch-custom span { color: var(--muted); font-size: 12.5px; font-weight: 650; }
.swatches .button { margin-left: auto; }
.doc-sample { padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

.mail-status { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mail-status-icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--gold-100); color: var(--gold-600); }
.mail-status-icon .icon { width: 20px; height: 20px; }
.mail-status.is-ok .mail-status-icon { background: var(--green-600); color: #fff; }
.mail-status.is-bad .mail-status-icon { background: var(--rose-bg); color: var(--rose); }
.mail-status.is-off .mail-status-icon { background: var(--surface-2); color: var(--muted); }
.mail-status-text { display: grid; flex: 1; min-width: 200px; }
.mail-status-text strong { font: 600 16px var(--font-display); }
.mail-status.is-bad .mail-status-text small { color: var(--rose); }
.mail-status-text small { color: var(--muted); font-size: 13px; }
.mail-test { display: flex; gap: 8px; }
.mail-test .input { width: 240px; }
.preset-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.preset-hint { margin: -2px 0 12px; color: var(--gold-600); }
.mail-clear { margin-top: -4px; text-align: right; }
.toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: #d9dcd7; transition: background-color .15s; }
.toggle-track i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; }
.toggle input:checked + .toggle-track { background: var(--green-600); }
.toggle input:checked + .toggle-track i { transform: translateX(18px); }
.toggle input:focus-visible + .toggle-track { box-shadow: var(--ring); }
.toggle > span:last-child { display: grid; }
.toggle strong { color: var(--ink); font-size: 13.5px; }
.toggle small { color: var(--muted); font-size: 12px; }
.statement-email { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.statement-email > .icon { width: 20px; height: 20px; color: var(--green-600); }
.statement-email > span { display: grid; flex: 1; min-width: 200px; }
.statement-email small { color: var(--muted); font-size: 12.5px; }
.statement-email .input { width: 260px; }

/* ----- Printed documents: letterhead, title, lines and footer ----- */
.print-body { background: #eef2ef; color: #18352b; }
.print-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 860px; margin: 24px auto 14px; padding: 0 16px; }
.print-actions a { color: #166b47; font-size: 13px; font-weight: 700; text-decoration: none; }
.paper { --brand: var(--green-700); max-width: 860px; margin: 0 auto 36px; padding: 44px 52px; background: #fff; box-shadow: 0 12px 44px #18352b18; }
.paper .panel { margin: 0 0 18px; padding: 0; border: 0; box-shadow: none; }
.paper .panel-heading { padding: 0 0 8px; }
.paper .doc-table th, .paper .doc-table td { padding: 7px 8px; font-size: 12.5px; }
.doc-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 20px; border-bottom: 3px solid var(--brand); }
.doc-head.has-banner { display: block; padding-bottom: 10px; }
.doc-banner { display: block; width: 100%; max-height: 160px; object-fit: contain; object-position: left center; }
.doc-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.doc-logo { max-width: 150px; max-height: 64px; object-fit: contain; }
.doc-brand strong { display: block; color: var(--brand); font: 700 20px var(--font-display); }
.doc-brand small { display: block; margin-top: 2px; color: #657c70; font-size: 12px; }
.doc-contact { display: grid; justify-items: end; gap: 2px; color: #4d6157; font-size: 12px; text-align: right; }
.doc-title-row { display: flex; justify-content: space-between; gap: 24px; margin: 22px 0; font-size: 13px; }
.doc-title-row > div { display: grid; align-content: start; gap: 2px; }
.doc-title-row small { color: #657c70; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.doc-title-row strong { font-size: 15px; }
.doc-title { justify-items: end; text-align: right; }
.doc-title h1 { margin: 0 0 4px; color: var(--brand); font-size: 24px; }
.doc-title span { color: #4d6157; }
.doc-items { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc-items th { padding: 9px 10px; border-bottom: 2px solid var(--brand); color: var(--brand); font-size: 11px; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.doc-items td { padding: 10px; border-bottom: 1px solid #e7ebe8; }
.doc-items .num { text-align: right; white-space: nowrap; }
.doc-items tfoot th { border: 0; color: var(--ink); font-size: 13px; text-align: right; text-transform: none; letter-spacing: 0; }
.doc-items tfoot td { border-bottom: 3px double var(--brand); font-size: 15px; }
.doc-note { margin: 20px 0 0; color: #4d6157; font-size: 12.5px; }
.doc-foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid #dfe5e1; color: #657c70; font-size: 11.5px; }
.doc-pay { margin-bottom: 12px; padding: 12px 14px; border-left: 3px solid var(--brand); border-radius: 6px; background: #f6f8f6; }
.doc-pay small { display: block; margin-bottom: 4px; color: var(--brand); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.doc-pay p { margin: 0; color: #2e443a; font-size: 12.5px; white-space: pre-line; }
.doc-legal { display: grid; gap: 2px; }
@media print {
    @page { size: A4; margin: 14mm; }
    .print-body { margin: 0; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-actions { display: none !important; }
    .paper { max-width: none; margin: 0; padding: 0; box-shadow: none; }
    .statement-section { break-inside: avoid; }
}

@media (max-width: 1100px) {
    .settings-shell { grid-template-columns: minmax(0, 1fr); }
    .settings-side { position: static; }
    .settings-nav { display: flex; overflow-x: auto; }
    .settings-nav a { flex: none; }
    .settings-nav a.active { box-shadow: inset 0 -3px 0 var(--green-600); }
}
@media (max-width: 760px) {
    .settings-cards, .brand-grid { grid-template-columns: minmax(0, 1fr); }
    .field-span-2 { grid-column: auto; }
    .mail-test { width: 100%; }
    .mail-test .input, .statement-email .input { flex: 1; width: auto; min-width: 0; }
    .settings-identity { flex-wrap: wrap; }
    .paper { padding: 24px 18px; }
    .doc-head, .doc-title-row { flex-direction: column; align-items: flex-start; }
    .doc-contact, .doc-title { justify-items: start; text-align: left; }
}
.swatch.swatch-custom span { width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; }

/* ----- Parks ----- */
.park-hero-band {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    min-height: 340px;
    padding: 28px 28px 34px;
    overflow: hidden;
    color: #f7f3e8;
    background: linear-gradient(135deg, var(--green-700) 0%, var(--green-800) 45%, var(--green-900) 100%);
}
.park-hero-band.no-photo { min-height: 180px; }
.park-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.park-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 30 20 / 10%) 0%, rgb(10 30 20 / 35%) 45%, rgb(8 24 16 / 88%) 100%); }
.park-hero-text { position: relative; min-width: 0; text-shadow: 0 1px 12px rgb(0 0 0 / 35%); }
.park-hero-text h1 { margin: 4px 0 10px; color: #fff; font-size: 38px; font-weight: 600; letter-spacing: -.8px; line-height: 1.05; }
.park-hero-side { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: none; }
.park-hero-credit { position: absolute; right: 14px; bottom: 8px; max-width: 60%; overflow: hidden; color: rgb(247 243 232 / 70%); font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.park-pay-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; }
.park-grid { margin-top: 4px; }
.lead-main .park-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.park-card .sup-card-place span + span::before { content: none; }
.hero-crumb { color: inherit; text-decoration: none; }
.hero-crumb:hover { text-decoration: underline; }
@media (max-width: 720px) {
    .park-hero-band { flex-direction: column; align-items: flex-start; min-height: 280px; padding: 20px 16px 30px; }
    .park-hero-side { align-items: flex-start; }
    .park-hero-text h1 { font-size: 28px; }
}

/* ----- Maps (Leaflet) ----- */
.zm-marker { --zm: var(--green-600); background: none; border: 0; }
.zm-hotel { --zm: var(--gold-500); }
.zm-airport, .zm-flight { --zm: #2f5d9e; }
.zm-park { --zm: var(--green-600); }
.zm-town { --zm: #6b5d4f; }
.zm-beach { --zm: #1e8a8a; }
.zm-lake { --zm: #2b7bbd; }
.zm-border { --zm: #b4473a; }
.zm-landmark { --zm: #7a5aa6; }
.zm-road { --zm: var(--green-700); }
.zm-boat { --zm: #1e8a8a; }
.zm-foot { --zm: #8a6a3c; }
.zm-disc { display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--zm); color: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / 30%); }
.zm-glyph { display: grid; place-items: center; }
.zm-marker.zm-faded { opacity: .45; }
.zm-badge { position: absolute; top: -8px; right: -12px; min-width: 18px; padding: 1px 5px; border: 1.5px solid #fff; border-radius: 9px; background: var(--ink); color: #fff; font: 700 10px/14px var(--font-sans, inherit); text-align: center; white-space: nowrap; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); }
.zm-route { stroke: var(--green-700); }
.zm-route-flight { stroke: #2f5d9e; }
.zm-route-boat { stroke: #1e8a8a; }
.zm-route-foot { stroke: #8a6a3c; }
.zm-route-pending { stroke: var(--subtle); }
.zm-route-faded { stroke-opacity: .3; }
.zm-route-current { stroke-width: 6; }
.zm-pop strong { display: block; font-size: 13px; }
.zm-pop strong a { color: var(--green-700); }
.zm-pop small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.zm-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; max-width: 520px; padding: 6px 10px; border-radius: 8px; background: rgb(255 255 255 / 92%); box-shadow: 0 1px 4px rgb(0 0 0 / 20%); color: var(--ink-2); font-size: 11.5px; }
.zm-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.zm-legend-item .zm-disc { width: 18px; height: 18px; border-width: 1.5px; box-shadow: none; }
.zm-line { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--green-700); vertical-align: middle; }
.zm-line-flight { border-top: 3px dotted #2f5d9e; }
.zm-line-boat { border-top: 3px dashed #1e8a8a; }
.zm-line-foot { border-top: 3px dotted #8a6a3c; }
.zm-legend-item .zm-line + .zm-disc { display: none; }
.zm-chip { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--zm, var(--green-600)); color: #fff; flex: none; }
.zm-chip .icon { width: 13px; height: 13px; }
.leaflet-container { font: inherit; }
.leaflet-control-layers-overlays label { display: flex; align-items: center; gap: 4px; }

.map-picker { display: grid; gap: 10px; }
.map-picker-search { position: relative; display: flex; gap: 8px; }
.map-picker-search .input-wrap { flex: 1; }
.map-picker-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1100; max-height: 240px; margin: 0; padding: 4px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / 12%); list-style: none; }
.map-picker-results button { width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.map-picker-results button:hover, .map-picker-results button:focus-visible { background: var(--green-50); }
.zm-result-note { padding: 8px 10px; color: var(--muted); font-size: 13px; }
.map-picker-map { height: 320px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; z-index: 0; }
.map-picker-coords { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; }
.map-picker-coords .label { margin: 0; }

.dest-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.dest-map-panel { padding: 0; overflow: hidden; }
.dest-map { height: 520px; z-index: 0; }
.dest-search { min-width: 240px; }
.dest-name { display: inline-flex; align-items: center; gap: 8px; }
.dest-table td small { display: block; margin-top: 2px; }

.trip-map-panel { margin-top: 18px; }
.trip-map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.trip-map { height: 460px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; z-index: 0; }
.trip-map-doc { height: 420px; }
.trip-map-missing { margin: 10px 0 0; color: var(--gold-600); }
.route-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.trip-route-map { margin-bottom: 20px; }
.trip-route-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 0; color: var(--muted); font-size: 12.5px; list-style: none; }
.trip-route-legend li { display: inline-flex; align-items: center; gap: 6px; }
.trip-route-legend .zm-chip { width: 20px; height: 20px; }
.park-mini-map { height: 220px; border-radius: 10px; overflow: hidden; z-index: 0; }
@media (max-width: 720px) {
    .dest-map { height: 380px; }
    .trip-map, .trip-map-doc { height: 340px; }
    .map-picker-coords { grid-template-columns: auto 1fr; }
    .map-picker-coords .button { grid-column: 1 / -1; }
}
@media print {
    .trip-map-doc { height: 360px; break-inside: avoid; }
    .leaflet-control-zoom, .leaflet-control-layers { display: none; }
}

/* ----- Send the itinerary to the client ----- */
.client-send { position: relative; }
.client-send > summary { list-style: none; cursor: pointer; }
.client-send > summary::-webkit-details-marker { display: none; }
.client-send-panel { position: fixed; top: 84px; right: 28px; z-index: 1200; display: grid; max-height: calc(100vh - 100px); overflow-y: auto; gap: 10px; width: 340px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 40px rgb(0 0 0 / 18%); text-align: left; }
.client-send-title { margin: 0; font-weight: 700; }
.client-send-panel .hint { margin: 0; }
.client-send-links { display: flex; flex-wrap: wrap; gap: 8px; }
.client-link { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.client-link .label { margin: 0; }
.client-link-row { display: flex; gap: 6px; }
.client-link-row .input { min-width: 0; flex: 1; font-size: 12.5px; }
.client-send-form { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.client-send-form .label { margin: 4px 0 0; }
.client-send-form .button { justify-self: start; margin-top: 6px; }
@media (max-width: 720px) { .client-send-panel { left: 16px; right: 16px; width: auto; } }

/* ----- Finance forms: roomier line inputs ----- */
.main-content:has(.finance-nav) { --fx-border: var(--input-border); }
.main-content:has(.finance-nav) .label { color: var(--ink-2); font-size: 13px; letter-spacing: .01em; }
.main-content:has(.finance-nav) .input-sm { height: 38px; border-radius: 8px; }

/* Line items: a bordered table with a tinted header. */
.main-content:has(.finance-nav) .doc-lines { overflow: hidden; border: 1.5px solid var(--fx-border); border-radius: 12px; }
.main-content:has(.finance-nav) .doc-lines thead th { padding: 10px 10px; border-bottom: 1.5px solid var(--fx-border); background: var(--surface-2); }
.main-content:has(.finance-nav) .doc-lines tbody td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.main-content:has(.finance-nav) .doc-lines tfoot td { padding: 8px 10px; background: var(--surface-2); }
.main-content:has(.finance-nav) .doc-lines tfoot tr:first-child td { border-top: 1.5px solid var(--fx-border); }
.main-content:has(.finance-nav) .doc-lines .doc-total td { border-top: 1.5px solid var(--fx-border) !important; }
.main-content:has(.finance-nav) .doc-fields:disabled .input { border-color: var(--line); border-style: solid; background-color: var(--surface-2); color: var(--ink); }

/* ---------- Plan banner and ended page (PlanAccess) ---------- */

.plan-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px 16px; border: 1px solid #cfe0f0; border-radius: var(--radius); background: var(--sky-bg); color: #24557d; font-size: 13.5px; }
.plan-banner > .icon { flex: none; color: var(--sky); }
.plan-banner > span { flex: 1; min-width: 0; }
.plan-banner strong { margin-right: 6px; color: #1d4466; }
.plan-banner .button { flex: none; }
.plan-banner-warn { border-color: #ecdcb9; background: #fcf7ec; color: #6b5222; }
.plan-banner-warn > .icon { color: var(--gold-600); }
.plan-banner-warn strong { color: #4f3c18; }
.plan-banner-danger { border-color: #ecc9cc; background: var(--rose-bg); color: #8c2f39; }
.plan-banner-danger > .icon { color: var(--rose); }
.plan-banner-danger strong { color: #6e1f28; }
.plan-ended { max-width: 520px; margin: 10vh auto; text-align: center; }
.plan-ended > .icon { width: 44px; height: 44px; color: var(--gold-500); }
.plan-ended h1 { margin: 14px 0 8px; font-size: 26px; }
.plan-ended p { margin: 0 0 22px; color: var(--muted); }
.plan-ended-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) { .plan-banner { flex-wrap: wrap; } }

/* ---------- Support (requests to Zuri Tours) ---------- */

.support-hero { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding: 30px 32px; overflow: hidden; border-radius: var(--radius-lg); color: #fff; background: radial-gradient(70% 140% at 100% 0%, rgb(226 196 140 / 28%), transparent 60%), linear-gradient(110deg, var(--green-900), var(--green-700)); box-shadow: var(--shadow-lg); }
.support-hero .eyebrow { color: var(--gold-300); }
.support-hero h1 { margin: 0; color: #fff; font-size: 30px; font-weight: 600; letter-spacing: -.6px; }
.support-hero p { max-width: 620px; margin: 8px 0 0; color: rgb(255 255 255 / 80%); }
.support-cta { flex: none; background: linear-gradient(135deg, var(--gold-300), var(--gold-500)); color: var(--green-950); box-shadow: 0 6px 18px rgb(197 150 74 / 30%); }
.muted-text { margin: 0; color: var(--muted); }
.req-list { display: flex; flex-direction: column; gap: 8px; }
.req-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 16px 13px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.req-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--prio); }
.req-row:hover { border-color: var(--gold-500); box-shadow: var(--shadow); }
.req-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--green-100); color: var(--green-700); }
.req-main { min-width: 0; flex: 1; }
.req-main strong { display: block; overflow: hidden; color: var(--ink); font-size: 14.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.req-main strong span { color: var(--muted); }
.req-main small { color: var(--muted); font-size: 12.5px; }
.prio-urgent { --prio: #c0392b; --prio-bg: #fde8e6; }
.prio-high { --prio: #d9822b; --prio-bg: #fdf0e1; }
.prio-normal { --prio: var(--sky); --prio-bg: var(--sky-bg); }
.prio-low { --prio: var(--subtle); --prio-bg: var(--line-soft); }
.text-link.back { margin-bottom: 8px; }
.text-link.back::after { content: none; }
.text-link.back::before { content: "←"; margin-right: 4px; }
.big-badge { padding: 6px 14px; font-size: 13px; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.choice-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice { cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice > span { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: var(--radius); transition: border-color .15s, background-color .15s; }
.choice strong { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.choice strong i { width: 9px; height: 9px; border-radius: 50%; background: var(--prio); }
.choice small { color: var(--muted); font-size: 12px; }
.choice input:checked + span { border-color: var(--prio, var(--green-600)); background: var(--prio-bg, var(--green-50)); }
.choice input:focus-visible + span { box-shadow: var(--ring); }
.file-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--ink-2); font-weight: 600; text-align: center; cursor: pointer; }
.file-drop:hover { border-color: var(--gold-500); }
.file-drop .icon { width: 26px; height: 26px; color: var(--gold-600); }
.file-drop small { color: var(--muted); font-weight: 400; }
.file-drop input, .file-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.support-aside h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.support-aside h3 .icon { color: var(--gold-600); }
.support-aside ol { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; }

.conversation { padding: 22px; }
.thread { display: flex; flex-direction: column; gap: 16px; margin: 0 0 20px; padding: 0; list-style: none; }
.msg { display: flex; align-items: flex-start; gap: 12px; scroll-margin-top: 90px; }
.msg.mine { flex-direction: row-reverse; }
.msg-bubble { max-width: min(78%, 640px); padding: 12px 16px; border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; background: var(--surface-2); }
.msg.mine .msg-bubble { border-color: #cfe0d4; border-radius: 16px 4px 16px 16px; background: var(--green-50); }
.msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.msg-head strong { font-size: 13.5px; }
.msg-head time { margin-left: auto; color: var(--subtle); font-size: 12px; }
.staff-tag { padding: 1px 8px; border-radius: 999px; background: var(--gold-100); color: #7d5a20; font-size: 11.5px; font-weight: 600; }
.msg-body { color: var(--ink-2); font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.msg-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink-2); font-size: 12.5px; text-decoration: none; }
.file-chip:hover { border-color: var(--gold-500); }
.file-chip .icon { width: 16px; height: 16px; flex: none; color: var(--gold-600); }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file-chip small { flex: none; color: var(--subtle); }
.thread-system { align-self: center; scroll-margin-top: 90px; }
.thread-system span { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--line-soft); color: var(--muted); font-size: 12px; }
.composer { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.composer textarea { height: auto; min-height: 100px; padding: 10px 14px; margin-bottom: 10px; }
.composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.file-pick { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1.5px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.file-pick:hover { border-color: var(--gold-500); color: var(--ink); }
.file-pick .icon { width: 16px; height: 16px; color: var(--gold-600); }
.closed-note { margin: 0; padding: 14px; border-radius: var(--radius); background: var(--surface-2); color: var(--muted); }
.resolved-card { display: flex; gap: 14px; margin-bottom: 20px; padding: 18px 20px; border: 1px solid #c9e0cf; border-radius: var(--radius-lg); background: var(--green-50); color: var(--green-800); }
.resolved-card > .icon { width: 28px; height: 28px; flex: none; padding: 5px; border-radius: 50%; background: var(--green-600); color: #fff; stroke-width: 2.6; }
.resolved-card p { margin: 4px 0 0; color: var(--ink-2); white-space: pre-line; }
.resolved-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.rate-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; }
.stars { display: inline-flex; flex-direction: row-reverse; }
.stars input { position: absolute; opacity: 0; pointer-events: none; }
.stars label { padding: 0 2px; color: #d6d2c4; font-size: 22px; cursor: pointer; transition: color .1s; }
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label { color: var(--gold-500); }
.stars input:focus-visible + label { outline: 2px solid var(--gold-500); border-radius: 4px; }
@media (max-width: 640px) {
    .support-hero { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
    .choice-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .msg-bubble { max-width: 100%; }
}