/* =============================================================
   Account dashboard — Asraa design-system layer (premium)
   Loaded only on the page carrying [wp_realestate_user_dashboard]
   (see functions.php asraa_child_is_dashboard()). The Homeo skin +
   template.css are swept on this screen, so the shared wp-realestate
   widget classes (.box-white-dashboard, .not-found, form controls, the
   broker-feed table, the reviews / messages lists) are (re)defined here
   in full.
   ============================================================= */

/* ---------- account shell ---------- */
.asraa-acct {
  /* local tokens */
  --dash-card: 0 1px 2px rgba(29, 35, 39, 0.04), 0 14px 38px rgba(29, 35, 39, 0.07);
  --dash-card-hover: 0 2px 4px rgba(29, 35, 39, 0.06), 0 22px 50px rgba(29, 35, 39, 0.12);
  --dash-radius: 16px;
  padding-top: 34px;
  padding-bottom: 84px;
  overflow-x: clip; /* safety net covering both the rail and main columns — see the narrower .asraa-acct-main guard below for why this is needed */
}
.asraa-acct .crumb {
  padding-top: 0;
  margin-bottom: 6px;
}
.asraa-acct-grid {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  gap: 40px;
  margin-top: 16px;
  align-items: start;
}
.asraa-acct-rail {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.asraa-acct-card {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--dash-radius);
  padding: 16px 18px;
  box-shadow: var(--dash-card);
}
.asraa-acct-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--coral), var(--coral-dark));
  box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.12);
}
.asraa-acct-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.asraa-acct-id strong {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asraa-acct-id small {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* role nav rail */
.asraa-acct-nav {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--dash-radius);
  padding: 10px;
  box-shadow: var(--dash-card);
}
.asraa-acct-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.asraa-acct-menu li {
  margin: 0;
}
.asraa-acct-menu a {
  position: relative;
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.3;
  transition: background 0.16s ease, color 0.16s ease, padding-left 0.16s ease;
}
.asraa-acct-menu a:hover {
  background: var(--sand);
  color: var(--ink);
  padding-left: 18px;
}
.asraa-acct-menu .current-menu-item > a,
.asraa-acct-menu .current_page_item > a {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}
.asraa-acct-menu .current-menu-item > a::before,
.asraa-acct-menu .current_page_item > a::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 3px;
  background: var(--coral);
}

/* ---------- dashboard body ---------- */
.asraa-dash {
  display: flex;
  flex-direction: column;
}

