/* ==========================================================================
   Futuristic override for R and Sons Realty
   --------------------------------------------------------------------------
   Layered ON TOP of black-dashboard.css. Loaded last in layouts/app.blade.php
   so it wins on equal specificity. Nothing here changes markup or behaviour:
   delete the <link> tag and the app returns to the stock Creative Tim theme.

   black-dashboard is natively dark; its `white-content` body class flips it to
   light. This file commits to dark by default, but body.white-content now has
   a real light variant of the SAME design (glass surfaces, same accents,
   same radii) rather than falling back to the stock 2018-era light theme --
   see the "Light theme" section near the end of this file. The switch that
   toggles it lives in the fixed-plugin panel (layouts/app.blade.php).

   !important is used deliberately and often: black-dashboard is ~728KB of
   generated CSS with high-specificity selectors, and this file must beat it
   without touching any of the 39 blade views.
   ========================================================================== */

:root {
  /* Base */
  --fx-bg-0: #060912;
  --fx-bg-1: #0b1120;
  --fx-bg-2: #111a2e;

  /* Glass surfaces */
  --fx-surface: rgba(255, 255, 255, 0.045);
  --fx-surface-hi: rgba(255, 255, 255, 0.075);
  --fx-border: rgba(255, 255, 255, 0.09);
  --fx-border-hi: rgba(255, 255, 255, 0.18);

  /* Type */
  --fx-text: #e8eefc;
  --fx-text-dim: #8ca0c0;
  --fx-text-faint: #64789b;

  /* Accents */
  --fx-cyan: #22d3ee;
  --fx-violet: #8b5cf6;
  --fx-green: #34d399;
  --fx-amber: #fbbf24;
  --fx-red: #fb7185;

  --fx-glow-cyan: rgba(34, 211, 238, 0.35);
  --fx-glow-violet: rgba(139, 92, 246, 0.35);

  --fx-radius: 14px;
  --fx-radius-sm: 9px;
}

/* Light-mode palette. Every rule below reads these via var(--fx-*), so
   redefining them here re-themes the whole app for free -- EXCEPT the
   handful of rules (flagged in the "Light theme" section near the end of
   this file) that hardcode a literal color instead of a variable, usually
   because they were written as a "white glass on dark canvas" trick
   (rgba(255,255,255,X%)) that inverts to invisible on a light canvas, or a
   literal dark navy assuming the canvas is always dark.

   Accent hues are deepened from their dark-mode versions, not reused as-is:
   #22d3ee/#8b5cf6/#34d399/#fbbf24/#fb7185 are light, glowy colors chosen to
   pop against a near-black background, and fail WCAG contrast as *text* on
   a white one. The decorative low-opacity glows/gradients that use the
   dark-mode hex directly (box-shadows, hover washes) are left as literals
   in both themes -- they're translucent decoration, not text, so contrast
   isn't a concern and they read fine on either canvas. */
body.white-content {
  --fx-bg-0: #f4f6fb;
  --fx-bg-1: #e9edf6;
  --fx-bg-2: #ffffff;

  --fx-surface: rgba(15, 23, 42, 0.035);
  --fx-surface-hi: rgba(15, 23, 42, 0.06);
  --fx-border: rgba(15, 23, 42, 0.10);
  --fx-border-hi: rgba(15, 23, 42, 0.18);

  --fx-text: #101826;
  --fx-text-dim: #48566e;
  --fx-text-faint: #7c8aa3;

  --fx-cyan: #0891b2;
  --fx-violet: #7c3aed;
  --fx-green: #059669;
  --fx-amber: #b45309;
  --fx-red: #dc2626;

  --fx-glow-cyan: rgba(8, 145, 178, 0.25);
  --fx-glow-violet: rgba(124, 58, 237, 0.22);
}

/* --------------------------------------------------------------------------
   Canvas
   -------------------------------------------------------------------------- */

