/* Base styles và CSS variables */
* { box-sizing: border-box; }

:root {
  --primary: #2563eb;
  --bg: #0f172a;
  --card: #ffffff;
  --muted: #64748b;
  --danger: #dc2626;
  --success: #059669;
  --warning: #d97706;

  /* Layout metrics */
  --topbar-height: 60px;
  --mobile-userbar-height: 0px; /* set in mobile breakpoints */
}

body { 
  margin: 0; 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
  background: #f1f5f9; 
  color: #0f172a;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utility classes */
.hidden { display: none !important; }
.centered { 
  display: grid; 
  place-items: center; 
  min-height: calc(100vh - 56px); 
  text-align: center; 
}

/* Smooth scroll for better UX */
html {
  scroll-behavior: smooth;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }

  :root {
    --topbar-height: 56px;
    --mobile-userbar-height: 64px;
  }
  
  h2 {
    font-size: 22px;
    margin-bottom: 12px;
  }
  
  /* Add page indicator for context */
  section[id$="-view"] h2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 24px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 2px;
    margin-right: 12px;
    vertical-align: middle;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  :root {
    --topbar-height: 52px;
    --mobile-userbar-height: 60px;
  }
  
  h1 {
    font-size: 24px;
  }
  
  h2 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  
  h3 {
    font-size: 18px;
  }
  
  /* Reduce main padding on small screens */
  main {
    padding: 8px !important;
  }
  
  /* Add visual separation for sections */
  section[id$="-view"] {
    background: white;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}

@media (max-width: 430px) {
  :root {
    --mobile-userbar-height: 56px;
  }
}

@media (max-width: 390px) {
  :root {
    --mobile-userbar-height: 54px;
  }
}

/* Better touch targets for mobile */
@media (hover: none) and (pointer: coarse) {
  button, 
  a, 
  input[type="checkbox"],
  input[type="radio"],
  select {
    min-height: 44px;
    min-width: 44px;
  }
}

/* iPhone safe area support */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* Print styles */
@media print {
  .hidden { display: none !important; }
  .no-print { display: none !important; }
}

/* Dark mode support (for future) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111827;
    --card: #1f2937;
    --muted: #9ca3af;
  }
}

.notes-cell {
  background-color: #f8fafc;
  padding: 8px 12px 8px 48px; /* Indent text */
  color: #475569;
  font-style: italic;
  white-space: pre-wrap;
  border-left: 3px solid #cbd5e1;
}