/* hero */
.asraa-dash-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 34px 36px 52px;
  color: #fff;
  background: linear-gradient(135deg, #232a2f 0%, var(--ink) 48%, var(--ink-2) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.asraa-dash-hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(255, 90, 95, 0.22) 0%, rgba(255, 90, 95, 0) 60%),
    radial-gradient(60% 100% at 0% 100%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.asraa-dash-hero__id {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.asraa-dash-hero__avatar {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, var(--coral), var(--coral-dark));
  border: 3px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 16px 34px rgba(0, 0, 0, 0.4);
}
.asraa-dash-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.asraa-dash-hero__eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral-soft);
}
.asraa-dash-hero__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
}
.asraa-dash-hero__sub {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.68);
  max-width: 40ch;
}
.asraa-dash-hero__actions {
  position: relative;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.asraa-btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(4px);
}
.asraa-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* stat tiles — pulled up to overlap the hero */
.asraa-dash-stats {
  position: relative;
  z-index: 2;
  margin: -34px 4px 0;
  /* flex, not grid: the tile count is 4 or 5 — flex lets them share the
     row equally and fill it at either count, wrapping only when a tile
     would fall below its min width */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.asraa-dash-stat {
  flex: 1 1 120px;
}
.asraa-dash-stat {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  box-shadow: var(--dash-card);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.asraa-dash-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--line);
}
.asraa-dash-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--dash-card-hover);
}
.asraa-dash-stat__ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--sand);
}
.asraa-dash-stat__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.asraa-dash-stat__num {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
}
.asraa-dash-stat__lbl {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.asraa-dash-stat--ok::before {
  background: #35b37e;
}
.asraa-dash-stat--warn::before {
  background: #e0a326;
}
.asraa-dash-stat--warn .asraa-dash-stat__ico {
  background: #fdf1dd;
  color: #b7791f;
}
.asraa-dash-stat--coral::before {
  background: var(--coral);
}
.asraa-dash-stat--coral .asraa-dash-stat__ico {
  background: #ffe9ea;
  color: var(--coral-dark);
}
.asraa-dash-stat--ink::before {
  background: var(--ink);
}
.asraa-dash-stat--ink .asraa-dash-stat__ico {
  background: var(--ink);
  color: #fff;
}
.asraa-dash-stat--leads::before {
  background: #1a9d63;
}
.asraa-dash-stat--leads .asraa-dash-stat__ico {
  background: #e3f7ee;
  color: #1a9d63;
}

/* ---------- panels ---------- */
.asraa-dash-cols {
  display: grid;
  gap: 22px;
  margin-top: 30px;
}
.asraa-dash-col-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.box-white-dashboard,
.asraa-dash-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--dash-radius);
  padding: 26px;
  box-shadow: var(--dash-card);
}
.asraa-dash-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.asraa-dash-panel__head .title,
.box-white-dashboard > .title {
  position: relative;
  margin: 0;
  padding-bottom: 10px;
  font-size: 1.2rem;
}
.asraa-dash-panel__head .title::after,
.box-white-dashboard > .title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--coral);
}
.asraa-dash-pill {
  flex: 0 0 auto;
  align-self: flex-start;
  background: #e3f7ee;
  color: #1a9d63;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.asraa-dash-panel__cta {
  margin-top: 20px;
}
.not-found {
  color: var(--muted);
  font-size: 14px;
  padding: 14px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--paper);
}

