/* ============================================================
   maspro.css  —  Maspro Property Management
   Requires: Bootstrap 5.3+  |  Google Font: Inter
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Brand Tokens ─────────────────────────────────────────── */
:root {
  --bs-primary:           #c01f1f;
  --bs-primary-rgb:       192,31,31;
  --bs-link-color:        #c01f1f;
  --bs-link-hover-color:  #991a1a;
  
  /* Primary: Crimson Red */
  --mp-primary:           #c01f1f;
  --mp-primary-hover:     #a81a1a;
  --mp-primary-light:     rgba(192,31,31,.10);
  --mp-primary-border:    rgba(192,31,31,.25);

  /* Gold accent */
  --mp-gold:              #b8860b;
  --mp-gold-light:        #fdf6e3;

  /* Steel Blue */
  --mp-steel:             #2e6da4;
  --mp-steel-hover:       #245781;
  --mp-steel-light:       rgba(46,109,164,.10);

  /* Neutrals */
  --mp-bg:                #f9f9f9;
  --mp-surface:           #ffffff;
  --mp-border:            #e4e6eb;
  --mp-text:              #1a1e26;
  --mp-muted:             #6b7280;
  --mp-muted-bg:          #f1f2f4;

  /* Sidebar */
  --mp-sidebar-bg:        #313640;
  --mp-sidebar-fg:        #ebebeb;
  --mp-sidebar-muted:     rgba(235,235,235,.50);
  --mp-sidebar-hover:     rgba(235,235,235,.10);
  --mp-sidebar-active:    rgba(235,235,235,.15);
  --mp-sidebar-border:    rgba(235,235,235,.12);
  --mp-sidebar-width:     260px;

  /* Shadows */
  --mp-shadow-sm:         0 1px 3px rgba(0,0,0,.08);
  --mp-shadow:            0 2px 8px rgba(0,0,0,.10);
  --mp-shadow-md:         0 4px 16px rgba(0,0,0,.12);

  --mp-radius:            .5rem;
  --mp-nav-h:             56px;

  /* Generic aliases for the "PLAIN CLASS COMPATIBILITY" block further down (.btn-primary,
     .card, .modal, etc.) - those rules reference these un-prefixed names directly, but they
     were never defined, so every such rule silently fell back to a transparent/invisible or
     browser-default color instead of the brand red/gray. Aliasing them to the real --mp-*
     tokens here fixes every plain-class button/card/modal across the app in one place. */
  --primary:              var(--mp-primary);
  --primary-dark:         var(--mp-primary-hover);
  --surface:              var(--mp-surface);
  --text:                 var(--mp-text);
  --text-muted:           var(--mp-muted);
  --border:               var(--mp-border);
  --bg:                   var(--mp-bg);
  --radius:               var(--mp-radius);
  --shadow-sm:            var(--mp-shadow-sm);
  --shadow-md:            var(--mp-shadow-md);
}


/* ── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9375rem;
  background: var(--mp-bg);
  color: var(--mp-text);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mp-primary); text-decoration: none; }
a:hover { color: var(--mp-primary-hover); }


/* ── Reusable Grid Drag-Drop Target Styles ──────────────── */
.e-grid td.mp-grid-drop-target-cell {
  background: #dcfce7 !important;
  box-shadow: inset 0 0 0 2px #22c55e;
}

/* Keep row-level drag tint subtle so the target cell highlight is obvious. */
.e-grid .e-gridcontent tr.e-rowdragdrop td.e-rowcell {
  background: transparent;
}

/* ExpenseType hierarchy readability */
#expenseTypeGrid .e-gridcontent td.mp-expense-type-parent-cell {
  font-weight: 700;
  color: var(--mp-text);
  background: rgba(192, 31, 31, 0.04);
}

#expenseTypeGrid .e-gridcontent td.mp-expense-type-child-parent-cell {
  color: var(--mp-muted);
}

#expenseTypeGrid .e-gridcontent td.mp-expense-type-subtype-cell {
  font-weight: 600;
}

#expenseTypeGrid .e-gridcontent td.mp-expense-type-subtype-empty-cell {
  color: transparent;
}


/* ── Invoices: Table + Receipt Dialog ───────────────────── */
.invoice-table thead th {
  background: var(--mp-surface);
  white-space: nowrap;
}

/* Keeps the green onboarding-complete tick on the same line as the invoice code,
   even when the code is long enough to otherwise wrap inside its cell. */
.invoice-code-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.invoice-code-cell .bi-check-circle-fill {
  flex-shrink: 0;
}

.invoice-sort {
  width: 100%;
}

.invoice-sort.is-active {
  color: var(--mp-primary);
}

.invoice-sort[data-direction='asc']::after {
  content: ' \2191';
}

.invoice-sort[data-direction='desc']::after {
  content: ' \2193';
}

.invoice-table-empty {
  padding: 2.5rem 1.5rem;
  border-top: 1px solid var(--mp-border);
  background: #fff;
}

.invoice-table-footer {
  align-items: center;
  border-top: 1px solid var(--mp-border);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.receipt-dialog.e-dialog {
  max-width: min(1180px, calc(100vw - 2rem));
}

.receipt-payment-card,
.receipt-cheque-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1rem;
  overflow: hidden;
  background: #f8fafc;
}

.receipt-payment-card-head,
.receipt-cheque-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: #eef2ff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.receipt-payment-card-title,
.receipt-cheque-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.receipt-payment-card-subtitle,
.receipt-cheque-card-subtitle {
  font-size: 0.82rem;
  color: #475569;
}

.receipt-payment-card-body {
  padding: 1rem;
}

.receipt-mode-switches {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.receipt-cash-help {
  display: flex;
  align-items: center;
  color: #475569;
  font-size: 0.84rem;
  line-height: 1.45;
}

.receipt-cheque-table th,
.receipt-cheque-table td {
  vertical-align: middle;
  white-space: nowrap;
}

.receipt-cheque-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
  background: #fff;
}

.receipt-cheque-total-row td {
  border-top: 2px solid rgba(15, 23, 42, 0.12);
  background: #fff;
}

.receipt-cheque-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.75);
}

.receipt-cheque-toolbar-field {
  min-width: 13rem;
}

.receipt-cheque-toolbar-summary {
  font-size: 0.86rem;
  color: #475569;
}

.receipt-cheque-input {
  min-width: 7rem;
  padding: 0.3rem 0;
  min-height: 2rem;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.82rem;
}

.receipt-cheque-input:focus {
  border-color: var(--mp-primary, #c01f1f);
  box-shadow: none;
  background: transparent;
}

.receipt-cheque-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

@media (max-width: 991.98px) {
  .invoice-table-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767.98px) {
  .receipt-payment-card-head,
  .receipt-cheque-card-head,
  .receipt-cheque-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .receipt-cheque-toolbar-field {
    min-width: 100%;
  }
}


/* ================================================================
   LAYOUT  —  full-height flex shell
   ================================================================ */
.mp-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}


/* ── Sidebar ──────────────────────────────────────────────── */
.mp-sidebar {
  width: var(--mp-sidebar-width);
  min-width: var(--mp-sidebar-width);
  background: var(--mp-sidebar-bg);
  color: var(--mp-sidebar-fg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: width .2s ease, min-width .2s ease;
  z-index: 100;
}

/* Watermark */
.mp-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/images/building-bg.jpg') center top / cover no-repeat;
  opacity: .07;
  pointer-events: none;
}

