/* ── Notion-style settings/documents modal ── */

.sm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.sm-overlay.open {
  background: rgba(0, 0, 0, 0.4);
}

.sm-modal {
  display: flex;
  width: 90vw;
  max-width: 960px;
  height: 85vh;
  max-height: 680px;
  transition: opacity 0.15s, transform 0.15s, max-width 0.2s ease;
  background: var(--color-card, #fff);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.97) translateY(8px);
  transition: opacity 0.15s, transform 0.15s;
}
.sm-overlay.open .sm-modal {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── Left nav ── */
.sm-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--color-surface, #fafafa);
  border-right: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
  padding: 16px 12px;
  overflow-y: auto;
}

.sm-nav-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #999);
  padding: 16px 8px 4px;
  margin: 0;
}
.sm-nav-group-label:first-child {
  padding-top: 4px;
}

.sm-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary, #555);
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.1s, color 0.1s;
}
.sm-nav-item:hover {
  background: var(--color-hover, rgba(0, 0, 0, 0.04));
  color: var(--color-text-primary, #333);
}
.sm-nav-item:focus-visible {
  outline: 2px solid var(--color-brand, #144629);
  outline-offset: -2px;
  border-radius: 6px;
}
.sm-nav-item.active {
  background: var(--color-brand-subtle, rgba(20, 70, 41, 0.08));
  color: var(--color-brand, #144629);
  font-weight: 500;
}
.sm-nav-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.sm-nav-item.active svg {
  opacity: 1;
}

/* ── User nav item (Notion-style profile in sidebar) ── */
.sm-nav-user {
  gap: 10px;
  padding: 6px 8px;
  font-weight: 500;
  color: var(--color-text-primary, #333);
}
.sm-nav-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.sm-nav-avatar-fallback {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-brand, #144629);
  color: var(--color-brand-text, #fff);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Right content ── */
.sm-content {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sm-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 20px;
  color: var(--color-text-muted, #999);
  cursor: pointer;
  z-index: 2;
  transition: background 0.1s, color 0.1s;
  line-height: 1;
}
.sm-close:hover {
  background: var(--color-hover, rgba(0, 0, 0, 0.06));
  color: var(--color-text-primary, #333);
}

.sm-content-inner {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 24px 48px 24px 32px;
}

.sm-loading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}
.sm-shimmer-line {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: sm-shimmer 1.4s ease infinite;
}
.sm-shimmer-heading {
  height: 22px;
  width: 40%;
  border-radius: 6px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: sm-shimmer 1.4s ease infinite;
  margin-bottom: 4px;
}
.sm-shimmer-block {
  height: 64px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: sm-shimmer 1.4s ease infinite;
}
@keyframes sm-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.sm-flash {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.95);
  padding: 6px 18px;
  background: #1c1917;
  border: none;
  border-radius: 100px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sm-flash.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.sm-flash-error {
  background: #fef2f2;
  color: #991b1b;
}
.sm-flash-embed {
  display: none;
}

.sm-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 200px;
  color: #999;
  font-size: 13px;
}
.sm-retry {
  color: var(--color-brand, #144629);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  font-family: inherit;
}

/* ── Back navigation bar ── */
.sm-back-bar {
  margin: -24px -48px 16px -32px;
  padding: 8px 48px 8px 32px;
  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
  background: var(--color-surface, #fafafa);
}
.sm-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 4px;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary, #666);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, color 0.1s;
}
.sm-back-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #333;
}
.sm-back-btn svg {
  flex-shrink: 0;
}

/* ── Widen modal for plans / usage pages ── */
.sm-modal:has(.settings-content-wide) {
  max-width: 1120px;
  max-height: 740px;
}

/* ── Override page styles when inside modal ── */
.sm-content-inner .drive-page { max-width: none; }
.sm-content-inner .p-8 { padding: 0; }
.sm-content-inner .app-empty-state {
  min-height: 0;
  margin: 0;
  padding-top: 48px;
  flex: 1;
}
.sm-content-inner .app-empty-state::before { flex: 1; }
.sm-content-inner .app-empty-state::after { flex: 4; }

/* Notion-style content header: breadcrumb + large title + subtitle */
.sm-content-inner .settings-page-header {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sm-content-inner .settings-page-breadcrumb {
  font-size: 12px;
  color: var(--color-text-muted, #999);
  margin: 0 0 2px;
}
.sm-content-inner h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text-primary, #1a1a1a);
  margin: 0;
  letter-spacing: -0.01em;
}
.sm-content-inner .settings-page-header p {
  font-size: 13px;
  color: var(--color-text-muted, #999);
  margin: 4px 0 0;
}

/* ── Mobile-only elements (hidden on desktop) ── */
.sm-mobile-back {
  display: none;
}
.sm-close-mobile {
  display: none;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .sm-modal {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }

  /* Sidebar takes full width by default on mobile */
  .sm-sidebar {
    width: 100%;
    flex-shrink: 0;
  }

  /* Content hidden until a section is selected */
  .sm-content {
    display: none;
  }

  /* When content is active: hide sidebar, show content */
  .sm-modal.sm-showing-content .sm-sidebar {
    display: none;
  }
  .sm-modal.sm-showing-content .sm-content {
    display: flex;
  }

  /* Mobile back button */
  .sm-mobile-back {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: -24px -16px 16px -16px;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: #fafafa;
    font-size: 13px;
    font-weight: 400;
    color: #666;
    cursor: pointer;
    font-family: inherit;
    width: calc(100% + 32px);
  }
  .sm-mobile-back:hover {
    color: #333;
  }
  .sm-mobile-back svg {
    flex-shrink: 0;
  }

  /* Show close button in sidebar on mobile */
  .sm-close-mobile {
    display: flex;
    position: static;
    margin-left: auto;
    margin-bottom: 4px;
  }

  /* Reduce content padding on mobile */
  .sm-content-inner {
    padding: 24px 16px;
  }

  /* Adjust back bar negative margins for mobile padding */
  .sm-back-bar {
    margin: -24px -16px 16px -16px;
    padding: 8px 16px;
  }
}

/* ── Dark theme overrides ── */
/* Broad override: force all modal content to inherit theme colors.
   This catches inline <style> blocks across all settings pages
   (connections, billing, usage, audit, etc.) without chasing each one. */
[data-theme="wistful_juniper"],
[data-theme="deep_current"] {
  /* Shimmer loading */
  .sm-shimmer-line, .sm-shimmer-heading, .sm-shimmer-block {
    background: linear-gradient(90deg, var(--color-hover) 25%, var(--color-active) 37%, var(--color-hover) 63%);
    background-size: 400% 100%;
  }
  .sm-error { color: var(--color-text-muted); }
  .sm-mobile-back {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
  }

  /* ── Blanket content overrides ── */
  .sm-content-inner {
    color: var(--color-text-primary);
  }

  /* All text inputs, selects, textareas inside modal */
  .sm-content-inner input[type="text"],
  .sm-content-inner input[type="email"],
  .sm-content-inner input[type="search"],
  .sm-content-inner input[type="url"],
  .sm-content-inner input[type="number"],
  .sm-content-inner input[type="date"],
  .sm-content-inner input[type="password"],
  .sm-content-inner select,
  .sm-content-inner textarea {
    background: transparent !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }
  .sm-content-inner input::placeholder,
  .sm-content-inner textarea::placeholder {
    color: var(--color-text-muted) !important;
  }
  .sm-content-inner input:focus,
  .sm-content-inner select:focus,
  .sm-content-inner textarea:focus {
    border-color: var(--color-brand) !important;
  }

  /* All white/light backgrounds inside cards, rows, tables → transparent */
  .sm-content-inner [style*="background:#fff"],
  .sm-content-inner [style*="background: #fff"],
  .sm-content-inner [style*="background:white"],
  .sm-content-inner [style*="background: white"] {
    background: var(--color-card) !important;
  }

  /* Borders */
  .sm-content-inner [style*="border-color"],
  .sm-content-inner [style*="border:1px solid"],
  .sm-content-inner [style*="border-bottom:1px"] {
    border-color: var(--color-border) !important;
  }

  /* Table heads with light bg */
  .sm-content-inner thead,
  .sm-content-inner thead th {
    background: var(--color-surface) !important;
    color: var(--color-text-muted) !important;
    border-color: var(--color-border) !important;
  }
  .sm-content-inner tbody td {
    border-color: var(--color-border) !important;
  }
  .sm-content-inner tbody tr:hover {
    background: var(--color-hover) !important;
  }

  /* Plan cards / pricing cards with white bg */
  .sm-content-inner [style*="background:#fff"],
  .sm-content-inner .plan-card,
  .sm-content-inner .pricing-card {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  /* Connection cards and rows */
  .sm-content-inner .conn-card,
  .sm-content-inner [class*="conn-"] a,
  .sm-content-inner [class*="conn-row"],
  .sm-content-inner [class*="conn-item"] {
    border-color: var(--color-border) !important;
  }

  /* Progress bars and usage sections */
  .sm-content-inner .usage-bar-bg,
  .sm-content-inner [style*="background:rgba(0,0,0,0.0"],
  .sm-content-inner [style*="background: rgba(0,0,0,0.0"] {
    background: var(--color-hover) !important;
  }

  /* Badge-like elements */
  .sm-content-inner [style*="background:rgba(0,0,0,0.05)"],
  .sm-content-inner [style*="background: rgba(0,0,0,0.05)"],
  .sm-content-inner [style*="background:rgba(0,0,0,0.06)"],
  .sm-content-inner [style*="background: rgba(0,0,0,0.06)"] {
    background: var(--color-hover) !important;
  }

  /* All hardcoded dark text inside modal content → theme text */
  .sm-content-inner h1,
  .sm-content-inner h2,
  .sm-content-inner h3,
  .sm-content-inner h4 { color: var(--color-text-primary) !important; }

  .sm-content-inner p,
  .sm-content-inner span,
  .sm-content-inner div,
  .sm-content-inner label,
  .sm-content-inner td,
  .sm-content-inner li {
    color: inherit;
  }

  /* Specific overrides for inline color styles */
  .sm-content-inner [style*="color:#1a1a1a"],
  .sm-content-inner [style*="color: #1a1a1a"],
  .sm-content-inner [style*="color:#333"],
  .sm-content-inner [style*="color: #333"],
  .sm-content-inner [style*="color:#1c1917"],
  .sm-content-inner [style*="color: #1c1917"] {
    color: var(--color-text-primary) !important;
  }
  .sm-content-inner [style*="color:#555"],
  .sm-content-inner [style*="color: #555"],
  .sm-content-inner [style*="color:#666"],
  .sm-content-inner [style*="color: #666"],
  .sm-content-inner [style*="color:#57534e"],
  .sm-content-inner [style*="color:#44403c"] {
    color: var(--color-text-secondary) !important;
  }
  .sm-content-inner [style*="color:#999"],
  .sm-content-inner [style*="color: #999"],
  .sm-content-inner [style*="color:#888"],
  .sm-content-inner [style*="color: #888"],
  .sm-content-inner [style*="color:#aaa"],
  .sm-content-inner [style*="color:#a8a29e"],
  .sm-content-inner [style*="color:#bbb"],
  .sm-content-inner [style*="color:#79716b"] {
    color: var(--color-text-muted) !important;
  }

  /* Hardcoded white backgrounds in inline styles */
  .sm-content-inner [style*="background:#fff"],
  .sm-content-inner [style*="background: #fff"],
  .sm-content-inner [style*="background:#fafafa"],
  .sm-content-inner [style*="background: #fafafa"],
  .sm-content-inner [style*="background:#faf9f7"],
  .sm-content-inner [style*="background: #faf9f7"],
  .sm-content-inner [style*="background:white"],
  .sm-content-inner [style*="background: white"] {
    background: var(--color-card) !important;
  }

  /* Hardcoded border colors in inline styles */
  .sm-content-inner [style*="border-color:rgba(0,0,0"],
  .sm-content-inner [style*="border:1px solid rgba(0,0,0"],
  .sm-content-inner [style*="border-bottom:1px solid rgba(0,0,0"],
  .sm-content-inner [style*="border-top:1px solid rgba(0,0,0"] {
    border-color: var(--color-border) !important;
  }

  /* Brand-colored buttons */
  .sm-content-inner button[style*="background:#144629"],
  .sm-content-inner [style*="background:#144629"],
  .sm-content-inner [style*="background: #144629"] {
    background: var(--color-brand) !important;
    color: var(--color-brand-text) !important;
  }

  /* ── Connection rows (inline <style> in _connection_row.html.erb) ── */
  .sm-content-inner .conn-row {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }
  .sm-content-inner .conn-row:hover { background: var(--color-hover) !important; }
  .sm-content-inner .conn-row-name { color: var(--color-text-primary) !important; }
  .sm-content-inner .conn-row-label { color: var(--color-text-secondary) !important; }
  .sm-content-inner .conn-row-email,
  .sm-content-inner .conn-row-used { color: var(--color-text-muted) !important; }
  .sm-content-inner .conn-row-dot { color: var(--color-text-muted) !important; }
  .sm-content-inner .conn-row-activity { color: var(--color-text-secondary) !important; }
  .sm-content-inner .conn-row-icon { background: var(--color-hover) !important; }
  .sm-content-inner .conn-row-chevron { color: var(--color-text-muted) !important; }
  .sm-content-inner .conn-status-active { background: var(--color-hover) !important; color: var(--color-text-muted) !important; }
  .sm-content-inner .conn-default-badge { background: var(--color-brand-subtle) !important; color: var(--color-brand) !important; }
  .sm-content-inner .conn-scope-personal { background: var(--color-hover) !important; color: var(--color-text-muted) !important; }
  .sm-content-inner .conn-scope-workspace { background: rgba(59,89,152,0.15) !important; }

  /* Connection page sections */
  .sm-content-inner .conn-section-label { color: var(--color-text-muted) !important; }
  .sm-content-inner .conn-trust-banner {
    background: var(--color-brand-subtle) !important;
    border-color: var(--color-border) !important;
  }
  .sm-content-inner .conn-trust-title { color: var(--color-brand) !important; }
  .sm-content-inner .conn-trust-shield { color: var(--color-brand) !important; }
  .sm-content-inner .conn-trust-label { color: var(--color-text-muted) !important; }
  .sm-content-inner .conn-trust-value { color: var(--color-text-secondary) !important; }
  .sm-content-inner .conn-search {
    background: transparent !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }
  .sm-content-inner .conn-search::placeholder { color: var(--color-text-muted) !important; }
  .sm-content-inner .conn-search-icon { color: var(--color-text-muted) !important; }
  .sm-content-inner .conn-no-results { color: var(--color-text-muted) !important; }
  .sm-content-inner .conn-show-disconnected { color: var(--color-text-muted) !important; }
  .sm-content-inner .conn-show-disconnected:hover { color: var(--color-text-secondary) !important; }

  /* Available connection cards */
  .sm-content-inner .conn-add-card {
    background: var(--color-card) !important;
  }
  .sm-content-inner .conn-add-icon { background: var(--color-hover) !important; }
  .sm-content-inner .conn-add-name { color: var(--color-text-primary) !important; }
  .sm-content-inner .conn-add-desc { color: var(--color-text-muted) !important; }
  .sm-content-inner .conn-add-btn { background: var(--color-brand) !important; color: var(--color-brand-text) !important; }

  /* Connection detail page */
  .sm-content-inner .conn-detail-card {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  /* ── Plan banner (white bg across billing/usage) ── */
  .sm-content-inner .plan-banner,
  .sm-content-inner .usage-plan-banner,
  .sm-content-inner [class*="plan-banner"],
  .sm-content-inner [class*="billing-banner"] {
    background: var(--color-card) !important;
    border-color: var(--color-border) !important;
  }

  /* ── Invite row inputs ── */
  .sm-content-inner .invite-row-email,
  .sm-content-inner .invite-row-role {
    background: transparent !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
  }
  .sm-content-inner .invite-row-email::placeholder { color: var(--color-text-muted) !important; }
  .sm-content-inner .invite-row-btn {
    background: var(--color-brand) !important;
    color: var(--color-brand-text) !important;
  }

  /* ── Links: brighter in dark mode ── */
  .sm-content-inner a:not([class]) { color: #60a5fa !important; }
  .sm-content-inner a[style*="color:#144629"],
  .sm-content-inner a[style*="color: #144629"] { color: var(--color-brand) !important; }

  /* Empty states */
  .sm-content-inner .drive-empty { color: var(--color-text-muted); }
  .sm-content-inner .mem-settings-empty { color: var(--color-text-muted); }
}