:root {
    --bg: #0b1220;
    --panel: #0f1a2e;
    --panel2: #0c162a;
    --card: rgb(38 128 206);
    --stroke: rgba(255,255,255,.08);
    --text: #e8f0ff;
    --muted: rgba(232,240,255,.70);
    --muted2: rgba(232,240,255,.55);
    --blue: #2b7cff;
    --blue2: #4aa3ff;
    --good: #25d39a;
    --warn: #ffcc66;
    --bad: #ff5a7a;
    --shadow: 0 12px 30px rgba(0,0,0,.35);
    --r1: 12px;
    --r2: 16px;
    --r3: 22px;
    --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);

}

a{color:inherit;text-decoration:none}
.app {
    display: flex;
    min-height: 100vh;
    background-color: #ffffff;
}

/* Sidebar */
.sidebar {
    width: 320px;
    min-width: 320px;
    background: linear-gradient(180deg, rgb(0 9 157), rgb(12 102 244));
    border-right: 1px solid var(--stroke);
    padding: 18px;
    position: sticky;
    top: 0;
    height: 100vh;
}
.brand{display:flex; align-items:center; gap:12px; padding:10px 10px 14px 10px;}

.logo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background-image: url(../assets/img/logo.png);
    background-size: contain;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    letter-spacing: .5px;
    box-shadow: 0 10px 22px rgba(43, 124, 255, .25);
    background-repeat: no-repeat;
    padding: 5px;
    background-position: center;
}

.brandtxt .t1{font-weight:900; letter-spacing:.7px}
.brandtxt .t2{font-size:12px;color:var(--muted); margin-top:2px}

.menu{display:flex; flex-direction:column; gap:8px; padding:6px}
.mi {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid #bdbdbd30;
    background: rgb(255 255 255 / 7%);
    transition: .18s ease;
}
.mi:hover{
  background: rgba(43,124,255,.12);
  border-color: rgba(43,124,255,.35);
  transform: translateY(-1px);
}
.mi .ico{width:22px; text-align:center; opacity:.9}
.mi.danger:hover{
  background: red;
  border-color: rgba(255,90,122,.35);
}
.sep{height:1px; background: var(--stroke); margin:8px 6px}

.who{
  margin-top:auto;
  padding:12px;
  border-radius:16px;
  background: rgba(0,0,0,.16);
}
.w1{font-weight:800}
.w2{font-size:12px;color:var(--muted); margin-top:3px}

/* Main */
.pagetitle h1 {
    margin: 0;
    font-size: 22px;
    letter-spacing: .2px;
    color: #010fa3;
}
.topbar {
    padding: 22px 26px;
    border-bottom: 1px solid rgb(38 128 206);
    background: rgb(255 255 255);
    backdrop-filter: blur(10px);
    box-shadow: 0px 0px 10px #d2d2d2;
}
.pagetitle h1{margin:0; font-size:22px; letter-spacing:.2px}
.subtitle {
    font-size: 13px;
    color: rgb(1 15 163);
}
.content{padding:22px 15px}
.footer {
    padding: 14px 26px;
    border-top: 1px solid var(--stroke);
    color: rgb(18 18 18 / 55%);
    font-size: 12px;
    text-align: center;
}

/* Flash */
.flash{
  margin:18px 26px 0 26px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
}
.flash.success{border-color: rgba(37,211,154,.35); background: rgba(37,211,154,.10)}
.flash.error{border-color: rgba(255,90,122,.35); background: rgba(255,90,122,.10)}
.flash.warn{border-color: rgba(255,204,102,.35); background: rgba(255,204,102,.10)}
.flash .msg{font-weight:650}

/* Cards */
.grid{display:grid; gap:14px}
.grid.cards{grid-template-columns: repeat(12, 1fr)}
.card {
    border: 1px solid var(--stroke);
    background: rgb(38 128 206);
    border-radius: var(--r2);
    box-shadow: 0px 2px 5px #b5b5b5;
    overflow: hidden;
    max-width: 1170px;
    width: 100%;
}

.top-cards {
    background-color: #ffffffab;
    border-radius: 20px;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #7ba0e5;
}

.top-cards .span-3 {
    box-shadow: 0px 2px 5px #3f3f3f36 !important;
}

.card .hd{
  padding:14px 14px;
  border-bottom:1px solid var(--stroke);
  display:flex; align-items:center; justify-content:space-between;
}
.hd strong{
    font-size: 25px;
    color: white;
}
.card .bd{padding:14px}
.kpi{display:flex; flex-direction:column; gap:6px}
    .kpi .v {
        font-size: 26px;
        font-weight: 900;
        color: white;
    }
