:root{
  --krm-primary:#0d5bdd;
  --krm-sidebar:#0f172a;
  --krm-sidebar-muted:#94a3b8;
  --krm-bg:#f1f5f9;
}
*{box-sizing:border-box}
body{background:var(--krm-bg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#1e293b}
a{text-decoration:none}

/* ---- App shell ---- */
.krm-shell{display:flex;min-height:100vh}
.krm-sidebar{
  width:240px;background:var(--krm-sidebar);color:#e2e8f0;flex-shrink:0;
  position:fixed;top:0;bottom:0;left:0;overflow-y:auto;transition:transform .2s;z-index:1030;
}
.krm-brand{display:flex;align-items:center;gap:.5rem;font-size:1.2rem;font-weight:700;
  padding:1.1rem 1.25rem;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.krm-brand i{color:var(--krm-primary)}
.krm-sidebar .nav{padding:.75rem .5rem}
.krm-sidebar .nav-link{color:var(--krm-sidebar-muted);border-radius:.5rem;padding:.6rem .85rem;
  display:flex;align-items:center;gap:.7rem;font-weight:500;margin-bottom:2px}
.krm-sidebar .nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
.krm-sidebar .nav-link.active{background:var(--krm-primary);color:#fff}
.krm-sidebar .nav-link.disabled{color:#475569;cursor:default}
.krm-nav-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:#475569;padding:.9rem .85rem .3rem}

.krm-main{flex:1;margin-left:240px;display:flex;flex-direction:column;min-width:0}
.krm-topbar{background:#fff;border-bottom:1px solid #e2e8f0;padding:.7rem 1.25rem;
  display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:1020}
.krm-title{font-size:1.15rem;font-weight:600}
.krm-user{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.krm-content{padding:1.25rem;flex:1}

/* ---- Stat cards ---- */
.krm-stat-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:1.3rem;flex-shrink:0}

/* ---- Auth ---- */
.krm-auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(135deg,#0f172a,#0d5bdd)}
.krm-auth-card{background:#fff;border-radius:1rem;padding:2.25rem;width:100%;max-width:400px;
  box-shadow:0 25px 60px rgba(0,0,0,.25)}
.krm-auth-logo{width:64px;height:64px;border-radius:16px;background:var(--krm-primary);color:#fff;
  font-size:1.8rem;display:inline-flex;align-items:center;justify-content:center}

@media (max-width:991.98px){
  .krm-sidebar{transform:translateX(-100%)}
  .krm-sidebar.open{transform:translateX(0)}
  .krm-main{margin-left:0}
}

/* ---- Mobile sidebar backdrop ---- */
.krm-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1025}
.krm-backdrop.show{display:block}
@media(min-width:992px){.krm-backdrop{display:none!important}}

/* ---- Global working overlay ---- */
.krm-loader{display:none;position:fixed;inset:0;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:3000;
  align-items:center;justify-content:center;padding:1rem}
.krm-loader.show{display:flex}
.krm-loader-card{background:#fff;border-radius:14px;padding:1.6rem 2rem;text-align:center;
  box-shadow:0 16px 50px rgba(15,23,42,.25);max-width:90%}
.krm-spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-top-color:var(--krm-primary);
  border-radius:50%;animation:krmspin .8s linear infinite;margin:0 auto .8rem}
@keyframes krmspin{to{transform:rotate(360deg)}}

/* ---- Mobile polish ---- */
@media(max-width:991.98px){
  .krm-content{padding:.85rem}
  .krm-topbar{padding:.6rem .85rem;gap:.5rem}
  .krm-title{font-size:1rem}
  .krm-user{gap:.4rem}
  .krm-user .krm-username{display:none}
  .card-body{padding:1rem}
  h5{font-size:1.05rem}
}
/* keep wide tables usable on phones */
.table-responsive{ -webkit-overflow-scrolling:touch }