/* Collapsed state */
.mp-sidebar.collapsed {
  width: 60px;
  min-width: 60px;
}
.mp-sidebar.collapsed .mp-sidebar-label,
.mp-sidebar.collapsed .mp-nav-group-label,
.mp-sidebar.collapsed .mp-nav-chevron { display: none !important; }
.mp-sidebar.collapsed .mp-nav-item { justify-content: center; padding: .55rem 0; }
.mp-sidebar.collapsed .mp-nav-item i { margin: 0; }
.mp-sidebar.collapsed .mp-sidebar-brand span { display: none; }
.mp-sidebar.collapsed .mp-sidebar-footer-text { display: none; }

/* Brand / logo area */
.mp-sidebar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--mp-sidebar-border);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.mp-sidebar-brand img { height: 2rem; width: 2rem; object-fit: contain; }
.mp-sidebar-brand span {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--mp-sidebar-fg);
}

/* Scrollable nav area */
.mp-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .5rem 0;
  position: relative;
  z-index: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--mp-sidebar-hover) transparent;
}

/* Nav group */
.mp-nav-group { margin-bottom: .25rem; }

/* Static label (Overview — not a toggle button) */
.mp-nav-group-static-label {
  display: block;
  padding: .45rem 1rem;
  color: var(--mp-sidebar-muted);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Badge on nav items (e.g. Maintenance count) */
.mp-nav-badge {
  margin-left: auto;
  background: var(--mp-primary);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  border-radius: 99px;
  padding: .1rem .45rem;
  flex-shrink: 0;
  line-height: 1.5;
}
/* Hide badge when sidebar is collapsed (label wrapper already hidden) */
.mp-sidebar.collapsed .mp-nav-badge { display: none !important; }

.mp-nav-group-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: .45rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mp-sidebar-muted);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  gap: .5rem;
}
.mp-nav-group-toggle:hover { color: var(--mp-sidebar-fg); }
.mp-nav-group-label { flex: 1; text-align: left; }
.mp-nav-chevron {
  font-size: .7rem;
  transition: transform .2s;
}
.mp-nav-group.open .mp-nav-chevron { transform: rotate(90deg); }
.mp-nav-group-items { display: none; }
.mp-nav-group.open .mp-nav-group-items { display: block; }

/* Nav items */
.mp-nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1rem .5rem 1.5rem;
  color: rgba(235,235,235,.65);
  font-size: .875rem;
  font-weight: 500;
  border-radius: 0;
  transition: background .15s, color .15s;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}
.mp-nav-item i { font-size: .9rem; width: 1rem; text-align: center; flex-shrink: 0; }
/* Standalone top-level items (e.g. Dashboard): no child indent — align with group headers */
.mp-nav-item-top { padding-left: 1rem; }
.mp-nav-item:hover {
  background: var(--mp-sidebar-hover);
  color: var(--mp-sidebar-fg);
  text-decoration: none;
}
.mp-nav-item.active {
  background: var(--mp-sidebar-active);
  color: var(--mp-sidebar-fg);
}
.mp-nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  background: var(--mp-primary);
  border-radius: 0 2px 2px 0;
}

/* Sidebar footer */
.mp-sidebar-footer {
  padding: .75rem;
  border-top: 1px solid var(--mp-sidebar-border);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.mp-sidebar-footer a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  border-radius: var(--mp-radius);
  color: rgba(235,235,235,.60);
  font-size: .875rem;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.mp-sidebar-footer a:hover,
.mp-sidebar-footer a.active {
  background: var(--mp-sidebar-hover);
  color: var(--mp-sidebar-fg);
  text-decoration: none;
}
.mp-sidebar-footer a i { font-size: .9rem; width: 1rem; text-align: center; flex-shrink: 0; }


/* ── Top Navigation Bar ───────────────────────────────────── */
.mp-topnav {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1.25rem;
  height: var(--mp-nav-h);
  background: var(--mp-surface);
  border-bottom: 1px solid var(--mp-border);
  flex-shrink: 0;
  z-index: 50;
}

.mp-topnav-logo img { height: 1.75rem; object-fit: contain; }
.mp-topnav-spacer { flex: 1; }


/* ── Shared Toasts ────────────────────────────────────────── */
#Toast {
  position: relative;
  z-index: 1200;
}

#Toast .e-toast-container {
  padding: .5rem;
}

#Toast .e-toast.mp-toast {
  width: min(32rem, calc(100vw - 1.5rem));
  min-width: min(24rem, calc(100vw - 1.5rem));
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: .85rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .14);
  overflow: hidden;
  color: inherit !important;
}

#Toast .e-toast .e-toast-content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: .9rem;
  padding: .95rem 1.1rem;
  color: inherit !important;
}

#Toast .e-toast .e-toast-icon,
#Toast .e-toast .mp-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  min-width: 1.25rem;
  font-size: 1rem;
  line-height: 1;
  align-self: center;
  margin: 0;
  margin-left: -.1rem;
  margin-right: .6rem;
}

.error-message { 
  color: #dc2626; font-size: 0.78rem; min-height: 1.1rem; 
}

#Toast .e-toast .e-toast-message {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
  margin-left: .75rem;
  padding-left: .5rem;
  color: inherit !important;
}

#Toast .e-toast .e-toast-message,
#Toast .e-toast .e-toast-content,
#Toast .e-toast .e-toast-title,
#Toast .e-toast .e-toast-message a {
  color: inherit !important;
}

#Toast .e-toast .e-toast-close-icon {
  align-self: start;
  margin: .05rem 0 0;
  opacity: .72;
}

#Toast .e-toast .e-toast-close-icon:hover {
  opacity: 1;
}

#Toast .e-toast.mp-toast-success {
  background: #ecfdf5;
  border-left-color: #10b981;
  color: #064e3b !important;
}

#Toast .e-toast.mp-toast-success .e-toast-icon,
#Toast .e-toast.mp-toast-success .mp-toast-icon,
#Toast .e-toast.mp-toast-success .e-toast-close-icon {
  color: #10b981;
}

#Toast .e-toast.mp-toast-warning {
  background: #fffbeb;
  border-left-color: #f59e0b;
  color: #78350f !important;
}

#Toast .e-toast.mp-toast-warning .e-toast-icon,
#Toast .e-toast.mp-toast-warning .mp-toast-icon,
#Toast .e-toast.mp-toast-warning .e-toast-close-icon {
  color: #f59e0b;
}

#Toast .e-toast.mp-toast-error {
  background: #fef2f2;
  border-left-color: #dc2626;
  color: #7f1d1d !important;
}

#Toast .e-toast.mp-toast-error .e-toast-icon,
#Toast .e-toast.mp-toast-error .mp-toast-icon,
#Toast .e-toast.mp-toast-error .e-toast-close-icon {
  color: #dc2626;
}

#Toast .e-toast.mp-toast-default {
  background: #ffffff;
  border-left-color: #94a3b8;
  color: #0f172a !important;
}

#Toast .e-toast.mp-toast-default .e-toast-icon,
#Toast .e-toast.mp-toast-default .mp-toast-icon,
#Toast .e-toast.mp-toast-default .e-toast-close-icon {
  color: #64748b;
}

.mp-grid-switch {
  position: relative;
  display: inline-block;
  width: 2.2rem;
  height: 1.2rem;
  vertical-align: middle;
  cursor: pointer;
}

.mp-grid-switch .js-isactive-toggle,
.mp-grid-switch .js-ismandatory-toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.mp-grid-switch .mp-grid-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--mp-muted-bg);
  border: 1px solid var(--mp-border);
  transition: background .18s ease, border-color .18s ease;
}

.mp-grid-switch .mp-grid-switch-slider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--mp-surface);
  transform: translate(0, -50%);
  transition: transform .18s ease;
  box-shadow: var(--mp-shadow-sm);
}

.mp-grid-switch .js-isactive-toggle:checked + .mp-grid-switch-slider,
.mp-grid-switch .js-ismandatory-toggle:checked + .mp-grid-switch-slider {
  background: #dcfce7;
  border-color: #86efac;
}

