/* ===================
   style.css v3.0.5 (normalized)
   ================= */

/* ---------- Variáveis e Reset Básico ---------- */
:root{
  --brand-orange:#FFA500;
  --brand-blue:#57abfa;
  --border:#ddd;
  --border-soft:#e9e9e9;
  --text:#222;

  /* Order summary grid */
  --ob-label-w:80px;   /* labels */
  --ob-value-w:70px;   /* prices */
  --ob-gap:6px;        /* label|value|note gap */
  --ob-note-gap:6px;   /* space before notes */
}

*,
*::before,
*::after{ box-sizing:border-box; }

body{
  font-family:Arial, sans-serif;
  font-size:11px;
  margin:0; padding:0;
  height:100vh; overflow:hidden;
  display:flex; flex-direction:column;
  color:var(--text); background:#fff;
}

/* ---------- Layout Geral ---------- */
.fixed-header{
  position:sticky; top:0; z-index:1000;
  background:#fff; padding:0; flex:0 0 auto;
}
.table-container{ flex:1 1 auto; overflow:auto; padding:0; }

/* Header: menu à esquerda, boxes à direita */
.header-boxes{ display:block; margin:0 auto; width:93%; padding:0; }
.header-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; width:100%; flex-wrap:nowrap;
}
.header-left{ flex:1 1 auto; min-width:0; }
.header-right{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}

/* ---------- Tabela ---------- */
table{ width:95%; margin:auto; border-collapse:collapse; }
th,td{ border:1px solid var(--border); padding:4px; text-align:center; }
thead th{
  position:sticky; top:0; background:var(--brand-orange); color:#fff; z-index:5;
  vertical-align:middle; min-height:60px; box-shadow:0 2px 5px rgba(0,0,0,.1);
}
thead th.image-header{ vertical-align:bottom; text-align:right; }

/* ---------- Filtros & Inputs ---------- */
.model-search,
.dropdown-filter{
  width:90%; padding:5px; margin-top:2px; font-size:10px;
  border:none; border-radius:4px;
  transition:border-color .2s, box-shadow .2s;
  background-color: #fff;
}
.model-search{ text-align:center; }
.dropdown-filter{
  text-align:center; text-align-last:center; appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFA500" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat:no-repeat; background-position:right 8px center; background-size:16px 16px; padding-right:30px;
}
.model-search:hover,.dropdown-filter:hover{ box-shadow:0 0 5px var(--brand-orange); }
.model-search:focus,.dropdown-filter:focus{ border-color:var(--brand-orange); outline:none; }

#heelFilter,#sizeFilter,#stockFilter{
  width:auto; min-width:56px; text-align:center; color:#444;
}

/* ---------- Botão "Clear Filters" ---------- */
#clearFiltersButton{
  width:auto; padding:9px 13px; margin:0 auto;
  font-size:13px; line-height:1.1;
  background:var(--brand-orange); color:#fff;
  border:1px solid #ffffff; border-radius:6px;
  cursor:pointer; display:block; opacity:0; /* JS torna visível quando há filtros */
  font-weight:bold;
  transition:opacity .3s ease, box-shadow .2s, background .2s, color .2s, filter .2s;
}
#clearFiltersButton:hover{
  background:#ffffff29; color:#fff;
  box-shadow:0 0 5px var(--brand-orange); filter:brightness(1.05);
}
#productTable th:has(#clearFiltersButton),
#productTable td:has(#clearFiltersButton){ text-align:center; vertical-align:middle; }

/* ---------- Imagens ---------- */
.image-container{ position:relative; display:inline-block; }
.image-container img{ max-width:220px; height:auto; transition:opacity .3s ease-in-out; }
.image-container .hover-img{ position:absolute; inset:0; opacity:0; display:none; }
.image-container:not(.no-hover):hover .hover-img{ display:block; opacity:1; }
.image-container:not(.no-hover):hover .default-img{ opacity:0; }

