/* ------------------------------------------------------------
   Global Design System – Student Records Platform MVP
   Colors (primary, secondary, success, warning, danger, background)
   ------------------------------------------------------------ */
:root {
  --color-primary: #2563EB;
  --color-secondary: #14B8A6;
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-bg-light: #F8FAFC;
  --color-bg-dark: #1E293B;
  --color-text-light: #1F2937;
  --color-text-dark: #F1F5F9;
  --radius: 16px;
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}

[data-theme="light"] {
  --bg: var(--color-bg-light);
  --text: var(--color-text-light);
}
[data-theme="dark"] {
  --bg: var(--color-bg-dark);
  --text: var(--color-text-dark);
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', 'Poppins', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}

/* Utility classes */
.glass {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(12px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255,255,255,0.3);
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: #1D4ED8; transform: translateY(-2px); }
.btn-secondary { background: var(--color-secondary); color: #fff; }
.btn-secondary:hover { background: #0D9488; transform: translateY(-2px); }
/* Login page specific enhancements */
.login-title { font-size: 2rem; margin-bottom: 1rem; }
.input-group { margin-bottom: 1.5rem; }
.input-group input,
.input-group select,
.input-group textarea { font-size: 1rem; padding: 1rem; }
/* Larger button */
.btn-lg { padding: 1rem 2rem; font-size: 1.125rem; }


/* Card component */
.card {
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  margin: 1rem 0;
  transition: box-shadow 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-md); }

/* Grid system */
.container { width: 90%; max-width: 1440px; margin: 0 auto; }
.row { display: flex; flex-wrap: wrap; gap: 1rem; }
.col-12 { flex: 0 0 100%; }
.col-6 { flex: 0 0 48%; }
.col-4 { flex: 0 0 30%; }
@media (max-width: 768px) {
  .col-6, .col-4 { flex: 0 0 100%; }
}

/* Sidebar */
.sidebar {
  width: 250px;
  min-height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  padding: 2rem 1rem;
  background: var(--bg);
  overflow-y: auto;
}
.sidebar .logo { font-size: 1.5rem; font-weight: 800; margin-bottom: 2rem; }
.sidebar ul { list-style: none; padding: 0; }
.sidebar li { margin: 0.5rem 0; }
.sidebar a { text-decoration: none; color: var(--text); padding: 0.5rem 1rem; display: block; border-radius: var(--radius); transition: background 0.2s; }
.sidebar a.active, .sidebar a:hover { background: var(--color-primary); color: #fff; }

/* Top navbar */
.navbar { height: 64px; display: flex; align-items: center; justify-content: flex-end; padding: 0 2rem; background: var(--bg); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 10; }
.navbar .theme-toggle { cursor: pointer; margin-right: 1rem; }

/* Forms */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: var(--radius);
  background: #fff;
  transition: border-color 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
}
.badge-normal { background: var(--color-success); color: #fff; }
.badge-warning { background: var(--color-warning); color: #fff; }
.badge-critical { background: var(--color-danger); color: #fff; }

/* Toast */
.toast { position: fixed; bottom: 2rem; right: 2rem; background: var(--bg); padding: 1rem 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow-md); opacity: 0; transition: opacity 0.3s ease; }
.toast.show { opacity: 1; }

/* Skeleton loader */
.skeleton { background: #e2e8f0; border-radius: var(--radius); min-height: 1rem; }

/* Pagination */
.pagination { display: flex; list-style: none; gap: 0.5rem; }
.pagination li a { padding: 0.5rem 0.75rem; border-radius: var(--radius); border: 1px solid #ddd; color: var(--text); text-decoration: none; }
.pagination li a.active, .pagination li a:hover { background: var(--color-primary); color: #fff; }

/* Responsive helpers */
@media (max-width: 1024px) {
  .sidebar { width: 200px; }
}
@media (max-width: 768px) {
  .sidebar { position: absolute; left: -250px; transition: left 0.3s; }
  .sidebar.open { left: 0; }
}

/* Specific component styles */
.card-status { display: flex; align-items: center; }
.card-status .icon { margin-right: 0.5rem; }

/* Chart container */
.chart-container { position: relative; width: 100%; height: 300px; }

/* Modal */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
.modal.active { display: flex; }
.modal-content { background: var(--bg); padding: 2rem; border-radius: var(--radius); width: 90%; max-width: 500px; box-shadow: var(--shadow-lg); }