.mp-grid-switch .js-isactive-toggle:checked + .mp-grid-switch-slider::before,
.mp-grid-switch .js-ismandatory-toggle:checked + .mp-grid-switch-slider::before {
  transform: translate(1rem, -50%);
}

.mp-grid-switch .js-isactive-toggle:focus-visible + .mp-grid-switch-slider,
.mp-grid-switch .js-ismandatory-toggle:focus-visible + .mp-grid-switch-slider {
  outline: 2px solid var(--mp-primary-border);
  outline-offset: 2px;
}

.mp-grid-switch .js-isactive-toggle:disabled + .mp-grid-switch-slider,
.mp-grid-switch .js-ismandatory-toggle:disabled + .mp-grid-switch-slider {
  opacity: .6;
  cursor: not-allowed;
}

/* Sidebar toggle button */
.mp-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  border-radius: var(--mp-radius);
  color: var(--mp-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.mp-toggle-btn:hover { background: var(--mp-muted-bg); color: var(--mp-text); }

/* Notification bell */
.mp-notif-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: none;
  border-radius: var(--mp-radius);
  color: var(--mp-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.mp-notif-btn:hover { background: var(--mp-muted-bg); color: var(--mp-text); }
.mp-notif-badge {
  position: absolute;
  top: 4px; right: 4px;
  width: .9rem; height: .9rem;
  background: var(--mp-primary);
  color: #fff;
  border-radius: 50%;
  font-size: .55rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-notif-title {
  font-size: .8125rem;
  margin-bottom: .25rem;
}

.mp-notif-time {
  font-size: .8125rem;
}

.mp-notif-message {
  font-size: .75rem;
  font-style: italic;
  margin-bottom: .25rem;
}

.mp-notif-clear-btn {
  font-size: .7rem;
  color: var(--mp-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--mp-radius);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.mp-notif-clear-btn:hover {
  background: var(--mp-muted-bg);
  color: var(--mp-danger, #dc3545);
}

.mp-notif-delete-btn {
  font-size: .7rem;
  color: var(--mp-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--mp-radius);
  line-height: 1;
  transition: color .15s;
}
.mp-notif-delete-btn:hover {
  color: var(--mp-danger, #dc3545);
}

.mo-notif-title {
  margin-bottom: 0;
}

/* Divider in topnav */
.mp-topnav-divider {
  width: 1px;
  height: 1.25rem;
  background: var(--mp-border);
  margin: 0 .25rem;
}

/* User avatar button */
.mp-user-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: var(--mp-radius);
  transition: background .15s;
}
.mp-user-btn:hover { background: var(--mp-muted-bg); }
.mp-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--mp-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.mp-user-info { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.mp-user-name { font-size: .8125rem; font-weight: 600; color: var(--mp-text); }
.mp-user-role { font-size: .7rem; color: var(--mp-muted); text-transform: capitalize; }


/* ── Main content area ────────────────────────────────────── */
.mp-content-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.mp-page-header {
  padding: .75rem 1.5rem;
  border-bottom: 1px solid var(--mp-border);
  background: var(--mp-surface);
  flex-shrink: 0;
}
.mp-page-title { font-size: 1rem; font-weight: 600; color: var(--mp-text); margin: 0; }
.mp-breadcrumb { font-size: .8rem; color: var(--mp-muted); margin: .125rem 0 0; }
.mp-breadcrumb a { color: var(--mp-muted); }
.mp-breadcrumb a:hover { color: var(--mp-primary); }
.mp-breadcrumb .sep { margin: 0 .375rem; }

.mp-main {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}


/* ================================================================
   CARDS / STATS
   ================================================================ */
.mp-card {
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.mp-card:hover {
  border-color: var(--mp-primary);
  box-shadow: var(--mp-shadow-md);
  transform: translateY(-2px);
}

/* Use .mp-card-static on cards that should not animate/elevate on hover. */
.mp-card.mp-card-static,
.mp-card-static {
  transition: none;
}

.mp-card.mp-card-static:hover,
.mp-card-static:hover {
  border-color: var(--mp-border);
  box-shadow: var(--mp-shadow-sm);
  transform: none;
}

.mp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--mp-border);
}
.mp-card-title { font-size: .9375rem; font-weight: 600; color: var(--mp-text); margin: 0; }
.mp-card-body { padding: 1.25rem; }
.mp-card-body-flush { padding: 0; }

/* ── Landlord card (JS filter hook + card style) ─────────── */
/* Used by filterLandlords() in site.js to show/hide cards.
   Visual styling comes from .card + .card-accent — this class
   exists purely as a stable selector target.               */
.mp-landlord-card { /* JS filter hook — no extra visual rules */ }

/* ── mp-card-accent  (alias of .card-accent) ─────────────── */
/* Left crimson border accent, identical to .card-accent      */
.mp-card-accent { border-left: 4px solid #c01f1f !important; }


.select2-container {
  width: 100% !important;
}

.select2-container--bootstrap-5 .select2-selection {
  min-height: calc(2.5rem + 2px);
  border-radius: .85rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: none;
}

.select2-container--bootstrap-5 .select2-selection--single {
  padding: .48rem .9rem;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  line-height: 1.5rem;
  color: #0f172a;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
  color: #64748b;
}

.select2-container--bootstrap-5 .select2-dropdown {
  border-color: rgba(15, 23, 42, 0.12);
  border-radius: .85rem;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}

.select2-container--bootstrap-5 .select2-search {
  padding: .65rem;
}

.select2-container--bootstrap-5 .select2-search__field {
  border-radius: .65rem;
}

.mp-util-gauge {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: conic-gradient(var(--util-color, var(--mp-primary)) calc(var(--utilization) * 1%), rgba(15, 23, 42, 0.08) 0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.mp-util-gauge-inner {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 50%;
  background: #fff;
  color: var(--util-color, var(--mp-primary));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.mp-util-gauge-inner i {
  font-size: .7rem;
}

.mp-util-gauge-inner strong {
  font-size: .8rem;
  font-weight: 700;
}

.mp-image-upload-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  align-items: start;
}

.mp-image-upload-preview-wrap {
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.04);
  min-height: 180px;
}

.mp-image-upload-preview {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
}

.mp-address-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: .9rem;
  background: rgba(248, 250, 252, 0.85);
}

.mp-building-upsert-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr);
  gap: 1.25rem;
  align-items: start;
}

.mp-building-upsert-main,
.mp-building-upsert-media {
  min-width: 0;
}

.mp-building-upsert-media {
  justify-self: end;
  width: 100%;
  max-width: 360px;
}

.mp-image-dropzone {
  border: 2px dashed rgba(5, 150, 105, 0.28);
  border-radius: 1rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.9), rgba(240, 249, 255, 0.92));
  color: #0f172a;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.mp-image-dropzone:hover,
.mp-image-dropzone.is-active {
  border-color: rgba(5, 150, 105, 0.6);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.mp-image-dropzone i {
  font-size: 1.6rem;
  display: block;
  margin-bottom: .5rem;
  color: #059669;
}

.mp-image-dropzone-title {
  font-weight: 600;
  margin: 0 0 .35rem;
}

.mp-upload-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

.mp-upload-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  padding: .35rem .65rem;
  font-size: .78rem;
}

.mp-upload-chip button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  line-height: 1;
}

@media (max-width: 767.98px) {
  .mp-building-upsert-shell {
    grid-template-columns: 1fr;
  }

  .mp-building-upsert-media {
    max-width: none;
    justify-self: stretch;
  }

  .mp-image-upload-panel {
    grid-template-columns: 1fr;
  }
}

/* Stat card */
.mp-stat-card {
  padding: 1.25rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mp-stat-card:hover {
  border-color: var(--mp-primary);
  box-shadow: var(--mp-shadow-md);
  transform: translateY(-2px);
}
.mp-stat-card-sm {
  padding: .875rem 1rem;
  min-width: 9rem;
}
.mp-stat-card-lg {
  padding: 1.25rem 1.5rem;
  min-height: 11rem;
}
.mp-stat-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .75rem; }
.mp-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--mp-text); line-height: 1; }
.mp-stat-icon-wrap {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--mp-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.mp-stat-icon-wrap i { font-size: 1.1rem; }
.mp-stat-label { font-size: .8125rem; font-weight: 500; color: var(--mp-muted); margin-bottom: .25rem; }
.mp-stat-trend { display: flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 500; }
.mp-stat-trend.up   { color: #059669; }
.mp-stat-trend.down { color: var(--mp-primary); }

/* Icon colour helpers */
.icon-primary { color: var(--mp-primary); background: var(--mp-primary-light) !important; }
.icon-steel   { color: var(--mp-steel);   background: var(--mp-steel-light)   !important; }
.icon-gold    { color: var(--mp-gold);    background: #fdf3d0 !important; }
.icon-danger  { color: #dc2626;           background: rgba(220,38,38,.10) !important; }


/* ================================================================
   TABLE
   ================================================================ */
.mp-table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.mp-table th {
  padding: .75rem 1.25rem;
  text-align: left;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mp-muted);
  border-bottom: 1px solid var(--mp-border);
}
.mp-table th.text-end { text-align: right; }
.mp-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--mp-border);
  color: var(--mp-text);
  vertical-align: middle;
}
.mp-table td.text-end { text-align: right; }
.mp-table tbody tr:last-child td { border-bottom: none; }
.mp-table tbody tr:hover { background: var(--mp-muted-bg); }

/* Compact density — mirrors Syncfusion Material grid sizing */
.mp-table-compact { font-size: .8125rem; }
.mp-table-compact th {
  font-size: .68rem;
  padding: .5rem .75rem;
  letter-spacing: .05em;
}
.mp-table-compact td { padding: .45rem .75rem; }
.mp-table-compact td.text-end,
.mp-table-compact th.text-end { text-align: right; }

.mp-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.mp-table-search {
  width: min(100%, 320px);
  padding: .55rem .8rem;
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  background: var(--mp-card-bg);
  color: var(--mp-text);
}
.mp-sort-button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.mp-sort-button .sort-indicator {
  color: var(--mp-muted);
  font-size: .75rem;
}
.mp-sort-button.active .sort-indicator {
  color: var(--mp-primary);
}
.mp-actions-column {
  min-width: 140px;
  white-space: nowrap;
}

/* Occupancy bar */
.mp-occ-bar { width: 4rem; height: .375rem; background: var(--mp-muted-bg); border-radius: 99px; overflow: hidden; }
.mp-occ-fill { height: 100%; background: var(--mp-primary); border-radius: 99px; }

/* Property icon cell */
.mp-prop-icon {
  width: 2rem; height: 2rem;
  border-radius: var(--mp-radius);
  background: var(--mp-primary-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mp-prop-icon i { color: var(--mp-primary); font-size: .875rem; }


/* ================================================================
   ACTIVITY FEED
   ================================================================ */
.mp-activity-item {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--mp-border);
}
.mp-activity-item:last-child { border-bottom: none; }
.mp-activity-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.mp-activity-text { font-size: .875rem; color: var(--mp-text); line-height: 1.4; }
.mp-activity-time { font-size: .75rem; color: var(--mp-muted); }


/* ================================================================
   BADGES
   ================================================================ */
.mp-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: .375rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  background: var(--mp-muted-bg);
  color: var(--mp-muted);
  white-space: nowrap;
}
.mp-badge-primary { background: var(--mp-primary-light); color: var(--mp-primary); }
.mp-badge-secondary { background: var(--mp-muted-bg); color: var(--mp-muted); }


/* ================================================================
   BUTTONS
   ================================================================ */
.mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem 1.1rem;
  border-radius: var(--mp-radius);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background .15s, opacity .15s;
  text-decoration: none;
}
.mp-btn-primary { background: var(--mp-primary); color: #fff; }
.mp-btn-primary:hover { background: var(--mp-primary-hover); color: #fff; }
.mp-btn-secondary { background: var(--mp-muted-bg); color: var(--mp-text); }
.mp-btn-secondary:hover { background: #e2e4e9; }
.mp-btn-lg { padding: .7rem 1.4rem; font-size: .9375rem; height: 2.75rem; }
.mp-btn-full { width: 100%; }
.mp-btn:disabled { opacity: .55; cursor: not-allowed; }


/* ================================================================
   LOGIN PAGE
   ================================================================ */
.mp-login-page {
  min-height: 100vh;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem 2rem;
  overflow: auto;
  background:
    radial-gradient(circle at top left, rgba(192,31,31,.18), transparent 32%),
    radial-gradient(circle at bottom right, rgba(46,109,164,.18), transparent 28%),
    linear-gradient(135deg, #f4f1ed 0%, #eceff4 48%, #f8f7f4 100%);
}

.mp-login-shell {
  display: flex;
  width: min(1180px, 100%);
  min-height: min(760px, calc(100vh - 4rem));
  margin: 2rem auto 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 1.5rem;
  box-shadow: 0 28px 70px rgba(27, 39, 51, .18);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
}

/* Hero panel — 60% */
.mp-login-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 60%;
  flex-shrink: 0;
}
@media (max-width: 767px) { .mp-login-hero { display: none; } }

.mp-login-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-login-hero-grad1 {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.45), rgba(0,0,0,.20), rgba(0,0,0,.05));
}
.mp-login-hero-grad2 {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.40), transparent);
}
.mp-login-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 3rem;
}

