:root{
    --hm-bg:#eef2f7;
    --hm-surface:#ffffff;
    --hm-surface-soft:#f8fafc;
    --hm-border:#dbe3ee;
    --hm-border-strong:#c8d4e3;
    --hm-text:#132033;
    --hm-muted:#62748a;
    --hm-primary:#163a5f;
    --hm-primary-soft:#e8f0f8;
    --hm-accent:#d8a31a;
    --hm-sidebar:#102033;
    --hm-sidebar-soft:#17304b;
    --hm-sidebar-text:#d7dfeb;
    --hm-success:#198754;
    --hm-danger:#c54f46;
    --hm-warning:#d39b17;
    --hm-info:#2374b8;
    --hm-shadow:0 18px 40px rgba(15, 30, 52, 0.08);
    --hm-shadow-soft:0 10px 24px rgba(15, 30, 52, 0.06);
    --hm-radius:18px;
}

/* Final mobile lock for centered notification panel */
@media (max-width:575.98px){
    .app-userbar .app-notify-menu,
    .app-userbar .app-notify-menu[data-bs-popper]{
        position:fixed !important;
        left:50% !important;
        right:auto !important;
        top:62px !important;
        transform:translateX(-50%) !important;
        width:min(92vw, 380px) !important;
        max-width:380px !important;
        min-width:300px !important;
        margin:0 !important;
    }
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    margin:0;
    padding:0;
    background:#0d1827;
}

body{
    margin:0;
    padding:0;
    min-height:100vh;
    color:var(--hm-text);
    background:
        radial-gradient(circle at top left, rgba(35,116,184,.08), transparent 24rem),
        radial-gradient(circle at top right, rgba(211,155,23,.08), transparent 20rem),
        linear-gradient(180deg, #f6f8fb 0%, var(--hm-bg) 100%);
    font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight:400;
    text-rendering:optimizeLegibility;
}

a{
    color:inherit;
}

.app-shell{
    min-height:100vh;
    margin:0;
    padding:0;
}

.app-topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    margin:0;
    z-index:1040;
    min-height:72px;
    padding:0 1.1rem;
    background:rgba(13, 24, 39, .94) !important;
    backdrop-filter:blur(16px);
    box-shadow:0 10px 30px rgba(10, 18, 32, .16);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.app-brand{
    display:flex;
    align-items:center;
    gap:.9rem;
    min-width:0;
    text-decoration:none;
}

.app-brand-badge{
    width:46px;
    height:46px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, #f3c545 0%, #d49f17 100%);
    color:#1a1a1a;
    font-size:1.25rem;
    box-shadow:0 10px 18px rgba(212,159,23,.3);
}

.app-brand-text{
    display:flex;
    flex-direction:column;
    min-width:0;
    line-height:1.1;
}

.app-brand-title{
    color:#fff;
    font-weight:650;
    font-size:1.08rem;
    letter-spacing:.02em;
}

.app-brand-subtitle{
    color:#d7a928;
    font-size:.8rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
}

.app-userbar{
    display:flex;
    align-items:center;
    gap:.75rem;
    min-width:0;
}

.app-user-pill{
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.55rem .85rem;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#eef4fb;
    border:1px solid rgba(255,255,255,.08);
    white-space:nowrap;
}

.app-user-pill .badge{
    font-size:.72rem;
}

.app-body{
    padding-top:72px;
    min-height:calc(100vh - 72px);
}

#desktopTopnav{
    position:sticky;
    top:72px;
    z-index:1030;
    padding:.85rem 1.4rem 0;
}

.desktop-topnav-inner{
    padding:.95rem 1.05rem;
    border-bottom-left-radius:22px;
    border-bottom-right-radius:22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
        linear-gradient(180deg, rgba(16,32,51,.98) 0%, rgba(12,24,40,.98) 100%);
    color:var(--hm-sidebar-text);
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 16px 30px rgba(8,15,28,.18);
    overflow-x:auto;
}

.topnav-groups{
    display:flex;
    align-items:stretch;
    gap:1rem;
    min-width:max-content;
}

.topnav-group{
    min-width:max-content;
    padding-right:1rem;
    border-right:1px solid rgba(255,255,255,.08);
}

.topnav-group:last-child{
    padding-right:0;
    border-right:none;
}

.topnav-group-title{
    margin:0 0 .6rem;
    color:rgba(215,223,235,.62);
    font-size:.7rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.topnav-links{
    display:flex;
    flex-wrap:nowrap;
    gap:.55rem;
}

.topnav-link{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    padding:.72rem .95rem;
    border-radius:14px;
    color:var(--hm-sidebar-text);
    text-decoration:none;
    white-space:nowrap;
    transition:all .18s ease;
}

.topnav-link:hover{
    color:#fff;
    background:rgba(255,255,255,.08);
}

.topnav-link.active{
    background:linear-gradient(90deg, rgba(216,163,26,.22), rgba(216,163,26,.08));
    color:#ffd66e;
    box-shadow:inset 0 0 0 1px rgba(216,163,26,.18);
}

#mobileSidebar{
    border-bottom:1px solid rgba(255,255,255,.06);
    box-shadow:0 10px 20px rgba(0,0,0,.12);
}

#mobileSidebar .mobile-sidebar-inner{
    padding:.75rem .75rem 1rem;
    background:linear-gradient(180deg, var(--hm-sidebar) 0%, #0c1828 100%);
}

.nav-section{
    margin:1.05rem 0 .45rem;
    padding:0 .8rem;
    color:rgba(215,223,235,.62);
    font-size:.72rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.11em;
}

