/* ===================================================================
   OPTITEX Production Hub — Shared stylesheet
   Adaptado da base visual do HYLINE Production Hub, com paleta própria.
   =================================================================== */

/* Paleta Bordata (SOP Bordata Brand Guidelines v1.1) — "Software products and
   dashboards": dourado reservado para CTA's primários, navegação ativa e
   focus rings; nunca decorativo nem usado como cor de aviso. Estados
   (sucesso/aviso/perigo/info) usam sempre a paleta de estado documentada. */
:root {
    --optitex-ink:      #232932; /* Charcoal Slate — texto/títulos principais */
    --optitex-ink-2:    #333c48; /* Charcoal mais claro — gradiente do login */
    --optitex-accent:   #FFC61A; /* Bordata Gold — só CTA's/estados ativos/focus */
    --optitex-accent-dark: #E6B300; /* Gold — hover dos CTA's */
    --optitex-link:     #185FA5; /* Info (deep blue) — links/ícones de texto */
    --optitex-link-dark:#124a80;
    --warn:  #BA7517; /* deep amber — nunca amarelo */
    --warn-text: #8a5410; /* variante mais escura, só para texto pequeno sobre fundo claro (contraste AA) */
    --ok:    #0F6E56; /* deep teal */
    --danger:#A32D2D; /* deep red */
    --info:  #185FA5;
    --bg:    #FFF4EA; /* Cream */
    --card:  #ffffff;
    --border:#ece2d2;
    --text:  #000000;
    --text-muted: #6D6D6D;
    --text-faint: #8a93a0;

    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;

    --shadow-sm: 0 2px 15px rgba(0,0,0,0.05);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.04);
}

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

body {
    font-family: 'Inter', Arial, sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'tnum';
    background: var(--bg);
    color: var(--text);
    margin: 0;
}

/* Focus visível obrigatório (WCAG AA / regra de produto Bordata). */
:focus-visible {
    outline: 2px solid var(--optitex-accent);
    outline-offset: 2px;
}

a { color: inherit; text-decoration: none; }

/* ---------------- Navbar ---------------- */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card);
    padding: 14px 28px;
    box-shadow: var(--shadow-sm);
}
.logo-container { display: inline-flex; align-items: center; gap: 12px; }
.logo-badge {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--optitex-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.logo-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
}
.logo-img { height: 40px; max-height: 40px; width: auto; max-width: 200px; object-fit: contain; display: block; flex-shrink: 0; }
.logo-text h1 { margin: 0; font-size: 16px; letter-spacing: 1px; color: var(--optitex-ink); }
.logo-text span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.user-info {
    display: flex; align-items: center; gap: 8px;
    background: #eaf1f8; color: var(--optitex-link);
    border: 1px solid #cfe0ef;
    padding: 8px 14px; border-radius: var(--radius-lg);
    font-size: 13px; font-weight: 600;
}
.btn-circle {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #f2f4f6; color: var(--optitex-ink);
    transition: background 0.15s ease;
}
.btn-circle:hover { background: #e4e8ec; }
.btn-sair:hover { background: #f6e2e0; color: var(--danger); }
.btn-info:hover { background: #e0eaf5; color: var(--info, #185FA5); }

/* ---------------- Layout ---------------- */
.page-container { max-width: 1100px; margin: 0 auto; padding: 30px 24px 60px; }
.page-heading { display: flex; align-items: center; gap: 12px; color: var(--optitex-ink); margin-bottom: 4px; }
.page-sub { color: var(--text-muted); margin-top: 0; margin-bottom: 24px; }
.back-link { display: inline-block; margin-bottom: 16px; color: var(--optitex-link); font-weight: 600; font-size: 13px; }

.card {
    background: var(--card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 24px;
    margin-bottom: 24px;
}
.card h3 { margin-top: 0; color: var(--optitex-ink); }
.muted { color: var(--text-muted); font-size: 12px; }
.empty-note { color: var(--text-faint); text-align: center; padding: 20px; }

/* ---------------- Dept grid (mosaico) ---------------- */
.dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}
.btn-dept {
    background: var(--card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 26px 14px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    color: var(--optitex-ink);
    font-weight: 700;
}
.btn-dept i { font-size: 22px; color: var(--optitex-ink); }
.btn-dept small { color: var(--text-faint); font-weight: 400; font-size: 11px; text-transform: uppercase; }
.btn-dept:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.08); }
.btn-dept.disabled { opacity: 0.4; cursor: not-allowed; }
.btn-dept.disabled:hover { transform: none; }

.quick-links { display: flex; gap: 18px; flex-wrap: wrap; }
.quick-links a {
    color: var(--optitex-link); font-weight: 600; font-size: 13px;
    display: flex; align-items: center; gap: 6px;
}

/* ---------------- Menu Principal (landing.php) ---------------- */
.landing-seccao-titulo {
    color: var(--optitex-ink);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 28px 0 14px;
}
.landing-seccao-titulo:first-of-type { margin-top: 0; }

/* ---------------- Forms ---------------- */
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 12px; font-weight: 700; color: var(--optitex-ink); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; }

input[type=text], input[type=password], input[type=number], input[type=date], select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dde3e8;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: #fff;
}
.inline-form input, .inline-form select { width: auto; min-width: 180px; }

