/*
 * Hammelk Design System v8
 * Central visual language inspired by the mature AutoGallery Sadra UI:
 * white-first surfaces, navy typography, calm blue/teal accents, pastel status colors,
 * restrained shadows, predictable interaction states and mobile parity.
 * This file is intentionally loaded LAST and is the single visual authority.
 */
:root{
  --hm8-canvas:#ffffff;
  --hm8-surface:#ffffff;
  --hm8-surface-soft:#f8fafc;
  --hm8-surface-tint:#f5f8fc;
  --hm8-line:#e3e9f1;
  --hm8-line-strong:#d4deea;
  --hm8-text:#1f2f46;
  --hm8-text-strong:#16263e;
  --hm8-muted:#6f7f93;
  --hm8-muted-2:#95a2b2;
  --hm8-navy:#263f61;
  --hm8-primary:#6684d5;
  --hm8-primary-hover:#5574ca;
  --hm8-primary-soft:#eef3ff;
  --hm8-primary-softer:#f6f8ff;
  --hm8-teal:#4b8f84;
  --hm8-teal-soft:#edf8f5;
  --hm8-gold:#c9a45c;
  --hm8-gold-soft:#fff8e9;
  --hm8-blue:#70afd4;
  --hm8-blue-soft:#edf8fe;
  --hm8-pink:#d887aa;
  --hm8-pink-soft:#fff2f7;
  --hm8-success:#39816d;
  --hm8-success-soft:#edf8f4;
  --hm8-danger:#bd5d5d;
  --hm8-danger-soft:#fff3f3;
  --hm8-warning:#9b783b;
  --hm8-warning-soft:#fff9ed;
  --hm8-radius-xs:8px;
  --hm8-radius-sm:11px;
  --hm8-radius-md:15px;
  --hm8-radius-lg:20px;
  --hm8-radius-xl:26px;
  --hm8-shadow-xs:0 2px 8px rgba(24,42,69,.035);
  --hm8-shadow-sm:0 8px 24px rgba(24,42,69,.055);
  --hm8-shadow-md:0 18px 48px rgba(24,42,69,.095);
  --hm8-focus:0 0 0 3px rgba(102,132,213,.14);

  /* bridge all older theme variables to the new centralized palette */
  --ds-primary:var(--hm8-primary);--ds-primary-hover:var(--hm8-primary-hover);--ds-primary-soft:var(--hm8-primary-soft);
  --ds-bg:var(--hm8-canvas);--ds-surface:var(--hm8-surface);--ds-surface-alt:var(--hm8-surface-soft);--ds-border:var(--hm8-line);
  --ds-text:var(--hm8-text);--ds-muted:var(--hm8-muted);--ds-success:var(--hm8-success);--ds-success-soft:var(--hm8-success-soft);
  --ds-danger:var(--hm8-danger);--ds-danger-soft:var(--hm8-danger-soft);--ds-warning:var(--hm8-warning);--ds-warning-soft:var(--hm8-warning-soft);
  --primary:var(--hm8-primary);--primary-2:var(--hm8-primary-hover);--bg:var(--hm8-canvas);--surface:var(--hm8-surface);--surface-2:var(--hm8-surface-soft);--line:var(--hm8-line);--text:var(--hm8-text);--muted:var(--hm8-muted);--danger:var(--hm8-danger);
  --hm-primary:var(--hm8-primary);--hm-primary-hover:var(--hm8-primary-hover);--hm-subtle:var(--hm8-surface-soft);--hm-subtle-2:var(--hm8-primary-soft);--hm-line:var(--hm8-line);--hm-danger:var(--hm8-danger);
  --hm5-primary:var(--hm8-primary);--hm5-blue:var(--hm8-blue);--hm5-pink:var(--hm8-pink);
  --hm6-primary:var(--hm8-primary);--hm6-primary-soft:var(--hm8-primary-soft);--hm6-blue:var(--hm8-blue);--hm6-pink:var(--hm8-pink);--hm6-success:var(--hm8-success);--hm6-success-soft:var(--hm8-success-soft);--hm6-danger-soft:var(--hm8-danger-soft);--hm6-border:var(--hm8-line);
  --hm7-accent:var(--hm8-primary);--hm7-accent-strong:var(--hm8-primary-hover);--hm7-success-soft:var(--hm8-success-soft);
}

