/* 2008–2010 corporate banking vibe */
:root{
  --bg:#eef2f7;
  --panel:#ffffff;
  --ink:#1a2233;
  --muted:#6b7280;
  --nav:#0f2b46;
  --nav2:#143a5c;
  --line:#d7dde7;
  --accent:#2b6cb0;
  --good:#2f855a;
  --warn:#b7791f;
  --bad:#c53030;
  --shadow: 0 2px 10px rgba(0,0,0,0.08);
}
html,body{height:100%}
body{margin:0;font:13px/1.4 Tahoma, Arial, sans-serif;background:var(--bg);color:var(--ink)}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{
  background:linear-gradient(180deg,var(--nav),var(--nav2));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  box-shadow:var(--shadow);
}
.brand{font-weight:bold;letter-spacing:0.3px}
.topnav{display:flex;gap:12px;align-items:center}
.link{color:#e8f2ff}
.pill{background:rgba(255,255,255,0.12);padding:3px 8px;border-radius:999px;font-size:12px}
.muted{color:rgba(255,255,255,0.75)}

.shell{display:grid;grid-template-columns:220px 1fr;max-width:1200px;margin:18px auto;gap:14px;padding:0 14px}
.sidebar{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:6px;padding:12px}
.menu-title{font-weight:bold;color:#0b2a45;margin:6px 0 10px}
.menu-item{display:block;padding:8px 10px;border-radius:4px;color:#132033;border:1px solid transparent}
.menu-item:hover{background:#f2f6fb;border-color:#e5edf7;text-decoration:none}
.menu-muted{color:var(--muted);padding:6px 0}

.content{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:6px;padding:16px}
.page-head{border-bottom:1px solid var(--line);margin:-6px -16px 14px;padding:10px 16px;background:linear-gradient(180deg,#f8fbff,#f1f6fd)}
h1{margin:0;font-size:16px}

.card{border:1px solid var(--line);border-radius:6px;padding:12px;background:#fff;margin:0 0 12px}
.card-title{font-weight:bold;margin:0 0 8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

.table{width:100%;border-collapse:collapse}
.table th{background:#f4f8ff;text-align:left;font-weight:bold;border-bottom:1px solid var(--line);padding:8px}
.table td{border-bottom:1px solid var(--line);padding:8px;vertical-align:top}
.table tr:hover td{background:#fbfdff}

.form-row{display:grid;grid-template-columns:160px 1fr;gap:10px;align-items:center;margin:8px 0}
label{color:#1f2a44}
input,select,textarea{font:13px Tahoma, Arial, sans-serif;padding:7px 8px;border:1px solid #cfd7e6;border-radius:4px;background:#fff}
textarea{min-height:84px}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(43,108,176,0.2);border-color:rgba(43,108,176,0.55)}

.btn{display:inline-block;border:1px solid #1f4f82;background:linear-gradient(180deg,#2b6cb0,#1f4f82);color:#fff;padding:7px 12px;border-radius:4px;cursor:pointer}
.btn:hover{filter:brightness(1.03)}
.btn.secondary{background:linear-gradient(180deg,#9aa7b5,#6b7a8a);border-color:#6b7a8a}
.btn.danger{background:linear-gradient(180deg,#d64545,#a72222);border-color:#a72222}
.btn.small{padding:4px 8px;font-size:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap}

.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--line);background:#f8fafc}
.badge.good{color:var(--good);border-color:rgba(47,133,90,0.3);background:rgba(47,133,90,0.08)}
.badge.warn{color:var(--warn);border-color:rgba(183,121,31,0.3);background:rgba(183,121,31,0.08)}
.badge.bad{color:var(--bad);border-color:rgba(197,48,48,0.3);background:rgba(197,48,48,0.08)}

.alert{padding:10px 12px;border-radius:6px;margin:0 0 12px;border:1px solid var(--line)}
.alert-success{background:rgba(47,133,90,0.08);border-color:rgba(47,133,90,0.25)}
.alert-warning{background:rgba(183,121,31,0.08);border-color:rgba(183,121,31,0.25)}
.alert-danger{background:rgba(197,48,48,0.08);border-color:rgba(197,48,48,0.25)}

.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi .box{border:1px solid var(--line);border-radius:6px;padding:10px;background:#fff}
.kpi .num{font-weight:bold;font-size:16px}
.kpi .lab{color:var(--muted)}

.footer{margin-top:18px;color:var(--muted);font-size:12px}

@media (max-width: 900px){
  .shell{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .kpi{grid-template-columns:1fr 1fr}
}