/* Apex 4.7 · Neomorphic UI layer
   Soft-neomorphism: depth without sacrificing contrast, focus states or print clarity. */
:root,
[data-theme="dark"] {
  color-scheme: light;
  --neo-bg: #e9eef3;
  --neo-bg-deep: #e2e8ee;
  --neo-surface: #e9eef3;
  --neo-surface-strong: #f1f5f8;
  --neo-text: #17202a;
  --neo-muted: #667482;
  --neo-subtle: #8d99a5;
  --neo-line: rgba(120, 137, 152, .18);
  --neo-white: rgba(255, 255, 255, .92);
  --neo-dark: rgba(154, 170, 184, .52);
  --neo-shadow: 10px 10px 24px var(--neo-dark), -10px -10px 24px var(--neo-white);
  --neo-shadow-sm: 6px 6px 14px rgba(154, 170, 184, .43), -6px -6px 14px rgba(255, 255, 255, .82);
  --neo-inset: inset 4px 4px 9px rgba(154, 170, 184, .45), inset -4px -4px 9px rgba(255, 255, 255, .84);
  --neo-inset-soft: inset 2px 2px 6px rgba(154, 170, 184, .36), inset -2px -2px 6px rgba(255, 255, 255, .8);
  --neo-radius: 20px;
  --neo-radius-sm: 14px;
  --neo-radius-xs: 10px;
  --primary: #55cfc4;
  --primary-strong: #35b7ab;
  --primary-soft: #d7f4f0;
  --success: #268c56;
  --success-soft: #d9efe2;
  --warning: #ac761f;
  --warning-soft: #f5e9cf;
  --danger: #bd4d63;
  --danger-soft: #f4dce2;
  --violet: #6b68c8;
  --violet-soft: #e2e1f5;
  --info: #3f91c7;
  --info-soft: #dcebf5;
  --text: var(--neo-text);
  --ink: var(--neo-text);
  --muted: var(--neo-muted);
  --subtle: var(--neo-subtle);
  --line: var(--neo-line);
  --surface: var(--neo-surface);
  --surface-soft: var(--neo-bg-deep);
  --surface-2: var(--neo-bg-deep);
  --soft: var(--neo-bg-deep);
  --canvas: var(--neo-bg);
  --bg: var(--neo-bg);
  --shadow: var(--neo-shadow-sm);
  --shadow-soft: var(--neo-shadow-sm);
  --radius: var(--neo-radius);
  --radius-sm: var(--neo-radius-sm);
  --focus: 0 0 0 3px rgba(85, 207, 196, .23);
}