body,
body.white-content {
  background-color: var(--fx-bg-0) !important;
  color: var(--fx-text) !important;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Ambient depth. Fixed so it does not scroll with content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(34, 211, 238, 0.10), transparent 60%),
    radial-gradient(800px 600px at 88% 0%, rgba(139, 92, 246, 0.10), transparent 55%),
    radial-gradient(1000px 800px at 50% 110%, rgba(34, 211, 238, 0.05), transparent 60%),
    linear-gradient(180deg, var(--fx-bg-0) 0%, var(--fx-bg-1) 100%);
}

.wrapper,
.main-panel,
.content {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.main-panel,
body.white-content .main-panel {
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.sidebar,
body.white-content .sidebar,
.sidebar[data]:after,
.sidebar .sidebar-wrapper {
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar {
  background: linear-gradient(180deg, rgba(17, 26, 46, 0.92), rgba(11, 17, 32, 0.92)) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid var(--fx-border) !important;
}

/* black-dashboard paints the sidebar colour via an ::after overlay. */
.sidebar:after,
.sidebar[data="blue"]:after {
  background: transparent !important;
  opacity: 0 !important;
}

.sidebar .logo,
body.white-content .sidebar .logo {
  border-bottom: 1px solid var(--fx-border) !important;
}

.sidebar .logo .simple-text,
.sidebar .logo a.simple-text {
  color: var(--fx-text) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
}

.sidebar .nav li > a,
body.white-content .sidebar .nav li > a {
  color: var(--fx-text-dim) !important;
  border-radius: var(--fx-radius-sm) !important;
  margin: 3px 12px !important;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.sidebar .nav li > a:hover,
.sidebar .nav li > a:focus {
  background: var(--fx-surface-hi) !important;
  color: var(--fx-text) !important;
}

.sidebar .nav li.active > a,
body.white-content .sidebar .nav li.active > a {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.16), rgba(139, 92, 246, 0.10)) !important;
  color: #fff !important;
  box-shadow: inset 2px 0 0 var(--fx-cyan), 0 0 22px -8px var(--fx-glow-cyan) !important;
}

.sidebar .nav i,
.sidebar .nav p {
  color: inherit !important;
}

/* --------------------------------------------------------------------------
   Top navbar
   -------------------------------------------------------------------------- */

.navbar,
.navbar.navbar-absolute,
body.white-content .navbar {
  background: rgba(11, 17, 32, 0.62) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fx-border) !important;
  box-shadow: none !important;
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar p,
body.white-content .navbar .navbar-brand {
  color: var(--fx-text) !important;
}

.navbar .navbar-toggler-bar {
  background: var(--fx-text-dim) !important;
}

/* --------------------------------------------------------------------------
   Cards / panels
   -------------------------------------------------------------------------- */

.card,
body.white-content .card {
  background: var(--fx-surface) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--fx-border) !important;
  border-radius: var(--fx-radius) !important;
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.85) !important;
  color: var(--fx-text) !important;
}

.card .card-header,
body.white-content .card .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--fx-border) !important;
  padding: 18px 22px !important;
}

.card .card-header h2,
.card .card-header h3,
.card .card-header h4,
.card .card-title {
  color: var(--fx-text) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* A hairline of accent along the top edge of every card. */
.card > .card-header:first-child {
  position: relative;
}
.card > .card-header:first-child::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fx-cyan), var(--fx-violet), transparent);
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
body.white-content h1, body.white-content h2, body.white-content h3,
body.white-content h4, body.white-content h5, body.white-content h6 {
  color: var(--fx-text) !important;
}

p, label, span,
body.white-content p, body.white-content label {
  color: inherit;
}

a { color: var(--fx-cyan); }
a:hover { color: #67e8f9; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table,
body.white-content .table,
.table > tbody > tr > td,
.table > thead > tr > th {
  color: var(--fx-text) !important;
  border-color: var(--fx-border) !important;
}

.table thead th,
.table > thead > tr > th,
.table .thead-light th,
body.white-content .table > thead > tr > th {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--fx-text-dim) !important;
  border-bottom: 1px solid var(--fx-border-hi) !important;
  border-top: 0 !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 14px 12px !important;
  white-space: nowrap;
}