.side-link{
    display:flex;
    align-items:center;
    gap:.85rem;
    margin:.18rem 0;
    padding:.88rem .95rem;
    color:var(--hm-sidebar-text);
    text-decoration:none;
    border-radius:14px;
    font-size:.9rem;
    font-weight:500;
    line-height:1.25;
    transition:all .18s ease;
    white-space:nowrap;
}

.side-link i{
    width:1.2rem;
    text-align:center;
    font-size:1rem;
    opacity:.92;
}

.side-link:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
    transform:translateX(2px);
}

.side-link.active{
    background:linear-gradient(90deg, rgba(216,163,26,.22), rgba(216,163,26,.08));
    color:#ffd66e;
    box-shadow:inset 0 0 0 1px rgba(216,163,26,.18);
}

#main{
    min-width:0;
    min-height:calc(100vh - 72px);
    padding:1.4rem;
}

.content-shell{
    max-width:1600px;
    margin:0 auto;
}

.page-title{
    display:flex;
    align-items:center;
    gap:.65rem;
    margin:0 0 1.35rem;
    padding:0 0 1rem;
    color:var(--hm-primary);
    font-size:1.42rem;
    font-weight:700;
    line-height:1.25;
    border-bottom:1px solid var(--hm-border);
}

.card{
    border:1px solid rgba(207,218,230,.9);
    border-radius:var(--hm-radius);
    box-shadow:var(--hm-shadow-soft);
    background:rgba(255,255,255,.96);
    overflow:hidden;
}

.card-header{
    padding:1rem 1.15rem;
    font-weight:600;
    border-bottom:1px solid rgba(0,0,0,.05);
}

.card-body{
    padding:1.15rem;
}

.card-footer{
    padding:.95rem 1.15rem;
    background:rgba(248,250,252,.88);
    border-top:1px solid rgba(0,0,0,.05);
}

.table-responsive{
    border-radius:inherit;
}

.table{
    margin-bottom:0;
    --bs-table-bg:transparent;
}

.table thead th{
    white-space:nowrap;
    vertical-align:middle;
    font-size:.84rem;
    letter-spacing:.02em;
    border-bottom-width:1px;
}

.table tbody td{
    vertical-align:middle;
    white-space:nowrap;
}

.table td,
.table th{
    padding:.9rem 1rem;
}

.table-striped>tbody>tr:nth-of-type(odd)>*{
    --bs-table-accent-bg:rgba(22,58,95,.025);
}

.table-hover>tbody>tr:hover>*{
    --bs-table-accent-bg:rgba(35,116,184,.06);
}

.table-dark{
    --bs-table-bg:#17314c;
    --bs-table-border-color:#21415f;
}

.form-label{
    margin-bottom:.45rem;
    color:#314357;
    font-size:.92rem;
    font-weight:600 !important;
}

.form-control,
.form-select,
.input-group-text,
.btn{
    border-radius:13px;
}

.form-control,
.form-select{
    min-height:46px;
    border:1px solid var(--hm-border-strong);
    background:#fff;
    color:var(--hm-text);
    box-shadow:none;
    transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

textarea.form-control{
    min-height:120px;
}

.form-control:focus,
.form-select:focus{
    border-color:#6b9ac7;
    box-shadow:0 0 0 .2rem rgba(35,116,184,.12);
}

.ts-wrapper.single .ts-control{
    min-height:46px;
    border:1px solid var(--hm-border-strong);
    border-radius:13px;
    box-shadow:none;
    padding:.6rem .9rem;
    background:#fff;
}

.ts-wrapper.focus .ts-control{
    border-color:#3b82f6;
    box-shadow:0 0 0 .2rem rgba(59,130,246,.14);
}

.ts-dropdown{
    border-radius:16px;
    border:1px solid #d9e1ee;
    box-shadow:0 12px 28px rgba(15,23,42,.12);
    overflow:hidden;
    margin-top:8px;
}

.ts-dropdown .dropdown-input-wrap{
    padding:10px 12px;
    border-bottom:1px solid #e6edf7;
    background:#f8fbff;
    position:relative;
}

.ts-dropdown .dropdown-input{
    min-height:42px;
    border:1px solid #d5e1f3;
    border-radius:12px;
    padding:8px 12px;
    background:#fff;
    box-shadow:none;
}

.ts-dropdown .dropdown-input:focus{
    border-color:#6ea3ff;
    box-shadow:0 0 0 .18rem rgba(59,130,246,.14);
}

.ts-dropdown .option{
    padding:12px 18px;
    font-size:1.02rem;
    color:#253246;
}

.ts-dropdown .active,
.ts-dropdown .option.active{
    background:#eaf2ff;
    color:#2563eb;
    font-weight:600;
}

.ts-dropdown .option.create.add-new-option{
    background:#e9f7ef;
    color:#198754;
    font-weight:700;
    border-top:1px solid #d7ecdf;
}

.ts-dropdown .option.create.add-new-option:hover{
    background:#dbf1e4;
    color:#157347;
}

.ts-dropdown .option.add-new-option{
    background:#e9f7ef;
    color:#198754;
    font-weight:700;
    border-top:1px solid #d7ecdf;
}

.ts-dropdown .option.add-new-option:hover{
    background:#dbf1e4;
    color:#157347;
}

.ts-dropdown .no-results{
    padding:12px 16px;
    color:#7a8aa3;
}

.input-group-text{
    border-color:var(--hm-border-strong);
    background:var(--hm-surface-soft);
    color:var(--hm-muted);
}

.btn{
    min-height:44px;
    padding:.72rem 1rem;
    font-weight:600;
    letter-spacing:.01em;
}

.btn-sm{
    min-height:auto;
    padding:.42rem .72rem;
    border-radius:10px;
}

.badge{
    padding:.48em .72em;
    border-radius:999px;
    font-weight:600;
    letter-spacing:.02em;
}

.alert{
    border:none;
    border-radius:16px;
    box-shadow:var(--hm-shadow-soft);
}

.text-muted,
.form-text,
small.text-muted{
    color:var(--hm-muted) !important;
}

.fw-semibold{
    font-weight:600 !important;
}

h1,h2,h3,h4,h5,h6,
.fw-bold{
    font-weight:650 !important;
}

.table tbody td strong{
    font-weight:600;
}

.form-shell{
    max-width:1180px;
    margin:0 auto;
}

.form-shell .card{
    border-radius:22px;
}

.form-shell .card-header{
    padding:1.1rem 1.25rem;
}

.form-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:1.5rem;
}

