/* Calendar Theme System - Simplified Light/Dark + Accent Colors */

/* Default Theme Variables */
:root {
  /* Base Theme Colors */
  --calendar-bg-primary: #ffffff;
  --calendar-bg-secondary: #f8fafc;
  --calendar-text-primary: #1e293b;
  --calendar-text-secondary: #64748b;
  --calendar-text-muted: #94a3b8;
  --calendar-border-light: #e2e8f0;
  --calendar-border-medium: #cbd5e1;
  --calendar-hover-bg: #f1f5f9;
  --calendar-today-bg: rgba(59, 130, 246, 0.1);
  
  /* Accent Color (customizable) */
  --calendar-accent-primary: #3b82f6;
  --calendar-accent-secondary: #2563eb;
  --calendar-accent-hover: #60a5fa;
  --calendar-accent-text: #ffffff;
}

/* Dark Theme */
.theme-dark {
  /* Base Theme Colors */
  --calendar-bg-primary: #0f172a;
  --calendar-bg-secondary: #1e293b;
  --calendar-text-primary: #f1f5f9;
  --calendar-text-secondary: #cbd5e1;
  --calendar-text-muted: #64748b;
  --calendar-border-light: #334155;
  --calendar-border-medium: #475569;
  --calendar-hover-bg: #334155;
  --calendar-today-bg: rgba(96, 165, 250, 0.2);
  
  /* Accent colors stay the same but text might change */
  --calendar-accent-text: #ffffff;
}

/* Accent Color Overrides */
.accent-blue {
  --calendar-accent-primary: #3b82f6;
  --calendar-accent-secondary: #2563eb;
  --calendar-accent-hover: #60a5fa;
}

.accent-green {
  --calendar-accent-primary: #10b981;
  --calendar-accent-secondary: #059669;
  --calendar-accent-hover: #34d399;
}

.accent-purple {
  --calendar-accent-primary: #8b5cf6;
  --calendar-accent-secondary: #7c3aed;
  --calendar-accent-hover: #a78bfa;
}

.accent-red {
  --calendar-accent-primary: #ef4444;
  --calendar-accent-secondary: #dc2626;
  --calendar-accent-hover: #f87171;
}

.accent-orange {
  --calendar-accent-primary: #f97316;
  --calendar-accent-secondary: #ea580c;
  --calendar-accent-hover: #fb923c;
}

.accent-pink {
  --calendar-accent-primary: #ec4899;
  --calendar-accent-secondary: #db2777;
  --calendar-accent-hover: #f472b6;
}

.accent-teal {
  --calendar-accent-primary: #14b8a6;
  --calendar-accent-secondary: #0d9488;
  --calendar-accent-hover: #2dd4bf;
}

.accent-indigo {
  --calendar-accent-primary: #6366f1;
  --calendar-accent-secondary: #4f46e5;
  --calendar-accent-hover: #818cf8;
}

/* FullCalendar Base Styles */
.fc {
  background-color: var(--calendar-bg-primary);
  color: var(--calendar-text-primary);
}

/* Header/Toolbar Styling - Uses Accent Colors */
.fc .fc-toolbar {
  background: linear-gradient(135deg, var(--calendar-accent-primary) 0%, var(--calendar-accent-secondary) 100%) !important;
  border-bottom: 1px solid var(--calendar-border-medium) !important;
  padding: 1rem !important;
  margin-bottom: 0 !important;
}

.fc .fc-toolbar-title {
  color: var(--calendar-accent-text) !important;
  font-weight: 600 !important;
}

/* Buttons - Uses Accent Colors */
.fc .fc-button,
.fc .fc-button-primary {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: var(--calendar-accent-text) !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.fc .fc-button:hover,
.fc .fc-button-primary:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}

.fc .fc-button:disabled,
.fc .fc-button-primary:disabled {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  opacity: 0.6 !important;
}

