:root { --sidebar-width: 268px; --navy: #102a43; --navy-deep: #0a1f33; --steel: #176b87; --signal: #d94f45; --ink: #183247; --muted: #6c7d89; --line: #dce5e9; --surface: #fff; --bg: #f3f6f7; --shadow: 0 8px 24px rgba(16,42,67,.06); --vnr-gold: #e1b95a; --vnr-dark: var(--navy); --vnr-gray: var(--muted); --vnr-light: #f5f8f9; --vnr-border: var(--line); --vnr-background: var(--bg); }
* { letter-spacing: 0; }
html, body { min-height: 100%; background: var(--bg); font-family: "Manrope", sans-serif; font-size: .92rem; color: var(--ink); }
body { margin: 0; }
a { color: var(--steel); }
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-body { display: flex; flex: 1; min-height: 0; }
.sidebar { width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); background: linear-gradient(180deg, #092b4b 0%, #0b3657 100%); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 100; }
.sidebar-brand { min-height: 92px; display: flex; align-items: center; gap: .7rem; padding: 1.15rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-logo-wrap { width: 60px; height: 42px; flex: 0 0 60px; display: grid; place-items: center; border-radius: 8px; overflow: hidden; background: transparent; }
.brand-logo-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-asset { display: block; width: 100%; height: 100%; }
.brand-asset-horizontal { width: 164px; height: 34px; }
.brand-asset-compact { width: 100%; height: 34px; }
.brand-asset-symbol { width: 100%; height: 34px; }
.brand-asset-full { width: 270px; height: 68px; }
.brand-symbol { display: none; }
.brand-logo-fallback { color: #e1b95a; font-size: 1.35rem; }
.brand-title { font-size: .8rem; font-weight: 800; line-height: 1.2; }
.brand-sub { color: #e1b95a; font-size: .72rem; font-weight: 700; margin-top: .2rem; }
.sidebar-nav { display: flex; flex-direction: column; gap: .22rem; padding: .9rem .75rem; overflow-y: auto; }
.sidebar-nav .nav-link { color: rgba(255,255,255,.72); display: flex; align-items: center; gap: .8rem; padding: .72rem .85rem; border-radius: 6px; font-size: .86rem; font-weight: 600; text-decoration: none; transition: background .18s, color .18s, transform .18s; }
.sidebar-nav .nav-link i { width: 1.2rem; color: #9bb4c0; font-size: 1.05rem; text-align: center; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(2px); }
.sidebar-nav .nav-link.active { background: #f8d45c; color: #17334a; box-shadow: 0 5px 15px rgba(0,0,0,.12); position: relative; }
.sidebar-nav .nav-link.active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: #fff; }
.sidebar-nav .nav-link.active i { color: #17334a; }
.sidebar-section-title { margin: .85rem .85rem .35rem; color: #88a5b1; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-footer { margin-top: auto; padding: 1rem 1.15rem; color: #9eb5bf; border-top: 1px solid rgba(255,255,255,.1); font-size: .7rem; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: .35rem; border-radius: 50%; background: #55b685; box-shadow: 0 0 0 3px rgba(85,182,133,.15); }
.sidebar-close, .menu-toggle, .sidebar-backdrop { display: none; }
.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar-leading { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.menu-toggle { place-items: center; border: 0; background: transparent; color: #81939d; font-size: 1.2rem; padding: .25rem; }
.sidebar-collapse-toggle { display: inline-grid; place-items: center; border: 0; background: transparent; color: #81939d; font-size: 1rem; padding: .25rem; }
.header-page-title { min-width: 0; }
.breadcrumb-label { color: #81939d; font-size: .62rem; font-weight: 800; letter-spacing: .08em; }
.breadcrumb-label span { color: var(--signal); padding: 0 .25rem; }
.topbar-title { color: var(--ink); font-size: 1.16rem; font-weight: 800; margin-top: .15rem; }
.user-trigger { display: flex; align-items: center; gap: .65rem; color: var(--navy); text-decoration: none; position: relative; z-index: 1; }
.topbar-user { margin-left: auto; }
.user-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid #dcebed; }
.user-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--vnr-gold); color: var(--navy); font-size: 1rem; font-weight: 800; }
.user-summary { display: grid; gap: .1rem; line-height: 1.1; }.user-summary strong { font-size: .75rem; }.user-summary small { color: rgba(255,255,255,.62); font-size: .61rem; }
.user-meta { color: var(--muted); font-size: .68rem; margin-top: .1rem; }
.user-menu { border: 1px solid var(--line); box-shadow: var(--shadow); padding: .5rem; }
.user-menu .dropdown-item { border-radius: 5px; padding: .55rem .7rem; font-size: .82rem; }
.user-menu .dropdown-item i { width: 1.25rem; display: inline-block; }
.pagebar { min-height: 58px; padding: .7rem 2.2rem; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.content { flex: 1; padding: 1.35rem 2.2rem 2.4rem; }
.app-footer { padding: 1rem 2.2rem 1.2rem; color: #8a9aa2; font-size: .7rem; }
.app-footer span { color: var(--signal); padding: 0 .35rem; }
.section-title { color: var(--ink); font-size: 1rem; font-weight: 800; margin-bottom: .9rem; }
.section-title i { color: var(--steel); margin-right: .35rem; }
.dashboard-hero { display: flex; align-items: stretch; justify-content: space-between; min-height: 150px; margin-bottom: 1.1rem; padding: 1.4rem 1.8rem; border: 1px solid #d5e2e3; border-radius: 8px; background: linear-gradient(115deg, #eaf3f3 0%, #f7faf9 57%, #e6eff0 100%); overflow: hidden; }
.dashboard-hero h1 { color: var(--navy); font-size: 1.9rem; font-weight: 800; margin: .55rem 0 .5rem; }
.dashboard-hero p { max-width: 540px; color: var(--muted); margin: 0; }
.dashboard-hero-visual { min-width: 235px; width: 340px; margin: -1.4rem -1.8rem -1.4rem 2rem; object-fit: cover; }
.kpi-card, .section-card, .table-responsive-card, .filter-bar { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.kpi-card { height: 100%; padding: 1rem 1.1rem; position: relative; overflow: hidden; }
.kpi-card::after { content: ""; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--signal); opacity: .8; }
.kpi-label { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.kpi-value { color: var(--ink); font-size: 1.85rem; font-weight: 800; margin-top: .28rem; }
.kpi-sub { color: #91a0a7; font-size: .72rem; margin-top: .2rem; }
.section-card { padding: 1.2rem 1.3rem; margin-bottom: 1.25rem; }
.chart-box { position: relative; height: 280px; }
.chart-box-sm { position: relative; height: 220px; }
.vn-map-wrap { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.vn-map-canvas { position: relative; flex: 0 0 auto; }
.vn-map { display: block; height: 440px; width: auto; margin: 0 auto; }
.vn-map-path { stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; transition: filter .12s; cursor: pointer; }
.vn-map-path:hover { filter: brightness(1.12); }
.vn-map-path-unnamed { fill: #eef2f3; stroke: #f6f8f8; pointer-events: none; }
.vn-map-tooltip { position: absolute; z-index: 5; pointer-events: none; background: var(--navy); color: #fff; border-radius: 6px; padding: .5rem .7rem; font-size: .74rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .1rem; white-space: nowrap; }
.vn-map-tooltip strong { font-size: .78rem; }
.vn-map-tooltip span { color: #b9c9d1; font-size: .68rem; }
.vn-map-legend { flex: 1 1 200px; min-width: 180px; }
.vn-map-legend-title { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .5rem; }
.vn-map-legend-bar { height: 10px; border-radius: 5px; }
.vn-map-legend-scale { display: flex; justify-content: space-between; color: #8a9aa2; font-size: .68rem; margin-top: .3rem; }
.vn-map-legend-note { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .72rem; margin-top: 1rem; }
.vn-map-legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.vn-map-legend-swatch-empty { background: #e7edee; border: 1px solid #d8e2e5; }
.vn-map-bubble-sample { width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: rgba(23,107,135,.55); border: 1.5px solid var(--navy); }
.section-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.section-title-row .section-title { margin-bottom: 0; }
.vn-map-mode-toggle { display: inline-flex; gap: .35rem; }
.vn-map-mode-toggle .btn.active { background: var(--steel); border-color: var(--steel); color: #fff; }
.vn-map-bubble { fill: rgba(23,107,135,.55); stroke: var(--navy); stroke-width: 2; cursor: pointer; transition: fill-opacity .12s; }
.vn-map-bubble:hover { fill-opacity: .85; }
.table-responsive-card { overflow: hidden; }
.table-responsive-card .table, .section-card .table { margin-bottom: 0; }
.table thead th { color: #637883; background: #f5f8f9; border-bottom-color: var(--line); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.table tbody td { border-color: #edf1f2; vertical-align: middle; }
.table-hover tbody tr:hover { --bs-table-hover-bg: #f5fafb; }
.badge { border-radius: 4px; font-weight: 700; padding: .42em .62em; }
.badge-status-Existing, .badge-item-Completed, .badge-plan-Completed { background: #dff3e8; color: #176b4d; }
.badge-status-Planned, .badge-plan-Approved { background: #fff0cf; color: #87601b; }
.badge-status-Processing, .badge-item-InProgress { background: #dceff4; color: #176078; }
.badge-status-Removed, .badge-plan-Closed { background: #e9eef0; color: #536872; }
.badge-item-NotStarted, .badge-plan-Draft { background: #edf0f1; color: #62747d; }
.badge-item-Overdue { background: #fbe2df; color: #a33f38; }
.progress { height: .48rem; background: #e9eff0; border-radius: 10px; }
.progress-bar { background: var(--steel) !important; border-radius: inherit; }
.filter-bar { padding: 1rem 1.1rem; margin-bottom: 1.15rem; }
.form-label { color: #425965; font-size: .78rem; font-weight: 800; }
.form-control, .form-select { border-color: #d5e0e4; border-radius: 5px; }
.form-control:focus, .form-select:focus { border-color: var(--steel); box-shadow: 0 0 0 .2rem rgba(23,107,135,.14); }
.btn { border-radius: 5px; font-weight: 700; }
.btn-primary { --bs-btn-bg: var(--steel); --bs-btn-border-color: var(--steel); --bs-btn-hover-bg: #125b72; --bs-btn-hover-border-color: #125b72; }
.alert { border-radius: 6px; border: 0; }

.login-page { background: #edf3f3; }
.login-shell { display: grid; grid-template-columns: minmax(420px, .92fr) minmax(420px, 1.08fr); min-height: 100vh; }
.login-panel { display: flex; flex-direction: column; justify-content: space-between; padding: 3rem clamp(2rem, 6vw, 6.5rem); background: #fff; }
.login-content { max-width: 430px; padding: 3rem 0; }
.eyebrow { color: var(--signal); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.login-content h1 { color: var(--navy); font-size: clamp(2rem, 3.4vw, 3.4rem); font-weight: 800; line-height: 1.12; margin: 1rem 0; }
.login-content h1 em { color: var(--steel); font-style: normal; }
.login-content p { color: var(--muted); line-height: 1.8; }
.login-content .btn { margin-top: 1.35rem; border-width: 1px; padding: .8rem 1rem; }
.login-note { display: flex; gap: .5rem; align-items: flex-start; font-size: .7rem; margin-top: 1.2rem; }
.login-note i { color: var(--steel); font-size: .9rem; }
.login-footer { color: #8a9aa2; font-size: .68rem; }
.login-footer span { color: var(--signal); padding: 0 .35rem; }
.login-visual { position: relative; min-height: 100vh; background: #173d54; overflow: hidden; }
.login-visual > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.login-visual::before, .login-visual::after { content: ""; position: absolute; width: 130%; height: 1px; background: rgba(225,185,90,.34); transform: rotate(-27deg); }
.login-visual::before { top: 36%; }.login-visual::after { top: 62%; }
.visual-placeholder { position: relative; z-index: 1; display: grid; gap: .7rem; place-items: center; color: rgba(255,255,255,.72); text-align: center; }
.visual-placeholder i { color: #e1b95a; font-size: 3rem; }
.visual-placeholder span { font-weight: 800; letter-spacing: .04em; }
.visual-placeholder small { color: rgba(255,255,255,.5); font-size: .68rem; }
.visual-placeholder code { color: #e1b95a; }
@media (min-width: 901px) { body.sidebar-collapsed .sidebar { width: 82px; flex-basis: 82px; } body.sidebar-collapsed .brand-copy, body.sidebar-collapsed .sidebar-section-title, body.sidebar-collapsed .sidebar-nav .nav-link span, body.sidebar-collapsed .sidebar-footer { display: none; } body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 1.15rem .5rem; } body.sidebar-collapsed .brand-logo-wrap { width: 52px; flex-basis: 52px; } body.sidebar-collapsed .brand-logo-wrap > .brand-asset-compact { display: none; } body.sidebar-collapsed .brand-symbol { display: block; width: 100%; height: 100%; } body.sidebar-collapsed .brand-symbol .brand-logo-wrap-symbol { display: block; width: 100%; height: 100%; } body.sidebar-collapsed .brand-symbol .brand-asset-symbol { display: block; } body.sidebar-collapsed .sidebar-nav .nav-link { justify-content: center; padding-left: .5rem; padding-right: .5rem; } body.sidebar-collapsed .sidebar-nav .nav-link i { width: auto; } }
@media (max-width: 900px) { .sidebar { position: fixed; left: 0; transform: translateX(-100%); transition: transform .2s; box-shadow: 12px 0 28px rgba(0,0,0,.2); } .sidebar.is-open { transform: translateX(0); } .sidebar-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(10,31,51,.42); } body.sidebar-open .sidebar-backdrop { display: block; } .sidebar-close, .menu-toggle { display: inline-grid; place-items: center; border: 0; background: transparent; color: inherit; } .sidebar-close { margin-left: auto; color: #a8bec7; } .menu-toggle { color: #81939d; font-size: 1.4rem; padding: 0; } .pagebar { padding: .7rem 1.1rem; flex-wrap: wrap; gap: .6rem; } .content { padding: 1.3rem 1.1rem 2rem; } .app-footer { padding: 1rem 1.1rem; } }
@media (max-width: 720px) { .login-shell { display: block; } .login-panel { min-height: 100vh; padding: 1.7rem 1.4rem; } .login-visual { display: none; } .login-content { padding: 4rem 0; } .topbar-title { font-size: 1rem; } .breadcrumb-label { font-size: .55rem; } .dashboard-hero { display: block; min-height: 0; padding: 1.25rem; } .dashboard-hero h1 { font-size: 1.45rem; } .dashboard-hero-visual { min-height: 100px; margin: 1rem -1.25rem -1.25rem; } .vn-map-wrap { flex-direction: column; } .vn-map { height: 300px; } }