:root {
  color-scheme: light;
  --ink: #142a46;
  --muted: #536983;
  --blue: #145ac4;
  --deep: #123d78;
  --line: #dbe3ee;
  --pale: #edf4ff;
  --canvas: #f4f7fb;
  --teal: #08755d;
  --amber: #925300;
  --red: #b32944;
  --radius: 14px;
  --side: 222px;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 14px/1.5 Inter,"Segoe UI",Arial,sans-serif }
button,input,select,textarea { font: inherit }
button { cursor: pointer }
button:disabled { cursor: wait; opacity: .65 }
a { color: inherit; text-decoration: none }
button,a,input,textarea,select { -webkit-tap-highlight-color: transparent }
:focus-visible { outline: 3px solid #3484de; outline-offset: 3px }
svg.lucide { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.8; vertical-align: middle }
h1,h2,h3,p { margin: 0 }
h1 { font-size: clamp(28px,2.5vw,38px); line-height: 1.18; letter-spacing: -.045em }
h2 { font-size: 18px; letter-spacing: -.025em; line-height: 1.4 }
h3 { font-size: 16px }
small,.muted { color: var(--muted) }
small { font-size: 12px }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 80; transform: translateY(-150%); background: white; padding: 9px }
.skip-link:focus { transform: none }

/* Navigation */
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--side); padding: 26px 15px 16px; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--line); overflow-y: auto }
.brand { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin: 0 11px 26px; font-size: 24px; letter-spacing: -.055em; font-weight: 720 }
.brand-icon,.avatar,.stat-icon,.finance-icon,.delete-symbol { display: inline-grid; place-items: center; flex-shrink: 0 }
.brand-icon { width: 34px; height: 34px; background: var(--blue); border-radius: 9px; color: #fff }
.nav-label { margin: 18px 13px 9px; font-size: 11px; font-weight: 650; color: var(--muted); letter-spacing: .08em; text-transform: uppercase }
.nav-label:not(:first-child) { margin-top: 32px }
.nav-item { position: relative; transition: background-color .16s ease, color .16s ease; display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0; padding: 11px 13px; background: transparent; border: 0; border-radius: 8px; color: #425a75; text-align: left; font-weight: 550 }
.nav-item:hover,.icon-btn:hover { background: var(--pale); color: var(--blue) }
.nav-item.active { background: #e6efff; color: #124da9; font-weight: 700 }
.nav-marker { position: absolute; left: 0; top: 50%; width: 3px; height: 21px; margin-top: -10.5px; background: var(--blue); border-radius: 3px }
.sidebar-bottom { margin-top: auto; padding-top: 18px }
.sidebar-bottom form { border-top: 1px solid var(--line); padding-top: 12px }
.app-shell { margin-left: var(--side) }
.topbar,.breadcrumb,.topbar-right,.today,.actions,.btn,.icon-btn,.text-link,.room-number { display: flex; align-items: center }
.topbar { min-height: 67px; justify-content: space-between; padding: 10px clamp(18px,3vw,48px); gap: 14px; background: #fff; border-bottom: 1px solid var(--line) }
.breadcrumb,.topbar-right,.today { gap: 9px }
.breadcrumb { font-size: 12px; color: var(--muted) }
.breadcrumb>svg { width: 13px }
.breadcrumb strong { color: var(--ink); font-weight: 600 }
.today { border-right: 1px solid var(--line); padding-right: 16px; margin-right: 5px; font-size: 12px; color: var(--muted) }
.today svg { width: 15px }
.avatar { width: 35px; height: 35px; border-radius: 50%; color: #174c94; background: #e2edfe; font-weight: 700 }
.profile strong,.profile small,.tenant-item strong,.tenant-item small { display: block }
.profile strong { font-size: 12px }
.profile small { font-size: 11px }
#main-content { max-width: 1570px; margin: auto; padding: 32px clamp(18px,3vw,48px) 48px }
#main-content:focus { outline: none }
.page-heading,.panel-heading,.modal-heading,.pagination { display: flex; justify-content: space-between; align-items: center; gap: 16px }
.page-heading { margin-bottom: 24px }
.page-heading p,.panel-heading p { color: var(--muted); margin-top: 5px; font-size: 13px }
.actions { gap: 8px }
.btn,.icon-btn { display: inline-flex; justify-content: center; gap: 7px; border-radius: 8px }
.btn { min-height: 40px; padding: 9px 14px; border: 1px solid var(--line); font-size: 13px; font-weight: 650; white-space: nowrap; background: #fff }
.btn.primary { color: #fff; border-color: var(--blue); background: var(--blue) }
.btn.primary:hover { background: #104ba5 }
.btn.secondary:hover { background: var(--pale); border-color: #afc6e6 }
.btn.compact { min-height: 32px; padding: 5px 10px }
.btn svg { width: 16px }
.icon-btn { width: 35px; height: 35px; background: transparent; border: 0; color: var(--muted) }
.icon-btn.danger:hover { background: #ffedf0; color: var(--red) }
.mobile-menu,.sidebar-shade { display: none }

/* Dashboard */
.stats-grid,.finance-strip,.dashboard-grid,.room-grid,.form-grid { display: grid; gap: 16px }
.stats-grid { grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 16px }
.stat-card,.panel,.finance-strip { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius) }
.stat-card { display: block; padding: 17px 19px; transition: border-color .18s,transform .18s }
.stat-card:hover,.room-tile:hover { border-color: #85afe7; transform: translateY(-2px) }
.stat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px }
.stat-top>svg { width: 14px; color: #69809d }
.stat-icon,.finance-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--pale); color: var(--blue) }
.stat-icon.cyan { color: #066a86; background: #dff3fa }
.stat-icon.green { color: var(--teal); background: #e0f3e9 }
.stat-icon.indigo { color: #4c53ab; background: #efeffd }
.stat-label { display: block; color: var(--muted); font-size: 13px; font-weight: 550 }
.stat-number { display: block; font-size: 32px; line-height: 1.2; letter-spacing: -.045em; font-variant-numeric: tabular-nums }
.stat-number small { font-weight: 400; letter-spacing: 0 }
.finance-strip { grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 20px; overflow: hidden }
.finance-strip article { display: flex; align-items: center; gap: 14px; padding: 19px 22px; min-width: 0 }
.finance-strip article:first-child { color: white; background: var(--deep) }
.finance-strip article:first-child small { color: #cde1ff }
.finance-strip article:first-child .finance-icon { color: white; background: #28558e }
.finance-strip article>div { flex: 1; min-width: 0 }
.finance-strip article>div>span { font-size: 13px }
.finance-strip strong { display: block; font-size: clamp(19px,1.8vw,28px); line-height: 1.35; letter-spacing: -.035em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums }
.finance-icon.amber { color: var(--amber); background: #fff2d8 }
.dashboard-grid { grid-template-columns: minmax(0,1.6fr) minmax(256px,1fr); margin-bottom: 20px }
.panel-heading { padding: 20px 22px 15px }
.panel-heading p { font-size: 12px }
.panel-heading>svg { color: var(--muted) }
.chart-container { position: relative; height: 199px; margin: 6px 20px 0 }
.chart-legend { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; font-size: 11px }
.legend-dot,.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blue) }
.chart-details { margin: 0 22px 18px; font-size: 12px; color: var(--muted) }
.chart-details summary { cursor: pointer }
.chart-details table { margin-top: 10px }
.occupancy-ring { width: 144px; aspect-ratio: 1; margin: 0 auto 12px; padding: 13px; border-radius: 50%; background: conic-gradient(var(--blue) var(--progress),#e4edf8 0) }
.occupancy-ring>div { height: 100%; background: white; border-radius: 50%; display: grid; place-content: center; text-align: center }
.occupancy-ring strong { font-size: 31px; line-height: 1.25; letter-spacing: -.04em }
.occupancy-ring strong small { font-size: 18px }
.occupancy-ring span,.occupancy-details { font-size: 12px; color: var(--muted) }
.occupancy-details { padding: 0 24px 17px }
.occupancy-details>div { display: flex; align-items: center; justify-content: space-between; margin-top: 5px }
.occupancy-details strong { color: var(--ink) }
.dot { margin-right: 8px }
.dot.green { background: var(--teal) }
.dot.amber { background: #b87512 }
.text-link { color: var(--blue); gap: 5px; font-weight: 600; font-size: 12px; white-space: nowrap }
.text-link:hover { text-decoration: underline }
.text-link svg { width: 13px }
.tenant-list { padding: 0 20px 12px }
.tenant-item { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 11px 0 }
.tenant-item:last-child { border: 0 }
.tenant-item>div { min-width: 0; flex: 1 }
.tenant-item strong { overflow-wrap: anywhere; font-size: 13px }
.tenant-avatar { width: 30px; height: 30px; background: #e7f3f5; color: #185e70 }
.room-filters { display: flex; flex-wrap: wrap; margin: 0 20px 14px; gap: 6px }
.room-filters button { border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px; background: #fff; color: var(--muted); font-size: 12px }
.room-filters button[aria-pressed=true] { background: var(--deep); color: #fff; border-color: var(--deep) }
.room-grid { grid-template-columns: repeat(auto-fit,minmax(125px,1fr)); gap: 9px; padding: 0 20px 20px }
.room-tile { padding: 12px; border-radius: 9px; border: 1px solid var(--line); transition: transform .18s,border-color .18s }
.room-tile>div { display: flex; align-items: center; justify-content: space-between; gap: 5px }
.room-tile>div>svg { width: 15px; color: var(--muted) }
.room-tile>strong { display: block; font-size: 24px; letter-spacing: -.04em; margin: 5px 0 }
.room-tile>span { color: var(--muted); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* Data, filters and forms */
.count-pill,.page-current { display: inline-block; padding: 3px 8px; border-radius: 7px; color: var(--blue); background: var(--pale); font-size: 13px; font-weight: 600; letter-spacing: 0 }
.count-pill { vertical-align: middle; margin-left: 10px }
.info-strip,.notice,.payment-summary { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 9px; font-size: 13px }
.info-strip,.payment-summary { color: #234e84; background: #eaf2ff; border: 1px solid #c9dcf7 }
.info-strip,.notice { margin-bottom: 16px }
.notice { background: #eaf8ef; color: #186842; border: 1px solid #bddfc9 }
.notice.error { background: #fff0f1; color: #962641; border-color: #f0c4cc }
.notice>span { flex: 1 }
.notice .icon-btn { width: 24px; height: 24px }
.notice ul { margin: 5px 0; padding-left: 20px }
.filter-bar { padding: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.filter-bar>input[type=number] { width: 110px }
.search-field,.password-field { position: relative }
.search-field { flex: 1; min-width: 156px }
.search-field input { width: 100%; padding-left: 35px }
.search-field svg { position: absolute; top: 12px; left: 11px; width: 15px; height: 15px; color: var(--muted) }
input,select,textarea { color: var(--ink); border: 1px solid #bccbdc; border-radius: 7px; background: #fff; padding: 9px 11px; font-size: 13px; max-width: 100% }
input:focus,select:focus,textarea:focus { outline: 2px solid #93bafb; outline-offset: 1px; border-color: var(--blue) }
input::placeholder,textarea::placeholder { color: #657993 }
textarea { resize: vertical }
input[type=checkbox] { accent-color: var(--blue) }
.check-filter { display: inline-flex; align-items: center; gap: 4px; font-size: 12px }
.table-wrap { max-width: 100%; overflow-x: auto }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px }
th,td { padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap }
th { color: var(--muted); background: #f6f8fb; font-size: 11px; font-weight: 650; border-top: 1px solid var(--line) }
tr:last-child td { border-bottom: 0 }
.data-table th a,.room-number { display: inline-flex; align-items: center; gap: 5px }
.data-table th svg { width: 12px }
.data-table td { max-width: 280px; overflow: hidden; text-overflow: ellipsis }
.data-table tbody tr:hover { background: #f7faff }
.action-heading,.row-actions { text-align: right }
.cell-sub { display: block; margin-top: 2px; font-size: 11px }
.money { font-variant-numeric: tabular-nums }
.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 16px; padding: 3px 8px; background: var(--pale); color: #20519b; font-size: 11px; font-weight: 600; white-space: nowrap }
.badge:before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor }
.badge.green { color: #096249; background: #e1f4eb }
.badge.amber { color: #835000; background: #fff0ce }
.badge.red { color: #a42a42; background: #ffe9ec }
.pagination { padding: 15px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; flex-wrap: wrap }
.pagination>div { display: flex; gap: 8px; align-items: center }
.empty,.empty-state { text-align: center; padding: 25px; color: var(--muted); white-space: normal }
dialog { padding: 0; width: min(660px,calc(100% - 24px)); max-height: 90dvh; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: #fff; box-shadow: 0 20px 65px #142a4630 }
dialog::backdrop { background: #132a4780 }
.modal-heading,.modal-body { padding: 20px 24px }
.modal-heading { border-bottom: 1px solid var(--line) }
.form-grid { grid-template-columns: 1fr 1fr }
.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.form-field.full { grid-column: 1/-1 }
.form-field label,.login-form label { font-weight: 600; font-size: 13px }
.required,.field-error { color: var(--red) }
.required { margin-left: 3px }
.modal-footer { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 15px 24px; position: sticky; bottom: 0; background: white; border-top: 1px solid var(--line) }
.modal-footer>.muted { margin-right: auto; font-size: 12px }
.delete-dialog { max-width: 440px }
.delete-dialog h2,.delete-dialog p { margin-top: 10px }
.delete-symbol { width: 38px; height: 38px; border-radius: 10px; color: var(--red); background: #ffedf0 }
.danger-fill { background: var(--red); color: white }
.payment-summary { justify-content: space-between; align-items: center; margin-top: 18px }
.login-body,.error-body { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 20px }
.login-body { isolation: isolate; position: relative; background: #f0f5fc }
.login-body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 22% 32%, #a7c6ee 0, transparent 44%),
              radial-gradient(ellipse at 80% 73%, #a5d5e1 0, transparent 40%);
  filter: blur(28px);
}
.login-card { box-shadow: 0 18px 55px -24px #315b8973; width: min(100%,360px); padding: 30px; background: #fff; border-radius: 12px; border: 1px solid var(--line) }
.login-card h1 { font-size: 26px; margin: 0 0 23px }
.login-form label { display: block; margin: 15px 0 6px }
.login-form input { width: 100%; min-height: 43px }
.password-field input { padding-right: 44px }
.password-field .icon-btn { position: absolute; right: 4px; top: 4px }
.login-submit { width: 100%; margin-top: 23px }
.error-panel { max-width: 560px; padding: 28px }
.error-panel p { margin: 15px 0 }

/* Tablet and mobile */
@media (max-width:1150px) {
  :root { --side: 190px }
  .sidebar { padding-inline: 10px }
  .dashboard-grid { grid-template-columns: minmax(0,1.35fr) minmax(230px,1fr) }
  .stats-grid,.dashboard-grid { gap: 12px }
}
@media (max-width:900px) {
  .sidebar { width: min(255px,82vw); transform: translateX(-105%); visibility: hidden; transition: transform .26s cubic-bezier(.22,.75,.2,1), visibility 0s .26s }
  .sidebar.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s }
  .sidebar-shade { display: block; position: fixed; inset: 0; background: #12243d66; z-index: 25;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .24s ease, visibility 0s .26s }
  .sidebar-shade.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s }
  .app-shell { margin-left: 0 }
  .mobile-menu { display: inline-flex }
}
@media (max-width:700px) {
  #main-content { padding: 22px 14px 32px }
  .topbar { padding: 9px 13px; min-height: 57px }
  .today,.profile,.breadcrumb>span,.breadcrumb>svg { display: none }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px }
  .stat-card { padding: 13px }
  .stat-top { margin-bottom: 8px }
  .stat-number { font-size: 28px }
  .finance-strip,.dashboard-grid { grid-template-columns: 1fr }
  .finance-strip article { padding: 16px }
  .page-heading { flex-wrap: wrap; gap: 12px; margin-bottom: 17px }
  .panel-heading { padding: 16px; gap: 8px; align-items: flex-start }
  .panel-heading h2 { font-size: 17px }
  #chart-range { width: 108px; flex-shrink: 0; padding: 7px 3px; font-size: 12px }
  .actions { flex-wrap: wrap }
  .filter-bar { padding: 12px; flex-wrap: wrap }
  .search-field { flex-basis: 100% }
  .filter-bar select { flex: 1; min-width: 115px }
  .room-filters { margin-inline: 14px }
  .room-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding-inline: 14px }
  .form-grid { grid-template-columns: 1fr }
  .modal-body,.modal-heading,.modal-footer { padding: 15px }
  .modal-footer>.muted { margin-right: auto }
  .field-error,.form-field small { font-size: 12px }
  .login-form input,.form-field input,.form-field select,.form-field textarea { font-size: 16px }
}
/* Keep visible content usable even when scroll observation is unavailable. */
@keyframes rise-into-view {
  from { opacity: .28; translate: 0 14px }
  to { opacity: 1; translate: 0 0 }
}
@keyframes page-arrives {
  from { opacity: .65; transform: translateY(6px) }
  to { opacity: 1; transform: none }
}
@keyframes page-leaves { to { opacity: 0 } }
@keyframes drawer-leaves { to { transform: translateX(-100%); opacity: 0 } }

@media screen and (prefers-reduced-motion:no-preference) {
  .scroll-arrival { animation: rise-into-view .38s cubic-bezier(.2,.7,.25,1) }
  #main-content { view-transition-name: kos-content }
  .page-entrance #main-content { animation: page-arrives .22s ease-out }
  ::view-transition-old(root) { animation: none; opacity: 0 }
  ::view-transition-new(root) { animation: none }
  ::view-transition-group(kos-content) { animation: none }
  ::view-transition-old(kos-content), ::view-transition-new(kos-content) { object-fit: none; object-position: left top }
  ::view-transition-old(kos-content) { animation: page-leaves .12s ease-out both }
  ::view-transition-new(kos-content) { animation: page-arrives .23s ease-out both }
}
@media screen and (min-width:901px) and (prefers-reduced-motion:no-preference) {
  .nav-marker { view-transition-name: kos-marker }
  ::view-transition-group(kos-marker) { animation-duration: .24s; animation-timing-function: cubic-bezier(.2,.7,.25,1) }
}
@media screen and (max-width:900px) and (prefers-reduced-motion:no-preference) {
  .sidebar.is-open { view-transition-name: kos-drawer }
  ::view-transition-old(kos-drawer) { animation: drawer-leaves .22s ease-out both }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition: none !important; animation: none !important; scroll-behavior: auto !important }
}