.mp-login-hero-logo { display: flex; align-items: center; gap: .75rem; }
.mp-login-hero-logo img { height: 2.5rem; width: 2.5rem; object-fit: contain; }
.mp-login-hero-logo span { font-size: 1.125rem; font-weight: 600; color: #fff; letter-spacing: .04em; }

.mp-login-hero-tagline { max-width: 36rem; }
.mp-login-tag-bar { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.mp-login-tag-line { height: 3px; width: 3rem; background: var(--mp-primary); border-radius: 99px; }
.mp-login-tag-text { color: rgba(255,255,255,.70); font-size: .8125rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 500; }

.mp-login-h1 { font-size: 3rem; font-weight: 700; color: #fff; line-height: 1.15; margin: 0 0 1.25rem; }
.mp-login-h1 .accent { color: var(--mp-primary); }
.mp-login-lead { color: rgba(255,255,255,.75); font-size: 1.0625rem; line-height: 1.65; margin: 0 0 2rem; }

.mp-feature-list { display: flex; flex-direction: column; gap: 1rem; }
.mp-feature-item { display: flex; align-items: flex-start; gap: .75rem; }
.mp-feature-icon {
  margin-top: .125rem;
  padding: .5rem;
  border-radius: var(--mp-radius);
  background: rgba(192,31,31,.20);
  border: 1px solid rgba(192,31,31,.30);
}
.mp-feature-icon i { color: var(--mp-primary); font-size: .9rem; }
.mp-feature-title { font-size: .875rem; font-weight: 500; color: #fff; margin: 0; }
.mp-feature-desc  { font-size: .8rem; color: rgba(255,255,255,.60); margin: 0; }

.mp-login-copyright { color: rgba(255,255,255,.40); font-size: .8125rem; }

/* Form panel — 40% */
.mp-login-form-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--mp-bg);
  padding: 3rem 2rem;
  overflow-y: auto;
}
.mp-login-form-inner { width: 100%; max-width: 22rem; }

.mp-form-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.5rem;
}
.mp-form-logo img { height: 3.5rem; object-fit: contain; margin-bottom: 1.25rem; }
.mp-form-logo h2 { font-size: 1.375rem; font-weight: 700; color: var(--mp-text); margin: 0; }
.mp-form-logo p  { font-size: .875rem; color: var(--mp-muted); margin: .25rem 0 0; }

.mp-form-group { margin-bottom: 1.25rem; }
.mp-label { display: block; font-size: .875rem; font-weight: 500; color: var(--mp-text); margin-bottom: .4rem; }
.mp-input {
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: .5rem .85rem;
  background: var(--mp-surface);
  border: 1px solid #d1d5db;
  border-radius: var(--mp-radius);
  font-size: .875rem;
  color: var(--mp-text);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.mp-input:focus { border-color: var(--mp-primary); box-shadow: 0 0 0 3px rgba(192,31,31,.15); }
.mp-input::placeholder { color: #9ca3af; }

.mp-input-sm {
    font-size: 0.78rem;
    min-height: 1.95rem;
    padding: 0.25rem 0.5rem;
}

/* Printed-form input style: keep only bottom border visible. */
.mp-input.mp-input-readonly {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d1d5db;
  border-radius: 0;
  box-shadow: none;
}

.mp-input.mp-input-readonly:focus {
  border-color: transparent;
  border-bottom-color: var(--mp-primary);
  box-shadow: none;
}

.mp-textarea {
  display: block;
  width: 100%;
  padding: .5rem .85rem;
  background: var(--mp-surface);
  border: 1px solid #d1d5db;
  border-radius: var(--mp-radius);
  font-size: .875rem;
  color: var(--mp-text);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  resize: vertical;
}
.mp-textarea:focus { border-color: var(--mp-primary); box-shadow: 0 0 0 3px rgba(192,31,31,.15); }
.mp-textarea::placeholder { color: #9ca3af; }

.mp-input-wrap { position: relative; }
.mp-input-wrap .mp-input { padding-right: 2.75rem; }
.mp-pwd-toggle {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mp-muted);
  padding: 0;
  line-height: 1;
}

.form-label.required::after { content: " *"; color: #dc2626; }
.mp-input.error { border-color: #dc2626 !important; }



.mp-checkbox-primary .form-check-input:focus,
.mp-checkbob-primary .form-check-input:focus {
  border-color: var(--mp-primary-hover);
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--mp-primary-light);
}
.mp-checkbox-primary .form-check-input:checked,
.mp-checkbob-primary .form-check-input:checked {
  background-color: var(--mp-primary);
  border-color: var(--mp-primary-hover);
}


.mp-checkbox-secondary .form-check-input:focus,
.mp-checkbob-secondary .form-check-input:focus {
  border-color: var(--mp-steel-hover);
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--mp-steel-light);
}
.mp-checkbox-secondary .form-check-input:checked,
.mp-checkbob-secondary .form-check-input:checked {
  background-color: var(--mp-steel);
  border-color: var(--mp-steel-hover);
}






.mp-pwd-toggle:hover { color: var(--mp-text); }

.mp-field-error { font-size: .78rem; color: var(--mp-primary); margin-top: .35rem; display: none; }
.mp-field-error.visible { display: block; }

.mp-demo-box {
  margin-top: 1.25rem;
  padding: .875rem;
  border-radius: var(--mp-radius);
  background: var(--mp-muted-bg);
  border: 1px solid var(--mp-border);
}
.mp-demo-heading {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mp-muted);
  margin: 0 0 .6rem;
}
.mp-demo-row {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  margin-bottom: .375rem;
}
.mp-demo-row:last-child { margin-bottom: 0; }
.mp-demo-key { color: var(--mp-muted); }
.mp-demo-val { font-family: 'Menlo', 'Consolas', monospace; color: var(--mp-text); }

.mp-form-footer { text-align: center; font-size: .8rem; color: var(--mp-muted); margin-top: 2rem; }


/* ================================================================
   RESPONSIVE — collapse sidebar on small screens
   ================================================================ */
@media (max-width: 991px) {
  .mp-sidebar { position: fixed; top: 0; left: -var(--mp-sidebar-width); height: 100%; z-index: 200; transition: left .25s ease; }
  .mp-sidebar.open { left: 0; }
  .mp-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 199; }
  .mp-sidebar.open ~ .mp-sidebar-backdrop { display: block; }
}


/* ================================================================
   UTILITY HELPERS
   ================================================================ */
.mp-flex-center { display: flex; align-items: center; justify-content: center; }
.mp-gap-3 { gap: .75rem; }
.mp-text-muted { color: var(--mp-muted); }
.mp-fw-semibold { font-weight: 600; }
.mp-grid-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.mp-grid-stats-lg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mp-grid-2-1  { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
@media (max-width: 1199px) { .mp-grid-2-1 { grid-template-columns: 1fr; } }
@media (max-width: 1399px) { .mp-grid-stats-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) { .mp-grid-stats-lg { grid-template-columns: 1fr; } }

/* Helper status messages (reusable across pages) */
.mp-helper-message {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 500;
}

.mp-helper-success { color: #047857; }
.mp-helper-alert { color: #b45309; }
.mp-helper-error { color: var(--mp-primary); }

.mp-helper-message.is-loading::before {
  content: '';
  display: inline-block;
  width: .8rem;
  height: .8rem;
  border: 2px solid #d7dce2;
  border-top-color: #b45309;
  border-radius: 50%;
  animation: mp-helper-spin .7s linear infinite;
}

@keyframes mp-helper-spin {
  to { transform: rotate(360deg); }
}

/* Extra button variants */
.mp-btn-outline {
  background: transparent;
  color: var(--mp-text);
  border: 1px solid var(--mp-border);
}
.mp-btn-outline:hover { background: var(--mp-muted-bg); }
.mp-btn-danger  { background: #dc2626; color: #fff; }
.mp-btn-danger:hover { background: #b91c1c; color: #fff; }
.mp-btn-sm { padding: .35rem .8rem; font-size: .8125rem; }

/* Required asterisk */
.mp-required { color: var(--mp-primary); font-size: .75rem; }

/* Form row 2-col */
.mp-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 540px) { .mp-form-row-2 { grid-template-columns: 1fr; } }

/* Form error inside modal */
.mp-form-error {
  margin-top: .75rem;
  padding: .5rem .875rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--mp-radius);
  color: #b91c1c;
  font-size: .8125rem;
}

/* Select input */
.mp-select {
  display: block;
  height: 2.25rem;
  padding: .25rem .85rem;
  background: var(--mp-surface);
  border: 1px solid #d1d5db;
  border-radius: var(--mp-radius);
  font-size: .875rem;
  color: var(--mp-text);
  cursor: pointer;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.mp-select:focus { border-color: var(--mp-primary); box-shadow: 0 0 0 3px rgba(192,31,31,.15); }

/* Icon action buttons */
.mp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border: none;
  background: none;
  border-radius: var(--mp-radius);
  color: var(--mp-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
  font-size: .875rem;
}
.mp-icon-btn:hover { background: var(--mp-muted-bg); color: var(--mp-text); }
.mp-icon-btn-danger:hover { background: rgba(220,38,38,.1); color: #dc2626; }


/* ================================================================
   SETTINGS PAGE
   ================================================================ */
.mp-settings-page { display: flex; flex-direction: column; gap: 1.5rem; }

/* Header row */
.mp-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}
.mp-settings-title { font-size: 1.25rem; font-weight: 700; color: var(--mp-text); margin: 0; }

/* Filter toolbar */
.mp-settings-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.mp-toolbar-group { display: flex; align-items: center; gap: .5rem; }

.mp-toolbar-search {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 22rem;
}
.mp-toolbar-search-icon {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mp-muted);
  pointer-events: none;
  font-size: .8125rem;
}
.mp-toolbar-search-input {
  height: 2.25rem;
  padding-left: 2.1rem;
  padding-right: 2.1rem;
}
.mp-toolbar-search-clear {
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mp-muted);
  padding: 0;
  font-size: .875rem;
  line-height: 1;
}
.mp-toolbar-search-clear:hover { color: var(--mp-text); }

/* Cards grid */
.mp-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 1280px) {
  .mp-settings-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Loading / empty state */
.mp-settings-loading,
.mp-settings-empty {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 10rem;
  color: var(--mp-muted);
  font-size: .9rem;
}

/* Spinner */
.mp-spinner {
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--mp-border);
  border-top-color: var(--mp-primary);
  border-radius: 50%;
  animation: mp-spin .7s linear infinite;
}
@keyframes mp-spin { to { transform: rotate(360deg); } }

/* Setting card */
.mp-sc-card { display: flex; flex-direction: column; }

/* Card header */
.mp-sc-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .875rem;
  border-bottom: 1px solid var(--mp-border);
  min-height: 2.75rem;
}
.mp-sc-icon  { font-size: 1.125rem; flex-shrink: 0; }
.mp-sc-group-name { font-size: .875rem; font-weight: 600; color: var(--mp-text); }
.mp-sc-count {
  font-size: .7rem;
  font-weight: 500;
  color: var(--mp-muted);
  background: var(--mp-muted-bg);
  border-radius: 99px;
  padding: .1rem .5rem;
  flex-shrink: 0;
}
.mp-sc-rename-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(107,114,128,.45);
  padding: 0;
  font-size: .75rem;
  line-height: 1;
  flex-shrink: 0;
  transition: color .15s;
}
.mp-sc-rename-btn:hover { color: var(--mp-muted); }
.mp-sc-quick-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  color: var(--mp-muted);
  transition: background .15s, color .15s;
  font-size: .9rem;
}
.mp-sc-quick-add:hover { background: var(--mp-primary-light); color: var(--mp-primary); }