.kpi .l{
    font-size:12px;
    color:white;
    }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 31%);
    font-size: 12px;
    color: rgb(255 255 255);
    background: rgba(0, 0, 0, .18);
}
.badge.good {
    border-color: rgb(23 255 0);
    color: rgb(255 255 255 / 95%);
    background: rgb(0 186 45);
}
.badge.warn {
    border-color: rgb(255 200 91 / 95%);
    color: rgb(255 255 255 / 95%);
    background: rgb(255 170 0);
}
.badge.bad {
    border-color: rgb(255 0 49 / 65%);
    color: rgb(255 255 255 / 99%);
    background: rgb(224 29 29 / 93%);
}

.span-3{grid-column: span 3}
.span-4{grid-column: span 4}
.span-5{grid-column: span 5}
.span-6{grid-column: span 6}
.span-7{grid-column: span 7}
.span-8{grid-column: span 8}
.span-12{grid-column: span 12}

/* Forms */
.formrow{display:flex; gap:10px; flex-wrap:wrap}
.field{display:flex; flex-direction:column; gap:6px; min-width:220px; flex:1}
label {
    font-size: 12px;
    color: rgb(255 255 255);
}
input, select, textarea {
    border-radius: 15px;
    border: 1px solid var(--stroke);
    background: rgb(255 255 255 / 70%);
    color: black;
    padding: 11px 12px;
    outline: none;
    font-size: 13px;
}
textarea {
    min-height: 120px;
    resize: vertical;
    width: 100%;
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(43,124,255,.55);
  box-shadow: 0 0 0 4px rgba(43,124,255,.12);
}
.btn {
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgb(255 255 255 / 16%);
    color: var(--text);
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 800;
    transition: .18s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 45px;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(43,124,255,.45); background: rgba(43,124,255,.24)}
    .btn.ghost {
        background: rgb(255 255 255 / 21%);
    }
.btn.ghost:hover{background: rgba(255,255,255,.07)}
.btn.danger{background: rgba(255,90,122,.14)}
.btn.danger:hover{border-color: rgba(255,90,122,.35); background: rgba(255,90,122,.22)}

/* Table */
.tablewrap{overflow:auto; border-radius: var(--r2); border:1px solid var(--stroke); background: rgba(0,0,0,.18)}
table{border-collapse:collapse; width:100%; min-width:980px}
th,td{padding:12px 12px; border-bottom:1px solid rgba(255,255,255,.06); text-align:left; vertical-align:top}
th {
    font-size: 12px;
    color: rgb(0 56 161);
    position: sticky;
    top: 0;
    background: rgb(255 255 255 / 92%);
    align-content: center;
}
td {
    font-size: 13px;
    align-content: center;
}
.pill{
  display:inline-flex; align-items:center;
  padding:5px 10px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  font-size:12px;
  background: rgba(255,255,255,.03);
  color: var(--muted);
}

.pill.good {
    border-color: rgb(0 255 81 / 95%);
    color: rgb(0 255 81 / 95%);
    background: rgba(37, 211, 154, .10);
}

.pill.bad {
    border-color: rgb(255 91 123 / 88%);
    color: rgb(255 252 252);
    background: rgb(255 90 122 / 47%);
}

.pill.warn{border-color: rgba(255,204,102,.35); color: rgba(255,204,102,.95); background: rgba(255,204,102,.10)}

/* Modal */
.modal{position:fixed; inset:0; display:none; z-index:40}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.60)}
.modal-card {
    position: relative;
    max-width: 980px;
    margin: 4vh auto;
    background: rgb(24 87 194 / 92%);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--r3);
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    overflow: hidden;
    backdrop-filter: blur(10px);
}
.modal-head{
  padding: 14px 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:space-between;
}
.mh-title{font-weight:900}
.modal-body {
    padding: 16px;
    overflow-y: scroll;
    height: 83vh;
}
.section{
  border:1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 14px;
  background: rgba(0,0,0,.16);
  margin-bottom: 12px;
}
.section .st{font-size:12px; color: var(--muted); margin-bottom:8px; font-weight:800; letter-spacing:.4px}
.kv{display:grid; grid-template-columns: 190px 1fr; gap:8px 12px}
.kv .k{color: var(--muted); font-size:12px}
.kv .v{font-size:13px}
.pre{white-space:pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:12px; color: rgba(232,240,255,.82)}

/* Responsive */
@media (max-width: 980px){
  .sidebar{display:none}
  .content{padding:16px}
  .topbar{padding:16px}
  table{min-width: 880px}
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-12{grid-column: span 12}
}