/* ===================================================================
   MONTA CONTAINER — Design directions + platform quality layer
   Loaded AFTER styles.css. Design: "Atelier" (Apple + Rimowa).
   <html data-theme="atelier" data-mode="light|dark">

   Palette (brand):
     azul-maritimo    #0F2C59   terracota-corten  #C2410C
     cinza-gelo       #F1F5F9   laranja-container #C2410C (alias)
     cinza-borda      #E2E8F0   azul-profundo     #081B38
     branco           #FFFFFF
   =================================================================== */

:root {
  --azul-maritimo: #0F2C59;      /* Identidade principal e autoridade */
  --terracota-corten: #C2410C;   /* Ação, alertas e destaque (Aço Corten / Terracota) */
  --laranja-container: var(--terracota-corten, #C2410C); /* Retrocompatibilidade */
  --cinza-gelo: #F1F5F9;         /* Fundo suave e respiro visual */
  --branco: #FFFFFF;
  --azul-profundo: #081B38;      /* Variação para fundos escuros */
  --cinza-borda: #E2E8F0;

  /* Smooth theme transition tokens */
  --theme-transition-duration: 250ms;
  --theme-transition-timing: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===================================================================
   MODE TOKENS
   =================================================================== */
html[data-mode="light"],
[data-theme="light"] {
  --bg-app: var(--cinza-gelo);
  --bg-body: var(--bg-app);
  --bg-card: var(--branco);
  --bg-card-secondary: #F8FAFC;
  --bg-input: #FFFFFF;
  --bg-input-focus: #FFFFFF;
  --bg-subtle: #F8FAFC;
  --bg-hover: #EAEFF6;
  --track: var(--cinza-borda);
  --border: var(--cinza-borda);
  --border-strong: #CBD5E1;
  --border-faint: #EDF1F6;
  --border-hover: var(--azul-maritimo);
  --border-card: var(--cinza-borda);
  --border-focus: var(--laranja-container);
  --glass: rgba(255, 255, 255, 0.9);

  --text-primary: var(--azul-maritimo);
  --text-secondary: #3B4F72;
  --text-muted: #64748B;

  --cta-bg: var(--laranja-container);
  --cta-text: var(--branco);
  --brand-logo: var(--azul-maritimo);
  --brand-accent: var(--laranja-container);

  --brand-ocean: var(--laranja-container);
  --brand-ocean-hover: #9A3412;
  --brand-cyan: var(--azul-maritimo);
  --brand-amber: #C2410C;
  --ink-solid: var(--azul-maritimo);

  --shadow-sm: none;
  --shadow-md: 0 8px 28px rgba(15, 44, 89, 0.08);
  --shadow-lg: 0 18px 48px rgba(15, 44, 89, 0.12);

  --scene-bg: #E6ECF5;
  --scene-floor: #D3DDEC;
  --scene-frame: #3A4F78;
  --scene-door: #0F2C59;
  --scene-post: #5B6F94;
  --scene-grid-major: #B7C4DA;
  --scene-grid-minor: #D3DDEC;
  color-scheme: light;
}

html[data-mode="dark"],
[data-theme="dark"] {
  --bg-app: var(--azul-profundo);
  --bg-body: var(--bg-app);
  --bg-card: var(--azul-maritimo);
  --bg-card-secondary: #0C2447;
  --bg-input: #0A2147;
  --bg-input-focus: #0A2147;
  --bg-subtle: #0C2447;
  --bg-hover: #153868;
  --track: #1E3A6D;
  --border: #1E3A6D;
  --border-strong: #2B4C82;
  --border-faint: #14305E;
  --border-hover: #4F6FA3;
  --border-card: #1E3A6D;
  --border-focus: var(--laranja-container);
  --glass: rgba(8, 27, 56, 0.88);

  --text-primary: var(--cinza-gelo);
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;

  --cta-bg: var(--laranja-container);
  --cta-text: var(--branco);
  --brand-logo: var(--cinza-gelo);
  --brand-accent: var(--laranja-container);

  --brand-ocean: var(--laranja-container);
  --brand-ocean-hover: #EA580C;
  --brand-cyan: #FB923C;
  --brand-amber: #FDBA74;
  --brand-amber-bg: rgba(253, 186, 116, 0.12);
  --brand-success: #4ADE80;
  --brand-success-bg: rgba(74, 222, 128, 0.14);
  --brand-danger: #FB7185;
  --brand-danger-bg: rgba(251, 113, 133, 0.14);
  --ink-solid: var(--laranja-container);

  --shadow-sm: none;
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.65);

  --scene-bg: #081B38;
  --scene-floor: #123058;
  --scene-frame: #7F96BF;
  --scene-door: #4F6FA3;
  --scene-post: #A3B4D1;
  --scene-grid-major: #1E3A6D;
  --scene-grid-minor: #102C57;
  color-scheme: dark;
}

/* Dark-mode corrections for components with fixed colors in styles.css */
html[data-mode="dark"] .status-pill.success { color: #4ADE80; }
html[data-mode="dark"] .status-pill.danger  { color: #FB7185; }
html[data-mode="dark"] .status-pill.cyan    { color: #FB923C; background: rgba(249, 115, 22, 0.14); }
html[data-mode="dark"] .status-pill.muted   { color: #94A3B8; }
html[data-mode="dark"] .status-pill-toggle:hover {
  filter: brightness(1.12);
  border-color: rgba(255, 255, 255, 0.22);
}
html[data-mode="dark"] .dunnage-weight-pill {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}
html[data-mode="dark"] .dunnage-weight-pill:hover {
  border-color: #0A84FF;
  background: rgba(10, 132, 255, 0.12);
  color: #FFFFFF;
}
html[data-mode="dark"] .dunnage-weight-pill.active {
  border-color: #0A84FF !important;
  background: rgba(10, 132, 255, 0.24) !important;
  color: #0A84FF !important;
}
html[data-mode="dark"] #btn-conflict-overwrite {
  background: var(--azul-maritimo);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
html[data-mode="dark"] #btn-conflict-overwrite:hover {
  background: var(--azul-profundo);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}
html[data-mode="dark"] .toast-notification  { background: var(--cinza-gelo); color: var(--azul-maritimo); }
html[data-mode="dark"] .toast-notification svg { stroke: var(--azul-maritimo); }
html[data-mode="dark"] pre,
html[data-mode="dark"] code { color: #E2E8F0; }
html[data-mode="dark"] ::selection { background: rgba(194, 65, 12, 0.45); }

/* ===================================================================
   SHARED BRAND PIECES (all directions)
   =================================================================== */
.brand-titles h1 { font-weight: 700; line-height: 1; }
.brand-titles h1 .wm-b { font-weight: 300; }
.brand-icon {                                     /* orange square mark */
  width: 12px; height: 12px;
  background: var(--laranja-container) !important;
  border: 0 !important; box-shadow: none !important;
  border-radius: 2px !important;
  flex-shrink: 0;
}
.card-title .icon { display: none; }             /* titles speak for themselves */
.card { box-shadow: none; }
.card:hover { border-color: var(--border-card); }
.btn-primary { background: var(--laranja-container); color: #FFFFFF; font-weight: 700; box-shadow: none; }
.btn-primary:hover { background: var(--brand-ocean-hover); box-shadow: none; }
.canvas-viewport { background: var(--scene-bg); }

/* ===================================================================
   ATELIER   (Apple + Rimowa)
   Sharp, quiet, editorial. Hairlines instead of boxes, big sentence-case
   titles, orange only where the user must act.
   =================================================================== */
html[data-theme="atelier"] {
  --font-display: "SF Pro Display", "Helvetica Neue", Inter, -apple-system, Arial, sans-serif;
  --radius-xs: 0; --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-xl: 2px;
  --radius-full: 2px;
}
html[data-theme="atelier"] .app-header {
  padding: 18px 40px;
  background: var(--glass);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
html[data-theme="atelier"] .brand-wrapper { gap: 14px; }
html[data-theme="atelier"] .brand-titles h1 {
  font-size: 15px; letter-spacing: 0.28em; text-transform: uppercase;
}
html[data-theme="atelier"] .brand-titles p { display: none; }
html[data-theme="atelier"] .app-container { margin-top: 40px; gap: 48px; grid-template-columns: 460px 1fr; }
html[data-theme="atelier"] .panel-column,
html[data-theme="atelier"] .viewer-column { gap: 40px; }
html[data-theme="atelier"] .card {
  background: transparent; border: 0; padding: 0;
  border-top: 1px solid var(--text-primary);
  padding-top: 20px;
}
html[data-theme="atelier"] .viewer-card,
html[data-theme="atelier"] .quote-card {
  background: var(--bg-card); border: 1px solid var(--border); padding: 24px;
}
html[data-theme="atelier"] .card-header { border: 0; padding-bottom: 0; margin-bottom: 22px; }
html[data-theme="atelier"] .card-title {
  font-family: var(--font-display); font-size: 26px; font-weight: 300; letter-spacing: -0.02em;
}
html[data-theme="atelier"] label,
html[data-theme="atelier"] .presets-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}
html[data-theme="atelier"] input,
html[data-theme="atelier"] select {
  background: transparent; border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0; padding-left: 0;
}
html[data-theme="atelier"] input:focus { border-bottom-color: var(--laranja-container); box-shadow: none; }
html[data-theme="atelier"] .paste-textarea {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 6px);
  padding: 12px 14px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
html[data-theme="atelier"] .btn-primary {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; padding: 15px 20px;
}
html[data-theme="atelier"] .preset-chip {
  background: transparent; border: 0; border-bottom: 1px solid transparent; padding: 4px 0; margin-right: 12px;
  font-size: 12px; letter-spacing: 0.04em; border-radius: 0; box-shadow: none;
}
html[data-theme="atelier"] .preset-chip:hover { border-bottom-color: var(--laranja-container); background: transparent; }
html[data-theme="atelier"] .preset-chip svg { display: none; }
html[data-theme="atelier"] .preset-chip.active {
  background: transparent; color: var(--text-primary); border-bottom-color: var(--laranja-container);
}

html[data-theme="atelier"] .type-switcher,
html[data-theme="atelier"] .env-switcher {
  background: transparent;
  border: 1px solid var(--border);
  padding: 2px;
  border-radius: 2px;
}

html[data-theme="atelier"] .type-tab,
html[data-theme="atelier"] .env-tab {
  border-radius: 0;
}

html[data-theme="atelier"] .type-tab:hover,
html[data-theme="atelier"] .env-tab:hover {
  color: var(--laranja-container);
}

html[data-theme="atelier"] .type-tab.active,
html[data-theme="atelier"] .env-tab.active {
  background: var(--text-primary);
  color: var(--bg-card);
  box-shadow: none;
}

/* ===================================================================
   SWITCHER (header)
   =================================================================== */
.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mode-btn {
  all: unset; box-sizing: border-box; cursor: pointer; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  color: var(--text-secondary); border: 1px solid var(--border-strong); border-radius: 50%;
}
.mode-btn:hover { color: var(--text-primary); border-color: var(--text-primary); }

.mode-btn svg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
  transform-origin: center;
  transition:
    transform var(--theme-transition-duration, 250ms) var(--theme-transition-timing, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity var(--theme-transition-duration, 250ms) var(--theme-transition-timing, cubic-bezier(0.16, 1, 0.3, 1)),
    stroke var(--theme-transition-duration, 250ms) var(--theme-transition-timing, cubic-bezier(0.16, 1, 0.3, 1)),
    fill var(--theme-transition-duration, 250ms) var(--theme-transition-timing, cubic-bezier(0.16, 1, 0.3, 1));
  will-change: transform, opacity;
}

/* Light mode defaults: Moon is visible, Sun is rotated and scaled down */
.mode-btn .i-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  pointer-events: auto;
}
.mode-btn .i-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
  pointer-events: none;
}

/* Dark mode: Sun is visible, Moon is rotated and scaled down */
html[data-mode="dark"] .mode-btn .i-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  pointer-events: auto;
}
html[data-mode="dark"] .mode-btn .i-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
  pointer-events: none;
}

/* ===================================================================
   PLATFORM QUALITY LAYER (every direction, every mode)
   =================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--laranja-container); outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
table, [class*="stat"], [class*="metric"], input[type="number"] { font-variant-numeric: tabular-nums; }
h1, h2, h3, .card-title { text-wrap: balance; }
p { text-wrap: pretty; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::selection { background: rgba(194, 65, 12, 0.25); }
/* ===================================================================
   SMOOTH THEME TRANSITION (Scoped strictly to interactive toggle)
   =================================================================== */
html.theme-transitioning,
html.theme-transitioning body,
html.theme-transitioning .app-container,
html.theme-transitioning .app-header,
html.theme-transitioning .card,
html.theme-transitioning .viewer-card,
html.theme-transitioning .quote-card,
html.theme-transitioning .breakdown-card,
html.theme-transitioning .matrix-card,
html.theme-transitioning .canvas-viewport,
html.theme-transitioning .panel-column,
html.theme-transitioning .viewer-column,
html.theme-transitioning h1,
html.theme-transitioning h2,
html.theme-transitioning h3,
html.theme-transitioning h4,
html.theme-transitioning .card-title,
html.theme-transitioning .brand-titles h1,
html.theme-transitioning label,
html.theme-transitioning .presets-label,
html.theme-transitioning .text-secondary,
html.theme-transitioning .text-muted,
html.theme-transitioning p,
html.theme-transitioning span,
html.theme-transitioning a,
html.theme-transitioning strong,
html.theme-transitioning small,
html.theme-transitioning input,
html.theme-transitioning select,
html.theme-transitioning textarea,
html.theme-transitioning .paste-textarea,
html.theme-transitioning .items-search-input,
html.theme-transitioning .table-inline-input,
html.theme-transitioning .table-inline-select,
html.theme-transitioning .form-group,
html.theme-transitioning .items-table,
html.theme-transitioning .items-table th,
html.theme-transitioning .items-table td,
html.theme-transitioning .items-table tr,
html.theme-transitioning .items-table-wrapper,
html.theme-transitioning .table-wrapper,
html.theme-transitioning .status-pill,
html.theme-transitioning .status-pill-toggle,
html.theme-transitioning .items-count-badge,
html.theme-transitioning .type-tab-badge,
html.theme-transitioning .conflict-badge,
html.theme-transitioning .type-switcher,
html.theme-transitioning .env-switcher,
html.theme-transitioning .unit-system-toggle,
html.theme-transitioning .quote-layout-toggle,
html.theme-transitioning .type-tab,
html.theme-transitioning .env-tab,
html.theme-transitioning .unit-btn,
html.theme-transitioning .quote-toggle-btn,
html.theme-transitioning .btn-primary,
html.theme-transitioning .btn-secondary,
html.theme-transitioning .btn-danger,
html.theme-transitioning .btn-whatsapp,
html.theme-transitioning .icon-btn,
html.theme-transitioning .action-icon-btn,
html.theme-transitioning .camera-btn,
html.theme-transitioning .pager-btn,
html.theme-transitioning .dunnage-trigger-btn,
html.theme-transitioning .mode-btn,
html.theme-transitioning .preset-chip,
html.theme-transitioning svg:not(.mode-btn svg),
html.theme-transitioning svg path,
html.theme-transitioning svg circle,
html.theme-transitioning svg line,
html.theme-transitioning svg polyline,
html.theme-transitioning svg rect,
html.theme-transitioning .modal-card,
html.theme-transitioning .modal-header,
html.theme-transitioning .modal-body,
html.theme-transitioning .modal-footer,
html.theme-transitioning .modal-overlay,
html.theme-transitioning .quote-preview-box,
html.theme-transitioning .pdf-drop-zone,
html.theme-transitioning .toast-notification {
  transition:
    background-color var(--theme-transition-duration, 250ms) var(--theme-transition-timing, cubic-bezier(0.16, 1, 0.3, 1)),
    border-color var(--theme-transition-duration, 250ms) var(--theme-transition-timing, cubic-bezier(0.16, 1, 0.3, 1)),
    color var(--theme-transition-duration, 250ms) var(--theme-transition-timing, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--theme-transition-duration, 250ms) var(--theme-transition-timing, cubic-bezier(0.16, 1, 0.3, 1)),
    stroke var(--theme-transition-duration, 250ms) var(--theme-transition-timing, cubic-bezier(0.16, 1, 0.3, 1)),
    fill var(--theme-transition-duration, 250ms) var(--theme-transition-timing, cubic-bezier(0.16, 1, 0.3, 1));
}
@media (pointer: coarse) { .icon-btn, .preset-chip, .mode-btn { min-height: 40px; } }
.card table { max-width: 100%; }
.table-wrapper, [class*="table-wrap"], [class*="table-container"] { overflow-x: auto; }

@media (max-width: 760px) {
  html[data-theme] .app-header { padding: 16px 16px 20px; }
    html[data-theme] .app-container { padding: 0 12px 32px; gap: 20px; grid-template-columns: 1fr; }
  html[data-theme] .card { padding: 18px; }
  .header-inner { gap: 12px; }
  .presets-group { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
  .preset-chip { flex: none; }
}
@media print {
  .app-header, .viewer-card, .mode-btn, .toast-notification { display: none !important; }
  .app-container { display: block; margin: 0; padding: 0; }
  .card { box-shadow: none; break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --theme-transition-duration: 0.01ms !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}