/* Minimal iCal-ish month view (fits existing style.css)
   - kept deliberately simple to match the rest of the app shell */

.calWrap{max-width:1200px;margin:0 auto;padding:18px}
.calHeader{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;margin-bottom:12px}
.calHeader .left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.calHeader .right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.calTitle{font-weight:800;letter-spacing:.2px;font-size:22px}

.calGrid{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.calDow{display:grid;grid-template-columns:repeat(7,1fr);background:var(--panel2);border-bottom:1px solid var(--line2)}
.calDow div{padding:10px 12px;font-size:12px;opacity:.8;font-weight:700;text-transform:uppercase;letter-spacing:.08em}

.calDays{display:grid;grid-template-columns:repeat(7,1fr)}
/* Keep all day boxes the same size (no growth with long titles / many events) */
.calCell{height:118px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:8px;position:relative;cursor:pointer;overflow:hidden}
.calCell:nth-child(7n){border-right:none}
.calCell .dayNum{font-size:12px;font-weight:800;opacity:.85}
.calCell.otherMonth .dayNum{opacity:.35}
.calCell.today{background:rgba(127,127,127,.08)}
.calCell:hover{background:rgba(127,127,127,.06)}

.calEvents{margin-top:6px;display:flex;flex-direction:column;gap:4px;max-height:86px;overflow:hidden}
.calPill{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;padding:4px 7px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2)}
.calPill.deadline{background:rgba(255,0,0,.10)}
.calPill.invoice_created{background:rgba(0,0,255,.08)}
.calPill.invoice_sent{background:rgba(255,165,0,.14)}
.calPill.invoice_paid{background:rgba(0,128,0,.12)}

/* Keep special types readable across dark/light presets */
.calPill.deadline{border-color:rgba(255,0,0,.18)}
.calPill.time{background:rgba(127,127,127,.14)}
.calPill.manual{background:rgba(127,127,127,.16)}

.calMore{font-size:12px;opacity:.75;padding-left:4px}

/* Day panel (Apple Calendar style: details appear under the calendar) */
.dayPanel{margin-top:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
.dayPanel .head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line2)}
.dayPanel .head .t{font-weight:900}
.dayPanel .body{padding:12px 14px}
.dayPanel .list{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.dayPanel .row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border:1px solid var(--line2);border-radius:12px;padding:10px 12px;background:var(--panel2)}
.dayPanel .row .meta{font-size:12px;opacity:.7;margin-top:4px}
.dayPanel .row .actions{display:flex;gap:8px}
.dayPanel .form{display:grid;grid-template-columns:1fr;gap:10px}
.dayPanel .form .input{width:100%}

/* Below calendar: deadline list */
.deadlineBox{margin-top:18px}
.deadlineTable{width:100%;border-collapse:separate;border-spacing:0 10px}
.deadlineTable td{padding:10px 12px;background:var(--panel2);border:1px solid var(--line2)}
.deadlineTable tr td:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.deadlineTable tr td:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}
.deadlineBadge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.02em}
.deadlineBadge.green{background:rgba(0,128,0,.12)}
.deadlineBadge.yellow{background:rgba(255,165,0,.18)}
.deadlineBadge.red{background:rgba(255,0,0,.12)}
.deadlineBadge.gray{background:rgba(127,127,127,.14);color:var(--muted)}
.deadlineMuted{opacity:.75;font-size:12px}

