/* S4bit Design System v2 — nao editar sem atualizar a secao de tokens */
/* Ativado via ?tema=v2 | Escopado sob body.s4b-v2 */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* --- Brand (blue scale) --- */
  --s4b-primary-50:  #EFF6FF;
  --s4b-primary-100: #DBEAFE;
  --s4b-primary-200: #BFDBFE;
  --s4b-primary-300: #93C5FD;
  --s4b-primary-400: #60A5FA;
  --s4b-primary-500: #3B82F6;
  --s4b-primary-600: #2563EB;
  --s4b-primary-700: #1D4ED8;
  --s4b-primary-800: #1E40AF;
  --s4b-primary-900: #1E3A8A;

  /* --- Accent (green — legado) --- */
  --s4b-accent-500: #10B981;
  --s4b-accent-600: #059669;

  /* --- Semantic --- */
  --s4b-success: #10B981;
  --s4b-warning: #F59E0B;
  --s4b-danger:  #EF4444;
  --s4b-info:    #3B82F6;

  /* --- Neutral --- */
  --s4b-neutral-50:  #F9FAFB;
  --s4b-neutral-100: #F3F4F6;
  --s4b-neutral-200: #E5E7EB;
  --s4b-neutral-300: #D1D5DB;
  --s4b-neutral-400: #9CA3AF;
  --s4b-neutral-500: #6B7280;
  --s4b-neutral-600: #4B5563;
  --s4b-neutral-700: #374151;
  --s4b-neutral-800: #1F2937;
  --s4b-neutral-900: #111827;

  /* --- Surface --- */
  --s4b-bg-page:    #F1F5F9;
  --s4b-bg-card:    #FFFFFF;
  --s4b-bg-sidebar: #FFFFFF;
  --s4b-bg-topbar:  #FFFFFF;

  /* --- Text --- */
  --s4b-text-primary:   #111827;
  --s4b-text-secondary: #4B5563;
  --s4b-text-muted:     #9CA3AF;
  --s4b-text-inverse:   #FFFFFF;

  /* --- Border --- */
  --s4b-border-default: #E5E7EB;
  --s4b-border-hover:   #D1D5DB;
  --s4b-border-focus:   var(--s4b-primary-500);

  /* --- Typography --- */
  --s4b-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --s4b-text-xs:   0.75rem;
  --s4b-text-sm:   0.875rem;
  --s4b-text-base: 1rem;
  --s4b-text-lg:   1.125rem;
  --s4b-text-xl:   1.25rem;
  --s4b-text-2xl:  1.5rem;
  --s4b-text-3xl:  1.875rem;
  --s4b-text-4xl:  2.25rem;
  --s4b-font-normal:   400;
  --s4b-font-medium:   500;
  --s4b-font-semibold: 600;
  --s4b-font-bold:     700;
  --s4b-leading-tight:  1.25;
  --s4b-leading-normal: 1.5;

  /* --- Spacing (4px base) --- */
  --s4b-space-1:  0.25rem;
  --s4b-space-2:  0.5rem;
  --s4b-space-3:  0.75rem;
  --s4b-space-4:  1rem;
  --s4b-space-5:  1.25rem;
  --s4b-space-6:  1.5rem;
  --s4b-space-8:  2rem;
  --s4b-space-10: 2.5rem;
  --s4b-space-12: 3rem;
  --s4b-space-16: 4rem;

  /* --- Radius --- */
  --s4b-radius-sm:   0.25rem;
  --s4b-radius-md:   0.5rem;
  --s4b-radius-lg:   0.75rem;
  --s4b-radius-xl:   1rem;
  --s4b-radius-2xl:  1.5rem;
  --s4b-radius-full: 9999px;

  /* --- Shadows --- */
  --s4b-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
  --s4b-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --s4b-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --s4b-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --s4b-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

  /* --- Transitions --- */
  --s4b-transition-fast: 150ms ease;
  --s4b-transition-base: 250ms ease;
  --s4b-transition-slow: 350ms ease;
}


