/* ── Calendar — shared shell ──
   Header bar (title + nav + view tabs + "+ event" button) and the
   common .calendar-view / .calendar-content scroller.

   Per-view styles live in dedicated files:
     calendar-week.css           week + all-day + TZ picker
     calendar-month.css          month grid + mini-month + upcoming
     calendar-event-detail.css   slide-in panel + hover popup + badges
     calendar-forms.css          create modal + participant picker + quick-create
     calendar-booking.css        booking links + meet-with sidebar
     calendar-proposals.css      time-proposal overlay + drag confirm */

  .calendar-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
  .calendar-header {
    height: 52px; display: flex; align-items: center; padding: 0 var(--space-lg);
    border-bottom: 1px solid var(--border); gap: var(--space-lg); flex-shrink: 0;
  }
  .calendar-header h3 { font-size: var(--font-md); font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: var(--space-sm); }

  /* "Календари" section in the calendar sidebar — list of connected
     external calendars + the "+ Подключить" trigger. Compact rows
     (the sidebar is narrow), one row per credential. */
  .cal-integrations-section {
    margin: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
  }
  .cal-integrations-head {
    font-size: var(--font-2xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--ink-muted); margin-bottom: var(--space-sm);
  }
  .cal-integrations-empty {
    color: var(--ink-muted); font-size: var(--font-xs);
    margin-bottom: var(--space-sm);
  }
  /* Notion-style compact row: swatch · email · ··· · 👁. The swatch
     carries a tiny status-overlay (running/done/error/pending) at the
     bottom-right corner so each row stays one line tall regardless of
     sync state. Sync details live in the row's tooltip + ··· popover. */
  .cal-integration-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 4px;
    border-radius: var(--radius-s);
    transition: background var(--transition);
  }
  .cal-integration-row:hover { background: var(--surface); }
  .cal-integration-row[data-hidden="1"] { opacity: 0.55; }

  /* Color swatch — provider-specific tint, blue-default. The status
     overlay is a small dot anchored bottom-right via ::after so
     hidden state → faded swatch keeps the dot legible. */
  .cal-integration-swatch {
    position: relative;
    width: 14px; height: 14px;
    border-radius: 4px;
    background: var(--accent);
    flex-shrink: 0;
  }
  .cal-integration-swatch--google { background: #4285F4; }
  .cal-integration-swatch--yandex { background: #FFCC00; }
  /* This calendar's default colour overrides the provider-brand fill, so
     the dot next to the email matches the colour its events paint with.
     Placed after the provider rules → wins at equal specificity. */
  .cal-integration-swatch.color-red    { background: var(--cal-color-red); }
  .cal-integration-swatch.color-orange { background: var(--cal-color-orange); }
  .cal-integration-swatch.color-yellow { background: var(--cal-color-yellow); }
  .cal-integration-swatch.color-green  { background: var(--cal-color-green); }
  .cal-integration-swatch.color-blue   { background: var(--cal-color-blue); }
  .cal-integration-swatch.color-purple { background: var(--cal-color-purple); }
  .cal-integration-swatch.color-gray   { background: var(--cal-color-gray); }
  .cal-integration-swatch::after {
    content: '';
    position: absolute;
    right: -3px; bottom: -3px;
    width: 7px; height: 7px;
    border-radius: 50%;
    border: 2px solid var(--bg);
    background: var(--success);
  }
  .cal-integration-swatch--pending::after { background: var(--ink-muted); }
  .cal-integration-swatch--done::after    { background: var(--success); }
  .cal-integration-swatch--error::after   { background: var(--coral); }
  /* Running: replace the dot with a tiny spinning ring. Slightly
     bigger (8px) so the gap is legible at this size. */
  .cal-integration-swatch--running::after {
    width: 8px; height: 8px;
    background: transparent;
    border: 2px solid transparent;
    border-top-color: var(--accent);
    border-right-color: var(--accent);
    animation: cal-int-spin 0.7s linear infinite;
  }
  @keyframes cal-int-spin {
    to { transform: rotate(360deg); }
  }

  .cal-integration-email {
    flex: 1; min-width: 0;
    font-size: var(--font-sm); color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ··· and 👁 — same visual treatment, monochrome by default,
     tinted on hover. Eye fades when calendar is hidden so the
     toggled-off state is visible at a glance even before reading
     the dim row. */
  .cal-integration-action {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    border-radius: var(--radius-s);
    color: var(--ink-muted); cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    flex-shrink: 0;
  }
  .cal-integration-action:hover {
    background: var(--surface);
    color: var(--ink);
  }
  .cal-integration-row[data-hidden="1"] .cal-integration-eye {
    color: var(--ink-muted);
  }

  /* Per-row "···" popover. Lives on document.body (created on demand
     in calendar-integrations.js), positioned via getBoundingClientRect.
     position: fixed so the inline coords match the rect viewport
     coordinates regardless of which positioned ancestor we land in. */
  .cal-row-menu {
    display: none;
    position: fixed;
    background: var(--elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-m);
    padding: 4px;
    z-index: 100;
    flex-direction: column;
    /* Q.2 — Defaults section adds 3 dropdowns + reminder list; bump
       the menu width so a "За 1 неделю" preset doesn't get clipped. */
    min-width: 280px;
    max-height: 80vh;
    overflow-y: auto;
  }
  .cal-row-menu.visible { display: flex; }
  .cal-row-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: transparent; border: none; cursor: pointer;
    border-radius: var(--radius-s);
    color: var(--ink); text-decoration: none;
    font: inherit; font-size: var(--font-sm); text-align: left;
    transition: background var(--transition);
  }
  .cal-row-menu-item:hover { background: var(--surface); }
  .cal-row-menu-icon {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-muted); flex-shrink: 0;
  }
  .cal-row-menu-item--danger { color: var(--coral); }
  .cal-row-menu-item--danger .cal-row-menu-icon { color: var(--coral); }
  .cal-row-menu-divider {
    height: 1px; background: var(--border);
    margin: 4px var(--space-xs);
  }
  /* O.3 — colour-picker section inside the ··· row menu. */
  .cal-row-menu-section {
    padding: 4px 10px 8px;
    display: flex; flex-direction: column;
    gap: 6px;
  }
  .cal-row-menu-section-label {
    font-size: var(--font-xs);
    color: var(--ink-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .cal-row-color-row {
    display: flex; flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .cal-row-color-swatch {
    width: 20px; height: 20px;
    padding: 0;
    background: var(--cal-color-gray);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition);
  }
  .cal-row-color-swatch:hover { transform: scale(1.08); }
  .cal-row-color-swatch.color-red    { background: var(--cal-color-red); }
  .cal-row-color-swatch.color-orange { background: var(--cal-color-orange); }
  .cal-row-color-swatch.color-yellow { background: var(--cal-color-yellow); }
  .cal-row-color-swatch.color-green  { background: var(--cal-color-green); }
  .cal-row-color-swatch.color-blue   { background: var(--cal-color-blue); }
  .cal-row-color-swatch.color-purple { background: var(--cal-color-purple); }
  .cal-row-color-swatch.color-gray   { background: var(--cal-color-gray); }
  .cal-row-color-swatch--default {
    background: transparent;
    border: 1px dashed var(--border-mid);
    color: var(--ink-muted);
    font-size: 12px; line-height: 1;
  }
  .cal-row-color-swatch--default:hover {
    color: var(--ink); border-color: var(--ink-secondary);
  }
  .cal-row-color-swatch--active {
    box-shadow: 0 0 0 2px var(--raised), 0 0 0 3px var(--ink);
  }

  /* Q.2 — per-credential defaults section inside the ··· popover. */
  .cal-row-cred-select {
    width: 100%;
    padding: 6px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--ink);
    font: inherit; font-size: var(--font-sm);
    cursor: pointer;
  }
  .cal-row-cred-select:focus {
    outline: none;
    border-color: var(--accent);
  }
  .cal-row-cred-rem-list {
    display: flex; flex-direction: column;
    gap: 4px;
  }
  .cal-row-cred-rem-row {
    display: flex; align-items: center; gap: 6px;
  }
  .cal-row-cred-rem-select {
    flex: 1;
    padding: 6px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--ink);
    font: inherit; font-size: var(--font-sm);
    cursor: pointer;
  }
  .cal-row-cred-rem-remove {
    width: 22px; height: 22px;
    background: transparent; border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--ink-muted);
    font: inherit; font-size: 14px; line-height: 1;
    cursor: pointer;
  }
  .cal-row-cred-rem-remove:hover {
    color: var(--coral); border-color: var(--coral);
  }
  .cal-row-cred-rem-hint {
    font-size: var(--font-xs);
    color: var(--ink-muted);
    font-style: italic;
  }
  .cal-row-cred-rem-actions {
    display: flex; gap: 6px;
    margin-top: 2px;
  }
  .cal-row-cred-rem-add,
  .cal-row-cred-rem-clear {
    flex: 1;
    padding: 4px 6px;
    background: transparent; border: 1px dashed var(--border);
    border-radius: var(--radius-s);
    color: var(--ink-muted);
    font: inherit; font-size: var(--font-xs);
    cursor: pointer;
  }
  .cal-row-cred-rem-add:hover,
  .cal-row-cred-rem-clear:hover {
    color: var(--ink); border-color: var(--ink-secondary);
    background: var(--surface);
  }

  /* + Подключить — anchored trigger; clicking toggles a popover with
     the provider choice. Anchor lives in the sidebar, but the popover
     itself sits outside the sidebar's innerHTML rebuild (in app.html)
     so its open state survives upcoming-events refreshes. */
  .cal-add-cal-btn {
    display: flex; align-items: center; gap: 6px;
    width: 100%;
    padding: 8px 10px;
    background: transparent; border: 1px dashed var(--border);
    border-radius: var(--radius-s);
    color: var(--ink-muted);
    font: inherit; font-size: var(--font-xs); cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    margin-top: var(--space-sm);
  }
  .cal-add-cal-btn:hover {
    background: var(--surface); color: var(--ink); border-style: solid;
  }
  .cal-add-cal-btn .cal-add-cal-chevron {
    margin-left: auto;
    color: var(--ink-muted);
    transition: transform var(--transition);
  }
  .cal-add-cal-btn[aria-expanded="true"] .cal-add-cal-chevron {
    transform: rotate(180deg);
  }
  /* position: fixed (not absolute) so the inline style.left/top set
     from getBoundingClientRect() — which returns viewport coordinates
     — anchors correctly. With absolute, the popover would drift to a
     positioned ancestor instead of the trigger. */
  .cal-add-cal-popover {
    display: none;
    position: fixed;
    background: var(--elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-m);
    padding: 4px;
    z-index: 60;
    flex-direction: column;
    min-width: 200px;
  }
  .cal-add-cal-popover.visible { display: flex; }
  .cal-add-cal-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: transparent; border: none; cursor: pointer;
    border-radius: var(--radius-s);
    color: var(--ink);
    font: inherit; font-size: var(--font-sm); text-align: left;
    transition: background var(--transition);
  }
  .cal-add-cal-item:hover { background: var(--surface); }
  .cal-add-cal-icon {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-muted); flex-shrink: 0;
  }
  .calendar-nav { display: flex; align-items: center; gap: var(--space-sm); margin-left: auto; }
  /* Chevron pair sits tight together (Notion style) — small gap
     between < and >, then the regular .calendar-nav gap before
     "Today" / month label. */
  .calendar-nav-chevrons { display: flex; align-items: center; gap: 2px; }
  .calendar-nav-btn {
    width: 32px; height: 32px; border-radius: var(--radius-s); background: transparent;
    border: none; color: var(--ink-muted); cursor: pointer; display: flex; align-items: center;
    justify-content: center; transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  }
  .calendar-nav-btn:hover { background: var(--elevated); color: var(--ink); }
  .calendar-month { font-size: var(--font-md); font-weight: 600; color: var(--ink); min-width: 140px; text-align: center; }
  .calendar-view-tabs { display: flex; gap: 2px; }
  .calendar-view-tab {
    padding: 6px 14px; border-radius: var(--radius-s); font-size: var(--font-sm); font-weight: 500;
    color: var(--ink-muted); cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    background: transparent; border: none; font-family: inherit;
  }
  .calendar-view-tab:hover { background: var(--surface); color: var(--ink-secondary); }
  .calendar-view-tab.active { background: var(--elevated); color: var(--ink); }

  /* ── View-mode dropdown (Notion-style) ──
     Single trigger button with chevron + popover-menu listing all
     four modes with their hotkeys. Replaces the row of view-tabs. */
  .calendar-view-dropdown { position: relative; }
  .calendar-view-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--ink); font-family: inherit; font-size: var(--font-sm); font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
  }
  .calendar-view-trigger:hover { border-color: var(--accent); }
  .calendar-view-trigger[aria-expanded="true"] {
    background: var(--surface);
  }
  .calendar-view-menu {
    position: absolute; top: calc(100% + 4px); left: 0;
    min-width: 220px;
    padding: 4px;
    background: var(--deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-l);
    z-index: 60;
    display: flex; flex-direction: column; gap: 1px;
  }
  .calendar-view-menu[hidden] { display: none; }
  .calendar-view-menu-item {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: transparent; border: none;
    border-radius: var(--radius-s);
    color: var(--ink); font: inherit; font-size: var(--font-sm);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition);
  }
  .calendar-view-menu-item:hover { background: var(--accent-soft); }
  .calendar-view-menu-item.active .calendar-view-menu-label { font-weight: 600; }
  .calendar-view-menu-check { color: var(--accent); }
  .calendar-view-menu-hotkey {
    font-size: var(--font-xs);
    color: var(--ink-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .calendar-add-btn {
    padding: 6px 14px; border-radius: var(--radius-s); font-size: var(--font-sm); font-weight: 600;
    background: var(--accent); color: white; border: none; cursor: pointer;
    font-family: inherit; transition: background var(--transition);
    display: flex; align-items: center; gap: var(--space-xs);
  }
  .calendar-add-btn:hover { background: var(--accent-hover); }
  .calendar-content { flex: 1; overflow-y: auto; padding: 0; }

  /* ── PR C1: hotkeys help overlay (open with `?`) ─────────────── */
  /* `.modal-overlay` base (thread.css) handles positioning + visibility.
     Our card sits inside it. */
  .kc-cal-hotkeys-card {
    width: min(480px, 90vw);
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    background: var(--raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-l);
    padding: var(--space-lg);
    gap: var(--space-md);
    overflow: hidden;
  }
  .kc-cal-hotkeys-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }
  .kc-cal-hotkeys-title {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--ink);
  }
  .kc-cal-hotkeys-filter {
    width: 100%;
    padding: 8px 12px;
    background: var(--deep);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-m);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--font-sm);
    outline: none;
  }
  .kc-cal-hotkeys-filter:focus {
    border-color: var(--accent);
  }
  .kc-cal-hotkeys-body {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    /* Push the scrollbar away from row labels — without this they
       butted up against it (см. PR-feedback). Both sides padded so
       the scrollbar visually centres in the gutter. */
    padding-right: var(--space-md);
    padding-left: 2px;
  }
  .kc-cal-hotkeys-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  .kc-cal-hotkeys-section-title {
    font-size: var(--font-2xs);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
  }
  .kc-cal-hotkeys-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 6px 0;
  }
  .kc-cal-hotkeys-key {
    flex: 0 0 auto;
    padding: 2px 8px;
    background: var(--deep);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-s);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--font-xs);
    color: var(--ink-secondary);
    min-width: 32px;
    text-align: center;
  }
  .kc-cal-hotkeys-label {
    flex: 1 1 auto;
    text-align: right;
    color: var(--ink-secondary);
    font-size: var(--font-sm);
  }
  .kc-cal-hotkeys-empty {
    color: var(--ink-muted);
    text-align: center;
    padding: var(--space-lg) 0;
    font-size: var(--font-sm);
  }

  /* Epic S — Starting Soon overlay. Bottom-right toast, sits above
     the calendar grid but below modals (z 60 < .modal-overlay 100). */
  .kc-starting-soon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 280px;
    padding: var(--space-md) var(--space-lg);
    background: var(--raised);
    border: 1px solid var(--border-mid);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-m);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: kc-starting-soon-in 0.18s ease-out;
  }
  @keyframes kc-starting-soon-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .kc-starting-soon--ongoing { border-left-color: var(--live); }
  .kc-starting-soon__dismiss {
    position: absolute;
    top: 6px; right: 8px;
    width: 22px; height: 22px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--ink-muted);
    font-size: 16px; line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-s);
  }
  .kc-starting-soon__dismiss:hover {
    background: var(--surface);
    color: var(--ink);
  }
  .kc-starting-soon__title {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--ink);
    padding-right: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .kc-starting-soon__subtitle {
    font-size: var(--font-sm);
    color: var(--ink-muted);
  }
  .kc-starting-soon--ongoing .kc-starting-soon__subtitle {
    color: var(--live);
    font-weight: 500;
  }
  .kc-starting-soon__join {
    margin-top: 4px;
    padding: 6px 12px;
    background: var(--accent);
    color: var(--color-white-100);
    border: none;
    border-radius: var(--radius-s);
    font: inherit;
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    align-self: flex-start;
  }
  .kc-starting-soon__join:hover { filter: brightness(1.08); }
  .kc-starting-soon--ongoing .kc-starting-soon__join { background: var(--live); }