/* Shared dashboard surfaces and colors. Loaded after the legacy brand styles. */
:root, body.portal {
  --ink:#29364c; --muted:#65748c; --paper:#f5f7fc; --surface:#fff;
  --line:#e5eaf3; --accent:#4669ec; --tone:#4669ec; --soft:#edf2fc;
  --heading:#283a5b; --control:#fff; --highlight:#edf2ff;
  --ktdk-blue:#4164db; --ktdk-navy:#304ea9;
  color-scheme:light;
}
html[data-theme=dark], html[data-theme=dark] body.portal {
  --ink:#e0e7f5; --muted:#a9b6cc; --paper:#111827; --surface:#1b2536;
  --line:#334158; --accent:#9ab3ff; --tone:#9ab3ff; --soft:#232f45;
  --heading:#edf2ff; --control:#152033; --highlight:#2b3c60;
  --ktdk-blue:#a5baff; --ktdk-navy:#c4d1ff;
  color-scheme:dark;
}
body, .workspace-body {background:var(--paper);color:var(--ink)}
h1,h2,h3,.brand,.hotel-brand {color:var(--heading)}
.sidebar,.topbar,.module,.site-card,.chart-panel,.portal-filters,.provider-hero,
.pms-place-card,.environment,.room-card,.experience-card,.form-panel,.ticket-panel,
.guide-step,#guided-demo-steps li,.site-header {background:var(--surface);border-color:var(--line)}
.sidebar {border-top:0}
.topbar {min-height:72px;height:auto;padding-block:14px;gap:16px}
.workspace-nav a {color:var(--muted);border:1px solid transparent}
.workspace-nav a:hover,.workspace-nav a[aria-current=page] {background:var(--highlight);color:var(--accent);border-color:var(--line)}
.workspace-nav a[aria-current=page] {box-shadow:inset 3px 0 var(--accent)}
.module,.chart-panel,.site-card,.portal-filters {border-radius:14px;box-shadow:0 3px 14px #13245504}
.module-icon {background:color-mix(in srgb,var(--tone) 13%,var(--surface))}
.metric {font-size:28px;font-variant-numeric:tabular-nums}
.coral {--tone:#bf5788}.teal,.green {--tone:#218b83}.gold {--tone:#ac772d}.blue {--tone:#3e7bc3}.indigo {--tone:#7a63bf}
.button,input[type=submit],.submit-row input {background:#4164db;color:white}
.button:hover,input[type=submit]:hover {background:#304ea9}
input,select,textarea,button,.editor-field input,.editor-field select,.editor-field textarea {
  background:var(--control);color:var(--ink);border-color:var(--line);
}
.button {background:#4164db;color:#fff}
.theme-switch {display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-height:38px;padding:7px 12px;border:1px solid var(--line);border-radius:9px;font:500 12px Inter,Arial,sans-serif;cursor:pointer;background:var(--surface);color:var(--ink);white-space:nowrap}
.theme-switch:hover {background:var(--highlight)}
[data-theme-icon] {font-size:18px;line-height:1}
.site-identity {display:flex;align-items:center;gap:18px;min-width:0}
.root-brand {display:inline-flex;flex-shrink:0}
.root-brand .ktdk-logo {width:124px;height:48px}
.header-inner {flex-wrap:wrap;padding-block:16px}
.header-inner nav {flex-wrap:wrap;gap:18px}
.hotel-brand {display:block}
.hotel-brand small {font:500 10px Inter,Arial,sans-serif;color:var(--muted);letter-spacing:.1em}
.room-tile:hover,.booking-details,.inline-list li,.guide-account,.booking-section,.hotel-arrival,
.portal-track,.hotel-signature,.hotel-day,.hotel-day-grid article {background:var(--soft);color:var(--ink)}
.portal-badge,.guide-mode {background:var(--highlight);color:var(--accent)}
.portal-badge.warning {background:#fff0d6;color:#805600}
.attraction-hero {background:linear-gradient(120deg,var(--soft),var(--surface))}
.guide-note {color:var(--muted)}
.portal-messages,.notice,.guide-expected {background:color-mix(in srgb,#29a58b 14%,var(--surface));color:var(--ink);border-color:var(--line)}
.errors,.errorlist {color:#ba3838}
.guide-dock {background:var(--surface);color:var(--ink);border-color:var(--line)}
.guide-dock summary,.guide-dock a {color:var(--accent)}
.guide-toolbar button,.guide-navigation button {background:var(--surface);color:var(--ink)}
.image-tag,.image-arrow {background:var(--surface);color:var(--ink)}
.room-tag {background:var(--surface);color:var(--ink);border-color:var(--line)}
.customer-hero {text-align:center;max-width:850px;margin:auto;padding:72px 0 48px}
.customer-hero h1 {font-size:clamp(36px,5vw,64px);margin:22px 0}
.customer-hero>p {max-width:620px;margin:0 auto 24px}
.customer-hero .form-note {margin:18px auto 0}
.destination-search {max-width:660px;margin:30px auto 0;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 8px 30px #24345408}
.destination-search label {display:block;font-size:12px;font-weight:600;margin-bottom:10px}
.destination-search>div {display:flex;gap:12px}
.destination-search input {flex:1;font-size:14px;min-width:0}
.destination-search .button {flex-shrink:0}
.customer-card-actions {display:flex;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);padding-top:18px}
.customer-grid .experience-copy {min-height:260px}
.customer-grid .experience-copy p {line-height:1.8}
/* Keep Django's standard widgets in the same theme as the public and staff pages. */
html[data-theme],html:root {
  --primary:#4164db; --secondary:#304ea9; --header-bg:var(--surface);
  --header-color:var(--ink); --header-link-color:var(--accent);
  --link-fg:var(--accent); --link-hover-color:var(--ktdk-navy);
  --body-fg:var(--ink); --body-bg:var(--surface); --body-quiet-color:var(--muted);
  --body-loud-color:var(--heading); --darkened-bg:var(--soft);
  --selected-bg:var(--highlight); --selected-row:var(--highlight);
  --hairline-color:var(--line); --border-color:var(--line);
  --close-button-bg:var(--soft); --close-button-hover-bg:var(--highlight);
  --button-bg:#4164db; --button-hover-bg:#304ea9; --default-button-bg:#304ea9;
}
#header {border-top:0}
#header .theme-switch {margin:8px 0}
#user-tools .theme-toggle {display:none}
html[data-theme=dark] .ktdk-logo {background:#f5f7fc;border-radius:7px}
html[data-theme=dark] .portal .room-art {background:linear-gradient(120deg,#293651,#244947)}
html[data-theme=dark] .portal-badge.warning {background:#4b3b20;color:#ffda8a}
html[data-theme=dark] .errors,html[data-theme=dark] .errorlist {color:#ffaaaa}
html[data-theme=dark] .editor-field input:disabled,html[data-theme=dark] .editor-field select:disabled {background:var(--soft);color:var(--muted)}
@media(max-width:850px){.topbar{flex-wrap:wrap}.header-inner{justify-content:center}.header-inner nav{justify-content:center}.site-identity{width:100%;justify-content:center}}
@media(max-width:620px){.theme-switch{min-height:38px;padding:7px 9px}.topbar{min-height:60px;justify-content:space-between}.topbar>span{display:none}.portal-account{width:100%;justify-content:flex-end;flex-wrap:wrap}.portal-account .theme-switch{margin-right:auto}.customer-hero{padding:40px 0 32px}.destination-search>div{flex-direction:column}.site-identity{gap:12px}.root-brand .ktdk-logo{width:93px;height:36px}.header-inner nav{gap:12px;font-size:12px}.benefit-strip{flex-wrap:wrap}.customer-grid{grid-template-columns:1fr}}

.account-menu {position:relative;min-width:0;max-width:100%;font-size:14px}
.account-menu summary {cursor:pointer;padding:10px;border:1px solid var(--line);border-radius:8px}
.account-menu-options {position:absolute;right:0;top:100%;z-index:30;box-sizing:border-box;width:360px;min-width:0;max-width:calc(100vw - 32px);padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px #0002}
.account-menu-options form,.account-menu-options p {display:block;margin:8px 0}
.account-menu-options .account-menu-logout,.account-actions .account-menu-logout {display:flex;justify-content:flex-end}
.account-menu-options button,.account-menu-options a {white-space:normal;text-align:left}
.account-menu-current {cursor:default;user-select:none;-webkit-user-select:none;overflow-wrap:anywhere;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--highlight);color:var(--accent);font-weight:600;box-shadow:inset 3px 0 var(--accent)}
.account-actions {width:360px;max-width:100%;font-size:14px}
.account-actions form,.account-actions p {margin:8px 0}
.account-menu-options .account-action,.account-actions .account-action {box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--accent);font:inherit;line-height:1.5;text-align:left;text-decoration:none;white-space:normal;cursor:pointer}
.account-menu-options .account-action:hover,.account-menu-options .account-action:focus-visible,.account-actions .account-action:hover,.account-actions .account-action:focus-visible {background:var(--highlight);text-decoration:none}
.account-action [aria-hidden],.account-menu-current [aria-hidden] {flex-shrink:0;font-size:18px}
.account-action span:first-child {min-width:0;overflow-wrap:anywhere}
.account-menu-divider {border:0;border-top:1px solid var(--line);margin:16px 0}
.button:disabled {opacity:.5;cursor:default}
@media(max-width:600px) {.account-menu-options {position:static;min-width:0;width:100%}}

/* Private guided-demo notice, shared by public and staff layouts. */
.demo-sandbox-banner {
  margin:24px 0; padding:16px 20px; border:1px solid var(--line);
  border-radius:12px; line-height:1.5; overflow-wrap:anywhere;
}
.demo-sandbox-banner p {margin:0 0 8px; color:var(--ink)}
.demo-sandbox-banner a {color:var(--accent); font-weight:600; text-decoration:underline}
.demo-sandbox-banner form {margin:0}
.demo-sandbox-banner button {
  max-width:100%; padding:9px 12px; border:1px solid var(--line);
  border-radius:8px; font:inherit; line-height:1.4; cursor:pointer;
  background:var(--control); color:var(--ink); white-space:normal;
}
.demo-sandbox-banner button:hover {background:var(--highlight)}

.account-menu-options .impersonation-picker {display:grid;grid-template-columns:minmax(0,1fr);min-width:0;max-width:100%;gap:10px}
.impersonation-picker label {font-weight:600}
.impersonation-picker select {box-sizing:border-box;width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.impersonation-picker button {justify-self:start}

/* Keep long account labels inside their grid and menus inside narrow headers. */
.account-menu-options {overflow-wrap:anywhere}
.impersonation-picker > * {min-width:0;max-width:100%}
.impersonation-picker select {height:auto;min-height:42px;line-height:1.4;text-overflow:ellipsis}
#branding .account-menu-options {left:0;right:auto}
@media(max-width:900px) {
  .account-menu[open] {width:360px;max-width:100%}
  .account-menu-options {position:static;width:100%;max-width:100%;margin-top:6px}
}
.session-action,.topbar .session-action,.site-header .session-action,.account-menu-options .session-action {
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  max-width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--control);color:var(--ink);font:500 12px Inter,Arial,sans-serif;
  line-height:1.4;white-space:normal;text-align:center;cursor:pointer;text-decoration:none;
}
.session-action:hover {background:var(--highlight)}
.portal-account > span.account-name,.site-header .account-name {
  display:inline;max-width:220px;overflow-wrap:anywhere;font-size:12px;
}
.topbar.impersonation-header,.site-header.impersonation-header {
  --impersonation-base:color-mix(in srgb,var(--accent) 3%,var(--surface));
  --impersonation-stripe:color-mix(in srgb,var(--accent) 12%,var(--surface));
  background:repeating-linear-gradient(45deg,
    var(--impersonation-stripe) 0 10px,
    var(--impersonation-base) 12px 22px,
    var(--impersonation-stripe) 24px);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));
}