/* ============================================================
   BASE
   ============================================================ */
body.s4b-v2 {
  font-family: var(--s4b-font-sans);
  background: var(--s4b-bg-page) !important;
  background-image: none !important;
  color: var(--s4b-text-primary);
  line-height: var(--s4b-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.s4b-v2 h1, .s4b-v2 h2, .s4b-v2 h3,
.s4b-v2 h4, .s4b-v2 h5, .s4b-v2 h6 {
  font-weight: var(--s4b-font-semibold);
  color: var(--s4b-text-primary);
  line-height: var(--s4b-leading-tight);
}

.s4b-v2 a {
  color: var(--s4b-primary-600);
  transition: color var(--s4b-transition-fast);
}
.s4b-v2 a:hover {
  color: var(--s4b-primary-700);
  text-decoration: none;
}

.s4b-v2 .text-muted {
  color: var(--s4b-text-muted) !important;
}

.s4b-v2 .small, .s4b-v2 small {
  font-size: var(--s4b-text-xs);
}


/* ============================================================
   COMPONENTS — BUTTONS
   ============================================================ */
.s4b-v2 .btn {
  font-family: var(--s4b-font-sans);
  font-weight: var(--s4b-font-medium);
  font-size: var(--s4b-text-sm);
  padding: var(--s4b-space-2) var(--s4b-space-4);
  border-radius: var(--s4b-radius-md);
  transition: all var(--s4b-transition-fast);
  border: 1px solid transparent;
}
.s4b-v2 .btn:focus {
  box-shadow: 0 0 0 3px rgba(59,130,246,0.3);
}

.s4b-v2 .btn-primary {
  background: var(--s4b-primary-500);
  border-color: var(--s4b-primary-500);
  color: #fff;
}
.s4b-v2 .btn-primary:hover, .s4b-v2 .btn-primary:focus {
  background: var(--s4b-primary-600);
  border-color: var(--s4b-primary-600);
  color: #fff;
}
.s4b-v2 .btn-primary:active {
  background: var(--s4b-primary-700);
  border-color: var(--s4b-primary-700);
}

.s4b-v2 .btn-success {
  background: var(--s4b-success);
  border-color: var(--s4b-success);
  color: #fff;
}
.s4b-v2 .btn-success:hover, .s4b-v2 .btn-success:focus {
  background: var(--s4b-accent-600);
  border-color: var(--s4b-accent-600);
  color: #fff;
}

.s4b-v2 .btn-danger {
  background: var(--s4b-danger);
  border-color: var(--s4b-danger);
  color: #fff;
}
.s4b-v2 .btn-danger:hover, .s4b-v2 .btn-danger:focus {
  background: #DC2626;
  border-color: #DC2626;
  color: #fff;
}

.s4b-v2 .btn-secondary {
  background: var(--s4b-neutral-100);
  border-color: var(--s4b-neutral-200);
  color: var(--s4b-text-primary);
}
.s4b-v2 .btn-secondary:hover, .s4b-v2 .btn-secondary:focus {
  background: var(--s4b-neutral-200);
  border-color: var(--s4b-neutral-300);
  color: var(--s4b-text-primary);
}

.s4b-v2 .btn-info {
  background: var(--s4b-info);
  border-color: var(--s4b-info);
  color: #fff;
}
.s4b-v2 .btn-info:hover, .s4b-v2 .btn-info:focus {
  background: var(--s4b-primary-600);
  border-color: var(--s4b-primary-600);
  color: #fff;
}

.s4b-v2 .btn-outline-primary {
  color: var(--s4b-primary-500);
  border-color: var(--s4b-primary-500);
  background: transparent;
}
.s4b-v2 .btn-outline-primary:hover {
  background: var(--s4b-primary-500);
  color: #fff;
}

.s4b-v2 .btn-outline-success {
  color: var(--s4b-success);
  border-color: var(--s4b-success);
  background: transparent;
}
.s4b-v2 .btn-outline-success:hover {
  background: var(--s4b-success);
  color: #fff;
}

.s4b-v2 .btn-outline-danger {
  color: var(--s4b-danger);
  border-color: var(--s4b-danger);
  background: transparent;
}
.s4b-v2 .btn-outline-danger:hover {
  background: var(--s4b-danger);
  color: #fff;
}

.s4b-v2 .btn-sm {
  padding: var(--s4b-space-1) var(--s4b-space-3);
  font-size: var(--s4b-text-xs);
}

.s4b-v2 .btn-default {
  background: var(--s4b-neutral-50);
  border-color: var(--s4b-neutral-200);
  color: var(--s4b-text-secondary);
}
.s4b-v2 .btn-default:hover {
  background: var(--s4b-neutral-100);
}


/* ============================================================
   COMPONENTS — CARDS
   ============================================================ */
.s4b-v2 .card {
  background: var(--s4b-bg-card);
  border: 1px solid var(--s4b-border-default);
  border-radius: var(--s4b-radius-lg);
  box-shadow: var(--s4b-shadow-sm);
}
.s4b-v2 .card-header {
  background: transparent;
  border-bottom: 1px solid var(--s4b-border-default);
  padding: var(--s4b-space-4) var(--s4b-space-6);
  font-weight: var(--s4b-font-semibold);
  font-size: var(--s4b-text-sm);
}
.s4b-v2 .card-body {
  padding: var(--s4b-space-6);
}
.s4b-v2 .card-footer {
  background: var(--s4b-neutral-50);
  border-top: 1px solid var(--s4b-border-default);
  padding: var(--s4b-space-4) var(--s4b-space-6);
}
.s4b-v2 .card.shadow {
  box-shadow: var(--s4b-shadow-md) !important;
}


/* ============================================================
   COMPONENTS — FORMS
   ============================================================ */
.s4b-v2 .form-control {
  font-family: var(--s4b-font-sans);
  border: 1px solid var(--s4b-border-default);
  border-radius: var(--s4b-radius-md);
  padding: var(--s4b-space-2) var(--s4b-space-3);
  font-size: var(--s4b-text-sm);
  color: var(--s4b-text-primary);
  transition: border-color var(--s4b-transition-fast), box-shadow var(--s4b-transition-fast);
}
.s4b-v2 .form-control:focus {
  border-color: var(--s4b-border-focus);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.s4b-v2 .form-control[readonly] {
  background: var(--s4b-neutral-50);
}
.s4b-v2 .form-control.is-invalid,
.s4b-v2 .was-validated .form-control:invalid {
  border-color: var(--s4b-danger);
}
.s4b-v2 .form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}

.s4b-v2 .input-group-text {
  background: var(--s4b-neutral-50);
  border: 1px solid var(--s4b-border-default);
  border-radius: var(--s4b-radius-md);
  color: var(--s4b-text-secondary);
  font-size: var(--s4b-text-sm);
}

.s4b-v2 .custom-select {
  font-family: var(--s4b-font-sans);
  border: 1px solid var(--s4b-border-default);
  border-radius: var(--s4b-radius-md);
  font-size: var(--s4b-text-sm);
  color: var(--s4b-text-primary);
}
.s4b-v2 .custom-select:focus {
  border-color: var(--s4b-border-focus);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.s4b-v2 label {
  font-size: var(--s4b-text-sm);
  font-weight: var(--s4b-font-medium);
  color: var(--s4b-text-secondary);
  margin-bottom: var(--s4b-space-1);
}


/* ============================================================
   COMPONENTS — TABLES
   ============================================================ */
.s4b-v2 .table {
  font-size: var(--s4b-text-sm);
}
.s4b-v2 .table thead th {
  background: var(--s4b-neutral-50);
  color: var(--s4b-text-secondary);
  font-size: var(--s4b-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--s4b-font-semibold);
  border-bottom: 1px solid var(--s4b-border-default);
  border-top: none;
  padding: var(--s4b-space-3) var(--s4b-space-4);
}
.s4b-v2 .table tbody td {
  padding: var(--s4b-space-3) var(--s4b-space-4);
  border-bottom: 1px solid var(--s4b-border-default);
  border-top: none;
  vertical-align: middle;
}
.s4b-v2 .table-hover tbody tr:hover {
  background: var(--s4b-neutral-50);
}
.s4b-v2 .table-secondary, .s4b-v2 .table-secondary > td {
  background: var(--s4b-neutral-100);
}


/* ============================================================
   COMPONENTS — BADGES
   ============================================================ */
.s4b-v2 .badge {
  font-family: var(--s4b-font-sans);
  padding: var(--s4b-space-1) var(--s4b-space-3);
  border-radius: var(--s4b-radius-full);
  font-size: var(--s4b-text-xs);
  font-weight: var(--s4b-font-medium);
}
.s4b-v2 .badge-primary, .s4b-v2 .badge-info {
  background: rgba(59,130,246,0.12);
  color: var(--s4b-primary-700);
}
.s4b-v2 .badge-success {
  background: rgba(16,185,129,0.12);
  color: #065F46;
}
.s4b-v2 .badge-danger {
  background: rgba(239,68,68,0.12);
  color: #991B1B;
}
.s4b-v2 .badge-warning {
  background: rgba(245,158,11,0.12);
  color: #92400E;
}
.s4b-v2 .badge-secondary {
  background: var(--s4b-neutral-100);
  color: var(--s4b-text-secondary);
}
.s4b-v2 .badge-light {
  background: var(--s4b-neutral-100);
  color: var(--s4b-text-secondary);
}


/* ============================================================
   COMPONENTS — NAV TABS
   ============================================================ */
.s4b-v2 .nav-tabs {
  border-bottom: 1px solid var(--s4b-border-default);
}
.s4b-v2 .nav-tabs .nav-link {
  border: none;
  color: var(--s4b-text-secondary);
  padding: var(--s4b-space-3) var(--s4b-space-5);
  font-size: var(--s4b-text-sm);
  font-weight: var(--s4b-font-medium);
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
}
.s4b-v2 .nav-tabs .nav-link:hover {
  color: var(--s4b-text-primary);
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--s4b-neutral-300);
}
.s4b-v2 .nav-tabs .nav-link.active {
  color: var(--s4b-primary-600);
  background: transparent;
  border-color: transparent;
  border-bottom: 2px solid var(--s4b-primary-500);
}


/* ============================================================
   COMPONENTS — MODAL
   ============================================================ */
.s4b-v2 .modal-content {
  border-radius: var(--s4b-radius-xl);
  border: none;
  box-shadow: var(--s4b-shadow-xl);
}
.s4b-v2 .modal-header {
  border-bottom: 1px solid var(--s4b-border-default);
  padding: var(--s4b-space-5) var(--s4b-space-6);
}
.s4b-v2 .modal-header h4 {
  font-size: var(--s4b-text-lg);
  font-weight: var(--s4b-font-semibold);
}
.s4b-v2 .modal-body {
  padding: var(--s4b-space-6);
}
.s4b-v2 .modal-footer {
  border-top: 1px solid var(--s4b-border-default);
  padding: var(--s4b-space-4) var(--s4b-space-6);
}


/* ============================================================
   COMPONENTS — DROPDOWN
   ============================================================ */
.s4b-v2 .dropdown-menu {
  border: none;
  border-radius: var(--s4b-radius-md);
  box-shadow: var(--s4b-shadow-md);
  padding: var(--s4b-space-1);
}
.s4b-v2 .dropdown-item {
  padding: var(--s4b-space-2) var(--s4b-space-4);
  border-radius: var(--s4b-radius-sm);
  font-size: var(--s4b-text-sm);
  color: var(--s4b-text-primary);
  transition: background var(--s4b-transition-fast);
}
.s4b-v2 .dropdown-item:hover, .s4b-v2 .dropdown-item:focus {
  background: var(--s4b-primary-50);
  color: var(--s4b-primary-700);
}
.s4b-v2 .dropdown-divider {
  border-color: var(--s4b-border-default);
}


/* ============================================================
   COMPONENTS — ALERTS
   ============================================================ */
.s4b-v2 .alert {
  border: none;
  border-radius: var(--s4b-radius-lg);
  padding: var(--s4b-space-4) var(--s4b-space-5);
  border-left: 4px solid;
}
.s4b-v2 .alert-success {
  background: rgba(16,185,129,0.1);
  color: #065F46;
  border-left-color: var(--s4b-success);
}
.s4b-v2 .alert-warning {
  background: rgba(245,158,11,0.1);
  color: #92400E;
  border-left-color: var(--s4b-warning);
}
.s4b-v2 .alert-danger {
  background: rgba(239,68,68,0.1);
  color: #991B1B;
  border-left-color: var(--s4b-danger);
}
.s4b-v2 .alert-info {
  background: rgba(59,130,246,0.1);
  color: var(--s4b-primary-800);
  border-left-color: var(--s4b-info);
}


/* ============================================================
   COMPONENTS — DATATABLES OVERRIDES
   ============================================================ */
.s4b-v2 .dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--s4b-border-default);
  border-radius: var(--s4b-radius-md);
  padding: var(--s4b-space-2) var(--s4b-space-3);
  font-size: var(--s4b-text-sm);
}
.s4b-v2 .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--s4b-border-default);
  border-radius: var(--s4b-radius-md);
  font-size: var(--s4b-text-sm);
}
.s4b-v2 .dataTables_wrapper .dataTables_info {
  font-size: var(--s4b-text-xs);
  color: var(--s4b-text-muted);
}
.s4b-v2 .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--s4b-radius-sm) !important;
  font-size: var(--s4b-text-xs);
}


