/* ========== PropDesk Design System ========== */
:root {
  --ink-900:#0F172A; --ink-800:#1E293B; --ink-700:#334155; --ink-600:#475569;
  --ink-500:#64748B; --ink-400:#94A3B8; --ink-300:#CBD5E1; --ink-200:#E2E8F0;
  --ink-100:#F1F5F9; --ink-50:#F8FAFC; --paper:#FFFFFF; --canvas:#F6F7F9;
  --brand-900:#0B2240; --brand-800:#102E54; --brand-700:#163A6B; --brand-600:#1E3A5F;
  --brand-500:#2A578C; --brand-100:#E6EEF7; --brand-50:#F0F5FA;
  --ok-700:#047857; --ok-600:#059669; --ok-500:#10B981; --ok-100:#D1FAE5; --ok-50:#ECFDF5;
  --warn-700:#B45309; --warn-600:#D97706; --warn-500:#F59E0B; --warn-100:#FEF3C7; --warn-50:#FFFBEB;
  --bad-700:#B91C1C; --bad-600:#DC2626; --bad-500:#EF4444; --bad-100:#FEE2E2; --bad-50:#FEF2F2;
  --gold-700:#A16207; --gold-500:#CA8A04; --gold-100:#FEF9C3;
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --shadow-md: 0 4px 8px -2px rgba(15,23,42,.08), 0 2px 4px -1px rgba(15,23,42,.06);
  --shadow-lg: 0 12px 24px -8px rgba(15,23,42,.12), 0 4px 8px -2px rgba(15,23,42,.06);
  --radius-sm: 6px; --radius: 10px; --radius-lg: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; color: var(--ink-800); background: var(--canvas); -webkit-font-smoothing: antialiased; }
#app { height: 100vh; overflow: hidden; }

/* ── App shell ── */
.pd-app { display: grid; grid-template-columns: 244px 1fr; height: 100vh; width: 100%; background: var(--canvas); overflow: hidden; }

