:root{
  --bg: #0b1220;
  --panel: rgba(18, 26, 43, 0.88);
  --panel-solid: #121a2b;
  --border: rgba(255,255,255,.10);
  --text: #eaf0ff;
  --muted: #000000;

  --accent: #4f46e5;
  --accent2: #2563eb;

  --danger: #ef4444;
  --success: #22c55e;
  --warning: #f59e0b;

  --radius: 18px;
}

.table>:not(caption)>*>* {
    color: var(--bs-table-color-state, var(--bs-table-color-type, #454545));
}


body{
  background:#e8f5ff;
  color: black;
}

.glass-card {
    border: 1px solid #e3e3e3;
    border-radius: var(--radius);
    backdrop-filter: blur(12px);
    background : #ffffff;
}

.btn-outline-light {
    --bs-btn-color: #515151;
    border: 1px solid #cdcdcd;
    background: #ffffff;
}
.text-white {
    color: rgb(0 0 0) !important;
}

.brand-badge{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(79,70,229,.95), rgba(59,130,246,.85));
  box-shadow: 0 10px 30px rgba(79,70,229,.25);
}

.text-muted-2{
  color: var(--muted) !important;
}

.form-control, .form-select {
    background: rgb(255 255 255) !important;
    border: 1px solid rgb(0 0 0 / 30%) !important;
    color: #000000 !important;
    border-radius: 10px !important;
    padding: 12px 12px !important;
}

.form-control::placeholder{
  color: rgba(169,180,199,.7) !important;
}

.form-control:focus, .form-select:focus{
  border-color: rgba(79,70,229,.65) !important;
  box-shadow: 0 0 0 0.25rem rgba(79,70,229,.18) !important;
}

.btn-gradient{
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  transition: transform .08s ease, filter .2s ease;
}
.btn-gradient:hover{ filter: brightness(1.05); }
.btn-gradient:active{ transform: translateY(1px); }

.pill{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}

.stat-card .k{
  color: var(--muted);
  font-size: 12px;
}
.stat-card .v{
  font-size: 28px;
  font-weight: 900;
  margin-top: 6px;
  letter-spacing: .3px;
}

.table-dark-glass{
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
}
.table-dark-glass thead th{
  color: var(--muted);
  font-weight: 600;
}

.badge-soft{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-weight: 600 !important;
}

.alert-danger-soft{
  background: rgba(239,68,68,.12) !important;
  border: 1px solid rgba(239,68,68,.35) !important;
  color: #fecaca !important;
  border-radius: 14px !important;
}

/* Status pills */
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.2px;
  border:1px solid var(--border);
}

.status-issued{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.35);
  color: #00c545;
}

.status-suspended{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.35);
  color: #fecaca;
}

.status-lost{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.35);
  color: #fde68a;
}

.status-other {
    background: rgb(3 169 244 / 18%);
    border-color: rgb(123 214 255);
    color: #007ab1;
}

/* === FIX CONTENT SCROLL ISSUE === */

/* Main layout containers must allow scrolling */
html, body {
  height: 100%;
}

body {
  overflow-y: auto;
}

/* Common wrappers – adjust names if yours differ */
.app,
.main,
.page-content,
.content,
.content-wrapper {
  height: auto !important;
  min-height: 100vh;
  overflow: visible !important;
}

/* If you use a sidebar layout */
.main-content {
  height: auto !important;
  overflow-y: auto !important;
  padding-bottom: 40px;
}