.table > tbody > tr {
  transition: background-color 0.14s ease;
}

.table > tbody > tr > td {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 13px 12px !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
}

.table > tbody > tr:hover,
body.white-content .table > tbody > tr:hover {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.07), rgba(139, 92, 246, 0.04)) !important;
}

/* Row number column reads as a quiet index, not data. */
.table > tbody > tr > th[scope="row"],
.table > tbody > tr > td:first-child {
  color: var(--fx-text-faint) !important;
  font-variant-numeric: tabular-nums;
}

/* Money and OR numbers line up when tabular. */
.table td {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  border-radius: var(--fx-radius-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary,
.btn-info,
body.white-content .btn-primary {
  background-image: linear-gradient(135deg, var(--fx-cyan), var(--fx-violet)) !important;
  background-color: transparent !important;
  border: 0 !important;
  color: #04121a !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 26px -10px var(--fx-glow-cyan) !important;
}

.btn-primary:hover,
.btn-info:hover {
  box-shadow: 0 12px 34px -8px var(--fx-glow-violet) !important;
  color: #04121a !important;
}

/* Outline buttons -> ghost chips. These are the Edit/delete row actions. */
.btn-outline-success,
.btn-outline-info,
.btn-outline-primary,
.btn-outline-danger,
.btn-outline-secondary {
  background: var(--fx-surface) !important;
  border: 1px solid var(--fx-border-hi) !important;
  color: var(--fx-text-dim) !important;
  box-shadow: none !important;
}

.btn-outline-success:hover {
  background: rgba(52, 211, 153, 0.14) !important;
  border-color: var(--fx-green) !important;
  color: var(--fx-green) !important;
}

.btn-outline-info:hover,
.btn-outline-primary:hover {
  background: rgba(34, 211, 238, 0.14) !important;
  border-color: var(--fx-cyan) !important;
  color: var(--fx-cyan) !important;
}

.btn-outline-danger:hover,
.unlist:hover {
  background: rgba(251, 113, 133, 0.14) !important;
  border-color: var(--fx-red) !important;
  color: var(--fx-red) !important;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

/* Matched by exclusion, not by listing types: `input[type="text"]` does NOT
   match a bare <input name="x"> with no type attribute, which would leave it
   black-on-dark and invisible. */
.form-control,
body.white-content .form-control,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--fx-border) !important;
  border-radius: var(--fx-radius-sm) !important;
  color: var(--fx-text) !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease !important;
}

.form-control:focus,
body.white-content .form-control:focus,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--fx-cyan) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16) !important;
  color: var(--fx-text) !important;
  outline: none !important;
}

.form-control::placeholder { color: var(--fx-text-faint) !important; }

/* Labels: quiet and consistent, so the values are what you read first. */
.form-group > label,
body.white-content .form-group > label {
  color: var(--fx-text-dim) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px !important;
}

/* One height for every control. The select2 client picker, the native selects
   and the text inputs all rendered at different heights, which made each row
   look ragged. */
.form-control,
select.form-control,
input.form-control,
.custom-select,
.select2-container--default .select2-selection--single {
  height: 42px !important;
  min-height: 42px !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
}

textarea.form-control {
  height: auto !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  resize: vertical;
}

/* #totaltopay is a <p> wearing .form-control, so it needs the line-height to
   sit its text where an input's would. It is a computed total: give it weight. */
.totaltopay .form-control,
p#totaltopay {
  line-height: 26px !important;
  margin-bottom: 0 !important;
  color: var(--fx-text) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}

/* Readonly fields are context, not input. Make that legible at a glance. */
.form-control[readonly] {
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--fx-text-dim) !important;
  cursor: default;
}
.form-control[readonly]:focus {
  border-color: var(--fx-border) !important;
  box-shadow: none !important;
}

