/* =========================================================
   SGH Municipal — custom.css
   Compilado a partir dos arquivos SCSS do template original.
   Paleta: laranja #E66239 (primário), Poppins, Tabler Icons
   ========================================================= */

/* --- Google Fonts ---------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* --- Variáveis CSS --------------------------------------- */
:root {
  --primary:        #E66239;
  --primary-10:     rgba(230, 98, 57, 0.10);
  --primary-25:     rgba(230, 98, 57, 0.25);
  --secondary:      #6c757d;
  --success:        #00C951;
  --info:           #00B8DB;
  --warning:        #F0B100;
  --danger:         #FB2C36;

  --gray-50:        #fafafa;
  --gray-100:       #f5f5f5;
  --gray-200:       #e5e5e5;
  --gray-300:       #d4d4d4;
  --gray-400:       #a3a3a3;
  --gray-500:       #737373;
  --gray-600:       #525252;
  --gray-700:       #404040;
  --gray-800:       #262626;
  --gray-900:       #171717;
  --gray-950:       #0a0a0a;

  --sidebar-width:  240px;
  --topbar-height:  60px;
  --font-base:      'Poppins', sans-serif;
}

/* --- Reset / Base --------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  font-family: var(--font-base);
  font-size: 0.875rem;
  color: var(--gray-800);
  background-color: var(--gray-50);
}

/* --- Bootstrap primary override ------------------------ */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #c9522e;
  border-color: #c9522e;
}
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover {
  background-color: var(--primary);
  border-color: var(--primary);
}
.text-primary  { color: var(--primary) !important; }
.bg-primary    { background-color: var(--primary) !important; }
.link-primary  { color: var(--primary) !important; }
.link-primary:hover { color: #c9522e !important; }
.border-primary { border-color: var(--primary) !important; }
.badge.bg-primary { background-color: var(--primary) !important; }

/* form inputs focus */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(230,98,57,.25);
}

/* --- Overlay ------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(1px);
  display: none;
  z-index: 1030;
}
.overlay.show { display: block; }

/* --- Sidebar ------------------------------------------- */
.sidebar {
  width: var(--sidebar-width);
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .2s ease, left .2s ease;
  z-index: 1040;
  border-right: 1px solid var(--gray-200);
}

.sidebar .logo-area {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--gray-200);
}

.sidebar .nav {
  padding-top: 8px;
  padding-bottom: 24px;
}

.sidebar .nav-link {
  color: var(--gray-800);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
  font-size: 0.875rem;
}
.sidebar .nav-link i {
  font-size: 1.15rem;
  flex-shrink: 0;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: var(--primary);
  background-color: var(--primary-10);
}

/* Collapsed state (desktop) */
.sidebar.collapsed {
  width: 60px;
}
.sidebar.collapsed .nav-text,
.sidebar.collapsed .logo-text {
  display: none;
}
.sidebar.collapsed .nav-link {
  justify-content: center;
  margin: 1px 8px;
}

/* --- Topbar -------------------------------------------- */
.topbar {
  height: var(--topbar-height);
  margin-left: var(--sidebar-width);
  transition: margin-left .2s ease;
}
.topbar.full {
  margin-left: 60px;
}

/* --- Main content -------------------------------------- */
.content {
  margin-left: var(--sidebar-width);
  transition: margin-left .2s ease;
  min-height: calc(100vh - var(--topbar-height));
}
.content.full {
  margin-left: 60px;
}

/* --- Responsive ---------------------------------------- */
@media (max-width: 991.98px) {
  .sidebar {
    left: calc(-1 * var(--sidebar-width));
  }
  .sidebar.mobile-show {
    left: 0;
  }
  .topbar {
    margin-left: 0 !important;
  }
  .content {
    margin-left: 0 !important;
  }
}

/* --- Icon Button --------------------------------------- */
.btn-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}
.btn-icon.btn-xs  { width: 1.75rem;   height: 1.75rem; }
.btn-icon.btn-sm  { width: 2.1875rem; height: 2.1875rem; }
.btn-icon.btn-lg  { width: 3.36rem;   height: 3.36rem; }

