html[data-theme="dark"]{
    color-scheme:dark;
    --dark-bg:#07110d;
    --dark-bg-2:#0b1812;
    --dark-surface:#101f18;
    --dark-surface-2:#14261d;
    --dark-border:#294438;
    --dark-border-2:#355949;
    --dark-text:#edf8f2;
    --dark-muted:#a9bdb3;
    --dark-green:#39d98b;
    --dark-green-2:#16b873;
    --dark-shadow:0 18px 44px #00000052;
}

html[data-theme="dark"] body,
html[data-theme="dark"] body.public,
html[data-theme="dark"] body.portal,
html[data-theme="dark"] body.admin,
html[data-theme="dark"] body.staff{
    color:var(--dark-text);
    background:radial-gradient(circle at 16% -10%,#0f3b2a 0 260px,transparent 470px),linear-gradient(180deg,var(--dark-bg),var(--dark-bg-2));
}

html[data-theme="dark"] a{color:var(--dark-green)}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] strong,
html[data-theme="dark"] .portal-top h1,
html[data-theme="dark"] .quick-welcome h1,
html[data-theme="dark"] .profile-page-title h1,
html[data-theme="dark"] .profile-identity h2{color:var(--dark-text)}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .portal-top p,
html[data-theme="dark"] .muted-text,
html[data-theme="dark"] .mini-item p,
html[data-theme="dark"] .profile-page-title small,
html[data-theme="dark"] .profile-summary-list small,
html[data-theme="dark"] .profile-reminder small,
html[data-theme="dark"] .quick-welcome-copy>p,
html[data-theme="dark"] .quick-other-services small,
html[data-theme="dark"] .account-trigger-copy small,
html[data-theme="dark"] .resident-identity small{color:var(--dark-muted)}

html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .primary,
html[data-theme="dark"] .portal-choice a,
html[data-theme="dark"] .complaint-btn,
html[data-theme="dark"] .complaint-primary,
html[data-theme="dark"] .wizard-actions .primary,
html[data-theme="dark"] .complaint-wizard-actions .complaint-btn{
    color:#06110c!important;
    background:linear-gradient(110deg,var(--dark-green),var(--dark-green-2))!important;
    box-shadow:0 14px 28px #16b8732e!important;
}