/* ============================================================
   SHELL — SIDEBAR
   ============================================================ */
.s4b-v2 #sidebar-wrapper {
  background: var(--s4b-bg-sidebar) !important;
  border-right: 1px solid var(--s4b-border-default) !important;
}

.s4b-v2 #menuprincipal .list-group-item {
  font-family: var(--s4b-font-sans);
  font-size: var(--s4b-text-sm);
  font-weight: var(--s4b-font-medium);
  border: none;
  padding: var(--s4b-space-3) var(--s4b-space-4);
  border-radius: var(--s4b-radius-md);
  margin: 2px var(--s4b-space-2);
  color: var(--s4b-text-secondary);
  background: transparent;
  transition: all var(--s4b-transition-fast);
}

/* Override do hover verde do tema existente */
.s4b-v2 .accordion .list-group-item:hover,
.s4b-v2 .text_menu:hover,
.s4b-v2 #menuprincipal .list-group-item:hover {
  background: var(--s4b-primary-50) !important;
  color: var(--s4b-primary-700) !important;
}

.s4b-v2 .accordion .list-group a {
  font-size: var(--s4b-text-xs);
}

.s4b-v2 #menuprincipal .collapse .list-group-item {
  padding-left: var(--s4b-space-8);
  font-size: var(--s4b-text-xs);
}