.field-panel{
    padding:1.1rem;
    border:1px solid var(--hm-border);
    border-radius:18px;
    background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.field-panel-title{
    margin:0 0 .95rem;
    color:var(--hm-primary);
    font-size:1rem;
    font-weight:600;
}

.read-only-box{
    min-height:46px;
    display:flex;
    align-items:center;
    padding:.75rem .95rem;
    border:1px solid var(--hm-border-strong);
    border-radius:13px;
    background:#f5f8fc;
    color:#2a3b51;
}

.install-app-btn{
    position:fixed;
    right:1rem;
    bottom:1rem;
    z-index:1055;
    box-shadow:0 16px 30px rgba(0,0,0,.18);
}

.login-page{
    background:
        radial-gradient(circle at top left, rgba(216,163,26,.20), transparent 24rem),
        radial-gradient(circle at bottom right, rgba(35,116,184,.28), transparent 26rem),
        linear-gradient(135deg, #0e1b2b 0%, #13263c 40%, #17314d 100%);
}

.login-shell{
    width:100%;
    max-width:1120px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.14);
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 28px 70px rgba(0,0,0,.28);
}

.login-showcase{
    padding:2.5rem;
    color:#fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
        linear-gradient(145deg, #15314d 0%, #10253b 100%);
}

.login-showcase-badge{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    padding:.6rem .9rem;
    border-radius:999px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.1);
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    font-size:.78rem;
}

.login-showcase h1{
    margin:1.4rem 0 .9rem;
    font-size:2.35rem;
    font-weight:800;
    line-height:1.1;
}

.login-showcase p{
    margin:0 0 1.4rem;
    color:rgba(240,244,249,.82);
    font-size:1rem;
    line-height:1.7;
}

.login-points{
    display:grid;
    gap:.85rem;
}

.login-point{
    display:flex;
    align-items:flex-start;
    gap:.8rem;
    padding:1rem 1.05rem;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
}

.login-point i{
    color:#ffd66e;
    font-size:1.15rem;
}

.login-form-wrap{
    padding:2.35rem 2.2rem;
    background:rgba(255,255,255,.98);
}

.login-box{
    width:100%;
    max-width:430px;
    margin:0 auto;
}

.brand-icon{
    width:72px;
    height:72px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, #f3c545 0%, #d49f17 100%);
    box-shadow:0 14px 28px rgba(212,159,23,.28);
}

.section-note{
    color:var(--hm-muted);
    font-size:.92rem;
}

.table td .btn,
.table th .btn{
    white-space:nowrap;
}

@media (max-width: 991.98px){
    #desktopTopnav{
        padding:.75rem 1rem 0;
    }

    #main{
        padding:1rem;
    }

    .page-title{
        font-size:1.3rem;
    }

    .login-shell{
        grid-template-columns:1fr;
    }

    .login-showcase{
        display:none;
    }

    .form-shell{
        max-width:none;
    }
}

@media (max-width: 767.98px){
    .app-topbar{
        position:fixed;
        min-height:64px;
        padding:0 .8rem;
    }

    .app-body{
        padding-top:64px;
    }

    #desktopTopnav{
        display:none !important;
    }

    #main{
        min-height:calc(100vh - 64px);
    }

    .app-brand-title{
        font-size:1rem;
    }

    .app-brand-subtitle{
        font-size:.7rem;
    }

    .page-title{
        font-size:1.18rem;
    }

    .app-user-pill{
        display:none !important;
    }

    .card-header,
    .card-body,
    .card-footer{
        padding:1rem;
    }

    .table td,
    .table th{
        padding:.78rem .82rem;
    }

    .form-actions .btn{
        width:100%;
    }

    .field-panel{
        padding:1rem;
    }
}

/* ============================================================
   Professional top navigation refresh - 2026-04-15
   ============================================================ */
:root{
    --hm-nav-blue:#2f5bd7;
    --hm-nav-blue-dark:#1f45b7;
    --hm-nav-ink:#253247;
    --hm-nav-muted:#66758f;
    --hm-nav-line:#e7edf6;
    --hm-nav-soft:#f4f7fd;
}

