@font-face {
    font-family: "Inter";
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --kp-navy: #07315b;
    --kp-teal: #00a6a6;
    --kp-teal-text: #007e88;
    --kp-background: #f7f9fc;
    --kp-muted: #6d7c94;
    --kp-border: #dce4ed;
    --kp-sidebar-width: 260px;
    --bs-body-color: var(--kp-navy);
    --bs-body-font-family: "Inter", "Segoe UI", sans-serif;
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.6;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
body { margin: 0; background: var(--kp-background); -webkit-font-smoothing: antialiased; }
body::after { content: ''; position: fixed; z-index: 2000; top: 0; left: 0; width: 100%; height: 3px; background: var(--kp-teal); opacity: 0; transform: scaleX(0); transform-origin: left; pointer-events: none; }
body.is-navigating::after { opacity: 1; animation: soft-navigation-progress .8s ease-in-out infinite; }
body.is-navigating .main-content { opacity: .58; }
@keyframes soft-navigation-progress { 0% { transform: scaleX(0); } 55% { transform: scaleX(.72); } 100% { transform: scaleX(1); } }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--kp-teal); outline-offset: 3px; }
.kp-icon { display: inline-block; width: 22px; height: 22px; flex: 0 0 auto; vertical-align: middle; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1100; padding: 10px 16px; color: #fff; background: var(--kp-navy); border-radius: 6px; }
.skip-link:focus { top: 12px; }
.sidebar { --bs-offcanvas-width: var(--kp-sidebar-width); position: fixed; inset: 0 auto 0 0; width: var(--kp-sidebar-width); height: 100dvh; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--kp-border); }
.sidebar-brand { position: relative; flex: 0 0 166px; display: flex; align-items: center; justify-content: center; }
.sidebar-brand a { display: flex; width: 180px; height: 150px; align-items: center; justify-content: center; border-radius: 8px; }
.sidebar-brand img { width: 160px; height: 160px; object-fit: contain; transform: translateY(-8px); }
.sidebar-close { position: absolute; top: 12px; right: 12px; }
.sidebar-navigation { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 12px 24px; }
.nav-caption { margin: 0 12px 11px; color: var(--kp-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.navigation-link { position: relative; width: 100%; display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 11px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--kp-navy); text-align: left; font-size: 15px; font-weight: 500; line-height: 1.5; transition: background-color .15s, color .15s; }
.navigation-link:hover { color: var(--kp-teal-text); background: #f1f7f8; }
.navigation-link.active { color: var(--kp-teal-text); background: #e6f7f7; font-weight: 600; }
.navigation-link.active > .kp-icon { color: var(--kp-teal); }
.nav-groups { margin-top: 9px; }
.nav-group + .nav-group { margin-top: 8px; }
.current-group { font-weight: 600; }
.nav-chevron { margin-left: auto; width: 14px; height: 14px; transition: transform .2s; }
.group-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(-90deg); }
.submenu { position: relative; margin: 5px 0 12px 27px; padding: 0 0 0 16px; list-style: none; }
.submenu::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 15px; width: 1px; background: var(--kp-border); }
.submenu li { position: relative; }
.submenu li::before { content: ""; position: absolute; left: -18px; top: 22px; width: 5px; height: 5px; border-radius: 50%; background: #bdc9d8; }
.submenu-link { min-height: 44px; padding: 10px 9px; gap: 11px; color: var(--kp-muted); font-size: 13px; font-weight: 400; }
.submenu-link .kp-icon { width: 19px; height: 19px; color: #395573; }
.sidebar-footer { flex: 0 0 auto; margin: 0 26px; padding: 16px 0 22px; border-top: 1px solid var(--kp-border); font-size: 13px; }
.sidebar-footer p { margin: 3px 0 0; color: var(--kp-muted); font-size: 12px; }
.workspace { display: flex; flex-direction: column; min-height: 100dvh; margin-left: var(--kp-sidebar-width); }
.topbar { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 30px; border-bottom: 1px solid var(--kp-border); background: #fff; }
.topbar-leading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.breadcrumb { --bs-breadcrumb-divider: '/'; --bs-breadcrumb-divider-color: #8c9bb0; margin: 0; align-items: center; gap: 8px; font-size: 14px; line-height: 1.5; }
.breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.breadcrumb-item + .breadcrumb-item::before { padding-right: 16px; }
.breadcrumb-item.active, .breadcrumb-group { color: var(--kp-muted); }
.breadcrumb a { display: inline-flex; align-items: center; border-radius: 4px; }
.workspace-identity { display: flex; align-items: center; gap: 14px; flex-shrink: 0; font-size: 14px; font-weight: 500; }
.workspace-monogram { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #008b9b; font-size: 17px; font-weight: 700; }
.icon-button { width: 40px; height: 40px; padding: 8px; display: inline-grid; place-items: center; flex-shrink: 0; border: 1px solid var(--kp-border); border-radius: 8px; background: #fff; color: var(--kp-navy); }
.icon-button:hover { background: #edf7f8; }
.main-content { flex: 1; display: flex; flex-direction: column; padding: 32px 30px; transition: opacity .14s ease; }
.main-content:focus { outline: none; }
.page-heading { margin: 0 4px 30px; }
.page-heading h1 { margin: 0 0 5px; font-size: 36px; line-height: 1.3; letter-spacing: -.035em; font-weight: 700; }
.page-heading p { margin: 0; color: var(--kp-muted); font-size: 16px; line-height: 1.6; }
.module-surface { flex: 1; min-height: 480px; display: grid; place-items: center; padding: 64px 28px; border: 1px solid #d5deeb; border-radius: 12px; background: #fff; }
.empty-state { text-align: center; max-width: 650px; }
.empty-state-icon { display: grid; place-items: center; width: 112px; height: 112px; margin: 0 auto 32px; border-radius: 22px; background: #e0f5f5; color: var(--kp-teal); }
.empty-state-icon .kp-icon { width: 56px; height: 56px; stroke-width: 1.75; }
.empty-state h2 { margin: 0 0 13px; font-size: 36px; font-weight: 700; letter-spacing: -.035em; line-height: 1.35; }
.empty-state p { margin: 0; color: var(--kp-muted); font-size: 18px; line-height: 1.65; }
.workspace-footer { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 30px; border-top: 1px solid #e4eaf1; color: var(--kp-muted); font-size: 12px; }

@media (min-width: 992px) {
    .sidebar.offcanvas-lg { position: fixed; background: #fff !important; }
}
@media (max-width: 1199.98px) {
    :root { --kp-sidebar-width: 248px; }
    .topbar, .workspace-footer { padding-left: 24px; padding-right: 24px; }
    .main-content { padding: 28px 24px; }
    .workspace-name { display: none; }
    .empty-state h2 { font-size: 29px; }
}
@media (max-width: 991.98px) {
    .workspace { margin-left: 0; }
    .sidebar { --bs-offcanvas-width: 280px; width: 280px; border-right: 0; }
    .sidebar-brand { flex-basis: 154px; }
    .topbar { min-height: 72px; }
    .page-heading h1 { font-size: 30px; }
    .module-surface { min-height: 440px; }
}
@media (max-width: 575.98px) {
    .topbar { padding: 14px 16px; gap: 8px; }
    .topbar-leading { gap: 10px; }
    .breadcrumb { gap: 4px; font-size: 12px; }
    .breadcrumb-item + .breadcrumb-item::before { padding-right: 8px; }
    .breadcrumb-group { display: none; }
    .breadcrumb .kp-icon { width: 18px; height: 18px; }
    .workspace-monogram { width: 34px; height: 34px; font-size: 13px; }
    .main-content { padding: 24px 16px; }
    .page-heading { margin: 0 0 22px; }
    .page-heading h1 { font-size: 28px; }
    .page-heading p { font-size: 14px; }
    .module-surface { min-height: 380px; padding: 44px 22px; }
    .empty-state-icon { width: 78px; height: 78px; border-radius: 18px; margin-bottom: 24px; }
    .empty-state-icon .kp-icon { width: 38px; height: 38px; }
    .empty-state h2 { font-size: 24px; }
    .empty-state p { font-size: 14px; }
    .workspace-footer { padding: 16px; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
    body.is-navigating::after { animation: none; transform: scaleX(1); }
}

.account-button { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; border-radius: 24px; background: transparent; color: var(--kp-navy); text-align: left; }
.account-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-name small { display: block; color: var(--kp-muted); font-size: 11px; font-weight: 400; }
.account-menu { min-width: 230px; border-color: var(--kp-border); padding: 8px; box-shadow: 0 8px 24px #07315b12; font-size: 14px; }
.account-summary { padding: 8px 12px; overflow-wrap: anywhere; }
.account-summary strong, .account-summary span { display: block; }
.account-summary span { color: var(--kp-muted); font-size: 12px; }
.account-menu .dropdown-item { padding: 9px 12px; border-radius: 5px; color: var(--kp-navy); }
.account-menu .dropdown-item:hover { background: #e6f7f7; }

.rooms-workspace { display: flex; flex-direction: column; gap: 20px; }
.room-toolbar { display: grid; grid-template-columns: minmax(240px, 1.5fr) minmax(150px, .8fr) minmax(160px, .9fr) auto; gap: 16px; align-items: end; padding: 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.room-field label { display: block; margin-bottom: 7px; color: #425974; font-size: 12px; font-weight: 650; }
.room-field .form-select { min-height: 44px; border-color: #cfd9e5; color: var(--kp-navy); font-size: 13px; font-weight: 550; }
.room-field .form-select:focus { border-color: var(--kp-teal); box-shadow: 0 0 0 3px #00a6a617; }
.room-toolbar-note { min-height: 44px; display: flex; align-items: center; gap: 11px; padding: 0 4px 0 10px; color: var(--kp-teal-text); }
.room-toolbar-note .kp-icon { width: 25px; height: 25px; }
.room-toolbar-note span, .room-toolbar-note strong, .room-toolbar-note small { display: block; }
.room-toolbar-note strong { font-size: 13px; line-height: 1.3; }
.room-toolbar-note small { margin-top: 2px; color: var(--kp-muted); font-size: 10px; white-space: nowrap; }
.room-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.room-stat { min-height: 86px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--kp-border); border-radius: 13px; background: #fff; }
.room-stat > span:last-child, .room-stat strong, .room-stat small { display: block; }
.room-stat strong { color: var(--kp-navy); font-size: 23px; line-height: 1.15; letter-spacing: -.035em; }
.room-stat small { margin-top: 4px; color: var(--kp-muted); font-size: 11px; line-height: 1.3; }
.room-stat-mark { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: #edf3f8; color: var(--kp-navy); }
.room-stat-mark:empty { width: 11px; height: 44px; border-radius: 8px; }
.room-stat-mark .kp-icon { width: 20px; height: 20px; }
.room-stat-available .room-stat-mark { background: #a7f3d0; }
.room-stat-occupied .room-stat-mark { background: #bfdbfe; }
.room-stat-other .room-stat-mark { background: linear-gradient(180deg, #fde047 0 50%, #fca5a5 50% 100%); }
.room-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.room-map-panel, .room-detail { border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.room-map-panel { min-width: 0; overflow: hidden; }
.room-map-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 24px; border-bottom: 1px solid #e6ecf2; }
.room-map-heading h2, .room-detail h2 { margin: 0; color: var(--kp-navy); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.room-map-heading p { margin: 4px 0 0; color: var(--kp-muted); font-size: 12px; }
.room-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px 14px; max-width: 350px; padding-top: 2px; }
.room-legend span { display: inline-flex; align-items: center; gap: 6px; color: #536981; font-size: 10px; white-space: nowrap; }
.legend-dot, .room-status-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.status-available { --room-accent: #07875f; --room-soft: #ecfdf5; --room-border: #6ee7b7; }
.status-occupied { --room-accent: #2563eb; --room-soft: #eff6ff; --room-border: #93c5fd; }
.status-reserved { --room-accent: #a16207; --room-soft: #fefce8; --room-border: #facc15; }
.status-maintenance { --room-accent: #dc2626; --room-soft: #fef2f2; --room-border: #fca5a5; }
.legend-dot { background: var(--room-accent); }
.room-floors { padding: 6px 24px 26px; }
.room-floor { padding-top: 21px; }
.room-floor-label { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; color: #526780; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.room-floor-label i { height: 1px; flex: 1; background: #e5ebf1; }
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 12px; }
.room-card { position: relative; min-height: 134px; display: flex; flex-direction: column; align-items: flex-start; padding: 14px; overflow: hidden; border: 1px solid var(--room-border); border-radius: 14px; background: var(--room-soft); color: var(--kp-navy); text-align: left; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.room-card::after { content: ""; position: absolute; right: -10px; bottom: -10px; width: 40px; height: 40px; border: 1px solid var(--room-border); border-radius: 11px 0 0 0; background: #ffffff70; }
.room-card:hover { transform: translateY(-2px); border-color: var(--room-accent); box-shadow: 0 8px 18px #07315b13; }
.room-card.selected { border-color: var(--room-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--room-accent) 20%, transparent), 0 8px 18px #07315b13; }
.room-card-top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.room-card-top small { color: #667a91; font-size: 9px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.room-status-dot { background: var(--room-accent); box-shadow: 0 0 0 4px #ffffffb3; }
.room-card > strong { margin-top: 9px; color: var(--kp-navy); font-size: 24px; line-height: 1; letter-spacing: -.04em; }
.room-card-type { margin-top: 6px; color: #526a82; font-size: 10px; }
.room-card-status { margin-top: auto; color: var(--room-accent); font-size: 10px; font-weight: 700; }
.room-card[hidden], .room-floor[hidden] { display: none; }
.room-detail { position: sticky; top: 20px; min-height: 374px; padding: 22px; }
.room-detail-empty { min-height: 328px; display: grid; place-items: center; align-content: center; text-align: center; }
.room-detail-empty .room-detail-icon { margin-bottom: 17px; }
.room-detail-empty p { max-width: 190px; margin: 6px auto 0; color: var(--kp-muted); font-size: 12px; line-height: 1.6; }
.room-detail-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; background: #e5f6f6; color: var(--kp-teal-text); }
.room-detail-icon .kp-icon { width: 25px; height: 25px; }
.room-detail-head { display: flex; align-items: center; gap: 12px; padding-bottom: 19px; border-bottom: 1px solid #e6ecf2; }
.room-detail-head > span:nth-child(2) { min-width: 0; }
.room-detail-head small, .room-detail-head strong { display: block; }
.room-detail-head small { color: var(--kp-muted); font-size: 10px; }
.room-detail-head strong { margin-top: 1px; font-size: 22px; line-height: 1.15; }
.room-detail-status { margin-left: auto; padding: 5px 8px; border-radius: 7px; background: var(--room-soft); color: var(--room-accent); font-size: 9px; font-weight: 750; }
.room-detail-list { margin: 5px 0 0; }
.room-detail-list div { padding: 13px 0; border-bottom: 1px solid #edf1f5; }
.room-detail-list dt { margin-bottom: 3px; color: var(--kp-muted); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.room-detail-list dd { margin: 0; color: #1a3a5d; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.room-detail-list dd strong { font-size: 14px; }
.room-detail-list dd small { margin-left: 3px; color: var(--kp-muted); font-size: 9px; }
.room-preview-note { margin: 16px 0 0; padding: 10px 11px; border-radius: 8px; background: #f4f7fa; color: var(--kp-muted); font-size: 9px; line-height: 1.5; }
.room-empty { min-height: 270px; display: grid; place-items: center; align-content: center; color: var(--kp-muted); text-align: center; }
.room-empty[hidden] { display: none; }
.room-empty .kp-icon { width: 38px; height: 38px; margin-bottom: 12px; color: #9aacbf; }
.room-empty strong, .room-empty span { display: block; }
.room-empty strong { color: var(--kp-navy); font-size: 14px; }
.room-empty span { margin-top: 3px; font-size: 11px; }
.room-loading { min-height: 360px; display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); align-content: start; gap: 12px; padding-top: 24px; }
.room-loading span { height: 134px; border-radius: 14px; background: linear-gradient(90deg, #f0f4f8 25%, #f8fafc 50%, #f0f4f8 75%); background-size: 200% 100%; animation: room-shimmer 1.25s infinite linear; }
.room-error { min-height: 300px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--kp-muted); }
.room-error .kp-icon { width: 38px; height: 38px; margin-bottom: 12px; color: #bf5a4d; }
.room-error strong, .room-error span { display: block; }
.room-error strong { color: var(--kp-navy); font-size: 14px; }
.room-error span { margin-top: 4px; font-size: 11px; }
.room-error button { margin-top: 15px; padding: 8px 13px; border: 1px solid #b9c9d8; border-radius: 8px; background: #fff; color: var(--kp-navy); font-size: 11px; font-weight: 650; }
@keyframes room-shimmer { to { background-position: -200% 0; } }

@media (max-width: 1199.98px) {
    .room-toolbar { grid-template-columns: 1.3fr .8fr .9fr; }
    .room-toolbar-note { display: none; }
    .room-layout { grid-template-columns: minmax(0, 1fr) 270px; }
    .room-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
}
@media (max-width: 991.98px) {
    .room-layout { grid-template-columns: 1fr; }
    .room-detail { position: static; min-height: 0; }
    .room-detail-empty { min-height: 190px; }
}
@media (max-width: 767.98px) {
    .room-toolbar { grid-template-columns: 1fr 1fr; }
    .room-property-field { grid-column: 1 / -1; }
    .room-summary { grid-template-columns: 1fr 1fr; }
    .room-map-heading { display: block; }
    .room-legend { justify-content: flex-start; margin-top: 14px; }
}
@media (max-width: 575.98px) {
    .rooms-workspace { gap: 14px; }
    .room-toolbar { gap: 12px; padding: 15px; }
    .room-field .form-select { min-height: 42px; font-size: 12px; }
    .room-summary { gap: 10px; }
    .room-stat { min-height: 72px; gap: 10px; padding: 12px; }
    .room-stat-mark { width: 32px; height: 32px; border-radius: 9px; }
    .room-stat-mark:empty { width: 8px; height: 34px; }
    .room-stat strong { font-size: 20px; }
    .room-stat small { font-size: 9px; }
    .room-map-heading { padding: 18px; }
    .room-map-heading h2 { font-size: 16px; }
    .room-floors { padding: 3px 16px 20px; }
    .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .room-card { min-height: 125px; }
    .room-detail { padding: 18px; }
}

.properties-workspace { display: flex; flex-direction: column; gap: 20px; }
.property-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.property-stat { min-height: 88px; display: flex; align-items: center; gap: 14px; padding: 17px 18px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.property-stat > span:last-child, .property-stat strong, .property-stat small { display: block; }
.property-stat strong { color: var(--kp-navy); font-size: 24px; line-height: 1.15; letter-spacing: -.04em; }
.property-stat small { margin-top: 4px; color: var(--kp-muted); font-size: 11px; }
.property-stat-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: #e8f1f7; color: var(--kp-navy); }
.property-stat-icon .kp-icon { width: 21px; height: 21px; }
.property-stat-accent { width: 10px; height: 44px; flex: 0 0 auto; border-radius: 8px; }
.accent-active { background: #5eead4; }
.accent-room { background: #93c5fd; }
.accent-available { background: #6ee7b7; }
.property-directory { overflow: hidden; border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.property-directory-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; border-bottom: 1px solid #e6ecf2; }
.property-directory-head h2 { margin: 0; color: var(--kp-navy); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.property-directory-head p { margin: 4px 0 0; color: var(--kp-muted); font-size: 12px; }
.property-controls { display: flex; align-items: center; gap: 10px; }
.property-search { position: relative; width: 250px; }
.property-search .kp-icon { position: absolute; top: 50%; left: 13px; width: 17px; height: 17px; color: #72849a; transform: translateY(-50%); pointer-events: none; }
.property-search input { width: 100%; min-height: 42px; padding: 9px 13px 9px 40px; border: 1px solid #cfd9e5; border-radius: 9px; color: var(--kp-navy); background: #fff; font-size: 12px; outline: 0; }
.property-search input::placeholder { color: #8a9aaf; }
.property-search input:focus { border-color: var(--kp-teal); box-shadow: 0 0 0 3px #00a6a617; }
.property-filter .form-select { width: 142px; min-height: 42px; border-color: #cfd9e5; color: var(--kp-navy); font-size: 12px; }
.property-filter .form-select:focus { border-color: var(--kp-teal); box-shadow: 0 0 0 3px #00a6a617; }
.property-list-wrap { padding: 0 24px 24px; }
.property-list-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; color: var(--kp-muted); font-size: 10px; }
.property-list-meta strong { color: #425a74; font-size: 11px; }
.property-list { display: flex; flex-direction: column; gap: 12px; }
.property-card { display: grid; grid-template-columns: 92px minmax(210px, 1fr) minmax(280px, .9fr) 112px; gap: 20px; align-items: center; min-height: 154px; padding: 18px; border: 1px solid #d9e2ec; border-radius: 14px; background: #fff; transition: border-color .16s, box-shadow .16s, transform .16s; }
.property-card:hover { border-color: #a8c3d5; box-shadow: 0 10px 24px #07315b0d; transform: translateY(-1px); }
.property-card.is-draft { background: #fafbfd; }
.property-visual { position: relative; width: 92px; height: 112px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: linear-gradient(145deg, #07315b, #087b8b); color: #fff; }
.property-card:nth-child(2n) .property-visual { background: linear-gradient(145deg, #0d496a, #00a6a6); }
.property-card.is-draft .property-visual { background: linear-gradient(145deg, #77869a, #a8b4c3); }
.property-building-icon { position: absolute; top: 13px; left: 13px; opacity: .65; }
.property-building-icon .kp-icon { width: 22px; height: 22px; }
.property-code { position: relative; margin-top: 24px; font-size: 27px; font-weight: 750; letter-spacing: -.05em; }
.property-main { min-width: 0; }
.property-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.property-title-row h3 { margin: 0; color: var(--kp-navy); font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
.property-title-row p { margin: 3px 0 0; color: var(--kp-muted); font-size: 10px; line-height: 1.5; }
.property-status { flex: 0 0 auto; padding: 5px 8px; border-radius: 7px; font-size: 9px; font-weight: 750; }
.property-status-active { color: #08775a; background: #dcf8ee; }
.property-status-draft { color: #65758a; background: #e9eef3; }
.property-manager { margin: 13px 0 0; color: #536b83; font-size: 10px; }
.property-occupancy { margin-top: 16px; }
.property-occupancy-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: var(--kp-muted); font-size: 9px; }
.property-occupancy-label strong { color: var(--kp-teal-text); font-size: 10px; }
.property-progress { height: 6px; overflow: hidden; border-radius: 9px; background: #e7edf3; }
.property-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--kp-teal-text), #22c5b5); transition: width .35s ease; }
.property-room-breakdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid #e0e7ee; border-radius: 12px; background: #fafcfd; }
.property-room-breakdown > div { min-width: 0; padding: 14px 10px; text-align: center; }
.property-room-breakdown > div + div { border-left: 1px solid #e0e7ee; }
.property-room-breakdown strong, .property-room-breakdown span { display: block; }
.property-room-breakdown strong { color: var(--kp-navy); font-size: 18px; line-height: 1.2; }
.property-room-breakdown span { margin-top: 4px; color: var(--kp-muted); font-size: 8px; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; display: inline-block; margin-right: 4px; border-radius: 50%; vertical-align: 1px; background: var(--room-accent); }
.status-other { background: linear-gradient(135deg, #facc15 0 50%, #ef4444 50% 100%); }
.property-action { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; }
.property-qr-button { min-height: 38px; padding: 8px 10px; border: 0; border-radius: 9px; color: #fff; background: var(--kp-navy); font-size: 10px; font-weight: 700; white-space: nowrap; }
.property-qr-button:hover { background: #0b4779; }
.property-qr-button:disabled { cursor: not-allowed; opacity: .5; }
.property-room-link { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 10px; border: 1px solid #abd7db; border-radius: 9px; color: var(--kp-teal-text); background: #f0fbfb; font-size: 10px; font-weight: 700; white-space: nowrap; }
.property-room-link:hover { border-color: var(--kp-teal); color: #006975; background: #e5f8f8; }
.property-room-link .kp-icon { width: 13px; height: 13px; }
.property-no-room { color: var(--kp-muted); font-size: 9px; text-align: right; }
.property-preview-note { margin: -5px 2px 0; color: var(--kp-muted); font-size: 9px; }
.property-loading { display: flex; flex-direction: column; gap: 12px; }
.property-loading span { height: 154px; border-radius: 14px; background: linear-gradient(90deg, #f0f4f8 25%, #f8fafc 50%, #f0f4f8 75%); background-size: 200% 100%; animation: room-shimmer 1.25s infinite linear; }
.property-error, .property-empty { min-height: 270px; display: grid; place-items: center; align-content: center; color: var(--kp-muted); text-align: center; }
.property-error .kp-icon, .property-empty .kp-icon { width: 38px; height: 38px; margin-bottom: 12px; color: #91a2b5; }
.property-error .kp-icon { color: #bf5a4d; }
.property-error strong, .property-error span, .property-empty strong, .property-empty span { display: block; }
.property-error strong, .property-empty strong { color: var(--kp-navy); font-size: 14px; }
.property-error span, .property-empty span { margin-top: 4px; font-size: 11px; }
.property-error button, .property-empty button { margin-top: 15px; padding: 8px 13px; border: 1px solid #b9c9d8; border-radius: 8px; background: #fff; color: var(--kp-navy); font-size: 11px; font-weight: 650; }
.has-qr-dialog { overflow: hidden; }
.property-qr-overlay { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 24px; background: #031b33b8; backdrop-filter: blur(4px); }
.property-qr-dialog { width: min(100%, 520px); max-height: calc(100vh - 48px); overflow: auto; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px #00152d55; }
.property-qr-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px; border-bottom: 1px solid #e3eaf0; }
.property-qr-dialog-head strong, .property-qr-dialog-head span { display: block; }
.property-qr-dialog-head strong { color: var(--kp-navy); font-size: 14px; }
.property-qr-dialog-head span { margin-top: 3px; color: var(--kp-muted); font-size: 10px; }
.property-qr-dialog-head button { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #d5dee7; border-radius: 9px; color: #526a82; background: #fff; }
.property-qr-dialog-head .kp-icon { width: 17px; height: 17px; }
.property-qr-sheet { margin: 20px; padding: 30px; border: 1px solid #dce5ed; border-radius: 15px; text-align: center; background: #fff; }
.property-qr-logo { width: 104px; height: auto; object-fit: contain; }
.property-qr-kicker { margin: 13px 0 5px; color: var(--kp-teal-text); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.property-qr-sheet h2 { margin: 0; color: var(--kp-navy); font-size: 21px; font-weight: 750; letter-spacing: -.025em; }
.property-qr-address { min-height: 18px; margin: 5px 0 16px; color: var(--kp-muted); font-size: 10px; }
.property-qr-image-wrap { width: min(100%, 272px); margin: 0 auto; padding: 12px; border: 1px solid #dfe8ef; border-radius: 16px; background: #fff; }
.property-qr-image-wrap img { width: 100%; height: auto; display: block; aspect-ratio: 1; }
.property-qr-sheet h3 { margin: 17px 0 5px; color: var(--kp-navy); font-size: 14px; }
.property-qr-help { max-width: 360px; margin: 0 auto; color: #64788e; font-size: 10px; line-height: 1.55; }
.property-qr-url { margin: 14px auto 0; padding: 8px 10px; overflow-wrap: anywhere; border-radius: 7px; color: #36556f; background: #f1f6f9; font-size: 8px; }
.property-qr-sheet small { display: block; margin-top: 16px; color: #8a99a9; font-size: 8px; }
.property-qr-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 0 20px 20px; }
.property-qr-actions a, .property-qr-actions button { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 15px; border-radius: 9px; font-size: 11px; font-weight: 700; }
.property-qr-actions a { border: 1px solid #cbd7e2; color: var(--kp-navy); background: #fff; }
.property-qr-actions button { border: 1px solid var(--kp-navy); color: #fff; background: var(--kp-navy); }

@media (max-width: 1199.98px) {
    .property-card { grid-template-columns: 82px minmax(210px, 1fr) minmax(250px, .9fr); }
    .property-visual { width: 82px; }
    .property-action { grid-column: 2 / -1; justify-content: flex-start; margin-top: -8px; }
}
@media (max-width: 991.98px) {
    .property-card { grid-template-columns: 92px minmax(220px, 1fr) minmax(260px, .9fr) 112px; }
    .property-visual { width: 92px; }
    .property-action { grid-column: auto; justify-content: flex-end; margin-top: 0; }
}
@media (max-width: 767.98px) {
    .property-summary { grid-template-columns: 1fr 1fr; }
    .property-directory-head { align-items: flex-start; flex-direction: column; }
    .property-controls { width: 100%; }
    .property-search { flex: 1; width: auto; }
    .property-card { grid-template-columns: 76px minmax(0, 1fr); gap: 15px; }
    .property-visual { width: 76px; height: 100px; }
    .property-room-breakdown, .property-action { grid-column: 1 / -1; }
    .property-action { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
    .properties-workspace { gap: 14px; }
    .property-summary { gap: 10px; }
    .property-stat { min-height: 72px; gap: 10px; padding: 12px; }
    .property-stat-icon { width: 32px; height: 32px; border-radius: 9px; }
    .property-stat-accent { width: 8px; height: 34px; }
    .property-stat strong { font-size: 20px; }
    .property-stat small { font-size: 9px; }
    .property-directory-head { padding: 18px; }
    .property-controls { align-items: stretch; flex-direction: column; }
    .property-filter .form-select { width: 100%; }
    .property-list-wrap { padding: 0 14px 18px; }
    .property-card { padding: 14px; }
    .property-title-row { display: block; }
    .property-status { display: inline-block; margin-top: 7px; }
    .property-room-breakdown > div { padding: 12px 5px; }
    .property-room-breakdown span { font-size: 7px; }
    .property-qr-overlay { padding: 10px; }
    .property-qr-dialog { max-height: calc(100vh - 20px); }
    .property-qr-sheet { margin: 12px; padding: 22px 16px; }
    .property-qr-actions { padding: 0 12px 12px; }
    .property-qr-actions a, .property-qr-actions button { flex: 1; }
}

@media print {
    @page { size: A4 portrait; margin: 14mm; }
    body.has-qr-dialog * { visibility: hidden !important; }
    body.has-qr-dialog .property-qr-sheet, body.has-qr-dialog .property-qr-sheet * { visibility: visible !important; }
    body.has-qr-dialog .property-qr-sheet { position: fixed; inset: 0; width: 160mm; margin: 0 auto; padding: 16mm 13mm; border: 1px solid #ccd7e0; border-radius: 5mm; box-shadow: none; }
    body.has-qr-dialog .property-qr-logo { width: 38mm; }
    body.has-qr-dialog .property-qr-kicker { margin-top: 6mm; font-size: 9pt; }
    body.has-qr-dialog .property-qr-sheet h2 { font-size: 23pt; }
    body.has-qr-dialog .property-qr-address { margin: 2mm 0 7mm; font-size: 10pt; }
    body.has-qr-dialog .property-qr-image-wrap { width: 82mm; padding: 4mm; border-radius: 4mm; }
    body.has-qr-dialog .property-qr-sheet h3 { margin-top: 7mm; font-size: 15pt; }
    body.has-qr-dialog .property-qr-help { max-width: 120mm; font-size: 10pt; }
    body.has-qr-dialog .property-qr-url { margin-top: 6mm; font-size: 8pt; }
    body.has-qr-dialog .property-qr-sheet small { margin-top: 7mm; font-size: 8pt; }
}

.facilities-workspace { display: flex; flex-direction: column; gap: 20px; }
.facility-toolbar { display: grid; grid-template-columns: minmax(220px, 1.25fr) minmax(170px, .8fr) minmax(220px, 1fr) auto; gap: 16px; align-items: end; padding: 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.facility-field label, .facility-search > span:first-child { display: block; margin-bottom: 7px; color: #425974; font-size: 12px; font-weight: 650; }
.facility-field .form-select { min-height: 44px; border-color: #cfd9e5; color: var(--kp-navy); font-size: 13px; font-weight: 550; }
.facility-field .form-select:focus { border-color: var(--kp-teal); box-shadow: 0 0 0 3px #00a6a617; }
.facility-search-control { position: relative; display: block; }
.facility-search-control .kp-icon { position: absolute; top: 50%; left: 13px; width: 17px; height: 17px; color: #72849a; transform: translateY(-50%); pointer-events: none; }
.facility-search-control input { width: 100%; min-height: 44px; padding: 9px 13px 9px 40px; border: 1px solid #cfd9e5; border-radius: 7px; color: var(--kp-navy); background: #fff; font-size: 12px; outline: 0; }
.facility-search-control input::placeholder { color: #8a9aaf; }
.facility-search-control input:focus { border-color: var(--kp-teal); box-shadow: 0 0 0 3px #00a6a617; }
.facility-toolbar-note { min-height: 44px; display: flex; align-items: center; gap: 11px; padding: 0 4px 0 8px; color: var(--kp-teal-text); }
.facility-toolbar-note .kp-icon { width: 25px; height: 25px; }
.facility-toolbar-note span, .facility-toolbar-note strong, .facility-toolbar-note small { display: block; }
.facility-toolbar-note strong { font-size: 13px; line-height: 1.3; }
.facility-toolbar-note small { margin-top: 2px; color: var(--kp-muted); font-size: 10px; white-space: nowrap; }
.facility-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.facility-stat { min-height: 86px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--kp-border); border-radius: 13px; background: #fff; }
.facility-stat > span:last-child, .facility-stat strong, .facility-stat small { display: block; }
.facility-stat strong { color: var(--kp-navy); font-size: 23px; line-height: 1.15; letter-spacing: -.035em; }
.facility-stat small { margin-top: 4px; color: var(--kp-muted); font-size: 11px; line-height: 1.3; }
.facility-stat-icon, .facility-stat-mark { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; }
.facility-stat-icon { color: var(--kp-navy); background: #edf3f8; }
.facility-stat-mark .kp-icon, .facility-stat-icon .kp-icon { width: 20px; height: 20px; }
.mark-room { color: #2563eb; background: #dbeafe; }
.mark-shared { color: #07875f; background: #d1fae5; }
.mark-attention { color: #dc2626; background: #fee2e2; }
.facility-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.facility-catalog, .facility-detail { border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.facility-catalog { min-width: 0; overflow: hidden; }
.facility-catalog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px; border-bottom: 1px solid #e6ecf2; }
.facility-catalog-head h2, .facility-detail h2 { margin: 0; color: var(--kp-navy); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.facility-catalog-head p { margin: 4px 0 0; color: var(--kp-muted); font-size: 12px; }
.facility-catalog-head > span { padding-top: 4px; color: var(--kp-muted); font-size: 10px; white-space: nowrap; }
.facility-catalog-body { padding: 20px 24px 24px; }
.facility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.facility-card { min-height: 150px; display: grid; grid-template-columns: 50px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 0 13px; padding: 16px; border: 1px solid #d9e3ec; border-radius: 14px; background: #fff; color: var(--kp-navy); text-align: left; transition: transform .16s, border-color .16s, box-shadow .16s; }
.facility-card:hover { transform: translateY(-2px); border-color: #9ccbd0; box-shadow: 0 8px 20px #07315b0d; }
.facility-card.selected { border-color: var(--kp-teal); box-shadow: 0 0 0 3px #00a6a619, 0 8px 20px #07315b0d; }
.facility-card.condition-attention { border-color: #f2b8b8; background: #fffafa; }
.facility-card.condition-attention.selected { border-color: #dc2626; box-shadow: 0 0 0 3px #dc262619, 0 8px 20px #07315b0d; }
.facility-card-icon { width: 50px; height: 50px; display: grid; place-items: center; grid-row: 1; border-radius: 13px; color: var(--kp-teal-text); background: #e7f7f7; }
.facility-card.condition-attention .facility-card-icon { color: #c92a2a; background: #fee8e8; }
.facility-card-icon > span { display: grid; place-items: center; }
.facility-card-icon .kp-icon { width: 25px; height: 25px; }
.facility-card-copy { min-width: 0; padding-top: 1px; }
.facility-card-copy small, .facility-card-copy strong, .facility-card-copy > span { display: block; }
.facility-card-copy small { color: var(--kp-muted); font-size: 8px; font-weight: 650; letter-spacing: .045em; text-transform: uppercase; }
.facility-card-copy strong { margin-top: 4px; font-size: 14px; line-height: 1.3; }
.facility-card-copy > span { margin-top: 5px; color: #5c7188; font-size: 9px; line-height: 1.45; }
.facility-card-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #edf1f5; }
.facility-scope { color: #63768b; font-size: 9px; }
.facility-condition { display: inline-flex; align-items: center; gap: 5px; color: #08775a; font-size: 9px; font-weight: 700; }
.facility-condition i, .facility-detail-condition i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.condition-attention .facility-condition { color: #c92a2a; }
.facility-detail { position: sticky; top: 20px; min-height: 414px; padding: 22px; }
.facility-detail-empty { min-height: 368px; display: grid; place-items: center; align-content: center; text-align: center; }
.facility-detail-empty .facility-detail-icon { margin-bottom: 17px; }
.facility-detail-empty p { max-width: 205px; margin: 6px auto 0; color: var(--kp-muted); font-size: 12px; line-height: 1.6; }
.facility-detail-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: var(--kp-teal-text); background: #e5f6f6; }
.facility-detail-icon .kp-icon { width: 25px; height: 25px; }
.facility-detail-head { display: flex; align-items: center; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid #e6ecf2; }
.facility-detail-head small, .facility-detail-head strong { display: block; }
.facility-detail-head small { color: var(--kp-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.facility-detail-head strong { margin-top: 2px; font-size: 16px; line-height: 1.3; }
.facility-detail-condition { display: inline-flex; align-items: center; gap: 6px; margin-top: 15px; padding: 6px 9px; border-radius: 7px; color: #08775a; background: #dcf8ee; font-size: 9px; font-weight: 750; }
.facility-detail-condition.condition-attention { color: #c92a2a; background: #fee2e2; }
.facility-detail-list { margin: 8px 0 0; }
.facility-detail-list div { padding: 11px 0; border-bottom: 1px solid #edf1f5; }
.facility-detail-list dt { margin-bottom: 3px; color: var(--kp-muted); font-size: 8px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.facility-detail-list dd { margin: 0; color: #1a3a5d; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.facility-detail-list dd strong { font-size: 14px; }
.facility-preview-note { margin: 14px 0 0; padding: 10px 11px; border-radius: 8px; color: var(--kp-muted); background: #f4f7fa; font-size: 9px; line-height: 1.5; }
.facility-loading { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.facility-loading span { height: 150px; border-radius: 14px; background: linear-gradient(90deg, #f0f4f8 25%, #f8fafc 50%, #f0f4f8 75%); background-size: 200% 100%; animation: room-shimmer 1.25s infinite linear; }
.facility-error, .facility-empty { min-height: 310px; display: grid; place-items: center; align-content: center; color: var(--kp-muted); text-align: center; }
.facility-error .kp-icon, .facility-empty .kp-icon { width: 38px; height: 38px; margin-bottom: 12px; color: #91a2b5; }
.facility-error .kp-icon { color: #bf5a4d; }
.facility-error strong, .facility-error span, .facility-empty strong, .facility-empty span { display: block; }
.facility-error strong, .facility-empty strong { color: var(--kp-navy); font-size: 14px; }
.facility-error span, .facility-empty span { margin-top: 4px; font-size: 11px; }
.facility-error button, .facility-empty button { margin-top: 15px; padding: 8px 13px; border: 1px solid #b9c9d8; border-radius: 8px; color: var(--kp-navy); background: #fff; font-size: 11px; font-weight: 650; }

@media (max-width: 1199.98px) {
    .facility-toolbar { grid-template-columns: 1.2fr .8fr 1fr; }
    .facility-toolbar-note { display: none; }
    .facility-layout { grid-template-columns: minmax(0, 1fr) 270px; }
}
@media (max-width: 991.98px) {
    .facility-layout { grid-template-columns: 1fr; }
    .facility-detail { position: static; min-height: 0; }
    .facility-detail-empty { min-height: 190px; }
}
@media (max-width: 767.98px) {
    .facility-toolbar { grid-template-columns: 1fr 1fr; }
    .facility-property-field { grid-column: 1 / -1; }
    .facility-search { grid-column: 1 / -1; }
    .facility-summary { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .facilities-workspace { gap: 14px; }
    .facility-toolbar { gap: 12px; padding: 15px; }
    .facility-field .form-select, .facility-search-control input { min-height: 42px; font-size: 12px; }
    .facility-summary { gap: 10px; }
    .facility-stat { min-height: 72px; gap: 9px; padding: 12px; }
    .facility-stat-icon, .facility-stat-mark { width: 32px; height: 32px; border-radius: 9px; }
    .facility-stat strong { font-size: 20px; }
    .facility-stat small { font-size: 9px; }
    .facility-catalog-head { padding: 18px; }
    .facility-catalog-head > span { display: none; }
    .facility-catalog-body { padding: 14px; }
    .facility-grid, .facility-loading { grid-template-columns: 1fr; }
    .facility-card { min-height: 142px; }
    .facility-detail { padding: 18px; }
}

.residents-workspace { display: flex; flex-direction: column; gap: 20px; }
.resident-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.resident-stat { min-height: 86px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--kp-border); border-radius: 13px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.resident-stat > span:last-child, .resident-stat strong, .resident-stat small { display: block; }
.resident-stat strong { color: var(--kp-navy); font-size: 23px; line-height: 1.15; letter-spacing: -.035em; }
.resident-stat small { margin-top: 4px; color: var(--kp-muted); font-size: 11px; line-height: 1.3; }
.resident-stat-icon, .resident-stat-mark { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; }
.resident-stat-icon { color: var(--kp-navy); background: #edf3f8; }
.resident-stat-icon .kp-icon, .resident-stat-mark .kp-icon { width: 20px; height: 20px; }
.mark-resident-active { color: #07875f; background: #d1fae5; }
.mark-resident-ending { color: #a16207; background: #fef3c7; }
.mark-resident-overdue { color: #dc2626; background: #fee2e2; }
.resident-toolbar { display: grid; grid-template-columns: minmax(240px, 1.2fr) minmax(190px, .9fr) minmax(180px, .85fr) auto; gap: 16px; align-items: end; padding: 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.resident-search > span:first-child, .resident-field label { display: block; margin-bottom: 7px; color: #425974; font-size: 12px; font-weight: 650; }
.resident-search-control { position: relative; display: block; }
.resident-search-control .kp-icon { position: absolute; top: 50%; left: 13px; width: 17px; height: 17px; color: #72849a; transform: translateY(-50%); pointer-events: none; }
.resident-search-control input { width: 100%; min-height: 44px; padding: 9px 13px 9px 40px; border: 1px solid #cfd9e5; border-radius: 7px; color: var(--kp-navy); background: #fff; font-size: 12px; outline: 0; }
.resident-search-control input::placeholder { color: #8a9aaf; }
.resident-search-control input:focus, .resident-field .form-select:focus { border-color: var(--kp-teal); box-shadow: 0 0 0 3px #00a6a617; }
.resident-field .form-select { min-height: 44px; border-color: #cfd9e5; color: var(--kp-navy); font-size: 12px; font-weight: 550; }
.resident-toolbar-note { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 4px 0 8px; color: var(--kp-teal-text); }
.resident-toolbar-note .kp-icon { width: 25px; height: 25px; }
.resident-toolbar-note span, .resident-toolbar-note strong, .resident-toolbar-note small { display: block; }
.resident-toolbar-note strong { font-size: 13px; line-height: 1.3; }
.resident-toolbar-note small { margin-top: 2px; color: var(--kp-muted); font-size: 10px; white-space: nowrap; }
.resident-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.resident-table-panel, .resident-detail { border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.resident-table-panel { min-width: 0; overflow: hidden; }
.resident-table-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px; border-bottom: 1px solid #e6ecf2; }
.resident-table-head h2, .resident-detail h2 { margin: 0; color: var(--kp-navy); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.resident-table-head p { margin: 4px 0 0; color: var(--kp-muted); font-size: 12px; }
.resident-table-head > span { padding-top: 4px; color: var(--kp-muted); font-size: 10px; white-space: nowrap; }
.resident-table-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.resident-table { width: 100%; min-width: 810px; border-collapse: collapse; table-layout: fixed; }
.resident-table th { padding: 12px 14px; border-bottom: 1px solid #e6ecf2; color: #6c7e92; background: #f8fafc; font-size: 8px; font-weight: 700; letter-spacing: .055em; text-align: left; text-transform: uppercase; }
.resident-table th:first-child, .resident-table td:first-child { padding-left: 22px; width: 23%; }
.resident-table th:nth-child(2) { width: 21%; }
.resident-table th:nth-child(3) { width: 19%; }
.resident-table th:nth-child(4) { width: 19%; }
.resident-table th:nth-child(5) { width: 18%; }
.resident-table td { height: 74px; padding: 11px 14px; border-bottom: 1px solid #edf1f5; color: #2b4966; font-size: 10px; line-height: 1.35; vertical-align: middle; }
.resident-table tbody tr { transition: background-color .14s, box-shadow .14s; }
.resident-table tbody tr:hover { background: #f8fbfc; }
.resident-table tbody tr.selected { background: #effafa; box-shadow: inset 3px 0 var(--kp-teal); }
.resident-table td > strong, .resident-table td > span:not(.resident-payment-status), .resident-table td > small { display: block; }
.resident-table td > strong { color: var(--kp-navy); font-size: 10px; font-weight: 650; }
.resident-table td > small { margin-top: 3px; color: var(--kp-muted); font-size: 8px; overflow-wrap: anywhere; }
.resident-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; border-radius: 8px; color: var(--kp-navy); background: transparent; text-align: left; }
.resident-person > span:last-child { min-width: 0; }
.resident-person strong, .resident-person small { display: block; }
.resident-person strong { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.resident-person small { margin-top: 3px; color: var(--kp-muted); font-size: 8px; }
.resident-avatar, .resident-detail-avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #087985; background: #dff5f5; font-weight: 750; }
.resident-avatar { width: 38px; height: 38px; font-size: 10px; }
.resident-room-label { display: inline-flex !important; align-items: center; gap: 5px; margin-top: 5px; color: var(--kp-teal-text); font-size: 8px; font-weight: 650; }
.resident-room-label .kp-icon { width: 13px; height: 13px; }
.resident-payment-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 7px; font-size: 8px; font-weight: 700; white-space: nowrap; }
.resident-payment-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.payment-paid { color: #08775a; background: #dcf8ee; }
.payment-due { color: #92610a; background: #fef3c7; }
.payment-overdue { color: #c92a2a; background: #fee2e2; }
.resident-detail { position: sticky; top: 20px; min-height: 430px; padding: 22px; }
.resident-detail-empty { min-height: 384px; display: grid; place-items: center; align-content: center; text-align: center; }
.resident-detail-empty .resident-detail-icon { margin-bottom: 17px; }
.resident-detail-empty p { max-width: 205px; margin: 6px auto 0; color: var(--kp-muted); font-size: 12px; line-height: 1.6; }
.resident-detail-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; color: var(--kp-teal-text); background: #e5f6f6; }
.resident-detail-icon .kp-icon { width: 25px; height: 25px; }
.resident-detail-profile { display: flex; align-items: center; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid #e6ecf2; }
.resident-detail-avatar { width: 48px; height: 48px; font-size: 12px; }
.resident-detail-profile > span:last-child { min-width: 0; }
.resident-detail-profile strong, .resident-detail-profile small { display: block; }
.resident-detail-profile strong { font-size: 15px; line-height: 1.3; }
.resident-detail-profile small { margin-top: 3px; overflow: hidden; color: var(--kp-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.resident-detail-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.resident-contract-badge { padding: 5px 7px; border-radius: 7px; font-size: 8px; font-weight: 700; }
.contract-active { color: #08775a; background: #dcf8ee; }
.contract-ending { color: #92610a; background: #fef3c7; }
.resident-detail-list { margin: 8px 0 0; }
.resident-detail-list div { padding: 11px 0; border-bottom: 1px solid #edf1f5; }
.resident-detail-list dt { margin-bottom: 3px; color: var(--kp-muted); font-size: 8px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.resident-detail-list dd, .resident-detail-list dd strong, .resident-detail-list dd small { display: block; }
.resident-detail-list dd { margin: 0; color: #1a3a5d; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.resident-detail-list dd strong { font-size: 11px; }
.resident-detail-list dd small { margin-top: 2px; color: var(--kp-muted); font-size: 9px; }
.resident-preview-note { margin: 14px 0 0; padding: 10px 11px; border-radius: 8px; color: var(--kp-muted); background: #f4f7fa; font-size: 9px; line-height: 1.5; }
.resident-loading { padding: 0 22px; }
.resident-loading span { display: block; height: 52px; margin: 12px 0; border-radius: 10px; background: linear-gradient(90deg, #f0f4f8 25%, #f8fafc 50%, #f0f4f8 75%); background-size: 200% 100%; animation: room-shimmer 1.25s infinite linear; }
.resident-error, .resident-empty { min-height: 310px; display: grid; place-items: center; align-content: center; color: var(--kp-muted); text-align: center; }
.resident-error .kp-icon, .resident-empty .kp-icon { width: 38px; height: 38px; margin-bottom: 12px; color: #91a2b5; }
.resident-error .kp-icon { color: #bf5a4d; }
.resident-error strong, .resident-error span, .resident-empty strong, .resident-empty span { display: block; }
.resident-error strong, .resident-empty strong { color: var(--kp-navy); font-size: 14px; }
.resident-error span, .resident-empty span { margin-top: 4px; font-size: 11px; }
.resident-error button, .resident-empty button { margin-top: 15px; padding: 8px 13px; border: 1px solid #b9c9d8; border-radius: 8px; color: var(--kp-navy); background: #fff; font-size: 11px; font-weight: 650; }

@media (max-width: 1199.98px) {
    .resident-toolbar { grid-template-columns: 1.2fr .9fr .85fr; }
    .resident-toolbar-note { display: none; }
    .resident-layout { grid-template-columns: minmax(0, 1fr) 270px; }
}
@media (max-width: 991.98px) {
    .resident-layout { grid-template-columns: 1fr; }
    .resident-detail { position: static; min-height: 0; }
    .resident-detail-empty { min-height: 190px; }
}
@media (max-width: 767.98px) {
    .resident-summary { grid-template-columns: 1fr 1fr; }
    .resident-toolbar { grid-template-columns: 1fr 1fr; }
    .resident-search { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .residents-workspace { gap: 14px; }
    .resident-summary { gap: 10px; }
    .resident-stat { min-height: 72px; gap: 9px; padding: 12px; }
    .resident-stat-icon, .resident-stat-mark { width: 32px; height: 32px; border-radius: 9px; }
    .resident-stat strong { font-size: 20px; }
    .resident-stat small { font-size: 9px; }
    .resident-toolbar { gap: 12px; padding: 15px; }
    .resident-field .form-select, .resident-search-control input { min-height: 42px; font-size: 11px; }
    .resident-table-head { padding: 18px; }
    .resident-table-head > span { display: none; }
    .resident-detail { padding: 18px; }
}

.contracts-workspace { display: flex; flex-direction: column; gap: 20px; }
.contract-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.contract-stat { min-height: 86px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--kp-border); border-radius: 13px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.contract-stat > span:last-child, .contract-stat strong, .contract-stat small { display: block; }
.contract-stat strong { color: var(--kp-navy); font-size: 23px; line-height: 1.15; letter-spacing: -.035em; }
.contract-stat small { margin-top: 4px; color: var(--kp-muted); font-size: 11px; line-height: 1.3; }
.contract-stat-icon, .contract-stat-mark { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; }
.contract-stat-icon { color: var(--kp-navy); background: #edf3f8; }
.contract-stat-icon .kp-icon, .contract-stat-mark .kp-icon { width: 20px; height: 20px; }
.mark-contract-active { color: #07875f; background: #d1fae5; }
.mark-contract-ending { color: #a16207; background: #fef3c7; }
.mark-contract-draft { color: #1d65b7; background: #dbeafe; }
.contract-toolbar { display: grid; grid-template-columns: minmax(240px, 1.2fr) minmax(190px, .9fr) minmax(180px, .85fr) auto; gap: 16px; align-items: end; padding: 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.contract-search > span:first-child, .contract-field label { display: block; margin-bottom: 7px; color: #425974; font-size: 12px; font-weight: 650; }
.contract-search-control { position: relative; display: block; }
.contract-search-control .kp-icon { position: absolute; top: 50%; left: 13px; width: 17px; height: 17px; color: #72849a; transform: translateY(-50%); pointer-events: none; }
.contract-search-control input { width: 100%; min-height: 44px; padding: 9px 13px 9px 40px; border: 1px solid #cfd9e5; border-radius: 7px; color: var(--kp-navy); background: #fff; font-size: 12px; outline: 0; }
.contract-search-control input::placeholder { color: #8a9aaf; }
.contract-search-control input:focus, .contract-field .form-select:focus { border-color: var(--kp-teal); box-shadow: 0 0 0 3px #00a6a617; }
.contract-field .form-select { min-height: 44px; border-color: #cfd9e5; color: var(--kp-navy); font-size: 12px; font-weight: 550; }
.contract-toolbar-note { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 4px 0 8px; color: var(--kp-teal-text); }
.contract-toolbar-note .kp-icon { width: 25px; height: 25px; }
.contract-toolbar-note span, .contract-toolbar-note strong, .contract-toolbar-note small { display: block; }
.contract-toolbar-note strong { font-size: 13px; line-height: 1.3; }
.contract-toolbar-note small { margin-top: 2px; color: var(--kp-muted); font-size: 10px; white-space: nowrap; }
.contract-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.contract-list-panel, .contract-detail { border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.contract-list-panel { min-width: 0; overflow: hidden; }
.contract-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px; border-bottom: 1px solid #e6ecf2; }
.contract-list-head h2, .contract-detail h2 { margin: 0; color: var(--kp-navy); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.contract-list-head p { margin: 4px 0 0; color: var(--kp-muted); font-size: 12px; }
.contract-list-head > span { padding-top: 4px; color: var(--kp-muted); font-size: 10px; white-space: nowrap; }
.contract-table-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.contract-table { width: 100%; min-width: 880px; border-collapse: collapse; table-layout: fixed; }
.contract-table th { padding: 12px 14px; border-bottom: 1px solid #e6ecf2; color: #6c7e92; background: #f8fafc; font-size: 8px; font-weight: 700; letter-spacing: .055em; text-align: left; text-transform: uppercase; }
.contract-table th:first-child, .contract-table td:first-child { width: 25%; padding-left: 22px; }
.contract-table th:nth-child(2) { width: 20%; }
.contract-table th:nth-child(3) { width: 25%; }
.contract-table th:nth-child(4) { width: 16%; }
.contract-table th:nth-child(5) { width: 14%; }
.contract-table td { height: 78px; padding: 11px 14px; border-bottom: 1px solid #edf1f5; color: #2b4966; font-size: 10px; line-height: 1.35; vertical-align: middle; }
.contract-table tbody tr { transition: background-color .14s, box-shadow .14s; }
.contract-table tbody tr:hover { background: #f8fbfc; }
.contract-table tbody tr.selected { background: #effafa; box-shadow: inset 3px 0 var(--kp-teal); }
.contract-table td > strong, .contract-table td > small { display: block; }
.contract-table td > strong { color: var(--kp-navy); font-size: 10px; font-weight: 650; }
.contract-table td > small { margin-top: 3px; color: var(--kp-muted); font-size: 8px; }
.contract-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; border-radius: 8px; color: var(--kp-navy); background: transparent; text-align: left; }
.contract-person > span:last-child { min-width: 0; }
.contract-person strong, .contract-person small { display: block; }
.contract-person strong { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.contract-person small { margin-top: 3px; color: var(--kp-muted); font-size: 8px; }
.contract-avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #087985; background: #dff5f5; font-size: 10px; font-weight: 750; }
.contract-room-label { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--kp-teal-text); font-size: 8px; font-weight: 650; }
.contract-room-label .kp-icon { width: 13px; height: 13px; }
.contract-period > span:first-child { display: flex; align-items: center; gap: 5px; color: var(--kp-navy); font-size: 8px; white-space: nowrap; }
.contract-period b { font-weight: 600; }
.contract-period i { color: var(--kp-muted); font-style: normal; }
.contract-progress { width: 100%; height: 4px; display: block; margin-top: 9px; overflow: hidden; border-radius: 99px; background: #e8eef3; }
.contract-progress i { height: 100%; display: block; border-radius: inherit; background: #13a47c; }
.contract-progress.progress-ending i { background: #e3a11b; }
.contract-progress.progress-draft i { background: #3b82f6; }
.contract-progress.progress-expired i { background: #e05252; }
.contract-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 7px; font-size: 8px; font-weight: 700; white-space: nowrap; }
.contract-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.contract-status-active { color: #08775a; background: #dcf8ee; }
.contract-status-ending { color: #92610a; background: #fef3c7; }
.contract-status-draft { color: #1d65b7; background: #dbeafe; }
.contract-status-expired { color: #c92a2a; background: #fee2e2; }
.contract-detail { position: sticky; top: 20px; min-height: 448px; padding: 22px; }
.contract-detail-empty { min-height: 402px; display: grid; place-items: center; align-content: center; text-align: center; }
.contract-detail-empty .contract-detail-icon { margin-bottom: 17px; }
.contract-detail-empty p { max-width: 220px; margin: 6px auto 0; color: var(--kp-muted); font-size: 12px; line-height: 1.6; }
.contract-detail-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: var(--kp-teal-text); background: #e5f6f6; }
.contract-detail-icon .kp-icon { width: 25px; height: 25px; }
.contract-detail-head { display: flex; align-items: center; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid #e6ecf2; }
.contract-detail-head > span:last-child { min-width: 0; }
.contract-detail-head small, .contract-detail-head strong { display: block; }
.contract-detail-head small { margin-bottom: 3px; color: var(--kp-muted); font-size: 8px; text-transform: uppercase; }
.contract-detail-head strong { overflow: hidden; color: var(--kp-navy); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.contract-detail-resident { display: flex; align-items: center; gap: 10px; padding: 16px 0 12px; }
.contract-detail-resident > span:last-child { min-width: 0; }
.contract-detail-resident strong, .contract-detail-resident small { display: block; }
.contract-detail-resident strong { color: var(--kp-navy); font-size: 13px; }
.contract-detail-resident small { margin-top: 3px; color: var(--kp-muted); font-size: 8px; }
.contract-detail-list { margin: 8px 0 0; }
.contract-detail-list div { padding: 10px 0; border-bottom: 1px solid #edf1f5; }
.contract-detail-list dt { margin-bottom: 3px; color: var(--kp-muted); font-size: 8px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.contract-detail-list dd, .contract-detail-list dd strong, .contract-detail-list dd small { display: block; }
.contract-detail-list dd { margin: 0; color: #1a3a5d; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.contract-detail-list dd strong { font-size: 11px; }
.contract-detail-list dd small { margin-top: 2px; color: var(--kp-muted); font-size: 9px; }
.contract-preview-note { margin: 14px 0 0; padding: 10px 11px; border-radius: 8px; color: var(--kp-muted); background: #f4f7fa; font-size: 9px; line-height: 1.5; }
.contract-document-button { width: 100%; min-height: 58px; display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 11px 13px; border: 1px solid #9dd9dc; border-radius: 10px; color: #006f78; background: #ecfafa; text-align: left; transition: border-color .15s, background-color .15s, transform .15s; }
.contract-document-button:hover { border-color: #5bbfc4; background: #dff6f6; transform: translateY(-1px); }
.contract-document-button .kp-icon { width: 22px; height: 22px; }
.contract-document-button span, .contract-document-button strong, .contract-document-button small { display: block; }
.contract-document-button span { min-width: 0; }
.contract-document-button strong { font-size: 11px; }
.contract-document-button small { margin-top: 2px; color: #61828a; font-size: 8px; }
body.has-contract-document-open { overflow: hidden; }
.contract-document-modal { position: fixed; z-index: 1500; inset: 0; display: grid; place-items: center; padding: 28px; }
.contract-document-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #061b30cc; backdrop-filter: blur(4px); cursor: default; }
.contract-document-shell { position: relative; width: min(1040px, 100%); height: min(900px, calc(100dvh - 56px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dbe3ec; border-radius: 17px; background: #e9eef3; box-shadow: 0 28px 80px #03142666; }
.contract-document-toolbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex: 0 0 auto; padding: 13px 18px; border-bottom: 1px solid #d8e0e8; background: #fff; }
.contract-document-toolbar-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.contract-document-toolbar-title > span:last-child, .contract-document-toolbar-title small, .contract-document-toolbar-title strong { display: block; }
.contract-document-toolbar-title small { margin-bottom: 2px; color: var(--kp-muted); font-size: 9px; }
.contract-document-toolbar-title strong { overflow: hidden; color: var(--kp-navy); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.contract-document-toolbar-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--kp-teal-text); background: #e4f7f7; }
.contract-document-toolbar-icon .kp-icon { width: 21px; height: 21px; }
.contract-document-actions { display: flex; align-items: center; gap: 8px; }
.contract-document-action { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 13px; border: 1px solid transparent; border-radius: 8px; font-size: 10px; font-weight: 650; }
.contract-document-action .kp-icon { width: 16px; height: 16px; }
.contract-document-action.secondary { border-color: #cfdae5; color: #34526f; background: #fff; }
.contract-document-action.primary { color: #fff; background: var(--kp-teal-text); }
.contract-document-action:hover { filter: brightness(.96); }
.contract-document-viewport { flex: 1; min-height: 0; overflow: auto; padding: 32px; overscroll-behavior: contain; }
.contract-document-sheet { position: relative; width: min(794px, 100%); min-height: 1123px; margin: 0 auto; overflow: hidden; padding: 54px 64px 42px; color: #172b3f; background: #fff; box-shadow: 0 8px 34px #10283d24; font-family: "Inter", "Segoe UI", sans-serif; }
.contract-document-watermark { position: absolute; z-index: 0; top: 44%; left: 50%; color: #d9e1e8; font-size: 90px; font-weight: 800; letter-spacing: .12em; transform: translate(-50%, -50%) rotate(-32deg); pointer-events: none; }
.contract-document-sheet > *:not(.contract-document-watermark) { position: relative; z-index: 1; }
.contract-paper-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 2px solid #0d3a63; }
.contract-paper-brand { display: flex; align-items: center; gap: 10px; }
.contract-paper-brand img { width: 52px; height: 52px; object-fit: contain; }
.contract-paper-brand span, .contract-paper-brand strong, .contract-paper-brand small { display: block; }
.contract-paper-brand strong { color: var(--kp-navy); font-size: 17px; letter-spacing: -.03em; }
.contract-paper-brand small { margin-top: 1px; color: #6c7d8f; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.contract-paper-meta { display: flex; flex-direction: column; align-items: flex-end; }
.contract-paper-meta .contract-status { margin-bottom: 10px; }
.contract-paper-meta > small { color: #788898; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.contract-paper-meta > strong { margin-top: 3px; color: var(--kp-navy); font-size: 11px; }
.contract-paper-title { padding: 30px 0 25px; text-align: center; }
.contract-paper-title > span { color: var(--kp-teal-text); font-size: 9px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.contract-paper-title h1 { margin: 7px 0 5px; color: #0b3156; font-family: Georgia, "Times New Roman", serif; font-size: 27px; line-height: 1.25; }
.contract-paper-title p { margin: 0; color: #6c7d8f; font-size: 9px; }
.contract-paper-intro > p { margin: 0 0 18px; color: #40556a; font-size: 10px; line-height: 1.75; text-align: justify; }
.contract-party-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contract-party-grid > div { position: relative; min-height: 93px; padding: 15px 14px 13px 49px; border: 1px solid #dae3eb; border-radius: 9px; background: #fafcfd; }
.contract-party-number { position: absolute; top: 16px; left: 14px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: #087b82; background: #def4f4; font-size: 8px; font-weight: 750; }
.contract-party-grid small, .contract-party-grid strong, .contract-party-grid p { display: block; }
.contract-party-grid small { color: #718294; font-size: 7px; letter-spacing: .05em; text-transform: uppercase; }
.contract-party-grid strong { margin-top: 5px; color: #153a5d; font-size: 11px; }
.contract-party-grid p { margin: 2px 0 0; color: #748496; font-size: 8px; }
.contract-paper-section { margin-top: 25px; }
.contract-paper-section h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 13px; color: #12395c; font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.contract-paper-section h2::after { content: ''; height: 1px; flex: 1; background: #dce4eb; }
.contract-facts { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #dce4eb; border-radius: 9px; overflow: hidden; }
.contract-facts > div { min-height: 76px; padding: 13px 15px; }
.contract-facts > div:nth-child(odd) { border-right: 1px solid #e1e8ee; }
.contract-facts > div:nth-child(-n+2) { border-bottom: 1px solid #e1e8ee; }
.contract-facts small, .contract-facts strong, .contract-facts span { display: block; }
.contract-facts small { color: #788898; font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }
.contract-facts strong { margin-top: 3px; color: #12395c; font-size: 11px; }
.contract-facts span { margin-top: 2px; color: #6c7d8f; font-size: 8px; }
.contract-clauses ol { margin: 0; padding: 0; list-style: none; counter-reset: clause; }
.contract-clauses li { position: relative; min-height: 36px; padding: 0 0 9px 28px; color: #4a5f73; font-size: 8.5px; line-height: 1.55; counter-increment: clause; }
.contract-clauses li::before { content: counter(clause); position: absolute; top: 0; left: 0; width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #cdd9e3; border-radius: 50%; color: #17466d; font-size: 7px; font-weight: 700; }
.contract-clauses li strong { color: #173d5f; }
.contract-clauses li span { margin-left: 3px; }
.contract-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; margin-top: 25px; padding-top: 20px; border-top: 1px solid #dce4eb; }
.contract-signatures > div { text-align: center; }
.contract-signatures small, .contract-signatures strong, .contract-signatures p { display: block; }
.contract-signatures small { color: #718294; font-size: 8px; }
.contract-signature-mark { min-height: 48px; display: grid; place-items: center; margin: 9px 0 8px; border-radius: 7px; color: #17777b; background: #f0f9f9; font-family: Georgia, "Times New Roman", serif; font-size: 10px; font-style: italic; }
.is-draft .contract-signature-mark { color: #98660d; background: #fff8df; }
.contract-signatures strong { color: #153a5d; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.contract-signatures p { margin: 4px 0 0; color: #788898; font-size: 8px; }
.contract-paper-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 30px; padding-top: 12px; border-top: 1px solid #dce4eb; color: #8795a4; font-size: 7px; }
.contract-loading { padding: 0 22px; }
.contract-loading span { display: block; height: 56px; margin: 12px 0; border-radius: 10px; background: linear-gradient(90deg, #f0f4f8 25%, #f8fafc 50%, #f0f4f8 75%); background-size: 200% 100%; animation: room-shimmer 1.25s infinite linear; }
.contract-error, .contract-empty { min-height: 310px; display: grid; place-items: center; align-content: center; color: var(--kp-muted); text-align: center; }
.contract-error .kp-icon, .contract-empty .kp-icon { width: 38px; height: 38px; margin-bottom: 12px; color: #91a2b5; }
.contract-error .kp-icon { color: #bf5a4d; }
.contract-error strong, .contract-error span, .contract-empty strong, .contract-empty span { display: block; }
.contract-error strong, .contract-empty strong { color: var(--kp-navy); font-size: 14px; }
.contract-error span, .contract-empty span { margin-top: 4px; font-size: 11px; }
.contract-error button, .contract-empty button { margin-top: 15px; padding: 8px 13px; border: 1px solid #b9c9d8; border-radius: 8px; color: var(--kp-navy); background: #fff; font-size: 11px; font-weight: 650; }

@media (max-width: 1199.98px) {
    .contract-toolbar { grid-template-columns: 1.2fr .9fr .85fr; }
    .contract-toolbar-note { display: none; }
    .contract-layout { grid-template-columns: minmax(0, 1fr) 270px; }
}
@media (max-width: 991.98px) {
    .contract-layout { grid-template-columns: 1fr; }
    .contract-detail { position: static; min-height: 0; }
    .contract-detail-empty { min-height: 190px; }
}
@media (max-width: 767.98px) {
    .contract-summary { grid-template-columns: 1fr 1fr; }
    .contract-toolbar { grid-template-columns: 1fr 1fr; }
    .contract-search { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .contracts-workspace { gap: 14px; }
    .contract-summary { gap: 10px; }
    .contract-stat { min-height: 72px; gap: 9px; padding: 12px; }
    .contract-stat-icon, .contract-stat-mark { width: 32px; height: 32px; border-radius: 9px; }
    .contract-stat strong { font-size: 20px; }
    .contract-stat small { font-size: 9px; }
    .contract-toolbar { gap: 12px; padding: 15px; }
    .contract-field .form-select, .contract-search-control input { min-height: 42px; font-size: 11px; }
    .contract-list-head { padding: 18px; }
    .contract-list-head > span { display: none; }
    .contract-detail { padding: 18px; }
    .contract-document-modal { padding: 0; }
    .contract-document-shell { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
    .contract-document-toolbar { min-height: 66px; padding: 11px 13px; }
    .contract-document-toolbar-icon { width: 36px; height: 36px; }
    .contract-document-action { min-width: 38px; padding: 8px 10px; }
    .contract-document-action span { display: none; }
    .contract-document-viewport { padding: 14px; }
    .contract-document-sheet { min-height: 0; padding: 31px 21px 28px; }
    .contract-paper-header { gap: 12px; padding-bottom: 17px; }
    .contract-paper-brand img { width: 40px; height: 40px; }
    .contract-paper-brand strong { font-size: 14px; }
    .contract-paper-title { padding: 23px 0 20px; }
    .contract-paper-title h1 { font-size: 22px; }
    .contract-party-grid, .contract-facts, .contract-signatures { grid-template-columns: 1fr; }
    .contract-facts > div:nth-child(odd) { border-right: 0; }
    .contract-facts > div:not(:last-child) { border-bottom: 1px solid #e1e8ee; }
    .contract-signatures { gap: 18px; }
    .contract-paper-footer { align-items: flex-start; flex-direction: column; gap: 5px; }
}

.checkin-workspace { display: flex; flex-direction: column; gap: 20px; }
.checkin-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.checkin-stat { min-height: 88px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--kp-border); border-radius: 13px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.checkin-stat > span:last-child, .checkin-stat strong, .checkin-stat small { display: block; }
.checkin-stat strong { color: var(--kp-navy); font-size: 24px; line-height: 1.15; letter-spacing: -.035em; }
.checkin-stat small { margin-top: 4px; color: var(--kp-muted); font-size: 11px; line-height: 1.35; }
.checkin-stat-icon, .checkin-stat-mark { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; }
.checkin-stat-icon { color: var(--kp-navy); background: #edf3f8; }
.checkin-stat-icon .kp-icon, .checkin-stat-mark .kp-icon { width: 21px; height: 21px; }
.mark-checkin-today { color: #146eb4; background: #e1f0ff; }
.mark-checkin-ready { color: #07875f; background: #d9f8eb; }
.mark-checkin-attention { color: #c2413a; background: #ffe7e5; }
.checkin-toolbar { display: grid; grid-template-columns: minmax(240px, 1.2fr) minmax(190px, .9fr) minmax(200px, .9fr) auto; gap: 16px; align-items: end; padding: 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.checkin-search > span:first-child, .checkin-field label { display: block; margin-bottom: 7px; color: #425974; font-size: 12px; font-weight: 650; }
.checkin-search-control { position: relative; display: block; }
.checkin-search-control .kp-icon { position: absolute; top: 50%; left: 13px; width: 18px; height: 18px; color: #72849a; transform: translateY(-50%); pointer-events: none; }
.checkin-search-control input { width: 100%; min-height: 44px; padding: 9px 13px 9px 40px; border: 1px solid #cfd9e5; border-radius: 8px; color: var(--kp-navy); background: #fff; font-size: 12px; outline: 0; }
.checkin-search-control input::placeholder { color: #8a9aaf; }
.checkin-search-control input:focus, .checkin-field .form-select:focus { border-color: var(--kp-teal); box-shadow: 0 0 0 3px #00a6a617; }
.checkin-field .form-select { min-height: 44px; border-color: #cfd9e5; color: var(--kp-navy); font-size: 12px; font-weight: 550; }
.checkin-toolbar-note { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 4px 0 8px; color: var(--kp-teal-text); }
.checkin-toolbar-note .kp-icon { width: 25px; height: 25px; }
.checkin-toolbar-note span, .checkin-toolbar-note strong, .checkin-toolbar-note small { display: block; }
.checkin-toolbar-note strong { font-size: 13px; }
.checkin-toolbar-note small { margin-top: 2px; color: var(--kp-muted); font-size: 10px; white-space: nowrap; }
.checkin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 20px; align-items: start; }
.checkin-list-panel, .checkin-detail { border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.checkin-list-panel { min-width: 0; overflow: hidden; }
.checkin-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px; border-bottom: 1px solid #e6ecf2; }
.checkin-list-head h2, .checkin-detail h2 { margin: 0; color: var(--kp-navy); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.checkin-list-head p { margin: 4px 0 0; color: var(--kp-muted); font-size: 12px; }
.checkin-list-head > span { padding-top: 4px; color: var(--kp-muted); font-size: 10px; white-space: nowrap; }
.checkin-table-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.checkin-table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; }
.checkin-table th { padding: 12px 14px; border-bottom: 1px solid #e6ecf2; color: #64778d; background: #f8fafc; font-size: 10px; font-weight: 700; letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.checkin-table th:first-child, .checkin-table td:first-child { width: 23%; padding-left: 22px; }
.checkin-table th:nth-child(2) { width: 18%; }
.checkin-table th:nth-child(3) { width: 22%; }
.checkin-table th:nth-child(4) { width: 18%; }
.checkin-table th:nth-child(5) { width: 19%; }
.checkin-table td { height: 82px; padding: 12px 14px; border-bottom: 1px solid #edf1f5; color: #2b4966; font-size: 11px; line-height: 1.4; vertical-align: middle; }
.checkin-table tbody tr { transition: background-color .14s, box-shadow .14s, opacity .14s; }
.checkin-table tbody tr:hover { background: #f8fbfc; }
.checkin-table tbody tr.selected { background: #effafa; box-shadow: inset 3px 0 var(--kp-teal); }
.checkin-table tbody tr.completed { opacity: .7; }
.checkin-table td > strong, .checkin-table td > small { display: block; }
.checkin-table td > strong { color: var(--kp-navy); font-size: 11px; font-weight: 650; }
.checkin-table td > small { margin-top: 4px; color: var(--kp-muted); font-size: 10px; }
.checkin-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; border-radius: 8px; color: var(--kp-navy); background: transparent; text-align: left; }
.checkin-person > span:last-child { min-width: 0; }
.checkin-person strong, .checkin-person small { display: block; }
.checkin-person strong { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.checkin-person small { margin-top: 3px; color: var(--kp-muted); font-size: 10px; }
.checkin-avatar { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #087985; background: #dff5f5; font-size: 11px; font-weight: 750; }
.checkin-date strong, .checkin-date small { display: block; }
.checkin-date strong { color: var(--kp-navy); font-size: 11px; }
.checkin-date small { margin-top: 4px; color: var(--kp-muted); font-size: 10px; }
.checkin-date.today strong { color: #1769a7; }
.checkin-date.today small { color: #1769a7; font-weight: 650; }
.checkin-room-label { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--kp-teal-text); font-size: 10px; font-weight: 650; }
.checkin-room-label .kp-icon { width: 14px; height: 14px; }
.checkin-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 7px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.checkin-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.checkin-status-ready { color: #08775a; background: #dcf8ee; }
.checkin-status-incomplete { color: #94610a; background: #fff1bd; }
.checkin-status-payment { color: #c03737; background: #ffe1df; }
.checkin-status-completed { color: #1769a7; background: #deefff; }
.checkin-detail { position: sticky; top: 20px; min-height: 524px; padding: 22px; }
.checkin-detail-empty { min-height: 478px; display: grid; place-items: center; align-content: center; text-align: center; }
.checkin-detail-empty .checkin-detail-icon { margin-bottom: 17px; }
.checkin-detail-empty p { max-width: 230px; margin: 6px auto 0; color: var(--kp-muted); font-size: 12px; line-height: 1.6; }
.checkin-detail-icon { width: 50px; height: 50px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: var(--kp-teal-text); background: #e5f6f6; }
.checkin-detail-icon .kp-icon { width: 26px; height: 26px; }
.checkin-detail-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #e6ecf2; }
.checkin-detail-head > span:last-child { min-width: 0; }
.checkin-detail-head small, .checkin-detail-head strong, .checkin-detail-head p { display: block; }
.checkin-detail-head small { color: var(--kp-muted); font-size: 10px; text-transform: uppercase; }
.checkin-detail-head strong { overflow: hidden; margin-top: 2px; color: var(--kp-navy); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.checkin-detail-head p { margin: 2px 0 0; color: var(--kp-muted); font-size: 10px; }
.checkin-detail-avatar { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #087985; background: #dff5f5; font-size: 12px; font-weight: 750; }
.checkin-stepper { display: flex; align-items: flex-start; padding: 18px 0 16px; }
.checkin-stepper > span { width: 66px; display: grid; place-items: center; color: #8291a2; text-align: center; }
.checkin-stepper i { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #cbd6df; border-radius: 50%; background: #fff; font-size: 10px; font-style: normal; font-weight: 700; }
.checkin-stepper small { margin-top: 5px; font-size: 10px; white-space: nowrap; }
.checkin-stepper > span.active { color: #087b82; }
.checkin-stepper > span.active i { border-color: #8bd1d4; background: #e1f7f7; }
.checkin-stepper b { height: 1px; flex: 1; margin-top: 12px; background: #d8e1e8; }
.checkin-detail-placement { display: flex; gap: 11px; padding: 13px; border-radius: 9px; background: #f3f8fa; }
.checkin-detail-placement > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #087b82; background: #dff4f4; }
.checkin-detail-placement .kp-icon { width: 18px; height: 18px; }
.checkin-detail-placement small, .checkin-detail-placement strong, .checkin-detail-placement p { display: block; }
.checkin-detail-placement small { color: var(--kp-muted); font-size: 10px; }
.checkin-detail-placement strong { margin-top: 2px; color: var(--kp-navy); font-size: 11px; }
.checkin-detail-placement p { margin: 2px 0 0; color: var(--kp-muted); font-size: 10px; }
.checkin-checklist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; }
.checkin-checklist-head h3 { margin: 0; color: var(--kp-navy); font-size: 13px; }
.checkin-checklist-head span { color: var(--kp-muted); font-size: 10px; }
.checkin-checklist { margin-top: 8px; border-top: 1px solid #e8edf2; }
.checkin-checklist > div { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid #e8edf2; }
.checkin-checklist > div > span:last-child, .checkin-checklist strong, .checkin-checklist small { display: block; }
.checkin-checklist strong { color: #3d536a; font-size: 11px; }
.checkin-checklist small { margin-top: 2px; color: #8a5d18; font-size: 10px; }
.checkin-checkmark { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #a66213; background: #fff1cc; font-size: 11px; font-weight: 800; }
.checkin-checklist > div.complete .checkin-checkmark { color: #08775a; background: #dff7ed; }
.checkin-checklist > div.complete small { color: var(--kp-muted); }
.checkin-note { margin-top: 14px; padding: 11px 12px; border-left: 3px solid #7cc8cc; border-radius: 0 8px 8px 0; background: #f4f9fa; }
.checkin-note strong { color: #34526c; font-size: 10px; }
.checkin-note p { margin: 3px 0 0; color: var(--kp-muted); font-size: 10px; line-height: 1.55; }
.checkin-confirm { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; padding: 9px 13px; border: 0; border-radius: 9px; color: #fff; background: var(--kp-teal-text); font-size: 11px; font-weight: 700; }
.checkin-confirm .kp-icon { width: 18px; height: 18px; }
.checkin-confirm:hover:not(:disabled) { background: #006c74; }
.checkin-confirm:disabled { color: #8796a5; background: #e9eef2; cursor: not-allowed; }
.checkin-success { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 11px; border: 1px solid #a8dfca; border-radius: 8px; color: #08775a; background: #e8f9f2; }
.checkin-success .kp-icon { width: 19px; height: 19px; }
.checkin-success span, .checkin-success strong, .checkin-success small { display: block; }
.checkin-success strong { font-size: 10px; }
.checkin-success small { margin-top: 2px; color: #427967; font-size: 10px; }
.checkin-preview-note { margin: 12px 0 0; color: var(--kp-muted); font-size: 10px; line-height: 1.5; text-align: center; }
.checkin-loading { padding: 0 22px; }
.checkin-loading span { display: block; height: 58px; margin: 12px 0; border-radius: 10px; background: linear-gradient(90deg, #f0f4f8 25%, #f8fafc 50%, #f0f4f8 75%); background-size: 200% 100%; animation: room-shimmer 1.25s infinite linear; }
.checkin-error, .checkin-empty { min-height: 310px; display: grid; place-items: center; align-content: center; color: var(--kp-muted); font-size: 11px; text-align: center; }
.checkin-error .kp-icon, .checkin-empty .kp-icon { width: 38px; height: 38px; margin-bottom: 12px; color: #91a2b5; }
.checkin-error .kp-icon { color: #bf5a4d; }
.checkin-error strong, .checkin-error span, .checkin-empty strong, .checkin-empty span { display: block; }
.checkin-error strong, .checkin-empty strong { color: var(--kp-navy); font-size: 14px; }
.checkin-error span, .checkin-empty span { margin-top: 4px; font-size: 11px; }
.checkin-error button, .checkin-empty button { margin-top: 15px; padding: 8px 13px; border: 1px solid #b9c9d8; border-radius: 8px; color: var(--kp-navy); background: #fff; font-size: 11px; font-weight: 650; }

@media (max-width: 1199.98px) {
    .checkin-toolbar { grid-template-columns: 1.2fr .9fr .9fr; }
    .checkin-toolbar-note { display: none; }
    .checkin-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 991.98px) {
    .checkin-layout { grid-template-columns: 1fr; }
    .checkin-detail { position: static; min-height: 0; }
    .checkin-detail-empty { min-height: 210px; }
}
@media (max-width: 767.98px) {
    .checkin-summary { grid-template-columns: 1fr 1fr; }
    .checkin-toolbar { grid-template-columns: 1fr 1fr; }
    .checkin-search { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .checkin-workspace { gap: 14px; }
    .checkin-summary { gap: 10px; }
    .checkin-stat { min-height: 76px; gap: 10px; padding: 12px; }
    .checkin-stat-icon, .checkin-stat-mark { width: 34px; height: 34px; border-radius: 9px; }
    .checkin-stat strong { font-size: 21px; }
    .checkin-stat small { font-size: 10px; }
    .checkin-toolbar { gap: 12px; padding: 15px; }
    .checkin-field .form-select, .checkin-search-control input { min-height: 42px; font-size: 11px; }
    .checkin-list-head { padding: 18px; }
    .checkin-list-head > span { display: none; }
    .checkin-detail { padding: 18px; }
}

.mark-checkout-today { color: #146eb4; background: #e1f0ff; }
.mark-checkout-ready { color: #07875f; background: #d9f8eb; }
.mark-checkout-attention { color: #a65a12; background: #fff0d8; }
.checkout-status-ready { color: #08775a; background: #dcf8ee; }
.checkout-status-inspection { color: #94610a; background: #fff1bd; }
.checkout-status-billing { color: #c03737; background: #ffe1df; }
.checkout-status-completed { color: #1769a7; background: #deefff; }
.checkout-detail { min-height: 590px; }
.checkout-settlement { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 14px; overflow: hidden; border: 1px solid #dce5ec; border-radius: 9px; background: #dce5ec; }
.checkout-settlement > div { min-height: 62px; padding: 11px 12px; background: #fff; }
.checkout-settlement > div.refund { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 52px; background: #eaf8f3; }
.checkout-settlement small, .checkout-settlement strong { display: block; }
.checkout-settlement small { color: var(--kp-muted); font-size: 10px; }
.checkout-settlement strong { margin-top: 3px; color: var(--kp-navy); font-size: 12px; }
.checkout-settlement strong.deduction { color: #bd3e3e; }
.checkout-settlement .refund strong { margin: 0; color: #08775a; font-size: 14px; }
.checkout-confirm { background: #0c647c; }
.checkout-confirm:hover:not(:disabled) { background: #094f62; }

@media (max-width: 991.98px) {
    .checkout-detail { min-height: 0; }
}

.invoice-workspace { display: flex; flex-direction: column; gap: 20px; }
.invoice-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.invoice-stat { min-height: 88px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--kp-border); border-radius: 13px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.invoice-stat > span:last-child, .invoice-stat strong, .invoice-stat small { display: block; }
.invoice-stat strong { color: var(--kp-navy); font-size: 24px; line-height: 1.15; letter-spacing: -.035em; }
.invoice-stat small { margin-top: 4px; color: var(--kp-muted); font-size: 11px; line-height: 1.35; }
.invoice-stat-mark { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; }
.invoice-stat-mark .kp-icon { width: 21px; height: 21px; }
.mark-invoice-total { color: #1769a7; background: #deefff; }
.mark-invoice-paid { color: #08775a; background: #dcf8ee; }
.mark-invoice-due { color: #94610a; background: #fff1bd; }
.mark-invoice-overdue { color: #c03737; background: #ffe1df; }
.invoice-toolbar { display: grid; grid-template-columns: minmax(240px, 1.2fr) minmax(190px, .9fr) minmax(200px, .9fr) auto; gap: 16px; align-items: end; padding: 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.invoice-search > span:first-child, .invoice-field label { display: block; margin-bottom: 7px; color: #425974; font-size: 12px; font-weight: 650; }
.invoice-search-control { position: relative; display: block; }
.invoice-search-control .kp-icon { position: absolute; top: 50%; left: 13px; width: 18px; height: 18px; color: #72849a; transform: translateY(-50%); pointer-events: none; }
.invoice-search-control input { width: 100%; min-height: 44px; padding: 9px 13px 9px 40px; border: 1px solid #cfd9e5; border-radius: 8px; color: var(--kp-navy); background: #fff; font-size: 12px; outline: 0; }
.invoice-search-control input::placeholder { color: #8a9aaf; }
.invoice-search-control input:focus, .invoice-field .form-select:focus { border-color: var(--kp-teal); box-shadow: 0 0 0 3px #00a6a617; }
.invoice-field .form-select { min-height: 44px; border-color: #cfd9e5; color: var(--kp-navy); font-size: 12px; font-weight: 550; }
.invoice-toolbar-note { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 4px 0 8px; color: var(--kp-teal-text); }
.invoice-toolbar-note .kp-icon { width: 25px; height: 25px; }
.invoice-toolbar-note span, .invoice-toolbar-note strong, .invoice-toolbar-note small { display: block; }
.invoice-toolbar-note strong { font-size: 13px; }
.invoice-toolbar-note small { margin-top: 2px; color: var(--kp-muted); font-size: 10px; white-space: nowrap; }
.invoice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.invoice-list-panel, .invoice-detail { border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.invoice-list-panel { min-width: 0; overflow: hidden; }
.invoice-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px; border-bottom: 1px solid #e6ecf2; }
.invoice-list-head h2, .invoice-detail h2 { margin: 0; color: var(--kp-navy); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.invoice-list-head p { margin: 4px 0 0; color: var(--kp-muted); font-size: 12px; }
.invoice-list-head > span { padding-top: 4px; color: var(--kp-muted); font-size: 10px; white-space: nowrap; }
.invoice-table-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.invoice-table { width: 100%; min-width: 960px; border-collapse: collapse; table-layout: fixed; }
.invoice-table th { padding: 12px 12px; border-bottom: 1px solid #e6ecf2; color: #64778d; background: #f8fafc; font-size: 10px; font-weight: 700; letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.invoice-table th:first-child, .invoice-table td:first-child { width: 22%; padding-left: 22px; }
.invoice-table th:nth-child(2) { width: 18%; }
.invoice-table th:nth-child(3) { width: 14%; }
.invoice-table th:nth-child(4) { width: 16%; }
.invoice-table th:nth-child(5) { width: 15%; }
.invoice-table th:nth-child(6) { width: 15%; }
.invoice-table td { height: 82px; padding: 12px; border-bottom: 1px solid #edf1f5; color: #2b4966; font-size: 11px; line-height: 1.4; vertical-align: middle; }
.invoice-table tbody tr { transition: background-color .14s, box-shadow .14s; }
.invoice-table tbody tr:hover { background: #f8fbfc; }
.invoice-table tbody tr.selected { background: #effafa; box-shadow: inset 3px 0 var(--kp-teal); }
.invoice-table td > strong, .invoice-table td > small { display: block; }
.invoice-table td > strong { color: var(--kp-navy); font-size: 11px; font-weight: 650; }
.invoice-table td > small { margin-top: 4px; color: var(--kp-muted); font-size: 10px; }
.invoice-table .invoice-amount { font-size: 12px; }
.invoice-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; border-radius: 8px; color: var(--kp-navy); background: transparent; text-align: left; }
.invoice-person > span:last-child { min-width: 0; }
.invoice-person strong, .invoice-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-person strong { margin-top: 2px; font-size: 12px; font-weight: 700; }
.invoice-person small { color: #28708e; font-size: 10px; font-weight: 650; }
.invoice-avatar { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #087985; background: #dff5f5; font-size: 11px; font-weight: 750; }
.invoice-room-label { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--kp-teal-text); font-size: 10px; font-weight: 650; }
.invoice-room-label .kp-icon { width: 14px; height: 14px; }
.invoice-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 7px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.invoice-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.invoice-status-paid { color: #08775a; background: #dcf8ee; }
.invoice-status-unpaid { color: #1769a7; background: #deefff; }
.invoice-status-due { color: #94610a; background: #fff1bd; }
.invoice-status-overdue { color: #c03737; background: #ffe1df; }
.invoice-detail { position: sticky; top: 20px; min-height: 590px; padding: 22px; }
.invoice-detail-empty { min-height: 544px; display: grid; place-items: center; align-content: center; text-align: center; }
.invoice-detail-empty .invoice-detail-icon { margin-bottom: 17px; }
.invoice-detail-empty p { max-width: 235px; margin: 6px auto 0; color: var(--kp-muted); font-size: 12px; line-height: 1.6; }
.invoice-detail-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #1769a7; background: #deefff; }
.invoice-detail-icon .kp-icon { width: 23px; height: 23px; }
.invoice-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid #e6ecf2; }
.invoice-detail-head > span:nth-child(2) { min-width: 0; }
.invoice-detail-head small, .invoice-detail-head strong, .invoice-detail-head p { display: block; }
.invoice-detail-head small { color: var(--kp-muted); font-size: 10px; text-transform: uppercase; }
.invoice-detail-head strong { overflow: hidden; margin-top: 2px; color: var(--kp-navy); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.invoice-detail-head p { margin: 2px 0 0; color: var(--kp-muted); font-size: 10px; }
.invoice-resident { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 13px; border-radius: 9px; background: #f3f8fa; }
.invoice-resident div { min-width: 0; }
.invoice-resident small, .invoice-resident strong, .invoice-resident p { display: block; }
.invoice-resident small { color: var(--kp-muted); font-size: 10px; }
.invoice-resident strong { margin-top: 2px; color: var(--kp-navy); font-size: 12px; }
.invoice-resident p { overflow: hidden; margin: 2px 0 0; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.invoice-breakdown-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.invoice-breakdown-head h3 { margin: 0; color: var(--kp-navy); font-size: 13px; }
.invoice-breakdown-head span { color: var(--kp-muted); font-size: 10px; }
.invoice-breakdown { margin-top: 8px; border: 1px solid #e1e8ee; border-radius: 9px; overflow: hidden; }
.invoice-breakdown > div { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 12px; border-bottom: 1px dashed #dfe6ec; }
.invoice-breakdown > div:last-child { border-bottom: 0; }
.invoice-breakdown span { color: var(--kp-muted); font-size: 10px; }
.invoice-breakdown strong { color: #344f68; font-size: 11px; }
.invoice-breakdown .invoice-total { min-height: 50px; border-top: 1px solid #d8e3ea; border-bottom: 0; background: #eef8f7; }
.invoice-breakdown .invoice-total span { color: #27656b; font-weight: 650; }
.invoice-breakdown .invoice-total strong { color: #08775a; font-size: 15px; }
.invoice-payment-info { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.invoice-payment-info > div { min-width: 0; padding: 10px 11px; border: 1px solid #e2e8ee; border-radius: 8px; background: #fafcfd; }
.invoice-payment-info > div:last-child:nth-child(3) { grid-column: 1 / -1; }
.invoice-payment-info small, .invoice-payment-info strong { display: block; }
.invoice-payment-info small { color: var(--kp-muted); font-size: 10px; }
.invoice-payment-info strong { overflow: hidden; margin-top: 3px; color: var(--kp-navy); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.invoice-pay-button { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; padding: 9px 13px; border: 0; border-radius: 9px; color: #fff; background: #0c647c; font-size: 11px; font-weight: 700; }
.invoice-pay-button:hover { background: #094f62; }
.invoice-pay-button .kp-icon { width: 18px; height: 18px; }
.invoice-success { display: flex; align-items: center; gap: 9px; margin-top: 15px; padding: 10px 11px; border: 1px solid #a8dfca; border-radius: 8px; color: #08775a; background: #e8f9f2; }
.invoice-success .kp-icon { width: 19px; height: 19px; }
.invoice-success span, .invoice-success strong, .invoice-success small { display: block; }
.invoice-success strong { font-size: 10px; }
.invoice-success small { margin-top: 2px; color: #427967; font-size: 10px; }
.invoice-preview-note { margin: 12px 0 0; color: var(--kp-muted); font-size: 10px; line-height: 1.5; text-align: center; }
.invoice-loading { padding: 0 22px; }
.invoice-loading span { display: block; height: 58px; margin: 12px 0; border-radius: 10px; background: linear-gradient(90deg, #f0f4f8 25%, #f8fafc 50%, #f0f4f8 75%); background-size: 200% 100%; animation: room-shimmer 1.25s infinite linear; }
.invoice-error, .invoice-empty { min-height: 310px; display: grid; place-items: center; align-content: center; color: var(--kp-muted); font-size: 11px; text-align: center; }
.invoice-error .kp-icon, .invoice-empty .kp-icon { width: 38px; height: 38px; margin-bottom: 12px; color: #91a2b5; }
.invoice-error .kp-icon { color: #bf5a4d; }
.invoice-error strong, .invoice-error span, .invoice-empty strong, .invoice-empty span { display: block; }
.invoice-error strong, .invoice-empty strong { color: var(--kp-navy); font-size: 14px; }
.invoice-error span, .invoice-empty span { margin-top: 4px; font-size: 11px; }
.invoice-error button, .invoice-empty button { margin-top: 15px; padding: 8px 13px; border: 1px solid #b9c9d8; border-radius: 8px; color: var(--kp-navy); background: #fff; font-size: 11px; font-weight: 650; }

@media (max-width: 1199.98px) {
    .invoice-toolbar { grid-template-columns: 1.2fr .9fr .9fr; }
    .invoice-toolbar-note { display: none; }
    .invoice-layout { grid-template-columns: minmax(0, 1fr) 330px; }
}
@media (max-width: 991.98px) {
    .invoice-layout { grid-template-columns: 1fr; }
    .invoice-detail { position: static; min-height: 0; }
    .invoice-detail-empty { min-height: 210px; }
}
@media (max-width: 767.98px) {
    .invoice-summary { grid-template-columns: 1fr 1fr; }
    .invoice-toolbar { grid-template-columns: 1fr 1fr; }
    .invoice-search { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .invoice-workspace { gap: 14px; }
    .invoice-summary { gap: 10px; }
    .invoice-stat { min-height: 76px; gap: 10px; padding: 12px; }
    .invoice-stat-mark { width: 34px; height: 34px; border-radius: 9px; }
    .invoice-stat strong { font-size: 19px; }
    .invoice-stat small { font-size: 10px; }
    .invoice-toolbar { gap: 12px; padding: 15px; }
    .invoice-field .form-select, .invoice-search-control input { min-height: 42px; font-size: 11px; }
    .invoice-list-head { padding: 18px; }
    .invoice-list-head > span { display: none; }
    .invoice-detail { padding: 18px; }
    .invoice-detail-head { grid-template-columns: auto minmax(0, 1fr); }
    .invoice-detail-head > .invoice-status { grid-column: 1 / -1; justify-self: start; }
}

.mark-payment-received { color: #1769a7; background: #deefff; }
.mark-payment-verified { color: #08775a; background: #dcf8ee; }
.mark-payment-pending { color: #94610a; background: #fff1bd; }
.mark-payment-issue { color: #c03737; background: #ffe1df; }
.payment-toolbar { display: grid; grid-template-columns: minmax(230px, 1.25fr) repeat(3, minmax(155px, .75fr)); gap: 16px; align-items: end; padding: 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.payment-layout { grid-template-columns: minmax(0, 1fr) 370px; }
.payment-table { width: 100%; min-width: 1020px; border-collapse: collapse; table-layout: fixed; }
.payment-table th { padding: 12px; border-bottom: 1px solid #e6ecf2; color: #64778d; background: #f8fafc; font-size: 10px; font-weight: 700; letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.payment-table th:first-child, .payment-table td:first-child { width: 22%; padding-left: 22px; }
.payment-table th:nth-child(2) { width: 15%; }
.payment-table th:nth-child(3) { width: 19%; }
.payment-table th:nth-child(4) { width: 15%; }
.payment-table th:nth-child(5) { width: 15%; }
.payment-table th:nth-child(6) { width: 14%; }
.payment-table td { height: 82px; padding: 12px; border-bottom: 1px solid #edf1f5; color: #2b4966; font-size: 11px; line-height: 1.4; vertical-align: middle; }
.payment-table tbody tr { transition: background-color .14s, box-shadow .14s; }
.payment-table tbody tr:hover { background: #f8fbfc; }
.payment-table tbody tr.selected { background: #effafa; box-shadow: inset 3px 0 var(--kp-teal); }
.payment-table td > strong, .payment-table td > small { display: block; }
.payment-table td > strong { overflow: hidden; color: var(--kp-navy); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.payment-table td > small { overflow: hidden; margin-top: 4px; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.payment-table .invoice-amount { font-size: 12px; }
.payment-status-verified { color: #08775a; background: #dcf8ee; }
.payment-status-pending { color: #94610a; background: #fff1bd; }
.payment-status-failed { color: #c03737; background: #ffe1df; }
.payment-status-refunded { color: #1769a7; background: #deefff; }
.payment-detail { position: sticky; top: 20px; min-height: 620px; padding: 22px; border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.payment-detail h2 { margin: 0; color: var(--kp-navy); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.payment-detail-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #1769a7; background: #deefff; }
.payment-detail-icon .kp-icon { width: 23px; height: 23px; }
.payment-detail .invoice-detail-empty { min-height: 574px; }
.payment-detail .invoice-detail-empty .payment-detail-icon { margin-bottom: 17px; }
.payment-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid #e6ecf2; }
.payment-detail-head > span:nth-child(2) { min-width: 0; }
.payment-detail-head small, .payment-detail-head strong, .payment-detail-head p { display: block; }
.payment-detail-head small { color: var(--kp-muted); font-size: 10px; text-transform: uppercase; }
.payment-detail-head strong { overflow: hidden; margin-top: 2px; color: var(--kp-navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.payment-detail-head p { margin: 2px 0 0; color: var(--kp-muted); font-size: 10px; }
.payment-amount { margin-top: 15px; padding: 15px; border: 1px solid #cce5e2; border-radius: 10px; background: #eef8f7; text-align: center; }
.payment-amount small, .payment-amount strong, .payment-amount span { display: block; }
.payment-amount small { color: #52777a; font-size: 10px; }
.payment-amount strong { margin-top: 3px; color: #08775a; font-size: 23px; letter-spacing: -.03em; }
.payment-amount span { margin-top: 3px; color: var(--kp-muted); font-size: 10px; }
.payment-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.payment-facts > div { min-width: 0; padding: 10px 11px; border: 1px solid #e2e8ee; border-radius: 8px; background: #fafcfd; }
.payment-facts > div:last-child { grid-column: 1 / -1; }
.payment-facts small, .payment-facts strong { display: block; }
.payment-facts small { color: var(--kp-muted); font-size: 10px; }
.payment-facts strong { overflow: hidden; margin-top: 3px; color: var(--kp-navy); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.payment-timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; }
.payment-timeline-head h3 { margin: 0; color: var(--kp-navy); font-size: 13px; }
.payment-timeline-head span { color: var(--kp-muted); font-size: 10px; }
.payment-timeline { margin-top: 10px; }
.payment-timeline > div { position: relative; display: flex; gap: 10px; min-height: 48px; padding-bottom: 9px; }
.payment-timeline > div:not(:last-child)::before { content: ''; position: absolute; top: 17px; left: 5px; bottom: -2px; width: 1px; background: #d7e0e8; }
.payment-timeline i { position: relative; z-index: 1; width: 11px; height: 11px; flex: 0 0 auto; margin-top: 3px; border: 2px solid #aebcc9; border-radius: 50%; background: #fff; }
.payment-timeline span, .payment-timeline strong, .payment-timeline small { display: block; }
.payment-timeline strong { color: #53677b; font-size: 11px; }
.payment-timeline small { margin-top: 2px; color: var(--kp-muted); font-size: 10px; line-height: 1.4; }
.payment-timeline > div.complete i { border-color: #169873; background: #169873; box-shadow: 0 0 0 3px #dff7ed; }
.payment-timeline > div.complete strong { color: var(--kp-navy); }
.payment-note { padding: 10px 11px; border-left: 3px solid #7cc8cc; border-radius: 0 8px 8px 0; background: #f4f9fa; }
.payment-note strong { color: #34526c; font-size: 10px; }
.payment-note p { margin: 3px 0 0; color: var(--kp-muted); font-size: 10px; line-height: 1.5; }
.payment-alert { display: flex; align-items: center; gap: 9px; margin-top: 15px; padding: 10px 11px; border: 1px solid; border-radius: 8px; }
.payment-alert .kp-icon { width: 19px; height: 19px; flex: 0 0 auto; }
.payment-alert span, .payment-alert strong, .payment-alert small { display: block; }
.payment-alert strong { font-size: 10px; }
.payment-alert small { margin-top: 2px; font-size: 10px; line-height: 1.4; }
.payment-alert-failed { border-color: #efb4af; color: #a93232; background: #fff0ef; }
.payment-alert-failed small { color: #8e5252; }
.payment-alert-refunded { border-color: #b6d6ee; color: #1769a7; background: #eff7fd; }
.payment-alert-refunded small { color: #52728e; }

@media (max-width: 1199.98px) {
    .payment-toolbar { grid-template-columns: 1fr 1fr; }
    .payment-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 991.98px) {
    .payment-layout { grid-template-columns: 1fr; }
    .payment-detail { position: static; min-height: 0; }
    .payment-detail .invoice-detail-empty { min-height: 210px; }
}
@media (max-width: 575.98px) {
    .payment-toolbar { grid-template-columns: 1fr 1fr; gap: 12px; padding: 15px; }
    .payment-toolbar .invoice-search, .payment-toolbar .invoice-field:last-child { grid-column: 1 / -1; }
    .payment-detail { padding: 18px; }
    .payment-detail-head { grid-template-columns: auto minmax(0, 1fr); }
    .payment-detail-head > .invoice-status { grid-column: 1 / -1; justify-self: start; }
}

.mark-expense-total { color: #1769a7; background: #deefff; }
.mark-expense-approved { color: #08775a; background: #dcf8ee; }
.mark-expense-pending { color: #94610a; background: #fff1bd; }
.mark-expense-rejected { color: #c03737; background: #ffe1df; }
.expense-layout { grid-template-columns: minmax(0, 1fr) 370px; }
.expense-table { width: 100%; min-width: 1020px; border-collapse: collapse; table-layout: fixed; }
.expense-table th { padding: 12px; border-bottom: 1px solid #e6ecf2; color: #64778d; background: #f8fafc; font-size: 10px; font-weight: 700; letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.expense-table th:first-child, .expense-table td:first-child { width: 22%; padding-left: 22px; }
.expense-table th:nth-child(2) { width: 13%; }
.expense-table th:nth-child(3) { width: 23%; }
.expense-table th:nth-child(4) { width: 14%; }
.expense-table th:nth-child(5) { width: 14%; }
.expense-table th:nth-child(6) { width: 14%; }
.expense-table td { height: 82px; padding: 12px; border-bottom: 1px solid #edf1f5; color: #2b4966; font-size: 11px; line-height: 1.4; vertical-align: middle; }
.expense-table tbody tr { transition: background-color .14s, box-shadow .14s; }
.expense-table tbody tr:hover { background: #f8fbfc; }
.expense-table tbody tr.selected { background: #effafa; box-shadow: inset 3px 0 var(--kp-teal); }
.expense-table td > strong, .expense-table td > small { display: block; }
.expense-table td > strong { overflow: hidden; color: var(--kp-navy); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.expense-table td > small { overflow: hidden; margin-top: 4px; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.expense-table .expense-amount { color: #b2463e; font-size: 12px; }
.expense-avatar { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #a55029; background: #fff0e6; font-size: 11px; font-weight: 750; }
.expense-category { display: inline-flex; align-items: center; gap: 6px; color: #3d607a; font-size: 10px; font-weight: 650; }
.expense-category i { width: 7px; height: 7px; border-radius: 2px; background: #80a8bd; }
.expense-status-approved { color: #08775a; background: #dcf8ee; }
.expense-status-pending { color: #94610a; background: #fff1bd; }
.expense-status-draft { color: #1769a7; background: #deefff; }
.expense-status-rejected { color: #c03737; background: #ffe1df; }
.expense-detail { position: sticky; top: 20px; min-height: 630px; padding: 22px; border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.expense-detail h2 { margin: 0; color: var(--kp-navy); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.expense-detail .invoice-detail-empty { min-height: 584px; }
.expense-detail .invoice-detail-empty .expense-detail-icon { margin-bottom: 17px; }
.expense-detail-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #b2463e; background: #ffe8e5; }
.expense-detail-icon .kp-icon { width: 23px; height: 23px; }
.expense-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid #e6ecf2; }
.expense-detail-head > span:nth-child(2) { min-width: 0; }
.expense-detail-head small, .expense-detail-head strong, .expense-detail-head p { display: block; }
.expense-detail-head small { color: var(--kp-muted); font-size: 10px; text-transform: uppercase; }
.expense-detail-head strong { overflow: hidden; margin-top: 2px; color: var(--kp-navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.expense-detail-head p { margin: 2px 0 0; color: var(--kp-muted); font-size: 10px; }
.expense-amount-card { margin-top: 15px; padding: 15px; border: 1px solid #f0d3cf; border-radius: 10px; background: #fff5f3; text-align: center; }
.expense-amount-card small, .expense-amount-card strong, .expense-amount-card span { display: block; }
.expense-amount-card small { color: #8a6964; font-size: 10px; }
.expense-amount-card strong { margin-top: 3px; color: #b2463e; font-size: 23px; letter-spacing: -.03em; }
.expense-amount-card span { margin-top: 3px; color: var(--kp-muted); font-size: 10px; }
.expense-vendor { display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 13px; border-radius: 9px; background: #f7f9fb; }
.expense-vendor div { min-width: 0; }
.expense-vendor small, .expense-vendor strong, .expense-vendor p { display: block; }
.expense-vendor small { color: var(--kp-muted); font-size: 10px; }
.expense-vendor strong { margin-top: 2px; color: var(--kp-navy); font-size: 12px; }
.expense-vendor p { overflow: hidden; margin: 2px 0 0; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.expense-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.expense-facts > div { min-width: 0; padding: 10px 11px; border: 1px solid #e2e8ee; border-radius: 8px; background: #fafcfd; }
.expense-facts small, .expense-facts strong { display: block; }
.expense-facts small { color: var(--kp-muted); font-size: 10px; }
.expense-facts strong { overflow: hidden; margin-top: 3px; color: var(--kp-navy); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.expense-approve-button { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; padding: 9px 13px; border: 0; border-radius: 9px; color: #fff; background: #0c647c; font-size: 11px; font-weight: 700; }
.expense-approve-button:hover { background: #094f62; }
.expense-approve-button .kp-icon { width: 18px; height: 18px; }
.expense-alert { display: flex; align-items: center; gap: 9px; margin-top: 15px; padding: 10px 11px; border: 1px solid; border-radius: 8px; }
.expense-alert .kp-icon { width: 19px; height: 19px; flex: 0 0 auto; }
.expense-alert span, .expense-alert strong, .expense-alert small { display: block; }
.expense-alert strong { font-size: 10px; }
.expense-alert small { margin-top: 2px; font-size: 10px; line-height: 1.4; }
.expense-alert-draft { border-color: #b6d6ee; color: #1769a7; background: #eff7fd; }
.expense-alert-draft small { color: #52728e; }
.expense-alert-rejected { border-color: #efb4af; color: #a93232; background: #fff0ef; }
.expense-alert-rejected small { color: #8e5252; }

@media (max-width: 1199.98px) {
    .expense-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 991.98px) {
    .expense-layout { grid-template-columns: 1fr; }
    .expense-detail { position: static; min-height: 0; }
    .expense-detail .invoice-detail-empty { min-height: 210px; }
}
@media (max-width: 575.98px) {
    .expense-detail { padding: 18px; }
    .expense-detail-head { grid-template-columns: auto minmax(0, 1fr); }
    .expense-detail-head > .invoice-status { grid-column: 1 / -1; justify-self: start; }
}

.mark-deposit-held { color: #1769a7; background: #deefff; }
.mark-deposit-active { color: #08775a; background: #dcf8ee; }
.mark-deposit-pending { color: #94610a; background: #fff1bd; }
.mark-deposit-deduction { color: #c03737; background: #ffe1df; }
.deposit-toolbar { display: grid; grid-template-columns: minmax(250px, 1.2fr) minmax(190px, .85fr) minmax(200px, .85fr) auto; gap: 16px; align-items: end; padding: 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.deposit-layout { grid-template-columns: minmax(0, 1fr) 370px; }
.deposit-table { width: 100%; min-width: 1000px; border-collapse: collapse; table-layout: fixed; }
.deposit-table th { padding: 12px; border-bottom: 1px solid #e6ecf2; color: #64778d; background: #f8fafc; font-size: 10px; font-weight: 700; letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.deposit-table th:first-child, .deposit-table td:first-child { width: 22%; padding-left: 22px; }
.deposit-table th:nth-child(2) { width: 20%; }
.deposit-table th:nth-child(3) { width: 14%; }
.deposit-table th:nth-child(4) { width: 15%; }
.deposit-table th:nth-child(5) { width: 15%; }
.deposit-table th:nth-child(6) { width: 14%; }
.deposit-table td { height: 82px; padding: 12px; border-bottom: 1px solid #edf1f5; color: #2b4966; font-size: 11px; line-height: 1.4; vertical-align: middle; }
.deposit-table tbody tr { transition: background-color .14s, box-shadow .14s; }
.deposit-table tbody tr:hover { background: #f8fbfc; }
.deposit-table tbody tr.selected { background: #effafa; box-shadow: inset 3px 0 var(--kp-teal); }
.deposit-table td > strong, .deposit-table td > small { display: block; }
.deposit-table td > strong { overflow: hidden; color: var(--kp-navy); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.deposit-table td > small { overflow: hidden; margin-top: 4px; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.deposit-table .deposit-refund { color: #08775a; font-size: 12px; }
.deposit-avatar { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #1769a7; background: #e2f0fb; font-size: 11px; font-weight: 750; }
.deposit-status-active { color: #08775a; background: #dcf8ee; }
.deposit-status-pending { color: #94610a; background: #fff1bd; }
.deposit-status-returned { color: #1769a7; background: #deefff; }
.deposit-status-deducted { color: #c03737; background: #ffe1df; }
.deposit-detail { position: sticky; top: 20px; min-height: 650px; padding: 22px; border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.deposit-detail h2 { margin: 0; color: var(--kp-navy); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.deposit-detail .invoice-detail-empty { min-height: 604px; }
.deposit-detail .invoice-detail-empty .deposit-detail-icon { margin-bottom: 17px; }
.deposit-detail-icon { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #1769a7; background: #deefff; }
.deposit-detail-icon .kp-icon { width: 23px; height: 23px; }
.deposit-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid #e6ecf2; }
.deposit-detail-head > span:nth-child(2) { min-width: 0; }
.deposit-detail-head small, .deposit-detail-head strong, .deposit-detail-head p { display: block; }
.deposit-detail-head small { color: var(--kp-muted); font-size: 10px; text-transform: uppercase; }
.deposit-detail-head strong { overflow: hidden; margin-top: 2px; color: var(--kp-navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.deposit-detail-head p { margin: 2px 0 0; color: var(--kp-muted); font-size: 10px; }
.deposit-balance { margin-top: 15px; padding: 15px; border: 1px solid #c9dfed; border-radius: 10px; background: #f0f7fc; text-align: center; }
.deposit-balance small, .deposit-balance strong, .deposit-balance span { display: block; }
.deposit-balance small { color: #58758a; font-size: 10px; }
.deposit-balance strong { margin-top: 3px; color: #1769a7; font-size: 23px; letter-spacing: -.03em; }
.deposit-balance span { margin-top: 3px; color: var(--kp-muted); font-size: 10px; }
.deposit-resident { display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 13px; border-radius: 9px; background: #f7f9fb; }
.deposit-resident div { min-width: 0; }
.deposit-resident small, .deposit-resident strong, .deposit-resident p { display: block; }
.deposit-resident small { color: var(--kp-muted); font-size: 10px; }
.deposit-resident strong { margin-top: 2px; color: var(--kp-navy); font-size: 12px; }
.deposit-resident p { overflow: hidden; margin: 2px 0 0; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.deposit-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.deposit-facts > div { min-width: 0; padding: 10px 11px; border: 1px solid #e2e8ee; border-radius: 8px; background: #fafcfd; }
.deposit-facts > div:last-child:nth-child(3) { grid-column: 1 / -1; }
.deposit-facts small, .deposit-facts strong { display: block; }
.deposit-facts small { color: var(--kp-muted); font-size: 10px; }
.deposit-facts strong { overflow: hidden; margin-top: 3px; color: var(--kp-navy); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.deposit-settlement-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; }
.deposit-settlement-head h3 { margin: 0; color: var(--kp-navy); font-size: 13px; }
.deposit-settlement-head span { color: var(--kp-muted); font-size: 10px; }
.deposit-settlement { margin-top: 8px; overflow: hidden; border: 1px solid #e1e8ee; border-radius: 9px; }
.deposit-settlement > div { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 11px; border-bottom: 1px dashed #dfe6ec; }
.deposit-settlement > div:last-child { border-bottom: 0; }
.deposit-settlement span { color: var(--kp-muted); font-size: 10px; }
.deposit-settlement strong { color: #344f68; font-size: 11px; }
.deposit-settlement .deduction { color: #b2463e; }
.deposit-settlement .net { min-height: 47px; border-top: 1px solid #d8e3ea; background: #eef8f7; }
.deposit-settlement .net span { color: #27656b; font-weight: 650; }
.deposit-settlement .net strong { color: #08775a; font-size: 14px; }
.deposit-return-button { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; padding: 9px 13px; border: 0; border-radius: 9px; color: #fff; background: #0c647c; font-size: 11px; font-weight: 700; }
.deposit-return-button:hover { background: #094f62; }
.deposit-return-button .kp-icon { width: 18px; height: 18px; }
.deposit-alert { display: flex; align-items: center; gap: 9px; margin-top: 15px; padding: 10px 11px; border: 1px solid #efb4af; border-radius: 8px; color: #a93232; background: #fff0ef; }
.deposit-alert .kp-icon { width: 19px; height: 19px; flex: 0 0 auto; }
.deposit-alert span, .deposit-alert strong, .deposit-alert small { display: block; }
.deposit-alert strong { font-size: 10px; }
.deposit-alert small { margin-top: 2px; color: #8e5252; font-size: 10px; line-height: 1.4; }

@media (max-width: 1199.98px) {
    .deposit-toolbar { grid-template-columns: 1.2fr .9fr .9fr; }
    .deposit-toolbar .invoice-toolbar-note { display: none; }
    .deposit-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 991.98px) {
    .deposit-layout { grid-template-columns: 1fr; }
    .deposit-detail { position: static; min-height: 0; }
    .deposit-detail .invoice-detail-empty { min-height: 210px; }
}
@media (max-width: 767.98px) {
    .deposit-toolbar { grid-template-columns: 1fr 1fr; }
    .deposit-toolbar .invoice-search { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .deposit-toolbar { gap: 12px; padding: 15px; }
    .deposit-detail { padding: 18px; }
    .deposit-detail-head { grid-template-columns: auto minmax(0, 1fr); }
    .deposit-detail-head > .invoice-status { grid-column: 1 / -1; justify-self: start; }
}

.report-workspace, .report-content { display: flex; flex-direction: column; gap: 20px; }
.report-toolbar { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(390px, 1.2fr) auto; align-items: end; gap: 20px; padding: 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.report-toolbar-copy { min-height: 44px; display: flex; align-items: center; gap: 12px; }
.report-toolbar-copy > span:last-child, .report-toolbar-copy strong, .report-toolbar-copy small { display: block; }
.report-toolbar-copy strong { color: var(--kp-navy); font-size: 14px; }
.report-toolbar-copy small { margin-top: 3px; color: var(--kp-muted); font-size: 10px; }
.report-toolbar-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #087b7b; background: #dcf5f2; }
.report-toolbar-icon .kp-icon { width: 22px; height: 22px; }
.report-filter-group { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.report-updated { min-height: 44px; display: flex; align-items: center; gap: 9px; color: #557088; }
.report-updated .kp-icon { width: 20px; height: 20px; color: #0c8b88; }
.report-updated span, .report-updated small, .report-updated strong { display: block; }
.report-updated small { color: var(--kp-muted); font-size: 10px; }
.report-updated strong { margin-top: 2px; font-size: 10px; font-weight: 650; white-space: nowrap; }
.report-summary .invoice-stat { min-width: 0; }
.report-summary .invoice-stat > span:last-child { min-width: 0; }
.report-summary .invoice-stat strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-summary .invoice-stat em { display: block; margin-top: 4px; color: #718398; font-size: 10px; font-style: normal; line-height: 1.3; }
.report-summary .invoice-stat em.positive { color: #08775a; }
.report-summary .invoice-stat em.warning { color: #94610a; }
.report-summary .invoice-stat em.negative { color: #c03737; }
.mark-report-income { color: #08775a; background: #dcf8ee; }
.mark-report-expense { color: #c03737; background: #ffe1df; }
.mark-report-net { color: #1769a7; background: #deefff; }
.mark-report-collection { color: #94610a; background: #fff1bd; }
.report-chart-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, .85fr); gap: 20px; align-items: stretch; }
.report-detail-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, .85fr); gap: 20px; align-items: stretch; }
.report-panel { min-width: 0; border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.report-panel > header { min-height: 75px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 15px; border-bottom: 1px solid #e8edf2; }
.report-panel > header h2 { margin: 0; color: var(--kp-navy); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.report-panel > header p { margin: 4px 0 0; color: var(--kp-muted); font-size: 11px; line-height: 1.45; }
.report-panel > header > span { padding-top: 4px; color: var(--kp-muted); font-size: 10px; white-space: nowrap; }
.report-period-badge { padding: 6px 9px !important; border-radius: 7px; color: #176a76 !important; background: #e7f6f5; font-weight: 650; }
.report-chart { min-height: 300px; padding: 6px 9px 2px; }
.report-composition-panel { display: flex; flex-direction: column; }
.report-composition-panel .report-donut { min-height: 220px; padding: 2px 10px 0; }
.report-legend { padding: 0 22px 18px; }
.report-legend > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid #edf1f5; }
.report-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--legend-color); }
.report-legend span, .report-legend strong, .report-legend small { display: block; min-width: 0; }
.report-legend strong { color: #294964; font-size: 10px; }
.report-legend small { overflow: hidden; margin-top: 2px; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.report-legend b { color: var(--kp-navy); font-size: 10px; }
.report-table-scroll { max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.report-performance table { width: 100%; min-width: 600px; border-collapse: collapse; table-layout: fixed; }
.report-performance th { padding: 11px 12px; color: #64778d; background: #f8fafc; font-size: 10px; font-weight: 700; letter-spacing: .035em; text-align: left; text-transform: uppercase; }
.report-performance th:first-child, .report-performance td:first-child { width: 29%; padding-left: 22px; }
.report-performance th:nth-child(2), .report-performance th:nth-child(3), .report-performance th:nth-child(4) { width: 17%; }
.report-performance th:last-child { width: 20%; }
.report-performance td { height: 78px; padding: 12px; border-top: 1px solid #edf1f5; color: #2b4966; font-size: 11px; vertical-align: middle; }
.report-property-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.report-property-cell > span:last-child { min-width: 0; }
.report-performance td strong, .report-performance td small { display: block; }
.report-performance td:first-child strong { color: var(--kp-navy); font-size: 11px; line-height: 1.3; }
.report-performance td:first-child small { margin-top: 3px; color: var(--kp-muted); font-size: 10px; }
.report-property-mark { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #1769a7; background: #e2f0fb; }
.report-property-mark .kp-icon { width: 18px; height: 18px; }
.report-net-value { color: #08775a; font-size: 11px; }
.report-occupancy { display: flex; align-items: center; gap: 8px; }
.report-occupancy > span { width: 68px; height: 6px; overflow: hidden; border-radius: 8px; background: #e5ebf0; }
.report-occupancy i { display: block; height: 100%; border-radius: inherit; background: #0c8b88; }
.report-occupancy strong { color: var(--kp-navy); font-size: 10px; }
.report-health { padding-bottom: 18px; }
.report-health-score { display: flex; align-items: center; gap: 15px; padding: 20px 22px 16px; }
.report-health-score > span { width: 64px; height: 64px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #edf2f5; }
.report-health-score i { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#0c8b88 var(--score), #e8edf1 0); font-style: normal; }
.report-health-score b { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--kp-navy); background: #fff; font-size: 17px; }
.report-health-score > div strong, .report-health-score > div small { display: block; }
.report-health-score > div strong { color: #08775a; font-size: 14px; }
.report-health-score > div small { margin-top: 4px; color: var(--kp-muted); font-size: 10px; line-height: 1.4; }
.report-health dl { margin: 0 22px; overflow: hidden; border: 1px solid #e1e8ee; border-radius: 9px; }
.report-health dl > div { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-bottom: 1px dashed #dfe6ec; }
.report-health dl > div:last-child { border-bottom: 0; }
.report-health dt { color: var(--kp-muted); font-size: 10px; font-weight: 500; }
.report-health dd { margin: 0; color: #294964; font-size: 10px; font-weight: 700; text-align: right; }
.report-health dd.warning { color: #ad6810; }
.report-preview-note { margin: 14px 22px 0; padding: 10px 11px; border-radius: 8px; color: var(--kp-muted); background: #f4f7fa; font-size: 10px; line-height: 1.5; }
.report-loading { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.report-loading span { height: 88px; border-radius: 13px; background: linear-gradient(90deg, #f0f4f8 25%, #f8fafc 50%, #f0f4f8 75%); background-size: 200% 100%; animation: room-shimmer 1.25s infinite linear; }
.report-error { min-height: 360px; border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; }

@media (max-width: 1199.98px) {
    .report-toolbar { grid-template-columns: minmax(190px, .7fr) minmax(360px, 1.3fr); }
    .report-updated { display: none; }
    .report-chart-grid, .report-detail-grid { grid-template-columns: minmax(0, 1.45fr) minmax(290px, .8fr); }
}
@media (max-width: 991.98px) {
    .report-toolbar { grid-template-columns: 1fr; align-items: stretch; }
    .report-chart-grid, .report-detail-grid { grid-template-columns: 1fr; }
    .report-composition-panel, .report-health { max-width: none; }
}
@media (max-width: 575.98px) {
    .report-workspace, .report-content { gap: 14px; }
    .report-toolbar { gap: 15px; padding: 15px; }
    .report-filter-group { grid-template-columns: 1fr; gap: 11px; }
    .report-summary { grid-template-columns: 1fr 1fr; gap: 10px; }
    .report-summary .invoice-stat { min-height: 104px; align-items: flex-start; gap: 10px; padding: 13px; }
    .report-summary .invoice-stat-mark { width: 34px; height: 34px; border-radius: 9px; }
    .report-summary .invoice-stat strong { font-size: 19px; }
    .report-summary .invoice-stat small, .report-summary .invoice-stat em { font-size: 10px; white-space: normal; }
    .report-panel > header { min-height: 0; padding: 17px 17px 13px; }
    .report-panel > header h2 { font-size: 15px; }
    .report-period-badge { display: none; }
    .report-chart { min-height: 270px; padding-left: 0; padding-right: 2px; }
    .report-legend { padding: 0 17px 14px; }
    .report-health-score { padding: 18px 17px 15px; }
    .report-health dl { margin: 0 17px; }
    .report-preview-note { margin-left: 17px; margin-right: 17px; }
}

.dashboard-workspace, .dashboard-content { display: flex; flex-direction: column; gap: 20px; }
.dashboard-toolbar { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(390px, 1.15fr) auto; align-items: end; gap: 20px; padding: 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.dashboard-welcome { min-height: 44px; display: flex; align-items: center; gap: 12px; }
.dashboard-welcome > span:last-child, .dashboard-welcome strong, .dashboard-welcome small { display: block; }
.dashboard-welcome strong { color: var(--kp-navy); font-size: 14px; }
.dashboard-welcome small { margin-top: 3px; color: var(--kp-muted); font-size: 10px; line-height: 1.4; }
.dashboard-welcome-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #087b7b; background: #dcf5f2; }
.dashboard-welcome-icon .kp-icon { width: 22px; height: 22px; }
.dashboard-filter-group { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 14px; }
.dashboard-updated { min-height: 44px; display: flex; align-items: center; gap: 9px; color: #557088; }
.dashboard-updated .kp-icon { width: 20px; height: 20px; color: #0c8b88; }
.dashboard-updated span, .dashboard-updated small, .dashboard-updated strong { display: block; }
.dashboard-updated small { color: var(--kp-muted); font-size: 10px; }
.dashboard-updated strong { margin-top: 2px; font-size: 10px; font-weight: 650; white-space: nowrap; }
.dashboard-summary .invoice-stat { min-width: 0; }
.dashboard-summary .invoice-stat > span:last-child { min-width: 0; }
.dashboard-summary .invoice-stat strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-summary .invoice-stat em { display: block; margin-top: 4px; color: #718398; font-size: 10px; font-style: normal; line-height: 1.35; }
.dashboard-summary .invoice-stat em.positive { color: #08775a; }
.dashboard-summary .invoice-stat em.negative { color: #c03737; }
.mark-dashboard-occupancy { color: #1d5fc3; background: #dbeafe; }
.mark-dashboard-income { color: #08775a; background: #dcf8ee; }
.mark-dashboard-outstanding { color: #c03737; background: #ffe1df; }
.mark-dashboard-operation { color: #94610a; background: #fff1bd; }
.dashboard-chart-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, .7fr); gap: 20px; }
.dashboard-lower-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 20px; align-items: start; }
.dashboard-panel { min-width: 0; overflow: hidden; border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.dashboard-panel > header { min-height: 75px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 15px; border-bottom: 1px solid #e8edf2; }
.dashboard-panel > header h2 { margin: 0; color: var(--kp-navy); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.dashboard-panel > header p { margin: 4px 0 0; color: var(--kp-muted); font-size: 11px; line-height: 1.45; }
.dashboard-panel > header > a { display: inline-flex; align-items: center; gap: 3px; padding-top: 4px; color: #087b7b; font-size: 10px; font-weight: 700; white-space: nowrap; }
.dashboard-panel > header > a:hover { color: #055f69; }
.dashboard-panel > header > a .kp-icon { width: 15px; height: 15px; }
.dashboard-panel > header > span { padding-top: 4px; color: var(--kp-muted); font-size: 10px; white-space: nowrap; }
.dashboard-chart { min-height: 286px; padding: 4px 10px 2px; }
.dashboard-occupancy-panel { display: flex; flex-direction: column; }
.dashboard-donut { min-height: 215px; padding: 0 10px; }
.dashboard-occupancy-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: auto 20px 18px; }
.dashboard-occupancy-legend span { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; padding: 9px 10px; border-radius: 8px; background: #f7f9fb; }
.dashboard-occupancy-legend i { width: 8px; height: 8px; border-radius: 50%; }
.dashboard-occupancy-legend i.is-occupied { background: #2563eb; }
.dashboard-occupancy-legend i.is-available { background: #10a37f; }
.dashboard-occupancy-legend b { color: #536981; font-size: 10px; font-weight: 600; }
.dashboard-occupancy-legend strong { color: var(--kp-navy); font-size: 11px; }
.dashboard-property-list { padding: 4px 22px 10px; }
.dashboard-property-row { min-height: 84px; display: grid; grid-template-columns: auto minmax(145px, 1.2fr) minmax(130px, .9fr) minmax(105px, .7fr) minmax(90px, .55fr); align-items: center; gap: 12px; border-bottom: 1px solid #edf1f5; }
.dashboard-property-row:last-child { border-bottom: 0; }
.dashboard-property-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #1769a7; background: #e2f0fb; }
.dashboard-property-icon .kp-icon { width: 19px; height: 19px; }
.dashboard-property-name strong, .dashboard-property-name small, .dashboard-property-income strong, .dashboard-property-income small { display: block; }
.dashboard-property-name strong { color: var(--kp-navy); font-size: 11px; }
.dashboard-property-name small, .dashboard-property-income small { margin-top: 3px; color: var(--kp-muted); font-size: 10px; }
.dashboard-property-income strong { margin-top: 3px; color: #08775a; font-size: 11px; }
.dashboard-property-progress { display: flex; align-items: center; gap: 7px; }
.dashboard-property-progress i { width: 60px; height: 6px; overflow: hidden; border-radius: 6px; background: #e4ebf0; }
.dashboard-property-progress b { display: block; height: 100%; border-radius: inherit; background: #0c8b88; }
.dashboard-property-progress strong { color: var(--kp-navy); font-size: 10px; }
.dashboard-property-alert { text-align: right; }
.dashboard-property-alert b, .dashboard-property-alert small { display: block; }
.dashboard-property-alert b { color: #94610a; font-size: 14px; }
.dashboard-property-alert small { color: var(--kp-muted); font-size: 10px; line-height: 1.3; }
.dashboard-property-alert.needs-action b { color: #c03737; }
.dashboard-action-list { padding: 4px 18px 8px; }
.dashboard-action-row { min-height: 70px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 4px; border-bottom: 1px solid #edf1f5; }
.dashboard-action-row:last-child { border-bottom: 0; }
.dashboard-action-row:hover strong { color: #087b7b; }
.dashboard-action-row > .kp-icon { width: 16px; height: 16px; color: #8a9aad; }
.dashboard-action-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; }
.dashboard-action-icon > span { display: grid; place-items: center; }
.dashboard-action-icon .kp-icon { width: 18px; height: 18px; }
.dashboard-action-icon.tone-danger { color: #c03737; background: #ffe1df; }
.dashboard-action-icon.tone-warning { color: #94610a; background: #fff1bd; }
.dashboard-action-icon.tone-info { color: #1769a7; background: #deefff; }
.dashboard-action-icon.tone-teal { color: #08775a; background: #dcf8ee; }
.dashboard-action-row strong, .dashboard-action-row small { display: block; }
.dashboard-action-row strong { color: var(--kp-navy); font-size: 10px; line-height: 1.35; }
.dashboard-action-row small { margin-top: 4px; color: var(--kp-muted); font-size: 10px; line-height: 1.4; }
.dashboard-activity-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 8px 22px 5px; }
.dashboard-activity-row { min-height: 67px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 9px 13px 9px 0; border-bottom: 1px solid #edf1f5; }
.dashboard-activity-row:nth-child(odd) { margin-right: 20px; border-right: 1px solid #edf1f5; }
.dashboard-activity-row:nth-child(even) { padding-left: 20px; }
.dashboard-activity-dot { width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 3px #dce5ec; background: #637a91; }
.dashboard-activity-dot.activity-payment { background: #10a37f; box-shadow: 0 0 0 3px #d9f4ea; }
.dashboard-activity-dot.activity-complaint { background: #dc2626; box-shadow: 0 0 0 3px #fde2e2; }
.dashboard-activity-dot.activity-meter { background: #d99a16; box-shadow: 0 0 0 3px #fff0c4; }
.dashboard-activity-dot.activity-checkin { background: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }
.dashboard-activity-row strong, .dashboard-activity-row small { display: block; }
.dashboard-activity-row strong { color: var(--kp-navy); font-size: 10px; }
.dashboard-activity-row small { margin-top: 3px; color: var(--kp-muted); font-size: 10px; line-height: 1.35; }
.dashboard-activity-row time { color: #718398; font-size: 10px; white-space: nowrap; }
.dashboard-preview-note { margin: 10px 22px 18px; padding: 10px 11px; border-radius: 8px; color: var(--kp-muted); background: #f4f7fa; font-size: 10px; line-height: 1.5; }
.dashboard-error { min-height: 360px; border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; }

@media (max-width: 1199.98px) {
    .dashboard-toolbar { grid-template-columns: minmax(220px, .8fr) minmax(350px, 1.2fr); }
    .dashboard-updated { display: none; }
    .dashboard-chart-grid { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); }
    .dashboard-lower-grid { grid-template-columns: 1fr; }
}
@media (max-width: 991.98px) {
    .dashboard-toolbar { grid-template-columns: 1fr; align-items: stretch; }
    .dashboard-chart-grid { grid-template-columns: 1fr; }
    .dashboard-activity-grid { grid-template-columns: 1fr; }
    .dashboard-activity-row:nth-child(odd) { margin-right: 0; border-right: 0; }
    .dashboard-activity-row:nth-child(even) { padding-left: 0; }
}
@media (max-width: 575.98px) {
    .dashboard-workspace, .dashboard-content { gap: 14px; }
    .dashboard-toolbar { gap: 15px; padding: 15px; }
    .dashboard-filter-group { grid-template-columns: 1fr; gap: 11px; }
    .dashboard-summary { grid-template-columns: 1fr 1fr; gap: 10px; }
    .dashboard-summary .invoice-stat { min-height: 108px; align-items: flex-start; gap: 10px; padding: 13px; }
    .dashboard-summary .invoice-stat-mark { width: 34px; height: 34px; border-radius: 9px; }
    .dashboard-summary .invoice-stat strong { font-size: 19px; }
    .dashboard-summary .invoice-stat small, .dashboard-summary .invoice-stat em { font-size: 10px; white-space: normal; }
    .dashboard-panel > header { min-height: 0; padding: 17px 17px 13px; }
    .dashboard-panel > header h2 { font-size: 15px; }
    .dashboard-panel > header > a { font-size: 10px; }
    .dashboard-chart { min-height: 270px; padding-left: 0; padding-right: 2px; }
    .dashboard-property-list { padding: 3px 17px 8px; }
    .dashboard-property-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 13px 0; }
    .dashboard-property-income, .dashboard-property-progress { grid-column: 2 / -1; }
    .dashboard-property-alert { grid-column: 3; grid-row: 1; }
    .dashboard-activity-grid { padding-left: 17px; padding-right: 17px; }
    .dashboard-activity-row { grid-template-columns: auto minmax(0, 1fr); padding-right: 0; }
    .dashboard-activity-row time { grid-column: 2; }
    .dashboard-preview-note { margin-left: 17px; margin-right: 17px; }
}

.ops-dashboard-content { display: flex; flex-direction: column; gap: 20px; }
.ops-dashboard-toolbar { display: grid; grid-template-columns: minmax(300px, 1fr) 250px auto; align-items: end; gap: 20px; padding: 18px 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.ops-dashboard-greeting { min-height: 44px; display: flex; align-items: center; gap: 12px; }
.ops-dashboard-greeting > span:last-child, .ops-dashboard-greeting strong, .ops-dashboard-greeting small { display: block; }
.ops-dashboard-greeting strong { color: var(--kp-navy); font-size: 14px; }
.ops-dashboard-greeting small { margin-top: 3px; color: var(--kp-muted); font-size: 10px; line-height: 1.4; }
.ops-dashboard-greeting-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #087b7b; background: #dcf5f2; }
.ops-dashboard-greeting-icon .kp-icon { width: 22px; height: 22px; }
.ops-dashboard-date { min-height: 44px; display: flex; align-items: center; gap: 9px; color: #557088; }
.ops-dashboard-date .kp-icon { width: 20px; height: 20px; color: #0c8b88; }
.ops-dashboard-date span, .ops-dashboard-date strong, .ops-dashboard-date small { display: block; }
.ops-dashboard-date strong { color: #294964; font-size: 10px; white-space: nowrap; }
.ops-dashboard-date small { margin-top: 3px; color: var(--kp-muted); font-size: 10px; }
.ops-dashboard-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.ops-dashboard-summary article { min-height: 112px; display: flex; align-items: center; gap: 13px; padding: 18px 20px; border-right: 1px solid #e8edf2; }
.ops-dashboard-summary article:last-child { border-right: 0; }
.ops-dashboard-summary article > span:last-child, .ops-dashboard-summary small, .ops-dashboard-summary strong, .ops-dashboard-summary em { display: block; min-width: 0; }
.ops-dashboard-summary small { color: #536981; font-size: 10px; font-weight: 650; }
.ops-dashboard-summary strong { margin-top: 3px; color: var(--kp-navy); font-size: 25px; line-height: 1.1; letter-spacing: -.035em; }
.ops-dashboard-summary em { overflow: hidden; margin-top: 5px; color: var(--kp-muted); font-size: 10px; font-style: normal; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.ops-summary-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; }
.ops-summary-icon .kp-icon { width: 21px; height: 21px; }
.ops-summary-icon.is-room { color: #1d5fc3; background: #dbeafe; }
.ops-summary-icon.is-resident { color: #08775a; background: #dcf8ee; }
.ops-summary-icon.is-billing { color: #94610a; background: #fff1bd; }
.ops-summary-icon.is-complaint { color: #c03737; background: #ffe1df; }
.ops-dashboard-primary-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .75fr); gap: 20px; align-items: start; }
.ops-dashboard-secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.ops-dashboard-panel { min-width: 0; overflow: hidden; border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.ops-dashboard-panel > header { min-height: 75px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 15px; border-bottom: 1px solid #e8edf2; }
.ops-dashboard-panel > header h2 { margin: 0; color: var(--kp-navy); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.ops-dashboard-panel > header p { margin: 4px 0 0; color: var(--kp-muted); font-size: 11px; line-height: 1.45; }
.ops-dashboard-panel > header > a { display: inline-flex; align-items: center; gap: 3px; padding-top: 4px; color: #087b7b; font-size: 10px; font-weight: 700; white-space: nowrap; }
.ops-dashboard-panel > header > a:hover { color: #055f69; }
.ops-dashboard-panel > header > a .kp-icon { width: 15px; height: 15px; }
.ops-dashboard-panel > header > span { padding-top: 4px; color: var(--kp-muted); font-size: 10px; white-space: nowrap; }
.ops-room-overview { padding: 19px 22px 22px; }
.ops-room-progress { height: 9px; display: flex; gap: 3px; overflow: hidden; border-radius: 8px; background: #edf1f4; }
.ops-room-progress i { display: block; height: 100%; min-width: 0; }
.ops-room-progress .status-occupied, .ops-room-legend .status-occupied { background: #2563eb; }
.ops-room-progress .status-available, .ops-room-legend .status-available { background: #10a37f; }
.ops-room-progress .status-reserved, .ops-room-legend .status-reserved { background: #eab308; }
.ops-room-progress .status-maintenance, .ops-room-legend .status-maintenance { background: #dc2626; }
.ops-room-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 13px 0 18px; }
.ops-room-legend span { display: flex; align-items: center; gap: 6px; }
.ops-room-legend i { width: 8px; height: 8px; border-radius: 50%; }
.ops-room-legend b { color: #536981; font-size: 10px; font-weight: 600; }
.ops-room-legend strong { color: var(--kp-navy); font-size: 10px; }
.ops-room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 9px; }
.ops-room-tile { min-height: 80px; display: flex; flex-direction: column; justify-content: center; padding: 10px; border: 1px solid var(--room-border); border-radius: 11px; color: var(--kp-navy); background: var(--room-soft); transition: transform .14s ease, box-shadow .14s ease; }
.ops-room-tile:hover { transform: translateY(-2px); box-shadow: 0 7px 16px #07315b12; }
.ops-room-tile span { color: #60778e; font-size: 10px; font-weight: 650; text-transform: uppercase; }
.ops-room-tile strong { margin-top: 1px; font-size: 18px; line-height: 1.2; }
.ops-room-tile small { margin-top: 4px; overflow: hidden; color: var(--room-accent); font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ops-schedule-list { padding: 5px 18px 8px; }
.ops-schedule-row { min-height: 75px; display: grid; grid-template-columns: 42px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #edf1f5; }
.ops-schedule-row:last-child { border-bottom: 0; }
.ops-schedule-row time { color: var(--kp-navy); font-size: 10px; font-weight: 750; }
.ops-schedule-row > i { width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #637a91; box-shadow: 0 0 0 3px #dce5ec; }
.ops-schedule-row > i.schedule-checkin { background: #10a37f; box-shadow: 0 0 0 3px #d9f4ea; }
.ops-schedule-row > i.schedule-maintenance { background: #dc2626; box-shadow: 0 0 0 3px #fde2e2; }
.ops-schedule-row > i.schedule-meter { background: #eab308; box-shadow: 0 0 0 3px #fff0c4; }
.ops-schedule-row > i.schedule-checkout { background: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }
.ops-schedule-row > span { min-width: 0; }
.ops-schedule-row strong, .ops-schedule-row small { display: block; }
.ops-schedule-row strong { color: var(--kp-navy); font-size: 10px; line-height: 1.35; }
.ops-schedule-row small { margin-top: 4px; color: var(--kp-muted); font-size: 10px; line-height: 1.4; }
.ops-schedule-row > .kp-icon { width: 15px; height: 15px; color: #8a9aad; }
.ops-schedule-row:hover strong { color: #087b7b; }
.ops-schedule-empty { min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px; color: var(--kp-muted); text-align: center; }
.ops-schedule-empty .kp-icon { width: 28px; height: 28px; color: #8da1b2; }
.ops-schedule-empty strong { margin-top: 9px; color: var(--kp-navy); font-size: 11px; }
.ops-schedule-empty small { margin-top: 4px; font-size: 10px; }
.ops-attention-list { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 20px 10px; }
.ops-attention-row { min-height: 74px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 12px 10px 0; border-bottom: 1px solid #edf1f5; }
.ops-attention-row:nth-child(odd) { margin-right: 17px; border-right: 1px solid #edf1f5; }
.ops-attention-row:nth-child(even) { padding-left: 17px; }
.ops-attention-row > span:nth-child(2) { min-width: 0; }
.ops-attention-row strong, .ops-attention-row small { display: block; }
.ops-attention-row strong { color: var(--kp-navy); font-size: 10px; line-height: 1.35; }
.ops-attention-row small { margin-top: 4px; color: var(--kp-muted); font-size: 10px; line-height: 1.4; }
.ops-attention-row > .kp-icon { width: 15px; height: 15px; color: #8a9aad; }
.ops-attention-row:hover strong { color: #087b7b; }
.ops-activity-list { padding: 5px 20px 8px; }
.ops-activity-row { min-height: 69px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid #edf1f5; }
.ops-activity-row:last-child { border-bottom: 0; }
.ops-activity-row > span:nth-child(2) { min-width: 0; }
.ops-activity-row strong, .ops-activity-row small { display: block; }
.ops-activity-row strong { color: var(--kp-navy); font-size: 10px; }
.ops-activity-row small { margin-top: 3px; overflow: hidden; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ops-activity-row time { color: #718398; font-size: 10px; white-space: nowrap; }
.ops-dashboard-preview-note { margin: -4px 0 0; color: var(--kp-muted); font-size: 10px; line-height: 1.5; text-align: right; }

@media (max-width: 1199.98px) {
    .ops-dashboard-toolbar { grid-template-columns: minmax(260px, 1fr) 240px; }
    .ops-dashboard-date { display: none; }
    .ops-dashboard-primary-grid { grid-template-columns: minmax(0, 1.35fr) minmax(310px, .75fr); }
}
@media (max-width: 991.98px) {
    .ops-dashboard-primary-grid, .ops-dashboard-secondary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .ops-dashboard-toolbar { grid-template-columns: 1fr; align-items: stretch; }
    .ops-dashboard-summary { grid-template-columns: 1fr 1fr; }
    .ops-dashboard-summary article:nth-child(2) { border-right: 0; }
    .ops-dashboard-summary article:nth-child(-n+2) { border-bottom: 1px solid #e8edf2; }
    .ops-room-grid { grid-template-columns: repeat(4, minmax(62px, 1fr)); }
}
@media (max-width: 575.98px) {
    .ops-dashboard-content { gap: 14px; }
    .ops-dashboard-toolbar { gap: 14px; padding: 15px; }
    .ops-dashboard-summary article { min-height: 116px; align-items: flex-start; gap: 9px; padding: 14px 12px; }
    .ops-dashboard-summary strong { font-size: 21px; }
    .ops-dashboard-summary em { white-space: normal; }
    .ops-summary-icon { width: 34px; height: 34px; border-radius: 9px; }
    .ops-summary-icon .kp-icon { width: 18px; height: 18px; }
    .ops-dashboard-panel > header { min-height: 0; padding: 17px 17px 13px; }
    .ops-dashboard-panel > header h2 { font-size: 15px; }
    .ops-room-overview { padding: 15px 17px 18px; }
    .ops-room-legend { gap: 7px 12px; }
    .ops-room-grid { grid-template-columns: repeat(3, minmax(70px, 1fr)); }
    .ops-room-tile { min-height: 74px; }
    .ops-schedule-list, .ops-activity-list { padding-left: 15px; padding-right: 15px; }
    .ops-attention-list { grid-template-columns: 1fr; padding-left: 15px; padding-right: 15px; }
    .ops-attention-row:nth-child(odd) { margin-right: 0; border-right: 0; }
    .ops-attention-row:nth-child(even) { padding-left: 0; }
    .ops-activity-row { grid-template-columns: auto minmax(0, 1fr); padding: 10px 0; }
    .ops-activity-row time { grid-column: 2; }
    .ops-dashboard-preview-note { text-align: left; }
}

.meter-workspace { display: flex; flex-direction: column; gap: 20px; }
.mark-meter-total { color: #1769a7; background: #deefff; }
.mark-meter-recorded { color: #08775a; background: #dcf8ee; }
.mark-meter-pending { color: #94610a; background: #fff1bd; }
.mark-meter-anomaly { color: #c03737; background: #ffe1df; }
.meter-toolbar { display: grid; grid-template-columns: minmax(240px, 1.2fr) minmax(175px, .8fr) minmax(165px, .75fr) minmax(155px, .7fr); gap: 16px; align-items: end; padding: 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.meter-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.meter-table { width: 100%; min-width: 1040px; border-collapse: collapse; table-layout: fixed; }
.meter-table th { padding: 12px; border-bottom: 1px solid #e6ecf2; color: #64778d; background: #f8fafc; font-size: 10px; font-weight: 700; letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.meter-table th:first-child, .meter-table td:first-child { width: 23%; padding-left: 22px; }
.meter-table th:nth-child(2) { width: 18%; }
.meter-table th:nth-child(3) { width: 16%; }
.meter-table th:nth-child(4) { width: 14%; }
.meter-table th:nth-child(5) { width: 15%; }
.meter-table th:nth-child(6) { width: 14%; }
.meter-table td { height: 82px; padding: 12px; border-bottom: 1px solid #edf1f5; color: #2b4966; font-size: 11px; line-height: 1.4; vertical-align: middle; }
.meter-table tbody tr { transition: background-color .14s, box-shadow .14s; }
.meter-table tbody tr:hover { background: #f8fbfc; }
.meter-table tbody tr.selected { background: #effafa; box-shadow: inset 3px 0 var(--kp-teal); }
.meter-table td > strong, .meter-table td > small { display: block; }
.meter-table td > strong { overflow: hidden; color: var(--kp-navy); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.meter-table td > small { overflow: hidden; margin-top: 4px; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.meter-table .meter-amount { color: #08775a; font-size: 12px; }
.meter-identity { width: 100%; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; border-radius: 8px; color: var(--kp-navy); background: transparent; text-align: left; }
.meter-identity > span:last-child { min-width: 0; }
.meter-identity strong, .meter-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter-identity strong { margin-top: 3px; font-size: 11px; }
.meter-identity small { color: #527089; font-size: 10px; font-weight: 650; }
.meter-type-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; }
.meter-type-icon > span { display: grid; place-items: center; }
.meter-type-icon .kp-icon { width: 20px; height: 20px; }
.meter-type-electricity { color: #a46b08; background: #fff1bd; }
.meter-type-water { color: #1769a7; background: #deefff; }
.meter-status-recorded { color: #08775a; background: #dcf8ee; }
.meter-status-pending { color: #94610a; background: #fff1bd; }
.meter-status-anomaly { color: #c03737; background: #ffe1df; }
.meter-status-billed { color: #1769a7; background: #deefff; }
.meter-detail { position: sticky; top: 20px; min-height: 635px; padding: 22px; border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.meter-detail h2 { margin: 0; color: var(--kp-navy); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.meter-detail .invoice-detail-empty { min-height: 589px; }
.meter-detail .invoice-detail-empty .meter-detail-icon { margin-bottom: 17px; }
.meter-detail-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: #1769a7; background: #deefff; }
.meter-detail-icon .kp-icon { width: 23px; height: 23px; }
.meter-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid #e6ecf2; }
.meter-detail-head > span:nth-child(2) { min-width: 0; }
.meter-detail-head small, .meter-detail-head strong, .meter-detail-head p { display: block; }
.meter-detail-head small { color: var(--kp-muted); font-size: 10px; text-transform: uppercase; }
.meter-detail-head strong { overflow: hidden; margin-top: 2px; color: var(--kp-navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.meter-detail-head p { overflow: hidden; margin: 2px 0 0; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.meter-reading-card { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 15px; padding: 15px; border: 1px solid #d9e4ec; border-radius: 10px; background: #f7fafc; }
.meter-reading-card > i { width: 22px; height: 1px; background: #aebdca; }
.meter-reading-card > div:last-child { text-align: right; }
.meter-reading-card small, .meter-reading-card strong { display: block; }
.meter-reading-card small { color: var(--kp-muted); font-size: 10px; }
.meter-reading-card strong { margin-top: 5px; color: var(--kp-navy); font-size: 14px; }
.meter-usage-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.meter-usage-summary > span { padding: 12px; border-radius: 9px; }
.meter-usage-summary > span:first-child { color: #1769a7; background: #eaf4fb; }
.meter-usage-summary > span:last-child { color: #08775a; background: #e7f8f0; }
.meter-usage-summary small, .meter-usage-summary strong { display: block; }
.meter-usage-summary small { color: #5b748a; font-size: 10px; }
.meter-usage-summary strong { margin-top: 4px; font-size: 14px; }
.meter-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0 0; }
.meter-facts > div { min-width: 0; padding: 10px 11px; border: 1px solid #e2e8ee; border-radius: 8px; background: #fafcfd; }
.meter-facts dt { color: var(--kp-muted); font-size: 10px; font-weight: 500; }
.meter-facts dd { overflow: hidden; margin: 3px 0 0; color: var(--kp-navy); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.meter-read-meta { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 11px; border-radius: 8px; color: #1769a7; background: #edf6fc; }
.meter-read-meta .kp-icon { width: 18px; height: 18px; }
.meter-read-meta span, .meter-read-meta small, .meter-read-meta strong { display: block; }
.meter-read-meta small { color: #627b90; font-size: 10px; }
.meter-read-meta strong { margin-top: 2px; font-size: 10px; }
.meter-alert { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 10px 11px; border: 1px solid #d9e4ec; border-radius: 8px; color: #4f697f; background: #f7fafc; }
.meter-alert > span { display: grid; place-items: center; flex: 0 0 auto; }
.meter-alert .kp-icon { width: 18px; height: 18px; }
.meter-alert p { margin: 0; font-size: 10px; line-height: 1.5; }
.meter-alert-anomaly { border-color: #efb4af; color: #a93232; background: #fff0ef; }
.meter-alert-pending { border-color: #ecd18e; color: #8b5c0b; background: #fff9e8; }
.meter-entry-form { margin-top: 13px; padding: 13px; border: 1px solid #b8dfe0; border-radius: 9px; background: #f0fafa; }
.meter-entry-form > label { display: block; color: #35546c; font-size: 11px; font-weight: 650; }
.meter-entry-form > label span { color: var(--kp-muted); font-weight: 500; }
.meter-entry-control { position: relative; margin-top: 7px; }
.meter-entry-control input { width: 100%; min-height: 42px; padding: 8px 54px 8px 11px; border: 1px solid #b9cbd8; border-radius: 8px; color: var(--kp-navy); background: #fff; font-size: 13px; outline: 0; }
.meter-entry-control input:focus { border-color: var(--kp-teal); box-shadow: 0 0 0 3px #00a6a617; }
.meter-entry-control span { position: absolute; top: 50%; right: 12px; color: var(--kp-muted); font-size: 10px; transform: translateY(-50%); }
.meter-entry-form > small { display: block; margin-top: 6px; color: #c03737; font-size: 10px; }
.meter-entry-form > div:last-child { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.meter-button-secondary, .meter-button-primary { min-height: 38px; padding: 8px 11px; border-radius: 8px; font-size: 10px; font-weight: 700; }
.meter-button-secondary { border: 1px solid #bdcad5; color: #3b566d; background: #fff; }
.meter-button-primary { border: 1px solid #0c7f83; color: #fff; background: #0c7f83; }
.meter-record-button { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 9px 13px; border: 0; border-radius: 9px; color: #fff; background: #0c647c; font-size: 11px; font-weight: 700; }
.meter-record-button:hover { background: #094f62; }
.meter-record-button .kp-icon { width: 18px; height: 18px; }

@media (max-width: 1199.98px) {
    .meter-toolbar { grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(145px, .7fr)); }
    .meter-layout { grid-template-columns: minmax(0, 1fr) 350px; }
}
@media (max-width: 991.98px) {
    .meter-toolbar { grid-template-columns: 1fr 1fr; }
    .meter-layout { grid-template-columns: 1fr; }
    .meter-detail { position: static; min-height: 0; }
    .meter-detail .invoice-detail-empty { min-height: 210px; }
}
@media (max-width: 575.98px) {
    .meter-workspace { gap: 14px; }
    .meter-toolbar { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
    .meter-toolbar .invoice-search { grid-column: auto; }
    .meter-detail { padding: 18px; }
    .meter-detail-head { grid-template-columns: auto minmax(0, 1fr); }
    .meter-detail-head > .invoice-status { grid-column: 1 / -1; justify-self: start; }
    .meter-reading-card { gap: 8px; padding: 12px; }
    .meter-reading-card strong, .meter-usage-summary strong { font-size: 12px; }
}

.complaint-workspace { display: flex; flex-direction: column; gap: 20px; }
.mark-complaint-active { color: #1769a7; background: #deefff; }
.mark-complaint-open { color: #08775a; background: #dcf8ee; }
.mark-complaint-progress { color: #94610a; background: #fff1bd; }
.mark-complaint-urgent { color: #c03737; background: #ffe1df; }
.complaint-toolbar { display: grid; grid-template-columns: minmax(260px, 1.25fr) minmax(180px, .85fr) minmax(175px, .8fr) minmax(160px, .7fr); gap: 16px; align-items: end; padding: 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.complaint-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 20px; align-items: start; }
.complaint-table { width: 100%; min-width: 1080px; border-collapse: collapse; table-layout: fixed; }
.complaint-table th { padding: 12px; border-bottom: 1px solid #e6ecf2; color: #64778d; background: #f8fafc; font-size: 10px; font-weight: 700; letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.complaint-table th:first-child, .complaint-table td:first-child { width: 27%; padding-left: 22px; }
.complaint-table th:nth-child(2) { width: 20%; }
.complaint-table th:nth-child(3) { width: 15%; }
.complaint-table th:nth-child(4) { width: 13%; }
.complaint-table th:nth-child(5) { width: 11%; }
.complaint-table th:nth-child(6) { width: 14%; }
.complaint-table td { height: 86px; padding: 12px; border-bottom: 1px solid #edf1f5; color: #2b4966; font-size: 11px; line-height: 1.4; vertical-align: middle; }
.complaint-table tbody tr { transition: background-color .14s, box-shadow .14s; }
.complaint-table tbody tr:hover { background: #f8fbfc; }
.complaint-table tbody tr.selected { background: #effafa; box-shadow: inset 3px 0 var(--kp-teal); }
.complaint-table td > strong, .complaint-table td > small { display: block; }
.complaint-table td > strong { overflow: hidden; color: var(--kp-navy); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.complaint-table td > small { overflow: hidden; margin-top: 4px; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.complaint-identity { width: 100%; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; border-radius: 8px; color: var(--kp-navy); background: transparent; text-align: left; }
.complaint-identity > span:last-child { min-width: 0; }
.complaint-identity strong, .complaint-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.complaint-identity small { color: #527089; font-size: 10px; font-weight: 650; }
.complaint-identity strong { margin-top: 3px; font-size: 11px; }
.complaint-category-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #1769a7; background: #deefff; }
.complaint-category-icon > span { display: grid; place-items: center; }
.complaint-category-icon .kp-icon { width: 20px; height: 20px; }
.complaint-category-plumbing { color: #1769a7; background: #deefff; }
.complaint-category-electrical { color: #94610a; background: #fff1bd; }
.complaint-category-network { color: #08775a; background: #dcf8ee; }
.complaint-category-security { color: #9a4e12; background: #ffead8; }
.complaint-category-facility { color: #5d6570; background: #e9eef2; }
.complaint-priority { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 4px 8px; border-radius: 7px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.complaint-priority-urgent { color: #b72c2c; background: #ffe1df; }
.complaint-priority-high { color: #a65009; background: #ffead8; }
.complaint-priority-normal { color: #1769a7; background: #deefff; }
.complaint-priority-low { color: #596b7e; background: #e9eef2; }
.complaint-status-open { color: #1769a7; background: #deefff; }
.complaint-status-in_progress { color: #94610a; background: #fff1bd; }
.complaint-status-waiting_resident { color: #a65009; background: #ffead8; }
.complaint-status-resolved { color: #08775a; background: #dcf8ee; }
.complaint-status-closed { color: #596b7e; background: #e9eef2; }
.complaint-detail { position: sticky; top: 20px; min-height: 660px; padding: 22px; border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.complaint-detail h2 { margin: 0; color: var(--kp-navy); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.complaint-detail .invoice-detail-empty { min-height: 614px; }
.complaint-detail .invoice-detail-empty .complaint-detail-icon { margin-bottom: 17px; }
.complaint-detail-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: #1769a7; background: #deefff; }
.complaint-detail-icon .kp-icon { width: 23px; height: 23px; }
.complaint-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid #e6ecf2; }
.complaint-detail-head > span:nth-child(2) { min-width: 0; }
.complaint-detail-head small, .complaint-detail-head strong, .complaint-detail-head p { display: block; }
.complaint-detail-head small { color: var(--kp-muted); font-size: 10px; text-transform: uppercase; }
.complaint-detail-head strong { overflow: hidden; margin-top: 2px; color: var(--kp-navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.complaint-detail-head p { overflow: hidden; margin: 2px 0 0; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.complaint-sla { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 11px 12px; border: 1px solid #d7e3ec; border-radius: 9px; background: #f6fafc; }
.complaint-sla > span:first-child { display: flex; align-items: center; gap: 9px; color: #1769a7; }
.complaint-sla .kp-icon { width: 19px; height: 19px; }
.complaint-sla small, .complaint-sla strong { display: block; }
.complaint-sla small { color: var(--kp-muted); font-size: 10px; }
.complaint-sla strong { margin-top: 1px; color: var(--kp-navy); font-size: 11px; }
.complaint-sla-urgent { border-color: #efb4af; background: #fff3f2; }
.complaint-sla-urgent > span:first-child { color: #c03737; }
.complaint-description { margin: 13px 0 0; padding: 12px; border-radius: 9px; color: #3e5b72; background: #f7f9fb; font-size: 10px; line-height: 1.55; }
.complaint-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 13px 0 0; }
.complaint-facts > div { min-width: 0; padding: 10px 11px; border: 1px solid #e2e8ee; border-radius: 8px; background: #fff; }
.complaint-facts dt { color: var(--kp-muted); font-size: 10px; font-weight: 500; }
.complaint-facts dd { overflow: hidden; margin: 3px 0 0; color: var(--kp-navy); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.complaint-timeline { margin-top: 15px; }
.complaint-timeline h3 { margin: 0 0 10px; color: var(--kp-navy); font-size: 12px; font-weight: 700; }
.complaint-timeline ol { margin: 0; padding: 0; list-style: none; }
.complaint-timeline li { position: relative; min-height: 55px; display: grid; grid-template-columns: 13px minmax(0, 1fr) auto; gap: 9px; padding-bottom: 12px; }
.complaint-timeline li:not(:last-child)::after { content: ''; position: absolute; top: 12px; bottom: 0; left: 5px; width: 1px; background: #d8e1e8; }
.complaint-timeline li > i { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 2px; border: 2px solid #b2c0cc; border-radius: 50%; background: #fff; }
.complaint-timeline li.complete > i { border-color: #0d9275; background: #0d9275; box-shadow: inset 0 0 0 2px #fff; }
.complaint-timeline li span strong, .complaint-timeline li span small { display: block; }
.complaint-timeline li span strong { color: #294964; font-size: 10px; }
.complaint-timeline li span small { margin-top: 3px; color: var(--kp-muted); font-size: 10px; line-height: 1.4; }
.complaint-timeline time { color: #718398; font-size: 10px; white-space: nowrap; }
.complaint-action-button { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; padding: 9px 13px; border: 0; border-radius: 9px; color: #fff; background: #0c647c; font-size: 11px; font-weight: 700; }
.complaint-action-button:hover { background: #094f62; }
.complaint-action-button .kp-icon { width: 18px; height: 18px; }

@media (max-width: 1199.98px) {
    .complaint-toolbar { grid-template-columns: minmax(220px, 1.15fr) repeat(3, minmax(145px, .7fr)); }
    .complaint-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 991.98px) {
    .complaint-toolbar { grid-template-columns: 1fr 1fr; }
    .complaint-layout { grid-template-columns: 1fr; }
    .complaint-detail { position: static; min-height: 0; }
    .complaint-detail .invoice-detail-empty { min-height: 210px; }
}
@media (max-width: 575.98px) {
    .complaint-workspace { gap: 14px; }
    .complaint-toolbar { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
    .complaint-toolbar .invoice-search { grid-column: auto; }
    .complaint-detail { padding: 18px; }
    .complaint-detail-head { grid-template-columns: auto minmax(0, 1fr); }
    .complaint-detail-head > .invoice-status { grid-column: 1 / -1; justify-self: start; }
    .complaint-facts { grid-template-columns: 1fr; }
    .complaint-timeline li { grid-template-columns: 13px minmax(0, 1fr); }
    .complaint-timeline time { grid-column: 2; margin-top: -8px; }
}

.maintenance-workspace { display: flex; flex-direction: column; gap: 20px; }
.mark-maintenance-active { color: #1769a7; background: #deefff; }
.mark-maintenance-today { color: #08775a; background: #dcf8ee; }
.mark-maintenance-material { color: #a65009; background: #ffead8; }
.mark-maintenance-cost { color: #94610a; background: #fff1bd; }
.maintenance-toolbar { display: grid; grid-template-columns: minmax(260px, 1.25fr) minmax(180px, .85fr) minmax(185px, .85fr) minmax(170px, .75fr); gap: 16px; align-items: end; padding: 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.maintenance-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 20px; align-items: start; }
.maintenance-table { width: 100%; min-width: 1080px; border-collapse: collapse; table-layout: fixed; }
.maintenance-table th { padding: 12px; border-bottom: 1px solid #e6ecf2; color: #64778d; background: #f8fafc; font-size: 10px; font-weight: 700; letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.maintenance-table th:first-child, .maintenance-table td:first-child { width: 27%; padding-left: 22px; }
.maintenance-table th:nth-child(2) { width: 18%; }
.maintenance-table th:nth-child(3) { width: 17%; }
.maintenance-table th:nth-child(4) { width: 15%; }
.maintenance-table th:nth-child(5) { width: 11%; }
.maintenance-table th:nth-child(6) { width: 12%; }
.maintenance-table td { height: 86px; padding: 12px; border-bottom: 1px solid #edf1f5; color: #2b4966; font-size: 11px; line-height: 1.4; vertical-align: middle; }
.maintenance-table tbody tr { transition: background-color .14s, box-shadow .14s; }
.maintenance-table tbody tr:hover { background: #f8fbfc; }
.maintenance-table tbody tr.selected { background: #effafa; box-shadow: inset 3px 0 var(--kp-teal); }
.maintenance-table td > strong, .maintenance-table td > small { display: block; }
.maintenance-table td > strong { overflow: hidden; color: var(--kp-navy); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.maintenance-table td > small { overflow: hidden; margin-top: 4px; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.maintenance-identity { width: 100%; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; border-radius: 8px; color: var(--kp-navy); background: transparent; text-align: left; }
.maintenance-identity > span:last-child { min-width: 0; }
.maintenance-identity strong, .maintenance-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maintenance-identity small { color: #527089; font-size: 10px; font-weight: 650; }
.maintenance-identity strong { margin-top: 3px; font-size: 11px; }
.maintenance-category-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; }
.maintenance-category-icon > span { display: grid; place-items: center; }
.maintenance-category-icon .kp-icon { width: 20px; height: 20px; }
.maintenance-category-plumbing { color: #1769a7; background: #deefff; }
.maintenance-category-electrical { color: #94610a; background: #fff1bd; }
.maintenance-category-building { color: #a65009; background: #ffead8; }
.maintenance-category-routine { color: #08775a; background: #dcf8ee; }
.maintenance-category-security { color: #b13c3c; background: #ffe1df; }
.maintenance-category-facility { color: #596b7e; background: #e9eef2; }
.maintenance-status-open { color: #1769a7; background: #deefff; }
.maintenance-status-scheduled { color: #087d85; background: #dcf5f3; }
.maintenance-status-in_progress { color: #94610a; background: #fff1bd; }
.maintenance-status-waiting_material { color: #a65009; background: #ffead8; }
.maintenance-status-completed { color: #08775a; background: #dcf8ee; }
.maintenance-progress { display: flex; align-items: center; gap: 7px; }
.maintenance-progress > span { width: 65px; height: 6px; overflow: hidden; border-radius: 10px; background: #e2e9ef; }
.maintenance-progress i { display: block; height: 100%; border-radius: inherit; background: #0c8b88; }
.maintenance-progress strong { color: var(--kp-navy); font-size: 10px; }
.maintenance-detail { position: sticky; top: 20px; min-height: 680px; padding: 22px; border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.maintenance-detail h2 { margin: 0; color: var(--kp-navy); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.maintenance-detail .invoice-detail-empty { min-height: 634px; }
.maintenance-detail .invoice-detail-empty .maintenance-detail-icon { margin-bottom: 17px; }
.maintenance-detail-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: #94610a; background: #fff1bd; }
.maintenance-detail-icon .kp-icon { width: 23px; height: 23px; }
.maintenance-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid #e6ecf2; }
.maintenance-detail-head > span:nth-child(2) { min-width: 0; }
.maintenance-detail-head small, .maintenance-detail-head strong, .maintenance-detail-head p { display: block; }
.maintenance-detail-head small { color: var(--kp-muted); font-size: 10px; text-transform: uppercase; }
.maintenance-detail-head strong { overflow: hidden; margin-top: 2px; color: var(--kp-navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.maintenance-detail-head p { overflow: hidden; margin: 2px 0 0; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.maintenance-progress-card { margin-top: 14px; padding: 13px; border: 1px solid #cbe3df; border-radius: 9px; background: #f2faf8; }
.maintenance-progress-card > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.maintenance-progress-card small { color: var(--kp-muted); font-size: 10px; }
.maintenance-progress-card strong { color: #08775a; font-size: 14px; }
.maintenance-progress-card > div { height: 7px; overflow: hidden; margin: 9px 0 6px; border-radius: 10px; background: #dce8e5; }
.maintenance-progress-card > div i { display: block; height: 100%; border-radius: inherit; background: #0c8b88; transition: width .2s ease; }
.maintenance-description { margin: 12px 0 0; padding: 11px 12px; border-radius: 9px; color: #3e5b72; background: #f7f9fb; font-size: 10px; line-height: 1.55; }
.maintenance-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0 0; }
.maintenance-facts > div { min-width: 0; padding: 10px 11px; border: 1px solid #e2e8ee; border-radius: 8px; background: #fff; }
.maintenance-facts dt { color: var(--kp-muted); font-size: 10px; font-weight: 500; }
.maintenance-facts dd { overflow: hidden; margin: 3px 0 0; color: var(--kp-navy); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.maintenance-source { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 9px 11px; border-radius: 8px; color: #1769a7; background: #edf6fc; }
.maintenance-source .kp-icon { width: 18px; height: 18px; }
.maintenance-source small, .maintenance-source strong { display: block; }
.maintenance-source small { color: #627b90; font-size: 10px; }
.maintenance-source strong { margin-top: 2px; font-size: 10px; }
.maintenance-checklist { margin-top: 14px; }
.maintenance-checklist h3 { margin: 0 0 9px; color: var(--kp-navy); font-size: 12px; font-weight: 700; }
.maintenance-checklist label { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 39px; padding: 8px 9px; border-top: 1px solid #e8edf1; cursor: pointer; }
.maintenance-checklist label:last-child { border-bottom: 1px solid #e8edf1; }
.maintenance-checklist input { width: 15px; height: 15px; accent-color: #0c8b88; }
.maintenance-checklist label > span { display: grid; place-items: center; color: #718398; }
.maintenance-checklist .kp-icon { width: 16px; height: 16px; }
.maintenance-checklist strong { color: #36536b; font-size: 10px; font-weight: 600; }
.maintenance-checklist label.done strong { color: #768999; text-decoration: line-through; }
.maintenance-checklist label.done > span { color: #0c8b88; }
.maintenance-checklist label.disabled { cursor: default; }
.maintenance-action-button { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 9px 13px; border: 0; border-radius: 9px; color: #fff; background: #0c647c; font-size: 11px; font-weight: 700; }
.maintenance-action-button:hover { background: #094f62; }
.maintenance-action-button .kp-icon { width: 18px; height: 18px; }
.maintenance-action-hint { display: block; margin: 7px 0 0; color: #8a6720; font-size: 10px; text-align: center; }

@media (max-width: 1199.98px) {
    .maintenance-toolbar { grid-template-columns: minmax(220px, 1.15fr) repeat(3, minmax(150px, .75fr)); }
    .maintenance-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 991.98px) {
    .maintenance-toolbar { grid-template-columns: 1fr 1fr; }
    .maintenance-layout { grid-template-columns: 1fr; }
    .maintenance-detail { position: static; min-height: 0; }
    .maintenance-detail .invoice-detail-empty { min-height: 210px; }
}
@media (max-width: 575.98px) {
    .maintenance-workspace { gap: 14px; }
    .maintenance-toolbar { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
    .maintenance-toolbar .invoice-search { grid-column: auto; }
    .maintenance-detail { padding: 18px; }
    .maintenance-detail-head { grid-template-columns: auto minmax(0, 1fr); }
    .maintenance-detail-head > .invoice-status { grid-column: 1 / -1; justify-self: start; }
    .maintenance-facts { grid-template-columns: 1fr; }
}

.inventory-workspace { display: flex; flex-direction: column; gap: 20px; }
.mark-inventory-total { color: #1769a7; background: #deefff; }
.mark-inventory-good { color: #08775a; background: #dcf8ee; }
.mark-inventory-attention { color: #a65009; background: #ffead8; }
.mark-inventory-value { color: #94610a; background: #fff1bd; }
.inventory-toolbar { display: grid; grid-template-columns: minmax(260px, 1.25fr) minmax(180px, .85fr) minmax(190px, .9fr) minmax(165px, .75fr); gap: 16px; align-items: end; padding: 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.inventory-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 20px; align-items: start; }
.inventory-table { width: 100%; min-width: 1080px; border-collapse: collapse; table-layout: fixed; }
.inventory-table th { padding: 12px; border-bottom: 1px solid #e6ecf2; color: #64778d; background: #f8fafc; font-size: 10px; font-weight: 700; letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.inventory-table th:first-child, .inventory-table td:first-child { width: 27%; padding-left: 22px; }
.inventory-table th:nth-child(2) { width: 19%; }
.inventory-table th:nth-child(3) { width: 12%; }
.inventory-table th:nth-child(4) { width: 16%; }
.inventory-table th:nth-child(5) { width: 14%; }
.inventory-table th:nth-child(6) { width: 12%; }
.inventory-table td { height: 86px; padding: 12px; border-bottom: 1px solid #edf1f5; color: #2b4966; font-size: 11px; line-height: 1.4; vertical-align: middle; }
.inventory-table tbody tr { transition: background-color .14s, box-shadow .14s; }
.inventory-table tbody tr:hover { background: #f8fbfc; }
.inventory-table tbody tr.selected { background: #effafa; box-shadow: inset 3px 0 var(--kp-teal); }
.inventory-table td > strong, .inventory-table td > small { display: block; }
.inventory-table td > strong { overflow: hidden; color: var(--kp-navy); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.inventory-table td > small { overflow: hidden; margin-top: 4px; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-table .inventory-value { color: #08775a; font-size: 12px; }
.inventory-identity { width: 100%; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; border-radius: 8px; color: var(--kp-navy); background: transparent; text-align: left; }
.inventory-identity > span:last-child { min-width: 0; }
.inventory-identity strong, .inventory-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-identity small { color: #527089; font-size: 10px; font-weight: 650; }
.inventory-identity strong { margin-top: 3px; font-size: 11px; }
.inventory-category-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; }
.inventory-category-icon > span { display: grid; place-items: center; }
.inventory-category-icon .kp-icon { width: 20px; height: 20px; }
.inventory-category-electronics { color: #1769a7; background: #deefff; }
.inventory-category-furniture { color: #8d5d11; background: #fff1bd; }
.inventory-category-bedding { color: #08775a; background: #dcf8ee; }
.inventory-category-kitchen { color: #a65009; background: #ffead8; }
.inventory-condition-good { color: #08775a; background: #dcf8ee; }
.inventory-condition-worn { color: #94610a; background: #fff1bd; }
.inventory-condition-repair { color: #a65009; background: #ffead8; }
.inventory-condition-damaged { color: #c03737; background: #ffe1df; }
.inventory-detail { position: sticky; top: 20px; min-height: 660px; padding: 22px; border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.inventory-detail h2 { margin: 0; color: var(--kp-navy); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.inventory-detail .invoice-detail-empty { min-height: 614px; }
.inventory-detail .invoice-detail-empty .inventory-detail-icon { margin-bottom: 17px; }
.inventory-detail-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: #1769a7; background: #deefff; }
.inventory-detail-icon .kp-icon { width: 23px; height: 23px; }
.inventory-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid #e6ecf2; }
.inventory-detail-head > span:nth-child(2) { min-width: 0; }
.inventory-detail-head small, .inventory-detail-head strong, .inventory-detail-head p { display: block; }
.inventory-detail-head small { color: var(--kp-muted); font-size: 10px; text-transform: uppercase; }
.inventory-detail-head strong { overflow: hidden; margin-top: 2px; color: var(--kp-navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-detail-head p { overflow: hidden; margin: 2px 0 0; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.inventory-value-card { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; margin-top: 14px; }
.inventory-value-card > span { padding: 13px; border-radius: 9px; background: #f0f7fc; }
.inventory-value-card > span:last-child { background: #f2faf8; }
.inventory-value-card small, .inventory-value-card strong { display: block; }
.inventory-value-card small { color: var(--kp-muted); font-size: 10px; }
.inventory-value-card strong { margin-top: 4px; color: #1769a7; font-size: 15px; }
.inventory-value-card > span:last-child strong { color: #08775a; }
.inventory-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0 0; }
.inventory-facts > div { min-width: 0; padding: 10px 11px; border: 1px solid #e2e8ee; border-radius: 8px; background: #fff; }
.inventory-facts .inventory-fact-wide { grid-column: 1 / -1; }
.inventory-facts dt { color: var(--kp-muted); font-size: 10px; font-weight: 500; }
.inventory-facts dd { overflow: hidden; margin: 3px 0 0; color: var(--kp-navy); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.inventory-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 11px; padding: 11px; border-radius: 8px; color: #4f697f; background: #f7f9fb; }
.inventory-note > .kp-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.inventory-note span { min-width: 0; }
.inventory-note small { display: block; color: var(--kp-muted); font-size: 10px; }
.inventory-note p { margin: 3px 0 0; font-size: 10px; line-height: 1.5; }
.inventory-condition-form { margin-top: 13px; padding: 13px; border: 1px solid #d8e4ec; border-radius: 10px; background: #f9fbfc; }
.inventory-condition-form h3 { margin: 0 0 10px; color: var(--kp-navy); font-size: 12px; }
.inventory-condition-form label { display: block; margin: 9px 0 5px; color: #3b566d; font-size: 10px; font-weight: 650; }
.inventory-condition-form .form-select, .inventory-condition-form textarea { width: 100%; border: 1px solid #c5d2dc; border-radius: 8px; color: var(--kp-navy); background: #fff; font-size: 11px; outline: 0; }
.inventory-condition-form .form-select { min-height: 40px; }
.inventory-condition-form textarea { min-height: 66px; padding: 9px 10px; resize: vertical; }
.inventory-condition-form .form-select:focus, .inventory-condition-form textarea:focus { border-color: var(--kp-teal); box-shadow: 0 0 0 3px #00a6a617; }
.inventory-condition-form > small { display: block; margin-top: 6px; color: #c03737; font-size: 10px; }
.inventory-condition-form button { width: 100%; min-height: 41px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 11px; border: 0; border-radius: 8px; color: #fff; background: #0c647c; font-size: 11px; font-weight: 700; }
.inventory-condition-form button:hover { background: #094f62; }
.inventory-condition-form button .kp-icon { width: 17px; height: 17px; }

@media (max-width: 1199.98px) {
    .inventory-toolbar { grid-template-columns: minmax(220px, 1.15fr) repeat(3, minmax(150px, .75fr)); }
    .inventory-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 991.98px) {
    .inventory-toolbar { grid-template-columns: 1fr 1fr; }
    .inventory-layout { grid-template-columns: 1fr; }
    .inventory-detail { position: static; min-height: 0; }
    .inventory-detail .invoice-detail-empty { min-height: 210px; }
}
@media (max-width: 575.98px) {
    .inventory-workspace { gap: 14px; }
    .inventory-toolbar { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
    .inventory-toolbar .invoice-search { grid-column: auto; }
    .inventory-detail { padding: 18px; }
    .inventory-detail-head { grid-template-columns: auto minmax(0, 1fr); }
    .inventory-detail-head > .invoice-status { grid-column: 1 / -1; justify-self: start; }
    .inventory-value-card, .inventory-facts { grid-template-columns: 1fr; }
    .inventory-facts .inventory-fact-wide { grid-column: auto; }
}

.user-workspace { display: flex; flex-direction: column; gap: 20px; }
.mark-user-total { color: #1769a7; background: #deefff; }
.mark-user-active { color: #08775a; background: #dcf8ee; }
.mark-user-invited { color: #94610a; background: #fff1bd; }
.mark-user-suspended { color: #c03737; background: #ffe1df; }
.user-toolbar { display: grid; grid-template-columns: minmax(260px, 1.25fr) minmax(190px, .9fr) minmax(160px, .7fr) minmax(165px, .75fr); gap: 16px; align-items: end; padding: 20px; border: 1px solid var(--kp-border); border-radius: 14px; background: #fff; box-shadow: 0 8px 26px #07315b08; }
.user-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 20px; align-items: start; }
.user-table { width: 100%; min-width: 1100px; border-collapse: collapse; table-layout: fixed; }
.user-table th { padding: 12px; border-bottom: 1px solid #e6ecf2; color: #64778d; background: #f8fafc; font-size: 10px; font-weight: 700; letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.user-table th:first-child, .user-table td:first-child { width: 22%; padding-left: 22px; }
.user-table th:nth-child(2) { width: 21%; }
.user-table th:nth-child(3) { width: 13%; }
.user-table th:nth-child(4) { width: 18%; }
.user-table th:nth-child(5) { width: 15%; }
.user-table th:nth-child(6) { width: 11%; }
.user-table td { height: 86px; padding: 12px; border-bottom: 1px solid #edf1f5; color: #2b4966; font-size: 11px; line-height: 1.4; vertical-align: middle; }
.user-table tbody tr { transition: background-color .14s, box-shadow .14s; }
.user-table tbody tr:hover { background: #f8fbfc; }
.user-table tbody tr.selected { background: #effafa; box-shadow: inset 3px 0 var(--kp-teal); }
.user-table td > strong, .user-table td > small { display: block; }
.user-table td > strong { overflow: hidden; color: var(--kp-navy); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.user-table td > small { overflow: hidden; margin-top: 4px; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.user-identity { width: 100%; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; border-radius: 8px; color: var(--kp-navy); background: transparent; text-align: left; }
.user-identity > span:last-child { min-width: 0; }
.user-identity strong, .user-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-identity strong { font-size: 11px; }
.user-identity small { margin-top: 3px; color: #527089; font-size: 10px; }
.user-avatar { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; font-size: 11px; font-weight: 750; }
.user-avatar-owner { color: #08775a; background: #dcf8ee; }
.user-avatar-manager { color: #1769a7; background: #deefff; }
.user-avatar-finance { color: #94610a; background: #fff1bd; }
.user-avatar-technician { color: #a65009; background: #ffead8; }
.user-avatar-resident { color: #596b7e; background: #e9eef2; }
.user-role-badge { display: inline-flex; min-height: 26px; align-items: center; padding: 4px 8px; border-radius: 7px; font-size: 10px; font-weight: 700; }
.user-role-owner { color: #08775a; background: #dcf8ee; }
.user-role-manager { color: #1769a7; background: #deefff; }
.user-role-finance { color: #94610a; background: #fff1bd; }
.user-role-technician { color: #a65009; background: #ffead8; }
.user-role-resident { color: #596b7e; background: #e9eef2; }
.user-status-active { color: #08775a; background: #dcf8ee; }
.user-status-invited { color: #1769a7; background: #deefff; }
.user-status-suspended { color: #c03737; background: #ffe1df; }
.user-detail { position: sticky; top: 20px; min-height: 675px; padding: 22px; border: 1px solid var(--kp-border); border-radius: 16px; background: #fff; box-shadow: 0 9px 30px #07315b08; }
.user-detail h2 { margin: 0; color: var(--kp-navy); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.user-detail .invoice-detail-empty { min-height: 629px; }
.user-detail .invoice-detail-empty .user-detail-icon { margin-bottom: 17px; }
.user-detail-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: #1769a7; background: #deefff; }
.user-detail-icon .kp-icon { width: 23px; height: 23px; }
.user-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid #e6ecf2; }
.user-detail-head > span:nth-child(2) { min-width: 0; }
.user-detail-head small, .user-detail-head strong, .user-detail-head p { display: block; }
.user-detail-head small { color: var(--kp-muted); font-size: 10px; }
.user-detail-head strong { overflow: hidden; margin-top: 2px; color: var(--kp-navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.user-detail-head p { overflow: hidden; margin: 2px 0 0; color: var(--kp-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.user-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 13px 0 0; }
.user-facts > div { min-width: 0; padding: 10px 11px; border: 1px solid #e2e8ee; border-radius: 8px; background: #fff; }
.user-facts .user-fact-wide { grid-column: 1 / -1; }
.user-facts dt { color: var(--kp-muted); font-size: 10px; font-weight: 500; }
.user-facts dd { overflow: hidden; margin: 3px 0 0; color: var(--kp-navy); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.user-permission-summary { margin-top: 12px; overflow: hidden; border: 1px solid #d8e5ec; border-radius: 10px; }
.user-permission-summary header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 11px 12px; background: #f0f7fc; }
.user-permission-summary header > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #1769a7; background: #fff; }
.user-permission-summary header .kp-icon { width: 17px; height: 17px; }
.user-permission-summary header small, .user-permission-summary header strong { display: block; }
.user-permission-summary header small { color: var(--kp-muted); font-size: 10px; }
.user-permission-summary header strong { color: var(--kp-navy); font-size: 11px; }
.user-permission-summary header b { color: #1769a7; font-size: 10px; }
.user-permission-summary ul { margin: 0; padding: 6px 12px 9px; list-style: none; }
.user-permission-summary li { display: flex; align-items: center; gap: 8px; min-height: 29px; color: #4a667c; font-size: 10px; }
.user-permission-summary li .kp-icon { width: 15px; height: 15px; color: #0c8b88; }
.user-access-form { margin-top: 13px; padding: 13px; border: 1px solid #d8e4ec; border-radius: 10px; background: #f9fbfc; }
.user-access-form h3 { margin: 0 0 9px; color: var(--kp-navy); font-size: 12px; }
.user-access-form label { display: block; margin: 8px 0 5px; color: #3b566d; font-size: 10px; font-weight: 650; }
.user-access-form .form-select { min-height: 39px; border-color: #c5d2dc; color: var(--kp-navy); background-color: #fff; font-size: 11px; }
.user-access-form .form-select:focus { border-color: var(--kp-teal); box-shadow: 0 0 0 3px #00a6a617; }
.user-access-form > small { display: block; margin-top: 8px; color: #94610a; font-size: 10px; line-height: 1.4; }
.user-access-form button { width: 100%; min-height: 41px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 11px; border: 0; border-radius: 8px; color: #fff; background: #0c647c; font-size: 11px; font-weight: 700; }
.user-access-form button:hover { background: #094f62; }
.user-access-form button:disabled { color: #708497; background: #dfe6eb; cursor: not-allowed; }
.user-access-form button .kp-icon { width: 17px; height: 17px; }

@media (max-width: 1199.98px) {
    .user-toolbar { grid-template-columns: minmax(220px, 1.15fr) repeat(3, minmax(150px, .75fr)); }
    .user-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 991.98px) {
    .user-toolbar { grid-template-columns: 1fr 1fr; }
    .user-layout { grid-template-columns: 1fr; }
    .user-detail { position: static; min-height: 0; }
    .user-detail .invoice-detail-empty { min-height: 210px; }
}
@media (max-width: 575.98px) {
    .user-workspace { gap: 14px; }
    .user-toolbar { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
    .user-toolbar .invoice-search { grid-column: auto; }
    .user-detail { padding: 18px; }
    .user-detail-head { grid-template-columns: auto minmax(0, 1fr); }
    .user-detail-head > .invoice-status { grid-column: 1 / -1; justify-self: start; }
    .user-facts { grid-template-columns: 1fr; }
    .user-facts .user-fact-wide { grid-column: auto; }
}

@media print {
    @page { size: A4; margin: 0; }
    body { background: #fff; }
    body::after { display: none !important; }
    body > .skip-link, body > .sidebar, .workspace > .topbar, .workspace > .workspace-footer, .main-content > * { display: none !important; }
    .workspace, .main-content { display: block !important; min-height: 0; margin: 0; padding: 0; }
    .contracts-workspace > * { display: none !important; }
    .main-content > .contracts-workspace, .contracts-workspace > .contract-document-modal { display: block !important; }
    .contract-document-modal { position: static; padding: 0; }
    .contract-document-backdrop, .contract-document-toolbar { display: none !important; }
    .contract-document-shell { width: auto; height: auto; display: block; overflow: visible; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
    .contract-document-viewport { overflow: visible; padding: 0; }
    .contract-document-sheet { width: 210mm; min-height: 297mm; margin: 0; padding: 14mm 17mm 11mm; box-shadow: none; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
.auth-body { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.auth-container { width: 100%; max-width: 460px; }
.auth-logo { display: block; object-fit: contain; width: 150px; height: 150px; margin: -20px auto -4px; }
.auth-card { background: #fff; border: 1px solid var(--kp-border); border-radius: 16px; padding: 34px; }
.auth-card h1 { font-size: 26px; letter-spacing: -.03em; font-weight: 700; margin: 0 0 8px; }
.auth-description { color: var(--kp-muted); font-size: 14px; margin-bottom: 26px; }
.auth-card .form-label { font-size: 13px; font-weight: 600; }
.auth-card .form-control { min-height: 46px; font-size: 15px; color: var(--kp-navy); border-color: #ccd7e2; }
.auth-card .form-control:focus { border-color: var(--kp-teal); box-shadow: 0 0 0 3px #00a6a61c; }
.auth-card .form-check-label, .auth-card .form-text { font-size: 12px; color: var(--kp-muted); }
.auth-card .form-check-input:checked { background-color: var(--kp-teal-text); border-color: var(--kp-teal-text); }
.auth-submit { min-height: 46px; background: var(--kp-teal-text); color: #fff; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.auth-submit:hover, .auth-submit:focus-visible { background: #006975; color: #fff; }
.auth-submit:disabled { background: #007e88; color: #fff; opacity: .7; }
.auth-note, .auth-footer { color: var(--kp-muted); font-size: 12px; text-align: center; margin: 22px 0 0; }
.auth-account { font-size: 12px; padding: 10px 12px; background: #edf7f8; border-radius: 6px; margin-bottom: 22px; }
.auth-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; font-size: 12px; }
.auth-text-button { padding: 0; border: 0; background: transparent; color: var(--kp-teal-text); font-size: 12px; }
.auth-card .alert { font-size: 13px; }
@media (max-width: 575.98px) {
    .auth-card { padding: 26px 22px; }
    .auth-card h1 { font-size: 24px; }
    .auth-logo { width: 130px; height: 130px; }
}