/* Scrollbar */
.s4b-v2 #menuprincipal::-webkit-scrollbar {
  width: 6px;
}
.s4b-v2 #menuprincipal::-webkit-scrollbar-track {
  background: transparent;
}
.s4b-v2 #menuprincipal::-webkit-scrollbar-thumb {
  background: var(--s4b-neutral-300);
  border-radius: var(--s4b-radius-full);
}


/* ============================================================
   SHELL — TOPBAR
   ============================================================ */
.s4b-v2 #menufix {
  background: var(--s4b-bg-topbar) !important;
  border-bottom: 1px solid var(--s4b-border-default) !important;
  box-shadow: var(--s4b-shadow-sm);
}
.s4b-v2 .nav-admin:hover {
  background: var(--s4b-primary-50) !important;
  color: var(--s4b-primary-700) !important;
}
.s4b-v2 .nav-admin {
  border-radius: var(--s4b-radius-md);
}
.s4b-v2 .nav-admin .nav-link {
  font-family: var(--s4b-font-sans);
  font-size: var(--s4b-text-sm);
  font-weight: var(--s4b-font-medium);
  color: var(--s4b-text-secondary);
}
.s4b-v2 .nav-admin .nav-link:hover {
  color: var(--s4b-primary-600);
}

/* Saudacao personalizada */
.s4b-v2 .s4b-greeting-name {
  font-weight: var(--s4b-font-semibold);
  font-size: var(--s4b-text-sm);
  color: var(--s4b-text-primary);
}
.s4b-v2 .s4b-greeting-date {
  font-size: var(--s4b-text-xs);
  color: var(--s4b-text-muted);
}

