:root {
  --ink: #18251f;
  --muted: #718078;
  --line: #e2e9e5;
  --canvas: #f4f7f5;
  --surface: #fff;
  --green: #174a7e;
  --green-2: #2f6fa8;
  --mint: #e5f1fb;
  --action-color: #174a7e;
  --amber: #b87518;
  --amber-soft: #fff3dd;
  --blue: #3e6f9f;
  --blue-soft: #eaf2fb;
  --purple: #7554a2;
  --purple-soft: #f1ebf8;
  --indigo: #4e5d9e;
  --red: #bd5849;
  --red-soft: #faeae7;
  --shadow: 0 14px 36px rgba(24, 48, 40, .09);
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); font-family: "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, select, input[type="checkbox"], input[type="file"] { cursor: pointer; }
[hidden] { display: none !important; }

.app-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; height: 100vh; padding: 28px 19px 20px; overflow-y: auto; color: #edf7f2; background: linear-gradient(180deg, #174a7e, #10365e); }
.hotel-brand { display: flex; align-items: center; gap: 11px; }
.hotel-brand--trace { min-height: 54px; padding: 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.brand-logo { display: block; max-width: 100%; height: auto; object-fit: contain; }
.brand-logo--full { width: 178px; }
.brand-logo--icon { display: none; width: 42px; height: 42px; }
.hotel-brand__mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 8px; color: var(--green); background: #dceafb; font-family: Georgia, serif; font-size: 21px; }
.hotel-brand strong, .hotel-brand small { display: block; font-family: "DM Sans", sans-serif; letter-spacing: .13em; }
.hotel-brand strong { font-size: 14px; }.hotel-brand small { margin-top: 2px; color: #a8c3b9; font-size: 8px; }
.hotel-info { margin: 29px 0 20px; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.05); }
.hotel-info span, .hotel-info strong { display: block; }.hotel-info span { color: #9fbbb1; font-size: 9px; }.hotel-info strong { margin-top: 5px; font-size: 11px; }
.side-nav { display: grid; gap: 6px; }
.side-nav__item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px; border: 0; border-radius: 9px; color: #b7cdc4; background: transparent; font-size: 12px; text-align: left; }
.side-nav__item:hover, .side-nav__item.active { color: white; background: rgba(255,255,255,.1); }
.side-nav__divider { height: 1px; margin: 8px 0; background: rgba(255,255,255,.14); }
.nav-icon { display: grid; width: 21px; place-items: center; font-family: "DM Sans", sans-serif; font-size: 16px; }
.sidebar-report-actions { display: grid; gap: 4px; margin: 0; padding: 0; }
.side-nav__heading { padding: 0 12px 4px; color: #91b5d5; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.sidebar-report-actions .side-nav__item { padding-top: 12px; padding-bottom: 12px; font-size: 12px; }
.team-name { display: inline-block; padding: 2px 5px; border-radius: 4px; font-weight: 700; }
.team-a { color: #fff !important; background: #2f6fa8; }
.team-b { color: #8b4d16 !important; background: #fff0dc; }
body:not([data-auth-role="owner"]):not([data-auth-role="admin"]):not([data-auth-role="manager"]):not([data-auth-role="checker"]) .manager-only { display: none !important; }
body:not([data-auth-role="owner"]):not([data-auth-role="manager"]) .staff-admin-only { display: none !important; }
body:not([data-system-role="system_admin"]):not([data-org-role="org_admin"]) .organization-admin-only { display: none !important; }
body:not([data-auth-role="owner"]):not([data-auth-role="manager"]):not([data-org-role="org_admin"]):not([data-system-role="system_admin"]) .user-management-only { display: none !important; }
.sidebar-note { margin-top: auto; padding: 15px; border-radius: 11px; background: rgba(255,255,255,.06); }
.sidebar-note span { color: #9fbbb1; font-size: 9px; }.sidebar-note p { margin: 6px 0 0; color: #d2e0da; font-size: 9px; line-height: 1.7; }
.profile { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; margin-top: 17px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.1); }
.avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: var(--green); background: #d5e7f8; font-size: 12px; font-weight: 700; }
.profile strong, .profile span { display: block; }.profile strong { font-size: 11px; }.profile span { margin-top: 2px; color: #9fbbb1; font-size: 9px; }

main { min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 18px 32px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); }
.topbar-brand { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 170px; height: 52px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.topbar-brand--hotel { min-width: 142px; justify-content: flex-start; margin-right: auto; color: var(--green); font-family: "DM Sans", "Noto Sans JP", sans-serif; font-size: 17px; font-weight: 800; line-height: 1; letter-spacing: .04em; white-space: nowrap; }
.topbar-brand .brand-logo--full { width: 150px; max-height: 40px; }
.topbar-brand .brand-logo--icon { width: 34px; height: 34px; }
.topbar-title { display: none; }.eyebrow { margin: 0 0 5px; color: var(--muted); font-size: 10px; line-height: 1; }.topbar h1 { margin: 0; font-size: clamp(19px, 2vw, 24px); line-height: 1.15; letter-spacing: -.03em; }
.topbar-brand--hotel #site-context-select { min-width: 174px; height: 36px; padding: 0 28px 0 9px; border: 1px solid rgba(255,255,255,.34); border-radius: 10px; outline: 0; color: inherit; background: rgba(255,255,255,.12); font: inherit; font-size: 16px; font-weight: 800; }
.topbar-brand--hotel #site-context-select:disabled { opacity: .62; }
.business-date-switcher { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1px 8px; min-width: 164px; height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.business-date-icon { grid-row: 1 / 3; color: var(--green-2); font-size: 17px; }
.business-date-label { color: var(--muted); font-size: 8px; line-height: 1; }
.business-date-switcher input { width: 116px; min-height: 24px; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 10px; font-weight: 600; line-height: 1; }
.role-switcher, .user-switcher { display: grid; grid-template-rows: auto 1fr; align-items: center; gap: 3px; min-width: 126px; height: 52px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 12px; background: white; }.role-switcher span, .user-switcher span { color: var(--muted); font-size: 8px; line-height: 1; }
.role-switcher select, .user-switcher select { width: 100%; height: 26px; padding: 0 18px 0 0; border: 0; border-radius: 0; color: var(--ink); background: transparent; font-size: 11px; font-weight: 600; line-height: 1; }
.role-switcher { border-color: var(--green); background: var(--green); }.role-switcher span, .role-switcher select { color: white; }
.menu-button { display: none; width: 52px; height: 52px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.menu-button span { display: block; height: 1.5px; margin: 3px 0; background: var(--ink); }

.content { max-width: 1480px; margin: 0 auto; padding: 25px 34px 60px; }
.role-banner { margin-bottom: 17px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.daily-bulletin { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid #cfe0ef; border-radius: 13px; color: var(--ink); background: #fff; box-shadow: 0 4px 18px rgba(24,48,40,.04); }.daily-bulletin__head { display: flex; align-items: baseline; gap: 9px; }.daily-bulletin__head span { color: var(--ink); font-size: 8px; font-weight: 700; letter-spacing: .14em; }.daily-bulletin__head strong { color: var(--ink); font-size: 15px; }.daily-bulletin__body { display: grid; gap: 12px; }.daily-bulletin__section { display: grid; gap: 7px; }.daily-bulletin__section h3 { margin: 0; color: var(--ink); font-size: 9px; }.daily-bulletin__floor { display: grid; gap: 6px; }.daily-bulletin__floor h3, .daily-bulletin__floor h4 { margin: 0; color: var(--ink); font-size: 9px; }.daily-bulletin__floor ul, .daily-bulletin__announcements { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }.daily-bulletin__floor li, .daily-bulletin__announcements li { display: grid; grid-template-columns: auto 74px minmax(0, 1fr); align-items: start; gap: 8px; padding: 8px 10px; border: 1px solid #cfe0ef; border-radius: 8px; color: var(--ink); background: #fff; font-size: 10px; line-height: 1.45; }.daily-bulletin__announcements li { grid-template-columns: auto minmax(0, 1fr) auto; }.daily-bulletin__item--read { opacity: .68; background: #f6faf8 !important; }.daily-notice-read-button { min-width: 34px; min-height: 30px; padding: 4px 7px; border: 1px solid #bdd5e9; border-radius: 9px; color: var(--ink); background: #fff; font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; }.daily-notice-read-button--checked { border-color: #b8dacb; color: #23624b; background: #eaf7f1; }.daily-notice-read-button:disabled { opacity: .55; cursor: wait; }.daily-bulletin__floor li strong { color: var(--ink); font-family: "DM Sans", "Noto Sans JP", sans-serif; }.daily-bulletin__floor li span, .daily-bulletin__announcements li span { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }.daily-bulletin__announcements li small { color: var(--ink); font-size: 8px; white-space: nowrap; }.daily-bulletin__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }.daily-bulletin__form textarea { min-height: 42px; padding: 9px 10px; border: 1px solid #dce5e1; border-radius: 8px; resize: vertical; font-size: 10px; }.daily-bulletin__empty { margin: 0; color: var(--ink); font-size: 10px; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.summary-card { display: flex; align-items: center; gap: 13px; min-height: 105px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 3px 12px rgba(24,48,40,.025); }
.summary-dot { width: 10px; height: 48px; border-radius: 8px; background: var(--green-2); }
.summary-card > div > span, .summary-card strong, .summary-card small { display: block; }.summary-card > div > span { color: var(--muted); font-size: 9px; }.summary-card strong { margin: 2px 0; font-family: "DM Sans", sans-serif; font-size: 25px; }.summary-card small { color: #8c9993; font-size: 8px; }
.summary-card--red .summary-dot { background: var(--red); }.summary-card--blue .summary-dot { background: var(--blue); }.summary-card--purple .summary-dot { background: var(--purple); }.summary-card--indigo .summary-dot { background: var(--indigo); }.summary-card--amber .summary-dot { background: var(--amber); }

.room-section { margin-top: 30px; }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; }.section-heading h2 { margin: 0 0 4px; font-size: 17px; }.section-heading p { margin: 0; color: var(--muted); font-size: 10px; }.result-count { color: var(--muted); font-size: 10px; }.result-count b { color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 18px; }
.special-cleaning-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.special-cleaning-kicker { color: var(--green-2); font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.special-cleaning-head h2 { margin: 4px 0; font-size: 22px; }
.special-cleaning-head p { margin: 0; color: var(--muted); font-size: 10px; }
.special-month-switcher { display: grid; gap: 4px; min-width: 170px; color: var(--muted); font-size: 8px; }
.special-month-switcher input { height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; font-size: 11px; font-weight: 600; }
.special-cleaning-controls { display: flex; align-items: end; gap: 8px; }
.special-cleaning-controls .primary-button { min-height: 42px; white-space: nowrap; }
.special-task-selector { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-bottom: 10px; }
.special-task-selector button { display: flex; align-items: center; gap: 7px; min-height: 52px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; color: #65736c; background: white; font-size: 8px; line-height: 1.45; text-align: left; }
.special-task-selector button b { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #805411; background: #ffe7b4; font-family: "DM Sans", sans-serif; }
.special-task-selector button.active { color: var(--green); border-color: #8eb5d8; background: #e7f1fa; font-weight: 700; box-shadow: 0 0 0 2px rgba(47,111,168,.08); }
.special-task-selector button.active b { color: white; background: var(--green-2); }
.special-selected-task { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 11px; border-radius: 8px; color: var(--green); background: #e9f3ef; font-size: 9px; }
.special-selected-task span { color: var(--muted); font-size: 8px; }
.special-cleaning-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.special-cleaning-summary div { padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.special-cleaning-summary span, .special-cleaning-summary strong { display: block; }
.special-cleaning-summary span { color: var(--muted); font-size: 8px; }
.special-cleaning-summary strong { margin-top: 3px; font-family: "DM Sans", sans-serif; font-size: 21px; }
.special-cleaning-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.special-room { display: grid; gap: 10px; min-width: 0; padding: 13px; border: 1px solid #efd9ae; border-radius: 11px; background: var(--amber-soft); }
.special-room--single { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.special-room--completed { border-color: #bcd9ce; background: var(--mint); }
.special-room__info { min-width: 0; }
.special-room__info strong, .special-room__info span, .special-room__info time { display: block; }
.special-room__info strong { font-family: "DM Sans", sans-serif; font-size: 18px; }
.special-room__info span { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.special-room__info time { margin-top: 5px; color: var(--green-2); font-size: 9px; font-weight: 700; }
.special-room:not(.special-room--completed) .special-room__info time { color: var(--amber); }
.special-photo-status { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.special-photo-status b, .special-photo-status span, .special-photo-status button { padding: 3px 5px; border: 0; border-radius: 5px; font: inherit; font-size: 7px; }
.special-photo-status b { color: white; background: var(--purple); }
.special-photo-status span { color: #7a8580; background: white; }
.special-photo-status .done { color: var(--green-2); background: #d9eee6; font-weight: 700; cursor: pointer; }
.special-task-list { display: grid; gap: 6px; }
.special-task { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px; align-items: center; gap: 7px; min-height: 48px; padding: 7px; border-radius: 8px; background: rgba(255,255,255,.7); }
.special-task > span { display: flex; align-items: flex-start; gap: 6px; min-width: 0; font-size: 8px; line-height: 1.5; }
.special-task > span b { display: grid; flex: 0 0 18px; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: #805411; background: #ffe7b4; font-family: "DM Sans", sans-serif; font-size: 8px; }
.special-task time { color: var(--green-2); font-size: 8px; font-weight: 700; white-space: nowrap; }
.special-task button { width: 84px; min-height: 44px; padding: 0 6px; border: 0; border-radius: 8px; color: white; background: var(--green); font-size: 8px; font-weight: 700; }
.special-task--completed { background: #f4fbf8; }
.special-task--completed > span b { color: white; background: var(--green-2); }
.special-task--completed button { color: #9a493e; border: 1px solid #e6bdb7; background: #fff; }
.special-room__action { width: 84px; min-height: 44px; padding: 0 7px; border: 0; border-radius: 8px; color: white; background: var(--green); font-size: 8px; font-weight: 700; }
.special-room__action--completed { color: var(--green-2); border: 1px solid #afd0c4; background: white; }
.performance-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.performance-head > div:first-child > span { color: var(--green-2); font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.performance-head h2 { margin: 4px 0; font-size: 22px; }
.performance-head p { margin: 0; color: var(--muted); font-size: 10px; }
.performance-controls { display: grid; justify-items: end; gap: 8px; }
.month-navigation { display: flex; align-items: flex-end; gap: 6px; }
.month-navigation > button { height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--green); background: white; font-size: 9px; font-weight: 700; white-space: nowrap; }
.month-navigation > button:disabled { color: #abb5b0; background: #f3f5f4; cursor: default; }
.performance-month-switcher { display: grid; gap: 4px; color: var(--muted); font-size: 8px; }
.performance-month-switcher input { height: 42px; min-width: 150px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; font-size: 11px; font-weight: 600; }
.team-legend { display: flex; gap: 6px; font-size: 9px; }
.performance-list { display: grid; gap: 8px; }
.performance-person { display: grid; grid-template-columns: minmax(180px, 1fr) 120px 120px; align-items: center; gap: 10px; width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: white; text-align: left; }
.performance-person:hover, .performance-person.active { border-color: #9dc3e3; background: #f4f9fd; box-shadow: 0 0 0 2px rgba(47,111,168,.07); }
.performance-person__name small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.performance-person > div:not(.performance-person__name) { padding-left: 12px; border-left: 1px solid var(--line); }
.performance-person > div:not(.performance-person__name) span { display: block; color: var(--muted); font-size: 8px; }
.performance-person > div:not(.performance-person__name) strong { font-family: "DM Sans", sans-serif; font-size: 21px; }
.performance-person > div:not(.performance-person__name) small { margin-left: 2px; color: var(--muted); font-family: "Noto Sans JP", sans-serif; font-size: 8px; }
.performance-detail { margin-top: 14px; padding: 15px; border: 1px solid #cfe0ef; border-radius: 13px; background: #fff; box-shadow: 0 4px 18px rgba(24,48,40,.04); }
.performance-detail__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.performance-detail__head p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.performance-detail__head button { min-height: 36px; padding: 0 12px; border: 1px solid #b7d0e7; border-radius: 8px; color: var(--green); background: white; font-size: 9px; font-weight: 700; }
.performance-day-table { display: grid; gap: 4px; }
.performance-day-table__head, .performance-day-row { display: grid; grid-template-columns: minmax(110px, 1fr) repeat(3, 100px); align-items: center; gap: 8px; padding: 9px 11px; border-radius: 8px; }
.performance-day-table__head { color: var(--muted); background: #eef5fb; font-size: 8px; font-weight: 700; }
.performance-day-row { border: 1px solid var(--line); background: white; font-size: 10px; }
.performance-day-row strong { font-family: "DM Sans", sans-serif; font-size: 16px; }
.performance-empty-detail { margin: 0; color: var(--muted); font-size: 10px; }
.staff-admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.staff-admin-head > div:first-child > span { color: var(--green-2); font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.staff-admin-head h2 { margin: 4px 0; font-size: 22px; }
.staff-admin-head p, .staff-admin-list-head p { margin: 0; color: var(--muted); font-size: 10px; }
.staff-admin-panel { margin-bottom: 16px; padding: 16px; border: 1px solid #cfe0ef; border-radius: 13px; background: #fff; box-shadow: 0 4px 18px rgba(24,48,40,.04); }
.staff-admin-panel h3 { margin: 0 0 12px; font-size: 15px; }
.staff-admin-form { display: grid; grid-template-columns: minmax(108px, .8fr) minmax(104px, .75fr) minmax(145px, 1.1fr) minmax(124px, .95fr) minmax(96px, .7fr) 72px 82px; align-items: end; gap: 10px; }
.admin-management-form { display: grid; grid-template-columns: minmax(150px, .9fr) minmax(170px, 1fr) minmax(220px, 1.35fr) 120px; align-items: end; gap: 10px; }
.staff-admin-form label { display: grid; gap: 5px; color: #526159; font-size: 9px; font-weight: 700; }
.admin-management-form label { display: grid; gap: 5px; color: #526159; font-size: 9px; font-weight: 700; }
.staff-admin-form input, .staff-admin-form select, .admin-management-form input, .admin-management-form select { width: 100%; height: 42px; min-height: 42px; padding: 9px 10px; border: 1px solid #dce5e1; border-radius: 8px; color: var(--ink); background: white; font-size: 10px; font-weight: 700; }
.staff-admin-form > .primary-button, .staff-admin-form > .secondary-button, .admin-management-form > .primary-button { height: 42px; min-height: 42px; padding: 0 14px; align-self: end; }
.staff-pin-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 6px; }
.staff-pin-row .secondary-button { height: 42px; min-height: 42px; padding: 0 8px; font-size: 9px; }
.staff-admin-onetime-pin { margin: 12px 0 0; padding: 10px 12px; border-radius: 9px; color: #174a7e; background: #e7f5fc; font-size: 11px; font-weight: 800; }
.admin-management-feedback { margin: 12px 0 0; padding: 10px 12px; border-radius: 9px; color: #174a7e; background: #e7f5fc; font-size: 11px; font-weight: 800; }
.admin-management-feedback.is-error { color: #8e4338; background: #fff0df; }
.admin-management-feedback.is-success { color: #174a7e; background: #e7f5fc; }
.staff-admin-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.staff-admin-list { display: grid; gap: 8px; }
.staff-admin-row { display: grid; grid-template-columns: 112px minmax(160px, 1fr) 150px 72px minmax(230px, auto); align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.staff-admin-row--inactive { background: #f5f7f8; opacity: .72; }
.staff-admin-id span { display: block; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.staff-admin-id strong { display: block; margin-top: 3px; color: var(--ink); font-size: 11px; }
.staff-admin-person strong { display: block; font-size: 13px; }
.staff-admin-person span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.staff-admin-role { display: grid; gap: 4px; color: var(--muted); font-size: 8px; font-weight: 800; }
.staff-admin-role select { min-height: 36px; padding: 0 10px; border: 1px solid #dce5e1; border-radius: 8px; color: var(--ink); background: #fff; font-size: 10px; font-weight: 800; }
.staff-admin-role select:disabled { color: var(--muted); background: #f4f7f8; }
.staff-admin-status { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.staff-admin-status.is-active { color: #1f5d8f; background: #e7f5fc; }
.staff-admin-status.is-inactive { color: #7d8883; background: #edf0ef; }
.staff-admin-actions { display: flex; justify-content: flex-end; gap: 8px; }
.staff-admin-actions .secondary-button { min-height: 36px; padding: 0 12px; font-size: 9px; }
.staff-admin-danger { color: #8e4338; border-color: #d9b3ac; }
.staff-admin-loading { padding: 14px; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; font-size: 10px; text-align: center; }
.admin-management-list { display: grid; gap: 9px; }
.user-management-tabs { margin: 8px 0 10px; padding-bottom: 0; }
.admin-management-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(180px, 1.4fr) 92px 92px; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.admin-management-row--inactive { background: #f5f7f8; opacity: .74; }
.admin-management-person, .admin-management-email, .admin-management-meta { min-width: 0; }
.admin-management-person strong, .admin-management-email strong { display: block; color: var(--ink); font-size: 12px; }
.admin-management-person span, .admin-management-email span, .admin-management-meta span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 700; }
.admin-management-email strong, .admin-management-email span, .admin-management-person strong, .admin-management-person span, .admin-management-meta strong, .admin-management-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-management-role, .admin-management-status { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 30px; padding: 0 10px; border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.admin-management-role { color: #174a7e; background: #e7f5fc; }
.admin-management-status.is-active { color: #1f5d8f; background: #e7f5fc; }
.admin-management-status.is-invited { color: #8a650f; background: #fff4cb; }
.admin-management-status.is-inactive { color: #7d8883; background: #edf0ef; }
.admin-management-status.is-unassigned { color: #8a4f16; background: #fff0df; }
.admin-management-status.is-unresolved { color: #8e4338; background: #fff0df; }
.admin-management-actions { display: flex; justify-content: flex-end; align-items: center; min-width: 0; white-space: nowrap; }
.admin-management-actions .secondary-button { width: 92px; min-height: 36px; padding: 0 8px; font-size: 8px; }
.admin-management-send-note { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 10px; border-radius: 999px; color: #1f5d8f; background: #e7f5fc; font-size: 8px; font-weight: 800; white-space: nowrap; }
.admin-management-action-note { display: none; }
.user-management-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 0 2px; }
.user-management-pagination span { color: var(--muted); font-size: 10px; font-weight: 800; }
.user-management-pagination .secondary-button { width: 80px; min-height: 34px; padding: 0 10px; font-size: 9px; }
.admin-detail-modal { width: min(720px, 100%); }
.admin-detail-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.admin-detail-summary > div { padding: 12px; border-radius: 10px; background: #f2f6f9; }
.admin-detail-summary span, .admin-detail-summary strong { display: block; }
.admin-detail-summary span { color: var(--muted); font-size: 8px; font-weight: 800; }
.admin-detail-summary strong { margin-top: 5px; color: var(--ink); font-size: 12px; }
.admin-detail-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.admin-detail-section h3 { margin: 0 0 10px; font-size: 14px; }
.admin-detail-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.admin-detail-save-row { display: flex; justify-content: flex-end; margin-top: 10px; }
.admin-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-detail-actions .secondary-button { min-width: 118px; min-height: 40px; }
.admin-detail-notes { display: grid; gap: 5px; margin: 12px 0 0; padding: 10px 12px 10px 24px; border-radius: 10px; color: #6c7772; background: #f5f8fa; font-size: 9px; font-weight: 700; line-height: 1.6; }
.staff-pin-reset-confirmation { padding: 14px; border: 1px solid #d9b3ac; border-radius: 12px; background: #fff9f7; }
.staff-pin-reset-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px 0; }
.staff-pin-reset-impact-warning { margin: 0 0 8px; color: #8e4338; font-size: 10px; font-weight: 900; line-height: 1.6; }
.staff-pin-reset-impact-sites { margin: 10px 0 12px; padding: 10px 12px; border-radius: 9px; color: var(--ink); background: #fff; font-size: 9px; line-height: 1.6; }
.staff-pin-reset-impact-sites > strong { display: block; margin-bottom: 4px; }
.staff-pin-reset-impact-sites ul { display: grid; gap: 3px; margin: 0; padding-left: 18px; }
.staff-pin-reset-confirmation-input { display: grid; gap: 6px; }
.staff-pin-reset-confirmation-input span { color: var(--muted); font-size: 9px; font-weight: 800; }
.staff-pin-reset-confirmation-actions { justify-content: flex-end; margin-top: 12px; }
.hotel-checkbox-list { display: grid; gap: 7px; padding: 8px 10px; border: 1px solid #dce5e1; border-radius: 8px; background: #fff; }
.hotel-checkbox-list label { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 10px; font-weight: 800; }
.hotel-checkbox-list input { width: 16px; height: 16px; accent-color: var(--blue); }
.staff-site-assignment-list { display: grid; gap: 8px; }
.staff-site-assignment-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #dce5e1; border-radius: 10px; background: #f8faf9; }
.staff-site-assignment-row > div { min-width: 0; }
.staff-site-assignment-row strong, .staff-site-assignment-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-site-assignment-row strong { color: var(--ink); font-size: 10px; }
.staff-site-assignment-row span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.staff-site-assignment-row dl { display: grid; grid-template-columns: repeat(2, auto); gap: 6px; margin: 0; }
.staff-site-assignment-row dl > div { min-width: 72px; padding: 6px 8px; border-radius: 8px; background: #fff; text-align: center; }
.staff-site-assignment-row dt { color: var(--muted); font-size: 7px; font-weight: 800; }
.staff-site-assignment-row dd { margin: 3px 0 0; color: var(--ink); font-size: 9px; font-weight: 900; }
.no-hotel-access { display: grid; place-items: center; min-height: 52vh; padding: 24px; }
.no-hotel-access .empty-state { width: min(560px, 100%); }
.hotel-provisioning-content { display: grid; gap: 16px; }
.hotel-provisioning-content .staff-admin-head { margin-bottom: 0; }
.hotel-provisioning-notice { padding: 14px 16px; border: 1px solid #e7d59c; border-radius: 12px; color: #6f5715; background: #fff9e7; }
.hotel-provisioning-notice strong, .hotel-provisioning-notice p { display: block; }
.hotel-provisioning-notice strong { font-size: 12px; }
.hotel-provisioning-notice p { margin: 5px 0 0; font-size: 9px; line-height: 1.7; }
.hotel-provisioning-panel { display: grid; gap: 14px; margin-bottom: 0; }
.hotel-provisioning-panel h3 { margin-bottom: 4px; }
.hotel-provisioning-panel > div > p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.hotel-provisioning-file, .hotel-provisioning-confirmation { display: grid; gap: 6px; color: #526159; font-size: 9px; font-weight: 700; }
.hotel-provisioning-file input, .hotel-provisioning-confirmation input { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid #dce5e1; border-radius: 8px; color: var(--ink); background: white; font-size: 10px; font-weight: 700; }
.hotel-provisioning-feedback, .hotel-provisioning-result { min-height: 38px; margin: 0; padding: 10px 12px; border-radius: 9px; color: #174a7e; background: #e7f5fc; font-size: 10px; font-weight: 800; overflow-wrap: anywhere; }
.hotel-provisioning-feedback.is-error, .hotel-provisioning-result.is-error { color: #8e4338; background: #fff0df; }
.hotel-provisioning-feedback.is-success, .hotel-provisioning-result.is-success { color: #174a7e; background: #e7f5fc; }
.hotel-provisioning-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.hotel-provisioning-summary > div { min-width: 0; padding: 11px 12px; border: 1px solid #deeaef; border-radius: 9px; background: #f8fbfd; }
.hotel-provisioning-summary dt, .hotel-provisioning-summary dd { margin: 0; }
.hotel-provisioning-summary dt { color: var(--muted); font-size: 8px; font-weight: 700; }
.hotel-provisioning-summary dd { margin-top: 5px; color: var(--ink); font-family: "DM Sans", "Noto Sans JP", sans-serif; font-size: 10px; font-weight: 700; overflow-wrap: anywhere; }
.hotel-provisioning-panel > .primary-button { width: max-content; min-width: 150px; }
.hotel-provisioning-panel > .primary-button:disabled { opacity: .45; cursor: not-allowed; }

@media (min-width: 881px) and (max-width: 1180px) {
  .admin-management-row { grid-template-columns: minmax(130px, 1fr) minmax(150px, 1.2fr) 78px 82px; gap: 8px; padding-inline: 12px; }
  .admin-management-actions .secondary-button { width: 82px; padding-inline: 6px; }
}

@media (max-width: 880px) {
  .admin-management-form { grid-template-columns: 1fr; }
  .staff-admin-form { grid-template-columns: 1fr; }
  .admin-management-form .primary-button, .staff-admin-form .primary-button, #admin-management-refresh { width: 100%; min-height: 44px; }
  .admin-management-row { grid-template-columns: minmax(86px, 1fr) minmax(96px, 1.1fr) 52px 54px; align-items: center; gap: 4px; min-height: 58px; padding: 8px 10px; }
  .admin-management-person strong { font-size: 11px; }
  .admin-management-person span { font-size: 7px; }
  .admin-management-role, .admin-management-status { width: 100%; min-width: 0; padding-inline: 5px; font-size: 7px; justify-content: center; }
  .admin-management-actions { justify-content: stretch; }
  .admin-management-actions .secondary-button { width: 100%; min-height: 38px; padding-inline: 5px; font-size: 7px; }
  .admin-management-send-note { width: 100%; min-height: 28px; padding-inline: 5px; font-size: 7px; }
  .admin-management-action-note { text-align: left; }
  .admin-detail-summary, .admin-detail-form-grid, .staff-pin-reset-summary { grid-template-columns: 1fr; }
  .staff-site-assignment-row { grid-template-columns: 1fr; }
  .staff-site-assignment-row dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-site-assignment-row dl > div { min-width: 0; }
  .admin-detail-save-row .primary-button { width: 100%; min-height: 44px; }
  .admin-detail-actions { display: grid; grid-template-columns: 1fr; }
  .admin-detail-actions .secondary-button { width: 100%; min-height: 44px; }
  .hotel-provisioning-summary { grid-template-columns: 1fr; }
  .hotel-provisioning-panel > .primary-button { width: 100%; }
}
.photo-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.photo-list-head span { color: var(--green-2); font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.photo-list-head h2 { margin: 4px 0; font-size: 22px; }
.photo-list-head p { margin: 0; color: var(--muted); font-size: 10px; }
.photo-type-switcher { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.photo-type-switcher button { min-width: 102px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 7px; color: #718078; background: transparent; font-size: 10px; font-weight: 700; }
.photo-type-switcher button.active { color: white; background: var(--green); }
.photo-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; color: var(--muted); font-size: 9px; }
.photo-legend span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.photo-legend i { width: 11px; height: 11px; border-radius: 3px; }
.photo-legend__done { background: #e3e8ed; }
.photo-legend__missing { background: var(--green); }
.photo-legend__attention { background: var(--amber); }
.photo-legend__exempt { background: #eef1f3; }
.photo-floor-pager { display: none; }
.photo-overview { display: grid; gap: 14px; }
.photo-floor { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.photo-floor h3 { margin: 6px 0 0; color: var(--green); font-family: "DM Sans", sans-serif; font-size: 16px; }
.photo-room-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 10px; }
.photo-contact-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; }
.photo-contact-card__band { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 38px; padding: 7px 9px; color: var(--ink); background: white; font-family: "DM Sans", sans-serif; }
.photo-contact-card__band > strong { min-width: 0; font-size: 15px; line-height: 1; }
.photo-contact-card__labels { display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; }
.photo-contact-card__labels small { overflow: hidden; color: inherit; font-family: "Noto Sans JP", sans-serif; font-size: 8px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.photo-contact-card__labels b { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 19px; padding: 0 6px; border-radius: 999px; color: inherit; background: white; font-family: "Noto Sans JP", sans-serif; font-size: 8px; line-height: 1; white-space: nowrap; }
.photo-contact-card__media { display: grid; min-width: 0; min-height: 0; place-items: center; background: white; }
.photo-contact-card__media img { display: block; width: 100%; height: 100%; max-height: 54vh; object-fit: contain; }
.photo-contact-card__empty { min-height: 150px; padding: 14px; }
.photo-contact-card__details { display: grid; gap: 5px; padding: 9px 10px; color: var(--ink); background: white; font-size: 11px; font-weight: 700; }
.photo-contact-card__details span { color: var(--muted); font-size: 9px; font-weight: 600; }
.photo-contact-card--attention { border-color: #dfbd82; }
.photo-contact-card--attention .photo-contact-card__band { color: var(--ink); background: var(--amber); }
.photo-room-cell { position: relative; display: grid; grid-template-rows: 22px minmax(0, 1fr) 20px; min-width: 0; height: 174px; padding: 8px; gap: 6px; overflow: hidden; border: 1px solid transparent; border-radius: 11px; color: white; font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; }
.photo-room-cell.photo-contact-card { grid-template-rows: auto minmax(0, 1fr); padding: 0; gap: 0; border-color: var(--line); color: var(--ink); }
.photo-room-band { border-bottom: 1px solid var(--line); }
.photo-room-number { display: flex; min-width: 0; min-height: 20px; align-items: center; justify-content: center; gap: 6px; line-height: 1; }
.photo-room-cell.photo-contact-card .photo-room-number { display: block; min-height: 0; }
.photo-room-stay { display: inline-flex; align-items: center; min-height: 17px; padding: 0 6px; border: 1px solid #d4dde5; border-radius: 999px; color: #415261; background: #fff; font-family: "Noto Sans JP", sans-serif; font-size: 8px; font-weight: 800; line-height: 1; white-space: nowrap; }
.photo-room-stay--vacant, .photo-room-stay--broken, .photo-room-stay--eco { color: #66727a; background: #f3f5f7; }
.photo-room-status { display: grid; min-width: 0; min-height: 18px; place-items: center; overflow: hidden; font-family: "Noto Sans JP", sans-serif; font-size: 9px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.photo-thumb-frame { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; border-radius: 7px; background: rgba(255,255,255,.35); }
.photo-room-cell.photo-contact-card .photo-thumb-frame { display: grid; place-items: center; border-radius: 0; background: white; }
.photo-thumb-frame::after { position: absolute; right: 6px; bottom: 5px; z-index: 2; font-size: 12px; line-height: 1; content: "⌾"; opacity: .75; }
.photo-thumb-frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.photo-room-cell.photo-contact-card .photo-thumb-frame img { position: static; object-fit: contain; }
.photo-thumb-empty { display: grid; width: 100%; height: 100%; place-items: center; padding: 6px; font-family: "Noto Sans JP", sans-serif; font-size: 11px; opacity: .8; text-align: center; }
.photo-room-cell--thumbnail { background: #edf5fc; }
.photo-room-cell--thumbnail .photo-room-number { color: var(--green); }
.photo-room-cell--thumbnail .photo-thumb-frame { background: #dcebf8; }
.photo-room-cell.photo-contact-card--thumbnail { background: white; }
.photo-room-cell.photo-contact-card--thumbnail .photo-thumb-frame { background: white; }
.photo-room-cell--thumbnail .photo-thumb-frame::after { display: none; }
.photo-room-cell--done { color: #52616d; border-color: #cfd7de; background: #e3e8ed; }
.photo-room-cell--done .photo-room-number, .photo-room-cell--done .photo-room-status { color: #52616d; }
.photo-room-cell.photo-contact-card--done { color: var(--ink); border-color: var(--line); background: white; }
.photo-room-cell.photo-contact-card--done .photo-contact-card__band { color: var(--ink); background: white; }
.photo-room-cell--missing { color: white; border-color: var(--green); background: var(--green); }
.photo-room-cell.photo-contact-card--missing { background: white; }
.photo-room-cell.photo-contact-card--missing .photo-contact-card__band { color: white; border-color: var(--green); background: var(--green); }
.photo-room-cell--missing .photo-thumb-frame::after { opacity: .35; }
.photo-room-cell--attention { border-color: #dfbd82; background: var(--amber); }
.photo-room-cell.photo-contact-card--attention { color: var(--ink); background: white; }
.photo-room-cell.photo-contact-card--attention .photo-contact-card__band { color: var(--ink); border-color: #dfbd82; background: var(--amber); }
.photo-room-cell--exempt { color: #52616d; border-color: #cfd7de; background: #e3e8ed; }
.photo-room-cell.photo-contact-card--exempt { color: var(--ink); border-color: var(--line); background: white; }
.photo-room-cell.photo-contact-card--exempt .photo-contact-card__band { color: var(--ink); background: white; }
.photo-room-cell--exempt .photo-thumb-frame { background: rgba(255,255,255,.64); }
.photo-room-cell.photo-contact-card--exempt .photo-thumb-frame { background: white; }
.photo-room-cell--exempt .photo-thumb-frame::after { display: none; }
.photo-room-cell:hover { filter: brightness(.97); transform: translateY(-1px); }
.photo-detail-modal { width: min(560px, 100%); }
.photo-detail-preview { display: grid; min-height: 290px; margin-bottom: 14px; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #eef4f9; }
.photo-detail-preview img { width: 100%; max-height: 58vh; object-fit: contain; }
.photo-detail-large-image { height: auto; touch-action: pinch-zoom; user-select: none; -webkit-user-drag: none; }
.photo-placeholder { display: grid; gap: 8px; place-items: center; color: #62717b; text-align: center; }
.photo-placeholder strong { font-family: "DM Sans", sans-serif; font-size: 36px; }
.photo-placeholder span { font-size: 10px; font-weight: 700; }
.photo-detail-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; }
.photo-detail-info div { padding: 10px; border-radius: 8px; background: #f4f8fb; }
.photo-detail-info dt { margin-bottom: 3px; color: var(--muted); font-size: 8px; }
.photo-detail-info dd { margin: 0; font-size: 11px; font-weight: 700; }
.lost-item-search { display: grid; gap: 5px; min-width: 220px; color: var(--muted); font-size: 8px; font-weight: 700; }
.lost-item-search input { min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; font-size: 12px; font-weight: 700; }
.lost-item-room-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 9px; }
.lost-item-room-button { display: grid; min-height: 58px; place-items: center; border: 1px solid #b9cfe4; border-radius: 10px; color: var(--green); background: white; font-family: "DM Sans", sans-serif; font-size: 20px; font-weight: 800; }
.lost-item-room-button strong { font-size: inherit; line-height: 1; }
.lost-item-room-button span { color: var(--muted); font-family: "Noto Sans JP", sans-serif; font-size: 9px; font-weight: 700; }
.damage-report-room-button { gap: 4px; color: #8a4b19; border-color: #d7a651; background: #fffaf0; }
.lost-item-room-button:hover { background: #e7f5fc; transform: translateY(-1px); }
.lost-item-preview-grid { display: grid; width: 100%; gap: 12px; }
.lost-item-preview-grid figure { display: grid; gap: 7px; margin: 0; }
.lost-item-preview-grid img { width: 100%; max-height: 54vh; border-radius: 10px; object-fit: contain; background: #eef4f9; }
.lost-item-preview-grid figcaption { display: grid; gap: 5px; color: var(--ink); font-size: 11px; font-weight: 700; text-align: center; }
.lost-item-preview-grid figcaption span { color: var(--muted); font-size: 9px; font-weight: 600; }
.lost-item-preview-grid .photo-contact-card { display: grid; gap: 0; width: 100%; margin: 0; }
.lost-item-preview-grid .photo-contact-card__media { min-height: 180px; }
.lost-item-preview-grid .photo-contact-card__media img { height: auto; max-height: 54vh; }
.lost-item-preview-grid .photo-contact-card__details { text-align: center; }
.damage-complete-check { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; margin-top: 4px; padding: 0; border: 0; border-radius: 0; color: #83550f; background: transparent; font-size: 10px; font-weight: 800; }
.damage-complete-check input { width: 16px; height: 16px; accent-color: #8a4b19; }
.list-heading-actions { display: flex; align-items: center; gap: 13px; }
.view-switcher { display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.view-switcher button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 31px; padding: 0 10px; border: 0; border-radius: 6px; color: #7b8982; background: transparent; font-size: 9px; line-height: 1; }
.view-switcher button.active { color: #1f5d8f; background: #e7f5fc; font-weight: 700; }
.view-switcher button:disabled { color: #b7c0bc; background: #f1f4f3; cursor: not-allowed; }
body[data-role="cleaner"] .overview-view-button { display: none; }
.toolbar { margin: 17px 0; }.status-tabs { display: flex; gap: 5px; padding-bottom: 12px; overflow-x: auto; scrollbar-width: none; }.status-tabs::-webkit-scrollbar { display: none; }
.status-tabs button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; color: #74827b; background: transparent; font-size: 10px; line-height: 1; }.status-tabs button.active { color: #1f5d8f; background: #e7f5fc; font-weight: 600; }.status-tabs span { margin-left: 3px; font-family: "DM Sans", sans-serif; }
.bulk-out-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; width: 100%; margin: 12px 0 12px; padding: 0; border: 0; background: transparent; }
.bulk-out-panel__summary { display: flex; align-items: baseline; gap: 8px; margin-right: auto; }
.bulk-out-panel__summary strong { font-size: 13px; }
.bulk-out-panel__summary span { color: #8e322b; font-size: 10px; font-weight: 800; }
.bulk-out-panel__select { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; color: #8e322b; font-size: 10px; font-weight: 800; white-space: nowrap; }
.bulk-out-panel__select input { width: 16px; height: 16px; accent-color: var(--red); }
.bulk-out-panel__button { min-height: 34px; padding: 0 14px; font-size: 10px; }
.filter-row { display: flex; justify-content: flex-end; gap: 9px; }
.floor-filter { position: relative; z-index: 5; }
.floor-filter summary { display: flex; align-items: center; gap: 8px; min-width: 120px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: white; list-style: none; cursor: pointer; }
.floor-filter summary::-webkit-details-marker { display: none; }
.floor-filter summary::after { margin-left: auto; color: var(--muted); content: "⌄"; }
.floor-filter summary span { color: var(--muted); font-size: 8px; }
.floor-filter summary strong { max-width: 185px; overflow: hidden; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.floor-filter[open] summary { border-color: #a9c4dd; box-shadow: 0 0 0 3px rgba(47,111,168,.08); }
.floor-filter__panel { position: absolute; top: 44px; right: 0; width: 230px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: var(--shadow); }
.floor-filter__panel label { display: flex; align-items: center; gap: 7px; min-height: 31px; padding: 5px 7px; border-radius: 6px; font-size: 9px; cursor: pointer; }
.floor-filter__panel label:hover { background: #f0f5f2; }
.floor-filter__panel input { width: 14px; height: 14px; accent-color: var(--green-2); }
.floor-filter__all { margin-bottom: 6px; border-bottom: 1px solid var(--line); border-radius: 0 !important; font-weight: 700; }
.floor-filter__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.search-box { display: flex; align-items: center; gap: 8px; width: 255px; height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: white; }.search-box span { color: #809088; font-size: 17px; }.search-box input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 9px; }
.room-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.room-grid--overview { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 8px; }
.overview-room { display: grid; min-height: 132px; overflow: hidden; align-content: stretch; gap: 6px; border: 1px solid #cbdff1; border-radius: 11px; background: #eef5fb; text-align: center; box-shadow: 0 3px 10px rgba(24,48,40,.025); animation: card-in .3s ease both; }
.overview-room:has(.overview-controls .overview-cleaner + .overview-cleaner) { min-height: 166px; }
.room-grid--no-animation .overview-room, .room-grid--no-animation .room-card { animation: none !important; }
.room-grid--no-animation .overview-room, .room-grid--no-animation .room-card { animation-delay: 0ms !important; }
.overview-room__main { display: grid; grid-template-rows: 27px minmax(34px, 1fr) 27px; min-width: 0; min-height: 88px; padding: 0; overflow: hidden; border: 0; color: var(--ink); background: transparent; text-align: center; }
.overview-room strong { display: grid; place-items: center; min-width: 0; color: #17324f; font-family: "DM Sans", sans-serif; font-size: 24px; line-height: 1; }
.overview-room span { font-size: 9px; font-weight: 800; white-space: nowrap; }
.overview-progress, .overview-stay { display: grid; min-width: 0; padding: 0 5px; place-items: center; overflow: hidden; text-overflow: ellipsis; }
.overview-progress--amber { color: #9a650f; background: transparent; }
.overview-progress--blue { color: var(--blue); background: transparent; }
.overview-progress--purple { color: var(--purple); background: transparent; }
.overview-progress--indigo { color: var(--indigo); background: transparent; }
.overview-progress--green { color: var(--green-2); background: transparent; }
.overview-progress--broken { color: #884416; background: transparent; }
.overview-progress--vacant { color: #52616d; background: transparent; }
.overview-progress--dddone { color: #1d604f; background: transparent; }
.overview-stay--out { color: #8e322b; background: #f4d8d5; }
.overview-stay--outdone { color: #fff; background: #b95750; }
.overview-stay--stay { color: #685100; background: #f1dd8a; }
.overview-stay--eco { color: #24604f; background: #dceee7; }
.overview-stay--broken { color: #fff; background: #9b6a44; }
.overview-stay--vacant { color: #52616d; background: #e3e8ed; }
.overview-room[data-stay="out"] strong { color: #8e322b; background: #f4d8d5; }
.overview-room[data-stay="outdone"] strong { color: #fff; background: #b95750; }
.overview-room[data-stay="stay"] strong { color: #685100; background: #f1dd8a; }
.overview-room[data-stay="eco"] strong { color: #24604f; background: #dceee7; }
.overview-room[data-stay="broken"] strong { color: #fff; background: #9b6a44; }
.overview-room[data-stay="vacant"] strong { color: #52616d; background: #e3e8ed; }
.overview-room[data-white="true"] { border-color: #dbe5ec; background: #fff; }
.overview-room[data-white="true"] .overview-stay,
.overview-room[data-white="true"] strong,
.overview-room[data-white="true"] .overview-progress { color: #53616b; background: #fff; }
.overview-room[data-white="true"] strong { color: #1f3446; }
.overview-controls { display: grid; gap: 5px; min-width: 0; margin: 0 7px 7px; }
.overview-cleaner { display: grid; gap: 3px; min-width: 0; }
.overview-room > .overview-cleaner, .overview-room > .overview-cleaner-name { margin: 0 7px 7px; }
.overview-cleaner span { color: inherit; opacity: .72; font-size: 7px; }
.overview-cleaner select { width: 100%; height: 28px; min-width: 0; padding: 0 4px; border: 1px solid rgba(0,0,0,.12); border-radius: 6px; color: var(--ink); background: rgba(255,255,255,.88); font-size: 8px; font-weight: 700; }
.overview-stay-control select { border-color: rgba(31,83,133,.26); background: rgba(255,255,255,.94); }
.overview-cleaner .stay-select--out { color: #9d362d; background: #fde9e7; }
.overview-cleaner .stay-select--stay { color: #7c570d; background: #fff0b8; }
.overview-cleaner .stay-select--eco { color: #476171; background: #e6eef4; }
.overview-cleaner .stay-select--broken { color: #884416; background: #fff0e4; }
.overview-cleaner .stay-select--vacant { color: #52616d; background: #eef2f5; }
.overview-cleaner select:disabled { color: #89948f; background: rgba(255,255,255,.55); cursor: not-allowed; }
.overview-cleaner-name { overflow: hidden; text-overflow: ellipsis; }
.overview-checkedout { grid-template-columns: auto 1fr; align-items: center; text-align: left; }
.overview-checkedout input { width: 18px; height: 18px; accent-color: var(--green-2); }
.overview-checkedout strong { color: inherit; font-size: 8px; white-space: nowrap; }
.overview-room:hover { filter: brightness(.98); transform: translateY(-1px); }
.room-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: 0 3px 11px rgba(24,48,40,.025); animation: card-in .3s ease both; }
@keyframes card-in { from { opacity: 0; transform: translateY(5px); } }
.room-card__body { display: block; width: 100%; padding: 15px 15px 11px; border: 0; background: transparent; text-align: left; }
.room-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }.floor-label { color: var(--muted); font-family: "DM Sans", sans-serif; font-size: 8px; }.room-card h3 { margin: 0; font-family: "DM Sans", sans-serif; font-size: 23px; line-height: 1; }
.room-number-block { display: grid; grid-template-columns: auto auto; align-items: end; justify-items: start; gap: 3px 7px; }
.room-number-block .floor-label { grid-column: 1 / -1; }
.card-room-type { display: inline-flex; align-items: center; min-width: 0; height: 20px; color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1; white-space: nowrap; }
.stay-status-row { display: flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 7px; white-space: nowrap; }
.list-tag-row { display: none; }
.stay-status { display: grid; flex: 0 0 108px; width: 108px; height: 40px; padding: 0 8px; place-items: center; border-radius: 7px; color: white; font-size: 20px; font-weight: 700; line-height: 1; text-align: center; letter-spacing: 0; white-space: nowrap; }
.stay-status--out { color: #8e322b; background: #f4c4bf; }
.stay-status--stay { color: #614600; background: #f3c94f; }
.stay-status--eco { color: #24604f; background: #dceee7; }
.stay-status--broken { color: #fff; background: #9b4a16; }
.stay-status--vacant { color: #52616d; background: #e3e8ed; }
.checkout-status { display: grid; flex: 0 0 62px; height: 30px; padding: 0 6px; place-items: center; border-radius: 7px; font-size: 9px; font-weight: 800; line-height: 1; white-space: nowrap; }
.checkout-status--done { color: #fff; background: #a92f27; }
.priority-status { display: grid; flex: 0 0 48px; width: 48px; height: 40px; padding: 0; place-items: center; border-radius: 7px; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; }
.priority-status--urgent { color: #fff; border: 1px solid #b52f27; background: #c83e35; }
.priority-status--dd { color: #7c4b00; border: 1px solid #e5a42e; background: #ffe8a3; }
.priority-status--note { width: 58px; flex-basis: 58px; color: #1f5d8f; border: 1px solid #a8d4ef; background: #e7f5fc; font-size: 10px; }
.priority-status--extra-bed { width: 82px; flex-basis: 82px; color: #174a7e; border: 1px solid #9bc6d6; background: #e6f6f7; font-size: 9px; }
.list-room-flags { display: none; }
.list-priority-status { display: none; align-items: center; justify-content: center; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 7px; font-weight: 800; line-height: 1; white-space: nowrap; }
.list-priority-status--urgent { color: #fff; background: #c83e35; }
.list-priority-status--dd { color: #7c4b00; border: 1px solid #e5a42e; background: #ffe8a3; }
.list-priority-status--note { color: #1f5d8f; border: 1px solid #a8d4ef; background: #e7f5fc; }
.list-priority-status--extra-bed { color: #174a7e; border: 1px solid #9bc6d6; background: #e6f6f7; }
.status-badge { display: inline-flex; align-items: center; padding: 5px 7px; border-radius: 20px; background: transparent; font-size: 8px; font-weight: 700; white-space: nowrap; }.status-badge::before { width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: currentColor; content: ""; }.status-badge__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-badge--list { display: none; }
.stay-status-list { display: none; align-items: center; min-width: 0; height: 24px; padding: 0 7px; border: 1px solid #d8e1dd; border-radius: 999px; background: #fff; font-size: 8px; font-weight: 800; line-height: 1; white-space: nowrap; }
.stay-status-list--out { color: #8e322b; border-color: #efc1bd; background: #fff6f5; }
.stay-status-list--stay { color: #6b4b00; border-color: #efd98f; background: #fff9df; }
.stay-status-list--eco { color: #24604f; border-color: #c9e1d8; background: #f2faf7; }
.stay-status-list--broken { color: #884416; border-color: #e2c4af; background: #fff6ef; }
.stay-status-list--vacant { color: #52616d; border-color: #d4dce4; background: #f5f7f9; }
.list-cleaner-name, .list-room-type { display: none; min-width: 0; overflow: hidden; color: var(--ink); font-size: 8px; font-weight: 700; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.list-room-type { color: var(--muted); font-weight: 600; }
.status-amber { color: #9a650f; background: transparent; }.status-blue { color: var(--blue); background: transparent; }.status-purple { color: var(--purple); background: transparent; }.status-indigo { color: var(--indigo); background: transparent; }.status-green { color: var(--green-2); background: transparent; }.status-broken { color: #884416; background: transparent; }.status-vacant { color: #52616d; background: transparent; }.status-dddone { color: #1d604f; background: transparent; }
.room-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 11px 0; }.room-identity strong { display: none; font-size: 10px; }.room-identity span { padding: 3px 6px; border-radius: 4px; font-size: 7px; }.room-identity .priority-status { display: inline-flex; flex: 0 0 auto; width: auto; min-width: 44px; height: 20px; padding: 0 6px; border-radius: 4px; font-size: 7px; }.room-identity .priority-status--note { min-width: 54px; }.room-identity .priority-status--extra-bed { min-width: 72px; }.non-smoking { color: var(--green-2); background: var(--mint); }.smoking { color: #9b5647; background: var(--red-soft); }
.mobile-list-facts { display: none; }
.room-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin: 0; padding: 11px 0; border-top: 1px solid #edf1ef; border-bottom: 1px solid #edf1ef; }.room-facts dt { margin-bottom: 2px; color: #94a09a; font-size: 7px; }.room-facts dd { margin: 0; overflow: hidden; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.inline-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; padding: 11px 0; border-top: 1px solid #edf1ef; border-bottom: 1px solid #edf1ef; }
.inline-field { display: grid; min-width: 0; gap: 3px; }.inline-field--wide { grid-column: span 1; }
.inline-field > span { color: #89968f; font-size: 7px; }
.inline-field select, .inline-field input { width: 100%; min-width: 0; height: 31px; padding: 0 7px; border: 1px solid #dce5e1; border-radius: 6px; outline: none; color: var(--ink); background: white; font-size: 8px; font-weight: 600; }
.inline-field select:focus, .inline-field input:focus { border-color: var(--green-2); box-shadow: 0 0 0 2px rgba(47,111,168,.09); }
.inline-field select:disabled { color: #8b9691; background: #f1f3f2; cursor: not-allowed; }
.inline-field .stay-select { color: #fff; border-color: transparent; font-size: 10px; font-weight: 700; }
.inline-field .stay-select--out { color: #8e322b; background: #f4c4bf; }
.inline-field .stay-select--stay { color: #614600; background: #f3c94f; }
.inline-field .stay-select--eco { color: #24604f; background: #dceee7; }
.inline-field .stay-select--broken { color: #fff; background: #9b4a16; }
.inline-field .stay-select--vacant { color: #52616d; background: #e3e8ed; }
.inline-status-controls, .inline-exchange-controls { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.inline-checkedout { display: flex; align-items: center; gap: 7px; min-height: 31px; padding: 6px 9px; border: 0; border-radius: 0; color: #8e322b; background: transparent; font-size: 9px; font-weight: 800; }
.inline-checkedout input { width: 16px; height: 16px; accent-color: #a92f27; }
.inline-priority { display: flex; align-items: center; gap: 7px; min-height: 31px; padding: 6px 9px; border-radius: 6px; font-size: 9px; font-weight: 700; }
.inline-priority--urgent { color: #9b3029; border: 1px solid #e5aaa5; background: #fbe9e7; }
.inline-priority--dd { color: #7c4b00; border: 1px solid #efd28b; background: #fff7dc; }
.inline-priority input { width: 15px; height: 15px; accent-color: #d89418; }
.inline-editor--worker-controls { grid-template-columns: 1fr; margin-top: 11px; padding: 9px 0 0; border-bottom: 0; }
.inline-editor--worker-controls .inline-priority { width: 100%; }
.inline-exchange-controls label { display: flex; align-items: center; gap: 7px; min-height: 31px; padding: 6px 9px; border: 1px solid #dce5e1; border-radius: 6px; color: var(--green); background: #fff; font-size: 9px; font-weight: 700; }
.inline-exchange-controls input { width: 15px; height: 15px; accent-color: var(--green-2); }
.inline-exchange-controls span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }.detail-tag { padding: 4px 6px; border-radius: 5px; color: #607068; background: #f0f4f2; font-size: 7px; }.detail-tag b { margin-right: 4px; color: #8c9993; }.detail-tag.priority { color: #a46712; background: var(--amber-soft); }.detail-tag.special { color: var(--purple); background: var(--purple-soft); }
.room-note, .upload-failed, .lost-item-count { margin: 8px 0 0; padding: 7px; border-radius: 6px; color: #596860; background: #f5f7f6; font-size: 8px; line-height: 1.5; }.upload-failed { color: var(--red); background: var(--red-soft); font-weight: 600; }.lost-item-count { color: #8b5a13; background: #fff2d5; font-weight: 700; }
.room-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 12px 12px; }
.room-card__actions:has(> :only-child) { grid-template-columns: 1fr; }
.room-card__action { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 36px; margin: 0; padding: 0 10px; border: 0; border-radius: 8px; color: white; background: var(--action-color); font-size: 9px; font-weight: 600; line-height: 1.2; text-align: center; }.room-card__action:hover { filter: brightness(1.08); }.secondary-action { color: var(--green); border: 1px solid var(--green-2); background: white; }.photo-action, .complete-action { background: var(--action-color); }.check-action { color: white; background: var(--purple); }.checked-action { color: #7d8883; border: 1px solid #d8dfdc; background: #edf0ef; cursor: default; }.lost-item-action { color: #83550f; border: 1px solid #d7a651; background: #fff5dc; }
.checked-action:hover { filter: none; }
.primary-button.check-action,
.room-card__action.check-action { color: white; background: var(--purple); }
.checkout-wait-action, .checkout-wait-action:hover { color: #1f5d8f !important; border: 1px solid #a8d4ef !important; background: #e7f5fc !important; filter: none !important; box-shadow: none !important; cursor: not-allowed !important; }
.action-disabled, .action-disabled:hover { color: #8d9993 !important; border: 1px solid #dfe5e2 !important; background: #eef1ef !important; filter: none !important; box-shadow: none !important; cursor: not-allowed !important; }

.room-grid--list { grid-template-columns: 1fr; gap: 7px; }
.room-grid--list .room-card { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; min-width: 0; height: 68px; border-radius: 10px; }
.room-grid--list .room-card__body { position: relative; display: grid; grid-template-columns: minmax(300px, 360px) 112px minmax(300px, 1fr); align-items: center; gap: 10px; min-width: 0; height: 68px; padding: 8px 12px; overflow: hidden; cursor: pointer; }
.room-grid--list .room-card__top { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-width: 0; min-height: 44px; }
.room-grid--list .room-number-block { display: grid; grid-template-columns: 22px auto auto; grid-template-rows: auto auto; align-items: center; gap: 2px 5px; min-width: 0; }
.room-grid--list .floor-label { grid-column: 1; align-self: center; }
.room-grid--list .room-card h3 { grid-column: 2; grid-row: 1; justify-self: start; margin: 0; font-size: 18px; text-align: left; }
.room-grid--list .list-room-flags { display: flex; grid-column: 2 / 4; grid-row: 2; justify-self: start; align-items: center; gap: 3px; min-width: 0; }
.room-grid--list .list-room-flags .list-priority-status { display: inline-flex; }
.room-grid--list .card-room-type { display: none; }
.room-grid--list .stay-status-row { display: none; }
.room-grid--list .stay-status-list { display: inline-flex; grid-column: 3; justify-self: start; }
.room-grid--list .list-cleaner-name { display: none; }
.room-grid--list .list-room-type { display: none; }
.room-grid--list .stay-status { display: grid; flex: 0 0 52px; width: 52px; height: 32px; padding: 0 5px; border-radius: 6px; font-size: 9px; }
.room-grid--list .priority-status { flex-basis: 40px; width: 40px; height: 32px; font-size: 9px; }
.room-grid--list .status-badge--card { display: none; }
.room-grid--list .status-badge--list { display: none; }
.room-grid--list .status-badge--list::before { display: none; }
.room-grid--list .status-badge--list .status-badge__text { max-width: 76px; text-align: left; }
.room-grid--list .status-badge--list::after { display: none; }
.room-grid--list .room-identity { display: flex; max-width: 112px; min-width: 0; margin: 0; overflow: hidden; }
.room-grid--list .room-identity strong { display: none; min-width: 0; overflow: hidden; color: var(--muted); font-size: 7px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.room-grid--list .room-identity span { padding: 2px 4px; font-size: 6px; }
.room-grid--list .inline-editor { display: grid; grid-template-columns: minmax(150px, 1fr) 92px; align-items: center; gap: 8px; min-width: 0; height: 44px; margin: 0; padding: 0; border: 0; }
body[data-role="manager"] .room-grid--list .inline-editor { grid-template-columns: minmax(120px, 1fr) 78px 82px; }
.room-grid--list .inline-field { align-self: center; gap: 0; }
.room-grid--list .inline-field > span { display: none; }
.room-grid--list .inline-field select, .room-grid--list .inline-field input { height: 44px; padding: 0 10px; border-radius: 8px; font-size: 9px; line-height: 1; }
.room-grid--list .inline-status-controls, .room-grid--list .inline-exchange-controls, .room-grid--list .inline-editor--worker-controls { display: none; }
body[data-role="manager"] .room-grid--list .inline-status-controls {
  display: flex;
  grid-column: auto;
  align-items: center;
  min-width: 0;
  height: 44px;
  gap: 4px;
}
body[data-role="manager"] .room-grid--list .inline-status-controls .inline-checkedout {
  min-width: 0;
  min-height: 34px;
  height: 34px;
  padding: 0 8px;
  gap: 5px;
  font-size: 8px;
  white-space: nowrap;
}
body[data-role="manager"] .room-grid--list .inline-status-controls .inline-checkedout input {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin: 0;
}
body[data-role="manager"] .room-grid--list .inline-status-controls .inline-priority--urgent {
  display: none;
}
body[data-role="manager"] .room-grid--list .inline-status-controls .inline-priority--dd {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 34px;
  height: 34px;
  padding: 0 8px;
  gap: 5px;
  font-size: 8px;
  white-space: nowrap;
}
body[data-role="manager"] .room-grid--list .inline-status-controls .inline-priority--dd input {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin: 0;
}
body[data-role="manager"] .room-grid--list .room-card__body {
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
}
body[data-role="manager"] .room-grid--list .room-card__top,
body[data-role="manager"] .room-grid--list .room-number-block {
  min-width: 0;
}
body[data-role="manager"] .room-grid--list .room-number-block {
  grid-template-columns: 22px auto;
}
body[data-role="manager"] .room-grid--list .stay-status-list,
body[data-role="manager"] .room-grid--list .room-identity,
body[data-role="manager"] .room-grid--list .mobile-list-facts {
  display: none;
}
body[data-role="manager"] .room-grid--list .inline-editor--manager-list {
  display: grid;
  grid-template-columns: 82px 88px minmax(120px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
}
body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-field,
body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-status-controls {
  min-width: 0;
}
body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-field select {
  height: 44px;
  padding: 0 8px;
  font-size: 9px;
}
body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-status-controls {
  display: flex;
  align-items: center;
  height: 44px;
}
body[data-role="manager"] .room-grid--list .inline-checkedout--disabled {
  justify-content: center;
  color: #9aa5a0;
  border: 1px solid #dfe5e2;
  background: #f4f6f5;
}
body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls,
body[data-role="checker"] .room-grid--list .inline-editor--worker-controls { display: grid; grid-template-columns: 1fr; align-items: center; min-width: 0; height: 44px; margin: 0; padding: 0; border: 0; }
body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls .inline-priority,
body[data-role="checker"] .room-grid--list .inline-editor--worker-controls .inline-priority { display: none; }
body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls,
body[data-role="checker"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls { display: flex; align-items: center; gap: 4px; min-width: 0; }
body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls label,
body[data-role="checker"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls label { flex: 1 1 0; min-width: 0; min-height: 38px; padding: 4px 5px; gap: 4px; overflow: hidden; font-size: 7px; line-height: 1.15; }
body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls input,
body[data-role="checker"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls input { flex: 0 0 14px; width: 14px; height: 14px; }
.room-grid--list .room-facts { grid-template-columns: 1fr; gap: 7px; min-width: 0; padding: 0; border: 0; }
.room-grid--list .detail-tags, .room-grid--list .room-note, .room-grid--list .lost-item-count, .room-grid--list .upload-failed { grid-column: 1 / -1; margin-top: 2px; }
.room-grid--list .room-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 8px; height: 68px; padding: 0 10px 0 0; }
.room-grid--list .room-card__action { height: 44px; padding: 0 8px; overflow: hidden; border-radius: 8px; font-size: 8px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.empty-state { padding: 55px 20px; border: 1px dashed #cbd7d2; border-radius: 13px; background: white; text-align: center; }.empty-state div { display: grid; width: 42px; height: 42px; margin: auto; place-items: center; border-radius: 50%; color: var(--green); background: var(--mint); }.empty-state h3 { margin: 11px 0 5px; font-size: 13px; }.empty-state p { margin: 0; color: var(--muted); font-size: 9px; }
.mobile-floor-pager { display: grid; grid-template-columns: 88px minmax(0, 1fr) 88px; align-items: center; gap: 8px; margin-top: 14px; }
.mobile-floor-pager[hidden] { display: none; }
.mobile-floor-pager button { min-height: 40px; padding: 0 8px; border: 1px solid #b9cfe4; border-radius: 8px; color: var(--green); background: white; font-size: 9px; font-weight: 700; }
.mobile-floor-pager button:disabled { color: #a4b0ba; border-color: var(--line); background: #f0f3f5; cursor: default; }
.mobile-floor-pager strong { color: var(--green); font-size: 11px; text-align: center; }

.modal-backdrop, .confirm-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; padding: 18px; place-items: center; background: rgba(9,26,21,.58); backdrop-filter: blur(4px); }
.modal { position: relative; width: min(670px, 100%); max-height: calc(100vh - 36px); padding: 27px; overflow-y: auto; border-radius: 17px; background: white; box-shadow: 0 25px 80px rgba(0,0,0,.22); animation: modal-in .2s ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(7px) scale(.99); } }
.modal-close { position: absolute; top: 16px; right: 16px; width: 31px; height: 31px; border: 0; border-radius: 50%; color: #68776f; background: #eef2f0; font-size: 17px; }.modal-kicker { color: var(--green-2); font-family: "DM Sans", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .15em; }.modal h2 { margin: 5px 0 19px; font-size: 22px; }
.modal-room-head { display: flex; align-items: center; justify-content: space-between; padding-right: 42px; }.modal-room-head h2 { margin-bottom: 13px; }
.room-static-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; padding: 12px; border-radius: 10px; background: #f2f6f4; }.room-static-info span, .room-static-info strong { display: block; }.room-static-info span { color: var(--muted); font-size: 7px; }.room-static-info strong { margin-top: 3px; font-size: 9px; }.wide-static { grid-column: 1 / -1; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 13px; }.form-grid label, .modal form > label { display: grid; gap: 6px; color: #526159; font-size: 9px; font-weight: 600; }.wide-field { grid-column: span 2; }
.modal input:not([type="checkbox"]):not([type="file"]), .modal select, .modal textarea { box-sizing: border-box; width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid #dce5e1; border-radius: 8px; outline: none; color: var(--ink); background: white; font-size: 10px; line-height: 1.3; }.modal textarea { resize: vertical; }.modal input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(47,111,168,.09); }.modal select:disabled { color: #89948f; background: #f1f3f2; cursor: not-allowed; }
.room-modal .form-grid { align-items: start; gap: 12px; }
.room-modal .form-grid label:not(.toggle-field) { display: grid; grid-template-rows: 14px auto; align-items: start; min-width: 0; }
.room-modal input:not([type="checkbox"]):not([type="file"]), .room-modal select { height: 44px; min-height: 44px; padding: 0 12px; line-height: 44px; }
.room-modal select { appearance: auto; }
.room-modal textarea { min-height: 78px; padding: 11px 12px; line-height: 1.55; }
.room-modal .wide-field { grid-column: span 2; }
.room-modal .toggle-field.manager-fields, .room-modal .toggle-field.room-detail-priority-field { min-height: 44px; padding: 0 12px; border: 1px solid #dce5e1; border-radius: 8px; background: white; }
.room-detail-exchange-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.room-detail-exchange-fields .toggle-field { min-height: 44px; padding: 0 12px; border: 1px solid #dce5e1; border-radius: 8px; color: #526159; background: white; font-size: 9px; font-weight: 600; line-height: 1.35; }.worker-detail-save { display: none !important; }body[data-role="cleaner"] .worker-detail-save { display: inline-flex !important; width: 100%; }
.toggle-field { display: flex !important; grid-template-columns: auto 1fr !important; align-items: center; gap: 8px !important; margin: 7px 0; }.toggle-field input { flex: 0 0 16px; width: 16px; height: 16px; margin: 0; }.form-hint { margin: 8px 0 13px; color: var(--muted); font-size: 8px; }
body[data-authority-kind="hotel"] #modal-priority-field[hidden],
body[data-authority-kind="hotel"] #modal-dd-field[hidden],
body[data-authority-kind="hotel"] #modal-checkedout-field[hidden] { display: none !important; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border: 0; border-radius: 9px; color: white; background: var(--action-color); font-size: 10px; font-weight: 600; line-height: 1.2; text-align: center; box-shadow: 0 6px 15px rgba(23,74,126,.15); }.room-modal .primary-button { width: 100%; }.secondary-button { color: var(--green); border: 1px solid var(--green-2); background: white; box-shadow: none; }.action-complete { padding: 12px; border-radius: 8px; color: var(--green-2); background: var(--mint); font-size: 9px; text-align: center; }
#role-action-area { display: grid; gap: 8px; }
.lost-item-detail-action, .damage-report-detail-action { width: 100%; margin-top: 0; color: #83550f; border-color: #d7a651; background: #fffaf0; }
body[data-role="cleaner"] .manager-fields, body[data-role="checker"] .manager-fields { display: none !important; }
.photo-modal { width: min(440px, 100%); }.photo-modal > p { margin: -10px 0 16px; color: var(--muted); font-size: 10px; }
.camera-box { position: relative; display: grid; min-height: 210px; padding: 20px; place-items: center; align-content: center; overflow: hidden; border: 1.5px dashed #b9cbc4; border-radius: 13px; background: #f6f9f7; text-align: center; }.camera-box input { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; opacity: 0; }.camera-trigger-button { position: relative; overflow: hidden; cursor: pointer; }.camera-trigger-button > span { pointer-events: none; }.camera-trigger-input { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }.camera-icon { display: grid; width: 45px; height: 45px; margin-bottom: 9px; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 23px; }.camera-box strong { font-size: 11px; }.camera-box small { margin-top: 5px; color: var(--muted); font-size: 8px; }.camera-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.upload-status { min-height: 31px; }.upload-status p { margin: 0 0 10px; padding: 9px; border-radius: 7px; font-size: 9px; }.ready-message { color: var(--blue); background: var(--blue-soft); }.error-message { color: var(--red); background: var(--red-soft); }.uploading { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--blue); font-size: 9px; }.uploading span { width: 15px; height: 15px; border: 2px solid #cbddeb; border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }
.photo-modal .primary-button { width: 100%; }.photo-modal .primary-button:disabled { opacity: .45; cursor: not-allowed; }
.lost-item-note { margin: 13px 0; }.lost-item-history { padding-top: 7px; border-top: 1px solid #dce5e1; }
.room-operation-history { padding-top: 7px; border-top: 1px solid #dce5e1; }
.room-operation-history__body { margin-top: 5px; color: var(--ink); font-size: 9px; }
.room-operation-history__body p { margin: 0; color: var(--muted); }
.room-operation-history__body ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.room-operation-history__body li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 5px 10px; padding: 3px 0; border-bottom: 1px solid #dce5e1; }
.room-operation-history__body li:last-child { border-bottom: 0; }
.room-operation-history__body strong, .room-operation-history__body span, .room-operation-history__body time { display: block; min-width: 0; }
.room-operation-history__body time, .room-operation-history__body span { color: var(--muted); font-size: 8px; }
.room-operation-history__body strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.room-operation-history__changes { display: grid; grid-column: 1 / -1; gap: 2px; margin: 0; color: var(--muted); font-size: 8px; }
.room-operation-history__changes > div { display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr); gap: 6px; }
.room-operation-history__changes dt, .room-operation-history__changes dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.room-operation-history__changes dt { color: var(--ink); }
.confirm-dialog { width: min(370px, 100%); padding: 24px; border-radius: 14px; background: white; box-shadow: var(--shadow); }.confirm-dialog h3 { margin: 0 0 8px; font-size: 16px; }.confirm-dialog p { margin: 0 0 20px; color: var(--muted); font-size: 10px; line-height: 1.7; white-space: pre-line; }.confirm-dialog > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.daily-report-recreate-memo-dialog { position: relative; }
.daily-report-recreate-memo-dialog label { display: block; margin-bottom: 6px; color: #526159; font-size: 9px; font-weight: 600; }
.daily-report-recreate-memo-dialog textarea { box-sizing: border-box; width: 100%; min-height: 82px; margin-bottom: 16px; padding: 9px 10px; resize: vertical; border: 1px solid #dce5e1; border-radius: 8px; outline: none; color: var(--ink); background: white; font: inherit; font-size: 10px; line-height: 1.5; }
.daily-report-recreate-memo-dialog textarea:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(47,111,168,.09); }
.pdf-preview-modal { display: flex; flex-direction: column; width: min(1080px, 100%); height: calc(100vh - 36px); overflow: hidden; }
.pdf-preview-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; padding-right: 42px; }
.pdf-preview-head h2 { margin-bottom: 12px; }
.pdf-preview-head > span { margin-bottom: 13px; color: var(--muted); font-size: 9px; }
#pdf-preview-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 1px solid var(--line); border-radius: 10px; background: #e8edf1; }
.pdf-preview-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.daily-reports-content { display: grid; gap: 16px; }
.daily-report-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 2px; }
.daily-report-list-head p { margin: 0; color: var(--muted); font-size: 10px; }
.daily-report-list-head h2 { margin-bottom: 8px; }
.daily-report-list-head > div:first-child > span { color: var(--green-2); font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.daily-report-page-controls { display: grid; justify-items: end; gap: 8px; }
.daily-report-month-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.daily-report-month-nav strong { min-width: 100px; color: var(--green); font-size: 15px; text-align: center; }
.daily-report-month-nav .secondary-button { min-height: 36px; padding: 0 10px; font-size: 9px; }
.daily-report-create-picker { display: grid; grid-template-columns: auto minmax(132px, 1fr); align-items: center; gap: 8px; color: var(--muted); font-size: 9px; }
.daily-report-create-picker input { height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: 10px; }
#daily-report-create-button { min-height: 38px; padding: 0 14px; font-size: 10px; }
.daily-report-list-summary { margin-bottom: 10px; padding: 9px 11px; border: 1px solid #cfe0ef; border-radius: 9px; color: var(--green); background: #f4f9fd; font-size: 10px; font-weight: 700; }
.daily-report-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 10px; }
.daily-report-list-row { display: grid; align-content: space-between; gap: 11px; min-height: 154px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 5px 14px rgba(23, 74, 126, .05); }
.daily-report-list-row[role="button"] { cursor: pointer; }
.daily-report-list-row[role="button"]:hover { border-color: #bdd5e8; box-shadow: 0 8px 18px rgba(23, 74, 126, .09); transform: translateY(-1px); }
.daily-report-list-date strong, .daily-report-list-date span, .daily-report-list-state span, .daily-report-list-state small { display: block; }
.daily-report-list-date strong { font-size: 17px; }
.daily-report-list-date span, .daily-report-list-state small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.daily-report-list-state .daily-report-list-history { color: #3f625b; font-weight: 700; overflow-wrap: anywhere; }
.daily-report-list-state span { width: max-content; min-width: 72px; padding: 5px 9px; border-radius: 999px; color: #66736d; background: #edf0ef; font-size: 9px; font-weight: 800; text-align: center; }
.daily-report-list-row.is-locked .daily-report-list-state span { color: #1f5d8f; background: #e7f5fc; }
.daily-report-list-row.is-unlocked .daily-report-list-state span { color: #8a650f; background: #fff4cb; }
.daily-report-list-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.daily-report-list-actions .primary-button, .daily-report-list-actions .secondary-button { min-height: 34px; padding: 0 10px; font-size: 9px; }
.daily-report-unlock-action { color: #8a4f16; border-color: #e5c28e; }
.daily-report-list-empty { grid-column: 1 / -1; padding: 16px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); background: #fff; font-size: 10px; text-align: center; }
.daily-report-history { flex: 0 0 auto; max-height: 185px; margin-top: 10px; padding: 11px; overflow: auto; border: 1px solid #d4e5ef; border-radius: 10px; background: #f8fbfd; }
.daily-report-history h3 { margin: 0 0 8px; color: var(--green); font-size: 12px; }
.daily-report-history-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.daily-report-history-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px; border: 1px solid #deeaef; border-radius: 8px; background: white; }
.daily-report-history-list strong, .daily-report-history-list span, .daily-report-history-list time { display: block; }
.daily-report-history-list strong { color: var(--ink); font-size: 10px; }
.daily-report-history-list span, .daily-report-history-list time, .daily-report-history-list p { color: var(--muted); font-size: 8px; }
.daily-report-history-list time { text-align: right; }
.daily-report-history-list p { grid-column: 1 / -1; margin: 0; overflow-wrap: anywhere; }
.daily-report-history-empty { margin: 0; color: var(--muted); font-size: 9px; }
.monthly-reports-content { display: grid; gap: 16px; }
.monthly-report-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.monthly-report-head > div:first-child > span { color: var(--green-2); font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.monthly-report-head h2 { margin: 4px 0 6px; font-size: 22px; }
.monthly-report-head p { margin: 0; color: var(--muted); font-size: 10px; }
.monthly-report-year-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.monthly-report-year-nav strong { min-width: 82px; color: var(--green); font-size: 15px; text-align: center; }
.monthly-report-year-nav .secondary-button { min-height: 36px; padding: 0 10px; font-size: 9px; }
.monthly-report-status { padding: 9px 11px; border: 1px solid #cfe0ef; border-radius: 9px; color: var(--green); background: #f4f9fd; font-size: 10px; font-weight: 700; }
.monthly-report-sections { display: grid; gap: 18px; }
.monthly-report-section { display: grid; gap: 10px; }
.monthly-report-section h3 { margin: 0; color: var(--ink); font-size: 14px; }
.monthly-report-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 9px; }
.monthly-report-card { display: grid; align-content: space-between; gap: 9px; min-height: 126px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: white; text-align: left; box-shadow: 0 5px 14px rgba(23, 74, 126, .05); cursor: pointer; transition: .18s ease; }
.monthly-report-card:hover, .monthly-report-card.active { border-color: #9dc3e3; background: #f4f9fd; box-shadow: 0 8px 18px rgba(23, 74, 126, .09); transform: translateY(-1px); }
.monthly-report-card.is-empty { color: #7e8986; background: #f8faf9; }
.monthly-report-card strong, .monthly-report-card span, .monthly-report-card small { display: block; }
.monthly-report-card strong { font-size: 18px; }
.monthly-report-card span { color: var(--green); font-size: 10px; font-weight: 800; }
.monthly-report-card.is-empty span { color: var(--muted); }
.monthly-report-card div { display: grid; gap: 3px; color: var(--muted); font-size: 8px; }
.monthly-report-detail { display: grid; gap: 14px; padding: 16px; border: 1px solid #cfe0ef; border-radius: 14px; background: white; box-shadow: 0 4px 18px rgba(24,48,40,.04); }
.monthly-report-detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.monthly-report-detail-head span { color: var(--green-2); font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.monthly-report-detail-head h3 { margin: 4px 0 0; font-size: 18px; }
.monthly-report-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.monthly-report-metrics div { display: grid; gap: 4px; padding: 10px; border: 1px solid #deeaef; border-radius: 10px; background: #f8fbfd; }
.monthly-report-metrics span { color: var(--muted); font-size: 8px; }
.monthly-report-metrics strong { color: var(--green); font-family: "DM Sans", sans-serif; font-size: 21px; }
.monthly-report-detail h4 { margin: 0 0 8px; color: var(--green); font-size: 12px; }
.monthly-report-daily-table, .monthly-report-staff-table { display: grid; gap: 4px; }
.monthly-report-daily-head, .monthly-report-daily-row { display: grid; grid-template-columns: minmax(90px, 1fr) repeat(5, 64px); align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; }
.monthly-report-staff-head, .monthly-report-staff-row { display: grid; grid-template-columns: minmax(120px, 1fr) repeat(3, 72px); align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; }
.monthly-report-daily-head, .monthly-report-staff-head { color: var(--muted); background: #eef5fb; font-size: 8px; font-weight: 700; }
.monthly-report-daily-row, .monthly-report-staff-row { border: 1px solid var(--line); background: white; font-size: 10px; }
.monthly-report-daily-row strong, .monthly-report-staff-row strong { font-family: "DM Sans", sans-serif; font-size: 15px; }
.monthly-report-empty { padding: 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); background: #fff; font-size: 10px; text-align: center; }
.monthly-report-section-empty { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); background: #fff; font-size: 10px; text-align: center; }
.pdf-render-host { position: fixed; z-index: -1; top: 0; left: -20000px; width: max-content; pointer-events: none; }
.excel-sheet-render { display: inline-block; padding: 28px; color: #000; background: #fff; font-family: Arial, "Noto Sans JP", sans-serif; }
.excel-sheet-render table { border-collapse: collapse; border-spacing: 0; table-layout: fixed; empty-cells: show; background: #fff; }
.excel-sheet-render td { box-sizing: border-box; padding: 1px 3px; overflow: hidden; color: #000 !important; background: #fff !important; line-height: 1.2; white-space: pre-wrap; background-clip: padding-box; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 70; display: flex; align-items: center; gap: 9px; width: min(520px, calc(100vw - 48px)); min-width: 260px; padding: 12px 15px; border-radius: 10px; color: white; background: var(--green); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(10px); transition: .22s ease; }.toast.show { opacity: 1; transform: none; }.toast.toast-error { background: #8e4338; }.toast span { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: var(--green); background: #dceafb; font-size: 10px; font-weight: 700; }.toast p { margin: 0; font-size: 9px; line-height: 1.5; overflow-wrap: anywhere; }
.drawer-backdrop { display: none; }

@media (max-width: 1160px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .room-grid--list { display: grid; grid-template-columns: 1fr; overflow: visible; padding-bottom: 0; }
  .room-grid--list .room-card { grid-template-columns: minmax(0, 1fr) 220px; min-width: 0; height: 68px; margin-bottom: 0; }
  .room-grid--list .room-card__body { grid-template-columns: minmax(240px, 300px) 96px minmax(250px, 1fr); height: 68px; }
  .room-grid--list .inline-editor { grid-template-columns: minmax(120px, 1fr) 86px; }
  .special-cleaning-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .special-task-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; width: 232px; transform: translateX(-100%); transition: transform .22s ease; }
  body.drawer-open .sidebar { transform: none; }.drawer-backdrop { position: fixed; inset: 0; z-index: 15; background: rgba(9,26,21,.4); }body.drawer-open .drawer-backdrop { display: block; }
  .menu-button { display: block; }.topbar { flex-wrap: wrap; gap: 12px; padding: 15px 22px; }.content { padding: 22px 22px 50px; }
  .topbar-brand { min-width: 150px; height: 52px; }
  .topbar-brand--hotel #site-context-select { min-width: 150px; }
  .topbar-brand .brand-logo--full { width: 132px; max-height: 40px; }
  .business-date-switcher { order: 4; width: 100%; }
  .business-date-switcher input { width: 100%; min-height: 24px; }
  .filter-row { min-width: 0; }
  .floor-filter__panel { right: auto; left: 0; width: min(230px, calc(100vw - 44px)); }
  .search-box { min-width: 0; }
  .room-grid--overview { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 7px; }
  .overview-room { min-height: 128px; }
  .overview-room:has(.overview-controls .overview-cleaner + .overview-cleaner) { min-height: 160px; }
  .special-cleaning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .special-task-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-grid--list { display: grid; margin: 0; padding: 0; overflow: visible; }
  .room-grid--list .room-card { display: grid; grid-template-columns: minmax(0, 1fr) 150px; min-width: 0; height: 68px; margin: 0; overflow: hidden; }
  .room-grid--list .room-card__body { display: grid; grid-template-columns: minmax(210px, 1fr) 92px minmax(160px, .9fr); min-width: 0; height: 68px; gap: 7px; padding: 8px 8px 8px 11px; cursor: pointer; }
  .room-grid--list .room-card__top { display: grid; grid-template-columns: minmax(0, 1fr) 72px; min-height: 44px; gap: 5px; align-items: center; }
  .room-grid--list .room-number-block { display: grid; grid-template-columns: 20px auto auto; grid-template-rows: auto auto; align-items: center; gap: 2px 4px; }
  .room-grid--list .floor-label { grid-column: 1; align-self: center; }
  .room-grid--list .room-card h3 { grid-column: 2; font-size: 18px; }
  .room-grid--list .stay-status-row { display: none; }
  .room-grid--list .stay-status-list { display: inline-flex; grid-column: 3; height: 24px; padding: 0 6px; font-size: 7px; }
  .room-grid--list .list-cleaner-name { display: none; }
  .room-grid--list .list-room-type { display: none; }
  .room-grid--list .priority-status { flex: 0 0 34px; width: 34px; height: 29px; font-size: 8px; }
  .room-grid--list .status-badge { width: 72px; padding: 5px 3px; font-size: 7px; }
  .room-grid--list .room-facts,
  .room-grid--list .detail-tags, .room-grid--list .room-note, .room-grid--list .lost-item-count,
  .room-grid--list .upload-failed { display: none; }
  .room-grid--list .room-identity { display: flex; max-width: 74px; }
  .room-grid--list .inline-editor { display: grid; grid-template-columns: minmax(95px, 1.2fr) 76px; gap: 5px; min-width: 0; height: 44px; margin: 0; padding: 0; border: 0; }
  body[data-role="manager"] .room-grid--list .inline-editor { grid-template-columns: minmax(88px, 1fr) 68px 74px; }
  .room-grid--list .inline-field select { min-height: 44px; font-size: 8px; }
  .room-grid--list .mobile-list-facts { display: none; }
  .room-grid--list .room-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 4px; height: 68px; padding: 0 7px 0 0; }
  .room-grid--list .room-card__action { min-width: 0; height: 44px; padding: 0 4px; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
  body[data-role="cleaner"] .room-grid--list .room-card,
  body[data-role="checker"] .room-grid--list .room-card { height: 76px; }
  body[data-role="cleaner"] .room-grid--list .room-card__body,
  body[data-role="checker"] .room-grid--list .room-card__body { height: 76px; }
  body[data-role="cleaner"] .room-grid--list .room-card__actions,
  body[data-role="checker"] .room-grid--list .room-card__actions { height: 76px; }
  body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls,
  body[data-role="checker"] .room-grid--list .inline-editor--worker-controls { height: 52px; }
  body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls,
  body[data-role="checker"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls { flex-wrap: nowrap; gap: 3px; }
  body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls label,
  body[data-role="checker"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls label { min-height: 24px; padding: 3px 5px; font-size: 7px; }
}
@media (min-width: 681px) and (max-width: 1180px) {
  .room-grid--list .room-card {
    grid-template-columns: minmax(0, 1fr) clamp(168px, 22vw, 230px);
    min-height: 76px;
    height: auto;
    overflow: visible;
  }
  .room-grid--list .room-card__body {
    grid-template-columns: minmax(190px, 1fr) minmax(78px, 96px) minmax(190px, .9fr);
    min-height: 76px;
    height: auto;
    overflow: visible;
  }
  .room-grid--list .room-card__top {
    grid-template-columns: minmax(0, 1fr);
    min-height: 44px;
  }
  .room-grid--list .room-number-block {
    grid-template-columns: 20px auto auto;
    grid-template-rows: auto auto;
    gap: 4px;
  }
  .room-grid--list .room-identity {
    max-width: 96px;
  }
  .room-grid--list .status-badge--list { display: none; }
  .room-grid--list .stay-status-row { display: none; }
  .room-grid--list .stay-status-list { display: inline-flex; grid-column: 3; }
  .room-grid--list .list-cleaner-name { display: none; }
  .room-grid--list .list-room-type { display: none; }
  .room-grid--list .inline-editor {
    grid-template-columns: minmax(108px, 1fr) minmax(78px, 90px);
    min-height: 44px;
    height: auto;
  }
  body[data-role="manager"] .room-grid--list .inline-editor {
    grid-template-columns: minmax(96px, 1fr) 72px 78px;
  }
  .room-grid--list .room-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    gap: 6px;
    min-height: 76px;
    height: auto;
    padding: 8px 10px 8px 0;
    overflow: visible;
  }
  .room-grid--list .room-card__action {
    flex: 1 1 72px;
    min-width: 72px;
    height: 38px;
    padding: 0 6px;
  }
  body[data-role="cleaner"] .room-grid--list .room-card,
  body[data-role="checker"] .room-grid--list .room-card {
    min-height: 84px;
    height: auto;
  }
  body[data-role="cleaner"] .room-grid--list .room-card__body,
  body[data-role="checker"] .room-grid--list .room-card__body {
    min-height: 84px;
    height: auto;
  }
  body[data-role="cleaner"] .room-grid--list .room-card__actions,
  body[data-role="checker"] .room-grid--list .room-card__actions {
    min-height: 84px;
    height: auto;
  }
  body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls,
  body[data-role="checker"] .room-grid--list .inline-editor--worker-controls {
    min-height: 60px;
    height: auto;
  }
  body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls,
  body[data-role="checker"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls {
    flex-wrap: nowrap;
    gap: 4px;
  }
  body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls label,
  body[data-role="checker"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls label {
    min-height: 27px;
    padding: 4px 6px;
  }
}
@media (max-width: 680px) {
  .photo-room-cell { grid-template-rows: auto minmax(0, 1fr); height: 172px; padding: 0; gap: 0; border-radius: 12px; font-size: 18px; }
  .photo-contact-card__band { min-height: 42px; padding: 8px 10px; }
  .photo-contact-card__band > strong { font-size: 18px; }
  .photo-contact-card__labels { gap: 4px; }
  .photo-contact-card__labels small { font-size: 8px; }
  .photo-contact-card__labels b { min-height: 21px; }
  .photo-thumb-frame { border-radius: 0; }
  .photo-contact-card__media img { max-height: 52vh; }
  .lost-item-preview-grid .photo-contact-card__media { min-height: 160px; }
  .topbar { position: sticky; top: 0; z-index: 12; min-height: 74px; gap: 10px; padding: 11px 14px; }.eyebrow { display: none; }.topbar h1 { max-width: 132px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }.role-switcher span, .user-switcher span { display: none; }.role-switcher, .user-switcher { height: 44px; min-width: 112px; padding: 0 8px; }.role-switcher select, .user-switcher select { width: 100%; height: 42px; padding: 0 4px; font-size: 9px; }.user-switcher { display: none; }.business-date-switcher { height: 44px; min-height: 44px; padding: 0 10px; }.business-date-switcher input { min-height: 24px; }
  .menu-button { width: 44px; height: 44px; padding: 12px; }
  .topbar-brand { min-width: 128px; width: auto; height: 44px; padding: 0; }
  .topbar-brand--hotel { justify-content: flex-start; font-size: 13px; letter-spacing: .02em; }
  .topbar-brand--hotel #site-context-select { min-width: 0; max-width: 148px; height: 36px; padding-left: 6px; font-size: 12px; }
  .hotel-brand--trace { justify-content: center; }
  .hotel-brand--trace .brand-logo--full { width: 170px; }
  .content { padding: 15px 13px 40px; }.role-banner { align-items: flex-start; flex-direction: column; gap: 6px; margin-bottom: 12px; padding: 11px; }.role-banner p { line-height: 1.6; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }.summary-card { min-height: 88px; padding: 12px; }.summary-dot { width: 7px; height: 39px; }.summary-card strong { font-size: 20px; }
  .room-section { margin-top: 23px; }.section-heading { align-items: center; }.list-heading-actions { gap: 7px; }.view-switcher button { width: 31px; justify-content: center; padding: 0; }.view-switcher button span { display: none; }.filter-row { justify-content: stretch; }.floor-filter { flex: 0 0 auto; }.floor-filter summary { min-width: 112px; }.floor-filter__panel { width: min(230px, calc(100vw - 26px)); }.search-box { width: 100%; }.room-grid { grid-template-columns: 1fr; gap: 9px; }.room-grid--overview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }.overview-cleaner select { height: 32px; font-size: 8px; }
  .room-card { display: block; }.room-card__body { padding: 14px; }.room-card__actions { padding: 0 12px 12px; }.room-card__action { height: 40px; }.room-facts { grid-template-columns: repeat(2, 1fr); }
  .room-grid--list .room-card { display: grid; grid-template-columns: minmax(0, 1fr) 128px; height: 64px; min-height: 64px; overflow: hidden; }
  .room-grid--list .room-card__body { display: grid; grid-template-columns: 74px minmax(0, 1fr); height: 64px; gap: 5px; padding: 6px 4px 6px 8px; }
  .room-grid--list .room-card__top { grid-template-columns: minmax(0, 1fr); gap: 3px; min-height: 44px; }
  .room-grid--list .room-number-block { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; justify-content: start; gap: 1px 3px; min-width: 0; }
  .room-grid--list .floor-label { display: none; }
  .room-grid--list .room-card h3 { grid-column: 1; justify-self: start; font-size: 17px; }
  .room-grid--list .list-room-flags { grid-column: 1 / 3; grid-row: 2; }
  .room-grid--list .list-room-flags .list-priority-status { height: 16px; padding: 0 4px; font-size: 6px; }
  .room-grid--list .status-badge--list { display: none; }
  .room-grid--list .status-badge--list::before { display: none; }
  .room-grid--list .status-badge--list .status-badge__text { max-width: 48px; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
  .room-grid--list .status-badge--list::after { display: none; }
  .room-grid--list .stay-status-row { display: none; }
  .room-grid--list .stay-status-list { display: inline-flex; grid-column: 2; height: 22px; padding: 0 5px; font-size: 6px; }
  .room-grid--list .list-cleaner-name { display: none; }
  .room-grid--list .list-room-type { display: none; }
  .room-grid--list .room-identity { display: none; }
  .room-grid--list .inline-editor { grid-template-columns: minmax(70px, 1fr) 57px; gap: 3px; }
  body[data-role="manager"] .room-grid--list .inline-editor { grid-template-columns: minmax(54px, 1fr) 48px 64px; }
  .room-grid--list .inline-field > span { display: none; }
  .room-grid--list .inline-field select { min-height: 44px; padding: 0 3px; font-size: 7px; }
  .room-grid--list .mobile-list-facts { display: none; }
  .room-grid--list .mobile-list-facts span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .room-grid--list .mobile-list-facts b { display: none; }
  body[data-role="manager"] .room-grid--list .mobile-list-facts { display: none; }
  .room-grid--list .room-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 0 5px 0 0; }
  .room-grid--list .room-card__action { height: 44px; padding: 0 2px; overflow: hidden; font-size: 6px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
  body[data-role="cleaner"] .room-grid--list .room-card,
  body[data-role="checker"] .room-grid--list .room-card { height: 86px; min-height: 86px; }
  body[data-role="cleaner"] .room-grid--list .room-card__body,
  body[data-role="checker"] .room-grid--list .room-card__body { height: 86px; grid-template-columns: 82px minmax(0, 1fr); }
  body[data-role="cleaner"] .room-grid--list .room-card__actions,
  body[data-role="checker"] .room-grid--list .room-card__actions { height: 86px; }
  body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls,
  body[data-role="checker"] .room-grid--list .inline-editor--worker-controls { grid-column: 2; grid-row: 1; align-self: center; height: 68px; }
  body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls,
  body[data-role="checker"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls { flex-wrap: nowrap; gap: 3px; }
  body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls label,
  body[data-role="checker"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls label { flex: 1 1 0; min-height: 31px; padding: 4px 3px; gap: 3px; font-size: 6px; }
  body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls input,
  body[data-role="checker"] .room-grid--list .inline-editor--worker-controls .inline-exchange-controls input { flex: 0 0 12px; width: 12px; height: 12px; }
  .mobile-floor-pager button { min-height: 44px; padding: 0 8px; border: 1px solid #b9cfe4; border-radius: 8px; color: var(--green); background: white; font-size: 9px; font-weight: 700; }
  .mobile-floor-pager button:disabled { color: #a4b0ba; border-color: var(--line); background: #f0f3f5; cursor: default; }
  .mobile-floor-pager strong { color: var(--green); font-size: 11px; text-align: center; }
  .special-cleaning-head { align-items: stretch; flex-direction: column; }.special-cleaning-controls { align-items: stretch; flex-direction: column; width: 100%; }.special-month-switcher { width: 100%; }.special-month-switcher input { width: 100%; min-height: 44px; }.special-cleaning-controls .primary-button { min-height: 44px; }.special-task-selector { display: flex; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }.special-task-selector::-webkit-scrollbar { display: none; }.special-task-selector button { flex: 0 0 190px; min-height: 56px; }.special-selected-task { align-items: flex-start; flex-direction: column; gap: 2px; }.special-cleaning-summary { gap: 6px; }.special-cleaning-summary div { padding: 11px 8px; }.special-cleaning-summary strong { font-size: 17px; }.special-cleaning-grid { grid-template-columns: 1fr; }.special-room { padding: 10px 11px; }
  .performance-head { align-items: flex-start; flex-direction: column; }.performance-controls { width: 100%; justify-items: stretch; }.month-navigation { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; }.performance-month-switcher input { width: 100%; min-width: 0; min-height: 44px; }.month-navigation > button { min-height: 44px; padding: 0 9px; }.performance-person { grid-template-columns: minmax(0, 1fr) 74px 74px; padding: 11px; }.performance-person > div:not(.performance-person__name) { padding-left: 7px; }.performance-person > div:not(.performance-person__name) strong { font-size: 18px; }.staff-admin-head, .staff-admin-list-head { align-items: flex-start; flex-direction: column; }.staff-admin-form { grid-template-columns: 1fr; }.staff-admin-form .primary-button, #staff-admin-refresh { width: 100%; min-height: 44px; }.staff-admin-row { grid-template-columns: 1fr; align-items: stretch; gap: 9px; }.staff-admin-id, .staff-admin-person, .staff-admin-status { justify-content: flex-start; text-align: left; }.staff-admin-status { width: max-content; min-width: 64px; padding: 0 12px; }.staff-admin-actions { display: grid; grid-template-columns: 1fr 1fr; }.staff-admin-actions .secondary-button { min-height: 44px; }.modal-backdrop { align-items: end; padding: 0; }.modal { width: 100%; max-height: 91vh; padding: 22px 17px; border-radius: 18px 18px 0 0; }.room-static-info { grid-template-columns: repeat(2, 1fr); }.form-grid { grid-template-columns: repeat(2, 1fr); }.wide-field { grid-column: 1 / -1; }
  .room-modal .wide-field { grid-column: 1 / -1; }
  .performance-detail { padding: 12px; }.performance-day-table__head, .performance-day-row { grid-template-columns: minmax(76px, 1fr) repeat(3, 54px); gap: 5px; padding: 8px 7px; }.performance-day-table__head { font-size: 7px; }.performance-day-row { font-size: 9px; }.performance-day-row strong { font-size: 14px; }
  .photo-list-head { align-items: stretch; flex-direction: column; gap: 10px; }.photo-type-switcher { display: grid; grid-template-columns: 1fr 1fr; }.photo-type-switcher button { min-height: 44px; }.photo-floor-pager { display: grid; grid-template-columns: 88px minmax(0, 1fr) 88px; align-items: center; gap: 8px; margin: 13px 0; }.photo-floor-pager button { min-height: 44px; padding: 0 8px; border: 1px solid #b9cfe4; border-radius: 8px; color: var(--green); background: white; font-size: 9px; font-weight: 700; }.photo-floor-pager button:disabled { color: #a4b0ba; border-color: var(--line); background: #f0f3f5; }.photo-floor-pager strong { color: var(--green); font-size: 12px; text-align: center; }.photo-floor { display: none; padding: 0; border: 0; background: transparent; }.photo-floor.mobile-active { display: block; }.photo-floor h3 { display: none; }.photo-room-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.photo-room-cell { grid-template-rows: 26px minmax(0, 1fr) 22px; height: 172px; padding: 9px; gap: 7px; font-size: 18px; border-radius: 12px; }.photo-room-number { min-height: 26px; }.photo-room-status { min-height: 22px; font-size: 10px; }.photo-thumb-frame { border-radius: 9px; }.photo-thumb-frame::after { right: 8px; bottom: 7px; font-size: 14px; }.photo-thumb-empty { font-size: 12px; }.photo-detail-preview { min-height: 230px; }.photo-detail-info { grid-template-columns: 1fr; }.lost-item-search { min-width: 0; }.lost-item-search input { min-height: 44px; }.lost-item-floor { display: grid; grid-template-columns: 42px minmax(0, 1fr); padding: 10px; border: 1px solid var(--line); background: white; }.lost-item-floor h3 { display: block; margin: 4px 0 0; }.lost-item-room-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }.lost-item-room-button { min-height: 50px; font-size: 18px; }
  .pdf-preview-backdrop { align-items: stretch; }
  .pdf-preview-modal { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }
  #pdf-preview-frame { min-height: 42vh; }
  .daily-report-history { max-height: 165px; }
  .pdf-preview-actions { grid-template-columns: 1fr 1fr; }
  .daily-report-list-head { align-items: flex-start; flex-direction: column; }
  .daily-report-page-controls { width: 100%; justify-items: stretch; }
  .daily-report-month-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; justify-content: stretch; }
  .daily-report-month-nav strong { grid-column: 1 / -1; width: 100%; order: -1; text-align: left; }
  .daily-report-create-picker { grid-template-columns: 1fr; align-items: stretch; }
  .daily-report-create-picker input, #daily-report-create-button { width: 100%; min-height: 42px; }
  .daily-report-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .daily-report-list-row { min-height: 148px; gap: 8px; padding: 11px; }
  .daily-report-list-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .daily-report-list-actions .primary-button, .daily-report-list-actions .secondary-button { width: 100%; min-height: 42px; }
  .monthly-report-head { align-items: flex-start; flex-direction: column; }
  .monthly-report-year-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; justify-content: stretch; }
  .monthly-report-year-nav strong { grid-column: 1 / -1; width: 100%; order: -1; text-align: left; }
  .monthly-report-year-nav .secondary-button { min-height: 42px; }
  .monthly-report-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .monthly-report-card { min-height: 116px; padding: 10px; }
  .monthly-report-card strong { font-size: 16px; }
  .monthly-report-detail { padding: 12px; }
  .monthly-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .monthly-report-daily-head, .monthly-report-daily-row { grid-template-columns: minmax(70px, 1fr) repeat(5, 42px); gap: 4px; padding: 7px 6px; font-size: 8px; }
  .monthly-report-staff-head, .monthly-report-staff-row { grid-template-columns: minmax(90px, 1fr) repeat(3, 46px); gap: 4px; padding: 7px 6px; font-size: 8px; }
  .monthly-report-daily-row strong, .monthly-report-staff-row strong { font-size: 13px; }
  #save-excel-report { grid-column: 1 / -1; }
  .toast { right: 13px; bottom: 13px; left: 13px; min-width: 0; }
}

@media (max-width: 430px) {
  .topbar h1 { display: none; }.role-switcher select { width: 100%; }.summary-grid { grid-template-columns: 1fr 1fr; }
  .room-card { display: block; }.section-heading { align-items: center; }
}

body[data-role="cleaner"] .room-grid--list .room-card,
body[data-role="checker"] .room-grid--list .room-card {
  align-items: center;
}

body[data-role="cleaner"] .room-grid--list .room-card__body,
body[data-role="checker"] .room-grid--list .room-card__body,
body[data-role="cleaner"] .room-grid--list .room-card__top,
body[data-role="checker"] .room-grid--list .room-card__top,
body[data-role="cleaner"] .room-grid--list .room-number-block,
body[data-role="checker"] .room-grid--list .room-number-block,
body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls,
body[data-role="checker"] .room-grid--list .inline-editor--worker-controls,
body[data-role="cleaner"] .room-grid--list .inline-exchange-controls,
body[data-role="checker"] .room-grid--list .inline-exchange-controls,
body[data-role="cleaner"] .room-grid--list .room-card__actions,
body[data-role="checker"] .room-grid--list .room-card__actions {
  align-items: center;
}

body[data-role="cleaner"] .room-grid--list .status-badge--list,
body[data-role="checker"] .room-grid--list .status-badge--list,
body[data-role="cleaner"] .room-grid--list .stay-status-list,
body[data-role="checker"] .room-grid--list .stay-status-list,
body[data-role="cleaner"] .room-grid--list .list-cleaner-name,
body[data-role="checker"] .room-grid--list .list-cleaner-name,
body[data-role="cleaner"] .room-grid--list .list-room-type,
body[data-role="checker"] .room-grid--list .list-room-type {
  align-self: center;
  min-height: 0;
  height: 22px;
  line-height: 1;
}

body[data-role="manager"] .room-grid--list .list-cleaner-name,
body[data-role="cleaner"] .room-grid--list .list-cleaner-name,
body[data-role="checker"] .room-grid--list .list-cleaner-name {
  display: none;
}

.room-grid--list .status-badge--list,
.room-grid--list .list-room-type {
  display: none;
}

body[data-role="cleaner"] .room-grid--list .mobile-list-facts,
body[data-role="checker"] .room-grid--list .mobile-list-facts,
body[data-role="cleaner"] .room-grid--list .room-facts,
body[data-role="checker"] .room-grid--list .room-facts {
  display: none;
}

body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls,
body[data-role="checker"] .room-grid--list .inline-editor--worker-controls {
  display: flex;
  min-height: 44px;
  height: 44px;
}

body[data-role="cleaner"] .room-grid--list .inline-exchange-controls,
body[data-role="checker"] .room-grid--list .inline-exchange-controls {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

body[data-role="cleaner"] .room-grid--list .inline-exchange-controls label,
body[data-role="checker"] .room-grid--list .inline-exchange-controls label {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 34px;
  height: 34px;
  padding: 0 5px;
  gap: 4px;
  line-height: 1;
  white-space: nowrap;
}

body[data-role="cleaner"] .room-grid--list .inline-exchange-controls input,
body[data-role="checker"] .room-grid--list .inline-exchange-controls input {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  margin: 0;
}

body[data-role="cleaner"] .room-grid--list .inline-exchange-controls span,
body[data-role="checker"] .room-grid--list .inline-exchange-controls span {
  line-height: 1;
}

body[data-role="cleaner"] .room-grid--list .room-card__actions,
body[data-role="checker"] .room-grid--list .room-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  height: 68px;
  min-height: 68px;
}

body[data-role="cleaner"] .room-grid--list .room-card__action,
body[data-role="checker"] .room-grid--list .room-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-height: 44px;
  line-height: 1.15;
}

@media (min-width: 681px) and (max-width: 1180px) {
  body[data-role="cleaner"] .room-grid--list .room-card,
  body[data-role="checker"] .room-grid--list .room-card,
  body[data-role="cleaner"] .room-grid--list .room-card__body,
  body[data-role="checker"] .room-grid--list .room-card__body,
  body[data-role="cleaner"] .room-grid--list .room-card__actions,
  body[data-role="checker"] .room-grid--list .room-card__actions {
    min-height: 76px;
    height: 76px;
  }

  body[data-role="cleaner"] .room-grid--list .room-card__actions,
  body[data-role="checker"] .room-grid--list .room-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 0 10px 0 0;
  }
}

/* BETA-ROOM-TABS-CARD-ALIGN-10 follow-up: flatten card controls only. */
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .room-card__action,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .room-card__action:hover,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .room-card__action:active,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .room-card__action:focus-visible {
  box-shadow: none;
  text-shadow: none;
}

.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .room-card__action::before,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .room-card__action::after {
  box-shadow: none;
  filter: none;
}

/* Keep smoking information as the same plain metadata treatment as room type. */
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .room-identity > .non-smoking,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .room-identity > .smoking {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .room-grid--overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  body[data-role="cleaner"] .room-grid--list .room-card,
  body[data-role="checker"] .room-grid--list .room-card,
  body[data-role="cleaner"] .room-grid--list .room-card__body,
  body[data-role="checker"] .room-grid--list .room-card__body,
  body[data-role="cleaner"] .room-grid--list .room-card__actions,
  body[data-role="checker"] .room-grid--list .room-card__actions {
    height: 68px;
    min-height: 68px;
  }

  body[data-role="cleaner"] .room-grid--list .room-card__body,
  body[data-role="checker"] .room-grid--list .room-card__body {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  body[data-role="cleaner"] .room-grid--list .inline-editor--worker-controls,
  body[data-role="checker"] .room-grid--list .inline-editor--worker-controls {
    grid-column: 2;
    grid-row: 1;
    height: 44px;
    min-height: 44px;
  }

  body[data-role="cleaner"] .room-grid--list .inline-exchange-controls,
  body[data-role="checker"] .room-grid--list .inline-exchange-controls {
    gap: 3px;
  }

  body[data-role="cleaner"] .room-grid--list .inline-exchange-controls label,
  body[data-role="checker"] .room-grid--list .inline-exchange-controls label {
    height: 34px;
    min-height: 34px;
    padding: 0 3px;
    gap: 3px;
    font-size: 5.5px;
  }

  body[data-role="cleaner"] .room-grid--list .inline-exchange-controls input,
  body[data-role="checker"] .room-grid--list .inline-exchange-controls input {
    flex-basis: 11px;
    width: 11px;
    height: 11px;
  }

  body[data-role="cleaner"] .room-grid--list .room-card__actions,
  body[data-role="checker"] .room-grid--list .room-card__actions {
    height: 68px;
    min-height: 68px;
    padding: 0 5px 0 0;
  }
}

body[data-role="manager"] .room-grid--list .room-card {
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: center;
}

body[data-role="manager"] .room-grid--list .room-card__body {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  height: 68px;
  padding: 8px 12px;
  overflow: hidden;
}

body[data-role="manager"] .room-grid--list .room-card__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 44px;
}

body[data-role="manager"] .room-grid--list .room-number-block {
  display: grid;
  grid-template-columns: 22px auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 5px;
}

body[data-role="manager"] .room-grid--list .list-room-flags {
  display: flex;
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
}

body[data-role="manager"] .room-grid--list .inline-editor.inline-editor--manager-list {
  display: grid;
  grid-template-columns: 82px 88px minmax(120px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
}

body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-field,
body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-status-controls {
  align-self: center;
  height: 44px;
}

body[data-role="manager"] .room-grid--list .inline-editor--manager-list select,
body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-checkedout {
  height: 44px;
}

body[data-role="manager"] .room-grid--list .room-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  height: 68px;
  padding: 0 10px 0 0;
}

@media (min-width: 681px) and (max-width: 1180px) {
  body[data-role="manager"] .room-grid--list .room-card {
    grid-template-columns: minmax(0, 1fr) 220px;
    min-height: 76px;
    height: 76px;
  }

  body[data-role="manager"] .room-grid--list .room-card__body {
    grid-template-columns: 70px minmax(0, 1fr);
    min-height: 76px;
    height: 76px;
  }

  body[data-role="manager"] .room-grid--list .inline-editor.inline-editor--manager-list {
    grid-template-columns: 74px 82px minmax(92px, 1fr);
  }

  body[data-role="manager"] .room-grid--list .room-card__actions {
    height: 76px;
    min-height: 76px;
    padding: 0 10px 0 0;
  }
}

@media (max-width: 680px) {
  body[data-role="manager"] .room-grid--list .room-card {
    grid-template-columns: minmax(0, 1fr) 128px;
    height: 68px;
    min-height: 68px;
  }

  body[data-role="manager"] .room-grid--list .room-card__body {
    grid-template-columns: 50px minmax(0, 1fr);
    height: 68px;
    min-height: 68px;
    gap: 4px;
    padding: 6px 4px 6px 8px;
  }

  body[data-role="manager"] .room-grid--list .room-number-block {
    grid-template-columns: auto;
    grid-template-rows: auto auto;
  }

  body[data-role="manager"] .room-grid--list .list-room-flags {
    grid-column: 1;
    grid-row: 2;
  }

  body[data-role="manager"] .room-grid--list .list-room-flags .list-priority-status {
    height: 16px;
    padding: 0 4px;
    font-size: 6px;
  }

  body[data-role="manager"] .room-grid--list .floor-label {
    display: none;
  }

  body[data-role="manager"] .room-grid--list .inline-editor.inline-editor--manager-list {
    grid-template-columns: 50px 56px minmax(54px, 1fr);
    gap: 3px;
    height: 44px;
  }

  body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-field select {
    height: 44px;
    padding: 0 3px;
    font-size: 7px;
  }

  body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-checkedout {
    height: 34px;
    min-height: 34px;
    padding: 0 3px;
    gap: 3px;
    font-size: 6px;
  }

  body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-checkedout input {
    flex-basis: 12px;
    width: 12px;
    height: 12px;
  }

  body[data-role="manager"] .room-grid--list .room-card__actions {
    height: 68px;
    min-height: 68px;
    gap: 3px;
    padding: 0 5px 0 0;
  }
}

body[data-role="manager"] .room-grid--list .room-card,
body[data-role="checker"] .room-grid--list .room-card {
  grid-template-columns: 1fr;
  height: auto;
  min-height: 0;
}

body[data-role="manager"] .room-grid--list .room-card__body,
body[data-role="checker"] .room-grid--list .room-card__body {
  display: grid;
  grid-template-columns: 68px 432px 190px;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: start;
  gap: 6px 9px;
  height: auto;
  min-height: 0;
  padding: 8px 10px 6px;
  overflow: visible;
}

body[data-role="manager"] .room-grid--list .room-card__top,
body[data-role="checker"] .room-grid--list .room-card__top {
  grid-column: 1;
  grid-row: 1;
  min-height: 36px;
}

body[data-role="manager"] .room-grid--list .room-number-block,
body[data-role="checker"] .room-grid--list .room-number-block {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  align-items: center;
  gap: 0;
}

body[data-role="manager"] .room-grid--list .floor-label,
body[data-role="checker"] .room-grid--list .floor-label,
body[data-role="manager"] .room-grid--list .list-room-flags,
body[data-role="checker"] .room-grid--list .list-room-flags {
  display: none;
}

body[data-role="manager"] .room-grid--list .room-card h3,
body[data-role="checker"] .room-grid--list .room-card h3 {
  grid-column: 1;
  grid-row: 1;
  font-size: 18px;
}

body[data-role="manager"] .room-grid--list .inline-editor.inline-editor--manager-list,
body[data-role="checker"] .room-grid--list .inline-editor.inline-editor--manager-list {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 92px 106px 220px;
  gap: 7px;
  justify-content: start;
  width: 432px;
  max-width: 432px;
  height: auto;
  min-height: 36px;
}

body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-field,
body[data-role="checker"] .room-grid--list .inline-editor--manager-list .inline-field,
body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-status-controls,
body[data-role="checker"] .room-grid--list .inline-editor--manager-list .inline-status-controls {
  height: 36px;
}

body[data-role="manager"] .room-grid--list .inline-editor--manager-list select,
body[data-role="checker"] .room-grid--list .inline-editor--manager-list select,
body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-checkedout,
body[data-role="checker"] .room-grid--list .inline-editor--manager-list .inline-checkedout {
  height: 36px;
  min-height: 36px;
}

body[data-role="manager"] .room-grid--list .room-card__actions,
body[data-role="checker"] .room-grid--list .room-card__actions {
  grid-column: 3;
  grid-row: 1;
  height: auto;
  min-height: 36px;
  padding: 0;
  justify-self: start;
}

body[data-role="manager"] .room-grid--list .room-card__action,
body[data-role="checker"] .room-grid--list .room-card__action {
  height: 36px;
}

body[data-role="manager"] .room-grid--list .stay-status-row,
body[data-role="checker"] .room-grid--list .stay-status-row {
  display: none;
}

body[data-role="manager"] .room-grid--list .list-tag-row,
body[data-role="checker"] .room-grid--list .list-tag-row {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 2;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding-left: 68px;
  white-space: normal;
}

body[data-role="manager"] .room-grid--list .priority-status,
body[data-role="checker"] .room-grid--list .priority-status {
  flex: 0 0 auto;
  width: auto;
  min-width: 48px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 8px;
}

body[data-role="manager"] .room-grid--list .priority-status--extra-bed,
body[data-role="checker"] .room-grid--list .priority-status--extra-bed {
  min-width: 76px;
}

@media (max-width: 680px) {
  body[data-role="manager"] .room-grid--list .room-card,
  body[data-role="checker"] .room-grid--list .room-card {
    height: auto;
    min-height: 0;
  }

  body[data-role="manager"] .room-grid--list .room-card__body,
  body[data-role="checker"] .room-grid--list .room-card__body {
    grid-template-columns: 42px minmax(0, 1fr) 92px;
    gap: 4px 5px;
    height: auto;
    min-height: 0;
    padding: 6px 6px 5px;
  }

  body[data-role="manager"] .room-grid--list .room-card__top,
  body[data-role="checker"] .room-grid--list .room-card__top {
    min-height: 34px;
  }

  body[data-role="manager"] .room-grid--list .room-card h3,
  body[data-role="checker"] .room-grid--list .room-card h3 {
    font-size: 16px;
  }

  body[data-role="manager"] .room-grid--list .inline-editor.inline-editor--manager-list,
  body[data-role="checker"] .room-grid--list .inline-editor.inline-editor--manager-list {
    grid-template-columns: 45px 62px minmax(66px, 1fr);
    gap: 3px;
    justify-content: stretch;
    width: auto;
    max-width: none;
    min-height: 34px;
  }

  body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-field,
  body[data-role="checker"] .room-grid--list .inline-editor--manager-list .inline-field,
  body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-status-controls,
  body[data-role="checker"] .room-grid--list .inline-editor--manager-list .inline-status-controls,
  body[data-role="manager"] .room-grid--list .inline-editor--manager-list select,
  body[data-role="checker"] .room-grid--list .inline-editor--manager-list select,
  body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-checkedout,
  body[data-role="checker"] .room-grid--list .inline-editor--manager-list .inline-checkedout {
    height: 34px;
    min-height: 34px;
  }

  body[data-role="manager"] .room-grid--list .inline-editor--manager-list select,
  body[data-role="checker"] .room-grid--list .inline-editor--manager-list select {
    padding: 0 3px;
    font-size: 7px;
  }

  body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-checkedout,
  body[data-role="checker"] .room-grid--list .inline-editor--manager-list .inline-checkedout {
    padding: 0 3px;
    gap: 2px;
    font-size: 6px;
  }

  body[data-role="manager"] .room-grid--list .inline-editor--manager-list .inline-checkedout input,
  body[data-role="checker"] .room-grid--list .inline-editor--manager-list .inline-checkedout input {
    flex-basis: 11px;
    width: 11px;
    height: 11px;
  }

  body[data-role="manager"] .room-grid--list .room-card__actions,
  body[data-role="checker"] .room-grid--list .room-card__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    min-height: 34px;
  }

  body[data-role="manager"] .room-grid--list .room-card__action,
  body[data-role="checker"] .room-grid--list .room-card__action {
    height: 34px;
    padding: 0 4px;
    font-size: 7px;
  }

  body[data-role="manager"] .room-grid--list .list-tag-row,
  body[data-role="checker"] .room-grid--list .list-tag-row {
    padding-left: 42px;
  }

  body[data-role="manager"] .room-grid--list .priority-status,
  body[data-role="checker"] .room-grid--list .priority-status {
    height: 18px;
    min-width: 44px;
    padding: 0 5px;
    font-size: 7px;
  }

  body[data-role="manager"] .room-grid--list .priority-status--extra-bed,
  body[data-role="checker"] .room-grid--list .priority-status--extra-bed {
    min-width: 70px;
  }
}

.room-grid--list .room-list-card {
  display: block;
  height: auto;
  min-height: 0;
  padding: 10px 16px 8px;
  overflow: visible;
}

.room-grid--list .room-list-main {
  display: grid;
  grid-template-columns: 34px 78px 150px 124px minmax(280px, 1fr) 142px 112px;
  align-items: center;
  justify-content: start;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.room-grid--list .room-list-floor {
  grid-column: 1;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.room-grid--list .room-list-number {
  grid-column: 2;
  width: 78px;
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 36px;
}

.room-grid--list .room-list-control {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  height: 36px;
}

.room-grid--list .room-list-control > span {
  display: none;
}

.room-grid--list .room-list-control select,
.room-grid--list .room-list-checkout,
.room-grid--list .room-list-dd .inline-priority {
  height: 36px;
  min-height: 36px;
}

.room-grid--list .room-list-control select {
  width: 100%;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid #c8d8df;
  border-radius: 8px;
  background: #fff;
  font-size: 10px;
  font-weight: 800;
}

.room-grid--list .room-list-stay .stay-select--out {
  color: #8e322b;
  border-color: transparent;
  background: #f4c4bf;
}

.room-grid--list .room-list-stay .stay-select--stay {
  color: #614600;
  border-color: transparent;
  background: #f3c94f;
}

.room-grid--list .room-list-stay .stay-select--eco {
  color: #24604f;
  border-color: transparent;
  background: #dceee7;
}

.room-grid--list .room-list-stay .stay-select--broken {
  color: #fff;
  border-color: transparent;
  background: #9b4a16;
}

.room-grid--list .room-list-stay .stay-select--vacant {
  color: #52616d;
  border-color: transparent;
  background: #e3e8ed;
}

.room-grid--list .room-list-stay {
  grid-column: 3;
  width: 150px;
}

.room-grid--list .room-list-assignee {
  grid-column: 5;
  width: 100%;
  max-width: none;
}

.room-grid--list .room-list-checkout,
.room-grid--list .room-list-dd .inline-priority {
  grid-column: 4;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 124px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #8e322b;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.room-grid--list .room-list-checkout input,
.room-grid--list .room-list-dd input {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0;
}

.room-grid--list .room-list-checkout--empty {
  visibility: hidden;
}

.room-grid--list .room-list-card .room-card__action {
  grid-column: 6;
  width: 142px;
  min-width: 0;
  max-width: 142px;
  height: 36px;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 8px;
  font-size: 9px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-grid--list .room-list-card .checkout-wait-action,
.room-grid--list .room-list-card .checkout-wait-action:hover {
  color: #1f5d8f !important;
  border: 1px solid #a8d4ef !important;
  background: #e7f5fc !important;
  filter: none !important;
  box-shadow: none !important;
}

.room-grid--list .room-list-card .secondary-action,
.room-grid--list .room-list-card .secondary-action:hover {
  color: #1f5d8f !important;
  border: 1px solid #2f6fb0 !important;
  background: #fff !important;
  filter: none !important;
  box-shadow: none !important;
}

.room-grid--list .room-list-card .secondary-action {
  grid-column: 7;
  width: 112px;
  min-width: 0;
  max-width: 112px;
}

.room-grid--list .room-list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
  padding-left: 0;
  justify-content: flex-start;
}

.room-grid--list .room-list-tags--empty {
  display: none;
}

.room-grid--list .room-list-tags .priority-status {
  flex: 0 0 auto;
  width: auto;
  min-width: 48px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 8px;
}

.room-grid--list .room-list-tags .priority-status--extra-bed {
  min-width: 76px;
}

@media (max-width: 680px) {
  .room-grid--list .room-list-card {
    padding: 6px;
  }

  .room-grid--list .room-list-main {
    display: grid;
    grid-template-columns: 36px 70px 54px minmax(70px, 1fr) 48px 38px;
    justify-content: stretch;
    gap: 2px;
  }

  .room-grid--list .room-list-floor {
    display: none;
  }

  .room-grid--list .room-list-number {
    grid-column: 1;
    width: 36px;
    font-size: 16px;
    line-height: 34px;
  }

  .room-grid--list .room-list-control,
  .room-grid--list .room-list-control select,
  .room-grid--list .room-list-checkout,
  .room-grid--list .room-list-dd .inline-priority,
  .room-grid--list .room-list-card .room-card__action {
    height: 34px;
    min-height: 34px;
  }

  .room-grid--list .room-list-control select {
    padding: 0 3px;
    font-size: 7px;
  }

  .room-grid--list .room-list-stay {
    grid-column: 2;
    width: 70px;
    min-width: 0;
  }

  .room-grid--list .room-list-assignee {
    grid-column: 4;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .room-grid--list .room-list-checkout,
  .room-grid--list .room-list-dd .inline-priority {
    grid-column: 3;
    min-width: 0;
    width: 54px;
    padding: 0;
    gap: 2px;
    font-size: 5.5px;
  }

  .room-grid--list .room-list-checkout input,
  .room-grid--list .room-list-dd input {
    flex-basis: 11px;
    width: 11px;
    height: 11px;
  }

  .room-grid--list .room-list-card .room-card__action {
    grid-column: 5;
    width: 48px;
    min-width: 0;
    max-width: none;
    padding: 0 3px;
    font-size: 5.5px;
  }

  .room-grid--list .room-list-card .secondary-action {
    grid-column: 6;
    width: 38px;
    min-width: 0;
    max-width: none;
  }

  .room-grid--list .room-list-tags {
    gap: 4px;
    margin-top: 5px;
    padding-left: 0;
  }

  .room-grid--list .room-list-tags .priority-status {
    height: 18px;
    min-width: 44px;
    padding: 0 5px;
    font-size: 7px;
  }

  .room-grid--list .room-list-tags .priority-status--extra-bed {
    min-width: 70px;
  }
}

@media (min-width: 681px) {
  .room-grid--list .room-list-floor {
    display: none;
  }

  .room-grid--list .room-list-main {
    grid-template-columns: 78px 150px 124px minmax(280px, 1fr) 142px 112px;
  }

  .room-grid--list .room-list-number {
    grid-column: 1;
  }

  .room-grid--list .room-list-stay {
    grid-column: 2;
  }

  .room-grid--list .room-list-checkout,
  .room-grid--list .room-list-dd .inline-priority {
    grid-column: 3;
  }

  .room-grid--list .room-list-assignee {
    grid-column: 4;
  }

  .room-grid--list .room-list-card .room-card__action {
    grid-column: 5;
  }

  .room-grid--list .room-list-card .secondary-action {
    grid-column: 6;
  }
}
body.auth-loading .app-shell { visibility: hidden; }
.authenticated-user { display: flex; min-height: 52px; padding: 7px 14px; flex-direction: column; justify-content: center; border-radius: 10px; background: #fff; }
.authenticated-user span { color: var(--muted); font-size: 8px; }
.authenticated-user strong { font-size: 11px; }
.logout-button { min-height: 52px; padding: 0 16px; border: 1px solid #b8ccdd; border-radius: 10px; color: #174a7e; background: #fff; font-size: 10px; font-weight: 800; }
.logout-button:hover { background: #edf5fc; }
@media (max-width: 680px) {
  .authenticated-user { display: none; }
  .logout-button { min-height: 44px; padding: 0 10px; font-size: 9px; }
}

/* TraceBox beta brand refresh. UI-only; gated by hostname in index.html. */
.beta-environment-badge,
.topbar-official-logo {
  display: none;
}

.is-beta-ui {
  --tb-navy: #0A2A52;
  --tb-navy-dark: #061E3D;
  --tb-teal: #009B94;
  --tb-teal-dark: #007F7A;
  --tb-teal-soft: #E7F7F5;
  --tb-bg: #F5F8FA;
  --tb-card: #FFFFFF;
  --tb-border: #DCE7EC;
  --tb-text: #102A43;
  --tb-muted: #6B7C85;
  --tb-warning: #E56B2F;
  --tb-blue: #1E63B6;
  --tb-purple: #7A3FC2;
  --tb-success: #009B94;
  --ink: var(--tb-text);
  --muted: var(--tb-muted);
  --line: var(--tb-border);
  --canvas: var(--tb-bg);
  --surface: var(--tb-card);
  --green: var(--tb-navy);
  --green-2: var(--tb-teal);
  --mint: var(--tb-teal-soft);
  --action-color: var(--tb-teal);
  --blue: var(--tb-blue);
  --purple: var(--tb-purple);
  --red: var(--tb-warning);
  --shadow: 0 18px 42px rgba(10, 42, 82, .09);
}

.is-beta-ui body {
  color: var(--tb-text);
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 155, 148, .08), transparent 28%),
    linear-gradient(180deg, #f8fbfc 0%, var(--tb-bg) 100%);
}

.is-beta-ui .app-shell {
  background: transparent;
}

.is-beta-ui .sidebar {
  color: #d9edf0;
  background:
    radial-gradient(circle at 0 0, rgba(0, 155, 148, .22), transparent 34%),
    linear-gradient(180deg, var(--tb-navy) 0%, var(--tb-navy-dark) 100%);
  box-shadow: 10px 0 34px rgba(6, 30, 61, .12);
}

.is-beta-ui .hotel-brand--trace {
  position: relative;
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 12px;
  border-color: rgba(231, 247, 245, .5);
  border-radius: 18px;
  background: #fff;
}

.is-beta-ui .hotel-brand--trace .brand-logo--full {
  width: 184px;
}

.is-beta-ui .beta-environment-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(0, 155, 148, .24);
  border-radius: 999px;
  color: var(--tb-teal-dark);
  background: var(--tb-teal-soft);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.is-beta-ui .hotel-info {
  border-color: rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
}

.is-beta-ui .hotel-info span,
.is-beta-ui .profile span,
.is-beta-ui .sidebar-note span {
  color: #a6ccd0;
}

.is-beta-ui .side-nav {
  gap: 8px;
}

.is-beta-ui .side-nav__item {
  border: 1px solid transparent;
  border-radius: 14px;
  color: #c6dce1;
  font-weight: 800;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.is-beta-ui .side-nav__item:hover,
.is-beta-ui .side-nav__item.active {
  color: #fff;
  border-color: rgba(255, 255, 255, .12);
  background: linear-gradient(135deg, rgba(0, 155, 148, .92), rgba(0, 127, 122, .86));
  box-shadow: 0 12px 26px rgba(0, 155, 148, .22);
}

.is-beta-ui .nav-icon {
  color: inherit;
}

.is-beta-ui .sidebar-note {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
}

.is-beta-ui .avatar {
  color: #fff;
  background: var(--tb-teal);
}

.is-beta-ui .topbar {
  border-bottom-color: var(--tb-border);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(10, 42, 82, .05);
}

.is-beta-ui .topbar-brand--hotel {
  gap: 9px;
  color: var(--tb-navy);
}

/* The hotel title contains text/select only; keep a stale nested brand mark
   from flashing before renderHeader() normalizes the current shell. */
.is-beta-ui .topbar-brand--hotel > img,
.is-beta-ui .topbar-brand--hotel > svg,
.is-beta-ui .topbar-brand--hotel > .brand-logo,
.is-beta-ui .topbar-brand--hotel > .topbar-brand__logo {
  display: none !important;
}

.is-beta-ui .topbar-official-logo {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: contain;
}

.is-beta-ui .beta-environment-badge--topbar {
  min-height: 20px;
  padding-inline: 7px;
  font-size: 7px;
}

.is-beta-ui .business-date-switcher,
.is-beta-ui .view-switcher,
.is-beta-ui .floor-filter summary,
.is-beta-ui .search-box,
.is-beta-ui .photo-type-switcher,
.is-beta-ui .month-navigation > button,
.is-beta-ui .performance-month-switcher input,
.is-beta-ui .special-month-switcher input {
  border-color: var(--tb-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(10, 42, 82, .04);
}

.is-beta-ui .content {
  max-width: 1540px;
}

.is-beta-ui .daily-bulletin,
.is-beta-ui .staff-admin-panel,
.is-beta-ui .performance-detail,
.is-beta-ui .monthly-report-detail,
.is-beta-ui .daily-report-list-summary,
.is-beta-ui .monthly-report-status {
  border-color: rgba(0, 155, 148, .22);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(10, 42, 82, .06);
}

.is-beta-ui .daily-bulletin {
  border-left: 5px solid var(--tb-teal);
}

.is-beta-ui .daily-bulletin__head span,
.is-beta-ui .photo-list-head span,
.is-beta-ui .special-cleaning-kicker,
.is-beta-ui .performance-head > div:first-child > span,
.is-beta-ui .staff-admin-head > div:first-child > span,
.is-beta-ui .daily-report-list-head > div:first-child > span,
.is-beta-ui .monthly-report-head > div:first-child > span,
.is-beta-ui .modal-kicker {
  color: var(--tb-teal);
}

.is-beta-ui .summary-grid {
  gap: 14px;
}

.is-beta-ui .summary-card {
  min-height: 112px;
  border-color: rgba(10, 42, 82, .08);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(10, 42, 82, .07);
}

.is-beta-ui .summary-card strong {
  color: var(--tb-text);
  font-size: 29px;
}

.is-beta-ui .summary-dot {
  width: 11px;
  height: 52px;
  background: var(--tb-teal);
}

.is-beta-ui .summary-card--red .summary-dot {
  background: var(--tb-warning);
}

.is-beta-ui .summary-card--blue .summary-dot,
.is-beta-ui .summary-card--indigo .summary-dot {
  background: var(--tb-blue);
}

.is-beta-ui .summary-card--purple .summary-dot {
  background: var(--tb-purple);
}

.is-beta-ui .section-heading h2,
.is-beta-ui .photo-list-head h2,
.is-beta-ui .special-cleaning-head h2,
.is-beta-ui .daily-report-list-head h2,
.is-beta-ui .monthly-report-head h2,
.is-beta-ui .staff-admin-head h2,
.is-beta-ui .performance-head h2 {
  color: var(--tb-text);
  letter-spacing: -.02em;
}

.is-beta-ui .section-heading h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.is-beta-ui .section-heading h2::before {
  display: inline-block;
  width: 5px;
  height: 24px;
  border-radius: 999px;
  background: var(--tb-teal);
  content: "";
}

.is-beta-ui .status-tabs button {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--tb-muted);
  font-weight: 800;
}

.is-beta-ui .status-tabs button.active {
  color: var(--tb-teal-dark);
  border-color: rgba(0, 155, 148, .2);
  background: var(--tb-teal-soft);
}

.is-beta-ui .view-switcher button.active {
  color: var(--tb-teal-dark);
  background: var(--tb-teal-soft);
}

.is-beta-ui .room-card,
.is-beta-ui .overview-room,
.is-beta-ui .photo-floor,
.is-beta-ui .special-cleaning-summary div,
.is-beta-ui .daily-report-list-row,
.is-beta-ui .monthly-report-card,
.is-beta-ui .staff-admin-row,
.is-beta-ui .admin-management-row,
.is-beta-ui .performance-person {
  border-color: rgba(10, 42, 82, .08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(10, 42, 82, .06);
}

.is-beta-ui .room-card:hover,
.is-beta-ui .overview-room:hover,
.is-beta-ui .daily-report-list-row[role="button"]:hover,
.is-beta-ui .monthly-report-card:hover,
.is-beta-ui .monthly-report-card.active {
  border-color: rgba(0, 155, 148, .26);
  box-shadow: 0 18px 38px rgba(10, 42, 82, .1);
}

.is-beta-ui .status-badge {
  padding: 5px 9px;
  border-radius: 999px;
  font-weight: 900;
}

.is-beta-ui .status-amber {
  color: #9b6116;
  background: #fff4e5;
}

.is-beta-ui .status-blue,
.is-beta-ui .status-indigo {
  color: var(--tb-blue);
  background: #eaf2fb;
}

.is-beta-ui .status-purple {
  color: var(--tb-purple);
  background: #f2ecfa;
}

.is-beta-ui .status-green,
.is-beta-ui .status-dddone {
  color: var(--tb-teal-dark);
  background: var(--tb-teal-soft);
}

.is-beta-ui .status-broken {
  color: #9a511f;
  background: #fff0e5;
}

.is-beta-ui .status-vacant {
  color: #60717a;
  background: #eef3f5;
}

.is-beta-ui .stay-status {
  border-radius: 12px;
}

.is-beta-ui .room-card__action,
.is-beta-ui .primary-button {
  border-radius: 12px;
  background: linear-gradient(135deg, var(--tb-teal), var(--tb-teal-dark));
  box-shadow: 0 10px 22px rgba(0, 155, 148, .18);
}

.is-beta-ui .secondary-button,
.is-beta-ui .secondary-action,
.is-beta-ui .room-card__action.photo-completed-static-action {
  color: var(--tb-teal-dark);
  border-color: rgba(0, 155, 148, .32);
  background: #fff;
}

.is-beta-ui .room-card__action.cleaning-completed-static-action {
  color: #fff;
  border-color: var(--tb-teal);
  background: linear-gradient(135deg, var(--tb-teal), var(--tb-teal-dark));
}

.is-beta-ui .check-action,
.is-beta-ui .primary-button.check-action,
.is-beta-ui .room-card__action.check-action {
  background: linear-gradient(135deg, var(--tb-purple), #6131a8);
}

.is-beta-ui .daily-notice-read-button {
  border-color: rgba(0, 155, 148, .2);
  border-radius: 12px;
}

.is-beta-ui .daily-notice-read-button--checked {
  color: var(--tb-teal-dark);
  background: var(--tb-teal-soft);
}

.is-beta-ui .modal {
  border: 1px solid rgba(10, 42, 82, .08);
  border-radius: 22px;
  box-shadow: 0 28px 90px rgba(6, 30, 61, .22);
}

@media (max-width: 680px) {
  .is-beta-ui .topbar {
    min-height: 76px;
    color: #fff;
    border-bottom: 0;
    background:
      radial-gradient(circle at 92% 0%, rgba(0, 155, 148, .32), transparent 36%),
      linear-gradient(135deg, var(--tb-navy), var(--tb-navy-dark));
  }

  .is-beta-ui .menu-button {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .1);
  }

  .is-beta-ui .menu-button span {
    background: #fff;
  }

  .is-beta-ui .topbar-brand--hotel {
    color: #fff;
  }

  .is-beta-ui .topbar-official-logo {
    display: block;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, .18);
    border-radius: 11px;
    background: #fff;
  }

  .is-beta-ui .beta-environment-badge--topbar {
    color: #d9fffb;
    border-color: rgba(255, 255, 255, .22);
    background: rgba(0, 155, 148, .28);
  }

  .is-beta-ui .business-date-switcher {
    color: #fff;
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .1);
    box-shadow: none;
  }

  .is-beta-ui .business-date-label,
  .is-beta-ui .business-date-icon,
  .is-beta-ui .business-date-switcher input {
    color: #fff;
  }

  .is-beta-ui .content {
    padding-top: 18px;
  }

  .is-beta-ui .summary-card {
    border-radius: 17px;
  }

  .is-beta-ui .room-card {
    border-radius: 18px;
  }

  .is-beta-ui .modal {
    border-radius: 22px 22px 0 0;
  }
}

/* BETA-ROOM-CONTROLS-PALETTE-09: room controls retain their behavior; only their palette changes. */
.is-beta-ui .status-tabs button[data-status-filter="all"] {
  color: #008E9B;
  border-color: #BEE9E4;
  background: #E6F7F5;
}

.is-beta-ui .status-tabs button[data-status-filter="all"].active,
.is-beta-ui .status-tabs button[data-status-filter="checked"].active {
  color: #fff;
  border-color: #009B94;
  background: #009B94;
}

.is-beta-ui .status-tabs button[data-status-filter="unassigned"].active,
.is-beta-ui .status-tabs button[data-status-filter="notCheckedOut"].active {
  color: #fff;
  border-color: #F06A38;
  background: #F06A38;
}

.is-beta-ui .status-tabs button[data-status-filter="waiting"].active {
  color: #fff;
  border-color: #A66A00;
  background: #A66A00;
}

.is-beta-ui .status-tabs button[data-status-filter="cleaning"].active {
  color: #fff;
  border-color: #1E63B6;
  background: #1E63B6;
}

.is-beta-ui .status-tabs button[data-status-filter="checkWork"].active {
  color: #fff;
  border-color: #7A3FC2;
  background: #7A3FC2;
}

/* Card view only: keep the stay field a standard form control rather than a status badge. */
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-field .stay-select {
  color: #081B42;
  border-color: #DCE7EC;
  background: #fff;
  font-size: 8px;
  font-weight: 600;
}

.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-field .stay-select:disabled {
  color: #8B9691;
  border-color: #DCE7EC;
  background: #F1F3F2;
}

/* Priority and exchange controls remain the same checkboxes without card-like shells. */
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-priority--urgent,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-priority--dd,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-exchange-controls label {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #081B42;
  background: transparent;
  box-shadow: none;
}

.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-priority--urgent input {
  accent-color: #F06A38;
}

/* BETA-ROOM-TABS-CARD-ALIGN-10: preserve the existing four controls in aligned, transparent grid cells. */
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-status-controls,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-exchange-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
}

.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-checkedout,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-priority--urgent,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-priority--dd,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-exchange-controls label {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  column-gap: 7px;
  min-width: 0;
  min-height: 24px;
  height: 24px;
  margin: 0;
}

.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-checkedout {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* BETA-ROOM-ACTION-LABEL-13: stay-room DD uses the same bare left-grid cell as checkout and exchanges. */
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-priority--dd {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #081B42;
  background: transparent;
  box-shadow: none;
}

.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-checkedout input,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-priority--urgent input,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-priority--dd input,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-exchange-controls input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-checkedout span,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-priority--urgent span,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-priority--dd span,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .inline-exchange-controls span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* BETA-UI-SHELL-KPI-01: shell, work date, shared notices, and KPI only. */
.is-beta-ui {
  --tb-shell-navy-950: #001234;
  --tb-shell-navy-900: #001234;
  --tb-shell-teal: #009B94;
  --tb-shell-teal-dark: #009B94;
  --tb-shell-border: #DCE7EC;
}

.is-beta-ui .sidebar {
  background:
    radial-gradient(circle at 78% 2%, rgba(0, 155, 148, .16), transparent 30%),
    linear-gradient(180deg, var(--tb-shell-navy-950) 0%, var(--tb-shell-navy-900) 100%);
  box-shadow: 10px 0 28px rgba(1, 23, 51, .16);
}

.is-beta-ui .hotel-brand--trace {
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 12px 24px rgba(1, 23, 51, .2);
}

.is-beta-ui .side-nav__item:hover,
.is-beta-ui .side-nav__item.active {
  border-color: rgba(255, 255, 255, .16);
  background: linear-gradient(135deg, var(--tb-shell-teal), var(--tb-shell-teal-dark));
  box-shadow: 0 8px 18px rgba(0, 155, 148, .18);
}

.is-beta-ui .topbar {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-bottom: 0;
  background: var(--tb-shell-navy-950);
  box-shadow: 0 8px 24px rgba(1, 23, 51, .16);
}

.is-beta-ui .topbar::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(38%, 540px);
  content: "";
  pointer-events: none;
  background: linear-gradient(
    120deg,
    transparent 0 34%,
    rgba(0, 155, 148, .18) 34% 47%,
    transparent 47% 61%,
    rgba(0, 155, 148, .72) 61% 77%,
    transparent 77% 100%
  );
}

.is-beta-ui .topbar > * {
  position: relative;
  z-index: 1;
}

.is-beta-ui .topbar-brand--hotel,
.is-beta-ui .topbar h1,
.is-beta-ui .authenticated-user {
  color: #fff;
}

.is-beta-ui .business-date-switcher {
  border-color: rgba(255, 255, 255, .16);
  background: #fff;
  box-shadow: 0 7px 18px rgba(1, 23, 51, .16);
}

.is-beta-ui .business-date-label {
  color: #597080;
}

.is-beta-ui .business-date-icon,
.is-beta-ui .business-date-switcher input {
  color: var(--tb-shell-navy-900);
}

.is-beta-ui .daily-bulletin {
  border: 1px solid var(--tb-shell-border);
  border-top: 4px solid var(--tb-shell-teal);
  border-left-width: 1px;
  box-shadow: 0 10px 26px rgba(1, 23, 51, .07);
}

.is-beta-ui .daily-bulletin__head strong,
.is-beta-ui .daily-bulletin__head span {
  color: var(--tb-shell-navy-900);
}

.is-beta-ui .summary-card {
  min-height: 108px;
  padding: 16px;
  border-color: var(--tb-shell-border);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(1, 23, 51, .07);
}

.is-beta-ui .summary-card > div > span {
  color: #526878;
}

.is-beta-ui .summary-card--red .summary-dot {
  background: #F06A38;
}

.is-beta-ui .summary-card strong {
  color: var(--tb-shell-navy-900);
}

.is-beta-ui .summary-card small {
  color: #758895;
}

/* BETA-UI-SHELL-MOCK-ALIGN-04: approved shell layout only. */
.is-beta-ui {
  --tb-shell-navy-950: #001234;
  --tb-shell-navy-900: #002C56;
  --tb-shell-teal: #009B94;
  --tb-shell-teal-dark: #008E9B;
  --tb-shell-border: #DCE7EC;
}

.is-beta-ui .sidebar {
  gap: 0;
  padding-top: 0;
  color: #fff;
  background:
    radial-gradient(circle at 74% 0%, rgba(0, 155, 148, .16), transparent 28%),
    linear-gradient(180deg, var(--tb-shell-navy-950), var(--tb-shell-navy-900));
}

.is-beta-ui .hotel-brand--trace {
  display: flex;
  align-items: center;
  min-height: 88px;
  margin: 0 -19px;
  padding: 0 20px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.is-beta-ui .hotel-brand--trace .brand-logo--full {
  display: block;
  width: 176px;
  max-width: none;
  max-height: 48px;
  object-fit: contain;
}

.is-beta-ui .hotel-brand--trace .beta-environment-badge {
  display: none;
}

.is-beta-ui .hotel-info {
  margin-top: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.is-beta-ui .side-nav__item:hover,
.is-beta-ui .side-nav__item.active {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(0, 155, 148, .96), rgba(0, 142, 155, .92));
  box-shadow: none;
}

.is-beta-ui .topbar {
  min-height: 88px;
  padding: 18px 32px;
  background: var(--tb-shell-navy-950);
}

.is-beta-ui .topbar::after {
  width: min(44%, 620px);
  background: linear-gradient(
    122deg,
    transparent 0 34%,
    rgba(0, 155, 148, .18) 34% 47%,
    transparent 47% 61%,
    rgba(0, 155, 148, .72) 61% 76%,
    transparent 76% 100%
  );
}

.is-beta-ui .topbar-brand--hotel {
  min-width: 0;
  margin-right: auto;
  color: #fff;
  font-size: 21px;
}

.is-beta-ui .topbar-official-logo {
  border-color: rgba(255, 255, 255, .18);
  background: #fff;
}

.is-beta-ui .daily-top-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  margin-bottom: 16px;
}

.is-beta-ui #daily-top-row .business-date-switcher {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 144px;
  height: auto;
  padding: 16px;
  border: 1px solid var(--tb-shell-border);
  border-radius: 16px;
  color: var(--tb-shell-navy-900);
  background: #fff;
  box-shadow: 0 10px 26px rgba(1, 23, 51, .07);
  order: 0;
}

.is-beta-ui #daily-top-row .business-date-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(0, 155, 148, .34);
  border-radius: 12px;
  color: var(--tb-shell-teal-dark);
  background: #fff;
  font-size: 19px;
}

.is-beta-ui #daily-top-row .business-date-label {
  color: #597080;
  font-size: 12px;
  font-weight: 800;
}

.is-beta-ui #daily-top-row .business-date-switcher input {
  width: 132px;
  min-height: 30px;
  color: var(--tb-shell-navy-900);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.is-beta-ui #daily-top-row .role-banner {
  min-width: 0;
  margin: 0;
  order: 1;
}

.is-beta-ui #daily-top-row .daily-bulletin {
  height: 100%;
  margin: 0;
  border-top-width: 4px;
}

.is-beta-ui .sidebar-staff-progress {
  display: flex;
  min-height: 0;
  flex: 0 1 188px;
  flex-direction: column;
  margin: 16px 0 0;
  padding: 14px 12px 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.is-beta-ui .sidebar-staff-progress h2 {
  margin: 0;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.is-beta-ui .sidebar-staff-progress__list {
  display: grid;
  gap: 6px;
  min-height: 0;
  margin-top: 9px;
  overflow-y: auto;
}

.is-beta-ui .sidebar-staff-progress__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: #fff;
  font-size: 11px;
  line-height: 1.45;
}

.is-beta-ui .sidebar-staff-progress__row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-beta-ui .sidebar-staff-progress__row strong {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .68);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .is-beta-ui .topbar {
    min-height: 76px;
    padding: 0 13px;
  }

  .is-beta-ui .topbar-brand--hotel {
    font-size: 14px;
  }

  .is-beta-ui .daily-top-row {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }

  .is-beta-ui #daily-top-row .business-date-switcher {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: start;
    min-height: 88px;
    padding: 14px;
  }

  .is-beta-ui #daily-top-row .business-date-icon {
    grid-row: 1 / span 2;
  }

  .is-beta-ui #daily-top-row .business-date-label {
    align-self: end;
  }

  .is-beta-ui #daily-top-row .business-date-switcher input {
    width: 100%;
    min-height: 24px;
    text-align: left;
  }

  .is-beta-ui .sidebar-staff-progress {
    display: none;
  }
}

/* BETA-STATUS-PALETTE-05: existing room state classes only. */
.is-beta-ui .summary-card--green .summary-dot {
  background: #009B94;
}

.is-beta-ui .summary-card--red .summary-dot {
  background: #F06A38;
}

.is-beta-ui .summary-card--amber .summary-dot {
  background: #A66A00;
}

.is-beta-ui .summary-card--blue .summary-dot {
  background: #1E63B6;
}

.is-beta-ui .summary-card--purple .summary-dot,
.is-beta-ui .summary-card--indigo .summary-dot {
  background: #7A3FC2;
}

/* State tabs retain their existing filters; only their palette changes. */
.is-beta-ui .status-tabs button[data-status-filter="unassigned"],
.is-beta-ui .status-tabs button[data-status-filter="notCheckedOut"] {
  color: #E85D1F;
  border-color: #F06A38;
  background: #FFF0E8;
}

.is-beta-ui .status-tabs button[data-status-filter="waiting"] {
  color: #A66A00;
  border-color: #E5BF5F;
  background: #FFF7DE;
}

.is-beta-ui .status-tabs button[data-status-filter="cleaning"] {
  color: #1E63B6;
  border-color: #BFD5F3;
  background: #EAF3FF;
}

.is-beta-ui .status-tabs button[data-status-filter="checkWork"] {
  color: #7A3FC2;
  border-color: #D8C4F0;
  background: #F2EAFE;
}

.is-beta-ui .status-tabs button[data-status-filter="checked"] {
  color: #009B94;
  border-color: #BEE9E4;
  background: #E6F7F5;
}

/* Cleaning state badges use the canonical statusMeta class names. */
.is-beta-ui .status-amber {
  color: #A66A00;
  background: #FFF7DE;
}

.is-beta-ui .status-blue {
  color: #1E63B6;
  background: #EAF3FF;
}

.is-beta-ui .status-purple,
.is-beta-ui .status-indigo {
  color: #7A3FC2;
  background: #F2EAFE;
}

.is-beta-ui .status-green,
.is-beta-ui .status-dddone {
  color: #009B94;
  background: #E6F7F5;
}

/* Special cleaning statuses remain neutral; checked stays teal above. */
.is-beta-ui .status-broken,
.is-beta-ui .status-vacant,
.is-beta-ui .room-card[data-status="eco"] .status-badge {
  color: #4E5C66;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px #D6DEE3;
}

/* Standard card and list stay displays. */
.is-beta-ui .stay-status--out,
.is-beta-ui .stay-status-list--out,
.is-beta-ui .inline-field .stay-select--out,
.is-beta-ui .room-grid--list .room-list-stay .stay-select--out,
.is-beta-ui .overview-cleaner .stay-select--out {
  color: #F06A38;
  border-color: #F06A38;
  background: #FFF0E8;
}

.is-beta-ui .stay-status--stay,
.is-beta-ui .stay-status-list--stay,
.is-beta-ui .inline-field .stay-select--stay,
.is-beta-ui .room-grid--list .room-list-stay .stay-select--stay,
.is-beta-ui .overview-cleaner .stay-select--stay {
  color: #FFFFFF;
  border-color: #D49A22;
  background: #D49A22;
}

.is-beta-ui .stay-status--eco,
.is-beta-ui .stay-status--broken,
.is-beta-ui .stay-status--vacant,
.is-beta-ui .stay-status-list--eco,
.is-beta-ui .stay-status-list--broken,
.is-beta-ui .stay-status-list--vacant,
.is-beta-ui .inline-field .stay-select--eco,
.is-beta-ui .inline-field .stay-select--broken,
.is-beta-ui .inline-field .stay-select--vacant,
.is-beta-ui .room-grid--list .room-list-stay .stay-select--eco,
.is-beta-ui .room-grid--list .room-list-stay .stay-select--broken,
.is-beta-ui .room-grid--list .room-list-stay .stay-select--vacant,
.is-beta-ui .overview-cleaner .stay-select--eco,
.is-beta-ui .overview-cleaner .stay-select--broken,
.is-beta-ui .overview-cleaner .stay-select--vacant {
  color: #4E5C66;
  border-color: #D6DEE3;
  background: #FFFFFF;
}

/* Cards and lists use the existing checkedOut checkbox, never label text. */
.is-beta-ui .room-card:has(.inline-checkedout input:checked) .stay-status--out,
.is-beta-ui .room-card:has(.inline-checkedout input:checked) .stay-status-list--out,
.is-beta-ui .room-list-card:has(.room-list-checkout input:checked) .stay-select--out {
  color: #FFFFFF;
  border-color: #F06A38;
  background: #F06A38;
}

/* Overview already provides data-stay=outdone for the same checkedOut state. */
.is-beta-ui .overview-room[data-stay="out"] {
  border-color: #F06A38;
  background: #FFF0E8;
}

.is-beta-ui .overview-room[data-stay="out"] .overview-stay,
.is-beta-ui .overview-room[data-stay="out"] strong {
  color: #F06A38;
  background: #FFF0E8;
}

.is-beta-ui .overview-room[data-stay="outdone"] {
  border-color: #F06A38;
  background: #F06A38;
}

.is-beta-ui .overview-room[data-stay="outdone"] .overview-stay,
.is-beta-ui .overview-room[data-stay="outdone"] strong,
.is-beta-ui .overview-room[data-stay="outdone"] .overview-progress {
  color: #FFFFFF;
  background: #F06A38;
}

.is-beta-ui .overview-room[data-stay="stay"] {
  border-color: #D49A22;
  background: #D49A22;
}

.is-beta-ui .overview-room[data-stay="stay"] .overview-stay,
.is-beta-ui .overview-room[data-stay="stay"] strong,
.is-beta-ui .overview-room[data-stay="stay"] .overview-progress {
  color: #FFFFFF;
  background: #D49A22;
}

.is-beta-ui .overview-room[data-stay="eco"],
.is-beta-ui .overview-room[data-stay="broken"],
.is-beta-ui .overview-room[data-stay="vacant"] {
  border-color: #D6DEE3;
  background: #FFFFFF;
}

.is-beta-ui .overview-room[data-stay="eco"] .overview-stay,
.is-beta-ui .overview-room[data-stay="eco"] strong,
.is-beta-ui .overview-room[data-stay="eco"] .overview-progress,
.is-beta-ui .overview-room[data-stay="broken"] .overview-stay,
.is-beta-ui .overview-room[data-stay="broken"] strong,
.is-beta-ui .overview-room[data-stay="broken"] .overview-progress,
.is-beta-ui .overview-room[data-stay="vacant"] .overview-stay,
.is-beta-ui .overview-room[data-stay="vacant"] strong,
.is-beta-ui .overview-room[data-stay="vacant"] .overview-progress {
  color: #4E5C66;
  background: #FFFFFF;
}

/* Final workflow states must win over the stay palette so unfinished rooms remain visible. */
.is-beta-ui .overview-room[data-white="true"] {
  border-color: #D6DEE3;
  background: #FFFFFF;
}

.is-beta-ui .overview-room[data-white="true"] .overview-stay,
.is-beta-ui .overview-room[data-white="true"] strong,
.is-beta-ui .overview-room[data-white="true"] .overview-progress {
  color: #4E5C66;
  background: #FFFFFF;
}

.is-beta-ui .overview-room[data-white="true"] strong {
  color: #1F3446;
}

/* BETA-LOGO-SHELL-ICONS-06: shell, date glyph, and KPI visuals only. */
.is-beta-ui .sidebar {
  background:
    radial-gradient(circle at 74% 0%, rgba(0, 155, 148, .16), transparent 28%),
    linear-gradient(180deg, #001234 0%, #002C56 100%);
  box-shadow: none;
}

.is-beta-ui .hotel-brand--trace {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.is-beta-ui .topbar {
  border: 0;
  background: #001234;
  box-shadow: none;
}

.is-beta-ui .topbar::after {
  background: linear-gradient(
    122deg,
    transparent 0 34%,
    rgba(0, 155, 148, .18) 34% 47%,
    transparent 47% 61%,
    rgba(0, 155, 148, .72) 61% 76%,
    transparent 76% 100%
  );
}

.is-beta-ui .hotel-brand--trace .brand-logo--full {
  width: 176px;
  max-height: 48px;
  object-fit: contain;
}

.is-beta-ui #daily-top-row .business-date-icon {
  display: grid;
  grid-template-rows: 14px minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
  width: 42px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 155, 148, .48);
  border-radius: 12px;
  color: #001234;
  background: #fff;
  font-size: 0;
}

.is-beta-ui .business-date-icon__month {
  display: grid;
  place-items: center;
  color: #fff;
  background: #009B94;
  font-family: "DM Sans", sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
}

.is-beta-ui .business-date-icon__day {
  display: grid;
  place-items: center;
  color: #001234;
  background: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.is-beta-ui .summary-card {
  align-items: center;
}

.is-beta-ui .summary-visual {
  display: grid;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
}

.is-beta-ui .summary-visual svg {
  width: 36px;
  height: 36px;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.is-beta-ui .summary-visual--green {
  color: #009B94;
  background: #E2F6F4;
}

.is-beta-ui .summary-visual--green svg {
  width: 42px;
  height: 42px;
}

.is-beta-ui .summary-visual__track {
  stroke: rgba(0, 155, 148, .24);
}

.is-beta-ui .summary-visual__value {
  fill: #009B94;
  stroke: none;
}

.is-beta-ui .summary-visual--red,
.is-beta-ui .summary-visual--amber {
  color: #F06A38;
  background: #FDEBDD;
}

.is-beta-ui .summary-visual--blue {
  color: #1648D8;
  background: #E7F1FF;
}

.is-beta-ui .summary-visual--blue .summary-visual__broom {
  stroke-width: 3.2;
}

.is-beta-ui .summary-visual--purple,
.is-beta-ui .summary-visual--indigo {
  color: #7A3FC2;
  background: #F0E4FA;
}

@media (max-width: 680px) {
  .is-beta-ui .topbar-official-logo {
    display: block;
    width: 76px;
    height: 32px;
    border: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
  }

  .is-beta-ui .topbar-brand--hotel {
    gap: 7px;
  }

  .is-beta-ui #daily-top-row .business-date-icon {
    grid-row: 1 / span 2;
  }
}

/* BETA-SHELL-LOGO-FIX-07: shared shell origin and official logo only. */
.is-beta-ui {
  --shell-origin: #001234;
}

.is-beta-ui .sidebar {
  border: 0;
  box-shadow: none;
  background:
    linear-gradient(180deg, var(--shell-origin) 0, var(--shell-origin) 92px, transparent 92px),
    radial-gradient(circle at 74% 170px, rgba(0, 155, 148, .16), transparent 28%),
    linear-gradient(180deg, var(--shell-origin) 0, var(--shell-origin) 92px, #002C56 100%);
}

.is-beta-ui .hotel-brand--trace {
  min-height: 92px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.is-beta-ui .hotel-brand--trace .brand-logo--full {
  width: 220px;
  height: 90px;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.is-beta-ui .topbar {
  min-height: 92px;
  border: 0;
  box-shadow: none;
  background: var(--shell-origin);
}

.is-beta-ui .topbar::before {
  content: none;
}

.is-beta-ui .topbar::after {
  border: 0;
  box-shadow: none;
}

/* Keep the official mark visible beside the hotel context on every Front surface. */
.is-beta-ui .topbar-official-logo {
  display: block;
  flex: 0 0 auto;
  width: 118px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

@media (max-width: 680px) {
  .is-beta-ui .topbar {
    min-height: 76px;
  }

  .is-beta-ui .topbar-official-logo {
    display: block;
    width: 82px;
    height: 34px;
    border: 0;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
  }
}

/* BETA-STATUS-TABS-UNIFORM-SELECTION-11: only the active filter is a button surface. */
.is-beta-ui .status-tabs button[data-status-filter]:not(.active) {
  color: #008E9B;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.is-beta-ui .status-tabs button[data-status-filter].active {
  color: #fff;
  border-color: #009B94;
  background: #009B94;
}

/* BETA-ROOM-ACTION-LABEL-13: card-view start and checkout-wait actions only. */
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .room-card__action[data-clean-start] {
  color: #fff;
  border: 0;
  background: #009B94;
  box-shadow: none;
}

.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .room-card__action[data-clean-start]:hover {
  background: #008E9B;
  box-shadow: none;
  filter: none;
}

.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .room-card__action[data-clean-start]:active {
  background: #007F7A;
  box-shadow: none;
  filter: none;
}

.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .room-card__action.checkout-wait-action,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .room-card__action.checkout-wait-action:hover,
.is-beta-ui .room-grid:not(.room-grid--list):not(.room-grid--overview) .room-card__action.checkout-wait-action:active {
  color: #009B94 !important;
  border: 1px solid #009B94 !important;
  background: #E7F7F5 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* beta: sidebar alignment and detail-modal presentation */
html.is-beta-ui .sidebar {
  border: 0;
  background: linear-gradient(180deg, #001234 0%, #002c56 100%);
  box-shadow: none;
}

html.is-beta-ui .hotel-brand--trace {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html.is-beta-ui .hotel-brand--trace::before,
html.is-beta-ui .hotel-brand--trace::after {
  content: none;
}

html.is-beta-ui .hotel-brand--trace .brand-logo--full {
  width: 173px;
  height: auto;
  max-width: 173px;
  max-height: none;
  object-fit: contain;
  transform: none;
}

html.is-beta-ui .sidebar-staff-progress h2 {
  width: 100%;
  font-size: 12px;
  text-align: center;
}

html.is-beta-ui .sidebar-staff-progress__row {
  font-size: 12px;
}

html.is-beta-ui .sidebar-staff-progress__row strong {
  font-size: 11px;
}

html.is-beta-ui .sidebar-note,
html.is-beta-ui #list-description,
html.is-beta-ui #assignment-hint {
  display: none !important;
}

html.is-beta-ui #role-action-area > button[data-clean-start]:disabled,
html.is-beta-ui #role-action-area > button[data-lost-item-room]:disabled,
html.is-beta-ui #role-action-area > button[data-damage-report-room]:disabled {
  color: #009b94 !important;
  background: #ffffff !important;
  border: 1px solid #bde8e5 !important;
  box-shadow: none !important;
}

/* beta: 部屋詳細の操作ボタン */
html.is-beta-ui #role-action-area > button[data-clean-start],
html.is-beta-ui #role-action-area > button[data-lost-item-room],
html.is-beta-ui #role-action-area > button[data-damage-report-room] {
  color: #009b94 !important;
  background: #ffffff !important;
  border: 1px solid #bde8e5 !important;
  box-shadow: none !important;
}

html.is-beta-ui #role-action-area > button[data-clean-start]:hover:not(:disabled),
html.is-beta-ui #role-action-area > button[data-lost-item-room]:hover:not(:disabled),
html.is-beta-ui #role-action-area > button[data-damage-report-room]:hover:not(:disabled),
html.is-beta-ui #role-action-area > button[data-clean-start]:focus-visible,
html.is-beta-ui #role-action-area > button[data-lost-item-room]:focus-visible,
html.is-beta-ui #role-action-area > button[data-damage-report-room]:focus-visible {
  color: #009b94 !important;
  background: #e7f7f5 !important;
  border-color: #009b94 !important;
  box-shadow: none !important;
}

/* beta mobile: shell top area and KPI density only */
@media (max-width: 680px) {
  html.is-beta-ui .topbar {
    display: grid;
    grid-template-columns: 44px 76px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 60px;
    padding: 8px 12px;
  }

  html.is-beta-ui .menu-button {
    grid-column: 1;
  }

  html.is-beta-ui .topbar-official-logo {
    grid-column: 2;
  }

  html.is-beta-ui .topbar-brand--hotel {
    grid-column: 3;
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: 0;
    gap: 6px;
    overflow: hidden;
    font-size: 13px;
  }

  html.is-beta-ui .topbar-brand--hotel strong {
    min-width: 0;
    white-space: nowrap;
  }

  html.is-beta-ui .topbar-official-logo {
    display: block !important;
    flex: 0 0 auto;
    width: 76px;
    height: 32px;
    object-fit: contain;
  }

  html.is-beta-ui .beta-environment-badge--topbar {
    flex: 0 0 auto;
  }

  html.is-beta-ui .logout-button {
    grid-column: 4;
    min-width: 64px;
    min-height: 44px;
    margin: 0;
    padding: 0 8px;
    white-space: nowrap;
  }

  html.is-beta-ui .daily-top-row {
    gap: 10px;
    margin-bottom: 10px;
  }

  html.is-beta-ui #daily-top-row .business-date-switcher {
    grid-template-columns: 42px auto minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: start;
    gap: 10px;
    min-height: 64px;
    height: 64px;
    padding: 10px 14px;
  }

  html.is-beta-ui #daily-top-row .business-date-icon {
    grid-row: auto;
  }

  html.is-beta-ui #daily-top-row .business-date-label {
    align-self: center;
    white-space: nowrap;
  }

  html.is-beta-ui #daily-top-row .business-date-switcher input {
    width: 100%;
    min-width: 0;
    min-height: 28px;
    text-align: left;
    white-space: nowrap;
  }

  html.is-beta-ui #daily-top-row .role-banner {
    width: 100%;
    padding: 0;
  }

  html.is-beta-ui #daily-top-row .daily-bulletin {
    width: 100%;
    margin: 0;
  }

  html.is-beta-ui .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 108px;
    gap: 12px;
  }

  html.is-beta-ui .summary-card {
    box-sizing: border-box;
    width: 100%;
    min-height: 108px;
    height: 108px;
    gap: 8px;
    padding: 12px 10px;
  }

  html.is-beta-ui .summary-card > div {
    min-width: 0;
  }

  html.is-beta-ui .summary-visual {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }

  html.is-beta-ui .summary-visual svg {
    width: 28px;
    height: 28px;
  }

  html.is-beta-ui .summary-visual--green svg {
    width: 32px;
    height: 32px;
  }

  html.is-beta-ui .summary-card > div > span {
    font-size: 8px;
    white-space: nowrap;
  }

  html.is-beta-ui .summary-card strong {
    margin: 3px 0;
    font-size: 24px;
    line-height: 1.1;
    white-space: nowrap;
  }

  html.is-beta-ui .summary-card small {
    font-size: 8px;
    white-space: nowrap;
  }

  html.is-beta-ui .summary-card--red small,
  html.is-beta-ui .summary-card--blue small,
  html.is-beta-ui .summary-card--purple small {
    display: none;
  }
}

/* beta mobile: bulletin labels and compact KPI cards */
@media (max-width: 680px) {
  html.is-beta-ui .daily-bulletin__section--announcements > h3 {
    display: none;
  }

  html.is-beta-ui .daily-bulletin__form > button[type="submit"] {
    color: #fff;
    background: #007f7a;
    border-color: #007f7a;
    box-shadow: none;
    font-size: 0;
  }

  html.is-beta-ui .daily-bulletin__form > button[type="submit"]::after {
    content: "送信";
    font-size: 10px;
  }

  html.is-beta-ui .daily-bulletin__form > button[type="submit"]:disabled::after {
    content: "送信中...";
  }

  html.is-beta-ui .daily-bulletin__form > button[type="submit"]:hover:not(:disabled),
  html.is-beta-ui .daily-bulletin__form > button[type="submit"]:focus-visible {
    color: #fff;
    background: #007f7a;
    border-color: #007f7a;
    box-shadow: none;
  }

  html.is-beta-ui .summary-grid {
    grid-auto-rows: 76px;
    gap: 10px 12px;
  }

  html.is-beta-ui .summary-card {
    min-height: 76px;
    height: 76px;
    gap: 7px;
    padding: 8px 10px;
  }

  html.is-beta-ui .summary-visual {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  html.is-beta-ui .summary-visual svg {
    width: 24px;
    height: 24px;
  }

  html.is-beta-ui .summary-visual--green svg {
    width: 28px;
    height: 28px;
  }

  html.is-beta-ui .summary-card > div > span {
    font-size: 8px;
    line-height: 1.1;
  }

  html.is-beta-ui .summary-card--green > div > span {
    font-size: 0;
  }

  html.is-beta-ui .summary-card--green > div > span::after {
    content: "完了率";
    font-size: 8px;
  }

  html.is-beta-ui .summary-card strong {
    margin: 1px 0;
    font-size: 21px;
    line-height: 1.05;
  }

  html.is-beta-ui .summary-card small {
    font-size: 7px;
    line-height: 1;
  }
}

/* beta mobile: visually center the official logo within the drawer */
@media (max-width: 680px) {
  html.is-beta-ui .sidebar .hotel-brand--trace {
    justify-content: center;
    padding-left: 0;
    padding-right: 8px;
  }
}

/* beta: align shared-announcement rows and normalize the read control */
html.is-beta-ui .daily-bulletin__announcements li {
  grid-template-columns: 34px minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
}

html.is-beta-ui .daily-bulletin__announcements .daily-bulletin__item--read {
  opacity: 1;
}

html.is-beta-ui .daily-bulletin__announcements .daily-notice-read-button {
  display: grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: transparent;
  box-shadow: none;
  font-size: 0;
}

html.is-beta-ui .daily-bulletin__announcements .daily-notice-read-button::before {
  content: "";
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1.5px solid #009b94;
  border-radius: 4px;
  color: #fff;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

html.is-beta-ui .daily-bulletin__announcements .daily-notice-read-button[aria-pressed="true"]::before {
  content: "✓";
  border-color: #009b94;
  background: #009b94;
}

html.is-beta-ui .daily-bulletin__announcements .daily-notice-read-button:hover:not(:disabled) {
  border: 0;
  background: transparent;
  box-shadow: none;
}

html.is-beta-ui .daily-bulletin__announcements .daily-notice-read-button:focus-visible {
  outline: 2px solid rgba(0, 155, 148, .28);
  outline-offset: 1px;
  box-shadow: none;
}

html.is-beta-ui .daily-bulletin__announcements li > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

html.is-beta-ui .daily-bulletin__announcements li > small {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 680px) {
  html.is-beta-ui .daily-bulletin__announcements li {
    grid-template-columns: 34px minmax(0, 1fr) max-content;
    column-gap: 6px;
    padding: 7px 8px;
  }

  html.is-beta-ui .daily-bulletin__announcements li > span {
    line-height: 1.45;
  }

  html.is-beta-ui .daily-bulletin__announcements li > small {
    max-width: 86px;
    font-size: 7px;
    line-height: 1.35;
    white-space: normal;
  }
}

/* beta: share one vertical center across announcement row content */
html.is-beta-ui .daily-bulletin__announcements li > span,
html.is-beta-ui .daily-bulletin__announcements li > small {
  display: flex;
  min-height: 34px;
  align-self: center;
  align-items: center;
}

html.is-beta-ui .daily-bulletin__announcements li > small {
  justify-content: flex-end;
}

/* beta: fix shared-announcement content to one horizontal grid */
html.is-beta-ui .daily-bulletin__announcements li {
  grid-template-columns: 40px minmax(0, 1fr) max-content 32px;
  column-gap: 8px;
}

html.is-beta-ui .daily-bulletin__announcements li > .daily-notice-read-button,
html.is-beta-ui .daily-bulletin__announcements li > span,
html.is-beta-ui .daily-bulletin__announcements li > small {
  margin: 0;
  position: static;
  transform: none;
}

html.is-beta-ui .daily-bulletin__announcements li > .daily-notice-read-button {
  grid-column: 1;
  justify-self: start;
}

html.is-beta-ui .daily-bulletin__announcements li > span {
  grid-column: 2;
  justify-self: stretch;
}

html.is-beta-ui .daily-bulletin__announcements li > small {
  grid-column: 3;
  justify-self: end;
}

@media (max-width: 680px) {
  html.is-beta-ui .daily-bulletin__announcements li {
    grid-template-columns: 34px minmax(0, 1fr) max-content 24px;
    column-gap: 6px;
  }
}

/* beta: vertically center every shared-announcement grid cell */
html.is-beta-ui .daily-bulletin__announcements li > .daily-notice-read-button,
html.is-beta-ui .daily-bulletin__announcements li > span,
html.is-beta-ui .daily-bulletin__announcements li > small {
  height: 100%;
  min-height: 34px;
  display: flex;
  align-self: stretch;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

html.is-beta-ui .daily-bulletin__announcements li > .daily-notice-read-button {
  justify-content: center;
}

html.is-beta-ui .daily-bulletin__announcements li > small {
  justify-content: flex-end;
}
/* Three-authority defense-in-depth. JavaScript applies the same capability gates
   before rendering and before every request; these selectors prevent stale DOM
   from exposing mutation controls while an authority context changes. */
body[data-authority-kind="hotel"] [data-clean-start],
body[data-authority-kind="hotel"] [data-check-start],
body[data-authority-kind="hotel"] [data-vacant-check],
body[data-authority-kind="hotel"] [data-photo-room],
body[data-authority-kind="hotel"] [data-check-photo-room],
body[data-authority-kind="hotel"] [data-lost-item-room],
body[data-authority-kind="hotel"] [data-damage-report-room],
body[data-authority-kind="hotel"] [data-inline-field],
body[data-authority-kind="hotel"] [data-special-room],
body[data-authority-kind="hotel"] [data-create-report],
body[data-authority-kind="hotel"] #daily-report-create-button,
body[data-authority-kind="hotel"] #create-special-report,
body[data-authority-kind="hotel"] #bulk-out-panel,
body[data-authority-kind="hotel"] #photo-modal-backdrop,
body[data-authority-kind="hotel"] #check-photo-modal-backdrop,
body[data-authority-kind="hotel"] #lost-item-modal-backdrop,
body[data-authority-kind="hotel"] #damage-report-modal-backdrop,
body[data-authority-kind="hotel"] #special-photo-modal-backdrop,
body[data-authority-kind="hotel"] .damage-complete-check,
body[data-authority-kind="hotel"] .daily-report-unlock-action,
body[data-authority-kind="hotel"] .staff-admin-form,
body[data-authority-kind="hotel"] .staff-pin-reset-action,
body[data-authority-kind="hotel"] .admin-mail-action,
body[data-authority-kind="cleaning_company"] .hotel-provisioning-authority-only,
body[data-authority-kind="hotel"] .hotel-provisioning-authority-only,
body[data-authority-kind="cleaning_company"] .platform-management-only,
body[data-authority-kind="hotel"] .platform-management-only,
body[data-authority-kind="cleaning_company"] [data-hotel-domain-user],
body[data-authority-kind="cleaning_company"] [data-save-domain-assignment],
body[data-authority-kind="cleaning_company"] [data-resend-domain-invite],
body[data-authority-kind="cleaning_company"] [data-domain-password-reset],
body[data-authority-kind="cleaning_company"] [data-toggle-domain-user-active],
body[data-authority-kind="unknown"] .side-nav__item,
body[data-authority-kind="unknown"] #report-actions,
body[data-authority-kind="unknown"] .user-management-only,
body[data-authority-kind="unknown"] .hotel-provisioning-authority-only,
body[data-authority-kind="unknown"] .platform-management-only {
  display: none !important;
}

/* Hotel issue controls are rendered only after the product capability gate. */
body[data-authority-kind="hotel"][data-hotel-issue-ui-allowed="true"] [data-lost-item-room],
body[data-authority-kind="hotel"][data-hotel-issue-ui-allowed="true"] [data-damage-report-room],
body[data-authority-kind="hotel"][data-hotel-issue-ui-allowed="true"] .damage-complete-check {
  display: inline-flex !important;
}
body[data-authority-kind="hotel"][data-hotel-issue-ui-allowed="true"] #lost-item-modal-backdrop:not([hidden]),
body[data-authority-kind="hotel"][data-hotel-issue-ui-allowed="true"] #damage-report-modal-backdrop:not([hidden]) {
  display: grid !important;
}

.user-management-domain-filter {
  display: grid;
  gap: 4px;
  min-width: 150px;
  color: var(--text-muted);
  font-size: 12px;
}

.user-management-domain-filter select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 0 34px 0 12px;
  font: inherit;
}

.platform-operation-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.platform-operation-form label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
}

.platform-operation-form textarea,
.platform-operation-form input,
.platform-operation-form select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
}

.platform-operation-form textarea,
.platform-operation-form button,
.platform-operation-form .form-hint {
  grid-column: 1 / -1;
}

@media (max-width: 680px) {
  .platform-operation-form {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Keep the legacy Oita tiles unchanged; only the verified Kagoshima card is a contact sheet. */
  .photo-room-cell:not(.photo-contact-card) {
    grid-template-rows: 26px minmax(0, 1fr) 22px;
    height: 172px;
    padding: 9px;
    gap: 7px;
    border-radius: 12px;
    font-size: 18px;
  }
  .photo-room-cell:not(.photo-contact-card) .photo-room-number { min-height: 26px; }
  .photo-room-cell:not(.photo-contact-card) .photo-room-status { min-height: 22px; font-size: 10px; }
  .photo-room-cell:not(.photo-contact-card) .photo-thumb-frame { border-radius: 9px; }
  .photo-room-cell.photo-contact-card {
    grid-template-rows: auto minmax(0, 1fr);
    height: 172px;
    padding: 0;
    gap: 0;
    border-radius: 12px;
    font-size: 18px;
  }
  .photo-room-cell.photo-contact-card .photo-thumb-frame { border-radius: 0; }
}