/* EazyCalendar — streamlined */
:root{
  --bg:#f7f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --accent:#111827;       /* Default accent now black */
  --border:#e5e7eb;
  --radius:16px;
  --base-font:14px;

  /* subtle brand for buttons/nav */
  --brand-50:#ecfdf5;
  --brand-100:#d1fae5;
  --brand-200:#a7f3d0;
  --brand-500:#14b8a6;
  --brand-600:#0d9488;
  --brand-700:#0f766e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

.app-header, .app-footer{
  background:var(--card);
  border-bottom:1px solid var(--border);
  padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.app-footer{ border-top:1px solid var(--border); border-bottom:none; }

.brand{ display:flex; align-items:center; gap:8px; font-weight:700; }
.brand span{ font-size:18px; }

/* Print button fixed style */
.btn{
  padding:8px 14px; border:1px solid var(--border);
  background:#111827; color:#fff;
  border-radius:10px; cursor:pointer; font-weight:600;
}
.btn.primary{ background:#14b8a6; color:#fff; border-color:#14b8a6; }
.btn:active{ transform:translateY(1px); }

.layout{
  display:grid; grid-template-columns:320px 1fr; gap:16px;
  padding:16px; max-width:1200px; margin:0 auto;
}

.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  position:sticky; top:16px; height:fit-content;
}
.panel h2{ margin:0 0 8px 0; font-size:18px; }
.field{ display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.field > span{ font-size:12px; color:var(--muted); }
.field input[type="number"], .field select, .field input[type="color"]{
  border:1px solid var(--border); border-radius:10px; padding:8px; font:inherit; background:white;
}
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

.checkbox{ display:flex; align-items:center; gap:8px; margin:8px 0; }
.section{ margin:12px 0; }
.section > summary{ cursor:pointer; font-weight:600; }
.section-title{ font-weight:600; margin-bottom:6px; }
.hint{ color:var(--muted); font-size:12px; }

/* Holidays ON/OFF switch */
.switch{ display:flex; align-items:center; gap:10px; }
.switch > input[type="checkbox"]{
  appearance:none; width:42px; height:24px; border-radius:999px;
  background:#e5e7eb; position:relative; cursor:pointer; transition:.2s;
  border:1px solid #d1d5db;
}
.switch > input[type="checkbox"]::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  background:#fff; border-radius:999px; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.switch > input[type="checkbox"]:checked{ background:var(--accent); border-color:var(--accent); }
.switch > input[type="checkbox"]:checked::after{ transform:translateX(18px); }

/* Preview */
.preview{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px;
  display:flex; flex-direction:column; gap:12px;
  align-items:stretch;
}
.preview > *{ width:100%; }

/* Calendar */
.calendar{
  width:100%; max-width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  font-size:var(--base-font);
}
.calendar .cal-header{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;
}
.calendar .cal-title{ font-weight:700; font-size:20px; color:var(--accent); }
.calendar .cal-sub{ color:var(--muted); font-size:12px; }

/* Month grid */
.month-grid{ width:100%; border-collapse:collapse; table-layout:fixed; }
.month-grid th, .month-grid td{
  border:1px solid var(--border);
  padding:8px; vertical-align:top; width:14.285%;
}
.month-grid th{
  background:#fafafa; font-weight:600; font-size:12px;
  color:var(--accent); border-bottom:2px solid var(--accent);
}
.day-num{ font-weight:700; font-size:12px; color:var(--text); }
.holiday{ font-size:11px; color:var(--accent); margin-top:4px; word-wrap:break-word; }

/* Week view */
.week-grid{ width:100%; border-collapse:collapse; table-layout:fixed; }
.week-grid th, .week-grid td{
  border:1px solid var(--border);
  padding:10px; vertical-align:top;
}
.week-grid th{
  background:#fafafa; font-weight:600; font-size:12px;
  color:var(--accent); border-bottom:2px solid var(--accent);
}
.week-grid .day-num{ color:var(--text); }

/* Year view */
.year-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.year-month{
  border:1px solid var(--border); border-radius:10px; padding:10px;
}
.year-month h3{ margin:0 0 6px 0; font-size:14px; color:var(--accent); }
.year-month table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.year-month th, .year-month td{
  border:1px solid var(--border); padding:4px; text-align:left; font-size:11px;
}

/* Themes */
.calendar.classic{}
.calendar.modern .month-grid th{ background:transparent; }
.calendar.modern .month-grid td{ border-color:#efefef; }
.calendar.large{ font-size:calc(var(--base-font) * 1.15); }

/* Square cells (applies to month + week via JS) */
.calendar.square .month-grid td,
.calendar.square .week-grid td{ height:auto; }

/* Notes — dashed border, no glow */
.notes-area{
  border:1px dashed var(--border);
  border-radius:12px; padding:12px; margin-top:8px;
}
#notesUser{ min-height:0; outline:none; }
#notesUser:empty::before{ content:"Click to add notes…"; color:#9ca3af; }
#notesAuto{ margin-top:6px; font-size:12px; color:#374151; }
#notesAuto h4{ margin:8px 0 4px 0; font-size:12px; color:var(--accent); }

/* ========================= */
/* THEME: Classic Grid       */
/* ========================= */
.calendar.classic .month-grid th,
.calendar.classic .week-grid th,
.calendar.classic .year-month th{
  background:#f8fafc;                /* light header */
  color:var(--accent);
  border-bottom:2px solid var(--accent);
}
.calendar.classic .month-grid td,
.calendar.classic .week-grid td,
.calendar.classic .year-month td{
  border:1px solid #dbe3ee;          /* stronger cell borders */
}

/* Weekend shading (respects week start) */
.calendar[data-weekstart="sun"].classic .month-grid tbody td:nth-child(1),
.calendar[data-weekstart="sun"].classic .month-grid tbody td:nth-child(7),
.calendar[data-weekstart="sun"].classic .week-grid  tbody td:nth-child(1),
.calendar[data-weekstart="sun"].classic .week-grid  tbody td:nth-child(7),
.calendar[data-weekstart="sun"].classic .year-month tbody td:nth-child(1),
.calendar[data-weekstart="sun"].classic .year-month tbody td:nth-child(7){
  background:#f9fbff;
}
.calendar[data-weekstart="mon"].classic .month-grid tbody td:nth-child(6),
.calendar[data-weekstart="mon"].classic .month-grid tbody td:nth-child(7),
.calendar[data-weekstart="mon"].classic .week-grid  tbody td:nth-child(6),
.calendar[data-weekstart="mon"].classic .week-grid  tbody td:nth-child(7),
.calendar[data-weekstart="mon"].classic .year-month tbody td:nth-child(6),
.calendar[data-weekstart="mon"].classic .year-month tbody td:nth-child(7){
  background:#f9fbff;
}

/* ========================= */
/* THEME: Modern Minimal     */
/* ========================= */
.calendar.modern .cal-title{ letter-spacing:.2px; }

/* Remove table borders, keep subtle separators */
.calendar.modern .month-grid,
.calendar.modern .week-grid,
.calendar.modern .year-month table{
  border-collapse:separate;
  border-spacing:0;
}
.calendar.modern .month-grid th,
.calendar.modern .week-grid th,
.calendar.modern .year-month th{
  background:#f6f7f9;
  color:#374151;
  border-bottom:1px solid #eceff4;
}
.calendar.modern .month-grid td,
.calendar.modern .week-grid td,
.calendar.modern .year-month td{
  border:none;
  border-bottom:1px solid #f1f3f7;   /* hairline rows */
  padding-top:10px; padding-bottom:10px;
}
.calendar.modern .day-num{ font-weight:600; }
.calendar.modern .holiday{ color:#6b7280; }  /* less shouty */

/* ========================= */
/* THEME: Large Print        */
/* ========================= */
.calendar.large{ font-size:calc(var(--base-font) * 1.25); }
.calendar.large .cal-title{ font-size:26px; }
.calendar.large .day-num{ font-size:14px; font-weight:800; }
.calendar.large .month-grid th,
.calendar.large .week-grid th,
.calendar.large .year-month th{
  background:#f8fafc;
  color:#111827;
  border-bottom:2px solid #cfd8e3;
}
.calendar.large .month-grid td,
.calendar.large .week-grid td,
.calendar.large .year-month td{
  border:1px solid #e3e8ef;
  padding:12px;                       /* more writing space */
}

/* Keep existing square-cells rule working with themes */
.calendar.square .month-grid td,
.calendar.square .week-grid td{ height:auto; }

/* -------- NEW: Week numbers styles -------- */
th.wkcol, td.wkcol{
  width:40px; text-align:center; color:var(--muted); font-size:11px; background:#fafafa;
}
.month-grid.has-wk th, .month-grid.has-wk td{ width:auto; } /* let 7 day cols flex when wk col present */

/* -------- NEW: Notes layout variants -------- */
.preview.notes-right{ flex-direction: row; align-items: flex-start; }
.preview.notes-right .calendar{ flex: 0 0 68%; }
.preview.notes-right .notes-area{ flex: 0 0 30%; margin-top:0; margin-left:12px; }
.preview.notes-none .notes-area{ display:none; }

/* Print */
@media print{
  body{ background:white; }
  .app-header, .app-footer, .panel{ display:none !important; }
  .layout{ display:block; padding:0; margin:0; }
  .preview{ border:none; padding:0; }
  .calendar, .notes-area{ width:100% !important; max-width:100% !important; border-radius:0; }
  .cal-title{ font-size:24px; }
  .month-grid th, .month-grid td{ padding:10px; }
  .notes-area.print-hide{ display:none !important; }
}

/* Keep the top bar visible while scrolling */
.app-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Bigger nav buttons + spacing */
.cal-nav{
  display:flex;
  gap:12px;
  align-items:center;
}
.nav-btn{
  min-width:42px;
  height:36px;
  padding:0 10px;
  font-size:20px;
  line-height:1;
  border:1px solid var(--brand-200);
  border-radius:10px;
  background:#fff;
  color:var(--brand-700);
  cursor:pointer;
  font-weight:700;
}
.nav-btn:hover{ background:var(--brand-50); }
.nav-btn:active{ transform:translateY(1px); }
.nav-btn:focus-visible{ outline:2px solid var(--brand-600); outline-offset:2px; }

/* Touch screens: a bit larger */
@media (pointer: coarse){
  .nav-btn{ min-width:46px; height:44px; font-size:22px; }
}

/* Hide nav buttons when printing */
@media print{
  .cal-nav{ display:none !important; }
}

/* Hide the "Style" summary row (triangle + label) but keep fields visible */
details.section > summary {
  display: none;
}

/* === Brand palette: orangish === */
:root{
  --brand-50:  #fff7ed;  /* very light */
  --brand-100: #ffedd5;
  --brand-200: #fed7aa;
  --brand-500: #f97316;  /* primary */
  --brand-600: #ea580c;
  --brand-700: #c2410c;
}

/* Print button uses brand color now (was hardcoded) */
.btn.primary{
  background: var(--brand-600);
  border-color: var(--brand-600);
  color:#fff;
}
.btn.primary:hover{ filter: brightness(1.03); }

/* Nav buttons pick up orange accents */
.nav-btn{
  border-color: var(--brand-200);
  color: var(--brand-700);
}
.nav-btn:hover{ background: var(--brand-50); }
.nav-btn:focus-visible{ outline:2px solid var(--brand-600); }

/* Left pane: subtle orange tint */
.panel{
  background: linear-gradient(180deg, #ffffff 0%, #fff7ed 70%);
  border-color: var(--brand-200);
  box-shadow: 0 8px 24px rgba(194,65,12,.06);
}

/* Inputs/focus ring in orange */
.field input[type="number"],
.field select,
.field input[type="color"]{
  border-color:#fde0bd;
}
.field input[type="number"]:focus,
.field select:focus,
.field input[type="color"]:focus{
  outline:none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px rgba(249,115,22,.22);
}

/* Switch checked thumb color */
.switch > input[type="checkbox"]:checked{
  background: var(--brand-600);
  border-color: var(--brand-600);
}

/* Stronger top bar in orange gradient */
.app-header{
  background: linear-gradient(90deg, var(--brand-100) 0%, var(--brand-50) 100%);
  border-bottom: 1px solid var(--brand-200);
  box-shadow: 0 1px 0 rgba(249,115,22,.18);
}
/* Make the entire logo area reliably clickable */
.brand{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  position:relative;   /* ensures z-index works */
  z-index:2;
}

/* Let clicks pass through child elements to the <a> */
.brand *{ pointer-events:none; }

/* Ensure nothing invisible sits above the header */
.app-header{ position:relative; z-index:1; }

@page{ margin:12mm; }
@media print{ body[data-e2e="1"]{ margin:0; } }