/* =========================================================================
   Design system — IN ERP · Roteiro de Testes Integrados
   Direção visual: "sala de controle" de engenharia — precisa, técnica,
   orientada a dados. O teal da marca é o acento de identidade; as cores do
   semáforo (cinza/amarelo/azul/verde/vermelho) carregam significado
   funcional definido pelo motor de workflow e nunca são usadas decorativamente.
   ========================================================================= */

   @font-face {
    font-family: 'Inter';
    src: local('Inter');
  }
  
  :root{
    color-scheme: dark;
  
    --bg: #0D1517;
    --bg-elevated: #101A1D;
    --panel: #141F22;
    --panel-2: #1A282C;
    --panel-hover: #1F3136;
    --line: #253439;
    --line-soft: #1D2A2E;
  
    --text: #E8EDEE;
    --text-dim: #94A8AC;
    --text-faint: #67797D;
  
    --brand: #00677F;
    --brand-dark: #004A5C;
    --brand-glow: #00677F33;
    --brand-tint: #00677F14;
  
    --c-cinza: #6B7280;
    --c-amarelo: #E8B23D;
    --c-azul: #4C8DFF;
    --c-verde: #2FBE79;
    --c-vermelho: #EF5350;
    --c-roxo: #B084F5;
  
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
  
    --sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  }
  /* ---------------------------- tema claro ---------------------------- */
  
  html[data-theme="light"]{
    color-scheme: light;
  
    --bg: #F3F6F7;
    --bg-elevated: #FFFFFF;
    --panel: #FFFFFF;
    --panel-2: #F1F5F6;
    --panel-hover: #E7EEEF;
    --line: #DCE4E6;
    --line-soft: #E6ECED;
  
    --text: #16232A;
    --text-dim: #52676C;
    --text-faint: #7C9095;
  
    --brand: #00677F;
    --brand-dark: #004A5C;
    --brand-glow: #00677F26;
    --brand-tint: #00677F12;
  }
  html[data-theme="light"] .progress-track{ background:#DCE6E8; }
  html[data-theme="light"] input[type="date"]{ color-scheme: light; }
  html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator{ filter:none; }
  html[data-theme="light"] .login-error{ background:#FBE3E2; border-color:#F3B7B4; color:#B3312B; }
  html[data-theme="light"] .security-note{ background:linear-gradient(90deg,#FBF3DE,#FAF0D6); border-color:#E9D6A0; color:#7A5D14; }
  html[data-theme="light"] .btn.danger{ background:#FBE3E2; border-color:#F3B7B4; color:#C23A34; }
  html[data-theme="light"] .btn.success{ background:#DEF3E7; border-color:#A9DFC0; color:#1F8A52; }
  html[data-theme="light"] .login-card{ box-shadow:0 30px 70px -30px #0002, 0 0 0 1px #0000000a; }
  html[data-theme="light"] .modal{ box-shadow:0 30px 70px -30px #0003; }
  html[data-theme="light"] .toast{ box-shadow:0 4px 16px #0002; }
  html[data-theme="light"] ::-webkit-scrollbar-thumb{ background:#c3ced1; }
  html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background:#aab8bb; }
  html[data-theme="light"] .badge.b-cinza{ color:#5B6670; }
  html[data-theme="light"] .badge.b-amarelo{ color:#8A6416; }
  html[data-theme="light"] .badge.b-azul{ color:#1D5FD1; }
  html[data-theme="light"] .badge.b-verde{ color:#178A52; }
  html[data-theme="light"] .badge.b-vermelho{ color:#C23A34; }
  html[data-theme="light"] .badge.b-roxo{ color:#7B4FC4; }
  html[data-theme="light"] .field-error{ color:#C23A34; }
  
  /* ---------------------------- seletor de tema ---------------------------- */
  
  .theme-toggle{ display:flex; gap:8px; }
  .theme-toggle button{
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
    background:var(--panel-2); border:1px solid var(--line); color:var(--text-dim);
    padding:9px 10px; border-radius:var(--radius-sm); font-size:13px; transition:border-color .15s, background .15s, color .15s;
  }
  .theme-toggle button:hover{ border-color:#4a5266; }
  .theme-toggle button.active{ background:var(--brand-tint); border-color:var(--brand); color:var(--text); }
  .theme-toggle svg{ flex-shrink:0; }
  
  *{ box-sizing: border-box; }
  html{ color-scheme: dark; }
  body{
    margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
    font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-thumb{ background:#333c4c; border-radius:5px; }
  ::-webkit-scrollbar-thumb:hover{ background:#414c60; }
  
  a{ color: var(--brand); }
  h1,h2,h3,h4,label,p,span,div,td,th,li{ color:inherit; }
  button{ font-family:var(--sans); cursor:pointer; }
  input,select,textarea{ font-family:var(--sans); color:var(--text); }
  select option{ background:var(--panel-2); color:var(--text); }
  input[type="date"]{ color-scheme: dark; }
  input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1) brightness(1.4); cursor:pointer; }
  input[type="checkbox"]{ accent-color:var(--brand); width:16px; height:16px; }
  :focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
  
  .mono{ font-family:var(--mono); }
  .muted{ color:var(--text-faint); }
  .hidden{ display:none !important; }
  
  /* ---------------------------- login ---------------------------- */
  
  #login-screen{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(1100px 700px at 15% 0%, var(--brand-tint), transparent 60%),
      radial-gradient(900px 600px at 100% 100%, #0e829911, transparent 55%),
      var(--bg);
    padding:24px;
  }
  .login-card{
    width:100%; max-width:380px; background:var(--panel);
    border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:40px 36px; box-shadow:0 30px 70px -30px #000a, 0 0 0 1px #ffffff06;
  }
  .login-logo{ width:64px; height:64px; border-radius:50%; display:block; margin:0 auto 20px; box-shadow:0 0 30px var(--brand-glow); }
  .login-title{ text-align:center; font-size:17px; font-weight:700; letter-spacing:-0.01em; margin-bottom:2px; }
  .login-sub{ text-align:center; color:var(--text-faint); font-size:12.5px; margin-bottom:28px; }
  .login-field{ margin-bottom:14px; }
  .login-field label{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; font-weight:500; }
  .login-field input{
    width:100%; background:var(--bg-elevated); border:1px solid var(--line);
    color:var(--text); padding:11px 13px; border-radius:var(--radius-sm); font-size:14px;
    transition:border-color .15s;
  }
  .login-field input:focus{ border-color:var(--brand); }
  .login-btn{
    width:100%; background:var(--brand); color:#fff; border:none; padding:12px;
    border-radius:var(--radius-sm); font-size:14px; font-weight:600; margin-top:6px;
    transition:background .15s;
  }
  .login-btn:hover{ background:var(--brand-dark); }
  .login-credits{ text-align:center; margin-top:24px; padding-top:16px; border-top:1px solid var(--line-soft); font-size:11px; color:var(--text-faint); letter-spacing:.3px; }
  .login-error{
    background:#3a2224; border:1px solid #5a2f32; color:#ff9d99;
    padding:10px 12px; border-radius:var(--radius-sm); font-size:12.5px; margin-bottom:14px;
  }
  .login-hint{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); font-size:11.5px; color:var(--text-faint); line-height:1.6; }
  .login-hint b{ color:var(--text-dim); }
  
  /* ---------------------------- shell ---------------------------- */
  
  #app-shell{ display:flex; min-height:100vh; }
  
  .sidebar{
    width:238px; flex-shrink:0; background:var(--bg-elevated);
    border-right:1px solid var(--line); display:flex; flex-direction:column;
    position:sticky; top:0; height:100vh;
  }
  .sidebar-brand{ display:flex; align-items:center; gap:10px; padding:20px 18px 16px; }
  .sidebar-brand img{ width:32px; height:32px; border-radius:50%; box-shadow:0 0 16px var(--brand-glow); }
  .sidebar-brand .t1{ font-size:12.5px; font-weight:700; line-height:1.25; }
  .sidebar-brand .t2{ font-size:10.5px; color:var(--text-faint); }
  
  .sidebar-select{ padding:0 14px 12px; }
  .sidebar-select label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); display:block; margin-bottom:5px; padding-left:2px; }
  .sidebar-select select{
    width:100%; background:var(--panel); border:1px solid var(--line); color:var(--text);
    padding:8px 10px; border-radius:var(--radius-sm); font-size:12.5px;
  }
  
  .sidebar-nav{ flex:1; padding:8px 10px; overflow-y:auto; }
  .sidebar-nav button{
    width:100%; text-align:left; background:none; border:none; color:var(--text-dim);
    padding:9px 12px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:2px;
    display:flex; align-items:center; gap:9px;
  }
  .sidebar-nav button:hover{ background:var(--panel); color:var(--text); }
  .sidebar-nav button.active{ background:var(--brand-tint); color:var(--text); box-shadow:inset 2px 0 0 var(--brand); }
  .sidebar-nav .nav-icon{ width:15px; height:15px; display:inline-flex; align-items:center; justify-content:center; opacity:.85; flex-shrink:0; }
  
  .sidebar-user{ padding:14px; border-top:1px solid var(--line); }
  .perfil-link{ display:block; font-size:11.5px; color:var(--brand); cursor:pointer; margin:6px 0; text-decoration:underline; }
  .perfil-link:hover{ opacity:0.8; }
  .perfil-info{ padding:8px 10px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:13px; color:var(--text); }
  .sidebar-user .who{ font-size:12.5px; font-weight:600; }
  .sidebar-user .perfil{ font-size:11px; color:var(--brand); margin-top:1px; }
  .sidebar-user button{
    margin-top:10px; width:100%; background:var(--panel); border:1px solid var(--line);
    color:var(--text-dim); padding:7px; border-radius:var(--radius-sm); font-size:12px;
  }
  .sidebar-user button:hover{ border-color:#4a5266; color:var(--text); }
  
  main.content{ flex:1; padding:28px 32px; max-width:1240px; }
  
  /* ---------------------------- typography helpers ---------------------------- */
  
  h1{ font-size:20px; font-weight:700; letter-spacing:-0.01em; margin:0 0 4px; }
  h2{ font-size:14.5px; font-weight:700; margin:0 0 12px; }
  .subtitle{ color:var(--text-faint); font-size:12.5px; margin-bottom:22px; }
  
  /* ---------------------------- cards / panels ---------------------------- */
  
  .panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:18px; }
  .grid-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:10px; margin-bottom:22px; }
  .card{
    background:var(--panel-2); border:1px solid var(--line); border-top:3px solid var(--brand);
    border-radius:var(--radius-sm); padding:14px 16px;
  }
  .card .num{ font-family:var(--mono); font-size:26px; font-weight:700; color:var(--text); }
  .card .lbl{ color:var(--text); opacity:.72; font-size:11px; margin-top:5px; text-transform:uppercase; letter-spacing:.4px; }
  
  .progress-track{ height:8px; border-radius:99px; background:#262d3a; overflow:hidden; }
  .progress-track > div{ height:100%; background:linear-gradient(90deg, var(--brand-dark), var(--brand)); }
  
  /* ---------------------------- tables ---------------------------- */
  
  table{ width:100%; border-collapse:collapse; }
  th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); padding:8px 10px; border-bottom:1px solid var(--line); font-weight:600; }
  td{ padding:10px; border-bottom:1px solid var(--line-soft); font-size:13px; vertical-align:middle; }
  tr.rowlink{ cursor:pointer; }
  tr.rowlink:hover td{ background:var(--panel-hover); }
  
  /* ---------------------------- badges / semáforo ---------------------------- */
  
  .badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:500; white-space:nowrap; }
  .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .dot.dot-cinza{ background:var(--c-cinza); } .badge.b-cinza{ background:#6B728022; color:#B7BEC9; }
  .dot.dot-amarelo{ background:var(--c-amarelo); } .badge.b-amarelo{ background:#E8B23D22; color:#E8B23D; }
  .dot.dot-azul{ background:var(--c-azul); } .badge.b-azul{ background:#4C8DFF22; color:#8FB6FF; }
  .dot.dot-verde{ background:var(--c-verde); } .badge.b-verde{ background:#2FBE7922; color:#4FD494; }
  .dot.dot-vermelho{ background:var(--c-vermelho); } .badge.b-vermelho{ background:#EF535022; color:#FF8783; }
  .dot.dot-roxo{ background:var(--c-roxo); } .badge.b-roxo{ background:#B084F522; color:#CBAAFA; }
  
  /* ---------------------------- buttons ---------------------------- */
  
  .btn{ background:var(--panel-2); border:1px solid var(--line); color:var(--text); padding:8px 14px; border-radius:var(--radius-sm); font-size:13px; transition:border-color .15s, background .15s; }
  .btn:hover{ border-color:#454e60; }
  .btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
  .btn.primary:hover{ background:var(--brand-dark); }
  .btn.danger{ background:#3a2224; border-color:#5a2f32; color:#ff8783; }
  .btn.danger:hover{ border-color:var(--c-vermelho); }
  .btn.success{ background:#173a2a; border-color:#265943; color:#5adf9c; }
  .btn.ghost{ background:none; border:1px dashed var(--line); color:var(--text-faint); }
  .btn:disabled{ opacity:.35; cursor:not-allowed; }
  .btn.small{ padding:5px 10px; font-size:12px; }
  
  /* ---------------------------- workflow diagram (signature element) ---------------------------- */
  
  .flow-wrap{ display:flex; flex-wrap:wrap; gap:26px 18px; padding:8px 0 20px; align-items:flex-start; }
  .flow-col{ display:flex; flex-direction:column; gap:14px; }
  .flow-node{
    background:var(--panel-2); border:1px solid var(--line); border-left:4px solid var(--c-cinza);
    border-radius:var(--radius-sm); padding:11px 13px; min-width:190px; max-width:220px; cursor:pointer;
    transition:border-color .15s, transform .1s;
  }
  .flow-node:hover{ border-color:#4a5266; }
  .flow-node.selected{ outline:2px solid var(--brand); outline-offset:1px; }
  .flow-node .fn-name{ font-weight:600; font-size:13px; }
  .flow-node .fn-status{ font-size:11px; color:var(--text-faint); margin-top:4px; }
  .flow-node .fn-resp{ font-size:11px; color:var(--text-dim); margin-top:6px; }
  .flow-arrow{ color:var(--text-faint); font-size:18px; text-align:center; padding:0 4px; align-self:center; }
  
  /* ---------------------------- forms / modals ---------------------------- */
  
  .field{ margin-bottom:12px; }
  .field label{ display:block; font-size:12px; color:var(--text-faint); margin-bottom:5px; }
  .field input[type=text], .field input[type=date], .field input[type=password], .field select, .field textarea{
    width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
    padding:8px 10px; border-radius:var(--radius-sm); font-size:13px;
  }
  .field textarea{ min-height:60px; resize:vertical; }
  .row-inline{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .checkline{ display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--line-soft); }
  .checkline:last-child{ border-bottom:none; }
  .checkline.done{ color:var(--text-faint); text-decoration:line-through; }
  
  .modal-bg{ position:fixed; inset:0; background:#000a; display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
  .modal{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; width:100%; max-width:460px; max-height:86vh; overflow:auto; box-shadow:0 30px 70px -30px #000c; }
  .modal h3{ margin:0 0 14px; font-size:15px; }
  .modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
  
  .toast-wrap{ position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:200; }
  .toast{ background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--c-verde); padding:10px 14px; border-radius:var(--radius-sm); font-size:13px; box-shadow:0 4px 16px #0008; animation:toast-in .2s ease; }
  @keyframes toast-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
  
  .hist-item{ display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:12.5px; }
  .hist-item:last-child{ border-bottom:none; }
  .hist-time{ color:var(--text-faint); font-family:var(--mono); white-space:nowrap; min-width:130px; }
  .field-error{ color:#ff9d99; font-size:12px; min-height:16px; }
  
  .empty{ color:var(--text-faint); font-size:13px; padding:30px; text-align:center; border:1px dashed var(--line); border-radius:var(--radius); }
  .section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:10px; }
  .divider{ height:1px; background:var(--line); margin:16px 0; }
  
  .security-note{
    background:linear-gradient(90deg, #2a230f, #1f1c14); border:1px solid #4a3a1a; border-left:3px solid var(--c-amarelo);
    border-radius:var(--radius-sm); padding:12px 14px; font-size:12.5px; color:#e8d9ad; margin-bottom:18px; line-height:1.5;
  }
  
  /* ---------------------------- responsivo ---------------------------- */
  
  .sidebar-toggle{ display:none; }
  .sidebar-backdrop{ display:none; }
  
  /* notebooks / telas médias: só encolhe um pouco, sem virar gaveta */
  @media (max-width: 1100px){
    .sidebar{ width:210px; }
    main.content{ padding:24px; }
  }
  
  /* tablet / celular: sidebar vira gaveta com hambúrguer */
  @media (max-width: 860px){
    .sidebar-toggle{
      display:flex; align-items:center; justify-content:center;
      position:fixed; top:12px; left:12px; z-index:170;
      width:40px; height:40px; padding:0; border-radius:var(--radius-sm);
      background:var(--panel); border:1px solid var(--line); color:var(--text);
      font-size:18px; line-height:1; box-shadow:0 4px 14px #0006;
    }
    .sidebar-toggle:hover{ border-color:#4a5266; }
  
    #app-shell{ position:relative; }
  
    .sidebar{
      position:fixed; top:0; left:0; height:100vh; width:min(280px,82vw);
      flex-direction:column; flex-wrap:nowrap;
      transform:translateX(-100%);
      transition:transform .25s ease;
      z-index:160; box-shadow:0 0 40px #000a;
    }
    #app-shell.sidebar-open .sidebar{ transform:translateX(0); }
  
    .sidebar-nav{ display:block; overflow-y:auto; }
    .sidebar-nav button{ width:100%; padding:11px 12px; }
  
    .sidebar-backdrop{
      display:block; position:fixed; inset:0; background:#000a;
      opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:150;
    }
    #app-shell.sidebar-open .sidebar-backdrop{ opacity:1; pointer-events:auto; }
  
    main.content{ width:100%; padding:64px 16px 28px; max-width:100%; }
  
    /* tabelas: rolagem horizontal em vez de esmagar colunas */
    .panel{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .panel table{ min-width:640px; }
  
    .modal-actions{ flex-wrap:wrap; }
    .hist-time{ min-width:auto; }
  }
  
  /* celular pequeno */
  @media (max-width: 480px){
    .login-card{ padding:28px 20px; }
    main.content{ padding:60px 12px 24px; }
    .grid-cards{ grid-template-columns:repeat(2,1fr); }
    .modal-bg{ padding:0; }
    .modal{ max-width:100%; width:100%; height:100%; max-height:100vh; border-radius:0; }
    h1{ font-size:18px; }
  }