:root{
  --lrms-bg: #f6f8fb;
  --lrms-card: #ffffff;
  --lrms-text: #0f172a;
  --lrms-muted: #64748b;
  --lrms-border: rgba(15, 23, 42, .08);
  --lrms-grad-1: #0ea5e9;
  --lrms-grad-2: #6366f1;
  --lrms-grad-3: #22c55e;
}

html, body{height:100%;}
body{
  background: radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.18), transparent 60%),
              radial-gradient(900px 500px at 100% 0%, rgba(99,102,241,.18), transparent 55%),
              var(--lrms-bg);
  color: var(--lrms-text);
}

/* Top navbar (no sidebar) */
.lrms-topnav{
  background: linear-gradient(135deg, rgba(14,165,233,.92), rgba(99,102,241,.92));
  border-bottom: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
}
.lrms-topnav .nav-link{ color: rgba(255,255,255,.92) !important; }
.lrms-topnav .nav-link:hover{ color: #fff !important; }

.lrms-mark{
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.18);
}

.lrms-avatar{
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 700;
  color: #fff;
}

/* Cards */
.lrms-card{
  background: var(--lrms-card);
  border: 1px solid var(--lrms-border);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

.lrms-kpi{
  display:flex; align-items:center; justify-content:space-between;
}
.lrms-kpi .num{ font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; }
.lrms-kpi .lab{ color: var(--lrms-muted); font-weight: 600; }

.lrms-badge{
  border: 1px solid var(--lrms-border);
  background: rgba(2,6,23,.02);
  border-radius: 999px;
  padding: .35rem .65rem;
  font-size: .8rem;
  color: var(--lrms-muted);
}

.lrms-hero{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.35);
  background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(99,102,241,.16));
  box-shadow: 0 20px 45px rgba(2,6,23,.10);
}

.lrms-footer{
  border-top: 1px solid var(--lrms-border);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
}

/* Tables */
.table.lrms-table{
  border-collapse: separate;
  border-spacing: 0;
}
.table.lrms-table thead th{
  background: rgba(2,6,23,.03);
  border-bottom: 1px solid var(--lrms-border);
  color: #0f172a;
}
.table.lrms-table tbody td{
  border-bottom: 1px solid var(--lrms-border);
}

/* Buttons */
.btn.lrms-primary{
  background: linear-gradient(135deg, var(--lrms-grad-1), var(--lrms-grad-2));
  border: none;
  box-shadow: 0 10px 25px rgba(99,102,241,.22);
}
.btn.lrms-primary:hover{
  filter: brightness(.98);
}

/* Small helpers */
.lrms-muted{ color: var(--lrms-muted); }

/* Forms */
.form-control, .form-select{
  border-radius: 14px;
  border-color: var(--lrms-border);
}

/* Print */
@media print{
  .lrms-topnav, .lrms-footer{ display:none !important; }
  body{ background:#fff; }
}

/* --- Legacy (v1) compatibility: keep older pages readable --- */
.grid{ display:grid; gap:16px; grid-template-columns: repeat(12, 1fr); }
.col-12{ grid-column: span 12; }
.col-6{ grid-column: span 6; }
.col-3{ grid-column: span 3; }
@media(max-width: 992px){ .col-6{ grid-column: span 12; } .col-3{ grid-column: span 6; } }
@media(max-width: 576px){ .col-3{ grid-column: span 12; } }

.card{ background: var(--lrms-card); border: 1px solid var(--lrms-border); border-radius: 18px; box-shadow: 0 10px 30px rgba(15,23,42,.06); padding: 20px; }
.muted{ color: var(--lrms-muted); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border-radius: 14px; padding: .55rem .9rem; border: 1px solid var(--lrms-border); background: rgba(255,255,255,.85); color: var(--lrms-text); text-decoration:none; }
.btn:hover{ background: #fff; }
.btn.primary{ background: linear-gradient(135deg, var(--lrms-grad-1), var(--lrms-grad-2)); border: none; color:#fff; box-shadow: 0 10px 25px rgba(99,102,241,.22); }
.btn.danger{ border-color: rgba(220,38,38,.22); color:#b91c1c; background: rgba(220,38,38,.06); }
.btn.small{ padding:.35rem .6rem; border-radius: 12px; font-size: .85rem; }

.input, textarea, select{ width:100%; border-radius: 14px; border: 1px solid var(--lrms-border); padding: .65rem .85rem; background:#fff; }
label{ font-weight:600; font-size:.92rem; margin-bottom:.35rem; }
.form-row{ display:grid; gap:12px; grid-template-columns: repeat(12, 1fr); }
.fr-12{ grid-column: span 12; }
.fr-6{ grid-column: span 6; }
@media(max-width: 768px){ .fr-6{ grid-column: span 12; } }

.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ padding: .75rem .8rem; vertical-align: top; border-bottom: 1px solid var(--lrms-border); }
.table th{ background: rgba(2,6,23,.03); text-align:left; }
.row-actions{ white-space: nowrap; }

.alert{ border-radius: 16px; padding: 12px 14px; border: 1px solid var(--lrms-border); }
.alert.ok{ background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.18); }
.alert.err{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.18); }

.progress{ width:100%; height: 10px; background: rgba(2,6,23,.08); border-radius: 999px; overflow:hidden; }
.progress > div{ height:100%; background: linear-gradient(135deg, var(--lrms-grad-3), var(--lrms-grad-1)); }


/* Prevent page overflow / 'tumpah' */
html, body { max-width: 100%; overflow-x: hidden; }
.lrms-page-wrap { max-width: 100%; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card { border-radius: 16px; }