/* Container override — neutraliza bg_tema legado em containers genericos
   (exclui chamar_menu, sidebar e topbar que ja tem regras proprias) */
.s4b-v2 .bg_tema:not(.chamar_menu):not(#sidebar-wrapper):not(#menufix):not(.btn) {
  background: transparent !important;
}

/* Back to top */
.s4b-v2 .back-to-top {
  background: var(--s4b-primary-500);
  border-color: var(--s4b-primary-500);
  border-radius: var(--s4b-radius-full);
}

/* Menu toggle (botao "encolher menu" - chamar_menu) — visibilidade no mobile */
.s4b-v2 a.chamar_menu,
.s4b-v2 .chamar_menu.btn {
  background: var(--s4b-primary-500) !important;
  border: 1px solid var(--s4b-primary-600) !important;
  border-radius: var(--s4b-radius-full) !important;
  color: #fff !important;
  box-shadow: var(--s4b-shadow-md);
  width: 36px;
  height: 36px;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 1030;
}
.s4b-v2 a.chamar_menu:hover {
  background: var(--s4b-primary-600) !important;
}
.s4b-v2 a.chamar_menu i {
  color: #fff !important;
  font-size: 14px;
}


/* ============================================================
   DASHBOARD COMPONENTS
   ============================================================ */

