/* Settings modal — Discord-style fullscreen-ish layout.

   The modal grows to fill most of the viewport; nav rail on the
   left, scrollable content panel on the right. Section bodies live
   inside the same .modal-content; only the active one has
   `data-settings-section` matching `body.dataset.settingsSection`.

   Existing modules (profile.js / dm-privacy.js / notifications-
   settings.js) still target the original section IDs (profileForm,
   privacySection, notificationsSection) — the new nav just toggles
   `[data-settings-section]` on a wrapper, the inner forms stay put.
*/

  /* Start the overlay below the Wails desktop titlebar so the modal
     doesn't overlap the «Чаты» / traffic-lights chrome. 0px in the
     browser, 32px under html.kc-desktop. */
  #settingsModal {
    top: var(--kc-titlebar-h, 0);
  }

  /* Override the legacy 680px modal sizing — Discord parity. The
     inner modal is also a few px shorter so the centered placement
     stays visually centred against the new overlay top. */
  #settingsModal .modal {
    width: min(1180px, 100vw - 64px);
    max-width: none;
    height: min(800px, calc(100vh - 64px - var(--kc-titlebar-h, 0px)));
    max-height: none;
  }

  #settingsModal .modal-nav {
    width: 232px;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    overflow-y: auto;
    /* Клик по nav-item не должен оставлять text-selection. Search-
       input исключён ниже — там native selection нужна. */
    user-select: none;
    -webkit-user-select: none;
  }
  #settingsModal .modal-nav .kc-settings-search {
    user-select: text;
    -webkit-user-select: text;
  }

  #settingsModal .modal-content {
    padding: var(--space-2xl) var(--space-2xl);
    max-width: none;
  }

  /* Nav search box (Discord parity) — filters items by label. */
  .kc-settings-search {
    width: 100%;
    height: 32px;
    margin-bottom: var(--space-md);
    padding: 0 var(--space-md);
    background: var(--deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--ink);
    font: inherit;
    font-size: var(--font-sm);
    outline: none;
    transition: border-color var(--transition);
  }
  .kc-settings-search:focus { border-color: var(--accent); }

  /* Each .modal-nav-item now hosts an optional icon span on the left. */
  #settingsModal .modal-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px var(--space-md);
    height: 32px;
  }
  #settingsModal .modal-nav-item .kc-icon {
    --kc-icon-size: 16px;
    flex-shrink: 0;
  }

  /* Hide nav items filtered out by the search. */
  #settingsModal .modal-nav-item[hidden] { display: none; }
  #settingsModal .modal-nav-label[hidden],
  #settingsModal .modal-nav-divider[hidden] { display: none; }

  /* Section visibility — only the section matching the active key is
     shown. JS sets `body.dataset.settingsSection`. */
  #settingsModal [data-settings-section] { display: none; }
  body[data-settings-section="account"] #settingsModal [data-settings-section="account"],
  body[data-settings-section="privacy"] #settingsModal [data-settings-section="privacy"],
  body[data-settings-section="sessions"] #settingsModal [data-settings-section="sessions"],
  body[data-settings-section="connections"] #settingsModal [data-settings-section="connections"],
  body[data-settings-section="notifications"] #settingsModal [data-settings-section="notifications"],
  body[data-settings-section="appearance"] #settingsModal [data-settings-section="appearance"],
  body[data-settings-section="voice-video"] #settingsModal [data-settings-section="voice-video"],
  body[data-settings-section="hotkeys"] #settingsModal [data-settings-section="hotkeys"],
  body[data-settings-section="language"] #settingsModal [data-settings-section="language"],
  body[data-settings-section="calendar"] #settingsModal [data-settings-section="calendar"],
  body[data-settings-section="about"] #settingsModal [data-settings-section="about"] {
    display: block;
  }

  /* Default — show «account» when no key is set yet. */
  body:not([data-settings-section]) #settingsModal [data-settings-section="account"] {
    display: block;
  }

  /* ── Server settings modal — mirrors #settingsModal layout ────────── */
  /* Two-pane (nav + content) for admin server settings. Same flex layout
     as user-settings; matches that modal's footprint so wide content
     (roles permissions matrix, audit log, automod editor) gets room to
     breathe instead of squeezing into 880px. */
  #serverSettingsModal .modal {
    width: min(1440px, 100vw - 48px);
    max-width: none;
    height: min(900px, calc(100vh - 48px - var(--kc-titlebar-h, 0px)));
    max-height: none;
  }
  #serverSettingsModal .modal-nav {
    width: 232px;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    overflow-y: auto;
    user-select: none;
    -webkit-user-select: none;
  }
  #serverSettingsModal .modal-content {
    padding: var(--space-2xl) var(--space-2xl);
    max-width: none;
    position: relative;
    overflow-y: auto;
  }
  #serverSettingsModal .modal-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px var(--space-md);
    height: 32px;
  }
  #serverSettingsModal #serverSettingsHeading {
    margin: 0 0 var(--space-xl) 0;
  }

  /* Section visibility — toggled by JS via body[data-server-settings-section]. */
  #serverSettingsModal [data-server-settings-section] { display: none; }
  body[data-server-settings-section="overview"] #serverSettingsModal [data-server-settings-section="overview"],
  body[data-server-settings-section="roles"] #serverSettingsModal [data-server-settings-section="roles"],
  body[data-server-settings-section="welcome"] #serverSettingsModal [data-server-settings-section="welcome"],
  body[data-server-settings-section="emojis"] #serverSettingsModal [data-server-settings-section="emojis"],
  body[data-server-settings-section="automod"] #serverSettingsModal [data-server-settings-section="automod"],
  body[data-server-settings-section="bans"] #serverSettingsModal [data-server-settings-section="bans"],
  body[data-server-settings-section="timeouts"] #serverSettingsModal [data-server-settings-section="timeouts"],
  body[data-server-settings-section="bots"] #serverSettingsModal [data-server-settings-section="bots"],
  body[data-server-settings-section="events"] #serverSettingsModal [data-server-settings-section="events"],
  body[data-server-settings-section="analytics"] #serverSettingsModal [data-server-settings-section="analytics"],
  body[data-server-settings-section="audit-log"] #serverSettingsModal [data-server-settings-section="audit-log"] {
    display: block;
  }
  /* Default — show «overview» when no key is set yet. */
  body:not([data-server-settings-section]) #serverSettingsModal [data-server-settings-section="overview"] {
    display: block;
  }

  /* ── Card primitives ───────────────────────────────────────────── */

  /* Same content width across every section so headings, fields and
     cards line up vertically when the user navigates. The inner
     #profileForm uses the same 640px ceiling. Centered horizontally
     within the .modal-content so the form sits visually under the
     heading even on wide screens. */
  .kc-settings-section {
    max-width: 640px;
    margin: 0 auto;
  }
  /* Server-settings sections sit flush-left under the heading (which
     is also left-aligned). The 640px reading-column cap stays for
     form-style sections but anchors at the left edge of the content. */
  #serverSettingsModal .kc-settings-section {
    margin: 0;
  }
  /* Wide sections — break out of the 640px reading-column ceiling so
     multi-pane editors (roles + perms grid, bots list, audit log)
     get the full modal width. The 640px cap stays the default for
     plain-form sections (overview, welcome, automod). */
  #serverSettingsModal [data-server-settings-section="roles"],
  #serverSettingsModal [data-server-settings-section="bots"],
  #serverSettingsModal [data-server-settings-section="events"],
  #serverSettingsModal [data-server-settings-section="analytics"],
  #serverSettingsModal [data-server-settings-section="audit-log"] {
    max-width: none;
  }
  /* Account form has its own inline max-width — match the centered
     placement so it doesn't look offset against the other sections. */
  #settingsModal #profileForm {
    margin: 0 auto;
  }
  /* Section heading (single global #settingsHeading) sits above the
     section body — centre it too so they share a vertical axis. */
  #settingsModal #settingsHeading {
    max-width: 640px;
    margin: 0 auto var(--space-xl);
  }

  .kc-settings-card {
    background: var(--deep);
    border-radius: var(--radius-m);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
  }

  .kc-settings-card-title {
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    margin-bottom: var(--space-sm);
  }

  /* Row inside a card — label + value on the left, action button right. */
  .kc-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border);
  }
  .kc-settings-row:first-child { padding-top: 0; }
  .kc-settings-row:last-child { padding-bottom: 0; border-bottom: 0; }
  .kc-settings-row-label {
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    margin-bottom: 4px;
  }
  .kc-settings-row-value {
    font-size: var(--font-md);
    color: var(--ink);
    word-break: break-word;
  }
  .kc-settings-row-help {
    font-size: var(--font-xs);
    color: var(--ink-muted);
    margin-top: 4px;
  }
  .kc-settings-row-main { flex: 1; min-width: 0; }
  .kc-settings-row-action { flex-shrink: 0; }

  .kc-settings-btn {
    padding: 6px 16px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-s);
    font: inherit;
    font-size: var(--font-sm);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
  }
  .kc-settings-btn:hover { background: var(--raised); border-color: var(--ink-ghost); }
  .kc-settings-btn--danger { color: var(--coral); border-color: var(--coral-soft); }
  /* Without its own :hover the base rule wins and the button goes neutral
     (--raised bg + --ink-ghost border) exactly on hover, dropping the
     destructive cue — mirror how the --accent variant keeps its colour. */
  .kc-settings-btn--danger:hover { background: var(--coral-soft); border-color: var(--coral); color: var(--coral); }
  .kc-settings-btn--accent { background: var(--accent); color: var(--color-white-100); border-color: var(--accent); }
  .kc-settings-btn--accent:hover { background: var(--accent); filter: brightness(1.1); }
  .kc-settings-btn--primary {
    background: var(--accent);
    color: var(--color-white-100);
    border-color: var(--accent);
  }
  .kc-settings-btn--primary:hover { filter: brightness(1.08); }

  /* Epic P — Working Hours editor. One row per day-of-week. */
  .kc-wh-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 6px 0;
  }
  .kc-wh-row + .kc-wh-row { border-top: 1px solid var(--border); }
  .kc-wh-label {
    flex: 0 0 180px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--ink);
    font-size: var(--font-sm);
    cursor: pointer;
  }
  .kc-wh-label input[type="checkbox"] {
    accent-color: var(--accent);
    cursor: pointer;
  }
  .kc-wh-times {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
  }
  .kc-wh-times[data-off] { opacity: 0.4; }
  .kc-wh-times input[type="time"] {
    padding: 4px 8px;
    background: var(--elevated);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    font: inherit;
    font-size: var(--font-sm);
  }
  .kc-wh-times input[type="time"]:disabled { cursor: not-allowed; }
  .kc-wh-dash { color: var(--ink-muted); }

  /* Q.3 — User defaults editor (Settings → Календарь → Дефолты). */
  .kc-ud-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
  @media (max-width: 540px) {
    .kc-ud-grid { grid-template-columns: 1fr; }
  }
  .kc-ud-field { display: flex; flex-direction: column; gap: 4px; }
  .kc-ud-label {
    font-size: var(--font-xs);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .kc-ud-hint {
    font-size: var(--font-xs);
    color: var(--ink-muted);
    font-style: italic;
    margin-top: 4px;
  }
  .kc-ud-rem-list {
    display: flex; flex-direction: column;
    gap: 6px;
    margin-top: 6px;
  }
  .kc-ud-rem-row {
    display: flex; align-items: center; gap: var(--space-sm);
  }
  .kc-ud-rem-sel { flex: 1; }
  .kc-ud-rem-remove {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    color: var(--ink-muted);
    font: inherit; font-size: 16px; line-height: 1;
    cursor: pointer;
  }
  .kc-ud-rem-remove:hover {
    color: var(--coral); border-color: var(--coral);
  }
  .kc-ud-rem-actions {
    display: flex; gap: var(--space-sm);
    margin-top: var(--space-sm);
  }
  .kc-ud-rem-btn {
    padding: 6px 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;
  }
  .kc-ud-rem-btn:hover {
    color: var(--ink); border-color: var(--ink-secondary);
    background: var(--surface);
  }

  /* «Скоро» placeholder section — centered icon + text. */
  .kc-settings-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
    color: var(--ink-muted);
    min-height: 320px;
    gap: var(--space-md);
  }
  .kc-settings-placeholder-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--deep);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-ghost);
  }
  .kc-settings-placeholder-title {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--ink);
  }

  /* Hotkeys table — read-only справочник. */
  .kc-hotkeys-group {
    margin-bottom: var(--space-xl);
  }
  .kc-hotkeys-group-title {
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    margin-bottom: var(--space-md);
  }
  .kc-hotkeys-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .kc-hotkeys-row:last-child { border-bottom: 0; }
  .kc-hotkeys-row-label { font-size: var(--font-md); color: var(--ink); }
  .kc-hotkeys-keys {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
  }
  .kc-hotkey-pill {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: var(--deep);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-s);
    color: var(--ink);
    font-size: var(--font-xs);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Sessions section — current session card highlighted. */
  .kc-session-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border);
  }
  .kc-session-row:last-child { border-bottom: 0; }
  .kc-session-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-m);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-secondary);
    flex-shrink: 0;
  }
  .kc-session-main { flex: 1; min-width: 0; }
  .kc-session-name {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }
  .kc-session-current-badge {
    font-size: var(--font-2xs);
    font-weight: 600;
    color: var(--success);
    background: var(--success-soft);
    padding: 2px 8px;
    border-radius: 10px;
  }
  .kc-session-meta {
    font-size: var(--font-xs);
    color: var(--ink-muted);
    margin-top: 2px;
  }

  /* ── kc-select — custom dropdown matching the rest of the DS ────
     Native <select> can't be styled in WKWebView macOS — the popup
     uses the system control. Replace with a button + popover-menu
     div so the dropdown looks the same as right-click context menus
     and the message «Ещё» menu. */
  .kc-select {
    position: relative;
    display: inline-block;
  }
  .kc-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-s);
    color: var(--ink);
    font: inherit;
    font-size: var(--font-sm);
    cursor: pointer;
    min-width: 180px;
    transition: background var(--transition), border-color var(--transition);
  }
  .kc-select-trigger:hover { background: var(--raised); border-color: var(--ink-ghost); }
  .kc-select-label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kc-select-chevron {
    flex-shrink: 0;
    color: var(--ink-muted);
    transition: transform var(--transition);
  }
  .kc-select.open .kc-select-chevron { transform: rotate(180deg); }

  .kc-select-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 100%;
    background: var(--elevated);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-m);
    padding: 4px;
    z-index: 100;
    display: none;
  }
  .kc-select.open .kc-select-menu { display: block; }
  .kc-select-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 12px;
    background: transparent;
    border: 0;
    color: var(--ink);
    font: inherit;
    font-size: var(--font-sm);
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-s);
    white-space: nowrap;
    transition: background var(--transition);
  }
  .kc-select-option:hover { background: var(--surface); }
  .kc-select-option.active { background: var(--accent); color: var(--on-accent); }

  /* Native <select> в server-settings — закрытое состояние стилизуем
     под наш input-look. Popup-окно остаётся нативным (его поведение
     полностью контролирует ОС), но closed state теперь выглядит
     консистентно с остальными полями формы. */
  #serverSettingsModal select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 10px 36px 10px 12px;
    background-color: var(--surface);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-m);
    color: var(--ink);
    font: inherit;
    font-size: var(--font-sm);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
  }
  #serverSettingsModal select:hover {
    background-color: var(--raised);
    border-color: var(--ink-ghost);
  }
  #serverSettingsModal select:focus {
    outline: none;
    border-color: var(--accent);
  }

  /* About section — version stack. */
  .kc-about-version {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--font-sm);
    color: var(--ink-secondary);
  }

  /* Server-settings → Эмодзи grid. Card-level hover surfaces the
     rename/delete icons in the top-right corner so the resting card
     stays clean (Discord-style affordance). */
  .emoji-card {
    position: relative;
    background: var(--deep);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color var(--transition);
  }
  .emoji-card:hover { border-color: var(--accent); }

  .emoji-card-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
  }
  .emoji-card:hover .emoji-card-actions,
  .emoji-card:focus-within .emoji-card-actions {
    opacity: 1;
    pointer-events: auto;
  }

  .emoji-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
  }
  .emoji-card-action:hover { background: var(--accent); color: var(--on-accent); }
  .emoji-card-action--danger:hover { background: var(--danger); color: var(--on-danger, #fff); }