/* ============================================================
   Rofe Distribuidora — Sistema de Suprimentos
   Custom CSS — Brand: Blue #1A4B8C | Red #C0392B | White #FFF
   ============================================================ */

:root {
  --rofe-blue: #1A4B8C;
  --rofe-blue-dark: #133a6e;
  --rofe-blue-light: #2563B8;
  --rofe-red: #C0392B;
  --rofe-red-dark: #a03020;
  --rofe-white: #FFFFFF;
  --rofe-bg: #F4F6F9;
  --rofe-border: #dee2e6;
  --rofe-text: #333333;
  --rofe-text-muted: #6c757d;
}

/* ── Body & Layout ── */
body {
  background-color: var(--rofe-bg);
  color: var(--rofe-text);
  font-family: 'Segoe UI', Arial, sans-serif;
}

.main-content {
  min-height: calc(100vh - 60px);
  padding-bottom: 40px;
}

/* ── Navbar ── */
.rofe-navbar {
  background-color: var(--rofe-blue) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  min-height: 60px;
}

.rofe-navbar .navbar-brand {
  color: #fff !important;
  font-size: 1rem;
}

.rofe-logo-icon {
  font-size: 1.6rem;
  color: #fff;
}

.rofe-subtitle {
  font-size: 0.65rem;
  opacity: 0.75;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.rofe-navbar .nav-link {
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.rofe-navbar .nav-link:hover,
.rofe-navbar .nav-link.active {
  background: rgba(255,255,255,0.15);
  color: #fff !important;
}

.rofe-badge-tipo {
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
}

/* ── Page Titles ── */
.page-title {
  color: var(--rofe-blue);
  font-weight: 700;
  font-size: 1.5rem;
}

/* ── Buttons ── */
.btn-rofe-primary {
  background-color: var(--rofe-blue);
  border-color: var(--rofe-blue);
  color: #fff;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
}

.btn-rofe-primary:hover,
.btn-rofe-primary:focus {
  background-color: var(--rofe-blue-dark);
  border-color: var(--rofe-blue-dark);
  color: #fff;
  transform: translateY(-1px);
}

.btn-action-accept {
  background-color: #27AE60;
  border-color: #27AE60;
  color: #fff;
  font-weight: 600;
  transition: background 0.2s, transform 0.1s;
}

.btn-action-accept:hover {
  background-color: #1e8449;
  border-color: #1e8449;
  color: #fff;
  transform: translateY(-1px);
}

.btn-action-reject {
  background-color: var(--rofe-red);
  border-color: var(--rofe-red);
  color: #fff;
  font-weight: 600;
  transition: background 0.2s, transform 0.1s;
}

.btn-action-reject:hover {
  background-color: var(--rofe-red-dark);
  border-color: var(--rofe-red-dark);
  color: #fff;
  transform: translateY(-1px);
}

.btn-action-assume {
  background-color: #2980B9;
  border-color: #2980B9;
  color: #fff;
  font-weight: 600;
  transition: background 0.2s, transform 0.1s;
}

.btn-action-assume:hover {
  background-color: #1a6fa3;
  border-color: #1a6fa3;
  color: #fff;
  transform: translateY(-1px);
}

/* ── Login Page ── */
.login-page {
  background: linear-gradient(135deg, var(--rofe-blue) 0%, var(--rofe-blue-dark) 60%, #0d2a52 100%);
}

.login-card {
  border-radius: 12px !important;
  overflow: hidden;
}

.login-header {
  background: linear-gradient(135deg, var(--rofe-blue), var(--rofe-blue-dark));
  color: #fff;
}

.login-logo {
  color: rgba(255,255,255,0.9);
}

/* ── Cards ── */
.card {
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.07);
}

.dashboard-card {
  transition: box-shadow 0.2s, transform 0.2s;
}

.dashboard-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
  transform: translateY(-2px);
}

.dashboard-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Status Badges ── */
.status-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.status-aguardando_gestor        { background: #FFF3CD; color: #856404; }
.status-aceito_gestor            { background: #D1ECF1; color: #0C5460; }
.status-em_cotacao               { background: #CCE5FF; color: #004085; }
.status-aguardando_aprovacao_gestor { background: #FFF3CD; color: #856404; }
.status-aprovado_gestor          { background: #D4EDDA; color: #155724; }
.status-aguardando_controller    { background: #E2D9F3; color: #4A235A; }
.status-aprovado_controller      { background: #D4EDDA; color: #155724; }
.status-retorno_controller       { background: #FFF3CD; color: #856404; }
.status-retorno_gestor           { background: #FFF3CD; color: #856404; }
.status-retorno_ceo              { background: #FFF3CD; color: #856404; }
.status-aguardando_ceo           { background: #F8D7DA; color: #721C24; }
.status-aprovado_ceo             { background: #D4EDDA; color: #155724; }
.status-em_processamento         { background: #D1ECF1; color: #0C5460; }
.status-concluido                { background: #D4EDDA; color: #155724; }
.status-cancelado                { background: #F8D7DA; color: #721C24; }
.status-reprovado                { background: #F8D7DA; color: #721C24; }

/* ── Queue Table ── */
.queue-table {
  font-size: 0.875rem;
}

.queue-table thead th {
  background-color: #f8f9fa;
  border-bottom: 2px solid var(--rofe-border);
  color: var(--rofe-text-muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 14px;
  white-space: nowrap;
}

.queue-table tbody tr {
  transition: background 0.15s;
}

.queue-table tbody tr:hover {
  background-color: rgba(26, 75, 140, 0.04);
}

.queue-table tbody td {
  padding: 10px 14px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* ── File Upload Zone ── */
.upload-zone {
  border: 2px dashed var(--rofe-border);
  border-radius: 10px;
  background: #fafbfc;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
  overflow: hidden;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--rofe-blue);
  background: rgba(26,75,140,0.04);
}

.upload-zone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.upload-zone-content {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.upload-zone .upload-zone-content i {
  color: var(--rofe-blue);
  opacity: 0.5;
}

#file-list .file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--rofe-border);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 0.85rem;
}

#file-list .file-item .remove-file {
  margin-left: auto;
  cursor: pointer;
  color: var(--rofe-red);
  border: none;
  background: none;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

/* ── Timeline ── */
.timeline {
  position: relative;
  padding-left: 24px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--rofe-blue), rgba(26,75,140,0.1));
}

.timeline-item {
  position: relative;
  margin-bottom: 20px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--rofe-blue);
}

.timeline-content {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,0.06);
}

/* ── Forms ── */
.form-control:focus,
.form-select:focus {
  border-color: var(--rofe-blue);
  box-shadow: 0 0 0 0.2rem rgba(26,75,140,0.15);
}

.form-label {
  font-size: 0.875rem;
}

/* ── Items Table in nova.html ── */
#items-table {
  border-collapse: separate;
  border-spacing: 0;
}

#items-table thead th {
  background: var(--rofe-bg);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--rofe-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#items-table .item-row td {
  vertical-align: middle;
}

/* ── Select2 Overrides ── */
.select2-container--bootstrap-5 .select2-selection {
  border-color: var(--rofe-border);
}

.select2-container--bootstrap-5 .select2-selection:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
  border-color: var(--rofe-blue);
  box-shadow: 0 0 0 0.2rem rgba(26,75,140,0.15);
}

/* ── Alerts ── */
.alert {
  border-radius: 8px;
  border: none;
}

/* ── Pagination ── */
.page-link {
  color: var(--rofe-blue);
}

.page-item.active .page-link {
  background-color: var(--rofe-blue);
  border-color: var(--rofe-blue);
}

.page-link:hover {
  color: var(--rofe-blue-dark);
}

/* ── Dropdown ── */
.dropdown-menu {
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  border-radius: 10px;
}

.dropdown-item:hover {
  background-color: rgba(26,75,140,0.07);
  color: var(--rofe-blue);
}

/* ── Card headers ── */
.card-header {
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

/* ── Responsive Adjustments ── */
@media (max-width: 768px) {
  .page-title {
    font-size: 1.2rem;
  }

  .queue-table thead th,
  .queue-table tbody td {
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  .dashboard-card-icon {
    display: none;
  }

  .timeline {
    padding-left: 16px;
  }

  .rofe-navbar .navbar-brand .rofe-subtitle {
    display: none;
  }
}

@media (max-width: 576px) {
  .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  .btn-lg {
    font-size: 0.95rem;
    padding: 0.5rem 1.2rem;
  }
}

/* ── Scrollbar (Webkit) ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--rofe-bg);
}

::-webkit-scrollbar-thumb {
  background: rgba(26,75,140,0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(26,75,140,0.5);
}

/* ── Profile Avatar ── */
.profile-avatar i {
  color: var(--rofe-blue);
  opacity: 0.7;
}

/* ── Cursor ── */
.cursor-pointer {
  cursor: pointer;
}