/* --- KPI Card --- */
.s4b-v2 .s4b-kpi-card {
  border: none;
  border-radius: var(--s4b-radius-lg);
  box-shadow: var(--s4b-shadow-sm);
  transition: box-shadow var(--s4b-transition-base);
}
.s4b-v2 .s4b-kpi-card:hover {
  box-shadow: var(--s4b-shadow-md);
}
.s4b-v2 .s4b-kpi-label {
  font-size: var(--s4b-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--s4b-text-muted);
  font-weight: var(--s4b-font-semibold);
  margin-bottom: var(--s4b-space-1);
}
.s4b-v2 .s4b-kpi-value {
  font-size: var(--s4b-text-2xl);
  font-weight: var(--s4b-font-bold);
  color: var(--s4b-text-primary);
  line-height: var(--s4b-leading-tight);
  margin-bottom: var(--s4b-space-1);
}
.s4b-v2 .s4b-kpi-detail {
  font-size: var(--s4b-text-xs);
  color: var(--s4b-text-muted);
}
.s4b-v2 .s4b-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--s4b-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.s4b-v2 .s4b-kpi-icon--primary {
  background: var(--s4b-primary-100);
  color: var(--s4b-primary-600);
}
.s4b-v2 .s4b-kpi-icon--success {
  background: rgba(16,185,129,0.15);
  color: var(--s4b-success);
}
.s4b-v2 .s4b-kpi-icon--danger {
  background: rgba(239,68,68,0.15);
  color: var(--s4b-danger);
}
.s4b-v2 .s4b-kpi-icon--warning {
  background: rgba(245,158,11,0.15);
  color: var(--s4b-warning);
}
.s4b-v2 .s4b-kpi-icon--info {
  background: rgba(59,130,246,0.15);
  color: var(--s4b-info);
}