/* Group rename input (inline) */
.mp-sc-group-rename-input {
  height: 1.75rem;
  padding: 0 .5rem;
  font-size: .875rem;
  font-weight: 600;
  border: 1px solid var(--mp-primary);
  border-radius: var(--mp-radius);
  background: var(--mp-surface);
  outline: none;
  box-shadow: 0 0 0 2px rgba(192,31,31,.15);
  min-width: 0;
  flex: 1;
}
.mp-sc-rename-confirm,
.mp-sc-rename-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: var(--mp-radius);
  cursor: pointer;
  font-size: .8rem;
  background: none;
  flex-shrink: 0;
}
.mp-sc-rename-confirm { color: #059669; }
.mp-sc-rename-confirm:hover { background: #d1fae5; }
.mp-sc-rename-cancel  { color: #dc2626; }
.mp-sc-rename-cancel:hover  { background: #fee2e2; }

/* Settings table */
.mp-sc-table { width: 100%; border-collapse: collapse; font-size: .875rem; }

/* Table rows */
.mp-sc-row { transition: background .12s; }
.mp-sc-row:not(:last-child) { border-bottom: 1px solid var(--mp-border); }
.mp-sc-row:hover { background: rgba(0,0,0,.02); }
.mp-sc-row-dragging { opacity: .3; }
.mp-sc-row-over { border-top: 2px solid var(--mp-primary) !important; background: var(--mp-primary-light); }

/* Cells */
.mp-sc-drag-td   { width: 1.5rem; padding: .75rem .25rem .75rem .625rem; vertical-align: middle; }
.mp-sc-label-td  { width: 35%;    padding: .75rem .5rem; vertical-align: top; }
.mp-sc-value-td  { padding: .625rem .5rem; vertical-align: top; }
.mp-sc-actions-td {
  width: 5rem;
  padding: .5rem .625rem .5rem .25rem;
  vertical-align: middle;
  text-align: right;
  white-space: nowrap;
}

.mp-sc-drag-handle { color: rgba(107,114,128,.35); cursor: grab; font-size: 1rem; }
.mp-sc-drag-handle:active { cursor: grabbing; }

.mp-sc-label { font-weight: 500; font-size: .8rem; color: var(--mp-text); line-height: 1.3; }
.mp-sc-key   { font-size: .7rem; font-family: 'Menlo','Consolas',monospace; color: var(--mp-muted); margin-top: .125rem; }

/* Value cell */
.mp-sc-val-wrap {
  display: flex;
  align-items: flex-start;
  gap: .375rem;
  cursor: pointer;
  border-radius: var(--mp-radius);
  padding: .125rem .25rem;
  transition: background .12s;
}
.mp-sc-val-wrap:hover { background: var(--mp-muted-bg); }
.mp-sc-val-text  { font-size: .8125rem; color: var(--mp-text); word-break: break-all; flex: 1; }
.mp-sc-val-empty { font-size: .75rem; color: rgba(107,114,128,.5); font-style: italic; flex: 1; }
.mp-sc-val-pencil {
  font-size: .7rem;
  color: var(--mp-muted);
  opacity: 0;
  flex-shrink: 0;
  margin-top: .1rem;
  transition: opacity .12s;
}
.mp-sc-val-wrap:hover .mp-sc-val-pencil { opacity: .6; }

/* Inline edit area */
.mp-sc-inline-edit { display: flex; align-items: flex-start; gap: .375rem; }
.mp-sc-inline-ta   {
  flex: 1;
  min-height: 2.1rem;
  height: auto;
  resize: none;
  font-size: .8125rem;
  padding: .35rem .6rem;
}
.mp-sc-inline-btns { display: flex; flex-direction: column; gap: .125rem; padding-top: .125rem; }
.mp-sc-inline-save,
.mp-sc-inline-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border: none;
  border-radius: .25rem;
  cursor: pointer;
  font-size: .8rem;
  background: none;
}
.mp-sc-inline-save   { color: #059669; }
.mp-sc-inline-save:hover   { background: #d1fae5; }
.mp-sc-inline-cancel { color: #dc2626; }
.mp-sc-inline-cancel:hover { background: #fee2e2; }


/* ================================================================
   MODALS
   ================================================================ */
.mp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.mp-modal {
  background: var(--mp-surface);
  border-radius: var(--mp-radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  width: 100%;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.mp-modal-sm { max-width: 24rem; }

.mp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--mp-border);
  flex-shrink: 0;
}
.mp-modal-title { font-size: 1rem; font-weight: 600; color: var(--mp-text); margin: 0; }
.mp-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  border-radius: var(--mp-radius);
  cursor: pointer;
  color: var(--mp-muted);
  font-size: .9rem;
  transition: background .15s, color .15s;
}
.mp-modal-close:hover { background: var(--mp-muted-bg); color: var(--mp-text); }

.mp-modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
}
.mp-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--mp-border);
  flex-shrink: 0;
}

/* Misc utility for modal */
.mt-3 { margin-top: .875rem; }
.ms-auto { margin-left: auto; }


/* ================================================================
   PROPERTIES — List Page
   ================================================================ */
.mp-prop-page { display: flex; flex-direction: column; gap: 1.25rem; }

/* Toolbar */
.mp-prop-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
  background: var(--mp-surface);
  border-bottom: 1px solid var(--mp-border);
}
.mp-prop-toolbar .mp-select {
  height: 2.25rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
}

/* Card grid */
.mp-prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
  padding: 1.5rem;
}

/* Property card */
.mp-prop-card {
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s;
}
.mp-prop-card:hover { box-shadow: var(--mp-shadow-md); }

/* Photo area */
.mp-prop-photo {
  position: relative;
  height: 11rem;
  background: var(--mp-muted-bg);
  flex-shrink: 0;
  overflow: hidden;
}
.mp-prop-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.mp-prop-card:hover .mp-prop-photo-img { transform: scale(1.04); }
.mp-prop-photo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: .5rem;
  color: var(--mp-muted);
  font-size: .8rem;
}

