:root {
  --brand-dark: #14213d;
  --brand-dark-2: #0f1a32;
  --brand-primary: #1d4ed8;
  --brand-primary-light: #3b82f6;
  --brand-accent: #f28a24;
  --brand-accent-light: #ffad4d;
  --text-dark: #172033;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-dark);
  background: #eef2f8;
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */

.login-page {
  min-height: 100vh;
  min-height: 100svh;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 8% 15%, rgba(242, 138, 36, .14), transparent 25%),
    radial-gradient(circle at 92% 85%, rgba(59, 130, 246, .18), transparent 28%),
    linear-gradient(135deg, #eef3fb 0%, #f8fafc 52%, #edf2f9 100%);
}

.login-shell {
  width: min(1180px, 100%);
  min-height: 720px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  overflow: hidden;
  border-radius: 28px;
  background: var(--surface);
  box-shadow:
    0 30px 80px rgba(15, 23, 42, .16),
    0 8px 25px rgba(15, 23, 42, .08);
}

/* =========================================================
   LEFT BRAND PANEL
   ========================================================= */

.brand-panel {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 12% 12%, rgba(242, 138, 36, .18), transparent 22%),
    radial-gradient(circle at 90% 90%, rgba(59, 130, 246, .35), transparent 32%),
    linear-gradient(145deg, #0f1a32 0%, #14213d 45%, #1d4ed8 100%);
}

.brand-panel::before,
.brand-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.brand-panel::before {
  width: 360px;
  height: 360px;
  right: -180px;
  top: -160px;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow:
    0 0 0 55px rgba(255, 255, 255, .025),
    0 0 0 110px rgba(255, 255, 255, .018);
}

.brand-panel::after {
  width: 240px;
  height: 240px;
  left: -150px;
  bottom: -140px;
  border: 1px solid rgba(255, 255, 255, .10);
}

.brand-panel-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 720px;
  padding: 52px 56px 38px;
  display: flex;
  flex-direction: column;
}

.brand-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand-logo {
  width: 178px;
  height: auto;
  display: block;
  object-fit: contain;
  background: #ffffff;
  padding: 10px 14px;
  border-radius: 12px;
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  backdrop-filter: blur(8px);
}

.brand-badge i {
  color: var(--brand-accent-light);
}

.brand-copy {
  max-width: 570px;
  margin: auto 0;
  padding: 55px 0 45px;
}

.eyebrow,
.login-kicker {
  margin: 0 0 12px;
  color: var(--brand-accent-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

.brand-copy h1 {
  margin: 0;
  max-width: 590px;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.035em;
}

.brand-copy h1 span {
  color: #ffad4d;
}

.brand-description {
  max-width: 520px;
  margin: 22px 0 34px;
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
  line-height: 1.75;
}

.feature-list {
  display: grid;
  gap: 16px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.feature-icon {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .075);
  color: #ffad4d;
  font-size: 18px;
}

.feature-item strong {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}

.feature-item small {
  display: block;
  color: rgba(255, 255, 255, .56);
  font-size: 11px;
  line-height: 1.5;
}

.brand-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .56);
  font-size: 11px;
}

.brand-footer span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.brand-footer i {
  color: #60a5fa;
}

/* =========================================================
   RIGHT LOGIN PANEL
   ========================================================= */

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 54px 62px;
  background: #fff;
}

.login-card {
  width: 100%;
  max-width: 460px;
}

.mobile-brand {
  display: none;
}

.login-heading {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 30px;
}

.welcome-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: var(--brand-primary);
  font-size: 20px;
}

.login-heading h2 {
  margin: 0 0 6px;
  color: #172033;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
}

.login-heading p:last-child {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}

.login-kicker {
  margin-bottom: 5px;
  color: var(--brand-primary);
  font-size: 9px;
  letter-spacing: .14em;
}

.login-alert {
  border: 0;
  border-radius: 11px;
  margin-bottom: 20px;
  font-size: 12px;
}

.login-form {
  display: grid;
  gap: 20px;
}

.form-group {
  margin: 0;
}

.form-group > label,
.label-row label {
  display: block;
  margin: 0 0 8px;
  color: #263248;
  font-size: 12px;
  font-weight: 650;
}

.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.secure-label {
  color: #94a3b8;
  font-size: 10px;
}

.input-wrap {
  position: relative;
}

.input-wrap > i:first-child {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 15px;
  pointer-events: none;
}