/* --- Chart Card --- */
.s4b-v2 .s4b-chart-card {
  border: none;
  border-radius: var(--s4b-radius-lg);
  box-shadow: var(--s4b-shadow-sm);
}
.s4b-v2 .s4b-chart-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--s4b-neutral-100);
  font-weight: var(--s4b-font-semibold);
}
.s4b-v2 .s4b-chart-body {
  position: relative;
  min-height: 280px;
  padding: var(--s4b-space-4);
}

/* --- List Card --- */
.s4b-v2 .s4b-list-card {
  border: none;
  border-radius: var(--s4b-radius-lg);
  box-shadow: var(--s4b-shadow-sm);
}
.s4b-v2 .s4b-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4b-space-3) var(--s4b-space-4);
  border-bottom: 1px solid var(--s4b-neutral-100);
}
.s4b-v2 .s4b-list-item:last-child {
  border-bottom: none;
}
.s4b-v2 .s4b-list-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--s4b-radius-full);
  background: var(--s4b-primary-100);
  color: var(--s4b-primary-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--s4b-font-semibold);
  font-size: var(--s4b-text-sm);
  flex-shrink: 0;
  margin-right: var(--s4b-space-3);
}
.s4b-v2 .s4b-list-content {
  flex: 1;
  min-width: 0;
}
.s4b-v2 .s4b-list-title {
  font-size: var(--s4b-text-sm);
  font-weight: var(--s4b-font-medium);
  color: var(--s4b-text-primary);
}
.s4b-v2 .s4b-list-subtitle {
  font-size: var(--s4b-text-xs);
  color: var(--s4b-text-muted);
}
.s4b-v2 .s4b-list-value {
  font-size: var(--s4b-text-sm);
  font-weight: var(--s4b-font-semibold);
  color: var(--s4b-text-primary);
  margin-left: var(--s4b-space-3);
}

/* --- Period Filter --- */
.s4b-v2 .s4b-period-filter .btn {
  border-radius: var(--s4b-radius-md);
  font-size: var(--s4b-text-sm);
  padding: var(--s4b-space-2) var(--s4b-space-4);
}
.s4b-v2 .s4b-period-filter .btn.active {
  background: var(--s4b-primary-500);
  color: #fff;
  border-color: var(--s4b-primary-500);
}

/* --- Dashboard Header --- */
.s4b-v2 .s4b-dash-header {
  margin-bottom: var(--s4b-space-6);
}
.s4b-v2 .s4b-dash-header h1 {
  font-size: var(--s4b-text-2xl);
  font-weight: var(--s4b-font-bold);
  margin-bottom: var(--s4b-space-1);
}
.s4b-v2 .s4b-dash-header p {
  font-size: var(--s4b-text-sm);
  color: var(--s4b-text-muted);
  margin-bottom: 0;
}

/* --- Empty State --- */
.s4b-v2 .s4b-empty {
  text-align: center;
  padding: var(--s4b-space-8) var(--s4b-space-4);
  color: var(--s4b-text-muted);
}
.s4b-v2 .s4b-empty i {
  font-size: var(--s4b-text-3xl);
  margin-bottom: var(--s4b-space-3);
  display: block;
}

