/*
  Real-estate agency theme overrides.
  Loaded automatically last (see application/helpers/assets_helper.php),
  after style.css / vendor-admin.css / tailwind.css, so plain selectors
  here win the cascade without needing a rebuild of any compiled bundle.
*/

:root {
  --re-navy-950: #0b1220;
  --re-navy-900: #111c30;
  --re-navy-800: #1b2942;
  --re-navy-700: #253654;
  --re-accent: #b8863b;
  --re-accent-dark: #96692e;
  --re-accent-soft: rgba(184, 134, 59, 0.16);
  --re-sidebar-text: #b7c2d6;
  --re-sidebar-text-muted: #7d8bab;
  --re-sidebar-text-active: #ffffff;
  --re-surface: #ffffff;
  --re-surface-muted: #f4f6fa;
  --re-border: #e2e8f0;
  --re-text: #0f172a;
  --re-text-muted: #55617a;
  --re-success: #157a4a;
  --re-danger: #b3261e;
  --re-radius-lg: 16px;
  --re-radius-md: 12px;
  --re-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
}

/* ---------- Base surfaces & contrast ---------- */

body,
#wrapper {
  background: var(--re-surface-muted);
}

body {
  color: var(--re-text);
}

/* Original theme used a very light gray (#6b7280 family) at low weight in
   several places; bump to a darker, still-neutral gray so body copy meets
   WCAG AA contrast on white cards. */
.text-muted,
.dataTables_info,
.dataTables_empty {
  color: var(--re-text-muted) !important;
}

/* ---------- Topbar ---------- */

#header {
  background: var(--re-surface);
  border-bottom: 1px solid var(--re-border);
  box-shadow: none;
}

#logo .logo-text,
#logo .logo-text:hover {
  color: var(--re-navy-900);
}

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

.sidebar {
  background: var(--re-navy-950);
  border-right: 1px solid var(--re-navy-900);
}

[dir="rtl"] .sidebar {
  border-left: 1px solid var(--re-navy-900);
}

.sidebar ul.nav li a {
  color: var(--re-sidebar-text);
}

.sidebar ul.nav li a i.menu-icon {
  color: var(--re-sidebar-text-muted);
}

.sidebar>ul.nav>li:hover a:first-child,
.sidebar>ul.nav>li.active a:first-child {
  background: var(--re-navy-800);
  border: 1px solid var(--re-navy-700);
  box-shadow: none;
}

.sidebar ul.nav li.active>a,
.sidebar ul.nav>li>a:hover,
.sidebar ul.nav>li>a:focus,
.sidebar ul.nav li.active>a .menu-icon,
.sidebar ul.nav>li>a:hover .menu-icon,
.sidebar ul.nav>li>a:focus .menu-icon {
  color: var(--re-sidebar-text-active);
}

.sidebar ul.nav li.active>a {
  box-shadow: inset 2px 0 0 var(--re-accent);
}

.sidebar ul.nav li .nav-second-level li a {
  color: var(--re-sidebar-text);
}

.sidebar ul.nav li .nav-second-level li.active a,
.sidebar ul.nav>li .nav-second-level>li:not(.active)>a:hover,
.sidebar ul.nav>li .nav-second-level>li:not(.active)>a:focus,
.sidebar ul.nav li .nav-second-level a:hover .menu-icon,
.sidebar ul.nav li .nav-second-level a:focus .menu-icon {
  color: var(--re-sidebar-text-active);
}

#setup-menu>li:first-child {
  color: var(--re-sidebar-text);
  border-bottom-color: var(--re-navy-800);
}

/* Sidebar profile card sits on a dark background now, regardless of the
   light/dark sidebar option, so force its light-on-dark styling. */
.sidebar-user-profile .profile {
  background: var(--re-navy-900) !important;
  border-color: var(--re-navy-700) !important;
  color: var(--re-sidebar-text-active) !important;
}

.sidebar-user-profile .profile span {
  color: var(--re-sidebar-text) !important;
}

.sidebar-user-profile .profile .tw-font-semibold {
  color: var(--re-sidebar-text-active) !important;
}

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

.btn-primary {
  background-color: var(--re-accent);
  border-color: var(--re-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--re-accent-dark);
  border-color: var(--re-accent-dark);
}

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

.top_stats_wrapper,
.widget,
.panel_s {
  background: var(--re-surface);
  border: 1px solid var(--re-border);
  border-radius: var(--re-radius-md);
  box-shadow: var(--re-shadow-card);
}

/* ---------- Dashboard hero banner ---------- */

.re-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(135deg, var(--re-navy-950) 0%, var(--re-navy-800) 60%, var(--re-accent-dark) 130%);
  border-radius: var(--re-radius-lg);
  padding: 28px 32px;
  margin-bottom: 20px;
  color: #ffffff;
}

.re-hero-title {
  margin: 0 0 6px 0;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
}

.re-hero-subtitle {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

.re-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.re-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.re-hero-btn-primary {
  background: var(--re-accent);
  color: #ffffff;
  border: 1px solid var(--re-accent);
}

.re-hero-btn-primary:hover,
.re-hero-btn-primary:focus {
  background: var(--re-accent-dark);
  border-color: var(--re-accent-dark);
  color: #ffffff;
}

.re-hero-btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.re-hero-btn-ghost:hover,
.re-hero-btn-ghost:focus {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

@media (max-width: 767px) {
  .re-hero {
    padding: 22px;
  }
}

/* ---------- Dashboard quick-stat cards ---------- */

.re-stat-card {
  padding: 18px 20px 20px 20px;
}

.re-stat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.re-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
}

.re-stat-card-amber .re-stat-icon {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

.re-stat-card-emerald .re-stat-icon {
  background: rgba(16, 185, 129, 0.12);
  color: var(--re-success);
}

.re-stat-card-primary .re-stat-icon {
  background: var(--re-accent-soft);
  color: var(--re-accent-dark);
}

.re-stat-card-neutral .re-stat-icon {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.re-stat-figure {
  font-size: 22px;
  font-weight: 700;
  color: var(--re-text);
  line-height: 1;
}

.re-stat-figure-total {
  font-size: 14px;
  font-weight: 500;
  color: var(--re-text-muted);
  margin-left: 2px;
}

.re-stat-label {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--re-text-muted);
}

.re-stat-row {
  margin-left: -6px;
  margin-right: -6px;
}

.re-stat-row > div {
  padding-left: 6px;
  padding-right: 6px;
}