/* === RESET & ROOT === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* Import design tokens from tokens.css – color names aligned */
  --clr-primary: var(--color-green);
  --clr-primary-dark: var(--color-forest);
  --clr-primary-light: var(--color-green-muted);
  --clr-accent-light: #F5E8E3;
  --clr-background: #FAF7F1;
  --clr-foreground: #0F172A;
  --clr-card: #ffffff;
  --clr-muted-bg: #F2EDE2;
  --clr-border: #E2E8F0;
  --clr-input-bg: #F8FAFC;
  --clr-muted-fg: #475569;
  --clr-brand: var(--color-green);
  --clr-destructive: var(--color-error);
  --clr-error: var(--color-error);
  --clr-success: var(--color-success);
  --gradient-hero: linear-gradient(135deg, var(--color-cream) 0%, var(--color-muted-bg) 100%);
  --gradient-primary: linear-gradient(135deg, var(--color-green) 0%, var(--color-forest) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-brick) 0%, #A23A24 100%);
  /* Dark forest green sidebar — matches homepage (#1a3d2b) */
  --clr-sidebar: var(--color-forest);
  --clr-sidebar-hover: #2d5a42;
  --clr-sidebar-active: #3d6d50;
  --clr-sidebar-text: #d0e0d5;
  --clr-sidebar-muted: #8ca896;
  --clr-sidebar-border: #2d5242;
  --clr-sidebar-logo: #a8d5ba;
  --clr-surface: var(--clr-card, #ffffff);
  --clr-brand-light: #4ade80;
}
html { font-size: 15px; scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--clr-background); color: var(--clr-foreground); line-height: 1.65; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* === TYPOGRAPHY === */
.display-heading { font-family: var(--font-display); letter-spacing: -0.03em; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.1; color: var(--clr-foreground); }
h1 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-black); }
h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); }
h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.text-muted { color: var(--clr-muted-fg); }
.text-sm { font-size: 0.82rem; }

/* === LAYOUT === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); }
.app-layout { display: flex; min-height: 100vh; }
.main-content { flex: 1; width: calc(100% - 260px); margin-left: 260px; padding: var(--space-8); min-height: 100vh; background: radial-gradient(ellipse 70% 45% at 100% 0%, hsl(152,52%,97%) 0%, transparent 55%) var(--clr-background); }
.page-header { margin-bottom: var(--space-8); }

/* === NAVIGATION (frosted glass) === */
.nav-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(245,251,247,0.85); backdrop-filter: blur(20px); border-bottom: 1px solid var(--clr-border); }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); list-style: none; }
.nav-links a { text-decoration: none; color: var(--clr-muted-fg); font-weight: 500; font-size: 0.9rem; transition: color var(--duration-fast); }
.nav-links a:hover { color: var(--clr-primary); }
.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.logo { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.2rem; text-decoration: none; color: var(--clr-foreground); }
.nav-logo-text { font-family:var(--font-display); font-weight:700; font-size:22px;  color:var(--clr-primary); text-decoration:none; }
.logo-icon { width: 38px; height: 38px; border-radius: 0.65rem; background: var(--clr-primary); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: var(--space-2); }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--clr-foreground); margin: 5px 0; transition: all var(--duration-base); }
.mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; }
.mobile-nav-overlay.open { display: block; }
.mobile-nav-panel { position: fixed; top: 0; right: 0; width: 280px; height: 100%; background: var(--clr-card); padding: var(--space-6); z-index: 201; transform: translateX(100%); transition: transform 0.3s ease; }
.mobile-nav-panel.open { transform: translateX(0); }
.mobile-nav-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; margin-bottom: var(--space-6); }
.mobile-nav-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.mobile-nav-links a { display: block; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); text-decoration: none; color: var(--clr-foreground); font-weight: 500; transition: background var(--duration-fast); }
.mobile-nav-links a:hover { background: var(--clr-primary-light); color: var(--clr-primary); }

/* === SIDEBAR === */
.sidebar { width: 260px; position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; background: var(--clr-sidebar, #1a3d2b) !important; border-right: none; display: flex; flex-direction: column; }
.sidebar-logo { display: flex; align-items: center; gap: 0.65rem; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--clr-sidebar-border); font-weight: 800; font-size: 1.25rem; text-decoration: none; color: var(--clr-sidebar-logo); font-family: var(--font-display); letter-spacing: -0.01em; }
.sidebar-nav { flex: 1; padding: var(--space-3); display: flex; flex-direction: column; gap: 0.15rem; overflow-y: auto; }
.sidebar-nav a { display: flex; align-items: center; gap: var(--space-3); padding: 0.65rem 0.85rem; border-radius: 0.65rem; font-size: 0.88rem; font-weight: 500; color: var(--clr-sidebar-muted); text-decoration: none; transition: all var(--duration-fast); }
.sidebar-nav a:hover { background: var(--clr-sidebar-hover); color: var(--clr-sidebar-text); }
.sidebar-nav a.active { background: var(--clr-sidebar-active); color: white; font-weight: 600; }
.sidebar-nav a .nav-icon { display: flex; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; }
.sidebar-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--clr-sidebar-border); }
.sidebar-footer * { color: var(--clr-sidebar-muted) !important; }
.sidebar-footer .sidebar-avatar { color: white !important; }
.sidebar-user { display: flex; align-items: center; gap: var(--space-3); }
.sidebar-user > div > div:first-child { color: var(--clr-sidebar-text) !important; }
.sidebar-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--clr-sidebar-active); border: 1.5px solid var(--clr-sidebar-hover); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.85rem; }

