/* GoLiving workspace: shared visual system, loaded after feature styles. */
:root {
    --gl-primary: #137c66;
    --gl-primary-dark: #0d6251;
    --gl-bg: #f5f7f8;
    --gl-border: #e5eaea;
    --gl-text: #203532;
    --gl-text-muted: #788580;
    --gl-sidebar-bg: #142d29;
    --gl-sidebar-text: #b7c8c3;
    --gl-sidebar-text-active: #fff;
    --gl-sidebar-active: #24463d;
    --gl-sidebar-w: 248px;
    --gl-radius: 12px;
    --gl-radius-lg: 16px;
    --gl-shadow: 0 2px 4px rgba(25,50,43,.025);
    --bs-primary: #137c66;
    --bs-primary-rgb: 19,124,102;
    --bs-link-color: #137c66;
    --bs-link-hover-color: #0d6251;
    --bs-body-color: #203532;
    --bs-border-color: #e5eaea;
}
body { font-size: 14px; line-height: 1.55; }
button, input, select, textarea { font: inherit; }
a { color: var(--gl-primary); }
a:hover { color: var(--gl-primary-dark); }
:focus-visible { outline: 3px solid #48a890; outline-offset: 3px; }
.skip-link { position: fixed; top: -70px; left: 20px; z-index: 2100; padding: 12px 20px; background: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.app-content:focus { outline: none; }
.app-sidebar { display: flex; flex-direction: column; background: #142d29; border: 0; padding: 28px 16px 18px; scrollbar-width: thin; scrollbar-color: #456259 transparent; height: 100dvh; }
.sidebar-brand { padding: 0 4px 28px; margin-bottom: 4px; border-bottom: 1px solid #ffffff12; gap: 4px; }
.brand-logo-link { gap: 9px; }
.brand-logo-mark { width: 36px; height: 36px; flex-basis: 36px; filter: none; }
.brand-name { color: #fff; font-size: 23px; font-weight: 700; letter-spacing: -.8px; line-height: 1.2; }
.brand-caption { display: block; margin-top: 6px; font-size: 7px; letter-spacing: 1.35px; font-weight: 500; color: #afc5bb; }
.sidebar-collapse-btn { flex-shrink: 0; width: 25px; height: 28px; background: transparent; border: 0; color: #8ca99e; font-size: 13px; }
.sidebar-collapse-btn:hover { background: #ffffff12; color: white; }
.sidebar-nav { flex: 1; padding: 0; }
.app-sidebar .nav-section { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; color: #809c92; padding: 26px 12px 9px; }
.app-sidebar .nav-item, .app-sidebar .sidebar-more summary { padding: 11px 12px; margin: 3px 0; border: 1px solid transparent; border-radius: 8px; color: #b7c8c3; font-size: 13px; font-weight: 500; gap: 11px; }
.app-sidebar .nav-item i, .app-sidebar .sidebar-more summary i { color: #89a69c; font-size: 15px; width: 20px; flex-basis: 20px; }
.app-sidebar .nav-item:hover, .app-sidebar .sidebar-more summary:hover, .app-sidebar .sidebar-more[open] summary { background: #ffffff08; color: #fff; border-color: transparent; }
.app-sidebar .nav-item.active, .app-sidebar .sidebar-more summary.active { background: #26473e; border-color: #ffffff06; color: #fff; box-shadow: none; }
.app-sidebar .nav-item.active i, .app-sidebar .nav-item:hover i, .app-sidebar .sidebar-more summary.active i, .app-sidebar .sidebar-more summary:hover i { color: #a7dfb8; }
.app-sidebar .nav-item.active::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #bde7ad; margin-left: auto; flex-shrink: 0; }
.app-sidebar .sidebar-more { margin-top: 4px; }
.sidebar-more-body { border-left-color: #ffffff1a; margin-left: 21px; padding-left: 8px; }
.sidebar-more-body .nav-item { font-size: 13px; }
.sidebar-footer { display: flex; align-items: center; gap: 10px; padding: 18px 5px 0; margin-top: 32px; border-top: 1px solid #ffffff14; }
.sidebar-footer-mark { display: grid; place-items: center; width: 31px; height: 34px; border-radius: 8px; background: #26473e; color: #bde7ad; flex-shrink: 0; }
.sidebar-footer strong { display: block; font-size: 12px; font-weight: 500; color: #d5e1dc; }
.sidebar-footer div > span { display: block; color: #809c92; font-size: 11px; margin-top: 3px; }
.app-shell.sidebar-collapsed .app-sidebar { width: 76px; padding-left: 8px; padding-right: 8px; }
.app-shell.sidebar-collapsed .sidebar-footer { display: none; }
.app-shell.sidebar-collapsed .nav-item.active { box-shadow: none; }
.app-shell.sidebar-collapsed .nav-item.active::after { display: none; }
.sidebar-backdrop { display: none; }
.app-topbar { height: 80px; padding: 0 34px; gap: 18px; backdrop-filter: none; background: #fff; border-bottom: 1px solid var(--gl-border); }
.topbar-burger { width: 34px; height: 34px; border: 0; background: transparent; color: #6f8179; flex-shrink: 0; }
.topbar-title { min-width: 0; line-height: 1.4; }
.topbar-workspace { display: block; color: #64776d; font-size: 12px; font-weight: 400; }
.topbar-page { display: block; font-size: 13px; font-weight: 600; color: #2b4038; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-trigger { min-width: 220px; border: 1px solid #edf0ef; background: #f7f9f8; font-size: 13px; border-radius: 8px; padding: 9px 12px; color: #64776d; }
.cmdk-trigger kbd { font-size: 11px; background: #fff; padding: 3px 5px; border: 1px solid #e5e9e7; color: #64776d; }
.topbar-actions { gap: 12px; }
.topbar-actions > .dropdown > .btn { font-size: 13px; }
.user-chip { border-left: 1px solid #e5eaea; border-radius: 0; padding-left: 15px; }
.user-avatar { width: 35px; height: 35px; border-radius: 50%; background: #e7eddf; color: #4c6442; font-size: 14px; }
.user-name { font-size: 13px; }.user-role { margin-top: 4px; font-size: 12px; color: #819087; }
.app-content { padding: 32px 34px 40px; max-width: 1680px; margin: 0 auto; }
.btn { border-radius: 8px; font-size: 13px; font-weight: 600; padding: 9px 14px; box-shadow: none; transition: background .15s, border-color .15s, color .15s; }
.btn-sm { font-size: 13px; padding: 6px 10px; }.btn-lg { font-size: 14px; padding: 13px 20px; }
.btn-primary { --bs-btn-bg: #137c66; --bs-btn-border-color: #137c66; --bs-btn-hover-bg: #0d6251; --bs-btn-hover-border-color: #0d6251; --bs-btn-active-bg: #0b5445; --bs-btn-active-border-color: #0b5445; --bs-btn-disabled-bg: #137c66; --bs-btn-disabled-border-color: #137c66; background: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: white; box-shadow: none; }
.btn-primary:hover { background: #0d6251; border-color: #0d6251; }
.btn-outline-primary { --bs-btn-color: #137c66; --bs-btn-border-color: #9bc8bc; --bs-btn-hover-bg: #137c66; --bs-btn-hover-border-color: #137c66; --bs-btn-active-bg: #137c66; --bs-btn-active-border-color: #137c66; color: #137c66; border-color: #9bc8bc; }
.btn-outline-secondary { color: #53675e; border-color: #dce3df; background: #fff; }
.btn-outline-secondary:hover, .btn-outline-secondary.active { background: #edf3ef; border-color: #b5c8be; color: #294e3d; }
.form-control, .form-select { border-color: #dfe6e2; border-radius: 8px; font-size: 13px; min-height: 39px; color: #294034; }
.form-control::placeholder { color: #9aa69f; }
.form-control:focus, .form-select:focus { border-color: #66aa93; box-shadow: 0 0 0 3px #137c6612; }
.form-label { font-size: 13px; color: #52645a; font-weight: 500; }
.form-check-input:checked { background-color: #137c66; border-color: #137c66; }
.report-cockpit, .list-screen { gap: 22px; }
.report-hero, .list-head { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 4px; }
.report-hero h1, .list-title, .page-title { font-size: 27px; font-weight: 700; letter-spacing: -.7px; color: #203b30; }
.list-subtitle, .page-subtitle { font-size: 13px; color: #7e8e85; margin-top: 6px; }
.report-panel, .list-card, .card { border: 1px solid #e3e9e5; border-radius: 12px; box-shadow: var(--gl-shadow); }
.report-panel-head, .card-header { padding: 18px 20px; background: #fff; border-bottom: 1px solid #edf0ee; border-radius: 12px 12px 0 0; }
.report-panel-title, .card-header strong { font-size: 14px; font-weight: 650; color: #294034; }
.report-panel-title i { color: #759287; }
.report-panel-sub { margin-top: 5px; font-size: 13px; color: #647869; }
.report-panel-body, .card-body { padding: 20px; }
.list-filters { border: 1px solid #e3e9e5; box-shadow: none; border-radius: 10px; background: #fff; padding: 18px; }
.table { --bs-table-hover-bg: #f5f9f6; --bs-table-border-color: #edf0ee; color: #35483e; font-size: 13px; }
.table > thead > tr > th { background: #f7f9f7; color: #7c8b81; font-size: 12px; font-weight: 600; letter-spacing: .25px; padding: 13px 16px; border-bottom: 1px solid #e7ece9; }
.table > tbody > tr > td { padding: 14px 16px; vertical-align: middle; }
.table > tbody > tr:last-child > td { border-bottom-width: 0; }
.table-responsive { border-radius: 0 0 12px 12px; }
.code-badge { border-radius: 5px; font-weight: 600; box-shadow: none; font-size: 13px; }
.badge { font-size: 12px; font-weight: 600; padding: 5px 8px; }
.dropdown-menu { border: 1px solid #e3e9e5; box-shadow: 0 12px 36px #193c2920; border-radius: 10px; font-size: 13px; padding: 7px; }
.dropdown-item { border-radius: 6px; padding: 8px 12px; }
.dropdown-item:active { background: #137c66; }.modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 80px #132e3330; }
.modal-header, .modal-footer { border-color: #edf0ee; }.modal-title { font-size: 18px; }.modal-body { padding: 24px; }
.compact-metric, .detail-chip, .metric-tile { box-shadow: none; border: 1px solid #e3e9e5; background: #fff; border-radius: 10px; }
.compact-metric::after, .detail-chip::before { display: none; }.compact-metric-value, .detail-chip-value { font-weight: 700; }
.compact-metric-label, .detail-chip-label { font-weight: 500; }.compact-metric:hover { box-shadow: var(--gl-shadow); }
.eyebrow { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 1.55px; color: #6f877a; font-weight: 600; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #6aa382; }
.dashboard-welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.dashboard-welcome h1 { font-size: 32px; line-height: 1.25; font-weight: 700; color: #203b30; letter-spacing: -1.2px; margin: 11px 0 8px; }
.dashboard-welcome h1 > span { color: #529d70; }.dashboard-welcome p { margin: 0; font-size: 13px; color: #65796c; }
.dashboard-date { display: flex; align-items: center; gap: 12px; color: #8b9a90; font-size: 13px; padding: 10px 0 10px 16px; }
.dashboard-date > i { font-size: 20px; color: #6c8475; }.dashboard-date strong { display: block; color: #3b5043; font-size: 13px; margin-top: 3px; font-weight: 600; white-space: nowrap; }
.dashboard-shortcuts { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding-bottom: 23px; border-bottom: 1px solid #e3e9e5; }
.shortcut-label { font-size: 13px; color: #839087; padding-right: 10px; }.shortcut-report { margin-left: auto; color: #627b6a; font-size: 13px; text-decoration: none; }
.dashboard-overview-grid { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(0, 2fr); gap: 20px; }
.occupancy-summary { position: relative; overflow: hidden; background: #214a3b; color: #fff; border-radius: 14px; padding: 24px; display: flex; flex-direction: column; }
.occupancy-summary::after { content: ''; width: 200px; height: 200px; border: 35px solid #ffffff03; position: absolute; right: -120px; top: 70px; border-radius: 50%; pointer-events: none; }
.occupancy-summary-top { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: 1.3px; color: #b1c9b8; }
.occupancy-symbol { width: 32px; height: 32px; border: 1px solid #ffffff26; border-radius: 9px; display: grid; place-items: center; color: #d0e8b7; font-size: 14px; }
.occupancy-summary-top a { color: #bad1bd; margin-left: auto; font-size: 13px; padding: 5px; }
.occupancy-summary h2 { margin: 26px 0 8px; font-size: 13px; font-weight: 400; color: #c4d6c7; }
.occupancy-number { font-size: 59px; font-weight: 500; letter-spacing: -2px; line-height: 1.1; font-variant-numeric: tabular-nums; }.occupancy-number > span { color: #c4dbb2; font-size: 28px; margin-left: 4px; }
.occupancy-summary p { font-size: 13px; color: #b6cfbf; margin: 12px 0 18px; }.occupancy-summary p strong { color: #fff; }
.occupancy-meter { height: 5px; background: #ffffff1c; border-radius: 5px; overflow: hidden; margin-bottom: 24px; }.occupancy-meter > span { display: block; height: 100%; background: #bce4a2; border-radius: inherit; }
.occupancy-summary-foot { border-top: 1px solid #ffffff1a; padding-top: 17px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: #b6cfbf; margin-top: auto; }.occupancy-summary-foot strong { color: #e5f0db; font-size: 17px; font-weight: 500; }
.room-status-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.room-status-card { background: #fff; border: 1px solid #e3e9e5; border-radius: 12px; padding: 19px 20px 15px; text-decoration: none; transition: border-color .15s, box-shadow .15s; color: #294034; }
.room-status-card:hover { color: #294034; border-color: #93b4a1; box-shadow: 0 3px 12px #204a3b08; }
.room-status-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: #6d8174; }.room-status-head > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--status-bg); color: var(--status-color); font-size: 13px; }
.tone-green { --status-bg: #edf5ed; --status-color: #578967; }.tone-amber { --status-bg: #faf3e4; --status-color: #b89951; }.tone-blue { --status-bg: #eaf2f6; --status-color: #6998ae; }.tone-rose { --status-bg: #f8ece8; --status-color: #bc8b78; }
.room-status-number { display: flex; align-items: baseline; gap: 8px; margin: 3px 0 9px; font-size: 33px; font-weight: 600; line-height: 1.3; letter-spacing: -1px; font-variant-numeric: tabular-nums; }.room-status-number small { font-size: 13px; color: #75867a; font-weight: 400; letter-spacing: 0; }
.room-status-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: #75867a; }.room-status-foot i { color: #a6b3a9; }
.room-cleaning { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px 0; color: #65786b; font-size: 12px; text-decoration: none; }.room-cleaning strong { color: #55705d; margin-left: 9px; font-weight: 600; }.room-cleaning > span:last-child { font-size: 11px; }
.dashboard-tasks { padding-top: 3px; }.dashboard-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 15px; }.dashboard-section-heading h2 { font-size: 16px; font-weight: 650; margin: 0; color: #294034; display: flex; align-items: center; gap: 8px; }.section-count { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #e8ede7; color: #778f79; font-size: 12px; }.dashboard-section-heading p { font-size: 13px; color: #677d6b; margin: 5px 0 0; }.section-caption { font-size: 12px; color: #657b68; }
.dashboard-tasks .action-board { display: grid; grid-template-columns: repeat(auto-fit,minmax(185px,1fr)); gap: 12px; }.dashboard-tasks .action-card { background: white; border: 1px solid #e3e9e5; border-radius: 10px; box-shadow: none; min-height: 88px; padding: 15px; gap: 12px; }.dashboard-tasks .action-card::before { display: none; }.dashboard-tasks .action-card:hover { border-color: #a6baae; transform: none; box-shadow: 0 3px 10px #29403408; }
.dashboard-tasks .action-card-icon { width: 36px; height: 38px; border-radius: 9px; background: var(--action-soft); border: 0; box-shadow: none; font-size: 13px; }.dashboard-tasks .action-card-main { gap: 4px; }.dashboard-tasks .action-card-label { font-weight: 500; font-size: 13px; color: #7d8a81; }.dashboard-tasks .action-card-value { color: #354b3d; font-size: 22px; font-weight: 600; line-height: 1.25; }.dashboard-tasks .action-card-value small { font-size: 11px; color: #6c7d70; font-weight: 400; }.dashboard-tasks .action-card-go { font-size: 11px; color: #b5beb7; }
.dashboard-all-clear { display: flex; align-items: center; gap: 16px; border: 1px solid #dde9dc; border-radius: 12px; padding: 22px; background: #f0f6ed; color: #4a754c; }.dashboard-all-clear > i { font-size: 26px; }.dashboard-all-clear strong, .dashboard-all-clear div > span { display: block; }.dashboard-all-clear strong { font-size: 13px; font-weight: 600; }.dashboard-all-clear div > span { font-size: 13px; color: #7f947e; margin-top: 4px; }.dashboard-all-clear a { margin-left: auto; flex-shrink: 0; font-size: 13px; text-decoration: none; }
.dashboard-workspace .report-split { gap: 20px; }.dashboard-workspace .report-panel-head > a { font-size: 12px !important; flex-shrink: 0; }.dashboard-workspace .table { font-size: 13px; }.dashboard-workspace .table .small { font-size: 13px; }.dashboard-workspace .table .text-warning { color: #a26c0b !important; }
.table > tbody > tr > td.dashboard-empty { text-align: center; padding: 34px 20px; white-space: normal; }.dashboard-empty > i { display: grid; place-items: center; margin: 0 auto 12px; width: 42px; height: 42px; border-radius: 50%; background: #f0f5ef; color: #87a17e; font-size: 19px; }.dashboard-empty strong { display: block; font-size: 13px; font-weight: 500; color: #607761; }.dashboard-empty span { display: block; margin-top: 5px; color: #7d8d77; font-size: 13px; }
/* Authentication shares the workspace palette, with a CSS architectural illustration. */
.auth-body { background: #f7f8f5; }.auth-wrap { min-height: 100dvh; padding: 18px; gap: 18px; }.auth-side { flex: 0 0 47%; padding: 38px 44px 24px; background: #1c4537; border-radius: 18px; overflow: hidden; position: relative; }.auth-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; width: fit-content; }.auth-brand:hover { color: #fff; }.auth-brand > span { font-size: 27px; font-weight: 650; letter-spacing: -.8px; line-height: 1.2; }.auth-brand small { display: block; margin-top: 5px; font-size: 10px; letter-spacing: 1.6px; font-weight: 400; color: #adc8b7; }.auth-story { padding-top: 50px; }.auth-eyebrow { color: #a9c998; font-size: 11px; letter-spacing: 2px; }.auth-story h2 { color: #f5f7ed; font-size: clamp(32px,3.25vw,50px); line-height: 1.3; letter-spacing: -1.5px; font-weight: 500; margin: 20px 0; }.auth-story h2 em { font-style: normal; color: #bbdfa2; }.auth-story > p { color: #a7c0b0; font-size: 13px; line-height: 1.9; }.auth-building-art { height: 210px; position: relative; margin: 24px 0; }.art-ground { position: absolute; bottom: 15px; left: 0; right: 0; height: 1px; background: #65896e; }.art-building { position: absolute; bottom: 16px; border: 1px solid #90b491; background-color: #2b5841; background-image: repeating-linear-gradient(0deg,transparent 0 20px,#8ba87935 20px 22px),repeating-linear-gradient(90deg,transparent 0 26px,#8ba87935 26px 28px); box-shadow: 12px -8px 0 #ffffff04; border-radius: 3px 3px 0 0; }.art-building-one { height: 100px; width: 90px; left: 8%; }.art-building-two { height: 180px; width: 115px; left: 34%; background-color: #54754c; }.art-building-three { height: 128px; width: 90px; right: 7%; }.art-caption { position: absolute; left: 8%; right: 8%; bottom: 0; background: #e7efdc; color: #345138; padding: 13px 17px; border: 1px solid #d8e6cb; border-radius: 10px; display: flex; align-items: center; gap: 10px; font-size: 13px; box-shadow: 0 10px 30px #08291630; }.art-caption i { color: #74985b; font-size: 17px; }.auth-benefits { display: flex; flex-wrap: wrap; gap: 20px; color: #b7ceb9; font-size: 12px; margin-bottom: 34px; }.auth-benefits i { color: #badea2; margin-right: 4px; }.auth-foot { font-size: 12px; color: #93b09b; opacity: 1; }.auth-main { padding: 48px 32px; background: transparent; }.auth-card { max-width: 380px; }.auth-head h1 { color: #254533; font-size: 28px; letter-spacing: -.8px; margin-bottom: 12px; }.auth-head p { color: #869388; font-size: 13px; margin-bottom: 34px; }.auth-card .form-label { font-size: 13px; margin-bottom: 9px; }.auth-card .form-control-lg { min-height: 48px; font-size: 13px; background-color: #fff; }.auth-card .mb-3 { margin-bottom: 23px !important; }.auth-card .btn-primary { background: #246348; border-color: #246348; }.auth-card .btn-primary:hover { background: #184c35; }.auth-card form > p { padding-top: 14px; font-size: 13px; }.auth-card form > p > span { margin-top: 7px; font-size: 12px; }.auth-mobile-brand { display: none; }
@media (min-width: 1440px) { .app-content { padding: 36px 44px 48px; }.dashboard-overview-grid { grid-template-columns: minmax(260px,1fr) minmax(0,2.2fr); }.room-status-card { padding: 21px 24px 18px; }.dashboard-welcome h1 { font-size: 36px; } }
@media (max-width: 1199px) { .app-topbar { padding: 0 24px; gap: 12px; }.cmdk-trigger { min-width: 180px; }.app-content { padding: 26px 24px; }.dashboard-overview-grid { grid-template-columns: minmax(220px,.9fr) minmax(0,1.7fr); gap: 16px; }.occupancy-summary { padding: 20px; }.room-status-card { padding: 15px; }.dashboard-tasks .action-board { grid-template-columns: repeat(2,minmax(0,1fr)); }.auth-side { padding: 30px; } }
@media (max-width: 992px) {
    .app-sidebar { left: calc(-1 * var(--gl-sidebar-w) - 12px); z-index: 1040; height: 100dvh; padding: 24px 16px; box-shadow: 12px 0 40px #122d291c; }
    .app-sidebar.open { left: 0; }.sidebar-backdrop.visible { display: block; position: fixed; inset: 0; background: #132d2960; backdrop-filter: blur(2px); border: 0; z-index: 1035; }body.sidebar-open { overflow: hidden; }
    .app-topbar { height: 68px; }.app-shell.sidebar-collapsed .app-sidebar { width: var(--gl-sidebar-w); }
    .auth-side { display: none; }.auth-wrap { padding: 0; }.auth-main { min-height: 100dvh; padding: 36px 24px; }.auth-card { background: transparent; box-shadow: none; padding: 0; max-width: 400px; }.auth-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 44px; color: #294c36; font-size: 25px; font-weight: 650; text-decoration: none; }
}
@media (max-width: 767px) {
    .app-topbar { padding: 0 16px; gap: 8px; }.topbar-actions { gap: 4px; }.cmdk-trigger { min-width: 34px; width: 34px; height: 34px; padding: 8px; justify-content: center; }.cmdk-trigger > i { margin: 0 !important; }.user-chip { padding: 0 0 0 8px; }.user-avatar { width: 32px; height: 32px; }.topbar-actions .btn { padding: 7px; }.app-content { padding: 24px 18px; }.report-cockpit, .list-screen { gap: 20px; }.dashboard-welcome h1 { font-size: 29px; }.dashboard-welcome p { max-width: 320px; font-size: 13px; }.dashboard-date { display: none; }.dashboard-shortcuts { gap: 8px; padding-bottom: 20px; }.shortcut-label { width: 100%; }.dashboard-shortcuts .btn { font-size: 13px; padding: 9px 11px; }.shortcut-report { margin-left: 0; padding: 5px; }.dashboard-overview-grid { grid-template-columns: 1fr; gap: 14px; }.occupancy-summary { padding: 22px; }.occupancy-summary h2 { margin-top: 19px; }.occupancy-number { font-size: 50px; }.occupancy-summary p { margin-bottom: 14px; }.occupancy-meter { margin-bottom: 15px; }.occupancy-summary-foot { padding-top: 12px; }.room-status-grid { gap: 12px; }.room-status-card { padding: 17px; }.room-status-number { font-size: 30px; }.section-caption { display: none; }.dashboard-tasks .action-card { padding: 12px; gap: 8px; }.dashboard-tasks .action-card-icon { width: 30px; height: 32px; flex-shrink: 0; }.dashboard-tasks .action-card-value small { display: none; }.dashboard-tasks .action-card-label { font-size: 12px; }.dashboard-tasks .action-card-go { font-size: 10px; }.dashboard-workspace .report-split { grid-template-columns: 1fr; gap: 16px; }.dashboard-all-clear { flex-wrap: wrap; padding: 18px; }.dashboard-all-clear div { flex: 1; }.dashboard-all-clear a { margin-left: 42px; }.report-panel-head, .card-header { padding: 16px; }.report-panel-body, .card-body { padding: 16px; }.list-head, .page-head { flex-wrap: wrap; gap: 14px; }.list-actions, .page-head > .d-flex { flex-wrap: wrap; }.list-title, .page-title { font-size: 26px; }.page-head > .d-flex { width: 100%; }.table > tbody > tr > td { padding: 12px; }.auth-head h1 { font-size: 27px; }
}
@media (max-width: 374px) { .app-content { padding: 20px 12px; }.dashboard-welcome h1 { font-size: 26px; }.dashboard-tasks .action-board { grid-template-columns: 1fr; }.room-status-card { padding: 12px; }.room-status-head { font-size: 13px; }.room-status-foot { font-size: 12px; }.room-cleaning > span:last-child { display: none; }.topbar-workspace { font-size: 11px; }.topbar-page { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media print { .app-sidebar, .app-topbar, .sidebar-backdrop, .dashboard-shortcuts, .skip-link { display: none !important; }.app-content { padding: 0; }.occupancy-summary { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }

/* Searchable directories and shared empty states. */
.search-field { position: relative; }
.search-field > i { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: #9aaba0; font-size: 13px; pointer-events: none; }
.search-field .form-control { padding-left: 34px; }
.filter-reset { flex-shrink: 0; color: #7d8e80; font-size: 13px; text-decoration: none; }
.filter-reset:hover { color: #137c66; }
.list-status-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid #e1e8e2; padding-bottom: 1px; }
.list-status-tab { padding: 12px 17px; color: #7c8d7e; font-size: 13px; font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.list-status-tab:hover { color: #226e4d; background: #edf3ee; border-radius: 8px 8px 0 0; }
.list-status-tab.active { border-bottom-color: #267651; color: #267651; font-weight: 650; }
.directory-filters .list-filter-grid { gap: 14px; }
.directory-filters .list-filter-more { margin-top: 16px; }
.directory-filters .list-filter-more > summary { color: #708471; font-size: 13px; font-weight: 500; }
.directory-results { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #859282; font-size: 13px; }
.directory-results strong { color: #365540; font-weight: 600; }.directory-page { font-size: 13px; }
.directory-card { overflow-x: auto; }
.directory-card .table { font-size: 13px; }
.directory-card .table thead th { white-space: nowrap; }
.directory-card .table tbody tr:hover { background: #f9fbf8; }
.directory-person { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.directory-person a { color: #344e3c; line-height: 1.55; }
.person-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: #edf1e5; color: #789263; font-size: 13px; font-weight: 600; }
.directory-phone { white-space: nowrap; color: #6e8071; font-variant-numeric: tabular-nums; }
.directory-status { border-radius: 5px; font-weight: 500; white-space: nowrap; }
.directory-status.bg-success { color: #38724d !important; background: #eaf5e9 !important; }
.directory-status.bg-secondary { color: #7b877b !important; background: #eef1ec !important; }
.directory-status.bg-danger { color: #b46758 !important; background: #faeee9 !important; }
.directory-status.bg-info { color: #527f91 !important; background: #edf5f8 !important; }
.contract-dates { display: inline-flex; flex-direction: column; gap: 4px; white-space: nowrap; color: #6c7d71; font-size: 13px; }
.contract-dates > span { color: #889588; }.contract-dates i { font-size: 11px; }
.workspace-empty { text-align: center; padding: 50px 24px; background: #fff; border: 1px solid #e3e9e5; border-radius: 12px; }
.empty-symbol { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; margin: 0 auto 18px; background: #f0f5ea; color: #96af82; font-size: 23px; }
.workspace-empty h2 { font-size: 17px; font-weight: 600; color: #476548; margin-bottom: 10px; }
.workspace-empty p { font-size: 13px; color: #879881; max-width: 390px; margin: 0 auto 20px; }
.directory-card .table td.directory-empty-cell { padding: 0; }.directory-empty-cell .workspace-empty { border: 0; }
.directory-card .card-footer { background: #fff; padding: 16px; border-top: 1px solid #edf0ee; }
.directory-card .pagination { gap: 5px; }.directory-card .page-link { border: 0; border-radius: 6px; color: #788c78; min-width: 30px; text-align: center; padding: 6px 10px; }
.directory-card .page-item.active .page-link { background: #edf4e9; color: #4e7748; font-weight: 650; }
.directory-card .page-item.disabled .page-link { background: transparent; color: #c3cec0; }
@media (max-width: 760px) {
    .directory-screen { gap: 18px; }.list-status-tabs { gap: 0; }.list-status-tab { padding: 10px 12px; font-size: 13px; }
    .directory-filters .list-filter-grid { gap: 12px; }.directory-results { font-size: 13px; }.directory-page { display: block; margin-top: 3px; }
    .directory-card { background: transparent; border: 0; overflow: visible; box-shadow: none; }
    .directory-card .table tbody { display: grid; gap: 14px; }.directory-card .table tr { background: #fff; border: 1px solid #e3e9e5; border-radius: 12px; padding: 16px; }
    .directory-card .table tr:last-child { border-bottom: 1px solid #e3e9e5; }
    .directory-card .table td[data-label] { padding: 9px 0; grid-template-columns: 82px minmax(0,1fr); border-bottom: 1px solid #f0f3ed; }
    .directory-card .table td::before { font-weight: 500; color: #90a08c; align-self: center; font-size: 13px; }
    .directory-card .table td > * { min-width: 0; }
    .directory-card .table td > :nth-child(n+2) { grid-column: 2; }
    .directory-card .table td:not([data-label]) { padding: 12px 0 0; }
    .directory-card .table td:not([data-label]) > .btn { justify-self: end; }
    .directory-person { min-width: 0; }.directory-person a { overflow-wrap: anywhere; }
    .person-avatar { width: 30px; height: 30px; font-size: 13px; }
    .directory-card .table .badge { justify-self: start; width: fit-content; max-width: 100%; white-space: normal; text-align: left; line-height: 1.45; }
    .directory-card .table td > .btn { justify-self: start; }
    .directory-card .table tr.list-row-section { border: 0; background: transparent; padding: 10px 0 0; }.directory-card .table tr.list-row-section td { padding: 0; }
    .directory-card .table tr.list-row-muted { opacity: .8; }
    .directory-card .table td.directory-empty-cell { padding: 0; }.directory-empty-cell .workspace-empty { padding: 28px 8px; }
    .directory-card .card-footer { border: 0; border-radius: 10px; margin-top: 12px; }
    .workspace-empty { padding: 35px 20px; }.workspace-empty h2 { font-size: 16px; }
}
.directory-cell { min-width: 0; }
@media (max-width: 760px) {
    .directory-card .table td > .directory-cell { grid-column: 2; overflow-wrap: anywhere; }
    .directory-filters .filter-wide, .directory-filters .list-filter-grid > div:last-child { grid-column: 1 / -1; }
    .directory-card .directory-cell > .badge { display: inline-block; }
}

/* Usability audit: legible text, reachable workflows and narrow layouts. */
.app-sidebar { overflow: hidden; padding-top: 20px; }
.sidebar-brand { flex-shrink: 0; padding-bottom: 18px; }
.sidebar-nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #456259 transparent; }
.sidebar-footer { flex-shrink: 0; margin-top: 14px; padding-top: 14px; }
.app-sidebar .nav-section { padding-top: 17px; padding-bottom: 7px; }
.app-sidebar .nav-item, .app-sidebar .sidebar-more summary { padding-top: 9px; padding-bottom: 9px; font-size: 13px; }
.app-shell.sidebar-collapsed .sidebar-nav { padding: 0 3px; }
.app-topbar { flex-shrink: 0; }.topbar-actions { flex-shrink: 0; }
.workflow-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; padding: 5px; background: #eaf0ec; border-radius: 10px; width: fit-content; max-width: 100%; }
.workflow-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 7px; color: #526c5c; font-size: 13px; text-decoration: none; }
.workflow-link.active { background: #fff; color: #1e6146; box-shadow: 0 1px 3px #1e493414; font-weight: 600; }
.workflow-link:hover { color: #1e6146; background: #f7faf7; }
.btn, .btn-sm { min-height: 36px; }
.table { font-variant-numeric: tabular-nums; }
.table > thead > tr > th { font-size: 12px; color: #617469; letter-spacing: 0; }
.table > tbody > tr > td { font-size: 13px; }
.table .text-warning { color: #956615 !important; }
.table .small { font-size: 12px; }
.audit-filter-form > .card-body > .row { display: grid; grid-template-columns: repeat(auto-fit,minmax(155px,1fr)); margin: 0; gap: 14px; }
.audit-filter-form > .card-body > .row > [class*="col-"] { width: auto; min-width: 0; padding: 0; margin: 0; }
.audit-filter-form input[type="date"] { min-width: 0; width: 100%; }
.audited-table { margin-bottom: 18px; }
.audited-table td[data-label="Số tiền"] .directory-cell,
.audited-table td[data-label="Tiền cọc"] .directory-cell { white-space: nowrap; }
.page-head { flex-wrap: wrap; }.page-head > * { min-width: 0; max-width: 100%; }
.page-head .d-flex { flex-wrap: wrap; }
.page-head form.d-flex { min-width: 0; max-width: 100%; flex-wrap: nowrap; }
.page-head form input[type="search"] { min-width: 0 !important; width: min(300px,100%); }
.cmdk-empty { padding: 24px 18px; color: #65796a; font-size: 14px; text-align: center; }
.cmdk-url { display: none; }.cmdk-modal { max-width: calc(100vw - 32px); }.cmdk-list { overscroll-behavior: contain; }
.form-guide .guide-step small { font-size: 12px; color: #677b6c; }
.form-text { color: #66786c; font-size: 12px; }
.dashboard-shortcuts .shortcut-label { width: 100%; }.dashboard-shortcuts .btn { white-space: normal; }
.dashboard-tasks .action-board { grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); }
.dashboard-tasks .action-card-value small { font-size: 11px; }
@media (max-width: 1199px) {
    .cmdk-trigger { min-width: 0; width: 40px; height: 38px; justify-content: center; padding: 8px; }
    .cmdk-trigger span, .cmdk-trigger kbd { display: none !important; }.cmdk-trigger > i { margin: 0 !important; }
    .topbar-actions > .dropdown > .btn { max-width: 170px; }
}
@media (max-width: 760px) {
    .workflow-nav { width: 100%; margin-bottom: 20px; gap: 4px; }.workflow-link { font-size: 12px; padding: 10px; }
    .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px; min-height: 44px; }
    .form-label, .form-label.small { font-size: 13px !important; }
    .btn, .btn-sm { min-height: 40px; font-size: 13px; }
    .audit-filter-form > .card-body > .row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .audit-filter-form > .card-body > .row > :first-child,
    .audit-filter-form > .card-body > .row > :last-child { grid-column: 1 / -1; }
    .audited-table .table td[data-label] { grid-template-columns: 90px minmax(0,1fr); }
    .audited-table .directory-cell { overflow-wrap: anywhere; }.audited-table .table td::before { font-size: 12px; }
    .audited-table .table .btn { min-height: 40px; }.audited-table td[data-label="Thao tác"] .directory-cell { display: flex; gap: 8px; flex-wrap: wrap; }
    .directory-card .table td:not([data-label]) > .d-flex { flex-wrap: wrap; justify-content: flex-start !important; }
    .topbar-workspace { font-size: 10px; }.topbar-page { font-size: 13px; }.topbar-actions .btn { min-height: 36px; }
    .page-head form.d-flex { flex: 1 1 100%; width: 100%; }
    .dashboard-tasks .action-board { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .dashboard-tasks .action-card-main { min-width: 0; }.dashboard-tasks .action-card-label { font-size: 12px; }
    .dashboard-tasks .action-card-value small { display: none; }
    .auth-card .form-control-lg { font-size: 16px; }
}
@media (max-width: 374px) {
    .audit-filter-form > .card-body > .row { grid-template-columns: 1fr; }
    .dashboard-tasks .action-board { grid-template-columns: 1fr; }
    .topbar-actions { gap: 2px; }.app-topbar { padding: 0 10px; gap: 4px; }.topbar-burger { width: 28px; }
}
body.command-open { overflow: hidden; }
.page-subtitle .text-warning { color: #956615 !important; }
.audited-table code { color: #376a50; background: #eff5ed; padding: 3px 5px; border-radius: 5px; }
@media (max-height: 900px) { .sidebar-footer { display: none; } }
.user-meta { min-width: 0; }.user-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1199px) { .user-name { max-width: 150px; } }