/* CorteNest CPQ — shell estilo CorteOnline (paridade operacional, não clone pixel) */
:root {
    --co-identity: #2f4ec4;
    --co-menubar: #1b2d6b;
    --co-menubar-dark: #14204d;
    --co-logo-corte: #2f6b4f;
    --co-font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Redesign v2.2 (fase 1, casca sidebar) — paleta neutra dos cards/dashboard */
    --co-bg: #f1f5f9;
    --co-card-border: #e5e7eb;
    --co-text-muted: #6b7280;
    --co-text-body: #1e293b;
    /* Aparência — tokens editáveis em Preferências, ver PricingSetting::THEME_DEFAULTS */
    --co-sidebar-link: rgba(255,255,255,.9);
    --co-topbar-bg: #ffffff;
    --co-content-bg: var(--co-bg);
}

/* Painel Aparência (Preferências) — seletor de cor/fonte com prévia ao vivo */
.co-theme-picker input[type="color"] { width: 64px; height: 38px; padding: 2px; cursor: pointer; }
.co-theme-preview {
    margin-top: 16px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff;
}
.co-theme-preview-menu {
    background: var(--p-menubar); color: #1f3d2c; padding: 10px 14px; font-size: 13px; font-weight: 600;
}
.co-theme-preview-body { padding: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.co-theme-preview-body button {
    background: var(--p-identity); color: #fff; border: 0; border-radius: 4px; padding: 8px 16px;
    font-weight: 600; font-size: 13px; cursor: default;
}
.co-theme-preview-text { font-size: 14px; color: #333; }

* { box-sizing: border-box; }

body.co-app {
    margin: 0;
    background: #f5f5f5;
    min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #222;
    /* Rede de segurança: nenhum elemento interno deveria empurrar a página inteira pra
       largura maior que a tela — se algo (tabela larga etc.) escapar dos containers com
       scroll próprio abaixo, fica só invisível/rolável ali dentro em vez de abrir uma barra
       de rolagem horizontal na página toda. */
    overflow-x: hidden;
}

.co-topbar { background: #fff; border-bottom: 1px solid #e0e0e0; }
.co-topbar-inner {
    width: 100%; padding: 0 20px; min-height: 52px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; row-gap: 6px;
}
.co-logo {
    display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
    font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 700;
}
.co-logo-corte { color: var(--co-logo-corte); }
.co-logo-online { color: #111; }
.co-logo-icon { color: var(--co-identity); font-size: 18px; }

.co-topnav { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.co-topnav a { color: #444; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.co-topnav a:hover, .co-topnav a.active { color: var(--co-identity); }
.co-topnav a .fa-home { color: var(--co-identity); }

.co-user { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.co-logout { border: none; background: transparent; color: #888; cursor: pointer; }

/* Hamburger: só existe visualmente abaixo do breakpoint mobile (ver media query). */
.co-hamburger {
    display: none; border: 0; background: transparent; color: #333; font-size: 18px;
    padding: 6px; cursor: pointer; order: -1;
}

.co-menubar {
    background: var(--co-menubar); color: #1f3d2c;
    min-height: 46px; border-bottom: 1px solid var(--co-menubar-dark);
}
.co-menubar-inner {
    padding: 0 12px; display: flex; align-items: stretch; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; min-height: 46px;
}
.co-tabs-main { display: flex; align-items: stretch; flex-wrap: wrap; }
.co-tab {
    display: inline-flex; align-items: center; gap: 6px; padding: 0 14px;
    text-decoration: none; color: #1f3d2c; font-size: 13px; font-weight: 600;
    border: 0; background: transparent; cursor: pointer;
}
.co-tab:hover { background: #ffffff55; }
.co-tab.active { background: #fff; color: #111; box-shadow: inset 0 -2px 0 var(--co-identity); }
.co-tab.disabled { opacity: .45; pointer-events: none; }

.co-subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 4px 0 18px; }
.co-subtab {
    display: inline-flex; align-items: center; padding: 8px 16px;
    text-decoration: none; color: #4a5a4e; font-size: 13px; font-weight: 600;
    border: 0; border-bottom: 2px solid transparent; background: transparent;
}
.co-subtab:hover { color: #1f3d2c; }
.co-subtab.active { color: var(--co-identity); border-bottom-color: var(--co-identity); }

.co-menubar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
.co-chip {
    background: #ffffffaa; border: 1px solid #ffffff88; border-radius: 3px;
    padding: 2px 8px; font-size: 12px; font-weight: 600;
}
.co-service-row { display: flex; align-items: center; gap: 10px; }
.co-stepper { display: inline-flex; align-items: center; gap: 0; font-size: 12px; padding-bottom: 15px; position: relative; }
.co-step-label { margin-right: 6px; font-weight: 600; }
.co-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.co-dot {
    width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px; background: #dfe8e2; border: 1px solid #7a9a86;
    display: flex; align-items: center; justify-content: center;
}
.co-dot i { font-size: 9px; color: #fff; line-height: 1; }
.co-dot.done { background: var(--co-identity); border-color: var(--co-identity); }
.co-dot.current { background: var(--co-identity); border-color: var(--co-identity); box-shadow: 0 0 0 2px color-mix(in srgb, var(--co-identity) 35%, transparent); }
.co-step-caption {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--co-identity); white-space: nowrap; line-height: 1;
}
.co-dot-line { width: 14px; height: 2px; flex-shrink: 0; background: #dfe8e2; }
.co-dot-line.done { background: var(--co-identity); }

/* Aviso de status mudou (polling ao vivo, co-stepper.blade.php) — ícone pulsando sem parar
   (até a pessoa atualizar a página), cor de alerta tanto no ícone do aviso quanto na
   bolinha atual recém-atualizada. */
@keyframes co-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.6; }
}
.co-stepper-changed i { color: #d9534f; margin-right: 3px; display: inline-block; animation: co-pulse 1s ease-in-out infinite; }
.co-dot.co-just-changed i { color: #ffd400; display: inline-block; animation: co-pulse 1s ease-in-out infinite; }

.co-main { max-width: 1200px; margin: 0 auto; padding: 16px 20px 40px; }
.co-main.co-main-wide { max-width: none; }
@media (max-width: 900px) {
    /* Tabelas largas (Lista de componentes, listagens do catálogo) não têm como caber numa
       tela pequena sem virar cartão por cartão (fora de escopo aqui) — em vez de estourar a
       página inteira pro lado, rola só dentro do conteúdo, mantendo o menu/toolbar fixos. */
    .co-main { padding: 10px 10px 28px; overflow-x: auto; }
}
.co-flash { padding: 10px 14px; border-radius: 4px; margin-bottom: 12px; font-size: 14px; }
.co-flash.ok { background: #e8f5e9; border: 1px solid #a5d6a7; color: #1b5e20; }
.co-flash.err { background: #ffebee; border: 1px solid #ef9a9a; color: #b71c1c; }

.co-novo {
    display: inline-flex; align-items: center; gap: 6px; background: #fff;
    border: 1px solid #ccc; border-radius: 4px; padding: 6px 12px;
    text-decoration: none; color: #222; font-weight: 600; font-size: 13px; margin: 0;
    cursor: pointer; font-family: inherit;
}
.co-novo:hover { background: #f3f3f3; }
.co-novo:disabled, .co-btn:disabled { opacity: .5; cursor: not-allowed; }
.co-novo:disabled:hover { background: #fff; }
.co-novo.co-fechar {
    border-color: var(--co-identity); color: var(--co-identity);
}
.co-novo.co-fechar:hover { background: #f3faf6; }

/* Bot�o Motor + menu de sele��o. */
.co-motor-wrap {
    position: relative;
    display: inline-flex;
    margin: 0;
}
.co-motor-btn { gap: 6px; }
.co-motor-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 200;
    min-width: 220px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    padding: 6px 0 4px;
}
.co-motor-menu-title {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 4px 12px 6px;
}
.co-motor-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 8px 12px;
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    color: #222;
    cursor: pointer;
    text-align: left;
}
.co-motor-option:hover { background: #f3f3f3; }
.co-motor-option.is-active {
    background: #eef6f1;
    color: var(--co-identity, #2e7d4f);
}
.co-motor-option .fa-check { color: var(--co-identity, #2e7d4f); font-size: 12px; }
.co-motor-menu-footer {
    margin-top: 4px;
    padding: 6px 8px 2px;
    border-top: 1px solid #eee;
}
.co-motor-machine-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
    padding: 8px 10px;
    font: inherit;
    font-weight: 600;
    font-size: 12px;
    color: #222;
    cursor: pointer;
    text-align: left;
}
.co-motor-machine-btn:hover:not(:disabled) {
    background: #eef6f1;
    border-color: var(--co-identity, #2e7d4f);
    color: var(--co-identity, #2e7d4f);
}
.co-motor-machine-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.co-motor-menu-hint {
    margin: 6px 0 0;
    padding: 8px 12px;
    border-top: 1px solid #eee;
    font-size: 11px;
    color: #777;
    line-height: 1.35;
}
.co-motor-menu-hint code { font-size: 10px; }

.co-contentdash { background: #fff; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
.co-header-dash {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; border-bottom: 1px solid #eee; background: #fafafa;
}
.co-title { font-weight: 700; font-size: 15px; }

.co-filter-toggle {
    display: none; width: calc(100% - 28px); margin: 10px 14px 0; align-items: center; justify-content: center;
    gap: 8px; background: #555; color: #fff; border: 0; border-radius: 4px;
    padding: 10px; font-weight: 600; font-size: 13px; cursor: pointer;
}
.co-filter-bar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: end;
    padding: 10px 14px; border-bottom: 1px solid #eee; background: #fcfcfc;
}
.co-filter-bar label { display: block; font-size: 11px; color: #666; margin-bottom: 2px; }
.co-filter-bar input, .co-filter-bar select {
    border: 1px solid #ccc; border-radius: 3px; padding: 4px 8px; font-size: 13px; background: #fff;
}
.co-btn-white {
    border: 1px solid #ccc; background: #fff; border-radius: 3px; padding: 5px 12px;
    font-weight: 600; cursor: pointer; font-size: 13px;
}

.co-table { width: 100%; border-collapse: collapse; background: #fff; }
.co-table thead { display: none; }
.co-table tbody tr.odd { background: #fff; }
.co-table tbody tr.even { background: #fafafa; }
.co-table tbody tr:hover { background: #eef6f1; }
.co-table tbody tr { border-bottom: 1px solid #ddd; }
.co-table td.icons { vertical-align: top; padding: 10px 10px; min-width: 220px; }
.co-table td.infos { vertical-align: top; padding: 8px 12px 8px 4px; }
.co-table tfoot th { text-align: left; padding: 8px 12px; font-weight: 500; color: #666; font-size: 12px; border-top: 1px solid #eee; }

.co-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; gap: 4px; align-items: center; flex-wrap: wrap; }
.co-icons a, .co-icons button {
    color: #444; font-size: 14px; width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: none; background: transparent; cursor: pointer; text-decoration: none;
}
.co-icons a:hover, .co-icons button:hover { color: var(--co-identity); }

.co-infos-row { display: flex; flex-wrap: wrap; margin-bottom: 1px; font-size: 13px; line-height: 1.45; }
.co-infos-row .col70 { flex: 1 1 62%; min-width: 220px; display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.co-infos-row .col30 { flex: 1 1 30%; min-width: 140px; display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.co-infos-row label { color: #666; font-weight: 600; white-space: nowrap; }
.co-infos-row p { margin: 0; }
.co-pieces-badge {
    display: inline-block; background: #e8f0ec; color: #1f3d2c;
    border-radius: 3px; padding: 0 6px; font-size: 11px; font-weight: 700; margin-right: 4px;
}

.co-panel { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 14px; margin-bottom: 14px; }
.co-panel h2 { margin: 0 0 10px; font-size: 14px; color: #444; }
.co-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.co-grid .full { grid-column: 1 / -1; }
.co-grid label { display: block; font-size: 11px; color: #666; margin-bottom: 2px; }
.co-grid input, .co-grid select, .co-grid textarea {
    width: 100%; border: 1px solid #ccc; border-radius: 3px; padding: 6px 8px; font: inherit; background: #fff;
}
.co-check { display: flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; }
.co-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.co-btn {
    display: inline-flex; align-items: center; gap: 6px; background: var(--co-identity); color: #fff;
    border: 0; border-radius: 4px; padding: 7px 14px; font-weight: 600; cursor: pointer; text-decoration: none; font-size: 13px;
}
.co-btn.secondary { background: #fff; color: #222; border: 1px solid #ccc; }
.co-btn.danger { background: #c45c5c; }

/* Piece grid */
/* border-collapse:separate (não collapse) de propósito — com collapse, a borda entre
   thead e tbody "gruda" na linha errada quando o thead é position:sticky (bug conhecido
   de renderização), fazendo a borda/sombra do cabeçalho parecer que rola junto com o
   conteúdo em vez de ficar fixa. border-spacing:0 mantém a aparência igual (sem vão
   entre células). */
.co-piece-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.co-piece-table th { text-align: left; font-size: 11px; color: #666; border-bottom: 1px solid #ddd; padding: 6px 4px; }
.co-piece-table td { padding: 8px 4px; border-bottom: 1px solid #eee; vertical-align: middle; }
.co-mat-swatch {
    width: 36px; height: 36px; object-fit: cover; border: 1px solid #ccc; border-radius: 3px; background: #eee;
    display: inline-block; vertical-align: middle; flex-shrink: 0;
}
/* Cor do TIPO da peça (mesma medida em toda a Lista de componentes/Plano de corte/Relatório).
   É um <button> (clique leva pra chapa correspondente em Planos de corte), com reset de estilo
   de botão pra continuar parecendo só um quadradinho de cor. */
.co-piece-color-dot {
    display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid #0002;
    padding: 0; cursor: default;
}
.co-piece-color-dot-clickable { cursor: pointer; }
.co-piece-color-dot-clickable:hover { outline: 2px solid #0004; outline-offset: 1px; }
.co-mat-btn {
    display: inline-flex; align-items: center; gap: 8px; border: 1px solid #ccc; background: #fff;
    border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 12px; max-width: 220px; text-align: left;
}
.co-edge-cell { display: flex; gap: 2px; flex-wrap: wrap; }
.co-edge-chip {
    font-size: 10px; padding: 2px 4px; border: 1px solid #ccc; border-radius: 2px; background: #f7f7f7; cursor: pointer;
}
.co-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.co-th-sort:hover { color: #333; }
.co-th-sort i.fa-sort { opacity: .35; }
.co-fita-desc-list { display: flex; flex-direction: column; gap: 5px; }
/* Reaproveita o card do MDF (.co-mat-btn) igualzinho — só desliga o cursor de clique
   (aqui é só exibição, não abre nenhum picker) e deixa o texto quebrar linha em vez de
   alargar o card (min-width:0 é o que destrava quebra de linha dentro de flex item). */
.co-fita-desc-chip { cursor: default; }
.co-fita-desc-text { min-width: 0; font-size: 9px; line-height: 1.3; overflow-wrap: break-word; }
.co-fita-desc-text strong { font-size: 12px; }
.co-fita-desc-muted { color: #222; }
/* Peça sem nenhuma fita aplicada: mantém a caixa (contorno) igual às outras, só troca o
   conteúdo por um texto — não fica só um traço solto sem moldura. */
.co-fita-desc-empty { color: #999; font-size: 11px; cursor: default; }
/* Medidas do corte sobrepostas na caixa "Prévia" — paridade CO: Y (largura) na vertical
   do lado esquerdo perto do topo, X (comprimento) horizontal no centro inferior. O
   pontilhado ocupa a faixa ~4-7px de cada borda (.co-fita-top/left/right/bottom), então o
   texto fica afastado ~9-10px pra dentro, sem encostar em nenhum pontilhado. Cor/sombra
   do texto vêm via :style (dimTextStyle) — claro/escuro conforme o fundo (cor cadastrada
   ou luminância amostrada da foto da textura). */
.co-fita-dim-x, .co-fita-dim-y {
    position: absolute; z-index: 3; font-size: 9px; font-weight: 700; pointer-events: none; line-height: 1;
}
.co-fita-dim-x { bottom: 10px; left: 50%; transform: translateX(-50%); }
.co-fita-dim-y { top: 9px; left: 9px; writing-mode: vertical-rl; }
/* Quant./Comp./Larg. da Lista de componentes — o input:not([type=checkbox]) global deixa
   a caixa alta/larga demais nessas 3 colunas estreitas; encolhe só ali. */
.co-piece-table input[type=number] { padding: 4px 6px; font-size: 12px; }
.co-edge-chip.on { background: #e8f0ec; border-color: var(--co-identity); color: var(--co-identity); font-weight: 700; }

/* Modal */
.co-modal-backdrop {
    position: fixed; inset: 0; background: #0006; z-index: 40;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* Modais abertos a partir de outro modal (picker de material/fita dentro de Dados do Componente)
   precisam ficar acima do modal que os chamou — mesma z-index empataria pela ordem no DOM. */
.co-modal-backdrop.co-modal-nested { z-index: 50; }
.co-modal {
    background: #fff; border-radius: 6px; max-width: 720px; width: 100%; max-height: 80vh;
    overflow: auto; box-shadow: 0 12px 40px #0004;
}
.co-modal-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px; border-bottom: 1px solid #eee; font-weight: 700;
}
.co-modal-x {
    border: 0; background: transparent; cursor: pointer; color: #666;
    font-size: 22px; line-height: 1; padding: 0 4px;
}
.co-modal-x:hover { color: #222; }
.co-modal-body { padding: 12px 14px; }

/* Modal "Dados do serviço" (paridade CO), aberto pelo ícone Etiquetas do plano de corte */
.co-service-modal-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.co-service-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.co-service-modal-grid label, .co-service-modal-field {
    display: block; font-size: 12px; color: #666; border: 1px solid #ddd; border-radius: 4px; padding: 8px 10px;
}
.co-service-modal-field { margin-bottom: 10px; }
.co-service-modal-grid label strong, .co-service-modal-field strong { display: block; font-size: 13px; color: #222; font-weight: 600; margin-top: 2px; }
.co-service-modal-section {
    background: #f0f1f2; border-radius: 4px; padding: 8px 10px; font-weight: 700; font-size: 13px; margin: 14px 0 8px;
}
.co-service-modal-table { border: 1px solid #eee; border-radius: 4px; margin-bottom: 10px; overflow: hidden; }
.co-service-modal-thead, .co-service-modal-trow {
    display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: 13px;
}
.co-service-modal-thead { font-weight: 700; background: #fafafa; border-bottom: 1px solid #eee; }
.co-service-modal-trow + .co-service-modal-trow { border-top: 1px solid #f3f3f3; }
.co-service-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.co-service-modal-history summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #444; }
.co-service-modal-history ul { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: #555; }

/* Modal "Etiquetas" aninhado (iframe) dentro do modal "Dados do serviço" */
.co-modal-tall { display: flex; flex-direction: column; max-height: 85vh; }
.co-modal-tall .co-modal-head { flex: 0 0 auto; }
.co-service-modal-iframe { flex: 1 1 auto; width: 100%; min-height: 60vh; border: 0; }
.co-mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.co-mat-card {
    border: 1px solid #ddd; border-radius: 4px; padding: 8px; cursor: pointer; background: #fff; text-align: left;
}
.co-mat-card:hover { border-color: var(--co-identity); background: #f3faf6; }

/* Lista "Materiais / Produtos" (catálogo de fitas) — cartão em linha, 2 colunas */
.co-mat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co-mat-row {
    display: flex; align-items: center; gap: 10px; border: 1px solid #ddd; border-radius: 4px;
    padding: 8px 10px; cursor: pointer; background: #fff; text-align: left;
}
.co-mat-row:hover { border-color: var(--co-identity); background: #f3faf6; }
.co-mat-row-icon {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; color: #8a6d1f; font-size: 14px;
}
.co-mat-row-text { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; min-width: 0; }
.co-mat-row-text .name { font-weight: 600; color: #333; }
.co-mat-row-text .dims { color: #888; font-size: 11px; }
.co-mat-card img { width: 100%; height: 72px; object-fit: cover; border-radius: 3px; background: #eee; }
.co-mat-card .code { font-size: 11px; color: #666; }
.co-mat-card .desc { font-size: 12px; font-weight: 600; margin-top: 2px; }

/* Modal de seleção de material — espelha o modal de MDF do simulador: busca arredondada,
   resultados em seções por Categoria com faixa de título, cards com imagem grande + nome. */
.co-mat-modal { max-width: 920px; }
.co-mat-search {
    flex: 1; min-width: 220px; padding: 10px 14px; border: 1px solid #ccc; border-radius: 20px; font-size: 14px;
}
.co-mat-group { margin-bottom: 20px; }
.co-mat-group:last-child { margin-bottom: 0; }
.co-mat-group-head {
    background: #cbbfa0; color: #3a3226; font-weight: 700; text-align: center;
    padding: 8px; border-radius: 3px; margin-bottom: 12px; font-size: 13px; letter-spacing: .02em;
}
.co-mat-group .co-mat-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.co-mat-group .co-mat-card { padding: 0 0 8px; border: 0; background: transparent; }
.co-mat-group .co-mat-card:hover { background: transparent; }
.co-mat-card-img {
    position: relative; height: 110px; border-radius: 4px; overflow: hidden; background: #eee;
    margin-bottom: 6px; border: 1px solid #ddd;
}
.co-mat-group .co-mat-card:hover .co-mat-card-img { border-color: var(--co-identity); }
.co-mat-card-img img, .co-mat-card-color { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-mat-card-brand {
    position: absolute; top: 5px; right: 5px; background: #0007; color: #fff;
    font-size: 9px; padding: 2px 6px; border-radius: 3px; text-transform: lowercase;
}
.co-mat-group .co-mat-card .name {
    font-size: 12px; font-weight: 700; text-align: center; color: var(--co-identity);
}


.co-muted { color: #777; font-size: 12px; }
.co-pager { padding: 10px 14px; }
.co-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px;
}
.co-pagination-info { margin: 0; font-size: 12px; color: #666; }
.co-pagination-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.co-pagination-list li { list-style: none; margin: 0; padding: 0; }
.co-pagination-list a,
.co-pagination-list span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px; padding: 0 8px;
    border: 1px solid #ddd; border-radius: 3px;
    text-decoration: none; color: #333; font-size: 12px; background: #fff;
}
.co-pagination-list a:hover { border-color: var(--co-identity); color: var(--co-identity); }
.co-pagination-list .active span {
    background: var(--co-identity); color: #fff !important; border-color: var(--co-identity);
}
.co-pagination-list .disabled span { color: #aaa; background: #f5f5f5; }

/* legacy */
.co-pager nav { display: flex; gap: 6px; flex-wrap: wrap; }
.co-pager a, .co-pager span {
    display: inline-block; padding: 4px 8px; border: 1px solid #ddd; border-radius: 3px;
    text-decoration: none; color: #333; font-size: 12px; background: #fff;
}
.co-pager .active span { background: var(--co-identity); color: #fff !important; border-color: var(--co-identity); }

[x-cloak] { display: none !important; }

/* Bridge: catalog pages still use layouts.app class names */
.panel {
    background: #fff; border: 1px solid #ddd; border-radius: 4px;
    padding: 14px; margin-bottom: 14px;
}
.panel h1 { font-size: 1.35rem; margin: 0 0 .75rem; }
.panel h2, h2 { font-size: 1.05rem; margin: 0 0 .75rem; color: #444; font-weight: 600; }
.muted, .co-muted { color: #777; font-size: 12px; }
.tag {
    display: inline-block; padding: .15rem .45rem; border-radius: 3px;
    background: #e8f0ec; font-size: .75rem;
}
table:not(.co-table):not(.co-piece-table),
.catalog-table {
    width: 100%; border-collapse: collapse; font-size: .9rem;
}
table:not(.co-table):not(.co-piece-table) th,
table:not(.co-table):not(.co-piece-table) td,
.catalog-table th,
.catalog-table td {
    text-align: left; padding: .55rem .4rem; border-bottom: 1px solid #eee; vertical-align: top;
}
table:not(.co-table):not(.co-piece-table) th,
.catalog-table th {
    color: #444; font-weight: 700; font-size: 12px; background: #f7f7f7;
    border-bottom: 1px solid #ddd;
}
.catalog-table thead { display: table-header-group !important; }

/* Paginação Laravel (default) no shell CO */
.co-pager nav[role="navigation"] span,
.co-pager p {
    font-size: 12px; color: #666;
}
.co-pager a {
    color: var(--co-identity);
}
.grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.grid .full { grid-column: 1 / -1; }
label { display: block; font-size: .8rem; color: #666; margin-bottom: .25rem; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
    width: 100%; background: #fff; border: 1px solid #ccc; color: #222;
    border-radius: 4px; padding: .45rem .55rem; font: inherit;
}
.check { display: flex; align-items: center; gap: .4rem; margin-top: 1.4rem; }
.check input { width: auto; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
button:not(.co-logout):not(.co-icons button):not(.co-mat-btn):not(.co-mat-card):not(.co-mat-row):not(.co-btn-white):not(.co-modal-x):not(.co-edge-chip):not(.co-bordermark):not(.co-swap-btn):not(.co-band-chip):not(.co-accordion-btn):not(.co-piece-color-dot):not(.co-btn-add-part):not(.co-novo):not(.co-plan-icon):not(.co-eco-bar):not(.co-hamburger):not(.co-filter-toggle):not(.co-motor-option):not(.co-motor-machine-btn):not(.co-sidebar-group-btn):not(.co-logout-2):not(.co-sidebar-toggle):not(.co-app-menu-btn),
.btn {
    display: inline-block; background: var(--co-identity); color: #fff; border: 0;
    border-radius: 4px; padding: .45rem .9rem; font-weight: 600; cursor: pointer; font: inherit;
    text-decoration: none;
}
.btn.secondary { background: #fff; color: #222; border: 1px solid #ccc; }
.btn.danger { background: #c45c5c; color: #fff; }
:root {
    --line: #ddd;
    --ink: #222;
    --muted: #777;
    --panel: #fff;
    --bg: #f5f5f5;
    --accent: var(--co-identity);
    --danger: #c45c5c;
    --ok: #2f6b4f;
}

/* ---- Grid de peças CO-like (paridade lista de componentes) ---- */
.co-bandbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.co-band-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
    border: 1px solid #ccc; border-radius: 3px; background: #fff; cursor: pointer; font-size: 12px;
}
.co-band-chip.sel { border-color: var(--co-identity); box-shadow: 0 0 0 1px var(--co-identity); font-weight: 600; }
.co-band-dot { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #999; display: inline-block; flex: 0 0 auto; }
.co-edge-cell { display: flex; gap: 4px; }
.co-bordermark {
    width: 22px; height: 22px; border: 1px solid #ccc; border-radius: 2px;
    background: #fff; cursor: pointer; padding: 0; box-sizing: border-box;
}
.co-bordermark:hover { background: #f0f0f0; }
.co-swap-btn { border: 1px solid #ccc; border-radius: 3px; background: #fff; cursor: pointer; padding: 4px 6px; }
.co-swap-btn:hover { background: #f0f0f0; }
.co-piece-preview {
    position: relative; width: 70px; height: 70px; border: 1px solid #ccc;
    border-radius: 2px; background: #f2f2f2; box-sizing: border-box;
    overflow: hidden;
    /* Sombra interna — sem isso, material com textura bem clara/branca (ex. MDF Branco TX)
       fica visualmente idêntico a "sem textura nenhuma" (mesmo cinza-claro de fundo). */
    box-shadow: inset 0 0 0 1px #0002, inset 0 0 6px #0001;
}
.co-preview-lg { width: 220px; height: 220px; margin: 0 auto; }
.co-piece-preview-img { position: absolute; inset: 0; z-index: 0; }

/* Tracinho de fita — recuado pra dentro da imagem (não cola na borda da caixa).
   Cor vem inline via border-*-color (bandColor). Default transparent — sem isso, o
   currentColor (cinza do texto) aparece como pontilhado fantasma ao clicar/re-render. */
.co-fita-mark {
    position: absolute; z-index: 2; pointer-events: none;
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}
.co-fita-top, .co-fita-bottom {
    left: 5px; right: 5px; height: 0;
    border-top: 3px dashed transparent;
}
.co-fita-top { top: 4px; }
.co-fita-bottom { bottom: 4px; }
.co-fita-left, .co-fita-right {
    top: 5px; bottom: 5px; width: 0;
    border-left: 3px dashed transparent;
}
.co-fita-left { left: 4px; }
.co-fita-right { right: 4px; }
.co-preview-lg .co-fita-top, .co-preview-lg .co-fita-bottom { left: 10px; right: 10px; border-top-width: 4.5px; }
.co-preview-lg .co-fita-top { top: 8px; }
.co-preview-lg .co-fita-bottom { bottom: 8px; }
.co-preview-lg .co-fita-left, .co-preview-lg .co-fita-right { top: 10px; bottom: 10px; border-left-width: 4.5px; }
.co-preview-lg .co-fita-left { left: 8px; }
.co-preview-lg .co-fita-right { right: 8px; }
.co-zone { position: absolute; cursor: pointer; }
.co-zone:hover { background: rgba(237, 124, 48, .25); }
.co-preview-dims {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    pointer-events: none; font-size: 12px; color: #333; text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}
.co-row-pending { background: #fffbe8; }
.co-fieldset { border: 1px solid #ddd; border-radius: 4px; padding: 10px 12px; margin: 0 0 12px; }
.co-fieldset legend { font-size: 12px; font-weight: 700; color: #555; padding: 0 6px; }
.co-accent { color: #ED7C30; }
.co-accordion-btn {
    width: 100%; text-align: left; background: #f2f2f2; border: 1px solid #ddd;
    border-radius: 3px; padding: 8px 10px; cursor: pointer; font-weight: 600; font-size: 13px;
}
.co-accordion-panel { border: 1px solid #ddd; border-top: 0; border-radius: 0 0 3px 3px; padding: 10px 12px; }

/* Preferências: seções em acordeão nativo (<details>) */
details.co-accordion {
    border: 1px solid #ddd; border-radius: 4px; margin-bottom: 10px; background: #fafafa;
}
details.co-accordion summary {
    padding: 10px 14px; cursor: pointer; font-weight: 700; font-size: 13px; color: #333;
    list-style: none; display: flex; align-items: center; gap: 8px;
}
details.co-accordion summary::-webkit-details-marker { display: none; }
details.co-accordion summary::before { content: '\25B8'; font-size: 11px; color: #888; transition: transform .15s; }
details.co-accordion[open] summary::before { transform: rotate(90deg); }
details.co-accordion[open] summary { border-bottom: 1px solid #ddd; }
details.co-accordion > *:not(summary) { margin: 0 14px 12px; }
details.co-accordion > *:first-of-type:not(summary) { margin-top: 12px; }

/* ---- Aba Planos (Onda 2: possibilidades + sequência de cortes) ---- */
.co-sol-active { background: #eef6f1; }
.co-sol-active td { font-weight: 600; }
.co-util-bar { width: 90px; height: 8px; background: #e6e6e6; border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; }
.co-util-bar span { display: block; height: 100%; background: var(--co-identity); }
.co-plan-svg {
    width: 100%; max-height: 70vh; height: auto; background: #fff;
    border-radius: 4px; border: 1px solid #ccc;
    shape-rendering: geometricPrecision;
}
.co-plan-svg text {
    font-family: Arial, Helvetica, sans-serif;
}
/* Pisca a peça por ~2s ao chegar em Planos de corte pelo botão de cor da Lista de componentes. */
@keyframes co-piece-pulse {
    0%, 100% { fill-opacity: 1; stroke-width: 1.8; }
    50% { fill-opacity: 0.35; stroke: #ED7C30; stroke-width: 3; }
}
.co-piece-highlight { animation: co-piece-pulse .4s ease-in-out 5; }

/* Painel de métricas do plano (paridade CorteOnline — diagrama + sidebar de dados) */
.co-plan-layout { display: flex; gap: 16px; align-items: flex-start; }
.co-plan-main { flex: 1; min-width: 0; }
.co-plan-block { border: 1px solid #ddd; border-radius: 6px; padding: 12px; background: #fff; box-sizing: border-box; }
.co-plan-side {
    width: 220px; flex: 0 0 220px; font-size: 12px; background: #fafafa;
    border: 1px solid #eee; border-radius: 4px; padding: 12px;
}
.co-plan-side .lbl { color: #999; font-size: 10px; text-transform: uppercase; letter-spacing: .02em; margin: 8px 0 1px; }
.co-plan-side .lbl:first-child { margin-top: 0; }
.co-plan-side .val { color: #222; }
.co-plan-side .val.big { font-size: 20px; font-weight: 700; color: var(--co-identity); }
.co-plan-side .val.accent { color: #ED7C30; font-weight: 600; }
.co-plan-side hr { border: 0; border-top: 1px solid #e5e5e5; margin: 10px 0; }
@media (max-width: 760px) {
    .co-plan-layout { flex-direction: column; }
    .co-plan-side { width: 100%; }
}

/* Eco — barra verde (antes "Possibilidades") — mantida por compat, botão agora na toolbar */
.co-eco-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    width: 100%; margin: 0 0 12px; padding: 10px 14px;
    background: var(--co-identity); color: #fff; border: 0; border-radius: 4px;
    font-size: 14px; font-weight: 700; cursor: pointer; text-align: left; font-family: inherit;
}
.co-eco-bar:hover { filter: brightness(1.06); }
.co-eco-bar .fa { font-size: 15px; }

/* Barra material + ícones (paridade CO Planos) */
.co-plan-nav {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px; padding: 8px 10px;
    background: #efefef; border: 1px solid #ddd; border-radius: 4px;
}
.co-plan-mat-select {
    flex: 1; min-width: 180px; max-width: 360px;
    padding: 6px 10px; border: 1px solid #bbb; border-radius: 3px;
    background: #fff; font-size: 13px;
}
.co-plan-icons { display: inline-flex; align-items: center; gap: 2px; }
.co-plan-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; margin: 0;
    border: 0; background: transparent; color: #444; cursor: pointer;
    font-size: 15px; text-decoration: none; border-radius: 3px;
}
.co-plan-icon:hover { background: #fff; color: var(--co-identity); }
.co-plan-icon:disabled { opacity: .35; cursor: default; }
a.co-plan-icon { line-height: 32px; }

.co-plan-sheet-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px; margin-bottom: 6px;
}
.co-plan-sheet-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Frame fixo com overflow — rotate(90°) não vaza pra fora da chapa/cabeçalho. */
.co-plan-tex-frame {
    width: 72px; height: 48px; overflow: hidden; flex-shrink: 0;
    border: 1px solid #888; border-radius: 2px; background: #eee;
    box-shadow: inset 0 0 0 1px #fff8;
}
.co-plan-tex-inner {
    width: 100%; height: 100%;
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.co-plan-tex-inner.is-rot {
    width: 48px; height: 72px;
    transform: rotate(90deg);
    transform-origin: center center;
    position: relative; left: 12px; top: -12px;
}

/* ---- Dados do serviço (paridade CO: Dados | Parâmetros lado a lado) ---- */
.co-toolbar-actions {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-bottom: 12px;
}
.co-service-dados { padding: 12px; }
.co-dados-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 900px) {
    .co-dados-grid { grid-template-columns: 1fr; }
}
.co-box-info {
    list-style: none; margin: 0; padding: 0;
    border: 1px solid #ddd; border-radius: 4px; background: #fff;
    overflow: hidden;
}
.co-box-info .co-box-title {
    display: block; font-weight: 700; font-size: 13px; color: #444;
    margin: 0; padding: 8px 12px; background: #ececec; border-bottom: 1px solid #ddd;
}
.co-box-info li {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 6px 12px; font-size: 13px; border-bottom: 1px solid #f0f0f0;
}
.co-box-info li:last-child { border-bottom: 0; }
.co-box-info li > label {
    margin: 0; min-width: 110px; color: #555; font-size: 12px; font-weight: 600;
}
.co-box-info li input, .co-box-info li select {
    flex: 1; min-width: 80px; width: auto;
    border: 1px solid #ccc; border-radius: 3px; padding: 4px 8px;
    background: #faf6f0;
}
.co-param-input { max-width: 120px; flex: 0 0 auto !important; }
.co-box-actions {
    display: flex; gap: 14px; align-items: center; margin-top: 0;
    background: #fafafa;
}

.co-lista-head {
    display: flex; align-items: center; gap: 8px;
    background: #e8e8e8; border-bottom: 1px solid #ddd;
    padding: 8px 12px;
    font-weight: 700; font-size: 14px; color: #333;
}
.co-lista-head .fa { color: #666; }
/* Sem overflow:hidden aqui (no painel) — ele corta o "sticky" do bloco de
   título/Adicionar/Fitas do pedido (position:sticky em elemento comum, não célula de
   tabela, não funciona dentro de um ancestral com overflow diferente de visible). O
   arredondamento de canto e o overflow:hidden das bordas internas agora vivem em
   .co-lista-sticky (ver abaixo) — ali é seguro porque é o próprio elemento sticky, não
   um ancestral dele. */
.co-lista-panel {
    padding: 0;
}
.co-lista-addbar {
    background: var(--co-identity); padding: 6px 10px;
}
/* Bloco fixo ao rolar: título + Adicionar peça + Fitas do pedido + cabeçalho da tabela —
   um cartão SÓ (borda fina em volta de tudo, sombra bem leve), flutuando sobre a lista
   que rola por baixo. O cabeçalho continua sendo um <thead> de verdade (por causa do
   alinhamento de coluna, não dá pra tirar da <table>), então a emenda é visual: sem gap
   entre os dois, cantos quadrados onde se encontram, borda/sombra só fecham no final. */
.co-lista-sticky {
    position: sticky; top: 0; z-index: 10; background: #fff;
    margin: 8px 14px 0; border: 1px solid #ccc; border-bottom: 0; border-radius: 4px 4px 0 0;
    overflow: hidden;
}
/* padding-top zerado de propósito — o cabeçalho da tabela (dentro daqui) precisa
   encostar sem respiro no bloco fixo acima pra parecer um cartão só (ver
   .co-lista-sticky). Mensagens de flash (statusMsg/errorMsg) compensam com margin-top
   próprio quando aparecem. */
.co-lista-body { padding: 0 14px 14px; }
.co-bandbar { padding: 10px 14px 0; }
.co-piece-table thead th:first-child { border-left: 1px solid #ccc; border-bottom-left-radius: 4px; }
.co-piece-table thead th:last-child { border-right: 1px solid #ccc; border-bottom-right-radius: 4px; }
/* Cabeçalho da tabela também fixo, colado embaixo do bloco acima — a distância
   (--sticky-top) é medida via JS (stickyHeaderHeight) porque a altura do bloco muda
   conforme a quantidade de fitas do pedido quebra linha. Sombra (leve) vai em cada th,
   não na tr — box-shadow em <tr> tem suporte inconsistente entre navegadores. */
.co-piece-table thead th {
    position: sticky; top: var(--sticky-top, 0px); z-index: 9; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.co-btn-add-part {
    background: #fff; color: #333; border: 1px solid #ccc; border-radius: 4px;
    padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.co-btn-add-part:hover { background: #f3f3f3; }
.co-btn-add-part:disabled { opacity: 0.6; cursor: wait; }

/* Lista de componentes no celular: a tabela de 13 colunas não cabe de jeito nenhum, vira
   um cartão por peça (linha) — paridade com o cartão do CorteOnline real: índice+MDF juntos
   no topo, Quant./Comp./Larg. numa grade de 3, Descrição larga, e no rodapé Ignorar veio +
   Ações + Prévia lado a lado, com as Fitas por baixo. Cada <td> vira um item flex com
   `order`/`flex-basis` próprios (via data-label) — o <tr> vira o container flex-wrap, então
   a ORDEM VISUAL não depende da ordem real das colunas na tabela/JS. */
@media (max-width: 760px) {
    .co-piece-table thead { display: none; }
    .co-piece-table, .co-piece-table tbody { display: block; width: 100%; }
    .co-piece-table tr {
        display: flex; flex-wrap: wrap; align-items: center;
        border: 1px solid #ddd; border-radius: 8px; margin-bottom: 10px; padding: 10px;
        background: #fff; row-gap: 10px; column-gap: 8px;
    }
    .co-piece-table tr.co-row-pending { border-color: var(--co-identity); }
    .co-piece-table td { padding: 0; border: 0; }

    /* Cada grupo abaixo usa flex-basis EXPLÍCITO (não 0) — é o que faz o wrap acontecer por
       GRUPO (linha visual) em vez de espremer tudo numa linha só só com o texto quebrando
       dentro de cada célula. Basis 0 (flex:1 1 0) faz o navegador tentar caber TODOS os itens
       na mesma linha antes de crescer, que era o bug daqui (MDF virando uma coluna de 4
       linhas de texto espremida do lado de Quant/Comp/Larg). */
    .co-piece-table td[data-label="#"] { order: 1; flex: 0 0 8%; font-weight: 700; }
    .co-piece-table td[data-label="Cor"] { order: 2; flex: 0 0 8%; }
    .co-piece-table td[data-label="MDF"] { order: 3; flex: 1 1 60%; min-width: 0; }
    .co-piece-table td[data-label="MDF"] .co-mat-btn { max-width: 100%; width: 100%; }

    .co-piece-table td[data-label="Quant."] { order: 4; flex: 1 1 28%; }
    .co-piece-table td[data-label="Comp."] { order: 5; flex: 1 1 28%; }
    .co-piece-table td.co-td-swap { order: 6; flex: 0 0 8%; align-self: flex-end; padding-bottom: 6px; text-align: center; }
    .co-piece-table td[data-label="Larg."] { order: 7; flex: 1 1 22%; }
    .co-piece-table td[data-label="Quant."],
    .co-piece-table td[data-label="Comp."],
    .co-piece-table td[data-label="Larg."] {
        display: flex; flex-direction: column; align-items: stretch; gap: 3px;
    }
    .co-piece-table td[data-label="Quant."] input,
    .co-piece-table td[data-label="Comp."] input,
    .co-piece-table td[data-label="Larg."] input {
        width: 100%; max-width: none;
    }

    .co-piece-table td[data-label="Descrição"] { order: 8; flex: 0 0 100%; display: flex; flex-direction: column; gap: 3px; }
    .co-piece-table td[data-label="Descrição"] input { width: 100%; }

    .co-piece-table td[data-label="Fita (cor/descrição)"] { order: 9; flex: 0 0 100%; padding-top: 6px; border-top: 1px dashed #eee; }

    .co-piece-table td[data-label="Ignorar veio"] { order: 10; flex: 1 1 40%; }
    .co-piece-table td[data-label="Ações"] { order: 11; flex: 0 0 auto; }
    .co-piece-table td[data-label="Prévia"] { order: 12; flex: 0 0 auto; margin-left: auto; }
    .co-piece-table td[data-label="Fitas"] { order: 13; flex: 0 0 100%; }

    /* Rótulo em cima do campo (Quant./Comp./Larg./Descrição) em vez de do lado — bate com
       o cartão de referência. Nas demais colunas (ícones/checkbox/botões autoexplicativos)
       não precisa de rótulo nenhum. */
    .co-piece-table td[data-label="Quant."]::before,
    .co-piece-table td[data-label="Comp."]::before,
    .co-piece-table td[data-label="Larg."]::before,
    .co-piece-table td[data-label="Descrição"]::before {
        content: attr(data-label); font-size: 11px; font-weight: 700; color: #777;
    }
    .co-piece-table td[data-label="Descrição"]::before { text-align: center; }
    .co-piece-table td[data-label="Ignorar veio"] {
        display: flex; align-items: center; gap: 6px;
    }
    .co-piece-table td[data-label="Ignorar veio"]::after { content: attr(data-label); font-size: 12px; color: #555; }
    .co-piece-table input, .co-piece-table select { max-width: 140px; }
}

/* Cabeçalho/menu no celular — paridade com o app CorteOnline real: hamburguer no lugar dos
   links Início/Gerenciamento (viram um painel solto embaixo do topo), chips (loja, serviço,
   status) cada um numa linha cheia em vez de espremidos, abas Serviços/Dados/Planos
   distribuídas em partes iguais. */
@media (max-width: 640px) {
    .co-hamburger { display: inline-flex; align-items: center; justify-content: center; }
    .co-topbar-inner { flex-wrap: nowrap; position: relative; }
    .co-logo { font-size: 18px; }
    .co-topnav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border: 1px solid #e0e0e0; border-top: 0;
        box-shadow: 0 8px 16px rgba(0,0,0,.08); z-index: 30; padding: 6px 0;
    }
    .co-topnav.is-open { display: flex; }
    .co-topnav a, .co-topnav .co-user { padding: 10px 16px; }
    .co-topnav .co-user { justify-content: space-between; }

    /* Paridade CO: chips (loja / serviço+status) primeiro, sobre o fundo verde; abas
       Serviços/Dados/Planos depois, já em fundo branco — não misturadas na mesma faixa. */
    .co-menubar-inner { flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
    .co-menubar-right { order: 1; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 10px 12px; }
    .co-tabs-main { order: 2; width: 100%; background: #fff; }
    .co-tabs-main .co-tab { flex: 1 1 0; justify-content: center; text-align: center; padding: 12px 4px; }

    .co-menubar-right .co-chip {
        width: 100%; box-sizing: border-box; text-align: center; padding: 8px 12px;
        border-radius: 18px; background: #fff; border: 1px solid #ffffffcc; color: #1f3d2c;
        font-size: 13px;
    }
    /* Serviço # + status (Aberto + bolinhas) numa cartão branco só, lado a lado — igual ao
       CorteOnline real: não fica cada um numa linha cheia separada. */
    .co-service-row {
        width: 100%; box-sizing: border-box; justify-content: space-between; flex-wrap: wrap;
        background: #fff; border: 1px solid #ffffffcc; border-radius: 18px; padding: 8px 14px;
    }
    .co-service-row .co-chip { width: auto; border: 0; padding: 0; background: transparent; font-size: 12px; }
    .co-service-row .co-stepper { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
    .co-service-row .co-step-label { font-size: 11px; }

    /* Toolbar de ações — paridade exata com o CorteOnline real: Novo/Atribuir/Importar/Gravar
       4 numa linha só, Calcular Serviço/Fechar cada um com metade da linha debaixo. */
    .co-toolbar-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .co-toolbar-actions > * { width: 100%; box-sizing: border-box; justify-content: center; margin: 0; }
    .co-toolbar-actions form { width: 100%; }
    .co-toolbar-actions .co-motor-wrap { grid-column: span 2; }
    .co-toolbar-actions .co-motor-btn { width: 100%; justify-content: center; }
    .co-toolbar-actions .co-motor-menu { left: 0; right: 0; min-width: 0; }
    .co-toolbar-actions #btn-calcular-servico,
    .co-toolbar-actions .co-fechar { grid-column: span 2; }
    .co-toolbar-actions .co-prod-cal-embed { grid-column: 1 / -1; width: 100%; }
}

/* Linha do tempo (portal cliente) */
.co-timeline { list-style: none; margin: 0; padding: 0; }
.co-timeline li {
    display: flex; align-items: flex-start; gap: 10px; padding: 6px 0 6px 2px;
    border-left: 2px solid #eee; margin-left: 5px; padding-left: 14px; font-size: 13px;
}
.co-timeline li:last-child { border-left-color: transparent; }
.co-timeline-dot {
    width: 10px; height: 10px; border-radius: 50%; margin-left: -20px; margin-top: 3px;
    flex: 0 0 auto; border: 2px solid #fff; box-shadow: 0 0 0 1px #ccc;
}

/* Lista de serviços no celular — paridade CorteOnline: filtros escondidos atrás de um
   botão "Filtros" (o form em si só abre quando clicado), e cada serviço vira um cartão com
   os ícones de ação numa linha no topo e os campos empilhados um por linha (a versão
   desktop usa colunas col70/col30 lado a lado — min-width:220px cada, que é exatamente o
   que "cortava" a tela: 220+220+140px nunca cabe em 390px). */
@media (max-width: 640px) {
    .co-filter-toggle { display: flex; }
    .co-filter-bar { display: none; }
    .co-filter-bar.is-open { display: flex; flex-direction: column; align-items: stretch; }
    .co-filter-bar > div { width: 100%; }
    .co-filter-bar select, .co-filter-bar input { width: 100%; box-sizing: border-box; }

    .co-table, .co-table tbody, .co-table tr { display: block; width: 100%; }
    .co-table td.icons, .co-table td.infos { display: block; width: 100%; min-width: 0; padding: 8px 12px; box-sizing: border-box; }
    .co-table td.icons { padding-bottom: 0; border-bottom: 1px dashed #eee; padding-bottom: 8px; }
    .co-icons { justify-content: flex-start; gap: 10px; }
    .co-infos-row { flex-direction: column; gap: 2px; }
    .co-infos-row .col70, .co-infos-row .col30 { flex: 0 0 100%; min-width: 0; }
    .co-infos-row label { min-width: 90px; }
}

/* Painel M�quinas de corte � layout compartilhado (todos os motores) */
.co-machine-form .co-mach-section {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: #fafafa;
}
.co-machine-form .co-mach-section h2 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: #333;
}
.co-mach-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.co-mach-radios {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
}
.co-mach-phases {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 18px;
    min-width: 200px;
}
.co-mach-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    cursor: pointer;
    color: #333;
}
.co-mach-radio input { margin: 0; }
.co-mach-diagrams {
    flex: 1;
    min-width: 160px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.co-mach-svg {
    max-width: 100%;
    height: auto;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 4px;
}
.co-mach-descontos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.co-mach-descontos label { font-size: 12px; }
.co-mach-outras {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.co-mach-checks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}
.co-mach-checks .check { margin: 0; font-size: 13px; }
.co-mach-mins {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    min-width: 260px;
}
.co-mach-advanced {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px 12px;
    background: #fff;
}
.co-mach-advanced summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #555;
}
@media (max-width: 720px) {
    .co-mach-descontos { grid-template-columns: 1fr 1fr; }
    .co-mach-diagrams { justify-content: flex-start; }
}

/* —— Editor de etiquetas v2 (3 colunas) —— */
.co-le-page { display:flex; flex-direction:column; min-height:calc(100vh - 48px); margin:-8px -12px 0; }
.co-le-top {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:10px 14px; background:#fff; border-bottom:1px solid #ddd; position:sticky; top:0; z-index:20;
}
.co-le-top a.co-le-back { color:#444; text-decoration:none; font-size:13px; }
.co-le-top a.co-le-back:hover { color:var(--co-identity,#2f6b4f); }
.co-le-body { display:grid; grid-template-columns:220px minmax(0,1fr) 280px; gap:0; flex:1; min-height:0; background:#e8e8e8; }
@media (max-width:1100px) { .co-le-body { grid-template-columns:1fr; } }
.co-le-left, .co-le-right {
    background:#fff; border-right:1px solid #ddd; padding:12px; overflow:auto; max-height:calc(100vh - 56px);
}
.co-le-right { border-right:0; border-left:1px solid #ddd; }
.co-le-center { padding:12px; overflow:auto; display:flex; flex-direction:column; gap:8px; min-height:0; }
.co-le-add { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.co-le-add button {
    display:flex; align-items:center; gap:8px; width:100%; text-align:left;
    padding:8px 10px; border:1px solid #ccc; border-radius:4px; background:#fafafa; cursor:pointer; font:inherit; font-size:13px;
}
.co-le-add button:hover { border-color:var(--co-identity,#2f6b4f); background:#f0f7f3; }
.co-le-layers { list-style:none; margin:0; padding:0; }
.co-le-layers li {
    display:flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid transparent;
    border-radius:3px; cursor:pointer; font-size:12px; margin-bottom:2px;
}
.co-le-layers li:hover { background:#f5f5f5; }
.co-le-layers li.on { background:color-mix(in srgb, var(--co-identity) 12%, white); border-color:var(--co-identity); font-weight:600; }
.co-le-layers .co-le-layer-type { color:#888; font-size:10px; min-width:42px; }
.co-le-canvas-wrap {
    border:1px solid #ccc; background:repeating-conic-gradient(#f0f0f0 0% 25%, #fff 0% 50%) 0 0/16px 16px;
    align-self:flex-start; flex-shrink:0; overflow:visible; position:relative;
}
.co-le-canvas { position:relative; background:#fff; outline:1px dashed #999; transform-origin:top left; }
.co-le-marquee {
    position:absolute; z-index:50; pointer-events:none; box-sizing:border-box;
    border:1px solid var(--co-identity); background:color-mix(in srgb, var(--co-identity) 12%, white);
}
.co-le-ctx {
    display:flex; flex-wrap:wrap; gap:4px; align-items:center;
    background:#fff; border:1px solid #ddd; border-radius:4px; padding:6px 8px;
}
.co-le-ctx button { font-size:12px; padding:4px 8px; }
.co-le-folha {
    position:absolute; top:100%; left:0; margin-top:6px; width:min(420px,92vw);
    background:#fff; border:1px solid #ccc; border-radius:6px; box-shadow:0 8px 24px #0003;
    padding:12px; z-index:30;
}
.co-le-folha .grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.co-le-folha .full { grid-column:1 / -1; }
.co-le-warn { font-size:12px; color:#a33; margin:6px 0 0; }
.co-le-muted { font-size:12px; color:#777; margin:0 0 8px; }
.co-le-props label { font-size:11px; display:block; margin-bottom:2px; }
.co-le-props input[type=text], .co-le-props input[type=number], .co-le-props select {
    width:100%; padding:5px 6px; font-size:13px;
}
.co-le-ph { display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; }
.co-le-ph button {
    font-size:11px; padding:3px 7px; border:1px solid #ddd; background:#f7f7f7;
    border-radius:3px; cursor:pointer; color:#333;
}
.co-le-ph button:hover { border-color:var(--co-identity,#2f6b4f); background:#f0f7f3; }
.co-le-modal-bg {
    position:fixed; inset:0; background:#0006; z-index:50; display:flex; align-items:center; justify-content:center; padding:16px;
}
.co-le-modal {
    background:#fff; border-radius:6px; width:min(960px,96vw); max-height:92vh; display:flex; flex-direction:column;
    box-shadow:0 12px 40px #0004;
}
.co-le-modal-preview { width:min(1100px,96vw); }
.co-le-modal-head { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #ddd; }
.co-le-preview-layout { display:grid; grid-template-columns:280px minmax(0,1fr); min-height:0; flex:1; }
@media (max-width:800px) { .co-le-preview-layout { grid-template-columns:1fr; } }
.co-le-preview-pick {
    border-right:1px solid #ddd; padding:10px 12px; overflow:auto; max-height:70vh; background:#fafafa;
}
.co-le-preview-search {
    display:flex; align-items:center; gap:6px; border:1px solid #ccc; border-radius:4px; background:#fff; padding:4px 8px;
}
.co-le-preview-search i { color:#888; font-size:12px; }
.co-le-preview-search input {
    border:0; outline:0; width:100%; font-size:13px; background:transparent; padding:4px 0;
}
.co-le-preview-list { list-style:none; margin:0; padding:0; }
.co-le-preview-list li {
    display:flex; flex-direction:column; gap:1px; padding:8px 8px; border:1px solid transparent;
    border-radius:4px; cursor:pointer; margin-bottom:2px; font-size:12px; line-height:1.25;
}
.co-le-preview-list li:hover { background:#f0f7f3; border-color:#cfe0d6; }
.co-le-preview-list li.on { background:color-mix(in srgb, var(--co-identity) 12%, white); border-color:var(--co-identity); }
.co-le-preview-list li strong { font-size:13px; color:#222; }
.co-le-preview-list li span { color:#333; }
.co-le-preview-list li em { font-style:normal; color:#777; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.co-le-preview-list li small { color:#999; font-size:10px; }
.co-le-preview-empty { color:#888; font-size:12px; padding:10px 4px !important; cursor:default !important; }
.co-le-preview-empty:hover { background:transparent !important; border-color:transparent !important; }
.co-le-modal-body { flex:1; min-height:320px; }

/* ==========================================================================
   Redesign v2.2 (fase 1) — casca sidebar (layouts/app.blade.php) + Dashboard.
   Seção nova e isolada: não reaproveita nem sobrescreve .co-menubar/.co-tab/
   .co-topbar (usados por layouts/co.blade.php, que continua intocado).
   ========================================================================== */

.co-app-shell {
    display: flex; height: 100vh; overflow: hidden;
    font-family: var(--co-font-body); background: var(--co-content-bg); color: var(--co-text-body);
}

.co-sidebar {
    width: 256px; flex-shrink: 0; background: var(--co-menubar); color: #fff;
    display: flex; flex-direction: column; overflow-y: auto;
}
.co-sidebar::-webkit-scrollbar { width: 4px; }
.co-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

.co-sidebar-brand { padding: 16px 20px; border-bottom: 1px solid var(--co-menubar-dark); flex-shrink: 0; }
.co-sidebar-brand .co-logo-corte { font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 700; }
.co-sidebar-brand .co-logo-online { font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 700; color: #dbe6fe; }
.co-sidebar-brand p { font-size: 12px; color: #c7d2fe; margin: 2px 0 0; }

.co-sidebar-nav { padding: 16px 12px; flex: 1; }

.co-sidebar-link {
    display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 8px 12px;
    font-size: 14px; font-weight: 500; color: var(--co-sidebar-link); text-decoration: none;
    margin-bottom: 4px; transition: background .15s;
}
.co-sidebar-link:hover { background: var(--co-menubar-dark); }
.co-sidebar-link.active { background: var(--co-identity); color: #fff; font-weight: 600; }
.co-sidebar-link i { width: 16px; text-align: center; opacity: .9; }

.co-sidebar-group-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 8px;
    border-radius: 8px; padding: 8px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: rgba(199,210,254,.75); background: none; border: 0; cursor: pointer;
    transition: background .15s, color .15s;
}
.co-sidebar-group-btn:hover { background: var(--co-menubar-dark); color: #fff; }
.co-sidebar-group-btn span i { width: 16px; text-align: center; opacity: .9; margin-right: 8px; }
.co-sidebar-group-btn .fa-chevron-right { font-size: 11px; transition: transform .2s; }
.co-sidebar-group-btn[aria-expanded="true"] .fa-chevron-right { transform: rotate(90deg); }

.co-sidebar-group-items { margin: 2px 0 8px 12px; padding-left: 8px; border-left: 1px solid var(--co-menubar-dark); }
.co-sidebar-sublink {
    display: block; border-radius: 8px; padding: 6px 12px; font-size: 13.5px; margin-bottom: 2px;
    color: color-mix(in srgb, var(--co-sidebar-link) 85%, transparent); text-decoration: none; transition: background .15s, color .15s;
}
.co-sidebar-sublink:hover { background: var(--co-menubar-dark); color: #fff; }
.co-sidebar-sublink.active { background: var(--co-identity); color: #fff; font-weight: 600; }

.co-sidebar-footer { border-top: 1px solid var(--co-menubar-dark); padding: 12px 20px; font-size: 12px; flex-shrink: 0; }
.co-sidebar-footer .name { font-weight: 600; color: #fff; }
.co-sidebar-footer .role { color: #c7d2fe; }
.co-sidebar-footer .co-logout-2 {
    display: inline-block; margin-top: 6px; border-radius: 4px; background: var(--co-menubar-dark);
    color: #fff; padding: 4px 10px; font-weight: 600; text-decoration: none; border: 0; cursor: pointer;
}
.co-sidebar-footer .co-logout-2:hover { background: color-mix(in srgb, var(--co-menubar-dark) 80%, white); }

.co-app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.co-app-topbar {
    background: var(--co-topbar-bg); border-bottom: 1px solid var(--co-card-border); padding: 12px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0;
}
.co-app-topbar h1 { font-size: 18px; font-weight: 700; margin: 0; color: var(--co-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-app-topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.co-app-menu-btn {
    display: none; border: 1px solid var(--co-card-border); border-radius: 8px;
    width: 38px; height: 38px; background: #fff; cursor: pointer; flex-shrink: 0;
}
.co-app-content { flex: 1; overflow-y: auto; padding: 24px; }
.co-app-content.co-main-wide { max-width: none; }

.co-sidebar-overlay {
    position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.4);
}

.co-app-subnav {
    display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 24px;
    background: var(--co-topbar-bg); border-bottom: 1px solid var(--co-card-border); flex-shrink: 0;
}
.co-app-subtab {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 500; color: var(--co-text-muted); text-decoration: none;
    transition: background .15s, color .15s;
}
.co-app-subtab:hover { background: #f1f5f9; color: var(--co-text-body); }
.co-app-subtab.active { background: color-mix(in srgb, var(--co-identity) 12%, white); color: var(--co-identity); font-weight: 600; }
.co-app-subtab i { font-size: 12px; opacity: .85; }

/* Dashboard */
.co-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.co-kpi-card {
    background: #fff; border-radius: 10px; padding: 20px; border: 1px solid var(--co-card-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.05); text-decoration: none; color: inherit; display: block;
    transition: border-color .15s;
}
a.co-kpi-card:hover { border-color: var(--co-identity); }
.co-kpi-card .top { display: flex; align-items: center; justify-content: space-between; }
.co-kpi-card .value { font-size: 26px; font-weight: 700; color: var(--co-identity); margin: 0; }
.co-kpi-card .icon { font-size: 20px; opacity: .55; }
.co-kpi-card .label { font-size: 13px; color: var(--co-text-muted); margin: 4px 0 0; }
.co-kpi-card .sub { font-size: 11px; color: var(--co-text-muted); margin: 2px 0 0; }

.co-stage-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.co-stage-pill {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 14px;
    font-size: 13px; font-weight: 600;
}

.co-dash-card {
    background: #fff; border-radius: 10px; border: 1px solid var(--co-card-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.05); padding: 20px; margin-bottom: 24px;
}
.co-dash-card h3 { font-size: 14px; font-weight: 700; color: #374151; margin: 0 0 14px; }

.co-recent-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.co-recent-table th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--co-text-muted); padding: 8px 10px; border-bottom: 1px solid var(--co-card-border);
}
.co-recent-table td { padding: 10px; border-bottom: 1px solid #f1f5f9; }
.co-recent-table a { color: var(--co-identity); font-weight: 600; text-decoration: none; }
.co-recent-table a:hover { text-decoration: underline; }

/* Coluna de categorias de Configurações (nav persistente, estilo Perfex) */
.co-settings-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.co-settings-nav-list a {
    display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px;
    font-size: 13px; color: var(--co-text-muted); text-decoration: none; transition: background .15s, color .15s;
}
.co-settings-nav-list a i { width: 14px; text-align: center; font-size: 12px; }
.co-settings-nav-list a:hover { background: #f1f5f9; color: var(--co-text-body); }
.co-settings-nav-list a.active { color: var(--co-text-body); font-weight: 600; background: #f1f5f9; }

.co-settings-shell { display: flex; gap: 20px; align-items: flex-start; }
.co-settings-nav-col { width: 260px; flex-shrink: 0; }
.co-settings-content-col { flex: 1; min-width: 0; }

@media (max-width: 860px) {
    .co-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
    .co-sidebar.is-open { transform: translateX(0); }
    .co-app-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
    .co-app-content { padding: 16px; }
    .co-app-subnav { padding: 8px 16px; }
    .co-app-topbar { padding: 10px 16px; }
    .co-settings-shell { flex-direction: column; }
    .co-settings-nav-col { width: 100%; }
}
.co-le-modal-body iframe { width:100%; height:70vh; border:0; background:#e9eaec; }