/* --- Delta indicator --- */
.s4b-v2 .s4b-delta {
  font-size: var(--s4b-text-xs);
  font-weight: var(--s4b-font-medium);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.s4b-v2 .s4b-delta-up {
  color: var(--s4b-success);
}
.s4b-v2 .s4b-delta-down {
  color: var(--s4b-danger);
}
.s4b-v2 .s4b-delta-neutral {
  color: var(--s4b-text-muted);
}


/* ============================================================
   RESPONSIVE — Mobile fixes para listagens legadas (cliente, contrato)
   ============================================================ */
@media (max-width: 767px) {
  /* Cards de listagem: col-3 e col-4 viram col-12 com espacamento */
  .s4b-v2 #div_ultimoscli .card-body .col-3,
  .s4b-v2 #div_ultimoscli .card-body .col-4,
  .s4b-v2 #div_cliencontrados .card-body .col-3,
  .s4b-v2 #div_cliencontrados .card-body .col-4 {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: var(--s4b-space-2);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Card-footer com col-4 / col-8 — empilha no mobile */
  .s4b-v2 #div_ultimoscli .card-footer .col-4,
  .s4b-v2 #div_ultimoscli .card-footer .col-8,
  .s4b-v2 #div_cliencontrados .card-footer .col-4,
  .s4b-v2 #div_cliencontrados .card-footer .col-8 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: var(--s4b-space-1);
  }

  /* Header do card de listagem: nome + botao no mobile */
  .s4b-v2 #div_ultimoscli .card-header,
  .s4b-v2 #div_cliencontrados .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s4b-space-2);
  }
  .s4b-v2 #div_ultimoscli .card-header .float-right,
  .s4b-v2 #div_cliencontrados .card-header .float-right {
    float: none !important;
    margin-left: auto;
  }
  .s4b-v2 #div_ultimoscli .card-header b,
  .s4b-v2 #div_cliencontrados .card-header b {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    font-size: var(--s4b-text-sm);
  }

  /* Filtros: input-group quebra mais natural */
  .s4b-v2 .input-group {
    flex-wrap: wrap;
  }

  /* Padding lateral menor no mobile */
  .s4b-v2 .pl-3,
  .s4b-v2 .pr-3 {
    padding-left: var(--s4b-space-2) !important;
    padding-right: var(--s4b-space-2) !important;
  }

  /* H3 "Consulta de cliente" no mobile com botao do lado */
  .s4b-v2 .card-body h3 {
    font-size: var(--s4b-text-lg);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s4b-space-2);
  }
  .s4b-v2 .card-body h3 .float-right {
    float: none !important;
    margin-left: auto;
  }
}


/* ============================================================
   PAGE — LOGIN
   ============================================================ */
body.s4b-v2 #login {
  min-height: 100vh;
  padding: var(--s4b-space-8) var(--s4b-space-4);
}
body.s4b-v2 #login > .row {
  align-items: center;
}

.s4b-v2 #login .card {
  background: var(--s4b-bg-card) !important;
  border: none;
  border-radius: var(--s4b-radius-xl);
  box-shadow: var(--s4b-shadow-xl);
  padding: var(--s4b-space-4) var(--s4b-space-2);
}

.s4b-v2 #login .card.transparent {
  background: var(--s4b-bg-card) !important;
}

.s4b-v2 #login .card-body {
  padding: var(--s4b-space-6);
}

.s4b-v2 #login img {
  max-height: 80px;
  margin-bottom: var(--s4b-space-3);
}

.s4b-v2 #login label {
  font-size: var(--s4b-text-sm);
  font-weight: var(--s4b-font-medium);
  color: var(--s4b-text-secondary);
}

.s4b-v2 #login .form-control {
  height: 44px;
  font-size: var(--s4b-text-base);
}

.s4b-v2 #login .input-group-text {
  background: var(--s4b-neutral-50);
  color: var(--s4b-primary-600);
  border: 1px solid var(--s4b-border-default);
  width: 44px;
  justify-content: center;
}

.s4b-v2 #login .input-group-prepend {
  cursor: pointer;
}

.s4b-v2 #login .btn-primary {
  width: 100%;
  height: 44px;
  font-size: var(--s4b-text-base);
  font-weight: var(--s4b-font-semibold);
  margin-top: var(--s4b-space-2);
}

.s4b-v2 #login .float-right {
  float: none !important;
  display: block;
}

/* Background gradient do login e definido inline em login.php
   (com escopo body.s4b-v2 para nao afetar outras paginas) */