@import url('light.css'); @import url('dark.css');
:root{--nav-h:60px;--side-w:260px;--side-w-collapsed:72px}
html{font-size:100%} *{box-sizing:border-box}
body{background:var(--bg-color);color:var(--text-color);min-height:100vh;overflow-x:hidden;transition:background .2s,color .2s}
a{color:var(--primary-color)}
/* Navbar */
.app-navbar{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1030;display:flex;align-items:center;gap:.75rem;padding:0 1rem;background:var(--navbar-color);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow)}
.app-navbar .btn-icon{color:var(--text-color);background:transparent;border:0;padding:.4rem .6rem;border-radius:.5rem}
.app-navbar .btn-icon:hover{background:var(--hover-color)}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--primary-color);text-decoration:none;white-space:nowrap}
.brand i{font-size:1.4rem}
.nav-actions{display:flex;align-items:center;gap:.25rem}
.global-search{position:relative;flex:1 1 auto;max-width:480px;margin-left:1rem}
.search-results{position:absolute;top:110%;left:0;right:0;background:var(--card-color);border:1px solid var(--border-color);border-radius:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.2);max-height:60vh;overflow:auto;z-index:2000}
.search-results a{display:flex;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;color:var(--text-color);text-decoration:none;border-bottom:1px solid var(--border-color)}
.search-results a:hover{background:var(--hover-color)}
/* Sidebar */
.app-sidebar{position:fixed;top:var(--nav-h);bottom:0;left:0;width:var(--side-w);background:var(--sidebar-color);border-right:1px solid var(--border-color);overflow-y:auto;overflow-x:hidden;z-index:1020;transition:width .2s,transform .25s}
.sidebar-nav{padding:.75rem .5rem;display:flex;flex-direction:column;gap:2px}
.sidebar-nav .nav-link{display:flex;align-items:center;gap:.75rem;padding:.6rem .85rem;color:var(--text-color);border-radius:.5rem;white-space:nowrap;text-decoration:none}
.sidebar-nav .nav-link i:first-child{font-size:1.15rem;width:1.4rem;text-align:center;flex:none}
.sidebar-nav .nav-link:hover{background:var(--hover-color)}
.sidebar-nav .nav-link.active{background:var(--primary-color);color:#fff}
[data-theme="dark"] .sidebar-nav .nav-link.active{color:#000}
.sidebar-nav .sub{padding-left:2.2rem;font-size:.92rem}
.sidebar-nav .caret{margin-left:auto;font-size:.75rem;transition:transform .2s}
.nav-toggle:not(.collapsed) .caret{transform:rotate(180deg)}
/* Main */
.app-main{margin-left:var(--side-w);padding:calc(var(--nav-h) + 1.25rem) 1.25rem 1rem;min-height:calc(100vh - 44px);transition:margin .2s;min-width:0}
.app-footer{margin-left:var(--side-w);padding:.7rem 1.25rem;display:flex;justify-content:space-between;border-top:1px solid var(--border-color);font-size:.85rem;transition:margin .2s}
body.sidebar-collapsed .app-sidebar{width:var(--side-w-collapsed)}
body.sidebar-collapsed .app-main,body.sidebar-collapsed .app-footer{margin-left:var(--side-w-collapsed)}
body.sidebar-collapsed .nav-text,body.sidebar-collapsed .collapse.show{display:none}
body.sidebar-collapsed:not(.sidebar-hover) .sidebar-nav .sub{display:none}
.sidebar-backdrop{display:none}
/* Page header */
.page-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.75rem;margin-bottom:1.25rem}
.page-title{font-size:1.5rem;font-weight:600;margin:0}
.page-desc{margin:.15rem 0;color:var(--muted-color)}
.breadcrumb{margin:.25rem 0 0;font-size:.85rem}
.ph-actions{display:flex;flex-wrap:wrap;gap:.5rem}
/* Cards */
.card{background:var(--card-color);border:1px solid var(--border-color);border-radius:.75rem;box-shadow:var(--shadow);color:var(--text-color)}
.card-header{background:transparent;border-bottom:1px solid var(--border-color);font-weight:600}
.kpi{display:flex;align-items:center;gap:.9rem;padding:1rem}
.kpi .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem;background:var(--hover-color);color:var(--primary-color);flex:none}
.kpi .val{font-size:1.45rem;font-weight:700;line-height:1.1}
.kpi .lbl{font-size:.82rem;color:var(--muted-color)}
.chart-box{position:relative;height:300px}
.table>:not(caption)>*>*{vertical-align:middle}
.table thead th{white-space:nowrap}
.search-results{color:var(--text-color)}
.text-muted{color:var(--muted-color)!important}
.form-label{font-weight:500;font-size:.9rem}
.matrix-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem}
.matrix-grid label{border:1px solid var(--border-color);border-radius:.5rem;padding:.5rem .75rem;cursor:pointer;display:flex;gap:.5rem;align-items:center}
.matrix-grid label:hover{background:var(--hover-color)}
/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1rem;background:var(--bg-color)}
.login-card{width:100%;max-width:420px}