body{
    background:linear-gradient(180deg, #f7f9fd 0%, #eef3f9 100%);
}

.app-topbar{
    min-height:82px;
    padding:.7rem 1.2rem;
    background:rgba(255,255,255,.96) !important;
    border-bottom:1px solid var(--hm-nav-line);
    box-shadow:0 10px 26px rgba(23, 40, 74, .07);
    backdrop-filter:blur(18px);
}

.app-topbar .container-fluid{
    gap:1.15rem;
}

.app-brand{
    gap:.85rem;
    padding:.25rem .25rem .25rem 0;
    flex:0 0 auto;
}

.app-brand-badge{
    width:42px;
    height:42px;
    border-radius:13px;
    background:linear-gradient(135deg, #456fff 0%, #2f5bd7 100%);
    color:#fff;
    font-size:1.08rem;
    box-shadow:0 14px 26px rgba(47, 91, 215, .26);
}

.app-brand-title{
    color:var(--hm-nav-ink);
    font-size:1.05rem;
    font-weight:800;
    letter-spacing:.01em;
}

.app-brand-subtitle{
    color:var(--hm-nav-muted);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.08em;
}

.app-nav-center{
    flex:1 1 auto;
    min-width:0;
    justify-content:center;
}

.homs-primary-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.25rem;
    width:100%;
    min-width:0;
    flex-wrap:nowrap;
}

.homs-primary-nav .nav-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    min-height:50px;
    padding:.78rem .78rem;
    border-radius:0;
    color:var(--hm-nav-muted);
    font-size:.94rem;
    font-weight:700;
    white-space:nowrap;
    transition:color .18s ease, background .18s ease;
}

.homs-primary-nav .nav-link i{
    font-size:1.05rem;
    color:#7a8aa4;
    transition:color .18s ease;
}

.homs-primary-nav .nav-link:hover,
.homs-primary-nav .nav-link.active,
.homs-primary-nav .show > .nav-link{
    color:var(--hm-nav-blue);
    background:transparent;
}

.homs-primary-nav .nav-link:hover i,
.homs-primary-nav .nav-link.active i,
.homs-primary-nav .show > .nav-link i{
    color:var(--hm-nav-blue);
}

.homs-primary-nav .nav-link.active::after,
.homs-primary-nav .show > .nav-link::after{
    border-top-color:var(--hm-nav-blue);
}

.homs-primary-nav .nav-link.active::before,
.homs-primary-nav .show > .nav-link::before{
    content:"";
    position:absolute;
    left:.78rem;
    right:.78rem;
    bottom:-.72rem;
    height:3px;
    border-radius:999px 999px 0 0;
    background:var(--hm-nav-blue);
}

.homs-nav-dropdown{
    margin-top:.9rem !important;
    padding:.55rem;
    min-width:230px;
    border:1px solid var(--hm-nav-line);
    border-radius:18px;
    box-shadow:0 24px 48px rgba(23, 40, 74, .14);
}

.homs-nav-dropdown .dropdown-item{
    display:flex;
    align-items:center;
    gap:.7rem;
    padding:.72rem .85rem;
    border-radius:12px;
    color:#52627c;
    font-size:.9rem;
    font-weight:650;
}

.homs-nav-dropdown .dropdown-item i{
    width:1.1rem;
    color:#8492aa;
}

.homs-nav-dropdown .dropdown-item:hover,
.homs-nav-dropdown .dropdown-item.active{
    background:var(--hm-nav-soft);
    color:var(--hm-nav-blue);
}

.homs-nav-dropdown .dropdown-item:hover i,
.homs-nav-dropdown .dropdown-item.active i{
    color:var(--hm-nav-blue);
}

.app-menu-toggle{
    width:46px;
    height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--hm-nav-line);
    border-radius:14px;
    color:var(--hm-nav-muted);
    background:#fff;
    box-shadow:0 10px 20px rgba(23, 40, 74, .06);
}

.app-userbar{
    flex:0 0 auto;
    gap:.48rem;
}

.app-action-btn{
    position:relative;
    width:48px;
    height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--hm-nav-line);
    border-radius:14px;
    background:#fff;
    color:#63738c;
    text-decoration:none;
    font-size:1.08rem;
    box-shadow:0 10px 20px rgba(23, 40, 74, .06);
    transition:all .18s ease;
}

.app-action-btn:hover{
    color:var(--hm-nav-blue);
    border-color:#cbd8ee;
    transform:translateY(-1px);
}

.app-user-pill{
    gap:.65rem;
    padding:.38rem .42rem .38rem .85rem;
    border-radius:16px;
    background:#fff;
    color:var(--hm-nav-ink);
    border:1px solid var(--hm-nav-line);
    box-shadow:0 10px 20px rgba(23, 40, 74, .06);
}

.app-user-icon{
    color:#64748b;
    font-size:1.25rem;
}

.app-user-meta{
    display:flex;
    flex-direction:column;
    line-height:1.08;
}

.app-user-meta span{
    color:var(--hm-nav-ink);
    font-size:.84rem;
    font-weight:750;
}

.app-user-meta strong{
    margin-top:.18rem;
    color:var(--hm-nav-muted);
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.app-location-badge{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:0 .8rem;
    border-radius:999px;
    background:#172033;
    color:#fff;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.02em;
}

.app-logout-btn{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:0 1rem;
    border:1px solid #ffd5db;
    border-radius:14px;
    background:#fff;
    color:#dc3545;
    font-weight:800;
    box-shadow:0 10px 20px rgba(23, 40, 74, .06);
}

.app-logout-btn:hover{
    background:#fff4f6;
    border-color:#ffb8c1;
    color:#c82333;
}

.app-body{
    padding-top:82px;
}

#desktopTopnav{
    display:none !important;
}

#main{
    min-height:calc(100vh - 82px);
    padding:1.6rem;
}

#mobileSidebar{
    position:fixed;
    top:82px;
    left:0;
    right:0;
    z-index:1035;
    box-shadow:0 18px 38px rgba(8,15,28,.16);
}

#mobileSidebar .mobile-sidebar-inner{
    max-height:calc(100vh - 82px);
    overflow:auto;
}

@media (max-width:1399.98px){
    .homs-primary-nav .nav-link{
        padding-left:.58rem;
        padding-right:.58rem;
        font-size:.86rem;
    }

    .app-brand-subtitle{
        display:none;
    }
}

