/* RESET */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.4}

/* THEME */
:root{--bg:#fff;--fg:#0f172a;--muted:#64748b;--line:#e2e8f0;--surface:#f8fafc;--brand:#2563eb;--pink:#db2777;--green:#059669}
@media(prefers-color-scheme:dark){:root{--bg:#0b1020;--fg:#e2e8f0;--muted:#94a3b8;--line:#1f2937;--surface:#111827}}
body{background:var(--bg);color:var(--fg)}

/* APP LAYOUT */
.cal-app{display:grid;grid-template-rows:auto 1fr auto;min-height:100%}

/* HEADER */
.cal-header{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--bg)}
.app-brand{font-weight:700}
.month-title{margin:0 8px;font-weight:600;font-size:1.25rem}
.nav-btn,.today-btn,.go-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--fg)}
.go-btn.full{width:100%}

/* MAIN */
.cal-main{display:grid;grid-template-columns:300px 1fr;gap:20px;max-width:1200px;margin:16px auto;padding:0 16px}
@media(max-width:980px){.cal-main{grid-template-columns:1fr}}

/* SIDEBAR */
.cal-sidebar{display:flex;flex-direction:column;gap:20px}
.mini,.upcoming,.form-card{border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--surface)}
.mini-header{font-weight:600;margin-bottom:8px}
.mini-grid{display:grid;gap:6px}
.mini-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.mini-cell{display:flex;align-items:center;justify-content:center;height:34px;border-radius:10px;text-decoration:none;color:var(--fg)}
.mini-cell.today{outline:2px solid var(--brand)}
.mini-cell.muted{color:var(--muted);opacity:.7}

.upcoming h2,.form-card h2{margin:0 0 8px;font-size:1rem}
.upcoming ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:8px}
.dot-blue{background:var(--brand)}.dot-pink{background:var(--pink)}.dot-green{background:var(--green)}

.event-form{display:grid;gap:10px}
.event-form label{display:grid;gap:6px;font-size:.95rem;color:var(--muted)}
.event-form input,.event-form select{padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}

/* ALERTS */
.alert{max-width:1200px;margin:12px auto;padding:10px 12px;border-radius:12px;border:1px solid var(--line)}
.alert.success{background:rgba(16,185,129,.12)}
.alert.error{background:rgba(239,68,68,.12)}

/* CALENDAR GRID */
.cal-grid{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.grid-head{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line);background:rgba(0,0,0,.02)}
.col-head{text-align:center;padding:12px;font-weight:600;color:var(--muted)}
.grid-body{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:clamp(120px,16vh,180px)}

/* CELLS */
.cell{position:relative;padding:10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.cell:nth-child(7n){border-right:none}
.cell-head{position:absolute;top:10px;right:10px;font-size:.9rem;color:var(--muted)}
.cell.other{opacity:.7}
.cell.today{outline:2px solid rgba(37,99,235,.3);background:rgba(37,99,235,.06)}
.cell.weekend{background:rgba(148,163,184,.06)}

/* EVENTS IN CELL */
.events{margin-top:28px;display:flex;flex-direction:column;gap:6px;min-height:0}
.event{display:block;padding:6px 8px;border-radius:10px;text-decoration:none;font-size:.88rem;border:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-blue{background:rgba(37,99,235,.14)}
.chip-pink{background:rgba(219,39,119,.16)}
.chip-green{background:rgba(5,150,105,.16)}

/* MORE (+N) */
.more{margin-top:2px}
.more > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px dashed var(--line);border-radius:8px;font-size:.82rem;color:var(--muted);background:rgba(0,0,0,.03)}
.more > summary::-webkit-details-marker{display:none}
.more[open] > summary{background:rgba(0,0,0,.06)}
.more .more-list{margin-top:6px;display:flex;flex-direction:column;gap:6px;max-height:180px;overflow:auto;padding-right:4px}

/* FOOTER */
.cal-footer{text-align:center;padding:16px 20px;border-top:1px solid var(--line);color:var(--muted)}