/* ---------- Badges ---------- */
.badge{
  position:absolute; top:5px; right:-20px;
  font-size:1.05em; padding:2px 6px; border-radius:3px; font-weight:normal;
  white-space:nowrap; z-index:10; color:#fff;
}
.new-badge{ background:#71c41e; }
.outlet-badge{ background:#fd0000; }

/* ---------- Header de Categoria ---------- */
.category-header{
  display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:18px;
  background:#fff; border:1px solid var(--border-soft); border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  padding:10px 14px; margin:8px 0 12px 0; flex:1 1 auto; min-width:0;
}
.menu-title{
  font-size:17px; font-weight:600; color:var(--text); letter-spacing:.4px;
  border-right:1px solid #e0e0e0; padding-right:18px; margin-right:8px; user-select:none;
}
.category-menu{ display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; }
.menu-btn{
  appearance:none; background:transparent; border:1px solid transparent; color:#333;
  font-size:14px; font-weight:500; padding:1px 7px; border-radius:4px; cursor:pointer;
  transition:background .15s, color .15s, box-shadow .15s, transform .15s;
}
.menu-btn:hover{ background:#f6f6f6; box-shadow:inset 0 0 0 1px #ededed; transform:translateY(-1px); }
.menu-btn:active{ transform:translateY(0); }
.menu-btn.active{
  background:var(--brand-orange); color:#fff;
  box-shadow:0 6px 14px rgba(255,165,0,.28), inset 0 -1px 0 rgba(0,0,0,.08);
  border-color:transparent;
}
.menu-btn:focus-visible{ outline:2px solid var(--brand-orange); outline-offset:2px; }
.menu-subtext{ font-size:11px; opacity:.7; font-weight:normal; }

/* ---------- Boxes de Info ---------- */
.timestamp-box,.total-box,.stock-box,.inproduction-box{
  padding:4px 10px; font-weight:normal; font-size:11px; border-radius:4px;
  text-align:center; color:#fff; display:inline-flex; align-items:center; white-space:nowrap; flex:0 0 auto;
}
.timestamp-box,.inproduction-box{ background:var(--brand-blue); }
.total-box,.stock-box{ background:var(--brand-orange); }
.stock-box:empty,.inproduction-box:empty{
  display:none !important; padding:0 !important; border:0 !important;
  background:transparent !important; min-width:0 !important;
}
.timestamp-time{ font-weight:bold; }

/* ---------- Responsivo base ---------- */
@media (max-width:900px){
  .category-header{ justify-content:flex-start; overflow-x:auto; white-space:nowrap; }
  .menu-title{ font-size:15px; padding-right:12px; }
}
@media (max-width:768px){
  table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* === Out-of-stock: dim ============================ */
tbody tr[data-stock="NO" i] td:not([rowspan]){ opacity:.4; transition:opacity .15s; }
tbody tr[data-stock="NO" i]:hover td:not([rowspan]){ opacity:.7; }
tbody tr[data-stock="NO" i] td[rowspan]{ opacity:1; }

/* === Header price Min/Max ====================== */
#productTable th .minmax{
  display:flex; align-items:center; gap:6px; margin-top:2px;
  justify-content:center; margin-left:auto; margin-right:auto;
}
#productTable th .minmax-input{
  width:80px; padding:3px 5px; border:0; border-radius:4px; font-size:10px; text-align:center; background:#fff;
}
#productTable th .minmax-input[type="number"]::-webkit-outer-spin-button,
#productTable th .minmax-input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#productTable th .minmax-input[type="number"]{ -moz-appearance:textfield; }
#productTable th .minmax-input:focus{
  outline:none; border-color:#9aa4b2; box-shadow:0 0 0 2px rgba(0,0,0,0.06);
}
#productTable th .minmax-input:focus-visible{
  outline:none; border-color:#6b7280; box-shadow:0 0 0 2px rgba(0,0,0,0.12);
}
#productTable th #modelSearch:focus,#productTable th #colorSearch:focus{
  outline:none; border-color:#9aa4b2; box-shadow:0 0 0 2px rgba(0,0,0,0.06);
}
#productTable th #modelSearch:focus-visible,#productTable th #colorSearch:focus-visible{
  outline:none; border-color:#6b7280; box-shadow:0 0 0 2px rgba(0,0,0,0.12);
}
#productTable th .dropdown-filter,
#productTable th #heelFilter,#productTable th #sizeFilter,#productTable th #stockFilter{
  display:block; width:100%; box-sizing:border-box; border:0; border-radius:4px; background-clip:padding-box; padding:4px 6px;
  text-align:center; text-align-last:center; background-color:#fff;
}