@media (max-width:991.98px){
    .app-topbar{
        min-height:76px;
        padding:.65rem .9rem;
    }

    .app-body{
        padding-top:76px;
    }

    #mobileSidebar{
        top:76px;
    }

    #main{
        min-height:calc(100vh - 76px);
        padding:1rem;
    }
}

@media (max-width:575.98px){
    .app-brand-title{
        font-size:.95rem;
    }

    .app-action-btn{
        display:none;
    }

    .app-userbar{
        margin-left:auto;
    }
}

/* ============================================================
   Two-row header layout - requested update
   ============================================================ */
.app-topbar{
    min-height:136px;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    background:rgba(255,255,255,.97) !important;
}

.app-topbar-main{
    min-height:82px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.75rem 1.55rem;
    border-bottom:1px solid var(--hm-nav-line);
}

.app-topbar-left{
    display:flex;
    align-items:center;
    min-width:0;
}

.app-userbar{
    margin-left:auto;
}

.app-topbar-nav{
    min-height:54px;
    width:100%;
    align-items:center;
    justify-content:flex-start;
    padding:0 1.55rem;
    background:#fff;
    overflow-x:auto;
    overflow-y:visible;
    scrollbar-width:thin;
    box-shadow:0 12px 26px rgba(23, 40, 74, .05);
}

.app-topbar-nav::-webkit-scrollbar{
    height:4px;
}

.app-topbar-nav::-webkit-scrollbar-thumb{
    background:#cbd6e8;
    border-radius:999px;
}

.app-topbar-nav .homs-primary-nav{
    justify-content:flex-start;
    min-width:max-content;
}

.app-topbar-nav .homs-primary-nav .nav-link{
    min-height:54px;
    padding:.85rem .95rem;
}

.app-topbar-nav .homs-primary-nav .nav-link.active::before,
.app-topbar-nav .homs-primary-nav .show > .nav-link::before{
    bottom:0;
}

.homs-nav-dropdown{
    z-index:1060;
}

.app-body{
    padding-top:136px;
}

#main{
    min-height:calc(100vh - 136px);
}

#mobileSidebar{
    top:82px;
}

@media (max-width:991.98px){
    .app-topbar{
        min-height:82px;
    }

    .app-topbar-main{
        min-height:82px;
        padding:.65rem .9rem;
    }

    .app-body{
        padding-top:82px;
    }

    #main{
        min-height:calc(100vh - 82px);
    }

    #mobileSidebar{
        top:82px;
    }
}

@media (max-width:575.98px){
    .app-topbar-main{
        gap:.6rem;
    }

    .app-brand-badge{
        width:40px;
        height:40px;
    }

    .app-logout-btn{
        min-height:44px;
        padding:0 .8rem;
    }
}

/* Fix: keep second-row desktop nav horizontal */
.app-topbar-nav{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    max-height:58px;
    overflow-x:auto;
    overflow-y:visible;
}

.app-topbar-nav .homs-primary-nav,
.homs-primary-nav.navbar-nav{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:.25rem;
    width:auto;
    margin:0;
    padding:0;
    white-space:nowrap;
}

.homs-primary-nav .nav-item{
    flex:0 0 auto;
}

.homs-primary-nav .dropdown-menu{
    position:absolute;
}

@media (min-width:992px){
    .app-topbar-nav.d-lg-flex{
        display:flex !important;
    }
}

@media (max-width:991.98px){
    .app-topbar-nav{
        display:none !important;
    }
}

/* Fix: remove lower nav scrollbar and allow dropdown buttons to work */
.app-topbar-nav{
    max-height:none !important;
    overflow:visible !important;
    padding:.1rem 1.35rem !important;
}

.app-topbar-nav .homs-primary-nav,
.homs-primary-nav.navbar-nav{
    width:100% !important;
    min-width:0 !important;
    flex-wrap:wrap !important;
    row-gap:.12rem;
    column-gap:.12rem;
    overflow:visible !important;
}

.app-topbar-nav .homs-primary-nav .nav-link{
    min-height:48px;
    padding:.68rem .62rem;
    font-size:.88rem;
}

.homs-primary-nav .nav-link.active::before,
.homs-primary-nav .show > .nav-link::before{
    bottom:0 !important;
}

.homs-primary-nav .dropdown{
    position:relative;
}

.homs-primary-nav .dropdown-menu{
    position:absolute !important;
    z-index:2000 !important;
}

@media (min-width:1200px){
    .app-topbar-nav .homs-primary-nav{
        flex-wrap:nowrap !important;
    }

    .app-topbar-nav .homs-primary-nav .nav-link{
        font-size:.82rem;
        padding-left:.42rem;
        padding-right:.42rem;
        gap:.32rem;
    }
}

@media (min-width:1500px){
    .app-topbar-nav .homs-primary-nav .nav-link{
        font-size:.9rem;
        padding-left:.68rem;
        padding-right:.68rem;
        gap:.45rem;
    }
}

/* Compact top action row height */
.app-topbar{
    min-height:110px !important;
}

.app-topbar-main{
    min-height:60px !important;
    padding:.38rem 1.35rem !important;
}

.app-brand-badge{
    width:36px !important;
    height:36px !important;
    border-radius:11px !important;
    font-size:.95rem !important;
}

.app-brand-title{
    font-size:.95rem !important;
}

.app-brand-subtitle{
    font-size:.66rem !important;
}

.app-action-btn{
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
    font-size:.98rem !important;
}

.app-user-pill{
    min-height:42px !important;
    padding:.28rem .36rem .28rem .7rem !important;
    border-radius:14px !important;
}

.app-location-badge{
    min-height:28px !important;
    padding:0 .7rem !important;
    font-size:.72rem !important;
}

