/* =====================================================================
   multimail - kalendarz
   Siatka miesiaca, siatka godzinowa tygodnia i dnia, agenda oraz edytor.
   Dolaczane osobno od app.css, zeby widok poczty nie placil za style,
   z ktorych nie korzysta.
   ===================================================================== */

.screen.cal { overflow: hidden; padding: 0; }

.calwrap {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
}

.calboot {
    height: 100%;
    display: grid; place-items: center; align-content: center; gap: 14px;
    color: var(--ink-3); font-size: 13px;
}

.spinner {
    width: 24px; height: 24px;
    border: 2.5px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

/* --- Kolumna boczna --------------------------------------------------- */

.calside {
    border-right: 1px solid var(--line);
    background: var(--surface-2);
    padding: 16px 12px;
    overflow-y: auto;
    min-height: 0;
    display: flex; flex-direction: column; gap: 18px;
}

.mini { user-select: none; }
.minihead {
    display: flex; align-items: center; gap: 2px;
    padding: 0 4px 8px;
    font-size: 13px;
}
.minihead b { flex: 1; font-family: var(--f-display); font-weight: 600; text-transform: capitalize; }
.minihead .iconbtn.sm { width: 24px; height: 24px; }
.minihead .iconbtn svg { width: 14px; height: 14px; }

.minigrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.minih {
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-3); text-align: center; padding-bottom: 4px;
}
.minid {
    aspect-ratio: 1; border-radius: 50%;
    font-size: 11.5px; color: var(--ink-2);
    display: grid; place-items: center;
    transition: background .12s var(--ease), color .12s var(--ease);
}
.minid:hover { background: var(--surface-3); }
.minid.off { color: var(--ink-3); opacity: .5; }
.minid.today { color: var(--accent); font-weight: 700; }
.minid.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.callist { display: grid; gap: 2px; }
.calitem {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 6px; border-radius: var(--r-xs);
    font-size: 13px;
}
.calitem:hover { background: var(--surface-3); }
.calitem.off .calname { color: var(--ink-3); text-decoration: line-through; }

.calbox {
    width: 15px; height: 15px; flex: 0 0 auto;
    border-radius: 4px;
    border: 1.6px solid var(--c, var(--accent));
    background: var(--c, var(--accent));
    color: #fff;
    display: grid; place-items: center;
}
.calitem.off .calbox { background: transparent; color: transparent; }
.calbox svg { width: 11px; height: 11px; stroke-width: 3; }

.calname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calsub {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--pill);
    padding: 1px 6px;
}
.calitem .iconbtn.sm { width: 24px; height: 24px; opacity: 0; color: var(--ink-3); }
.calitem:hover .iconbtn.sm { opacity: 1; }
.calitem .iconbtn svg { width: 15px; height: 15px; }
.calitem .warnbadge { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); flex: 0 0 auto; }

.calactions { display: grid; gap: 4px; }
.calactions .btn { justify-content: flex-start; }
.calactions .btn svg { width: 15px; height: 15px; }

/* --- Pasek nawigacji -------------------------------------------------- */

.calmain { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }

.calbar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.calbar .spacer { flex: 1; }
.calperiod {
    font-family: var(--f-display); font-size: 19px; font-weight: 600;
    margin-left: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0; flex: 0 1 auto;
}
.calbar > .btn, .calbar > .iconbtn, .calbar > .seg { flex: 0 0 auto; }

.seg {
    display: flex; gap: 2px; padding: 2px;
    background: var(--surface-3); border-radius: var(--pill);
}
.segbtn {
    padding: 6px 14px; border-radius: var(--pill);
    font-size: 12.5px; font-weight: 500; color: var(--ink-2);
    transition: background .14s var(--ease), color .14s var(--ease);
}
.segbtn:hover { color: var(--ink); }
.segbtn.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); font-weight: 600; }

.calcanvas { overflow: hidden; display: grid; min-height: 0; }

/* --- Miesiac ---------------------------------------------------------- */

.month { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }

.mdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    padding: 0;
}
.mdays span {
    padding: 8px 10px; font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3);
    text-align: right;
}

.mgrid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    height: 100%;
    background: var(--line-soft);
    gap: 1px;
    overflow: hidden;
}