.input-wrap .form-control {
  height: 52px;
  padding: 0 45px;
  border: 1px solid #dbe2ea;
  border-radius: 11px;
  color: #172033;
  background: #fbfcfe;
  box-shadow: none;
  font-size: 13px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.input-wrap .form-control::placeholder {
  color: #a3adbb;
}

.input-wrap .form-control:hover {
  border-color: #c6d1df;
}

.input-wrap .form-control:focus {
  border-color: #76a9fa;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.password-toggle {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 7px;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.password-toggle:hover {
  background: #f1f5f9;
  color: var(--brand-primary);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  background: #f1f5f9;
  color: var(--brand-primary);
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: -3px;
}

.remember-me {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 11px;
  cursor: pointer;
}

.remember-me input {
  position: absolute;
  opacity: 0;
}

.checkmark {
  width: 16px;
  height: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  transition: all .15s ease;
}

.remember-me input:checked + .checkmark {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  box-shadow: inset 0 0 0 3px #fff;
}

.remember-me input:focus-visible + .checkmark {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.help-text {
  color: #94a3b8;
  font-size: 10px;
  text-align: right;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s ease;
}

.help-text:hover,
.help-text:focus {
  color: var(--brand-primary);
  text-decoration: underline;
}

.login-button {
  position: relative;
  width: 100%;
  min-height: 53px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 20px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  box-shadow: 0 10px 22px rgba(29, 78, 216, .20);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.login-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 13px 28px rgba(29, 78, 216, .28);
  filter: brightness(1.03);
}

.login-button:active:not(:disabled) {
  transform: translateY(0);
}

.login-button:disabled {
  opacity: .78;
  cursor: wait;
}

.button-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.button-arrow {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, .14);
  font-size: 14px;
}

.demo-box {
  margin-top: 24px;
  padding: 15px;
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  background: #f8fafc;
}

.demo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.demo-header i {
  color: var(--brand-primary);
}

.demo-badge {
  padding: 4px 7px;
  border-radius: 999px;
  color: #92400e;
  background: #ffedd5;
  font-size: 8px;
  letter-spacing: .05em;
}

.demo-grid {
  display: grid;
  gap: 8px;
}

.demo-grid > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.demo-grid small {
  color: #94a3b8;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}

.demo-grid code {
  color: #475569;
  font-size: 9px;
  background: transparent;
  text-align: right;
}

.login-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 20px;
  color: #94a3b8;
  font-size: 9px;
  text-align: center;
}

.login-security i {
  color: #22c55e;
}

.copyright {
  margin: 13px 0 0;
  color: #b0b8c5;
  font-size: 9px;
  text-align: center;
}

.copyright span {
  padding: 0 4px;
}

/* =========================================================
   EXISTING CRM STYLES
   ========================================================= */

.app-navbar {
  background: linear-gradient(90deg, var(--brand-dark), #1e3a8a);
}

.app-navbar .nav-link {
  border-radius: 8px;
  padding: .45rem .75rem;
  transition: background-color .15s ease;
}

.app-navbar .nav-link:hover {
  background-color: rgba(255,255,255,0.08);
}

.app-navbar .nav-link.active {
  background-color: rgba(255,255,255,0.16);
  color: #fff;
  font-weight: 600;
}

.navbar-logo {
  height: 50px;
  width: auto;
  border-radius: 6px;
  background: #fff;
  padding: 3px 8px;
  object-fit: contain;
}

.login-title {
  margin-top: 0;
}

.stat-card {
  border: none;
  border-radius: 14px;
  color: #fff;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.stat-card-link {
  display: block;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.stat-card-link:hover .stat-card {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  cursor: pointer;
}

.stat-card h2 { margin: 0; font-weight: 700; }
.stat-card p { margin: 0; opacity: .9; font-size: .85rem; }

.bg-grad-blue { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.bg-grad-orange { background: linear-gradient(135deg, #ea580c, #fb923c); }
.bg-grad-green { background: linear-gradient(135deg, #15803d, #22c55e); }
.bg-grad-purple { background: linear-gradient(135deg, #6d28d9, #a855f7); }
.bg-grad-red { background: linear-gradient(135deg, #b91c1c, #ef4444); }

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

.table thead th {
  background-color: #eef1f8;
  border-bottom: none;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #475569;
}

.table td, .table th {
  vertical-align: middle;
}

.badge-status {
  font-size: .72rem;
  padding: .4em .65em;
  border-radius: 20px;
}

.status-new { background:#dbeafe; color:#1e40af; }
.status-contacted { background:#fef9c3; color:#854d0e; }
.status-interested { background:#dcfce7; color:#166534; }
.status-not-interested { background:#fee2e2; color:#991b1b; }
.status-follow-up { background:#ffedd5; color:#9a3412; }
.status-site-visit-scheduled { background:#e0e7ff; color:#3730a3; }
.status-closed-won { background:#bbf7d0; color:#14532d; }
.status-closed-lost { background:#f1f5f9; color:#334155; }
.status-dead-no-response { background:#1f2937; color:#f9fafb; }

.call-log-entry {
  border-left: 3px solid var(--brand-primary);
  padding: .6rem 1rem;
  background: #f8fafc;
  border-radius: 0 8px 8px 0;
  margin-bottom: .75rem;
}

.contact-link {
  color: #1d4ed8;
  cursor: pointer;
}

.contact-link:hover {
  color: #1e3a8a;
  text-decoration: underline !important;
}

.quick-action-btn {
  border-radius: 10px;
  padding: .6rem 1rem;
}

::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: #c7cede;
  border-radius: 10px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {
  .login-page {
    padding: 18px;
  }

  .login-shell {
    grid-template-columns: 1fr;
    max-width: 560px;
    min-height: auto;
  }

  .brand-panel {
    display: none;
  }

  .login-panel {
    padding: 42px 42px 35px;
  }

  .mobile-brand {
    display: block;
    margin-bottom: 30px;
    text-align: center;
  }

  .login-logo {
    width: 155px;
    height: auto;
    margin: 0 auto;
    display: block;
    object-fit: contain;
  }
}

@media (max-width: 560px) {
  .login-page {
    padding: 0;
    align-items: stretch;
  }

  .login-shell {
    width: 100%;
    min-height: 100svh;
    border-radius: 0;
    box-shadow: none;
  }

  .login-panel {
    padding: 34px 22px 25px;
    align-items: flex-start;
  }

  .login-card {
    max-width: none;
  }

  .login-heading {
    gap: 11px;
    margin-bottom: 25px;
  }

  .welcome-icon {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
    font-size: 17px;
  }

  .login-heading h2 {
    font-size: 22px;
  }

  .login-heading p:last-child {
    font-size: 11px;
  }

  .login-options {
    align-items: flex-start;
    flex-direction: column;
  }

  .help-text {
    text-align: left;
  }

  .demo-grid > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .demo-grid code {
    text-align: left;
  }
}


/* =========================================================
   PROPROCK CRM - MODERN ADMIN & AGENT DASHBOARD
   Added to the existing single style.css.
   ========================================================= */

.crm-page {
  max-width: 1440px;
  margin: 0 auto;
  padding-bottom: 35px;
}

.dashboard-hero {
  position: relative;
  overflow: hidden;
  min-height: 205px;
  margin: -8px 0 28px;
  padding: 30px 34px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: #fff;
  box-shadow: 0 12px 35px rgba(20, 33, 61, .14);
}

.admin-hero,
.agent-hero {
  background:
    radial-gradient(circle at 88% 15%, rgba(242,138,36,.22), transparent 24%),
    linear-gradient(125deg, #111c35, #193b91 58%, #2563eb);
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  right: -115px;
  bottom: -235px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 110px rgba(255,255,255,.018);
  pointer-events: none;
}

.dashboard-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 22px;
}

.dashboard-logo-wrap {
  flex: 0 0 auto;
  padding: 11px 14px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.dashboard-logo {
  display: block;
  width: 156px;
  height: auto;
  object-fit: contain;
}

.dashboard-eyebrow {
  margin-bottom: 7px;
  color: #ffad4d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}

.dashboard-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.025em;
}

.dashboard-hero p {
  max-width: 610px;
  margin: 0;
  color: rgba(255,255,255,.70);
  font-size: 12px;
  line-height: 1.65;
}

.dashboard-hero-action {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hero-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 10px;
  color: #fff;
  background: rgba(255,255,255,.12);
  text-decoration: none;
  font-size: 11px;
  font-weight: 650;
  backdrop-filter: blur(8px);
  transition: .18s ease;
}

.hero-action-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.20);
  transform: translateY(-1px);
}

.hero-action-light {
  color: #172033;
  border-color: #fff;
  background: #fff;
}

.hero-action-light:hover {
  color: #172033;
  background: #f8fafc;
}

.dashboard-section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 13px;
}

.section-kicker {
  display: block;
  margin-bottom: 3px;
  color: #94a3b8;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
}

.dashboard-section-title h5 {
  margin: 0;
  color: #172033;
  font-size: 17px;
  font-weight: 700;
}

.live-indicator {
  color: #64748b;
  font-size: 9px;
}

.live-indicator i {
  margin-right: 5px;
  color: #22c55e;
  font-size: 7px;
}

.dashboard-stat-grid {
  margin-bottom: 6px;
}

.modern-stat-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.modern-stat {
  position: relative;
  overflow: hidden;
  min-height: 148px;
  padding: 18px 20px;
  border-radius: 16px;
  color: #fff;
  box-shadow: 0 7px 22px rgba(15,23,42,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}

.modern-stat::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -45px;
  bottom: -55px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
}

.modern-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(15,23,42,.15);
}

.stat-blue { background: linear-gradient(135deg, #1e3a8a, #2563eb); }
.stat-orange { background: linear-gradient(135deg, #c2410c, #f97316); }
.stat-green { background: linear-gradient(135deg, #166534, #22c55e); }
.stat-purple { background: linear-gradient(135deg, #5b21b6, #8b5cf6); }

.stat-top,
.stat-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-top {
  color: rgba(255,255,255,.78);
  font-size: 10px;
  font-weight: 600;
}

.stat-top i {
  color: rgba(255,255,255,.72);
  font-size: 18px;
}

.stat-value {
  position: relative;
  z-index: 1;
  margin: 17px 0 13px;
  font-size: 31px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: -.04em;
}

.stat-foot {
  color: rgba(255,255,255,.62);
  font-size: 9px;
}

.stat-foot i {
  font-size: 11px;
}

.priority-card {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 90px;
  padding: 16px 18px;
  border-radius: 15px;
  text-decoration: none;
  color: #172033;
  border: 1px solid #e6eaf0;
  background: #fff;
  box-shadow: 0 4px 15px rgba(15,23,42,.05);
  transition: .18s ease;
}

.priority-card:hover {
  color: #172033;
  transform: translateY(-2px);
  box-shadow: 0 9px 24px rgba(15,23,42,.09);
}

.priority-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 18px;
}

.priority-danger .priority-icon { color: #dc2626; background: #fef2f2; }
.priority-warning .priority-icon { color: #d97706; background: #fff7ed; }

.priority-copy {
  min-width: 0;
  flex: 1;
}

.priority-copy span,
.priority-copy small {
  display: block;
}

.priority-copy span {
  color: #475569;
  font-size: 10px;
  font-weight: 700;
}

.priority-copy strong {
  display: block;
  margin: 2px 0;
  color: #172033;
  font-size: 23px;
  line-height: 1;
}

.priority-copy small {
  color: #94a3b8;
  font-size: 9px;
}

.priority-arrow {
  color: #94a3b8;
  font-size: 13px;
}

.dashboard-card {
  overflow: hidden;
  border: 1px solid #e8edf3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(15,23,42,.045);
}

.card-heading {
  padding: 18px 20px 15px;
}

.card-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.heading-left {
  display: flex;
  align-items: center;
  gap: 11px;
}

.heading-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  border-radius: 10px;
  font-size: 14px;
}

.heading-icon.blue { color: #2563eb; background: #eff6ff; }
.heading-icon.purple { color: #7c3aed; background: #f5f3ff; }
.heading-icon.orange { color: #ea580c; background: #fff7ed; }

.card-heading span {
  display: block;
  color: #94a3b8;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .10em;
}

.card-heading h6 {
  margin: 3px 0 0;
  color: #172033;
  font-size: 13px;
  font-weight: 700;
}

.text-action {
  color: #2563eb;
  font-size: 10px;
  font-weight: 650;
  text-decoration: none;
}

.text-action:hover {
  color: #1d4ed8;
}

.quick-actions-card {
  padding-bottom: 8px;
}

.action-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 12px 7px;
  padding: 11px;
  border: 1px solid #edf0f4;
  border-radius: 11px;
  color: #475569;
  text-decoration: none;
  transition: .16s ease;
}

.action-row:hover {
  color: #172033;
  border-color: #dbe4f0;
  background: #f8fafc;
  transform: translateX(2px);
}

.action-row.primary-action {
  color: #1d4ed8;
  border-color: #dbeafe;
  background: #eff6ff;
}

.action-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #f1f5f9;
  font-size: 14px;
}

.primary-action .action-icon {
  color: #fff;
  background: #2563eb;
}

.action-row > span:nth-child(2) {
  flex: 1;
}

.action-row strong,
.action-row small {
  display: block;
}

.action-row strong {
  font-size: 10px;
}

.action-row small {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 8px;
}

.action-row > i {
  color: #a8b2c0;
  font-size: 11px;
}

.dashboard-table-wrap {
  border-top: 1px solid #eef2f6;
  overflow-x: auto;
}

.dashboard-table {
  width: 100%;
  margin: 0;
  font-size: 10px;
}

.dashboard-table thead th {
  padding: 11px 20px;
  border: 0;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.dashboard-table tbody td {
  padding: 12px 20px;
  border-color: #f0f3f7;
  color: #64748b;
  white-space: nowrap;
}

.dashboard-table tbody tr {
  transition: background .14s ease;
}

.dashboard-table tbody tr:hover {
  background: #fbfdff;
}

.person-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.person-avatar {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #1d4ed8;
  background: #eff6ff;
  font-size: 10px;
  font-weight: 800;
}

.person-cell strong,
.person-cell small {
  display: block;
}

.person-cell strong {
  color: #334155;
  font-size: 10px;
}

.person-cell small {
  margin-top: 2px;
  color: #a0aaba;
  font-size: 8px;
}

.number-pill,
.won-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 700;
}

.number-pill {
  color: #334155;
  background: #f1f5f9;
}

.won-pill {
  gap: 4px;
  color: #15803d;
  background: #f0fdf4;
}

.table-action,
.primary-table-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
  padding: 6px 9px;
  text-decoration: none;
  font-size: 9px;
  font-weight: 650;
  transition: .15s ease;
}

.table-action {
  color: #2563eb;
  background: #eff6ff;
}

.table-action:hover {
  color: #1d4ed8;
  background: #dbeafe;
}

.primary-table-action {
  color: #fff;
  background: #2563eb;
}

.primary-table-action:hover {
  color: #fff;
  background: #1d4ed8;
}

.customer-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #334155;
}

.customer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 0 4px #eff6ff;
}

.property-label {
  color: #475569;
  font-size: 9px;
}

.result-label,
.filter-hint {
  color: #94a3b8;
  font-size: 9px;
}

.modern-label {
  display: block;
  margin-bottom: 6px;
  color: #475569;
  font-size: 9px;
  font-weight: 700;
}

.modern-input-wrap {
  position: relative;
}

.modern-input-wrap > i {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 13px;
}

.modern-input {
  min-height: 42px;
  border: 1px solid #dfe5ec;
  border-radius: 9px;
  background: #fbfcfe;
  box-shadow: none !important;
  color: #334155;
  font-size: 10px;
}

.modern-input-wrap .modern-input {
  padding-left: 37px;
}

.modern-input:focus {
  border-color: #76a9fa;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.08) !important;
}

.search-button {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: #2563eb;
  font-size: 10px;
  font-weight: 650;
  box-shadow: 0 5px 13px rgba(37,99,235,.16);
}

.search-button:hover {
  color: #fff;
  background: #1d4ed8;
}

.filter-card {
  padding-bottom: 19px;
}

.dashboard-pagination .page-link {
  margin: 0 2px;
  border: 1px solid #e2e8f0;
  border-radius: 7px !important;
  color: #64748b;
  background: #fff;
  font-size: 9px;
}

.dashboard-pagination .page-item.active .page-link {
  border-color: #2563eb;
  color: #fff;
  background: #2563eb;
}

.empty-state {
  padding: 30px !important;
  color: #94a3b8 !important;
  text-align: center;
}

.empty-state strong,
.empty-state small {
  display: block;
}

.empty-state strong {
  margin-top: 7px;
  color: #64748b;
  font-size: 10px;
}

.empty-state small {
  margin-top: 3px;
  font-size: 9px;
}

.empty-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #94a3b8;
  background: #f1f5f9;
  font-size: 17px;
}

.modern-modal {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(15,23,42,.20);
}

.modern-modal .modal-header {
  padding: 18px 20px;
  border-bottom: 1px solid #eef2f6;
}

.modal-kicker {
  display: block;
  margin-bottom: 3px;
  color: #94a3b8;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .10em;
}

.modern-modal .modal-title {
  color: #172033;
  font-size: 15px;
  font-weight: 700;
}

.modern-modal .modal-body {
  padding: 18px 20px;
  color: #64748b;
  font-size: 11px;
}

.reminder-list .list-group-item {
  padding: 10px 0;
  border-color: #eef2f6;
  font-size: 10px;
}

.reminder-list small {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 8px;
}

.modern-modal .modal-footer {
  border-top: 1px solid #eef2f6;
}

@media (max-width: 900px) {
  .dashboard-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-hero-action {
    justify-content: flex-start;
  }

  .dashboard-brand {
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .crm-page {
    padding-bottom: 20px;
  }

  .dashboard-hero {
    margin-top: -4px;
    padding: 23px 19px;
    border-radius: 15px;
  }

  .dashboard-brand {
    flex-direction: column;
    gap: 14px;
  }

  .dashboard-logo-wrap {
    padding: 8px 10px;
  }

  .dashboard-logo {
    width: 132px;
  }

  .dashboard-hero h1 {
    font-size: 24px;
  }

  .dashboard-hero p {
    font-size: 10px;
  }

  .dashboard-hero-action {
    width: 100%;
  }

  .hero-action-btn {
    flex: 1;
    justify-content: center;
  }

  .dashboard-section-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .priority-card {
    min-height: 82px;
  }

  .card-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .text-action {
    margin-left: 47px;
  }

  .filter-hint {
    margin-left: 47px;
  }

  .dashboard-table thead th,
  .dashboard-table tbody td {
    padding-left: 13px;
    padding-right: 13px;
  }
}


/* =========================================================
   PROPROCK PREMIUM POLISH — CSS ONLY
   Keeps the existing Flask/Jinja HTML unchanged.
   ========================================================= */

/* Single permanent brand point: navbar */
.app-navbar {
  min-height: 78px;
  padding: 0;
  background: linear-gradient(105deg,#09152d 0%,#10234a 58%,#162f64 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(7,18,40,.18);
}
.app-navbar .container-fluid { min-height: 78px; }
.app-navbar .navbar-brand {
  gap: 10px;
  margin-right: 26px;
  color: #fff !important;
  font-size: 14px;
}
.app-navbar .navbar-logo,
.navbar-logo {
  width: 126px !important;
  height: auto !important;
  max-height: 52px;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain;
}
.app-navbar .nav-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 2px;
  padding: 0 13px !important;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255,255,255,.68) !important;
  font-size: 11px;
  font-weight: 600;
}
.app-navbar .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.08);
}
.app-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 -2px 0 #f28a24;
}

/* Remove duplicate branding from dashboard hero */
.dashboard-hero .dashboard-logo-wrap,
.dashboard-hero .dashboard-logo,
.dashboard-hero .dashboard-eyebrow {
  display: none !important;
}

/* Premium dashboard hero */
.crm-page {
  max-width: 1390px;
  padding: 30px 24px 54px;
}
.dashboard-hero {
  min-height: 158px !important;
  margin: 0 0 32px !important;
  padding: 30px 34px !important;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 82% 22%,rgba(242,138,36,.16),transparent 20%),
    radial-gradient(circle at 96% 90%,rgba(86,129,238,.28),transparent 30%),
    linear-gradient(120deg,#0c1935 0%,#142b60 57%,#2f60d2 100%) !important;
  box-shadow: 0 22px 45px rgba(15,31,65,.16) !important;
}
.dashboard-hero::after {
  width: 280px;
  height: 280px;
  right: -100px;
  bottom: -205px;
  border-color: rgba(255,255,255,.10);
}
.dashboard-brand {
  gap: 0 !important;
  width: 100%;
}
.dashboard-hero h1 {
  margin: 0 0 7px !important;
  font-size: clamp(25px,2.45vw,32px) !important;
  line-height: 1.12 !important;
  font-weight: 650 !important;
  letter-spacing: -.035em !important;
}
.dashboard-hero p {
  max-width: 650px;
  color: rgba(255,255,255,.68) !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
}
.dashboard-hero-action { margin-left: auto; }
.hero-action-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 10px;
}

/* Elegant metric cards */
.modern-stat {
  min-height: 136px;
  padding: 17px 18px;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15,23,42,.09);
}
.stat-blue { background: linear-gradient(135deg,#1b3988,#315fd5); }
.stat-orange { background: linear-gradient(135deg,#bd430d,#ed6a16); }
.stat-green { background: linear-gradient(135deg,#126333,#1cad58); }
.stat-purple { background: linear-gradient(135deg,#5520a8,#7950df); }
.stat-value { margin: 14px 0 11px; font-size: 29px; font-weight: 700; }

/* Login: no white CSS rectangle around the supplied logo */
.login-page {
  padding: 22px !important;
  background:
    radial-gradient(circle at 12% 18%,rgba(242,138,36,.10),transparent 24%),
    radial-gradient(circle at 88% 80%,rgba(49,94,214,.14),transparent 30%),
    #f3f6fb !important;
}
.login-shell {
  width: min(1120px,100%) !important;
  min-height: 650px !important;
  grid-template-columns: 1.08fr .92fr !important;
  border-radius: 24px !important;
  box-shadow: 0 28px 70px rgba(15,28,55,.14),0 4px 16px rgba(15,28,55,.06) !important;
}
.brand-panel {
  background:
    radial-gradient(circle at 8% 10%,rgba(242,138,36,.14),transparent 22%),
    radial-gradient(circle at 92% 90%,rgba(72,113,225,.30),transparent 32%),
    linear-gradient(145deg,#0b1730 0%,#11234a 53%,#244da7 100%) !important;
}
.brand-panel-inner { min-height: 650px; padding: 42px 48px 30px !important; }
.brand-top { justify-content: flex-start !important; }
.brand-logo,
.login-logo {
  width: 190px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain;
}
.brand-badge { display: none !important; }
.brand-copy {
  max-width: 530px;
  margin: auto 0 !important;
  padding: 30px 0 25px !important;
}
.brand-copy h1 {
  max-width: 530px;
  font-size: clamp(29px,3vw,40px) !important;
  line-height: 1.12 !important;
  font-weight: 650 !important;
}
.brand-description {
  max-width: 475px;
  margin: 17px 0 25px !important;
  font-size: 13px !important;
}
.feature-list { gap: 11px !important; }
.feature-icon { width:38px; height:38px; flex-basis:38px; border-radius:10px; font-size:15px; }
.feature-item strong { font-size:11px; }
.feature-item small { font-size:9px; }
.brand-footer { padding-top:17px !important; font-size:9px !important; }

.login-panel { padding: 44px 48px !important; }
.login-card { max-width: 390px !important; }
.login-heading { margin-bottom: 25px !important; }
.login-heading h2 { font-size:23px !important; font-weight:650 !important; }
.login-form { gap:17px !important; }
.input-wrap .form-control { height:49px; border-radius:10px; font-size:12px; }
.login-button {
  min-height:50px;
  border-radius:10px;
  background: linear-gradient(110deg,#1d4fae,#3569dc);
  box-shadow: 0 9px 20px rgba(37,99,235,.16);
}
.demo-box { margin-top:18px !important; padding:12px !important; border-radius:10px !important; }
.login-security { margin-top:14px !important; }
.copyright { margin-top:10px !important; }

/* General luxury finish */
.dashboard-card,
.card {
  border-color: #e7ebf1;
  box-shadow: 0 7px 24px rgba(15,23,42,.045);
}
.priority-card {
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(15,23,42,.045);
}

/* Mobile */
@media (max-width:1000px) {
  .app-navbar .navbar-logo { width:112px !important; }
  .crm-page { padding:22px 18px 40px; }
  .login-shell { grid-template-columns:1fr !important; max-width:520px !important; }
  .brand-panel { display:none !important; }
  .login-panel { padding:38px 36px !important; }
  .mobile-brand { display:block !important; margin-bottom:24px !important; }
  .login-logo { width:175px !important; }
}
@media (max-width:800px) {
  .app-navbar,.app-navbar .container-fluid { min-height:68px; }
  .app-navbar .navbar-logo { width:100px !important; }
  .dashboard-hero { min-height:0 !important; padding:25px 23px !important; }
  .dashboard-hero-action { margin-left:0; justify-content:flex-start; }
}
@media (max-width:560px) {
  .login-page { padding:0 !important; }
  .login-shell { min-height:100svh !important; border-radius:0 !important; }
  .login-panel { padding:31px 22px 24px !important; }
  .login-logo { width:155px !important; }
  .dashboard-hero h1 { font-size:23px !important; }
}


/* =========================================================
   PROPROCK LUXURY DARK-SAPPHIRE THEME
   CSS ONLY — ORIGINAL LOGO ARTWORK IS UNCHANGED.
   No white background, panel, or padding is applied to logo.
   ========================================================= */

/* Global palette */
:root {
  --proprock-bg: #07111f;
  --proprock-bg-2: #0b1830;
  --proprock-surface: #0f1f37;
  --proprock-surface-2: #132844;
  --proprock-border: rgba(255,255,255,.085);
  --proprock-text: #edf3ff;
  --proprock-muted: #9eacc2;
  --proprock-blue: #3d70e6;
  --proprock-blue-2: #244db3;
  --proprock-orange: #ef8730;
  --proprock-gold: #e5a04b;
}

/* Page background */
body,
.crm-page,
.app-shell,
.dashboard-page {
  background:
    radial-gradient(circle at 85% 8%, rgba(50,92,190,.12), transparent 26%),
    radial-gradient(circle at 8% 92%, rgba(239,135,48,.055), transparent 24%),
    var(--proprock-bg) !important;
  color: var(--proprock-text) !important;
}

/* Navbar — deep sapphire so the orange/brown logo has natural contrast */
.app-navbar {
  min-height: 78px !important;
  background:
    linear-gradient(110deg,#050d1b 0%,#0a1730 52%,#102858 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.24) !important;
}

.app-navbar .container-fluid {
  min-height: 78px;
}

/* ORIGINAL LOGO — transparent, no white background */
.app-navbar .navbar-logo,
.navbar-logo {
  display: block !important;
  width: 132px !important;
  height: 48px !important;
  max-width: 132px !important;
  max-height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Navbar brand text */
.app-navbar .navbar-brand {
  min-width: 250px;
  gap: 12px !important;
  color: #fff !important;
}
.app-navbar .navbar-brand .brand-text {
  color: #f4f7ff !important;
  font-weight: 700 !important;
}

/* Navbar links */
.app-navbar .nav-link {
  color: rgba(237,243,255,.66) !important;
  border-color: transparent !important;
}
.app-navbar .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.055) !important;
}
.app-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 -2px 0 var(--proprock-orange) !important;
}

/* User/logout controls */
.app-navbar .btn,
.app-navbar .user-menu,
.app-navbar .dropdown-toggle {
  border-color: rgba(255,255,255,.18) !important;
  color: #f4f7ff !important;
  background: rgba(255,255,255,.035) !important;
}
.app-navbar .btn:hover,
.app-navbar .user-menu:hover,
.app-navbar .dropdown-toggle:hover {
  background: rgba(255,255,255,.075) !important;
}

/* =========================================================
   ADMIN / AGENT DASHBOARD
   ========================================================= */

.crm-page {
  max-width: 1390px !important;
  padding: 30px 24px 60px !important;
}

/* Premium hero — no logo inside it */
.dashboard-hero {
  min-height: 150px !important;
  margin-bottom: 32px !important;
  padding: 30px 34px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 88% 20%,rgba(71,116,229,.32),transparent 27%),
    radial-gradient(circle at 100% 100%,rgba(239,135,48,.10),transparent 26%),
    linear-gradient(115deg,#0b1730 0%,#112b61 58%,#204eb4 100%) !important;
  box-shadow: 0 24px 55px rgba(0,0,0,.28) !important;
}
.dashboard-hero .dashboard-logo-wrap,
.dashboard-hero .dashboard-logo,
.dashboard-hero .dashboard-eyebrow {
  display: none !important;
}
.dashboard-hero h1 {
  color: #fff !important;
  font-size: clamp(25px,2.5vw,32px) !important;
  font-weight: 650 !important;
  letter-spacing: -.035em !important;
}
.dashboard-hero p {
  color: rgba(255,255,255,.68) !important;
}

/* Section labels */
.section-eyebrow,
.dashboard-section-label {
  color: #8fa3c3 !important;
}
.dashboard-section-title,
.crm-page h2,
.crm-page h3 {
  color: #f2f6ff !important;
}

/* KPI cards — deeper, more luxurious colors */
.modern-stat {
  min-height: 136px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 16px 30px rgba(0,0,0,.22) !important;
}
.stat-blue {
  background: linear-gradient(135deg,#183b92,#285bd0) !important;
}
.stat-orange {
  background: linear-gradient(135deg,#9f3d0d,#d96517) !important;
}
.stat-green {
  background: linear-gradient(135deg,#07552e,#159a50) !important;
}
.stat-purple {
  background: linear-gradient(135deg,#48208e,#7040d1) !important;
}
.stat-value,
.stat-title,
.stat-label {
  color: #fff !important;
}

/* White dashboard cards become dark glass surfaces */
.dashboard-card,
.card,
.priority-card,
.table-card,
.search-card,
.quick-actions-card,
.performance-card {
  background: linear-gradient(145deg,#0e1d34,#10233f) !important;
  color: var(--proprock-text) !important;
  border: 1px solid var(--proprock-border) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.20) !important;
}

.dashboard-card h3,
.dashboard-card h4,
.card h3,
.card h4,
.priority-card h3,
.priority-card h4 {
  color: #f0f5ff !important;
}

.dashboard-card p,
.card p,
.priority-card p {
  color: var(--proprock-muted) !important;
}

/* Backlog / follow-up cards */
.priority-card {
  border-radius: 15px !important;
}
.priority-card .priority-icon {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}

/* Tables */
.table,
table {
  color: #dce6f8 !important;
}
.table thead th,
table thead th {
  color: #8295b4 !important;
  background: #0b1930 !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.table tbody td,
table tbody td {
  border-color: rgba(255,255,255,.065) !important;
}
.table tbody tr:hover,
table tbody tr:hover {
  background: rgba(255,255,255,.025) !important;
}

/* Forms and search */
.form-control,
.form-select,
input.form-control,
select.form-select,
textarea.form-control {
  color: #eef4ff !important;
  background: #0b1930 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.form-control::placeholder {
  color: #7386a3 !important;
}
.form-control:focus,
.form-select:focus {
  color: #fff !important;
  background: #0c1c35 !important;
  border-color: #4c7ff0 !important;
  box-shadow: 0 0 0 3px rgba(76,127,240,.14) !important;
}

/* Buttons */
.btn-primary,
.login-button {
  background: linear-gradient(110deg,#2453b8,#3971df) !important;
  border: 1px solid rgba(111,153,255,.22) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(25,69,155,.25) !important;
}
.btn-primary:hover,
.login-button:hover {
  background: linear-gradient(110deg,#2b5fc9,#477ff0) !important;
  transform: translateY(-1px);
}
.btn-outline-primary {
  color: #82aaff !important;
  border-color: rgba(92,139,245,.45) !important;
}
.btn-outline-primary:hover {
  color: #fff !important;
  background: rgba(61,112,230,.15) !important;
}

/* =========================================================
   LOGIN PAGE
   No white logo background.
   The entire page is changed to a dark luxury composition.
   ========================================================= */

.login-page {
  min-height: 100vh !important;
  padding: 24px !important;
  background:
    radial-gradient(circle at 12% 20%,rgba(239,135,48,.08),transparent 25%),
    radial-gradient(circle at 92% 82%,rgba(54,102,220,.18),transparent 34%),
    linear-gradient(135deg,#050d1b 0%,#09162b 48%,#102653 100%) !important;
}

/* Login shell */
.login-shell {
  min-height: 650px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 24px !important;
  overflow: hidden;
  background: #0d1b31 !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.38) !important;
}

/* Left branding area */
.brand-panel {
  background:
    radial-gradient(circle at 15% 10%,rgba(239,135,48,.10),transparent 22%),
    radial-gradient(circle at 92% 88%,rgba(58,109,225,.25),transparent 34%),
    linear-gradient(145deg,#071225 0%,#0c1c3a 58%,#173a84 100%) !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
}

/* ORIGINAL LOGO — transparent, no white card */
.brand-logo,
.login-logo {
  display: block !important;
  width: 210px !important;
  height: 72px !important;
  max-width: 210px !important;
  max-height: 72px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: none !important;
}
.brand-top {
  padding: 0 !important;
  justify-content: flex-start !important;
}

/* Login marketing copy */
.brand-copy h1 {
  color: #fff !important;
  font-size: clamp(30px,3.1vw,41px) !important;
  line-height: 1.10 !important;
  font-weight: 650 !important;
  letter-spacing: -.04em !important;
}
.brand-copy h1 span,
.brand-copy .accent,
.brand-copy strong {
  color: #f39a43 !important;
}
.brand-description {
  color: rgba(235,242,255,.68) !important;
}
.feature-item strong {
  color: #f1f5ff !important;
}
.feature-item small {
  color: #8fa2c0 !important;
}
.feature-icon {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #f39a43 !important;
}

/* Right login surface */
.login-panel {
  background:
    radial-gradient(circle at 100% 0%,rgba(61,112,230,.10),transparent 30%),
    #0c1930 !important;
}
.login-card {
  color: #edf3ff !important;
}
.login-heading h2 {
  color: #f5f8ff !important;
  font-size: 24px !important;
  font-weight: 650 !important;
}
.login-heading p,
.login-panel label,
.login-security,
.copyright {
  color: #91a1bb !important;
}
.login-panel .input-wrap {
  background: transparent !important;
}
.login-panel .form-control {
  background: #071529 !important;
  color: #eef4ff !important;
  border-color: rgba(255,255,255,.12) !important;
}
.login-panel .form-control:focus {
  border-color: #4d7ff0 !important;
  box-shadow: 0 0 0 3px rgba(77,127,240,.13) !important;
}
.login-panel .form-control::placeholder {
  color: #6f819e !important;
}

/* Demo access / alerts */
.demo-box {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #a8b6cc !important;
}
.alert {
  border-color: rgba(255,255,255,.10) !important;
}
.alert-info {
  color: #a9c9ff !important;
  background: rgba(54,113,226,.12) !important;
}
.alert-warning {
  color: #ffd38f !important;
  background: rgba(219,142,37,.10) !important;
}

/* Hide duplicate dashboard branding only */
.dashboard-hero .dashboard-logo-wrap,
.dashboard-hero .dashboard-logo,
.dashboard-hero .dashboard-eyebrow {
  display: none !important;
}

/* Mobile */
@media (max-width:1000px) {
  .app-navbar .navbar-logo,
  .navbar-logo {
    width: 112px !important;
    height: 44px !important;
    max-width: 112px !important;
    max-height: 44px !important;
  }

  .brand-logo,
  .login-logo {
    width: 190px !important;
    height: 66px !important;
    max-width: 190px !important;
    max-height: 66px !important;
  }
}

@media (max-width:560px) {
  .app-navbar .navbar-logo,
  .navbar-logo {
    width: 100px !important;
    height: 40px !important;
    max-width: 100px !important;
    max-height: 40px !important;
  }

  .brand-logo,
  .login-logo {
    width: 175px !important;
    height: 60px !important;
    max-width: 175px !important;
    max-height: 60px !important;
  }
}

/* =========================================================
   PROPROCK LOGO VISIBILITY UPDATE
   Goal: keep the original logo artwork unchanged while
   giving it a high-contrast, clean brand environment.
   ========================================================= */

/* Brand palette tuned for the orange/brown Proprock logo */
:root {
  --proprock-brand-ink: #172033;
  --proprock-brand-orange: #e97825;
  --proprock-brand-surface: #fff8ef;
  --proprock-light-bg: #f5f7fb;
}

/* -------------------------
   DASHBOARD / APP NAVBAR
   ------------------------- */
.app-navbar {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-bottom: 1px solid #e5eaf1 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08) !important;
}

.app-navbar .navbar-brand {
  color: var(--proprock-brand-ink) !important;
}

.app-navbar .navbar-brand .brand-text {
  color: var(--proprock-brand-ink) !important;
}

/* Give the logo a subtle warm brand zone instead of navy behind it */
.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo {
  width: 142px !important;
  height: 50px !important;
  max-width: 142px !important;
  max-height: 50px !important;
  padding: 5px 10px !important;
  background: var(--proprock-brand-surface) !important;
  border: 1px solid #f0dfcf !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(109, 67, 34, .08) !important;
  object-fit: contain !important;
}

.app-navbar .nav-link {
  color: #526078 !important;
}

.app-navbar .nav-link:hover {
  color: var(--proprock-brand-ink) !important;
  background: #f1f4f8 !important;
  border-color: #e2e8f0 !important;
}

.app-navbar .nav-link.active {
  color: var(--proprock-brand-ink) !important;
  background: #eef3fb !important;
  border-color: #dbe5f3 !important;
  box-shadow: inset 0 -2px 0 var(--proprock-brand-orange) !important;
}

.app-navbar .btn,
.app-navbar .user-menu,
.app-navbar .dropdown-toggle {
  color: var(--proprock-brand-ink) !important;
  border-color: #dce3ec !important;
  background: #fff !important;
}

.app-navbar .btn:hover,
.app-navbar .user-menu:hover,
.app-navbar .dropdown-toggle:hover {
  background: #f6f8fb !important;
}

/* -------------------------
   DASHBOARD PAGE
   ------------------------- */
body,
.crm-page,
.app-shell,
.dashboard-page {
  background:
    radial-gradient(circle at 90% 0%, rgba(232, 142, 61, .07), transparent 24%),
    linear-gradient(135deg, #f7f9fc 0%, #eef3f8 100%) !important;
  color: #172033 !important;
}

/* Keep the hero visually premium, but lighter so the brand does not
   compete with the orange logo elsewhere in the interface. */
.dashboard-hero {
  background:
    radial-gradient(circle at 88% 18%, rgba(242, 138, 36, .15), transparent 23%),
    radial-gradient(circle at 100% 100%, rgba(63, 111, 211, .16), transparent 30%),
    linear-gradient(120deg, #ffffff 0%, #f1f5fb 62%, #e7eefb 100%) !important;
  border-color: #dce5f0 !important;
  box-shadow: 0 18px 40px rgba(31, 52, 84, .10) !important;
  color: #172033 !important;
}

.dashboard-hero h1 {
  color: #172033 !important;
}

.dashboard-hero p {
  color: #60708a !important;
}

.dashboard-section-title h5,
.crm-page h2,
.crm-page h3 {
  color: #172033 !important;
}

/* Light glass cards */
.dashboard-card,
.card,
.priority-card,
.table-card,
.search-card,
.quick-actions-card,
.performance-card {
  background: rgba(255,255,255,.94) !important;
  color: #172033 !important;
  border: 1px solid #e1e7ef !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.07) !important;
}

.dashboard-card h3,
.dashboard-card h4,
.card h3,
.card h4,
.priority-card h3,
.priority-card h4 {
  color: #172033 !important;
}

.dashboard-card p,
.card p,
.priority-card p {
  color: #64748b !important;
}

/* -------------------------
   LOGIN PAGE
   ------------------------- */
.login-page {
  background:
    radial-gradient(circle at 10% 10%, rgba(242, 138, 36, .10), transparent 25%),
    radial-gradient(circle at 90% 90%, rgba(49, 94, 214, .08), transparent 30%),
    linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%) !important;
}

/* Clean split layout */
.login-shell {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow:
    0 28px 70px rgba(15, 23, 42, .13),
    0 5px 18px rgba(15, 23, 42, .06) !important;
}

/* The logo is orange/brown, so a warm light panel gives it
   substantially better contrast than the previous navy panel. */
.brand-panel {
  color: #172033 !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(242, 138, 36, .14), transparent 24%),
    radial-gradient(circle at 10% 90%, rgba(59, 130, 246, .10), transparent 30%),
    linear-gradient(145deg, #fffdf9 0%, #fff7ee 55%, #eef4ff 100%) !important;
  border-right: 1px solid #e5eaf1 !important;
}

/* Add a very subtle brand plate around the logo */
.brand-top {
  position: relative;
  z-index: 2;
}

.brand-logo,
.login-logo {
  width: 220px !important;
  height: 76px !important;
  max-width: 220px !important;
  max-height: 76px !important;
  padding: 7px 12px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 1px solid #eadfd5 !important;
  border-radius: 12px !important;
  box-shadow: 0 7px 20px rgba(84, 55, 34, .10) !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Marketing copy switches to dark ink for readability on light panel */
.brand-copy h1 {
  color: #172033 !important;
}

.brand-copy h1 span,
.brand-copy .accent,
.brand-copy strong,
.eyebrow {
  color: var(--proprock-brand-orange) !important;
}

.brand-description {
  color: #5d6b80 !important;
}

.feature-item strong {
  color: #172033 !important;
}

.feature-item small {
  color: #738096 !important;
}

.feature-icon {
  color: var(--proprock-brand-orange) !important;
  background: rgba(255,255,255,.78) !important;
  border-color: #eadfd5 !important;
}

.brand-footer {
  color: #7a8799 !important;
  border-top-color: #e6e9ef !important;
}

.brand-footer i {
  color: #3b82f6 !important;
}

/* Right login panel becomes clean white */
.login-panel {
  background: #ffffff !important;
}

.login-heading h2 {
  color: #172033 !important;
}

.login-heading p,
.login-panel label,
.login-security,
.copyright {
  color: #64748b !important;
}

.login-panel .form-control {
  background: #fbfcfe !important;
  color: #172033 !important;
  border-color: #d8e0ea !important;
}

.login-panel .form-control::placeholder {
  color: #9aa6b7 !important;
}

.login-panel .form-control:focus {
  background: #ffffff !important;
  border-color: #4d7ff0 !important;
  box-shadow: 0 0 0 3px rgba(77,127,240,.12) !important;
}

.demo-box {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* -------------------------
   MOBILE LOGO SIZES
   ------------------------- */
@media (max-width: 1000px) {
  .app-navbar .navbar-logo,
  .navbar-logo {
    width: 120px !important;
    height: 46px !important;
    max-width: 120px !important;
    max-height: 46px !important;
    padding: 4px 8px !important;
  }

  .brand-logo,
  .login-logo {
    width: 200px !important;
    height: 70px !important;
    max-width: 200px !important;
    max-height: 70px !important;
  }
}

@media (max-width: 560px) {
  .app-navbar .navbar-logo,
  .navbar-logo {
    width: 108px !important;
    height: 42px !important;
    max-width: 108px !important;
    max-height: 42px !important;
  }

  .brand-logo,
  .login-logo {
    width: 185px !important;
    height: 64px !important;
    max-width: 185px !important;
    max-height: 64px !important;
  }
}

/* =========================================================
   FINAL BRAND / UI POLISH
   - Logo: artwork only, no white box/background
   - Tables & inputs: remove heavy navy blocks
   - Headings/navigation: softer professional navy + orange accent
   ========================================================= */

/* ---------- BRAND LOGO: NO BACKGROUND / NO FRAME ---------- */
.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo,
.brand-logo,
.login-logo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  display: block !important;
}

/* Dashboard navbar logo */
.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo {
  width: 132px !important;
  height: 48px !important;
  max-width: 132px !important;
  max-height: 48px !important;
}

/* Login/brand logo */
.brand-logo,
.login-logo {
  width: 210px !important;
  height: 70px !important;
  max-width: 210px !important;
  max-height: 70px !important;
}

/* ---------- GLOBAL COLOR BALANCE ---------- */
:root {
  --ui-ink: #172033;
  --ui-muted: #64748b;
  --ui-border: #dfe5ed;
  --ui-surface: #ffffff;
  --ui-page: #f4f7fa;
  --ui-soft: #eef3f8;
  --ui-accent: #e87522;
  --ui-accent-soft: #fff3e8;
  --ui-navy: #172b4d;
}

body,
.crm-page,
.app-shell,
.dashboard-page {
  background: var(--ui-page) !important;
  color: var(--ui-ink) !important;
}

/* ---------- NAVIGATION ---------- */
.app-navbar {
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  box-shadow: 0 4px 18px rgba(23,32,51,.06) !important;
}

.app-navbar .navbar-brand,
.app-navbar .navbar-brand .brand-text {
  color: var(--ui-ink) !important;
  font-weight: 700 !important;
}

.app-navbar .nav-link {
  color: #536174 !important;
  background: transparent !important;
  border-color: transparent !important;
}

.app-navbar .nav-link:hover {
  color: var(--ui-ink) !important;
  background: #f7f9fc !important;
}

.app-navbar .nav-link.active {
  color: var(--ui-ink) !important;
  background: #f0f5fb !important;
  border: 1px solid #d9e3ef !important;
  border-bottom: 2px solid var(--ui-accent) !important;
  box-shadow: none !important;
}

/* ---------- PAGE HEADINGS ---------- */
.crm-page h1,
.crm-page h2,
.crm-page h3,
.crm-page h4,
.dashboard-section-title,
.dashboard-section-title h5,
.page-title,
.section-title {
  color: var(--ui-ink) !important;
}

.crm-page h1 i,
.crm-page h2 i,
.crm-page h3 i,
.page-title i,
.section-title i {
  color: var(--ui-accent) !important;
}

/* ---------- FILTER / SEARCH AREA ---------- */
.filter-card,
.filters-card,
.search-card,
.customer-filters,
.filter-panel {
  background: #ffffff !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: 0 8px 24px rgba(23,32,51,.06) !important;
}

label,
.form-label {
  color: #253653 !important;
}

/* ---------- LIGHT FORM CONTROLS ---------- */
/* This removes the large dark-blue rectangles visible in
   the Add Customer screenshot. */
.form-control,
.form-select,
input.form-control,
select.form-select,
textarea.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea,
select {
  background: #ffffff !important;
  color: #172033 !important;
  border: 1px solid #cfd8e3 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.025) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: #94a3b8 !important;
}

.form-control:hover,
.form-select:hover,
input:hover,
textarea:hover,
select:hover {
  border-color: #b8c5d5 !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  background: #ffffff !important;
  color: #172033 !important;
  border-color: #6d94d9 !important;
  box-shadow: 0 0 0 3px rgba(109,148,217,.13) !important;
  outline: none !important;
}

/* ---------- TABLES ---------- */
/* Replace heavy navy table headers with a clean light header. */
.table,
table {
  background: #ffffff !important;
  color: #253653 !important;
  border-color: var(--ui-border) !important;
}

.table thead,
.table thead tr,
.dashboard-table thead,
.dashboard-table thead tr,
table thead,
table thead tr {
  background: #eef2f6 !important;
}

.table thead th,
.dashboard-table thead th,
table thead th {
  background: #eef2f6 !important;
  color: #42526b !important;
  border-bottom: 1px solid #d7dfe8 !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
}

.table tbody,
.dashboard-table tbody,
table tbody {
  background: #ffffff !important;
}

.table tbody td,
.dashboard-table tbody td,
table tbody td {
  background: #ffffff !important;
  color: #34445d !important;
  border-color: #e7ebf0 !important;
}

.table tbody tr:hover,
.dashboard-table tbody tr:hover,
table tbody tr:hover {
  background: #fafbfd !important;
}

.table a,
.dashboard-table a,
table a {
  color: #2f68c9 !important;
}

.table a:hover,
.dashboard-table a:hover,
table a:hover {
  color: var(--ui-accent) !important;
}

/* ---------- STATUS / BADGES ---------- */
.badge,
.status-badge {
  border-radius: 999px !important;
}

.status-badge,
.badge.bg-primary {
  background: #eaf1ff !important;
  color: #315fa8 !important;
}

/* ---------- BUTTONS ---------- */
.btn-primary {
  background: #3569c8 !important;
  border-color: #3569c8 !important;
  box-shadow: 0 4px 10px rgba(53,105,200,.16) !important;
}

.btn-primary:hover {
  background: #2c5db6 !important;
  border-color: #2c5db6 !important;
}

.btn-outline-primary {
  color: #3569c8 !important;
  border-color: #a9bfe6 !important;
  background: #ffffff !important;
}

.btn-outline-primary:hover {
  color: #ffffff !important;
  background: #3569c8 !important;
}

.btn-outline-success {
  background: #ffffff !important;
}

/* ---------- ADD CUSTOMER / CONTENT CARD ---------- */
.form-card,
.customer-form-card,
.add-customer-card,
.content-card {
  background: #ffffff !important;
  border: 1px solid #dfe5ed !important;
  box-shadow: 0 12px 32px rgba(23,32,51,.07) !important;
}

/* ---------- DARK SELECTS / ASSIGNMENT CONTROLS ---------- */
select,
select.form-select,
.form-select {
  color-scheme: light !important;
}

/* ---------- USER / ACCOUNT CONTROLS ---------- */
.app-navbar .btn,
.app-navbar .user-menu,
.app-navbar .dropdown-toggle {
  color: var(--ui-ink) !important;
  background: #ffffff !important;
  border: 1px solid #d7dfe8 !important;
}

.app-navbar .btn:hover,
.app-navbar .user-menu:hover,
.app-navbar .dropdown-toggle:hover {
  background: #f7f9fc !important;
}

/* ---------- DASHBOARD STAT CARDS ----------
   Keep colorful cards, but avoid excessive dark navy elsewhere. */
.stat-card,
.dashboard-stat-card {
  border: 1px solid rgba(255,255,255,.20) !important;
}

/* ---------- RESPONSIVE LOGO ---------- */
@media (max-width: 1000px) {
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    width: 112px !important;
    height: 44px !important;
    max-width: 112px !important;
    max-height: 44px !important;
  }

  .brand-logo,
  .login-logo {
    width: 195px !important;
    height: 66px !important;
    max-width: 195px !important;
    max-height: 66px !important;
  }
}

@media (max-width: 560px) {
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    width: 102px !important;
    height: 40px !important;
    max-width: 102px !important;
    max-height: 40px !important;
  }

  .brand-logo,
  .login-logo {
    width: 180px !important;
    height: 62px !important;
    max-width: 180px !important;
    max-height: 62px !important;
  }
}

/* =========================================================
   PROPROCK — ALL PAGES BACKGROUND + NAVBAR BRAND SCALE
   ========================================================= */

/* One consistent soft background across CRM pages */
html {
  background: #f3f6fa !important;
}

body,
.crm-page,
.app-shell,
.dashboard-page,
.page-wrapper,
.main-content,
.content-wrapper {
  background:
    radial-gradient(circle at 8% 8%, rgba(242, 138, 36, .055), transparent 23%),
    radial-gradient(circle at 92% 18%, rgba(59, 130, 246, .055), transparent 27%),
    linear-gradient(135deg, #f7f9fc 0%, #eef3f8 52%, #f5f7fa 100%) !important;
}

/* Keep the background visible around cards instead of making
   each page look like a collection of unrelated white blocks. */
main,
main.crm-page {
  background: transparent !important;
}

/* ---------------------------------------------------------
   NAVBAR LOGO
   Larger visual presence, but still "logo only":
   no white rectangle, border, padding or shadow.
   --------------------------------------------------------- */
.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo {
  width: 166px !important;
  height: 56px !important;
  max-width: 166px !important;
  max-height: 56px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Give the logo area enough room without adding a background */
.app-navbar .navbar-brand {
  min-width: 166px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* "Proprock CRM" text should visually complement the logo */
.app-navbar .navbar-brand .brand-text,
.app-navbar .brand-text {
  color: #172033 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
}

/* ---------------------------------------------------------
   PAGE TITLES / SECTION TITLES
   --------------------------------------------------------- */
.crm-page h1,
.crm-page h2,
.crm-page h3,
.crm-page h4,
.crm-page h5,
.dashboard-section-title,
.dashboard-section-label,
.page-title,
.section-title {
  color: #172033 !important;
}

.crm-page h1 i,
.crm-page h2 i,
.crm-page h3 i,
.crm-page h4 i,
.page-title i,
.section-title i {
  color: #e87522 !important;
}

/* ---------------------------------------------------------
   CARDS — soft elevation over the new background
   --------------------------------------------------------- */
.dashboard-card,
.card,
.priority-card,
.table-card,
.search-card,
.quick-actions-card,
.performance-card,
.form-card,
.customer-form-card,
.add-customer-card,
.content-card {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(211,220,231,.90) !important;
  box-shadow: 0 12px 30px rgba(23,32,51,.065) !important;
}

/* ---------------------------------------------------------
   TABLES — clean and lighter
   --------------------------------------------------------- */
.table,
table {
  background: #ffffff !important;
}

.table thead,
.table thead tr,
table thead,
table thead tr {
  background: #edf2f7 !important;
}

.table thead th,
table thead th {
  background: #edf2f7 !important;
  color: #42526b !important;
  border-bottom: 1px solid #d7e0ea !important;
}

.table tbody td,
table tbody td {
  background: #ffffff !important;
  color: #34445d !important;
}

/* ---------------------------------------------------------
   FORM FIELDS — no dark navy blocks
   --------------------------------------------------------- */
.form-control,
.form-select,
input.form-control,
select.form-select,
textarea.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea,
select {
  background: #ffffff !important;
  color: #172033 !important;
  border-color: #cfd8e3 !important;
}

/* ---------------------------------------------------------
   NAVIGATION ACTIVE STATE
   --------------------------------------------------------- */
.app-navbar .nav-link.active {
  color: #172033 !important;
  background: #eff5fc !important;
  border-color: #d8e4f1 !important;
  border-bottom: 2px solid #e87522 !important;
}

/* ---------------------------------------------------------
   RESPONSIVE NAVBAR LOGO
   --------------------------------------------------------- */
@media (max-width: 1000px) {
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    width: 138px !important;
    height: 50px !important;
    max-width: 138px !important;
    max-height: 50px !important;
  }

  .app-navbar .navbar-brand {
    min-width: 138px !important;
    min-height: 50px !important;
  }
}

@media (max-width: 560px) {
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    width: 118px !important;
    height: 44px !important;
    max-width: 118px !important;
    max-height: 44px !important;
  }

  .app-navbar .navbar-brand {
    min-width: 118px !important;
    min-height: 44px !important;
  }
}


/* =========================================================
   PROPROCK WARM CREAM THEME — FINAL OVERRIDES
   Applies the login-page warm/light-yellow visual language
   consistently to Dashboard, Customers, Add Customer,
   Bulk Update and Team Members.

   Goal:
   - warm light-yellow background throughout CRM
   - dark readable typography
   - subtle warm borders/shadows
   - clear blue/orange/green/purple accents only where useful
   - logo + "Proprock CRM" kept close together
   ========================================================= */

:root {
  --proprock-warm-bg: #fffaf0;
  --proprock-warm-bg-2: #fff7ea;
  --proprock-warm-surface: #fffdf8;
  --proprock-warm-surface-2: #fff9ef;
  --proprock-warm-border: #eadfce;
  --proprock-warm-border-soft: #f1e7d8;
  --proprock-ink: #1f2a3d;
  --proprock-ink-2: #334155;
  --proprock-muted: #64748b;
  --proprock-muted-2: #8791a1;
  --proprock-orange: #e87522;
  --proprock-orange-dark: #c85d12;
  --proprock-blue: #315fc4;
  --proprock-blue-soft: #eef4ff;
  --proprock-green: #18784a;
  --proprock-green-soft: #edf8f1;
  --proprock-purple: #6841b5;
  --proprock-purple-soft: #f4efff;
}

/* ---------- GLOBAL CRM PAGE BACKGROUND ---------- */
html {
  background: var(--proprock-warm-bg) !important;
}

body,
.app-shell,
.dashboard-page,
.page-wrapper,
.main-content,
.content-wrapper,
.crm-page {
  color: var(--proprock-ink) !important;
  background:
    radial-gradient(circle at 8% 5%, rgba(232,117,34,.075), transparent 23%),
    radial-gradient(circle at 92% 12%, rgba(255,220,160,.14), transparent 27%),
    linear-gradient(135deg, #fffdf7 0%, #fff8ec 52%, #fffaf2 100%) !important;
}

main,
main.crm-page {
  background: transparent !important;
}

/* ---------- NAVBAR: LIGHT + BRAND-FRIENDLY ---------- */
.app-navbar {
  min-height: 78px !important;
  padding: 0 !important;
  color: var(--proprock-ink) !important;
  background: rgba(255,253,248,.97) !important;
  border-bottom: 1px solid var(--proprock-warm-border) !important;
  box-shadow: 0 6px 22px rgba(91,68,39,.075) !important;
}

.app-navbar .container-fluid {
  min-height: 78px !important;
}

/* Keep Proprock logo and CRM text visually close */
.app-navbar .navbar-brand {
  min-width: auto !important;
  min-height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-right: 22px !important;
  padding: 0 !important;
  color: var(--proprock-ink) !important;
  text-decoration: none !important;
}

.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo {
  width: 142px !important;
  height: 54px !important;
  max-width: 142px !important;
  max-height: 54px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Handles either a span/div with class brand-text or plain brand text */
.app-navbar .navbar-brand .brand-text,
.app-navbar .brand-text {
  margin-left: 0 !important;
  color: var(--proprock-ink) !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
}

/* Navbar links */
.app-navbar .nav-link {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 2px !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: #526174 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

.app-navbar .nav-link i {
  color: #718096 !important;
}

.app-navbar .nav-link:hover {
  color: var(--proprock-ink) !important;
  background: #fff4df !important;
  border-color: #f0dfc5 !important;
}

.app-navbar .nav-link.active {
  color: var(--proprock-orange-dark) !important;
  background: #fff2dc !important;
  border-color: #f2d9b5 !important;
  box-shadow: inset 0 -2px 0 var(--proprock-orange) !important;
}

.app-navbar .nav-link.active i {
  color: var(--proprock-orange) !important;
}

/* User/admin controls stay readable on the light navbar */
.app-navbar .btn,
.app-navbar .user-menu,
.app-navbar .dropdown-toggle {
  color: var(--proprock-ink) !important;
  background: #fffdf9 !important;
  border: 1px solid var(--proprock-warm-border) !important;
}

.app-navbar .btn:hover,
.app-navbar .user-menu:hover,
.app-navbar .dropdown-toggle:hover {
  color: var(--proprock-ink) !important;
  background: #fff5e5 !important;
  border-color: #e3cfae !important;
}

/* ---------- PAGE TITLES / TEXT ---------- */
.crm-page h1,
.crm-page h2,
.crm-page h3,
.crm-page h4,
.crm-page h5,
.crm-page h6,
.dashboard-section-title,
.dashboard-section-label,
.page-title,
.section-title {
  color: var(--proprock-ink) !important;
}

.crm-page p {
  color: var(--proprock-ink-2);
}

.crm-page h1 i,
.crm-page h2 i,
.crm-page h3 i,
.crm-page h4 i,
.crm-page h5 i,
.page-title i,
.section-title i {
  color: var(--proprock-orange) !important;
}

.section-kicker,
.section-eyebrow,
.dashboard-section-label,
.filter-hint,
.result-label {
  color: #8b7b68 !important;
}

/* ---------- DASHBOARD HERO ---------- */
.dashboard-hero,
.admin-hero,
.agent-hero {
  color: var(--proprock-ink) !important;
  background:
    radial-gradient(circle at 86% 15%, rgba(232,117,34,.11), transparent 25%),
    radial-gradient(circle at 100% 100%, rgba(255,215,150,.22), transparent 30%),
    linear-gradient(135deg, #fffdf8 0%, #fff5e5 58%, #fffaf1 100%) !important;
  border: 1px solid #eddfcb !important;
  box-shadow: 0 14px 34px rgba(91,68,39,.09) !important;
}

.dashboard-hero h1 {
  color: var(--proprock-ink) !important;
}

.dashboard-hero p {
  color: #667085 !important;
}

.dashboard-hero::after {
  border-color: rgba(199,153,87,.16) !important;
  box-shadow:
    0 0 0 55px rgba(199,153,87,.035),
    0 0 0 110px rgba(199,153,87,.02) !important;
}

.hero-action-btn {
  color: var(--proprock-ink) !important;
  background: rgba(255,255,255,.72) !important;
  border-color: #e6d6bf !important;
  box-shadow: 0 3px 10px rgba(91,68,39,.045);
}

.hero-action-btn:hover {
  color: var(--proprock-ink) !important;
  background: #ffffff !important;
  border-color: #ddc5a4 !important;
}

.hero-action-light {
  color: #ffffff !important;
  background: var(--proprock-orange) !important;
  border-color: var(--proprock-orange) !important;
}

.hero-action-light:hover {
  color: #ffffff !important;
  background: var(--proprock-orange-dark) !important;
}

/* ---------- STAT CARDS: KEEP COLOR VARIETY, SOFTEN IT ---------- */
.modern-stat {
  box-shadow: 0 9px 24px rgba(91,68,39,.10) !important;
}

.stat-blue {
  background: linear-gradient(135deg, #3159ad, #4676d2) !important;
}

.stat-orange {
  background: linear-gradient(135deg, #c85d12, #e87522) !important;
}

.stat-green {
  background: linear-gradient(135deg, #187047, #2b9661) !important;
}

.stat-purple {
  background: linear-gradient(135deg, #6540ad, #805dcc) !important;
}

.stat-top,
.stat-foot {
  color: rgba(255,255,255,.82) !important;
}

.stat-value,
.stat-title,
.stat-label {
  color: #ffffff !important;
}

/* ---------- ALL GENERAL CARDS ---------- */
.card,
.dashboard-card,
.priority-card,
.table-card,
.search-card,
.quick-actions-card,
.performance-card,
.form-card,
.customer-form-card,
.add-customer-card,
.content-card,
.filter-card {
  color: var(--proprock-ink) !important;
  background: rgba(255,253,248,.96) !important;
  border: 1px solid var(--proprock-warm-border) !important;
  box-shadow: 0 9px 25px rgba(91,68,39,.065) !important;
}

.dashboard-card h3,
.dashboard-card h4,
.card h3,
.card h4,
.priority-card h3,
.priority-card h4,
.card-heading h6 {
  color: var(--proprock-ink) !important;
}

.dashboard-card p,
.card p,
.priority-card p {
  color: var(--proprock-muted) !important;
}

.card-heading span,
.modal-kicker {
  color: #8a7a68 !important;
}

/* Priority cards */
.priority-card {
  background: rgba(255,253,248,.98) !important;
}

.priority-card:hover {
  color: var(--proprock-ink) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(91,68,39,.09) !important;
}

.priority-copy span {
  color: #59687b !important;
}

.priority-copy strong {
  color: var(--proprock-ink) !important;
}

.priority-copy small {
  color: #8a96a5 !important;
}

.priority-danger .priority-icon {
  color: #c2412d !important;
  background: #fff0ec !important;
}

.priority-warning .priority-icon {
  color: #c56a0b !important;
  background: #fff3dc !important;
}

/* ---------- TABLES ---------- */
.table,
table {
  color: var(--proprock-ink-2) !important;
  background: #fffdf9 !important;
  border-color: var(--proprock-warm-border-soft) !important;
}

.table thead,
.table thead tr,
.dashboard-table thead,
.dashboard-table thead tr,
table thead,
table thead tr {
  background: #fff1d9 !important;
}

.table thead th,
.dashboard-table thead th,
table thead th {
  background: #fff1d9 !important;
  color: #4d5b6d !important;
  border-bottom: 1px solid #e9d8bd !important;
  font-weight: 750 !important;
}

.table tbody,
.dashboard-table tbody,
table tbody {
  background: #fffdf9 !important;
}

.table tbody td,
.dashboard-table tbody td,
table tbody td {
  background: #fffdf9 !important;
  color: #3f4d60 !important;
  border-color: #eee4d6 !important;
}

.table tbody tr:hover,
.dashboard-table tbody tr:hover,
table tbody tr:hover {
  background: #fff8ec !important;
}

.table tbody tr:hover td,
.dashboard-table tbody tr:hover td,
table tbody tr:hover td {
  background: #fff8ec !important;
}

.table a,
.dashboard-table a,
table a,
.contact-link {
  color: #2f61b8 !important;
}

.table a:hover,
.dashboard-table a:hover,
table a:hover,
.contact-link:hover {
  color: var(--proprock-orange-dark) !important;
}

/* ---------- FORM FIELDS: WARM, LIGHT, HIGH CONTRAST ---------- */
label,
.form-label,
.form-group > label,
.label-row label,
.modern-label {
  color: #334155 !important;
}

.form-control,
.form-select,
input.form-control,
select.form-select,
textarea.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="password"],
textarea,
select,
.modern-input {
  background: #fffefa !important;
  color: var(--proprock-ink) !important;
  border: 1px solid #ddcfbb !important;
  border-radius: 9px !important;
  box-shadow: inset 0 1px 2px rgba(91,68,39,.025) !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: #9aa3af !important;
}

.form-control:hover,
.form-select:hover,
input:hover,
textarea:hover,
select:hover,
.modern-input:hover {
  border-color: #cdbb9f !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus,
.modern-input:focus {
  background: #ffffff !important;
  color: var(--proprock-ink) !important;
  border-color: #d99a59 !important;
  box-shadow: 0 0 0 3px rgba(232,117,34,.12) !important;
  outline: none !important;
}

.modern-input-wrap > i,
.input-wrap > i:first-child {
  color: #8d99a8 !important;
}

/* ---------- PRIMARY BUTTONS ---------- */
.btn-primary,
.search-button {
  color: #ffffff !important;
  background: linear-gradient(135deg, #d96718, #e87522) !important;
  border-color: #d96718 !important;
  box-shadow: 0 5px 13px rgba(200,93,18,.16) !important;
}

.btn-primary:hover,
.search-button:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #bf5510, #d96718) !important;
  border-color: #bf5510 !important;
}

.btn-outline-primary {
  color: #315fae !important;
  border-color: #aebfdd !important;
  background: #fffdf9 !important;
}

.btn-outline-primary:hover {
  color: #ffffff !important;
  background: #315fae !important;
  border-color: #315fae !important;
}

/* ---------- STATUS / BADGES ---------- */
.status-new,
.badge.bg-primary,
.status-badge {
  background: #eaf1ff !important;
  color: #315fa8 !important;
}

.status-contacted {
  background: #fff4c9 !important;
  color: #8a5b00 !important;
}

.status-interested {
  background: #e5f6ec !important;
  color: #17643e !important;
}

.status-not-interested {
  background: #ffebe8 !important;
  color: #a13c2d !important;
}

.status-follow-up {
  background: #fff0dc !important;
  color: #a4540a !important;
}

.status-site-visit-scheduled {
  background: #eeeaff !important;
  color: #5d46a0 !important;
}

.status-closed-won {
  background: #dff4e7 !important;
  color: #17633d !important;
}

.status-closed-lost {
  background: #eef1f4 !important;
  color: #475569 !important;
}

.status-dead-no-response {
  background: #394454 !important;
  color: #ffffff !important;
}

/* ---------- DASHBOARD TABLE / PEOPLE ---------- */
.dashboard-table tbody td {
  color: #4b596c !important;
}

.person-avatar {
  color: #315fae !important;
  background: #eef4ff !important;
}

.person-cell strong {
  color: #334155 !important;
}

.person-cell small {
  color: #929cab !important;
}

.number-pill {
  color: #465468 !important;
  background: #f4efe6 !important;
}

.won-pill {
  color: #187047 !important;
  background: #edf8f1 !important;
}

.table-action {
  color: #315fae !important;
  background: #eef4ff !important;
}

.table-action:hover {
  color: #234c96 !important;
  background: #dfeaff !important;
}

.primary-table-action {
  color: #ffffff !important;
  background: #d96718 !important;
}

.primary-table-action:hover {
  color: #ffffff !important;
  background: #bf5510 !important;
}

/* ---------- QUICK ACTIONS / ICONS ---------- */
.action-row {
  color: #536174 !important;
  background: #fffdf9 !important;
  border-color: #eee3d3 !important;
}

.action-row:hover {
  color: var(--proprock-ink) !important;
  border-color: #dfceb4 !important;
  background: #fff8ec !important;
}

.action-row.primary-action {
  color: #315fae !important;
  border-color: #d9e4f7 !important;
  background: #f2f6fd !important;
}

.action-icon {
  background: #f6f0e7 !important;
  color: #64748b !important;
}

.primary-action .action-icon {
  color: #ffffff !important;
  background: #315fae !important;
}

/* ---------- EMPTY STATES / PAGINATION ---------- */
.empty-state {
  color: #8a96a5 !important;
}

.empty-state strong {
  color: #536174 !important;
}

.empty-icon {
  color: #8a96a5 !important;
  background: #f7f0e6 !important;
}

.dashboard-pagination .page-link {
  color: #59687b !important;
  background: #fffdf9 !important;
  border-color: #e5d8c8 !important;
}

.dashboard-pagination .page-item.active .page-link {
  color: #ffffff !important;
  background: #d96718 !important;
  border-color: #d96718 !important;
}

/* ---------- MODALS ---------- */
.modern-modal {
  background: #fffdf9 !important;
  box-shadow: 0 25px 70px rgba(91,68,39,.18) !important;
}

.modern-modal .modal-header,
.modern-modal .modal-footer {
  border-color: #eee3d4 !important;
}

.modern-modal .modal-title {
  color: var(--proprock-ink) !important;
}

.modern-modal .modal-body {
  color: #59687b !important;
}

.reminder-list .list-group-item {
  border-color: #eee3d4 !important;
}

/* ---------- LOGIN: KEEP THE EXISTING WARM LOGIN LOOK ---------- */
.login-panel {
  background: #fffdf9 !important;
}

.login-page {
  background:
    radial-gradient(circle at 8% 10%, rgba(232,117,34,.10), transparent 24%),
    radial-gradient(circle at 92% 88%, rgba(255,220,160,.12), transparent 28%),
    linear-gradient(135deg, #fffdf8 0%, #fff6e9 100%) !important;
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar-thumb {
  background: #d8c7ad !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #c7ae8c !important;
}

/* ---------- RESPONSIVE BRANDING ---------- */
@media (max-width: 1000px) {
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    width: 122px !important;
    height: 50px !important;
    max-width: 122px !important;
    max-height: 50px !important;
  }

  .app-navbar .navbar-brand {
    min-width: auto !important;
    gap: 3px !important;
    margin-right: 12px !important;
  }

  .app-navbar .navbar-brand .brand-text,
  .app-navbar .brand-text {
    font-size: 14px !important;
  }
}

@media (max-width: 800px) {
  .app-navbar,
  .app-navbar .container-fluid {
    min-height: 68px !important;
  }

  .app-navbar .nav-link {
    padding: 0 9px !important;
  }
}

@media (max-width: 560px) {
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    width: 104px !important;
    height: 44px !important;
    max-width: 104px !important;
    max-height: 44px !important;
  }

  .app-navbar .navbar-brand {
    gap: 2px !important;
    margin-right: 8px !important;
  }

  .app-navbar .navbar-brand .brand-text,
  .app-navbar .brand-text {
    font-size: 13px !important;
  }
}


/* =========================================================
   FINAL BRAND / NAVBAR FIX
   - Keeps the ORIGINAL Proprock logo artwork unchanged.
   - Makes the logo visually clearer/larger.
   - Brings "Proprock CRM" very close to the logo.
   - Uses dark ink for strong readability on the warm navbar.
   ========================================================= */

.app-navbar {
  background: #fffdf8 !important;
  border-bottom: 1px solid #eadfce !important;
  box-shadow: 0 5px 18px rgba(91, 68, 39, .08) !important;
}

.app-navbar .container-fluid {
  display: flex !important;
  align-items: center !important;
}

/* Tight logo + CRM grouping */
.app-navbar .navbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin-right: 20px !important;
  padding: 0 !important;
  min-width: auto !important;
  color: #172033 !important;
  white-space: nowrap !important;
}

/* ORIGINAL logo only — no replacement, no white plate */
.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo {
  width: 128px !important;
  height: 52px !important;
  max-width: 128px !important;
  max-height: 52px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: scale(1.22);
  transform-origin: center center;
}

/* Proprock CRM text */
.app-navbar .navbar-brand .brand-text,
.app-navbar .brand-text {
  color: #172033 !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Navbar links remain clearly readable */
.app-navbar .nav-link {
  color: #243653 !important;
  font-weight: 650 !important;
}

.app-navbar .nav-link i {
  color: #536b8e !important;
}

.app-navbar .nav-link:hover {
  color: #d96718 !important;
  background: #fff4df !important;
  border-color: #f0d7ae !important;
}

.app-navbar .nav-link.active {
  color: #c85b12 !important;
  background: #fff4df !important;
  border-color: #f0d7ae !important;
  box-shadow: inset 0 -2px 0 #e87522 !important;
}

/* Account controls */
.app-navbar .btn,
.app-navbar .user-menu,
.app-navbar .dropdown-toggle {
  color: #172033 !important;
  background: #fffdf9 !important;
  border-color: #e4d6c2 !important;
}

.app-navbar .btn:hover,
.app-navbar .user-menu:hover,
.app-navbar .dropdown-toggle:hover {
  background: #fff5e6 !important;
  border-color: #d8bf9d !important;
}

/* Make small logo artwork readable without changing the source image */
.app-navbar .navbar-logo img,
.app-navbar .navbar-brand img {
  image-rendering: auto !important;
}

/* ---------- FINAL TEXT CONTRAST SAFETY ---------- */
body,
.crm-page,
.page-wrapper,
.main-content,
.content-wrapper {
  color: #243653 !important;
}

.crm-page h1,
.crm-page h2,
.crm-page h3,
.crm-page h4,
.crm-page h5,
.crm-page h6,
.page-title,
.section-title,
.dashboard-section-title {
  color: #172033 !important;
}

.crm-page p,
.crm-page label,
.form-label,
.form-text,
.text-muted {
  color: #536783 !important;
}

.table,
.table td,
.table th,
table,
table td,
table th {
  color: #243653 !important;
}

/* ---------- RESPONSIVE BRANDING ---------- */
@media (max-width: 1000px) {
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    width: 112px !important;
    height: 48px !important;
    max-width: 112px !important;
    max-height: 48px !important;
    transform: scale(1.18);
  }

  .app-navbar .navbar-brand {
    gap: 2px !important;
    margin-right: 12px !important;
  }

  .app-navbar .navbar-brand .brand-text,
  .app-navbar .brand-text {
    font-size: 14px !important;
  }
}

@media (max-width: 560px) {
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    width: 96px !important;
    height: 42px !important;
    max-width: 96px !important;
    max-height: 42px !important;
    transform: scale(1.12);
  }

  .app-navbar .navbar-brand {
    gap: 1px !important;
    margin-right: 8px !important;
  }

  .app-navbar .navbar-brand .brand-text,
  .app-navbar .brand-text {
    font-size: 13px !important;
  }
}


/* =========================================================
   PROPROCK FINAL VISIBILITY + BRAND SPACING
   Bulk Upload page matched to the attached reference:
   warm cream background + strong dark navy typography.
   ========================================================= */

/* Main page text */
.bulk-upload-page,
.bulk-upload-page *,
.bulk-upload-container,
.bulk-upload-container * {
  color: #163b66;
}

/* Bulk Upload heading */
.bulk-upload-page h1,
.bulk-upload-page h2,
.bulk-upload-page h3,
.bulk-upload-container h1,
.bulk-upload-container h2,
.bulk-upload-container h3 {
  color: #102f55 !important;
  font-weight: 700 !important;
}

/* Supporting/instruction text */
.bulk-upload-page p,
.bulk-upload-page label,
.bulk-upload-page .form-label,
.bulk-upload-page .form-text,
.bulk-upload-container p,
.bulk-upload-container label,
.bulk-upload-container .form-label,
.bulk-upload-container .form-text {
  color: #31577f !important;
}

/* Required/optional field names and inline code */
.bulk-upload-page code,
.bulk-upload-container code {
  color: #c92f63 !important;
  font-weight: 600 !important;
}

/* Information / auto-assignment box:
   keep the warm yellow background but use readable navy text */
.bulk-upload-page .alert,
.bulk-upload-container .alert,
.bulk-upload-page .info-box,
.bulk-upload-container .info-box {
  color: #234e79 !important;
  background: #fdf6de !important;
  border-color: #f0dfb4 !important;
}

.bulk-upload-page .alert *,
.bulk-upload-container .alert *,
.bulk-upload-page .info-box *,
.bulk-upload-container .info-box * {
  color: #234e79 !important;
}

.bulk-upload-page .alert strong,
.bulk-upload-container .alert strong {
  color: #123f70 !important;
}

/* Links */
.bulk-upload-page a,
.bulk-upload-container a {
  color: #174f8a !important;
  font-weight: 600;
}

.bulk-upload-page a:hover,
.bulk-upload-container a:hover {
  color: #d96517 !important;
}

/* Form controls */
.bulk-upload-page input,
.bulk-upload-page select,
.bulk-upload-page textarea,
.bulk-upload-container input,
.bulk-upload-container select,
.bulk-upload-container textarea {
  color: #173d68 !important;
  background: #fffdf8 !important;
  border-color: #dfcfae !important;
}

.bulk-upload-page input::placeholder,
.bulk-upload-container input::placeholder {
  color: #6b7f96 !important;
  opacity: 1 !important;
}

/* File chooser text */
.bulk-upload-page input[type="file"],
.bulk-upload-container input[type="file"] {
  color: #31577f !important;
}

/* Download template button */
.bulk-upload-page .btn,
.bulk-upload-container .btn {
  color: #17466f;
}

/* Primary upload action */
.bulk-upload-page .btn-primary,
.bulk-upload-page .upload-btn,
.bulk-upload-container .btn-primary,
.bulk-upload-container .upload-btn {
  color: #ffffff !important;
  background: #e87522 !important;
  border-color: #e87522 !important;
}

.bulk-upload-page .btn-primary:hover,
.bulk-upload-page .upload-btn:hover,
.bulk-upload-container .btn-primary:hover,
.bulk-upload-container .upload-btn:hover {
  color: #ffffff !important;
  background: #d96316 !important;
  border-color: #d96316 !important;
}

/* =========================================================
   NAVBAR: ORIGINAL LOGO + "Proprock CRM" VERY CLOSE
   ========================================================= */

.app-navbar .navbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-right: 18px !important;
  padding: 0 !important;
  min-width: auto !important;
  white-space: nowrap !important;
}

/* Keep the existing/original logo image */
.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo {
  width: 118px !important;
  height: 50px !important;
  max-width: 118px !important;
  max-height: 50px !important;
  margin: 0 -2px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

/* CRM text immediately beside the logo */
.app-navbar .navbar-brand .brand-text,
.app-navbar .brand-text {
  margin: 0 !important;
  padding: 0 !important;
  color: #162f52 !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
}

/* Navbar links */
.app-navbar .nav-link {
  color: #25476d !important;
}

.app-navbar .nav-link:hover {
  color: #d96517 !important;
  background: #fff4df !important;
}

.app-navbar .nav-link.active {
  color: #c95d14 !important;
  background: #fff4df !important;
}

/* Account controls */
.app-navbar .btn,
.app-navbar .user-menu,
.app-navbar .dropdown-toggle {
  color: #162f52 !important;
}

/* Mobile */
@media (max-width: 1000px) {
  .app-navbar .navbar-brand {
    gap: 0 !important;
    margin-right: 10px !important;
  }

  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    width: 105px !important;
    height: 45px !important;
    max-width: 105px !important;
    max-height: 45px !important;
    margin-right: -2px !important;
  }

  .app-navbar .navbar-brand .brand-text,
  .app-navbar .brand-text {
    font-size: 14px !important;
  }
}

@media (max-width: 560px) {
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    width: 92px !important;
    height: 40px !important;
    max-width: 92px !important;
    max-height: 40px !important;
  }

  .app-navbar .navbar-brand .brand-text,
  .app-navbar .brand-text {
    font-size: 13px !important;
  }
}

/* =========================================================
   HEADER — FINAL EXACT MATCH TO REFERENCE SCREENSHOT
   (Appended last on purpose so it wins over every earlier
   .app-navbar block above. This is the single source of
   truth for the header going forward.)
   ========================================================= */

.app-navbar {
  background: linear-gradient(90deg, #fffdf9 0%, #fdf4e6 100%) !important;
  border-bottom: 1px solid #efe0c4 !important;
  box-shadow: 0 4px 16px rgba(120, 90, 45, .07) !important;
  min-height: 84px !important;
}

.app-navbar .container-fluid {
  display: flex !important;
  align-items: center !important;
  min-height: 84px !important;
}

/* --- Logo + wordmark --- */
.app-navbar .navbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-right: 28px !important;
  padding: 0 !important;
}

.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo {
  width: 150px !important;
  height: 62px !important;
  max-width: 150px !important;
  max-height: 62px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

/* --- Nav links row --- */
.app-navbar .navbar-nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.app-navbar .nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: #33465f !important;
  font-size: 14.5px !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}

.app-navbar .nav-link i,
.app-navbar .nav-link svg {
  color: #5a7291 !important;
  font-size: 15px !important;
}

.app-navbar .nav-link:hover {
  color: #d96718 !important;
  background: #fff4df !important;
  border-color: #f0d7ae !important;
}

.app-navbar .nav-link:hover i {
  color: #e8801f !important;
}

/* Active "Dashboard" pill with rounded orange underline bar */
.app-navbar .nav-link.active {
  position: relative !important;
  color: #d9660f !important;
  background: linear-gradient(180deg, #fff6e6, #ffedd0) !important;
  border: 1px solid #f3d19b !important;
  border-radius: 10px !important;
  padding-bottom: 10px !important;
  box-shadow: none !important;
}

.app-navbar .nav-link.active i,
.app-navbar .nav-link.active svg {
  color: #e8801f !important;
}

.app-navbar .nav-link.active::after {
  content: "" !important;
  position: absolute !important;
  left: 10% !important;
  right: 10% !important;
  bottom: -4px !important;
  height: 3px !important;
  border-radius: 4px !important;
  background: #e87522 !important;
}

/* --- Divider between nav links and account area --- */
.app-navbar .navbar-divider {
  width: 1px !important;
  height: 30px !important;
  margin: 0 18px !important;
  background: #e6d7ba !important;
  flex: 0 0 1px !important;
}

/* --- Account cluster: avatar + name + caret --- */
.app-navbar .user-menu,
.app-navbar .dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: #1f3350 !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
}

/* Two-tone avatar: light-blue circle behind a navy person icon */
.app-navbar .user-menu i:first-child,
.app-navbar .dropdown-toggle i:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #cfe1f5 !important;
  color: #2c4a73 !important;
  font-size: 16px !important;
}

.app-navbar .user-menu .fa-chevron-down,
.app-navbar .dropdown-toggle .fa-chevron-down,
.app-navbar .user-menu i:last-child,
.app-navbar .dropdown-toggle i:last-child {
  color: #8a97a8 !important;
  font-size: 12px !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* --- Logout button --- */
.app-navbar .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  border: 1px solid #e4d6c2 !important;
  border-radius: 10px !important;
  background: #fffdf9 !important;
  color: #172033 !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  box-shadow: 0 1px 3px rgba(120, 90, 45, .06) !important;
}

.app-navbar .btn i {
  color: #33465f !important;
}

.app-navbar .btn:hover {
  background: #fff5e6 !important;
  border-color: #d8bf9d !important;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .app-navbar .nav-link { padding: 8px 12px !important; font-size: 13.5px !important; }
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo { width: 118px !important; height: 50px !important; max-width: 118px !important; max-height: 50px !important; }
}

@media (max-width: 768px) {
  .app-navbar .navbar-nav { flex-wrap: wrap !important; gap: 4px !important; }
  .app-navbar .navbar-divider { display: none !important; }
  .app-navbar .user-menu span,
  .app-navbar .dropdown-toggle span { display: none !important; }
}

/* =========================================================
   HEADER — REMOVE "PROPROCK CRM" TEXT, LOGO FLUSH LEFT
   (Appended last — wins over every rule above.)
   ========================================================= */

/* Hide the "Proprock CRM" wordmark entirely — logo only */
.app-navbar .navbar-brand .brand-text,
.app-navbar .brand-text {
  display: none !important;
}

/* Container: no extra left gutter before the logo */
.app-navbar .container-fluid {
  padding-left: 20px !important;
  padding-right: 24px !important;
}

/* Logo sits as far left as possible, then a tight gap to the first tab */
.app-navbar .navbar-brand {
  gap: 0 !important;
  margin-right: 16px !important;
  padding: 0 !important;
  min-width: auto !important;
}

.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo {
  margin: 0 !important;
}

@media (max-width: 768px) {
  .app-navbar .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .app-navbar .navbar-brand {
    margin-right: 8px !important;
  }
}

/* =========================================================
   HEADER — LOGO FILLS FROM EXTREME LEFT EDGE TO JUST
   BEFORE THE FIRST TAB (per marked screenshot).
   No fixed width cap — logo scales to the navbar's height
   and keeps its natural aspect ratio.
   (Appended last — wins over every rule above.)
   ========================================================= */

.app-navbar .container-fluid {
  padding-left: 4px !important;
  padding-right: 24px !important;
}

.app-navbar .navbar-brand {
  margin-right: 22px !important;
  padding: 0 !important;
  min-width: auto !important;
}

.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo {
  height: 74px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 768px) {
  .app-navbar .container-fluid {
    padding-left: 4px !important;
  }
  .app-navbar .navbar-brand {
    margin-right: 12px !important;
  }
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    height: 48px !important;
  }
}

/* =========================================================
   HEADER — LOGO SIZED SO THE "SPACE FOR YOU" TAGLINE
   INSIDE THE LOGO ARTWORK IS ACTUALLY LEGIBLE.
   (Appended last — wins over every rule above.)
   ========================================================= */

.app-navbar,
.app-navbar .container-fluid {
  min-height: 96px !important;
}

.app-navbar .container-fluid {
  align-items: center !important;
}

.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo {
  height: 88px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  image-rendering: -webkit-optimize-contrast;
}

@media (max-width: 768px) {
  .app-navbar,
  .app-navbar .container-fluid {
    min-height: 72px !important;
  }
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    height: 58px !important;
  }
}

/* =========================================================
   HEADER — COMPACT BAR HEIGHT, LOGO STAYS LARGE
   (Appended last — wins over every rule above.)
   The header bar itself goes back to a normal compact
   height; only the logo graphic is sized up inside it.
   ========================================================= */

.app-navbar,
.app-navbar .container-fluid {
  min-height: 84px !important;
}

.app-navbar .container-fluid {
  align-items: center !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo {
  height: 78px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

@media (max-width: 768px) {
  .app-navbar,
  .app-navbar .container-fluid {
    min-height: 64px !important;
  }
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    height: 52px !important;
  }
}

/* =========================================================
   HEADER — SCALE LOGO UP FURTHER WITHIN THE SAME COMPACT BAR
   (Appended last — wins over every rule above.)
   ========================================================= */

.app-navbar .container-fluid {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo {
  height: 82px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

@media (max-width: 768px) {
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    height: 56px !important;
  }
}

/* =========================================================
   HEADER — LOGO SCALED TO 100PX (bar grows just enough to fit it)
   (Appended last — wins over every rule above.)
   ========================================================= */

.app-navbar,
.app-navbar .container-fluid {
  min-height: 108px !important;
}

.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo {
  height: 100px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

@media (max-width: 768px) {
  .app-navbar,
  .app-navbar .container-fluid {
    min-height: 72px !important;
  }
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    height: 60px !important;
  }
}

/* =========================================================
   HEADER — BAR AS COMPACT AS POSSIBLE WITHOUT SHRINKING
   THE 100PX LOGO (logo size unchanged, padding removed)
   (Appended last — wins over every rule above.)
   ========================================================= */

.app-navbar,
.app-navbar .container-fluid {
  min-height: 100px !important;
}

.app-navbar .container-fluid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Logo size intentionally left untouched at 100px from the previous step */

@media (max-width: 768px) {
  .app-navbar,
  .app-navbar .container-fluid {
    min-height: 60px !important;
  }
}

/* =========================================================
   HEADER — ZERO OUT BOOTSTRAP'S DEFAULT NAVBAR PADDING
   Bootstrap's base .navbar class adds ~0.5rem top/bottom
   padding on the <nav> element itself (separate from the
   .container-fluid padding already zeroed). That's what was
   still leaving a gap above/below the logo and tabs.
   (Appended last — wins over every rule above.)
   ========================================================= */

.app-navbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.app-navbar .navbar-nav .nav-link {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* =========================================================
   HEADER — KILL REMAINING SLIVER OF SPACE ABOVE/BELOW LOGO
   Inline <img> elements reserve a few px below the baseline
   for text descenders even with padding/margin at 0. Forcing
   display:block removes that reserved sliver.
   (Appended last — wins over every rule above.)
   ========================================================= */

.app-navbar .navbar-brand {
  line-height: 0 !important;
}

.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo {
  display: block !important;
  vertical-align: middle !important;
}

.app-navbar .navbar-collapse {
  margin: 0 !important;
}

.app-navbar .navbar-nav {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Push account cluster (avatar/name + Logout) flush to the right edge */
.app-navbar .navbar-collapse {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.app-navbar .navbar-nav.me-auto {
  margin-right: auto !important;
}

/* =========================================================
   HEADER — SHRINK OVERALL BAR HEIGHT
   Logo was the tallest element (100px), forcing the bar to
   that height. Brought both down together to compact the
   whole header, top and bottom lines included.
   (Appended last — wins over every rule above.)
   ========================================================= */

.app-navbar,
.app-navbar .container-fluid {
  min-height: 84px !important;
}

.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo {
  height: 84px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
}

@media (max-width: 768px) {
  .app-navbar,
  .app-navbar .container-fluid {
    min-height: 56px !important;
  }
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    height: 48px !important;
  }
}

/* =========================================================
   BULK UPLOAD — FIX LOW-CONTRAST TEXT IN THE INFO/ALERT BOX
   Background colors left untouched — only the text color is
   darkened to a navy that harmonizes with the existing blue/
   lavender box instead of clashing with a brand-new hue.
   (Appended last — wins over every rule above.)
   ========================================================= */

.crm-page .alert,
.crm-page .alert p,
.crm-page .alert span,
.crm-page .alert li,
.bulk-upload-page .alert,
.bulk-upload-page .alert p,
.bulk-upload-page .alert span,
.bulk-upload-container .alert,
.bulk-upload-container .alert p,
.bulk-upload-container .alert span {
  color: #16314f !important;
}

.crm-page .alert strong,
.crm-page .alert b,
.bulk-upload-page .alert strong,
.bulk-upload-page .alert b,
.bulk-upload-container .alert strong,
.bulk-upload-container .alert b {
  color: #0b2038 !important;
  font-weight: 700 !important;
}

/* Keep the pink/magenta inline column-name highlights legible too */
.crm-page .alert code,
.bulk-upload-page .alert code,
.bulk-upload-container .alert code {
  color: #b0215c !important;
  background: rgba(255, 255, 255, .55) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
}

/* =========================================================
   BULK UPLOAD — CORRECTED FIX (real markup confirmed)
   The info box is plain <div class="alert alert-info">, not
   wrapped in .crm-page/.bulk-upload-page, so the earlier fix
   never matched it. Targeting .alert-info directly now.
   Background left untouched — only text darkened for contrast.
   (Appended last — wins over every rule above.)
   ========================================================= */

.alert-info {
  color: #16314f !important;
}

.alert-info strong,
.alert-info b {
  color: #0b2038 !important;
  font-weight: 700 !important;
}

/* Bootstrap's default .text-muted gray is too faint on this
   light-blue background — replace with a softer navy that
   still reads as "secondary" text but stays legible */
.alert-info .text-muted {
  color: #3c5c7d !important;
}

.alert-info code {
  color: #b0215c !important;
  background: rgba(255, 255, 255, .6) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
}

.alert-info i {
  color: #1c5f8a !important;
}

/* =========================================================
   HEADER — SHRINK NAVBAR LOGO (was 84px tall, far too large
   next to the nav links). Appended last so it wins over every
   earlier .navbar-logo rule above, including the 84px one.
   ========================================================= */

.app-navbar,
.app-navbar .container-fluid {
  min-height: 60px !important;
}

.app-navbar .navbar-logo,
.app-navbar .navbar-brand .navbar-logo,
.navbar-logo {
  height: 42px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
}

@media (max-width: 768px) {
  .app-navbar,
  .app-navbar .container-fluid {
    min-height: 48px !important;
  }
  .app-navbar .navbar-logo,
  .app-navbar .navbar-brand .navbar-logo,
  .navbar-logo {
    height: 32px !important;
  }
}