:root {
    --prep-navy: #29445a;
    --prep-navy-dark: #22394c;
    --prep-blue: #337ab7;
    --prep-text: #34495e;
    --prep-muted: #73879c;
    --prep-bg: #f5f7f9;
    --prep-border: #e1e6ea;
    --prep-card: #ffffff;
}

html, body { background: var(--prep-bg); color: var(--prep-text); }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }

/* Shell */
.nav-md .container.body .left_col,
.nav-md .left_col { width: 230px; background: var(--prep-navy); }
.nav-md .container.body .right_col { margin-left: 230px; background: var(--prep-bg); min-height: 100vh; padding: 24px 26px 35px; }
.nav-md .container.body .top_nav { margin-left: 230px; }
.main_container .top_nav { position: relative; z-index: 20; }

.prep-brand { width: 230px; height: 64px; background: var(--prep-navy-dark); }
.prep-brand .site_title { height: 64px; line-height: 64px; font-size: 23px; padding-left: 17px; }
.prep-brand .site_title i { border: 1px solid rgba(255,255,255,.75); padding: 7px; margin-right: 9px; }

.prep-sidebar-menu { margin-top: 12px; }
.prep-sidebar-menu .menu_section > h3 { padding-left: 17px; color: rgba(255,255,255,.6); letter-spacing: .08em; font-size: 11px; }
.nav.side-menu > li > a { padding: 13px 16px; font-weight: 500; }
.nav.side-menu > li > a:hover,
.nav.side-menu > li.active > a,
.nav.side-menu > li.current-page > a { background: rgba(255,255,255,.08); box-shadow: inset 3px 0 0 #39c3b5; }
.nav.child_menu > li > a { padding-left: 46px; }
.prep-logout-item { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.09); }

