/**
 * Settings → Teklif Motoru v2 (Proposal Engine v2 Admin) — Phase 11A
 * Scoped under panel opt-in .settings-proposal-engine-v2-modern
 *
 * Presentation only. IDs / data-* / SUB_TABS / APIs / permission gates unchanged.
 */

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern {
  --pe2m-gap: 12px;
  --pe2m-radius: 8px;
  --pe2m-control: 36px;
  --pe2m-touch: 44px;
  --pe2m-ink: var(--ds-color-ink, var(--ink, #24262d));
  --pe2m-muted: var(--ds-color-muted, var(--muted, #6b7280));
  --pe2m-line: var(--ds-color-line, var(--line, #e5e7eb));
  --pe2m-surface: #fff;
  --pe2m-surface-quiet: #f8f9fa;
  --pe2m-accent: var(--ds-color-accent, var(--accent, #0f766e));
  --pe2m-danger: #b91c1c;
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern *,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern *::before,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern *::after {
  box-sizing: border-box;
}

/* —— Panel head —— */
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .settings-v2-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 0 14px;
  width: 100%;
  min-width: 0;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .settings-v2-panel-head h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--pe2m-ink);
  line-height: 1.25;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .settings-v2-panel-head .muted-text {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--pe2m-muted);
  max-width: 48rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* —— Shell —— */
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern #proposalEngineV2Root,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .proposal-engine-v2-root {
  width: 100%;
  max-width: none;
  min-width: 0;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-shell {
  gap: 14px;
  min-height: 420px;
  width: 100%;
  min-width: 0;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-content {
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow-x: hidden;
}

/* —— Subnav —— */
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-subnav {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 4px;
  margin: 0;
  width: 100%;
  min-width: 0;
  background: var(--pe2m-surface-quiet);
  border: 1px solid var(--pe2m-line);
  border-radius: var(--pe2m-radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-subnav__item,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern [data-pe2-subtab] {
  flex: 0 0 auto;
  min-height: var(--pe2m-control);
  padding: 0.4rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--pe2m-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-subnav__item.is-active,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern [data-pe2-subtab].is-active {
  background: var(--pe2m-surface);
  color: var(--pe2m-ink);
  border-color: var(--pe2m-line);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-subnav__item:focus-visible,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern [data-pe2-subtab]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pe2m-accent) 55%, transparent);
  outline-offset: 1px;
}

/* —— Cards / stats / toolbars —— */
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-card,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-stat-card,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-pdf-panel {
  border: 1px solid var(--pe2m-line);
  border-radius: var(--pe2m-radius);
  background: var(--pe2m-surface);
  box-shadow: none;
  min-width: 0;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-card {
  padding: 12px 14px;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-bottom: 10px;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-toolbar .primary-button,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-toolbar .ghost-button,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-card .primary-button,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-card .ghost-button {
  min-height: var(--pe2m-control);
}

/* —— Tables: neutralize global min-width:960px —— */
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern table,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-table,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .data-table {
  width: max-content;
  max-width: none;
  min-width: 100%;
  table-layout: auto;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-table-wrap,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-table th,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-table td,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .data-table th,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .data-table td {
  padding: 8px 10px;
  vertical-align: middle;
}

/* Headers must stay readable in narrow split panes (no letter-stack). */
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-table th,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .data-table th {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-table td,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .data-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-table input,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-form-grid input,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-form-grid textarea,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-form-grid select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* —— Split / sidebar editors —— */
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-split {
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-sidebar {
  max-height: min(520px, 55vh);
  overflow: auto;
  border: 1px solid var(--pe2m-line);
  border-radius: var(--pe2m-radius);
  background: var(--pe2m-surface-quiet);
  padding: 8px;
  min-width: 0;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-list button,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern [data-pe2-select-gallery],
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern [data-pe2-select-spec-template],
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern [data-pe2-select-profile],
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern [data-pe2-select-product],
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern [data-pe2-select-note-rule] {
  min-height: var(--pe2m-control);
  text-align: left;
  overflow-wrap: anywhere;
}

/* —— Destructive —— */
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern [data-pe2-delete-gallery],
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern [data-pe2-delete-gallery-image],
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern [data-pe2-delete-spec-template],
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern [data-pe2-delete-profile],
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern [data-delete-note-template],
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern [data-pe2-review-remove] {
  color: var(--pe2m-danger);
  border-color: color-mix(in srgb, var(--pe2m-danger) 28%, var(--pe2m-line));
}

/* —— Modals / drawers —— */
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-modal-backdrop {
  z-index: 1200;
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-modal,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-drawer,
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-drawer--product-spec {
  max-width: min(720px, calc(100vw - 24px));
  max-height: min(90vh, 900px);
  overflow: auto;
  border-radius: var(--pe2m-radius);
  border: 1px solid var(--pe2m-line);
  background: var(--pe2m-surface);
}

#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-json {
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.75rem;
}

/* —— Product filters —— */
#settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-product-spec-filters {
  grid-template-columns: minmax(160px, 2fr) repeat(2, minmax(110px, 1fr)) auto;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

/* —— Mid widths —— */
@media (max-width: 1320px) {
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-split {
    grid-template-columns: 1fr;
  }

  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-sidebar {
    max-height: 220px;
  }
}

@media (max-width: 1024px) {
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-product-spec-filters {
    grid-template-columns: 1fr 1fr;
  }

  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-toolbar .primary-button,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-toolbar .ghost-button {
    flex: 0 0 auto;
  }
}

@media (max-width: 900px) {
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-form-grid,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-grid--stats {
    grid-template-columns: 1fr;
  }

  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-stat-card--wide {
    grid-column: span 1;
  }
}

/* —— Mobile —— */
@media (max-width: 768px) {
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern {
    padding-bottom: 96px;
  }

  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-subnav {
    padding: 4px;
  }

  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-subnav__item,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern [data-pe2-subtab] {
    min-height: var(--pe2m-touch);
    padding: 0.5rem 0.85rem;
  }

  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  /* Stretch safe primary/secondary CTAs; never full-width destructive. */
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-toolbar > .primary-button,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-toolbar > .ghost-button:not(.danger-button),
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-pdf-content__hero-actions > .primary-button,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-note-templates__actions > .primary-button,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-note-templates__actions > .ghost-button:not(.danger-button),
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-note-rules__hero > .ghost-button:not(.danger-button) {
    width: 100%;
    min-height: var(--pe2m-touch);
  }

  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .danger-button {
    width: auto;
    max-width: 100%;
  }

  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-product-spec-filters {
    grid-template-columns: 1fr;
  }

  /*
   * Option D — keep real tables with visible thead.
   * Do NOT convert to unlabeled card stacks (thead { display:none } forbidden).
   * Horizontal scroll stays inside .pe2-table-wrap / .table-wrap.
   */
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-table-wrap,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-table,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .data-table {
    display: table;
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
  }

  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-table thead,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .data-table thead {
    display: table-header-group;
  }

  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-table tbody,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .data-table tbody {
    display: table-row-group;
  }

  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-table tr,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .data-table tr {
    display: table-row;
  }

  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-table th,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .data-table th,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-table td,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .data-table td {
    display: table-cell;
    white-space: nowrap;
  }

  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-modal,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-drawer {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 96px);
  }

  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-modal__foot,
  #settingsView [data-settings-panel="proposal-engine-v2"].settings-proposal-engine-v2-modern .pe2-drawer__footer {
    position: sticky;
    bottom: 0;
    padding-bottom: 12px;
    background: var(--pe2m-surface, #fff);
  }
}