@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans:wght@400;500;700&display=swap");

:root {
  color-scheme: light;
  --win-font-stack: "Inter", "Noto Sans", "Segoe UI", Arial, sans-serif;
  --font-sans: var(--win-font-stack) !important;
  --font-display: var(--win-font-stack) !important;
  --win-bg: #f4f7fc;
  --win-surface: rgba(255, 255, 255, 0.94);
  --win-surface-soft: rgba(250, 250, 250, 0.96);
  --win-text: #172033;
  --win-muted: #5c6b86;
  --win-border: rgba(61, 116, 236, 0.12);
  --win-border-strong: rgba(61, 116, 236, 0.25);
  --win-accent: #3165e8;
  --win-accent-hover: #214fcc;
  --win-focus: #4b81f5;
  --win-danger: #d93838;
  --win-warning: #db8b00;
  --win-success: #1b9b47;
  --win-shadow: 0 16px 40px rgba(23, 32, 51, 0.06);

  /* Shared tokens used by existing pages */
  --bg: var(--win-bg);
  --panel: var(--win-surface);
  --panel-soft: var(--win-surface-soft);
  --ink: var(--win-text);
  --muted: var(--win-muted);
  --line: rgba(27, 27, 27, 0.16);
  --primary: var(--win-accent);
  --primary-dark: var(--win-accent-hover);
  --danger: var(--win-danger);
  --warning: var(--win-warning);
  --success: var(--win-success);
  --shadow: var(--win-shadow);
  --radius: 16px;

  --student-accent: var(--win-accent);
  --student-accent-strong: var(--win-accent-hover);
  --student-accent-soft: rgba(15, 108, 189, 0.14);
  --student-warn: var(--win-warning);
  --student-warn-soft: rgba(138, 88, 0, 0.12);
  --student-danger: var(--win-danger);
  --student-danger-soft: rgba(196, 43, 28, 0.12);
  --student-ink: var(--win-text);
  --student-muted: var(--win-muted);
  --student-line: rgba(27, 27, 27, 0.14);
}

html,
body,
button,
input,
select,
textarea,
optgroup {
  font-family: var(--win-font-stack) !important;
}

code,
pre,
kbd,
samp {
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace !important;
}

body,
body[data-student-page],
body[data-teacher-page],
body[data-homeroom-page],
body[data-school-admin-page] {
  color: var(--win-text) !important;
  background: 
    radial-gradient(circle at top left, rgba(49, 101, 232, 0.08), transparent 40%),
    radial-gradient(circle at bottom right, rgba(106, 197, 255, 0.12), transparent 40%),
    var(--win-bg) !important;
  background-attachment: fixed !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  color: var(--win-text);
  letter-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--win-font-stack) !important;
}

p,
small,
label,
.muted {
  color: var(--win-muted);
}

span {
  color: inherit;
}

a {
  color: var(--win-accent);
}

a:hover {
  color: var(--win-accent-hover);
}

input,
select,
textarea {
  background: #fff !important;
  color: var(--win-text) !important;
  border: 1px solid var(--win-border-strong) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(0, 120, 212, 0.28) !important;
  outline-offset: 0;
  border-color: var(--win-focus) !important;
}

button,
.btn,
.btn-outline,
.btn-ghost,
.pill.logout {
  color: var(--win-text) !important;
  background: #fff !important;
  border: 1px solid var(--win-border-strong) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(23, 32, 51, 0.04) !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

button:hover,
.btn:hover,
.btn-outline:hover,
.btn-ghost:hover,
.pill.logout:hover {
  background: #f8fafe !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(23, 32, 51, 0.08) !important;
}

.btn-primary,
button.btn-primary,
.btn-primary:visited {
  color: #fff !important;
  background: var(--win-accent) !important;
  border-color: var(--win-accent) !important;
}

.btn-primary:hover,
button.btn-primary:hover {
  background: var(--win-accent-hover) !important;
  border-color: var(--win-accent-hover) !important;
}

.panel,
.card,
.workspace,
.shell,
.main-nav,
.main-sidebar,
.auth-panel,
.auth-register-panel {
  background: var(--win-surface) !important;
  border-color: var(--win-border) !important;
  box-shadow: var(--win-shadow) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius) !important;
}

