/* M.S Residential Rentals — design layer over the supplied application */
:root { --navy:#102f48; --navy-deep:#0b263b; --gold:#c7a668; --ink:#172e40; --muted:#8795a0; --line:#e8edf0; }
* { box-sizing:border-box; }
body { font-family:'Cairo',sans-serif; color:var(--ink); background:#f5f7f8; }
button, input, select, textarea { font-family:inherit; }
button { cursor:pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid rgba(199,166,104,.55); outline-offset:2px; }
#sidebar { background:var(--navy-deep); border:0; width:250px; box-shadow:-6px 0 28px rgba(18,44,63,.05); }
.sidebar-brand { padding:25px 22px 20px; }
.sidebar-logo { background:#fff; border-radius:12px; overflow:hidden; height:139px; display:flex; align-items:center; justify-content:center; }
.sidebar-logo img { width:150px; height:139px; object-fit:contain; }
.sidebar-brand-label { margin-top:17px; display:flex; flex-direction:column; gap:1px; }
.sidebar-brand-label span { color:#bda16d; font:600 9px/1.4 sans-serif; letter-spacing:2px; direction:ltr; text-align:right; }
.sidebar-brand-label strong { color:#fff; font-size:14px; font-weight:800; }
.sidebar-section-label { padding:14px 26px 0; color:#8295a3; font-size:10px; letter-spacing:.03em; font-weight:700; }
#sidebar nav { padding:12px 14px; }
#sidebar nav button { color:#aebdc7; font-weight:600; border-radius:9px; font-size:13px; min-height:48px; text-align:right; }
#sidebar nav button i { font-size:15px; opacity:.9; }
#sidebar nav button:hover { color:#fff; background:#183a51; }
#sidebar nav button[class*="bg-brand-50"] { background:#26465b; color:#fff; box-shadow:inset -3px 0 0 var(--gold); }
#sidebar nav button[class*="bg-brand-50"] i { color:#d0af72; }
.sidebar-bottom { margin:18px 15px 23px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035); border-radius:10px; padding:13px 11px; display:flex; gap:10px; align-items:center; }
.sidebar-bottom-icon { width:32px; height:32px; border-radius:8px; background:rgba(199,166,104,.15); color:var(--gold); display:grid; place-items:center; font-size:12px; flex:none; }
.sidebar-bottom strong,.sidebar-bottom span { display:block; }
.sidebar-bottom strong { color:#eef3f5; font-size:10px; }
.sidebar-bottom span { color:#8fa1ae; font-size:9px; margin-top:3px; }
.mobile-header { background:white; padding:10px 17px; position:sticky; top:0; z-index:30; border-bottom:1px solid var(--line); align-items:center; justify-content:space-between; }
.mobile-brand { display:flex; align-items:center; gap:10px; }
.mobile-brand img { width:50px; height:46px; object-fit:contain; }
.mobile-brand strong,.mobile-brand span { display:block; }
.mobile-brand strong { color:var(--navy); font-size:13px; }
.mobile-brand span { color:#8a9ba8; font-size:10px; }
.mobile-menu { color:var(--navy); font-size:20px; padding:6px; }
.main-content { max-width:none; padding:0 36px 42px; min-width:0; }
.utility-bar { min-height:62px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e5ebef; color:#8f9da7; font-size:11px; font-weight:600; }
.utility-bar strong { color:#385268; font-size:11px; }
.utility-divider { margin:0 10px; color:#c7d0d5; }
.date-pill { color:#728694; display:flex; gap:8px; align-items:center; font-size:11px; }
.date-pill i { color:#b39b6e; font-size:13px; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:9px 0 4px; }
.eyebrow { color:#a58a56; font-size:10px; font-weight:800; display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.eyebrow span { display:inline-block; width:18px; height:2px; background:#c7a668; }
.page-heading h2 { color:#112f47; font-size:25px; font-weight:800; line-height:1.45; }
.page-heading p { color:#91a0a9; font-size:12px; margin-top:4px; }
.heading-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.action-primary,.action-secondary { height:40px; border-radius:8px; padding:0 15px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:11px; font-weight:800; transition:all .18s ease; white-space:nowrap; }
.action-primary { background:var(--navy); color:white; box-shadow:0 5px 12px rgba(16,47,72,.14); }
.action-primary:hover { background:#214d6b; transform:translateY(-1px); }
.action-secondary { background:white; color:#456071; border:1px solid #e1e8eb; }
.action-secondary:hover { border-color:#b7c9d2; color:var(--navy); }
.action-secondary i,.action-primary i { font-size:10px; }
.metrics-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:-8px; padding-top:5px; }
.section-kicker { color:#9aa8b0; font-size:10px; font-weight:700; }
.metrics-heading h3 { color:#233d50; font-size:15px; font-weight:800; margin-top:1px; }
.metrics-note { color:#8799a5; font-size:10px; padding-bottom:3px; }
.metrics-note i { color:#c6a565; font-size:6px; margin-left:4px; vertical-align:middle; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.metric-card { position:relative; overflow:hidden; min-height:144px; background:#fff; border:1px solid #e8eef0; border-radius:12px; padding:17px 18px 19px; box-shadow:0 4px 16px rgba(29,56,71,.025); }
.metric-top { display:flex; align-items:center; justify-content:space-between; color:#81909c; font-size:11px; font-weight:700; }
.metric-icon { height:34px; width:34px; display:grid; place-items:center; border-radius:9px; font-size:14px; }
.metric-icon.mint { color:#4c947c; background:#eaf6f0; }.metric-icon.blue { color:#44738f; background:#edf4f8; }.metric-icon.coral { color:#c37d6c; background:#fbf0ec; }.metric-icon.gold { color:#b29961; background:#f9f5e9; }
.metric-card h3 { color:#19364b; font-size:23px; font-weight:900; margin-top:6px; line-height:1.3; }
.metric-card p { color:#a0adb5; font-size:10px; margin-top:7px; font-weight:600; }
.metric-rule { position:absolute; bottom:0; right:0; height:3px; width:42%; opacity:.85; }.mint-rule { background:#78b39e; }.blue-rule { background:#789eb4; }.coral-rule { background:#dea796; }.gold-rule { background:#c7ab72; }
#tab-overview > .grid > div, #tab-payments > div, #tab-expenses > div, #tab-settings > div, #tab-units > div:first-child { border-color:#e9eef0; border-radius:12px; box-shadow:0 4px 16px rgba(29,56,71,.025); }
#alertsBanner { border-radius:12px; border-color:#f3dbd5; background:#fcf5f3; }
#overviewUnitsGrid > div { background:#fbfcfc; border-color:#edf1f2; border-radius:10px; min-height:141px; }
#overviewUnitsGrid > div:hover { background:white; border-color:#bfcdd4; }
#recentPaymentsList > div, #expensesBreakdownList > div { border-radius:9px; }
.unit-search { display:flex; align-items:center; gap:8px; color:#98a7b0; border:1px solid #e6ecef; background:#fafbfc; border-radius:9px; padding:0 12px; min-width:245px; height:38px; flex:1; max-width:340px; }
.unit-search i { font-size:12px; }.unit-search input { width:100%; outline:0; border:0; background:transparent; color:#263e4d; font-size:11px; }.unit-search input::placeholder { color:#a2afb7; }
.storage-note { display:flex; gap:11px; align-items:flex-start; padding:15px; border-radius:10px; color:#5c7383; background:#f1f6f8; font-size:11px; line-height:1.9; }
.storage-note i { color:#7797a9; margin-top:5px; }.storage-note strong { color:#244b63; }
.backup-panel { border:1px solid #e6edef; padding:16px; border-radius:10px; display:flex; justify-content:space-between; gap:15px; align-items:center; }.backup-panel h4 { color:#243f51; font-size:13px; font-weight:800; }.backup-panel p { color:#91a0a9; font-size:10px; margin-top:4px; }.backup-actions { display:flex; gap:7px; flex-wrap:wrap; }.backup-actions button { padding:8px 12px; border:1px solid #d8e3e8; border-radius:8px; color:#36576b; font-size:10px; font-weight:800; white-space:nowrap; }.backup-actions button:first-child { background:#163c59; color:white; border-color:#163c59; }
#modalUnit > div,#modalPayment > div,#modalExpense > div { border-radius:14px; max-height:90vh; overflow-y:auto; }
@media (min-width:768px) { #sidebar { position:sticky; top:0; height:100vh; min-height:100vh; flex:none; } }
@media (max-width:1190px) { .heading-actions { max-width:370px; }.metric-card { padding:15px 13px; }.metric-card h3 { font-size:19px; } }
@media (max-width:900px) { .main-content { padding-right:24px; padding-left:24px; }.page-heading { align-items:flex-start; flex-direction:column; gap:15px; }.heading-actions { justify-content:flex-start; max-width:none; }.metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px) { .mobile-header { display:flex; } #sidebar { position:fixed; height:100vh; } .main-content { padding:0 16px 30px; }.utility-bar { min-height:50px; }.page-heading { padding-top:4px; }.page-heading h2 { font-size:21px; }.heading-actions { gap:7px; }.action-primary,.action-secondary { padding:0 11px; height:38px; font-size:10px; }.metrics-grid { gap:10px; }.metric-card { min-height:125px; }.metric-card h3 { font-size:18px; }.unit-search { min-width:100%; max-width:none; }.backup-panel { align-items:flex-start; flex-direction:column; } }

#tab-overview > .calculation-note { margin-top:8px; color:#8b9aa4; font-size:10px; line-height:1.8; }
.calculation-note i { color:#b9a16f; margin-left:4px; }
#tab-overview > .calculation-note + #alertsBanner { margin-top:14px; }

/* Printable rent receipt */
#receiptContent { width:100%; max-width:620px; margin:0 auto; padding:30px 32px 27px; border:1px solid #dce5e9; border-top:6px solid #163c59; border-radius:14px; background:#fff; color:#172e40; font-family:'Cairo',sans-serif; }
#receiptContent .receipt-header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:20px; border-bottom:1px solid #e5ecef; }
#receiptContent .receipt-brand { display:flex; align-items:center; gap:12px; min-width:0; }
#receiptContent .receipt-logo { display:block; width:76px; height:71px; flex:none; object-fit:contain; }
#receiptContent .receipt-brand-text { min-width:0; }
#receiptContent .receipt-brand-name { color:#102f48; font-size:13px; font-weight:800; line-height:1.7; }
#receiptContent .receipt-brand-subtitle { margin-top:2px; color:#899aa5; font-size:11px; }
#receiptContent .receipt-kind { flex:none; padding:6px 10px; border:1px solid #e9dfca; border-radius:6px; background:#fbf8f1; color:#977b47; font-size:10px; font-weight:800; }
#receiptContent .receipt-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:24px 0 21px; }
#receiptContent .receipt-title { min-width:0; }
#receiptContent .receipt-kicker { color:#b19760; font:700 9px/1.4 sans-serif; letter-spacing:1.2px; direction:ltr; text-align:right; }
#receiptContent .receipt-title h2 { margin:5px 0 0; color:#102f48; font-size:23px; font-weight:800; line-height:1.5; }
#receiptContent .receipt-subtitle { margin-top:3px; color:#899aa5; font-size:11px; }
#receiptContent .receipt-meta { flex:none; min-width:135px; max-width:46%; padding:10px 13px; border-right:2px solid #c7a668; background:#f8fafb; }
#receiptContent .receipt-meta div + div { margin-top:7px; }
#receiptContent .receipt-meta span, #receiptContent .receipt-meta strong { display:block; overflow-wrap:anywhere; }
#receiptContent .receipt-meta span { color:#8b9ba5; font-size:10px; }
#receiptContent .receipt-meta strong { color:#163c59; font-size:12px; font-weight:800; text-align:right; }
#receiptContent .receipt-details { display:flex; flex-direction:column; gap:10px; }
#receiptContent .receipt-fields-row { display:flex; gap:10px; }
#receiptContent .receipt-fields-row .receipt-field { flex:1 1 0; min-width:0; }
#receiptContent .receipt-field { padding:12px 14px; border:1px solid #e8eef1; border-radius:8px; background:#f8fafb; }
#receiptContent .receipt-label, #receiptContent .receipt-value { display:block; overflow-wrap:anywhere; }
#receiptContent .receipt-label { color:#8395a0; font-size:10px; font-weight:700; }
#receiptContent .receipt-value { margin-top:4px; color:#1c394d; font-size:13px; font-weight:700; line-height:1.7; }
#receiptContent .receipt-tenant { border-color:#dce8ed; background:#f3f7f8; }
#receiptContent .receipt-amount-field { border-color:#e8dfcd; background:#fcfaf5; }
#receiptContent .receipt-amount { color:#163c59; font-size:17px; font-weight:800; }
#receiptContent .receipt-notes { background:#fff; }
#receiptContent .receipt-notes .receipt-value { font-size:12px; font-weight:600; white-space:pre-wrap; }
#receiptContent .receipt-footer { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-top:24px; padding-top:20px; border-top:1px dashed #d6e0e5; }
#receiptContent .receipt-signature { min-width:0; color:#8c9da7; font-size:10px; }
#receiptContent .receipt-signature-line { width:150px; max-width:100%; margin:22px 0 7px; border-bottom:1px solid #cbd7dd; }
#receiptContent .receipt-signature strong { color:#38566a; font-size:11px; font-weight:700; }
#receiptContent .receipt-stamp { display:flex; align-items:center; justify-content:center; width:76px; height:76px; flex:none; border:2px solid #315c77; border-radius:50%; background:#fff; }
#receiptContent .receipt-stamp img { display:block; width:48px; height:45px; object-fit:contain; }
@media (max-width:480px) {
    #receiptContent { padding:20px 16px; border-radius:10px; }
    #receiptContent .receipt-header { gap:8px; padding-bottom:15px; }
    #receiptContent .receipt-logo { width:60px; height:56px; }
    #receiptContent .receipt-brand { gap:7px; }
    #receiptContent .receipt-brand-name { font-size:11px; }
    #receiptContent .receipt-brand-subtitle { font-size:10px; }
    #receiptContent .receipt-kind { padding:5px 7px; font-size:9px; }
    #receiptContent .receipt-title-row { flex-wrap:wrap; gap:12px; padding:18px 0; }
    #receiptContent .receipt-title h2 { font-size:20px; }
    #receiptContent .receipt-meta { display:flex; gap:20px; width:100%; max-width:none; }
    #receiptContent .receipt-meta div { min-width:0; flex:1 1 0; }
    #receiptContent .receipt-meta div + div { margin-top:0; }
    #receiptContent .receipt-field { padding:10px 11px; }
    #receiptContent .receipt-footer { gap:12px; }
    #receiptContent .receipt-stamp { width:68px; height:68px; }
    #receiptContent .receipt-stamp img { width:43px; height:40px; }
}

/* Secure account entry and cloud data controls */
body.is-logged-out .app-private { display:none !important; }
body:not(.is-logged-out) #authShell, #authShell[hidden] { display:none !important; }
.auth-shell { min-height:100vh; width:100%; display:flex; background:#f7f9fa; }
.auth-identity { width:44%; background:#0d2b42; color:white; padding:52px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.auth-identity::after { content:''; position:absolute; width:410px; height:410px; border:1px solid rgba(206,171,108,.18); border-radius:50%; bottom:-210px; left:-130px; box-shadow:0 0 0 50px rgba(206,171,108,.025),0 0 0 100px rgba(206,171,108,.025); pointer-events:none; }
.auth-identity > img { width:137px; height:128px; object-fit:contain; background:white; border-radius:12px; }
.auth-identity-copy { position:relative; z-index:1; padding-bottom:65px; max-width:390px; }.auth-identity-copy span { font:700 10px sans-serif; letter-spacing:2.4px; color:#c4a466; }.auth-identity-copy h1 { font-size:30px; line-height:1.5; font-weight:800; margin:18px 0 10px; }.auth-identity-copy p { font-size:14px; line-height:2; color:#b3c2cb; }
.auth-main { flex:1; display:flex; align-items:center; justify-content:center; padding:35px 25px; }.auth-card { width:min(100%,410px); background:white; padding:35px 34px; border:1px solid #e7edef; border-radius:16px; box-shadow:0 16px 55px rgba(27,53,70,.06); }
.auth-mobile-logo { display:none; }.auth-kicker { color:#b29660; font-size:10px; font-weight:800; }.auth-card h2 { color:#15354c; font-size:27px; font-weight:800; margin-top:6px; }.auth-description { color:#90a0a9; font-size:12px; margin:4px 0 25px; }
.auth-form { display:flex; flex-direction:column; }.auth-form label { color:#334e5f; font-size:11px; font-weight:800; margin:14px 0 7px; }.auth-form input { width:100%; background:#f8fafb; border:1px solid #e0e8eb; border-radius:9px; padding:12px 13px; color:#173b52; font-size:13px; }.auth-form input:focus { border-color:#9db5c1; }.auth-form input::placeholder { color:#b7c2c8; font-size:11px; }.auth-form #authMessage { min-height:18px; color:#bc554a; font-size:11px; margin-top:10px; line-height:1.6; }.auth-form #authSubmit { margin-top:8px; display:flex; justify-content:center; align-items:center; gap:10px; background:#163c59; color:white; border-radius:9px; padding:12px; font-size:12px; font-weight:800; }.auth-form #authSubmit:hover { background:#214f6c; }.auth-form #authSubmit:disabled { opacity:.6; cursor:wait; }
.auth-divider { display:flex; gap:10px; align-items:center; color:#b5c1c7; font-size:10px; margin:23px 0 14px; }.auth-divider span { flex:1; height:1px; background:#edf1f3; }.auth-toggle { width:100%; color:#44687b; font-size:11px; font-weight:700; }.auth-toggle:hover { color:#b29359; }.auth-security { color:#a5b2b9; font-size:10px; margin-top:24px; text-align:center; }.auth-security i { color:#af9a70; margin-left:5px; }
#sidebar { overflow-y:auto; }.sidebar-account { min-width:0; flex:1; }.sidebar-account span { max-width:130px; overflow:hidden; text-overflow:ellipsis; text-align:right; }.sidebar-account button { color:#d0b377; font-size:10px; margin-top:8px; font-weight:700; }
.migration-panel { display:flex; gap:15px; justify-content:space-between; align-items:center; padding:15px 18px; background:#fffaf0; border:1px solid #eadfbe; border-radius:10px; }.migration-panel strong { color:#796035; font-size:12px; }.migration-panel p { color:#a08b68; font-size:10px; margin-top:3px; }.migration-panel button { flex:none; color:white; background:#806b43; border-radius:8px; padding:9px 12px; font-size:10px; font-weight:800; }.migration-panel.hidden { display:none; }
@media (max-width:767px) { .auth-identity { display:none; }.auth-main { min-height:100vh; padding:22px 17px; }.auth-card { padding:25px 22px; }.auth-mobile-logo { display:block; margin-bottom:18px; }.auth-mobile-logo img { width:75px; height:70px; object-fit:contain; }.auth-card h2 { font-size:24px; }.migration-panel { align-items:flex-start; flex-direction:column; } }

/* Account actions remain visible on compact desktop and mobile screens. */
#sidebar { height:100vh; height:100dvh; min-height:0; overflow:hidden; }
#sidebar .sidebar-navigation { flex:1 1 auto; min-height:0; overflow-y:auto; }
#sidebar .sidebar-bottom { flex:0 0 auto; margin:10px 15px 15px; }
#sidebar #logoutBtn { display:block; width:100%; min-height:38px; padding:8px 10px; margin-top:9px; border:1px solid rgba(207,177,119,.45); border-radius:7px; background:#284457; color:#f0d6a5; font-size:11px; text-align:center; }
#sidebar #logoutBtn:hover { background:#365469; }
.utility-actions { display:flex; align-items:center; gap:18px; }
.logout-top-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:7px 12px; border:1px solid #e5cfc8; border-radius:8px; background:#fff8f6; color:#a25244; font-size:11px; font-weight:800; white-space:nowrap; }
.logout-top-button:hover { background:#fcebe5; border-color:#cea399; }
.logout-top-button:disabled, #logoutBtn:disabled { opacity:.6; cursor:wait; }
@media (max-width:767px) { .utility-bar { min-height:60px; gap:10px; }.utility-actions { gap:8px; }.utility-actions .date-pill { display:none; }.logout-top-button { min-height:38px; font-size:11px; } #sidebar .sidebar-bottom { padding-bottom:max(13px,env(safe-area-inset-bottom)); } }