/* =============================================================================
   Notification Schedule Editor — Premium Editor Surface
   - Used by:  Pages/Admin/NotificationScheduleEdit.razor
   - Loaded after: comprehensive-mobile.css, all-pages-mobile.css (must come last)
   - Tokens:   uses ONLY project tokens (var(--primary-color), var(--space-*) ...)
   - Visual reference (layout density only): Linear / Notion / Vercel settings.
   ============================================================================= */

.nse-shell {
  --nse-radius: 14px;
  --nse-radius-sm: 10px;
  --nse-border: 1px solid var(--border-color);
  --nse-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.08);
  --nse-shadow-hover: 0 2px 4px rgba(0,0,0,0.06), 0 16px 32px -16px rgba(0,0,0,0.12);
  --nse-gap: var(--space-md, 16px);

  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 30%, 380px);
  gap: var(--space-lg, 24px);
  align-items: start;
  margin-block: var(--space-md, 16px);
}

@container (max-width: 980px) {
  .nse-shell { grid-template-columns: 1fr; }
}

@media (max-width: 1023px) {
  .nse-shell { grid-template-columns: 1fr; }
}

/* ---------- Workspace (main column) ---------- */
.nse-main {
  background: var(--background-secondary, #fff);
  border: var(--nse-border);
  border-radius: var(--nse-radius);
  box-shadow: var(--nse-shadow);
  /* overflow MUST be visible so the global searchable-select dropdown
     (.ss-dropdown.open from site.js) can escape past the form edges
     and over neighboring channel cards. Visual clipping at the rounded
     corners is preserved by the inner tab strip's own background. */
  overflow: visible;
}

.nse-tabs {
  display: flex;
  gap: 2px;
  padding: 6px;
  background: var(--background-light, #f8fafc);
  border-bottom: var(--nse-border);
  overflow-x: auto;
  scrollbar-width: thin;
}

.nse-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 16px;
  border-radius: var(--nse-radius-sm);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
              color 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
  white-space: nowrap;
}

.nse-tab:hover {
  background: rgba(0,0,0,0.04);
  color: var(--text-primary);
}

.nse-tab.is-active {
  background: var(--background-secondary, #fff);
  color: var(--primary-color);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.nse-tab .material-icons {
  font-size: 18px;
}

.nse-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  background: var(--primary-color);
  color: #fff;
  margin-inline-start: 2px;
}

.nse-tab-badge.is-empty {
  background: var(--color-gray-200, #e5e7eb);
  color: var(--text-muted);
}

.nse-panel {
  padding: clamp(20px, 3vw, 32px);
  display: grid;
  gap: var(--space-lg, 24px);
}

.nse-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.nse-section-title .material-icons {
  font-size: 20px;
  color: var(--primary-color);
}

.nse-section-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ---------- Side rail (preview) ---------- */
.nse-side {
  display: grid;
  gap: var(--space-md, 16px);
  position: sticky;
  top: calc(var(--space-lg, 24px));
}

.nse-side-card {
  background: var(--background-secondary, #fff);
  border: var(--nse-border);
  border-radius: var(--nse-radius);
  padding: var(--space-md, 16px);
  box-shadow: var(--nse-shadow);
}

.nse-side-card h6 {
  margin: 0 0 12px 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nse-summary-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border-color);
  font-size: 13.5px;
}

.nse-summary-row:first-of-type { border-top: 0; }

.nse-summary-key {
  color: var(--text-secondary);
  font-weight: 500;
}

.nse-summary-value {
  color: var(--text-primary);
  font-weight: 600;
  text-align: end;
  max-width: 60%;
  overflow-wrap: anywhere;
}

.nse-side-card .nse-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.nse-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--background-light, #f1f5f9);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.nse-pill .material-icons { font-size: 14px; }

.nse-pill.is-on {
  background: rgba(16, 185, 129, 0.08);
  color: var(--success-color);
  border-color: rgba(16, 185, 129, 0.25);
}

.nse-pill.is-warn {
  background: rgba(245, 158, 11, 0.08);
  color: var(--warning-color);
  border-color: rgba(245, 158, 11, 0.25);
}

.nse-pill.is-danger {
  background: rgba(239, 68, 68, 0.08);
  color: var(--error-color);
  border-color: rgba(239, 68, 68, 0.25);
}

.nse-pill.is-info {
  background: rgba(59, 130, 246, 0.08);
  color: var(--info-color);
  border-color: rgba(59, 130, 246, 0.25);
}

/* ---------- Field grid ---------- */
.nse-field-grid {
  display: grid;
  gap: var(--space-md, 16px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.nse-field { grid-column: span 12; display: grid; gap: 6px; min-width: 0; }
.nse-field-6 { grid-column: span 12; }
.nse-field-4 { grid-column: span 12; }
.nse-field-3 { grid-column: span 12; }

@media (min-width: 768px) {
  .nse-field-6 { grid-column: span 6; }
  .nse-field-4 { grid-column: span 4; }
  .nse-field-3 { grid-column: span 3; }
}

.nse-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.nse-label .nse-req { color: var(--error-color); }

.nse-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.nse-input,
.nse-select,
.nse-textarea {
  width: 100%;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--nse-radius-sm);
  border: 1px solid var(--border-color);
  background: var(--background-secondary, #fff);
  color: var(--text-primary);
  transition: border-color 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
  min-height: 42px;
}

@media (max-width: 767px) {
  .nse-input, .nse-select, .nse-textarea { font-size: 16px; min-height: 44px; }
}

.nse-input:focus,
.nse-select:focus,
.nse-textarea:focus {
  outline: 0;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}

.nse-textarea { resize: vertical; min-height: 84px; }

/* ---------- Switch (premium) ---------- */
.nse-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--nse-radius-sm);
  background: var(--background-light, #f8fafc);
}

.nse-switch-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  min-width: 0;
}

.nse-switch-label .material-icons { font-size: 18px; color: var(--text-secondary); }

.nse-switch-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nse-switch-meta small {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-muted);
}

/* HTML-only toggle (uses checkbox) */
.nse-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.nse-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.nse-switch-track {
  position: absolute;
  inset: 0;
  background: var(--color-gray-300, #cbd5e1);
  border-radius: 999px;
  transition: background 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nse-switch-thumb {
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nse-switch input:checked ~ .nse-switch-track { background: var(--primary-color); }
.nse-switch input:checked ~ .nse-switch-thumb { transform: translateX(18px); }
html[dir="rtl"] .nse-switch input:checked ~ .nse-switch-thumb { transform: translateX(-18px); }

.nse-switch input:focus-visible ~ .nse-switch-track {
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* ---------- Channel card (collapsible-by-state) ---------- */
.nse-channel-stack { display: grid; gap: var(--space-md, 16px); }

.nse-channel {
  border: var(--nse-border);
  border-radius: var(--nse-radius);
  background: var(--background-secondary, #fff);
  /* overflow is visible by default so global searchable-select dropdowns
     (.ss-dropdown.open) can escape the channel card. The rounded-corners
     clipping is preserved via background-clip on inner sections instead. */
  overflow: visible;
  transition: border-color 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nse-channel.is-on { border-color: rgba(102, 126, 234, 0.4); }

.nse-channel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.nse-channel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.nse-channel-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--background-light, #f1f5f9);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.nse-channel.is-on .nse-channel-icon {
  background: rgba(102, 126, 234, 0.1);
  color: var(--primary-color);
}

.nse-channel-icon .material-icons { font-size: 20px; }

.nse-channel-body {
  padding: 0 16px 16px 16px;
  display: grid;
  gap: var(--space-md, 16px);
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

/* ---------- Document picker (inline searchable) ---------- */
.nse-doc-picker {
  position: relative;
}

.nse-doc-picker input[type="search"] {
  width: 100%;
  font-size: 14px;
  padding: 10px 12px 10px 38px;
  border-radius: var(--nse-radius-sm);
  border: 1px solid var(--border-color);
  background: var(--background-secondary, #fff);
  min-height: 42px;
}

html[dir="rtl"] .nse-doc-picker input[type="search"] { padding: 10px 38px 10px 12px; }

.nse-doc-picker .nse-doc-search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 10px;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 18px;
}

.nse-doc-list {
  margin-top: 6px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--nse-radius-sm);
  background: var(--background-secondary, #fff);
  box-shadow: var(--nse-shadow);
}

.nse-doc-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background 120ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nse-doc-item:last-child { border-bottom: 0; }

.nse-doc-item:hover { background: var(--background-light, #f8fafc); }

.nse-doc-item .material-icons { color: var(--text-secondary); font-size: 22px; }

.nse-doc-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nse-doc-name strong {
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nse-doc-name small {
  font-size: 12px;
  color: var(--text-muted);
}

.nse-doc-meta {
  font-size: 12px;
  color: var(--text-muted);
  text-align: end;
  white-space: nowrap;
}

.nse-doc-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(102, 126, 234, 0.3);
  background: rgba(102, 126, 234, 0.04);
  border-radius: var(--nse-radius-sm);
}

.nse-doc-selected-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nse-doc-selected strong { font-size: 14px; color: var(--text-primary); }
.nse-doc-selected small { font-size: 12px; color: var(--text-muted); }

.nse-doc-selected-clear {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nse-doc-selected-clear:hover {
  background: rgba(0,0,0,0.04);
  color: var(--text-primary);
}

/* ---------- Scope banner (specific vs global) ---------- */
.nse-scope-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--nse-radius-sm);
  font-size: 13.5px;
  background: var(--background-light, #f8fafc);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.nse-scope-banner.is-specific {
  background: rgba(102, 126, 234, 0.06);
  color: var(--primary-color);
  border-color: rgba(102, 126, 234, 0.25);
}

.nse-scope-banner .material-icons { flex-shrink: 0; }

/* ---------- Sticky action bar ---------- */
.nse-stickybar {
  position: sticky;
  bottom: 0;
  margin-top: var(--space-lg, 24px);
  background: var(--background-secondary, #fff);
  border: var(--nse-border);
  border-radius: var(--nse-radius);
  padding: 14px 18px;
  box-shadow: 0 -6px 16px -8px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 10;
}

.nse-stickybar-status {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.nse-stickybar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- Empty + Loading states ---------- */
.nse-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
}

.nse-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  color: var(--text-muted);
}

/* ---------- Tweaks for RTL ---------- */
html[dir="rtl"] .nse-tabs { direction: rtl; }
html[dir="rtl"] .nse-tab .material-icons { transform: scaleX(-1); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nse-tab, .nse-input, .nse-select, .nse-textarea,
  .nse-switch-track, .nse-switch-thumb, .nse-doc-item,
  .nse-doc-selected-clear, .nse-channel {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Searchable-select dropdown layering inside the editor surface
   ---------------------------------------------------------------------------
   The global `initSearchableSelects` (wwwroot/js/site.js) replaces every
   `<select>` having ≥5 options with a custom dropdown structure:
       .searchable-select-wrapper
         └─ .ss-trigger
         └─ .ss-dropdown(.open)   ← the panel with search input + options
   wwwroot/css/site.css already has a giant :has() allow-list that forces
   `overflow: visible` on common ancestors, but it targets a different
   selector (`.searchable-select-dropdown`) and doesn't know about our
   `nse-*` containers. The rules below close the gap: when an `.ss-dropdown`
   is OPEN anywhere inside the editor surface, every nse ancestor must allow
   the panel to escape its box and reset its stacking context.
   --------------------------------------------------------------------------- */

.nse-shell:has(.ss-dropdown.open),
.nse-grid:has(.ss-dropdown.open),
.nse-main:has(.ss-dropdown.open),
.nse-side:has(.ss-dropdown.open),
.nse-tabs-shell:has(.ss-dropdown.open),
.nse-tab-panel:has(.ss-dropdown.open),
.nse-section:has(.ss-dropdown.open),
.nse-section-body:has(.ss-dropdown.open),
.nse-channel-stack:has(.ss-dropdown.open),
.nse-channel:has(.ss-dropdown.open),
.nse-channel-body:has(.ss-dropdown.open),
.nse-field:has(.ss-dropdown.open),
.nse-fields-grid:has(.ss-dropdown.open),
.nse-fields-grid > div:has(.ss-dropdown.open) {
  overflow: visible !important;
  z-index: auto !important;
}

/* Make sure the open panel itself wins the stacking war even against later
   sibling channel cards (واتساب below البريد in the screenshot). */
.nse-channel .searchable-select-wrapper,
.nse-channel-body .searchable-select-wrapper,
.nse-section .searchable-select-wrapper {
  position: relative;
}

.nse-channel .ss-dropdown.open,
.nse-channel-body .ss-dropdown.open,
.nse-section .ss-dropdown.open {
  z-index: 2147483647 !important;
}

/* =============================================================================
   Notification Schedules — LIST surface (nsl-*)
   Used by:  Pages/Admin/NotificationSchedules.razor
   Theme:    same tokens as nse-*; layout reference: Linear/Notion list views.
   ============================================================================= */

.nsl-shell {
  --nsl-radius: 14px;
  --nsl-radius-sm: 10px;
  --nsl-border: 1px solid var(--border-color);
  --nsl-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.08);
  display: grid;
  gap: var(--space-lg, 24px);
}

/* Hero metrics — modern compact stat tiles (no card-in-card, no big numbers) */
.nsl-metrics {
  display: grid;
  gap: var(--space-md, 16px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.nsl-metric {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border: var(--nsl-border);
  border-radius: var(--nsl-radius);
  background: var(--background-secondary, #fff);
  box-shadow: var(--nsl-shadow);
  transition: box-shadow 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nsl-metric:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 16px 32px -16px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

.nsl-metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--background-light, #f1f5f9);
  color: var(--text-secondary);
}

.nsl-metric-icon .material-icons { font-size: 22px; }

.nsl-metric.is-primary .nsl-metric-icon { background: rgba(102, 126, 234, 0.1);  color: var(--primary-color); }
.nsl-metric.is-success .nsl-metric-icon { background: rgba(16, 185, 129, 0.1);   color: var(--success-color); }
.nsl-metric.is-warn    .nsl-metric-icon { background: rgba(245, 158, 11, 0.1);   color: var(--warning-color); }
.nsl-metric.is-info    .nsl-metric-icon { background: rgba(59, 130, 246, 0.1);   color: var(--info-color); }
.nsl-metric.is-danger  .nsl-metric-icon { background: rgba(239, 68, 68, 0.1);    color: var(--error-color); }

.nsl-metric-body { min-width: 0; }

.nsl-metric-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.nsl-metric-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Toolbar (search + view toggle + add) */
.nsl-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: var(--nsl-border);
  border-radius: var(--nsl-radius);
  background: var(--background-secondary, #fff);
  box-shadow: var(--nsl-shadow);
}

@media (max-width: 767px) {
  .nsl-toolbar { grid-template-columns: 1fr; }
}

.nsl-search {
  position: relative;
}

.nsl-search input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px 10px 38px;
  border-radius: var(--nsl-radius-sm);
  border: 1px solid var(--border-color);
  background: var(--background-secondary, #fff);
  font-size: 14px;
  transition: border-color 150ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 767px) { .nsl-search input { font-size: 16px; min-height: 44px; } }

html[dir="rtl"] .nsl-search input { padding: 10px 38px 10px 12px; }

.nsl-search input:focus {
  outline: 0;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}

.nsl-search .material-icons {
  position: absolute;
  top: 50%;
  inset-inline-start: 10px;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 18px;
  pointer-events: none;
}

.nsl-segmented {
  display: inline-flex;
  background: var(--background-light, #f8fafc);
  border: 1px solid var(--border-color);
  border-radius: var(--nsl-radius-sm);
  padding: 3px;
  gap: 2px;
}

.nsl-segmented-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 150ms cubic-bezier(0.22, 0.61, 0.36, 1),
              color 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nsl-segmented-btn:hover { color: var(--text-primary); }
.nsl-segmented-btn .material-icons { font-size: 16px; }
.nsl-segmented-btn.is-active {
  background: var(--background-secondary, #fff);
  color: var(--primary-color);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Schedule row (list view) — modern card-style row, no card-in-card */
.nsl-schedule-list {
  display: grid;
  gap: 10px;
}

.nsl-schedule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: var(--nsl-border);
  border-radius: var(--nsl-radius);
  background: var(--background-secondary, #fff);
  box-shadow: var(--nsl-shadow);
  transition: background 150ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nsl-schedule:hover {
  background: var(--background-light, #fafbfc);
  border-color: rgba(102, 126, 234, 0.3);
}

.nsl-schedule.is-disabled { opacity: 0.65; }

@media (max-width: 767px) {
  .nsl-schedule {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.nsl-schedule-lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--background-light, #f1f5f9);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 13.5px;
  flex-shrink: 0;
}

.nsl-schedule.is-urgent .nsl-schedule-lead {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error-color);
}

.nsl-schedule.is-soon .nsl-schedule-lead {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning-color);
}

.nsl-schedule.is-far .nsl-schedule-lead {
  background: rgba(102, 126, 234, 0.1);
  color: var(--primary-color);
}

.nsl-schedule-main { min-width: 0; }

.nsl-schedule-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nsl-schedule-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.nsl-schedule-meta .nsl-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--background-light, #f1f5f9);
  border: 1px solid var(--border-color);
  font-weight: 500;
}

.nsl-schedule-meta .nsl-meta-pill.is-scope-doc {
  background: rgba(102, 126, 234, 0.08);
  color: var(--primary-color);
  border-color: rgba(102, 126, 234, 0.25);
}

.nsl-schedule-meta .nsl-meta-pill .material-icons { font-size: 13px; }

.nsl-schedule-notes {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Channel chips (compact icon row) */
.nsl-chip-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.nsl-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--background-light, #f1f5f9);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  transition: transform 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nsl-chip:hover { transform: scale(1.06); }
.nsl-chip .material-icons { font-size: 16px; }

.nsl-chip.is-email    { background: rgba(102, 126, 234, 0.08); color: var(--primary-color); border-color: rgba(102, 126, 234, 0.25); }
.nsl-chip.is-whatsapp { background: rgba(16, 185, 129, 0.08); color: var(--success-color); border-color: rgba(16, 185, 129, 0.25); }
.nsl-chip.is-sms      { background: rgba(59, 130, 246, 0.08); color: var(--info-color); border-color: rgba(59, 130, 246, 0.25); }
.nsl-chip.is-inapp    { background: rgba(245, 158, 11, 0.08); color: var(--warning-color); border-color: rgba(245, 158, 11, 0.25); }
.nsl-chip.is-task     { background: rgba(99, 102, 241, 0.08); color: #6366f1; border-color: rgba(99, 102, 241, 0.25); }
.nsl-chip.is-deal     { background: rgba(16, 185, 129, 0.08); color: var(--success-color); border-color: rgba(16, 185, 129, 0.25); }
.nsl-chip.is-ticket   { background: rgba(239, 68, 68, 0.08); color: var(--error-color); border-color: rgba(239, 68, 68, 0.25); }
.nsl-chip.is-appt     { background: rgba(59, 130, 246, 0.08); color: var(--info-color); border-color: rgba(59, 130, 246, 0.25); }

.nsl-schedule-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nsl-iconbtn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 150ms cubic-bezier(0.22, 0.61, 0.36, 1),
              color 150ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nsl-iconbtn .material-icons { font-size: 18px; }

.nsl-iconbtn:hover {
  background: var(--background-light, #f1f5f9);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.nsl-iconbtn.is-danger:hover { color: var(--error-color); border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.06); }
.nsl-iconbtn.is-primary:hover { color: var(--primary-color); border-color: rgba(102, 126, 234, 0.3); background: rgba(102, 126, 234, 0.06); }

.nsl-iconbtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.nsl-iconbtn:disabled:hover { background: transparent; border-color: transparent; color: var(--text-secondary); }

/* Order arrows (stacked vertically) */
.nsl-order {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.nsl-order .nsl-iconbtn {
  width: 28px;
  height: 22px;
  border-radius: 6px;
}

.nsl-order .nsl-iconbtn .material-icons { font-size: 16px; }

/* Sent counter chip */
.nsl-sent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.08);
  color: var(--info-color);
  border: 1px solid rgba(59, 130, 246, 0.25);
  font-size: 12px;
  font-weight: 600;
}

.nsl-sent-chip .material-icons { font-size: 14px; }

/* Empty state */
.nsl-empty {
  padding: 56px 24px;
  text-align: center;
  border: 1px dashed var(--border-color);
  border-radius: var(--nsl-radius);
  background: var(--background-secondary, #fff);
}

.nsl-empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--background-light, #f1f5f9);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nsl-empty-icon .material-icons { font-size: 36px; }

.nsl-empty h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.nsl-empty p {
  color: var(--text-secondary);
  font-size: 13.5px;
  max-width: 460px;
  margin: 0 auto 18px;
  line-height: 1.6;
}

/* Mini toggle inline (for IsEnabled in the list) */
.nsl-mini-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.nsl-mini-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.nsl-mini-switch-track {
  position: absolute;
  inset: 0;
  background: var(--color-gray-300, #cbd5e1);
  border-radius: 999px;
  transition: background 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nsl-mini-switch-thumb {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nsl-mini-switch input:checked ~ .nsl-mini-switch-track { background: var(--success-color); }
.nsl-mini-switch input:checked ~ .nsl-mini-switch-thumb { transform: translateX(16px); }
html[dir="rtl"] .nsl-mini-switch input:checked ~ .nsl-mini-switch-thumb { transform: translateX(-16px); }

/* =============================================================================
   Notification Schedule LOGS surface (nslg-*)
   Used by:  Pages/Admin/NotificationScheduleLogs.razor
   ============================================================================= */

.nslg-shell {
  display: grid;
  gap: var(--space-lg, 24px);
}

.nslg-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  align-items: end;
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--background-secondary, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.08);
}

.nslg-filter {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.nslg-filter label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}

.nslg-filter input,
.nslg-filter select {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--background-secondary, #fff);
  font-size: 14px;
}

@media (max-width: 767px) {
  .nslg-filter input, .nslg-filter select { font-size: 16px; min-height: 44px; }
}

.nslg-filter input:focus,
.nslg-filter select:focus {
  outline: 0;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}

.nslg-log-list {
  display: grid;
  gap: 10px;
}

.nslg-log {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--background-secondary, #fff);
  transition: background 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 1023px) {
  .nslg-log { grid-template-columns: auto 1fr auto; }
  .nslg-log-recipient { grid-column: 1 / -1; }
}

.nslg-log:hover { background: var(--background-light, #fafbfc); }

.nslg-log-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-gray-300, #cbd5e1);
}

.nslg-log.is-success .nslg-log-status-dot { background: var(--success-color); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.nslg-log.is-failed  .nslg-log-status-dot { background: var(--error-color);   box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); }
.nslg-log.is-partial .nslg-log-status-dot { background: var(--warning-color); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }

.nslg-log-main { min-width: 0; }

.nslg-log-time {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.nslg-log-entity {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.nslg-log-recipient {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.nslg-log-recipient strong {
  font-size: 13.5px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nslg-log-recipient small {
  font-size: 12px;
  color: var(--text-muted);
}

.nslg-log-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.nslg-log.is-success .nslg-log-status { background: rgba(16, 185, 129, 0.1); color: var(--success-color); }
.nslg-log.is-failed  .nslg-log-status { background: rgba(239, 68, 68, 0.1);  color: var(--error-color); }
.nslg-log.is-partial .nslg-log-status { background: rgba(245, 158, 11, 0.1); color: var(--warning-color); }

/* Details modal */
.nslg-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: nslgFade 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes nslgFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.nslg-modal {
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--background-secondary, #fff);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.nslg-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-color);
}

.nslg-modal-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.nslg-modal-close {
  appearance: none;
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nslg-modal-close:hover { background: var(--background-light, #f1f5f9); color: var(--text-primary); }

.nslg-modal-body { padding: 18px 22px; display: grid; gap: 14px; }

.nslg-detail-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 13.5px;
}

.nslg-detail-row:last-child { border-bottom: 0; }
.nslg-detail-key { color: var(--text-secondary); font-weight: 500; }
.nslg-detail-value { color: var(--text-primary); font-weight: 600; overflow-wrap: anywhere; }

.nslg-channel-detail {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--background-light, #f8fafc);
}

.nslg-channel-detail.is-success { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.25); }
.nslg-channel-detail.is-failed  { background: rgba(239, 68, 68, 0.06);  border-color: rgba(239, 68, 68, 0.25); }

.nslg-channel-detail .material-icons { font-size: 18px; }

.nslg-channel-detail-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.nslg-channel-detail-error {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  word-break: break-word;
}

.nslg-modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nsl-schedule, .nsl-iconbtn, .nsl-chip, .nsl-segmented-btn,
  .nslg-log, .nsl-mini-switch-track, .nsl-mini-switch-thumb,
  .nslg-modal-backdrop {
    transition: none !important;
    animation: none !important;
  }
}