/* === BUTTONS === */
.btn { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; border-radius: 8px; cursor: pointer; border: none; transition: transform var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) ease; white-space: nowrap; padding: 10px 16px; font-size: 0.9rem; font-family: var(--font-body); text-decoration: none; outline-offset: 2px; }
.btn:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; box-shadow: none; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn-primary { background: var(--color-green); color: white; box-shadow: none; font-weight: 700; }
.btn-primary:hover:not(:disabled) { background-color: var(--color-green-dark); box-shadow: 0 4px 12px rgba(var(--color-green-rgb), 0.25); }
.btn-primary:active { opacity: 0.95; }
.btn-accent { background: var(--gradient-accent); color: white; box-shadow: 0 4px 14px hsl(32,88%,54%,0.35); }
.btn-accent:hover { transform: translateY(-2px); }
.btn-accent:active { opacity: 0.95; }
.btn-outline { background: var(--clr-card); border: 1.5px solid var(--clr-border); color: var(--clr-foreground); font-weight: var(--font-weight-medium); }
.btn-outline:hover { background: var(--clr-primary-light); border-color: var(--clr-primary); color: var(--clr-primary); }
.btn-outline:active { opacity: 0.9; }
.btn-ghost { background: transparent; color: var(--clr-muted-fg); border: none; }
.btn-ghost:hover { color: var(--clr-foreground); }
.btn-ghost:active { opacity: 0.8; }
.btn-danger { background: var(--clr-destructive); color: white; }
.btn-danger:hover { opacity: 0.9; }
.btn-danger:active { opacity: 0.8; }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.82rem; }
.btn-lg { padding: var(--space-3) var(--space-8); font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; }
.btn:disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
.btn-loading { position: relative; color: transparent !important; }
.btn-loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid white; border-top-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; }

/* === FORMS === */
.form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-5); }
.form-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--clr-muted-fg); display: block; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 10px 14px; border: 1px solid #CBD5E1; border-radius: 8px; background: var(--clr-input-bg); color: var(--clr-foreground); font-size: 0.9rem; font-family: var(--font-body); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; border-color: var(--color-green); box-shadow: none; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-green); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15); }
.form-textarea { resize: vertical; min-height: 100px; }
.form-error { font-size: 0.8rem; color: var(--clr-destructive); }
.form-hint { font-size: 0.8rem; color: var(--clr-muted-fg); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* === CARDS === */
.card { background: var(--clr-card); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 16px 20px !important; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s, transform 0.2s; }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-2); color: var(--clr-foreground); }
.card-sm { padding: var(--space-4); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.card-title { font-size: 1rem; font-weight: 700; }
.card-subtitle { font-size: 0.82rem; color: var(--clr-muted-fg); margin-top: 0.2rem; }
.card-clickable { transition: border-color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; }
.card-clickable:hover { border-color: var(--color-green); box-shadow: 0 4px 12px rgba(var(--color-foreground-rgb), 0.05); }

/* === SKELETONS === */
.skeleton { background: linear-gradient(90deg, var(--color-muted-bg) 25%, var(--color-border) 50%, var(--color-muted-bg) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* === BADGES / CHIPS === */
.badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem var(--space-3); border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; }
.badge-primary { background: var(--clr-primary-light); color: var(--clr-primary); border: 1px solid hsl(152,52%,85%); }
.badge-accent { background: var(--clr-accent-light); color: var(--color-brick); }
.badge-success { background: hsl(152,52%,90%); color: var(--clr-success); }
.badge-muted { background: var(--clr-muted-bg); color: var(--clr-muted-fg); }
.chip { display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; border: 1.5px solid var(--clr-border); border-radius: var(--radius-full); font-size: 0.82rem; cursor: pointer; user-select: none; transition: all var(--duration-fast); background: white; color: var(--clr-foreground); font-family: var(--font-body); font-weight: 500; }
.chip:hover { border-color: var(--clr-primary); color: var(--clr-primary); }
.chip.active { background: var(--clr-primary); color: white; border-color: var(--clr-primary); }
.chips-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* === PROGRESS === */
.progress-bar-wrap { height: 0.5rem; background: var(--clr-border); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--clr-primary); border-radius: var(--radius-full); transition: width 0.4s ease; }
.progress-bar-fill.accent { background: var(--color-green); }
.progress-bar-fill.info { background: hsl(200,100%,50%); }

/* === DIVIDER === */
.divider { height: 1px; background: var(--clr-border); margin: var(--space-6) 0; }