/* ============================================================
   RecifeMotoParts — Premium CRM Design System
   Identidade Visual: Vermelho Profundo + Dourado + Escuro
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Variáveis ── */
:root {
  --rmp-red:        #c0392b;
  --rmp-red-dark:   #96281b;
  --rmp-red-light:  #e74c3c;
  --rmp-gold:       #d4a017;
  --rmp-gold-light: #f1c40f;
  --rmp-dark:       #1a1a2e;
  --rmp-dark-2:     #16213e;
  --rmp-dark-3:     #0f3460;
  --rmp-sidebar-bg: #1e1e2e;
  --rmp-shadow-sm:  0 2px 8px rgba(0,0,0,.08);
  --rmp-shadow-md:  0 4px 20px rgba(0,0,0,.12);
  --rmp-shadow-lg:  0 8px 40px rgba(0,0,0,.18);
  --rmp-radius:     12px;
  --rmp-radius-sm:  8px;
  --rmp-transition: all .22s cubic-bezier(.4,0,.2,1);
}

/* ── Tipografia global ── */
body, .wrapper { font-family: 'Inter', sans-serif !important; }
h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif !important; font-weight: 700; }

/* ── Sidebar premium ── */
.main-sidebar {
  background: linear-gradient(180deg, var(--rmp-sidebar-bg) 0%, #12122a 100%) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,.35) !important;
}
.brand-link {
  background: linear-gradient(135deg, var(--rmp-red-dark) 0%, var(--rmp-red) 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  padding: 14px 16px !important;
}
.brand-link .brand-text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  letter-spacing: -.3px;
}
.brand-link .brand-text b { color: var(--rmp-gold-light) !important; }

/* Itens do menu */
.nav-sidebar .nav-item > .nav-link {
  border-radius: 8px !important;
  margin: 1px 8px !important;
  padding: 9px 12px !important;
  font-weight: 500 !important;
  font-size: .875rem !important;
  color: rgba(255,255,255,.72) !important;
  transition: var(--rmp-transition) !important;
}
.nav-sidebar .nav-item > .nav-link:hover {
  background: rgba(192,57,43,.25) !important;
  color: #fff !important;
  transform: translateX(3px);
}
.nav-sidebar .nav-item > .nav-link.active {
  background: linear-gradient(135deg, var(--rmp-red) 0%, var(--rmp-red-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(192,57,43,.4) !important;
}
.nav-sidebar .nav-item > .nav-link .nav-icon {
  color: rgba(255,255,255,.55) !important;
  transition: var(--rmp-transition) !important;
}
.nav-sidebar .nav-item > .nav-link:hover .nav-icon,
.nav-sidebar .nav-item > .nav-link.active .nav-icon {
  color: #fff !important;
}

/* Headers do menu */
.nav-header {
  font-family: 'Inter', sans-serif !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: rgba(255,255,255,.3) !important;
  padding: 14px 20px 4px !important;
}

/* ── Topnav ── */
.main-header.navbar {
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  border-bottom: 1px solid rgba(0,0,0,.05) !important;
  padding: 0 16px !important;
}

/* ── Cards principais ── */
.rmp-card {
  border: none !important;
  border-radius: var(--rmp-radius) !important;
  box-shadow: var(--rmp-shadow-md) !important;
  transition: var(--rmp-transition) !important;
  overflow: visible !important;
}
.rmp-card:hover { box-shadow: var(--rmp-shadow-lg) !important; }

.rmp-card-header-gradient {
  background: linear-gradient(135deg, var(--rmp-red) 0%, var(--rmp-red-dark) 100%) !important;
  border: none !important;
  padding: 16px 20px !important;
  border-radius: var(--rmp-radius) var(--rmp-radius) 0 0 !important;
}

/* Cards do AdminLTE padrão */
.card {
  border-radius: var(--rmp-radius) !important;
  box-shadow: var(--rmp-shadow-sm) !important;
  border: none !important;
  transition: var(--rmp-transition) !important;
  overflow: visible !important;
}
.card:hover { box-shadow: var(--rmp-shadow-md) !important; }

.card-header {
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  font-weight: 600 !important;
}

.card-outline.card-danger { border-top: 3px solid var(--rmp-red) !important; }

/* ── Métricas do Dashboard ── */
.rmp-metric-card {
  border-radius: var(--rmp-radius) !important;
  padding: 20px 16px;
  text-align: center;
  cursor: default;
  transition: var(--rmp-transition);
  box-shadow: var(--rmp-shadow-md);
  position: relative;
  overflow: hidden;
}
.rmp-metric-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}
.rmp-metric-card:hover { transform: translateY(-3px); box-shadow: var(--rmp-shadow-lg); }

.rmp-metric-icon { font-size: 1.8rem; margin-bottom: 8px; opacity: .9; }
.rmp-metric-value { font-size: 2rem; font-weight: 800; line-height: 1; }
.rmp-metric-label { font-size: .78rem; font-weight: 500; opacity: .85; margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }

.rmp-card-gold  { background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%); color: #fff; }
.rmp-card-dark  { background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%); color: #fff; }
.rmp-card-blue  { background: linear-gradient(135deg, #2980b9 0%, #1a5276 100%); color: #fff; }
.rmp-card-green { background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%); color: #fff; }

/* Small boxes do AdminLTE melhorados */
.small-box {
  border-radius: var(--rmp-radius) !important;
  box-shadow: var(--rmp-shadow-md) !important;
  transition: var(--rmp-transition) !important;
  overflow: hidden !important;
}
.small-box:hover { transform: translateY(-2px); box-shadow: var(--rmp-shadow-lg) !important; }
.small-box h3 { font-weight: 800 !important; }
.small-box .small-box-footer { font-weight: 500 !important; }

/* ── Tabelas ── */
.rmp-table { border-collapse: separate; border-spacing: 0; }
.rmp-table thead th {
  background: #f8f9fa;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #6c757d;
  padding: 14px 16px;
  border: none;
}
.rmp-table tbody tr {
  transition: var(--rmp-transition);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.rmp-table tbody tr:hover { background: rgba(192,57,43,.03); }
.rmp-table tbody td { padding: 14px 16px; vertical-align: middle; border: none; }

/* Tabelas padrão do Laravel AdminLTE */
.table thead th {
  font-weight: 600 !important;
  font-size: .8rem !important;
  letter-spacing: .3px !important;
  color: #495057 !important;
}
.table-hover tbody tr { transition: var(--rmp-transition); }

/* ── Avatar de usuário ── */
.rmp-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; color: #fff;
}
.rmp-avatar-admin         { background: linear-gradient(135deg, #d4a017, #b8860b); }
.rmp-avatar-coordenador   { background: linear-gradient(135deg, #2980b9, #1a5276); }
.rmp-avatar-recepcionista { background: linear-gradient(135deg, #27ae60, #1e8449); }
.rmp-avatar-sem-perfil    { background: #6c757d; }

/* ── Badges de role ── */
.bg-rmp-gold { background: linear-gradient(135deg, #d4a017, #b8860b) !important; }

/* ── Cards de seleção de role ── */
.rmp-role-card {
  display: block;
  border: 2px solid #e9ecef;
  border-radius: var(--rmp-radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  transition: var(--rmp-transition);
  margin: 0;
  background: #fff;
}
.rmp-role-card:hover { border-color: var(--rmp-red); background: rgba(192,57,43,.03); }
.rmp-role-card.selected { border-color: var(--rmp-red) !important; background: rgba(192,57,43,.06) !important; }
.rmp-role-card .rmp-check-icon { color: #dee2e6; transition: var(--rmp-transition); }
.rmp-role-card.selected .rmp-check-icon { color: var(--rmp-red); }

.rmp-role-gold.selected   { border-color: #d4a017 !important; background: rgba(212,160,23,.06) !important; }
.rmp-role-gold.selected .rmp-check-icon { color: #d4a017; }
.rmp-role-dark.selected   { border-color: #2c3e50 !important; background: rgba(44,62,80,.06) !important; }
.rmp-role-dark.selected .rmp-check-icon { color: #2c3e50; }
.rmp-role-blue.selected   { border-color: #2980b9 !important; background: rgba(41,128,185,.06) !important; }
.rmp-role-blue.selected .rmp-check-icon { color: #2980b9; }
.rmp-role-green.selected  { border-color: #27ae60 !important; background: rgba(39,174,96,.06) !important; }
.rmp-role-green.selected .rmp-check-icon { color: #27ae60; }

/* ── Botão principal RMP ── */
.btn-rmp {
  background: linear-gradient(135deg, var(--rmp-red) 0%, var(--rmp-red-dark) 100%);
  color: #fff !important;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  padding: 10px 22px;
  box-shadow: 0 4px 12px rgba(192,57,43,.35);
  transition: var(--rmp-transition);
  letter-spacing: .2px;
}
.btn-rmp:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(192,57,43,.45);
  color: #fff !important;
  filter: brightness(1.08);
}
.btn-rmp:active { transform: translateY(0); }

/* ── Inputs ── */
.rmp-input, .form-control {
  border-radius: 8px !important;
  border: 1.5px solid #dee2e6 !important;
  padding: 10px 14px !important;
  font-size: .9rem !important;
  transition: var(--rmp-transition) !important;
}
.rmp-input:focus, .form-control:focus {
  border-color: var(--rmp-red) !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,.12) !important;
}

/* ── Labels ── */
.rmp-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .3px;
  color: #495057;
  margin-bottom: 6px;
}

/* ── Content header melhorado ── */
.content-header {
  padding: 20px 24px 12px !important;
  background: transparent !important;
}
.content-header h1 {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  letter-spacing: -.3px;
}

/* ── Paginação ── */
.pagination .page-item .page-link {
  border-radius: 6px !important;
  margin: 0 2px;
  border: 1.5px solid #dee2e6;
  font-weight: 500;
  transition: var(--rmp-transition);
}
.pagination .page-item.active .page-link {
  background: var(--rmp-red) !important;
  border-color: var(--rmp-red) !important;
  box-shadow: 0 2px 8px rgba(192,57,43,.35);
}
.pagination .page-item .page-link:hover { border-color: var(--rmp-red); color: var(--rmp-red); }

/* ── Alertas ── */
.alert {
  border-radius: var(--rmp-radius-sm) !important;
  border-left: 4px solid !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}
.alert-success { border-left-color: #27ae60 !important; background: rgba(39,174,96,.08) !important; }
.alert-danger  { border-left-color: var(--rmp-red) !important; background: rgba(192,57,43,.08) !important; }
.alert-warning { border-left-color: #f39c12 !important; background: rgba(243,156,18,.08) !important; }

/* ── Info boxes ── */
.info-box {
  border-radius: var(--rmp-radius) !important;
  box-shadow: var(--rmp-shadow-md) !important;
}

/* ── Loading bar (Pace) ── */
.pace .pace-progress { background: var(--rmp-gold-light) !important; }

/* ── Scrollbar sidebar ── */
.os-scrollbar-track { background: transparent !important; }
.os-scrollbar-handle { background: rgba(255,255,255,.15) !important; border-radius: 4px !important; }

/* ── Preloader ── */
#loading-overlay {
  background: linear-gradient(135deg, var(--rmp-dark) 0%, var(--rmp-red-dark) 100%);
}

/* ── Rodapé ── */
.main-footer {
  background: #f8f9fa !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
  font-size: .8rem !important;
  color: #6c757d !important;
  padding: 12px 24px !important;
}

/* ── Select2 ── */
.select2-container--default .select2-selection--single {
  border-radius: 8px !important;
  border: 1.5px solid #dee2e6 !important;
  height: 42px !important;
  padding: 5px 10px !important;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--rmp-red) !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,.12) !important;
}
.select2-container--default .select2-results__option--highlighted {
  background: var(--rmp-red) !important;
}

/* ── Badges melhorados ── */
.badge { font-weight: 600 !important; letter-spacing: .2px !important; }

/* ── WhatsApp banner pós-venda ── */
.rmp-whatsapp-banner {
  background: linear-gradient(135deg, #128C7E 0%, #075E54 100%);
  border: none;
  border-radius: var(--rmp-radius) !important;
  box-shadow: 0 6px 24px rgba(18,140,126,.35);
}
.rmp-wa-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #fff;
}
.rmp-msg-preview {
  background: rgba(0,0,0,.2);
  color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: .8rem;
  white-space: pre-wrap;
  font-family: 'Inter', sans-serif;
  border: none;
  max-height: 240px;
  overflow-y: auto;
}
@keyframes rmpPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.01); box-shadow: 0 8px 32px rgba(18,140,126,.5); }
}

/* ── CEP auto-preenchimento ── */
@keyframes rmpFill {
  0%   { background-color: rgba(39,174,96,.15); }
  100% { background-color: transparent; }
}
.rmp-filled { animation: rmpFill 1.2s ease-out; }

/* ── Tabelas — overflow e largura ── */

/* Garante scroll horizontal em tabelas dentro de cards */
.card .table-responsive,
.rmp-card .table-responsive,
.card-body.table-responsive {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* Impede quebra de linha em headers */
.table thead th {
  white-space: nowrap;
}

/* Coluna de ações nunca quebra */
.table th:last-child,
.table td:last-child {
  white-space: nowrap;
}

/* Largura mínima garante todas as colunas visíveis */
.table-responsive > .table {
  min-width: 640px;
}

/* Card-outline mantém borda superior colorida */
.card.card-outline.card-danger {
  border-top: 3px solid var(--rmp-red) !important;
}

/* ── Responsivo ── */
@media (max-width: 767px) {
  .rmp-metric-card { margin-bottom: 12px; }
  .content-header h1 { font-size: 1.3rem !important; }
  .table-responsive > .table { min-width: 500px; }
}