/* ============================================================
   SmartPanel — custom.css
   Modern refresh: Inter font, unified radius, softer shadows,
   better tables/forms/buttons. Works with horizontal & vertical
   layouts and all built-in header skins (theme-*).
   Load this AFTER layout.css so it wins the cascade.
   ============================================================ */

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

:root {
  --sp-radius: 10px;
  --sp-radius-sm: 8px;
  --sp-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
  --sp-shadow-hover: 0 4px 8px rgba(16, 24, 40, .08), 0 12px 32px rgba(16, 24, 40, .10);
  --sp-border: #e6e8ef;
  --sp-text: #1f2937;
  --sp-text-muted: #6b7280;
  --sp-bg: #f5f6fa;
}

/* ---------- Typography ---------- */
body {
  font-family: 'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--sp-text);
  background-color: var(--sp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .card-title, .page-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}
small, .text-muted { color: var(--sp-text-muted) !important; }

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius) !important;
  box-shadow: var(--sp-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--sp-shadow-hover); }
.card-header {
  border-top-left-radius: var(--sp-radius) !important;
  border-top-right-radius: var(--sp-radius) !important;
  background: transparent;
  border-bottom: 1px solid var(--sp-border);
}
.card-title { font-size: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--sp-radius-sm) !important;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn-primary { box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.btn-lg { padding: .65rem 1.4rem; }

/* pill buttons stay pill */
.btn.round, .btn-pill { border-radius: 50rem !important; }

/* ---------- Forms ---------- */
.form-control, .custom-select, select.form-control {
  border-radius: var(--sp-radius-sm) !important;
  border: 1.5px solid var(--sp-border);
  transition: border-color .15s ease, box-shadow .15s ease;
  min-height: 42px;
}
.form-control:focus, .custom-select:focus {
  border-color: #7c9bff;
  box-shadow: 0 0 0 3px rgba(90, 120, 255, .12);
}
.form-control.square { border-radius: var(--sp-radius-sm) !important; } /* override old square inputs */
label, .form-label { font-weight: 600; font-size: .84rem; margin-bottom: .35rem; }
textarea.form-control { min-height: 90px; }

/* ---------- Tables ---------- */
.table thead th {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sp-text-muted);
  border-bottom: 1px solid var(--sp-border) !important;
  background: #fafbfc;
}
.table td { vertical-align: middle; }
.table-hover tbody tr { transition: background .12s ease; }
.table-hover tbody tr:hover { background: #f6f8ff; }
.card .table { margin-bottom: 0; }

/* ---------- Badges / status labels ---------- */
.badge, .status, .label {
  border-radius: 50rem !important;
  font-weight: 600;
  padding: .35em .8em;
  letter-spacing: .02em;
}

/* ---------- Modals ---------- */
.modal-content {
  border-radius: var(--sp-radius) !important;
  border: none !important;
  box-shadow: 0 24px 64px rgba(16, 24, 40, .22);
}
.modal-header { border-bottom: 1px solid var(--sp-border); }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--sp-radius-sm); border: none; }

/* ---------- Dropdown menus ---------- */
.dropdown-menu {
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-border);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
  padding: .4rem;
}
.dropdown-item { border-radius: 6px; padding: .45rem .75rem; }
.dropdown-item:hover { background: #f2f4ff; }

/* ---------- Header (horizontal layout) ---------- */
.header.top { box-shadow: 0 1px 0 rgba(16, 24, 40, .06); }
.nav-tabs .nav-link { border-radius: var(--sp-radius-sm) var(--sp-radius-sm) 0 0; font-weight: 600; }

/* ---------- Sidebar (vertical layout) ---------- */
.vertical-menu .sidebar,
.vertical-menu aside {
  border-right: 1px solid var(--sp-border);
}
.vertical-menu .sidebar a { border-radius: var(--sp-radius-sm); transition: background .12s ease; }

/* ---------- Add funds: uniform payment icons ---------- */
.add-funds-form-content img { max-height: 56px; object-fit: contain; }

/* ---------- Pagination ---------- */
.pagination .page-link {
  border-radius: var(--sp-radius-sm) !important;
  margin: 0 3px;
  border: 1px solid var(--sp-border);
  font-weight: 600;
}

/* ---------- Scrollbar (WebKit) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cfd4e0; border-radius: 10px; border: 2px solid var(--sp-bg); }
::-webkit-scrollbar-thumb:hover { background: #b6bcce; }

/* ---------- Page loader ---------- */
#page-overlay { backdrop-filter: blur(2px); }

/* ---------- Small polish ---------- */
a { transition: color .12s ease; }
img { image-rendering: -webkit-optimize-contrast; }
.custom-switch-description { font-weight: 500; }