/* ════════════════════════════════════════════════════════════════════════════
   calendar.css  —  Calendar page specific styles
   Cal-picker CSS is in shared.css — not duplicated here.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── iCal bar ── */
.ical-bar   { display:flex; align-items:center; gap:0.5rem; padding:0.52rem 0.85rem; background:rgba(255,255,255,0.025); border:1px solid var(--border); border-radius:var(--radius-xs); margin-bottom:0.85rem; }
.ical-label { font-size:0.68rem; color:var(--text-dim); white-space:nowrap; flex-shrink:0; }
.ical-url   { flex:1; font-size:0.67rem; font-family:'DM Mono',monospace; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ical-copy  { font-size:0.68rem; font-weight:600; color:var(--accent2); cursor:pointer; padding:0.18rem 0.5rem; border-radius:4px; border:1px solid rgba(124,92,252,0.3); background:rgba(124,92,252,0.1); white-space:nowrap; flex-shrink:0; font-family:inherit; }
.ical-copy:hover { background:rgba(124,92,252,0.18); }

/* ── Toolbar ── */
.cal-toolbar      { display:flex; align-items:center; gap:0.45rem; margin-bottom:0.75rem; flex-wrap:wrap; }
.cal-period-label { font-size:1rem; font-weight:800; color:var(--text); flex:1; letter-spacing:-0.3px; min-width:0; }

/* ── View toggle ── */
.view-toggle        { display:flex; border-radius:var(--radius-xs); overflow:hidden; border:1px solid var(--border); flex-shrink:0; }
.vt-btn             { padding:0.32rem 0.75rem; font-size:0.73rem; font-weight:600; cursor:pointer; color:var(--text-dim); background:var(--card-bg); border:none; font-family:inherit; transition:all 0.15s; border-right:1px solid var(--border); }
.vt-btn:last-child  { border-right:none; }
.vt-btn.active      { background:rgba(124,92,252,0.18); color:var(--accent2); }
.vt-btn:hover:not(.active) { background:rgba(255,255,255,0.06); color:var(--text); }

/* ── Sidebar toggle ── */
.sidebar-toggle-btn { display:flex; align-items:center; gap:0.3rem; padding:0.32rem 0.65rem; border-radius:var(--radius-xs); border:1px solid var(--border); background:var(--card-bg); color:var(--text-dim); font-family:inherit; font-size:0.73rem; font-weight:600; cursor:pointer; transition:all 0.15s; flex-shrink:0; }
.sidebar-toggle-btn:hover  { border-color:var(--border-hi); color:var(--text); }
.sidebar-toggle-btn.active { background:rgba(124,92,252,0.14); border-color:rgba(124,92,252,0.4); color:var(--accent2); }
.stb-arrow { font-size:0.65rem; transition:transform 0.22s; display:inline-block; }
.sidebar-toggle-btn.active .stb-arrow { transform:rotate(180deg); }

/* ── Layout ── */
.cal-outer   { display:flex; gap:0.75rem; align-items:flex-start; }
#cal-panel   { flex:1; min-width:0; }
#view-month, #view-week, #view-day { height:560px; overflow:hidden; }
#view-month  { display:flex; flex-direction:column; }
#sidebar-panel { width:220px; flex-shrink:0; height:560px; }

/* ── Month grid ── */
.month-grid   { display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:1fr; gap:1px; background:var(--row-border); border-radius:var(--radius-xs); overflow:hidden; flex:1; min-height:0; }
.day-hdr      { font-size:0.6rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); text-align:center; padding:0.35rem 0; background:var(--bg); }
.day-cell     { background:var(--bg); padding:0.38rem 0.45rem; cursor:pointer; transition:background 0.1s; position:relative; overflow:hidden; min-width:0; min-height:0; }
.day-cell:hover               { background:rgba(124,92,252,0.05); }
.day-cell.other-month         { opacity:0.3; }
.day-cell.today .day-num-inner{ background:var(--accent); color:#fff; border-radius:50%; }
.day-num       { width:24px; height:24px; margin-bottom:0.25rem; }
.day-num-inner { width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:0.73rem; font-weight:700; color:var(--text-dim); }
.ev-pill       { font-size:0.61rem; font-weight:600; padding:0.1rem 0.38rem; border-radius:3px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; display:block; line-height:1.4; }
.ev-pill:hover { filter:brightness(1.18); }
.ev-pill.release { opacity:0.72; font-style:italic; }
.release-badge   { font-size:0.52rem; padding:0.05rem 0.28rem; border-radius:3px; background:rgba(255,255,255,0.18); color:rgba(255,255,255,0.9); margin-left:3px; vertical-align:middle; font-style:normal; font-weight:700; letter-spacing:0.3px; }
.more-link       { font-size:0.59rem; color:var(--text-muted); cursor:pointer; padding:0.08rem 0.3rem; display:inline-block; }
.more-link:hover { color:var(--accent2); }

/* ── Agenda sidebar ── */
.sidebar-inner { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.85rem; box-shadow:var(--shadow-card); overflow-y:auto; height:560px; box-sizing:border-box; animation:vcrise 0.25s cubic-bezier(0.16,1,0.3,1); position:relative; }
.sidebar-inner::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.14),transparent); }
.sidebar-hdr   { font-size:0.6rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); margin-bottom:0.65rem; }
.ag-date-sep   { font-size:0.65rem; font-weight:700; color:var(--text-dim); margin:0.6rem 0 0.3rem; letter-spacing:0.3px; display:flex; align-items:center; gap:0.4rem; }
.ag-date-sep::after { content:''; flex:1; height:1px; background:var(--row-border); }
.ag-item       { padding:0.42rem 0.55rem; border-radius:7px; margin-bottom:0.3rem; border-left:3px solid; cursor:pointer; transition:background 0.1s; }
.ag-item:hover { background:rgba(255,255,255,0.04); }
.ag-title      { font-size:0.76rem; font-weight:600; color:var(--text); line-height:1.3; }
.ag-time       { font-size:0.64rem; color:var(--text-muted); margin-top:0.08rem; }
.ag-empty      { font-size:0.74rem; color:var(--text-muted); text-align:center; padding:1.5rem 0; }