.fc .fc-button-active,
.fc .fc-button-primary.fc-button-active {
  background-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Column Headers - Uses Lighter Accent Shade */
.fc .fc-col-header,
.fc tr.fc-scrollgrid-section-header {
  background: var(--calendar-bg-secondary) !important;
  border-color: var(--calendar-border-medium) !important;
  border-bottom: 2px solid var(--calendar-accent-primary) !important;
}

.fc .fc-col-header-cell {
  color: var(--calendar-accent-primary) !important;
  font-weight: 600 !important;
  border: none !important;
  padding: 12px 8px !important;
}

.fc .fc-col-header-cell-cushion {
  color: var(--calendar-accent-primary) !important;
  font-weight: 600 !important;
}

/* Day Grid Styling - Theme Colors Only */
.fc-daygrid-day {
  background-color: var(--calendar-bg-primary);
  border-color: var(--calendar-border-light);
  transition: background-color 0.2s ease;
}

.fc-daygrid-day:hover {
  background-color: var(--calendar-hover-bg);
}

.fc-daygrid-day-number {
  color: var(--calendar-text-primary);
  font-weight: 600;
  padding: 8px;
  font-size: 14px;
}

.fc-day-today {
  background-color: var(--calendar-today-bg) !important;
  border-color: var(--calendar-accent-primary);
}

.fc-day-today .fc-daygrid-day-number {
  background: var(--calendar-accent-primary);
  color: var(--calendar-accent-text);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Event Styling - NO ACCENT COLOR (keeps original event colors) */
.fc-event {
  border-radius: 4px !important;
  font-weight: 500 !important;
  border: none !important;
  transition: all 0.2s ease !important;
  /* Event colors are handled by the calendar logic, not theme */
}

.fc-event:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  filter: brightness(110%) !important;
}

/* More Link - Uses Accent Color */
.fc .fc-more-link {
  color: var(--calendar-accent-primary) !important;
  font-weight: 600 !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  margin: 2px !important;
  transition: all 0.2s ease !important;
}

.fc .fc-more-link:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* Popover Styling */
.fc .fc-popover {
  background-color: var(--calendar-bg-primary) !important;
  border: 1px solid var(--calendar-border-medium) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.fc .fc-popover-header {
  background: var(--calendar-accent-primary) !important;
  background: linear-gradient(135deg, var(--calendar-accent-primary) 0%, var(--calendar-accent-secondary) 100%) !important;
  color: var(--calendar-accent-text) !important;
  font-weight: 600 !important;
  border-radius: 8px 8px 0 0 !important;
}

.fc-popover-body {
  background: var(--calendar-bg-primary) !important;
}

/* List View Styling - Enhanced specificity for v2 */
.fc .fc-list {
  background-color: var(--calendar-bg-primary) !important;
  border-color: var(--calendar-border-light) !important;
}

.fc .fc-list-day {
  background: var(--calendar-accent-secondary) !important;
  background: linear-gradient(135deg, var(--calendar-accent-secondary) 0%, #1e40af 100%) !important;
}

.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
  color: var(--calendar-accent-text) !important;
  font-weight: 600 !important;
}

.fc .fc-list-event {
  border-left: 3px solid var(--calendar-border-medium) !important;
}

.fc .fc-list-event:hover {
  background-color: var(--calendar-hover-bg) !important;
}

.fc .fc-list-event-title {
  color: var(--calendar-text-primary) !important;
}

.fc .fc-list-event-time {
  color: var(--calendar-text-secondary) !important;
}

/* Loading Spinner */
#loading-spinner {
  background-color: var(--calendar-bg-primary);
  border: 1px solid var(--calendar-border-light);
  border-radius: 8px;
}

.spinner {
  border-color: var(--calendar-border-light);
  border-top-color: var(--calendar-accent-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
  .fc-toolbar {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
  }
  
  .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
  }
  
  .fc-button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
}

/* Print Styles */
@media print {
  .fc {
    background-color: white !important;
    color: black !important;
  }
  
  .fc-toolbar,
  .fc-col-header {
    background: #f5f5f5 !important;
    color: black !important;
  }
  
  .fc-event {
    border: 1px solid #ccc !important;
    background-color: #f9f9f9 !important;
    color: black !important;
  }
} 

/* Base UI tokens */
:root{
  --ui-bg: #f8fafc;
  --ui-surface: #ffffff;
  --ui-border: #e5e7eb;
  --ui-muted: #6b7280;
  --ui-strong: #111827;
  --ui-radius: 12px;
  --ui-radius-sm: 8px;
  --ui-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* Cards */
.card{ background:var(--ui-surface); border:1px solid var(--ui-border); border-radius:var(--ui-radius); box-shadow: var(--ui-shadow); }
.card-header{ padding:1rem 1.25rem; border-bottom:1px solid var(--ui-border); font-weight:700; color:var(--ui-strong); display:flex; align-items:center; justify-content:space-between; }
.card-body{ padding:1rem 1.25rem; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; border:none; border-radius:8px; padding:.6rem 1rem; font-weight:600; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.08); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn.primary{ background: var(--calendar-accent-primary); color:white; }
.btn.secondary{ background:#eef2ff; color:#3730a3; }
.btn.danger{ background:#fee2e2; color:#b91c1c; }

/* Sidebar */
.sidebar-clean{ background:#f3f4f6; border-right:1px solid var(--ui-border); }
.sidebar-clean .nav a{ display:flex; gap:.5rem; padding:.6rem .75rem; border-radius:8px; color:#374151; text-decoration:none; }
.sidebar-clean .nav a:hover, .sidebar-clean .nav a.active{ background:#e5e7eb; color:#111827; }

/* Grid */
.grid{ display:grid; gap:1rem; }
.grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

/* Forms */
.input{ width:100%; padding:.6rem .75rem; border:1px solid var(--ui-border); border-radius:8px; background:white; }
.label{ display:block; font-weight:600; margin-bottom:.25rem; color:#374151; }

/* Pills */
.pill{ background:#f3f4f6; border:1px solid var(--ui-border); padding:.25rem .6rem; border-radius:9999px; font-size:.8rem; color:#374151; } 

/* Controls */
.control-bar{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end; }
.control{ width:100%; }
.control .label{ display:block; font-weight:600; margin-bottom:.25rem; color:#374151; }
.control .input, .control select{ height:40px; line-height:40px; padding:0 .75rem; border:1px solid var(--ui-border); border-radius:8px; width:100%; background:white; box-sizing:border-box; appearance:auto; }

/* Normalize buttons/inputs to same height */
.btn{ min-height:40px; }
.search{ height:40px; }
select{ height:40px; }