/* Plataforma de Logistica - CSS minimo, sem framework. */
*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0; padding:0; height:100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
               Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background: #f4f6f8;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.5;
}
a { color: #1f4e79; text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3 { margin: 0 0 12px; color: #1f2937; }
.muted { color: #6b7280; }

/* ------- topbar ------- */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  height:56px; padding: 0 20px;
  background:#1f4e79; color:#fff;
}
.brand { display:flex; align-items:center; gap:10px; color:#fff; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:6px;
  background:#fff; color:#1f4e79; font-weight:700;
}
.brand-name { font-weight: 600; font-size: 15px; }
.user-menu { display:flex; align-items:center; gap:12px; }
.user-name { font-size: 13px; }
.user-role { background:#e5e7eb; color:#1f2937; }

/* ------- shell ------- */
.shell { display:flex; min-height: calc(100vh - 56px - 36px); }
.sidebar {
  width: 220px; background:#fff; border-right:1px solid #e5e7eb;
  padding: 16px 0;
}
.sidebar nav { display:flex; flex-direction: column; }
.sidebar a {
  display:flex; align-items:center; gap:10px;
  padding: 8px 18px;
  color: #374151;
}
.sidebar a:hover { background:#f3f4f6; text-decoration:none; }
.sidebar a.active {
  background:#eef4fb; color:#1f4e79; font-weight:600;
  border-left: 3px solid #1f4e79; padding-left: 15px;
}
.sidebar a.disabled { color:#9ca3af; pointer-events:none; }
.sidebar .nav-group {
  font-size: 11px; text-transform: uppercase;
  color:#6b7280; padding: 14px 18px 4px;
  letter-spacing: .06em;
}
.sidebar .nav-group em { color:#9ca3af; font-style: normal; font-weight: 400; }
.sidebar .ico { width:18px; display:inline-block; text-align:center; }

.content { flex: 1; padding: 24px 28px; min-width: 0; }
.footbar {
  height:36px; display:flex; justify-content:space-between;
  align-items:center; padding: 0 20px;
  background:#fff; border-top:1px solid #e5e7eb;
  color:#6b7280; font-size: 12px;
}

/* ------- elements ------- */
.page-title { font-size: 22px; margin-bottom: 6px; }
.page-head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 16px; }

.card {
  background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  padding: 18px; margin-bottom: 16px;
}
.card-title { font-size: 16px; margin-bottom: 12px; }

.kpis { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; margin: 16px 0 20px; }
.kpi { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding: 14px; }
.kpi-label { font-size: 12px; text-transform: uppercase; color:#6b7280; letter-spacing:.04em; }
.kpi-value { font-size: 28px; font-weight: 700; margin-top: 4px; }
.kpi-hint  { font-size: 11px; color:#9ca3af; margin-top: 2px; }
.kpi-warn  { color:#b45309; }

.data-table { width:100%; border-collapse: collapse; }
.data-table th, .data-table td {
  padding: 10px 8px; border-bottom: 1px solid #e5e7eb; text-align: left;
}
.data-table th {
  background:#f9fafb; color:#374151;
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}
.data-table tr:hover td { background:#fafbfc; }

.badge {
  display:inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; text-transform: uppercase; letter-spacing:.04em;
  background:#e5e7eb; color:#374151;
}
.role-admin    { background:#fee2e2; color:#991b1b; }
.role-operator { background:#dbeafe; color:#1e3a8a; }
.role-viewer   { background:#e5e7eb; color:#374151; }
.badge-ok      { background:#dcfce7; color:#166534; }
.badge-off     { background:#fee2e2; color:#991b1b; }

/* ------- forms ------- */
.form { display:flex; flex-direction: column; gap: 14px; max-width: 520px; }
.form label { display:flex; flex-direction: column; gap: 4px; font-size: 13px; }
.form label.check { flex-direction: row; align-items: center; gap: 8px; }
.form input[type=text], .form input[type=email], .form input[type=password],
.form select, .form textarea, .login-card input {
  padding: 9px 11px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px;
  background: #fff;
}
.form input:focus, .form select:focus, .login-card input:focus { outline:2px solid #1f4e79; outline-offset:1px; }
.form-actions { display:flex; gap:10px; justify-content: flex-end; }

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.btn-primary { background:#1f4e79; color:#fff; }
.btn-primary:hover { background:#15406b; text-decoration:none; }
.btn-link { background: transparent; color:#1f4e79; padding: 4px 8px; }
.btn-block { width:100%; }

/* ------- flash ------- */
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 13px; }
.flash-success { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.flash-error   { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.flash-warning { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.flash-info    { background:#dbeafe; color:#1e3a8a; border:1px solid #93c5fd; }

/* ------- login page ------- */
.login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#1f4e79,#2e74b5);
  padding: 20px;
}
.login-card {
  background:#fff; padding: 32px; border-radius: 12px;
  width: 100%; max-width: 380px;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.login-title    { font-size: 24px; text-align:center; color:#1f4e79; margin-bottom: 4px; }
.login-subtitle { text-align:center; color:#6b7280; font-size: 13px; margin-bottom: 20px; }
.login-card form { display:flex; flex-direction:column; gap: 14px; }
.login-card label { display:flex; flex-direction:column; gap: 4px; font-size: 13px; }