.mcell {
    background: var(--surface);
    padding: 3px 4px 4px;
    display: flex; flex-direction: column; gap: 2px;
    min-height: 0; overflow: hidden;
    cursor: pointer;
}
.mcell.off { background: var(--surface-2); }
.mcell.off .dnum { color: var(--ink-3); opacity: .6; }
.mcell.over { background: var(--accent-soft); }

.dnum {
    align-self: flex-end;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: var(--pill);
    font-size: 12px; font-weight: 500; color: var(--ink-2);
    display: grid; place-items: center;
}
.dnum:hover { background: var(--surface-3); }
.mcell.today .dnum { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

.cev {
    display: flex; align-items: center; gap: 5px;
    padding: 2px 6px; border-radius: var(--r-xs);
    font-size: 11.5px; line-height: 1.5;
    color: var(--ink); cursor: pointer;
    white-space: nowrap; overflow: hidden;
    transition: background .12s var(--ease);
    touch-action: none;
}
.cev:hover { background: var(--surface-3); }
.cev .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.cev .t { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cev .s { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }

.cev.solid { background: var(--c); color: #fff; }
.cev.solid .t { color: rgba(255, 255, 255, .8); }
.cev.solid:hover { filter: brightness(1.08); }
.cev.maybe { border: 1px dashed var(--c); }
.cev.drag { opacity: .65; box-shadow: var(--shadow-2); }

.cmore {
    align-self: flex-start;
    font-size: 11px; color: var(--ink-3); padding: 1px 6px;
    border-radius: var(--r-xs);
}
.cmore:hover { background: var(--surface-3); color: var(--ink); }

/* --- Tydzien i dzien -------------------------------------------------- */

.week {
    display: grid; grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0; --gutter: 58px;
}

.wtop { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); background: var(--surface); }
.wcorner { border-right: 1px solid var(--line); }
.wheads { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }

.whead {
    padding: 8px 4px; text-align: center;
    border-left: 1px solid var(--line-soft);
    display: grid; gap: 2px; justify-items: center;
}
.whead .wd { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.whead .wn {
    width: 30px; height: 30px; border-radius: 50%;
    font-family: var(--f-display); font-size: 17px; font-weight: 600; color: var(--ink);
    display: grid; place-items: center;
}
.whead .wn:hover { background: var(--surface-3); }
.whead.today .wn { background: var(--accent); color: var(--accent-ink); }
.whead.today .wd { color: var(--accent); font-weight: 700; }

.wallday {
    display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    max-height: 108px; overflow-y: auto;
}
.wallk {
    font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-3); padding: 6px 6px 0; text-align: right;
    border-right: 1px solid var(--line);
}
.wallcols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.wallcol {
    border-left: 1px solid var(--line-soft);
    padding: 4px; min-height: 30px;
    display: grid; gap: 2px; align-content: start;
    cursor: pointer;
}

.wbody {
    display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr);
    overflow-y: auto; position: relative;
    background: var(--surface);
}

.hours { border-right: 1px solid var(--line); }
.hour { height: 48px; position: relative; }
.hour span {
    position: absolute; top: -7px; right: 8px;
    font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.hour:first-child span { display: none; }

.wcols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.wcol { position: relative; border-left: 1px solid var(--line-soft); cursor: pointer; }
.wcol.today { background: rgba(43, 95, 227, .035); }
.hcell { height: 48px; border-bottom: 1px solid var(--line-soft); }

.nowline { position: absolute; left: 0; right: 0; height: 2px; background: var(--bad); z-index: 3; }
.nowline::before {
    content: ""; position: absolute; left: -4px; top: -3px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--bad);
}

.ev {
    position: absolute; z-index: 2;
    padding: 3px 7px; border-radius: var(--r-xs);
    background: var(--c); color: #fff;
    font-size: 11.5px; line-height: 1.35;
    overflow: hidden; cursor: pointer;
    border-left: 3px solid rgba(0, 0, 0, .22);
    display: flex; flex-direction: column;
    touch-action: none;
    transition: box-shadow .12s var(--ease), filter .12s var(--ease);
}
.ev:hover { filter: brightness(1.07); box-shadow: var(--shadow-1); }
.ev b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev span { color: rgba(255, 255, 255, .82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev.maybe { background: repeating-linear-gradient(135deg, var(--c), var(--c) 6px, rgba(255, 255, 255, .22) 6px, rgba(255, 255, 255, .22) 12px); }
.ev.free { background: transparent; color: var(--ink); border: 1px solid var(--c); border-left-width: 3px; }
.ev.free span { color: var(--ink-3); }
.ev.drag { opacity: .8; box-shadow: var(--shadow-2); z-index: 5; }

.ev .grip {
    position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
    cursor: ns-resize; background: none;
}
.ev .grip::after {
    content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
    width: 22px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .5);
    opacity: 0; transition: opacity .12s var(--ease);
}
.ev:hover .grip::after { opacity: 1; }

/* --- Agenda ----------------------------------------------------------- */

.calcanvas > .agday:first-child { margin-top: 20px; }
.calcanvas { overflow-y: auto; }

.agday {
    display: grid; grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px; padding: 0 26px 18px;
    max-width: 1000px;
}
.agdate {
    display: flex; align-items: baseline; gap: 6px; justify-content: flex-end;
    padding-top: 6px; color: var(--ink-2);
}
.agdate b { font-family: var(--f-display); font-size: 22px; color: var(--ink); }
.agdate span { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.agdate i { font-style: normal; font-size: 12px; color: var(--ink-3); }
.agdate.today b { color: var(--accent); }

.agrows { display: grid; gap: 2px; border-left: 1px solid var(--line); padding-left: 16px; }
.agrow {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px; border-radius: var(--r-sm);
    font-size: 13px; cursor: pointer;
    border-left: 3px solid var(--c);
    background: var(--surface);
}
.agrow:hover { background: var(--surface-2); }
.agtime { color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 96px; font-size: 12.5px; }
.agtitle { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agloc { color: var(--ink-3); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.agloc svg { width: 13px; height: 13px; }
.agcal { color: var(--ink-3); font-size: 11.5px; }

/* --- Edytor wydarzenia ------------------------------------------------ */

.evform .bigtitle {
    font-family: var(--f-display); font-size: 19px; font-weight: 600;
    padding: 8px 0; border: 0; border-bottom: 2px solid var(--line);
    border-radius: 0; background: none;
}
.evform .bigtitle:focus { border-bottom-color: var(--accent); box-shadow: none; background: none; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dt { display: flex; gap: 8px; }
.dt input[type="date"] { flex: 1 1 auto; }
.dt input[type="time"] { flex: 0 0 108px; }

.field input[type="time"], .field input[type="file"], .field input[type="url"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    outline: 0; font-size: 13.5px;
    font-family: inherit;
}
.field input[type="time"]:focus, .field input[type="url"]:focus {
    border-color: var(--accent); background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.evform textarea { min-height: 76px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pick {
    padding: 5px 12px; border-radius: var(--pill);
    border: 1px solid var(--line); background: var(--surface-2);
    font-size: 12.5px; color: var(--ink-2);
    transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.pick:hover { border-color: var(--ink-3); }
.pick.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.swatchbtn {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid transparent; outline-offset: 2px;
}
.swatchbtn.on { border-color: var(--surface); box-shadow: 0 0 0 2px var(--ink); }

.scope {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--line);
    font-size: 13px;
}
.scope > span { color: var(--ink-2); }
.scope .hint { width: 100%; font-size: 11.5px; color: var(--ink-3); }

.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); }

/* --- Waskie okna ------------------------------------------------------ */

@media (max-width: 1080px) {
    .calwrap { grid-template-columns: minmax(0, 1fr); }
    .calside { display: none; }
}

@media (max-width: 720px) {
    .calbar { flex-wrap: wrap; }
    .calperiod { font-size: 16px; order: -1; width: 100%; }
    .seg { font-size: 12px; }
    .segbtn { padding: 6px 10px; }
    .agday { grid-template-columns: 62px minmax(0, 1fr); padding: 0 14px 16px; }
}

/* --- Zaproszenie w wiadomosci ----------------------------------------- */

.invite {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; margin: 0 0 18px;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-sm);
    background: var(--accent-soft);
}
.invite .ico { display: grid; place-items: center; color: var(--accent); }
.invite .ico svg { width: 22px; height: 22px; }
.invite .txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.invite .txt b { font-size: 14px; }
.invite .txt span { font-size: 12.5px; color: var(--ink-2); }
.invite .txt .who { color: var(--ink-3); font-size: 11.5px; }
.invite .btn { flex: 0 0 auto; }
.invite .done {
    display: flex; align-items: center; gap: 6px;
    color: var(--ok); font-size: 12.5px; font-weight: 600; flex: 0 0 auto;
}
.invite .done svg { width: 15px; height: 15px; }