.app-logout-btn{
    min-height:42px !important;
    padding:0 .9rem !important;
    border-radius:12px !important;
}

.app-topbar-nav{
    min-height:50px !important;
}

.app-body{
    padding-top:110px !important;
}

#main{
    min-height:calc(100vh - 110px) !important;
}

@media (max-width:991.98px){
    .app-topbar{
        min-height:68px !important;
    }

    .app-topbar-main{
        min-height:68px !important;
    }

    .app-body{
        padding-top:68px !important;
    }

    #mobileSidebar{
        top:68px !important;
    }
}

/* Remove extra action icons and make top row smaller */
.app-topbar{
    min-height:96px !important;
}

.app-topbar-main{
    min-height:50px !important;
    padding:.28rem 1.25rem !important;
}

.app-brand{
    gap:.65rem !important;
}

.app-brand-badge{
    width:32px !important;
    height:32px !important;
    border-radius:10px !important;
    font-size:.82rem !important;
}

.app-brand-title{
    font-size:.9rem !important;
}

.app-brand-subtitle{
    display:none !important;
}

.app-userbar{
    gap:.42rem !important;
}

.app-user-pill{
    min-height:36px !important;
    padding:.2rem .32rem .2rem .58rem !important;
    border-radius:13px !important;
}

.app-user-icon{
    font-size:1rem !important;
}

.app-user-meta span{
    font-size:.76rem !important;
}

.app-user-meta strong{
    font-size:.6rem !important;
}

.app-location-badge{
    min-height:24px !important;
    padding:0 .58rem !important;
    font-size:.66rem !important;
}

.app-logout-btn{
    min-height:36px !important;
    padding:0 .78rem !important;
    border-radius:11px !important;
    font-size:.82rem !important;
}

.app-topbar-nav{
    min-height:46px !important;
}

.app-topbar-nav .homs-primary-nav .nav-link{
    min-height:46px !important;
    padding:.58rem .54rem !important;
    font-size:.82rem !important;
}

.app-body{
    padding-top:96px !important;
}

#main{
    min-height:calc(100vh - 96px) !important;
}

@media (max-width:991.98px){
    .app-topbar{
        min-height:58px !important;
    }

    .app-topbar-main{
        min-height:58px !important;
    }

    .app-body{
        padding-top:58px !important;
    }

    #mobileSidebar{
        top:58px !important;
    }
}

/* Center and polish the lower navigation */
.app-topbar-nav{
    justify-content:center !important;
    padding:.34rem 1.25rem .42rem !important;
    background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    border-bottom:1px solid #e7edf6;
}

.app-topbar-nav .homs-primary-nav,
.homs-primary-nav.navbar-nav{
    width:auto !important;
    max-width:fit-content;
    margin:0 auto !important;
    justify-content:center !important;
    align-items:center !important;
    gap:.22rem !important;
    padding:.18rem !important;
    border:1px solid #e6edf7;
    border-radius:18px;
    background:rgba(255,255,255,.9);
    box-shadow:0 10px 24px rgba(23, 40, 74, .06);
}

.app-topbar-nav .homs-primary-nav .nav-link{
    min-height:38px !important;
    padding:.48rem .7rem !important;
    border-radius:14px !important;
    color:#62728b;
    font-size:.82rem !important;
    font-weight:800;
    letter-spacing:.005em;
}

.app-topbar-nav .homs-primary-nav .nav-link i{
    color:#8b9bb3;
    font-size:.96rem;
}

.app-topbar-nav .homs-primary-nav .nav-link:hover,
.app-topbar-nav .homs-primary-nav .nav-link.active,
.app-topbar-nav .homs-primary-nav .show > .nav-link{
    color:#285bd6 !important;
    background:#eef4ff !important;
}

.app-topbar-nav .homs-primary-nav .nav-link:hover i,
.app-topbar-nav .homs-primary-nav .nav-link.active i,
.app-topbar-nav .homs-primary-nav .show > .nav-link i{
    color:#285bd6 !important;
}

.app-topbar-nav .homs-primary-nav .nav-link.active::before,
.app-topbar-nav .homs-primary-nav .show > .nav-link::before{
    left:14px !important;
    right:14px !important;
    bottom:-.42rem !important;
    height:3px !important;
    background:linear-gradient(90deg, #2f5bd7, #6c8dff) !important;
    box-shadow:0 4px 10px rgba(47,91,215,.28);
}

.homs-nav-dropdown{
    border-radius:16px !important;
}

@media (max-width:1399.98px){
    .app-topbar-nav .homs-primary-nav .nav-link{
        padding-left:.52rem !important;
        padding-right:.52rem !important;
        font-size:.78rem !important;
    }
}

/* ============================================================
   Global compact button sizing
   ============================================================ */
.btn,
button.btn,
a.btn,
input[type="submit"].btn,
input[type="button"].btn{
    min-height:34px !important;
    padding:.34rem .72rem !important;
    border-radius:10px !important;
    font-size:.84rem !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    gap:.32rem !important;
}

.btn-lg,
button.btn-lg,
a.btn-lg{
    min-height:38px !important;
    padding:.44rem .9rem !important;
    border-radius:11px !important;
    font-size:.9rem !important;
}

.app-notify-btn{
    min-height:38px !important;
    min-width:38px;
    width:38px;
    padding:0 !important;
    border:1px solid #d7e2f2 !important;
    border-radius:12px !important;
    background:#fff !important;
    color:#4a5d78 !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.app-notify-btn.has-alert{
    color:#1d4ed8 !important;
    border-color:#bfd2ff !important;
    box-shadow:0 0 0 .2rem rgba(59,130,246,.12);
    animation:notifyPulse 1.8s ease-in-out infinite;
}

.app-notify-badge{
    position:absolute;
    right:-8px;
    top:-8px;
    min-width:20px;
    height:20px;
    border-radius:999px;
    background:#dc3545;
    color:#fff;
    font-size:11px;
    font-weight:700;
    line-height:1;
    text-align:center;
    padding:0 5px;
    border:2px solid #fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    box-shadow:0 4px 10px rgba(220,53,69,.35);
}

.app-notify-menu{
    width:340px !important;
    min-width:340px !important;
    max-width:92vw !important;
    border:1px solid #dbe6f5 !important;
    border-radius:14px !important;
    overflow:hidden !important;
    box-shadow:0 16px 30px rgba(18,36,66,.16) !important;
    padding:0 !important;
    background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%) !important;
}

