/* Inter font applied via header.php link */
:root{
  --bg:#0b1220;
  --card:#0f1724;
  --muted:#98a0b3;
  --accent:#7c5cff; /* nice purple */
  --accent-2:#4dd0e1; /* teal */
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
}

/* Base */
body.bg-app { background: linear-gradient(180deg, #071026 0%, #081428 60%); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color: #e6eef8; }
.text-app { color: #e6eef8; }

/* Navbar */
.bg-app-navbar { background: linear-gradient(90deg, rgba(10,16,36,0.95), rgba(8,12,24,0.96)); border-bottom: 1px solid rgba(255,255,255,0.03); }
.navbar-brand { font-weight: 600; display:flex; align-items:center; }
.brand-bubble { display:inline-block; width:36px; height:36px; border-radius:10px; background: linear-gradient(135deg,var(--accent), #9b7bff); color:white; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 18px rgba(124,92,255,0.12); }
.brand-title { font-size: 1rem; letter-spacing: 0.2px; color: #f3f6fb; }

/* Cards */
.card { background: linear-gradient(180deg,var(--card), rgba(15,23,36,0.85)); border: none; border-radius: var(--radius); box-shadow: 0 8px 30px rgba(2,6,23,0.6); transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(2,6,23,0.7); }
.card .card-body { padding: 1.25rem; }

/* Department card specific */
.dept-badge { display:inline-block; padding:6px 10px; border-radius:10px; font-weight:700; background: linear-gradient(90deg,var(--accent), var(--accent-2)); color:white; box-shadow: 0 6px 18px rgba(77,208,225,0.08); }
.card-title { font-weight:600; font-size:1.05rem; color:#f7f9ff; }
.small.text-muted { color: var(--muted) !important; }

/* Grid responsiveness tweaks */
.row.g-3 { gap:1.1rem; }
@media (max-width: 576px) {
  .col-6 { flex: 0 0 100%; max-width:100%; }
}

/* Tables */
.table-dark { background: transparent; border-collapse: collapse; }
.table-dark th, .table-dark td { border-top: 1px solid rgba(255,255,255,0.03); color: #dce7ff; }
.table-sm td, .table-sm th { padding: .5rem .6rem; }

/* Buttons */
.btn-outline-light { border-color: rgba(255,255,255,0.09); color: #eaf2ff; }
.btn-primary { background: linear-gradient(90deg,var(--accent), #9b7bff); border: none; box-shadow: 0 8px 24px rgba(124,92,255,0.12); }
.btn-primary:hover { filter: brightness(1.03); }

/* Input styles */
.form-control, .form-select { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.04); color: #eaf2ff; border-radius: 10px; padding: 10px 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); }

/* Code copy chip */
.code-copy { cursor: pointer; display: inline-block; padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,0.02); color:#dff3ff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; font-size: .9rem; transition: background .12s ease, transform .08s ease; }
.code-copy:hover { transform: translateY(-2px); background: rgba(255,255,255,0.04); }

/* Cards grid spacing */
.container { max-width:1200px; }

/* Footer */
footer { color: var(--muted); }

/* Little helpers */
.badge-dept { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.03); color:#eaf2ff; font-weight:600; font-size:0.86rem; }