/* Emirate badge */
.mp-prop-emirate-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  background: rgba(192,31,31,.9);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: .35rem;
  letter-spacing: .02em;
}

/* Card body */
.mp-prop-body { padding: 1rem; display: flex; flex-direction: column; flex: 1; gap: .75rem; }
.mp-prop-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--mp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-prop-location {
  font-size: .8125rem;
  color: var(--mp-muted);
  margin: .25rem 0 0;
  display: flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-prop-meta { display: flex; flex-direction: column; gap: .375rem; }
.mp-prop-meta-row { display: flex; align-items: center; gap: .4rem; font-size: .875rem; }
.mp-prop-occ-row  { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }

/* Card action strip */
.mp-prop-actions {
  display: flex;
  gap: .5rem;
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--mp-border);
}

/* Small icon button */
.mp-btn-sm      { padding: .4rem .8rem; font-size: .8125rem; }
.mp-btn-sm-icon { padding: .4rem .6rem; }
.mp-btn-icon    { padding: .45rem .55rem; }
.mp-btn-danger-hover:hover { background: rgba(220,38,38,.08); color: #dc2626; }

/* Empty state */
.mp-prop-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
  text-align: center;
  color: var(--mp-muted);
}

/* Form helpers */
.mp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; }
.mp-form-group { display: flex; flex-direction: column; gap: .35rem; }
.col-span-2 { grid-column: 1 / -1; }
.mp-required { color: var(--mp-primary); }
.mp-section-label {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mp-muted);
  margin: 0;
}
.mp-section-title {
  font-size: 1.125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mp-muted);
  margin: 0;
}
.mp-field-hint { font-size: .78rem; color: var(--mp-muted); margin: .2rem 0 0; }
.mp-select {
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: .5rem .85rem;
  background: var(--mp-surface);
  border: 1px solid #d1d5db;
  border-radius: var(--mp-radius);
  font-size: .875rem;
  color: var(--mp-text);
  outline: none;
  cursor: pointer;
}
.mp-select:focus { border-color: var(--mp-primary); box-shadow: 0 0 0 3px rgba(192,31,31,.15); }

