:root{
  --primary:#ff0000;
  --primaryDark:#c40000;
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#101828;
  --muted:#667085;
  --border:#eaecf0;
  --shadow: 0 8px 20px rgba(16,24,40,.08);
  --radius: 14px;
}

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Calibri, Arial, sans-serif;
  /* Base requested size */
  font-size:10px !important;
  line-height:1.35;
}

a{color:inherit;text-decoration:none}

.app{display:flex;min-height:100vh}

.sidebar{
  width:240px;
  background:linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
  border-right:1px solid var(--border);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;

  /* Requested: Sidebar text a bit larger */
  font-size:12px;
}

.brand{padding:6px 6px 10px 6px;border-bottom:1px dashed var(--border)}
.brand__link{display:flex;gap:10px;align-items:center}
.brand__logo{width:44px;height:44px;object-fit:contain;border-radius:10px;background:#fff;border:1px solid var(--border)}
.brand__name{font-weight:700;font-size:12px;letter-spacing:.2px}
.brand__sub{color:var(--muted);font-size:10px}

.nav{display:flex;flex-direction:column;gap:6px}
.nav__item{
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  transition:all .15s ease;

  /* Requested: Sidebar module labels 12px */
  font-size:12px;
}
.nav__item:hover{border-color:#ffd1d1;box-shadow:0 6px 14px rgba(255,0,0,.08);transform:translateY(-1px)}
.nav__item.is-active{border-color:var(--primary);box-shadow:0 10px 18px rgba(255,0,0,.12)}

.sidebar__footer{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.userchip{padding:10px;border:1px solid var(--border);border-radius:12px;background:#fff}
.userchip__name{font-weight:700;font-size:12px}
.userchip__meta{color:var(--muted)}

/* Sidebar buttons should match sidebar size */
.sidebar .btn{font-size:12px}

.main{flex:1;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(246,247,251,.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.topbar__title{font-weight:700;font-size:13px}
.topbar__right{display:flex;align-items:center;gap:10px}

.pill{padding:6px 10px;border:1px solid var(--border);background:#fff;border-radius:999px;color:var(--muted)}

.content{padding:16px;max-width:1200px;width:100%}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
}

.grid{display:grid;gap:12px}
.grid--2{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4, minmax(0,1fr))}

@media (max-width: 980px){
  .sidebar{display:none}
  .content{padding:12px}
  .grid--4{grid-template-columns:repeat(2, minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2, minmax(0,1fr))}
  .grid--2{grid-template-columns:repeat(1, minmax(0,1fr))}
}

.h1{font-weight:800;font-size:14px;margin:0 0 6px 0}
.h2{font-weight:800;font-size:12px;margin:0 0 8px 0}
.muted{color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-weight:700;
  font-size:10px;
}
.btn:hover{border-color:#ffd1d1}
.btn--primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primaryDark);border-color:var(--primaryDark)}
.btn--ghost{background:#fff}
.btn--danger{background:#fff;border-color:#ffbdbd;color:#b10000}

.input, select, textarea{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  font-family: Calibri, Arial, sans-serif;
  font-size:10px;
  outline:none;
}
textarea{min-height:90px;resize:vertical}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row > *{flex:1}

.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{color:var(--muted);text-align:left;font-weight:700;padding:0 10px}
.table td{background:#fff;border:1px solid var(--border);padding:10px;border-left:none;border-right:none}
.table tr td:first-child{border-left:1px solid var(--border);border-top-left-radius:12px;border-bottom-left-radius:12px}
.table tr td:last-child{border-right:1px solid var(--border);border-top-right-radius:12px;border-bottom-right-radius:12px}

.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:#fff}
.badge--ok{border-color:#abefc6;background:#ecfdf3;color:#027a48}
.badge--warn{border-color:#fedf89;background:#fffaeb;color:#b54708}
.badge--danger{border-color:#fecdca;background:#fef3f2;color:#b42318}

.flash{padding:10px 12px;border-radius:12px;border:1px solid var(--border);margin-bottom:12px;background:#fff}
.flash--success{border-color:#abefc6;background:#ecfdf3}
.flash--error{border-color:#fecdca;background:#fef3f2}
.flash--info{border-color:#b2ddff;background:#eff8ff}

.footer{padding:14px 16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;color:var(--muted)}

.kpi{display:flex;flex-direction:column;gap:4px}
.kpi__label{color:var(--muted)}
.kpi__value{font-weight:900;font-size:14px}

.small{font-size:9px}