/* Shared visual language. Page styles own layout; this file owns components. */
:root {
  --navy: #102c40;
  --ink: #173748;
  --muted: #5c7280;
  --teal: #007f88;
  --teal-dark: #00656e;
  --bg: #f4f7f9;
  --line: #dce5ea;
  --gold: #896326;
  --gold-bg: #faf5e9;
  --ui-surface: #fff;
  --ui-soft: #f0f6f7;
  --ui-danger: #a53636;
  --ui-danger-soft: #fff0f0;
  --ui-success: #23644c;
  --ui-radius: 8px;
  --ui-card-radius: 12px;
  --ui-control-height: 34px;
  --ui-space: 12px;
  --ui-panel-padding: 16px;
  --ui-compact-height: 30px;
  --ui-shadow: 0 3px 14px #102c4006;
  --ui-focus: 0 0 0 3px #007f8826;
}

.ui-theme {font-family: 'Segoe UI', Arial, sans-serif; line-height: 1.5;}
.ui-theme h1 {font-size: clamp(22px, 2vw, 26px); font-weight: 650; letter-spacing: -.7px;}
.ui-theme h2 {font-size: 16px; font-weight: 650;}
.ui-theme h3 {font-size: 14px; font-weight: 650;}
.ui-theme .eyebrow {font-size: 10px; letter-spacing: 1.5px; color: var(--teal);}
.ui-theme .help {color: var(--muted); line-height: 1.5; margin: 10px 0;}
.ui-theme .page-heading {gap: 12px; margin-bottom: 16px;}