/* --- Icon Shape ---------------------------------------- */
.icon-shape {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: .375rem;
}
.icon-shape.icon-xxs  { width: 1rem;  height: 1rem; }
.icon-shape.icon-xs   { width: 1.5rem; height: 1.5rem; }
.icon-shape.icon-sm   { width: 2rem;  height: 2rem; }
.icon-shape.icon-md   { width: 2.5rem; height: 2.5rem; }
.icon-shape.icon-lg   { width: 3rem;  height: 3rem; }
.icon-shape.icon-xl   { width: 4rem;  height: 4rem; }
.icon-shape.icon-xxl  { width: 5rem;  height: 5rem; }
.icon-shape.icon-xxxl { width: 7rem;  height: 7rem; }

/* --- Modal Solicitação de Exames ----------------------- */
#modalSolicitarExames .modal-footer {
  display: flex !important;
}

#modalSolicitarExames #btnEnviarSolicitacao {
  display: inline-flex !important;
  align-items: center;
}

#modalSolicitarExames .modal-content {
  max-height: calc(100vh - 2rem);
}

#modalSolicitarExames .modal-body {
  max-height: calc(100vh - 220px);
  overflow-y: scroll;
  padding-bottom: 5rem;
}

@media (max-width: 576px) {
  #modalSolicitarExames .modal-body {
    max-height: calc(100vh - 180px);
  }
}

#modalSolicitarExames .modal-footer-fixo-exames {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fff;
  border-top: 1px solid var(--gray-200);
}

/* --- Avatar -------------------------------------------- */
.avatar {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  flex-shrink: 0;
}
.avatar-xs   { width: 1.5rem;  height: 1.5rem; }
.avatar-sm   { width: 2rem;    height: 2rem; }
.avatar-md   { width: 2.5rem;  height: 2.5rem; }
.avatar-lg   { width: 4rem;    height: 4rem; }
.avatar-xl   { width: 5rem;    height: 5rem; }
.avatar-xxl  { width: 7.5rem;  height: 7.5rem; }

/* --- Cards KPI ----------------------------------------- */
.card-kpi {
  border-radius: .5rem;
  padding: 1.25rem;
}

/* --- Opacidades de cor (replicando utilitários Bootstrap) */
.bg-primary.bg-opacity-10 { background-color: rgba(230,98,57,.10) !important; }
.bg-success.bg-opacity-10  { background-color: rgba(0,201,81,.10) !important; }
.bg-info.bg-opacity-10     { background-color: rgba(0,184,219,.10) !important; }
.bg-warning.bg-opacity-10  { background-color: rgba(240,177,0,.10) !important; }
.bg-danger.bg-opacity-10   { background-color: rgba(251,44,54,.10) !important; }

.border-primary.border-opacity-25 { border-color: rgba(230,98,57,.25) !important; }
.border-success.border-opacity-25  { border-color: rgba(0,201,81,.25) !important; }
.border-info.border-opacity-25     { border-color: rgba(0,184,219,.25) !important; }
.border-warning.border-opacity-25  { border-color: rgba(240,177,0,.25) !important; }
.border-danger.border-opacity-25   { border-color: rgba(251,44,54,.25) !important; }

/* --- DataTables customization -------------------------- */
.dataTables_wrapper .dataTables_filter input {
  border-radius: .375rem;
  border: 1px solid var(--gray-300);
  padding: .25rem .75rem;
}
.dataTables_wrapper .dataTables_length select {
  border-radius: .375rem;
  border: 1px solid var(--gray-300);
  padding: .25rem .5rem;
}
table.dataTable thead th {
  border-bottom: 2px solid var(--gray-200);
}

/* --- Utilitários extras -------------------------------- */
.py-10  { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.pb-5   { padding-bottom: 1.25rem !important; }
.mb-6   { margin-bottom: 1.5rem !important; }
.gap-1  { gap: .25rem !important; }
.gap-3  { gap: .75rem !important; }
.lh-lg  { line-height: 1.75 !important; }

/* Status badge customizado */
.badge-status-ativo    { background-color: var(--success); color: #fff; }
.badge-status-inativo  { background-color: var(--gray-400); color: #fff; }

/* Spinner de loading para botões AJAX */
.btn .spinner-border-sm { width: .85rem; height: .85rem; }

/* --- Impressão ----------------------------------------- */
@media print {
  .sidebar, .topbar, .overlay { display: none !important; }
  .content { margin-left: 0 !important; }
}
