/* =============================================================================
   REDESIGN OVERRIDE - Telemed Visual Identity
   Loads AFTER styles.css and custom-style.css
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   ----------------------------------------------------------------------------- */
:root {
  --redesign-primary: #5dbecc;
  --redesign-primary-dark: #025260;
  --redesign-primary-hover: #4da8b5;
  --redesign-green: #00c585;
  --redesign-sidebar-bg: #2f2f2f;
  --redesign-sidebar-text: #ffffff;
  --redesign-sidebar-border: #404040;
  --redesign-text-dark: #29343d;
  --redesign-border: #e0e6eb;
  --redesign-radius-sm: 0;
  --redesign-radius-md: 0;
}

/* -----------------------------------------------------------------------------
   1.1 GLOBAL BORDER-RADIUS REMOVAL
   Override Bootstrap CSS custom properties and component-level radii.
   Exceptions: avatars, circle icons, radio inputs, spinners.
   ----------------------------------------------------------------------------- */

/* Strategy 1: Override Bootstrap CSS custom properties */
:root {
  --bs-border-radius: 0 !important;
  --bs-border-radius-sm: 0 !important;
  --bs-border-radius-lg: 0 !important;
  --bs-border-radius-xl: 0 !important;
  --bs-border-radius-xxl: 0 !important;
  --bs-border-radius-2xl: 0 !important;
  --bs-border-radius-pill: 0 !important;
}

/* Strategy 2: Direct overrides for components that don't use CSS vars */
.card,
.btn,
.badge,
.form-control,
.form-select,
.input-group-text,
.dropdown-menu,
.modal-content,
.modal-header,
.modal-footer,
.toast,
.alert,
.nav-pills .nav-link,
.offcanvas,
.accordion-item,
.accordion-button,
.pagination .page-link,
.form-check-input,
.sidebar-link,
.breadcrumb,
.popover,
.tooltip-inner,
.progress,
.progress-bar,
.list-group-item,
.table-responsive,
.body-wrapper,
.body-wrapper .container-fluid,
.body-wrapper .container-lg,
.body-wrapper .container-md,
.body-wrapper .container-sm,
.body-wrapper .container-xl,
.body-wrapper .container-xxl {
  border-radius: 0 !important;
}

/* Override Bootstrap rounded utility classes */
.rounded,
.rounded-1,
.rounded-2,
.rounded-3,
.rounded-4,
.rounded-5 {
  border-radius: 0 !important;
}

/* EXCEPTIONS: Keep these rounded */
.sidebar-profile-avatar {
  border-radius: 50% !important;
}

.form-check-input[type="radio"] {
  border-radius: 50% !important;
}

.form-switch .form-check-input {
  border-radius: 2em !important;
}

.spinner-border {
  border-radius: 50% !important;
}

/* -----------------------------------------------------------------------------
   2. TYPOGRAPHY
   ----------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

body {
  color: var(--redesign-text-dark);
}

/* -----------------------------------------------------------------------------
   3. SIDEBAR - Dark Theme
   ----------------------------------------------------------------------------- */

/* 3.1 Container backgrounds */
.side-mini-panel {
  background: var(--redesign-sidebar-bg) !important;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1), 0px 4px 6px rgba(0,0,0,0.1);
}

.side-mini-panel .sidebarmenu .sidebar-nav {
  background: var(--redesign-sidebar-bg) !important;
}

.left-sidebar.with-vertical {
  background: var(--redesign-sidebar-bg) !important;
}

.scroll-sidebar {
  background: var(--redesign-sidebar-bg) !important;
}

.side-mini-panel .scroll-sidebar {
  background: var(--redesign-sidebar-bg) !important;
}

/* 3.2 Brand logo area */
.brand-logo {
  border-bottom: 1px solid var(--redesign-sidebar-border);
  padding: 0 16px;
  justify-content: center;
}

.brand-logo h2 {
  color: var(--redesign-sidebar-text) !important;
}

/* Logo da sidebar: tamanho padrão proporcional ao menu.
   As dimensões cadastradas na clínica chegam como --clinic-logo-max-w /
   --clinic-logo-max-h (ver includes/sidebar.html) e são tratadas como LIMITES,
   nunca como dimensões fixas, para não cortar nem distorcer a imagem.
   O min() garante que a logo não estoure a largura do menu nem a altura do topo. */