/* ── Sidebar ── */
.pd-side { background: linear-gradient(180deg,#0E2747 0%,#0B2240 100%); color: #CFD9E6; display: flex; flex-direction: column; border-right: 1px solid #0a1c36; height: 100vh; overflow-y: auto; overflow-x: hidden; }
.pd-brand { padding: 18px 18px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.pd-brand-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg,#3D7BD9 0%,#1E3A5F 100%); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: -.02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.pd-brand-name { color: #fff; font-weight: 600; letter-spacing: -.01em; font-size: 15px; }
.pd-brand-sub { color: #7B8BA6; font-size: 11px; margin-top: 1px; }
.pd-side-search { margin: 12px 12px 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; color: #CFD9E6; font-size: 12.5px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pd-side-search .kbd { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #7B8BA6; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; padding: 1px 5px; }
.pd-nav-group { padding: 14px 12px 4px 16px; color: #5B6B85; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; flex-shrink: 0; }
.pd-nav { list-style: none; margin: 0; padding: 0 8px; display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.pd-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; color: #B7C2D4; font-size: 13px; text-decoration: none; transition: background .12s, color .12s; font-weight: 500; cursor: pointer; }
.pd-nav a:hover { background: rgba(255,255,255,.04); color: #fff; }
.pd-nav a.active { background: rgba(61,123,217,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(61,123,217,.2); }
.pd-nav a .pd-ico { color: #7B8BA6; }
.pd-nav a.active .pd-ico { color: #5E97E8; }
.pd-nav-badge { margin-left: auto; background: rgba(255,255,255,.08); color: #CFD9E6; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 99px; }
.pd-side-foot { margin-top: auto; padding: 12px; border-top: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pd-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#F59E0B,#DC2626); color: #fff; font-weight: 600; font-size: 12px; display: grid; place-items: center; flex: 0 0 32px; }
.pd-side-foot .name { color: #E8EDF5; font-size: 12.5px; font-weight: 600; }
.pd-side-foot .role { color: #7B8BA6; font-size: 11px; }

/* ── Main area ── */
.pd-main { display: flex; flex-direction: column; overflow: hidden; min-width: 0; height: 100vh; }
.pd-top { height: 56px; background: var(--paper); border-bottom: 1px solid var(--ink-200); display: flex; align-items: center; padding: 0 24px; gap: 16px; flex-shrink: 0; }
.pd-crumbs { display: flex; align-items: center; gap: 6px; color: var(--ink-500); font-size: 13px; }
.pd-crumbs .sep { color: var(--ink-300); }
.pd-crumbs .cur { color: var(--ink-900); font-weight: 600; }
.pd-top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pd-iconbtn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--ink-200); background: #fff; color: var(--ink-600); display: grid; place-items: center; cursor: pointer; position: relative; transition: background .12s; }
.pd-iconbtn:hover { background: var(--ink-50); color: var(--ink-900); }
.pd-iconbtn .dot { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad-500); box-shadow: 0 0 0 2px #fff; }
.pd-page { padding: 24px 28px; overflow: auto; min-width: 0; flex: 1; }
.pd-page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.pd-page-head h1 { margin: 0; font-size: 22px; font-weight: 600; color: var(--ink-900); letter-spacing: -.015em; }
.pd-page-head .sub { color: var(--ink-500); font-size: 13px; margin-top: 3px; }
.pd-page-head .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ── Buttons ── */
.pd-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 8px; font: 600 13px 'Inter', sans-serif; cursor: pointer; border: 1px solid var(--ink-200); background: #fff; color: var(--ink-800); transition: background .12s, border-color .12s, color .12s; }
.pd-btn:hover { background: var(--ink-50); }
.pd-btn.primary { background: var(--brand-600); color: #fff; border-color: var(--brand-600); box-shadow: 0 1px 2px rgba(30,58,95,.25), inset 0 1px 0 rgba(255,255,255,.08); }
.pd-btn.primary:hover { background: var(--brand-700); border-color: var(--brand-700); }
.pd-btn.ghost { border-color: transparent; background: transparent; }
.pd-btn.ghost:hover { background: var(--ink-50); border-color: transparent; }
.pd-btn.danger { color: var(--bad-700); border-color: var(--bad-100); background: var(--bad-50); }
.pd-btn.danger:hover { background: var(--bad-100); }
.pd-btn.sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.pd-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Cards ── */
.pd-card { background: var(--paper); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.pd-card-head { padding: 14px 18px; border-bottom: 1px solid var(--ink-200); display: flex; align-items: center; gap: 12px; }
.pd-card-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-900); letter-spacing: -.005em; }
.pd-card-head .sub { color: var(--ink-500); font-size: 12px; margin-top: 1px; }
.pd-card-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ── Badges ── */
.pd-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 99px; font: 600 11px 'Inter', sans-serif; border: 1px solid transparent; white-space: nowrap; }
.pd-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.pd-badge.available { color: var(--ok-700); background: var(--ok-50); border-color: #A7F3D0; }
.pd-badge.available .dot { background: var(--ok-500); }
.pd-badge.reserved { color: var(--warn-700); background: var(--warn-50); border-color: #FDE68A; }
.pd-badge.reserved .dot { background: var(--warn-500); }
.pd-badge.sold { color: var(--bad-700); background: var(--bad-50); border-color: #FECACA; }
.pd-badge.sold .dot { background: var(--bad-500); }
.pd-rating { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font: 600 11px 'Inter', sans-serif; }
.pd-rating.prime { color: #854D0E; background: #FEF9C3; border: 1px solid #FDE68A; }
.pd-rating.good { color: #1E40AF; background: #DBEAFE; border: 1px solid #BFDBFE; }
.pd-rating.avg { color: var(--ink-700); background: var(--ink-100); border: 1px solid var(--ink-200); }

/* ── Table ── */
.pd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd-table thead th { text-align: left; font-weight: 600; color: var(--ink-500); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 10px 14px; border-bottom: 1px solid var(--ink-200); background: var(--ink-50); }
.pd-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--ink-100); color: var(--ink-800); vertical-align: middle; }
.pd-table tbody tr:hover { background: var(--ink-50); }
.pd-table tbody tr:last-child td { border-bottom: 0; }
.pd-id { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-700); }
.pd-muted { color: var(--ink-500); }

/* ── Form elements ── */
.pd-field { display: flex; flex-direction: column; gap: 6px; }
.pd-label { font-size: 12px; font-weight: 600; color: var(--ink-700); }
.pd-label .req { color: var(--bad-500); margin-left: 2px; }
.pd-help { font-size: 11.5px; color: var(--ink-500); }
.pd-input, .pd-select, .pd-textarea { width: 100%; height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ink-200); background: #fff; font: 500 13px 'Inter', sans-serif; color: var(--ink-900); transition: border-color .12s, box-shadow .12s; }
.pd-textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.pd-input:focus, .pd-select:focus, .pd-textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(42,87,140,.15); }
.pd-input::placeholder, .pd-textarea::placeholder { color: var(--ink-400); }
.pd-select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.pd-input-prefix { position: relative; }
.pd-input-prefix > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-500); font-size: 13px; pointer-events: none; font-weight: 500; }
.pd-input-prefix > .pd-input { padding-left: 34px; }

/* ── Segmented control ── */
.pd-seg { display: inline-flex; background: var(--ink-100); border: 1px solid var(--ink-200); border-radius: 8px; padding: 3px; gap: 2px; }
.pd-seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; font: 600 12px 'Inter', sans-serif; color: var(--ink-600); cursor: pointer; }
.pd-seg button.on { background: #fff; color: var(--ink-900); box-shadow: var(--shadow-xs); }

/* ── Tabs ── */
.pd-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ink-200); padding: 0 18px; }
.pd-tabs button { background: transparent; border: 0; padding: 12px 14px; font: 600 13px 'Inter', sans-serif; color: var(--ink-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.pd-tabs button.on { color: var(--brand-600); border-bottom-color: var(--brand-600); }
.pd-tabs button:hover:not(.on) { color: var(--ink-800); }

/* ── Switch ── */
.pd-switch { position: relative; width: 32px; height: 18px; border-radius: 99px; background: var(--ink-300); transition: background .15s; cursor: pointer; flex: 0 0 32px; display: inline-block; }
.pd-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: transform .15s; }
.pd-switch.on { background: var(--brand-600); }
.pd-switch.on::after { transform: translateX(14px); }

/* ── Sparklines ── */
.pd-spark { display: block; width: 100%; height: 36px; }

/* ── Icons ── */
.pd-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pd-ico svg { display: block; }

/* ── Trends ── */
.trend-up { color: var(--ok-600); }
.trend-down { color: var(--bad-600); }

/* ── Scrollbar ── */
.pd-app *::-webkit-scrollbar { width: 6px; height: 6px; }
.pd-app *::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 99px; }
.pd-app *::-webkit-scrollbar-track { background: transparent; }

/* ── Toast ── */
#toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.pd-toast { display: inline-flex; align-items: center; gap: 10px; background: var(--ink-900); color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 500; animation: toastIn .2s ease; }
.pd-toast.error { background: var(--bad-700); }
.pd-toast.success { background: var(--ok-700); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Modal ── */
.pd-modal-back { position: fixed; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 8888; }
.pd-modal { width: min(420px, 92%); background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }
.pd-modal-body { padding: 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.pd-modal-foot { padding: 12px 18px; background: var(--ink-50); display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--ink-200); }
.pd-modal-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--bad-50); color: var(--bad-600); display: grid; place-items: center; margin-bottom: 4px; }
.pd-modal h4 { margin: 0; font-size: 16px; color: var(--ink-900); font-weight: 600; }
.pd-modal p { margin: 0; color: var(--ink-500); font-size: 13px; line-height: 1.5; }

/* ── Tree nodes ── */
.tree-node-header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; cursor: pointer; user-select: none; transition: background .1s; }
.tree-node-header:hover { background: var(--ink-50); }
.tree-node-children { margin-left: 8px; padding-left: 12px; border-left: 1px dashed var(--ink-200); }

/* ── Form sections (property form) ── */
.form-section { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--ink-200); }

/* ── Feature chips ── */
.feature-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--ink-200); background: #fff; color: var(--ink-600); transition: all .12s; }
.feature-chip.active { background: var(--brand-50); border-color: #C7D8EC; color: var(--brand-700); }

/* ── Status cards (form) ── */
.status-card { flex: 1; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--ink-200); background: #fff; cursor: pointer; display: flex; align-items: flex-start; gap: 10px; transition: all .12s; }
.status-card.active-available { border-color: var(--ok-500); background: var(--ok-50); }
.status-card.active-reserved { border-color: var(--warn-500); background: var(--warn-50); }
.status-card.active-sold { border-color: var(--bad-500); background: var(--bad-50); }

/* ── Settings rows ── */
.settings-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--ink-200); border-radius: 8px; background: #fff; margin-bottom: 6px; }

/* ── Stepper ── */
.stepper { display: flex; align-items: center; padding: 14px 0 20px; }
.stepper-line { flex: 1; height: 1px; margin: 0 12px; }

/* ── Filter chips ── */
.filter-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-50); color: var(--brand-700); border: 1px solid #C7D8EC; border-radius: 99px; padding: 4px 8px 4px 10px; font-size: 12px; font-weight: 600; }

/* ── Empty state ── */
.pd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; color: var(--ink-500); gap: 10px; }
.pd-empty h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-700); }
.pd-empty p { margin: 0; font-size: 13px; }

/* ── Alert box ── */
.pd-alert { padding: 12px 16px; border-radius: 10px; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.pd-alert.info { background: var(--brand-50); border: 1px solid #C7D8EC; color: var(--brand-700); }
.pd-alert.error { background: var(--bad-50); border: 1px solid var(--bad-100); color: var(--bad-700); }
.pd-alert.success { background: var(--ok-50); border: 1px solid var(--ok-100); color: var(--ok-700); }

/* ── Divider ── */
.pd-div { height: 1px; background: var(--ink-200); margin: 14px 0; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .pd-app { grid-template-columns: 1fr; }
  .pd-side { display: none; position: fixed; z-index: 200; top: 0; left: 0; width: 244px; height: 100vh; }
  .pd-side.open { display: flex; }
  .pd-page { padding: 16px; }
  .form-section { grid-template-columns: 1fr; gap: 14px; }
}

/* ── Blazor error UI ── */
#blazor-error-ui { display: none; }

/* ── Row action dropdown (3-dot menu) ── */
.pd-row-menu { position: relative; display: inline-block; }
.pd-row-menu-btn { width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; color: var(--ink-400); display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.pd-row-menu-btn:hover { background: var(--ink-100); color: var(--ink-700); }
.pd-dropdown { position: absolute; right: 0; top: calc(100% + 4px); z-index: 200; background: var(--paper); border: 1px solid var(--ink-200); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 148px; padding: 4px; }
.pd-dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border-radius: 6px; border: none; background: none; color: var(--ink-700); font-size: 13px; font-family: inherit; cursor: pointer; text-decoration: none; transition: background .1s; white-space: nowrap; }
.pd-dropdown-item:hover { background: var(--ink-100); color: var(--ink-900); }
.pd-dropdown-item.danger { color: var(--bad-600); }
.pd-dropdown-item.danger:hover { background: var(--bad-50); color: var(--bad-700); }
.pd-dropdown-divider { height: 1px; background: var(--ink-200); margin: 4px 0; }