/* Money-ish inputs align on the decimal. */
#Paid, #Monthly, #Penalty, #contractPrice, #monthlyAmortization {
  font-variant-numeric: tabular-nums;
}

/* Form footer: separates the commit action from the fields instead of leaving
   the submit button orphaned in the corner. */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--fx-border);
}

.form-actions .btn {
  min-width: 168px;
  padding: 11px 22px !important;
}

@media (max-width: 575.98px) {
  .form-actions { justify-content: stretch; }
  .form-actions .btn { width: 100%; }
}

/* Native dropdown lists render with the OS palette otherwise. */
select option {
  background: var(--fx-bg-2) !important;
  color: var(--fx-text) !important;
}

/* --------------------------------------------------------------------------
   DataTables chrome
   -------------------------------------------------------------------------- */

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: var(--fx-text-dim) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--fx-border) !important;
  border-radius: var(--fx-radius-sm) !important;
  color: var(--fx-text) !important;
  padding: 6px 10px !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--fx-cyan) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--fx-radius-sm) !important;
  color: var(--fx-text-dim) !important;
  margin: 0 2px !important;
  padding: 5px 11px !important;
  transition: all 0.15s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--fx-surface-hi) !important;
  border-color: var(--fx-border-hi) !important;
  color: var(--fx-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg, var(--fx-cyan), var(--fx-violet)) !important;
  border-color: transparent !important;
  color: #04121a !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 20px -8px var(--fx-glow-cyan) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: rgba(140, 160, 192, 0.35) !important;
  background: transparent !important;
  border-color: transparent !important;
}

/* Sort arrows: dim by default, accent once active. */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
  opacity: 0.25 !important;
}
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
  opacity: 0.95 !important;
  color: var(--fx-cyan) !important;
}

/* Server-side "Loading..." overlay for Payment History. */
.dataTables_wrapper .dataTables_processing {
  background: rgba(17, 26, 46, 0.92) !important;
  border: 1px solid var(--fx-border-hi) !important;
  border-radius: var(--fx-radius-sm) !important;
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.9) !important;
  color: var(--fx-cyan) !important;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */

.modal-content,
body.white-content .modal-content {
  background: linear-gradient(180deg, rgba(17, 26, 46, 0.98), rgba(11, 17, 32, 0.98)) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--fx-border-hi) !important;
  border-radius: var(--fx-radius) !important;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95) !important;
  color: var(--fx-text) !important;
}

.modal-header,
.modal-footer,
body.white-content .modal-header {
  border-color: var(--fx-border) !important;
}

.modal-header .close,
.modal-header .close span {
  color: var(--fx-text-dim) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.modal-header .close:hover span { color: var(--fx-red) !important; }

.modal-backdrop.show { opacity: 0.7 !important; }

/* --------------------------------------------------------------------------
   Alerts / badges
   -------------------------------------------------------------------------- */

.alert {
  border-radius: var(--fx-radius-sm) !important;
  border: 1px solid var(--fx-border-hi) !important;
  backdrop-filter: blur(10px);
}

.alert-success {
  background: rgba(52, 211, 153, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  color: var(--fx-green) !important;
}

.alert-danger {
  background: rgba(251, 113, 133, 0.12) !important;
  border-color: rgba(251, 113, 133, 0.4) !important;
  color: var(--fx-red) !important;
}

.badge {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   select2
   -------------------------------------------------------------------------- */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--fx-border) !important;
  border-radius: var(--fx-radius-sm) !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 4px 2px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--fx-text) !important;
  line-height: 30px !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--fx-text-faint) !important;
}

.select2-dropdown {
  background: var(--fx-bg-2) !important;
  border: 1px solid var(--fx-border-hi) !important;
  border-radius: var(--fx-radius-sm) !important;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9) !important;
}