/* Placeholders nos cabeçalhos */
#productTable th .model-search::placeholder{ color:#444; opacity:1; }
#productTable th #colorSearch::placeholder,
#productTable th #whMax::placeholder,
#productTable th #reMax::placeholder,
#productTable th #rtMax::placeholder{ color:#555; opacity:1; }

/* ===== Order Compact Bar ===== */
.order-compact{
  position:relative; top:0; z-index:999; background:#fff;
  border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
}
.order-compact-inner{
  width:93%; margin:0 auto;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; /* left|center|right */
  gap:24px; align-items:start;
  padding:11px 0 19px 0; font-size:12px;
}
.ob-col{ min-width:200px; }

/* LEFT (discount ladder) */
.ob-left{ grid-column:1; }
.ob-left .ob-title{ font-weight:700; margin-bottom:2px; }
.ob-left .ob-line{ margin:1px 0; }
.ob-left .ob-note{ margin-top:4px; font-size:11px; color:#666; font-style:italic; }

/* CENTER (summary) — grelha 3 colunas (quando usado dentro de left) */
.ob-center{
  max-width:520px; justify-self:start; margin-left:0;
  display:grid; grid-template-columns:var(--ob-label-w) var(--ob-value-w) 1fr; column-gap:var(--ob-gap);
}
.ob-center .ob-title{ grid-column:1 / 4; font-weight:700; margin-bottom:2px; text-align:left; }
.ob-row{ display:contents; }
.ob-row .label{ grid-column:1; opacity:.95; text-align:left; white-space:nowrap; }
.ob-row strong{ grid-column:2; text-align:right; font-weight:400; }
.ob-row em{ grid-column:3; color:#6b7280; font-style:italic; font-size:11px; padding-left:var(--ob-note-gap); }
.ob-sep{ grid-column:1 / 3; border-top:1px solid #e5e7eb; margin:4px 0; }
.ob-row.total strong{ font-weight:700; }
#sumDiscount.pos{ color:#16a34a; } /* desconto a verde quando > 0 */

/* RIGHT (form 2 col x 3 linhas) */
.ob-right{
  grid-column:3;
  display:grid;
  grid-template-columns:auto minmax(280px,1fr); /* col1 = labels | col2 = campos */
  grid-template-rows:auto auto auto;           /* 3 linhas */
  gap:2px 5px; align-items:center; min-width:340px;
}
.ob-right .label-company{ grid-column:1; grid-row:1; justify-self:end; white-space:nowrap; }
.ob-right #orderCompany{ grid-column:2; grid-row:1; width:100%; }
.ob-right .label-email{ grid-column:1; grid-row:2; justify-self:end; white-space:nowrap; }
.ob-right #orderEmail{ grid-column:2; grid-row:2; width:100%; }
.ob-right .label-am{ grid-column:1; grid-row:3; justify-self:end; white-space:nowrap; }
.ob-right .am-actions{
  grid-column:2; grid-row:3;
  display:flex; align-items:center; gap:12px;
}
.ob-right .am-actions .am-field{ flex:1; }
.ob-right #submitOrderBtn{ margin-left:auto; }

/* CENTER2 (client note area) */
.ob-center2{
  grid-column:2;
  min-width:0;            /* permite encolher sem overflow */
  margin:0;
  margin-right:-17px;     /* gap visual 7px vs gap global 24px até ao .ob-right */
}
#ClientNoteBlock{
  display:block;
  width:100%;
  max-width:486px;
  margin-left:auto;       /* alinha o bloco à direita dentro da coluna */
}
.label-clientnote{
  display:block; white-space:nowrap; padding-bottom:1px;
}
#orderClientNote{
  width:100%; max-width:100%;
  height:57px;
  padding:5px 8px; font-size:11px;
  border:1px solid #bababa; border-radius:4px;
  background:#fff; color:inherit; box-sizing:border-box;
  font-family:arial;
}
#orderClientNote:focus{
  outline:none; border-color:#cbd5e1;
  box-shadow:0 0 0 2px rgba(22,163,74,0.12);
}