html { background: var(--neo-bg); }
body,
body.module-portal,
body.module-order,
body.module-proformas,
body.module-proforma-public,
body.module-traceability,
body.module-branding,
body.module-install {
  background:
    radial-gradient(circle at 12% 4%, rgba(255,255,255,.82), transparent 25%),
    radial-gradient(circle at 88% 8%, rgba(85,207,196,.09), transparent 26%),
    linear-gradient(145deg, #edf2f6 0%, #e6ebf0 100%) !important;
  color: var(--neo-text) !important;
}

body::selection { background: rgba(85, 207, 196, .24); }
a { color: #287f79; }

/* Login */
.auth-root {
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.95), transparent 25%),
    radial-gradient(circle at 85% 12%, rgba(85,207,196,.18), transparent 24%),
    linear-gradient(145deg, #eef3f7, #e5ebf0) !important;
}
.auth-copy { color: var(--neo-text) !important; }
.auth-copy h1 { color: var(--neo-text) !important; letter-spacing: -.04em; }
.auth-copy p, .auth-benefits span { color: var(--neo-muted) !important; }
.auth-brand span { color: var(--neo-muted) !important; }
.auth-benefits .material-symbols-rounded { color: var(--primary) !important; }
.auth-panel {
  background: var(--neo-surface) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  border-radius: 28px !important;
  box-shadow: 16px 16px 38px rgba(154,170,184,.52), -16px -16px 38px rgba(255,255,255,.9) !important;
  padding: 32px !important;
}
.auth-divider::before, .auth-divider::after { background: rgba(120,137,152,.2) !important; }

/* Main shell */
.sidebar {
  background: rgba(233, 238, 243, .96) !important;
  border-right: 0 !important;
  box-shadow: 8px 0 24px rgba(154,170,184,.28) !important;
  color: var(--neo-text) !important;
  padding: 18px 15px !important;
}
.brand {
  border-bottom: 0 !important;
  margin-bottom: 10px;
  padding: 4px 8px 18px !important;
}
.brand-mark,
.auth-brand .brand-mark,
body.module-portal .mark,
body.module-order .brand-mark,
body.module-proformas .brand-mark,
body.module-traceability .brand-mark,
body.module-branding .brand-mark {
  background: linear-gradient(145deg, #6eddd3, #46bdb2) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: 14px !important;
  box-shadow: 5px 5px 12px rgba(125,157,158,.35), -5px -5px 12px rgba(255,255,255,.82) !important;
  color: #113936 !important;
}
.brand strong, .profile-button strong { color: var(--neo-text) !important; }
.brand span, .profile-button small, .profile-button .material-symbols-rounded { color: var(--neo-muted) !important; }
.nav-group { color: var(--neo-subtle) !important; }
.nav-item {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: var(--neo-muted) !important;
  margin: 5px 0 !important;
  min-height: 42px;
  transition: color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease !important;
}
.nav-item:hover {
  background: var(--neo-surface) !important;
  border-color: rgba(255,255,255,.28) !important;
  box-shadow: var(--neo-shadow-sm) !important;
  color: var(--neo-text) !important;
  transform: translateY(-1px);
}
.nav-item.active {
  background: var(--neo-surface) !important;
  border-color: rgba(85,207,196,.22) !important;
  box-shadow: var(--neo-inset) !important;
  color: #217d76 !important;
}
.nav-item.active .material-symbols-rounded { color: var(--primary-strong) !important; }
.profile-button {
  background: var(--neo-surface) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 16px !important;
  box-shadow: var(--neo-shadow-sm) !important;
  color: var(--neo-text) !important;
}
.avatar {
  background: var(--neo-surface) !important;
  box-shadow: var(--neo-inset-soft) !important;
  color: #287f79 !important;
}

.app-shell { background: transparent !important; }
.topbar {
  background: rgba(233,238,243,.86) !important;
  backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 0 !important;
  box-shadow: 0 8px 24px rgba(154,170,184,.18) !important;
}
.global-search {
  background: var(--neo-surface) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 999px !important;
  box-shadow: var(--neo-inset-soft) !important;
  color: var(--neo-muted) !important;
  padding: 10px 15px !important;
}
.global-search input { color: var(--neo-text) !important; }
.branch-selector,
.connection-status {
  background: var(--neo-surface) !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  border-radius: 14px !important;
  box-shadow: var(--neo-shadow-sm) !important;
}
.icon-button {
  background: var(--neo-surface) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  box-shadow: var(--neo-shadow-sm) !important;
  color: var(--neo-muted) !important;
}
.icon-button:hover { color: var(--primary-strong) !important; transform: translateY(-1px); }
.icon-button:active { box-shadow: var(--neo-inset-soft) !important; transform: translateY(0); }

/* Core cards */
.stat-card,
.card,
.quick-card,
.loading-card,
.order-card,
.quote-box,
.recommendation-card,
.client-vehicle-card,
.client-order-line,
.detail-section,
.detail-metric,
.client-hero-panel,
body.module-portal .card,
body.module-order .card,
body.module-order .stat,
body.module-proformas .card,
body.module-traceability .card,
body.module-traceability .tx,
body.module-traceability .kpi,
body.module-branding .card,
body.module-install .card {
  background: var(--neo-surface) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: var(--neo-radius) !important;
  box-shadow: var(--neo-shadow-sm) !important;
  color: var(--neo-text) !important;
}
.stat-card:hover,
.quick-card:hover,
.order-card:hover,
.client-vehicle-card:hover {
  box-shadow: 9px 9px 22px rgba(154,170,184,.48), -9px -9px 22px rgba(255,255,255,.9) !important;
  transform: translateY(-1px);
}
.stat-icon,
.vehicle-thumb,
.detail-metric .material-symbols-rounded {
  background: var(--neo-surface) !important;
  box-shadow: var(--neo-inset-soft) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}
.section-head {
  background: transparent !important;
  border-bottom: 0 !important;
}

/* Buttons */
.button,
.btn,
button.button {
  border-radius: 14px !important;
  font-weight: 700 !important;
  min-height: 40px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease !important;
}
.button.primary,
.btn:not(.soft):not(.secondary):not(.danger),
button.primary {
  background: linear-gradient(145deg, #62d9cf, #42bcb1) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: 5px 5px 12px rgba(121,158,158,.36), -5px -5px 12px rgba(255,255,255,.72) !important;
  color: #123c38 !important;
}
.button.secondary,
.btn.secondary,
.btn.soft,
.button.ghost {
  background: var(--neo-surface) !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  box-shadow: var(--neo-shadow-sm) !important;
  color: var(--neo-text) !important;
}
.button:hover, .btn:hover { transform: translateY(-1px); text-decoration: none; }
.button:active, .btn:active {
  box-shadow: var(--neo-inset-soft) !important;
  transform: translateY(0);
}
.button.danger, .btn.danger {
  background: #eadde1 !important;
  color: #9c3e51 !important;
}
.button.whatsapp, .btn.whatsapp { background: #d7eee0 !important; color: #287049 !important; }

/* Forms */
.field input,
.field select,
.field textarea,
input,
select,
textarea,
.select {
  background: var(--neo-surface) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 13px !important;
  box-shadow: var(--neo-inset-soft) !important;
  color: var(--neo-text) !important;
}
input::placeholder, textarea::placeholder { color: #8a98a4 !important; }
.field input:focus,
.field select:focus,
.field textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(85,207,196,.6) !important;
  box-shadow: var(--neo-inset-soft), var(--focus) !important;
  outline: 0 !important;
}
.field span, label span { color: #5f6f7d !important; }
.checkbox-field input[type="checkbox"], input[type="checkbox"], input[type="radio"] { box-shadow: none !important; accent-color: var(--primary-strong); }

/* Tables and rows */
.table-wrap,
.line-table,
.quote-table {
  background: var(--neo-surface) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 18px !important;
  box-shadow: var(--neo-inset-soft) !important;
}
th, .table th {
  background: rgba(224,230,235,.7) !important;
  color: #667482 !important;
  border-bottom-color: rgba(120,137,152,.16) !important;
}
td, .table td { border-bottom-color: rgba(120,137,152,.13) !important; }
tbody tr:hover td { background: rgba(255,255,255,.24) !important; }
.order-line,
.list-item,
.portal-line,
.appointment,
.quote-box,
.detail-line,
.timeline-row,
.task {
  background: rgba(233,238,243,.5) !important;
  border-color: rgba(120,137,152,.14) !important;
}

/* Status / chips */
.badge,
.status-pill,
.pill,
.order-timeline span,
.client-pill-row span {
  border: 1px solid rgba(120,137,152,.14) !important;
  box-shadow: var(--neo-inset-soft) !important;
}
.badge.blue, .badge.violet, .status-pill.blue { background: #d9efec !important; color: #2a756f !important; }
.badge.green, .status-pill.green { background: #dceee3 !important; color: #2d774d !important; }
.badge.amber, .status-pill.amber { background: #f2e7cf !important; color: #93651b !important; }
.badge.red, .status-pill.red { background: #f0dce1 !important; color: #a24558 !important; }

/* Modal / toast */
.modal-backdrop { background: rgba(74, 89, 101, .32) !important; backdrop-filter: blur(8px); }
.modal {
  background: var(--neo-surface) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 24px !important;
  box-shadow: 18px 18px 42px rgba(115,130,143,.42), -12px -12px 34px rgba(255,255,255,.7) !important;
}
.toast {
  background: #28343e !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  box-shadow: 8px 8px 20px rgba(109,123,135,.3) !important;
}

/* Secondary modules */
body.module-order .hero-card,
body.module-proformas .top,
body.module-traceability .top,
body.module-branding .top,
body.module-portal .hero {
  background: var(--neo-surface) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 26px !important;
  box-shadow: var(--neo-shadow) !important;
  color: var(--neo-text) !important;
}
body.module-order .hero-card::before,
body.module-proformas .top::before,
body.module-traceability .top::before,
body.module-branding .top::before,
body.module-portal .hero::after { display: none !important; }
body.module-order .section,
body.module-order .damage-zone-board,
body.module-order .damage-panel,
body.module-order .attachments-box,
body.module-order .signature-box,
body.module-order .url-box,
body.module-branding .brand-preview,
body.module-proformas .totals,
body.module-proformas .list-item,
body.module-traceability .list-item {
  background: var(--neo-surface) !important;
  border-color: rgba(255,255,255,.32) !important;
  border-radius: 18px !important;
  box-shadow: var(--neo-inset-soft) !important;
}
body.module-order .damage-view-tabs button,
body.module-order .damage-photo-btn,
body.module-order .zone-part {
  background: var(--neo-surface) !important;
  border-color: rgba(255,255,255,.32) !important;
  box-shadow: var(--neo-shadow-sm) !important;
  color: var(--neo-muted) !important;
}
body.module-order .damage-view-tabs button.active,
body.module-order .zone-part.active {
  box-shadow: var(--neo-inset) !important;
  color: #217d76 !important;
}

/* Public portal */
body.module-portal .client-hero,
body.module-portal .hero-card {
  background: var(--neo-surface) !important;
  color: var(--neo-text) !important;
  border-color: rgba(255,255,255,.4) !important;
  box-shadow: var(--neo-shadow) !important;
}
body.module-portal .timeline-item i { box-shadow: 0 0 0 6px rgba(85,207,196,.13) !important; }
body.module-portal .footer { color: var(--neo-muted) !important; }

/* Public proforma: neomorphic frame on screen, flat on paper */
body.module-proforma-public .quote-doc {
  background: var(--neo-surface) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 28px !important;
  box-shadow: var(--neo-shadow) !important;
}
body.module-proforma-public .quote-hero {
  background: linear-gradient(145deg, #e7edf1, #eef3f6) !important;
  color: var(--neo-text) !important;
  border-bottom: 0 !important;
}
body.module-proforma-public .quote-kicker,
body.module-proforma-public .quote-hero h1,
body.module-proforma-public .quote-chip { color: var(--neo-text) !important; }
body.module-proforma-public .quote-chip,
body.module-proforma-public .summary-card,
body.module-proforma-public .quote-section,
body.module-proforma-public .quote-terms,
body.module-proforma-public .quote-logo {
  background: var(--neo-surface) !important;
  border-color: rgba(255,255,255,.34) !important;
  box-shadow: var(--neo-shadow-sm) !important;
}

/* Accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(53,183,171,.28) !important;
  outline-offset: 3px !important;
}

@media (max-width: 760px) {
  .sidebar.open { box-shadow: 12px 0 30px rgba(105,121,134,.32) !important; }
  .auth-panel { border-radius: 22px !important; padding: 22px !important; }
  .stat-card, .card, .quick-card { border-radius: 16px !important; }
  .topbar { box-shadow: 0 6px 18px rgba(154,170,184,.18) !important; }
}

@media print {
  :root,
  [data-theme="dark"] {
    color-scheme: light;
    --text: #111827;
    --muted: #4b5563;
    --line: #d7dde8;
    --surface: #fff;
    --surface-soft: #fff;
    --canvas: #fff;
    --bg: #fff;
  }
  body,
  body.module-order,
  body.module-proforma-public,
  body.module-portal {
    background: #fff !important;
    color: #111827 !important;
  }
  .quote-doc,
  .quote-section,
  .quote-summary,
  .summary-card,
  .quote-terms,
  .print-page,
  .paper-block,
  .card,
  .hero,
  .client-hero {
    background: #fff !important;
    border-color: #d7dde8 !important;
    box-shadow: none !important;
    color: #111827 !important;
  }
  .quote-hero { background: #fff !important; color: #111827 !important; }
}