/* Dialog */
.calDialog::backdrop{background:rgba(0,0,0,.35)}
.calDialog{border:none;border-radius:16px;padding:0;max-width:680px;width:calc(100% - 24px)}
.calDialog .box{padding:16px;background:var(--panel)}
.calDialog .head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.calDialog .head .t{font-weight:900}
.calDialog .list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.calDialog .row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border:1px solid var(--line2);border-radius:12px;padding:10px 12px;background:var(--panel2)}
.calDialog .row .meta{font-size:12px;opacity:.7;margin-top:4px}
.calDialog .row .actions{display:flex;gap:8px}
.calDialog .form{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.calDialog .form .input{width:100%}

.dayPanel .desc{font-size:12px;opacity:.85;margin-top:3px;white-space:pre-wrap}

/* View toggle */
.calViewToggle{display:flex;gap:6px;align-items:center}
.calViewToggle .btn[aria-selected="true"]{background:rgba(127,127,127,.14);border-color:rgba(127,127,127,.28);font-weight:800}

/* Week / Day views (Apple iCal-like time grid) */
.calGrid[data-view="week"] .calDow,
.calGrid[data-view="day"] .calDow{display:none}
.calGrid[data-view="week"] .calDays,
.calGrid[data-view="day"] .calDays{display:block}

/* Wrapper */
.wkWrap,.dyWrap{display:flex;flex-direction:column}
.wkHeaderRow{display:grid;grid-template-columns:56px repeat(7, 1fr);background:var(--panel2);border-bottom:1px solid var(--line2)}
.dyHeaderRow{display:grid;grid-template-columns:56px 1fr;background:var(--panel2);border-bottom:1px solid var(--line2)}
.wkHeaderRow .gutter,.dyHeaderRow .gutter{padding:10px 8px;font-size:11px;opacity:.65;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.wkDayHead,.dyDayHead{padding:10px 10px;font-size:12px;font-weight:900;opacity:.85;display:flex;align-items:center;gap:8px}
.wkDayHead .num,.dyDayHead .num{font-weight:900;opacity:.6}
.wkDayHead.today,.dyDayHead.today{background:rgba(127,127,127,.08)}

/* All-day row */
.wkAllDayRow{display:grid;grid-template-columns:56px repeat(7,1fr);border-bottom:1px solid var(--line2);background:var(--panel)}
.dyAllDayRow{display:grid;grid-template-columns:56px 1fr;border-bottom:1px solid var(--line2);background:var(--panel)}
.wkAllDayRow .gutter,.dyAllDayRow .gutter{padding:8px 8px;font-size:11px;opacity:.6;font-weight:800}
.wkAllDayCol,.dyAllDayCol{padding:6px 6px;min-height:38px;border-left:1px solid var(--line2);display:flex;flex-direction:column;gap:4px}
.wkAllDayCol:first-of-type,.dyAllDayCol:first-of-type{border-left:none}
.wkAllDayCol .calPill,.dyAllDayCol .calPill{border-radius:10px}
.wkAllDayMore{font-size:11px;opacity:.65;padding-left:4px}

/* Time grid */
.timeScroll{max-height:720px;overflow:auto;position:relative}
.timeBodyWeek{display:grid;grid-template-columns:56px repeat(7,1fr)}
.timeBodyDay{display:grid;grid-template-columns:56px 1fr}
.timeGutter{position:relative;background:var(--panel);border-right:1px solid var(--line2)}
.timeGutter .hour{height:48px;display:flex;align-items:flex-start;justify-content:flex-end;padding:2px 8px 0 0;font-size:11px;opacity:.55;font-weight:800}
.timeCol{position:relative;background:var(--panel);border-left:1px solid var(--line2)}
.timeCol:first-of-type{border-left:none}

/* Hour lines */
.timeCol::before{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,
    var(--line2) 0px,
    var(--line2) 1px,
    transparent 1px,
    transparent 48px
  );
  pointer-events:none;
}

/* Event blocks (timed) */
.wkEventBlock{
  position:absolute;
  left:6px; right:6px;
  border-radius:12px;
  padding:6px 8px;
  font-size:12px;
  border:1px solid var(--line2);
  background:rgba(127,127,127,.12);
  overflow:hidden;
}
.wkEventBlock .t{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wkEventBlock .m{font-size:11px;opacity:.7;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wkEventBlock .n{font-size:11px;opacity:.85;margin-top:4px;white-space:normal;line-height:1.2;max-height:2.4em;overflow:hidden}
.wkEventBlock.small{padding:4px 7px;border-radius:10px}
.wkEventBlock.small .n{display:none}

/* Multi-day bar look in all-day section */
.calPill.multi{border-radius:10px}
.calPill.multi.start{border-top-right-radius:0;border-bottom-right-radius:0}
.calPill.multi.mid{border-radius:0}
.calPill.multi.end{border-top-left-radius:0;border-bottom-left-radius:0}

/* Project color picker (swatch + hidden native input) */
.projColorWrap{position:relative;display:inline-block;width:42px;height:26px;margin-left:8px;vertical-align:middle}
.colorSwatch{position:absolute;inset:0;border-radius:10px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.colorInput{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:none;background:transparent}

/* Editable manual entry cards in the day panel */
.manualCard{border-radius:18px;padding:14px 14px 12px;margin:10px 0;border:1px solid var(--line2);background:var(--panel2)}
.manualCardHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.manualCardTitle{font-weight:900;font-size:18px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.manualCardActions{display:flex;gap:8px;flex-shrink:0}
.manualCardActions .btn.small{padding:8px 12px;border-radius:999px}
.manualCardMeta{margin-top:6px;font-size:12px;opacity:.7}
.manualCardNotes{margin-top:10px;font-size:13px;white-space:pre-wrap;line-height:1.35;opacity:.9}
.manualCardNotes{margin-top:10px;font-size:13px;white-space:pre-wrap;line-height:1.35;opacity:.9}