.brand-logo .logo {
  width: auto;
  height: auto;
  max-width: min(var(--clinic-logo-max-w, 200px), 100%);
  max-height: min(var(--clinic-logo-max-h, 44px), 56px);
  object-fit: contain;
}

/* 3.3 Navigation links */
.sidebar-nav ul .sidebar-item .sidebar-link {
  color: var(--redesign-sidebar-text) !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link iconify-icon {
  color: var(--redesign-sidebar-text) !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link:hover {
  background: rgba(128,128,128,0.12) !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link:hover iconify-icon {
  color: var(--redesign-sidebar-text) !important;
}

/* Active state */
.sidebar-nav ul .sidebar-item.selected > .sidebar-link,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link.active,
.sidebar-nav ul .sidebar-item > .sidebar-link.active {
  background: var(--main-color, #5dbecc) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.sidebar-nav ul .sidebar-item.selected > .sidebar-link iconify-icon,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link.active iconify-icon,
.sidebar-nav ul .sidebar-item > .sidebar-link.active iconify-icon {
  color: #fff !important;
}

/* Active arrow */
.sidebar-nav ul .sidebar-item.selected > .sidebar-link.has-arrow::after,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link.active.has-arrow::after,
.sidebar-nav ul .sidebar-item > .sidebar-link.active.has-arrow::after {
  border-color: #fff !important;
}

/* Section headers */
.nav-small-cap {
  color: var(--redesign-sidebar-text) !important;
  font-size: 11px;
  text-transform: uppercase;
  opacity: 0.6;
}

.nav-small-cap .nav-small-cap-icon {
  color: var(--redesign-sidebar-text) !important;
}

.nav-small-cap iconify-icon.mini-icon {
  color: var(--redesign-sidebar-text) !important;
}

/* Submenus */
.sidebar-nav ul .sidebar-item .first-level {
  background: rgba(0,0,0,0.15);
}

.sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link {
  color: var(--redesign-sidebar-text) !important;
  opacity: 0.85;
}

.sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link:hover {
  color: var(--redesign-sidebar-text) !important;
  opacity: 1;
}

/* Submenu active state override from custom-style.css */
.sidebar-nav .first-level .sidebar-item .sidebar-link.active {
  color: #fff !important;
  background: var(--main-color, #5dbecc) !important;
}

.sidebar-nav .first-level .sidebar-item .sidebar-link.active .icon-small {
  background-color: #fff !important;
}

/* Arrow dropdown */
.sidebar-nav .has-arrow::after {
  border-color: var(--redesign-sidebar-text) !important;
  opacity: 0.6;
}

.sidebar-nav .has-arrow:hover::after {
  border-color: var(--redesign-sidebar-text) !important;
  opacity: 0.9;
}

/* 3.4 Mini-panel icons */
.side-mini-panel .mini-nav .mini-nav-item > a iconify-icon {
  color: var(--redesign-sidebar-text) !important;
  opacity: 0.85;
}

.side-mini-panel .mini-nav .mini-nav-item > a:hover iconify-icon {
  color: var(--redesign-sidebar-text) !important;
  opacity: 1;
}

.side-mini-panel .mini-nav .mini-nav-item.selected > a iconify-icon {
  color: #fff !important;
}

.side-mini-panel .mini-nav .mini-nav-item > a:before {
  background: rgba(128,128,128,0.12);
}

.side-mini-panel .mini-nav .mini-nav-item.selected > a:before {
  background: var(--main-color, #5dbecc) !important;
}

/* 3.5 Mobile sidebar */
@media (max-width: 1299.98px) {
  .side-mini-panel {
    background: var(--redesign-sidebar-bg) !important;
  }

  .left-sidebar {
    background: var(--redesign-sidebar-bg) !important;
  }
}

/* Dark theme sidebar overrides (prevent dark theme from reverting) */
[data-bs-theme=dark] .side-mini-panel,
[data-bs-theme=dark] .side-mini-panel .mini-nav,
[data-bs-theme=dark] .side-mini-panel .mini-nav .mini-nav-item > a {
  background: var(--redesign-sidebar-bg) !important;
}

/* Sidebar toggler */
.side-mini-panel .sidebartoggler {
  color: var(--redesign-sidebar-text) !important;
  opacity: 0.7;
}

/* -----------------------------------------------------------------------------
   4. BUTTONS
   ----------------------------------------------------------------------------- */

/* Global squared button style (Fomantic-like) */
.btn {
  border-radius: 0 !important;
}

.btn-outline-primary {
  color: var(--main-color, #5dbecc) !important;
  border-color: var(--main-color, #5dbecc) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary.active,
.btn-outline-primary:focus {
  background-color: var(--main-color, #5dbecc) !important;
  color: white !important;
}

/* -----------------------------------------------------------------------------
   5. FORM CONTROLS
   ----------------------------------------------------------------------------- */

.form-control,
.form-select {
  border: 1px solid var(--redesign-border);
  border-radius: 0;
  padding: 10px 16px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--redesign-primary);
  box-shadow: 0 0 0 0.15rem rgba(93, 190, 204, 0.2);
}

.form-label {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

/* -----------------------------------------------------------------------------
   6. DASHBOARD & CONTENT AREA
   ----------------------------------------------------------------------------- */

/* Fundo neutro e plano: sem degradê de tonalidades competindo com a cor da clínica */
.page-wrapper > .body-wrapper {
  background: #f5f7fa;
}

.card {
  border: none;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

.card-header {
  background-color: #fff;
  border-bottom: 1px solid var(--redesign-border);
}

/* Topbar */
.topbar {
  background-color: #fff;
  border-bottom: 1px solid var(--redesign-border);
}

/* -----------------------------------------------------------------------------
   7. PATIENT PORTAL
   ----------------------------------------------------------------------------- */

.patient-sidebar .sidebar-link.active,
.patient-sidebar .nav-link.active {
  background: rgba(255,255,255,0.2);
  border-radius: 0;
}

/* -----------------------------------------------------------------------------
   8. DATATABLES & SECONDARY COMPONENTS
   ----------------------------------------------------------------------------- */

/* 8.1 DataTable card wrapper */
.datatables .card {
  border: 1px solid #f3f4f6 !important;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.1), 0px 2px 4px rgba(0,0,0,0.1) !important;
}

/* 8.2 Table headers */
table.dataTable thead th,
table.dataTable thead td {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #364153 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 12px 16px !important;
  background: transparent !important;
}

/* 8.2.1 Hide ghost thead inside scrollBody (DataTables scrollX clone) */
.dataTables_scrollBody table.dataTable thead th,
.dataTables_scrollBody table.dataTable thead td {
  padding: 0 !important;
  border: none !important;
  height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  overflow: hidden !important;
}

/* 8.3 Sort indicators */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
  color: #9ca3af !important;
  opacity: 0.7 !important;
}

/* 8.4 Table body rows */
table.dataTable tbody td {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  color: #101828 !important;
  border-bottom: 1px solid #f3f4f6 !important;
  padding: 12px 16px !important;
}

/* Override Bootstrap border color for table rows */
.table > :not(caption) > * > * {
  border-bottom-color: #f3f4f6 !important;
}

/* Remove hover background on rows */
table.dataTable tbody tr:hover {
  background-color: transparent !important;
}

/* 8.5 Hide length/items per page dropdown */
.dataTables_wrapper .dataTables_length {
  display: none !important;
}

/* 8.6 Info bar and bottom layout */
.dataTables_wrapper .bottom,
.dataTables_wrapper .dataTables_info + .dataTables_paginate,
.dataTables_wrapper > :last-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 0 0;
}

.dataTables_wrapper .dataTables_info {
  font-size: 14px !important;
  color: #4a5565 !important;
  padding: 0 !important;
}

/* 8.7 Pagination - square bordered buttons */
.dataTables_wrapper .dataTables_paginate {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}

.dataTables_paginate .paginate_button {
  border: 1px solid #d1d5dc !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 5px 13px !important;
  font-size: 14px !important;
  color: #364153 !important;
  background: transparent !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.dataTables_paginate .paginate_button:hover {
  background: #f3f4f6 !important;
  border-color: #d1d5dc !important;
  color: #364153 !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: var(--redesign-primary) !important;
  border-color: var(--redesign-primary) !important;
  color: #fff !important;
  border-radius: 0 !important;
}

.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.5 !important;
  cursor: default !important;
  background: transparent !important;
  color: #364153 !important;
}

/* 8.8 Search input inside datatables */
.datatables .form-control {
  border: 1px solid #d1d5dc !important;
  border-radius: 0 !important;
  font-size: 14px !important;
}

/* Badges */
.bg-success {
  background-color: var(--redesign-green) !important;
}

/* Modals */
.modal-content {
  border-radius: 0;
  border-color: var(--redesign-border);
}

/* -----------------------------------------------------------------------------
   9. SIDEBAR PROFILE - Fixed at bottom
   ----------------------------------------------------------------------------- */

.left-sidebar.with-vertical > div {
  position: relative;
  height: 100%;
}

.sidebar-profile {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 17px 16px;
  border-top: 1px solid var(--redesign-sidebar-border);
  background: var(--redesign-sidebar-bg);
  z-index: 10;
}

.sidebar-profile-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  text-decoration: none;
  min-width: 0;
}

.sidebar-profile-info:hover {
  text-decoration: none;
}

.sidebar-profile-avatar {
  border-radius: 50%;
  flex-shrink: 0;
}

.sidebar-profile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-profile-name {
  color: var(--redesign-sidebar-text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile-role {
  color: var(--redesign-sidebar-text);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.6;
}

.sidebar-profile-logout {
  color: var(--redesign-sidebar-text);
  font-size: 18px;
  padding: 4px;
  flex-shrink: 0;
  opacity: 0.7;
  text-decoration: none;
}

.sidebar-profile-logout:hover {
  color: var(--redesign-sidebar-text) !important;
}

/* Ensure scroll area has padding for fixed profile + active call banner */
.scroll-sidebar {
  padding-bottom: 120px !important;
}

/* -----------------------------------------------------------------------------
   9.1 ACTIVE CALL BANNER - Above sidebar profile
   ----------------------------------------------------------------------------- */

.sidebar-active-call {
  position: absolute;
  bottom: 74px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(0, 188, 125, 0.12);
  border-top: 1px solid rgba(0, 188, 125, 0.25);
  border-bottom: 1px solid rgba(0, 188, 125, 0.25);
  color: #00bc7d;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  z-index: 10;
  transition: background 0.2s;
}

.sidebar-active-call:hover {
  background: rgba(0, 188, 125, 0.2);
  color: #00bc7d;
  text-decoration: none;
}

.sidebar-active-call__dot {
  width: 8px;
  height: 8px;
  background: #00bc7d;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 188, 125, 0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(0, 188, 125, 0); }
}

.sidebar-active-call__text {
  flex: 1;
}

.sidebar-active-call__arrow {
  font-size: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.sidebar-active-call:hover .sidebar-active-call__arrow {
  opacity: 1;
}

/* -----------------------------------------------------------------------------
   10. TOPBAR - Hide on desktop, keep on mobile
   ----------------------------------------------------------------------------- */

@media (min-width: 1300px) {
  .topbar {
    display: none !important;
  }

  .body-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .page-wrapper > .body-wrapper {
    min-height: 100vh;
  }
}

/* -----------------------------------------------------------------------------
   11. CONTENT HEADER - White bar replacing topbar as page title
   ----------------------------------------------------------------------------- */

.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--redesign-border);
}

.content-header-left {
  min-width: 0;
}

.content-header-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.2;
}

.content-header .breadcrumb {
  font-size: 13px;
  margin-bottom: 0;
}

.content-header .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
}

.content-header-right {
  flex-shrink: 0;
}

/* Inline period filter inside content header */
.content-header .period-filter-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.content-header .period-filter-inline .period-date-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6c757d;
  font-size: 14px;
  white-space: nowrap;
}

.content-header .period-filter-inline input[type="date"] {
  border: none;
  background: transparent;
  padding: 4px 2px;
  font-size: 13px;
  color: var(--redesign-text-dark);
  width: 130px;
  cursor: pointer;
}

.content-header .period-filter-inline input[type="date"]:focus {
  outline: none;
  border-bottom: 2px solid var(--redesign-primary);
}

/* Hide date inputs by default, show date label text instead */
.content-header .period-filter-inline .period-date-inputs {
  display: none;
}

.content-header .period-filter-inline.editing .period-date-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.content-header .period-filter-inline.editing .period-date-label {
  display: none;
}

/* Mobile: stack content header vertically */
@media (max-width: 991.98px) {
  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
  }

  .content-header-right {
    width: 100%;
  }

  .content-header .period-filter-inline {
    flex-wrap: wrap;
    width: 100%;
  }

  .content-header .period-filter-inline input[type="date"] {
    flex: 1;
    min-width: 120px;
  }
}

/* -----------------------------------------------------------------------------
   12. DASHBOARD - Redesigned cards
   ----------------------------------------------------------------------------- */

/* Card "Pacientes Online" - identidade da clinica.
   Cor unica configurada, sem degrade nem tonalidades derivadas.
   O texto usa --main-color-contrast (calculado no backend a partir da cor da
   clinica) e a transparencia abaixo existe apenas para separar os blocos. */
.dash-patients-online {
  background: var(--main-color, #5dbecc) !important;
  color: var(--main-color-contrast, #fff);
  box-shadow: 0px 20px 25px rgba(0,0,0,0.1), 0px 8px 10px rgba(0,0,0,0.1) !important;
  border-radius: 0;
}

.dash-patients-online .card-body {
  padding: 32px;
}

.dash-patients-online .dash-title {
  font-size: 14px;
  color: var(--main-color-contrast, #fff);
  opacity: 0.75;
  margin-bottom: 4px;
}

.dash-patients-online .dash-number {
  font-size: 48px;
  font-weight: 700;
  color: var(--main-color-contrast, #fff);
  line-height: 1.1;
  margin-bottom: 4px;
}

.dash-patients-online .dash-subtitle {
  font-size: 14px;
  color: var(--main-color-contrast, #fff);
  opacity: 0.75;
}

.dash-patients-icon {
  width: 56px;
  height: 56px;
  background: color-mix(in srgb, var(--main-color-contrast, #fff) 20%, transparent);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color-contrast, #fff);
  flex-shrink: 0;
}

/* Sub-stats grid at bottom of the clinic-colored card */
.dash-substats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.dash-substats .dash-substat-box {
  background: color-mix(in srgb, var(--main-color-contrast, #fff) 12%, transparent);
  border-radius: 0;
  padding: 16px;
}

.dash-substats .dash-substat-label {
  font-size: 12px;
  color: var(--main-color-contrast, #fff);
  opacity: 0.75;
  margin-bottom: 4px;
}

.dash-substats .dash-substat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--main-color-contrast, #fff);
  line-height: 1.2;
}

/* Stacked side cards (Agendamentos / Consultas) */
.dash-side-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.1), 0px 2px 4px rgba(0,0,0,0.1);
  border-radius: 0;
}

.dash-side-card .card-body {
  padding: 25px;
}

.dash-side-card .dash-side-number {
  font-size: 30px;
  font-weight: 700;
  color: #101828;
  line-height: 1;
}

.dash-side-card .dash-side-label {
  font-size: 16px;
  color: #4a5565;
  font-weight: 600;
  margin-bottom: 0;
}

.dash-side-card .dash-side-sublabel {
  font-size: 14px;
  color: #99a1af;
}

/* Stat icon for stacked cards */
.dash-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-stat-icon-primary {
  background: #ffedd4;
  color: #f59d0b;
}

.dash-stat-icon-success {
  background: #dcfce7;
  color: #16a34a;
}

/* Row 2 stat cards */
.dash-stat-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.1), 0px 2px 4px rgba(0,0,0,0.1);
  border-radius: 0;
}

.dash-stat-card .card-body {
  padding: 21px;
}

.dash-stat-card .dash-stat-label {
  font-size: 14px;
  color: #4a5565;
}

.dash-stat-card .dash-stat-number {
  font-size: 30px;
  font-weight: 700;
  color: #101828;
  line-height: 1.2;
}

/* Stat dot indicators - square, not round */
.dash-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  display: inline-block;
  flex-shrink: 0;
}

/* Chart and table cards consistent styling */
.dash-chart-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.1), 0px 2px 4px rgba(0,0,0,0.1);
  border-radius: 0;
}