/* ── Landlord card left accent ───────────────────────────── */
.card-accent { border-left: 4px solid #c01f1f !important; }

/* ── Section header row ──────────────────────────────────── */
.mp-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.mp-section-head h1 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.mp-section-head p  { color: #6c757d; margin: .2rem 0 0; font-size: .875rem; }

/* ── Info-row utility (icon + text) ──────────────────────── */
.mp-info-row { display: flex; align-items: center; gap: .5rem; color: #6c757d; font-size: .85rem; }
.mp-info-row a { color: #6c757d; text-decoration: none; }
.mp-info-row a:hover { color: #c01f1f; }


/* ================================================================
   PROPERTY DETAIL PAGE
   ================================================================ */

/* Hero photo banner */
.mp-detail-photo {
  position: relative;
  height: 13rem;
  background: var(--mp-muted-bg);
  overflow: hidden;
}
.mp-detail-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mp-detail-photo-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.2) 50%, transparent 100%);
}

/* Back pill */
.mp-detail-back {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(0,0,0,.40);
  color: #fff;
  font-size: .8rem;
  font-weight: 500;
  padding: .35rem .85rem;
  border-radius: 99px;
  backdrop-filter: blur(4px);
  text-decoration: none;
  transition: background .15s;
}
.mp-detail-back:hover { background: rgba(0,0,0,.60); color: #fff; }

/* Property name block over image */
.mp-detail-name-block {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
}
.mp-detail-prop-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.mp-detail-prop-location {
  font-size: .875rem;
  color: rgba(255,255,255,.80);
  margin: .25rem 0 0;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Stats bar */
.mp-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: .875rem 1.5rem;
  background: var(--mp-surface);
  border-bottom: 1px solid var(--mp-border);
}
.mp-stat-item { display: flex; align-items: center; gap: .625rem; }
.mp-stat-item-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mp-muted);
  margin: 0;
}
.mp-stat-item-value { font-size: .9375rem; font-weight: 600; color: var(--mp-text); margin: 0; }

/* Floor cards */
.mp-floor-list  { display: flex; flex-direction: column; gap: .875rem; }
.mp-floor-card  { border: 1px solid var(--mp-border); border-radius: var(--mp-radius); overflow: hidden; background: var(--mp-surface); }

.mp-floor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: var(--mp-muted-bg);
  border-bottom: 1px solid var(--mp-border);
}

.mp-floor-toggle {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: 1;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.mp-floor-icon {
  width: 2rem;
  height: 2rem;
  border-radius: .375rem;
  background: var(--mp-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--mp-primary);
}
.mp-floor-title-block { display: flex; flex-direction: column; gap: .1rem; }
.mp-floor-name { font-size: .9rem; font-weight: 600; color: var(--mp-text); }
.mp-floor-sub  { font-size: .75rem; }
.mp-floor-chevron { color: var(--mp-muted); font-size: .8rem; margin-left: .5rem; transition: transform .2s; }

.mp-floor-actions { display: flex; align-items: center; gap: .375rem; margin-left: .75rem; }


/* ================================================================
   BUTTONS
   ================================================================ */
.mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem 1.1rem;
  border-radius: var(--mp-radius);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background .15s, opacity .15s;
  text-decoration: none;
}
.mp-btn-primary { background: var(--mp-primary); color: #fff; }
.mp-btn-primary:hover { background: var(--mp-primary-hover); color: #fff; }
.mp-btn-secondary { background: var(--mp-muted-bg); color: var(--mp-text); }
.mp-btn-secondary:hover { background: #e2e4e9; }
.mp-btn-lg { padding: .7rem 1.4rem; font-size: .9375rem; height: 2.75rem; }
.mp-btn-full { width: 100%; }
.mp-btn:disabled { opacity: .55; cursor: not-allowed; }

.mps-segmented, .mp-segmented {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem;
  border-radius: calc(var(--mp-radius) + 4px);
  background: var(--mp-muted-bg);
  border: 1px solid var(--mp-border, #e5e7eb);
}
.mps-segmented-btn, .mp-segmented-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  border: none;
  border-radius: calc(var(--mp-radius) + 2px);
  background: transparent;
  color: var(--mp-muted);
  font-size: .84rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.mps-segmented-btn:hover, .mp-segmented-btn:hover {
  color: var(--mp-text);
}
.mps-segmented-btn.is-active, .mp-segmented-btn.is-active {
  background: #fff;
  color: var(--mp-primary);
  box-shadow: var(--mp-shadow-sm, 0 1px 2px rgba(0,0,0,.08));
}
.mps-segmented-btn:disabled, .mp-segmented-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
}
.mps-segmented-btn.is-locked, .mp-segmented-btn.is-locked {
  opacity: 1;
  cursor: not-allowed;
}


.mp-btn-icon-bare {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  background: none;
  border-radius: var(--mp-radius);
  cursor: pointer;
  color: var(--mp-muted);
  font-size: .875rem;
  transition: background .15s, color .15s;
}
.mp-btn-icon-bare:hover { background: var(--mp-muted-bg); color: var(--mp-text); }
.mp-icon-danger:hover   { background: rgba(220,38,38,.08); color: #dc2626; }

/* Floor units container */
.mp-floor-units-wrap { padding: 1rem; }
.mp-units-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  gap: .5rem;
  color: var(--mp-muted);
  font-size: .8125rem;
}

/* Floor empty state */
.mp-floor-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--mp-border);
  border-radius: var(--mp-radius);
  padding: 4rem 1rem;
  text-align: center;
  color: var(--mp-muted);
}

/* ── Unit Tiles ── */
.mp-units-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.mp-unit-tile {
  position: relative;
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--mp-border);
  border-radius: .75rem;
  background: var(--mp-surface);
  cursor: default;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
  user-select: none;
  padding: .45rem .5rem;
  cursor: grab;
}
.mp-unit-tile:hover { border-color: var(--mp-primary-border); box-shadow: var(--mp-shadow-sm); }
.mp-unit-tile.is-dragging {
  opacity: .45;
  cursor: grabbing;
}
.mp-unit-tile.is-drop-target {
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.18);
}