/* The same primary, secondary, destructive and compact actions everywhere. */
.ui-theme .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ui-control-height); padding: 6px 12px;
  border: 1px solid var(--line); border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ink);
  font: 600 12px/1.4 'Segoe UI', Arial, sans-serif;
  text-decoration: none; cursor: pointer; box-shadow: none;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.ui-theme .btn:hover {background: var(--ui-soft); border-color: #9bb7c0;}
.ui-theme .btn.primary {background: var(--teal); border-color: var(--teal); color: #fff;}
.ui-theme .btn.primary:hover {background: var(--teal-dark); border-color: var(--teal-dark);}
.ui-theme .btn.light {background: var(--ui-surface); color: var(--ink); border-color: var(--line);}
.ui-theme .btn.light:hover {background: var(--ui-soft); border-color: #9bb7c0;}
.ui-theme .btn.danger {background: var(--ui-danger); border-color: var(--ui-danger); color: #fff;}
.ui-theme .btn.danger:hover {background: #872b2b; border-color: #872b2b;}
.ui-theme .btn.small {min-height: var(--ui-compact-height); padding: 5px 10px; font-size: 11px;}
.ui-theme .btn:disabled, .ui-theme .btn[aria-disabled=true], .ui-theme fieldset:disabled .btn {
  background: #edf1f3; border-color: var(--line); color: #778b96;
  cursor: not-allowed; box-shadow: none; opacity: 1;
}
.ui-theme .text-button, .ui-theme .stage-auto-button {
  display: inline-flex; align-items: center; min-height: var(--ui-compact-height);
  padding: 4px 6px; border: 0; border-radius: 6px; background: transparent;
  font-size: 11px; font-weight: 600; line-height: 1.4; text-underline-offset: 3px;
}
.ui-theme .text-button {color: var(--ui-danger);}
.ui-theme .text-button:hover {background: var(--ui-danger-soft);}
.ui-theme .stage-auto-button {color: var(--teal-dark);}
.ui-theme .stage-auto-button:hover {background: var(--ui-soft);}
.ui-theme :is(.actions, .form-actions) {display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
.ui-theme .actions > form {display: flex; align-items: center; margin: 0;}
.ui-theme .table-actions {display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 8px;}
.ui-theme .table-actions form {display: flex; margin: 0;}
.ui-theme .table-actions .btn {white-space: nowrap;}
.ui-theme .form-actions {margin-top: 16px;}
.ui-theme .page-heading > .actions {justify-content: flex-end;}
.ui-theme .search {gap: 10px;}

/* Inputs keep the widths defined by each page. */
.ui-theme :is(input, select, textarea):not(:where([type=checkbox], [type=radio], [type=hidden], [type=range], [type=submit])) {
  border: 1px solid #ccdbe2; border-radius: var(--ui-radius);
  background: var(--ui-surface); color: var(--ink); font-size: 13px;
  padding: 6px 9px; min-height: var(--ui-control-height);
  transition: border-color .15s, box-shadow .15s;
}
.ui-theme :is(input, select, textarea):focus {
  border-color: var(--teal); outline: none; box-shadow: var(--ui-focus);
}
.ui-theme :is(button, a, summary):focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px;
}
.ui-theme :is(input, textarea)::placeholder {color: #718592; opacity: 1;}
.ui-theme :is(input, select, textarea):disabled,
.ui-theme :is(input, textarea)[readonly] {background: #f0f3f5; color: var(--muted);}
.ui-theme input:is([type=checkbox], [type=radio]) {accent-color: var(--teal);}
.ui-theme :is(.stage-table, .theme-simulation, .quote-line, .summary-group) .product-selection input[type=checkbox] {min-height: 0; padding: 0;}
.ui-theme .field>label {font-size: 12px; font-weight: 600; margin-bottom: 4px;}
.ui-theme .form-grid {gap: 10px 16px;}
.ui-theme :is(.stage-table, .theme-simulation, .compact-lines) :is(input:not([type=hidden]), select, textarea) {
  min-height: var(--ui-compact-height); padding: 5px 8px; font-size: 12px;
}
.ui-theme .theme-simulation .form-grid {gap: 10px 16px;}
.ui-theme .stage-text-form input {font-weight: 600;}

/* Surfaces and tables retain their existing compact/full layouts. */
.ui-theme .card, .ui-theme .template-builder .flow-section {
  background: var(--ui-surface); border: 1px solid var(--line);
  border-radius: var(--ui-card-radius); box-shadow: var(--ui-shadow);
}
.ui-theme .card-heading {padding: 12px var(--ui-panel-padding); border-color: var(--line); gap: 12px;}
.ui-theme .card-body {padding: var(--ui-panel-padding);}
.ui-theme .theme-simulation .card-body {padding: var(--ui-panel-padding);}
.ui-theme .theme-simulation .card-heading {padding: 12px var(--ui-panel-padding);}
.ui-theme :is(.template-tile, .selection-card, .quote-line, .stage-table-wrap, .compact-lines) {
  border-color: var(--line); border-radius: var(--ui-card-radius);
}
.ui-theme :is(.template-tile, .theme-card):hover {border-color: #9bb7c0;}
.ui-theme table th {background: #f5f8fa; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .4px;}
.ui-theme table td {border-color: var(--line); font-size: 12px;}
.ui-theme table :is(th, td) {padding: 8px 10px;}
.ui-theme :is(.stage-table, .theme-table, .theme-simulation-results table) :is(th, td) {padding: 8px 10px;}
.ui-theme table tbody tr:hover {background-color: #f8fbfc;}
.ui-theme .num {font-variant-numeric: tabular-nums;}
.ui-theme table td small {color: var(--muted); font-size: 10px; line-height: 1.5;}
.ui-theme .gold-text {color: var(--gold);}

/* Shared density, including the older standalone form and wizard layouts. */
.ui-theme .content {padding: 20px 24px;}
.ui-theme :is(h1, h2, h3) {line-height: 1.3;}
.ui-theme :is(.wizard-panel, .flow-heading) h2 {font-size: 16px;}
.ui-theme :is(.theme-card, .line-heading, .client-pool-row) h3 {font-size: 14px;}
.ui-theme .page-heading p {margin-top: 4px;}
.ui-theme .back {margin-bottom: 12px;}
.ui-theme .card, .ui-theme .guided-main > .card {margin-bottom: 14px;}
.ui-theme :is(.form-card, .comparison-controls, .template-grid) {padding: var(--ui-panel-padding);}
.ui-theme :is(.stats, .comparison-stats) {gap: 12px; margin-bottom: 16px;}
.ui-theme :is(.stat, .comparison-stat) {padding: 12px 16px;}
.ui-theme .stat strong {font-size: 26px; margin: 4px 0 2px;}
.ui-theme :is(.quote-layout, .guided-layout) {gap: 16px;}
.ui-theme :is(.template-grid, .theme-grid, .selection-grid, .client-profile-form, .client-coordinates-panel, .client-route-panel) {gap: 12px;}
.ui-theme :is(.client-profile-form, .client-coordinates-panel, .client-route-panel) > .card {margin-bottom: 0;}
.ui-theme .client-profile-form > .form-actions {margin-top: 0;}
.ui-theme :is(.field, .field > div) {min-width: 0;}
.ui-theme .field :is(input, select, textarea) {line-height: 1.4;}
.ui-theme .field textarea {height: 84px; min-height: 60px; resize: vertical;}
.ui-theme :is(.search, .comparison-form) :is(input, select) {height: var(--ui-control-height);}
.ui-theme .search .btn {min-height: var(--ui-control-height);}
.ui-theme .field > :is(small, .help) {display: block; font-size: 11px; line-height: 1.4; margin: 3px 0 0;}
.ui-theme .selection-intro {margin: 0 0 12px;}
.ui-theme .theme-simulation .field label {font-size: 12px; margin-bottom: 4px;}
.ui-theme .theme-simulation .field :is(input, select) {min-height: var(--ui-control-height); padding: 6px 9px; font-size: 13px;}
.ui-theme table :is(th, td) {line-height: 1.4; vertical-align: middle;}
.ui-theme table th {text-align: left; text-transform: uppercase;}
.ui-theme table th.num {text-align: right;}
.ui-theme .stage-lines.is-condensed .stage-table td {padding: 8px 10px;}
.ui-theme .catalog-search {padding: 12px 16px;}
.ui-theme .product-row {padding: 10px 16px; gap: 12px;}
.ui-theme .summary-group h3 {padding: 12px 16px 8px;}
.ui-theme .theme-section {margin: 16px 0;}
.ui-theme .theme-section > h2 {margin-bottom: 10px;}
.ui-theme .theme-card {padding: 14px; min-height: 96px; margin-bottom: 0;}
.ui-theme .theme-card h3 {margin-bottom: 10px;}
.ui-theme :is(.client-choice-grid, .wizard-choice-grid) {gap: 10px; margin: 12px 0;}
.ui-theme :is(.client-choice, .wizard-choice, .selection-card) {padding: 12px; gap: 10px; min-height: 64px;}
.ui-theme .template-builder .selection-card,
.ui-theme .template-builder .theme-selection-grid .selection-card {padding: 12px; min-height: 64px; border-radius: var(--ui-radius);}
.ui-theme .template-builder .flow-section .card-heading {padding: 12px 16px 0;}
.ui-theme .template-builder .theme-stage-heading {gap: 10px; margin-bottom: 10px; padding-bottom: 8px;}
.ui-theme .flow-number {width: 34px; height: 34px; border-radius: var(--ui-radius);}
.ui-theme .flow-empty {padding: 16px;}
.ui-theme .steps {margin: 8px 0 16px; padding-bottom: 10px;}
.ui-theme .wizard-header {gap: 12px; padding-bottom: 14px; margin-bottom: 16px;}
.ui-theme .wizard-panel .field {margin: 10px 0;}
.ui-theme .wizard-panel > .help {margin: 4px 0 12px;}
.ui-theme .quote-wizard-card, .ui-theme .quote-wizard-card form {min-height: 0;}
.ui-theme .quote-wizard-card .wizard-progress {padding-top: 14px;}
.ui-theme .guided-stage-actions {margin: 0 0 16px;}
.ui-theme .guided-subtitle {margin-top: 16px;}
.ui-theme .guided-question {min-height: 0;}
.ui-theme .guided-question > label {font-size: 16px; margin-bottom: 12px;}
.ui-theme .guided-question > div > div label {padding: 8px 10px; margin-bottom: 6px; font-size: 13px;}
.ui-theme .guided-main .quote-line {padding: 12px 0;}
.ui-theme .guided-main .line-values {gap: 16px; margin-top: 10px;}
.ui-theme .client-tab {padding: 8px 12px;}
.ui-theme .client-pool-row {padding: 12px; margin-bottom: 10px;}
.ui-theme .client-pool-row h3 {margin-bottom: 10px;}
.ui-theme .quote-project-heading {margin: 16px 0 12px; padding-top: 14px;}
.ui-theme .route-card {padding: 16px; margin: 16px 0;}
.ui-theme .login-box .field {margin-bottom: 12px;}
.ui-theme .login-box p {margin: 10px 0 16px;}
.ui-theme .empty {padding: 32px 16px;}
.ui-theme .empty.compact {padding: 20px 16px;}
.ui-theme .empty p {margin-bottom: 14px;}

/* Feedback and secondary navigation. */
.ui-theme :is(.message, .notice) {border: 1px solid transparent; border-radius: var(--ui-radius); padding: 12px 16px; font-size: 12px;}
.ui-theme .message.success {background: #eaf6ef; color: var(--ui-success); border-color: #cce6d6;}
.ui-theme .message.error {background: var(--ui-danger-soft); color: var(--ui-danger); border-color: #f0cccc;}
.ui-theme .notice {background: #fff8e9; color: #785b25; border-color: #ecdfbe;}
.ui-theme .errorlist, .ui-theme .quantity-save-status.error {color: var(--ui-danger);}
.ui-theme :is(.badge, .quantity-mode, .flow-count) {font-size: 10px; font-weight: 600; line-height: 1.5; padding: 3px 8px; border-radius: 6px;}
.ui-theme .badge.issued {background: #eaf6ef; color: var(--ui-success);}
.ui-theme .badge.draft {background: #edf2f5; color: #526976;}
.ui-theme .quantity-mode {background: #e8f5f4; color: var(--teal-dark);}
.ui-theme .quantity-mode.manual {background: #edf2f5; color: #526976;}
.ui-theme .quote-actions-panel {border-radius: var(--ui-card-radius); border-color: var(--line); box-shadow: 0 8px 24px #102c4018;}
.ui-theme .quote-actions-panel :is(a, button, .btn) {
  display: flex; width: 100%; justify-content: flex-start; text-align: left;
  white-space: normal; min-height: var(--ui-control-height); padding: 8px 10px;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: 12px;
}
.ui-theme .quote-actions-panel :is(a, button):hover {background: var(--ui-soft);}
.ui-theme .quote-actions-panel .quote-actions-delete {color: var(--ui-danger);}
.ui-theme .quote-actions-panel .quote-actions-delete:hover {background: var(--ui-danger-soft);}
.ui-theme .client-tab {font-size: 12px; border-radius: var(--ui-radius) var(--ui-radius) 0 0;}
.ui-theme .client-tab.is-active {color: var(--teal-dark);}
.ui-theme .pagination {padding: 10px 16px; gap: 10px;}
.ui-theme .back {font-size: 12px; color: var(--muted);}
.ui-theme .back:hover {color: var(--teal-dark);}
.ui-theme .route-card {border-color: var(--line); border-radius: var(--ui-card-radius); box-shadow: var(--ui-shadow); color: var(--ink);}
.ui-theme .route-heading h3 {font-size: 14px;}
.ui-theme .login-box {padding: 22px; max-width: 430px; border: 1px solid var(--line); border-radius: var(--ui-card-radius); box-shadow: var(--ui-shadow);}
.ui-theme [hidden] {display: none !important;}
@media (max-width: 550px) {
  .ui-theme {--ui-panel-padding: 12px;}
  .ui-theme .content {padding: 14px 12px;}
  .ui-theme .card-heading, .ui-theme .card-body {padding: 12px;}
  .ui-theme .form-grid {gap: 10px;}
  .ui-theme .page-heading {gap: 14px;}
  .ui-theme .btn {white-space: normal; text-align: center;}
  .ui-theme .login-box {padding: 22px;}
}
@media (prefers-reduced-motion: reduce) {
  .ui-theme *, .ui-theme *::before, .ui-theme *::after {transition: none !important; animation: none !important; scroll-behavior: auto !important;}
}

.ui-theme .evergold-saving {display: grid; gap: 3px; padding: 12px; margin-top: 10px; border-radius: var(--ui-radius); background: var(--gold-bg);}
.ui-theme .evergold-saving span, .ui-theme .evergold-saving small {font-size: 11px; color: var(--muted);}
.ui-theme .evergold-saving strong {font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums;}

/* Shared information buttons and floating tooltip cards. */
.ui-theme .line-rate-info {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px;
  width: 28px; height: 28px; padding: 0; border: 1px solid #cddfe2; border-radius: 50%;
  background: var(--ui-soft); color: var(--muted); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s, box-shadow .15s;
}
.ui-theme .line-rate-info svg {width: 18px; height: 18px; pointer-events: none;}
.ui-theme .line-rate-info:is(:hover, [data-tooltip-open]) {color: var(--teal-dark); background: #e2f2f2; border-color: #95c9cd;}
.ui-theme .line-rate-info:focus-visible {outline: 0; box-shadow: var(--ui-focus); border-color: var(--teal);}
.ui-theme .info-tooltip {
  position: fixed; z-index: 4000; display: grid; gap: 9px; width: 290px;
  max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto;
  padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--ui-surface); color: var(--ink); box-shadow: 0 8px 32px #102c4026;
  font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; text-align: left;
}
.ui-theme .info-tooltip-heading {font-size: 12px; font-weight: 650; color: var(--ink);}
.ui-theme .info-tooltip-rate {display: flex; align-items: baseline; justify-content: space-between; gap: 14px;}
.ui-theme .info-tooltip-rate>span {color: var(--muted);}
.ui-theme .info-tooltip-rate strong {font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap;}
.ui-theme .info-tooltip-rate small {font-size: 11px; font-weight: 400;}
.ui-theme .info-tooltip-gold strong {color: var(--gold);}
.ui-theme .info-tooltip-source {padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px;}
.ui-theme .info-tooltip-pending {color: var(--gold);}

.ui-theme .theme-text-break{background:var(--ui-soft);color:var(--ink);border-left:3px solid var(--teal);white-space:normal;overflow-wrap:anywhere}
.ui-theme .theme-text-break td{padding:12px 16px;line-height:1.6}
.ui-theme .quote-text-break{padding:14px 16px;margin:12px 0;border-radius:0 8px 8px 0}
.ui-theme .theme-break-content{display:flex;justify-content:space-between;align-items:center;gap:16px}
.ui-theme .theme-break-content>div:first-child{flex:1;min-width:0}
.ui-theme .theme-order-list{list-style:none;padding:0;margin:0}
.ui-theme .theme-order-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--ui-surface)}
.ui-theme .theme-order-item.is-break{background:var(--ui-soft);border-left:3px solid var(--teal)}
.ui-theme .theme-order-item.is-dragging{opacity:.45}
.ui-theme .theme-order-handle{cursor:grab;color:var(--muted);font-size:24px;flex-shrink:0}
.ui-theme .theme-order-label{flex:1;min-width:0;overflow-wrap:anywhere}
.ui-theme .theme-order-label strong{font-size:13px;font-weight:600;display:block}
.ui-theme .theme-order-label small{display:block;color:var(--muted);font-size:11px}

.ui-theme .row-drag-handle{flex:0 0 28px;width:28px;min-width:28px;padding:3px;border-color:transparent;background:transparent;color:var(--muted);cursor:grab}
.ui-theme .row-drag-handle:hover{background:var(--ui-soft);border-color:var(--line);color:var(--teal-dark)}
.ui-theme .row-drag-handle:active{cursor:grabbing}
.ui-theme .row-drag-handle svg{width:16px;height:20px;pointer-events:none}
.ui-theme .inline-break-heading{display:flex;gap:8px;align-items:center}
.ui-theme .inline-break-heading>div{min-width:0;flex:1}
.ui-theme [data-inline-order]>.is-dragging{opacity:.4}
.ui-theme .inline-order-error{color:var(--ui-danger);font-size:12px;line-height:1.5;padding:8px 16px}

/* Identité Central Piscines : image complète et proportions conservées. */
.ui-theme .app-brand{display:flex;justify-content:center;width:100%;max-width:320px;padding:12px;background:#fff;border-radius:8px;flex-shrink:0}
.ui-theme .app-logo{display:block;width:100%;height:auto;min-width:0;object-fit:contain}
.ui-theme .sidebar .app-brand{max-width:100%}
.ui-theme .login-mobile-brand{display:none}
@media(max-width:850px){.ui-theme .sidebar .app-brand{width:170px;padding:8px 12px}}
@media(max-width:550px){.ui-theme .login-mobile-brand{display:flex;max-width:240px;padding:0;margin:0 auto 32px}}

.quote-header-actions{flex-shrink:0;justify-content:flex-end;flex-wrap:wrap;gap:10px}
.quote-save-status{flex-basis:100%;text-align:right;font-size:12px;color:var(--teal-dark)}
.quote-save-status.error{color:#a83c3c}

@keyframes save-reminder{0%,100%{background-color:#f7c948;box-shadow:0 0 0 0 rgba(247,201,72,.08)}50%{background-color:#ffe28a;box-shadow:0 0 0 5px rgba(247,201,72,.3)}}
.ui-theme .btn.primary.needs-save:not(:disabled){background:#f7c948;border-color:#d8a917;color:var(--navy);animation:save-reminder 2.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.ui-theme .btn.primary.needs-save:not(:disabled){animation:none;box-shadow:0 0 0 3px rgba(247,201,72,.3)}}