.btn-primary, .btn-secondary, .btn-login, .btn-danger {
    display: inline-flex; align-items: center; gap: 8px;
    border: none; cursor: pointer;
    padding: 11px 22px; border-radius: var(--radius-lg);
    font-weight: 700; font-size: 14px;
}
.btn-primary, .btn-login { background: var(--optitex-accent); color: var(--optitex-ink); }
.btn-primary:hover, .btn-login:hover { background: var(--optitex-accent-dark); }
.btn-secondary { background: #eef1f3; color: var(--optitex-ink); }
.btn-secondary:hover { background: #e2e7ea; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #7f2222; }
.btn-danger:disabled { background: #d9c3c3; color: #fff; cursor: not-allowed; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: var(--radius, 8px); text-decoration: none; }
.btn-sm + .btn-sm { margin-left: 6px; }

/* ---------------- Zona de perigo (reset de dados) ---------------- */
.danger-zone {
    border: 1px solid var(--danger);
    background: #fdf3f3;
    border-radius: var(--radius-md);
    padding: 20px;
}
.danger-zone h3 { color: var(--danger); margin-top: 0; }
.danger-zone ul { margin: 10px 0; padding-left: 22px; }
.danger-zone .confirma-row { margin-top: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.danger-zone input[type="text"] { padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: monospace; }

/* ---------------- Exportação de dados ---------------- */
.export-opcoes { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.export-opcao {
    flex: 1;
    min-width: 260px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
}
.export-opcao h3 { margin-top: 0; }
.export-opcao .muted { margin-bottom: 16px; }

/* ---------------- Tutorial ---------------- */
.tutorial-passos { margin: 0; padding-left: 22px; }
.tutorial-passos li { margin-bottom: 10px; }
.tutorial-sequencia {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 14px 0; padding: 14px; background: var(--cream, #FFF4EA); border-radius: var(--radius-md);
}
.tutorial-etapa {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 6px 12px; font-weight: 600; font-size: 13px; color: var(--optitex-ink);
}
.tutorial-sequencia i { color: var(--text-muted); }

/* ---------------- Tables ---------------- */
.tamanhos-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.tamanhos-table th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted); border-bottom: 2px solid var(--border); padding: 10px 8px;
}
.tamanhos-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); font-size: 14px; }
.tamanhos-table td.tam-nome { font-weight: 700; }
.tamanhos-table input[type=number] { max-width: 100px; }

.badge-ok, .badge-warn, .badge-excesso {
    display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 700;
}
.badge-ok { background: #dff0ec; color: var(--ok); }
.badge-warn { background: #f8ecd9; color: var(--warn-text); }
/* Anotação "(+N)" junto de uma quantidade já registada que excede o Alvo
   (planeado, ou feito no passo anterior) — ver dominio.php::excesso_tamanho(). */
.badge-excesso { background: #f8ecd9; color: var(--warn-text); padding: 3px 8px; margin-left: 4px; }

/* ---------------- Ficha de Qualidade (QL01) ---------------- */
.ficha-qualidade-table th:not(:first-child),
.ficha-qualidade-table td.ficha-opcao-cel { text-align: center; }
.ficha-qualidade-table input[type=radio] { width: 18px; height: 18px; cursor: pointer; }

/* ---------------- Histórico de Qualidade ---------------- */
details summary { cursor: pointer; color: var(--optitex-link, #185FA5); font-size: 13px; font-weight: 600; }
.ficha-parametros-lista { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; }
.ficha-parametros-lista li { padding: 2px 0; }

/* ---------------- Fichas Técnicas ---------------- */
.fichastec-add-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: var(--radius-lg);
    font-weight: 700; font-size: 14px;
    background: var(--optitex-accent); color: var(--optitex-ink); list-style: none;
}
.fichastec-add-toggle::-webkit-details-marker { display: none; }
.fichastec-add-toggle:hover { background: var(--optitex-accent-dark); }
.fichastec-add-form { margin-top: 16px; max-width: 480px; }

/* ---------------- Estado Início/Fim (badges) ---------------- */
.estado-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.badge-estado {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.badge-nao-iniciado { background: #eef1f3; color: var(--text-muted); }
.badge-em-curso     { background: #f8ecd9; color: var(--warn-text); }
.badge-terminado    { background: #dff0ec; color: var(--ok); }
.badge-bloqueado    { background: #f2f2f2; color: var(--text-faint); }
.badge-na           { background: #f2f2f2; color: var(--text-faint); }

.acoes-linha { margin-top: 6px; }
.form-cancelar { margin-top: 14px; }
.btn-link-danger {
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--danger); font-size: 12px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
}
.btn-link-danger:hover { text-decoration: underline; }

/* ---------------- Mapa de Encomendas ---------------- */
.page-container-wide { max-width: 1400px; }
.mapa-legenda { display: flex; gap: 10px; flex-wrap: wrap; }
.mapa-scroll { overflow-x: auto; }
.mapa-table th, .mapa-table td { text-align: center; white-space: nowrap; }
.mapa-table th:nth-child(1), .mapa-table td:nth-child(1),
.mapa-table th:nth-child(2), .mapa-table td:nth-child(2),
.mapa-table th:nth-child(3), .mapa-table td:nth-child(3) { text-align: left; }
.mapa-qtd { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ---------------- Messages ---------------- */
.erro-msg, .ok-msg {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px;
}
.erro-msg { background: #f6e2e0; color: var(--danger); }
.ok-msg { background: #dff0ec; color: var(--ok); }
.erro-card { display: flex; align-items: center; gap: 10px; color: var(--danger); }
.pass-temp-box { background: #fff8e0; border: 1px dashed var(--optitex-accent); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px; }
.pass-temp-box code { font-size: 16px; font-weight: 700; }

/* ---------------- Login ---------------- */
.login-body {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: linear-gradient(160deg, var(--optitex-ink) 0%, var(--optitex-ink-2) 100%);
}
.login-card {
    background: #fff; padding: 40px 36px; border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px rgba(0,0,0,0.25);
    width: 100%; max-width: 380px;
}
.brand-title { font-size: 26px; font-weight: 800; letter-spacing: 2px; color: var(--optitex-ink); }
.input-group { margin-bottom: 16px; }
.input-group label { display: block; font-size: 12px; font-weight: 700; color: var(--optitex-ink); margin-bottom: 6px; }
.input-wrapper { position: relative; }
.input-wrapper i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }
.input-wrapper input { padding-left: 36px; }
.btn-login { width: 100%; justify-content: center; margin-top: 6px; }
.footer-info { text-align: center; font-size: 11px; color: var(--text-faint); }
.lang-selector { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #eee; }
.lang-selector small { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; margin-right: 6px; }
.lang-flag { display: inline-block; width: 32px; height: 22px; border-radius: 3px; overflow: hidden; opacity: 0.4; transition: opacity 0.2s ease; }
.lang-flag:hover, .lang-flag.active { opacity: 1; }
.lang-flag img { display: block; width: 100%; height: 100%; object-fit: cover; }