/* Smart Campus design tokens and base styles */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --color-primary: #1A2E5A;
  --color-primary-600: #2A4A8A;
  --color-primary-500: #3B6BC4;
  --color-primary-bg: #EEF2FA;
  --color-accent-red: #C0392B;
  --color-accent-red-bg: #FDECEA;
  --color-accent-green: #27AE60;
  --color-accent-green-bg: #E8F8F0;
  --color-accent-amber: #F59E0B;
  --color-accent-amber-bg: #FEF3C7;
  --color-accent-purple: #7C3AED;
  --color-accent-purple-bg: #F3E8FF;
  --color-page-bg: #F5F6FA;
  --color-border: #E0E6F0;
  --color-text: #1A2030;
  --color-text-muted: #6B7280;
  --white: #FFFFFF;
  --shadow-sm: 0 1px 2px 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);
  --shadow-xl: 0 12px 36px rgba(0,0,0,0.16);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

html,body{height:100%;}
body{
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:var(--color-text);
  background:var(--color-page-bg);
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Navbar */
.sc-navbar{
  height:56px;
  background:var(--color-primary);
  color:rgba(255,255,255,0.95);
  display:flex;
  align-items:center;
  padding:0 20px;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.sc-navbar .brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.sc-navbar .brand .title{font-weight:700;color:var(--white);font-size:16px}
.sc-navbar .brand .title .campus{color:#F87171}
.sc-navbar .nav-links{margin-left:24px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.sc-navbar .nav-links::-webkit-scrollbar{display:none}
.sc-navbar .nav-links a{color:rgba(255,255,255,0.6);padding:6px 12px;border-radius:6px;text-decoration:none;font-size:13px;font-weight:500;transition:all 0.15s ease;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.sc-navbar .nav-links a:hover{background:rgba(255,255,255,0.1);color:#fff}
.sc-navbar .nav-links a.active{background:rgba(255,255,255,0.15);color:#fff}
.sc-navbar .spacer{flex:1;min-width:12px}
.sc-navbar .avatar{display:flex;align-items:center;gap:8px;flex-shrink:0}
.sc-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--color-accent-red),#E74C3C);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:14px}

/* Subheader */
.sc-subheader{background:var(--white);border-bottom:1px solid var(--color-border);padding:14px 24px;display:flex;align-items:center;gap:12px}
.sc-subheader .title{color:var(--color-primary);font-weight:700;font-size:18px}
.sc-subheader .subtitle{color:var(--color-text-muted);font-size:13px}
.sc-subheader .actions{margin-left:auto;display:flex;gap:8px}
.sc-btn{border-radius:7px;padding:6px 14px;font-weight:500;font-size:12px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all 0.15s ease;text-decoration:none}
.sc-btn-primary{background:var(--color-primary);color:#fff}
.sc-btn-primary:hover{background:var(--color-primary-600);transform:translateY(-1px)}
.sc-btn-outline{background:transparent;border-color:var(--color-primary-600);color:var(--color-primary-600)}
.sc-btn-outline:hover{background:var(--color-primary-bg)}

/* Card */
.sc-card{background:var(--white);border-radius:var(--radius-md);border:1px solid var(--color-border);padding:14px;position:relative;transition:all 0.2s ease}
.sc-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.sc-card--accent-top{height:3px;border-top-left-radius:10px;border-top-right-radius:10px}
.sc-card--accent-primary{border-top:3px solid var(--color-primary)}
.sc-card--accent-red{border-top:3px solid var(--color-accent-red)}
.sc-card--accent-green{border-top:3px solid var(--color-accent-green)}
.sc-card--accent-amber{border-top:3px solid var(--color-accent-amber)}
.sc-card--accent-purple{border-top:3px solid var(--color-accent-purple)}

/* Buttons */
.sc-btn-compact{padding:6px 12px;font-size:12px;border-radius:var(--radius-sm)}

/* Badges / pills */
.sc-badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:500}
.sc-badge-enabled{background:var(--color-primary-bg);color:var(--color-primary)}
.sc-badge-locked{background:#E5E7EB;color:#9CA3AF}
.sc-badge-red{background:var(--color-accent-red-bg);color:var(--color-accent-red)}
.sc-badge-green{background:var(--color-accent-green-bg);color:var(--color-accent-green)}
.sc-badge-amber{background:var(--color-accent-amber-bg);color:var(--color-accent-amber)}
.sc-badge-purple{background:var(--color-accent-purple-bg);color:var(--color-accent-purple)}

/* Utility grid for dashboard */
.sc-grid{display:grid;gap:12px}
.sc-grid.metrics{grid-template-columns:repeat(4,1fr)}
.sc-grid.grades{grid-template-columns:repeat(3,1fr)}

@media (max-width:1024px){
  .sc-grid.metrics{grid-template-columns:repeat(2,1fr)}
  .sc-grid.grades{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .sc-grid.metrics{grid-template-columns:1fr}
  .sc-grid.grades{grid-template-columns:1fr}
}

/* Small helpers */
.muted{color:var(--color-text-muted)}
.small{font-size:12px}
.title-lg{font-size:20px;font-weight:700}
.text-gradient{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-500));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.animate-fade-in-up { animation: fadeInUp 0.5s ease forwards; }
.animate-fade-in-up:nth-child(1) { animation-delay: 0s; }
.animate-fade-in-up:nth-child(2) { animation-delay: 0.1s; }
.animate-fade-in-up:nth-child(3) { animation-delay: 0.2s; }
.animate-fade-in-up:nth-child(4) { animation-delay: 0.3s; }

/* Status indicators */
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.status-dot--green{background:var(--color-accent-green);animation:pulse-dot 2s infinite}
.status-dot--amber{background:var(--color-accent-amber);animation:pulse-dot 2s infinite}
.status-dot--red{background:var(--color-accent-red);animation:pulse-dot 2s infinite}

/* Progress bar */
.sc-progress{height:8px;background:var(--color-primary-bg);border-radius:999px;overflow:hidden}
.sc-progress-bar{height:100%;border-radius:999px;transition:width 1s ease}
.sc-progress-bar--primary{background:linear-gradient(90deg,var(--color-primary),var(--color-primary-500))}
.sc-progress-bar--green{background:linear-gradient(90deg,var(--color-accent-green),#2ECC71)}
.sc-progress-bar--red{background:linear-gradient(90deg,var(--color-accent-red),#E74C3C)}
.sc-progress-bar--amber{background:linear-gradient(90deg,var(--color-accent-amber),#FBBF24)}

/* Stat card icon */
.stat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px}
.stat-icon--primary{background:var(--color-primary-bg);color:var(--color-primary)}
.stat-icon--green{background:var(--color-accent-green-bg);color:var(--color-accent-green)}
.stat-icon--red{background:var(--color-accent-red-bg);color:var(--color-accent-red)}
.stat-icon--amber{background:var(--color-accent-amber-bg);color:var(--color-accent-amber)}
.stat-icon--purple{background:var(--color-accent-purple-bg);color:var(--color-accent-purple)}