/* ---------- Core canvas & typography ---------- */
html{font-size:16px!important;background:var(--hm8-canvas)!important}
body{background:var(--hm8-canvas)!important;color:var(--hm8-text)!important;font-size:14px!important;line-height:1.75!important}
body,.app-shell,.workspace,.page-content{background:var(--hm8-canvas)!important}
body,button,input,select,textarea,.button{font-size:14px!important}
small,.small,.eyebrow,.form-hint,.field-help,.panel-head p,.ds-page-header p,.page-heading p{font-size:12px!important}
h1{font-size:clamp(1.45rem,2vw,1.85rem)!important}h2{font-size:1.28rem!important}h3{font-size:1.04rem!important}h4{font-size:.96rem!important}h5,h6{font-size:.9rem!important}
h1,h2,h3,h4,h5,h6,.topbar-title>b{color:var(--hm8-text-strong)!important;letter-spacing:-.015em!important}
a{transition:color .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease}

/* ---------- Shell / sidebar ---------- */
.app-shell{min-height:100svh!important}
.app-shell .sidebar{
  width:258px!important;background:#fff!important;color:var(--hm8-text)!important;border-left:1px solid var(--hm8-line)!important;
  box-shadow:-8px 0 28px rgba(26,44,72,.025)!important;padding:18px 13px 14px!important
}
.app-shell .workspace{margin-right:258px!important;min-width:0!important}
.app-shell .brand{min-height:52px!important;padding:4px 7px 14px!important;border-bottom:1px solid var(--hm8-line)!important;color:var(--hm8-text)!important}
.app-shell .brand-copy-inline{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;white-space:nowrap!important}
.app-shell .brand strong{color:var(--hm8-text-strong)!important;font-size:14px!important}
.app-shell .brand span{color:var(--hm8-muted)!important;font-size:11px!important;margin:0!important}
.app-shell .brand-separator{color:var(--hm8-gold)!important;font-size:9px!important}