/* Inputs & selects básicos */
.ob-input{
  padding:5px 8px; font-size:11px; border:1px solid #bababa; border-radius:4px;
  background:#fff; color:inherit;
}
.ob-input::placeholder{ color:#9ca3af; }
.ob-input:focus{
  outline:none; border-color:#cbd5e1; box-shadow:0 0 0 2px rgba(22,163,74,0.12);
}

/* Dropdown "Account manager" */
#orderManager{
  transition:border-color .2s, box-shadow .2s;
  appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFA500" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat:no-repeat; background-position:right 8px center; background-size:16px 16px; padding-right:30px;
}
#orderManager:invalid{ color:#a1a1a1; }
#orderManager option{ color:#0f172a; }
#orderManager option[disabled][value=""]{ color:#a1a1a1; }

/* Botões */
.ob-btn{
  padding:5px 10px; border:0; border-radius:5px; cursor:pointer; font-weight:700; font-size:12px;
}
.ob-btn-primary{ background:#16a34a; color:#fff; }
.ob-btn-primary:hover{ filter:brightness(0.95); }
.ob-btn-primary:active{ filter:brightness(0.9); }
.ob-btn-primary:focus{ outline:2px solid #16a34a22; outline-offset:2px; }
.ob-btn.is-disabled{ opacity:.6; cursor:pointer; filter:grayscale(7%); }

.ob-input.error{ border-color:#dc2626; background:#fff5f5; }
.ob-feedback{ grid-column:1 / 3; font-size:14px; margin:-17px auto 8px auto; text-align:right; width:93% }
.ob-feedback.success{ color:#166534; }
.ob-feedback.error{ color:#b91c1c; }

/* ===== Qty cell ===== */
.qty-cell{
  position:relative;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  overflow:visible;
  width:100%; height:100%; padding:0;
}
.order-qty{
  text-align:center; font:inherit; color:inherit; background:transparent;
  border:none; padding:0; margin:0; line-height:1; outline:none;
}
/* remover setas number */
.order-qty::-webkit-outer-spin-button,
.order-qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.order-qty[type=number]{ -moz-appearance:textfield; }

.qty-warning{
  display:none; margin-top:2px; font-size:10px; color:#179c4a; white-space:nowrap; line-height:1.1;
}

/* Manter Order Qty visível em linhas NO */
tr[data-stock="NO"] td:has(.order-qty),
tr[data-stock="NO"] td:has(.order-qty) .qty-cell,
tr[data-stock="NO"] td:has(.order-qty) .order-qty,
tr[data-stock="NO"] td:has(.order-qty) .qty-warning{ opacity:1 !important; }

/* Botão toggle no cabeçalho "Order Qty" */
.qty-toggle{
  display:inline-flex; align-items:center; gap:4px;
  padding:2.5px 8px; font-size:11px; border-radius:6px; border:1px solid #fff;
  background:none; color:#fff; cursor:pointer; margin-top:2px;
}
.qty-toggle:hover{ background:#ffffff40; }
.qty-toggle:active{ background:#ffffff40; }
.qty-toggle i{ font-size:11px; }

#productTable th:has(#qtyToggleBtn){
  text-align:center; vertical-align:middle;
}

/* Barra compacta oculta na impressão */
#orderCompactBar{ display:none; }

/* -------------------------
   Reordenar aos 1100px: center2 acima do right
-------------------------- */
@media (max-width:1100px){
  .ob-center2{
    grid-column:2 / 4; /* ocupa colunas 2 e 3 */
    grid-row:1;        /* sobe para a linha de cima */
    margin-right:0;    /* remove a margem negativa aqui */
  }
  .ob-right{
    grid-column:3;     /* mantém na coluna 3 */
    grid-row:2;        /* desce para baixo de center2 */
  }
}

/* -------------------------
   Responsivo adicional (mobile)
-------------------------- */
@media (max-width:640px){
  .order-compact-inner{ grid-template-columns:1fr; gap:16px; }
  .ob-left, .ob-center2, .ob-right{ grid-column:1; }
}


/* ≤1100px: center2 acima do right + row-gap = 0 + ClientNoteBlock a 388px */
@media (max-width:1100px){
  .order-compact-inner{
    /* mantém column-gap=24px, zera apenas o espaçamento vertical entre linhas */
    column-gap: 24px;
    row-gap: 0;
  }

  .ob-center2{
    grid-column: 2 / 4;  /* ocupa colunas 2→3 */
    grid-row: 1;         /* sobe acima do .ob-right */
    margin-right: 0;     /* remove a margem negativa a este tamanho */
  }

  .ob-right{
    grid-column: 3;
    grid-row: 2;         /* vai para baixo do .ob-center2 */
  }

  /* Ajuste da largura máxima do bloco da nota do cliente */
  #ClientNoteBlock,
  #clientnoteblock{      /* (incluo a variação lowercase por segurança) */
    max-width: 388px;
  }
}


/* ≤640px: 1 coluna, sem gap vertical, ClientNoteBlock até 388px */
@media (max-width:640px){
  .order-compact-inner{
    grid-template-columns: 1fr;
    /* mantém algum espaço horizontal se precisares (16px), mas zera o vertical */
    column-gap: 16px;
    row-gap: 5px;
  }
  .ob-left, .ob-center2, .ob-right{ grid-column: 1; }
  .ob-center2{ margin-right: 0; } /* remove a margem negativa nesta largura */

  /* Nota do cliente: continua fluido mas limitada a 388px neste breakpoint */
  #ClientNoteBlock{
    max-width: 388px;
    margin-left: auto; /* mantém alinhado à direita se houver espaço */
  }
}

/* Discount note parts */
.discount-part1{}
.discount-part2a{color: var(--text);}
.discount-part2b,.discount-part2c,.discount-part3{color: #5193eb;}
.discount-part3{font-weight: 700;}
.discount-part4{font-color:#bbb;}

/* =========================
   PRINT STYLES (Chrome)
   ========================= */
@media print{
  @page{ size:A4 portrait; margin:8mm; }

  html,body{
    height:auto !important; overflow:visible !important; background:#fff !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }

  .fixed-header,.header-boxes,.header-bar,.header-right{
    position:static !important; inset:auto !important; box-shadow:none !important;
  }

  .table-container{ height:auto !important; max-height:none !important; overflow:visible !important; }

  #productTable{
    width:100% !important; table-layout:auto !important; border-collapse:collapse !important;
    page-break-inside:auto; break-inside:auto;
  }

  #productTable th,#productTable td{
    box-sizing:border-box; white-space:normal !important; word-break:break-word !important;
    padding:1px 5px !important; max-width:none !important; font-size:9px !important; vertical-align:top;
  }

  /* 1) Coluna imagem maior */
  #productTable th:first-child,#productTable td.image-cell{
    width:20% !important; padding-right:6px !important;
  }

  /* 2) Libertar container de imagem */
  #productTable td.image-cell .image-container{ width:auto !important; height:auto !important; }
  #productTable .image-container img{
    max-width:100% !important; height:auto !important; max-height:180px !important; object-fit:contain !important;
  }

  /* 3) Permitir cortes entre páginas */
  #productTable tr,#productTable td,#productTable th,
  #productTable td.image-cell,#productTable .image-container,#productTable .image-container img{
    page-break-inside:auto !important; break-inside:auto !important;
  }

  /* Esconder UI */
  .category-menu,#clearFiltersButton,.model-search,.dropdown-filter,.stock-box,.inproduction-box,.minmax{ display:none !important; }

  /* Esconder EAN/SKU (duas últimas colunas) em páginas alvo */
  .page-danceshops #productTable th:nth-last-child(-n+2),
  .page-danceshops #productTable td:nth-last-child(-n+2),
  .page-onlineshops #productTable th:nth-last-child(-n+2),
  .page-onlineshops #productTable td:nth-last-child(-n+2){ display:none !important; }

  /* Bordas finas */
  #productTable{ border-collapse:collapse !important; }
  #productTable th,#productTable td{ border:0.2pt solid #e5e7eb !important; }
  #productTable thead th{ border-bottom:0.5pt solid #b7bec6 !important; }
  #productTable td[rowspan]{ border-right-width:0.25pt !important; }
  #productTable tr>td{
    border-left-width:0.25pt !important; border-right-width:0.25pt !important;
    border-top-width:0.2pt !important; border-bottom-width:0.2pt !important;
  }

  /* Esconder Order Qty e a barra compacta na impressão */
  #productTable thead th.col-orderqty,
  #productTable tbody td:has(.order-qty),
  #orderCompactBar{ display:none !important; }
}