/* Premium banner for workspace top header */
.topbar {
  position: relative;
  overflow: hidden;
  min-height: 122px;
  padding: 16px 26px !important;
  border-radius: 0 0 24px 24px !important;
  background:
    radial-gradient(320px 190px at 11% 16%, rgba(59, 130, 246, 0.28), rgba(59, 130, 246, 0)),
    radial-gradient(460px 220px at 88% -8%, rgba(14, 165, 233, 0.22), rgba(14, 165, 233, 0)),
    linear-gradient(115deg, #f7fbff 0%, #ebf3ff 52%, #e3efff 100%) !important;
  border: 1px solid rgba(86, 132, 221, 0.26) !important;
  box-shadow:
    0 16px 32px rgba(32, 65, 124, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.topbar::before {
  content: "";
  position: absolute;
  right: -26px;
  top: -38px;
  width: 260px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.topbar::after {
  display: none;
}

.topbar-brand,
.workspace-brand {
  position: relative;
  z-index: 1;
  gap: 14px !important;
}

.topbar-brand img,
.workspace-brand img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 8px 20px rgba(35, 78, 151, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  padding: 5px;
}

.topbar-brand strong,
.workspace-brand strong {
  font-size: 50px;
  letter-spacing: 0.02em;
  color: #13243e !important;
}

.topbar-brand span,
.workspace-brand span {
  color: #3d5172 !important;
  font-size: 15px !important;
}

.topbar .toolbar-group {
  position: relative;
  z-index: 2;
}

@media (max-width: 920px) {
  .topbar {
    min-height: 98px;
    padding: 12px 14px !important;
    border-radius: 0 0 18px 18px !important;
  }

  .topbar-brand img,
  .workspace-brand img {
    width: 36px !important;
    height: 36px !important;
  }

  .topbar-brand strong,
  .workspace-brand strong {
    font-size: 34px;
  }
}

.alert {
  border-color: var(--win-border) !important;
}

.alert.error {
  color: var(--win-danger) !important;
  border-color: rgba(196, 43, 28, 0.35) !important;
  background: rgba(196, 43, 28, 0.08) !important;
}

.alert.success {
  color: var(--win-success) !important;
  border-color: rgba(15, 123, 15, 0.35) !important;
  background: rgba(15, 123, 15, 0.08) !important;
}

.topbar-brand strong,
.pill strong {
  color: var(--win-text) !important;
}

/* Ensure the viewport can scroll if content overflows */
html, body {
  overflow-y: auto !important;
  overflow-x: hidden;
}

/* Maintain standard non-stretched minimum heights */
.main-area,
.workspace,
.page {
  min-height: auto;
}

/* If the workspace is empty or has low content, ensure it fits neatly within the viewport */
.workspace {
  box-sizing: border-box !important;
}

/* Hide brand badge / pill on login and auth screens */
.auth-brand-lockup .badge,
.auth-brand-lockup span.badge,
.auth-hero .badge,
.auth-hero span.badge,
.auth-hero-copy .badge,
.auth-hero-copy span.badge,
.auth-screen .badge,
.auth-screen span.badge,
.auth-card .badge,
.auth-card span.badge,
span.badge {
  display: none !important;
}

/* Custom Sleek Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(240, 244, 255, 0.6);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: rgba(49, 101, 232, 0.25);
  border-radius: 999px;
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(49, 101, 232, 0.5);
}

/* Modern Card & Button Interactive Elevation */
.btn, .button, button.tab-btn, .workspace-pill, .class-card {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn:active, button.tab-btn:active {
  transform: scale(0.98);
}

.panel, .card, .workspace-card {
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.panel:hover, .card:hover, .workspace-card:hover {
  box-shadow: 0 16px 36px rgba(31, 62, 116, 0.08);
}

/* Input Focus Ring Polish */
input:focus, select:focus, textarea:focus {
  border-color: var(--win-accent) !important;
  box-shadow: 0 0 0 3px rgba(49, 101, 232, 0.15) !important;
}

/* Live Pulse Animation */
@keyframes hoctap-pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.live-dot, .status-indicator.online {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--win-success);
  box-shadow: 0 0 8px rgba(27, 155, 71, 0.5);
  animation: hoctap-pulse 2s infinite ease-in-out;
}