.mp-unit-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
  min-height: .875rem;
}

.mp-unit-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  position: relative;
}

/* Status dot */
.mp-unit-dot {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  outline: 2px solid var(--mp-surface);
  flex: 0 0 auto;
}
.mp-dot-green  { background: #10b981; }
.mp-dot-red    { background: #ef4444; }
.mp-dot-amber  { background: #f59e0b; }
.mp-dot-orange { background: #f97316; }

.mp-unit-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -35%);
  font-size: 2.35rem;
  color: #e5e7eb;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}
.mp-unit-type {
  font-size: .68rem;
  color: var(--mp-text);
  margin: 0;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}
.mp-unit-number {
  font-size: .68rem;
  color: var(--mp-text);
  margin: 0;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-unit-rent {
  font-size: .62rem;
  color: var(--mp-text);
  margin: 0;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}

.mp-unit-usage-badge {
  position: absolute;
  bottom: .35rem;
  right: .4rem;
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .14rem .4rem;
  border-radius: .375rem;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}
.mp-unit-usage-badge.is-residential { background: #e7f5ee; color: #0f7b59; }
.mp-unit-usage-badge.is-commercial { background: #eef1fb; color: #3d5bd8; }

/* Hover overlay */
.mp-unit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.95);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  border-radius: .75rem;
  opacity: 0;
  transition: opacity .15s;
  z-index: 10;
}
.mp-unit-tile:hover .mp-unit-overlay { opacity: 1; }

.mp-unit-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border: none;
  background: none;
  border-radius: .375rem;
  cursor: pointer;
  color: var(--mp-muted);
  font-size: .875rem;
  transition: background .12s, color .12s;
}
.mp-unit-action:hover { background: var(--mp-primary-light); color: var(--mp-primary); }
.mp-unit-action-danger:hover { background: rgba(220,38,38,.10); color: #dc2626; }



/* ================================================================
  PLAIN CLASS COMPATIBILITY
  ================================================================ */

/* ── Buttons ─────────────────────────────────────────────── */
.btn           { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius); font-size: .82rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s; text-decoration: none; }
.btn-primary   { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline   { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-outline:hover { background: var(--bg); }
.btn-ghost     { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--bg); }
.btn-danger    { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-sm        { padding: 5px 12px; font-size: .78rem; }

/* ── Forms ───────────────────────────────────────────────── */
.form-label    { display: block; font-size: .875em; font-weight: 500; margin-bottom: 0px; }

.form-control  { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: .85rem; background: var(--surface); transition: border-color .15s; outline: none; }
.form-control:focus { border-color: var(--primary); }
.form-select   { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: .85rem; background: var(--surface); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; }
.form-select:focus { border-color: var(--primary); outline: none; }
.form-row      { display: grid; gap: 12px; }
.form-row-2    { grid-template-columns: 1fr 1fr; }
.form-row-3    { grid-template-columns: 1fr 1fr 1fr; }
.form-group    { 
  margin-top: 10px;
  margin-bottom: 14px; 
}

/* ── Cards ───────────────────────────────────────────────── */
.card          { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-body     { padding: 20px; }
.card-section  { padding: 0 20px 20px; }

/* ── Modals ──────────────────────────────────────────────── */
.modal-overlay  { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal          { background: var(--surface); border-radius: 10px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-header   { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.modal-title    { font-size: 1rem; font-weight: 600; }
.modal-close    { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1.2rem; line-height: 1; padding: 2px; }
.modal-body     { padding: 20px; }
.modal-footer   { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
.modal-sm       { max-width: 425px; }

/* ================================================================
   LANDLORDS PAGE
   ================================================================ */

/* ── Section ─────────────────────────────────────────────── */
.section-head   { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; }
.section-head h1 { font-size: 1.5rem; font-weight: 700; }
.section-head p  { color: var(--text-muted); font-size: .85rem; margin-top: 2px; }
.content-area   { padding: 0 24px 24px; }

/* ── Landlord Cards ──────────────────────────────────────── */
.landlord-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); box-shadow: var(--shadow-md); margin-bottom: 16px; overflow: hidden; }
.landlord-card-body { padding: 24px; }
.landlord-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .landlord-grid { grid-template-columns: 1fr; } }
.landlord-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.landlord-name { font-size: 1.05rem; font-weight: 600; }
.landlord-meta { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.meta-row      { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: var(--text-muted); }
.meta-row a    { color: inherit; text-decoration: none; }
.meta-row a:hover { color: var(--text); }
.meta-icon     { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.landlord-actions { display: flex; align-items: flex-start; gap: 8px; flex-shrink: 0; }
.contacts-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.contacts-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.contacts-header h4 { font-size: .9rem; font-weight: 600; }
.contacts-grid    { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.contact-card     { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.contact-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.contact-name  { font-size: .85rem; font-weight: 600; margin-bottom: 2px; }
.contact-meta  { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; color: var(--text-muted); }


/* =========================================================
   LANDLORD / COMPANY DETAIL CARD
   ========================================================= */

.mp-company-card {
  border-left: 4px solid var(--mp-primary);
}

.mp-company-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1.5rem;
  flex-wrap:wrap;
}

.mp-company-title {
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:1.05rem;
  font-weight:600;
}

.mp-company-meta {
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin-top:.5rem;
}

.mp-company-meta .mp-info-row {
  font-size:.85rem;
}

.mp-company-properties {
  margin-top:.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}

.mp-chip {
  font-size:.72rem;
  padding:.18rem .45rem;
  border-radius:.35rem;
  background:var(--mp-muted-bg);
  color:var(--mp-muted);
  font-weight:500;
}

.mp-company-right {
  min-width:220px;
}

.mp-company-right-label {
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--mp-muted);
  margin-bottom:.35rem;
}

.mp-company-primary-contact {
  font-size:.85rem;
  color:var(--mp-text);
}

.mp-company-primary-contact strong {
  display:block;
  font-weight:600;
}

.mp-company-actions {
  margin-top:.5rem;
}


/* =========================================================
   CONTACT PERSON CARDS
   ========================================================= */

.mp-contact-section {
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--mp-border);
}

.mp-contact-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.9rem;
}

.mp-contact-header h4 {
  font-size:.9rem;
  font-weight:600;
  margin:0;
}

.mp-contact-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:.75rem;
}

.mp-contact-card {
  background:var(--mp-bg);
  border:1px solid var(--mp-border);
  border-radius:var(--mp-radius);
  padding:.75rem;
}

.mp-contact-card-header {
  display:flex;
  justify-content:space-between;
  margin-bottom:.45rem;
}

.mp-contact-name {
  font-size:.85rem;
  font-weight:600;
}

.mp-contact-role {
  font-size:.75rem;
  color:var(--mp-muted);
}

.mp-contact-meta {
  display:flex;
  flex-direction:column;
  gap:.2rem;
  font-size:.75rem;
  color:var(--mp-muted);
}

.mp-contact-meta a {
  color:var(--mp-muted);
}

.mp-contact-meta a:hover {
  color:var(--mp-primary);
}