/* ---------- assigned-leads list ---------- */
.asraa-lead-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.asraa-lead-list li + li {
  margin-top: 10px;
}
.asraa-lead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.asraa-lead:hover {
  border-color: rgba(26, 157, 99, 0.5);
  box-shadow: 0 10px 26px rgba(26, 157, 99, 0.14);
  transform: translateY(-1px);
}
.asraa-lead__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #27c07f, #1a9d63);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 0 0 3px rgba(26, 157, 99, 0.1);
}
.asraa-lead__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.asraa-lead__name {
  font-weight: 600;
  color: var(--ink);
  font-size: 14.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asraa-lead__phone {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.asraa-lead__phone svg {
  width: 13px;
  height: 13px;
}
.asraa-lead__stage {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.asraa-stage-new {
  background: #eaf1ff;
  color: #3a7bfd;
}
.asraa-stage-contacted {
  background: #fff4e0;
  color: #e08b00;
}
.asraa-stage-interested {
  background: #f3ebff;
  color: #8b5cf6;
}
.asraa-stage-visit_scheduled {
  background: #e0f7fa;
  color: #0891b2;
}
.asraa-stage-closed,
.asraa-stage-converted {
  background: #e3f7ee;
  color: #1a9d63;
}

/* ---------- reviews list (WP_RealEstate_Review::user_reviews) ---------- */
.asraa-dash-reviews .comment-list,
.asraa-dash-reviews .list-reviews {
  list-style: none;
  margin: 0;
  padding: 0;
}
.asraa-dash-reviews .comment-list > li {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.asraa-dash-reviews .comment-list > li:first-child {
  border-top: 0;
  padding-top: 0;
}
.asraa-dash-reviews .comment-list img,
.asraa-dash-reviews .comment-list .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  float: left;
  margin-right: 13px;
}
.asraa-dash-reviews .comment-list .comment-author,
.asraa-dash-reviews .comment-list .author {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.asraa-dash-reviews .comment-list p {
  margin: 5px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}
.asraa-dash-reviews .comment-list .star-rating,
.asraa-dash-reviews .comment-list .rating {
  color: var(--coral);
}

/* ---------- messages list ---------- */
.list-message-small {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-message-small > li {
  border-top: 1px solid var(--line);
}
.list-message-small > li:first-child {
  border-top: 0;
}
.message-item-small {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  align-items: flex-start;
}
.message-item-small .avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.message-item-small .user-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.message-item-small .message-time {
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
}
.message-item-small .message-title {
  font-size: 13px;
  color: var(--muted);
}
.list-message-small > li.unread .user-name {
  color: var(--coral-dark);
}

/* ---------- page-views form + chart ---------- */
.asraa-dash-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.property-page_views .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.property-page_views label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.property-page_views .form-control,
.property-page_views select {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  font: inherit;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.property-page_views .form-control:focus,
.property-page_views select:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.12);
}
.property-page_views .select2-container {
  width: 100% !important;
}
.property-page_views .select2-container--default .select2-selection--single {
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 11px;
  display: flex;
  align-items: center;
}
.page_views-wrapper {
  margin-top: 16px;
  position: relative;
  min-height: 0;
}
.page_views-wrapper canvas {
  max-width: 100%;
  margin: 0 auto;
}
/* wp-realestate leaves the chart <canvas> empty when a listing has no
   tracked views yet — keep that from opening a tall blank panel */
.page_views-wrapper:empty,
#dashboard_property_chart_wrapper:not([style*="height"]) {
  min-height: 0;
}

/* ---------- broker-feed submissions table ---------- */
.asraa-broker-submissions__header .title {
  font-size: 1.2rem;
}
.asraa-broker-submissions__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.asraa-broker-submissions__table th,
.asraa-broker-submissions__table td {
  text-align: left;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.asraa-broker-submissions__table tr:last-child td {
  border-bottom: 0;
}
.asraa-broker-submissions__table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.asraa-status-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--muted);
}
.asraa-status-badge--approved {
  background: #e3f7ee;
  color: #1a9d63;
}
.asraa-status-badge--pending {
  background: #fdf1dd;
  color: #b7791f;
}
.asraa-status-badge--rejected {
  background: #ffe9ea;
  color: var(--coral-dark);
}

/* ---------- Elementor wrapper reset inside the dashboard column ---------- */
.asraa-acct-main .elementor-section,
.asraa-acct-main .elementor-container,
.asraa-acct-main .elementor-widget-wrap,
.asraa-acct-main .elementor-widget-text-editor {
  padding: 0 !important;
  margin: 0 !important;
}
.asraa-acct-main .elementor-widget:not(:last-child) {
  margin-bottom: 22px !important;
}

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .asraa-acct-grid {
    /* minmax(0, 1fr), not a bare 1fr - a plain fr track's minimum
       defaults to auto (its content's intrinsic width), which let wide
       Elementor/CMB2 form content force this column (and the whole
       page) wider than the viewport instead of actually shrinking to
       fit. This one word was the real cause of the mobile form/map/
       amenities overflow - see the long comment above this block. */
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .asraa-acct-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .asraa-acct-card {
    flex: 1 1 220px;
  }
  .asraa-acct-nav {
    flex: 1 1 100%;
  }
  .asraa-acct-menu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2px;
  }
}
@media (max-width: 620px) {
  .asraa-dash-hero {
    padding: 26px 22px 46px;
  }
  .asraa-dash-hero__actions .btn {
    flex: 1 1 auto;
  }
  .asraa-dash-stats {
    margin-left: 0;
    margin-right: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .asraa-dash-field-row {
    grid-template-columns: 1fr;
  }
  .asraa-lead {
    flex-wrap: wrap;
  }
  .asraa-lead__stage {
    margin-left: 54px;
  }
  .asraa-acct-menu {
    grid-template-columns: 1fr;
  }
}