:root{
  --mcs-blue:#017FF0;
  --mcs-gray:#747373;
  --lupsta-blue:#2E66AF;
  --lupsta-green:#64A62F;
  --dark:#101A26;
  --dark-2:#16212f;
  --bg:#F3F5F8;
  --card:#FFFFFF;
  --text:#1C2733;
  --text-mute:#6B7684;
  --border:#E4E8EE;
  --radius:12px;
  --ok:#1E9E5A;
  --ok-bg:#E7F8EF;
  --info:#0C7BD6;
  --info-bg:#E7F3FD;
  --warn:#C77E12;
  --warn-bg:#FDF2E2;
  --danger:#D64545;
  --danger-bg:#FCEAEA;
}

[data-theme="escuro"]{
  --bg:#0E141C;
  --card:#182231;
  --text:#E7ECF2;
  --text-mute:#93A1B4;
  --border:#2A3646;
  --ok-bg:#123322;
  --info-bg:#122A3D;
  --warn-bg:#3A2C10;
  --danger-bg:#3A1616;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Segoe UI', Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:background .15s ease, color .15s ease;
}
a{ text-decoration:none; color:inherit; }

.app-shell{
  display:flex;
  min-height:100vh;
}

/* ---------------- Sidebar ---------------- */
.sidebar{
  width:250px;
  flex-shrink:0;
  background:linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
  color:#fff;
  padding:22px 16px 28px;
  display:flex;
  flex-direction:column;
}
.sidebar-brand{ text-align:center; margin-bottom:26px; }
.brand-logos{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#fff; border-radius:10px; padding:10px 8px;
}
.logo-mcs{ height:34px; width:auto; }
.logo-lupsta{ height:38px; width:auto; }
.brand-plus{ color:#c9ced6; font-weight:600; font-size:14px; }
.brand-caption{
  margin-top:10px; font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:#9AA6B4;
}

.nav{ display:flex; flex-direction:column; gap:4px; }
.nav-group{ margin-top:18px; }
.nav-group-title{
  font-size:11px; text-transform:uppercase; letter-spacing:1px;
  font-weight:700; padding:6px 12px; color:#8996A6;
}
.nav-group-title.company-mcs{ color:#5FB3FF; }
.nav-group-title.company-lupsta{ color:#8FCB63; }

.nav-link{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:8px; font-size:14px;
  color:#D6DCE4; transition:background .15s ease;
}
.nav-link:hover{ background:rgba(255,255,255,.06); }
.nav-link.active{ background:rgba(255,255,255,.12); color:#fff; font-weight:600; }
.nav-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dot-neutral{ background:#8996A6; }
.dot-mcs{ background:var(--mcs-blue); }
.dot-lupsta{ background:var(--lupsta-green); }
.dot-danger{ background:#F06868; }
.nav-cta{
  margin-top:8px; background:rgba(255,255,255,.08);
  border:1px dashed rgba(255,255,255,.3); font-weight:600;
}
.nav-alert{
  background:rgba(214,69,69,.16); color:#FFAFAF; font-weight:600;
}
.nav-alert:hover{ background:rgba(214,69,69,.26); }
.nav-report{
  margin-top:4px; background:rgba(100,166,47,.18); color:#B7E39A; font-weight:600;
}
.nav-report:hover{ background:rgba(100,166,47,.28); }

.theme-toggle{
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#D6DCE4; font-size:13px; font-weight:600;
  cursor:pointer; width:100%;
}
.theme-toggle:hover{ background:rgba(255,255,255,.12); }

/* ---------------- Content ---------------- */
.content{ flex:1; padding:26px 32px 48px; max-width:1400px; }

.flash-wrap{ margin-bottom:18px; }
.flash{ padding:10px 14px; border-radius:8px; margin-bottom:8px; font-size:14px; font-weight:500; }
.flash-success{ background:var(--ok-bg); color:var(--ok); }
.flash-danger{ background:var(--danger-bg); color:var(--danger); }

.page-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:22px; flex-wrap:wrap; gap:12px;
}
.page-header h1{ font-size:22px; margin:0; }
.page-header p{ margin:4px 0 0; color:var(--text-mute); font-size:13.5px; }

.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:8px; font-size:14px; font-weight:600;
  border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--dark); color:#fff; }
.btn-primary:hover{ background:#000; }
.btn-outline{ background:var(--card); border-color:var(--border); color:var(--text); }
.btn-outline:hover{ border-color:#c7cdd6; }
.btn-danger{ background:var(--danger-bg); color:var(--danger); }
.btn-sm{ padding:5px 10px; font-size:12.5px; }

/* ---------------- Dashboard cards ---------------- */
.summary-row{ display:flex; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.summary-card{
  flex:1; min-width:180px; background:var(--card); border-radius:var(--radius);
  padding:18px 20px; border:1px solid var(--border);
}
.summary-card .num{ font-size:28px; font-weight:700; }
.summary-card .label{ font-size:13px; color:var(--text-mute); margin-top:2px; }

.company-block{
  background:var(--card); border-radius:var(--radius); border:1px solid var(--border);
  margin-bottom:22px; overflow:hidden;
}
.company-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; color:#fff;
}
.company-header.mcs{ background:linear-gradient(90deg, var(--mcs-blue), var(--mcs-gray)); }
.company-header.lupsta{ background:linear-gradient(90deg, var(--lupsta-blue), var(--lupsta-green)); }
.company-header h2{ margin:0; font-size:16px; }
.company-header .total-pill{
  background:rgba(255,255,255,.22); padding:4px 12px; border-radius:20px; font-size:13px; font-weight:600;
}

.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:14px; padding:18px 20px; }
.cat-card{ border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.cat-card h3{ margin:0 0 10px; font-size:14.5px; }
.cat-card-link{ color:inherit; display:block; }
.cat-total{ font-size:22px; font-weight:700; margin-bottom:2px; }
.cat-status-list{ display:flex; flex-direction:column; gap:4px; margin-top:8px; border-top:1px solid var(--border); padding-top:8px; }
.cat-status-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:12.5px; color:var(--text); padding:2px 0;
}
.cat-status-row b{ font-size:13px; }
.badge-sm{ font-size:11px; padding:2px 8px; }

.status-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px;
}
.status-chip{
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; display:flex; justify-content:space-between; align-items:center;
}
.status-chip .n{ font-weight:700; font-size:16px; }

/* ---------------- Badges ---------------- */
.badge{ padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap; }
.badge-ok{ background:var(--ok-bg); color:var(--ok); }
.badge-info{ background:var(--info-bg); color:var(--info); }
.badge-warn{ background:var(--warn-bg); color:var(--warn); }
.badge-danger{ background:var(--danger-bg); color:var(--danger); }

/* ---------------- Filters / table ---------------- */
.filter-bar{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;
  background:var(--card); padding:14px 16px; border-radius:var(--radius); border:1px solid var(--border);
}
.filter-bar select, .filter-bar input[type=text]{
  padding:8px 10px; border-radius:8px; border:1px solid var(--border); font-size:13.5px; background:var(--card); color:var(--text);
}
.filter-bar input[type=text]{ flex:1; min-width:180px; }

.table-wrap{ background:var(--card); border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; }
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
thead th{
  text-align:left; padding:12px 14px; background:var(--bg); color:var(--text-mute);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border);
}
tbody td{ padding:11px 14px; border-bottom:1px solid var(--border); }
tbody tr:hover{ background:var(--bg); }
.mono{ font-family:'Consolas', monospace; font-size:12.5px; color:var(--text-mute); }
.tag-empresa{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; }
.tag-empresa.MCS{ background:#E7F3FD; color:var(--mcs-blue); }
.tag-empresa.Lupsta{ background:#EAF4E2; color:var(--lupsta-green); }
.actions-cell{ display:flex; gap:8px; }
.empty-state{ padding:50px 20px; text-align:center; color:var(--text-mute); }

/* ---------------- Form ---------------- */
.form-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 28px; max-width:760px;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field.full{ grid-column:1 / -1; }
.form-field label{ font-size:13px; font-weight:600; color:var(--text-mute); }
.form-field input, .form-field select, .form-field textarea{
  padding:10px 12px; border-radius:8px; border:1px solid var(--border); font-size:14px; font-family:inherit;
}
.form-field textarea{ resize:vertical; min-height:70px; }
.form-actions{ display:flex; gap:10px; margin-top:22px; }

.history-box{ margin-top:24px; }
.history-box h3{ font-size:14px; margin-bottom:10px; }
.history-item{
  padding:10px 14px; border:1px solid var(--border); border-radius:8px; margin-bottom:8px; font-size:13px;
}
.history-item .when{ color:var(--text-mute); font-size:12px; }

/* ---------------- Upload / anexos ---------------- */
.upload-box{
  border:1.5px dashed var(--border); border-radius:10px; padding:16px;
  background:var(--bg); display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.file-pill{
  display:inline-flex; align-items:center; gap:8px; background:var(--ok-bg); color:var(--ok);
  padding:6px 12px; border-radius:20px; font-size:12.5px; font-weight:600;
}
.file-pill.pending{ background:var(--warn-bg); color:var(--warn); }

/* ---------------- Item picker (envio / manutenção) ---------------- */
.picker-toolbar{ display:flex; gap:10px; margin-bottom:10px; align-items:center; flex-wrap:wrap; }
.picker-toolbar input[type=text]{
  flex:1; min-width:200px; padding:9px 12px; border-radius:8px; border:1px solid var(--border); font-size:13.5px;
}
.picker-box{
  max-height:340px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; background:var(--card);
}
.picker-row{
  display:flex; align-items:center; gap:12px; padding:9px 14px; border-bottom:1px solid var(--border); font-size:13.5px;
}
.picker-row:last-child{ border-bottom:none; }
.picker-row:hover{ background:var(--bg); }
.picker-row .p-modelo{ font-weight:600; flex:1; }
.picker-row .p-meta{ color:var(--text-mute); font-size:12px; }
.picker-count{ font-size:13px; color:var(--text-mute); margin-top:8px; }

/* ---------------- Timeline / detail cards ---------------- */
.detail-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 26px; margin-bottom:18px;
}
.detail-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:14px; }
.detail-field .k{ font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-mute); margin-bottom:3px; }
.detail-field .v{ font-size:14.5px; font-weight:600; }

.doc-card{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:10px; background:var(--card);
}
.doc-card .doc-info{ display:flex; align-items:center; gap:10px; }
.doc-icon{
  width:36px; height:36px; border-radius:8px; background:var(--info-bg); color:var(--info);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;
}

.tabs-mini{ display:flex; gap:8px; margin-bottom:16px; }
.tabs-mini a{
  padding:7px 14px; border-radius:8px; font-size:13px; font-weight:600; color:var(--text-mute);
  background:var(--card); border:1px solid var(--border);
}
.tabs-mini a.active{ background:var(--dark); color:#fff; border-color:var(--dark); }
.conclude-form{ display:flex; gap:6px; align-items:center; }

/* ---------------- Login com Microsoft ---------------- */
.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:24px;
}
.login-card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:40px 36px; max-width:420px; width:100%; text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,.08);
}
.login-card h1{ font-size:19px; margin:0 0 8px; }
.login-card p{ color:var(--text-mute); font-size:14px; margin-bottom:22px; }
.btn-microsoft{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  width:100%; padding:12px 18px; border-radius:8px; border:1px solid var(--border);
  background:var(--card); color:var(--text); font-weight:600; font-size:14.5px;
}
.btn-microsoft:hover{ background:var(--bg); }
.setup-steps{ padding-left:20px; font-size:13.5px; line-height:1.7; }
.setup-steps li{ margin-bottom:14px; }
.code-box{
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:10px 12px; margin-top:6px; font-family:'Consolas', monospace; font-size:12px;
  white-space:pre-wrap; word-break:break-all;
}
.user-box{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; margin-bottom:10px; border-radius:8px; background:rgba(255,255,255,.06);
}
.user-box .u-name{ font-size:13px; font-weight:600; color:#fff; }
.user-box .u-role{ font-size:10.5px; color:#9AA6B4; text-transform:uppercase; letter-spacing:.5px; }
.user-box a{ color:#9AA6B4; font-size:12px; }
.user-box a:hover{ color:#fff; }

@media (max-width: 860px){
  .app-shell{ flex-direction:column; }
  .sidebar{ width:100%; }
  .content{ padding:18px; }
  .form-grid{ grid-template-columns:1fr; }
}