html[data-theme="dark"] .btn.light,
html[data-theme="dark"] .light,
html[data-theme="dark"] .profile-back,
html[data-theme="dark"] .view-request,
html[data-theme="dark"] .preview-action,
html[data-theme="dark"] .preview-action-v2{
    color:var(--dark-green);
    border-color:var(--dark-border-2);
    background:var(--dark-surface);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
    color:var(--dark-text)!important;
    border-color:var(--dark-border)!important;
    background:#0b1711!important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#789087}
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] textarea[readonly]{
    color:var(--dark-muted)!important;
    background:#13241b!important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
    border-color:var(--dark-green)!important;
    box-shadow:0 0 0 3px #39d98b22!important;
    outline:0;
}

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td{color:var(--dark-text)}
html[data-theme="dark"] th{background:#13251c;color:#b8cdc3}
html[data-theme="dark"] td{border-color:var(--dark-border);color:#d8e8df}

html[data-theme="dark"] .portal-main,
html[data-theme="dark"] .portal-main.service,
html[data-theme="dark"] .portal-main.complaint,
html[data-theme="dark"] .quick-action-page,
html[data-theme="dark"] .profile-standalone{
    color:var(--dark-text);
    background:radial-gradient(circle at 18% -12%,#0d3a29 0 280px,transparent 470px),linear-gradient(180deg,#07110d 0%,#0b1812 52%,#07110d 100%);
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .settings-nav,
html[data-theme="dark"] .profile-summary-card,
html[data-theme="dark"] .profile-form-card,
html[data-theme="dark"] .profile-page-title,
html[data-theme="dark"] .request-workspace,
html[data-theme="dark"] .request-stepper,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .help-card,
html[data-theme="dark"] .complaint-stepper,
html[data-theme="dark"] .complaint-wizard,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .requests-table-card,
html[data-theme="dark"] .requests-aside article,
html[data-theme="dark"] .request-stat-grid article,
html[data-theme="dark"] .requests-list-card-v2,
html[data-theme="dark"] .request-preview-card-v2,
html[data-theme="dark"] .complaint-stat-grid article,
html[data-theme="dark"] .complaints-list-card,
html[data-theme="dark"] .complaint-preview-card,
html[data-theme="dark"] .tracking-hero,
html[data-theme="dark"] .tracking-filters,
html[data-theme="dark"] .tracking-list,
html[data-theme="dark"] .tracking-detail,
html[data-theme="dark"] .quick-other-services,
html[data-theme="dark"] .portal-choice,
html[data-theme="dark"] .quick-welcome-status,
html[data-theme="dark"] .notifications-panel,
html[data-theme="dark"] .service-mini-grid article,
html[data-theme="dark"] .request-details-dialog,
html[data-theme="dark"] .complaint-details-dialog,
html[data-theme="dark"] .reference-card,
html[data-theme="dark"] .dialog-info-card,
html[data-theme="dark"] .dialog-timeline-card,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .staff-card,
html[data-theme="dark"] .staff-settings-card,
html[data-theme="dark"] .staff-record-detail-main,
html[data-theme="dark"] .resident-page-card,
html[data-theme="dark"] .resident-page-hero{
    color:var(--dark-text);
    border-color:var(--dark-border);
    background:linear-gradient(180deg,var(--dark-surface),#0e1b15);
    box-shadow:var(--dark-shadow);
}

html[data-theme="dark"] .quick-action-header,
html[data-theme="dark"] .profile-topbar,
html[data-theme="dark"] .portal-top{
    border-color:#20392f;
    background:#08130eee;
    box-shadow:0 10px 28px #00000045;
    backdrop-filter:blur(16px);
}

html[data-theme="dark"] .quick-action-brand-copy strong,
html[data-theme="dark"] .profile-brand strong,
html[data-theme="dark"] .quick-action-nav a,
html[data-theme="dark"] .resident-identity strong,
html[data-theme="dark"] .quick-other-services strong,
html[data-theme="dark"] .portal-choice h3,
html[data-theme="dark"] .request-main-v2 strong,
html[data-theme="dark"] .complaint-main strong,
html[data-theme="dark"] .tracking-list strong{color:var(--dark-text)}

html[data-theme="dark"] .quick-action-nav a:hover,
html[data-theme="dark"] .quick-action-nav a.active,
html[data-theme="dark"] .choice-eyebrow,
html[data-theme="dark"] .portal-selection>h2,
html[data-theme="dark"] .quick-welcome-label,
html[data-theme="dark"] .profile-page-title p,
html[data-theme="dark"] .service-dashboard-hero span,
html[data-theme="dark"] .complaint-dashboard-hero span,
html[data-theme="dark"] .stage-heading>span,
html[data-theme="dark"] .complaint-dialog-header small,
html[data-theme="dark"] .preview-eyebrow,
html[data-theme="dark"] .preview-eyebrow-v2{color:var(--dark-green)}
html[data-theme="dark"] .portal-selection>h2:before,
html[data-theme="dark"] .portal-selection>h2:after{background:var(--dark-green)}

html[data-theme="dark"] .account-trigger,
html[data-theme="dark"] .resident-menu summary,
html[data-theme="dark"] .notification-trigger{color:var(--dark-text)}
html[data-theme="dark"] .account-trigger:hover,
html[data-theme="dark"] .account-menu.is-open .account-trigger,
html[data-theme="dark"] .resident-menu summary:hover,
html[data-theme="dark"] .resident-menu[open] summary,
html[data-theme="dark"] .notification-trigger:hover,
html[data-theme="dark"] .notification-menu.is-open .notification-trigger{
    border-color:var(--dark-border-2);
    background:var(--dark-surface);
    box-shadow:0 10px 24px #0000003d;
}
html[data-theme="dark"] .account-dropdown,
html[data-theme="dark"] .account-dropdown:before,
html[data-theme="dark"] .resident-menu-panel,
html[data-theme="dark"] .resident-menu-panel:before,
html[data-theme="dark"] .notification-dropdown,
html[data-theme="dark"] .notification-dropdown:before{
    color:var(--dark-text);
    border-color:var(--dark-border);
    background:var(--dark-surface);
}
html[data-theme="dark"] .account-dropdown header,
html[data-theme="dark"] .account-back,
html[data-theme="dark"] .account-menu-view>a,
html[data-theme="dark"] .dropdown-menu-item,
html[data-theme="dark"] .resident-menu-panel a,
html[data-theme="dark"] .notification-item{
    color:var(--dark-text);
    border-color:var(--dark-border);
    background:var(--dark-surface);
}
html[data-theme="dark"] .account-menu-view>a:hover,
html[data-theme="dark"] .dropdown-menu-item:hover,
html[data-theme="dark"] .resident-menu-panel a:hover,
html[data-theme="dark"] .notification-item:hover,
html[data-theme="dark"] .notification-item.unread{
    color:var(--dark-green);
    background:#173225;
}
html[data-theme="dark"] .notification-dropdown>header{
    border-color:var(--dark-border);
    background:linear-gradient(110deg,#13251c,#0f1d16);
}
html[data-theme="dark"] .notification-bell{border-color:#cfe3d8}
html[data-theme="dark"] .notification-bell:before,
html[data-theme="dark"] .notification-bell:after{background:#cfe3d8}

html[data-theme="dark"] .user-dot,
html[data-theme="dark"] .resident-avatar,
html[data-theme="dark"] .dropdown-avatar,
html[data-theme="dark"] .profile-page-title>span,
html[data-theme="dark"] .profile-avatar{
    color:#06110c;
    background:linear-gradient(135deg,var(--dark-green),var(--dark-green-2));
}

html[data-theme="dark"] .quick-welcome{
    border-color:var(--dark-border);
    background:linear-gradient(90deg,#07110df5 0%,#07110dcc 42%,#07110d66 76%,#07110d20 100%),url('../images/nalook-hall-exterior.jpg') right 20%/cover no-repeat;
}
html[data-theme="dark"] .quick-welcome-media:before{
    background:linear-gradient(90deg,#07110d 0%,rgba(7,17,13,0.96) 15%,rgba(7,17,13,0.6) 48%,rgba(7,17,13,0.15) 85%,transparent 100%),
               linear-gradient(180deg,rgba(7,17,13,0.4) 0%,transparent 40%);
}
html[data-theme="dark"] .quick-welcome:after{
    border-top-color:#39d98b3d;
    background:linear-gradient(90deg,#087443,#39d98b);
}
html[data-theme="dark"] .quick-welcome-metrics a,
html[data-theme="dark"] .quick-other-services a{
    color:var(--dark-text);
    border-color:var(--dark-border);
    background:#102019e6;
}
html[data-theme="dark"] .metric-icon,
html[data-theme="dark"] .portal-choice-icon,
html[data-theme="dark"] .quick-other-services a>span,
html[data-theme="dark"] .profile-list-icon,
html[data-theme="dark"] .profile-form-heading>span,
html[data-theme="dark"] .profile-security>span,
html[data-theme="dark"] .request-list-icon,
html[data-theme="dark"] .request-icon-v2,
html[data-theme="dark"] .complaint-icon,
html[data-theme="dark"] .dialog-complaint-icon,
html[data-theme="dark"] .dialog-heading-icon,
html[data-theme="dark"] .dialog-section-title>span,
html[data-theme="dark"] .reference-service-icon,
html[data-theme="dark"] .reference-card>h3>span,
html[data-theme="dark"] .service-mini-grid span,
html[data-theme="dark"] .event-card>b,
html[data-theme="dark"] .tracking-list>a>span,
html[data-theme="dark"] .tracking-files a>span,
html[data-theme="dark"] .summary-card h3>span,
html[data-theme="dark"] .help-card h3>span,
html[data-theme="dark"] .settings-nav a>span,
html[data-theme="dark"] .settings-card>header>span,
html[data-theme="dark"] .preview-meta-grid-v2 span{
    color:var(--dark-green);
    background:#173a2a;
}
html[data-theme="dark"] .quick-welcome-metrics b,
html[data-theme="dark"] .quick-welcome-metrics small,
html[data-theme="dark"] .portal-choice li:before{color:var(--dark-green)}
html[data-theme="dark"] .profile-cover{background:linear-gradient(145deg,#064b36,#087443 58%,#173a2a)}
html[data-theme="dark"] .profile-cover:after{background:var(--dark-surface)}
html[data-theme="dark"] .profile-summary-list,
html[data-theme="dark"] .profile-form-heading,
html[data-theme="dark"] .profile-actions,
html[data-theme="dark"] .settings-card>header,
html[data-theme="dark"] .settings-form footer,
html[data-theme="dark"] .preview-title-row-v2,
html[data-theme="dark"] .request-preview-card-v2 .preview-timeline-v2>h3{border-color:var(--dark-border)}
html[data-theme="dark"] .preview-title-row-v2 h2,
html[data-theme="dark"] .preview-meta-grid-v2 strong,
html[data-theme="dark"] .preview-details-grid-v2 h3{color:var(--dark-text)}
html[data-theme="dark"] .preview-title-row-v2 p,
html[data-theme="dark"] .preview-meta-grid-v2 small,
html[data-theme="dark"] .preview-details-grid-v2 p{color:var(--dark-muted)}
html[data-theme="dark"] .preview-close-v2{
    color:var(--dark-muted);
    border-color:var(--dark-border);
    background:var(--dark-surface);
}
html[data-theme="dark"] .preview-close-v2:hover{
    color:#06110c;
    border-color:var(--dark-green);
    background:var(--dark-green);
}
html[data-theme="dark"] .profile-reminder,
html[data-theme="dark"] .profile-security,
html[data-theme="dark"] .appearance-note{
    color:var(--dark-text);
    background:#132a20;
}

html[data-theme="dark"] .service-dashboard-hero,
html[data-theme="dark"] .complaint-dashboard-hero,
html[data-theme="dark"] .payment-summary,
html[data-theme="dark"] .final-review-title,
html[data-theme="dark"] .guide-card.privacy,
html[data-theme="dark"] .guide-card.reminders,
html[data-theme="dark"] .complaint-dialog-meta,
html[data-theme="dark"] .tracking-hero{background:linear-gradient(115deg,#102019 0%,#173225 52%,#0d1813)}

html[data-theme="dark"] .request-list-item,
html[data-theme="dark"] .request-list-item-v2,
html[data-theme="dark"] .complaint-list-item,
html[data-theme="dark"] .tracking-list>a,
html[data-theme="dark"] .notification-row,
html[data-theme="dark"] .event-card,
html[data-theme="dark"] .mini-item,
html[data-theme="dark"] .review-section,
html[data-theme="dark"] .review-grid>div,
html[data-theme="dark"] .review-rows>div,
html[data-theme="dark"] .dialog-detail-grid>div,
html[data-theme="dark"] .dialog-payment>div,
html[data-theme="dark"] .reference-processing-grid>div,
html[data-theme="dark"] .complaint-dialog-meta article,
html[data-theme="dark"] .preview-meta-grid-v2 article,
html[data-theme="dark"] .preview-details-grid-v2 article,
html[data-theme="dark"] .preview-info-grid-v2 article,
html[data-theme="dark"] .preview-attachments-v2>a,
html[data-theme="dark"] .attachment-item,
html[data-theme="dark"] .dialog-attachments a,
html[data-theme="dark"] .tracking-files a{
    color:var(--dark-text);
    border-color:var(--dark-border);
    background:#0e1b15;
}

html[data-theme="dark"] .preview-panel-section-v2>h3{
    color:var(--dark-text);
    border-color:var(--dark-border);
}

html[data-theme="dark"] .preview-info-grid-v2 strong,
html[data-theme="dark"] .preview-attachments-v2>a strong{
    color:var(--dark-text);
}

html[data-theme="dark"] .preview-info-grid-v2 small,
html[data-theme="dark"] .preview-attachments-v2>a small,
html[data-theme="dark"] .preview-empty-text-v2,
html[data-theme="dark"] .preview-attachments-v2>p{
    color:var(--dark-muted);
}

html[data-theme="dark"] .preview-empty-text-v2,
html[data-theme="dark"] .preview-attachments-v2>p{
    border-color:var(--dark-border);
    background:#0e1b15;
}
html[data-theme="dark"] .request-list-item:hover,
html[data-theme="dark"] .request-list-item-v2:hover,
html[data-theme="dark"] .request-list-item-v2.is-selected,
html[data-theme="dark"] .complaint-list-item:hover,
html[data-theme="dark"] .complaint-list-item.is-selected,
html[data-theme="dark"] .tracking-list>a:hover,
html[data-theme="dark"] .tracking-list>a.active,
html[data-theme="dark"] .attachment-item:hover,
html[data-theme="dark"] .dialog-attachments a:hover{
    border-color:var(--dark-border-2);
    background:#173225;
    box-shadow:0 12px 28px #00000035;
}

html[data-theme="dark"] .request-status-v2,
html[data-theme="dark"] .complaint-status,
html[data-theme="dark"] .dialog-status,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .payment-state{border:1px solid #0000}
html[data-theme="dark"] .badge-in-progress,
html[data-theme="dark"] .badge-for-approval,
html[data-theme="dark"] .request-status-v2.in-progress,
html[data-theme="dark"] .request-status-v2.completed,
html[data-theme="dark"] .request-status-v2.for-approval,
html[data-theme="dark"] .complaint-status.in-progress,
html[data-theme="dark"] .complaint-status.resolved,
html[data-theme="dark"] .status-completed,
html[data-theme="dark"] .status-in-progress,
html[data-theme="dark"] .payment-paid{
    color:var(--dark-green);
    background:#173a2a;
}
html[data-theme="dark"] .badge-pending,
html[data-theme="dark"] .status-pending,
html[data-theme="dark"] .payment-pending,
html[data-theme="dark"] .request-status-v2.pending,
html[data-theme="dark"] .complaint-status.under-review{
    color:#ffd37a;
    background:#3a2a10;
}
html[data-theme="dark"] .badge-rejected,
html[data-theme="dark"] .status-rejected,
html[data-theme="dark"] .request-status-v2.rejected,
html[data-theme="dark"] .complaint-status.rejected{
    color:#ff9aa8;
    background:#3a151b;
}
html[data-theme="dark"] .badge-closed,
html[data-theme="dark"] .complaint-status.closed,
html[data-theme="dark"] .payment-not-recorded{
    color:#c4d4cb;
    background:#25342e;
}

html[data-theme="dark"] .request-stepper,
html[data-theme="dark"] .complaint-stepper,
html[data-theme="dark"] .request-filters,
html[data-theme="dark"] .request-filter-bar-v2,
html[data-theme="dark"] .complaint-filter-bar,
html[data-theme="dark"] .tracking-filters{background:var(--dark-surface)}
html[data-theme="dark"] .step-track:before,
html[data-theme="dark"] .step-track:after,
html[data-theme="dark"] .complaint-stepper article:not(:last-child)::after,
html[data-theme="dark"] .preview-timeline article:before,
html[data-theme="dark"] .preview-timeline-v2 article:before,
html[data-theme="dark"] .dialog-timeline-card article::before,
html[data-theme="dark"] .tracking-timeline article:after,
html[data-theme="dark"] .dialog-history .history-item:before{background:#2b463a}
html[data-theme="dark"] .step-track span,
html[data-theme="dark"] .complaint-stepper span,
html[data-theme="dark"] .guide-card.howto li>span{
    color:var(--dark-muted);
    background:#22352c;
}
html[data-theme="dark"] .choice-grid span,
html[data-theme="dark"] .contact-choice label,
html[data-theme="dark"] .confirm-check,
html[data-theme="dark"] .confirm-complaint,
html[data-theme="dark"] .upload-zone,
html[data-theme="dark"] .evidence-upload span,
html[data-theme="dark"] .map-placeholder{
    color:var(--dark-text);
    border-color:var(--dark-border);
    background:#0e1b15;
}
html[data-theme="dark"] .choice-grid input:checked+span,
html[data-theme="dark"] .contact-choice label:hover,
html[data-theme="dark"] .upload-zone:hover,
html[data-theme="dark"] .evidence-upload:hover span{
    border-color:var(--dark-green);
    background:#173225;
}
html[data-theme="dark"] input[type="radio"],
html[data-theme="dark"] input[type="checkbox"]{accent-color:var(--dark-green)}

html[data-theme="dark"] .settings-nav a,
html[data-theme="dark"] .settings-form label,
html[data-theme="dark"] .appearance-options legend,
html[data-theme="dark"] .appearance-options strong{color:var(--dark-text)}
html[data-theme="dark"] .settings-nav a:hover,
html[data-theme="dark"] .settings-nav a:focus{background:#173225}
html[data-theme="dark"] .appearance-options label{
    color:var(--dark-text);
    border-color:var(--dark-border);
    background:#0e1b15;
}
html[data-theme="dark"] .appearance-options label:hover,
html[data-theme="dark"] .appearance-options label:has(input:checked){
    border-color:var(--dark-green);
    background:#173225;
}
html[data-theme="dark"] .appearance-options input{accent-color:var(--dark-green)}
html[data-theme="dark"] .appearance-options input:checked~.theme-preview{box-shadow:0 0 0 3px #39d98b26}

html[data-theme="dark"] dialog::backdrop,
html[data-theme="dark"] .request-details-dialog::backdrop,
html[data-theme="dark"] .complaint-details-dialog::backdrop{
    background:#020806b8;
    backdrop-filter:blur(4px);
}
html[data-theme="dark"] .dialog-header,
html[data-theme="dark"] .dialog-status-row,
html[data-theme="dark"] .dialog-actions,
html[data-theme="dark"] .complaint-dialog-header,
html[data-theme="dark"] .complaint-dialog-actions,
html[data-theme="dark"] .reference-dialog-header,
html[data-theme="dark"] .reference-dialog-footer{
    color:var(--dark-text);
    border-color:var(--dark-border);
    background:var(--dark-surface);
}
html[data-theme="dark"] .dialog-close,
html[data-theme="dark"] .complaint-dialog-header button{
    color:var(--dark-muted);
    background:#22352c;
}
html[data-theme="dark"] .dialog-close:hover,
html[data-theme="dark"] .complaint-dialog-header button:hover{
    color:#fff;
    background:#c64052;
}

@media(max-width:760px){
    html[data-theme="dark"] .quick-action-nav{
        border-color:var(--dark-border);
        background:#08130ef7;
        box-shadow:0 18px 42px #00000066;
    }
    html[data-theme="dark"] .quick-action-nav a{
        color:var(--dark-text);
        border-color:var(--dark-border);
        background:var(--dark-surface);
    }
    html[data-theme="dark"] .quick-action-nav a.active{
        color:#06110c;
        border-color:var(--dark-green);
        background:linear-gradient(110deg,var(--dark-green),var(--dark-green-2));
    }
    html[data-theme="dark"] .quick-nav-toggle{
        border-color:var(--dark-border);
        background:var(--dark-surface);
    }
    html[data-theme="dark"] .quick-nav-toggle span{background:var(--dark-text)}
}

@media (prefers-reduced-motion:reduce){
    html[data-theme="dark"] *,
    html[data-theme="dark"] *:before,
    html[data-theme="dark"] *:after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
    }
}

/* Theme Toggle Button Styles */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--ref-line, #d1e2d8);
    border-radius: 9px;
    background: #ffffff;
    color: var(--ref-primary, #197a47);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(20, 60, 45, 0.08);
    transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.theme-toggle-btn:hover {
    transform: translateY(-2px);
    border-color: var(--ref-primary, #197a47);
    background: var(--ref-primary-soft, #e5f6ed);
    color: var(--ref-primary-dark, #125732);
    box-shadow: 0 8px 20px rgba(25, 122, 71, 0.18);
}

.theme-toggle-btn:active {
    transform: scale(0.94);
}

.theme-icon-sun { display: none; }
.theme-icon-moon { display: inline-block; color: #197a47; }

html[data-theme="dark"] .theme-icon-sun { display: inline-block; color: #ffd24d; }
html[data-theme="dark"] .theme-icon-moon { display: none; }

html[data-theme="dark"] .theme-toggle-btn {
    border-color: var(--dark-border, #294438);
    background: var(--dark-surface, #101f18);
    color: #ffd24d;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .theme-toggle-btn:hover {
    border-color: #39d98b;
    background: #152d21;
    box-shadow: 0 8px 20px rgba(57, 217, 139, 0.22);
}

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--ref-line, #d1e2d8)!important;
    border-radius: 8px!important;
    color: var(--ref-primary, #197a47)!important;
    background: var(--ref-primary-soft, #e5f6ed)!important;
    font-size: 20px!important;
    cursor: pointer;
}

@media (max-width: 760px) {
    .menu-toggle {
        display: inline-flex;
    }
}

html[data-theme="dark"] .menu-toggle {
    color: var(--dark-green, #39d98b)!important;
    background: var(--dark-surface, #101f18)!important;
    border-color: var(--dark-border, #294438)!important;
}

/* Dark Mode Admin System Styling */
html[data-theme="dark"] .admin-hero {
    border-color: #1f4130!important;
    background: linear-gradient(115deg, #0e2219 0%, #143023 50%, #0b1a13 100%)!important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45)!important;
}

html[data-theme="dark"] .admin-hero:after {
    background: radial-gradient(circle, rgba(57, 217, 139, 0.16) 0%, transparent 70%)!important;
}

html[data-theme="dark"] .admin-hero small {
    color: #39d98b!important;
}

html[data-theme="dark"] .admin-hero h2 {
    color: #edf8f2!important;
}

html[data-theme="dark"] .admin-hero p {
    color: #a9bdb3!important;
}

html[data-theme="dark"] .admin-stat-strip article {
    border-color: #244436!important;
    background: #101f18!important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35)!important;
}

html[data-theme="dark"] .admin-stat-strip span {
    background: #163628!important;
    color: #39d98b!important;
}

html[data-theme="dark"] .admin-stat-strip b {
    color: #edf8f2!important;
}

html[data-theme="dark"] .admin-stat-strip small {
    color: #a9bdb3!important;
}

html[data-theme="dark"] .admin-module-card {
    border-color: #244436!important;
    background: #101f18!important;
    color: #edf8f2!important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)!important;
}

html[data-theme="dark"] .admin-module-card:hover {
    border-color: #39d98b!important;
    background: #142a20!important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45)!important;
}

html[data-theme="dark"] .admin-module-card span {
    background: #163628!important;
    color: #39d98b!important;
}

html[data-theme="dark"] .admin-module-card strong {
    color: #edf8f2!important;
}

html[data-theme="dark"] .admin-module-card small {
    color: #a9bdb3!important;
}

html[data-theme="dark"] .admin-summary-item {
    border-color: #1f3d2f!important;
    background: #0f1c16!important;
}

html[data-theme="dark"] .admin-summary-item:hover {
    border-color: #2f5643!important;
}

html[data-theme="dark"] .admin-summary-item span {
    background: #163628!important;
    color: #39d98b!important;
}

html[data-theme="dark"] .admin-summary-item strong {
    color: #edf8f2!important;
}

html[data-theme="dark"] .admin-summary-item small {
    color: #a9bdb3!important;
}

html[data-theme="dark"] .admin-chart-row span {
    color: #edf8f2!important;
}

html[data-theme="dark"] .admin-chart-row i {
    background: #162c21!important;
}

html[data-theme="dark"] .admin-chart-row i b {
    background: linear-gradient(90deg, #16b873, #39d98b)!important;
}

html[data-theme="dark"] .admin-chart-row strong {
    color: #39d98b!important;
}

html[data-theme="dark"] .admin-toolbar {
    border-color: #244436!important;
    background: #101f18!important;
}

html[data-theme="dark"] .admin .table-wrap {
    border-color: #244436!important;
    background: #101f18!important;
}

html[data-theme="dark"] .admin th {
    background: #14281f!important;
    color: #a7c8b8!important;
}

html[data-theme="dark"] .admin td {
    border-color: #1b3829!important;
    color: #edf8f2!important;
}

html[data-theme="dark"] .admin-check {
    border-color: #244436!important;
    background: #101f18!important;
    color: #edf8f2!important;
}

html[data-theme="dark"] .admin-payment-card {
    border-color: #244436!important;
    background: #101f18!important;
}

html[data-theme="dark"] .admin-payment-preview {
    border-color: #284c3c!important;
    background: #0d1b14!important;
}

html[data-theme="dark"] .admin-payment-preview img {
    border-color: #244436!important;
    background: #101f18!important;
}

html[data-theme="dark"] .admin-page-note {
    border-color: #26543b!important;
    background: linear-gradient(110deg, #11281d, #143023)!important;
    color: #bbf0d2!important;
}

html[data-theme="dark"] .admin .metric:nth-child(1) {
    background: linear-gradient(135deg, #0b2e1a, #145934 60%, #1e874f)!important;
    border: 1px solid #1f6b40!important;
}

html[data-theme="dark"] .admin .metric:nth-child(2) {
    background: linear-gradient(135deg, #15380c, #266b15 60%, #3ca023)!important;
    border: 1px solid #327e1c!important;
}

html[data-theme="dark"] .admin .metric:nth-child(3) {
    background: linear-gradient(135deg, #0d2721, #164f43 60%, #227563)!important;
    border: 1px solid #1c6152!important;
}

html[data-theme="dark"] .admin .metric:nth-child(4) {
    background: linear-gradient(135deg, #192e23, #2f4e3c 60%, #447056)!important;
    border: 1px solid #375945!important;
}

html[data-theme="dark"] .admin-side {
    background: linear-gradient(165deg, #07130e 0%, #0c1c15 54%, #0f241c 100%)!important;
    border-right: 1px solid #1a382b!important;
}

html[data-theme="dark"] .admin-side-promo {
    background: linear-gradient(145deg, #0e241a, #163e2a)!important;
    border-color: #245039!important;
}

.landing-seal,.auth-seal,.auth-form-seal,.quick-action-seal,.side-profile-avatar,.staff-brand-seal{overflow:hidden;background:#fff!important}
.landing-seal img,.auth-seal img,.auth-form-seal img,.quick-action-seal img,.side-profile-avatar img,.staff-brand-seal img{display:block;width:100%;height:100%;border-radius:50%;object-fit:contain;background:#fff}

/* Reference 5-tone green system appearance (Teal-Forest, Deep Pine, Fresh Leaf, Slate Pine, Emerald Jade) */
:root{
    --ref-bg:#f3f8f5;
    --ref-surface:#ffffff;
    --ref-surface-soft:#f5faf7;
    --ref-sidebar:#17382d;
    --ref-sidebar-dark:#0d211a;
    --ref-sidebar-mid:#224c3d;
    --ref-forest-dark:#16362b;
    --ref-primary:#197a47;
    --ref-primary-dark:#125732;
    --ref-primary-hover:#15663b;
    --ref-primary-soft:#e5f6ed;
    --ref-accent:#388a1e;
    --ref-accent-bright:#449e27;
    --ref-accent-soft:#ebf6e7;
    --ref-slate-pine:#3c5d4b;
    --ref-muted:#50675b;
    --ref-text:#0e2219;
    --ref-line:#d1e2d8;
    --ref-line-soft:#e2eee6;
    --ref-shadow:0 14px 34px rgba(20, 60, 45, 0.08);
    --ref-gradient-brand:linear-gradient(135deg, #1b4e45 0%, #296847 48%, #4f8e28 100%);
    --ref-gradient-primary:linear-gradient(110deg, #197a47 0%, #269557 100%);
    --ref-gradient-cta:linear-gradient(110deg, #1b7a48 0%, #388a1e 100%);
}

body{
    color:var(--ref-text);
    background:radial-gradient(circle at 22% -10%,#d8ece0 0 270px,transparent 500px),var(--ref-bg);
}

.portal-main,
.quick-action-page,
.profile-standalone{
    color:var(--ref-text);
    background:radial-gradient(circle at 18% -10%,#dceee8 0 280px,transparent 520px),linear-gradient(180deg,#f4faf6 0%,#eef5f0 100%)!important;
}

.panel,
.settings-card,
.settings-nav,
.profile-summary-card,
.profile-form-card,
.profile-page-title,
.request-workspace,
.request-stepper,
.summary-card,
.help-card,
.complaint-stepper,
.complaint-wizard,
.guide-card,
.requests-table-card,
.requests-aside article,
.request-stat-grid article,
.requests-list-card-v2,
.request-preview-card-v2,
.complaint-stat-grid article,
.complaints-list-card,
.complaint-preview-card,
.tracking-hero,
.tracking-filters,
.tracking-list,
.tracking-detail,
.quick-other-services,
.portal-choice,
.quick-welcome-status,
.notifications-panel,
.service-mini-grid article,
.request-details-dialog,
.complaint-details-dialog,
.reference-card,
.dialog-info-card,
.dialog-timeline-card,
.admin-card,
.staff-card,
.staff-settings-card,
.staff-record-detail-main,
.resident-page-card,
.resident-page-hero{
    border-color:var(--ref-line)!important;
    background:var(--ref-surface)!important;
    box-shadow:var(--ref-shadow)!important;
}

.portal-top,
.quick-action-header,
.profile-topbar{
    border-color:#d7e4de!important;
    background:#f9fcfaf0!important;
    box-shadow:0 8px 26px #153d3510!important;
    backdrop-filter:blur(16px);
}

.portal-top{
    position:sticky!important;
    top:0!important;
    z-index:90!important;
    margin:0 -29px 18px!important;
    padding:0 29px!important;
}

.portal-top h1,
.quick-welcome h1,
.profile-page-title h1,
h1,h2,h3,
.panel h2,
.settings-card h2,
.request-main-v2 strong,
.complaint-main strong,
.tracking-list strong{
    color:var(--ref-text)!important;
}

p,small,
.portal-top p,
.quick-welcome-copy>p,
.profile-page-title small,
.muted-text,
.mini-item p,
.request-main-v2 small,
.complaint-main small,
.tracking-list small{
    color:var(--ref-muted);
}

a:not(.btn):not(.btn-gradient):not(.primary):not(.staff-primary):not(.admin-btn):not(.landing-btn):not(.auth-btn),
.quick-action-nav a:hover,
.quick-action-nav a.active,
.portal-selection>h2,
.quick-welcome-label,
.choice-eyebrow,
.stage-heading>span,
.preview-eyebrow,
.preview-eyebrow-v2,
.complaint-dialog-header small,
.service-dashboard-hero span,
.complaint-dashboard-hero span{
    color:var(--ref-primary)!important;
}

.btn.primary,
.primary,
.btn-gradient,
.landing-btn.btn-gradient,
.auth-btn,
.portal-choice a,
.complaint-btn,
.complaint-primary,
.wizard-actions .primary,
.complaint-wizard-actions .complaint-btn,
.preview-action:hover,
.preview-action-v2:hover,
.request-pagination-v2 a.is-current,
.complaint-pagination a.is-current{
    color:#fff!important;
    border-color:transparent!important;
    background:var(--ref-gradient-primary)!important;
    box-shadow:0 14px 26px #197a472b!important;
}

.btn.light,
.light,
.preview-action,
.preview-action-v2,
.view-request,
.profile-back{
    color:var(--ref-primary)!important;
    border-color:#8ebca6!important;
    background:#fff!important;
}

input,
select,
textarea,
.search-box{
    color:var(--ref-text)!important;
    border-color:#c8ded3!important;
    background:#fff!important;
}
input:focus,
select:focus,
textarea:focus,
.search-box:focus{
    border-color:var(--ref-primary)!important;
    box-shadow:0 0 0 3px #197a471a!important;
    outline:0;
}

.sidebar,
.service-side,
.complaint-side,
.admin-side,
.staff-side{
    color:#f5fffb!important;
    background:linear-gradient(180deg,var(--ref-sidebar-mid) 0%,var(--ref-sidebar) 34%,var(--ref-sidebar-dark) 100%)!important;
    box-shadow:inset -1px 0 0 #ffffff16!important;
}

.sidebar:before,
.service-side:before,
.complaint-side:before,
.staff-side:before{
    background:#388a1e21!important;
}

.side-brand,
.side-profile,
.staff-brand{
    border-color:#ffffff24!important;
    background:#ffffff0b!important;
    box-shadow:none!important;
}

.side-profile-copy strong,
.staff-side .side-profile-copy strong,
.side-brand,
.sidebar nav a,
.sidebar nav summary.side-link,
.service-side nav a,
.complaint-side nav a,
.staff-side nav a,
.staff-side nav summary.side-link,
.logout,
.staff-logout{
    color:#f5fffb!important;
}

.side-profile-copy small,
.service-side nav p,
.complaint-side nav p,
.sidebar nav p,
.staff-side nav p{
    color:#bcd8cf!important;
}

.sidebar nav a,
.sidebar nav summary.side-link,
.service-side nav a,
.complaint-side nav a,
.staff-side nav a,
.staff-side nav summary.side-link{
    border:1px solid transparent!important;
    border-radius:8px!important;
    font-weight:800!important;
}

.sidebar nav a:hover,
.sidebar nav a.active,
.sidebar nav summary.side-link:hover,
.sidebar nav summary.side-link.active,
.service-side nav a:hover,
.service-side nav a.active,
.complaint-side nav a:hover,
.complaint-side nav a.active,
.staff-side nav a:hover,
.staff-side nav a.active,
.staff-side nav summary.side-link:hover,
.staff-side nav summary.side-link.active,
.staff-side .side-dropdown[open] summary.side-link{
    border-color:#388a1e42!important;
    background:#388a1e20!important;
    box-shadow:none!important;
}

.sidebar nav a:before,
.service-side nav a:before,
.complaint-side nav a:before,
.staff-side nav a:before,
.staff-side nav summary.side-link:before{
    background:linear-gradient(105deg,#197a47,#388a1e)!important;
}

.side-icon,
.staff-side .side-icon,
.complaint-side .side-icon{
    color:#d8eee7!important;
    background:transparent!important;
}

.sidebar nav a.active .side-icon,
.service-side nav a.active .side-icon,
.complaint-side nav a.active .side-icon,
.staff-side nav a.active .side-icon,
.staff-side nav summary.side-link.active .side-icon{
    color:#0d241d!important;
    background:#c4ebd7!important;
}

.service-side-promo,
.complaint-side-promo,
.staff-side-promo{
    border-color:#2a6a524d!important;
    background:linear-gradient(180deg,#17382d,#0d211a)!important;
    box-shadow:0 16px 30px #0000002e!important;
}

.promo-image,
.service-side .promo-image,
.complaint-side .complaint-side-promo .promo-image,
.staff-side-promo .promo-image{
    background:linear-gradient(180deg,transparent 10%,#17382d 92%),url('../images/nalook-hall.png') center 38%/cover!important;
}

.metric-icon,
.portal-choice-icon,
.quick-other-services a>span,
.profile-list-icon,
.profile-form-heading>span,
.profile-security>span,
.request-list-icon,
.request-icon-v2,
.complaint-icon,
.dialog-complaint-icon,
.dialog-heading-icon,
.dialog-section-title>span,
.reference-service-icon,
.reference-card>h3>span,
.service-mini-grid span,
.event-card>b,
.tracking-list>a>span,
.tracking-files a>span,
.summary-card h3>span,
.help-card h3>span,
.settings-nav a>span,
.settings-card>header>span,
.preview-meta-grid-v2 span{
    color:var(--ref-primary)!important;
    background:var(--ref-primary-soft)!important;
}

.service-dashboard-hero,
.complaint-dashboard-hero,
.tracking-hero,
.payment-summary,
.final-review-title,
.guide-card.privacy,
.guide-card.reminders,
.complaint-dialog-meta{
    background:linear-gradient(115deg,#f9fcfa 0%,#eaf4ef 100%)!important;
}

.request-list-item-v2:hover,
.request-list-item-v2.is-selected,
.complaint-list-item:hover,
.complaint-list-item.is-selected,
.tracking-list>a:hover,
.tracking-list>a.active{
    border-color:#8ac4a5!important;
    background:#f4fbf8!important;
    box-shadow:0 12px 28px #197a4714!important;
}

.request-status-v2.in-progress,
.request-status-v2.completed,
.request-status-v2.for-approval,
.complaint-status.in-progress,
.complaint-status.resolved,
.badge-in-progress,
.badge-completed,
.badge-resolved,
.badge-for-approval{
    color:var(--ref-primary-dark)!important;
    background:var(--ref-primary-soft)!important;
}

.metric,
.service-metric-card,
.portal-main.service .service-metric-card,
.portal-main.complaint .service-metric-card{
    color:#10342e!important;
    background:#fff!important;
    border:1px solid var(--ref-line)!important;
}

.metric b,
.service-metric-card strong,
.request-stat-grid b,
.complaint-stat-grid b{
    color:var(--ref-primary-dark)!important;
}

.bar-chart span,
.complaint-bar-chart span,
.popular-bars i b,
.complaint-category-bars i b{
    background:linear-gradient(90deg,var(--ref-primary),var(--ref-accent))!important;
}

html[data-theme="dark"]{
    --ref-bg:#08130e;
    --ref-surface:#11221b;
    --ref-surface-soft:#172c23;
    --ref-sidebar:#091611;
    --ref-sidebar-dark:#050d0a;
    --ref-sidebar-mid:#142a22;
    --ref-primary:#3cd485;
    --ref-primary-dark:#22ba6e;
    --ref-primary-soft:#16382b;
    --ref-accent:#4cd988;
    --ref-muted:#9bb7aa;
    --ref-text:#eef8f3;
    --ref-line:#264739;
    --ref-shadow:0 18px 44px #00000052;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .portal-main,
html[data-theme="dark"] .portal-main.service,
html[data-theme="dark"] .portal-main.complaint,
html[data-theme="dark"] .quick-action-page,
html[data-theme="dark"] .profile-standalone{
    background:radial-gradient(circle at 18% -12%,#17362f 0 290px,transparent 530px),linear-gradient(180deg,#07110e,#0b1915)!important;
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .settings-nav,
html[data-theme="dark"] .profile-summary-card,
html[data-theme="dark"] .profile-form-card,
html[data-theme="dark"] .profile-page-title,
html[data-theme="dark"] .request-workspace,
html[data-theme="dark"] .request-stepper,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .help-card,
html[data-theme="dark"] .complaint-stepper,
html[data-theme="dark"] .complaint-wizard,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .requests-table-card,
html[data-theme="dark"] .requests-aside article,
html[data-theme="dark"] .request-stat-grid article,
html[data-theme="dark"] .requests-list-card-v2,
html[data-theme="dark"] .request-preview-card-v2,
html[data-theme="dark"] .complaint-stat-grid article,
html[data-theme="dark"] .complaints-list-card,
html[data-theme="dark"] .complaint-preview-card,
html[data-theme="dark"] .tracking-hero,
html[data-theme="dark"] .tracking-filters,
html[data-theme="dark"] .tracking-list,
html[data-theme="dark"] .tracking-detail,
html[data-theme="dark"] .quick-other-services,
html[data-theme="dark"] .portal-choice,
html[data-theme="dark"] .quick-welcome-status,
html[data-theme="dark"] .notifications-panel,
html[data-theme="dark"] .service-mini-grid article,
html[data-theme="dark"] .request-details-dialog,
html[data-theme="dark"] .complaint-details-dialog,
html[data-theme="dark"] .reference-card,
html[data-theme="dark"] .dialog-info-card,
html[data-theme="dark"] .dialog-timeline-card,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .staff-card,
html[data-theme="dark"] .staff-settings-card,
html[data-theme="dark"] .staff-record-detail-main,
html[data-theme="dark"] .resident-page-card,
html[data-theme="dark"] .resident-page-hero,
html[data-theme="dark"] .process-steps-grid article,
html[data-theme="dark"] .history-summary-grid article,
html[data-theme="dark"] .process-service-list a,
html[data-theme="dark"] .history-record,
html[data-theme="dark"] .complaint-process-page .process-steps-grid article,
html[data-theme="dark"] .complaint-history-page .history-summary-grid article{
    color:var(--ref-text)!important;
    border-color:var(--ref-line)!important;
    background:linear-gradient(180deg,#14261f,#0f1f19)!important;
    box-shadow:var(--ref-shadow)!important;
}

html[data-theme="dark"] .portal-top,
html[data-theme="dark"] .quick-action-header,
html[data-theme="dark"] .profile-topbar{
    border-color:#254a41!important;
    background:#08130fee!important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .history-toolbar input,
html[data-theme="dark"] .history-toolbar select{
    color:var(--ref-text)!important;
    border-color:var(--ref-line)!important;
    background:#0a1712!important;
}

html[data-theme="dark"] .process-hero h2,
html[data-theme="dark"] .process-steps-grid strong,
html[data-theme="dark"] .history-summary-grid strong,
html[data-theme="dark"] .process-checklist li,
html[data-theme="dark"] .history-record-main strong,
html[data-theme="dark"] .history-empty strong,
html[data-theme="dark"] .process-service-list strong{
    color:var(--ref-text)!important;
}

html[data-theme="dark"] .process-hero p,
html[data-theme="dark"] .process-steps-grid p,
html[data-theme="dark"] .history-summary-grid small,
html[data-theme="dark"] .process-status-card p,
html[data-theme="dark"] .process-service-list small,
html[data-theme="dark"] .history-record-main small,
html[data-theme="dark"] .history-record-main p,
html[data-theme="dark"] .history-record-meta small,
html[data-theme="dark"] .history-empty p{
    color:var(--ref-muted)!important;
}

html[data-theme="dark"] .complaint-history-page .complaint-status,
html[data-theme="dark"] .complaint-process-page .complaint-status{
    border-color:#0000!important;
}

html[data-theme="dark"] .service-dashboard-hero,
html[data-theme="dark"] .complaint-dashboard-hero,
html[data-theme="dark"] .tracking-hero,
html[data-theme="dark"] .payment-summary,
html[data-theme="dark"] .final-review-title,
html[data-theme="dark"] .guide-card.privacy,
html[data-theme="dark"] .guide-card.reminders,
html[data-theme="dark"] .complaint-dialog-meta{
    background:linear-gradient(115deg,#11231d,#172e27)!important;
}

html[data-theme="dark"] .metric,
html[data-theme="dark"] .service-metric-card,
html[data-theme="dark"] .portal-main.service .service-metric-card,
html[data-theme="dark"] .portal-main.complaint .service-metric-card{
    color:var(--ref-text)!important;
    background:linear-gradient(180deg,#14261f,#0f1f19)!important;
    border-color:var(--ref-line)!important;
}

html[data-theme="dark"] .metric b,
html[data-theme="dark"] .service-metric-card strong,
html[data-theme="dark"] .request-stat-grid b,
html[data-theme="dark"] .complaint-stat-grid b{
    color:var(--ref-accent)!important;
}

html[data-theme="dark"] .request-list-item-v2:hover,
html[data-theme="dark"] .request-list-item-v2.is-selected,
html[data-theme="dark"] .complaint-list-item:hover,
html[data-theme="dark"] .complaint-list-item.is-selected,
html[data-theme="dark"] .tracking-list>a:hover,
html[data-theme="dark"] .tracking-list>a.active{
    border-color:#5cbab0!important;
    background:#18352d!important;
    box-shadow:0 12px 28px #0000003d!important;
}

html[data-theme="dark"] .complaint-preview-title-row,
html[data-theme="dark"] .complaint-preview-section>h3,
html[data-theme="dark"] .complaint-preview-card .preview-timeline>h3{
    border-color:#28443f!important;
}

html[data-theme="dark"] .complaint-preview-title-row h2,
html[data-theme="dark"] .complaint-preview-details-grid h3,
html[data-theme="dark"] .complaint-preview-section>h3,
html[data-theme="dark"] .complaint-preview-meta-grid strong,
html[data-theme="dark"] .complaint-preview-details-grid p,
html[data-theme="dark"] .complaint-preview-info-grid strong,
html[data-theme="dark"] .complaint-preview-attachments>a{
    color:#ecfffb!important;
}

html[data-theme="dark"] .complaint-preview-title-row p,
html[data-theme="dark"] .complaint-preview-meta-grid small,
html[data-theme="dark"] .complaint-preview-info-grid small,
html[data-theme="dark"] .complaint-preview-attachments>a small,
html[data-theme="dark"] .complaint-preview-empty-text,
html[data-theme="dark"] .complaint-preview-attachments>p{
    color:#aac8c1!important;
}

html[data-theme="dark"] .complaint-preview-meta-grid article,
html[data-theme="dark"] .complaint-preview-details-grid article,
html[data-theme="dark"] .complaint-preview-info-grid article,
html[data-theme="dark"] .complaint-preview-attachments>a,
html[data-theme="dark"] .complaint-preview-empty-text,
html[data-theme="dark"] .complaint-preview-attachments>p{
    border-color:#31514b!important;
    background:#102a27!important;
}

html[data-theme="dark"] .preview-close{
    color:#c2ddd7!important;
    border-color:#31514b!important;
    background:#102a27!important;
}

html[data-theme="dark"] .preview-close:hover{
    color:#061917!important;
    border-color:#3cd485!important;
    background:#3cd485!important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .service-side,
html[data-theme="dark"] .complaint-side,
html[data-theme="dark"] .admin-side,
html[data-theme="dark"] .staff-side{
    background:linear-gradient(180deg,#142a22 0%,#0e221b 40%,#050d0a 100%)!important;
}

@media(max-width:900px){
    .portal-main{padding-inline:18px}
    .portal-top{margin-inline:-18px!important;padding-inline:18px!important}
    .request-stat-grid,
    .complaint-stat-grid,
    .service-metrics-grid,
    .metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:620px){
    .request-stat-grid,
    .complaint-stat-grid,
    .service-metrics-grid,
    .metrics{grid-template-columns:1fr!important}
    .portal-main{padding-inline:14px}
    .portal-top{margin-inline:-14px!important;padding-inline:14px!important}
}

/* Professional sidebar dropdown sizing */
.sidebar .side-dropdown,
.service-side .side-dropdown,
.complaint-side .side-dropdown,
.staff-side .side-dropdown{
    width:100%!important;
    margin:6px 0!important;
    border:1px solid transparent!important;
    border-radius:9px!important;
    background:transparent!important;
    overflow:hidden!important;
}

.sidebar .side-dropdown summary,
.service-side .side-dropdown summary,
.complaint-side .side-dropdown summary,
.staff-side .side-dropdown summary{
    list-style:none!important;
    cursor:pointer!important;
}

.sidebar .side-dropdown summary::-webkit-details-marker,
.service-side .side-dropdown summary::-webkit-details-marker,
.complaint-side .side-dropdown summary::-webkit-details-marker,
.staff-side .side-dropdown summary::-webkit-details-marker{
    display:none!important;
}

.sidebar nav summary.side-link,
.service-side nav summary.side-link,
.complaint-side nav summary.side-link,
.staff-side nav summary.side-link{
    display:flex!important;
    align-items:center!important;
    min-height:46px!important;
    width:100%!important;
    padding:11px 14px!important;
    gap:12px!important;
    font-size:13px!important;
    line-height:1.2!important;
}

.sidebar .side-dropdown[open],
.service-side .side-dropdown[open],
.complaint-side .side-dropdown[open],
.staff-side .side-dropdown[open]{
    border-color:#78d5cb30!important;
    background:#ffffff0d!important;
    box-shadow:inset 0 1px 0 #ffffff10!important;
}

.sidebar .side-dropdown[open] summary.side-link,
.service-side .side-dropdown[open] summary.side-link,
.complaint-side .side-dropdown[open] summary.side-link,
.staff-side .side-dropdown[open] summary.side-link{
    min-height:48px!important;
    border-color:#78d5cb40!important;
    border-radius:9px!important;
    color:#f8fffc!important;
    background:#78d5cb1c!important;
    box-shadow:none!important;
}

.side-caret{
    margin-left:auto!important;
    flex:0 0 auto!important;
    color:#c9eee6!important;
    font-size:16px!important;
    line-height:1!important;
    transition:transform .22s ease,color .22s ease!important;
}

.side-dropdown[open] .side-caret{
    color:#ffffff!important;
    transform:rotate(180deg)!important;
}

.side-submenu{
    display:grid!important;
    gap:6px!important;
    margin:6px 6px 10px!important;
    padding:6px 0 6px 38px!important;
    animation:sidebarDropdownIn .22s ease both!important;
}

.side-submenu a{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    min-height:40px!important;
    width:100%!important;
    margin:0!important;
    padding:9px 12px!important;
    gap:10px!important;
    border:1px solid transparent!important;
    border-radius:8px!important;
    color:#d7eee7!important;
    background:transparent!important;
    font-size:12.5px!important;
    font-weight:800!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease!important;
}

.side-submenu a:before{
    content:""!important;
    position:static!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 22px!important;
    width:22px!important;
    height:22px!important;
    border:0!important;
    border-radius:7px!important;
    background:#ffffff24!important;
    box-shadow:inset 0 0 0 6px #ffffff00, inset 0 0 0 8px #d7eee7!important;
    opacity:1!important;
    transform:none!important;
}

.side-submenu a:hover,
.side-submenu a.active{
    color:#ffffff!important;
    border-color:#78d5cb38!important;
    background:#78d5cb24!important;
    transform:translateX(2px)!important;
}

.side-submenu a.active:before,
.side-submenu a:hover:before{
    background:#9ee7dc!important;
    box-shadow:inset 0 0 0 6px #0f342b, inset 0 0 0 8px #9ee7dc!important;
}

html[data-theme="dark"] .side-dropdown[open]{
    border-color:#78d5cb24!important;
    background:#78d5cb10!important;
}

html[data-theme="dark"] .side-submenu a{
    color:#c8e6df!important;
}

@keyframes sidebarDropdownIn{
    from{opacity:0;transform:translateY(-4px)}
    to{opacity:1;transform:none}
}

/* Reference sidebar system */
.sidebar,
.service-side,
.complaint-side,
.admin-side,
.staff-side{
    width:244px!important;
    padding:0!important;
    color:#edf8f4!important;
    background:linear-gradient(180deg,#437969 0%,#205d52 22%,#173f38 100%)!important;
    box-shadow:inset -1px 0 0 #ffffff16!important;
    overflow:hidden!important;
}

.portal-main,
.staff .portal-main{
    margin-left:244px!important;
}

.sidebar,
.service-side,
.complaint-side,
.admin-side,
.staff-side,
.portal-main,
.staff .portal-main{
    transition:transform .24s ease, margin-left .24s ease!important;
}

body.sidebar-collapsed .sidebar,
body.sidebar-collapsed .service-side,
body.sidebar-collapsed .complaint-side,
body.sidebar-collapsed .admin-side,
body.sidebar-collapsed .staff-side{
    transform:translateX(-100%)!important;
}

body.sidebar-collapsed .portal-main,
body.sidebar-collapsed.staff .portal-main,
body.sidebar-collapsed.admin .portal-main{
    margin-left:0!important;
}

.sidebar:before,
.sidebar:after,
.service-side:before,
.service-side:after,
.complaint-side:before,
.complaint-side:after,
.admin-side:before,
.admin-side:after,
.staff-side:before,
.staff-side:after{
    display:none!important;
}

.sidebar .side-brand,
.sidebar .side-profile,
.sidebar .staff-brand,
.sidebar .admin-profile,
.service-side .side-brand,
.complaint-side .side-brand,
.admin-side .side-brand,
.staff-side .side-brand{
    position:relative!important;
    z-index:1!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    min-height:226px!important;
    width:100%!important;
    margin:0!important;
    padding:24px 18px 22px!important;
    border:0!important;
    border-bottom:1px solid #ffffff25!important;
    border-radius:0!important;
    color:#ffffff!important;
    background:linear-gradient(180deg,#4b8272 0%,#376f63 100%)!important;
    box-shadow:none!important;
    text-align:center!important;
}

.sidebar .side-profile-avatar,
.sidebar .staff-brand-seal,
.sidebar .seal,
.service-side .side-profile-avatar,
.complaint-side .side-profile-avatar,
.admin-side .side-profile-avatar,
.staff-side .staff-brand-seal{
    display:grid!important;
    place-items:center!important;
    flex:0 0 82px!important;
    width:82px!important;
    height:82px!important;
    padding:5px!important;
    border:2px solid #c9f0df!important;
    border-radius:50%!important;
    background:#ffffff!important;
    box-shadow:0 12px 26px #001c1530!important;
}

.sidebar .side-profile-avatar img,
.sidebar .staff-brand-seal img,
.sidebar .seal img,
.service-side .side-profile-avatar img,
.complaint-side .side-profile-avatar img,
.admin-side .side-profile-avatar img,
.staff-side .staff-brand-seal img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    border-radius:50%!important;
}

.sidebar .side-profile-copy,
.service-side .side-profile-copy,
.complaint-side .side-profile-copy,
.admin-side .side-profile-copy,
.staff-side .side-profile-copy{
    display:grid!important;
    justify-items:center!important;
    gap:8px!important;
    width:100%!important;
}

.sidebar .side-profile-copy strong,
.service-side .side-profile-copy strong,
.complaint-side .side-profile-copy strong,
.admin-side .side-profile-copy strong,
.staff-side .side-profile-copy strong{
    max-width:190px!important;
    color:#ffffff!important;
    font-size:18px!important;
    font-weight:900!important;
    line-height:1.15!important;
    letter-spacing:0!important;
    text-align:center!important;
    white-space:normal!important;
}

.sidebar .side-profile-copy small,
.service-side .side-profile-copy small,
.complaint-side .side-profile-copy small,
.admin-side .side-profile-copy small,
.staff-side .side-profile-copy small{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:26px!important;
    max-width:180px!important;
    padding:0 16px!important;
    border:1px solid #f4e6bf55!important;
    border-radius:999px!important;
    color:#12352d!important;
    background:#d7bf85!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1!important;
    text-align:center!important;
    box-shadow:inset 0 1px 0 #ffffff4d!important;
}

.sidebar nav,
.service-side nav,
.complaint-side nav,
.admin-side nav,
.staff-side nav{
    position:relative!important;
    z-index:1!important;
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    padding:12px 0 18px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:thin!important;
    scrollbar-color:#ffffff3d transparent!important;
}

.sidebar nav::-webkit-scrollbar,
.service-side nav::-webkit-scrollbar,
.complaint-side nav::-webkit-scrollbar,
.admin-side nav::-webkit-scrollbar,
.staff-side nav::-webkit-scrollbar{
    width:6px!important;
}

.sidebar nav::-webkit-scrollbar-thumb,
.service-side nav::-webkit-scrollbar-thumb,
.complaint-side nav::-webkit-scrollbar-thumb,
.admin-side nav::-webkit-scrollbar-thumb,
.staff-side nav::-webkit-scrollbar-thumb{
    border-radius:999px!important;
    background:#ffffff3d!important;
}

.sidebar nav p,
.service-side nav p,
.complaint-side nav p,
.admin-side nav p,
.staff-side nav p{
    margin:18px 24px 10px!important;
    color:#a7bbb5!important;
    font-size:12px!important;
    font-weight:900!important;
    letter-spacing:0!important;
    line-height:1.2!important;
    text-transform:uppercase!important;
}

.sidebar nav a,
.sidebar nav summary.side-link,
.service-side nav a,
.service-side nav summary.side-link,
.complaint-side nav a,
.complaint-side nav summary.side-link,
.admin-side nav a,
.admin-side nav summary.side-link,
.staff-side nav a,
.staff-side nav summary.side-link,
.logout,
.staff-logout,
.admin-logout{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    min-height:48px!important;
    width:auto!important;
    margin:4px 0!important;
    padding:0 24px!important;
    gap:14px!important;
    border:0!important;
    border-radius:0!important;
    color:#eef8f5!important;
    background:transparent!important;
    box-shadow:none!important;
    font-size:15px!important;
    font-weight:700!important;
    line-height:1.25!important;
    overflow:visible!important;
    transform:none!important;
    transition:background .2s ease,color .2s ease!important;
}

.sidebar nav a:before,
.sidebar nav summary.side-link:before,
.service-side nav a:before,
.service-side nav summary.side-link:before,
.complaint-side nav a:before,
.complaint-side nav summary.side-link:before,
.admin-side nav a:before,
.admin-side nav summary.side-link:before,
.staff-side nav a:before,
.staff-side nav summary.side-link:before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:4px!important;
    height:auto!important;
    border-radius:0 99px 99px 0!important;
    background:#ef3f57!important;
    opacity:0!important;
    transform:none!important;
    transition:opacity .2s ease!important;
}

.sidebar nav a:hover,
.sidebar nav a.active,
.sidebar nav summary.side-link:hover,
.sidebar nav summary.side-link.active,
.service-side nav a:hover,
.service-side nav a.active,
.service-side nav summary.side-link:hover,
.service-side nav summary.side-link.active,
.complaint-side nav a:hover,
.complaint-side nav a.active,
.complaint-side nav summary.side-link:hover,
.complaint-side nav summary.side-link.active,
.admin-side nav a:hover,
.admin-side nav a.active,
.admin-side nav summary.side-link:hover,
.admin-side nav summary.side-link.active,
.staff-side nav a:hover,
.staff-side nav a.active,
.staff-side nav summary.side-link:hover,
.staff-side nav summary.side-link.active,
.staff-side .side-dropdown[open] summary.side-link,
.logout:hover,
.staff-logout:hover,
.admin-logout:hover{
    color:#ffffff!important;
    background:#ffffff12!important;
    transform:none!important;
}

.sidebar nav a.active:before,
.sidebar nav summary.side-link.active:before,
.service-side nav a.active:before,
.service-side nav summary.side-link.active:before,
.complaint-side nav a.active:before,
.complaint-side nav summary.side-link.active:before,
.admin-side nav a.active:before,
.admin-side nav summary.side-link.active:before,
.staff-side nav a.active:before,
.staff-side nav summary.side-link.active:before{
    opacity:1!important;
}

.side-icon,
.sidebar .side-icon,
.service-side .side-icon,
.complaint-side .side-icon,
.admin-side .side-icon,
.staff-side .side-icon{
    display:grid!important;
    place-items:center!important;
    flex:0 0 22px!important;
    width:22px!important;
    height:22px!important;
    border:0!important;
    border-radius:0!important;
    color:#d8e7e2!important;
    background:transparent!important;
    font-size:16px!important;
    line-height:1!important;
    transform:none!important;
}

.sidebar nav a:hover .side-icon,
.sidebar nav a.active .side-icon,
.sidebar nav summary.side-link:hover .side-icon,
.sidebar nav summary.side-link.active .side-icon,
.service-side nav a:hover .side-icon,
.service-side nav a.active .side-icon,
.complaint-side nav a:hover .side-icon,
.complaint-side nav a.active .side-icon,
.admin-side nav a:hover .side-icon,
.admin-side nav a.active .side-icon,
.staff-side nav a:hover .side-icon,
.staff-side nav a.active .side-icon,
.staff-side .side-dropdown[open] summary.side-link .side-icon{
    color:#ffffff!important;
    background:transparent!important;
    transform:none!important;
}

.side-label{
    min-width:0!important;
    flex:1 1 auto!important;
    color:inherit!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
}

.side-badge{
    margin-left:auto!important;
    min-width:24px!important;
    height:22px!important;
    padding:0 7px!important;
    border:1px solid #ffffff2e!important;
    border-radius:999px!important;
    color:#ffffff!important;
    font-size:11px!important;
}

.sidebar .side-dropdown,
.service-side .side-dropdown,
.complaint-side .side-dropdown,
.staff-side .side-dropdown{
    margin:4px 0!important;
    border:0!important;
    border-radius:5px!important;
    background:transparent!important;
}

.sidebar .side-dropdown[open],
.service-side .side-dropdown[open],
.complaint-side .side-dropdown[open],
.staff-side .side-dropdown[open]{
    margin:4px 0!important;
    border:0!important;
    min-height:124px!important;
    background:#173d36!important;
    box-shadow:none!important;
}

.sidebar .side-dropdown[open] summary.side-link,
.service-side .side-dropdown[open] summary.side-link,
.complaint-side .side-dropdown[open] summary.side-link,
.staff-side .side-dropdown[open] summary.side-link{
    border-radius:0!important;
    background:transparent!important;
}

.side-caret{
    margin-left:auto!important;
    color:#d8e7e2!important;
    font-size:17px!important;
}

.side-submenu{
    gap:0!important;
    margin:0!important;
    min-height:72px!important;
    padding:4px 0 6px!important;
    animation:sidebarDropdownIn .22s ease both!important;
}

.sidebar nav .side-submenu a,
.service-side nav .side-submenu a,
.complaint-side nav .side-submenu a,
.staff-side nav .side-submenu a{
    min-height:34px!important;
    margin:0!important;
    padding:0 22px 0 46px!important;
    border:0!important;
    border-radius:0!important;
    color:#bfd4ce!important;
    background:transparent!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1.25!important;
    display:grid!important;
    grid-template-columns:20px minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:12px!important;
    white-space:normal!important;
    overflow:hidden!important;
}

.sidebar nav .side-submenu a:before,
.service-side nav .side-submenu a:before,
.complaint-side nav .side-submenu a:before,
.staff-side nav .side-submenu a:before{
    position:static!important;
    left:auto!important;
    top:auto!important;
    bottom:auto!important;
    display:grid!important;
    place-items:center!important;
    width:20px!important;
    height:20px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#bfd4ce!important;
    font-size:14px!important;
    line-height:1!important;
    transform:none!important;
    opacity:1!important;
}

.sidebar nav .side-submenu a:nth-child(1):before,
.service-side nav .side-submenu a:nth-child(1):before,
.complaint-side nav .side-submenu a:nth-child(1):before,
.staff-side nav .side-submenu a:nth-child(1):before{content:"\2637"!important}

.sidebar nav .side-submenu a:nth-child(2):before,
.service-side nav .side-submenu a:nth-child(2):before,
.complaint-side nav .side-submenu a:nth-child(2):before,
.staff-side nav .side-submenu a:nth-child(2):before{content:"\25b6"!important}

.sidebar nav .side-submenu a:nth-child(3):before,
.service-side nav .side-submenu a:nth-child(3):before,
.complaint-side nav .side-submenu a:nth-child(3):before,
.staff-side nav .side-submenu a:nth-child(3):before{content:"\25fb"!important}

.sidebar nav .side-submenu a:nth-child(4):before,
.service-side nav .side-submenu a:nth-child(4):before,
.complaint-side nav .side-submenu a:nth-child(4):before,
.staff-side nav .side-submenu a:nth-child(4):before{content:"\25cf"!important}

.sidebar nav .side-submenu a:nth-child(5):before,
.service-side nav .side-submenu a:nth-child(5):before,
.complaint-side nav .side-submenu a:nth-child(5):before,
.staff-side nav .side-submenu a:nth-child(5):before{content:"?"!important}

.sidebar nav .side-submenu a:nth-child(6):before,
.service-side nav .side-submenu a:nth-child(6):before,
.complaint-side nav .side-submenu a:nth-child(6):before,
.staff-side nav .side-submenu a:nth-child(6):before{content:"+"!important}

.sidebar nav .side-submenu a:hover,
.sidebar nav .side-submenu a.active,
.service-side nav .side-submenu a:hover,
.service-side nav .side-submenu a.active,
.complaint-side nav .side-submenu a:hover,
.complaint-side nav .side-submenu a.active,
.staff-side nav .side-submenu a:hover,
.staff-side nav .side-submenu a.active{
    color:#ffffff!important;
    background:#ffffff0f!important;
    transform:none!important;
}

.sidebar nav .side-submenu a:hover:before,
.sidebar nav .side-submenu a.active:before,
.service-side nav .side-submenu a:hover:before,
.service-side nav .side-submenu a.active:before,
.complaint-side nav .side-submenu a:hover:before,
.complaint-side nav .side-submenu a.active:before,
.staff-side nav .side-submenu a:hover:before,
.staff-side nav .side-submenu a.active:before{
    color:#ffffff!important;
}

.service-side-promo,
.complaint-side-promo,
.staff-side-promo,
.admin-side-promo{
    display:none!important;
}

.service-side,
.complaint-side{
    display:flex!important;
    flex-direction:column!important;
    height:100vh!important;
}

.service-side nav,
.complaint-side nav{
    flex:1 1 auto!important;
}

.service-side-promo,
.complaint-side-promo{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    flex:0 0 auto!important;
    margin:12px 14px 16px!important;
    border:1px solid #78d5cb45!important;
    border-radius:8px!important;
    color:#ffffff!important;
    background:linear-gradient(180deg,#205d52 0%,#173f38 100%)!important;
    box-shadow:0 14px 28px #001c1526!important;
    overflow:hidden!important;
    text-align:center!important;
}

.service-side-promo .promo-image,
.complaint-side-promo .promo-image{
    position:relative!important;
    height:74px!important;
    background:linear-gradient(180deg,transparent 8%,#173f38 94%),url('../images/nalook-hall.png') center 38%/cover!important;
}

.service-side-promo .promo-badge,
.complaint-side-promo .promo-badge{
    position:absolute!important;
    top:9px!important;
    left:10px!important;
    z-index:1!important;
    padding:4px 8px!important;
    border:1px solid #ffffff45!important;
    border-radius:999px!important;
    color:#ffffff!important;
    background:#081f19bf!important;
    font-size:8px!important;
    font-weight:900!important;
    line-height:1!important;
    text-transform:uppercase!important;
}

.service-side-promo .promo-content,
.complaint-side-promo .promo-content{
    padding:12px 12px 14px!important;
}

.service-side-promo strong,
.complaint-side-promo strong{
    display:block!important;
    color:#ffffff!important;
    font-size:13px!important;
    font-weight:900!important;
    line-height:1.25!important;
}

.service-side-promo p,
.complaint-side-promo p{
    margin:7px auto 10px!important;
    max-width:174px!important;
    color:#c8e6df!important;
    font-size:10px!important;
    line-height:1.45!important;
}

.service-side-promo .promo-action,
.complaint-side-promo .promo-action{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:28px!important;
    padding:0 12px!important;
    border-radius:999px!important;
    color:#ffffff!important;
    background:#78d5cb24!important;
    font-size:10px!important;
    font-weight:900!important;
}

.service-side-promo:hover,
.complaint-side-promo:hover{
    border-color:#9ee7dc75!important;
    transform:translateY(-2px)!important;
}

.logout,
.staff-logout,
.admin-logout{
    flex:0 0 auto!important;
    margin-top:auto!important;
    min-height:56px!important;
    border-top:1px solid #ffffff10!important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .service-side,
html[data-theme="dark"] .complaint-side,
html[data-theme="dark"] .admin-side,
html[data-theme="dark"] .staff-side{
    background:linear-gradient(180deg,#0f211c 0%,#0a1713 42%,#050d0a 100%)!important;
}

html[data-theme="dark"] .sidebar .side-brand,
html[data-theme="dark"] .sidebar .side-profile,
html[data-theme="dark"] .sidebar .staff-brand,
html[data-theme="dark"] .sidebar .admin-profile,
html[data-theme="dark"] .service-side .side-brand,
html[data-theme="dark"] .complaint-side .side-brand,
html[data-theme="dark"] .admin-side .side-brand,
html[data-theme="dark"] .staff-side .side-brand{
    background:linear-gradient(180deg,#132c25 0%,#0f211c 100%)!important;
}

html[data-theme="dark"] .sidebar .side-dropdown[open],
html[data-theme="dark"] .service-side .side-dropdown[open],
html[data-theme="dark"] .complaint-side .side-dropdown[open],
html[data-theme="dark"] .staff-side .side-dropdown[open]{
    background:#142d27!important;
}

@media(max-width:900px){
    .portal-main,
    .staff .portal-main{
        margin-left:0!important;
    }
    .sidebar,
    .service-side,
    .complaint-side,
    .admin-side,
    .staff-side{
        width:244px!important;
        max-width:min(244px,82vw)!important;
    }
}

/* Mobile portal layout */
.sidebar-backdrop{
    position:fixed;
    inset:0;
    z-index:998;
    border:0;
    padding:0;
    background:rgba(3,18,14,.48);
    backdrop-filter:blur(2px);
}

.sidebar-backdrop[hidden]{
    display:none!important;
}

.sidebar-close{
    display:none;
}

.menu-toggle{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    padding:0!important;
    border:1px solid #d6e6df!important;
    border-radius:8px!important;
    color:#064b36!important;
    background:#eef8f3!important;
    box-shadow:0 8px 18px rgba(8,116,67,.10)!important;
    font-size:22px!important;
    line-height:1!important;
    cursor:pointer!important;
}

.menu-toggle:hover{
    border-color:#9fcfba!important;
    background:#e3f6ed!important;
}

.user-dot.has-image,
.dropdown-avatar.has-image,
.resident-avatar.has-image,
.side-profile-avatar.has-image{
    overflow:hidden!important;
    padding:0!important;
}

.user-dot.has-image img,
.dropdown-avatar.has-image img,
.resident-avatar.has-image img,
.side-profile-avatar.has-image img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    border-radius:inherit!important;
}

@media(max-width:760px){
    body.sidebar-open{
        overflow:hidden;
        touch-action:none;
    }

    .portal-main,
    .portal-main.service,
    .portal-main.complaint,
    .staff .portal-main,
    .admin .portal-main{
        width:100%!important;
        min-width:0!important;
        margin-left:0!important;
        padding:0 14px 28px!important;
        overflow-x:hidden!important;
    }

    .portal-top,
    .staff .portal-top,
    .admin .portal-top{
        position:fixed!important;
        top:0!important;
        left:0!important;
        right:0!important;
        z-index:80!important;
        display:grid!important;
        grid-template-columns:42px minmax(0,1fr) max-content!important;
        align-items:center!important;
        gap:9px!important;
        min-height:86px!important;
        margin:0!important;
        padding:10px 14px 11px!important;
        border-bottom:1px solid #dbe9e2!important;
        background:rgba(248,252,250,.96)!important;
        box-shadow:0 8px 22px rgba(7,22,45,.08)!important;
        backdrop-filter:blur(14px)!important;
        overflow:visible!important;
    }

    .portal-main,
    .portal-main.service,
    .portal-main.complaint,
    .staff .portal-main,
    .admin .portal-main{
        padding-top:102px!important;
    }

    .portal-title{
        min-width:0!important;
    }

    .portal-top h1,
    .portal-main.service .portal-top h1,
    .portal-main.complaint .portal-top h1,
    .staff .portal-top h1,
    .admin .portal-top h1{
        max-width:100%!important;
        margin:0 0 4px!important;
        color:#07162d!important;
        font-size:19px!important;
        line-height:1.15!important;
        overflow:hidden!important;
        display:-webkit-box!important;
        -webkit-line-clamp:2!important;
        -webkit-box-orient:vertical!important;
    }

    .portal-top p,
    .portal-main.service .portal-top p,
    .portal-main.complaint .portal-top p,
    .staff .portal-top p,
    .admin .portal-top p{
        max-width:100%!important;
        font-size:11px!important;
        line-height:1.3!important;
        overflow:hidden!important;
        display:-webkit-box!important;
        -webkit-line-clamp:2!important;
        -webkit-box-orient:vertical!important;
    }

    .menu-toggle{
        display:grid!important;
        place-items:center!important;
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        padding:0!important;
        border:1px solid #d6e6df!important;
        border-radius:8px!important;
        color:#064b36!important;
        background:#eef8f3!important;
        box-shadow:0 8px 18px rgba(8,116,67,.10)!important;
        font-size:22px!important;
        line-height:1!important;
    }

    .top-actions{
        justify-self:end!important;
        display:flex!important;
        align-items:center!important;
        gap:8px!important;
        min-width:max-content!important;
    }

    .search-box,
    .top-actions .account-trigger-copy,
    .top-actions .account-chevron{
        display:none!important;
    }

    .notification-trigger,
    .account-trigger{
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        padding:0!important;
        border-radius:50%!important;
        background:#eef5ff!important;
    }

    .account-trigger .user-dot,
    .user-dot{
        width:42px!important;
        height:42px!important;
        flex-basis:42px!important;
    }

    .notification-dropdown,
    .account-dropdown{
        position:fixed!important;
        top:94px!important;
        right:12px!important;
        left:12px!important;
        width:auto!important;
        max-width:none!important;
    }

    .notification-list{
        max-height:min(390px,calc(100dvh - 190px))!important;
    }

    .sidebar,
    .service-side,
    .complaint-side,
    .admin-side,
    .staff-side{
        position:fixed!important;
        z-index:999!important;
        top:0!important;
        right:auto!important;
        bottom:0!important;
        left:0!important;
        width:min(292px,86vw)!important;
        max-width:min(292px,86vw)!important;
        height:100dvh!important;
        padding:14px 12px!important;
        border-radius:0 16px 16px 0!important;
        box-shadow:18px 0 45px rgba(0,0,0,.24)!important;
        transform:translateX(calc(-100% - 22px))!important;
        transition:transform .25s ease!important;
        overflow:hidden!important;
    }

    .sidebar-close{
        position:absolute!important;
        top:12px!important;
        right:12px!important;
        z-index:3!important;
        display:grid!important;
        place-items:center!important;
        width:34px!important;
        height:34px!important;
        border:1px solid rgba(255,255,255,.20)!important;
        border-radius:50%!important;
        color:#fff!important;
        background:rgba(255,255,255,.12)!important;
        font-size:24px!important;
        line-height:1!important;
        cursor:pointer!important;
    }

    .sidebar-close:hover{
        background:rgba(255,255,255,.22)!important;
    }

    .sidebar.open,
    .service-side.open,
    .complaint-side.open,
    .admin-side.open,
    .staff-side.open{
        transform:translateX(0)!important;
    }

    .sidebar .side-brand,
    .sidebar .side-profile,
    .service-side .side-brand,
    .complaint-side .side-brand,
    .admin-side .side-brand,
    .staff-side .side-brand{
        margin:0 0 14px!important;
        padding:12px!important;
        border-radius:12px!important;
    }

    .sidebar .side-profile-avatar,
    .service-side .side-profile-avatar,
    .complaint-side .side-profile-avatar,
    .admin-side .side-profile-avatar,
    .staff-side .side-profile-avatar{
        flex-basis:46px!important;
        width:46px!important;
        height:46px!important;
    }

    .sidebar .side-profile-copy strong,
    .service-side .side-profile-copy strong,
    .complaint-side .side-profile-copy strong,
    .admin-side .side-profile-copy strong,
    .staff-side .side-profile-copy strong{
        max-width:188px!important;
        font-size:15px!important;
        line-height:1.2!important;
    }

    .sidebar .side-profile-copy small,
    .service-side .side-profile-copy small,
    .complaint-side .side-profile-copy small,
    .admin-side .side-profile-copy small,
    .staff-side .side-profile-copy small{
        max-width:188px!important;
        font-size:11px!important;
    }

    .sidebar nav,
    .service-side nav,
    .complaint-side nav,
    .admin-side nav,
    .staff-side nav{
        min-height:0!important;
        padding:2px 2px 8px!important;
        overflow-y:auto!important;
    }

    .sidebar nav p,
    .service-side nav p,
    .complaint-side nav p,
    .admin-side nav p,
    .staff-side nav p{
        margin:16px 10px 7px!important;
        font-size:10px!important;
    }

    .sidebar nav a,
    .service-side nav a,
    .complaint-side nav a,
    .admin-side nav a,
    .staff-side nav a{
        min-height:48px!important;
        padding:11px 12px!important;
        border-radius:10px!important;
        font-size:14px!important;
    }

    .service-side-promo,
    .complaint-side-promo{
        margin:12px 2px 2px!important;
    }

    .service-dashboard,
    .service-process-page,
    .service-history-page{
        gap:14px!important;
    }

    .service-dashboard-hero,
    .portal-main.service .service-dashboard-hero,
    .portal-main.complaint .service-dashboard-hero{
        display:grid!important;
        gap:14px!important;
        padding:20px!important;
        border-radius:10px!important;
    }

    .service-dashboard-hero h2{
        font-size:20px!important;
        line-height:1.2!important;
    }

    .service-dashboard-hero p{
        font-size:12px!important;
    }

    .service-dashboard-hero .btn{
        width:100%!important;
        justify-content:center!important;
    }

    .panel,
    .portal-main.service .panel,
    .portal-main.complaint .panel{
        padding:16px!important;
        border-radius:10px!important;
    }

    .panel-title{
        align-items:flex-start!important;
        gap:10px!important;
    }

    .panel-title h2{
        font-size:15px!important;
    }

    .filters,
    .track-form{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:10px!important;
    }

    .filters input,
    .filters select,
    .track-form input{
        width:100%!important;
        min-width:0!important;
    }
}

@media(max-width:390px){
    .portal-top,
    .staff .portal-top,
    .admin .portal-top{
        grid-template-columns:38px minmax(0,1fr) max-content!important;
        gap:7px!important;
        min-height:82px!important;
        padding-inline:10px!important;
    }

    .portal-main,
    .portal-main.service,
    .portal-main.complaint,
    .staff .portal-main,
    .admin .portal-main{
        padding-top:96px!important;
        padding-inline:10px!important;
    }

    .menu-toggle,
    .notification-trigger,
    .account-trigger,
    .account-trigger .user-dot,
    .user-dot{
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
        flex-basis:38px!important;
    }

    .portal-top h1,
    .portal-main.service .portal-top h1,
    .portal-main.complaint .portal-top h1,
    .staff .portal-top h1,
    .admin .portal-top h1{
        font-size:17px!important;
    }

    .portal-top p,
    .portal-main.service .portal-top p,
    .portal-main.complaint .portal-top p,
    .staff .portal-top p,
    .admin .portal-top p{
        font-size:10px!important;
    }
}

/* Compact shared mobile portal sizing */
@media(max-width:760px){
    .portal-main h1,
    .portal-main.service .portal-top h1,
    .portal-main.complaint .portal-top h1,
    .staff .portal-top h1,
    .admin .portal-top h1{
        font-size:20px!important;
        line-height:1.15!important;
    }

    .portal-main h2,
    .service-dashboard-hero h2,
    .panel h2,
    .requests-table-title h2,
    .requests-list-card-v2 h2,
    .complaints-list-card h2{
        font-size:16px!important;
        line-height:1.2!important;
    }

    .portal-main p,
    .portal-main small,
    .panel p,
    .mini-item p,
    .request-main-v2 small,
    .complaint-main small{
        font-size:11px!important;
        line-height:1.45!important;
    }

    .panel,
    .requests-list-card-v2,
    .complaints-list-card,
    .request-preview-card-v2,
    .complaint-preview-card,
    .settings-card,
    .resident-page-card{
        border-radius:9px!important;
    }

    .btn,
    .view-request,
    .request-status-v2,
    .complaint-status,
    .badge{
        font-size:10px!important;
    }
}

@media(max-width:390px){
    .portal-main h1,
    .portal-main.service .portal-top h1,
    .portal-main.complaint .portal-top h1,
    .staff .portal-top h1,
    .admin .portal-top h1{
        font-size:18px!important;
    }

    .portal-main p,
    .portal-main small,
    .panel p,
    .mini-item p,
    .request-main-v2 small,
    .complaint-main small{
        font-size:10px!important;
    }
}

/* Global compact mobile controls and records */
@media(max-width:760px){
    .portal-main,
    .portal-main.service,
    .portal-main.complaint,
    .staff .portal-main,
    .admin .portal-main{
        padding-inline:12px!important;
    }

    .portal-top{
        margin-bottom:12px!important;
    }

    .panel,
    .card,
    .service-card,
    .metric,
    .service-metric-card,
    .settings-card,
    .resident-page-card,
    .request-stat-grid article,
    .complaint-stat-grid article,
    .tracking-list,
    .tracking-detail,
    .notifications-panel{
        padding:13px!important;
        border-radius:8px!important;
    }

    .metrics,
    .card-grid,
    .dashboard-grid,
    .request-stat-grid,
    .complaint-stat-grid,
    .service-mini-grid,
    .tracking-grid{
        gap:10px!important;
    }

    .metric,
    .service-metric-card,
    .request-stat-grid article,
    .complaint-stat-grid article{
        min-height:72px!important;
        gap:10px!important;
    }

    .metric b,
    .service-metric-card b,
    .request-stat-grid b,
    .complaint-stat-grid b{
        font-size:18px!important;
    }

    .metric strong,
    .service-metric-card strong,
    .request-stat-grid strong,
    .complaint-stat-grid strong{
        font-size:10px!important;
    }

    .metric small,
    .metric span,
    .service-metric-card small,
    .request-stat-grid small,
    .complaint-stat-grid small{
        font-size:9px!important;
    }

    .request-stat-grid article>span,
    .complaint-stat-grid article>span,
    .stat-icon,
    .service-metric-icon,
    .metric-icon{
        flex-basis:38px!important;
        width:38px!important;
        height:38px!important;
        border-radius:10px!important;
        font-size:16px!important;
    }

    body:not(.public) input,
    body:not(.public) select,
    body:not(.public) textarea,
    .filters input,
    .filters select,
    .track-form input,
    .form-panel input,
    .form-panel select,
    .form-panel textarea{
        min-height:38px!important;
        padding:9px 10px!important;
        border-radius:7px!important;
        font-size:10px!important;
    }

    textarea,
    .form-panel textarea{
        min-height:86px!important;
    }

    .btn,
    button,
    .action,
    .view-request{
        min-height:36px!important;
        border-radius:7px!important;
        font-size:10px!important;
    }

    .table-wrap,
    .requests-table-wrap,
    .staff-table-wrap{
        border-radius:8px!important;
    }

    table,
    .requests-table,
    .staff-table{
        font-size:10px!important;
    }

    th,
    td,
    .requests-table th,
    .requests-table td,
    .staff-table th,
    .staff-table td{
        padding:9px 8px!important;
        font-size:10px!important;
    }

    .badge,
    .request-status-v2,
    .complaint-status{
        min-height:0!important;
        padding:5px 8px!important;
        border-radius:999px!important;
        font-size:8px!important;
        line-height:1.2!important;
    }
}

@media(max-width:390px){
    .portal-main,
    .portal-main.service,
    .portal-main.complaint,
    .staff .portal-main,
    .admin .portal-main{
        padding-inline:10px!important;
    }

    .panel,
    .card,
    .service-card,
    .metric,
    .service-metric-card,
    .settings-card,
    .resident-page-card,
    .request-stat-grid article,
    .complaint-stat-grid article{
        padding:11px!important;
    }

    th,
    td,
    .requests-table th,
    .requests-table td,
    .staff-table th,
    .staff-table td{
        padding:8px 7px!important;
        font-size:9px!important;
    }
}

/* Resident sidebar profile sizing */
.service-side .side-profile,
.complaint-side .side-profile{
    min-height:168px!important;
    margin:14px 14px 10px!important;
    width:calc(100% - 28px)!important;
    padding:18px 14px!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.08)!important;
    gap:11px!important;
}

.service-side .side-profile-avatar,
.complaint-side .side-profile-avatar{
    flex:0 0 74px!important;
    width:74px!important;
    height:74px!important;
    padding:4px!important;
    border:2px solid #dffced!important;
    color:#00583d!important;
    background:#e9fff4!important;
    font-size:24px!important;
    font-weight:900!important;
    box-shadow:0 10px 22px rgba(0,28,21,.22)!important;
}

.service-side .side-profile-copy,
.complaint-side .side-profile-copy{
    gap:8px!important;
}

.service-side .side-profile-copy strong,
.complaint-side .side-profile-copy strong{
    max-width:190px!important;
    font-size:15px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

.service-side .side-profile-copy small,
.complaint-side .side-profile-copy small{
    min-height:27px!important;
    max-width:190px!important;
    padding:0 16px!important;
    font-size:11px!important;
}

@media(max-width:760px){
    .service-side .side-profile,
    .complaint-side .side-profile{
        min-height:158px!important;
        margin:8px 8px 12px!important;
        width:calc(100% - 16px)!important;
        padding:16px 12px!important;
        border-radius:12px!important;
    }

    .service-side .side-profile-avatar,
    .complaint-side .side-profile-avatar{
        flex-basis:70px!important;
        width:70px!important;
        height:70px!important;
        font-size:23px!important;
    }

    .service-side .side-profile-copy strong,
    .complaint-side .side-profile-copy strong{
        max-width:210px!important;
        font-size:15px!important;
    }

    .service-side .side-profile-copy small,
    .complaint-side .side-profile-copy small{
        max-width:210px!important;
        min-height:28px!important;
        font-size:11px!important;
    }
}

/* Compact mobile sidebar */
@media(max-width:760px){
    .sidebar,
    .service-side,
    .complaint-side,
    .admin-side,
    .staff-side{
        width:min(272px,82vw)!important;
        max-width:min(272px,82vw)!important;
        padding:10px 9px!important;
        border-radius:0 12px 12px 0!important;
    }

    .sidebar-close{
        top:8px!important;
        right:8px!important;
        width:28px!important;
        height:28px!important;
        font-size:20px!important;
    }

    .sidebar .side-brand,
    .sidebar .side-profile,
    .service-side .side-brand,
    .complaint-side .side-brand,
    .admin-side .side-brand,
    .staff-side .side-brand,
    .service-side .side-profile,
    .complaint-side .side-profile{
        min-height:128px!important;
        margin:8px 8px 10px!important;
        width:calc(100% - 16px)!important;
        padding:13px 10px!important;
        gap:8px!important;
        border-radius:10px!important;
    }

    .sidebar .side-profile-avatar,
    .sidebar .staff-brand-seal,
    .sidebar .seal,
    .service-side .side-profile-avatar,
    .complaint-side .side-profile-avatar,
    .admin-side .side-profile-avatar,
    .staff-side .side-profile-avatar,
    .staff-side .staff-brand-seal{
        flex-basis:58px!important;
        width:58px!important;
        height:58px!important;
        padding:4px!important;
        font-size:19px!important;
    }

    .sidebar .side-profile-copy,
    .service-side .side-profile-copy,
    .complaint-side .side-profile-copy,
    .admin-side .side-profile-copy,
    .staff-side .side-profile-copy{
        gap:6px!important;
    }

    .sidebar .side-profile-copy strong,
    .service-side .side-profile-copy strong,
    .complaint-side .side-profile-copy strong,
    .admin-side .side-profile-copy strong,
    .staff-side .side-profile-copy strong{
        max-width:196px!important;
        font-size:13px!important;
        line-height:1.18!important;
    }

    .sidebar .side-profile-copy small,
    .service-side .side-profile-copy small,
    .complaint-side .side-profile-copy small,
    .admin-side .side-profile-copy small,
    .staff-side .side-profile-copy small{
        min-height:24px!important;
        max-width:196px!important;
        padding:0 12px!important;
        font-size:9px!important;
        line-height:24px!important;
    }

    .sidebar nav,
    .service-side nav,
    .complaint-side nav,
    .admin-side nav,
    .staff-side nav{
        padding:0 3px 8px!important;
    }

    .sidebar nav p,
    .service-side nav p,
    .complaint-side nav p,
    .admin-side nav p,
    .staff-side nav p{
        margin:13px 8px 6px!important;
        font-size:8px!important;
        line-height:1.2!important;
    }

    .sidebar nav a,
    .sidebar nav summary.side-link,
    .service-side nav a,
    .service-side nav summary.side-link,
    .complaint-side nav a,
    .complaint-side nav summary.side-link,
    .admin-side nav a,
    .admin-side nav summary.side-link,
    .staff-side nav a,
    .staff-side nav summary.side-link{
        min-height:40px!important;
        margin:2px 0!important;
        padding:8px 10px!important;
        gap:9px!important;
        border-radius:8px!important;
        font-size:12px!important;
        line-height:1.2!important;
    }

    .sidebar .side-icon,
    .service-side .side-icon,
    .complaint-side .side-icon,
    .admin-side .side-icon,
    .staff-side .side-icon{
        flex-basis:22px!important;
        width:22px!important;
        height:22px!important;
        font-size:13px!important;
    }

    .service-side-promo,
    .complaint-side-promo{
        margin:9px 4px 2px!important;
        border-radius:8px!important;
    }

    .service-side-promo .promo-image,
    .complaint-side-promo .promo-image{
        height:58px!important;
    }

    .service-side-promo .promo-content,
    .complaint-side-promo .promo-content{
        padding:9px 8px 10px!important;
    }

    .service-side-promo strong,
    .complaint-side-promo strong{
        font-size:11px!important;
        line-height:1.25!important;
    }

    .service-side-promo p,
    .complaint-side-promo p{
        margin:5px 0 8px!important;
        font-size:8px!important;
        line-height:1.35!important;
    }

    .service-side-promo .promo-action,
    .complaint-side-promo .promo-action{
        min-height:28px!important;
        padding:0 13px!important;
        font-size:9px!important;
    }
}

@media(max-width:390px){
    .sidebar,
    .service-side,
    .complaint-side,
    .admin-side,
    .staff-side{
        width:min(258px,82vw)!important;
        max-width:min(258px,82vw)!important;
    }

    .sidebar .side-brand,
    .sidebar .side-profile,
    .service-side .side-brand,
    .complaint-side .side-brand,
    .admin-side .side-brand,
    .staff-side .side-brand,
    .service-side .side-profile,
    .complaint-side .side-profile{
        min-height:118px!important;
        padding:11px 9px!important;
    }

    .sidebar .side-profile-avatar,
    .sidebar .staff-brand-seal,
    .sidebar .seal,
    .service-side .side-profile-avatar,
    .complaint-side .side-profile-avatar,
    .admin-side .side-profile-avatar,
    .staff-side .side-profile-avatar,
    .staff-side .staff-brand-seal{
        flex-basis:52px!important;
        width:52px!important;
        height:52px!important;
        font-size:17px!important;
    }

    .sidebar nav a,
    .sidebar nav summary.side-link,
    .service-side nav a,
    .service-side nav summary.side-link,
    .complaint-side nav a,
    .complaint-side nav summary.side-link,
    .admin-side nav a,
    .admin-side nav summary.side-link,
    .staff-side nav a,
    .staff-side nav summary.side-link{
        min-height:38px!important;
        padding:7px 9px!important;
        font-size:11px!important;
    }
}

/* Portal header: keep the page title directly beside the menu button. */
.portal-top,
.staff .portal-top,
.admin .portal-top{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) max-content!important;
    align-items:center!important;
    justify-content:normal!important;
    gap:18px!important;
}

.portal-title{
    min-width:0!important;
    justify-self:start!important;
    text-align:left!important;
}

.portal-title h1,
.portal-title p{
    text-align:left!important;
}

.top-actions{
    justify-self:end!important;
}

@media(max-width:760px){
    .portal-top,
    .staff .portal-top,
    .admin .portal-top{
        grid-template-columns:42px minmax(0,1fr) max-content!important;
        gap:9px!important;
    }
}

@media(max-width:390px){
    .portal-top,
    .staff .portal-top,
    .admin .portal-top{
        grid-template-columns:38px minmax(0,1fr) max-content!important;
        gap:7px!important;
    }
}

/* ========================================================================== 
   Admin portal light/dark appearance refinement
   Keeps the Barangay 5-tone green palette readable in both modes.
   ========================================================================== */
body.admin{
    min-height:100vh;
    color:var(--admin-text);
    background:
        radial-gradient(circle at 86% 10%, rgba(25,122,71,.10), transparent 34%),
        radial-gradient(circle at 10% 0%, rgba(56,138,30,.08), transparent 28%),
        linear-gradient(180deg,#f7fbf8 0%,#edf6f1 100%)!important;
}

body.admin .portal-main.admin{
    background:transparent!important;
}

body.admin .portal-top{
    position:sticky;
    top:0;
    z-index:20;
    margin-inline:-30px;
    padding-inline:30px;
    background:rgba(247,251,248,.88)!important;
    border-color:#cfe4d8!important;
    backdrop-filter:blur(16px);
    box-shadow:0 1px 0 rgba(18,87,50,.04);
}

body.admin .portal-top h1,
body.admin .panel-title h2,
body.admin .admin-hero h2,
body.admin .admin-stat-strip b,
body.admin .admin-summary-item strong,
body.admin .admin-module-card strong,
body.admin .admin-chart-row span{
    color:#092318!important;
}

body.admin .portal-top p,
body.admin .admin-hero p,
body.admin .admin-stat-strip small,
body.admin .admin-summary-item small,
body.admin .admin-module-card small{
    color:#4d685b!important;
}

body.admin .menu-toggle,
body.admin .theme-toggle-btn,
body.admin .notification-btn,
body.admin .account-trigger,
body.admin .search-box{
    border-color:#bdd8ca!important;
    background:rgba(255,255,255,.86)!important;
    color:#10342e!important;
    box-shadow:0 8px 22px rgba(20,60,45,.07)!important;
}

body.admin .search-box::placeholder{
    color:#72897d!important;
}

body.admin .metrics .metric,
body.admin .metrics .admin-metric{
    color:#fff!important;
    border:1px solid rgba(255,255,255,.34)!important;
    box-shadow:0 18px 34px rgba(20,60,45,.16)!important;
}

body.admin .metrics .metric:nth-child(1){
    background:linear-gradient(135deg,#125732 0%,#197a47 58%,#2aa566 100%)!important;
}

body.admin .metrics .metric:nth-child(2){
    background:linear-gradient(135deg,#27680f 0%,#388a1e 58%,#54b832 100%)!important;
}

body.admin .metrics .metric:nth-child(3){
    background:linear-gradient(135deg,#133c33 0%,#1b4e45 58%,#2f8068 100%)!important;
}

body.admin .metrics .metric:nth-child(4){
    background:linear-gradient(135deg,#294635 0%,#3c5d4b 58%,#638a72 100%)!important;
}

body.admin .metrics .metric small,
body.admin .metrics .metric span,
body.admin .metrics .metric b{
    color:#fff!important;
}

body.admin .metrics .metric small{
    opacity:.95;
}

body.admin .metrics .metric span{
    opacity:.86;
}

body.admin .admin-hero,
body.admin .admin-stat-strip article,
body.admin .panel,
body.admin .admin-summary-item,
body.admin .admin-module-card,
body.admin .admin-toolbar,
body.admin .table-wrap,
body.admin .admin-check,
body.admin .admin-page-note,
body.admin .admin-payment-card,
body.admin .admin-payment-preview{
    border-color:#cfe4d8!important;
    background:rgba(255,255,255,.92)!important;
    box-shadow:0 16px 36px rgba(20,60,45,.08)!important;
}

body.admin .admin-hero{
    background:linear-gradient(115deg,#edf8f2 0%,#e4f2ea 52%,#f8fcfa 100%)!important;
}

body.admin .admin-hero:after{
    background:linear-gradient(135deg,rgba(25,122,71,.16),rgba(56,138,30,.22))!important;
}

body.admin .admin-summary-item,
body.admin .admin-module-card{
    background:#f6fbf8!important;
}

body.admin .admin-summary-item > span,
body.admin .admin-module-card > span,
body.admin .admin-stat-strip article > span{
    color:#197a47!important;
    background:#e3f5eb!important;
}

body.admin .admin-chart-row i{
    background:#e0ece5!important;
}

body.admin .admin-chart-row i b{
    background:linear-gradient(90deg,#197a47,#32b765)!important;
}

body.admin .btn.light{
    color:#11613a!important;
    border-color:#a8d4bd!important;
    background:#fff!important;
}

body.admin .btn.light:hover{
    color:#fff!important;
    background:linear-gradient(110deg,#197a47,#388a1e)!important;
}

body.admin table th{
    color:#3c5d4b!important;
    background:#eaf4ef!important;
}

body.admin table td{
    border-color:#e1eee7!important;
    color:#0e2219!important;
}

html[data-theme="dark"] body.admin{
    color:#eef8f3!important;
    background:
        radial-gradient(circle at 18% -12%,rgba(60,212,133,.12) 0 260px,transparent 520px),
        radial-gradient(circle at 86% 6%,rgba(27,78,69,.28) 0 300px,transparent 560px),
        linear-gradient(180deg,#06110d 0%,#0b1915 100%)!important;
}

html[data-theme="dark"] body.admin .portal-top{
    border-color:#244739!important;
    background:rgba(6,17,13,.90)!important;
    box-shadow:0 1px 0 rgba(60,212,133,.08)!important;
}

html[data-theme="dark"] body.admin .portal-top h1,
html[data-theme="dark"] body.admin .panel-title h2,
html[data-theme="dark"] body.admin .admin-hero h2,
html[data-theme="dark"] body.admin .admin-stat-strip b,
html[data-theme="dark"] body.admin .admin-summary-item strong,
html[data-theme="dark"] body.admin .admin-module-card strong,
html[data-theme="dark"] body.admin .admin-chart-row span,
html[data-theme="dark"] body.admin .side-profile-copy strong{
    color:#f2fff8!important;
}

html[data-theme="dark"] body.admin .portal-top p,
html[data-theme="dark"] body.admin .admin-hero p,
html[data-theme="dark"] body.admin .admin-stat-strip small,
html[data-theme="dark"] body.admin .admin-summary-item small,
html[data-theme="dark"] body.admin .admin-module-card small,
html[data-theme="dark"] body.admin .side-profile-copy small{
    color:#a9c8ba!important;
}

html[data-theme="dark"] body.admin .menu-toggle,
html[data-theme="dark"] body.admin .theme-toggle-btn,
html[data-theme="dark"] body.admin .notification-btn,
html[data-theme="dark"] body.admin .account-trigger,
html[data-theme="dark"] body.admin .search-box,
html[data-theme="dark"] body.admin input,
html[data-theme="dark"] body.admin select,
html[data-theme="dark"] body.admin textarea{
    color:#eef8f3!important;
    border-color:#2a4d3e!important;
    background:#0b1a14!important;
    box-shadow:none!important;
}

html[data-theme="dark"] body.admin .search-box::placeholder,
html[data-theme="dark"] body.admin input::placeholder,
html[data-theme="dark"] body.admin textarea::placeholder{
    color:#7fa092!important;
}

html[data-theme="dark"] body.admin .admin-hero,
html[data-theme="dark"] body.admin .admin-stat-strip article,
html[data-theme="dark"] body.admin .panel,
html[data-theme="dark"] body.admin .admin-summary-item,
html[data-theme="dark"] body.admin .admin-module-card,
html[data-theme="dark"] body.admin .admin-toolbar,
html[data-theme="dark"] body.admin .table-wrap,
html[data-theme="dark"] body.admin .admin-check,
html[data-theme="dark"] body.admin .admin-page-note,
html[data-theme="dark"] body.admin .admin-payment-card,
html[data-theme="dark"] body.admin .admin-payment-preview{
    color:#eef8f3!important;
    border-color:#244739!important;
    background:linear-gradient(180deg,#12281f 0%,#0d1f18 100%)!important;
    box-shadow:0 18px 46px rgba(0,0,0,.32)!important;
}

html[data-theme="dark"] body.admin .admin-hero{
    background:linear-gradient(115deg,#10271f 0%,#0c2018 55%,#102a20 100%)!important;
}

html[data-theme="dark"] body.admin .metrics .metric,
html[data-theme="dark"] body.admin .metrics .admin-metric{
    border-color:rgba(76,217,136,.22)!important;
    box-shadow:0 18px 44px rgba(0,0,0,.36)!important;
}

html[data-theme="dark"] body.admin .metrics .metric:nth-child(1){
    background:linear-gradient(135deg,#0e4b2a 0%,#137240 58%,#22ba6e 100%)!important;
}

html[data-theme="dark"] body.admin .metrics .metric:nth-child(2){
    background:linear-gradient(135deg,#1b560b 0%,#2f7f19 58%,#4cd988 100%)!important;
}

html[data-theme="dark"] body.admin .metrics .metric:nth-child(3){
    background:linear-gradient(135deg,#0f352d 0%,#145346 58%,#36a67e 100%)!important;
}

html[data-theme="dark"] body.admin .metrics .metric:nth-child(4){
    background:linear-gradient(135deg,#1e392b 0%,#2f5140 58%,#59846b 100%)!important;
}

html[data-theme="dark"] body.admin .admin-summary-item > span,
html[data-theme="dark"] body.admin .admin-module-card > span,
html[data-theme="dark"] body.admin .admin-stat-strip article > span{
    color:#3cd485!important;
    background:#123b2a!important;
}

html[data-theme="dark"] body.admin .admin-chart-row i{
    background:#142e23!important;
}

html[data-theme="dark"] body.admin .admin-chart-row i b{
    background:linear-gradient(90deg,#2dcc79,#4cd988)!important;
}

html[data-theme="dark"] body.admin .admin-chart-row strong,
html[data-theme="dark"] body.admin .panel-title a{
    color:#4cd988!important;
}

html[data-theme="dark"] body.admin .btn.light{
    color:#35c979!important;
    border-color:#2f6d4c!important;
    background:#0c1e17!important;
}

html[data-theme="dark"] body.admin .btn.light:hover{
    color:#06110d!important;
    background:#4cd988!important;
}

html[data-theme="dark"] body.admin table th{
    color:#a9c8ba!important;
    background:#10241c!important;
}

html[data-theme="dark"] body.admin table td{
    color:#eef8f3!important;
    border-color:#1f3d31!important;
}

html[data-theme="dark"] body.admin .badge,
html[data-theme="dark"] body.admin .status-pill{
    border-color:#2f6d4c!important;
}

/* ========================================================================== 
   System-wide appearance harmonizer
   Admin, Staff, and Resident modules: sidebar, fields, buttons, cards, tables,
   and responsive light/dark behavior.
   ========================================================================== */
:root{
    --ui-green-950:#06110d;
    --ui-green-900:#0d211a;
    --ui-green-850:#10281f;
    --ui-green-800:#17382d;
    --ui-green-700:#1b4e45;
    --ui-green-600:#197a47;
    --ui-green-500:#269557;
    --ui-green-400:#35c979;
    --ui-green-300:#4cd988;
    --ui-olive-700:#3c5d4b;
    --ui-olive-600:#50675b;
    --ui-line:#cfe4d8;
    --ui-line-soft:#e4f0e9;
    --ui-bg:#f3f8f5;
    --ui-surface:#ffffff;
    --ui-surface-soft:#f6fbf8;
    --ui-text:#0b2218;
    --ui-muted:#526b5f;
    --ui-shadow:0 16px 36px rgba(20,60,45,.08);
}

html[data-theme="dark"]{
    --ui-line:#244739;
    --ui-line-soft:#1c392e;
    --ui-bg:#07130f;
    --ui-surface:#11251d;
    --ui-surface-soft:#0d1f18;
    --ui-text:#eef8f3;
    --ui-muted:#a7c4b7;
    --ui-shadow:0 18px 46px rgba(0,0,0,.35);
}

body.portal,
body.admin,
body.staff{
    color:var(--ui-text)!important;
    background:
        radial-gradient(circle at 86% 6%,rgba(25,122,71,.09),transparent 34%),
        linear-gradient(180deg,#f7fbf8 0%,#edf6f1 100%)!important;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
    text-rendering:optimizeLegibility;
}

html[data-theme="dark"] body.portal,
html[data-theme="dark"] body.admin,
html[data-theme="dark"] body.staff{
    background:
        radial-gradient(circle at 18% -12%,rgba(60,212,133,.11) 0 260px,transparent 520px),
        radial-gradient(circle at 92% 0%,rgba(27,78,69,.24) 0 300px,transparent 580px),
        linear-gradient(180deg,#06110d 0%,#0b1915 100%)!important;
}

/* Unified sidebars for admin, staff, and resident service/complaint portals. */
.sidebar,
.service-side,
.complaint-side,
.admin-side,
.staff-side{
    width:260px!important;
    padding:18px 12px!important;
    color:#eef8f3!important;
    background:
        radial-gradient(circle at 20% 10%,rgba(76,217,136,.18),transparent 30%),
        linear-gradient(180deg,#1d5d4c 0%,#175042 38%,#102d25 100%)!important;
    border-right:1px solid rgba(255,255,255,.12)!important;
    box-shadow:10px 0 34px rgba(6,17,13,.18)!important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .service-side,
html[data-theme="dark"] .complaint-side,
html[data-theme="dark"] .admin-side,
html[data-theme="dark"] .staff-side{
    background:
        radial-gradient(circle at 18% 8%,rgba(60,212,133,.13),transparent 30%),
        linear-gradient(180deg,#102a22 0%,#0a1a14 48%,#050d0a 100%)!important;
    border-color:#1f3d31!important;
    box-shadow:10px 0 34px rgba(0,0,0,.38)!important;
}

.sidebar .side-brand,
.sidebar .side-profile,
.sidebar .staff-brand,
.sidebar .admin-profile,
.service-side .side-brand,
.complaint-side .side-brand,
.admin-side .side-brand,
.staff-side .side-brand{
    min-height:132px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    margin:0 4px 18px!important;
    padding:14px 10px!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:16px!important;
    color:#fff!important;
    background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
    text-align:center!important;
}

html[data-theme="dark"] .sidebar .side-brand,
html[data-theme="dark"] .sidebar .side-profile,
html[data-theme="dark"] .sidebar .staff-brand,
html[data-theme="dark"] .sidebar .admin-profile,
html[data-theme="dark"] .service-side .side-brand,
html[data-theme="dark"] .complaint-side .side-brand,
html[data-theme="dark"] .admin-side .side-brand,
html[data-theme="dark"] .staff-side .side-brand{
    border-color:#274d3d!important;
    background:linear-gradient(180deg,#132f25,#0d211a)!important;
}

.sidebar .side-profile-avatar,
.sidebar .staff-brand-seal,
.sidebar .seal,
.service-side .side-profile-avatar,
.complaint-side .side-profile-avatar,
.admin-side .side-profile-avatar,
.staff-side .side-profile-avatar,
.staff-side .staff-brand-seal{
    flex:0 0 76px!important;
    width:76px!important;
    height:76px!important;
    border:3px solid rgba(255,255,255,.85)!important;
    border-radius:50%!important;
    background:#fff!important;
    color:var(--ui-green-600)!important;
    box-shadow:0 12px 26px rgba(0,0,0,.20)!important;
    overflow:hidden!important;
}

.sidebar .side-profile-avatar img,
.sidebar .staff-brand-seal img,
.sidebar .seal img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
}

.sidebar .side-profile-copy,
.sidebar .side-profile-copy strong,
.sidebar .side-profile-copy small,
.service-side .side-profile-copy,
.complaint-side .side-profile-copy,
.admin-side .side-profile-copy,
.staff-side .side-profile-copy{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    text-align:center!important;
}

.sidebar .side-profile-copy strong,
.service-side .side-profile-copy strong,
.complaint-side .side-profile-copy strong,
.admin-side .side-profile-copy strong,
.staff-side .side-profile-copy strong{
    color:#fff!important;
    font-size:18px!important;
    line-height:1.1!important;
    font-weight:900!important;
    text-shadow:0 2px 8px rgba(0,0,0,.18)!important;
    white-space:normal!important;
}

.sidebar .side-profile-copy small,
.service-side .side-profile-copy small,
.complaint-side .side-profile-copy small,
.admin-side .side-profile-copy small,
.staff-side .side-profile-copy small{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:24px!important;
    margin-top:8px!important;
    padding:4px 15px!important;
    border-radius:999px!important;
    color:#10301f!important;
    background:#e4ca83!important;
    font-size:11px!important;
    font-weight:900!important;
    white-space:nowrap!important;
}

.sidebar nav,
.service-side nav,
.complaint-side nav,
.admin-side nav,
.staff-side nav{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    gap:3px!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:8px 2px 12px!important;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.28) transparent;
}

.sidebar nav::-webkit-scrollbar{width:6px}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.26);border-radius:999px}

.sidebar nav p,
.service-side nav p,
.complaint-side nav p,
.admin-side nav p,
.staff-side nav p{
    margin:16px 10px 6px!important;
    color:#cce5d8!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
}

.sidebar nav a,
.sidebar nav summary.side-link,
.service-side nav a,
.service-side nav summary.side-link,
.complaint-side nav a,
.complaint-side nav summary.side-link,
.admin-side nav a,
.admin-side nav summary.side-link,
.staff-side nav a,
.staff-side nav summary.side-link{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    min-height:44px!important;
    margin:2px 0!important;
    padding:11px 12px!important;
    border:1px solid transparent!important;
    border-radius:11px!important;
    color:#e9fff4!important;
    background:transparent!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1.2!important;
    text-decoration:none!important;
    transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s!important;
}

.sidebar nav a:hover,
.sidebar nav a.active,
.sidebar nav summary.side-link:hover,
.sidebar nav summary.side-link.active,
.service-side nav a:hover,
.service-side nav a.active,
.complaint-side nav a:hover,
.complaint-side nav a.active,
.admin-side nav a:hover,
.admin-side nav a.active,
.staff-side nav a:hover,
.staff-side nav a.active,
.staff-side nav summary.side-link:hover,
.staff-side nav summary.side-link.active{
    color:#fff!important;
    border-color:rgba(255,255,255,.18)!important;
    background:linear-gradient(110deg,#197a47,#388a1e)!important;
    box-shadow:0 12px 24px rgba(6,17,13,.22)!important;
    transform:translateX(3px)!important;
}

.sidebar nav a.active:before,
.sidebar nav summary.side-link.active:before{
    content:""!important;
    position:absolute!important;
    left:-12px!important;
    top:9px!important;
    bottom:9px!important;
    width:4px!important;
    border-radius:999px!important;
    background:#ff4f7b!important;
}

.sidebar .side-icon,
.service-side .side-icon,
.complaint-side .side-icon,
.admin-side .side-icon,
.staff-side .side-icon{
    display:grid!important;
    place-items:center!important;
    flex:0 0 24px!important;
    width:24px!important;
    height:24px!important;
    color:#ecfff6!important;
    font-size:15px!important;
    opacity:.98!important;
}

.sidebar .side-label,
.service-side .side-label,
.complaint-side .side-label,
.admin-side .side-label,
.staff-side .side-label{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}

.sidebar .side-dropdown,
.staff-side .side-dropdown{
    margin:2px 0!important;
    border-radius:13px!important;
}

.sidebar .side-dropdown[open],
.staff-side .side-dropdown[open]{
    border:1px solid rgba(255,255,255,.12)!important;
    background:rgba(255,255,255,.07)!important;
}

.sidebar nav .side-submenu,
.staff-side nav .side-submenu{
    display:grid!important;
    gap:4px!important;
    padding:4px 6px 8px 42px!important;
}

.sidebar nav .side-submenu a,
.staff-side nav .side-submenu a{
    min-height:34px!important;
    padding:8px 10px!important;
    border-radius:9px!important;
    color:#d7f5e5!important;
    font-size:12px!important;
}

.sidebar nav .side-submenu a:hover,
.sidebar nav .side-submenu a.active,
.staff-side nav .side-submenu a:hover,
.staff-side nav .side-submenu a.active{
    background:rgba(76,217,136,.18)!important;
    color:#fff!important;
    transform:none!important;
    box-shadow:none!important;
}

.admin-side-promo,
.staff-side-promo,
.service-side-promo,
.complaint-side-promo,
.admin-logout,
.logout{
    color:#f0fff7!important;
    border-color:rgba(255,255,255,.14)!important;
}

.admin-side-promo,
.staff-side-promo,
.service-side-promo,
.complaint-side-promo{
    overflow:hidden!important;
    border-radius:16px!important;
    background:linear-gradient(145deg,rgba(15,48,37,.95),rgba(38,149,87,.72))!important;
    box-shadow:0 16px 30px rgba(0,0,0,.24)!important;
}

/* Shared layout, cards, typography, fields, and actions. */
.portal-main,
.portal-main.admin,
.portal-main.staff,
.portal-main.service,
.portal-main.complaint{
    min-height:100vh!important;
    color:var(--ui-text)!important;
}

.portal-top,
.admin .portal-top,
.staff .portal-top{
    min-height:88px!important;
    border-color:var(--ui-line)!important;
    background:rgba(247,251,248,.88)!important;
    backdrop-filter:blur(16px)!important;
}

html[data-theme="dark"] .portal-top,
html[data-theme="dark"] .admin .portal-top,
html[data-theme="dark"] .staff .portal-top{
    background:rgba(6,17,13,.90)!important;
    border-color:var(--ui-line)!important;
}

.portal-title h1,
.panel-title h2,
.panel h2,
.settings-card h2,
.profile-page-title h1,
.request-main-v2 strong,
.complaint-preview-title-row h2,
.history-record-main strong,
.process-hero h2,
.service-dashboard-hero h2,
.complaint-dashboard-hero h2,
.tracking-hero h2,
.admin-hero h2{
    color:var(--ui-text)!important;
    letter-spacing:-.025em!important;
}

.portal-title p,
.panel p,
.settings-card p,
.profile-page-title p,
.request-main-v2 small,
.complaint-preview-title-row p,
.history-record-main small,
.process-hero p,
.service-dashboard-hero p,
.complaint-dashboard-hero p,
.tracking-hero p,
.admin-hero p,
.muted-text{
    color:var(--ui-muted)!important;
}

.panel,
.settings-card,
.settings-nav,
.profile-summary-card,
.profile-form-card,
.profile-page-title,
.request-workspace,
.request-stepper,
.summary-card,
.help-card,
.complaint-stepper,
.complaint-wizard,
.guide-card,
.requests-table-card,
.requests-aside article,
.request-stat-grid article,
.requests-list-card-v2,
.request-preview-card-v2,
.complaint-stat-grid article,
.complaints-list-card,
.complaint-preview-card,
.tracking-hero,
.tracking-filters,
.tracking-list,
.tracking-detail,
.quick-other-services,
.portal-choice,
.quick-welcome-status,
.notifications-panel,
.service-mini-grid article,
.request-details-dialog,
.complaint-details-dialog,
.reference-card,
.dialog-info-card,
.dialog-timeline-card,
.admin-card,
.staff-card,
.staff-settings-card,
.staff-record-detail-main,
.resident-page-card,
.resident-page-hero,
.process-steps-grid article,
.history-summary-grid article,
.process-service-list a,
.history-record,
.complaint-process-page .process-steps-grid article,
.complaint-history-page .history-summary-grid article,
.admin-stat-strip article,
.admin-summary-item,
.admin-module-card{
    color:var(--ui-text)!important;
    border:1px solid var(--ui-line)!important;
    background:rgba(255,255,255,.92)!important;
    box-shadow:var(--ui-shadow)!important;
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .settings-nav,
html[data-theme="dark"] .profile-summary-card,
html[data-theme="dark"] .profile-form-card,
html[data-theme="dark"] .profile-page-title,
html[data-theme="dark"] .request-workspace,
html[data-theme="dark"] .request-stepper,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .help-card,
html[data-theme="dark"] .complaint-stepper,
html[data-theme="dark"] .complaint-wizard,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .requests-table-card,
html[data-theme="dark"] .requests-aside article,
html[data-theme="dark"] .request-stat-grid article,
html[data-theme="dark"] .requests-list-card-v2,
html[data-theme="dark"] .request-preview-card-v2,
html[data-theme="dark"] .complaint-stat-grid article,
html[data-theme="dark"] .complaints-list-card,
html[data-theme="dark"] .complaint-preview-card,
html[data-theme="dark"] .tracking-hero,
html[data-theme="dark"] .tracking-filters,
html[data-theme="dark"] .tracking-list,
html[data-theme="dark"] .tracking-detail,
html[data-theme="dark"] .quick-other-services,
html[data-theme="dark"] .portal-choice,
html[data-theme="dark"] .quick-welcome-status,
html[data-theme="dark"] .notifications-panel,
html[data-theme="dark"] .service-mini-grid article,
html[data-theme="dark"] .request-details-dialog,
html[data-theme="dark"] .complaint-details-dialog,
html[data-theme="dark"] .reference-card,
html[data-theme="dark"] .dialog-info-card,
html[data-theme="dark"] .dialog-timeline-card,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .staff-card,
html[data-theme="dark"] .staff-settings-card,
html[data-theme="dark"] .staff-record-detail-main,
html[data-theme="dark"] .resident-page-card,
html[data-theme="dark"] .resident-page-hero,
html[data-theme="dark"] .process-steps-grid article,
html[data-theme="dark"] .history-summary-grid article,
html[data-theme="dark"] .process-service-list a,
html[data-theme="dark"] .history-record,
html[data-theme="dark"] .complaint-process-page .process-steps-grid article,
html[data-theme="dark"] .complaint-history-page .history-summary-grid article,
html[data-theme="dark"] .admin-stat-strip article,
html[data-theme="dark"] .admin-summary-item,
html[data-theme="dark"] .admin-module-card{
    background:linear-gradient(180deg,#12281f 0%,#0d1f18 100%)!important;
    border-color:var(--ui-line)!important;
}

input,
select,
textarea,
.search-box,
.filters input,
.filters select,
.track-form input,
.history-toolbar input,
.history-toolbar select{
    min-height:42px;
    color:var(--ui-text)!important;
    border:1px solid var(--ui-line)!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 8px 20px rgba(20,60,45,.04)!important;
    outline:none!important;
}

input::placeholder,
textarea::placeholder,
.search-box::placeholder{
    color:#788f84!important;
}

input:focus,
select:focus,
textarea:focus,
.search-box:focus{
    border-color:var(--ui-green-500)!important;
    box-shadow:0 0 0 4px rgba(38,149,87,.16)!important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .filters input,
html[data-theme="dark"] .filters select,
html[data-theme="dark"] .track-form input,
html[data-theme="dark"] .history-toolbar input,
html[data-theme="dark"] .history-toolbar select{
    color:var(--ui-text)!important;
    background:#0b1a14!important;
    border-color:var(--ui-line)!important;
    box-shadow:none!important;
}

.btn,
.primary,
.btn.primary,
.btn-gradient,
.admin-btn,
.staff-primary,
.complaint-btn,
.complaint-primary,
.wizard-actions .primary,
.complaint-wizard-actions .complaint-btn,
button[type="submit"],
input[type="submit"]{
    min-height:42px;
    border-radius:10px!important;
    font-weight:900!important;
    letter-spacing:-.01em;
}

.btn.primary,
.primary,
.btn-gradient,
.admin-btn,
.staff-primary,
.complaint-btn,
.complaint-primary,
.wizard-actions .primary,
.complaint-wizard-actions .complaint-btn,
.portal-choice a,
button[type="submit"],
input[type="submit"]{
    color:#fff!important;
    border:0!important;
    background:linear-gradient(110deg,var(--ui-green-600),#388a1e)!important;
    box-shadow:0 12px 24px rgba(25,122,71,.24)!important;
}

.btn.primary:hover,
.primary:hover,
.btn-gradient:hover,
.admin-btn:hover,
.staff-primary:hover,
.complaint-btn:hover,
.complaint-primary:hover,
.portal-choice a:hover,
button[type="submit"]:hover,
input[type="submit"]:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 30px rgba(25,122,71,.32)!important;
}

.btn.light,
.light,
.profile-back,
.preview-action,
.preview-action-v2,
.account-back{
    color:var(--ui-green-600)!important;
    border:1px solid var(--ui-line)!important;
    background:var(--ui-surface)!important;
}

html[data-theme="dark"] .btn.light,
html[data-theme="dark"] .light,
html[data-theme="dark"] .profile-back,
html[data-theme="dark"] .preview-action,
html[data-theme="dark"] .preview-action-v2,
html[data-theme="dark"] .account-back{
    color:var(--ui-green-300)!important;
    border-color:var(--ui-line)!important;
    background:#0c1e17!important;
}

table{
    color:var(--ui-text)!important;
}

th{
    color:#466155!important;
    background:#eaf4ef!important;
    border-color:var(--ui-line)!important;
}

td{
    color:var(--ui-text)!important;
    border-color:var(--ui-line-soft)!important;
}

html[data-theme="dark"] th{
    color:#b5d0c3!important;
    background:#10241c!important;
}

html[data-theme="dark"] td{
    color:var(--ui-text)!important;
    border-color:#1f3d31!important;
}

.badge,
.request-status-v2,
.complaint-status,
.dialog-status,
.payment-state,
.status-pill{
    border-radius:999px!important;
    font-weight:900!important;
    border:1px solid transparent;
}

.metric,
.service-metric-card,
.portal-main.service .service-metric-card,
.portal-main.complaint .service-metric-card{
    border-color:var(--ui-line)!important;
    box-shadow:var(--ui-shadow)!important;
}

.theme-toggle-btn,
.notification-trigger,
.notification-btn,
.account-trigger,
.menu-toggle{
    color:var(--ui-text)!important;
    border:1px solid var(--ui-line)!important;
    background:rgba(255,255,255,.92)!important;
    box-shadow:0 8px 22px rgba(20,60,45,.07)!important;
}

html[data-theme="dark"] .theme-toggle-btn,
html[data-theme="dark"] .notification-trigger,
html[data-theme="dark"] .notification-btn,
html[data-theme="dark"] .account-trigger,
html[data-theme="dark"] .menu-toggle{
    color:var(--ui-text)!important;
    border-color:var(--ui-line)!important;
    background:#0b1a14!important;
    box-shadow:none!important;
}

.account-dropdown,
.notification-dropdown,
.resident-menu-panel{
    color:var(--ui-text)!important;
    border-color:var(--ui-line)!important;
    background:var(--ui-surface)!important;
    box-shadow:0 18px 44px rgba(20,60,45,.16)!important;
}

html[data-theme="dark"] .account-dropdown,
html[data-theme="dark"] .notification-dropdown,
html[data-theme="dark"] .resident-menu-panel{
    background:#10241c!important;
    box-shadow:0 18px 44px rgba(0,0,0,.45)!important;
}

/* Responsive behavior: keep content usable and sidebars readable. */
@media(max-width:1180px){
    .portal-main,
    .portal-main.admin,
    .portal-main.staff,
    .portal-main.service,
    .portal-main.complaint{
        padding-inline:22px!important;
    }

    .metrics,
    .service-metrics-grid,
    .request-stat-grid,
    .complaint-stat-grid,
    .admin-stat-strip,
    .admin-module-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}

@media(max-width:900px){
    .sidebar,
    .service-side,
    .complaint-side,
    .admin-side,
    .staff-side{
        width:276px!important;
        max-width:min(276px,86vw)!important;
        transform:translateX(-105%);
        transition:transform .24s ease!important;
    }

    .sidebar.open,
    .service-side.open,
    .complaint-side.open,
    .admin-side.open,
    .staff-side.open{
        transform:translateX(0)!important;
    }

    .portal-main,
    .portal-main.admin,
    .portal-main.staff,
    .portal-main.service,
    .portal-main.complaint,
    .admin .portal-main,
    .staff .portal-main{
        margin-left:0!important;
        padding-inline:18px!important;
    }

    .portal-top,
    .staff .portal-top,
    .admin .portal-top{
        margin-inline:-18px!important;
        padding-inline:18px!important;
    }
}

@media(max-width:680px){
    .portal-top,
    .staff .portal-top,
    .admin .portal-top{
        min-height:auto!important;
        grid-template-columns:42px minmax(0,1fr) auto!important;
        gap:10px!important;
        padding-block:14px!important;
    }

    .portal-title h1{
        font-size:18px!important;
        line-height:1.15!important;
    }

    .portal-title p{
        font-size:12px!important;
        line-height:1.35!important;
    }

    .top-actions{
        gap:7px!important;
    }

    .top-actions .search-box,
    .account-trigger-copy{
        display:none!important;
    }

    .metrics,
    .service-metrics-grid,
    .request-stat-grid,
    .complaint-stat-grid,
    .admin-stat-strip,
    .admin-module-grid,
    .dashboard-grid,
    .admin-dashboard-grid,
    .admin-payment-grid,
    .admin-payment-form,
    .form-grid,
    .step-grid,
    .card-grid{
        grid-template-columns:1fr!important;
    }

    .panel,
    .settings-card,
    .admin-hero,
    .service-dashboard-hero,
    .complaint-dashboard-hero{
        padding:18px!important;
        border-radius:14px!important;
    }

    .admin-hero,
    .service-dashboard-hero,
    .complaint-dashboard-hero{
        flex-direction:column!important;
        align-items:stretch!important;
    }

    .admin-hero-actions,
    .wizard-actions,
    .complaint-wizard-actions,
    .admin-payment-actions{
        flex-direction:column!important;
        align-items:stretch!important;
    }

    .btn,
    .primary,
    .btn.primary,
    .btn.light,
    .admin-btn,
    .staff-primary,
    .complaint-btn,
    .complaint-primary{
        width:100%;
        justify-content:center!important;
        text-align:center!important;
    }

    .table-wrap,
    .requests-table-card{
        overflow-x:auto!important;
    }

    table{
        min-width:720px;
    }
}

@media(max-width:420px){
    .portal-main,
    .portal-main.admin,
    .portal-main.staff,
    .portal-main.service,
    .portal-main.complaint{
        padding-inline:12px!important;
    }

    .portal-top,
    .staff .portal-top,
    .admin .portal-top{
        margin-inline:-12px!important;
        padding-inline:12px!important;
    }

    .sidebar,
    .service-side,
    .complaint-side,
    .admin-side,
    .staff-side{
        width:min(268px,88vw)!important;
        max-width:min(268px,88vw)!important;
        padding-inline:10px!important;
    }

    .sidebar .side-brand,
    .sidebar .side-profile,
    .service-side .side-brand,
    .complaint-side .side-brand,
    .admin-side .side-brand,
    .staff-side .side-brand{
        min-height:116px!important;
        padding:11px 8px!important;
    }

    .sidebar .side-profile-avatar,
    .sidebar .staff-brand-seal,
    .sidebar .seal,
    .service-side .side-profile-avatar,
    .complaint-side .side-profile-avatar,
    .admin-side .side-profile-avatar,
    .staff-side .side-profile-avatar,
    .staff-side .staff-brand-seal{
        flex-basis:58px!important;
        width:58px!important;
        height:58px!important;
    }

    .sidebar .side-profile-copy strong,
    .service-side .side-profile-copy strong,
    .complaint-side .side-profile-copy strong,
    .admin-side .side-profile-copy strong,
    .staff-side .side-profile-copy strong{
        font-size:15px!important;
    }

    .sidebar nav a,
    .sidebar nav summary.side-link,
    .service-side nav a,
    .service-side nav summary.side-link,
    .complaint-side nav a,
    .complaint-side nav summary.side-link,
    .admin-side nav a,
    .admin-side nav summary.side-link,
    .staff-side nav a,
    .staff-side nav summary.side-link{
        min-height:40px!important;
        padding:9px 10px!important;
        font-size:12px!important;
    }
}

/* ========================================================================== 
   Typography neutralization
   Normal fonts should not appear green in either light or dark mode.
   Green remains for accents, buttons, icons, links, and status highlights only.
   ========================================================================== */
:root{
    --ui-text:#111827;
    --ui-heading:#06120d;
    --ui-muted:#64746b;
    --ui-subtle:#7b8b82;
}

html[data-theme="dark"]{
    --ui-text:#f8fafc;
    --ui-heading:#ffffff;
    --ui-muted:#c6d1cb;
    --ui-subtle:#9aa9a1;
}

body.portal,
body.admin,
body.staff,
.portal-main,
.portal-main.admin,
.portal-main.staff,
.portal-main.service,
.portal-main.complaint,
.panel,
.settings-card,
.profile-summary-card,
.profile-form-card,
.request-workspace,
.complaint-wizard,
.requests-table-card,
.complaints-list-card,
.tracking-detail,
.admin-card,
.staff-card,
.resident-page-card{
    color:var(--ui-text)!important;
}

h1,h2,h3,h4,h5,h6,
.portal-title h1,
.panel-title h2,
.panel h2,
.settings-card h2,
.profile-page-title h1,
.request-main-v2 strong,
.complaint-preview-title-row h2,
.history-record-main strong,
.process-hero h2,
.service-dashboard-hero h2,
.complaint-dashboard-hero h2,
.tracking-hero h2,
.admin-hero h2,
.admin-summary-item strong,
.admin-module-card strong,
.admin-stat-strip b,
.admin-chart-row span,
.service-metric-card strong,
.request-stat-grid b,
.complaint-stat-grid b,
strong,
b{
    color:var(--ui-heading)!important;
}

p,small,label,
.portal-title p,
.panel p,
.settings-card p,
.profile-page-title p,
.request-main-v2 small,
.complaint-preview-title-row p,
.history-record-main small,
.process-hero p,
.service-dashboard-hero p,
.complaint-dashboard-hero p,
.tracking-hero p,
.admin-hero p,
.admin-stat-strip small,
.admin-summary-item small,
.admin-module-card small,
.muted-text,
.form-help,
.help-text{
    color:var(--ui-muted)!important;
}

input,
select,
textarea,
.search-box,
table,
th,
td{
    color:var(--ui-text)!important;
}

input::placeholder,
textarea::placeholder,
.search-box::placeholder{
    color:var(--ui-subtle)!important;
}

/* Keep sidebar text white/readable, not green. */
.sidebar,
.service-side,
.complaint-side,
.admin-side,
.staff-side,
.sidebar nav a,
.sidebar nav summary.side-link,
.service-side nav a,
.service-side nav summary.side-link,
.complaint-side nav a,
.complaint-side nav summary.side-link,
.admin-side nav a,
.admin-side nav summary.side-link,
.staff-side nav a,
.staff-side nav summary.side-link,
.sidebar .side-profile-copy strong,
.service-side .side-profile-copy strong,
.complaint-side .side-profile-copy strong,
.admin-side .side-profile-copy strong,
.staff-side .side-profile-copy strong,
.admin-logout,
.logout{
    color:#f8fafc!important;
}

.sidebar nav p,
.service-side nav p,
.complaint-side nav p,
.admin-side nav p,
.staff-side nav p{
    color:#cbd8d1!important;
}

.sidebar .side-profile-copy small,
.service-side .side-profile-copy small,
.complaint-side .side-profile-copy small,
.admin-side .side-profile-copy small,
.staff-side .side-profile-copy small{
    color:#111827!important;
}

/* Preserve intentional green accent elements. */
a:not(.side-link):not(.btn):not(.light):not(.account-logout),
.panel-title a,
.admin .panel-title a,
.admin-chart-row strong,
.side-icon,
.admin-summary-item > span,
.admin-module-card > span,
.admin-stat-strip article > span,
.theme-icon-moon,
.theme-icon-sun{
    color:var(--ui-green-600)!important;
}

html[data-theme="dark"] a:not(.side-link):not(.btn):not(.light):not(.account-logout),
html[data-theme="dark"] .panel-title a,
html[data-theme="dark"] .admin .panel-title a,
html[data-theme="dark"] .admin-chart-row strong,
html[data-theme="dark"] .side-icon,
html[data-theme="dark"] .admin-summary-item > span,
html[data-theme="dark"] .admin-module-card > span,
html[data-theme="dark"] .admin-stat-strip article > span,
html[data-theme="dark"] .theme-icon-moon,
html[data-theme="dark"] .theme-icon-sun{
    color:var(--ui-green-300)!important;
}

/* =========================================================
   Header/sidebar neutral typography + layout correction
   Keeps navigation readable in light/dark mode and prevents
   the fixed sidebar from covering the page header.
   ========================================================= */
:root {
  --layout-sidebar-width: 244px;
  --layout-sidebar-collapsed-width: 86px;
  --layout-header-height: 88px;
  --nav-text-light: #f8fafc;
  --nav-text-muted-light: rgba(248, 250, 252, 0.76);
  --nav-active-text: #ffffff;
  --page-heading-light: #061b15;
  --page-text-light: #172821;
  --page-muted-light: #52665e;
}

html[data-theme="dark"] {
  --page-heading-light: #f8fafc;
  --page-text-light: #e5edf0;
  --page-muted-light: #aab9b4;
}

body.admin,
body.staff,
body.service,
body.complaint,
body.portal {
  color: var(--page-text-light) !important;
}

.sidebar,
.admin-side,
.staff-side,
.service-side,
.complaint-side {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: var(--layout-sidebar-width) !important;
  min-height: 100vh !important;
  z-index: 1200 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  color: var(--nav-text-light) !important;
}

.portal-main,
.admin .portal-main,
.staff .portal-main,
.service .portal-main,
.complaint .portal-main {
  margin-left: var(--layout-sidebar-width) !important;
  width: calc(100% - var(--layout-sidebar-width)) !important;
  min-height: 100vh !important;
  color: var(--page-text-light) !important;
}

.portal-top,
.admin .portal-top,
.staff .portal-top,
.service .portal-top,
.complaint .portal-top {
  min-height: var(--layout-header-height) !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 18px 28px !important;
  margin: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 900 !important;
  border-radius: 0 !important;
}

.portal-title,
.portal-top .portal-title {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.portal-top h1,
.admin .portal-top h1,
.staff .portal-top h1,
.service .portal-top h1,
.complaint .portal-top h1,
.portal-main h1,
.portal-main h2,
.portal-main h3,
.portal-main h4,
.portal-main h5,
.portal-main h6 {
  color: var(--page-heading-light) !important;
}

.portal-top p,
.admin .portal-top p,
.staff .portal-top p,
.service .portal-top p,
.complaint .portal-top p,
.portal-main p,
.portal-main small,
.portal-main label,
.portal-main .muted,
.portal-main .text-muted,
.portal-main .card-subtitle,
.portal-main .section-subtitle {
  color: var(--page-muted-light) !important;
}

.sidebar *,
.admin-side *,
.staff-side *,
.service-side *,
.complaint-side * {
  color: inherit !important;
}

.sidebar nav p,
.admin-side nav p,
.staff-side nav p,
.service-side nav p,
.complaint-side nav p,
.sidebar .side-section,
.admin-side .side-section,
.staff-side .side-section,
.service-side .side-section,
.complaint-side .side-section {
  color: var(--nav-text-muted-light) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

.sidebar a,
.sidebar button,
.sidebar .side-link,
.sidebar .nav-link,
.admin-side a,
.admin-side button,
.admin-side .side-link,
.admin-side .nav-link,
.staff-side a,
.staff-side button,
.staff-side .side-link,
.staff-side .nav-link,
.service-side a,
.service-side button,
.service-side .side-link,
.service-side .nav-link,
.complaint-side a,
.complaint-side button,
.complaint-side .side-link,
.complaint-side .nav-link {
  color: var(--nav-text-light) !important;
  text-decoration: none !important;
}

.sidebar a span,
.sidebar a strong,
.sidebar a small,
.sidebar .side-icon,
.sidebar .side-link span,
.sidebar .side-link strong,
.sidebar .side-link small,
.admin-side a span,
.admin-side a strong,
.admin-side a small,
.admin-side .side-icon,
.staff-side a span,
.staff-side a strong,
.staff-side a small,
.staff-side .side-icon,
.service-side a span,
.service-side a strong,
.service-side a small,
.service-side .side-icon,
.complaint-side a span,
.complaint-side a strong,
.complaint-side a small,
.complaint-side .side-icon {
  color: inherit !important;
}

.sidebar .active,
.sidebar .side-link.active,
.sidebar .nav-link.active,
.admin-side .active,
.admin-side .side-link.active,
.admin-side .nav-link.active,
.staff-side .active,
.staff-side .side-link.active,
.staff-side .nav-link.active,
.service-side .active,
.service-side .side-link.active,
.service-side .nav-link.active,
.complaint-side .active,
.complaint-side .side-link.active,
.complaint-side .nav-link.active {
  color: var(--nav-active-text) !important;
}

.sidebar .side-profile,
.sidebar .side-brand,
.admin-side .side-profile,
.admin-side .side-brand,
.staff-side .side-profile,
.staff-side .side-brand,
.service-side .side-profile,
.service-side .side-brand,
.complaint-side .side-profile,
.complaint-side .side-brand {
  color: #ffffff !important;
}

.sidebar .side-profile h2,
.sidebar .side-profile h3,
.sidebar .side-profile strong,
.sidebar .side-profile small,
.admin-side .side-profile h2,
.admin-side .side-profile h3,
.admin-side .side-profile strong,
.admin-side .side-profile small,
.staff-side .side-profile h2,
.staff-side .side-profile h3,
.staff-side .side-profile strong,
.staff-side .side-profile small,
.service-side .side-profile h2,
.service-side .side-profile h3,
.service-side .side-profile strong,
.service-side .side-profile small,
.complaint-side .side-profile h2,
.complaint-side .side-profile h3,
.complaint-side .side-profile strong,
.complaint-side .side-profile small {
  color: #ffffff !important;
}

html[data-theme="light"] .portal-top,
html[data-theme="light"] .admin .portal-top,
html[data-theme="light"] .staff .portal-top,
html[data-theme="light"] .service .portal-top,
html[data-theme="light"] .complaint .portal-top {
  background: rgba(252, 255, 253, 0.96) !important;
  border-bottom: 1px solid rgba(23, 94, 72, 0.18) !important;
  box-shadow: 0 16px 34px rgba(26, 75, 58, 0.08) !important;
}

html[data-theme="dark"] .portal-top,
html[data-theme="dark"] .admin .portal-top,
html[data-theme="dark"] .staff .portal-top,
html[data-theme="dark"] .service .portal-top,
html[data-theme="dark"] .complaint .portal-top {
  background: rgba(3, 23, 17, 0.96) !important;
  border-bottom: 1px solid rgba(70, 214, 151, 0.22) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24) !important;
}

.portal-top .menu-toggle,
.admin .portal-top .menu-toggle,
.staff .portal-top .menu-toggle,
.service .portal-top .menu-toggle,
.complaint .portal-top .menu-toggle {
  flex: 0 0 auto !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
}

html[data-theme="light"] .portal-top .menu-toggle {
  color: #0f241d !important;
  background: #ffffff !important;
  border: 1px solid rgba(23, 94, 72, 0.22) !important;
}

html[data-theme="dark"] .portal-top .menu-toggle {
  color: #f8fafc !important;
  background: #092219 !important;
  border: 1px solid rgba(70, 214, 151, 0.26) !important;
}

.portal-actions,
.portal-top .top-actions,
.portal-top .header-actions {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

@media (max-width: 1100px) {
  .sidebar,
  .admin-side,
  .staff-side,
  .service-side,
  .complaint-side {
    transform: translateX(-100%) !important;
    transition: transform 0.22s ease !important;
  }

  body.sidebar-open .sidebar,
  body.sidebar-open .admin-side,
  body.sidebar-open .staff-side,
  body.sidebar-open .service-side,
  body.sidebar-open .complaint-side,
  .sidebar.is-open,
  .admin-side.is-open,
  .staff-side.is-open,
  .service-side.is-open,
  .complaint-side.is-open {
    transform: translateX(0) !important;
  }

  .portal-main,
  .admin .portal-main,
  .staff .portal-main,
  .service .portal-main,
  .complaint .portal-main {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  .portal-top,
  .admin .portal-top,
  .staff .portal-top,
  .service .portal-top,
  .complaint .portal-top {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    padding: 14px 16px !important;
  }

  .portal-actions,
  .portal-top .top-actions,
  .portal-top .header-actions {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}


/* Header control text should stay neutral, never theme green */
html[data-theme="light"] .portal-top .search-box,
html[data-theme="light"] .portal-top .account-trigger,
html[data-theme="light"] .portal-top .account-trigger *,
html[data-theme="light"] .portal-top .account-dropdown,
html[data-theme="light"] .portal-top .account-dropdown *,
html[data-theme="light"] .portal-top .notification-dropdown,
html[data-theme="light"] .portal-top .notification-dropdown * {
  color: #101a16 !important;
}

html[data-theme="light"] .portal-top .account-trigger small,
html[data-theme="light"] .portal-top .account-dropdown small,
html[data-theme="light"] .portal-top .notification-dropdown small {
  color: #596a62 !important;
}

html[data-theme="dark"] .portal-top .search-box,
html[data-theme="dark"] .portal-top .account-trigger,
html[data-theme="dark"] .portal-top .account-trigger *,
html[data-theme="dark"] .portal-top .account-dropdown,
html[data-theme="dark"] .portal-top .account-dropdown *,
html[data-theme="dark"] .portal-top .notification-dropdown,
html[data-theme="dark"] .portal-top .notification-dropdown * {
  color: #f8fafc !important;
}

html[data-theme="dark"] .portal-top .account-trigger small,
html[data-theme="dark"] .portal-top .account-dropdown small,
html[data-theme="dark"] .portal-top .notification-dropdown small {
  color: #b7c4bf !important;
}

html[data-theme="light"] .portal-main a:not(.btn):not(.button):not(.side-link),
html[data-theme="light"] .portal-main .view-link,
html[data-theme="light"] .portal-main .manage-link {
  color: #111827 !important;
}

html[data-theme="dark"] .portal-main a:not(.btn):not(.button):not(.side-link),
html[data-theme="dark"] .portal-main .view-link,
html[data-theme="dark"] .portal-main .manage-link {
  color: #f8fafc !important;
}

/* Force sidebar feature labels/icons to neutral text colors */
.sidebar,
.admin-side,
.staff-side,
.service-side,
.complaint-side {
  --sidebar-feature-text: #ffffff;
  --sidebar-feature-muted: rgba(255, 255, 255, 0.78);
  --sidebar-feature-active: #ffffff;
}

html[data-theme="light"] .sidebar.sidebar-light,
html[data-theme="light"] .admin-side.sidebar-light,
html[data-theme="light"] .staff-side.sidebar-light,
html[data-theme="light"] .service-side.sidebar-light,
html[data-theme="light"] .complaint-side.sidebar-light {
  --sidebar-feature-text: #111827;
  --sidebar-feature-muted: #4b5563;
  --sidebar-feature-active: #111827;
}

.sidebar nav a,
.sidebar nav button,
.sidebar .side-link,
.sidebar .nav-link,
.sidebar .side-menu a,
.sidebar .side-menu button,
.admin-side nav a,
.admin-side nav button,
.admin-side .side-link,
.admin-side .nav-link,
.admin-side .side-menu a,
.admin-side .side-menu button,
.staff-side nav a,
.staff-side nav button,
.staff-side .side-link,
.staff-side .nav-link,
.staff-side .side-menu a,
.staff-side .side-menu button,
.service-side nav a,
.service-side nav button,
.service-side .side-link,
.service-side .nav-link,
.service-side .side-menu a,
.service-side .side-menu button,
.complaint-side nav a,
.complaint-side nav button,
.complaint-side .side-link,
.complaint-side .nav-link,
.complaint-side .side-menu a,
.complaint-side .side-menu button {
  color: var(--sidebar-feature-text) !important;
}

.sidebar nav a *,
.sidebar nav button *,
.sidebar .side-link *,
.sidebar .nav-link *,
.sidebar .side-menu a *,
.sidebar .side-menu button *,
.admin-side nav a *,
.admin-side nav button *,
.admin-side .side-link *,
.admin-side .nav-link *,
.admin-side .side-menu a *,
.admin-side .side-menu button *,
.staff-side nav a *,
.staff-side nav button *,
.staff-side .side-link *,
.staff-side .nav-link *,
.staff-side .side-menu a *,
.staff-side .side-menu button *,
.service-side nav a *,
.service-side nav button *,
.service-side .side-link *,
.service-side .nav-link *,
.service-side .side-menu a *,
.service-side .side-menu button *,
.complaint-side nav a *,
.complaint-side nav button *,
.complaint-side .side-link *,
.complaint-side .nav-link *,
.complaint-side .side-menu a *,
.complaint-side .side-menu button * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.sidebar nav a:hover,
.sidebar nav button:hover,
.sidebar .side-link:hover,
.sidebar .nav-link:hover,
.admin-side nav a:hover,
.admin-side nav button:hover,
.admin-side .side-link:hover,
.admin-side .nav-link:hover,
.staff-side nav a:hover,
.staff-side nav button:hover,
.staff-side .side-link:hover,
.staff-side .nav-link:hover,
.service-side nav a:hover,
.service-side nav button:hover,
.service-side .side-link:hover,
.service-side .nav-link:hover,
.complaint-side nav a:hover,
.complaint-side nav button:hover,
.complaint-side .side-link:hover,
.complaint-side .nav-link:hover,
.sidebar nav a.active,
.sidebar nav button.active,
.sidebar .side-link.active,
.sidebar .nav-link.active,
.admin-side nav a.active,
.admin-side nav button.active,
.admin-side .side-link.active,
.admin-side .nav-link.active,
.staff-side nav a.active,
.staff-side nav button.active,
.staff-side .side-link.active,
.staff-side .nav-link.active,
.service-side nav a.active,
.service-side nav button.active,
.service-side .side-link.active,
.service-side .nav-link.active,
.complaint-side nav a.active,
.complaint-side nav button.active,
.complaint-side .side-link.active,
.complaint-side .nav-link.active {
  color: var(--sidebar-feature-active) !important;
}

.sidebar nav p,
.sidebar .side-section,
.sidebar .nav-section-title,
.admin-side nav p,
.admin-side .side-section,
.admin-side .nav-section-title,
.staff-side nav p,
.staff-side .side-section,
.staff-side .nav-section-title,
.service-side nav p,
.service-side .side-section,
.service-side .nav-section-title,
.complaint-side nav p,
.complaint-side .side-section,
.complaint-side .nav-section-title {
  color: var(--sidebar-feature-muted) !important;
}

/* FINAL sidebar font fix: menu features must be white, not green */
body .sidebar nav > a.side-link,
body .sidebar nav > a.side-link:link,
body .sidebar nav > a.side-link:visited,
body .sidebar nav > a.side-link:hover,
body .sidebar nav > a.side-link:focus,
body .sidebar nav > a.side-link.active,
body .sidebar nav details.side-dropdown > summary.side-link,
body .sidebar nav details.side-dropdown > summary.side-link:hover,
body .sidebar nav details.side-dropdown > summary.side-link:focus,
body .sidebar nav details.side-dropdown > summary.side-link.active,
body .sidebar nav details.side-dropdown[open] > summary.side-link,
body .admin-side nav > a.side-link,
body .staff-side nav > a.side-link,
body .service-side nav > a.side-link,
body .complaint-side nav > a.side-link,
body .admin-side nav details.side-dropdown > summary.side-link,
body .staff-side nav details.side-dropdown > summary.side-link,
body .service-side nav details.side-dropdown > summary.side-link,
body .complaint-side nav details.side-dropdown > summary.side-link {
  color: #ffffff !important;
  opacity: 1 !important;
}

body .sidebar nav > a.side-link .side-label,
body .sidebar nav > a.side-link .side-icon,
body .sidebar nav > a.side-link .side-caret,
body .sidebar nav details.side-dropdown > summary.side-link .side-label,
body .sidebar nav details.side-dropdown > summary.side-link .side-icon,
body .sidebar nav details.side-dropdown > summary.side-link .side-caret,
body .admin-side nav > a.side-link .side-label,
body .admin-side nav > a.side-link .side-icon,
body .staff-side nav > a.side-link .side-label,
body .staff-side nav > a.side-link .side-icon,
body .service-side nav > a.side-link .side-label,
body .service-side nav > a.side-link .side-icon,
body .complaint-side nav > a.side-link .side-label,
body .complaint-side nav > a.side-link .side-icon,
body .staff-side nav details.side-dropdown > summary.side-link .side-label,
body .staff-side nav details.side-dropdown > summary.side-link .side-icon,
body .staff-side nav details.side-dropdown > summary.side-link .side-caret {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}

body .sidebar nav .side-submenu a,
body .sidebar nav .side-submenu a:link,
body .sidebar nav .side-submenu a:visited,
body .sidebar nav .side-submenu a:hover,
body .sidebar nav .side-submenu a.active,
body .staff-side nav .side-submenu a,
body .admin-side nav .side-submenu a,
body .service-side nav .side-submenu a,
body .complaint-side nav .side-submenu a {
  color: #ffffff !important;
  opacity: 1 !important;
}

body .sidebar nav p,
body .admin-side nav p,
body .staff-side nav p,
body .service-side nav p,
body .complaint-side nav p {
  color: rgba(255, 255, 255, 0.82) !important;
  opacity: 1 !important;
}

body .sidebar .logout,
body .sidebar .logout *,
body .admin-side .admin-logout,
body .admin-side .admin-logout *,
body .staff-side .staff-logout,
body .staff-side .staff-logout * {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* FINAL sidebar dropdown submenu font fix */
body .sidebar details.side-dropdown .side-submenu,
body .admin-side details.side-dropdown .side-submenu,
body .staff-side details.side-dropdown .side-submenu,
body .service-side details.side-dropdown .side-submenu,
body .complaint-side details.side-dropdown .side-submenu {
  color: #ffffff !important;
}

body .sidebar details.side-dropdown .side-submenu a,
body .sidebar details.side-dropdown .side-submenu a:link,
body .sidebar details.side-dropdown .side-submenu a:visited,
body .sidebar details.side-dropdown .side-submenu a:hover,
body .sidebar details.side-dropdown .side-submenu a:focus,
body .sidebar details.side-dropdown .side-submenu a.active,
body .admin-side details.side-dropdown .side-submenu a,
body .staff-side details.side-dropdown .side-submenu a,
body .service-side details.side-dropdown .side-submenu a,
body .complaint-side details.side-dropdown .side-submenu a {
  color: #ffffff !important;
  opacity: 1 !important;
}

body .sidebar details.side-dropdown .side-submenu a *,
body .admin-side details.side-dropdown .side-submenu a *,
body .staff-side details.side-dropdown .side-submenu a *,
body .service-side details.side-dropdown .side-submenu a *,
body .complaint-side details.side-dropdown .side-submenu a * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  opacity: 1 !important;
}

body .sidebar details.side-dropdown .side-submenu a::before,
body .admin-side details.side-dropdown .side-submenu a::before,
body .staff-side details.side-dropdown .side-submenu a::before,
body .service-side details.side-dropdown .side-submenu a::before,
body .complaint-side details.side-dropdown .side-submenu a::before {
  border-color: #ffffff !important;
  background: #ffffff !important;
  opacity: 1 !important;
}

/* Hard fix for dropdown sidebar submenu text color */
body .sidebar .side-submenu a,
body .sidebar .side-submenu a:link,
body .sidebar .side-submenu a:visited,
body .sidebar .side-submenu a:hover,
body .sidebar .side-submenu a:focus,
body .sidebar .side-submenu a.active,
body .sidebar .side-submenu .sidebar-submenu-link,
body .admin-side .side-submenu a,
body .staff-side .side-submenu a,
body .service-side .side-submenu a,
body .complaint-side .side-submenu a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration-color: #ffffff !important;
}

body .sidebar .side-submenu a::before,
body .admin-side .side-submenu a::before,
body .staff-side .side-submenu a::before,
body .service-side .side-submenu a::before,
body .complaint-side .side-submenu a::before {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Landing page light/dark color correction */
body.landing {
  --landing-ink: #071b13;
  --landing-text: #243a31;
  --landing-muted: #5f7069;
  --landing-panel: #ffffff;
  --landing-panel-soft: #f4fbf7;
  --landing-on-green: #ffffff;
  --landing-on-green-muted: rgba(255, 255, 255, 0.84);
}

html[data-theme="dark"] body.landing {
  --landing-ink: #f8fafc;
  --landing-text: #e5edf0;
  --landing-muted: #aab9b4;
  --landing-panel: #101f18;
  --landing-panel-soft: #0b1913;
  --landing-on-green: #ffffff;
  --landing-on-green-muted: rgba(255, 255, 255, 0.82);
}

body.landing,
body.landing .landing-main,
body.landing .landing-section {
  color: var(--landing-text) !important;
}

body.landing h1,
body.landing h2,
body.landing h3,
body.landing h4,
body.landing h5,
body.landing h6,
body.landing .landing-brand strong,
body.landing .section-head h2,
body.landing .hero-copy h1,
body.landing .portal-card h3,
body.landing .feature-card h3,
body.landing .step-card h3,
body.landing .announcement-panel h2,
body.landing .contact-panel h2 {
  color: var(--landing-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.landing p,
body.landing small,
body.landing li,
body.landing .hero-copy p,
body.landing .section-head p,
body.landing .portal-card p,
body.landing .portal-card li,
body.landing .feature-card p,
body.landing .step-card p,
body.landing .landing-brand small,
body.landing .portal-note {
  color: var(--landing-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.landing .landing-header {
  color: var(--landing-ink) !important;
}

body.landing .landing-nav a,
body.landing .landing-auth .btn-outline,
body.landing .landing-auth .btn-light {
  color: #0b6f43 !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme="dark"] body.landing .landing-nav a,
html[data-theme="dark"] body.landing .landing-auth .btn-outline,
html[data-theme="dark"] body.landing .landing-auth .btn-light {
  color: #f8fafc !important;
}

body.landing .btn-gradient,
body.landing .landing-btn.btn-gradient,
body.landing .landing-auth .btn-gradient,
body.landing .portal-card-button,
body.landing .contact-button:not(.btn-light),
body.landing .landing-cta .landing-btn,
body.landing .landing-cta .btn-gradient,
body.landing .landing-cta .btn-ghost {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.landing .btn-gradient *,
body.landing .landing-btn.btn-gradient *,
body.landing .landing-auth .btn-gradient *,
body.landing .portal-card-button *,
body.landing .contact-button:not(.btn-light) *,
body.landing .landing-cta .landing-btn *,
body.landing .landing-cta .btn-gradient *,
body.landing .landing-cta .btn-ghost * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

body.landing .btn-outline,
body.landing .landing-btn.btn-outline {
  background: #ffffff !important;
  color: #0b6f43 !important;
  -webkit-text-fill-color: #0b6f43 !important;
}

html[data-theme="dark"] body.landing .btn-outline,
html[data-theme="dark"] body.landing .landing-btn.btn-outline {
  background: #0f2219 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.landing .portal-card,
body.landing .feature-grid,
body.landing .feature-card,
body.landing .step-card,
body.landing .announcement-panel,
body.landing .contact-panel,
body.landing .trust-card,
body.landing .hero-summary span {
  color: var(--landing-text) !important;
}

html[data-theme="dark"] body.landing .portal-card,
html[data-theme="dark"] body.landing .feature-grid,
html[data-theme="dark"] body.landing .feature-card,
html[data-theme="dark"] body.landing .step-card,
html[data-theme="dark"] body.landing .announcement-panel,
html[data-theme="dark"] body.landing .contact-panel,
html[data-theme="dark"] body.landing .trust-card,
html[data-theme="dark"] body.landing .hero-summary span {
  background-color: var(--landing-panel) !important;
  color: var(--landing-text) !important;
}

body.landing .landing-cta,
body.landing .landing-footer {
  color: var(--landing-on-green) !important;
}

body.landing .landing-cta h1,
body.landing .landing-cta h2,
body.landing .landing-cta h3,
body.landing .landing-cta strong,
body.landing .landing-cta a,
body.landing .landing-footer h1,
body.landing .landing-footer h2,
body.landing .landing-footer h3,
body.landing .landing-footer strong,
body.landing .landing-footer a,
body.landing .landing-footer .footer-brand strong {
  color: var(--landing-on-green) !important;
  -webkit-text-fill-color: var(--landing-on-green) !important;
}

body.landing .landing-cta p,
body.landing .landing-cta small,
body.landing .landing-footer p,
body.landing .landing-footer small,
body.landing .landing-footer li,
body.landing .landing-footer .footer-brand small,
body.landing .footer-bottom p,
body.landing .footer-bottom a {
  color: var(--landing-on-green-muted) !important;
  -webkit-text-fill-color: var(--landing-on-green-muted) !important;
}

body.landing .landing-footer a:hover,
body.landing .footer-bottom a:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.landing .section-label,
body.landing .welcome-pill,
body.landing .panel-heading a,
body.landing .portal-note svg,
body.landing .feature-card > span,
body.landing .portal-icon,
body.landing .step-card > span {
  -webkit-text-fill-color: currentColor !important;
}

/* FINAL landing responsive typography and light/dark contrast pass */
body.landing {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

body.landing .landing-nav a {
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

body.landing .landing-btn,
body.landing button,
body.landing .portal-card-button,
body.landing .contact-button {
  font-size: 14px !important;
  font-weight: 900 !important;
}

body.landing .landing-brand strong {
  font-size: clamp(20px, 1.6vw, 24px) !important;
}

body.landing .landing-brand small {
  font-size: 13px !important;
}

body.landing .welcome-pill,
body.landing .section-label,
body.landing .section-title > span {
  font-size: 13px !important;
}

body.landing .hero-copy h1 {
  color: #061b13 !important;
  -webkit-text-fill-color: #061b13 !important;
  font-size: clamp(46px, 5.4vw, 72px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
}

body.landing .hero-copy h1 span {
  color: #197a47 !important;
  background: linear-gradient(135deg, #125732 0%, #197a47 52%, #388a1e 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.landing .hero-copy p {
  color: #30473d !important;
  font-size: clamp(16px, 1.25vw, 19px) !important;
  line-height: 1.75 !important;
}

body.landing .section-title h2,
body.landing .left-heading,
body.landing .landing-cta h2 {
  font-size: clamp(28px, 3.2vw, 40px) !important;
  line-height: 1.14 !important;
}

body.landing .section-title p {
  font-size: 16px !important;
}

body.landing .step-card h3,
body.landing .portal-card h3,
body.landing .feature-card h3,
body.landing .announcement-item h3 {
  font-size: 16px !important;
  line-height: 1.25 !important;
}

body.landing .step-card p,
body.landing .portal-card p,
body.landing .portal-card li,
body.landing .feature-card p,
body.landing .announcement-item p,
body.landing .trust-card p {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}

body.landing .hero-summary span {
  font-size: 13px !important;
}

body.landing .landing-header,
html[data-theme="light"] body.landing .landing-header {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid rgba(17, 93, 56, 0.16) !important;
}

html[data-theme="light"] body.landing,
html[data-theme="light"] body.landing .process-section,
html[data-theme="light"] body.landing .services-section,
html[data-theme="light"] body.landing .benefits-section,
html[data-theme="light"] body.landing .updates-contact,
html[data-theme="light"] body.landing .landing-section {
  background-color: #ffffff !important;
}

html[data-theme="light"] body.landing .section-title h2,
html[data-theme="light"] body.landing .left-heading,
html[data-theme="light"] body.landing .step-card h3,
html[data-theme="light"] body.landing .portal-card h3,
html[data-theme="light"] body.landing .feature-card h3,
html[data-theme="light"] body.landing .announcement-item h3 {
  color: #061b13 !important;
  -webkit-text-fill-color: #061b13 !important;
}

html[data-theme="light"] body.landing .section-title p,
html[data-theme="light"] body.landing .step-card p,
html[data-theme="light"] body.landing .portal-card p,
html[data-theme="light"] body.landing .portal-card li,
html[data-theme="light"] body.landing .feature-card p,
html[data-theme="light"] body.landing .announcement-item p {
  color: #53675e !important;
  -webkit-text-fill-color: #53675e !important;
}

html[data-theme="dark"] body.landing {
  background: #06110c !important;
  color: #e9f5ef !important;
}

html[data-theme="dark"] body.landing .landing-header {
  background: rgba(7, 22, 16, 0.96) !important;
  border-bottom: 1px solid rgba(72, 214, 150, 0.18) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="dark"] body.landing .landing-brand strong,
html[data-theme="dark"] body.landing .landing-brand small,
html[data-theme="dark"] body.landing .landing-nav a,
html[data-theme="dark"] body.landing .landing-auth .landing-btn {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] body.landing .landing-nav a.active,
html[data-theme="dark"] body.landing .landing-nav a:hover {
  color: #39d98b !important;
  -webkit-text-fill-color: #39d98b !important;
}

html[data-theme="dark"] body.landing .landing-hero {
  background:
    linear-gradient(90deg, rgba(6, 17, 12, 0.98) 0%, rgba(6, 17, 12, 0.88) 34%, rgba(6, 17, 12, 0.34) 68%, rgba(6, 17, 12, 0.10) 100%),
    radial-gradient(circle at 12% 12%, rgba(57, 217, 139, .16), transparent 32%),
    #06110c !important;
}

html[data-theme="dark"] body.landing .landing-hero:after {
  background: #06110c !important;
  border-top-color: rgba(57, 217, 139, 0.32) !important;
}

html[data-theme="dark"] body.landing .hero-copy h1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] body.landing .hero-copy h1 span {
  color: #39d98b !important;
  background: linear-gradient(135deg, #b6ffd5 0%, #39d98b 46%, #16b873 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="dark"] body.landing .hero-copy p,
html[data-theme="dark"] body.landing .section-title p {
  color: #b8c9c0 !important;
  -webkit-text-fill-color: #b8c9c0 !important;
}

html[data-theme="dark"] body.landing .process-section,
html[data-theme="dark"] body.landing .services-section,
html[data-theme="dark"] body.landing .benefits-section,
html[data-theme="dark"] body.landing .updates-contact,
html[data-theme="dark"] body.landing .landing-section {
  background: #06110c !important;
}

html[data-theme="dark"] body.landing .section-title h2,
html[data-theme="dark"] body.landing .left-heading,
html[data-theme="dark"] body.landing .step-card h3,
html[data-theme="dark"] body.landing .portal-card h3,
html[data-theme="dark"] body.landing .feature-card h3,
html[data-theme="dark"] body.landing .announcement-item h3,
html[data-theme="dark"] body.landing .panel-heading h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] body.landing .step-card,
html[data-theme="dark"] body.landing .portal-card,
html[data-theme="dark"] body.landing .feature-grid,
html[data-theme="dark"] body.landing .feature-card,
html[data-theme="dark"] body.landing .announcement-panel,
html[data-theme="dark"] body.landing .contact-panel,
html[data-theme="dark"] body.landing .trust-card,
html[data-theme="dark"] body.landing .hero-summary span {
  background: #0c2118 !important;
  border-color: rgba(75, 214, 151, 0.24) !important;
  color: #e9f5ef !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme="dark"] body.landing .step-card p,
html[data-theme="dark"] body.landing .portal-card p,
html[data-theme="dark"] body.landing .portal-card li,
html[data-theme="dark"] body.landing .feature-card p,
html[data-theme="dark"] body.landing .announcement-item p,
html[data-theme="dark"] body.landing .trust-card p {
  color: #b8c9c0 !important;
  -webkit-text-fill-color: #b8c9c0 !important;
}

html[data-theme="dark"] body.landing .hero-summary span,
html[data-theme="dark"] body.landing .hero-summary span strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.landing .btn-gradient,
body.landing .landing-btn.btn-gradient,
body.landing .portal-card-button,
body.landing .contact-button:not(.btn-light),
body.landing .landing-auth .btn-gradient {
  background: linear-gradient(135deg, #147d49 0%, #1e9658 56%, #2b8a1f 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] body.landing .btn-outline,
html[data-theme="dark"] body.landing .landing-btn.btn-outline {
  background: transparent !important;
  border-color: rgba(57, 217, 139, 0.42) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.landing .landing-cta,
body.landing .landing-footer {
  color: #ffffff !important;
}

body.landing .landing-cta *,
body.landing .landing-footer h3,
body.landing .landing-footer strong,
body.landing .landing-footer a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.landing .landing-footer p,
body.landing .landing-footer small,
body.landing .footer-bottom p,
body.landing .footer-bottom a {
  color: rgba(255, 255, 255, 0.82) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
}

@media (max-width: 1100px) {
  body.landing .landing-header {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    min-height: 78px !important;
    padding-inline: 22px !important;
  }

  body.landing .landing-nav {
    font-size: 14px !important;
  }

  body.landing .landing-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding-top: 118px !important;
    padding-bottom: 72px !important;
  }

  body.landing .hero-media {
    inset: 78px 0 0 36% !important;
    opacity: 0.55 !important;
  }

  body.landing .steps-grid,
  body.landing .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.landing .landing-header {
    gap: 10px !important;
    min-height: 70px !important;
    padding-inline: 14px !important;
  }

  body.landing .landing-brand strong {
    font-size: 17px !important;
  }

  body.landing .landing-brand small {
    font-size: 11px !important;
  }

  body.landing .landing-seal {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  body.landing .hero-copy h1 {
    font-size: clamp(36px, 12vw, 52px) !important;
  }

  body.landing .hero-copy p,
  body.landing .section-title p {
    font-size: 15px !important;
  }

  body.landing .hero-actions,
  body.landing .landing-auth {
    gap: 10px !important;
  }

  body.landing .landing-btn,
  body.landing .portal-card-button,
  body.landing .contact-button {
    min-height: 42px !important;
    padding-inline: 14px !important;
    font-size: 13px !important;
  }

  body.landing .hero-summary,
  body.landing .steps-grid,
  body.landing .feature-grid,
  body.landing .service-grid,
  body.landing .updates-contact,
  body.landing .footer-grid {
    grid-template-columns: 1fr !important;
  }

  body.landing .step-card:not(:last-child):after {
    display: none !important;
  }

  body.landing .landing-section {
    padding-inline: 16px !important;
  }
}

/* Landing header brand alignment fix */
body.landing .landing-brand {
  display: inline-grid !important;
  grid-template-columns: 58px minmax(0, max-content) !important;
  align-items: center !important;
  column-gap: 12px !important;
  min-width: 0 !important;
  line-height: 1.1 !important;
}

body.landing .landing-brand .landing-seal {
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  margin: 0 !important;
}

body.landing .landing-brand div,
body.landing .landing-brand span:not(.landing-seal) {
  min-width: 0 !important;
}

body.landing .landing-brand strong {
  display: block !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: clamp(22px, 1.7vw, 26px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  white-space: nowrap !important;
}

body.landing .landing-brand small {
  display: block !important;
  margin-top: 5px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html[data-theme="light"] body.landing .landing-brand strong {
  color: #071b13 !important;
  -webkit-text-fill-color: #071b13 !important;
}

html[data-theme="light"] body.landing .landing-brand small {
  color: #52665e !important;
  -webkit-text-fill-color: #52665e !important;
}

html[data-theme="dark"] body.landing .landing-brand strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] body.landing .landing-brand small {
  color: rgba(255, 255, 255, 0.78) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.78) !important;
}

@media (max-width: 760px) {
  body.landing .landing-brand {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }

  body.landing .landing-brand strong {
    font-size: 18px !important;
    white-space: normal !important;
    line-height: 1.08 !important;
  }

  body.landing .landing-brand small {
    margin-top: 4px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 430px) {
  body.landing .landing-brand strong {
    max-width: 150px !important;
  }
}

/* FINAL quick action light/dark contrast pass */
.quick-action-page {
  --qa-light-heading: #061b13;
  --qa-light-text: #263a31;
  --qa-light-muted: #53675e;
  --qa-dark-heading: #ffffff;
  --qa-dark-text: #e9f5ef;
  --qa-dark-muted: #b8c9c0;
  --qa-green-button-text: #ffffff;
}

html[data-theme="light"] .quick-action-page {
  color: var(--qa-light-text) !important;
  background: linear-gradient(180deg, #f4f8f6 0%, #ffffff 44%, #f8fbf9 100%) !important;
}

html[data-theme="dark"] .quick-action-page {
  color: var(--qa-dark-text) !important;
  background: radial-gradient(circle at 18% -12%, #0d3a29 0 280px, transparent 470px), linear-gradient(180deg, #07110d 0%, #0b1812 52%, #07110d 100%) !important;
}

html[data-theme="light"] .quick-action-header {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: rgba(17, 93, 56, 0.16) !important;
}

html[data-theme="dark"] .quick-action-header {
  background: rgba(7, 19, 14, 0.96) !important;
  border-bottom-color: rgba(57, 217, 139, 0.22) !important;
}

html[data-theme="light"] .quick-action-brand-copy strong,
html[data-theme="light"] .resident-identity strong,
html[data-theme="light"] .quick-welcome h1,
html[data-theme="light"] .portal-choice h3,
html[data-theme="light"] .quick-other-services h2,
html[data-theme="light"] .quick-other-services strong,
html[data-theme="light"] .quick-welcome-status strong,
html[data-theme="light"] .quick-welcome-metrics strong {
  color: var(--qa-light-heading) !important;
  -webkit-text-fill-color: var(--qa-light-heading) !important;
}

html[data-theme="light"] .quick-action-brand-copy small,
html[data-theme="light"] .resident-identity small,
html[data-theme="light"] .quick-welcome-copy > p,
html[data-theme="light"] .portal-choice p,
html[data-theme="light"] .portal-choice li,
html[data-theme="light"] .quick-other-services small,
html[data-theme="light"] .quick-welcome-status small,
html[data-theme="light"] .quick-action-footer {
  color: var(--qa-light-muted) !important;
  -webkit-text-fill-color: var(--qa-light-muted) !important;
}

html[data-theme="dark"] .quick-action-brand-copy strong,
html[data-theme="dark"] .resident-identity strong,
html[data-theme="dark"] .quick-welcome h1,
html[data-theme="dark"] .portal-choice h3,
html[data-theme="dark"] .quick-other-services h2,
html[data-theme="dark"] .quick-other-services strong,
html[data-theme="dark"] .quick-welcome-status strong,
html[data-theme="dark"] .quick-welcome-metrics strong,
html[data-theme="dark"] .quick-welcome-metrics b {
  color: var(--qa-dark-heading) !important;
  -webkit-text-fill-color: var(--qa-dark-heading) !important;
}

html[data-theme="dark"] .quick-action-brand-copy small,
html[data-theme="dark"] .resident-identity small,
html[data-theme="dark"] .quick-welcome-copy > p,
html[data-theme="dark"] .portal-choice p,
html[data-theme="dark"] .portal-choice li,
html[data-theme="dark"] .quick-other-services small,
html[data-theme="dark"] .quick-welcome-status small,
html[data-theme="dark"] .quick-action-footer,
html[data-theme="dark"] .quick-welcome-metrics small {
  color: var(--qa-dark-muted) !important;
  -webkit-text-fill-color: var(--qa-dark-muted) !important;
}

.quick-welcome h1 em {
  color: #197a47 !important;
  background: linear-gradient(135deg, #125732 0%, #197a47 50%, #388a1e 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="dark"] .quick-welcome h1 em {
  color: #39d98b !important;
  background: linear-gradient(135deg, #b8ffd6 0%, #39d98b 50%, #16b873 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="dark"] .portal-choice,
html[data-theme="dark"] .quick-other-services,
html[data-theme="dark"] .quick-welcome-status,
html[data-theme="dark"] .quick-welcome-metrics a,
html[data-theme="dark"] .quick-other-services a,
html[data-theme="dark"] .resident-menu-panel {
  background: linear-gradient(180deg, #102019, #0e1b15) !important;
  border-color: rgba(57, 217, 139, 0.22) !important;
  color: var(--qa-dark-text) !important;
}

html[data-theme="light"] .portal-choice,
html[data-theme="light"] .quick-other-services,
html[data-theme="light"] .quick-welcome-status,
html[data-theme="light"] .quick-welcome-metrics a,
html[data-theme="light"] .quick-other-services a {
  background-color: rgba(255, 255, 255, 0.94) !important;
  color: var(--qa-light-text) !important;
}

.portal-choice a,
.portal-choice a:link,
.portal-choice a:visited,
.portal-choice a:hover,
.portal-choice a:focus,
.quick-action-page .btn.primary,
.quick-action-page .action,
.quick-action-page .complaint-btn,
.quick-action-page .complaint-primary,
.quick-action-page a[style*="gradient"] {
  color: var(--qa-green-button-text) !important;
  -webkit-text-fill-color: var(--qa-green-button-text) !important;
}

.portal-choice a *,
.quick-action-page .btn.primary *,
.quick-action-page .action *,
.quick-action-page .complaint-btn *,
.quick-action-page .complaint-primary * {
  color: var(--qa-green-button-text) !important;
  -webkit-text-fill-color: var(--qa-green-button-text) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.portal-choice a {
  background: linear-gradient(135deg, #147d49 0%, #1e9658 56%, #2b8a1f 100%) !important;
  border-color: transparent !important;
}

.quick-welcome:after {
  background: linear-gradient(90deg, #087443, #39d98b) !important;
}

.quick-welcome-metrics a,
.quick-welcome-status,
.portal-choice,
.quick-other-services,
.quick-other-services a {
  backdrop-filter: blur(10px) !important;
}

html[data-theme="dark"] .quick-action-footer a,
html[data-theme="dark"] .resident-menu-panel a {
  color: var(--qa-dark-heading) !important;
  -webkit-text-fill-color: var(--qa-dark-heading) !important;
}

html[data-theme="light"] .quick-action-footer a,
html[data-theme="light"] .resident-menu-panel a {
  color: #0b7044 !important;
  -webkit-text-fill-color: #0b7044 !important;
}

@media (max-width: 760px) {
  .quick-welcome h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  .portal-choice a {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* RESTORE system portal header responsive behavior */
@media (min-width: 761px) {
  body:not(.landing):not(.public) .sidebar,
  body:not(.landing):not(.public) .admin-side,
  body:not(.landing):not(.public) .staff-side,
  body:not(.landing):not(.public) .service-side,
  body:not(.landing):not(.public) .complaint-side {
    transform: none !important;
  }

  body.admin .portal-main,
  body.staff .portal-main {
    margin-left: 244px !important;
    width: calc(100% - 244px) !important;
    padding: 0 29px 35px !important;
  }

  body.portal .portal-main,
  .portal-main.service,
  .portal-main.complaint {
    margin-left: 240px !important;
    width: calc(100% - 240px) !important;
    padding: 0 29px 35px !important;
  }

  body:not(.landing):not(.public) .portal-top,
  body.admin .portal-top,
  body.staff .portal-top,
  .portal-main.service .portal-top,
  .portal-main.complaint .portal-top {
    position: relative !important;
    top: auto !important;
    min-height: 96px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body:not(.landing):not(.public) .menu-toggle,
  body.admin .menu-toggle,
  body.staff .menu-toggle,
  .portal-main.service .menu-toggle,
  .portal-main.complaint .menu-toggle {
    display: none !important;
  }

  body:not(.landing):not(.public) .portal-title,
  body:not(.landing):not(.public) .portal-top .portal-title {
    flex: 1 1 auto !important;
    min-width: 260px !important;
  }

  body:not(.landing):not(.public) .top-actions,
  body:not(.landing):not(.public) .portal-top .top-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 13px !important;
    margin-left: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
  }

  body:not(.landing):not(.public) .top-actions .search-box,
  body:not(.landing):not(.public) .portal-top .search-box {
    display: block !important;
    width: 250px !important;
    min-width: 250px !important;
  }
}

@media (max-width: 760px) {
  body:not(.landing):not(.public) .sidebar,
  body:not(.landing):not(.public) .admin-side,
  body:not(.landing):not(.public) .staff-side,
  body:not(.landing):not(.public) .service-side,
  body:not(.landing):not(.public) .complaint-side {
    transform: translateX(-100%) !important;
    transition: transform .25s ease !important;
  }

  body:not(.landing):not(.public) .sidebar.open,
  body:not(.landing):not(.public) .sidebar.is-open,
  body.sidebar-open .sidebar,
  body.sidebar-open .admin-side,
  body.sidebar-open .staff-side,
  body.sidebar-open .service-side,
  body.sidebar-open .complaint-side {
    transform: translateX(0) !important;
  }

  body.admin .portal-main,
  body.staff .portal-main,
  body.portal .portal-main,
  .portal-main,
  .portal-main.service,
  .portal-main.complaint {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 15px 25px !important;
  }

  body:not(.landing):not(.public) .portal-top,
  body.admin .portal-top,
  body.staff .portal-top,
  .portal-main.service .portal-top,
  .portal-main.complaint .portal-top {
    position: relative !important;
    top: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 18px 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    box-shadow: none !important;
  }

  body:not(.landing):not(.public) .menu-toggle,
  body.admin .menu-toggle,
  body.staff .menu-toggle,
  .portal-main.service .menu-toggle,
  .portal-main.complaint .menu-toggle {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }

  body:not(.landing):not(.public) .portal-title,
  body:not(.landing):not(.public) .portal-top .portal-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  body:not(.landing):not(.public) .portal-top h1 {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  body:not(.landing):not(.public) .portal-top p {
    font-size: 12px !important;
  }

  body:not(.landing):not(.public) .top-actions,
  body:not(.landing):not(.public) .portal-top .top-actions {
    width: auto !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    justify-content: flex-end !important;
  }

  body:not(.landing):not(.public) .top-actions .search-box,
  body:not(.landing):not(.public) .portal-top .search-box,
  body:not(.landing):not(.public) .top-actions .account-trigger-copy,
  body:not(.landing):not(.public) .top-actions .account-chevron {
    display: none !important;
  }
}

/* FINAL fixed portal header for web and mobile */
:root {
  --system-sidebar-admin: 244px;
  --system-sidebar-portal: 240px;
  --system-header-height: 88px;
  --system-header-mobile-height: 78px;
}

@media (min-width: 761px) {
  body.admin .portal-main,
  body.staff .portal-main {
    margin-left: var(--system-sidebar-admin) !important;
    width: calc(100% - var(--system-sidebar-admin)) !important;
    padding: calc(var(--system-header-height) + 22px) 29px 35px !important;
  }

  body.portal .portal-main,
  .portal-main.service,
  .portal-main.complaint {
    margin-left: var(--system-sidebar-portal) !important;
    width: calc(100% - var(--system-sidebar-portal)) !important;
    padding: calc(var(--system-header-height) + 22px) 29px 35px !important;
  }

  body.admin .portal-top,
  body.staff .portal-top {
    position: fixed !important;
    top: 0 !important;
    left: var(--system-sidebar-admin) !important;
    right: 0 !important;
    z-index: 950 !important;
    height: var(--system-header-height) !important;
    min-height: var(--system-header-height) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 29px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
    border-radius: 0 !important;
    backdrop-filter: blur(16px) !important;
  }

  body.portal .portal-top,
  .portal-main.service .portal-top,
  .portal-main.complaint .portal-top {
    position: fixed !important;
    top: 0 !important;
    left: var(--system-sidebar-portal) !important;
    right: 0 !important;
    z-index: 950 !important;
    height: var(--system-header-height) !important;
    min-height: var(--system-header-height) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 29px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
    border-radius: 0 !important;
    backdrop-filter: blur(16px) !important;
  }

  html[data-theme="light"] body:not(.landing):not(.public) .portal-top {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid rgba(17, 93, 56, 0.16) !important;
    box-shadow: 0 10px 26px rgba(13, 65, 42, 0.08) !important;
  }

  html[data-theme="dark"] body:not(.landing):not(.public) .portal-top {
    background: rgba(7, 19, 14, 0.96) !important;
    border-bottom: 1px solid rgba(57, 217, 139, 0.22) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34) !important;
  }

  body:not(.landing):not(.public) .portal-title {
    flex: 1 1 auto !important;
    min-width: 260px !important;
    overflow: hidden !important;
  }

  body:not(.landing):not(.public) .portal-top h1 {
    margin: 0 0 6px !important;
    font-size: 24px !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.landing):not(.public) .portal-top p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.landing):not(.public) .top-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: min(760px, 54vw) !important;
  }

  body:not(.landing):not(.public) .top-actions .search-box {
    display: block !important;
    width: clamp(220px, 21vw, 320px) !important;
    min-width: 220px !important;
    height: 44px !important;
  }

  body:not(.landing):not(.public) .menu-toggle {
    display: none !important;
  }
}

@media (max-width: 760px) {
  body.admin .portal-main,
  body.staff .portal-main,
  body.portal .portal-main,
  .portal-main,
  .portal-main.service,
  .portal-main.complaint {
    margin-left: 0 !important;
    width: 100% !important;
    padding: calc(var(--system-header-mobile-height) + 16px) 15px 25px !important;
  }

  body:not(.landing):not(.public) .portal-top,
  body.admin .portal-top,
  body.staff .portal-top,
  .portal-main.service .portal-top,
  .portal-main.complaint .portal-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 950 !important;
    height: var(--system-header-mobile-height) !important;
    min-height: var(--system-header-mobile-height) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 0 !important;
    backdrop-filter: blur(16px) !important;
  }

  html[data-theme="light"] body:not(.landing):not(.public) .portal-top {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid rgba(17, 93, 56, 0.16) !important;
    box-shadow: 0 10px 24px rgba(13, 65, 42, 0.10) !important;
  }

  html[data-theme="dark"] body:not(.landing):not(.public) .portal-top {
    background: rgba(7, 19, 14, 0.97) !important;
    border-bottom: 1px solid rgba(57, 217, 139, 0.22) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34) !important;
  }

  body:not(.landing):not(.public) .menu-toggle {
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    font-size: 22px !important;
  }

  body:not(.landing):not(.public) .portal-title {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body:not(.landing):not(.public) .portal-top h1 {
    margin: 0 0 3px !important;
    font-size: 20px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body:not(.landing):not(.public) .portal-top p {
    margin: 0 !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  body:not(.landing):not(.public) .top-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }

  body:not(.landing):not(.public) .top-actions .search-box,
  body:not(.landing):not(.public) .account-trigger-copy,
  body:not(.landing):not(.public) .account-chevron {
    display: none !important;
  }

  body:not(.landing):not(.public) .notification-trigger,
  body:not(.landing):not(.public) .theme-toggle-btn,
  body:not(.landing):not(.public) .account-trigger {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  body:not(.landing):not(.public) .account-trigger .user-dot,
  body:not(.landing):not(.public) .account-trigger .resident-avatar,
  body:not(.landing):not(.public) .account-trigger img {
    width: 34px !important;
    height: 34px !important;
  }
}

@media (max-width: 420px) {
  body:not(.landing):not(.public) .portal-top {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding-inline: 10px !important;
  }

  body:not(.landing):not(.public) .notification-trigger,
  body:not(.landing):not(.public) .theme-toggle-btn {
    display: none !important;
  }
}

/* HARD FIX: shared system fixed header */
.system-fixed-header {
  box-sizing: border-box !important;
  max-width: none !important;
  transform: none !important;
}

@media (min-width: 761px) {
  body.admin .system-fixed-header,
  body.staff .system-fixed-header {
    position: fixed !important;
    top: 0 !important;
    left: 244px !important;
    right: 0 !important;
    z-index: 5000 !important;
    width: calc(100vw - 244px) !important;
    max-width: calc(100vw - 244px) !important;
    height: 88px !important;
    min-height: 88px !important;
    margin: 0 !important;
    padding: 0 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  body.portal .system-fixed-header,
  body.portal .portal-main.service > .system-fixed-header,
  body.portal .portal-main.complaint > .system-fixed-header {
    position: fixed !important;
    top: 0 !important;
    left: 240px !important;
    right: 0 !important;
    z-index: 5000 !important;
    width: calc(100vw - 240px) !important;
    max-width: calc(100vw - 240px) !important;
    height: 88px !important;
    min-height: 88px !important;
    margin: 0 !important;
    padding: 0 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  body.admin .portal-main,
  body.staff .portal-main,
  body.portal .portal-main,
  body.portal .portal-main.service,
  body.portal .portal-main.complaint {
    padding-top: 110px !important;
  }

  .system-fixed-header .menu-toggle {
    display: none !important;
  }

  .system-fixed-header .portal-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .system-fixed-header h1 {
    margin: 0 0 6px !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .system-fixed-header p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .system-fixed-header .top-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }

  .system-fixed-header .search-box {
    display: block !important;
    width: clamp(230px, 22vw, 320px) !important;
    min-width: 230px !important;
    height: 44px !important;
  }
}

@media (max-width: 760px) {
  body.admin .system-fixed-header,
  body.staff .system-fixed-header,
  body.portal .system-fixed-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 5000 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  body.admin .portal-main,
  body.staff .portal-main,
  body.portal .portal-main,
  body.portal .portal-main.service,
  body.portal .portal-main.complaint {
    padding-top: 94px !important;
  }

  .system-fixed-header .menu-toggle {
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
  }

  .system-fixed-header .portal-title {
    min-width: 0 !important;
  }

  .system-fixed-header h1 {
    margin: 0 0 3px !important;
    font-size: 20px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .system-fixed-header p {
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .system-fixed-header .top-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    width: auto !important;
    margin: 0 !important;
  }

  .system-fixed-header .search-box,
  .system-fixed-header .account-trigger-copy,
  .system-fixed-header .account-chevron {
    display: none !important;
  }
}

html[data-theme="light"] .system-fixed-header {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid rgba(17, 93, 56, 0.16) !important;
  box-shadow: 0 10px 24px rgba(13, 65, 42, 0.08) !important;
}

html[data-theme="dark"] .system-fixed-header {
  background: rgba(7, 19, 14, 0.98) !important;
  border-bottom: 1px solid rgba(57, 217, 139, 0.22) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34) !important;
}

/* FINAL landing page arrangement and mobile responsive polish */
body.landing {
  overflow-x: hidden !important;
}

body.landing .landing-header {
  box-sizing: border-box !important;
}

body.landing .landing-brand {
  min-width: 0 !important;
}

body.landing .landing-brand strong,
body.landing .landing-brand small {
  overflow-wrap: normal !important;
}

body.landing .hero-copy,
body.landing .section-title,
body.landing .left-heading,
body.landing .service-grid,
body.landing .steps-grid,
body.landing .feature-grid,
body.landing .updates-contact,
body.landing .landing-cta,
body.landing .footer-grid,
body.landing .footer-bottom {
  box-sizing: border-box !important;
}

body.landing .landing-btn,
body.landing .portal-card-button,
body.landing .contact-button {
  min-width: 0 !important;
  text-align: center !important;
}

body.landing .portal-card,
body.landing .step-card,
body.landing .feature-card,
body.landing .announcement-panel,
body.landing .contact-panel,
body.landing .landing-cta {
  overflow: hidden !important;
}

@media (min-width: 921px) {
  body.landing .landing-header {
    grid-template-columns: minmax(260px, 330px) minmax(420px, 1fr) auto !important;
  }

  body.landing .landing-nav {
    justify-self: center !important;
  }

  body.landing .landing-auth {
    justify-self: end !important;
  }
}

@media (max-width: 920px) {
  html {
    scroll-padding-top: 84px !important;
  }

  body.landing .landing-header,
  body.landing .landing-header.scrolled {
    min-height: 84px !important;
    height: 84px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    align-items: center !important;
  }

  body.landing .landing-brand {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    width: 100% !important;
  }

  body.landing .landing-seal {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    padding: 3px !important;
  }

  body.landing .landing-brand strong {
    max-width: 118px !important;
    font-size: 18px !important;
    line-height: 1.03 !important;
    white-space: normal !important;
    letter-spacing: -0.04em !important;
  }

  body.landing .landing-brand small {
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.landing .landing-auth {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body.landing .landing-auth .theme-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  body.landing .landing-auth .btn-outline {
    display: none !important;
  }

  body.landing .landing-auth .btn-gradient {
    display: inline-flex !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
  }

  body.landing .landing-auth .btn-gradient svg {
    display: none !important;
  }

  body.landing .nav-toggle {
    order: 3 !important;
    display: grid !important;
    place-content: center !important;
    gap: 5px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    border-radius: 9px !important;
  }

  body.landing .landing-nav {
    top: 92px !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 120 !important;
    padding: 10px !important;
  }

  body.landing .landing-nav a {
    height: 42px !important;
    font-size: 14px !important;
  }

  body.landing .landing-hero {
    display: block !important;
    min-height: auto !important;
    padding: 124px 18px 54px !important;
    background:
      radial-gradient(circle at 8% 4%, rgba(29, 185, 109, .12), transparent 34%),
      linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%) !important;
  }

  html[data-theme="dark"] body.landing .landing-hero {
    background:
      radial-gradient(circle at 8% 4%, rgba(57, 217, 139, .15), transparent 34%),
      linear-gradient(180deg, #06110c 0%, #0b1812 100%) !important;
  }

  body.landing .hero-copy {
    max-width: none !important;
    width: 100% !important;
  }

  body.landing .welcome-pill {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  body.landing .hero-copy h1 {
    margin: 24px 0 16px !important;
    max-width: 100% !important;
    font-size: clamp(40px, 12vw, 50px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.05em !important;
  }

  body.landing .hero-copy p {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  body.landing .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 26px !important;
  }

  body.landing .hero-actions .landing-btn {
    width: 100% !important;
    min-height: 43px !important;
    justify-content: center !important;
    font-size: 13px !important;
  }

  body.landing .hero-summary {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    max-width: none !important;
    margin-top: 30px !important;
  }

  body.landing .hero-summary span {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    min-height: 60px !important;
    gap: 12px !important;
    font-size: 14px !important;
  }

  body.landing .hero-media {
    display: none !important;
  }

  body.landing .trust-card {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 30px 0 0 !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 14px !important;
    border-radius: 14px !important;
  }

  body.landing .landing-hero:after {
    height: 42px !important;
    bottom: -24px !important;
  }

  body.landing .landing-section {
    padding: 46px 18px !important;
  }

  body.landing .section-title {
    margin-bottom: 22px !important;
  }

  body.landing .section-title h2,
  body.landing .left-heading,
  body.landing .landing-cta h2 {
    font-size: clamp(26px, 8vw, 34px) !important;
    line-height: 1.15 !important;
  }

  body.landing .section-title p {
    font-size: 14.5px !important;
  }

  body.landing .steps-grid,
  body.landing .service-grid,
  body.landing .feature-grid,
  body.landing .updates-contact {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.landing .step-card,
  body.landing .feature-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 14px !important;
    min-height: auto !important;
    padding: 18px !important;
  }

  body.landing .step-card b {
    position: static !important;
    grid-column: 1 / -1 !important;
    margin-bottom: -6px !important;
    font-size: 13px !important;
  }

  body.landing .step-card > span,
  body.landing .feature-card > span,
  body.landing .portal-icon {
    width: 56px !important;
    height: 56px !important;
  }

  body.landing .step-card:not(:last-child):after {
    display: none !important;
  }

  body.landing .portal-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 22px !important;
  }

  body.landing .portal-card ul {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.landing .portal-card-button,
  body.landing .contact-button {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 14px !important;
  }

  body.landing .announcement-panel,
  body.landing .contact-panel {
    padding: 18px !important;
  }

  body.landing .announcement-item {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.landing .announcement-item time {
    width: 100% !important;
    height: 56px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  body.landing .map-card {
    min-height: 260px !important;
  }

  body.landing .landing-cta {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin: 0 18px !important;
    padding: 28px 22px !important;
    text-align: left !important;
  }

  body.landing .cta-illustration {
    display: none !important;
  }

  body.landing .cta-actions {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.landing .landing-cta .landing-btn {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  body.landing .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 34px 26px !important;
  }

  body.landing .footer-brand {
    align-items: center !important;
  }

  body.landing .footer-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 18px 26px !important;
  }

  body.landing .footer-bottom nav {
    gap: 12px !important;
  }

  body.landing .back-to-top {
    right: 16px !important;
    bottom: 16px !important;
    width: 46px !important;
    height: 46px !important;
  }
}

@media (max-width: 390px) {
  body.landing .landing-header,
  body.landing .landing-header.scrolled {
    padding-inline: 10px !important;
    gap: 6px !important;
  }

  body.landing .landing-brand {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  body.landing .landing-seal {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  body.landing .landing-brand strong {
    max-width: 102px !important;
    font-size: 16px !important;
  }

  body.landing .landing-auth .theme-toggle-btn,
  body.landing .nav-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  body.landing .landing-auth .btn-gradient {
    padding-inline: 10px !important;
    font-size: 12px !important;
  }

  body.landing .landing-hero {
    padding-inline: 16px !important;
  }

  body.landing .hero-copy h1 {
    font-size: clamp(36px, 11.5vw, 44px) !important;
  }
}

/* FINAL Admin/Staff header alignment and responsive fix */
body.admin,
body.staff {
  overflow-x: hidden !important;
}

@media (min-width: 761px) {
  body.admin .portal-main,
  body.staff .portal-main {
    box-sizing: border-box !important;
    margin-left: 244px !important;
    width: calc(100vw - 244px) !important;
    max-width: calc(100vw - 244px) !important;
    padding: 112px 30px 36px !important;
  }

  body.admin .portal-main > .system-fixed-header,
  body.staff .portal-main > .system-fixed-header,
  body.admin .portal-top.system-fixed-header,
  body.staff .portal-top.system-fixed-header {
    position: fixed !important;
    inset: 0 0 auto 244px !important;
    z-index: 9000 !important;
    box-sizing: border-box !important;
    width: calc(100vw - 244px) !important;
    max-width: calc(100vw - 244px) !important;
    min-width: 0 !important;
    height: 88px !important;
    min-height: 88px !important;
    margin: 0 !important;
    padding: 0 30px !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 22px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  body.admin .portal-top.system-fixed-header .portal-title,
  body.staff .portal-top.system-fixed-header .portal-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
  }

  body.admin .portal-top.system-fixed-header h1,
  body.staff .portal-top.system-fixed-header h1 {
    margin: 0 0 6px !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.admin .portal-top.system-fixed-header p,
  body.staff .portal-top.system-fixed-header p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.admin .portal-top.system-fixed-header .top-actions,
  body.staff .portal-top.system-fixed-header .top-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: min(760px, 54vw) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }

  body.admin .portal-top.system-fixed-header .search-box,
  body.staff .portal-top.system-fixed-header .search-box {
    display: block !important;
    flex: 0 1 320px !important;
    width: clamp(240px, 22vw, 330px) !important;
    min-width: 220px !important;
    max-width: 330px !important;
    height: 44px !important;
  }

  body.admin .portal-top.system-fixed-header .menu-toggle,
  body.staff .portal-top.system-fixed-header .menu-toggle {
    display: none !important;
  }
}

@media (max-width: 760px) {
  body.admin .portal-main,
  body.staff .portal-main {
    box-sizing: border-box !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 94px 14px 28px !important;
  }

  body.admin .portal-main > .system-fixed-header,
  body.staff .portal-main > .system-fixed-header,
  body.admin .portal-top.system-fixed-header,
  body.staff .portal-top.system-fixed-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 9000 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  body.admin .portal-top.system-fixed-header .menu-toggle,
  body.staff .portal-top.system-fixed-header .menu-toggle {
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
  }

  body.admin .portal-top.system-fixed-header .portal-title,
  body.staff .portal-top.system-fixed-header .portal-title {
    min-width: 0 !important;
    width: auto !important;
  }

  body.admin .portal-top.system-fixed-header h1,
  body.staff .portal-top.system-fixed-header h1 {
    margin: 0 0 3px !important;
    font-size: 20px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.admin .portal-top.system-fixed-header p,
  body.staff .portal-top.system-fixed-header p {
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  body.admin .portal-top.system-fixed-header .top-actions,
  body.staff .portal-top.system-fixed-header .top-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.admin .portal-top.system-fixed-header .search-box,
  body.staff .portal-top.system-fixed-header .search-box,
  body.admin .portal-top.system-fixed-header .account-trigger-copy,
  body.staff .portal-top.system-fixed-header .account-trigger-copy,
  body.admin .portal-top.system-fixed-header .account-chevron,
  body.staff .portal-top.system-fixed-header .account-chevron {
    display: none !important;
  }
}

@media (max-width: 420px) {
  body.admin .portal-main > .system-fixed-header,
  body.staff .portal-main > .system-fixed-header,
  body.admin .portal-top.system-fixed-header,
  body.staff .portal-top.system-fixed-header {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding-inline: 10px !important;
  }

  body.admin .portal-top.system-fixed-header .notification-trigger,
  body.staff .portal-top.system-fixed-header .notification-trigger,
  body.admin .portal-top.system-fixed-header .theme-toggle-btn,
  body.staff .portal-top.system-fixed-header .theme-toggle-btn {
    display: none !important;
  }
}

/* FINAL desktop breadcrumb/sidebar icon-collapse for Admin, Staff, and Resident portals */
:root {
  --portal-sidebar-full: 244px;
  --portal-sidebar-icon: 76px;
}

@media (min-width: 761px) {
  body.admin .portal-top.system-fixed-header,
  body.staff .portal-top.system-fixed-header,
  body.portal .portal-top.system-fixed-header,
  body.portal .portal-main.service > .system-fixed-header,
  body.portal .portal-main.complaint > .system-fixed-header {
    left: var(--portal-sidebar-full) !important;
    width: calc(100vw - var(--portal-sidebar-full)) !important;
    max-width: calc(100vw - var(--portal-sidebar-full)) !important;
    display: flex !important;
  }

  body.admin .portal-main,
  body.staff .portal-main,
  body.portal .portal-main,
  body.portal .portal-main.service,
  body.portal .portal-main.complaint {
    margin-left: var(--portal-sidebar-full) !important;
    width: calc(100vw - var(--portal-sidebar-full)) !important;
    max-width: calc(100vw - var(--portal-sidebar-full)) !important;
  }

  body:not(.landing):not(.public) .portal-top.system-fixed-header .menu-toggle,
  body.admin .portal-top.system-fixed-header .menu-toggle,
  body.staff .portal-top.system-fixed-header .menu-toggle,
  body.portal .portal-top.system-fixed-header .menu-toggle,
  body.portal .portal-main.service > .system-fixed-header .menu-toggle,
  body.portal .portal-main.complaint > .system-fixed-header .menu-toggle {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(20, 112, 70, .22) !important;
    border-radius: 10px !important;
    color: #071f18 !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 8px 18px rgba(4, 35, 24, .08) !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  html[data-theme="dark"] body:not(.landing):not(.public) .portal-top.system-fixed-header .menu-toggle {
    color: #f4fff8 !important;
    border-color: rgba(91, 235, 157, .28) !important;
    background: rgba(11, 34, 24, .92) !important;
  }

  body.sidebar-collapsed .sidebar,
  body.sidebar-collapsed .service-side,
  body.sidebar-collapsed .complaint-side,
  body.sidebar-collapsed .admin-side,
  body.sidebar-collapsed .staff-side {
    transform: none !important;
    width: var(--portal-sidebar-icon) !important;
    min-width: var(--portal-sidebar-icon) !important;
    max-width: var(--portal-sidebar-icon) !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.sidebar-collapsed.admin .portal-main,
  body.sidebar-collapsed.staff .portal-main,
  body.sidebar-collapsed.portal .portal-main,
  body.sidebar-collapsed.portal .portal-main.service,
  body.sidebar-collapsed.portal .portal-main.complaint {
    margin-left: var(--portal-sidebar-icon) !important;
    width: calc(100vw - var(--portal-sidebar-icon)) !important;
    max-width: calc(100vw - var(--portal-sidebar-icon)) !important;
  }

  body.sidebar-collapsed.admin .portal-top.system-fixed-header,
  body.sidebar-collapsed.staff .portal-top.system-fixed-header,
  body.sidebar-collapsed.portal .portal-top.system-fixed-header,
  body.sidebar-collapsed.portal .portal-main.service > .system-fixed-header,
  body.sidebar-collapsed.portal .portal-main.complaint > .system-fixed-header {
    left: var(--portal-sidebar-icon) !important;
    width: calc(100vw - var(--portal-sidebar-icon)) !important;
    max-width: calc(100vw - var(--portal-sidebar-icon)) !important;
  }

  body.sidebar-collapsed .sidebar .side-brand,
  body.sidebar-collapsed .sidebar .side-profile,
  body.sidebar-collapsed .sidebar .staff-brand,
  body.sidebar-collapsed .sidebar .admin-profile,
  body.sidebar-collapsed .service-side .side-brand,
  body.sidebar-collapsed .complaint-side .side-brand,
  body.sidebar-collapsed .admin-side .side-brand,
  body.sidebar-collapsed .staff-side .side-brand {
    min-height: 88px !important;
    height: 88px !important;
    padding: 12px 8px !important;
    gap: 0 !important;
  }

  body.sidebar-collapsed .sidebar .side-profile-avatar,
  body.sidebar-collapsed .sidebar .staff-brand-seal,
  body.sidebar-collapsed .sidebar .seal,
  body.sidebar-collapsed .service-side .side-profile-avatar,
  body.sidebar-collapsed .complaint-side .side-profile-avatar,
  body.sidebar-collapsed .admin-side .side-profile-avatar,
  body.sidebar-collapsed .staff-side .staff-brand-seal {
    flex-basis: 46px !important;
    width: 46px !important;
    height: 46px !important;
    padding: 3px !important;
  }

  body.sidebar-collapsed .side-profile-copy,
  body.sidebar-collapsed .side-label,
  body.sidebar-collapsed .side-caret,
  body.sidebar-collapsed .sidebar nav p,
  body.sidebar-collapsed .admin-side-promo,
  body.sidebar-collapsed .staff-side-promo,
  body.sidebar-collapsed .service-side-promo,
  body.sidebar-collapsed .complaint-side-promo,
  body.sidebar-collapsed .side-submenu {
    display: none !important;
  }

  body.sidebar-collapsed .sidebar nav,
  body.sidebar-collapsed .service-side nav,
  body.sidebar-collapsed .complaint-side nav,
  body.sidebar-collapsed .admin-side nav,
  body.sidebar-collapsed .staff-side nav {
    padding: 10px 8px !important;
  }

  body.sidebar-collapsed .sidebar nav > a.side-link,
  body.sidebar-collapsed .sidebar nav summary.side-link,
  body.sidebar-collapsed .service-side nav > a.side-link,
  body.sidebar-collapsed .complaint-side nav > a.side-link,
  body.sidebar-collapsed .admin-side nav > a.side-link,
  body.sidebar-collapsed .staff-side nav > a.side-link,
  body.sidebar-collapsed .staff-side nav summary.side-link {
    display: grid !important;
    place-items: center !important;
    grid-template-columns: 1fr !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 5px auto !important;
    padding: 0 !important;
    border-radius: 13px !important;
    text-align: center !important;
  }

  body.sidebar-collapsed .side-icon,
  body.sidebar-collapsed .sidebar .side-icon,
  body.sidebar-collapsed .service-side .side-icon,
  body.sidebar-collapsed .complaint-side .side-icon,
  body.sidebar-collapsed .admin-side .side-icon,
  body.sidebar-collapsed .staff-side .side-icon {
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    margin: 0 !important;
    font-size: 16px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  body.sidebar-collapsed .logout,
  body.sidebar-collapsed .admin-logout,
  body.sidebar-collapsed .staff-logout {
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 8px auto 14px !important;
    padding: 0 !important;
    border-radius: 13px !important;
    font-size: 0 !important;
  }

  body.sidebar-collapsed .logout span,
  body.sidebar-collapsed .admin-logout span,
  body.sidebar-collapsed .staff-logout span {
    font-size: 16px !important;
  }

  body.sidebar-collapsed .sidebar-close {
    display: none !important;
  }
}

/* FINAL Manage Residents UI arrangement */
.admin-residents-page {
  display: grid !important;
  gap: 18px !important;
}

.admin-residents-page .resident-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
}

.admin-residents-page .resident-summary-grid article {
  min-height: 84px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(12, 112, 67, .18) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 16px 32px rgba(8, 68, 44, .08) !important;
}

.admin-residents-page .resident-summary-grid article span {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  color: #087443 !important;
  background: #e4f7ed !important;
}

.admin-residents-page .resident-summary-grid article b {
  color: #071f18 !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

.admin-residents-page .resident-summary-grid article small {
  color: #48675b !important;
  font-size: 12px !important;
}

.admin-residents-page .residents-toolbar {
  padding: 16px !important;
  border: 1px solid rgba(12, 112, 67, .16) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 16px 34px rgba(8, 68, 44, .07) !important;
}

.admin-residents-page .residents-filters {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px) auto auto !important;
  gap: 12px !important;
  align-items: end !important;
  margin: 0 !important;
}

.admin-residents-page .residents-filters label {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
  color: #315448 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.admin-residents-page .residents-filters input,
.admin-residents-page .residents-filters select {
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid #bfdccd !important;
  border-radius: 10px !important;
  color: #071f18 !important;
  background: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.admin-residents-page .residents-filters .btn {
  min-width: 92px !important;
  height: 46px !important;
  border-radius: 10px !important;
}

.admin-residents-page .residents-table-card {
  overflow: hidden !important;
  border: 1px solid rgba(12, 112, 67, .16) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 18px 38px rgba(8, 68, 44, .08) !important;
}

.admin-residents-page .residents-table-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid rgba(12, 112, 67, .14) !important;
  background: linear-gradient(180deg, #f8fffb, #eef8f3) !important;
}

.admin-residents-page .residents-table-head span {
  display: block !important;
  margin-bottom: 5px !important;
  color: #087443 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

.admin-residents-page .residents-table-head h2 {
  margin: 0 !important;
  color: #071f18 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.admin-residents-page .residents-table-head small {
  color: #4d665e !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.admin-residents-page .residents-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
}

.admin-residents-page .residents-table {
  width: 100% !important;
  min-width: 1180px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}

.admin-residents-page .residents-table th {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(12, 112, 67, .12) !important;
  color: #24483c !important;
  background: #f1faf5 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.admin-residents-page .residents-table td {
  vertical-align: top !important;
  padding: 16px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(12, 112, 67, .10) !important;
  color: #071f18 !important;
  font-size: 12px !important;
}

.admin-residents-page .residents-table th:nth-child(1),
.admin-residents-page .residents-table td:nth-child(1) { width: 190px !important; }
.admin-residents-page .residents-table th:nth-child(2),
.admin-residents-page .residents-table td:nth-child(2) { width: 250px !important; }
.admin-residents-page .residents-table th:nth-child(3),
.admin-residents-page .residents-table td:nth-child(3) { width: 310px !important; }
.admin-residents-page .residents-table th:nth-child(4),
.admin-residents-page .residents-table td:nth-child(4) { width: 140px !important; }
.admin-residents-page .residents-table th:nth-child(5),
.admin-residents-page .residents-table td:nth-child(5) { width: 130px !important; }
.admin-residents-page .residents-table th:nth-child(6),
.admin-residents-page .residents-table td:nth-child(6) { width: 130px !important; }
.admin-residents-page .residents-table th:nth-child(7),
.admin-residents-page .residents-table td:nth-child(7) { width: 330px !important; }

.admin-residents-page .resident-row:hover td {
  background: rgba(231, 248, 239, .45) !important;
}

.admin-residents-page .resident-person {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 11px !important;
  align-items: center !important;
}

.admin-residents-page .resident-avatar-mini {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  color: #087443 !important;
  background: #e4f7ed !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.admin-residents-page .resident-person strong,
.admin-residents-page .resident-place strong {
  display: block !important;
  color: #071f18 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

.admin-residents-page .resident-person small,
.admin-residents-page .resident-contact small,
.admin-residents-page .resident-place small {
  display: block !important;
  margin-top: 3px !important;
  color: #5d706a !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

.admin-residents-page .resident-contact span,
.admin-residents-page .resident-address,
.admin-residents-page .resident-date {
  display: block !important;
  color: #071f18 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
}

.admin-residents-page .resident-approval-actions {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.admin-residents-page .resident-approve-form,
.admin-residents-page .resident-decline-form {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
}

.admin-residents-page .resident-decline-form {
  grid-template-columns: minmax(0, 1fr) 120px !important;
}

.admin-residents-page .resident-approval-actions .btn {
  width: 100% !important;
  min-height: 42px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.admin-residents-page .resident-approval-actions input {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid #c5ddcf !important;
  border-radius: 9px !important;
  color: #071f18 !important;
  background: #fff !important;
  font-size: 12px !important;
}

.admin-residents-page .resident-approved-note {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  color: #5d706a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.admin-residents-page .residents-empty-state {
  display: grid !important;
  place-items: center !important;
  min-height: 260px !important;
  padding: 34px !important;
  text-align: center !important;
}

.admin-residents-page .residents-empty-state > span {
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 58px !important;
  margin-bottom: 12px !important;
  border-radius: 50% !important;
  color: #087443 !important;
  background: #e4f7ed !important;
}

.admin-residents-page .pagination {
  margin: 0 !important;
  padding: 4px 2px 0 !important;
}

html[data-theme="dark"] .admin-residents-page .resident-summary-grid article,
html[data-theme="dark"] .admin-residents-page .residents-toolbar,
html[data-theme="dark"] .admin-residents-page .residents-table-card {
  border-color: rgba(91, 235, 157, .18) !important;
  background: rgba(11, 34, 24, .92) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] .admin-residents-page .residents-table-head,
html[data-theme="dark"] .admin-residents-page .residents-table th {
  border-color: rgba(91, 235, 157, .16) !important;
  background: rgba(13, 48, 33, .94) !important;
}

html[data-theme="dark"] .admin-residents-page .resident-summary-grid article b,
html[data-theme="dark"] .admin-residents-page .residents-table-head h2,
html[data-theme="dark"] .admin-residents-page .residents-table td,
html[data-theme="dark"] .admin-residents-page .resident-person strong,
html[data-theme="dark"] .admin-residents-page .resident-place strong,
html[data-theme="dark"] .admin-residents-page .resident-contact span,
html[data-theme="dark"] .admin-residents-page .resident-address,
html[data-theme="dark"] .admin-residents-page .resident-date {
  color: #f4fff8 !important;
}

html[data-theme="dark"] .admin-residents-page .resident-summary-grid article small,
html[data-theme="dark"] .admin-residents-page .residents-table-head small,
html[data-theme="dark"] .admin-residents-page .resident-person small,
html[data-theme="dark"] .admin-residents-page .resident-contact small,
html[data-theme="dark"] .admin-residents-page .resident-place small,
html[data-theme="dark"] .admin-residents-page .resident-approved-note {
  color: #b8d2c6 !important;
}

html[data-theme="dark"] .admin-residents-page .residents-filters input,
html[data-theme="dark"] .admin-residents-page .residents-filters select,
html[data-theme="dark"] .admin-residents-page .resident-approval-actions input {
  border-color: rgba(91, 235, 157, .24) !important;
  color: #f4fff8 !important;
  background: #07130e !important;
}

html[data-theme="dark"] .admin-residents-page .resident-row:hover td {
  background: rgba(26, 93, 60, .34) !important;
}

@media (max-width: 1200px) {
  .admin-residents-page .resident-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-residents-page .residents-filters {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) !important;
  }

  .admin-residents-page .residents-filters .btn {
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  .admin-residents-page .resident-summary-grid,
  .admin-residents-page .residents-filters {
    grid-template-columns: 1fr !important;
  }

  .admin-residents-page .residents-table-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .admin-residents-page .residents-table-wrap {
    overflow: visible !important;
  }

  .admin-residents-page .residents-table,
  .admin-residents-page .residents-table thead,
  .admin-residents-page .residents-table tbody,
  .admin-residents-page .residents-table tr,
  .admin-residents-page .residents-table th,
  .admin-residents-page .residents-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .admin-residents-page .residents-table {
    min-width: 0 !important;
  }

  .admin-residents-page .residents-table thead {
    display: none !important;
  }

  .admin-residents-page .resident-row {
    margin: 12px !important;
    border: 1px solid rgba(12, 112, 67, .16) !important;
    border-radius: 13px !important;
    background: #fff !important;
    overflow: hidden !important;
  }

  .admin-residents-page .residents-table td {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 13px 14px !important;
    border-bottom: 1px solid rgba(12, 112, 67, .10) !important;
  }

  .admin-residents-page .residents-table td::before {
    content: attr(data-label) !important;
    color: #557066 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
  }

  .admin-residents-page .resident-decline-form {
    grid-template-columns: 1fr !important;
  }

  html[data-theme="dark"] .admin-residents-page .resident-row {
    border-color: rgba(91, 235, 157, .18) !important;
    background: rgba(7, 19, 14, .96) !important;
  }
}

@media (max-width: 480px) {
  .admin-residents-page .residents-table td {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .admin-residents-page .resident-person {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }

  .admin-residents-page .resident-avatar-mini {
    width: 38px !important;
    height: 38px !important;
  }
}

/* FINAL Admin pages using Staff UI layout */
body.admin .admin-staff-style-page {
  display: grid !important;
  gap: 18px !important;
}

body.admin .admin-staff-style-page .staff-panel,
body.admin .admin-staff-style-page .staff-metric,
body.admin .admin-staff-style-page .staff-resident-mode-tabs a {
  border-color: rgba(12, 112, 67, .16) !important;
}

body.admin .admin-status-mini-form {
  display: grid !important;
  grid-template-columns: minmax(130px, .8fr) minmax(140px, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 360px !important;
  margin: 0 !important;
}

body.admin .admin-status-mini-form select,
body.admin .admin-status-mini-form input {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 10px !important;
  border: 1px solid #c8e1d2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #071f18 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body.admin .admin-status-mini-form .btn {
  min-width: 72px !important;
  height: 38px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}

body.admin .admin-resident-actions {
  display: grid !important;
  gap: 10px !important;
}

body.admin .admin-resident-actions form {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.admin .admin-resident-actions input {
  width: 100% !important;
  height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid #c8e1d2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #071f18 !important;
}

body.admin .admin-resident-actions .btn {
  width: 100% !important;
  min-height: 42px !important;
}

html[data-theme="dark"] body.admin .admin-status-mini-form select,
html[data-theme="dark"] body.admin .admin-status-mini-form input,
html[data-theme="dark"] body.admin .admin-resident-actions input {
  border-color: rgba(91, 235, 157, .24) !important;
  background: #07130e !important;
  color: #f4fff8 !important;
}

@media (max-width: 1180px) {
  body.admin .admin-status-mini-form {
    grid-template-columns: 1fr !important;
    min-width: 220px !important;
  }
}

@media (max-width: 760px) {
  body.admin .admin-status-mini-form {
    min-width: 0 !important;
  }
}

/* Admin dashboard: make completed and resolved work immediately visible. */
body.admin .admin-completion-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0;
}

body.admin .admin-completion-panel {
  min-width: 0;
  border-color: #cfe8da !important;
}

body.admin .admin-completion-panel .panel-title {
  align-items: flex-start;
}

body.admin .admin-panel-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #187b48 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.admin .admin-completed-item {
  background: #f4fcf7 !important;
  border-color: #cce9d8 !important;
}

body.admin .admin-completed-item > span {
  color: #fff !important;
  background: #168447 !important;
}

body.admin .admin-completion-panel .badge,
body.admin .admin-completion-panel .status-badge {
  white-space: nowrap;
}

html[data-theme="dark"] body.admin .admin-completion-panel {
  border-color: #295842 !important;
  background: #0d1e16 !important;
}

html[data-theme="dark"] body.admin .admin-panel-eyebrow {
  color: #55e79a !important;
}

html[data-theme="dark"] body.admin .admin-completed-item {
  border-color: #28573f !important;
  background: #102a1d !important;
}

html[data-theme="dark"] body.admin .admin-completed-item > span {
  color: #fff !important;
  background: #239457 !important;
}

@media (max-width: 960px) {
  body.admin .admin-completion-overview {
    grid-template-columns: 1fr;
  }
}

/* Admin dashboard layout and record list refinements. */
body.admin .admin-dashboard-pulse {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0 20px;
}
body.admin .admin-dashboard-pulse article {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #d2e7da;
  border-radius: 12px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 28px rgba(20,60,45,.06);
}
body.admin .admin-dashboard-pulse .pulse-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #087443;
  background: #e3f5eb;
  font-size: 19px;
  font-weight: 900;
}
body.admin .admin-dashboard-pulse .pulse-amber { color: #a5660d; background: #fff2dc; }
body.admin .admin-dashboard-pulse .pulse-blue { color: #315fb0; background: #e9f0ff; }
body.admin .admin-dashboard-pulse article > div { display: grid; gap: 3px; min-width: 0; }
body.admin .admin-dashboard-pulse article strong { color: #10271d; font-size: 20px; line-height: 1; }
body.admin .admin-dashboard-pulse article small { color: #62766c; font-size: 10px; line-height: 1.4; }
body.admin .admin-dashboard-pulse article a { color: #087443; font-size: 10px; font-weight: 900; text-decoration: none; white-space: nowrap; }
body.admin .admin-dashboard-pulse article a:hover { text-decoration: underline; }
body.admin .admin-completion-panel { min-height: 0; }
body.admin .admin-completion-panel .admin-summary-list { display: grid; gap: 9px; }
body.admin .admin-summary-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
body.admin .admin-summary-item > div { min-width: 0; }
body.admin .admin-summary-item strong,
body.admin .admin-summary-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.admin .admin-completion-panel .admin-record-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  background: #168447;
  font-size: 16px;
  font-weight: 900;
}
body.admin .admin-record-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 112px;
  min-height: 27px;
  padding: 4px 9px;
  border-radius: 99px;
  color: #087443;
  background: #e2f5ea;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}
body.admin .admin-hero { gap: 26px; }
body.admin .admin-hero > div:first-child { max-width: 760px; }
body.admin .admin-hero-actions { flex: 0 0 auto; }
html[data-theme="dark"] body.admin .admin-dashboard-pulse article { border-color: #28533e; background: #10271c; }
html[data-theme="dark"] body.admin .admin-dashboard-pulse article strong { color: #f2fff8; }
html[data-theme="dark"] body.admin .admin-dashboard-pulse article small { color: #afc7b9; }
html[data-theme="dark"] body.admin .admin-dashboard-pulse article a { color: #67e6a0; }
html[data-theme="dark"] body.admin .admin-dashboard-pulse .pulse-icon { color: #63e59d; background: #173b29; }
html[data-theme="dark"] body.admin .admin-dashboard-pulse .pulse-amber { color: #ffd083; background: #40331b; }
html[data-theme="dark"] body.admin .admin-dashboard-pulse .pulse-blue { color: #a9c3ff; background: #1d2e50; }
html[data-theme="dark"] body.admin .admin-record-status { color: #8ef0b8; background: #173d2a; }

@media (max-width: 960px) {
  body.admin .admin-dashboard-pulse { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body.admin .admin-dashboard-pulse article { grid-template-columns: 36px minmax(0,1fr) auto; gap: 9px; padding: 11px; }
  body.admin .admin-dashboard-pulse .pulse-icon { width: 36px; height: 36px; }
  body.admin .admin-summary-item { grid-template-columns: 34px minmax(0,1fr); gap: 9px; }
  body.admin .admin-summary-item > .admin-record-status,
  body.admin .admin-summary-item > .badge,
  body.admin .admin-summary-item > .status-badge { grid-column: 2; justify-self: start; }
  body.admin .admin-completion-panel .admin-record-icon { width: 34px; height: 34px; }
}

/* Admin record details and clickable request/complaint rows. */
body.admin .staff-service-page.admin-staff-style-page .staff-table tbody tr[data-row-href],
body.admin .staff-complaints-page.admin-staff-style-page .staff-table tbody tr[data-row-href] {
  cursor: pointer;
}

body.admin .staff-service-page.admin-staff-style-page .staff-table tbody tr[data-row-href]:focus-visible,
body.admin .staff-complaints-page.admin-staff-style-page .staff-table tbody tr[data-row-href]:focus-visible {
  outline: 3px solid rgba(20, 133, 76, .42);
  outline-offset: -3px;
}

body.admin .admin-detail-status-form {
  display: grid;
  gap: 12px;
}

body.admin .admin-detail-status-form label {
  display: grid;
  gap: 7px;
  color: #45645a;
  font-size: 12px;
  font-weight: 800;
}

body.admin .admin-payment-editor {
  margin-top: 12px;
}

body.admin .admin-payment-editor summary {
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
}

body.admin .admin-payment-editor summary::-webkit-details-marker {
  display: none;
}

body.admin .admin-payment-editor form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

body.admin .admin-payment-editor label {
  display: grid;
  gap: 6px;
  color: #45645a;
  font-size: 11px;
  font-weight: 800;
}

body.admin .admin-payment-editor input,
body.admin .admin-payment-editor select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid #c8e1d2;
  border-radius: 9px;
  color: #071f18;
  background: #fff;
  font: inherit;
  font-size: 12px;
}

body.admin .admin-detail-status-form select,
body.admin .admin-detail-status-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #c8e1d2;
  border-radius: 10px;
  padding: 11px 12px;
  color: #071f18;
  background: #fff;
  font: inherit;
  font-size: 13px;
}

body.admin .admin-detail-status-form select {
  min-height: 44px;
}

body.admin .admin-detail-status-form textarea {
  resize: vertical;
}

body.admin .admin-detail-status-form .btn,
body.admin .staff-record-detail-page .staff-record-action-card > .btn,
body.admin .staff-record-detail-page .staff-record-action-card > a.btn {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

html[data-theme="dark"] body.admin .admin-detail-status-form label {
  color: #c3d8ce;
}

html[data-theme="dark"] body.admin .admin-payment-editor label {
  color: #c3d8ce;
}

html[data-theme="dark"] body.admin .admin-detail-status-form select,
html[data-theme="dark"] body.admin .admin-detail-status-form textarea {
  border-color: rgba(91, 235, 157, .24);
  color: #f4fff8;
  background: #07130e;
}

html[data-theme="dark"] body.admin .admin-payment-editor input,
html[data-theme="dark"] body.admin .admin-payment-editor select {
  border-color: rgba(91, 235, 157, .24);
  color: #f4fff8;
  background: #07130e;
}

@media (max-width: 760px) {
  body.admin .staff-record-detail-page .resident-page-contact-strip {
    grid-template-columns: 1fr 1fr;
  }

  body.admin .admin-detail-status-form {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  body.admin .staff-record-detail-page .resident-page-contact-strip {
    grid-template-columns: 1fr;
  }
}

html[data-theme="dark"] body.admin .staff-payment-dialog-card,
html[data-theme="dark"] body.admin .staff-status-dialog-card {
  border-color: #28533e;
  background: #0d1e16;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

html[data-theme="dark"] body.admin .staff-payment-dialog-card header,
html[data-theme="dark"] body.admin .staff-status-dialog-card header {
  border-color: #254a38;
  background: linear-gradient(180deg, #11271c, #0d1e16);
}

html[data-theme="dark"] body.admin .staff-payment-dialog-card h2,
html[data-theme="dark"] body.admin .staff-status-dialog-card h2 {
  color: #f4fff8;
}

html[data-theme="dark"] body.admin .staff-payment-dialog-card p,
html[data-theme="dark"] body.admin .staff-status-dialog-card p {
  color: #b5cfc2;
}

html[data-theme="dark"] body.admin .staff-payment-dialog-grid label,
html[data-theme="dark"] body.admin .staff-status-dialog-card label {
  color: #d0e5d9;
}

html[data-theme="dark"] body.admin .staff-payment-dialog-grid input,
html[data-theme="dark"] body.admin .staff-payment-dialog-grid select,
html[data-theme="dark"] body.admin .staff-status-dialog-card textarea {
  border-color: #315d47;
  color: #f4fff8;
  background: #07130e;
}

html[data-theme="dark"] body.admin .staff-payment-dialog-card header button,
html[data-theme="dark"] body.admin .staff-status-dialog-card header button {
  border-color: #315d47;
  color: #e9f8ef;
  background: #10261b;
}

html[data-theme="dark"] body.admin .staff-status-dialog-selected {
  border-color: #315d47;
  background: #10261b;
}

html[data-theme="dark"] body.admin .staff-status-dialog-selected small {
  color: #b5cfc2;
}

html[data-theme="dark"] body.admin .staff-payment-dialog-form footer {
  border-color: #254a38;
}

/* Keep the Admin payment summary compact and aligned like the Staff card. */
body.admin .admin-payment-summary-card {
  padding: 18px !important;
}

body.admin .admin-payment-summary-card h3 {
  margin: 0 0 12px !important;
  color: #10271d !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

body.admin .admin-payment-summary-card dl {
  display: grid !important;
  gap: 0 !important;
  margin: 0 0 12px !important;
}

body.admin .admin-payment-summary-card dl > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 38px !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid #e8f0ec !important;
}

body.admin .admin-payment-summary-card dl > div:last-child {
  border-bottom: 0 !important;
}

body.admin .admin-payment-summary-card dt {
  flex: 0 0 auto !important;
  color: #71869b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body.admin .admin-payment-summary-card dd {
  min-width: 0 !important;
  margin: 0 !important;
  color: #071340 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-align: right !important;
  overflow-wrap: anywhere !important;
}

body.admin .admin-payment-summary-card > button {
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

html[data-theme="dark"] body.admin .admin-payment-summary-card h3,
html[data-theme="dark"] body.admin .admin-payment-summary-card dd {
  color: #f4fff8 !important;
}

html[data-theme="dark"] body.admin .admin-payment-summary-card dl > div {
  border-color: #254a38 !important;
}

html[data-theme="dark"] body.admin .admin-payment-summary-card dt {
  color: #b5cfc2 !important;
}

/* Professional Admin user directory and account dialogs. */
body.admin .user-management-page,
body.admin .roles-permissions-page {
  display: grid;
  gap: 18px;
  min-width: 0;
}

body.admin .user-management-heading,
body.admin .roles-permissions-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border: 1px solid #cfe6d8;
  border-radius: 14px;
  background: linear-gradient(120deg, #fff 0%, #f2fbf6 100%);
  box-shadow: 0 14px 32px rgba(8, 68, 44, .06);
}

body.admin .user-management-eyebrow,
body.admin .roles-permissions-hero > div > span {
  color: #17814c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.admin .user-management-heading h2,
body.admin .roles-permissions-hero h2 {
  margin: 5px 0 4px;
  color: #0c281d;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
}

body.admin .user-management-heading p,
body.admin .roles-permissions-hero p {
  margin: 0;
  color: #61766d;
  font-size: 13px;
  line-height: 1.55;
}

body.admin .user-management-heading > .btn,
body.admin .roles-permissions-hero > .btn {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 10px;
  white-space: nowrap;
}

body.admin .user-management-heading > .btn > span {
  margin-right: 7px;
  font-size: 20px;
  line-height: 0;
}

body.admin .user-management-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body.admin .user-management-metrics article {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 80px;
  padding: 15px 17px;
  border: 1px solid #cfe6d8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(8, 68, 44, .05);
}

body.admin .user-management-metrics article > span {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #087443;
  background: #e5f7ed;
  font-size: 16px;
  font-weight: 900;
}

body.admin .user-management-metrics article div { display: grid; gap: 3px; }
body.admin .user-management-metrics b { color: #10271d; font-size: 23px; line-height: 1; }
body.admin .user-management-metrics small { color: #687c73; font-size: 11px; font-weight: 700; }

body.admin .user-management-toolbar,
body.admin .user-directory-card {
  overflow: hidden;
  border: 1px solid #cfe6d8;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(8, 68, 44, .06);
}

body.admin .user-management-toolbar { padding: 15px; }

body.admin .user-management-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 230px) auto auto;
  gap: 11px;
  align-items: end;
  margin: 0;
}

body.admin .user-management-filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #536b60;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

body.admin .user-management-filters input,
body.admin .user-management-filters select {
  width: 100%;
  height: 44px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid #cfe2d6;
  border-radius: 9px;
  color: #10271d;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
}

body.admin .user-management-filters .btn {
  min-width: 88px;
  height: 44px;
  border-radius: 9px;
}

body.admin .user-directory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 19px;
  border-bottom: 1px solid #e4eee8;
}

body.admin .user-directory-heading h2 { margin: 0 0 4px; color: #10271d; font-size: 16px; }
body.admin .user-directory-heading p { margin: 0; color: #74857e; font-size: 11px; }
body.admin .user-directory-heading > a { color: #087443; font-size: 11px; font-weight: 900; text-decoration: none; }
body.admin .user-directory-heading > a:hover { text-decoration: underline; }
body.admin .user-directory-table-wrap { width: 100%; overflow-x: auto; }

body.admin .user-directory-table {
  width: 100%;
  min-width: 880px;
  border-collapse: separate;
  border-spacing: 0;
}

body.admin .user-directory-table th {
  padding: 12px 16px;
  border-bottom: 1px solid #dcebe2;
  color: #48675a;
  background: #f0f8f3;
  font-size: 10px;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

body.admin .user-directory-table td {
  padding: 13px 16px;
  border-bottom: 1px solid #e7f0eb;
  color: #253b31;
  font-size: 12px;
  vertical-align: middle;
}

body.admin .user-directory-table tbody tr:last-child td { border-bottom: 0; }
body.admin .user-directory-table tbody tr:hover td { background: #f8fcf9; }

body.admin .user-directory-person { display: flex; align-items: center; gap: 10px; min-width: 175px; }
body.admin .user-directory-person > span {
  display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px;
  border-radius: 50%; color: #087443; background: #e4f7ed; font-size: 11px; font-weight: 900;
}
body.admin .user-directory-person div,
body.admin .user-directory-table td:nth-child(2) { display: grid; gap: 4px; }
body.admin .user-directory-table tbody tr.user-directory-row { cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
body.admin .user-directory-table tbody tr.user-directory-row:hover { background: #f1faf4; }
body.admin .user-directory-table tbody tr.user-directory-row:focus-visible { outline: 3px solid rgba(22,132,71,.32); outline-offset: -3px; }
body.admin .user-directory-person strong,
body.admin .user-directory-table td:nth-child(2) strong { color: #10271d; font-size: 12px; font-weight: 900; }
body.admin .user-directory-person small,
body.admin .user-directory-table td:nth-child(2) small { color: #74857e; font-size: 10px; }

body.admin .user-role-pill,
body.admin .user-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 99px;
  color: #11623b;
  background: #e5f6ec;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

body.admin .user-role-pill.role-admin,
body.admin .user-role-pill.role-barangay_captain { color: #0d6542; background: #dcf5e8; }
body.admin .user-role-pill.role-staff { color: #2555a3; background: #e8f0ff; }
body.admin .user-role-pill.role-resident { color: #576b7e; background: #edf2f5; }
body.admin .user-status-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body.admin .user-status-pill.status-pending { color: #9a6413; background: #fff3d9; }
body.admin .user-status-pill.status-declined,
body.admin .user-status-pill.status-inactive { color: #a53643; background: #ffeaed; }

body.admin .user-manage-button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #cce4d6;
  border-radius: 8px;
  color: #087443;
  background: #fff;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
body.admin .user-manage-button:hover { background: #eef9f2; }
body.admin .user-directory-actions { display: flex; align-items: center; gap: 8px; }
body.admin .user-profile-link { color: #087443; font-size: 10px; font-weight: 900; text-decoration: none; white-space: nowrap; }
body.admin .user-profile-link:hover { text-decoration: underline; }

body.admin .user-directory-empty { display: grid; justify-items: center; gap: 7px; padding: 45px 18px; }
body.admin .user-directory-empty > span { color: #16814c; font-size: 24px; }
body.admin .user-directory-empty strong { color: #19372a; font-size: 14px; }
body.admin .user-directory-empty small { color: #71837a; font-size: 11px; }
body.admin .user-directory-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid #e4eee8; color: #71837a; font-size: 11px; }
body.admin .user-directory-pagination { display: flex; align-items: center; gap: 8px; }
body.admin .user-directory-pagination a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 10px; border: 1px solid #d5e7dc; border-radius: 8px; color: #087443; background: #fff; font-size: 10px; font-weight: 900; text-decoration: none; }
body.admin .user-directory-pagination a.disabled { pointer-events: none; color: #9aac9f; background: #f7faf8; }
body.admin .user-directory-pagination span { padding: 0 4px; color: #687c73; font-size: 10px; font-weight: 800; }

body.admin .user-management-dialog {
  width: min(680px, calc(100vw - 28px));
  max-height: min(90vh, 820px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 15px;
  background: transparent;
}

body.admin .user-management-dialog::backdrop { background: rgba(7, 28, 19, .58); backdrop-filter: blur(4px); }
body.admin .user-dialog-card { max-height: min(90vh, 820px); overflow: auto; border: 1px solid #d8e9df; border-radius: 15px; background: #fff; box-shadow: 0 28px 80px rgba(2, 30, 17, .3); }
body.admin .user-dialog-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 20px 22px; border-bottom: 1px solid #e4eee8; }
body.admin .user-dialog-card > header > div { display: flex; align-items: center; gap: 12px; }
body.admin .user-dialog-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; color: #087443; background: #e5f7ed; font-size: 20px; font-weight: 900; }
body.admin .user-dialog-card h2 { margin: 0 0 4px; color: #10271d; font-size: 18px; }
body.admin .user-dialog-card header p { margin: 0; color: #71837a; font-size: 11px; }
body.admin .user-dialog-card > header > button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #dce9e1; border-radius: 9px; color: #52685d; background: #fff; font-size: 22px; cursor: pointer; }
body.admin .user-dialog-body { display: grid; gap: 14px; padding: 20px 22px; }
body.admin .user-dialog-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.admin .user-dialog-fields label { display: grid; gap: 6px; min-width: 0; color: #425d50; font-size: 11px; font-weight: 900; }
body.admin .user-dialog-fields [hidden] { display: none !important; }
body.admin .user-dialog-fields label em { color: #c23d4d; font-style: normal; }
body.admin .user-dialog-fields input,
body.admin .user-dialog-fields select { width: 100%; min-width: 0; height: 43px; padding: 0 11px; border: 1px solid #cfe2d6; border-radius: 9px; color: #10271d; background: #fff; font-size: 12px; font-weight: 600; }
body.admin .user-dialog-fields input:focus,
body.admin .user-dialog-fields select:focus { outline: 3px solid rgba(22, 132, 71, .14); border-color: #168447; }
body.admin .user-dialog-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 11px 12px; border: 1px solid #cfe9d8; border-radius: 9px; color: #326048; background: #f3fbf6; font-size: 11px; line-height: 1.5; }
body.admin .user-dialog-note > span { color: #168447; font-weight: 900; }
body.admin .user-password-hint { margin: -7px 0 0; color: #74857e; font-size: 10px; }
body.admin .user-dialog-card > footer { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 22px 20px; border-top: 1px solid #e4eee8; }
body.admin .user-dialog-card > footer .btn { min-width: 112px; min-height: 41px; border-radius: 9px; }
body.admin .user-edit-fields { grid-template-columns: 1fr 1fr; }
body.admin .user-edit-identity { display: grid; gap: 4px; padding: 13px; border-radius: 10px; background: #f3faf6; }
body.admin .user-edit-identity strong { color: #10271d; font-size: 14px; }
body.admin .user-edit-identity small { color: #71837a; font-size: 11px; }
body.admin .user-active-toggle { align-content: end; }
body.admin .user-toggle-control { display: flex; align-items: center; gap: 9px; min-height: 43px; padding: 0 11px; border: 1px solid #cfe2d6; border-radius: 9px; color: #10271d; background: #fff; }
body.admin .user-toggle-control input { width: 17px; height: 17px; accent-color: #168447; }

body.admin .roles-permissions-hero { background: linear-gradient(120deg, #0c4f35 0%, #116b45 65%, #16844d 100%); border-color: #1d7650; }
body.admin .roles-permissions-hero > div > span,
body.admin .roles-permissions-hero h2,
body.admin .roles-permissions-hero p { color: #fff; }
body.admin .roles-permissions-hero p { color: rgba(255,255,255,.78); max-width: 700px; }
body.admin .roles-permissions-hero > .btn { color: #14683f; background: #fff; border: 1px solid rgba(255,255,255,.7); }
body.admin .roles-permission-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body.admin .role-permission-card { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 19px; border: 1px solid #cfe6d8; border-radius: 13px; background: #fff; box-shadow: 0 14px 32px rgba(8,68,44,.06); }
body.admin .role-permission-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.admin .role-card-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #087443; background: #e5f7ed; font-size: 17px; }
body.admin .role-card-count { padding: 6px 9px; border-radius: 99px; color: #326048; background: #edf8f1; font-size: 10px; font-weight: 900; }
body.admin .role-permission-card h3 { margin: 0; color: #10271d; font-size: 17px; }
body.admin .role-permission-card > p { margin: -5px 0 0; color: #687d73; font-size: 12px; line-height: 1.55; }
body.admin .role-permission-tags { display: flex; flex-wrap: wrap; gap: 7px; }
body.admin .role-permission-tags span { padding: 6px 8px; border: 1px solid #dcece3; border-radius: 7px; color: #315c45; background: #f6fbf8; font-size: 10px; font-weight: 800; }
body.admin .role-permission-card > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; padding-top: 12px; border-top: 1px solid #e5efe9; color: #087443; font-size: 11px; font-weight: 900; text-decoration: none; }
body.admin .role-permission-card > a:hover { text-decoration: underline; }
body.admin .roles-permission-note { display: flex; gap: 12px; padding: 16px; border: 1px solid #cfe6d8; border-radius: 12px; color: #315b45; background: #f4fbf7; }
body.admin .roles-permission-note > span { color: #168447; font-size: 18px; font-weight: 900; }
body.admin .roles-permission-note strong { color: #10271d; font-size: 12px; }
body.admin .roles-permission-note p { margin: 5px 0 0; color: #61766d; font-size: 11px; line-height: 1.55; }

html[data-theme="dark"] body.admin .user-management-heading,
html[data-theme="dark"] body.admin .user-management-toolbar,
html[data-theme="dark"] body.admin .user-directory-card,
html[data-theme="dark"] body.admin .user-management-metrics article,
html[data-theme="dark"] body.admin .role-permission-card {
  border-color: #28533e;
  background: #0e2118;
  box-shadow: 0 14px 32px rgba(0,0,0,.25);
}
html[data-theme="dark"] body.admin .user-management-heading h2,
html[data-theme="dark"] body.admin .user-directory-heading h2,
html[data-theme="dark"] body.admin .user-management-metrics b,
html[data-theme="dark"] body.admin .role-permission-card h3,
html[data-theme="dark"] body.admin .user-directory-person strong,
html[data-theme="dark"] body.admin .user-directory-table td:nth-child(2) strong { color: #f2fff7; }
html[data-theme="dark"] body.admin .user-management-heading p,
html[data-theme="dark"] body.admin .user-directory-heading p,
html[data-theme="dark"] body.admin .user-management-metrics small,
html[data-theme="dark"] body.admin .user-directory-person small,
html[data-theme="dark"] body.admin .user-directory-table td:nth-child(2) small,
html[data-theme="dark"] body.admin .role-permission-card > p { color: #b6cfc2; }
html[data-theme="dark"] body.admin .user-directory-heading,
html[data-theme="dark"] body.admin .user-directory-table td,
html[data-theme="dark"] body.admin .user-directory-footer,
html[data-theme="dark"] body.admin .role-permission-card > a { border-color: #244735; }
html[data-theme="dark"] body.admin .user-directory-pagination a { border-color: #315d47; color: #c2f3d5; background: #10261b; }
html[data-theme="dark"] body.admin .user-directory-pagination a.disabled { color: #6f8879; background: #0b1b13; }
html[data-theme="dark"] body.admin .user-directory-pagination span { color: #b6cfc2; }
html[data-theme="dark"] body.admin .user-directory-table th { border-color: #28533e; color: #c2d9cc; background: #143324; }
html[data-theme="dark"] body.admin .user-directory-table td { color: #d5e8dd; }
html[data-theme="dark"] body.admin .user-directory-table tbody tr:hover td { background: #102a1d; }
html[data-theme="dark"] body.admin .user-management-filters label,
html[data-theme="dark"] body.admin .user-dialog-fields label,
html[data-theme="dark"] body.admin .user-active-toggle { color: #cadfd3; }
html[data-theme="dark"] body.admin .user-management-filters input,
html[data-theme="dark"] body.admin .user-management-filters select,
html[data-theme="dark"] body.admin .user-dialog-fields input,
html[data-theme="dark"] body.admin .user-dialog-fields select,
html[data-theme="dark"] body.admin .user-toggle-control { border-color: #315d47; color: #f2fff7; background: #071710; }
html[data-theme="dark"] body.admin .user-management-dialog .user-dialog-card { border-color: #28533e; background: #0e2118; }
html[data-theme="dark"] body.admin .user-management-dialog .user-dialog-card > header,
html[data-theme="dark"] body.admin .user-management-dialog .user-dialog-card > footer { border-color: #244735; }
html[data-theme="dark"] body.admin .user-management-dialog .user-dialog-card h2,
html[data-theme="dark"] body.admin .user-edit-identity strong { color: #f2fff7; }
html[data-theme="dark"] body.admin .user-management-dialog .user-dialog-card header p,
html[data-theme="dark"] body.admin .user-edit-identity small { color: #b6cfc2; }
html[data-theme="dark"] body.admin .user-management-dialog .user-dialog-card > header > button { border-color: #315d47; color: #e4f4ea; background: #132a1e; }

/* Admin user profile: complete account history and resident record. */
body.admin .admin-user-profile-page { display: grid; gap: 16px; padding: 18px 0 28px; }
body.admin .admin-user-profile-back { width: fit-content; color: #087443; font-size: 12px; font-weight: 900; text-decoration: none; }
body.admin .admin-user-profile-back:hover { text-decoration: underline; }
body.admin .admin-user-profile-hero { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 22px; border: 1px solid #cfe6d8; border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 14px 34px rgba(8,68,44,.07); }
body.admin .admin-user-profile-avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #087443; background: #ddf5e8; font-size: 22px; font-weight: 900; }
body.admin .admin-user-profile-heading { display: grid; gap: 15px; min-width: 0; }
body.admin .admin-user-profile-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
body.admin .admin-user-profile-kicker { color: #16814c; font-size: 9px; font-weight: 900; letter-spacing: .11em; }
body.admin .admin-user-profile-title h2 { margin: 4px 0 3px; color: #10271d; font-size: 22px; letter-spacing: -.03em; }
body.admin .admin-user-profile-title p { margin: 0; color: #6a7e74; font-size: 11px; }
body.admin .admin-user-profile-title p span { padding: 0 6px; }
body.admin .admin-user-profile-pills { display: flex; flex-wrap: wrap; gap: 7px; }
body.admin .admin-user-profile-contact { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding-top: 13px; border-top: 1px solid #e3eee8; }
body.admin .admin-user-profile-contact > span { display: grid; gap: 4px; min-width: 0; }
body.admin .admin-user-profile-contact small { color: #7a8b82; font-size: 10px; }
body.admin .admin-user-profile-contact strong { overflow-wrap: anywhere; color: #163629; font-size: 11px; }
body.admin .admin-user-profile-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
body.admin .admin-user-profile-stats article { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid #d2e7da; border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 10px 26px rgba(20,60,45,.05); }
body.admin .admin-user-profile-stats article > span { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; color: #087443; background: #e3f5eb; font-size: 15px; font-weight: 900; }
body.admin .admin-user-profile-stats article > div { display: grid; gap: 3px; }
body.admin .admin-user-profile-stats strong { color: #10271d; font-size: 20px; line-height: 1; }
body.admin .admin-user-profile-stats small { color: #657a70; font-size: 10px; }
body.admin .admin-user-profile-grid { display: grid; grid-template-columns: minmax(0,1fr) 310px; align-items: start; gap: 16px; }
body.admin .admin-user-profile-main,
body.admin .admin-user-profile-aside { display: grid; gap: 16px; min-width: 0; }
body.admin .admin-user-workspace { min-width: 0; overflow: hidden; padding: 0; }
body.admin .admin-user-work-tabs { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding: 0 16px; border-bottom: 1px solid #dcebe2; background: #f8fcf9; }
body.admin .admin-user-work-tabs [role="tab"] { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; padding: 0 15px; border: 0; border-bottom: 3px solid transparent; color: #62766c; background: transparent; font: inherit; font-size: 11px; font-weight: 900; white-space: nowrap; cursor: pointer; }
body.admin .admin-user-work-tabs [role="tab"]:hover { color: #087443; background: #f0f8f3; }
body.admin .admin-user-work-tabs [role="tab"][aria-selected="true"] { border-bottom-color: #168447; color: #087443; }
body.admin .admin-user-work-tabs [role="tab"] span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; color: #526b5d; background: #e5efe9; font-size: 9px; }
body.admin .admin-user-work-tabs [role="tab"][aria-selected="true"] span { color: #087443; background: #dff4e8; }
body.admin .admin-user-work-tabs [role="tab"]:focus-visible { outline: 3px solid rgba(22,132,71,.25); outline-offset: -3px; }
body.admin .admin-user-work-panel[hidden] { display: none !important; }
body.admin .admin-user-work-panel { min-width: 0; }
body.admin .admin-user-work-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 19px; border-bottom: 1px solid #e1eee7; }
body.admin .admin-user-work-panel > header h2 { margin: 4px 0 3px; color: #10271d; font-size: 16px; }
body.admin .admin-user-work-panel > header p { margin: 0; color: #71837a; font-size: 10px; }
body.admin .admin-user-work-panel > header > a { color: #087443; font-size: 10px; font-weight: 900; text-decoration: none; white-space: nowrap; }
body.admin .admin-user-work-panel > header > a:hover { text-decoration: underline; }
body.admin .admin-user-profile-records { overflow: hidden; padding: 0; }
body.admin .admin-user-profile-records > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 19px; border-bottom: 1px solid #e1eee7; }
body.admin .admin-user-profile-records > header h2,
body.admin .admin-user-profile-activity h2 { margin: 4px 0 3px; color: #10271d; font-size: 16px; }
body.admin .admin-user-profile-records > header p { margin: 0; color: #71837a; font-size: 10px; }
body.admin .admin-user-profile-records > header > a,
body.admin .admin-user-profile-table-wrap td > a { color: #087443; font-size: 10px; font-weight: 900; text-decoration: none; white-space: nowrap; }
body.admin .admin-user-profile-table-wrap { overflow-x: auto; }
body.admin .admin-user-profile-table-wrap table { width: 100%; border-collapse: collapse; }
body.admin .admin-user-profile-table-wrap th { padding: 10px 12px; color: #49675a; background: #edf6f1; font-size: 9px; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
body.admin .admin-user-profile-table-wrap td { padding: 11px 12px; border-top: 1px solid #e5efe9; color: #22392f; font-size: 10px; vertical-align: middle; }
body.admin .admin-user-profile-table-wrap td strong { color: #17382a; white-space: nowrap; }
body.admin .admin-user-profile-table-wrap td small { display: block; margin-top: 3px; color: #74867d; font-size: 9px; }
body.admin .admin-user-profile-table-wrap td small.admin-user-action-note { max-width: 230px; overflow: hidden; color: #72857b; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
body.admin .admin-user-profile-table-wrap td:nth-child(2) { min-width: 150px; }
body.admin .admin-user-record-status { display: inline-flex; padding: 5px 8px; border-radius: 99px; color: #126a43; background: #e4f6eb; font-size: 9px; font-weight: 900; white-space: nowrap; }
body.admin .admin-user-profile-empty { padding: 23px 18px; color: #71837a; font-size: 11px; }
body.admin .admin-user-profile-info h2 { margin: 0 0 12px; color: #10271d; font-size: 15px; }
body.admin .admin-user-profile-method { margin: -5px 0 13px; color: #72857b; font-size: 10px; line-height: 1.5; }
body.admin .admin-user-contribution-bars { display: grid; gap: 12px; margin: 12px 0 17px; }
body.admin .admin-user-contribution-bars > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 9px; align-items: center; }
body.admin .admin-user-contribution-bars span { color: #49675a; font-size: 9px; font-weight: 800; }
body.admin .admin-user-contribution-bars strong { color: #126a43; font-size: 10px; }
body.admin .admin-user-contribution-bars i { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 99px; background: #e2eee7; }
body.admin .admin-user-contribution-bars i b { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg,#17804b,#31b96d); }
body.admin .admin-user-profile-info dl { display: grid; margin: 0; }
body.admin .admin-user-profile-info dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #e5efe9; }
body.admin .admin-user-profile-info dt { color: #70837a; font-size: 10px; }
body.admin .admin-user-profile-info dd { margin: 0; color: #17382a; font-size: 10px; font-weight: 800; text-align: right; overflow-wrap: anywhere; }
body.admin .admin-user-profile-reason { display: grid; gap: 5px; margin: 13px 0 0; padding: 11px; border-radius: 9px; color: #6f551f; background: #fff6e4; font-size: 10px; }
body.admin .admin-user-profile-activity > header { margin-bottom: 12px; }
body.admin .admin-user-profile-activity ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
body.admin .admin-user-profile-activity li { position: relative; display: grid; grid-template-columns: 12px minmax(0,1fr); gap: 10px; padding: 0 0 14px; }
body.admin .admin-user-profile-activity li:not(:last-child)::before { position: absolute; top: 11px; bottom: -2px; left: 5px; width: 1px; background: #dcebe2; content: ''; }
body.admin .admin-user-profile-activity li > span { z-index: 1; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #25a664; box-shadow: 0 0 0 1px #bfe3ce; }
body.admin .admin-user-profile-activity li > div { display: grid; gap: 4px; }
body.admin .admin-user-profile-activity li strong { color: #19392b; font-size: 10px; }
body.admin .admin-user-profile-activity li small { color: #71837a; font-size: 9px; line-height: 1.5; }
html[data-theme="dark"] body.admin .admin-user-profile-hero,
html[data-theme="dark"] body.admin .admin-user-profile-stats article { border-color: #28533e; background: #10271c; }
html[data-theme="dark"] body.admin .admin-user-profile-avatar,
html[data-theme="dark"] body.admin .admin-user-profile-stats article > span { color: #73e9a7; background: #173b29; }
html[data-theme="dark"] body.admin .admin-user-profile-title h2,
html[data-theme="dark"] body.admin .admin-user-profile-contact strong,
html[data-theme="dark"] body.admin .admin-user-profile-stats strong,
html[data-theme="dark"] body.admin .admin-user-profile-records > header h2,
html[data-theme="dark"] body.admin .admin-user-work-panel > header h2,
html[data-theme="dark"] body.admin .admin-user-profile-activity h2,
html[data-theme="dark"] body.admin .admin-user-profile-info h2,
html[data-theme="dark"] body.admin .admin-user-profile-info dd,
html[data-theme="dark"] body.admin .admin-user-profile-activity li strong { color: #effbf4; }
html[data-theme="dark"] body.admin .admin-user-profile-contact,
html[data-theme="dark"] body.admin .admin-user-profile-records > header,
html[data-theme="dark"] body.admin .admin-user-work-tabs,
html[data-theme="dark"] body.admin .admin-user-work-panel > header,
html[data-theme="dark"] body.admin .admin-user-profile-table-wrap td,
html[data-theme="dark"] body.admin .admin-user-profile-info dl > div { border-color: #244735; }
html[data-theme="dark"] body.admin .admin-user-profile-table-wrap th { color: #c2d9cc; background: #173326; }
html[data-theme="dark"] body.admin .admin-user-profile-table-wrap td,
html[data-theme="dark"] body.admin .admin-user-profile-title p,
html[data-theme="dark"] body.admin .admin-user-profile-records > header p,
html[data-theme="dark"] body.admin .admin-user-work-panel > header p,
html[data-theme="dark"] body.admin .admin-user-profile-contact small,
html[data-theme="dark"] body.admin .admin-user-profile-stats small,
html[data-theme="dark"] body.admin .admin-user-profile-info dt,
html[data-theme="dark"] body.admin .admin-user-profile-activity li small { color: #afc7b9; }
html[data-theme="dark"] body.admin .admin-user-profile-method,
html[data-theme="dark"] body.admin .admin-user-contribution-bars span,
html[data-theme="dark"] body.admin .admin-user-profile-table-wrap td small.admin-user-action-note { color: #afc7b9; }
html[data-theme="dark"] body.admin .admin-user-contribution-bars strong { color: #83efb1; }
html[data-theme="dark"] body.admin .admin-user-contribution-bars i { background: #244735; }
html[data-theme="dark"] body.admin .admin-user-profile-records > header > a,
html[data-theme="dark"] body.admin .admin-user-work-panel > header > a,
html[data-theme="dark"] body.admin .admin-user-profile-table-wrap td > a,
html[data-theme="dark"] body.admin .admin-user-profile-back { color: #70e8a5; }
html[data-theme="dark"] body.admin .admin-user-work-tabs [role="tab"] { color: #b5ccbd; }
html[data-theme="dark"] body.admin .admin-user-work-tabs [role="tab"]:hover,
html[data-theme="dark"] body.admin .admin-user-work-tabs [role="tab"][aria-selected="true"] { color: #7cebac; background: #132a1e; }
html[data-theme="dark"] body.admin .admin-user-work-tabs [role="tab"] span { color: #c9e1d3; background: #244735; }
html[data-theme="dark"] body.admin .admin-user-work-tabs [role="tab"][aria-selected="true"] span { color: #8aefb6; background: #1b4930; }

@media (max-width: 1050px) {
  body.admin .admin-user-profile-grid { grid-template-columns: minmax(0,1fr) 270px; }
}
@media (max-width: 850px) {
  body.admin .admin-user-profile-grid { grid-template-columns: 1fr; }
  body.admin .admin-user-profile-aside { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  body.admin .user-directory-actions { align-items: flex-start; flex-direction: column; }
  body.admin .admin-user-profile-hero { grid-template-columns: 48px minmax(0,1fr); gap: 12px; padding: 15px; }
  body.admin .admin-user-profile-avatar { width: 48px; height: 48px; font-size: 17px; }
  body.admin .admin-user-profile-heading { gap: 10px; }
  body.admin .admin-user-profile-title { flex-direction: column; }
  body.admin .admin-user-profile-title h2 { font-size: 19px; }
  body.admin .admin-user-profile-contact { grid-template-columns: 1fr; gap: 9px; }
  body.admin .admin-user-profile-hero > .btn { grid-column: 1 / -1; width: 100%; }
  body.admin .admin-user-profile-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  body.admin .admin-user-profile-stats article { gap: 8px; padding: 10px; }
  body.admin .admin-user-profile-stats article > span { flex-basis: 32px; width: 32px; height: 32px; }
  body.admin .admin-user-profile-stats strong { font-size: 18px; }
  body.admin .admin-user-profile-aside { grid-template-columns: 1fr; }
  body.admin .admin-user-profile-records > header { align-items: flex-start; padding: 14px; }
  body.admin .admin-user-work-tabs { padding: 0 8px; }
  body.admin .admin-user-work-tabs [role="tab"] { min-height: 49px; padding: 0 10px; font-size: 10px; }
  body.admin .admin-user-work-panel > header { align-items: flex-start; padding: 14px; }
  body.admin .admin-user-profile-table-wrap table { min-width: 620px; }
}
html[data-theme="dark"] body.admin .user-dialog-note,
html[data-theme="dark"] body.admin .user-edit-identity,
html[data-theme="dark"] body.admin .role-permission-tags span,
html[data-theme="dark"] body.admin .roles-permission-note { border-color: #28533e; color: #c1d9cc; background: #11291d; }
html[data-theme="dark"] body.admin .user-password-hint,
html[data-theme="dark"] body.admin .role-permission-tags span,
html[data-theme="dark"] body.admin .roles-permission-note p { color: #b6cfc2; }
html[data-theme="dark"] body.admin .role-card-count { color: #c3e1d0; background: #183a29; }

@media (max-width: 1100px) {
  body.admin .user-management-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.admin .user-management-filters { grid-template-columns: minmax(0,1fr) minmax(170px,230px) auto auto; }
}
@media (max-width: 760px) {
  body.admin .user-management-heading,
  body.admin .roles-permissions-hero { align-items: stretch; flex-direction: column; padding: 18px; }
  body.admin .user-management-heading > .btn,
  body.admin .roles-permissions-hero > .btn { width: 100%; }
  body.admin .user-management-filters { grid-template-columns: 1fr 1fr; }
  body.admin .user-management-filters .user-search-field { grid-column: 1 / -1; }
  body.admin .user-management-filters .btn { width: 100%; }
  body.admin .roles-permission-cards { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  body.admin .user-management-metrics { grid-template-columns: 1fr 1fr; gap: 9px; }
  body.admin .user-management-metrics article { min-height: 72px; padding: 11px; gap: 9px; }
  body.admin .user-management-metrics article > span { flex-basis: 34px; width: 34px; height: 34px; }
  body.admin .user-management-metrics b { font-size: 19px; }
  body.admin .user-management-filters { grid-template-columns: 1fr; }
  body.admin .user-management-filters .user-search-field { grid-column: auto; }
  body.admin .user-directory-heading { align-items: flex-start; flex-direction: column; }
  body.admin .user-directory-footer { align-items: flex-start; flex-direction: column; }
  body.admin .user-dialog-fields,
  body.admin .user-edit-fields { grid-template-columns: 1fr; }
  body.admin .user-dialog-card > header,
  body.admin .user-dialog-body { padding-left: 16px; padding-right: 16px; }
  body.admin .user-dialog-card > footer { padding: 13px 16px 16px; }
  body.admin .user-dialog-card > footer .btn { flex: 1; min-width: 0; }
}

/* ========================================================
   SERVICE & COMPLAINT DASHBOARDS: BALANCED GRID & MOBILE
   ======================================================== */
.service-dashboard-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
}

.service-announcement-panel {
    grid-column: 1 / -1 !important;
}

.service-recent-panel,
.service-chart-panel,
.service-trend-panel,
.service-popular-panel {
    min-height: auto !important;
}

@media (max-width: 768px) {
    /* 1. Dashboard Layout Container */
    .service-dashboard,
    .complaint-dashboard {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Hero Card Banner */
    .service-dashboard-hero,
    .complaint-dashboard-hero,
    .portal-main.service .service-dashboard-hero,
    .portal-main.complaint .service-dashboard-hero,
    .portal-main.complaint .complaint-dashboard-hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 13px 14px !important;
        border-radius: 12px !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .service-dashboard-hero span,
    .complaint-dashboard-hero span {
        font-size: 9.5px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 1px !important;
    }

    .service-dashboard-hero h2,
    .complaint-dashboard-hero h2 {
        font-size: 15.5px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        margin: 0 0 2px !important;
    }

    .service-dashboard-hero p,
    .complaint-dashboard-hero p {
        font-size: 11px !important;
        line-height: 1.4 !important;
        margin: 0 0 8px !important;
        color: var(--portal-muted) !important;
    }

    .service-dashboard-hero .btn,
    .complaint-dashboard-hero .btn {
        width: 100% !important;
        min-height: 40px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    /* 3. Metrics Grid: Clean 2x2 Grid with Proportional Metric Cards */
    .service-metrics-grid,
    .portal-main.service .service-metrics-grid,
    .portal-main.complaint .service-metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .service-metric-card,
    .complaint-dashboard .service-metric-card {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        min-height: auto !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(13, 71, 45, 0.06) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .service-metric-card > span {
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
    }

    .service-metric-card > div {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .service-metric-card small {
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .service-metric-card strong {
        font-size: 19px !important;
        font-weight: 900 !important;
        margin: 1px 0 !important;
        line-height: 1.1 !important;
    }

    .service-metric-card a {
        font-size: 9.5px !important;
        font-weight: 600 !important;
        opacity: 0.9 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 4. Dashboard Panels Flow - Explicit full-width stretch */
    .service-dashboard-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .panel,
    .portal-main.service .panel,
    .portal-main.complaint .panel {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 13px 14px !important;
        border-radius: 12px !important;
        min-height: auto !important;
    }

    .panel-title {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 11px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .panel-title h2 {
        font-size: 13.5px !important;
        font-weight: 800 !important;
        margin: 0 !important;
    }

    .panel-title a,
    .chart-filter {
        font-size: 10.5px !important;
        font-weight: 700 !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
    }

    /* 5. Recent Requests & Complaints List Items */
    .request-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .request-list-item {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        gap: 2px 10px !important;
        padding: 9px 0 !important;
        border-bottom: 1px solid var(--portal-line, #edf1f7) !important;
        text-decoration: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .request-list-item:last-child {
        border-bottom: none !important;
        padding-bottom: 2px !important;
    }

    .request-list-icon {
        grid-row: 1 / span 2 !important;
        grid-column: 1 !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    .request-list-item > span:nth-of-type(2) {
        grid-row: 1 / span 2 !important;
        grid-column: 2 !important;
        min-width: 0 !important;
    }

    .request-list-item strong {
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .request-list-item small {
        font-size: 10px !important;
        margin-top: 1px !important;
        color: var(--portal-muted, #64748b) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .request-list-item .badge {
        grid-row: 1 !important;
        grid-column: 3 !important;
        justify-self: end !important;
        padding: 2.5px 7px !important;
        font-size: 9px !important;
        border-radius: 5px !important;
        white-space: nowrap !important;
    }

    .request-list-item time {
        grid-row: 2 !important;
        grid-column: 3 !important;
        justify-self: end !important;
        font-size: 9px !important;
        color: var(--portal-muted, #73809a) !important;
        white-space: nowrap !important;
        text-align: right !important;
    }

    /* 6. Overview Donut Chart & Symmetrical Legend */
    .service-donut-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .service-donut-chart {
        width: 120px !important;
        height: 120px !important;
        margin: 0 auto !important;
    }

    .service-donut-chart:after {
        inset: 27px !important;
    }

    .service-donut-chart b {
        font-size: 18px !important;
        font-weight: 900 !important;
    }

    .service-donut-chart small {
        font-size: 9px !important;
        margin-top: 1px !important;
    }

    .service-chart-legend,
    .complaint-chart-legend {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 10px !important;
        padding: 9px 11px !important;
        background: var(--portal-soft, #f8fbf9) !important;
        border-radius: 9px !important;
        border: 1px solid var(--portal-line, #dcece3) !important;
    }

    .service-chart-legend li,
    .complaint-chart-legend li {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 10.5px !important;
    }

    .service-chart-legend i,
    .complaint-chart-legend i {
        flex: 0 0 8px !important;
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
    }

    .service-chart-legend span,
    .complaint-chart-legend span {
        flex: 1 1 auto !important;
        font-size: 10px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: var(--portal-muted, #64748b) !important;
    }

    .service-chart-legend b,
    .complaint-chart-legend b {
        font-size: 10px !important;
        font-weight: 700 !important;
        flex-shrink: 0 !important;
        color: var(--portal-ink, #0f172a) !important;
    }

    /* 7. 7-Day Trend Bar Chart */
    .bar-chart {
        height: 125px !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 20px 4px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .bar-chart > div {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: 100% !important;
        justify-content: flex-end !important;
    }

    .bar-chart span {
        width: 100% !important;
        max-width: 26px !important;
        border-radius: 6px 6px 0 0 !important;
        min-height: 8px !important;
        position: relative !important;
        background: linear-gradient(180deg, var(--portal-green, #087443), #18b873) !important;
    }

    .complaint-dashboard .bar-chart span {
        background: linear-gradient(180deg, #7b35e8, #df3492) !important;
    }

    .bar-chart span b {
        position: absolute !important;
        top: -16px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        color: var(--portal-ink, #0f172a) !important;
    }

    .bar-chart small {
        font-size: 8.5px !important;
        margin-top: 5px !important;
        text-align: center !important;
        white-space: nowrap !important;
        color: var(--portal-muted, #64748b) !important;
    }

    /* 8. Popular Services & Complaint Categories */
    .popular-bars {
        display: flex !important;
        flex-direction: column !important;
        gap: 9px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .popular-bars article {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .popular-bars article > div {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 11px !important;
        margin-bottom: 3px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .popular-bars strong {
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    .popular-bars span {
        font-size: 10.5px !important;
        font-weight: 800 !important;
        color: var(--portal-green, #087443) !important;
    }

    .complaint-dashboard .popular-bars span {
        color: #7b35e8 !important;
    }

    .popular-bars i {
        display: block !important;
        width: 100% !important;
        height: 6px !important;
        border-radius: 999px !important;
        background: #edf2f8 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .popular-bars i b {
        display: block !important;
        height: 100% !important;
        border-radius: inherit !important;
        background: linear-gradient(90deg, var(--portal-green, #087443), #18b873) !important;
    }

    .complaint-dashboard .popular-bars i b {
        background: linear-gradient(90deg, #7b35e8, #df3492) !important;
    }

    /* 9. Announcements Panel */
    .service-announcement-panel {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .service-announcement-panel .mini-item {
        padding: 8px 0 !important;
        border-bottom: 1px solid var(--portal-line, #edf1f7) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .service-announcement-panel .mini-item:last-child {
        border-bottom: none !important;
    }

    .service-announcement-panel .mini-item b {
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        display: block !important;
        margin-bottom: 2px !important;
    }

    .service-announcement-panel .mini-item p {
        font-size: 11px !important;
        line-height: 1.4 !important;
        margin: 0 0 3px !important;
        color: var(--portal-muted, #64748b) !important;
    }

    .service-announcement-panel .mini-item small {
        font-size: 9px !important;
    }

    /* ========================================================
       ADMIN & STAFF 100% MOBILE RESPONSIVE MASTER RULES
       ======================================================== */
    /* 1. Portal Main Containers & Layout */
    body.admin .portal-main,
    body.staff .portal-main,
    .portal-main.admin,
    .portal-main.staff {
        margin-left: 0 !important;
        padding: 96px 14px 28px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .admin-dashboard,
    .staff-shell,
    .staff-dashboard-v2,
    body.admin .staff-shell,
    body.staff .staff-shell,
    body.admin .admin-staff-style-page,
    body.admin .staff-service-page,
    body.admin .staff-complaints-page,
    body.admin .staff-residents-page,
    body.staff .staff-service-page,
    body.staff .staff-complaints-page,
    body.staff .staff-residents-page {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Hero Banners: Compact, Proportional & Readable */
    .admin-hero,
    .staff-hero,
    .staff-panel.hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px 16px !important;
        border-radius: 12px !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .admin-hero small,
    .staff-hero small,
    .staff-panel.hero span {
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 2px !important;
        display: block !important;
    }

    .admin-hero h2,
    .staff-hero h2,
    .staff-panel.hero h2 {
        font-size: 17px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        margin: 0 0 4px !important;
    }

    .admin-hero p,
    .staff-hero p,
    .staff-panel.hero p {
        font-size: 11.5px !important;
        line-height: 1.45 !important;
        margin: 0 0 10px !important;
    }

    .admin-hero-actions,
    .staff-hero-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .admin-hero-actions .btn,
    .staff-hero-actions .btn {
        width: 100% !important;
        min-height: 40px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    /* 3. Metrics & Stat Strip: Proportional 2-Column Balanced Grid */
    body.admin .metrics,
    body.admin .admin-stat-strip,
    body.admin .staff-metrics,
    body.admin .staff-residents-metrics,
    body.admin .staff-service-metrics,
    body.admin .staff-complaint-metrics,
    body.staff .staff-metrics,
    body.staff .staff-residents-metrics,
    body.staff .staff-service-metrics,
    body.staff .staff-complaint-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    body.admin .staff-service-metrics .staff-metric:nth-child(odd):last-child,
    body.admin .staff-complaint-metrics .staff-metric:nth-child(odd):last-child,
    body.staff .staff-service-metrics .staff-metric:nth-child(odd):last-child,
    body.staff .staff-complaint-metrics .staff-metric:nth-child(odd):last-child {
        grid-column: 1 / -1 !important;
    }

    body.admin .staff-residents-metrics .staff-metric,
    body.staff .staff-residents-metrics .staff-metric {
        grid-column: auto !important;
    }

    .admin-metric,
    .admin-stat-strip article,
    .staff-metric {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        min-height: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .admin-metric > span,
    .admin-stat-strip article > span,
    .staff-metric > span {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        display: grid !important;
        place-items: center !important;
    }

    .admin-metric small,
    .admin-stat-strip article small,
    .staff-metric small {
        font-size: 10.5px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    .admin-metric strong,
    .admin-stat-strip article b,
    .staff-metric b {
        font-size: 19px !important;
        font-weight: 900 !important;
        margin: 1px 0 !important;
        line-height: 1.1 !important;
        display: block !important;
    }

    .admin-metric a,
    .staff-metric em {
        font-size: 9.5px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    /* 4. Pulse Strip & Overview Panels */
    body.admin .admin-dashboard-pulse {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    body.admin .admin-dashboard-pulse article {
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.admin .admin-dashboard-pulse .pulse-icon {
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 32px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    body.admin .admin-dashboard-pulse article strong {
        font-size: 17px !important;
        font-weight: 900 !important;
    }

    body.admin .admin-dashboard-pulse article small {
        font-size: 10px !important;
    }

    body.admin .admin-dashboard-pulse article a {
        font-size: 10.5px !important;
        font-weight: 700 !important;
    }

    body.admin .admin-completion-overview,
    body.admin .admin-dashboard-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.admin .admin-grid-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    body.admin .panel,
    body.admin .staff-panel,
    body.staff .staff-panel,
    body.admin .staff-service-list,
    body.staff .staff-service-list,
    body.admin .staff-residents-directory,
    body.staff .staff-residents-directory {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 13px 14px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    body.admin .panel-title,
    body.staff .staff-panel-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 10px !important;
        width: 100% !important;
    }

    body.admin .panel-title h2,
    body.staff .staff-panel-header h2 {
        font-size: 13.5px !important;
        font-weight: 800 !important;
        margin: 0 !important;
    }

    body.admin .panel-title a,
    body.staff .staff-panel-header a {
        font-size: 10.5px !important;
        font-weight: 700 !important;
    }

    body.admin .admin-summary-item {
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid var(--ref-line, #edf1f7) !important;
        width: 100% !important;
    }

    body.admin .admin-completion-panel .admin-record-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        border-radius: 50% !important;
    }

    body.admin .admin-summary-item strong {
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    body.admin .admin-summary-item small {
        font-size: 10px !important;
        color: #64748b !important;
    }

    body.admin .admin-record-status {
        font-size: 9px !important;
        padding: 2px 7px !important;
        border-radius: 5px !important;
    }

    /* 5. Modules Grid (2x3 Balanced) */
    body.admin .admin-module-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.admin .admin-module-card {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: auto !important;
    }

    body.admin .admin-module-card > span {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        display: grid !important;
        place-items: center !important;
    }

    body.admin .admin-module-card strong {
        font-size: 12px !important;
        font-weight: 700 !important;
        display: block !important;
    }

    body.admin .admin-module-card small {
        font-size: 9.5px !important;
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* 6. Staff Workspaces, Horizontally Scrollable Tabs & Tables */
    body.staff .staff-workspace,
    body.staff .staff-service-workspace,
    body.staff .staff-residents-workspace,
    body.admin .staff-workspace,
    body.admin .staff-service-workspace,
    body.admin .staff-residents-workspace {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.staff .staff-tabs,
    body.admin .admin-tabs,
    body.admin .staff-tabs,
    body.admin .staff-request-tabs,
    body.staff .staff-request-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
        padding: 4px 2px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        border-bottom: 1px solid var(--ref-line, #edf1f7) !important;
        scrollbar-width: thin !important;
        box-sizing: border-box !important;
    }

    body.staff .staff-tabs a,
    body.admin .admin-tabs a,
    body.admin .staff-tabs a,
    body.admin .staff-request-tabs a,
    body.staff .staff-request-tabs a {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 6px 11px !important;
        border-radius: 7px !important;
        min-height: 42px !important;
        box-sizing: border-box !important;
    }

    body.admin .staff-resident-mode-tabs,
    body.staff .staff-resident-mode-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 0 12px !important;
    }

    body.admin .staff-resident-mode-tabs a,
    body.staff .staff-resident-mode-tabs a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 58px !important;
        padding: 8px 6px !important;
        border: 1px solid #dce8e3 !important;
        border-radius: 9px !important;
        background: #fff !important;
        text-align: center !important;
        box-sizing: border-box !important;
        gap: 3px !important;
        text-decoration: none !important;
    }

    body.admin .staff-resident-mode-tabs a.active,
    body.staff .staff-resident-mode-tabs a.active {
        border: 1.5px solid #087443 !important;
        background: #edfcf4 !important;
        color: #074e2e !important;
        box-shadow: 0 4px 12px rgba(8, 116, 67, 0.12) !important;
    }

    body.admin .staff-resident-mode-tabs a span,
    body.staff .staff-resident-mode-tabs a span {
        display: grid !important;
        place-items: center !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 6px !important;
        background: #dff8e9 !important;
        color: #087443 !important;
        font-size: 13px !important;
    }

    body.admin .staff-resident-mode-tabs a.active span,
    body.staff .staff-resident-mode-tabs a.active span {
        background: #087443 !important;
        color: #fff !important;
    }

    body.admin .staff-resident-mode-tabs a b,
    body.staff .staff-resident-mode-tabs a b {
        font-size: 11px !important;
        line-height: 1.2 !important;
        color: #071340 !important;
    }

    body.admin .staff-resident-mode-tabs a small,
    body.staff .staff-resident-mode-tabs a small {
        font-size: 9.5px !important;
        color: #64748b !important;
        margin: 0 !important;
    }

    body.admin .admin-toolbar,
    body.admin .admin-filters {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 12px !important;
        border-radius: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.admin .admin-toolbar input,
    body.admin .admin-toolbar select,
    body.admin .admin-toolbar .btn {
        width: 100% !important;
        height: 40px !important;
        font-size: 12.5px !important;
        border-radius: 7px !important;
        box-sizing: border-box !important;
    }

    body.staff .staff-table-wrap,
    body.admin .staff-table-wrap {
        display: none !important;
    }

    body.admin .table-wrap,
    body.admin .admin-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px !important;
        border: 1px solid var(--ref-line, #edf1f7) !important;
        box-sizing: border-box !important;
    }

    body.staff .staff-table,
    body.admin .admin-table,
    body.admin .table {
        min-width: 620px !important;
        font-size: 11.5px !important;
    }

    body.staff .staff-table th,
    body.staff .staff-table td,
    body.admin .admin-table th,
    body.admin .admin-table td {
        padding: 9px 10px !important;
        font-size: 11.5px !important;
    }

    body.staff .staff-table td strong,
    body.admin .admin-table td strong {
        font-size: 12px !important;
    }

    body.staff .staff-table td small,
    body.admin .admin-table td small {
        font-size: 9.5px !important;
    }

    body.staff .staff-priority {
        font-size: 9px !important;
        padding: 2px 7px !important;
        border-radius: 5px !important;
    }

    body.staff .staff-action-stack {
        display: flex !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
    }

    body.staff .staff-action-stack .btn {
        padding: 3px 8px !important;
        font-size: 10.5px !important;
        height: 28px !important;
        min-height: 28px !important;
        border-radius: 5px !important;
    }

    /* 7. Dialogs & Review Modals on Mobile */
    dialog.staff-detail-dialog,
    dialog.staff-status-dialog,
    .resident-review-dialog,
    .staff-payment-dialog {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 12px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .resident-review-card,
    .staff-status-dialog-card,
    .staff-payment-dialog-card {
        padding: 14px !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .resident-review-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .resident-review-buttons {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Mobile Search & Filter Row guarantee for Admin & Staff */
    body.admin .staff-filters,
    body.staff .staff-filters,
    body.admin .staff-service-filters,
    body.staff .staff-service-filters,
    body.admin .staff-resident-filters,
    body.staff .staff-resident-filters {
        display: block !important;
        padding: 0 !important;
        margin: 0 0 12px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        width: 100% !important;
    }

    body.admin .staff-filter-main-row,
    body.staff .staff-filter-main-row {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px !important;
        box-sizing: border-box !important;
    }

    body.admin .staff-search-box-wrap,
    body.staff .staff-search-box-wrap {
        position: relative !important;
        display: block !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: 0 !important;
        box-sizing: border-box !important;
    }

    body.admin .staff-search-box-wrap input,
    body.staff .staff-search-box-wrap input {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        padding: 0 34px 0 12px !important;
        border: 1px solid #d3dfd8 !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        color: #07162d !important;
        background: #fff !important;
        outline: none !important;
        box-sizing: border-box !important;
    }

    body.admin .staff-search-box-wrap input:focus,
    body.staff .staff-search-box-wrap input:focus {
        border-color: #087443 !important;
        box-shadow: 0 0 0 3px rgba(8, 116, 67, 0.12) !important;
    }

    body.admin .staff-search-box-wrap .search-icon,
    body.staff .staff-search-box-wrap .search-icon,
    body.admin .staff-search-box-wrap .staff-search-icon,
    body.staff .staff-search-box-wrap .staff-search-icon {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #64748b !important;
        font-size: 14px !important;
        pointer-events: none !important;
    }

    body.admin .staff-filter-toggle-btn,
    body.staff .staff-filter-toggle-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        height: 42px !important;
        padding: 0 13px !important;
        border: 1px solid #087443 !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: #087443 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    body.admin .staff-filter-toggle-btn svg,
    body.staff .staff-filter-toggle-btn svg {
        display: inline-block !important;
        vertical-align: middle !important;
        flex-shrink: 0 !important;
        stroke: currentColor !important;
    }

    body.admin .staff-filter-toggle-btn.open,
    body.admin .staff-filter-toggle-btn.is-open,
    body.admin .staff-filter-toggle-btn.active,
    body.admin .staff-filter-toggle-btn.is-active,
    body.staff .staff-filter-toggle-btn.open,
    body.staff .staff-filter-toggle-btn.is-open,
    body.staff .staff-filter-toggle-btn.active,
    body.staff .staff-filter-toggle-btn.is-active {
        background: #087443 !important;
        color: #fff !important;
    }

    body.admin .staff-filter-toggle-btn.open svg,
    body.admin .staff-filter-toggle-btn.is-open svg,
    body.admin .staff-filter-toggle-btn.active svg,
    body.admin .staff-filter-toggle-btn.is-active svg,
    body.staff .staff-filter-toggle-btn.open svg,
    body.staff .staff-filter-toggle-btn.is-open svg,
    body.staff .staff-filter-toggle-btn.active svg,
    body.staff .staff-filter-toggle-btn.is-active svg {
        stroke: #fff !important;
    }
}

/* ==========================================================================
   Resident Details Page - Mobile Responsive Refinements
   ========================================================================== */
@media (max-width: 768px) {
    body.admin .staff-resident-detail-page,
    body.staff .staff-resident-detail-page {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        gap: 14px !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    body.admin .resident-page-back,
    body.staff .resident-page-back {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 38px !important;
        padding: 0 14px !important;
        background: #fff !important;
        border: 1px solid #dce8e3 !important;
        border-radius: 8px !important;
        color: #087443 !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
        margin-bottom: 2px !important;
        width: fit-content !important;
    }

    body.admin .resident-page-back:hover,
    body.staff .resident-page-back:hover {
        background: #f4faf6 !important;
        border-color: #8acbad !important;
    }

    body.admin .resident-page-layout,
    body.staff .resident-page-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        gap: 14px !important;
    }

    body.admin .resident-page-main,
    body.staff .resident-page-main,
    body.admin .resident-page-aside,
    body.staff .resident-page-aside {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        gap: 14px !important;
    }

    body.admin .resident-page-hero,
    body.staff .resident-page-hero,
    body.admin .resident-page-card,
    body.staff .resident-page-card,
    body.admin .resident-page-profile-card,
    body.staff .resident-page-profile-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 16px !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 18px rgba(11, 35, 55, 0.05) !important;
        overflow: hidden !important;
    }

    body.admin .resident-page-profile,
    body.staff .resident-page-profile {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        padding-bottom: 14px !important;
        border-bottom: 1px solid #eef3f1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.admin .resident-page-profile > span,
    body.staff .resident-page-profile > span {
        flex: 0 0 54px !important;
        width: 54px !important;
        height: 54px !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        border-radius: 50% !important;
        background: #dff7e9 !important;
        color: #087443 !important;
        display: grid !important;
        place-items: center !important;
    }

    body.admin .resident-page-profile > div,
    body.staff .resident-page-profile > div {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    body.admin .resident-page-profile h2,
    body.staff .resident-page-profile h2 {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin: 0 0 4px !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        color: #071340 !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }

    body.admin .resident-page-profile h2 .badge,
    body.staff .resident-page-profile h2 .badge {
        font-size: 10px !important;
        padding: 3px 8px !important;
        vertical-align: middle !important;
    }

    body.admin .resident-page-profile p,
    body.staff .resident-page-profile p {
        margin: 0 !important;
        color: #64778b !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }

    body.admin .resident-page-contact-strip,
    body.staff .resident-page-contact-strip {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        gap: 8px !important;
        padding-top: 14px !important;
        margin-top: 0 !important;
        border-top: 1px solid #eef3f1 !important;
    }

    body.admin .resident-page-contact-strip div,
    body.staff .resident-page-contact-strip div {
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr) !important;
        column-gap: 10px !important;
        align-items: center !important;
        background: #f8faf9 !important;
        border: 1px solid #e8f0ec !important;
        border-radius: 8px !important;
        padding: 10px 14px !important;
        min-height: 48px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.admin .resident-page-contact-strip span,
    body.staff .resident-page-contact-strip span {
        grid-row: span 2 !important;
        font-size: 16px !important;
        color: #087443 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.admin .resident-page-contact-strip small,
    body.staff .resident-page-contact-strip small {
        font-size: 10px !important;
        color: #64778b !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    body.admin .resident-page-contact-strip strong,
    body.staff .resident-page-contact-strip strong {
        margin-top: 2px !important;
        font-size: 12px !important;
        color: #071340 !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* Resident Tabs Scroll Wrapper & Arrows */
    .resident-tabs-wrapper,
    body.admin .resident-tabs-wrapper,
    body.staff .resident-tabs-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .resident-tabs-arrow,
    body.admin .resident-tabs-arrow,
    body.staff .resident-tabs-arrow {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 6 !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: #ffffff !important;
        border: 1px solid #c2dbd0 !important;
        color: #087443 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        cursor: pointer !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        transition: background 0.15s, transform 0.15s, box-shadow 0.15s, opacity 0.15s !important;
        user-select: none !important;
    }

    .resident-tabs-arrow:hover,
    body.admin .resident-tabs-arrow:hover,
    body.staff .resident-tabs-arrow:hover {
        background: #f0faf4 !important;
        border-color: #087443 !important;
        transform: translateY(-50%) scale(1.08) !important;
        box-shadow: 0 4px 12px rgba(8, 116, 67, 0.25) !important;
    }

    .resident-tabs-arrow-left,
    body.admin .resident-tabs-arrow-left,
    body.staff .resident-tabs-arrow-left {
        left: 2px !important;
    }

    .resident-tabs-arrow-right,
    body.admin .resident-tabs-arrow-right,
    body.staff .resident-tabs-arrow-right {
        right: 2px !important;
    }

    .resident-tabs-arrow[hidden],
    body.admin .resident-tabs-arrow[hidden],
    body.staff .resident-tabs-arrow[hidden] {
        display: none !important;
    }

    body.admin .resident-page-tabs,
    body.staff .resident-page-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        gap: 16px !important;
        padding: 0 28px !important;
        border-bottom: 2px solid #edf3f1 !important;
        margin: 0 !important;
    }

    body.admin .resident-page-tabs::-webkit-scrollbar,
    body.staff .resident-page-tabs::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    body.admin .resident-page-tabs a,
    body.staff .resident-page-tabs a {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 12px 2px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #6a7d96 !important;
        text-decoration: none !important;
    }

    body.admin .resident-page-tabs a.active,
    body.staff .resident-page-tabs a.active {
        color: #087443 !important;
        font-weight: 800 !important;
    }

    body.admin .resident-page-tabs a:after,
    body.staff .resident-page-tabs a:after {
        bottom: -2px !important;
        height: 3px !important;
        border-radius: 3px 3px 0 0 !important;
    }

    body.admin .resident-page-tabs a.active:after,
    body.staff .resident-page-tabs a.active:after {
        background: #087443 !important;
    }

    body.admin .resident-page-tab-panel,
    body.staff .resident-page-tab-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.admin .resident-page-info-grid,
    body.staff .resident-page-info-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        gap: 14px !important;
        padding-top: 14px !important;
    }

    body.admin .resident-page-info-grid article,
    body.staff .resident-page-info-grid article {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 16px !important;
        border-radius: 10px !important;
        min-height: auto !important;
        background: #fff !important;
        border: 1px solid #e4ece9 !important;
    }

    body.admin .resident-page-info-grid h3,
    body.staff .resident-page-info-grid h3 {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        margin: 0 0 12px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #edf3f1 !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #071340 !important;
    }

    body.admin .resident-page-info-grid h3 span,
    body.staff .resident-page-info-grid h3 span {
        display: grid !important;
        place-items: center !important;
        width: 26px !important;
        height: 26px !important;
        border-radius: 7px !important;
        color: #087443 !important;
        background: #dff7e9 !important;
        font-size: 14px !important;
    }

    body.admin .resident-page-info-grid dl,
    body.staff .resident-page-info-grid dl {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    body.admin .resident-page-info-grid dl div,
    body.staff .resident-page-info-grid dl div {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 34px !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #edf3f1 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.admin .resident-page-info-grid dl div:last-child,
    body.staff .resident-page-info-grid dl div:last-child {
        border-bottom: 0 !important;
    }

    body.admin .resident-page-info-grid dt,
    body.staff .resident-page-info-grid dt {
        flex: 0 0 auto !important;
        color: #64778b !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }

    body.admin .resident-page-info-grid dd,
    body.staff .resident-page-info-grid dd {
        flex: 1 1 auto !important;
        text-align: right !important;
        margin: 0 !important;
        color: #071340 !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    body.admin .resident-page-info-grid dd .badge,
    body.staff .resident-page-info-grid dd .badge {
        font-size: 9.5px !important;
        padding: 3px 8px !important;
        display: inline-block !important;
    }

    body.admin .resident-page-decision,
    body.staff .resident-page-decision {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        gap: 12px !important;
        margin-top: 18px !important;
        padding: 16px !important;
        background: #fbfdfc !important;
        border: 1px solid #e0ebe7 !important;
        border-radius: 10px !important;
    }

    body.admin .resident-page-decision label,
    body.staff .resident-page-decision label {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        font-size: 11.5px !important;
        font-weight: 800 !important;
        color: #073e2e !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.admin .resident-page-decision textarea,
    body.staff .resident-page-decision textarea {
        width: 100% !important;
        min-height: 74px !important;
        padding: 11px 12px !important;
        border: 1px solid #d6e4de !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: #071340 !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        box-sizing: border-box !important;
    }

    body.admin .resident-page-decision label small,
    body.staff .resident-page-decision label small {
        color: #667c91 !important;
        font-size: 10px !important;
        text-align: right !important;
    }

    body.admin .resident-page-decision > div,
    body.staff .resident-page-decision > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.admin .resident-page-decision .btn,
    body.staff .resident-page-decision .btn {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 8px !important;
        font-size: 12.5px !important;
        font-weight: 800 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    body.admin .resident-page-decision .resident-page-decline,
    body.staff .resident-page-decision .resident-page-decline {
        color: #d32f2f !important;
        background: #fff !important;
        border: 1.5px solid #ff8e8e !important;
        box-shadow: none !important;
    }

    body.admin .resident-page-decision .resident-page-decline:hover,
    body.staff .resident-page-decision .resident-page-decline:hover {
        background: #fff5f5 !important;
        border-color: #e53935 !important;
        color: #b71c1c !important;
    }

    body.admin .resident-overview-card,
    body.staff .resident-overview-card,
    body.admin .resident-activity-card,
    body.staff .resident-activity-card,
    body.admin .resident-page-aside,
    body.staff .resident-page-aside {
        display: none !important;
    }

    body.admin .resident-document-grid,
    body.staff .resident-document-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    body.admin .resident-page-contact-strip,
    body.staff .resident-page-contact-strip {
        gap: 8px !important;
    }

    body.admin .resident-page-contact-strip div,
    body.staff .resident-page-contact-strip div {
        padding: 8px 10px !important;
    }
}

/* Dark Mode Overrides for Resident Details Mobile */
html[data-theme="dark"] body.admin .resident-page-back,
html[data-theme="dark"] body.staff .resident-page-back {
    background: #11251c !important;
    border-color: #204735 !important;
    color: #5beb9d !important;
}

html[data-theme="dark"] body.admin .resident-page-contact-strip div,
html[data-theme="dark"] body.staff .resident-page-contact-strip div {
    background: #11251c !important;
    border-color: #204735 !important;
}

html[data-theme="dark"] body.admin .resident-page-contact-strip small,
html[data-theme="dark"] body.staff .resident-page-contact-strip small {
    color: #92b1a3 !important;
}

html[data-theme="dark"] body.admin .resident-page-contact-strip strong,
html[data-theme="dark"] body.staff .resident-page-contact-strip strong {
    color: #e6f6ee !important;
}

html[data-theme="dark"] body.admin .resident-page-tabs,
html[data-theme="dark"] body.staff .resident-page-tabs {
    border-color: #1e3d2f !important;
}

html[data-theme="dark"] body.admin .resident-page-tabs a,
html[data-theme="dark"] body.staff .resident-page-tabs a {
    color: #8fa69a !important;
}

html[data-theme="dark"] body.admin .resident-page-tabs a.active,
html[data-theme="dark"] body.staff .resident-page-tabs a.active {
    color: #5beb9d !important;
}

html[data-theme="dark"] body.admin .resident-page-info-grid article,
html[data-theme="dark"] body.staff .resident-page-info-grid article {
    background: #0d1e16 !important;
    border-color: #204735 !important;
}

html[data-theme="dark"] body.admin .resident-page-info-grid h3,
html[data-theme="dark"] body.staff .resident-page-info-grid h3 {
    color: #e6f6ee !important;
    border-color: #1e3d2f !important;
}

html[data-theme="dark"] body.admin .resident-page-info-grid dl div,
html[data-theme="dark"] body.staff .resident-page-info-grid dl div {
    border-color: #1e3d2f !important;
}

html[data-theme="dark"] body.admin .resident-page-info-grid dt,
html[data-theme="dark"] body.staff .resident-page-info-grid dt {
    color: #92b1a3 !important;
}

html[data-theme="dark"] body.admin .resident-page-info-grid dd,
html[data-theme="dark"] body.staff .resident-page-info-grid dd {
    color: #e6f6ee !important;
}

html[data-theme="dark"] body.admin .resident-page-decision,
html[data-theme="dark"] body.staff .resident-page-decision {
    background: #11251c !important;
    border-color: #204735 !important;
}

html[data-theme="dark"] body.admin .resident-page-decision label,
html[data-theme="dark"] body.staff .resident-page-decision label {
    color: #a8d5be !important;
}

html[data-theme="dark"] body.admin .resident-page-decision textarea,
html[data-theme="dark"] body.staff .resident-page-decision textarea {
    background: #0d1e16 !important;
    border-color: #254a38 !important;
    color: #e6f6ee !important;
}

html[data-theme="dark"] body.admin .resident-page-decision .resident-page-decline,
html[data-theme="dark"] body.staff .resident-page-decision .resident-page-decline {
    color: #ff8e8e !important;
    background: #251214 !important;
    border-color: #8c3237 !important;
}

@media (min-width: 769px) {
    .resident-tabs-arrow,
    body.admin .resident-tabs-arrow,
    body.staff .resident-tabs-arrow {
        display: none !important;
    }
}

html[data-theme="dark"] .resident-tabs-arrow,
html[data-theme="dark"] body.admin .resident-tabs-arrow,
html[data-theme="dark"] body.staff .resident-tabs-arrow {
    background: #132a1e !important;
    border-color: #2b5641 !important;
    color: #5beb9d !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .resident-tabs-arrow:hover,
html[data-theme="dark"] body.admin .resident-tabs-arrow:hover,
html[data-theme="dark"] body.staff .resident-tabs-arrow:hover {
    background: #193828 !important;
    border-color: #5beb9d !important;
}

/* ==========================================================================
   RESIDENCY PROOF PREVIEW & RESPONSIVE DIALOG MODAL
   ========================================================================== */

body.dialog-open {
    overflow: hidden !important;
}

/* Proof Thumbnail Container Button */
button.resident-page-proof,
.resident-page-proof {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--ref-primary-dark, #087443) !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

.resident-page-proof-frame {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #dce8e3 !important;
    border-radius: 8px !important;
    background: #fbfdfc !important;
    overflow: hidden !important;
    min-height: 125px !important;
    max-height: 155px !important;
    height: 145px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.resident-page-proof-frame img {
    width: 100% !important;
    height: 100% !important;
    max-height: 145px !important;
    object-fit: contain !important;
    display: block !important;
}

.resident-page-proof-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(7, 19, 64, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.resident-page-proof-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    background: #ffffff !important;
    color: #087443 !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(4px) !important;
    transition: transform 0.2s ease !important;
}

button.resident-page-proof:hover .resident-page-proof-frame,
button.resident-page-proof:focus-visible .resident-page-proof-frame {
    border-color: #087443 !important;
    box-shadow: 0 6px 18px rgba(8, 116, 67, 0.18) !important;
    transform: translateY(-2px) !important;
}

button.resident-page-proof:hover .resident-page-proof-overlay,
button.resident-page-proof:focus-visible .resident-page-proof-overlay {
    opacity: 1 !important;
}

button.resident-page-proof:hover .resident-page-proof-badge,
button.resident-page-proof:focus-visible .resident-page-proof-badge {
    transform: translateY(0) !important;
}

.resident-page-proof strong {
    display: none !important;
}

/* Responsive Dialog Modal */
.resident-document-dialog {
    width: min(840px, calc(100vw - 36px)) !important;
    max-height: calc(100vh - 36px) !important;
    margin: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.resident-document-dialog[open] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    margin: auto !important;
}

.resident-document-dialog::backdrop {
    background: rgba(11, 29, 47, 0.72) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.resident-document-dialog-card {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 22px !important;
    border: 1px solid #dfe9e5 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 25px 65px rgba(0, 29, 21, 0.35) !important;
    box-sizing: border-box !important;
}

.resident-document-dialog-card header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 1px solid #eef3f1 !important;
}

.resident-document-dialog-card header span {
    display: inline-flex !important;
    margin-bottom: 8px !important;
    padding: 5px 11px !important;
    border-radius: 6px !important;
    color: #087443 !important;
    background: #dff7e9 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.resident-document-dialog-card h2 {
    margin: 0 0 6px !important;
    color: #071340 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

.resident-document-dialog-card p {
    margin: 0 !important;
    color: #64778b !important;
    font-size: 11.5px !important;
}

.resident-document-dialog-card header button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    border: 1px solid #dce8e3 !important;
    border-radius: 8px !important;
    color: #41566f !important;
    background: #fbfdfc !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.resident-document-dialog-card header button:hover {
    color: #ee3535 !important;
    border-color: #ffb8b8 !important;
    background: #fff5f5 !important;
}

.resident-document-meta {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 14px 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #e6f0ec !important;
    border-radius: 8px !important;
    background: #f8fbfa !important;
}

.resident-document-preview {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 240px !important;
    max-height: 60vh !important;
    margin-bottom: 14px !important;
    padding: 16px !important;
    border: 1px solid #dfe9e5 !important;
    border-radius: 8px !important;
    background: #f4f8f6 !important;
    overflow: auto !important;
}

.resident-document-preview img,
.resident-proof-dialog-img {
    display: block !important;
    max-width: 100% !important;
    max-height: 52vh !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    border: 1px solid #dce8e3 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    object-fit: contain !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

.resident-document-dialog.is-full-preview {
    width: min(1180px, calc(100vw - 28px)) !important;
}

.resident-document-dialog.is-full-preview .resident-document-preview {
    max-height: calc(85vh - 160px) !important;
}

.resident-document-dialog.is-full-preview .resident-document-preview img,
.resident-document-dialog.is-full-preview .resident-proof-dialog-img {
    max-height: calc(80vh - 180px) !important;
    max-width: 100% !important;
}

.resident-document-dialog-card footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
}

.resident-document-dialog-card footer button,
.resident-document-dialog-card footer a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.resident-document-view-full {
    border: 1px solid #dce8e3 !important;
    color: #071340 !important;
    background: #ffffff !important;
}

.resident-document-view-full:hover {
    border-color: #8acbad !important;
    background: #f3fff8 !important;
    color: #087443 !important;
}

.resident-document-download,
a.resident-document-download,
a.resident-document-download:visited {
    border: 1px solid #087443 !important;
    color: #ffffff !important;
    background: #087443 !important;
}

.resident-document-download:hover,
a.resident-document-download:hover,
a.resident-document-download:active {
    background: #065e36 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(8, 116, 67, 0.25) !important;
}

/* Mobile Responsive Dialog (< 768px) */
@media (max-width: 768px) {
    .resident-document-dialog,
    .resident-proof-dialog {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 24px) !important;
        margin: auto !important;
    }

    .resident-document-dialog-card {
        padding: 14px !important;
        max-height: calc(100dvh - 24px) !important;
    }

    .resident-document-dialog-card header {
        position: relative !important;
        padding-bottom: 12px !important;
        padding-right: 42px !important;
    }

    .resident-document-dialog-card header h2 {
        font-size: 15px !important;
    }

    .resident-document-dialog-card header button {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 22px !important;
    }

    .resident-document-meta {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        margin: 10px 0 !important;
    }

    .resident-document-preview {
        min-height: 180px !important;
        max-height: 50vh !important;
        padding: 8px !important;
        margin-bottom: 12px !important;
    }

    .resident-document-preview img,
    .resident-proof-dialog-img {
        max-height: 44vh !important;
        max-width: 100% !important;
    }

    .resident-document-dialog-card footer {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .resident-document-dialog-card footer button,
    .resident-document-dialog-card footer a {
        width: 100% !important;
        min-height: 42px !important;
    }

    .resident-document-note {
        font-size: 10px !important;
        padding: 8px 10px !important;
        margin-top: 10px !important;
    }
}

/* Dark Mode Support */
html[data-theme="dark"] .resident-document-dialog::backdrop {
    background: rgba(4, 10, 8, 0.85) !important;
}

html[data-theme="dark"] .resident-document-dialog-card {
    background: #0f221a !important;
    border-color: #234937 !important;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .resident-document-dialog-card header {
    border-color: #1e3d2f !important;
}

html[data-theme="dark"] .resident-document-dialog-card header span {
    background: #193828 !important;
    color: #5beb9d !important;
}

html[data-theme="dark"] .resident-document-dialog-card h2 {
    color: #e6f6ee !important;
}

html[data-theme="dark"] .resident-document-dialog-card p {
    color: #8fa69a !important;
}

html[data-theme="dark"] .resident-document-dialog-card header button {
    background: #142a20 !important;
    border-color: #264a39 !important;
    color: #8fa69a !important;
}

html[data-theme="dark"] .resident-document-dialog-card header button:hover {
    background: #2a1416 !important;
    border-color: #6b282c !important;
    color: #ff8e8e !important;
}

html[data-theme="dark"] .resident-document-meta {
    background: #0b1a13 !important;
    border-color: #1e3d2f !important;
}

html[data-theme="dark"] .resident-document-meta small {
    color: #8fa69a !important;
}

html[data-theme="dark"] .resident-document-meta strong {
    color: #e6f6ee !important;
}

html[data-theme="dark"] .resident-document-preview {
    background: #08140f !important;
    border-color: #1e3d2f !important;
}

html[data-theme="dark"] .resident-document-preview img,
html[data-theme="dark"] .resident-proof-dialog-img {
    background: #0b1a13 !important;
    border-color: #234937 !important;
}

html[data-theme="dark"] .resident-document-view-full {
    background: #142a20 !important;
    border-color: #264a39 !important;
    color: #e6f6ee !important;
}

html[data-theme="dark"] .resident-document-view-full:hover {
    background: #1a382b !important;
    border-color: #5beb9d !important;
    color: #5beb9d !important;
}

html[data-theme="dark"] .resident-document-note {
    background: #12221b !important;
    color: #8fa69a !important;
    border-color: #1e3d2f !important;
}

html[data-theme="dark"] .resident-page-proof-frame {
    background: #0b1a13 !important;
    border-color: #234937 !important;
}

html[data-theme="dark"] button.resident-page-proof:hover .resident-page-proof-frame {
    border-color: #5beb9d !important;
    box-shadow: 0 6px 18px rgba(91, 235, 157, 0.15) !important;
}





/* ==========================================================================
   RESIDENT QUICK ACTION HERO BANNER (BACKGROUND IMAGE & GLASSMORPHISM)
   ========================================================================== */

.quick-welcome {
    position: relative !important;
    min-height: 290px !important;
    overflow: hidden !important;
    border: 1px solid rgba(8, 116, 67, 0.18) !important;
    border-radius: 20px !important;
    background:
        linear-gradient(92deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.84) 36%, rgba(255, 255, 255, 0.44) 66%, rgba(255, 255, 255, 0.12) 100%),
        url('../images/nalook-hall-exterior.jpg') right 30% / cover no-repeat !important;
    box-shadow: 0 18px 46px rgba(14, 34, 25, 0.08) !important;
}

.quick-welcome:after,
.quick-welcome-media,
.quick-slider-dots {
    display: none !important;
}

.quick-welcome-copy {
    position: relative !important;
    z-index: 3 !important;
    max-width: 680px !important;
    padding: 30px clamp(24px, 3.5vw, 44px) !important;
}

.quick-welcome-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
    color: var(--qa-primary) !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

.quick-welcome-label:after {
    content: "" !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 50% 50%, var(--qa-primary) 0 3px, transparent 4px), #e0f4e9 !important;
}

.quick-welcome h1 {
    margin: 0 0 8px !important;
    color: var(--qa-ink) !important;
    font-size: clamp(32px, 3.8vw, 48px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
}

.quick-welcome h1 em {
    color: var(--qa-primary) !important;
    font-style: normal !important;
}

.quick-welcome-copy > p {
    margin: 0 !important;
    color: #3b5066 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Glassmorphism Metric Cards */
.quick-welcome-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    max-width: 640px !important;
    margin-top: 22px !important;
}

.quick-welcome-metrics a {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 80px !important;
    padding: 12px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 12px !important;
    color: var(--qa-ink) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 8px 24px rgba(7, 24, 16, 0.08) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}

.quick-welcome-metrics a:hover {
    transform: translateY(-3px) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: #8acbad !important;
    box-shadow: 0 14px 30px rgba(8, 116, 67, 0.16) !important;
}

.quick-welcome-metrics .metric-icon {
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
}

/* Glassmorphism Status Badge Pill */
.quick-welcome-status {
    position: absolute !important;
    z-index: 4 !important;
    top: 26px !important;
    right: clamp(20px, 3.5vw, 44px) !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
    max-width: 360px !important;
    padding: 8px 18px 8px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 10px 28px rgba(7, 24, 16, 0.10) !important;
}

.quick-welcome-status > span {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    color: var(--qa-primary) !important;
    background: #dff6e9 !important;
    flex-shrink: 0 !important;
}

.quick-welcome-status svg {
    width: 20px !important;
    height: 20px !important;
}

.quick-welcome-status strong {
    color: var(--qa-ink) !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
}

.quick-welcome-status small {
    margin-top: 2px !important;
    color: #516173 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .quick-welcome {
        min-height: auto !important;
        border-radius: 14px !important;
        padding: 16px 14px 18px !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.84) 50%, rgba(255, 255, 255, 0.74) 100%),
            url('../images/nalook-hall-exterior.jpg') center center / cover no-repeat !important;
    }

    .quick-welcome-copy {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .quick-welcome-label {
        font-size: 9.5px !important;
        letter-spacing: .08em !important;
        margin-bottom: 6px !important;
    }

    .quick-welcome h1 {
        font-size: clamp(20px, 6vw, 25px) !important;
        line-height: 1.2 !important;
        margin: 0 0 4px !important;
    }

    .quick-welcome-copy > p {
        font-size: 12px !important;
        margin: 0 0 10px !important;
        line-height: 1.4 !important;
        color: #435b50 !important;
    }

    .quick-welcome-status {
        position: static !important;
        display: inline-flex !important;
        width: auto !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
        padding: 6px 12px 6px 8px !important;
        gap: 8px !important;
        border-radius: 999px !important;
    }

    .quick-welcome-status > span {
        width: 26px !important;
        height: 26px !important;
    }

    .quick-welcome-status svg {
        width: 14px !important;
        height: 14px !important;
    }

    .quick-welcome-status strong {
        font-size: 11px !important;
    }

    .quick-welcome-status small {
        display: none !important;
    }

    .quick-welcome-metrics {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 6px !important;
        width: 100% !important;
    }

    .quick-welcome-metrics a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 10px 4px 8px !important;
        min-height: 68px !important;
        border-radius: 10px !important;
        gap: 4px !important;
        background: rgba(255, 255, 255, 0.88) !important;
    }

    .quick-welcome-metrics .metric-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .quick-welcome-metrics .metric-icon svg {
        width: 15px !important;
        height: 15px !important;
    }

    .quick-welcome-metrics b {
        font-size: 16px !important;
        line-height: 1 !important;
    }

    .quick-welcome-metrics strong {
        font-size: 10px !important;
        margin-top: 1px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    .quick-welcome-metrics small {
        display: none !important;
    }
}

/* Dark Mode Theme */
html[data-theme="dark"] .quick-welcome {
    border-color: rgba(57, 217, 139, 0.22) !important;
    background:
        linear-gradient(92deg, rgba(8, 22, 16, 0.95) 0%, rgba(8, 22, 16, 0.86) 38%, rgba(8, 22, 16, 0.48) 70%, rgba(8, 22, 16, 0.22) 100%),
        url('../images/nalook-hall-exterior.jpg') right 30% / cover no-repeat !important;
}

html[data-theme="dark"] .quick-welcome-status {
    background: rgba(13, 30, 22, 0.85) !important;
    border-color: rgba(57, 217, 139, 0.25) !important;
}

html[data-theme="dark"] .quick-welcome-status > span {
    background: #193828 !important;
    color: #5beb9d !important;
}

html[data-theme="dark"] .quick-welcome-status strong {
    color: #e6f6ee !important;
}

html[data-theme="dark"] .quick-welcome-status small {
    color: #8fa69a !important;
}

html[data-theme="dark"] .quick-welcome-metrics a {
    background: rgba(13, 30, 22, 0.82) !important;
    border-color: rgba(57, 217, 139, 0.25) !important;
    color: #e6f6ee !important;
}

html[data-theme="dark"] .quick-welcome-metrics a:hover {
    background: rgba(18, 42, 30, 0.94) !important;
    border-color: #5beb9d !important;
}

html[data-theme="dark"] .quick-welcome-metrics b {
    color: #5beb9d !important;
}

html[data-theme="dark"] .quick-welcome-metrics strong {
    color: #e6f6ee !important;
}

@media (max-width: 768px) {
    html[data-theme="dark"] .quick-welcome {
        background:
            linear-gradient(180deg, rgba(8, 22, 16, 0.94) 0%, rgba(8, 22, 16, 0.88) 50%, rgba(8, 22, 16, 0.78) 100%),
            url('../images/nalook-hall-exterior.jpg') center center / cover no-repeat !important;
    }
}

/* ==========================================================================
   FULL-CONTAINER BACKGROUND IMAGE & TRANSPARENT UI FOR QUICK ACTION PAGE
   - No super zoom-in: full building & lettering 100% visible on Web
   - Transparent containers (NO heavy blur)
   - High readability in Light & Dark modes, Web & Mobile responsive
   ========================================================================== */

body.public {
    background: #081a12 !important;
}

.quick-action-page,
html[data-theme="light"] .quick-action-page {
    position: relative !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background-color: #0b1a13 !important;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.20) 100%),
        url('../images/nalook-hall-exterior.jpg') !important;
    background-position: center top !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

html[data-theme="dark"] .quick-action-page {
    position: relative !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background-color: #05120c !important;
    background-image:
        linear-gradient(180deg, rgba(6, 17, 12, 0.58) 0%, rgba(9, 24, 17, 0.45) 45%, rgba(6, 17, 12, 0.65) 100%),
        url('../images/nalook-hall-exterior.jpg') !important;
    background-position: center top !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* Transparent Header (No heavy blur) */
.quick-action-header,
html[data-theme="light"] .quick-action-header {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="dark"] .quick-action-header {
    background: rgba(8, 20, 15, 0.60) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(57, 217, 139, 0.25) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Transparent Welcome Hero Card (No heavy blur) */
.quick-welcome,
html[data-theme="light"] .quick-welcome {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="dark"] .quick-welcome {
    background: rgba(10, 26, 18, 0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(57, 217, 139, 0.28) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

/* Welcome Copy Typography */
html[data-theme="light"] .quick-welcome-copy h1,
.quick-welcome-copy h1 {
    color: #042d19 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(255, 255, 255, 0.7) !important;
}

.quick-welcome h1 em,
.quick-welcome-copy h1 em,
html[data-theme="light"] .quick-welcome h1 em,
html[data-theme="light"] .quick-welcome-copy h1 em {
    color: #064e2b !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #064e2b !important;
    font-style: normal !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="light"] .quick-welcome-copy p,
.quick-welcome-copy p {
    color: #064525 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

html[data-theme="dark"] .quick-welcome-copy h1 {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="dark"] .quick-welcome h1 em,
html[data-theme="dark"] .quick-welcome-copy h1 em {
    color: #39d98b !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #39d98b !important;
    font-style: normal !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

html[data-theme="dark"] .quick-welcome-copy p {
    color: #d1fae5 !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Metric Cards */
.quick-welcome-metrics a,
html[data-theme="light"] .quick-welcome-metrics a {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="dark"] .quick-welcome-metrics a {
    background: rgba(14, 34, 24, 0.68) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(57, 217, 139, 0.30) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* Status Badge */
.quick-welcome-status,
html[data-theme="light"] .quick-welcome-status {
    background: rgba(255, 255, 255, 0.68) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="dark"] .quick-welcome-status {
    background: rgba(14, 34, 24, 0.72) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(57, 217, 139, 0.32) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

/* Portal Section Title */
html[data-theme="light"] .portal-selection h2 {
    color: #042d19 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="dark"] .portal-selection h2 {
    color: #39d98b !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* Transparent Portal Choice Cards (No heavy blur) */
.portal-choice,
html[data-theme="light"] .portal-choice {
    background: rgba(255, 255, 255, 0.48) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
}

.portal-choice:hover,
html[data-theme="light"] .portal-choice:hover {
    background: rgba(255, 255, 255, 0.70) !important;
    border-color: #087443 !important;
    box-shadow: 0 18px 42px rgba(13, 71, 45, 0.20) !important;
}

html[data-theme="light"] .portal-choice h3 {
    color: #042d19 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.90) !important;
}

html[data-theme="light"] .portal-choice p,
html[data-theme="light"] .portal-choice ul li {
    color: #07351d !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.80) !important;
}

html[data-theme="light"] .portal-choice-icon {
    background: rgba(255, 255, 255, 0.80) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
}

html[data-theme="dark"] .portal-choice {
    background: rgba(10, 26, 18, 0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(57, 217, 139, 0.28) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .portal-choice:hover {
    background: rgba(14, 34, 24, 0.75) !important;
    border-color: #39d98b !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.60) !important;
}

html[data-theme="dark"] .portal-choice h3 {
    color: #39d98b !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
}

html[data-theme="dark"] .portal-choice p,
html[data-theme="dark"] .portal-choice ul li {
    color: #d1fae5 !important;
    font-weight: 400 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.80) !important;
}

/* Transparent Map Card (No heavy blur) */
.portal-map-card,
html[data-theme="light"] .portal-map-card {
    background: rgba(255, 255, 255, 0.48) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="dark"] .portal-map-card {
    background: rgba(10, 26, 18, 0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(57, 217, 139, 0.28) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45) !important;
}

/* Transparent Footer (No heavy blur) */
.quick-action-footer,
html[data-theme="light"] .quick-action-footer {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.60) !important;
    color: #042d19 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="light"] .quick-action-footer a {
    color: #087443 !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] .quick-action-footer {
    background: rgba(8, 20, 15, 0.65) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid rgba(57, 217, 139, 0.25) !important;
    color: #d1fae5 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.80) !important;
}

html[data-theme="dark"] .quick-action-footer a {
    color: #39d98b !important;
    font-weight: 600 !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .quick-action-page,
    html[data-theme="light"] .quick-action-page,
    html[data-theme="dark"] .quick-action-page {
        background-attachment: scroll !important;
        background-position: center top !important;
        background-size: cover !important;
    }

    .quick-welcome,
    html[data-theme="light"] .quick-welcome {
        background: rgba(255, 255, 255, 0.40) !important;
    }

    html[data-theme="dark"] .quick-welcome {
        background: rgba(10, 26, 18, 0.65) !important;
    }

    .portal-choice,
    html[data-theme="light"] .portal-choice {
        background: rgba(255, 255, 255, 0.50) !important;
    }

    html[data-theme="dark"] .portal-choice {
        background: rgba(10, 26, 18, 0.68) !important;
    }
}