.app-notify-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding:.7rem .8rem;
    background:#f5f9ff;
    border-bottom:1px solid #e2ebf8;
}

.app-notify-head small{
    display:block;
    color:#60718b;
    font-size:.78rem;
}

.app-notify-list{
    max-height:320px;
    overflow:auto;
    padding:.35rem .5rem .5rem;
}

.app-notify-section-title{
    position:sticky;
    top:0;
    z-index:1;
    padding:.42rem .62rem;
    background:#eef4ff;
    color:#35517a;
    font-size:.76rem;
    font-weight:700;
    border-top:1px solid #e2ebf8;
    border-bottom:1px solid #e2ebf8;
    border-radius:10px;
    margin:.3rem 0 .45rem;
}

.app-notify-item{
    display:block;
    padding:.66rem .72rem;
    text-decoration:none !important;
    color:inherit;
    border:1px solid #e8eef8;
    border-radius:14px;
    margin:0 0 .55rem;
    background:#fff;
    box-shadow:0 10px 20px rgba(28,52,90,.06);
}
.app-notify-item *{
    text-decoration:none !important;
}

.app-notify-item:hover{
    background:#f8fbff;
    border-color:#d8e5fb;
}

.app-notify-item-title{
    font-weight:700;
    font-size:.9rem;
    color:#20344f;
}

.app-notify-item-meta{
    font-size:.74rem;
    color:#7387a4;
    margin-top:2px;
}

.app-notify-item-text{
    font-size:.82rem;
    color:#516680;
    margin-top:4px;
}

.app-notify-actions{
    display:flex;
    align-items:center;
    gap:.4rem;
    margin-top:.55rem;
    flex-wrap:wrap;
}

.app-notify-actions .btn{
    min-height:28px !important;
    padding:.24rem .55rem !important;
    border-radius:8px !important;
    font-size:.74rem !important;
    box-shadow:none !important;
}

.app-notify-empty{
    padding:.8rem .75rem;
    color:#7387a4;
    font-size:.88rem;
    background:#f6f9ff;
    border:1px dashed #d8e4f8;
    border-radius:12px;
    margin:0 0 .55rem;
}

.app-notify-footer{
    border-top:1px solid #e3ecf8;
    background:#fff;
    padding:.62rem .8rem;
}

.app-notify-footer-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.35rem;
    text-decoration:none;
    color:#2459d6;
    font-weight:700;
    font-size:.88rem;
}

.app-notify-footer-link:hover{
    color:#163f9f;
}

@media (max-width:575.98px){
    .app-notify-menu{
        min-width:300px !important;
    }
}

@keyframes notifyPulse{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-1px);}
}

.btn-sm,
button.btn-sm,
a.btn-sm{
    min-height:26px !important;
    padding:.2rem .5rem !important;
    border-radius:8px !important;
    font-size:.74rem !important;
}

.btn i,
button.btn i,
a.btn i{
    font-size:.96em !important;
}

.input-group .btn{
    min-height:34px !important;
}