.select2-container--default .select2-results__option {
  background: transparent !important;
  color: var(--fx-text) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.22), rgba(139, 92, 246, 0.14)) !important;
  color: #fff !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--fx-border) !important;
  border-radius: 7px !important;
  color: var(--fx-text) !important;
}

/* --------------------------------------------------------------------------
   Scrollbars
   -------------------------------------------------------------------------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fx-bg-0); }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  border: 2px solid var(--fx-bg-0);
}
::-webkit-scrollbar-thumb:hover { background: rgba(34, 211, 238, 0.45); }

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */

.dashboard-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.dashboard-head h2 { margin: 0 0 2px; }
.dashboard-sub { color: var(--fx-text-faint) !important; margin: 0; font-size: 13px; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px; /* matches the .row spacing it replaced */
}

.stat-card {
  padding: 20px !important;
  min-height: 138px;
}

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  margin-bottom: 14px;
  background: rgba(34, 211, 238, 0.14);
  color: var(--fx-cyan);
  font-size: 19px;
}
.stat-icon.accent-amber  { background: rgba(251, 191, 36, 0.14);  color: var(--fx-amber); }
.stat-icon.accent-violet { background: rgba(139, 92, 246, 0.16);  color: var(--fx-violet); }
.stat-icon.accent-green  { background: rgba(52, 211, 153, 0.14);  color: var(--fx-green); }
/* Distinct from the plain (cyan) icon and from accent-green, so "Commission
   released" reads as its own KPI rather than a restyle of an existing one. */
.stat-icon.accent-teal   { background: rgba(45, 212, 191, 0.16);  color: #2dd4bf; }

.stat-label {
  color: var(--fx-text-dim) !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.stat-value {
  color: var(--fx-text) !important;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat-value .of { color: var(--fx-text-faint); font-size: 16px; font-weight: 500; }

.stat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
}
.stat-foot .muted { color: var(--fx-text-faint) !important; }
.stat-foot .delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-foot .delta.up   { color: var(--fx-green); }
.stat-foot .delta.down { color: var(--fx-red); }

/* At-a-glance list */
.glance-list { list-style: none; margin: 0; padding: 0; }
.glance-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--fx-border);
}
.glance-list li:last-child { border-bottom: 0; }
.glance-list li span { color: var(--fx-text-dim) !important; font-size: 13px; }
.glance-list li strong { color: var(--fx-text) !important; font-variant-numeric: tabular-nums; }

/* Quick actions */
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-actions a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-radius: var(--fx-radius-sm);
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  color: var(--fx-text-dim) !important;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.quick-actions a:hover {
  background: var(--fx-surface-hi);
  border-color: var(--fx-border-hi);
  color: var(--fx-text) !important;
  transform: translateY(-1px);
}
.quick-actions a i { color: var(--fx-cyan); font-size: 16px; }

/* Right-aligned numeric cells (dashboard recent-payments amount column). */
.table td.text-right, .table th.text-right { text-align: right !important; }

/* Top agents leaderboard --------------------------------------------------- */
.top-agents { list-style: none; margin: 0; padding: 0; }
.top-agent {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 6px;
  border-bottom: 1px solid var(--fx-border);
}
.top-agent:last-child { border-bottom: 0; }
.top-agent .rank {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: var(--fx-text-dim);
  background: var(--fx-surface-hi);
  font-variant-numeric: tabular-nums;
}
/* Medals for the top three are shown as a crown over the avatar instead
   (see .crown below); the rank number itself stays plain for every row. */