.app-shell .suite-overview{margin:14px 2px 12px!important;padding:13px!important;border:1px solid var(--hm8-line)!important;border-radius:16px!important;background:linear-gradient(145deg,#fff,#fafcff)!important;box-shadow:var(--hm8-shadow-xs)!important}
.app-shell .suite-overview-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-bottom:10px!important}
.app-shell .suite-overview-head small{color:#53647a!important;font-size:11px!important;font-weight:900!important;opacity:1!important}
.app-shell .property-year{background:var(--hm8-gold-soft)!important;border:1px solid #f0dfbb!important;color:#80632e!important;border-radius:8px!important;padding:5px 8px!important;font-size:10px!important;font-weight:850!important}
.app-shell .suite-overview-list{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
.app-shell .suite-overview-item{min-width:0!important;min-height:38px!important;padding:8px 9px!important;border:1px solid var(--hm8-line)!important;border-radius:10px!important;background:#fff!important;color:var(--hm8-text)!important;display:flex!important;align-items:center!important;gap:7px!important;opacity:1!important}
.app-shell .suite-overview-item b{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#33445b!important;font-size:11px!important;font-weight:850!important;opacity:1!important}
.app-shell .suite-color-dot{width:8px!important;height:8px!important;flex:0 0 8px!important;border-radius:50%!important;box-shadow:0 0 0 3px rgba(111,127,147,.08)!important}
.app-shell .suite-color-dot.blue{background:var(--hm8-blue)!important}.app-shell .suite-color-dot.pink{background:var(--hm8-pink)!important}

.app-shell .organized-menu{gap:3px!important;padding:3px 0 8px!important}
.app-shell .menu-section{position:relative!important;min-height:44px!important;padding:9px 11px!important;border:1px solid transparent!important;border-radius:11px!important;background:transparent!important;color:#4a5b70!important;font-size:13px!important;font-weight:800!important;box-shadow:none!important}
.app-shell .menu-section .icon{width:19px!important;height:19px!important;color:#8493a6!important}
.app-shell .menu-section:hover{background:#f7f9fc!important;color:var(--hm8-navy)!important;border-color:#eef2f7!important;transform:none!important}
.app-shell .menu-section.active{background:var(--hm8-primary-soft)!important;color:#3f5eb6!important;border-color:#dbe4ff!important;box-shadow:none!important}
.app-shell .menu-section.active:before{content:"";position:absolute;right:-1px;top:9px;bottom:9px;width:3px;border-radius:5px;background:var(--hm8-primary)}
.app-shell .menu-section.active .icon{color:var(--hm8-primary)!important}
.app-shell .menu-open-mark{margin-right:auto!important;color:#9aa7b8!important;font-weight:900!important}
.app-shell .nav-count{background:var(--hm8-danger-soft)!important;color:var(--hm8-danger)!important;border:1px solid #f0cece!important}

.app-shell .sidebar-install{display:flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;margin:13px 4px 4px!important;border:1px solid #d9e3f7!important;border-radius:11px!important;background:#f7f9ff!important;color:#4d67ad!important;font-weight:900!important;opacity:1!important;box-shadow:none!important}
.app-shell .sidebar-install:hover{background:var(--hm8-primary-soft)!important;border-color:#c7d5f6!important;color:#3e59a7!important}
.app-shell .sidebar-install[hidden]{display:none!important}
.app-shell .sidebar-footer{border-top:1px solid var(--hm8-line)!important;padding-top:11px!important;background:#fff!important}
.app-shell .sidebar-account{color:var(--hm8-text)!important}.app-shell .sidebar-account small{color:var(--hm8-muted)!important}.app-shell .logout-link{color:#a94f4f!important;background:transparent!important}.app-shell .logout-link:hover{background:var(--hm8-danger-soft)!important}

/* ---------- Header ---------- */
.app-shell .topbar{
  height:64px!important;min-height:64px!important;padding:0 22px!important;background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--hm8-line)!important;box-shadow:0 3px 18px rgba(27,45,73,.035)!important;backdrop-filter:blur(12px)!important;
  top:0!important
}
.app-shell .topbar-title b{font-size:15px!important;font-weight:950!important;color:var(--hm8-text-strong)!important}
.app-shell .topbar-meta{margin-top:2px!important;gap:6px!important;color:var(--hm8-muted)!important}.app-shell .topbar-meta span,.app-shell .topbar-meta small{font-size:10px!important;color:var(--hm8-muted)!important}.app-shell .topbar-meta i{width:4px!important;height:4px!important;background:var(--hm8-gold)!important;border-radius:50%!important}
.app-shell .topbar-actions{gap:7px!important}
.app-shell .topbar-quick,.app-shell .icon-button.notification-bell,.app-shell .small-avatar{min-height:36px!important;height:36px!important;border:1px solid var(--hm8-line)!important;border-radius:10px!important;background:#fff!important;color:#617187!important;box-shadow:none!important}
.app-shell .topbar-quick{padding:0 10px!important;gap:6px!important;font-size:11px!important;font-weight:800!important}.app-shell .topbar-quick:hover,.app-shell .icon-button.notification-bell:hover{background:var(--hm8-surface-soft)!important;border-color:var(--hm8-line-strong)!important}
.app-shell .small-avatar{width:36px!important;background:var(--hm8-primary-soft)!important;color:#4966b5!important;border-color:#dbe4ff!important}

/* ---------- Page frame / cards ---------- */
.app-shell .page-content{max-width:1580px!important;padding:22px clamp(18px,2.3vw,34px) 36px!important}
.app-shell .panel,.app-shell .ds-card,.app-shell .section-hub-card,.app-shell .request-card,.app-shell .account-card,.app-shell .bank-card{
  background:#fff!important;border:1px solid var(--hm8-line)!important;box-shadow:var(--hm8-shadow-xs)!important;border-radius:16px!important
}
.app-shell .panel{padding:19px!important}
.app-shell .panel:hover,.app-shell .section-hub-card:hover{border-color:#d8e0ea!important;box-shadow:var(--hm8-shadow-sm)!important}
.app-shell .page-heading,.app-shell .ds-page-header,.app-shell .users-heading{margin:2px 0 17px!important;padding:0 1px!important}
.app-shell .page-heading .eyebrow,.app-shell .ds-page-header .eyebrow,.app-shell .eyebrow{color:#697d9b!important;letter-spacing:.02em!important;font-weight:900!important}
.app-shell .page-heading h1,.app-shell .ds-page-header h1,.app-shell .users-heading h1{color:var(--hm8-text-strong)!important;margin:3px 0 5px!important}
.app-shell .page-heading p,.app-shell .ds-page-header p,.app-shell .users-heading p{color:var(--hm8-muted)!important}

/* restrained, AutoGallery-like hero: lively but not a large dark slab */
.app-shell .hero-panel,.app-shell .dashboard-commandbar{
  color:var(--hm8-text)!important;background:linear-gradient(120deg,#f7faff 0%,#fff 56%,#f4fbf9 100%)!important;
  border:1px solid #dfe7f2!important;box-shadow:var(--hm8-shadow-sm)!important;border-radius:20px!important
}
.app-shell .hero-panel:after{background:radial-gradient(circle,rgba(102,132,213,.12),transparent 68%)!important}
.app-shell .hero-panel h1,.app-shell .dashboard-commandbar h1,.app-shell .dashboard-commandbar h2{color:var(--hm8-navy)!important}
.app-shell .hero-panel p,.app-shell .dashboard-commandbar p{color:var(--hm8-muted)!important}

/* ---------- Controls ---------- */
.app-shell input:not([type="checkbox"]):not([type="radio"]),.app-shell select,.app-shell textarea{
  background:#fff!important;color:var(--hm8-text)!important;border:1px solid var(--hm8-line-strong)!important;border-radius:11px!important;box-shadow:none!important;
  min-height:43px!important;padding:9px 11px!important
}
.app-shell textarea{min-height:94px!important}
.app-shell input:focus,.app-shell select:focus,.app-shell textarea:focus{border-color:#aabbe9!important;box-shadow:var(--hm8-focus)!important;outline:none!important}
.app-shell label{color:#46576d!important;font-weight:800!important}
.app-shell input[type="checkbox"],.app-shell input[type="radio"]{accent-color:var(--hm8-primary)!important}

.app-shell .button,.app-shell button.button{min-height:40px!important;padding:8px 14px!important;border-radius:10px!important;font-weight:850!important;box-shadow:none!important;transform:none!important}
.app-shell .button.primary,.app-shell button.primary,.app-shell button.button:not(.secondary):not(.danger){background:var(--hm8-primary)!important;color:#fff!important;border:1px solid var(--hm8-primary)!important}
.app-shell .button.primary:hover,.app-shell button.primary:hover,.app-shell button.button:not(.secondary):not(.danger):hover{background:var(--hm8-primary-hover)!important;border-color:var(--hm8-primary-hover)!important;box-shadow:0 7px 18px rgba(102,132,213,.16)!important}
.app-shell .button.secondary,.app-shell button.secondary,.app-shell .button.soft{background:#fff!important;color:#526278!important;border:1px solid var(--hm8-line-strong)!important}
.app-shell .button.secondary:hover,.app-shell button.secondary:hover,.app-shell .button.soft:hover{background:var(--hm8-surface-soft)!important;border-color:#cdd7e4!important}
.app-shell .button.danger,.app-shell button.danger,.app-shell .ghost-danger,.app-shell .button-danger{background:#fff!important;color:var(--hm8-danger)!important;border:1px solid #eccccc!important}
.app-shell .button.danger:hover,.app-shell button.danger:hover,.app-shell .button-danger:hover{background:var(--hm8-danger-soft)!important}
.app-shell button:disabled,.app-shell .button:disabled{opacity:.5!important;cursor:not-allowed!important;box-shadow:none!important}

/* ---------- Tables, states, metrics ---------- */
.app-shell .table-wrap{background:#fff!important;border:1px solid var(--hm8-line)!important;border-radius:14px!important;box-shadow:none!important;overflow:auto!important}
.app-shell table{background:#fff!important}.app-shell thead th{background:#f8fafc!important;color:#65768a!important;border-bottom:1px solid var(--hm8-line)!important;font-size:11px!important}.app-shell tbody td{color:#33445b!important;border-bottom:1px solid #eef2f6!important;font-size:12px!important}.app-shell tbody tr:hover td{background:#fbfcfe!important}
.app-shell .status-chip,.app-shell .ds-badge{border:1px solid #e1e7ef!important;background:#f7f9fc!important;color:#5d6d81!important}
.app-shell .status-chip.active,.app-shell .status-chip.approved,.app-shell .status-chip.allocated{background:var(--hm8-success-soft)!important;color:var(--hm8-success)!important;border-color:#d1e9e1!important}
.app-shell .stat-card{background:#fff!important;border:1px solid var(--hm8-line)!important;border-radius:15px!important;box-shadow:var(--hm8-shadow-xs)!important}
.app-shell .stat-card strong{color:var(--hm8-navy)!important}.app-shell .stat-card span,.app-shell .stat-card small{color:var(--hm8-muted)!important}
.app-shell .stat-icon{border-radius:12px!important}.app-shell .stat-icon.teal{background:var(--hm8-teal-soft)!important;color:var(--hm8-teal)!important}.app-shell .stat-icon.blue{background:var(--hm8-blue-soft)!important;color:#568eb0!important}.app-shell .stat-icon.amber{background:var(--hm8-gold-soft)!important;color:#9a7434!important}.app-shell .stat-icon.violet{background:#f3f0ff!important;color:#7867b4!important}
.app-shell .flash{box-shadow:none!important;border-width:1px!important}.app-shell .flash.success{background:var(--hm8-success-soft)!important;border-color:#d2ebe2!important;color:#2d735f!important}.app-shell .flash.danger{background:var(--hm8-danger-soft)!important;border-color:#efd3d3!important;color:#a95151!important}

/* ---------- Section hub cards: add life through soft icon tones, not heavy backgrounds ---------- */
.app-shell .section-hub-card{min-height:122px!important;padding:17px!important;color:var(--hm8-text)!important}
.app-shell .section-hub-card-icon{background:var(--hm8-primary-soft)!important;color:#5c75c3!important;border:1px solid #e0e7fb!important;border-radius:13px!important}
.app-shell .section-hub-card:nth-child(3n+2) .section-hub-card-icon{background:var(--hm8-teal-soft)!important;color:var(--hm8-teal)!important;border-color:#dbeee9!important}
.app-shell .section-hub-card:nth-child(3n) .section-hub-card-icon{background:var(--hm8-gold-soft)!important;color:#977438!important;border-color:#f1e3c6!important}
.app-shell .section-hub-card h2,.app-shell .section-hub-card h3{color:var(--hm8-navy)!important}.app-shell .section-hub-card p{color:var(--hm8-muted)!important}

/* ---------- Main calendar ---------- */
#main-content .professional-calendar .calendar-command-center{background:#fff!important;border:1px solid var(--hm8-line)!important;border-radius:17px!important;box-shadow:var(--hm8-shadow-xs)!important}
#main-content .professional-calendar .calendar-title-row h1{color:var(--hm8-navy)!important}
#main-content .professional-calendar .calendar-command-heading p{color:var(--hm8-muted)!important}
#main-content .professional-calendar .calendar-cache-status{background:var(--hm8-teal-soft)!important;color:#3b756a!important;border-color:#d8ebe7!important}
#main-content .professional-calendar .calendar-nav-button,#main-content .professional-calendar .calendar-today,#main-content .professional-calendar .calendar-settings-link{background:#fff!important;color:#55657a!important;border:1px solid var(--hm8-line)!important;box-shadow:none!important}
#main-content .professional-calendar .calendar-nav-button:hover,#main-content .professional-calendar .calendar-today:hover{background:var(--hm8-surface-soft)!important}
#main-content .professional-calendar .calendar-view-tabs{background:#f6f8fb!important;border:1px solid #edf1f5!important}
#main-content .professional-calendar .calendar-view-tabs a{color:#77869a!important}.professional-calendar .calendar-view-tabs a.active{background:#fff!important;color:#4d68b8!important;box-shadow:0 2px 8px rgba(30,48,78,.08)!important;border:1px solid #e1e7f2!important}
#main-content .professional-calendar .calendar-filter-panel{background:#fbfcfe!important;border-color:var(--hm8-line)!important}
#main-content .professional-calendar .calendar-board{border:1px solid var(--hm8-line)!important;border-radius:16px!important;background:#fff!important;box-shadow:var(--hm8-shadow-xs)!important}
#main-content .professional-calendar .calendar-week-head{background:#f8fafc!important;border-bottom:1px solid var(--hm8-line)!important;color:#78879a!important}
#main-content .professional-calendar .calendar-grid button.calendar-day{background:#fff!important;color:#34465d!important;border-color:#e9edf3!important;box-shadow:none!important}
#main-content .professional-calendar .calendar-grid button.calendar-day:hover{background:#fafcff!important;box-shadow:inset 0 0 0 1px #d9e2ed!important}
#main-content .professional-calendar .calendar-grid button.calendar-day.today{background:#f8faff!important;box-shadow:inset 0 0 0 2px #becbf1!important}
#main-content .professional-calendar .calendar-grid button.calendar-day.holiday{background:#fffdfd!important}
#main-content .professional-calendar .calendar-grid .calendar-day.empty{background:#fafbfc!important}
#main-content .professional-calendar .calendar-day-number{color:#34465d!important}.professional-calendar .holiday-mark{background:#fff1f1!important;color:#b45a5a!important;border:1px solid #f2d3d3!important}
#main-content .professional-calendar .day-item{background:#f7f9fc!important;border-color:#e6ebf1!important;color:#536479!important}.professional-calendar .day-item.occasion{background:var(--hm8-gold-soft)!important;border-color:#f0e0c1!important}.professional-calendar .day-item.period.blue{background:var(--hm8-blue-soft)!important;border-color:#d6eaf5!important}.professional-calendar .day-item.period.pink{background:var(--hm8-pink-soft)!important;border-color:#f1dce5!important}.professional-calendar .day-item.event{background:#f3f0ff!important;border-color:#e4def7!important}

/* ---------- Hotel-style booking: explicit state machine, immune to generic button rules ---------- */
#periodModal .booking-dialog{background:#fff!important;border:1px solid #dfe5ed!important;box-shadow:0 28px 80px rgba(24,42,69,.18)!important}
#periodModal .booking-dialog-head{background:#fff!important;border-bottom:1px solid var(--hm8-line)!important}
#periodModal .booking-heading h2{color:var(--hm8-navy)!important}#periodModal .booking-heading p{color:var(--hm8-muted)!important}
#periodModal .booking-close{background:#fff!important;color:#607188!important;border:1px solid var(--hm8-line)!important}
#periodModal .booking-close:hover{background:#f7f9fc!important;color:#33465f!important}
#periodModal .booking-step-no{background:var(--hm8-primary-soft)!important;color:#536fbd!important}
#periodModal .booking-step-head h3{color:var(--hm8-navy)!important}#periodModal .booking-step-head p{color:var(--hm8-muted)!important}
#periodModal .booking-suite-card{background:#fff!important;border-color:var(--hm8-line)!important;box-shadow:none!important}
#periodModal .booking-suite-card:hover{background:#fbfcfe!important;border-color:#d1dbe8!important}
#periodModal .booking-suite-card:has(input:checked){background:#f8faff!important;border-color:#b9c7ee!important;box-shadow:0 0 0 3px rgba(102,132,213,.08)!important}
#periodModal .booking-suite-card.blue:has(input:checked){background:#f4fbff!important;border-color:#c5e2f1!important}#periodModal .booking-suite-card.pink:has(input:checked){background:#fff6f9!important;border-color:#edcfdb!important}
#periodModal .booking-suite-check{background:#f0f3f7!important;color:transparent!important}#periodModal .booking-suite-card:has(input:checked) .booking-suite-check{background:var(--hm8-primary)!important;color:#fff!important}

#periodModal .booking-calendar-shell{background:#fff!important;border:1px solid var(--hm8-line)!important;border-radius:15px!important;box-shadow:none!important}
#periodModal .booking-calendar-toolbar{background:#fbfcfe!important;border-bottom:1px solid var(--hm8-line)!important}
#periodModal .booking-month-nav{background:#fff!important;color:#566a87!important;border:1px solid var(--hm8-line)!important;box-shadow:none!important}
#periodModal .booking-month-nav:hover{background:var(--hm8-primary-softer)!important;color:#4865b6!important;border-color:#cfdaef!important}
#periodModal .booking-weekdays{background:#fff!important;color:#8492a5!important}

/* FREE = WHITE. These ID based selectors intentionally outrank every legacy global button selector. */
#periodModal #bookingDateGrid>button.booking-date,
#periodModal #bookingDateGrid>button.booking-date.free{
  appearance:none!important;background:#fff!important;color:#34465d!important;border:1px solid #e0e6ee!important;
  box-shadow:none!important;border-radius:10px!important;opacity:1!important;transform:none!important;cursor:pointer!important
}
#periodModal #bookingDateGrid>button.booking-date:not(.busy):not(.checkin):not(.checkout):not(.in-range):hover{
  background:#f8faff!important;border-color:#bdc9e8!important;color:#2f4260!important;box-shadow:0 4px 12px rgba(41,64,101,.06)!important
}
#periodModal #bookingDateGrid>button.booking-date i{color:#98a4b3!important;font-weight:750!important}
#periodModal #bookingDateGrid>button.booking-date.today:not(.checkin):not(.checkout):not(.in-range){background:#fff!important;border-color:#9fb0dd!important;box-shadow:inset 0 0 0 1px #c8d2ed!important}

/* SELECTED range = pale, endpoints = clearly selected but intentionally light */
#periodModal #bookingDateGrid>button.booking-date.in-range{
  background:#edf2ff!important;color:#405ba8!important;border-color:#ced9f6!important;box-shadow:none!important;border-radius:8px!important
}
#periodModal #bookingDateGrid>button.booking-date.checkin,
#periodModal #bookingDateGrid>button.booking-date.checkout{
  background:#6f8bd7!important;color:#fff!important;border-color:#6f8bd7!important;box-shadow:0 5px 14px rgba(84,113,190,.18)!important;border-radius:10px!important
}
#periodModal #bookingDateGrid>button.booking-date.checkin i,
#periodModal #bookingDateGrid>button.booking-date.checkout i{color:#eef3ff!important}
#periodModal #bookingDateGrid>button.booking-date.in-range i{color:#7083bb!important}

/* BUSY = neutral grey; never looks selected */
#periodModal #bookingDateGrid>button.booking-date.busy:not(.checkin):not(.checkout){
  background:#f3f5f7!important;color:#9aa5b3!important;border-color:#e7ebef!important;box-shadow:none!important;opacity:1!important
}
#periodModal #bookingDateGrid>button.booking-date.busy:not(.checkin):not(.checkout) i{color:#a7afb9!important}
#periodModal .booking-calendar-legend{background:#fbfcfe!important;border-top:1px solid var(--hm8-line)!important;color:#748398!important}
#periodModal .booking-calendar-legend .free{background:#fff!important;border:1px solid #dce3eb!important}#periodModal .booking-calendar-legend .selected{background:#dfe8fb!important;border:1px solid #b4c3e8!important}#periodModal .booking-calendar-legend .busy{background:#eef1f4!important;border:1px solid #e0e5ea!important}
#periodModal .booking-date-summary>div:not(.booking-night-count){background:#fff!important;border-color:var(--hm8-line)!important}#periodModal .booking-night-count{background:var(--hm8-primary-soft)!important;color:#4c66af!important}
#periodModal .booking-summary-card{background:linear-gradient(180deg,#fbfcff,#f8fafc)!important;border-color:var(--hm8-line)!important;color:var(--hm8-text)!important}
#periodModal .booking-summary-icon{background:#fff!important;color:#5d76bf!important;border-color:#e0e6ef!important}
#periodModal .booking-summary-card h3{color:var(--hm8-navy)!important}#periodModal .booking-summary-card dt{color:#8794a5!important}#periodModal .booking-summary-card dd{color:#3f5068!important}
#periodModal .booking-summary-status.ready{background:var(--hm8-success-soft)!important;color:#367663!important;border-color:#d2e8e1!important}
#periodModal #periodOwnerResults .owner-result{background:#fff!important;color:#33455d!important;border-color:#edf1f5!important}#periodModal #periodOwnerResults .owner-result:hover{background:#f8faff!important}

/* ---------- Drawer / modal surfaces ---------- */
.app-shell .calendar-day-panel,.app-shell .calendar-form-modal,.app-shell .calendar-workflow-drawer,.app-shell dialog,.app-shell .modal-card{background:#fff!important;color:var(--hm8-text)!important;border-color:var(--hm8-line)!important;box-shadow:var(--hm8-shadow-md)!important}
.app-shell .calendar-panel-close,.app-shell .modal-close{background:#fff!important;color:#64758b!important;border:1px solid var(--hm8-line)!important;box-shadow:none!important}
.calendar-overlay,.booking-overlay{background:rgba(35,48,67,.34)!important;backdrop-filter:blur(4px)!important}

/* ---------- Mobile ---------- */
@media(max-width:980px){
  .app-shell .sidebar{width:min(286px,86vw)!important;box-shadow:-16px 0 45px rgba(17,34,58,.14)!important}
  .app-shell .workspace{margin-right:0!important}
  .app-shell .page-content{padding:15px 13px 88px!important}
  .app-shell .topbar{height:58px!important;min-height:58px!important;padding:0 12px!important}
  .app-shell .topbar-quick span{display:none!important}.app-shell .topbar-quick{width:36px!important;padding:0!important;justify-content:center!important}
  .app-shell .panel{padding:15px!important;border-radius:14px!important}
}
@media(max-width:760px){
  body{font-size:13.5px!important}
  .app-shell .mobile-dock{background:rgba(255,255,255,.97)!important;border-top:1px solid var(--hm8-line)!important;box-shadow:0 -8px 24px rgba(28,46,74,.055)!important}
  .app-shell .mobile-dock a,.app-shell .mobile-dock button{color:#738298!important;background:transparent!important}.app-shell .mobile-dock a.active{background:var(--hm8-primary-soft)!important;color:#506bb8!important}
  #periodModal .booking-dialog{border-radius:20px 20px 0 0!important}
  #periodModal .booking-summary-card{background:#fafcff!important;border-color:var(--hm8-line)!important}
  #periodModal #bookingDateGrid>button.booking-date{min-height:42px!important;padding:4px 1px!important;border-radius:8px!important}
  #periodModal #bookingDateGrid>button.booking-date span{font-size:.69rem!important}
}
@media(max-width:480px){
  .app-shell .suite-overview-list{grid-template-columns:1fr 1fr!important}
  .app-shell .page-content{padding-inline:10px!important}
  #periodModal #bookingDateGrid{gap:3px!important;padding-inline:5px!important}
  #periodModal #bookingDateGrid>button.booking-date{min-height:40px!important}
}

/* ---------- Reduced motion / accessibility ---------- */
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important}}
:focus-visible{outline:2px solid rgba(102,132,213,.55)!important;outline-offset:2px!important}

/* ========================================================================== */
/* Hammelk v9 — readability, explicit allocation state and calendar policies  */
/* ========================================================================== */
:root{
  --hm9-disabled-bg:#e8eef9;
  --hm9-disabled-text:#536681;
  --hm9-placeholder:#8795a8;
}

/* Central contrast policy: controls must stay readable in every state. */
.app-shell :is(input,textarea,select)::placeholder{color:var(--hm9-placeholder)!important;opacity:1!important}
.app-shell :is(input,textarea,select):disabled{background:#f4f6f9!important;color:#68778b!important;border-color:#dfe5ed!important;opacity:1!important}
.app-shell :is(button,.button):disabled,
.app-shell :is(button,.button)[aria-disabled="true"]{opacity:1!important;cursor:not-allowed!important;box-shadow:none!important}
.app-shell :is(button.primary,.button.primary):disabled,
#periodModal .booking-submit:disabled{background:var(--hm9-disabled-bg)!important;border-color:#d7e0f1!important;color:var(--hm9-disabled-text)!important}
#periodModal .booking-submit small{color:rgba(255,255,255,.9)!important;opacity:1!important}
#periodModal .booking-submit:disabled small{color:#71809a!important;opacity:1!important}
.app-shell .field-help,.app-shell .form-hint,.app-shell .settings-field small,.app-shell .panel-head p{color:#718095!important;opacity:1!important}
.app-shell .status-chip,.app-shell .badge,.app-shell .eyebrow{opacity:1!important}

/* Free booking is a booking state, never a fake owner/person. */
#periodModal .booking-unassigned-option{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;padding:12px 13px;margin-bottom:10px;border:1px solid #dfe6ef;border-radius:13px;background:#fbfcfe;cursor:pointer;transition:.15s ease}
#periodModal .booking-unassigned-option:hover{border-color:#cdd8e8;background:#f8faff}
#periodModal .booking-unassigned-option input{position:absolute;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
#periodModal .booking-unassigned-check{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;border:1px solid #cfd9e7;background:#fff;color:transparent;font-weight:950}
#periodModal .booking-unassigned-option input:checked+.booking-unassigned-check{background:#6f86bf;border-color:#6f86bf;color:#fff}
#periodModal .booking-unassigned-option>span:last-child{display:grid;gap:2px}
#periodModal .booking-unassigned-option b{color:#31445e;font-size:12px}
#periodModal .booking-unassigned-option small{color:#7b899c;font-size:9.5px!important;line-height:1.65}
#periodModal .booking-owner-assignment{padding:11px 12px;border:1px solid #e4e9f0;border-radius:13px;background:#fff;transition:.15s ease}
#periodModal .booking-owner-assignment.is-disabled{background:#f7f9fb;border-style:dashed}
#periodModal .booking-owner-assignment.is-disabled .owner-smart-picker{opacity:.55;pointer-events:none}
#periodModal .owner-assignment-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
#periodModal .owner-assignment-head b{color:#415269;font-size:11px}
#periodModal .owner-assignment-head small{color:#8793a3;font-size:9px!important}

/* Calendar settings: category visibility + priority. */
.occasion-policy-box{margin-top:14px;padding:14px;border:1px solid var(--hm8-line);border-radius:14px;background:#fff}
.occasion-policy-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.occasion-policy-head>div{display:grid;gap:3px}.occasion-policy-head b{color:#31445e;font-size:12px}.occasion-policy-head>small{color:#7e8b9c;font-size:9px!important;max-width:160px;line-height:1.7}
.occasion-policy-list{display:grid;gap:7px}.occasion-policy-row{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:9px;align-items:center;padding:9px 10px;border:1px solid #edf0f4;border-radius:11px;background:#fbfcfe}
.occasion-show-toggle{display:flex;align-items:center;gap:8px;cursor:pointer}.occasion-show-toggle>input{position:absolute;width:1px!important;height:1px!important;opacity:0}.occasion-show-toggle>span:last-child{display:grid;gap:1px}.occasion-show-toggle b{font-size:10.5px;color:#3b4e66}.occasion-show-toggle small{font-size:8.5px!important;color:#8793a3;line-height:1.55}
.occasion-priority{display:grid!important;grid-template-columns:auto 46px;align-items:center;gap:6px}.occasion-priority>span{font-size:9px!important;color:#7c8999;margin:0!important}.occasion-priority select{height:34px!important;min-height:34px!important;padding:0 7px!important;border-radius:8px!important;background:#fff!important}
.occasion-policy-note{margin:10px 0 0;padding:8px 9px;border-radius:9px;background:#f7f9fc;color:#68778b;font-size:9px!important;line-height:1.75}

@media(max-width:760px){
  #periodModal .owner-assignment-head{display:grid;gap:2px}
  .occasion-policy-head{display:grid}.occasion-policy-head>small{max-width:none}
  .occasion-policy-row{grid-template-columns:1fr 82px;padding:8px}
}
@media(max-width:480px){.occasion-policy-row{grid-template-columns:1fr}.occasion-priority{grid-template-columns:1fr 58px}}
.app-shell :is(button,.button) small{opacity:1!important}
.app-shell :is(button,.button):disabled :is(span,small,b){opacity:1!important;color:inherit!important}