/* user-dashboard.css — normal user account page */

.ud-shell {
  min-height: 100vh;
  background: var(--page-bg-2);
  padding-top: 88px;
}

/* ── Hero header ─────────────────────────────────────────────────────────── */
.ud-hero {
  background: linear-gradient(135deg, var(--ink) 0%, #1e3a7a 100%);
  padding: 2.5rem 2rem;
}

.ud-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ud-avatar-lg {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 3px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.ud-hero-info { flex: 1; min-width: 0; }

.ud-hero-info h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.4rem;
  line-height: 1.2;
}

.ud-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
}

.ud-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ud-logout-btn {
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.3) !important;
  flex-shrink: 0;
}

.ud-logout-btn:hover {
  color: #fff !important;
  border-color: rgba(255,255,255,0.6) !important;
  background: rgba(255,255,255,0.1) !important;
}

/* ── Tab improvements ────────────────────────────────────────────────────── */
.ud-tab-btn {
  flex-direction: column;
  gap: 4px;
}

.ud-tab-btn i  { font-size: 1rem; }
.ud-tab-btn span { font-size: 0.72rem; display: block; }

/* ── Contract status chips ───────────────────────────────────────────────── */
.ud-contract-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.chip-unsigned {
  background: rgba(0,0,0,0.05);
  color: var(--ink-muted);
  border: 1px solid var(--hairline);
}

.chip-signed {
  background: rgba(22,163,74,0.1);
  color: #15803d;
  border: 1px solid rgba(22,163,74,0.3);
}

.ud-header {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  padding: 2rem;
  max-width: 1100px;
  margin: 0 auto 2rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.ud-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ud-user-info h2 { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.ud-user-info p  { font-size: 0.85rem; color: var(--ink-muted); }

.ud-tabs {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 3rem;
}

.ud-tab-bar {
  display: flex;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.ud-tab-btn {
  flex: 1 0 108px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.ud-tab-btn:hover { color: var(--ink); background: var(--page-bg-2); }
.ud-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--surface); }

.ud-tab-pane {
  display: none;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

.ud-tab-pane.active { display: block; }
.ud-pane-body { padding: 2rem; }

/* Property request form */
.request-intro {
  background: rgba(31,63,124,0.04);
  border: 1px solid rgba(31,63,124,0.12);
  border-radius: var(--radius-sm);
  padding: 1.2rem 1.5rem;
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.7;
  margin-bottom: 1.8rem;
}

.request-intro strong { color: var(--ink); }

/* Contract section */
.contract-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.contract-header {
  background: var(--page-bg-2);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hairline);
}

.contract-header h4 { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.contract-body { padding: 1.5rem; }

.terms-box {
  background: var(--page-bg-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--ink);
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 1.5rem;
}

.terms-box h5 { font-size: 0.88rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--ink); }
.terms-box p  { margin-bottom: 0.75rem; }
.terms-box ol, .terms-box ul { padding-left: 1.5rem; margin-bottom: 0.75rem; }
.terms-box li { margin-bottom: 0.4rem; }

.sign-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.sign-row input[type="text"] {
  flex: 1;
  min-width: 200px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  outline: none;
}

.sign-row input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(31,63,124,.1); }

.sign-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--ink);
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

.sign-check input[type="checkbox"] {
  margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: var(--ink);
  flex-shrink: 0;
  cursor: pointer;
}

/* Contract language toggle */
.contract-lang-toggle {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px;
  background: var(--surface);
  gap: 2px;
}

.contract-lang-btn {
  min-height: 48px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-muted);
  transition: background .15s, color .15s;
}

.contract-lang-btn.active {
  background: var(--ink);
  color: #fff;
}

.terms-box[hidden] { display: none; }

.terms-box[lang="ar"] {
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', 'DM Sans', sans-serif;
}

.terms-box[lang="ar"] ol,
.terms-box[lang="ar"] ul {
  padding-left: 0;
  padding-right: 1.5rem;
}

/* Commission tables inside contract terms */
.contract-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.6rem 0 1rem;
  font-size: 0.82rem;
}

.contract-table caption {
  text-align: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--ink-2);
  margin-bottom: 0.4rem;
  padding: 0;
}

.contract-table th,
.contract-table td {
  border: 1px solid var(--hairline);
  padding: 0.55rem 0.7rem;
  text-align: center;
}

.contract-table th {
  background: var(--surface);
  font-weight: 700;
  color: var(--ink);
}

.contract-table td { color: var(--ink-3); }

.contract-table td strong { color: var(--accent); }

/* Print styles */
@media print {
  .ud-shell .site-nav,
  .ud-tab-bar,
  .btn,
  .contract-lang-toggle,
  #toast-container { display: none !important; }

  .ud-tab-pane { display: none !important; }
  .ud-tab-pane.active { display: block !important; border: none; }

  .terms-box { max-height: none !important; overflow: visible !important; }

  .contract-card { border: 1px solid #ccc; break-inside: avoid; }
}

/* Saved property card */
.saved-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}

.saved-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  transition: box-shadow 0.2s;
}

.saved-card:hover { box-shadow: var(--shadow-md); }

.saved-card img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  background: var(--page-bg);
}

.saved-card-body { padding: 1rem; }
.saved-card-body h4 { font-size: 0.9rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.saved-card-body p  { font-size: 0.8rem; color: var(--ink-muted); }

.saved-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--hairline);
  background: var(--page-bg-2);
}