.prep-top-nav .nav_menu { min-height: 64px; margin-bottom: 0; border-bottom: 1px solid var(--prep-border); background: #fff; }
.prep-topbar { min-height: 64px; display: flex; align-items: center; }
.prep-menu-toggle { width: 58px; padding-top: 0; }
.prep-menu-toggle a { padding: 20px 18px !important; font-size: 22px; }
.prep-app-title { display: flex; flex-direction: column; line-height: 1.15; }
.prep-app-title-main { font-size: 20px; font-weight: 600; color: var(--prep-text); }
.prep-app-title-sub { margin-top: 3px; font-size: 12px; color: var(--prep-muted); }
.prep-user-context { margin-left: auto; padding-right: 24px; text-align: right; display: flex; flex-direction: column; font-size: 12px; color: var(--prep-muted); }
.prep-user-name { margin-top: 2px; color: var(--prep-text); }

/* Common content */
.prep-page-header { margin: 0 0 20px; }
.prep-page-header h1 { margin: 0 0 5px; font-size: 25px; font-weight: 600; color: var(--prep-text); }
.prep-page-header p { margin: 0; color: var(--prep-muted); }
.prep-card { background: var(--prep-card); border: 1px solid var(--prep-border); border-radius: 7px; padding: 20px; margin-bottom: 22px; box-shadow: 0 1px 2px rgba(0,0,0,.025); }

/* Tables */
.prep-table-wrap { overflow-x: auto; }
.prep-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; }
.prep-table th { background: #f7f9fa; color: #5d7185; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--prep-border); padding: 11px 10px; white-space: nowrap; }
.prep-table td { font-size: 13px; padding: 11px 10px; border-bottom: 1px solid #edf0f2; vertical-align: middle; }
.prep-table tbody tr:hover { background: #f8fbfd; }
.prep-table a { font-weight: 600; }

.prep-search-bar { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 18px; }
.prep-search-bar .form-group { margin-bottom: 0; flex: 1; max-width: 520px; }
.prep-search-bar label { color: #5d7185; font-size: 12px; }
.prep-search-bar .form-control { height: 40px; border-color: #ccd5dc; box-shadow: none; }
.prep-search-bar .btn { height: 40px; }
.prep-result-meta { color: var(--prep-muted); font-size: 12px; margin-bottom: 10px; }
.prep-pagination { margin: 18px 0 0; }

.prep-footer { margin-left: 230px; background: #fff; border-top: 1px solid var(--prep-border); color: var(--prep-muted); padding: 14px 24px; font-size: 12px; }

@media (max-width: 991px) {
    .prep-user-facility { display: none; }
}
@media (max-width: 767px) {
    .prep-app-title-sub, .prep-user-context { display: none; }
    .nav-md .container.body .right_col { padding: 18px 12px; }
    .prep-search-bar { display: block; }
    .prep-search-bar .form-group { max-width: none; margin-bottom: 8px; }
}

/* Dashboard */
.prep-scope-badge { display:inline-block; margin-top:10px; padding:5px 10px; border-radius:4px; background:#eef3f6; color:#5d7185; font-size:12px; }
.prep-summary-card { position:relative; background:#fff; border:1px solid var(--prep-border); border-radius:7px; padding:22px 24px; margin-bottom:22px; box-shadow:0 1px 2px rgba(0,0,0,.025); }
.prep-summary-icon { float:left; width:58px; height:58px; line-height:58px; margin-right:18px; text-align:center; border-radius:50%; background:#eaf4f8; color:var(--prep-blue); font-size:24px; }
.prep-summary-label { color:var(--prep-muted); font-size:14px; padding-top:2px; }
.prep-summary-number { color:var(--prep-text); font-size:32px; line-height:38px; font-weight:600; }
.prep-summary-link { position:absolute; right:24px; top:36px; font-size:13px; }
.prep-section-heading { margin-bottom:17px; }
.prep-section-heading h2 { margin:0 0 5px; font-size:18px; font-weight:600; }
.prep-section-heading p { margin:0; color:var(--prep-muted); font-size:13px; }
.prep-population-card { min-height:104px; margin-bottom:15px; padding:17px 15px; border:1px solid var(--prep-border); border-radius:6px; background:#fafbfc; }
.prep-population-icon { float:left; width:42px; height:42px; line-height:42px; margin-right:13px; text-align:center; border-radius:5px; background:#eef5f7; color:var(--prep-blue); font-size:17px; }
.prep-population-label { color:#5a6772; font-size:13px; min-height:20px; }
.prep-population-number { color:var(--prep-text); font-size:25px; line-height:29px; font-weight:600; }

/* Forms */
.prep-form-card { max-width:1000px; }
.prep-form-card .form-control { height:40px; border-color:#ccd5dc; box-shadow:none; }
.prep-form-card label { color:#5d7185; }
.prep-form-actions { margin-top:12px; padding-top:18px; border-top:1px solid var(--prep-border); }

/* Login */
.prep-auth-body { min-height:100vh; margin:0; background:#f1f5f7; display:flex; align-items:center; justify-content:center; }
.prep-auth-shell { width:100%; max-width:430px; padding:24px; }
.prep-auth-brand { display:flex; align-items:center; justify-content:center; margin-bottom:22px; color:var(--prep-text); }
.prep-auth-icon { width:52px; height:52px; line-height:52px; margin-right:13px; text-align:center; border-radius:50%; background:var(--prep-navy); color:#fff; font-size:22px; }
.prep-auth-title { font-size:22px; font-weight:600; }
.prep-auth-subtitle { color:var(--prep-muted); font-size:12px; }
.prep-auth-card { background:#fff; border:1px solid var(--prep-border); border-radius:8px; padding:28px; box-shadow:0 5px 20px rgba(35,57,76,.07); }
.prep-auth-card h1 { margin:0 0 6px; font-size:24px; font-weight:600; }
.prep-auth-help { margin-bottom:22px; color:var(--prep-muted); }
.prep-auth-card .form-control { height:42px; border-color:#cbd5dc; box-shadow:none; }
.prep-auth-submit { height:42px; margin-top:8px; }

@media (max-width: 767px) {
    .prep-summary-link { position:static; display:block; margin-top:12px; }
}

/* ----------------------------------------------------------
   Application shell / sidebar
   ---------------------------------------------------------- */

html,
body {
    min-height: 100%;
}

body.nav-md {
    background: var(--prep-bg);
}

/*
 * Desktop sidebar
 *
 * Only the OUTER left_col is fixed.
 * The inner scroll-view fills that fixed sidebar.
 */
@media (min-width: 992px) {

    .nav-md .main_container > .left_col {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        width: 230px;
        height: 100vh !important;
        min-height: 100vh !important;
        overflow: hidden;
        background: var(--prep-navy);
        z-index: 100;
    }

    .nav-md .main_container > .left_col > .scroll-view {
        position: relative !important;
        width: 230px;
        height: 100vh !important;
        min-height: 100vh !important;
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--prep-navy);
    }

    .nav-md .container.body .right_col {
        margin-left: 230px;
    }

    .nav-md .container.body .top_nav {
        margin-left: 230px;
    }
}