/* OZ Compliance — Shared Component Styles
   Requires: oz.css (design tokens) loaded first
   ============================================================ */

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

/* ── PAGE BODY ── */
body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-app); font-size: var(--text-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

/* ── HEADER ── */
.header { background: var(--oz-gradient-brand); color: #fff; padding: 0 28px; height: var(--h-header); display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-header); position: sticky; top: 0; z-index: 100; }
.header-brand { display: flex; align-items: center; gap: 10px; }
.header-brand .logo { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.header-brand .logo svg { width: 100%; height: 100%; display: block; }
.header-brand .divider { width: 1px; height: 26px; background: rgba(255,255,255,.25); margin: 0 4px; flex-shrink: 0; }
.header-brand .product-mark { width: 30px; height: 30px; border-radius: 7px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; }
.header-brand h1 { font-size: 16px; font-weight: 700; margin: 0; color: #fff; }
.header-brand .sub { font-size: 11px; opacity: .7; margin-top: 1px; color: #fff; }
.header-right { display: flex; align-items: center; gap: 10px; }
.user-pill { font-size: 11px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.12); padding: 4px 12px; border-radius: var(--radius-pill); display: flex; align-items: center; gap: 6px; }
.logout-btn { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff; padding: 4px 12px; border-radius: var(--radius-sm); font-size: 12px; cursor: pointer; font-weight: 600; font-family: var(--font-sans); transition: background var(--dur-base); }
.logout-btn:hover { background: rgba(220,38,38,.4); }

/* Simple header variant (non-brand-gradient pages like Supplier, Upload detail) */
.header-simple { background: var(--oz-gradient-brand); color: #fff; padding: 0 28px; height: var(--h-header); display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-header); }
.header-simple h1 { font-size: 17px; font-weight: 700; color: #fff; margin: 0; }
.header-simple .sub { font-size: 12px; opacity: .75; margin-top: 2px; color: #fff; }
.header-back { color: #fff; font-size: 13px; opacity: .7; text-decoration: none; display: flex; align-items: center; gap: 5px; transition: opacity var(--dur-base); }
.header-back:hover { opacity: 1; color: #fff; }

/* ── NAV BAR ── */
.nav-bar { background: #fff; padding: 0 20px; border-bottom: 1px solid var(--border-1); display: flex; gap: 0; height: var(--h-navbar); align-items: center; }
/* Global .nav-link used in non-Bootstrap pages (e.g. inline action links) */
.nav-link { padding: 0 14px; height: auto; display: inline-flex; align-items: center; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--oz-ink-500); border-bottom: 2px solid transparent; gap: 7px; transition: color var(--dur-base); cursor: pointer; white-space: nowrap; }
.nav-link i { font-size: 12px; }
.nav-link:hover { color: var(--action); }
/* Scoped override — !important defeats Bootstrap's .nav-link loaded after compliance.css */
.nav-bar .nav-link { padding: 0 18px !important; height: var(--h-navbar) !important; display: flex !important; align-items: center !important; text-decoration: none !important; font-size: 13px !important; font-weight: 600 !important; color: var(--oz-ink-500) !important; border-bottom: 2px solid transparent !important; border-top: none !important; border-left: none !important; border-right: none !important; gap: 7px !important; transition: color var(--dur-base) !important; cursor: pointer !important; white-space: nowrap !important; opacity: 1 !important; border-radius: 0 !important; background: transparent !important; }
.nav-bar .nav-link i { font-size: 12px !important; }
.nav-bar .nav-link:hover, .nav-bar .nav-link.active { color: var(--action) !important; border-bottom-color: var(--action) !important; background: transparent !important; }
.nav-spacer { flex: 1; }
/* user-pill and logout-btn in nav-bar need dark-on-white styling (not the white-on-gradient header variant) */
.nav-bar .user-pill { color: var(--fg-2) !important; background: var(--oz-ink-100) !important; font-size: 11px; padding: 4px 12px; border-radius: var(--radius-pill); display: flex; align-items: center; gap: 6px; }
.nav-bar .logout-btn { background: transparent !important; border: 1px solid var(--border-1) !important; color: var(--fg-2) !important; padding: 4px 12px; border-radius: var(--radius-sm); font-size: 12px; cursor: pointer; font-weight: 600; font-family: var(--font-sans); transition: background var(--dur-base), color var(--dur-base); }
.nav-bar .logout-btn:hover { background: var(--oz-blocking-bg) !important; color: var(--oz-blocking) !important; border-color: var(--oz-blocking) !important; }
.btn-new { background: var(--oz-gradient-brand); color: #fff; border: none; padding: 6px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-family: var(--font-sans); transition: opacity var(--dur-base); margin-left: 8px; white-space: nowrap; }
.btn-new:hover { opacity: var(--hover-opacity); color: #fff; }

/* ── PAGE CONTAINER ── */
.page { max-width: var(--max-page); margin: 0 auto; padding: 24px 20px; }
.page-narrow { max-width: 900px; margin: 0 auto; padding: 24px 20px; }
.page-form { max-width: 680px; margin: 28px auto; padding: 0 16px; }

/* ── HERO ── */
.hero { background: var(--oz-gradient-hero); border-radius: var(--radius-2xl); padding: 28px 32px; display: flex; align-items: center; gap: 32px; margin-bottom: 24px; box-shadow: var(--shadow-2xl); color: #fff; }
.hero-text h2 { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: #fff; line-height: var(--lh-snug); }
.hero-text p { font-size: 14px; opacity: .8; margin: 0; color: #fff; }
.hero-text { flex: 1; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-btn { padding: 9px 20px; border-radius: var(--radius-md); font-size: 13px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; border: none; cursor: pointer; transition: opacity var(--dur-base); }
.hero-btn:hover { opacity: var(--hover-opacity); }
.hero-btn-primary { background: #fff; color: #1E3A5F; }
.hero-btn-primary:hover { color: #1E3A5F; }
.hero-btn-outline { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.35) !important; }
.hero-btn-outline:hover { color: #fff; }

/* ── COMPLIANCE GAUGE ── */
.gauge-wrap { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.gauge { width: 110px; height: 110px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px rgba(255,255,255,.1); }
.gauge-inner { width: 78px; height: 78px; border-radius: 50%; background: #1E3A5F; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-pct { font-size: 22px; font-weight: 800; line-height: 1; color: #fff; }
.gauge-lbl { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.7); margin-top: 2px; text-transform: uppercase; }
.gauge-caption { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 8px; text-align: center; font-weight: 600; line-height: 1.3; }

/* ── STAT CARDS ── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.stat-card { background: var(--bg-surface); border-radius: var(--radius-xl); padding: 18px 20px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; border-left: 4px solid transparent; transition: box-shadow var(--dur-base); }
.stat-card:hover { box-shadow: var(--shadow-xl); color: inherit; }
.stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.stat-val { font-size: 28px; font-weight: 800; line-height: 1; }
.stat-label { font-size: 11px; font-weight: 600; color: var(--fg-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }

/* ── TWO COLUMN PANEL GRID ── */
.main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }

/* ── PANELS ── */
.panel { background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel-header { padding: 14px 18px; border-bottom: 1px solid var(--border-2); display: flex; align-items: center; justify-content: space-between; }
.panel-title { font-size: 14px; font-weight: 700; color: var(--oz-ink-700); display: flex; align-items: center; gap: 8px; }
.panel-count { font-size: 11px; color: var(--fg-muted); background: var(--border-2); padding: 2px 8px; border-radius: var(--radius-pill); }
.panel-empty { padding: 28px 18px; text-align: center; color: var(--fg-muted); font-size: 13px; }

/* ── EXPIRING DOCUMENT ROWS ── */
.exp-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--oz-ink-50); text-decoration: none; color: inherit; transition: background var(--dur-fast); }
.exp-row:hover { background: #FAFBFF; }
.exp-row:last-child { border-bottom: none; }
.exp-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.exp-info { flex: 1; min-width: 0; }
.exp-forn { font-size: 13px; font-weight: 600; color: var(--oz-ink-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-tipo { font-size: 11px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-days { font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ── AUDIT ROWS ── */
.aud-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 18px; border-bottom: 1px solid var(--oz-ink-50); }
.aud-row:last-child { border-bottom: none; }
.aud-icon { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; margin-top: 1px; }
.aud-line { font-size: 12px; color: var(--fg-2); font-weight: 500; }
.aud-line strong { color: var(--oz-ink-800); }
.aud-meta { font-size: 11px; color: var(--fg-muted); margin-top: 1px; }

/* ── QUICK LINKS ── */
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.quick-card { background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; border: 2px solid transparent; transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.quick-card:hover { border-color: var(--oz-blue-200); box-shadow: 0 4px 14px rgba(37,99,235,.1); color: inherit; }
.quick-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.quick-label { font-size: 14px; font-weight: 700; color: var(--oz-ink-800); }
.quick-desc { font-size: 12px; color: var(--fg-muted); line-height: var(--lh-normal); }

/* ── KPI STRIP ── */
.kpi-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--bg-surface); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; display: block; transition: box-shadow var(--dur-base); }
.kpi:hover { box-shadow: var(--shadow-xl); color: inherit; }
.kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); margin-bottom: 4px; }
.kpi-val { font-size: 28px; font-weight: 700; }

/* ── SUPPLIER ROWS ── */
.supplier-row { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); margin-bottom: 8px; padding: 14px 18px; display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; transition: box-shadow var(--dur-base); }
.supplier-row:hover { box-shadow: var(--shadow-xl); color: inherit; }
.tl-dot { display: inline-block; border-radius: 50%; flex-shrink: 0; }
.tl-dot-lg { width: 14px; height: 14px; }
.tl-dot-sm { width: 11px; height: 11px; }
.supplier-name { font-weight: 600; font-size: 15px; color: var(--oz-ink-800); flex: 1; }
.supplier-meta { font-size: 11px; color: var(--fg-muted); }

/* ── STATUS BADGES ── */
.badge-ok    { background: var(--oz-ok-bg);       color: var(--oz-ok-fg);       padding: 3px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.badge-warn  { background: var(--oz-warning-bg);   color: var(--oz-warning-fg);  padding: 3px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.badge-crit  { background: var(--oz-critical-bg);  color: var(--oz-critical-fg); padding: 3px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.badge-block { background: var(--oz-blocking-bg);  color: var(--oz-blocking-fg); padding: 3px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.badge-rej   { background: var(--oz-rejected-bg);  color: var(--oz-rejected-fg); padding: 3px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.badge-none  { background: var(--oz-ink-100);      color: #64748B;               padding: 3px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }

/* ── STATUS PILLS (larger, inside doc tables) ── */
.status-pill { padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; }
.status-Pendente  { background: var(--oz-ink-100); color: #64748B; }
.status-EmRevisao { background: var(--oz-review-bg); color: var(--oz-review-fg); }
.status-Aprovado  { background: var(--oz-ok-bg);    color: var(--oz-ok-fg); }
.status-Rejeitado { background: var(--oz-rejected-bg); color: var(--oz-rejected-fg); }
.status-Expirado  { background: var(--oz-blocking-bg); color: var(--oz-blocking-fg); }

/* ── SQA DOCUMENT CARDS ── */
.card-sqa { background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); margin-bottom: 16px; }
.card-header-sqa { padding: 14px 20px; border-bottom: 1px solid var(--border-2); font-weight: 700; font-size: 14px; color: var(--oz-ink-700); display: flex; align-items: center; justify-content: space-between; }
.card-body-sqa { padding: 20px; }

/* Detail definition grid */
.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.dl-key { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); margin-bottom: 2px; }
.dl-val { font-size: 14px; color: var(--oz-ink-800); font-weight: 500; }

/* Alert banner (colored full-width stripe) */
.alert-banner { color: #fff; padding: 10px 18px; border-radius: 10px; margin-bottom: 16px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }

/* Audit log rows */
.audit-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-2); font-size: 12px; }
.audit-row:last-child { border-bottom: none; }
.audit-ts   { color: var(--fg-muted); white-space: nowrap; min-width: 130px; }
.audit-user { font-weight: 600; color: var(--oz-ink-600); min-width: 100px; }
.audit-acao { color: var(--action); font-weight: 600; min-width: 110px; }
.audit-detail { color: var(--fg-3); }

/* Status workflow buttons */
.btn-status { padding: 6px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; border: 1.5px solid; cursor: pointer; background: var(--bg-surface); display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); transition: opacity var(--dur-fast); }
.btn-status:hover { opacity: .8; }

/* ── FORM CARD ── */
.form-card { background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 28px; }
.form-card label, .form-label-oz { font-size: 13px; font-weight: 600; color: var(--oz-ink-600); margin-bottom: 4px; display: block; }
.sec-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); margin: 20px 0 10px; }
.form-card input, .form-card select, .form-card textarea { width: 100%; padding: 6px 10px; border: 1px solid var(--border-1); border-radius: var(--radius-xs); font-size: 13px; font-family: var(--font-sans); }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.form-card input[type=checkbox], .form-card input[type=radio] { width: auto; padding: 0; box-shadow: none; }

/* Drop zone */
.drop-zone { border: 2px dashed var(--oz-blue-200); border-radius: var(--radius-md); padding: 28px; text-align: center; cursor: pointer; background: #F0F7FF; transition: border-color var(--dur-slow), background var(--dur-slow); }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--action); background: var(--oz-blue-100); }

/* ── LOGIN ── */
.login-screen { background: linear-gradient(135deg, #1E3A5F 0%, #2563EB 60%, #1D4ED8 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: #fff; border-radius: var(--radius-3xl); box-shadow: var(--shadow-auth); width: 100%; max-width: 400px; overflow: hidden; }
.login-head { background: var(--oz-gradient-brand); padding: 32px 28px 24px; text-align: center; color: #fff; }
.login-head .brand-lockup { width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.login-head .brand-lockup svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,.25)); }
.login-head h1 { font-size: 18px; font-weight: 700; margin: 0; color: #fff; }
.login-head .sub { font-size: 13px; opacity: .7; margin-top: 4px; color: #fff; }
.login-body { padding: 28px; }
.login-body label { font-size: 13px; font-weight: 600; color: var(--oz-ink-600); margin-bottom: 4px; display: block; }
.login-body input { width: 100%; padding: 8px 12px; border: 1px solid var(--border-1); border-radius: var(--radius-xs); font-size: 14px; font-family: var(--font-sans); }
.login-body input:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.btn-login { background: var(--oz-gradient-brand); color: #fff; border: none; padding: 11px; border-radius: var(--radius-md); font-weight: 700; font-size: 15px; width: 100%; cursor: pointer; margin-top: 6px; font-family: var(--font-sans); transition: opacity var(--dur-base); }
.btn-login:hover { opacity: var(--hover-opacity); }

/* ── SUPPLIER TABLE (Fornecedor/Index) ── */
.table-card { background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.table-card table { font-size: 13px; }
.table-card thead { background: var(--oz-ink-50); }
.table-card thead th { padding: 10px 18px; font-size: 11px; color: var(--oz-ink-500); font-weight: 700; }
.table-card thead th:not(:first-child) { padding: 10px 12px; }
.table-card tbody td { padding: 10px 12px; vertical-align: middle; }
.table-card tbody td:first-child { padding: 10px 18px; font-weight: 600; color: var(--oz-ink-800); }
.active-badge   { background: var(--oz-ok-bg);    color: var(--oz-ok-fg);    padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; }
.inactive-badge { background: var(--oz-ink-100);  color: #64748B;            padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; }

/* ── FOOTER ── */
.footer { text-align: center; padding: 20px; font-size: 11px; color: var(--fg-muted); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .main-grid { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dl-grid { grid-template-columns: 1fr; }
  .hero { flex-direction: column; align-items: flex-start; }
}