.action-btn,
.action-btns .btn,
.table .btn,
.table-responsive .btn,
.admin-table .btn,
.btn-edit,
.btn-delete,
.btn-view{
    min-width:30px !important;
    min-height:30px !important;
    width:auto;
    padding:.24rem .5rem !important;
    border-radius:9px !important;
    font-size:.76rem !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-success,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-warning,
.btn-info{
    box-shadow:0 8px 18px rgba(15, 30, 52, .05);
}

.filter-form .btn,
.search-form .btn,
form .btn[type="submit"],
form .btn[type="reset"],
form a.btn{
    min-height:34px !important;
    padding:.34rem .72rem !important;
}

.card-header .btn,
.page-title .btn,
.page-actions .btn{
    min-height:30px !important;
    padding:.24rem .6rem !important;
    font-size:.76rem !important;
}

.app-logout-btn{
    min-height:34px !important;
    padding:0 .72rem !important;
    font-size:.78rem !important;
}

.app-menu-toggle{
    width:38px !important;
    height:38px !important;
    min-height:38px !important;
}

.install-app-btn{
    min-height:34px !important;
    padding:.35rem .72rem !important;
    font-size:.82rem !important;
}

@media (max-width:575.98px){
    .btn,
    button.btn,
    a.btn{
        min-height:32px !important;
        padding:.3rem .62rem !important;
        font-size:.8rem !important;
    }
}

/* ============================================================
   Global Mobile Optimization
   ============================================================ */
@media (max-width:991.98px){
    .content-shell{
        padding:.75rem !important;
    }

    .page-title{
        font-size:1.05rem !important;
        margin-bottom:.7rem !important;
    }

    .card{
        border-radius:14px !important;
    }

    .card-header{
        padding:.62rem .78rem !important;
    }

    .card-body,
    .card-footer{
        padding:.8rem !important;
    }

    .form-control,
    .form-select{
        min-height:40px !important;
        font-size:.95rem !important;
    }

    .table{
        font-size:.84rem !important;
    }

    .table th{
        white-space:nowrap;
        font-size:.78rem !important;
    }

    .nav-tabs{
        flex-wrap:nowrap !important;
        overflow-x:auto;
        overflow-y:hidden;
        scrollbar-width:thin;
    }

    .nav-tabs .nav-link{
        white-space:nowrap;
    }
}

@media (max-width:575.98px){
    .app-topbar-main{
        padding:.5rem .62rem !important;
        min-height:56px !important;
    }

    .app-brand{
        gap:.4rem !important;
    }

    .app-brand-badge{
        width:28px !important;
        height:28px !important;
        border-radius:8px !important;
    }

    .app-brand-title{
        font-size:.82rem !important;
    }

    .app-userbar{
        gap:.28rem !important;
    }

    .app-notify-btn{
        width:34px !important;
        min-width:34px !important;
        min-height:34px !important;
        border-radius:10px !important;
    }

    .app-notify-badge{
        min-width:18px !important;
        height:18px !important;
        right:-6px !important;
        top:-6px !important;
        font-size:10px !important;
        padding:0 3px !important;
    }

    .app-userbar .dropdown{
        position:static !important;
    }

    .app-userbar .app-notify-menu.dropdown-menu[data-bs-popper]{
        position:fixed !important;
        left:10px !important;
        right:10px !important;
        top:58px !important;
        transform:none !important;
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        max-height:72vh !important;
        z-index:1095 !important;
    }

    .app-notify-head{
        padding:.58rem .66rem !important;
    }

    .app-notify-head strong{
        font-size:.98rem !important;
    }

    .app-notify-head small{
        font-size:.76rem !important;
    }

    .app-notify-list{
        max-height:calc(72vh - 98px) !important;
        padding:.25rem .4rem .4rem !important;
    }

    .app-notify-item{
        padding:.58rem .62rem !important;
        border-radius:12px !important;
        margin:0 0 .45rem !important;
    }

    .app-notify-item-title{
        font-size:.86rem !important;
        line-height:1.25;
    }

    .app-notify-item-meta{
        font-size:.74rem !important;
    }

    .app-notify-item-text{
        font-size:.78rem !important;
    }

    .app-notify-actions{
        gap:.34rem !important;
        justify-content:center !important;
    }

    .app-notify-actions .btn{
        min-height:24px !important;
        padding:.15rem .46rem !important;
        font-size:.7rem !important;
        border-radius:7px !important;
    }

    .app-notify-footer{
        padding:.52rem .62rem !important;
    }

    .app-notify-footer-link{
        font-size:.8rem !important;
    }
}

/* ============================================================
   Premium Mobile Topbar + Notification Sheet
   ============================================================ */
@media (max-width:575.98px){
    body.notify-open::before{
        content:none !important;
        display:none !important;
    }

    .app-topbar{
        background:rgba(255,255,255,.92) !important;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
        border-bottom:1px solid #e8eef8 !important;
    }

    .app-topbar-main{
        border-bottom:none !important;
    }

    .app-topbar-left{
        min-width:0;
    }

    .app-brand{
        max-width:44vw;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .app-brand-text{
        max-width:28vw;
        overflow:hidden;
    }

    .app-userbar{
        margin-left:auto !important;
        background:#f4f8ff;
        border:1px solid #e3ebf9;
        border-radius:14px;
        padding:2px;
    }

    .app-notify-btn,
    .app-logout-btn,
    .app-menu-toggle{
        width:33px !important;
        min-width:33px !important;
        height:33px !important;
        min-height:33px !important;
        padding:0 !important;
        border-radius:10px !important;
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        box-shadow:0 6px 14px rgba(31,59,112,.08);
    }

    .app-notify-btn{
        background:#eef5ff !important;
        border-color:#cfe0ff !important;
    }

    .app-notify-btn.has-alert{
        background:linear-gradient(180deg,#eff5ff 0%,#dfeaff 100%) !important;
    }

    .app-logout-btn{
        background:#fff3f4 !important;
        border:1px solid #ffd7db !important;
        color:#d6455d !important;
    }

    .app-logout-btn span{
        display:none !important;
    }

    .app-menu-toggle{
        border:1px solid #d8e3f5 !important;
        background:#fff !important;
    }

    .app-userbar .app-notify-menu.dropdown-menu[data-bs-popper]{
        left:50% !important;
        right:auto !important;
        top:62px !important;
        transform:translateX(-50%) !important;
        width:min(92vw, 380px) !important;
        border-radius:18px !important;
        border:1px solid #d7e4f8 !important;
        box-shadow:0 22px 42px rgba(16,34,66,.2) !important;
        background:#ffffff !important;
        z-index:2005 !important;
    }

    .app-notify-head{
        background:linear-gradient(180deg,#f7faff 0%,#edf4ff 100%) !important;
        border-bottom:1px solid #dfe9f8 !important;
    }

    .app-notify-list{
        display:flex !important;
        flex-direction:column;
        align-items:center;
    }

    .app-notify-section-title{
        background:#edf4ff !important;
        width:100%;
        max-width:348px;
        margin-left:auto;
        margin-right:auto;
    }

    .app-notify-item{
        border-bottom:1px solid #ebf1fb !important;
        background:#fff !important;
        width:100%;
        max-width:348px;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .app-notify-item:last-child{
        border-bottom:none !important;
    }

    .app-notify-empty{
        width:100%;
        max-width:348px;
        margin-left:auto;
        margin-right:auto;
    }

    .app-notify-footer{
        width:100%;
        max-width:348px;
        margin:0 auto;
    }
}