body { background: var(--cream); min-height: 100vh; margin: 0; }

  /* ── Settings Shell (sidebar + content) ─────────────────── */
  .dashboard-body { display: flex; min-height: 100vh; }

  /* Make the settings sidebar sticky so it stays fixed while scrolling */
  .dashboard-sidebar.settings-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }

  /* Section nav within employee settings cards */
  .settings-section-nav {
    padding: 12px 16px; border-bottom: 1px solid var(--border);
  }
  .settings-section-nav .sidebar-section-label {
    margin-bottom: 8px;
  }
  .settings-section-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 4px;
    font-size: 13px; color: var(--text-muted);
    text-decoration: none; cursor: pointer;
    transition: all 0.15s; border: none; background: none;
    width: 100%; text-align: left;
  }
  .settings-section-item:hover { background: var(--cream); color: var(--navy); }
  .settings-section-item.active { background: var(--cream); color: var(--navy); font-weight: 500; }
  .settings-section-item svg { width: 16px; height: 16px; flex-shrink: 0; }

  .settings-body { max-width: 800px; margin: 32px auto; padding: 0 24px; }

  .settings-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
  }
  .settings-card h2 { font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 16px; }
  .settings-card p.desc { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }

  /* Form */
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; min-width: 0; }
  .form-group { min-width: 0; }
  .form-group label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
  .form-group input, .form-group select {
    width: 100%; padding: 9px 12px; border: 1px solid var(--border);
    border-radius: 6px; font-size: 13px; font-family: 'DM Sans', sans-serif;
    color: var(--navy); background: var(--white); box-sizing: border-box;
    min-width: 0;
  }
  .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--navy); }
  .form-group input[readonly] { background: var(--cream); color: var(--text-muted); cursor: default; font-size: 12px; }

  .save-btn {
    background: var(--navy); color: #fff; border: none;
    padding: 10px 24px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer;
  }
  .save-btn:hover { opacity: 0.9; }
  .save-status { margin-left: 12px; font-size: 13px; }
  .btn-row { display: flex; align-items: center; margin-top: 16px; }

  /* ── Section Headers ───────────────────────────────────────── */
  .section-label {
    font-size: 11px; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted);
    margin: 32px 0 12px; padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  .section-label:first-child { margin-top: 0; }

  /* ── Skills ─────────────────────────────────────────────────── */
  .skill-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid #f0f0f0;
  }
  .skill-row:last-child { border-bottom: none; }
  .skill-info { flex: 1; }
  .skill-label { font-size: 13px; color: var(--navy); }
  .skill-desc { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
  .skill-badge {
    font-size: 9px; font-weight: 600; text-transform: uppercase;
    padding: 2px 6px; border-radius: 3px; margin-left: 8px;
    background: #e0e7ff; color: #4338ca;
  }

  /* Toggle switch */
  .toggle-switch {
    position: relative; width: 36px; height: 20px; flex-shrink: 0; margin-left: 12px;
  }
  .toggle-switch input { opacity: 0; width: 0; height: 0; }
  .toggle-slider {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: #ccc; border-radius: 20px; cursor: pointer; transition: 0.2s;
  }
  .toggle-slider::before {
    content: ''; position: absolute; width: 16px; height: 16px;
    left: 2px; bottom: 2px; background: #fff; border-radius: 50%; transition: 0.2s;
  }
  .toggle-switch input:checked + .toggle-slider { background: var(--navy); }
  .toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
  .toggle-switch input:disabled + .toggle-slider { opacity: 0.4; cursor: not-allowed; }

  /* ── Preferences ────────────────────────────────────────────── */
  .pref-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; background: var(--cream);
    border-radius: 6px; margin-bottom: 6px; font-size: 13px; line-height: 1.5;
  }
  .pref-item-text { flex: 1; color: var(--text); }
  .pref-delete {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 14px; padding: 0 4px; line-height: 1;
  }
  .pref-delete:hover { color: #dc2626; }
  .pref-add-row { display: flex; gap: 8px; margin-top: 8px; margin-bottom: 8px; }
  .pref-input {
    flex: 1; padding: 8px 12px; border: 1px solid var(--border);
    border-radius: 6px; font-size: 13px; font-family: 'DM Sans', sans-serif;
  }
  .pref-input:focus { outline: none; border-color: var(--navy); }
  .pref-add-btn {
    background: var(--navy); color: #fff; border: none;
    padding: 8px 14px; border-radius: 6px; font-size: 12px;
    font-weight: 500; cursor: pointer; white-space: nowrap;
  }
  .pref-add-btn:hover { opacity: 0.9; }

  /* ── Enhancements ───────────────────────────────────────────── */
  .enh-item {
    padding: 12px 14px; background: var(--cream);
    border-radius: 8px; margin-bottom: 8px; font-size: 13px;
    line-height: 1.5; position: relative;
  }
  .enh-item-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
  .enh-item-badge {
    background: var(--navy); color: #fff; font-size: 10px;
    padding: 1px 6px; border-radius: 3px; font-weight: 500;
  }
  .enh-item-date { color: var(--text-muted); font-size: 11px; }
  .enh-item-action { font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 500; }
  .enh-item-action.accepted { background: #dcfce7; color: #16a34a; }
  .enh-item-action.recommended { background: #dbeafe; color: #2563eb; }
  .enh-item-text { color: var(--text); }
  .enh-delete-btn {
    position: absolute; top: 10px; right: 10px;
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px;
  }
  .enh-delete-btn:hover { background: #fee2e2; color: #dc2626; }

  /* ── Calendar ───────────────────────────────────────────────── */
  .cal-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid #f0f0f0;
  }
  .cal-item:last-child { border-bottom: none; }
  .cal-name { flex: 1; font-size: 13px; color: var(--navy); }
  .cal-remove {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 14px; padding: 2px 6px; opacity: 0;
    transition: opacity 0.15s;
  }
  .cal-item:hover .cal-remove { opacity: 1; }
  .cal-remove:hover { color: #dc2626; }

  /* ── Collapsible Skill Categories ──────────────────────────── */
  .skill-category-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; cursor: pointer; user-select: none;
    border-bottom: 1px solid #f0f0f0;
  }
  .skill-category-header:hover { background: var(--cream); margin: 0 -12px; padding: 10px 12px; border-radius: 6px; }
  .skill-category-left { display: flex; align-items: center; gap: 8px; }
  .skill-category-chevron {
    font-size: 11px; color: var(--text-muted); transition: transform 0.2s;
    display: inline-block; width: 16px; text-align: center;
  }
  .skill-category-header.open .skill-category-chevron { transform: rotate(90deg); }
  .skill-category-title { font-size: 13px; font-weight: 500; color: var(--navy); }
  .skill-category-count { font-size: 11px; color: var(--text-muted); }
  .skill-category-body {
    display: none; padding: 0 0 4px 24px;
  }
  .skill-category-header.open + .skill-category-body { display: block; }

  /* ── Meeting Duration ──────────────────────────────────────── */
  .duration-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; margin-bottom: 6px; }
  .duration-pill {
    padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 12px; font-weight: 500; background: var(--white); color: var(--navy);
    cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.15s;
  }
  .duration-pill:hover { border-color: var(--navy); }
  .duration-pill.active { background: var(--navy); color: #fff; border-color: var(--navy); }

  /* ── Phone dial-in ──────────────────────────────────────────── */
  .dialin-row {
    display: flex; align-items: center; gap: 8px; margin-top: 10px; margin-bottom: 8px;
  }
  .dialin-input {
    flex: 1; padding: 8px 12px; border: 1px solid var(--border);
    border-radius: 6px; font-size: 13px; font-family: 'DM Sans', sans-serif;
    color: var(--navy);
  }
  .dialin-input:focus { outline: none; border-color: var(--navy); }
  .dialin-save {
    background: var(--navy); color: #fff; border: none;
    padding: 8px 14px; border-radius: 6px; font-size: 12px;
    font-weight: 500; cursor: pointer; white-space: nowrap;
  }
  .dialin-save:hover { opacity: 0.9; }

  /* ── Add Calendar button ──────────────────────────────────── */
  .add-calendar-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--navy); color: #fff; border: none;
    padding: 8px 16px; border-radius: 6px; font-size: 12px;
    font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif;
    margin-top: 12px;
  }
  .add-calendar-btn:hover { opacity: 0.9; }
  .add-calendar-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .cal-oauth-status {
    font-size: 12px; color: var(--text-muted); margin-top: 8px;
  }

  /* ── Coming Soon group (integrations) ──────────────────────── */
  .coming-soon-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; cursor: pointer; user-select: none;
    color: var(--text-muted); font-size: 12px;
    border-top: 1px solid #f0f0f0; margin-top: 4px;
  }
  .coming-soon-toggle:hover { color: var(--navy); }
  .coming-soon-toggle .chevron { transition: transform 0.2s; display: inline-block; font-size: 10px; }
  .coming-soon-toggle.open .chevron { transform: rotate(90deg); }
  .coming-soon-list { display: none; }
  .coming-soon-toggle.open + .coming-soon-list { display: block; }
  .coming-soon-list .skill-row { opacity: 0.55; }

  /* ── Employee List (account settings view) ─────────────────── */
  .emp-list-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid #f0f0f0;
    text-decoration: none; color: inherit; transition: background 0.15s;
  }
  .emp-list-item:last-child { border-bottom: none; }
  .emp-list-item:hover { background: var(--cream); border-radius: 6px; }
  .emp-list-info { display: flex; align-items: center; gap: 12px; }
  .emp-list-avatar {
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
    background: var(--navy); display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; font-weight: 500; flex-shrink: 0;
  }
  .emp-list-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .emp-list-name { font-size: 14px; font-weight: 500; color: var(--navy); }
  .emp-list-title { font-size: 12px; color: var(--text-muted); }
  .emp-list-arrow { color: var(--text-muted); font-size: 16px; }
  .emp-list-item-restricted {
    opacity: 0.45; filter: grayscale(0.4); cursor: default; pointer-events: none;
  }
  .emp-list-item-restricted .emp-list-arrow { display: none; }
  .emp-list-restricted-label {
    font-size: 11px; color: #94a3b8; font-style: italic;
  }

  /* ── Drag handle inside employee rows ─────────────────────── */
  .emp-drag-handle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 24px; margin-right: 2px;
    color: #94a3b8; cursor: grab; flex-shrink: 0;
    border-radius: 3px; transition: color 0.12s, background 0.12s;
  }
  .emp-drag-handle:hover { color: var(--navy); background: var(--cream); }
  .emp-drag-handle:active { cursor: grabbing; }
  .emp-drag-handle-disabled { opacity: 0.2; cursor: default; pointer-events: none; }

  /* Drop indicators during drag */
  .emp-list-item.drag-source { opacity: 0.4; }
  .emp-list-item.drag-over-top    { box-shadow: 0 -2px 0 0 var(--navy) inset; }
  .emp-list-item.drag-over-bottom { box-shadow: 0  2px 0 0 var(--navy) inset; }

  /* ── Back link ─────────────────────────────────────────────── */
  .back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--text-muted); text-decoration: none;
    margin-bottom: 16px;
  }
  .back-link:hover { color: var(--navy); }

  /* ── Empty state ────────────────────────────────────────────── */
  .empty-hint { font-size: 13px; color: var(--text-muted); font-style: italic; padding: 8px 0; }

  /* ── Briefing settings ─────────────────────────────────────── */
  .setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .setting-row-left { flex: 1; }
  .setting-row-left strong { font-size: 14px; color: var(--text); }
  .setting-row-left .desc { font-size: 12px; color: var(--text-muted); }
  .settings-select {
    width: 200px;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
  }
  .settings-select:focus { border-color: var(--navy); outline: none; }
  .field-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 4px;
  }
  .section-divider {
    border: none;
    border-top: 1px solid var(--border, #eee);
    margin: 16px 0;
  }
  .briefing-section { padding: 4px 0; }

  /* ── Time Entry Reminders ────────────────────────────────── */
  .reminder-subsection { margin-top: 16px; padding: 12px 0; }
  .reminder-subsection:first-child { margin-top: 0; }
  .recipient-radio-group { display: flex; gap: 16px; margin: 8px 0; }
  .recipient-radio-group label {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--text); cursor: pointer;
  }
  .recipient-radio-group input[type="radio"] { accent-color: var(--navy); }
  .attorney-checkbox-list {
    max-height: 300px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 6px; margin-top: 8px;
  }
  .attorney-checkbox-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
  }
  .attorney-checkbox-item:last-child { border-bottom: none; }
  .attorney-checkbox-item input[type="checkbox"] { accent-color: var(--navy); flex-shrink: 0; }
  .attorney-checkbox-item label { flex: 1; cursor: pointer; display: flex; align-items: center; gap: 8px; }
  .attorney-checkbox-email { color: var(--text-muted); font-size: 12px; }
  .attorney-checkbox-item.select-all { background: var(--cream); font-weight: 500; }

  /* ── Mail Settings ──────────────────────────────────────── */
  .mail-font-row {
    display: flex; gap: 16px; align-items: flex-end; margin-bottom: 16px;
  }
  .mail-font-row .form-group { flex: 1; }
  .mail-font-preview {
    margin-top: 12px; padding: 16px; background: var(--cream);
    border: 1px solid var(--border); border-radius: 8px;
  }
  .mail-font-preview-label {
    font-size: 11px; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 8px;
  }
  .mail-font-preview-text { color: #222; line-height: 1.6; }
  .mail-save-status {
    font-size: 12px; margin-left: 8px; transition: opacity 0.3s;
  }

/* ── Locked-by-other-member setting banner ───────────────── */
.setting-locked-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  color: #78350f;
  font-size: 13px;
  line-height: 1.5;
}
.setting-locked-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #92400e;
}
.briefing-section.is-locked {
  opacity: 0.7;
}
.toggle-switch.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.toggle-switch input:disabled + .toggle-slider {
  cursor: not-allowed;
}

/* ── Account integrations row ─────────────────────────────── */
.integration-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}
.integration-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.integration-info svg {
  flex-shrink: 0;
  color: var(--navy);
  opacity: 0.7;
}
.integration-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}
.integration-status {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.integration-status.connected {
  color: var(--success, #16a34a);
}