/* ── Week view ── */
.week-view-wrap  { border:1px solid var(--border); border-radius:var(--radius-xs); overflow:hidden; height:560px; display:flex; flex-direction:column; }
.week-hdr-grid   { display:grid; grid-template-columns:48px repeat(7,1fr); background:rgba(255,255,255,0.02); border-bottom:1px solid var(--border); flex-shrink:0; }
.wh-corner       { font-size:0.58rem; color:var(--text-muted); display:flex; align-items:flex-end; justify-content:center; padding-bottom:0.45rem; }
.wh-day          { padding:0.45rem 0.35rem; text-align:center; border-left:1px solid var(--border); }
.wh-name         { font-size:0.6rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); }
.wh-num          { font-size:1.05rem; font-weight:800; color:var(--text); display:block; margin-top:0.1rem; }
.wh-num.today-num{ background:var(--accent); color:#fff; border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; margin:0.1rem auto 0; }
.allday-grid     { display:grid; grid-template-columns:48px repeat(7,1fr); background:rgba(255,255,255,0.015); border-bottom:1px solid var(--border); min-height:28px; flex-shrink:0; }
.allday-corner   { font-size:0.57rem; color:var(--text-muted); display:flex; align-items:center; justify-content:flex-end; padding-right:0.4rem; }
.allday-col      { border-left:1px solid var(--border); padding:0.25rem 0.2rem; }
.week-body       { display:grid; grid-template-columns:48px repeat(7,1fr); flex:1; overflow-y:auto; }
.time-col        { display:flex; flex-direction:column; }
.time-slot       { height:44px; display:flex; align-items:flex-start; justify-content:flex-end; padding:2px 0.4rem 0 0; font-size:0.58rem; font-family:'DM Mono',monospace; color:var(--text-muted); }
.time-slot.hour  { border-top:1px solid var(--row-border); }
.time-slot.half  { border-top:1px solid rgba(255,255,255,0.025); }
.wk-day-col      { border-left:1px solid var(--border); position:relative; min-height:1320px; cursor:pointer; }
.wk-day-col:hover{ background:rgba(124,92,252,0.015); }
.hour-line       { height:44px; border-top:1px solid var(--row-border); }
.half-line       { height:44px; border-top:1px solid rgba(255,255,255,0.025); }
.timed-ev        { position:absolute; left:2px; right:2px; border-radius:5px; font-size:0.61rem; font-weight:600; padding:0.2rem 0.35rem; cursor:pointer; overflow:hidden; line-height:1.35; z-index:2; }
.timed-ev:hover  { filter:brightness(1.15); z-index:3; }

/* ── Day view ── */
.day-view-wrap    { border:1px solid var(--border); border-radius:var(--radius-xs); overflow:hidden; height:560px; display:flex; flex-direction:column; }
.day-hdr-row      { display:grid; grid-template-columns:48px 1fr; background:rgba(255,255,255,0.02); border-bottom:1px solid var(--border); flex-shrink:0; }
.day-col-hdr      { padding:0.65rem 0.85rem; border-left:1px solid var(--border); }
.day-col-name     { font-size:0.62rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); }
.day-col-num      { font-size:1.5rem; font-weight:800; color:var(--text); display:block; margin-top:0.1rem; line-height:1; }
.day-col-num.today-num { background:var(--accent); color:#fff; border-radius:50%; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem; }
.day-allday-row   { display:grid; grid-template-columns:48px 1fr; background:rgba(255,255,255,0.015); border-bottom:1px solid var(--border); min-height:28px; flex-shrink:0; }
.day-body         { display:grid; grid-template-columns:48px 1fr; flex:1; overflow-y:auto; }
.day-ev-col       { border-left:1px solid var(--border); position:relative; min-height:1320px; cursor:pointer; }
.day-ev-col:hover { background:rgba(124,92,252,0.015); }

/* ── Event modal fields ── */
.modal-title { font-size:1.05rem; font-weight:700; color:var(--text); margin:0 0 0.2rem; }
.fg          { margin-bottom:0.85rem; }
.fg:last-child{ margin-bottom:0; }
.fl          { display:block; font-size:0.72rem; font-weight:600; color:var(--text-dim); letter-spacing:0.4px; margin-bottom:0.35rem; }
.inp         { width:100%; background:rgba(0,0,0,0.38); border:1px solid var(--border); border-radius:var(--radius-xs); padding:0.55rem 0.85rem; color:var(--text); font-family:'DM Sans',inherit; font-size:0.84rem; outline:none; transition:border-color 0.18s,box-shadow 0.18s; box-shadow:inset 0 1px 3px rgba(0,0,0,0.25); }
.inp:focus   { border-color:var(--accent-border); box-shadow:0 0 0 3px rgba(124,92,252,0.1),inset 0 1px 3px rgba(0,0,0,0.25); }
textarea.inp { resize:vertical; min-height:72px; }
.two-col     { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin-bottom:0.85rem; }
.tl          { font-size:0.82rem; color:var(--text-dim); user-select:none; }
.toggle      { position:relative; width:36px; height:20px; cursor:pointer; flex-shrink:0; }
.toggle input{ opacity:0; width:0; height:0; position:absolute; }
.ttrack      { position:absolute; inset:0; border-radius:20px; background:rgba(255,255,255,0.1); border:1px solid var(--border); transition:background 0.2s; }
.toggle input:checked + .ttrack { background:rgba(124,92,252,0.5); border-color:rgba(124,92,252,0.5); }
.tthumb      { position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:rgba(255,255,255,0.6); transition:transform 0.2s; }
.toggle input:checked ~ .tthumb { transform:translateX(16px); background:#fff; }
.colour-row  { display:flex; gap:0.4rem; margin-top:0.3rem; }
.cdot        { width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:all 0.12s; flex-shrink:0; }
.cdot.active { border-color:#fff; transform:scale(1.18); }
.share-opt   { padding:0.45rem 0.8rem; font-size:0.8rem; color:var(--text-dim); cursor:pointer; transition:background 0.1s; }
.share-opt:hover    { background:rgba(255,255,255,0.06); }
.share-opt.selected { background:rgba(124,92,252,0.14); color:var(--accent2); }
.modal-release .inp,
.modal-release textarea.inp { opacity:0.6; pointer-events:none; }

/* ── Loading ── */
@keyframes spin { to{transform:rotate(360deg)} }
.cal-loading { display:flex; align-items:center; justify-content:center; height:200px; gap:0.6rem; color:var(--text-muted); font-size:0.82rem; }
.cal-loading .spinner { width:16px; height:16px; border:2px solid rgba(255,255,255,0.1); border-top-color:var(--accent); border-radius:50%; animation:spin 0.6s linear infinite; }

/* ── Share-with-user dropdown: escape modal clip ── */
.modal { overflow: visible; }