/* ONE RULE - Modern Design System */
/* CSS Custom Properties, Components, and Responsive Utilities */

:root {
  /* Colors - Modern palette with better nuance */
  --color-primary: #1f2937;
  --color-primary-light: #374151;
  --color-primary-lighter: #d1d5db;
  
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-success-dark: #059669;
  
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  
  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-error-dark: #dc2626;
  
  --color-neutral-white: #ffffff;
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;

  /* Spacing Scale (8px base) */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Styles */
* {
  font-family: var(--font-family);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--color-neutral-900);
  background-color: var(--color-neutral-white);
  line-height: var(--line-height-normal);
  margin: 0;
  padding: 0;
}

/* Typography */
h1 {
  font-size: var(--font-size-5xl);
  font-weight: 900;
  line-height: var(--line-height-tight);
  margin: 0 0 var(--spacing-md) 0;
}

h2 {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  line-height: var(--line-height-tight);
  margin: 0 0 var(--spacing-md) 0;
}

h3 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin: 0 0 var(--spacing-sm) 0;
}

h4 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  margin: 0 0 var(--spacing-sm) 0;
}

h5 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin: 0 0 var(--spacing-xs) 0;
}

h6 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0 0 var(--spacing-xs) 0;
}

p {
  margin: 0 0 var(--spacing-md) 0;
}

small {
  font-size: var(--font-size-sm);
}

/* Card Component */
.card {
  background-color: var(--color-neutral-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-lg);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card--flush {
  padding: 0;
}

.card--elevated {
  box-shadow: var(--shadow-xl);
}

.card--compact {
  padding: var(--spacing-md);
}

.card--bordered {
  border: 1px solid var(--color-neutral-200);
}

/* Button Component */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: 600;
  
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  
  /* Remove default button styles */
  background: none;
  color: inherit;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Button Variants */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-neutral-white);
}

.btn--primary:hover:not(:disabled) {
  background-color: var(--color-primary-light);
  box-shadow: var(--shadow-md);
}

.btn--primary:active:not(:disabled) {
  transform: scale(0.98);
}

.btn--success {
  background-color: var(--color-success);
  color: var(--color-neutral-white);
}

.btn--success:hover:not(:disabled) {
  background-color: var(--color-success-dark);
  box-shadow: var(--shadow-md);
}

.btn--success:active:not(:disabled) {
  transform: scale(0.98);
}

.btn--error {
  background-color: var(--color-error);
  color: var(--color-neutral-white);
}

.btn--error:hover:not(:disabled) {
  background-color: var(--color-error-dark);
  box-shadow: var(--shadow-md);
}

.btn--error:active:not(:disabled) {
  transform: scale(0.98);
}

.btn--secondary {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-900);
  border: 1px solid var(--color-neutral-200);
}

.btn--secondary:hover:not(:disabled) {
  background-color: var(--color-neutral-200);
  border-color: var(--color-neutral-300);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn--ghost:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: var(--color-neutral-white);
}

/* Button Sizes */
.btn--sm {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
}

.btn--lg {
  padding: var(--spacing-lg) var(--spacing-xl);
  font-size: var(--font-size-lg);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* Badge Component */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-900);
}

.badge--success {
  background-color: var(--color-success-light);
  color: var(--color-success-dark);
}

.badge--error {
  background-color: var(--color-error-light);
  color: var(--color-error-dark);
}

.badge--warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.badge--primary {
  background-color: var(--color-primary);
  color: var(--color-neutral-white);
}

/* Form Components */
.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--color-neutral-900);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-400);
  cursor: not-allowed;
}

.form-help {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-500);
  margin-top: var(--spacing-xs);
}

.form-error {
  font-size: var(--font-size-sm);
  color: var(--color-error);
  margin-top: var(--spacing-xs);
}

/* Container & Layout */
.container {
  width: 100%;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  margin-left: auto;
  margin-right: auto;
}

.container--sm {
  max-width: 420px; /* Make narrower */
}

.container--md {
  max-width: 768px;
}

.container--lg {
  max-width: 1024px;
}

/* Calendar & Tooltip Enhancements */
.calendar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.calendar-controls .btn {
  padding: var(--spacing-sm) var(--spacing-md);
}

.calendar-grid-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  background-color: var(--color-neutral-200);
  padding: 4px;
  border-radius: var(--radius-md);
}

.calendar-day.other-month {
  opacity: 0.45;
}

.calendar-day.future {
  background-color: var(--color-neutral-50);
  color: var(--color-neutral-400);
}

.calendar-tooltip {
  position: absolute;
  z-index: 9999;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-900);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
  pointer-events: none;
  transform: translate(-50%, -120%);
  white-space: nowrap;
}

.calendar-tooltip.hidden {
  display: none;
}

/* Modal (global) */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: var(--spacing-md);
}

.modal.active {
  display: flex;
}

.modal-content {
  background: var(--color-neutral-white);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-xl);
}

.modal-date {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.modal-rule {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-500);
}

/* Responsive: 4 columns on small screens */
@media (max-width: 480px) {
  .calendar-grid-month {
    grid-template-columns: repeat(4, 1fr);
  }
}

.container--xl {
  max-width: 1280px;
}

/* Responsive Grid */
.grid {
  display: grid;
  gap: var(--spacing-lg);
}

.grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4col {
  grid-template-columns: repeat(4, 1fr);
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

.flex--center {
  align-items: center;
  justify-content: center;
}

.flex--between {
  justify-content: space-between;
}

.flex--col {
  flex-direction: column;
}

.flex--gap-sm {
  gap: var(--spacing-sm);
}

.flex--gap-md {
  gap: var(--spacing-md);
}

.flex--gap-lg {
  gap: var(--spacing-lg);
}

/* Spacing Utilities */
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }
.p-3xl { padding: var(--spacing-3xl); }

.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }

.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }

.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }

.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-muted { color: var(--color-neutral-500); }

/* Mobile-First Responsive Breakpoints */
@media (min-width: 640px) {
  .container {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  .grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }

  .sm\:grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .md\:grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }

  .md\:grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }

  .md\:grid--4col {
    grid-template-columns: repeat(4, 1fr);
  }

  .md\:flex--col {
    flex-direction: column;
  }

  .md\:flex--row {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .lg\:grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }

  .lg\:grid--4col {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Utility Helpers */
.hidden {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}



/* Calendar Grid Styles */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    background-color: var(--color-neutral-100);
    padding: 8px;
    border-radius: var(--radius-lg);
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    background-color: var(--color-neutral-white);
    color: var(--color-neutral-600);
    cursor: pointer;
    transition: all var(--transition-base);
}

.calendar-day:hover {
    transform: scale(1.05);
}

.calendar-day.today {
    border: 2px solid var(--color-primary);
}

.calendar-day.complete {
    background-color: var(--color-success);
    color: var(--color-neutral-white);
}

.calendar-day.failed {
    background-color: var(--color-error);
    color: var(--color-neutral-white);
}

.calendar-day.missed {
    background-color: var(--color-neutral-300);
    color: var(--color-neutral-500);
}

.calendar-day.empty {
    background-color: transparent;
    cursor: default;
}

/* Calendar Headers */
.calendar-day-header {
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-neutral-500);
    padding: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}



        /* Bottom Navigation */
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 0;
            text-decoration: none;
            color: #6B7280;
            font-size: 0.75rem;
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .nav-item:hover {
            color: #0069FF;
        }
        
        .nav-item.active {
            color: #0069FF;
        }


.container--sm {
  max-width: 420px; /* Make narrower */
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px; /* Reduce from 8px */
  max-width: 100%;
}

.calendar-day {
  width: 38px;
  height: 38px;
  border-radius: 50%; /* Make circular */
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Design tokens */
:root{
  --color-primary:#0069FF;
  --color-success:#10B981;
  --color-error:#EF4444;
  --neutral-900:#111827;
  --neutral-600:#475569;
  --neutral-500:#6B7280;
  --neutral-300:#D1D5DB;
  --neutral-200:#E5E7EB;
  --neutral-100:#FFFFFF;
  --neutral-50:#F8FAFC;
  --radius-lg:1rem;
  --radius-md:0.75rem;
  --shadow-md:0 1px 3px rgba(0,0,0,0.08);
  --shadow-xl:0 10px 25px rgba(2,6,23,0.08);
  --spacing-unit:8px;
  --transition-base:200ms;
}

/* Containers */
.container{width:100%;max-width:1200px;margin:0 auto;padding-left:1rem;padding-right:1rem;box-sizing:border-box}
.container--md{max-width:960px}
.container--sm{max-width:420px;margin-left:auto;margin-right:auto} /* mobile-like centered */

/* Body */
body{background-color:var(--neutral-50);min-height:100vh;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}

/* Cards */
.card{background:var(--neutral-100);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--neutral-200);padding:1rem;box-sizing:border-box;width:100%}
.card--elevated{box-shadow:var(--shadow-xl)}
.card--compact{padding:0.75rem;background:#fbfbfd}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:0.75rem;padding:0.75rem 1rem;font-weight:600;border:0;cursor:pointer;transition:all var(--transition-base)}
.btn--lg{padding:0.9rem 1rem;font-size:1rem;border-radius:0.875rem}
.btn--block{display:block;width:100%}
.btn--primary{background:var(--color-primary);color:white}
.btn--success{background:var(--color-success);color:white}
.btn--error{background:var(--color-error);color:white}
.btn[disabled]{opacity:0.5;cursor:not-allowed;transform:none}

/* Badges */
.badge{display:inline-flex;align-items:center;padding:0.25rem 0.6rem;border-radius:999px;font-size:0.75rem}
.badge--muted{background:#F3F4F6;color:var(--neutral-600)}

/* Grid helpers */
.grid--2col{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem}
@media (min-width:768px){.md\:grid--4col{grid-template-columns:repeat(4,1fr)}}

/* Calendar: mobile-first 4 cols, desktop 7 cols */
.calendar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:1rem;justify-content:center}
@media (min-width:768px){.calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))}}

/* Calendar cells (circular) */
.calendar-grid .calendar-day{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.875rem;font-weight:600;box-sizing:border-box}
.calendar-grid .calendar-day.today{border:2px solid var(--color-primary);background:var(--color-primary-light, #E6F0FF);color:var(--neutral-900);font-weight:700}
.calendar-grid .calendar-day.success{background:var(--color-success);color:white}
.calendar-grid .calendar-day.failure{background:var(--color-error);color:white}
.calendar-grid .calendar-day.missed{background:#F3F4F6;color:var(--neutral-500)}
.calendar-grid .calendar-day.future{opacity:0.25;color:var(--neutral-300)}

/* Utilities */
.text-muted{color:var(--neutral-500);font-weight:500}
.text-primary{color:var(--color-primary)}
.font-black{font-weight:900}