/* ============================================================
   ACADEMIC MANAGEMENT DASHBOARD
   CSS3
   ============================================================ */

/* ============================================================
   ROOT
   ============================================================ */

:root {
  --bg-main: #0b0a08;
  --bg-secondary: #12100d;
  --bg-card: rgba(25, 22, 17, 0.95);
  --bg-card-hover: rgba(34, 30, 23, 0.98);

  --surface: #181510;
  --surface-light: #211d16;
  --surface-hover: #2a251c;

  --border: rgba(255, 205, 100, 0.08);
  --border-strong: rgba(255, 205, 100, 0.17);

  --text-primary: #fffaf0;
  --text-secondary: #b6aa96;
  --text-muted: #776e60;

  --blue: #f59e0b;
  --blue-light: #fbbf24;

  --purple: #d97706;
  --purple-light: #f59e0b;

  --green: #84cc16;
  --yellow: #facc15;
  --red: #f87171;

  --gradient: linear-gradient(135deg, #f59e0b, #d97706);

  --gradient-soft: linear-gradient(135deg,
      rgba(245, 158, 11, 0.14),
      rgba(217, 119, 6, 0.08));

  --shadow: 0 18px 55px rgba(0, 0, 0, 0.48);

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --transition: 160ms ease;
}

/* ============================================================
   RESET
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg-main);
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(circle at 10% 0%, rgba(80, 110, 255, 0.1), transparent 32%),
    radial-gradient(circle at 90% 20%,
      rgba(145, 80, 255, 0.08),
      transparent 30%),
    var(--bg-main);

  color: var(--text-primary);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
}

button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

input,
select {
  outline: none;
}

.hidden {
  display: none !important;
}

/* ============================================================
   APP SHELL
   ============================================================ */

.app-shell {
  position: relative;

  width: auto;
  min-height: 100vh;

  margin: 0 auto;

  padding: 28px 28px 110px;

  overflow: hidden;
}

.ambient {
  position: fixed;

  width: 340px;
  height: 340px;

  border-radius: 50%;

  filter: blur(90px);

  opacity: 0.1;

  pointer-events: none;

  z-index: -1;
}

.ambient-one {
  top: -150px;
  left: -100px;

  background: #4d76ff;
}

.ambient-two {
  right: -100px;
  bottom: -150px;

  background: #9b62ff;
}

/* ============================================================
   HEADER
   ============================================================ */

.topbar {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 28px;
}

.brand-area {
  display: flex;

  align-items: center;

  gap: 14px;
}

.brand-mark {
  display: grid;

  place-items: center;

  width: 44px;
  height: 44px;

  border-radius: 15px;

  background: var(--gradient);

  box-shadow: 0 8px 30px rgba(92, 105, 255, 0.24);
}

/* .brand-mark-inner {
    font-size: 19px;
    font-weight: 800;

    color: white;
} */

.brand-area h1 {
  margin: 0;

  font-size: clamp(20px, 3vw, 27px);

  letter-spacing: -0.04em;
}

.brand-area p {
  margin: 4px 0 0;

  color: var(--text-secondary);

  font-size: 13px;
}

.connection-status {
  display: flex;

  align-items: center;

  gap: 8px;

  padding: 8px 11px;

  border: 1px solid var(--border);

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.025);

  color: var(--text-secondary);

  font-size: 12px;
}

.status-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--yellow);

  box-shadow: 0 0 10px currentColor;
}

.connection-status.online .status-dot {
  background: var(--green);
}

.connection-status.offline .status-dot {
  background: var(--red);
}

/* ============================================================
   SUMMARY BAR
   ============================================================ */

.summary-bar {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 24px;
}

.summary-item {
  min-width: 0;

  padding: 14px 16px;

  border: 1px solid var(--border);

  border-radius: var(--radius-md);

  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.015));
}

.summary-label {
  display: block;

  margin-bottom: 5px;

  color: var(--text-muted);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.08em;
}

.summary-item strong {
  display: block;

  font-size: 22px;

  letter-spacing: -0.04em;
}