/* ── CSS variable missing from newhome-pages.css ─────────────────────────── */
:root { --success: #16a34a; }

/* ── Buttons (not in newhome-pages.css) ──────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
  line-height: 1;
  user-select: none;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover:not(:disabled) { background: var(--ink-2); border-color: var(--ink-2); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.btn-ghost:hover:not(:disabled) { background: var(--page-bg-2); border-color: rgba(15,15,18,0.18); }

.btn-sm { min-height: 48px; padding: 6px 13px; font-size: 0.78rem; border-radius: 6px; }

/* ── Form grid (mirrors admin.css) ───────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field.span-2 { grid-column: span 2; }

.form-field label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-2);
  line-height: 1.3;
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--page-bg-2);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  width: 100%;
  appearance: auto;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(31,63,124,0.1);
}

.form-field textarea { resize: vertical; min-height: 90px; }

.ud-form-message {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
}

.ud-form-message.success {
  background: rgba(22,163,74,0.08);
  border: 1px solid rgba(22,163,74,0.28);
  color: #15803d;
}

.ud-form-message.error {
  background: rgba(204,34,61,0.08);
  border: 1px solid rgba(204,34,61,0.28);
  color: var(--accent);
}

/* ── Toast notifications ─────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}

.toast {
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  max-width: 360px;
  line-height: 1.4;
  animation: toastSlideIn 0.22s ease;
}

.toast.success { background: #15803d; }
.toast.error   { background: var(--accent); }

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.ud-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--ink-muted);
}

.ud-empty i {
  font-size: 2.5rem;
  opacity: 0.22;
  display: block;
  margin-bottom: 1rem;
}

.ud-empty p { font-size: 0.9rem; margin-bottom: 1.25rem; }

/* ── Pane body refinements ───────────────────────────────────────────────── */
.ud-pane-body { padding: 2rem 2.5rem; }

/* Success banner for sell request */
.ud-success-banner {
  display: none;
  padding: 1.5rem;
  background: rgba(22,163,74,.07);
  border: 1px solid rgba(22,163,74,.25);
  border-radius: var(--radius);
  text-align: center;
  margin-bottom: 1.5rem;
}

.ud-success-banner i  { font-size: 2rem; color: var(--success); display: block; margin-bottom: .5rem; }
.ud-success-banner h3 { color: var(--success); font-size: 1rem; margin-bottom: .3rem; }
.ud-success-banner p  { font-size: .85rem; color: var(--ink-muted); }

/* ── Property request history ───────────────────────────────────────────── */
.request-history-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.request-history-heading h2 { color: var(--primary); font-size: 1.25rem; margin: 0 0 .3rem; }
.request-history-heading p { color: var(--ink-muted); font-size: .86rem; margin: 0; }

.request-status-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 1.4rem;
}

.request-summary-card {
  padding: 1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--page-bg-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.request-summary-card span { color: var(--ink-muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.request-summary-card strong { font-size: 1.45rem; color: var(--primary); }
.request-summary-card.is-pending strong { color: #c56a00; }
.request-summary-card.is-reviewing strong { color: #167bb4; }
.request-summary-card.is-accepted strong { color: #15803d; }
.request-summary-card.is-declined strong { color: var(--accent); }

.request-history-list { display: grid; gap: 1rem; }

.request-history-card {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(230px, .75fr);
  gap: 1.4rem;
  padding: 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}

.request-history-topline { display: flex; gap: .8rem; color: var(--ink-muted); font-size: .75rem; margin-bottom: .45rem; }
.request-number { color: var(--primary); font-weight: 700; }
.request-history-card h3 { color: var(--primary); font-size: 1.02rem; margin: 0 0 .35rem; text-transform: capitalize; }
.request-history-location, .request-history-details { color: var(--ink-muted); font-size: .82rem; margin: .25rem 0; }
.request-history-price { display: block; color: var(--ink); margin-top: .65rem; }

.request-history-status {
  border-left: 1px solid var(--hairline);
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .65rem;
}

.request-history-status p { color: var(--ink-muted); font-size: .8rem; line-height: 1.5; margin: 0; }
.request-status-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.request-status-chip.is-pending { background: #fff7ed; color: #b45309; }
.request-status-chip.is-reviewing { background: #eff6ff; color: #156593; }
.request-status-chip.is-accepted { background: #f0fdf4; color: #15803d; }
.request-status-chip.is-declined { background: #fff1f2; color: #be123c; }
.request-listing-progress { color: #156593; font-size: .78rem; font-weight: 600; }

/* ── Sign area inside contract card ─────────────────────────────────────── */
.sign-row input[type="text"]:focus {
  border-color: var(--ink);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(31,63,124,0.1);
  outline: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-field.span-2 { grid-column: span 1; }
  .ud-pane-body { padding: 1.5rem; }
  .ud-hero { padding: 2rem 1.25rem; }
  .ud-tab-btn span { display: none; }
  .ud-tab-btn { padding: 14px 8px; }
  .saved-grid { grid-template-columns: 1fr; }
  .request-history-heading { flex-direction: column; }
  .request-status-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .request-history-card { grid-template-columns: 1fr; }
  .request-history-status { border-left: 0; border-top: 1px solid var(--hairline); padding: 1rem 0 0; }
}

@media (max-width: 480px) {
  #toast-container { left: 1rem; right: 1rem; bottom: 1rem; }
  .toast { max-width: none; }
  .ud-pane-body { padding: 1.1rem; }
  .ud-header { padding: 1.4rem; }
  .contract-body { padding: 1.1rem; }
}