.top-agent-avatar-wrap { position: relative; flex: 0 0 auto; display: inline-flex; }
.crown {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}
.crown-1 { color: #f5b301; }
.crown-2 { color: #c7ccd1; }
.crown-3 { color: #c2703a; }

.top-agent-name {
  flex: 1 1 auto;
  color: var(--fx-text) !important;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-agent-meta {
  flex: 0 0 auto;
  color: var(--fx-text-faint) !important;
  font-size: 12px;
}
.top-agent-released {
  flex: 0 0 auto;
  color: var(--fx-cyan) !important;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 130px;
  text-align: right;
}
.top-agent-amount {
  flex: 0 0 auto;
  color: var(--fx-green) !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 120px;
  text-align: right;
}

@media (max-width: 575.98px) {
  .top-agent-meta { display: none; }
  .top-agent-released { display: none; }
  .top-agent-amount { min-width: 0; }
}

/* Agent photos ------------------------------------------------------------- */
.agent-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--fx-border-hi);
  background: var(--fx-surface);
  vertical-align: middle;
}
.agent-avatar-fallback {
  color: var(--fx-cyan);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(34, 211, 238, 0.12);
}
.agent-avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 20px;
}

/* --------------------------------------------------------------------------
   Light theme (body.white-content) -- non-variable fixes
   --------------------------------------------------------------------------
   Everything above re-themes automatically via the var(--fx-*) redefinitions
   at the top of this file. These are the exceptions: rules that hardcode a
   literal color rather than a variable, either because they assumed a dark
   canvas (rgba(255,255,255,X%) "white glass" tricks that go invisible on a
   light one) or because they never used a variable at all (a literal dark
   navy for the sidebar/navbar/modal backgrounds).

   Selectors here deliberately match (or exceed) the specificity of the rule
   they're overriding, and this section is placed after all of them, so ties
   resolve by source order in our favor regardless of the exact specificity
   math per rule -- simpler to reason about than computing it per override.
   -------------------------------------------------------------------------- */

body.white-content .sidebar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(244, 246, 251, 0.90)) !important;
}

body.white-content .sidebar .nav li.active > a {
  background: linear-gradient(90deg, rgba(8, 145, 178, 0.14), rgba(124, 58, 237, 0.08)) !important;
  color: var(--fx-text) !important;
}

body.white-content .navbar {
  background: rgba(255, 255, 255, 0.72) !important;
}

body.white-content .form-control,
body.white-content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]),
body.white-content select,
body.white-content textarea {
  background: rgba(15, 23, 42, 0.035) !important;
}

body.white-content .form-control:focus,
body.white-content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
body.white-content select:focus,
body.white-content textarea:focus {
  background: rgba(15, 23, 42, 0.05) !important;
}

body.white-content .form-control[readonly] {
  background: rgba(15, 23, 42, 0.025) !important;
}

body.white-content .table > thead > tr > th {
  background: rgba(15, 23, 42, 0.03) !important;
}

body.white-content .table > tbody > tr > td {
  border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}

body.white-content .dataTables_wrapper .dataTables_length select,
body.white-content .dataTables_wrapper .dataTables_filter input {
  background: rgba(15, 23, 42, 0.035) !important;
}

body.white-content .dataTables_wrapper .dataTables_processing {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: var(--fx-border-hi) !important;
}

body.white-content .modal-content {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 253, 0.98)) !important;
}

body.white-content .select2-container--default .select2-selection--single,
body.white-content .select2-container--default .select2-selection--multiple {
  background: rgba(15, 23, 42, 0.035) !important;
}

body.white-content .select2-container--default .select2-search--dropdown .select2-search__field {
  background: rgba(15, 23, 42, 0.04) !important;
}

body.white-content::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.16) !important;
  border-color: var(--fx-bg-0) !important;
}
body.white-content::-webkit-scrollbar-thumb:hover {
  background: rgba(8, 145, 178, 0.45) !important;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
  * { transition: none !important; animation: none !important; }
}

/* Native <details> disclosure, used in place of a modal for read-only info
   (e.g. the AGENTS panel on client-property rows) that doesn't need a full
   page navigation. No JS, so it can't get stuck the way a Bootstrap modal
   could. */
.agents-details { display: inline-block; }
.agents-details > summary {
  list-style: none;
  cursor: pointer;
}
.agents-details > summary::-webkit-details-marker { display: none; }
.agents-details-body {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--fx-border-hi);
  border-radius: var(--fx-radius-sm);
  background: var(--fx-surface);
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
}