/* =========================
   Majoko Rentals - Property24-inspired UI (PHP)
   Uses your dark + gold theme
   ========================= */

   

.mr-container{
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 16px;
}

.mr-hero{
    position: relative;
    min-height: 360px;
    background: url('../assets/images/hero-rentals.jpg') center/cover no-repeat;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mr-hero-overlay{
    position:absolute; inset:0;
    background: linear-gradient(90deg, rgba(8,14,28,0.86), rgba(8,14,28,0.45));
}

.mr-hero-content{
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 16px 36px 16px;
    color:#fff;
}

.mr-hero-title{
    font-size: 52px;
    font-weight: 800;
    margin-bottom: 18px;
}

.mr-tabs{
    display:flex; gap:28px; flex-wrap:wrap;
    margin-bottom: 18px;
    opacity: .95;
}

.mr-tab{ font-weight:700; padding-bottom:10px; border-bottom:3px solid transparent; }
.mr-tab-active{ border-bottom-color:#e6c04c; }

.mr-searchbar{
    display:flex; flex-direction:column;
    gap:12px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    padding: 12px;
    max-width: 980px;
}

.mr-search-input{
    display:flex; align-items:center; gap:10px;
    background:#fff;
    border-radius: 12px;
    padding: 12px 14px;
}

.mr-search-input input{
    width:100%;
    border:0; outline:none;
    font-size:16px;
}

.mr-search-icon{ opacity:.55; font-weight:900; }

.mr-clear{
    text-decoration:none;
    font-size:22px;
    line-height:1;
    opacity:.6;
    padding:0 6px;
    color:#0b1020;
}

.mr-search-btn{
    align-self:flex-start;
    background:#e6c04c;
    color:#0b1020;
    border:0;
    font-weight:900;
    padding: 12px 18px;
    border-radius: 12px;
}

.mr-filters{
    display:grid;
    grid-template-columns: repeat(3, 1fr) 140px 170px;
    gap: 12px;
    align-items:end;
}

.mr-filter{
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    padding: 10px 12px;
}

.mr-filter label{
    display:block;
    font-size:12px;
    opacity:.85;
    margin-bottom:6px;
}

.mr-filter input, .mr-filter select{
    width:100%;
    border-radius: 10px;
    border:0; outline:none;
    padding: 10px;
}

.mr-filter-search{
    background:#1d4ed8;
    color:#fff;
    border:0;
    font-weight:900;
    padding: 12px 10px;
    border-radius: 12px;
}

.mr-filter-ai{
    background: transparent;
    color:#fff;
    border: 1px solid rgba(255,255,255,0.30);
    font-weight:900;
    padding: 12px 10px;
    border-radius: 12px;
}

.mr-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.mr-card{
    text-decoration:none;
    color:inherit;
    background:#0f172a;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    overflow:hidden;
    transition: transform .12s ease, border-color .12s ease;
}

.mr-card:hover{
    transform: translateY(-2px);
    border-color: rgba(230,192,76,0.35);
}

.mr-card-img{ position:relative; height:210px; overflow:hidden; }
.mr-card-img img{ width:100%; height:100%; object-fit:cover; }

.mr-card-price{
    position:absolute;
    left:12px; bottom:12px;
    background: rgba(11,16,32,0.78);
    padding: 8px 10px;
    border-radius: 10px;
    font-weight: 900;
    color:#e6c04c;
}

.mr-card-badge{
    position:absolute;
    right:12px; bottom:12px;
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 900;
    font-size: 12px;
}

.mr-badge-available{ background: rgba(34,197,94,0.20); color:#86efac; border:1px solid rgba(34,197,94,0.35); }
.mr-badge-unavailable{ background: rgba(148,163,184,0.18); color:#cbd5e1; border:1px solid rgba(148,163,184,0.30); }

.mr-card-body{ padding:14px; }
.mr-card-title{ font-weight: 900; margin-bottom:6px; color:#e6c04c; }
.mr-card-address{ opacity:.75; font-size:13px; min-height:34px; }
.mr-card-cta{ margin-top:12px; display:flex; justify-content:space-between; align-items:center; font-weight:800; opacity:.9; }

.mr-open{
    border:1px solid rgba(230,192,76,0.35);
    border-radius: 10px;
    padding:6px 10px;
    color:#e6c04c;
}

.mr-alert{
    background: rgba(29,78,216,0.15);
    border: 1px solid rgba(29,78,216,0.25);
    padding: 12px 14px;
    border-radius: 12px;
    color:#cfe0ff;
}

.mr-toast{
    margin-top: 16px;
    max-width: 980px;
    background: rgba(15,23,42,0.94);
    border: 1px solid rgba(230,192,76,0.25);
    border-radius: 14px;
    padding: 12px 14px;
}
.mr-toast-title{ font-weight: 900; color:#e6c04c; margin-bottom:6px; }
.mr-toast-body{ opacity:.92; }
.mr-toast-actions{ margin-top:10px; display:flex; gap:10px; align-items:center; }
.mr-toast-link, .mr-toast-close{
    background: transparent;
    color:#fff;
    border: 1px solid rgba(255,255,255,0.18);
    padding: 8px 10px;
    border-radius: 10px;
    font-weight: 800;
    text-decoration:none;
}

.mr-details-top{
    display:flex;
    justify-content: space-between;
    gap: 14px;
    align-items:flex-start;
}
.mr-back{ display:inline-block; margin-bottom: 10px; text-decoration:none; opacity:.75; }
.mr-details-title{ font-weight: 950; margin: 6px 0 2px 0; }
.mr-details-sub{ opacity:.75; }

.mr-details-pricebox{
    background:#0f172a;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 14px 16px;
    min-width: 240px;
    text-align:right;
}
.mr-details-price{ color:#e6c04c; font-weight: 950; font-size: 26px; }
.mr-details-per{ opacity:.75; margin-top:-2px; }
.mr-details-status{
    margin-top:10px;
    font-weight: 950;
    font-size: 12px;
    display:inline-block;
    padding: 6px 10px;
    border-radius: 10px;
}
.mr-status-yes{ background: rgba(34,197,94,0.20); color:#86efac; border:1px solid rgba(34,197,94,0.35); }
.mr-status-no{ background: rgba(148,163,184,0.18); color:#cbd5e1; border:1px solid rgba(148,163,184,0.30); }

.mr-details-grid{
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-top: 14px;
}

.mr-gallery{ background:#0f172a; border:1px solid rgba(255,255,255,0.07); border-radius:14px; padding:12px; }
.mr-details-img{ width:100%; height: 420px; object-fit:cover; border-radius: 12px; }

.mr-thumbs{
    margin-top: 10px;
    display:flex;
    gap: 10px;
    overflow:auto;
    padding-bottom: 4px;
}
.mr-thumb{
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    border-radius: 10px;
    padding: 0;
    cursor: pointer;
    overflow:hidden;
    min-width: 88px;
    height: 62px;
}
.mr-thumb img{ width: 88px; height:62px; object-fit:cover; display:block; }

.mr-card-simple{
    background:#0f172a;
    border:1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 14px;
    margin-top: 12px;
}

.mr-muted{ opacity:.75; }

.mr-input, .mr-textarea{
    width:100%;
    border-radius: 12px;
    border:1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    color:#fff;
    padding: 10px 12px;
    margin-bottom: 10px;
    outline:none;
}

.mr-btn-gold{
    width:100%;
    background:#e6c04c;
    color:#0b1020;
    border:0;
    font-weight: 950;
    padding: 12px 12px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.mr-btn-outline{
    width:100%;
    display:block;
    text-align:center;
    border:1px solid rgba(255,255,255,0.18);
    color:#fff;
    padding: 12px 12px;
    border-radius: 12px;
    text-decoration:none;
    font-weight: 900;
}

.mr-sticky{ position: sticky; top: 14px; }

@media (max-width: 992px){
    .mr-grid{ grid-template-columns: repeat(2, 1fr); }
    .mr-filters{ grid-template-columns: repeat(2, 1fr); }
    .mr-details-grid{ grid-template-columns: 1fr; }
    .mr-details-pricebox{ text-align:left; width:100%; }
}
@media (max-width: 576px){
    .mr-grid{ grid-template-columns: 1fr; }
    .mr-hero-title{ font-size: 36px; }
    .mr-details-img{ height: 280px; }
}
/* =========================
   Majoko Rentals - Property24-inspired UI (PHP)
   ========================= */

.mr-container{max-width:1100px;margin:0 auto;padding:18px 16px;}
.mr-hero{position:relative;min-height:360px;background:url('../assets/images/hero-rentals.jpg') center/cover no-repeat;border-bottom:1px solid rgba(255,255,255,0.08);}
.mr-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(8,14,28,0.86), rgba(8,14,28,0.45));}
.mr-hero-content{position:relative;max-width:1100px;margin:0 auto;padding:48px 16px 36px 16px;color:#fff;}
.mr-hero-title{font-size:52px;font-weight:800;margin-bottom:18px;}
.mr-tabs{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:18px;opacity:.95;}
.mr-tab{font-weight:700;padding-bottom:10px;border-bottom:3px solid transparent;}
.mr-tab-active{border-bottom-color:#e6c04c;}
.mr-searchbar{display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.18);border-radius:14px;padding:12px;max-width:980px;}
.mr-search-input{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:12px 14px;}
.mr-search-input input{width:100%;border:0;outline:none;font-size:16px;}
.mr-search-icon{opacity:.55;font-weight:900;}
.mr-clear{text-decoration:none;font-size:22px;line-height:1;opacity:.6;padding:0 6px;color:#0b1020;}
.mr-search-btn{align-self:flex-start;background:#e6c04c;color:#0b1020;border:0;font-weight:900;padding:12px 18px;border-radius:12px;}
.mr-filters{display:grid;grid-template-columns:repeat(3, 1fr) 140px 170px;gap:12px;align-items:end;}
.mr-filter{background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.18);border-radius:14px;padding:10px 12px;}
.mr-filter label{display:block;font-size:12px;opacity:.85;margin-bottom:6px;}
.mr-filter input,.mr-filter select{width:100%;border-radius:10px;border:0;outline:none;padding:10px;}
.mr-filter-search{background:#1d4ed8;color:#fff;border:0;font-weight:900;padding:12px 10px;border-radius:12px;}
.mr-filter-ai{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.30);font-weight:900;padding:12px 10px;border-radius:12px;}
.mr-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px;}
.mr-card{text-decoration:none;color:inherit;background:#0f172a;border:1px solid rgba(255,255,255,0.07);border-radius:14px;overflow:hidden;transition:transform .12s ease,border-color .12s ease;}
.mr-card:hover{transform:translateY(-2px);border-color:rgba(230,192,76,0.35);}
.mr-card-img{position:relative;height:210px;overflow:hidden;}
.mr-card-img img{width:100%;height:100%;object-fit:cover;}
.mr-card-price{position:absolute;left:12px;bottom:12px;background:rgba(11,16,32,0.78);padding:8px 10px;border-radius:10px;font-weight:900;color:#e6c04c;}
.mr-card-badge{position:absolute;right:12px;bottom:12px;padding:6px 10px;border-radius:10px;font-weight:900;font-size:12px;}
.mr-badge-available{background:rgba(34,197,94,0.20);color:#86efac;border:1px solid rgba(34,197,94,0.35);}
.mr-badge-unavailable{background:rgba(148,163,184,0.18);color:#cbd5e1;border:1px solid rgba(148,163,184,0.30);}
.mr-card-body{padding:14px;}
.mr-card-title{font-weight:900;margin-bottom:6px;color:#e6c04c;}
.mr-card-address{opacity:.75;font-size:13px;min-height:34px;}
.mr-card-cta{margin-top:12px;display:flex;justify-content:space-between;align-items:center;font-weight:800;opacity:.9;}
.mr-open{border:1px solid rgba(230,192,76,0.35);border-radius:10px;padding:6px 10px;color:#e6c04c;}
.mr-alert{background:rgba(29,78,216,0.15);border:1px solid rgba(29,78,216,0.25);padding:12px 14px;border-radius:12px;color:#cfe0ff;}
.mr-toast{margin-top:16px;max-width:980px;background:rgba(15,23,42,0.94);border:1px solid rgba(230,192,76,0.25);border-radius:14px;padding:12px 14px;}
.mr-toast-title{font-weight:900;color:#e6c04c;margin-bottom:6px;}
.mr-toast-body{opacity:.92;}
.mr-toast-actions{margin-top:10px;display:flex;gap:10px;align-items:center;}
.mr-toast-link,.mr-toast-close{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.18);padding:8px 10px;border-radius:10px;font-weight:800;text-decoration:none;}
.mr-details-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;}
.mr-back{display:inline-block;margin-bottom:10px;text-decoration:none;opacity:.75;}
.mr-details-title{font-weight:950;margin:6px 0 2px 0;}
.mr-details-sub{opacity:.75;}
.mr-details-pricebox{background:#0f172a;border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:14px 16px;min-width:240px;text-align:right;}
.mr-details-price{color:#e6c04c;font-weight:950;font-size:26px;}
.mr-details-per{opacity:.75;margin-top:-2px;}
.mr-details-status{margin-top:10px;font-weight:950;font-size:12px;display:inline-block;padding:6px 10px;border-radius:10px;}
.mr-status-yes{background:rgba(34,197,94,0.20);color:#86efac;border:1px solid rgba(34,197,94,0.35);}
.mr-status-no{background:rgba(148,163,184,0.18);color:#cbd5e1;border:1px solid rgba(148,163,184,0.30);}
.mr-details-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:14px;}
.mr-gallery{background:#0f172a;border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:12px;}
.mr-details-img{width:100%;height:420px;object-fit:cover;border-radius:12px;}
.mr-thumbs{margin-top:10px;display:flex;gap:10px;overflow:auto;padding-bottom:4px;}
.mr-thumb{border:1px solid rgba(255,255,255,0.12);background:transparent;border-radius:10px;padding:0;cursor:pointer;overflow:hidden;min-width:88px;height:62px;}
.mr-thumb img{width:88px;height:62px;object-fit:cover;display:block;}
.mr-card-simple{background:#0f172a;border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:14px;margin-top:12px;}
.mr-muted{opacity:.75;}
.mr-input,.mr-textarea{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.06);color:#fff;padding:10px 12px;margin-bottom:10px;outline:none;}
.mr-btn-gold{width:100%;background:#e6c04c;color:#0b1020;border:0;font-weight:950;padding:12px 12px;border-radius:12px;margin-bottom:10px;}
.mr-btn-outline{width:100%;display:block;text-align:center;border:1px solid rgba(255,255,255,0.18);color:#fff;padding:12px 12px;border-radius:12px;text-decoration:none;font-weight:900;}
.mr-sticky{position:sticky;top:14px;}
@media (max-width:992px){.mr-grid{grid-template-columns:repeat(2, 1fr);} .mr-filters{grid-template-columns:repeat(2, 1fr);} .mr-details-grid{grid-template-columns:1fr;} .mr-details-pricebox{text-align:left;width:100%;}}
@media (max-width:576px){.mr-grid{grid-template-columns:1fr;} .mr-hero-title{font-size:36px;} .mr-details-img{height:280px;}}
/* Brand / Logo */
.mr-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.mr-logo {
    height: 44px;      /* nice desktop size */
    width: auto;
    display: block;
}

@media (max-width: 576px) {
    .mr-logo {
        height: 36px;  /* smaller on mobile */
    }
}
/* =========================
   PROPERTIES (mr-*)
   Safe scoped styles
========================= */

.mr-page { padding: 24px; max-width: 1200px; margin: 0 auto; }
.mr-page-header { display:flex; justify-content:space-between; gap:16px; margin-bottom:18px; }

.mr-badge {
  display:inline-block; padding:6px 12px; border-radius:999px;
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.35);
  color: #ffc107; font-weight: 700; font-size: 12px;
}

.mr-h1 { margin: 10px 0 6px; font-size: 32px; }
.mr-sub { margin:0; opacity:0.75; }

.mr-filter {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  margin-bottom: 18px;
}

.mr-filter-grid {
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.mr-field label { display:block; font-size: 12px; opacity: 0.8; margin-bottom: 6px; }
.mr-field input, .mr-field select, .mr-field textarea {
  width:100%; padding:10px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  color: inherit;
  outline: none;
}

.mr-filter-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }

.mr-btn { display:inline-block; padding: 10px 14px; border-radius: 999px; text-decoration:none; font-weight:700; border:1px solid transparent; }
.mr-btn-primary { background:#ffc107; color:#0b1a35; border-color: rgba(255,193,7,0.55); }
.mr-btn-outline { background: transparent; border-color: rgba(255,193,7,0.55); color:#ffc107; }

.mr-ai-box {
  border: 1px solid rgba(255,193,7,0.35);
  background: rgba(255,193,7,0.06);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}

.mr-ai-title { font-weight: 800; margin-bottom: 6px; color:#ffc107; }
.mr-ai-msg { opacity:0.85; margin-bottom: 10px; }
.mr-ai-card { padding: 12px; border-radius: 12px; background: rgba(0,0,0,0.18); border:1px solid rgba(255,255,255,0.08); }
.mr-ai-card-title { font-weight: 900; }
.mr-ai-card-sub { opacity: 0.8; margin-top: 4px; }
.mr-ai-card-actions { margin-top: 10px; }

.mr-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.mr-card {
  display:block;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  text-decoration:none;
}

.mr-card-imgwrap { position:relative; }
.mr-card-img { width:100%; height: 220px; object-fit: cover; display:block; }

.mr-price {
  position:absolute; left: 10px; bottom: 10px;
  background: rgba(0,0,0,0.55);
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 900;
}

.mr-badge-available {
  position:absolute; right: 10px; top: 10px;
  background: rgba(34,197,94,0.18);
  border:1px solid rgba(34,197,94,0.45);
  color: #22c55e;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}

.mr-badge-off {
  position:absolute; right: 10px; top: 10px;
  background: rgba(148,163,184,0.18);
  border:1px solid rgba(148,163,184,0.35);
  color: #cbd5e1;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}

.mr-card-body { padding: 12px 12px 14px; }
.mr-title { font-weight: 900; font-size: 16px; }
.mr-meta { opacity: 0.8; margin-top: 4px; font-size: 13px; }
.mr-open { margin-top: 12px; display:flex; justify-content:space-between; align-items:center; opacity:0.9; }
.mr-chip { padding: 6px 10px; border-radius: 999px; border:1px solid rgba(255,193,7,0.35); color:#ffc107; font-weight:800; font-size: 12px; }

.mr-empty {
  padding: 16px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.15);
  opacity: 0.85;
}

/* Details layout */
.mr-details-top { margin-bottom: 12px; }
.mr-details-grid { display:grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.mr-gallery { display:grid; grid-template-columns: 1fr; gap: 10px; }
.mr-gallery-img { width:100%; height: 360px; object-fit: cover; border-radius: 16px; border:1px solid rgba(255,255,255,0.08); }

.mr-details-card, .mr-side-card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  padding: 14px;
}

.mr-details-price { font-size: 26px; font-weight: 950; }
.mr-details-address { opacity: 0.8; margin-top: 6px; }
.mr-details-badges { margin-top: 10px; }
.mr-pill { display:inline-block; padding: 6px 10px; border-radius: 999px; font-weight: 900; font-size: 12px; }
.mr-pill-ok { background: rgba(34,197,94,0.18); border:1px solid rgba(34,197,94,0.45); color:#22c55e; }
.mr-pill-off { background: rgba(148,163,184,0.18); border:1px solid rgba(148,163,184,0.35); color:#cbd5e1; }

.mr-side-sub { opacity: 0.8; margin-top: 6px; margin-bottom: 12px; }
.mr-quick-actions { margin-top: 10px; display:flex; gap:10px; }

/* Responsive */
@media (max-width: 992px) {
  .mr-filter-grid { grid-template-columns: repeat(2, 1fr); }
  .mr-grid { grid-template-columns: repeat(2, 1fr); }
  .mr-details-grid { grid-template-columns: 1fr; }
  .mr-gallery-img { height: 260px; }
}
@media (max-width: 600px) {
  .mr-grid { grid-template-columns: 1fr; }
}
body { margin:0; font-family: system-ui, Arial, sans-serif; background:#0b1020; color:#fff; }
a { color: inherit; text-decoration:none; }
.page { padding: 16px; }

.topbar { padding:16px; border-bottom:1px solid rgba(255,255,255,.12); background:#0b1020; }
.topnav { display:flex; gap:12px; align-items:center; flex-wrap:wrap; max-width:1200px; margin:0 auto; }
.nav-spacer { flex: 1; }
.nav-user { opacity:0.85; }

.nav-cta {
  border: 1px solid rgba(255,255,255,.18);
  padding: 8px 12px;
  border-radius: 12px;
}

/* Brand / Logo */
.mr-brand { display:inline-flex; align-items:center; }
.mr-logo { height: 44px; width:auto; display:block; }
@media (max-width: 576px) { .mr-logo { height: 36px; } }


/* =========================
   APPLY PAGE LAYOUT FIX (SCOPED)
   ========================= */
/* Everything here ONLY affects the Apply page because it is scoped to .mr2-apply-wrap */

.mr2-apply-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px;
}

/* header row */
.mr2-apply-wrap .mr2-apply-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap:14px;
  margin-bottom:14px;
}

.mr2-apply-wrap .mr2-apply-heading h1{ margin:0; font-size:28px; line-height:1.15; }
.mr2-apply-wrap .mr2-muted{ opacity:.78; }

/* 2-column layout (form left, info right) */
.mr2-apply-wrap .mr2-apply-grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:16px;
  align-items:start;
}

/* Apply page card (scoped so it doesn’t fight properties .mr2-card) */
.mr2-apply-wrap .mr2-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius:16px;
  padding:16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  overflow:hidden;
}

/* Sections with modern divider + spacing */
.mr2-apply-wrap .mr2-form-section{ padding:14px 0; }
.mr2-apply-wrap .mr2-form-section + .mr2-form-section{
  border-top:1px solid rgba(255,255,255,.08);
}

.mr2-apply-wrap .mr2-section-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:12px;
}
.mr2-apply-wrap .mr2-section-head h3{
  margin:0; font-size:13px; letter-spacing:.7px;
  text-transform:uppercase; opacity:.92;
}
.mr2-apply-wrap .mr2-divider{
  height:1px; flex:1;
  background: linear-gradient(90deg, rgba(240,177,29,.65), rgba(255,255,255,0));
}

/* 3-column grid */
.mr2-apply-wrap .mr2-grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-bottom:12px;
}

/* Fields */
.mr2-apply-wrap .mr2-field label{
  display:block;
  font-size:13px;
  opacity:.9;
  margin:0 0 6px;
}

.mr2-apply-wrap .mr2-field input,
.mr2-apply-wrap .mr2-field textarea{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color:inherit;
  outline:none;
  box-sizing: border-box;
}

.mr2-apply-wrap .mr2-field input:focus,
.mr2-apply-wrap .mr2-field textarea:focus{
  border-color: rgba(240,177,29,.55);
  box-shadow: 0 0 0 3px rgba(240,177,29,.10);
}

.mr2-apply-wrap .mr2-field input[readonly]{
  opacity:.85;
  cursor:not-allowed;
  background: rgba(0,0,0,.12);
}

.mr2-apply-wrap .mr2-field textarea{
  resize: vertical;
  min-height: 160px;   /* IMPORTANT: fixes the “tiny box” look */
  line-height:1.45;
}

.mr2-apply-wrap .mr2-help{
  display:block;
  font-size:12px;
  opacity:.75;
  margin-top:6px;
}

/* Switch (pets) – align properly, no floating checkbox */
.mr2-apply-wrap .mr2-field-inline{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.mr2-apply-wrap .mr2-switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  user-select:none;
}

.mr2-apply-wrap .mr2-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.mr2-apply-wrap .mr2-switch-ui{
  width:46px; height:26px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  position:relative;
  cursor:pointer;
  display:inline-block;
}

.mr2-apply-wrap .mr2-switch-ui::after{
  content:"";
  width:20px; height:20px; border-radius:999px;
  background: rgba(255,255,255,.85);
  position:absolute;
  top:2px; left:2px;
  transition: transform .18s ease;
}

.mr2-apply-wrap #hasPets:checked + .mr2-switch-ui::after{
  transform: translateX(20px);
}

/* Consent block */
.mr2-apply-wrap .mr2-consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px;
  border:1px dashed rgba(240,177,29,.35);
  background: rgba(240,177,29,.06);
  border-radius:14px;
}

.mr2-apply-wrap .mr2-consent input{ margin-top:3px; }

/* Right column visuals */
.mr2-apply-wrap .mr2-side-hero{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}

.mr2-apply-wrap .mr2-side-hero img{
  width:100%;
  height: 180px;
  object-fit: cover;
  display:block;
}

.mr2-apply-wrap .mr2-side-list{
  margin:10px 0 12px;
  padding-left:18px;
  opacity:.92;
}

.mr2-apply-wrap .mr2-side-note{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  margin-bottom:12px;
}

/* Actions row (buttons) – ensure it looks consistent */
.mr2-apply-wrap .mr2-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* Reveal animation */
.mr2-apply-wrap .mr2-reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}
.mr2-apply-wrap .mr2-reveal.is-in{
  opacity:1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 980px){
  .mr2-apply-wrap .mr2-apply-grid{ grid-template-columns: 1fr; }
  .mr2-apply-wrap .mr2-grid-3{ grid-template-columns: 1fr; }
}
/* =========================
   APPLY PAGE (COMPACT + SECTION DIVIDERS + ANIMATIONS)
   Scoped to .mr2-apply-wrap to avoid collisions with Properties
   ========================= */

.mr2-apply-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px;
}

/* header row */
.mr2-apply-wrap .mr2-apply-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap:14px;
  margin-bottom:14px;
}

.mr2-apply-wrap .mr2-apply-heading h1{
  margin:0;
  font-size:30px;
  line-height:1.1;
}

.mr2-apply-wrap .mr2-muted{ opacity:.78; }

/* 2-column layout */
.mr2-apply-wrap .mr2-apply-grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:16px;
  align-items:start;
}

/* Card (scoped) */
.mr2-apply-wrap .mr2-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius:18px;
  padding:18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  overflow:hidden;
}

/* NEW: make form compact like Bootstrap container */
.mr2-apply-wrap .mr2-apply-form-shell{
  max-width: 760px;     /* <-- This is the main fix: inputs won’t feel “full screen” */
  margin: 0 auto;       /* centers the form inside the card */
}

/* Sections */
.mr2-apply-wrap .mr2-form-section{
  padding:16px 0;
  position: relative;
}

.mr2-apply-wrap .mr2-form-section + .mr2-form-section{
  border-top:1px solid rgba(255,255,255,.08);
}

/* Section header + animated divider */
.mr2-apply-wrap .mr2-section-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.mr2-apply-wrap .mr2-section-head h3{
  margin:0;
  font-size:13px;
  letter-spacing:.8px;
  text-transform:uppercase;
  opacity:.92;
  white-space: nowrap;
}

.mr2-apply-wrap .mr2-divider{
  height:1px;
  flex:1;
  background: linear-gradient(90deg, rgba(240,177,29,.75), rgba(255,255,255,0));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .35s ease;
}

/* When section reveals, animate divider */
.mr2-apply-wrap .mr2-reveal.is-in .mr2-divider{
  transform: scaleX(1);
}

/* GRID: mimic Bootstrap col-md-6 / col-12 feel */
.mr2-apply-wrap .mr2-grid-3{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
  margin-bottom:12px;
}

/* Default field spans 6 columns (half width) */
.mr2-apply-wrap .mr2-grid-3 .mr2-field{
  grid-column: span 6;
}

/* Make some fields full width */
.mr2-apply-wrap .mr2-grid-3 .mr2-field.is-full{
  grid-column: span 12;
}

/* Field styling */
.mr2-apply-wrap .mr2-field label{
  display:block;
  font-size:13px;
  opacity:.9;
  margin:0 0 6px;
}

.mr2-apply-wrap .mr2-field input,
.mr2-apply-wrap .mr2-field textarea{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color:inherit;
  outline:none;
  box-sizing:border-box;
}

.mr2-apply-wrap .mr2-field input:focus,
.mr2-apply-wrap .mr2-field textarea:focus{
  border-color: rgba(240,177,29,.55);
  box-shadow: 0 0 0 3px rgba(240,177,29,.10);
}

.mr2-apply-wrap .mr2-field input[readonly]{
  opacity:.85;
  cursor:not-allowed;
  background: rgba(0,0,0,.12);
}

.mr2-apply-wrap .mr2-help{
  display:block;
  font-size:12px;
  opacity:.75;
  margin-top:6px;
}

/* Fix textarea: it must look like a proper field */
.mr2-apply-wrap .mr2-field textarea{
  min-height: 140px;
  resize: vertical;
  line-height:1.45;
}

/* Switch: keep it neat */
.mr2-apply-wrap .mr2-field-inline{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.mr2-apply-wrap .mr2-switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  user-select:none;
}

.mr2-apply-wrap .mr2-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.mr2-apply-wrap .mr2-switch-ui{
  width:46px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  position:relative;
  cursor:pointer;
  display:inline-block;
}

.mr2-apply-wrap .mr2-switch-ui::after{
  content:"";
  width:20px;
  height:20px;
  border-radius:999px;
  background: rgba(255,255,255,.85);
  position:absolute;
  top:2px;
  left:2px;
  transition: transform .18s ease;
}

.mr2-apply-wrap #hasPets:checked + .mr2-switch-ui::after{
  transform: translateX(20px);
}

/* Consent block */
.mr2-apply-wrap .mr2-consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:14px;
  border:1px dashed rgba(240,177,29,.35);
  background: rgba(240,177,29,.06);
  border-radius:16px;
}

.mr2-apply-wrap .mr2-consent input{ margin-top:3px; }

/* Buttons row */
.mr2-apply-wrap .mr2-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* Right side */
.mr2-apply-wrap .mr2-side-hero{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}

.mr2-apply-wrap .mr2-side-hero img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
}

.mr2-apply-wrap .mr2-side-note{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  margin:14px 0;
}

.mr2-apply-wrap .mr2-side-list{
  margin:10px 0 0;
  padding-left:18px;
  opacity:.92;
}

/* Reveal animation */
.mr2-apply-wrap .mr2-reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}
.mr2-apply-wrap .mr2-reveal.is-in{
  opacity:1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 980px){
  .mr2-apply-wrap .mr2-apply-grid{ grid-template-columns: 1fr; }
  .mr2-apply-wrap .mr2-apply-form-shell{ max-width: 100%; }
}

@media (max-width: 680px){
  .mr2-apply-wrap .mr2-grid-3{ grid-template-columns: 1fr; }
  .mr2-apply-wrap .mr2-grid-3 .mr2-field{ grid-column: auto; }
}
/* =========================
   APPLICATION DASHBOARD UI
   ========================= */

.mr2-app-wrap { max-width: 1200px; margin: 0 auto; padding: 22px 18px 60px; }
.mr2-app-top {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 14px; margin-bottom: 16px;
}
.mr2-app-title h1 { margin: 0; font-size: 28px; color:#fff; }
.mr2-app-title .mr2-muted { margin-top: 6px; }

.mr2-app-grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 16px;
  align-items:start;
}

@media (max-width: 980px){
  .mr2-app-grid{ grid-template-columns: 1fr; }
}

/* Tiles row */
.mr2-tiles{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}
@media (max-width: 980px){
  .mr2-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .mr2-tiles{ grid-template-columns: 1fr; }
}

.mr2-tile{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, filter .18s ease;
}
.mr2-tile:hover{ transform: translateY(-2px); filter: brightness(1.04); }

.mr2-tile-kicker{ font-weight: 800; color: rgba(255,255,255,.82); font-size: 12px; letter-spacing: .2px; }
.mr2-tile-value{ font-weight: 900; color:#fff; font-size: 18px; margin-top: 6px; }
.mr2-tile-sub{ color: rgba(255,255,255,.72); font-size: 12px; margin-top: 6px; }

/* Accent variants */
.mr2-tile-good{ border-color: rgba(60, 199, 115, .45); background: rgba(60, 199, 115, .06); }
.mr2-tile-warn{ border-color: rgba(242, 180, 0, .55); background: rgba(242, 180, 0, .07); }
.mr2-tile-bad { border-color: rgba(255, 90, 90, .55); background: rgba(255, 90, 90, .06); }

@keyframes mr2Pulse {
  0% { box-shadow: 0 0 0 0 rgba(242,180,0,.22); }
  70% { box-shadow: 0 0 0 16px rgba(242,180,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(242,180,0,0); }
}
.mr2-attention{ animation: mr2Pulse 1.6s ease-out infinite; }

/* Cards inside left column */
.mr2-section-card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 14px;
  margin-bottom: 12px;
}
.mr2-section-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; margin-bottom: 10px;
}
.mr2-section-head h3{ margin: 0; color:#fff; font-size: 16px; }
.mr2-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px; border-radius: 999px;
  font-weight: 900; font-size: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color:#fff;
}
.mr2-badge-good{ border-color: rgba(60,199,115,.55); background: rgba(60,199,115,.10); }
.mr2-badge-warn{ border-color: rgba(242,180,0,.70); background: rgba(242,180,0,.10); color:#111; }
.mr2-badge-bad { border-color: rgba(255, 90, 90, .65); background: rgba(255, 90, 90, .10); }

.mr2-kv{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.10);
}
.mr2-kv:first-of-type{ border-top: 0; padding-top: 0; }
.mr2-k{ color: rgba(255,255,255,.72); font-weight: 700; }
.mr2-v{ color:#fff; }

.mr2-action-panel{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 14px;
  position: sticky;
  top: 14px;
}

.mr2-form-compact .mr2-field input,
.mr2-form-compact .mr2-field select,
.mr2-form-compact .mr2-field textarea{
  max-width: 520px;
}

.mr2-action-row{
  display:flex; gap:10px; flex-wrap:wrap;
}
.mr2-action-row .mr2-btn{ padding: 10px 14px; border-radius: 12px; }

.mr2-divider-anim{
  height: 1px;
  background: linear-gradient(90deg,
    rgba(242,180,0,0),
    rgba(242,180,0,.55),
    rgba(242,180,0,0)
  );
  margin: 10px 0 14px;
  position: relative;
  overflow:hidden;
}
.mr2-divider-anim::after{
  content:"";
  position:absolute; top:0; left:-30%;
  width:30%; height:100%;
  background: rgba(255,255,255,.25);
  filter: blur(6px);
  animation: mr2Sweep 2.2s linear infinite;
}
@keyframes mr2Sweep{
  0%{ left:-30%; }
  100%{ left:120%; }
}
/* =========================
   Manage Applications - Dashboard Feel
   ========================= */
.mr2-kpi{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
@media (max-width: 980px){ .mr2-kpi{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .mr2-kpi{ grid-template-columns: 1fr; } }

.mr2-kpi-card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 14px;
  transition: transform .18s ease, filter .18s ease;
  cursor: pointer;
}
.mr2-kpi-card:hover{ transform: translateY(-2px); filter: brightness(1.04); }
.mr2-kpi-kicker{ font-size: 12px; font-weight: 900; color: rgba(255,255,255,.78); }
.mr2-kpi-value{ margin-top: 6px; font-size: 22px; font-weight: 950; color:#fff; }
.mr2-kpi-sub{ margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.72); }

.mr2-kpi-warn{ border-color: rgba(242,180,0,.55); background: rgba(242,180,0,.07); }
.mr2-kpi-good{ border-color: rgba(60,199,115,.45); background: rgba(60,199,115,.06); }
.mr2-kpi-bad { border-color: rgba(255, 90, 90, .55); background: rgba(255, 90, 90, .06); }

@keyframes mr2Pulse {
  0% { box-shadow: 0 0 0 0 rgba(242,180,0,.22); }
  70% { box-shadow: 0 0 0 16px rgba(242,180,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(242,180,0,0); }
}
.mr2-attention{ animation: mr2Pulse 1.6s ease-out infinite; }

/* Status chips row */
.mr2-chiprow{ display:flex; flex-wrap:wrap; gap:10px; margin: 12px 0 6px; }
.mr2-chip2{
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color:#fff;
  font-weight: 900;
  text-decoration:none;
}
.mr2-chip2:hover{ filter: brightness(1.06); }
.mr2-chip2.is-active{ border-color: rgba(242,180,0,.70); background: rgba(242,180,0,.10); color:#111; }

/* Table improvements */
.mr2-table th{ color: rgba(255,255,255,.78); font-weight: 900; }
.mr2-row-need{ background: rgba(242,180,0,.06); }
.mr2-row-bad { background: rgba(255,90,90,.06); }
.mr2-row-good{ background: rgba(60,199,115,.06); }

.mr2-actions-mini{
  display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap;
}
.mr2-btn-mini{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 8px 12px; border-radius: 12px;
  font-weight: 900; text-decoration:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color:#fff;
  white-space:nowrap;
}
.mr2-btn-mini:hover{ filter: brightness(1.06); }
.mr2-btn-mini-primary{ background: #f2b400; border-color:#f2b400; color:#111; }
.mr2-btn-mini-outline{ background: transparent; border-color: rgba(242,180,0,.7); }


/* Affordability dots */
.mr2-dot{
  display:inline-block;
  width:10px; height:10px;
  border-radius:999px;
  margin-right:8px;
  vertical-align:middle;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.mr2-dot-good{ background: rgba(60,199,115,1); }
.mr2-dot-warn{ background: rgba(242,180,0,1); }
.mr2-dot-bad { background: rgba(255,90,90,1); }

.mr2-mini{
  display:inline-block;
  font-size:12px;
  font-weight:900;
  color: rgba(255,255,255,.78);
  margin-top:4px;
}

/* Overdue badge */
.mr2-overdue{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(242,180,0,.55);
  background: rgba(242,180,0,.10);
  color:#fff;
  font-weight: 950;
  font-size: 12px;
}
/* =========================
   MANAGE APPLICATIONS (SCOPED)
   Safe: only affects pages wrapped with .mr2-manage
   ========================= */

.mr2-manage .mr2-wrap{ padding: 18px 16px; }

/* Make filters responsive + prevent stretch */
.mr2-manage .mr2-filter-grid{
  display:grid;
  gap:12px;
  grid-template-columns: 2fr 1fr 1fr auto;
  align-items:end;
}

@media (max-width: 980px){
  .mr2-manage .mr2-filter-grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px){
  .mr2-manage .mr2-filter-grid{
    grid-template-columns: 1fr;
  }
}

/* Filter action buttons never stretch */
.mr2-manage .mr2-filter .mr2-btn{
  width:auto;
  white-space:nowrap;
}

/* KPI tiles: keep strong visual separation + subtle animation */
.mr2-manage .mr2-kpi-card{
  position:relative;
  overflow:hidden;
}

.mr2-manage .mr2-kpi-card::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 55%);
  opacity:.55;
  transform: rotate(8deg);
  pointer-events:none;
}

/* Chips: better tap targets on mobile */
.mr2-manage .mr2-chip2{
  padding: 10px 14px;
}

/* Table: stop columns from looking “wide and empty” */
.mr2-manage .mr2-table{
  table-layout: fixed;
  width:100%;
}

.mr2-manage .mr2-table th,
.mr2-manage .mr2-table td{
  vertical-align: top;
}

.mr2-manage .mr2-table td{
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Ensure action buttons don’t create huge rows */
.mr2-manage .mr2-actions-mini{
  justify-content:flex-end;
  gap:8px;
}

.mr2-manage .mr2-btn-mini{
  flex: 0 0 auto;
}

/* Improve “Needs action” visibility (but still clean) */
.mr2-manage .mr2-row-need td:first-child strong{
  position:relative;
}

.mr2-manage .mr2-row-need td:first-child strong::after{
  content:"";
  display:inline-block;
  width:8px;height:8px;border-radius:999px;
  background: rgba(242,180,0,1);
  margin-left:8px;
  box-shadow: 0 0 0 3px rgba(242,180,0,.15);
}

/* SLA overdue pulse (subtle) */
@keyframes mr2OverduePulse {
  0% { box-shadow: 0 0 0 0 rgba(242,180,0,.18); }
  70% { box-shadow: 0 0 0 14px rgba(242,180,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(242,180,0,0); }
}

.mr2-manage .mr2-overdue{
  animation: mr2OverduePulse 2.2s ease-out infinite;
}

/* ---------- MOBILE: replace table look with “dashboard rows” ---------- */
/* On small screens, make each row behave like a card block */
@media (max-width: 820px){
  .mr2-manage .mr2-table thead{ display:none; }

  .mr2-manage .mr2-table,
  .mr2-manage .mr2-table tbody,
  .mr2-manage .mr2-table tr,
  .mr2-manage .mr2-table td{
    display:block;
    width:100%;
  }

  .mr2-manage .mr2-table tr{
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    border-radius: 16px;
    padding: 12px;
    margin: 0 0 12px;
    overflow:hidden;
  }

  .mr2-manage .mr2-table td{
    padding: 8px 0 !important;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .mr2-manage .mr2-table td:first-child{
    border-top:0;
    padding-top: 0 !important;
  }

  /* Put actions at the bottom in a neat row */
  .mr2-manage .mr2-actions-mini{
    justify-content:flex-start;
  }

  /* Make affordability + SLA sit side by side */
  .mr2-manage .mr2-table td:nth-last-child(2),
  .mr2-manage .mr2-table td:last-child{
    display:inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 10px !important;
  }

  .mr2-manage .mr2-table td:last-child{ margin-left:16px; }
}

/* Smallest screens: stack affordability + SLA */
@media (max-width: 520px){
  .mr2-manage .mr2-table td:nth-last-child(2),
  .mr2-manage .mr2-table td:last-child{
    width: 100%;
    margin-left:0;
  }
}
/* =========================
   MANAGE APPLICATIONS - FIXES (SCOPED)
   ========================= */

/* Active chip: keep readable on dark background */
.mr2-manage .mr2-chip2.is-active{
  color: #fff !important;                 /* was #111 */
  border-color: rgba(242,180,0,.80);
  background: rgba(242,180,0,.14);
}

/* Hover states should not flip text to black */
.mr2-manage .mr2-chip2:hover{
  color:#fff;
}

/* Mini buttons: force readable text always */
.mr2-manage .mr2-btn-mini,
.mr2-manage .mr2-btn-mini:visited{
  color:#fff;
}

/* Primary mini button should stay dark text ONLY because it is gold */
.mr2-manage .mr2-btn-mini-primary{
  color:#111 !important;
}
/* Table column spacing fix (desktop) */
.mr2-manage .mr2-table{
  table-layout: auto !important;   /* override fixed */
}

/* Give the last columns breathing room */
.mr2-manage .mr2-table th:nth-child(7),
.mr2-manage .mr2-table td:nth-child(7){
  min-width: 220px; /* actions column */
  white-space: nowrap;
}

.mr2-manage .mr2-table th:nth-child(8),
.mr2-manage .mr2-table td:nth-child(8){
  min-width: 170px; /* affordability */
}

.mr2-manage .mr2-table th:nth-child(9),
.mr2-manage .mr2-table td:nth-child(9){
  min-width: 150px; /* SLA */
}

/* Make headers not run together */
.mr2-manage .mr2-table th{
  white-space: nowrap;
  padding-right: 16px;
}
/* Ref + tenant columns: prevent ugly wraps */
.mr2-manage .mr2-table td:nth-child(1){
  min-width: 160px;
}

.mr2-manage .mr2-table td:nth-child(2){
  min-width: 220px;
}

.mr2-manage .mr2-table td:nth-child(2) .mr2-muted{
  display:block;
  max-width: 220px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Keep actions in one line and compact */
.mr2-manage .mr2-actions-mini{
  gap:8px;
  flex-wrap: nowrap;      /* prevents pushing down weirdly */
}

@media (max-width: 980px){
  .mr2-manage .mr2-actions-mini{
    flex-wrap: wrap;      /* allow wrap on smaller screens */
  }
}
/* =========================
   Manage Applications - Card Grid (NO SCROLL)
   Scoped via .mr2-manage
   ========================= */

.mr2-manage .mr2-app-grid-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 980px){
  .mr2-manage .mr2-app-grid-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .mr2-manage .mr2-app-grid-cards{ grid-template-columns: 1fr; }
}

.mr2-manage .mr2-app-card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}

.mr2-manage .mr2-app-card:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
  border-color: rgba(242,180,0,.35);
}

.mr2-manage .mr2-app-card.is-attn{
  border-color: rgba(242,180,0,.55);
  background: rgba(242,180,0,.06);
}

.mr2-manage .mr2-app-toprow{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.mr2-manage .mr2-app-ref{
  font-weight: 950;
  font-size: 14px;
  letter-spacing: .2px;
}

.mr2-manage .mr2-app-flag{
  margin-top: 4px;
  font-weight: 900;
  font-size: 12px;
  opacity: .85;
}

.mr2-manage .mr2-app-prop-title{
  font-weight: 900;
  margin-bottom: 2px;
}

.mr2-manage .mr2-app-prop{
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin: 10px 0;
}

.mr2-manage .mr2-app-tenant-name{
  font-weight: 900;
}

.mr2-manage .mr2-app-tenant-email{
  opacity:.78;
  max-width: 100%;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mr2-manage .mr2-app-metas{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 12px 0 10px;
}

.mr2-manage .mr2-app-meta{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 14px;
  padding: 10px 12px;
}

.mr2-manage .mr2-app-meta-k{
  font-size: 12px;
  font-weight: 900;
  opacity: .75;
  margin-bottom: 6px;
}

.mr2-manage .mr2-app-meta-v{
  font-weight: 800;
}

.mr2-manage .mr2-app-actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Fix: pending badge text should not be black */
.mr2-manage .mr2-badge-warn{
  color:#fff !important;               /* overrides earlier "color:#111" */
}

/* Ensure chips active stays readable */
.mr2-manage .mr2-chip2.is-active{
  color:#fff !important;
}
/* =========================
   Manage Applications - Card Grid (NO SCROLL)
   Scoped via .mr2-manage
   ========================= */

.mr2-manage .mr2-app-grid-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 980px){
  .mr2-manage .mr2-app-grid-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .mr2-manage .mr2-app-grid-cards{ grid-template-columns: 1fr; }
}

.mr2-manage .mr2-app-card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}

.mr2-manage .mr2-app-card:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
  border-color: rgba(242,180,0,.35);
}

.mr2-manage .mr2-app-card.is-attn{
  border-color: rgba(242,180,0,.55);
  background: rgba(242,180,0,.06);
}

.mr2-manage .mr2-app-toprow{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.mr2-manage .mr2-app-ref{
  font-weight: 950;
  font-size: 14px;
  letter-spacing: .2px;
}

.mr2-manage .mr2-app-flag{
  margin-top: 4px;
  font-weight: 900;
  font-size: 12px;
  opacity: .85;
}

.mr2-manage .mr2-app-prop-title{
  font-weight: 900;
  margin-bottom: 2px;
}

.mr2-manage .mr2-app-prop{
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin: 10px 0;
}

.mr2-manage .mr2-app-tenant-name{
  font-weight: 900;
}

.mr2-manage .mr2-app-tenant-email{
  opacity:.78;
  max-width: 100%;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mr2-manage .mr2-app-metas{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 12px 0 10px;
}

.mr2-manage .mr2-app-meta{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 14px;
  padding: 10px 12px;
}

.mr2-manage .mr2-app-meta-k{
  font-size: 12px;
  font-weight: 900;
  opacity: .75;
  margin-bottom: 6px;
}

.mr2-manage .mr2-app-meta-v{
  font-weight: 800;
}

.mr2-manage .mr2-app-actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Fix: pending badge text should not be black */
.mr2-manage .mr2-badge-warn{
  color:#fff !important;               /* overrides earlier "color:#111" */
}

/* Ensure chips active stays readable */
.mr2-manage .mr2-chip2.is-active{
  color:#fff !important;
}
/* =========================
   In-app Messages UI (safe additions)
   ========================= */
.mr2-msg{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 12px;
}
.mr2-msg-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.mr2-msg-staff{
  border-color: rgba(242,180,0,.35);
  background: rgba(242,180,0,.06);
}
.mr2-msg-tenant{
  border-color: rgba(29,78,216,.35);
  background: rgba(29,78,216,.08);
}
/* =========================
   FORM CONTROLS (Dark UI)
   Make textarea match input/select
   ========================= */

.mr2-field input,
.mr2-field select,
.mr2-field textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(48, 237, 10, 0.92);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* placeholder color */
.mr2-field input::placeholder,
.mr2-field textarea::placeholder {
  color: rgba(255,255,255,0.45);
}

/* focus state */
.mr2-field input:focus,
.mr2-field select:focus,
.mr2-field textarea:focus {
  border-color: rgba(255, 196, 0, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.14);
  background: rgba(255,255,255,0.055);
}

/* textarea specifics */
.mr2-field textarea {
  min-height: 110px;
  resize: vertical;            /* allow resize only up/down */
  line-height: 1.4;
}

/* helper text */
.mr2-help {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
}
/* =========================
   BADGES – readable on dark UI
   ========================= */

.mr2-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.06);
}

.mr2-badge-good { border-color: rgba(0,255,170,0.25); background: rgba(0,255,170,0.08); }
.mr2-badge-warn { border-color: rgba(255,196,0,0.30); background: rgba(255,196,0,0.10); }
.mr2-badge-info { border-color: rgba(70,160,255,0.28); background: rgba(70,160,255,0.10); }
.mr2-badge-bad  { border-color: rgba(255,90,90,0.30);  background: rgba(255,90,90,0.10); }

/* muted badge was probably too low contrast – boost it */
.mr2-badge-muted {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
}
/* =========================
   TOPBAR (Fix overlap)
   ========================= */

.mr2-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(8, 14, 28, 0.65);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mr2-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.mr2-nav-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mr2-nav-link {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 10px;
}

.mr2-nav-link:hover {
  background: rgba(255,255,255,0.06);
}

.mr2-nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0; /* allows text truncation */
  flex-wrap: nowrap;
}

.mr2-nav-meta {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

.mr2-nav-role {
  color: rgba(255,255,255,0.55);
  font-weight: 700;
  margin-left: 6px;
}

/* The pill must NEVER overlap buttons */
.mr2-nav-pill {
  flex: 0 1 auto;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;

  border: 1px solid rgba(0,255,170,0.25);
  background: rgba(0,255,170,0.10);
  color: rgba(255,255,255,0.92);
}

.mr2-logout {
  white-space: nowrap;
}

/* Responsive: stack right side if space is tight */
@media (max-width: 860px) {
  .mr2-topbar-inner { flex-wrap: wrap; }
  .mr2-nav-right { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .mr2-nav-meta { max-width: 100%; }
  .mr2-nav-pill { max-width: 100%; }
}
/* =========================
   PROPERTY IMAGE GRID (No broken layout)
   ========================= */

.mr2-img-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mr2-img-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  aspect-ratio: 16 / 10;
  position: relative;
}

.mr2-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mr2-img-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.65);
  font-weight: 800;
}

@media (max-width: 900px) {
  .mr2-img-grid { grid-template-columns: 1fr; }
  .mr2-img-card { aspect-ratio: 16 / 9; }
}
/* =========================
   OWNER ACTION HEADER FIX
   ========================= */

.mr2-owner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap; /* allows clean wrapping on small screens */
  margin-bottom: 10px;
}

.mr2-owner-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.mr2-owner-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Make sure badges never collapse or overlap */
.mr2-owner-badges .mr2-badge {
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
}

/* Mobile safety */
@media (max-width: 600px) {
  .mr2-owner-head {
    align-items: flex-start;
  }
}
/* =========================
   TOP NAV WRAP FIX (NO OVERLAP)
   ========================= */
.topnav{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;          /* critical */
  overflow:hidden;         /* prevents weird overlay */
}

.nav-user{
  white-space:nowrap;
  max-width:100%;
}

/* =========================
   OWNER ACTION HEADER FIX
   ========================= */
.mr2-owner-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;          /* critical */
  margin-bottom:10px;
}

.mr2-owner-title{
  margin:0;
  font-size:18px;
  font-weight:800;
}

.mr2-owner-badges{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;          /* critical */
  max-width:100%;
}

.mr2-owner-badges .mr2-badge{
  white-space:nowrap;
}

/* =========================
   OWNER ACTION TEXTAREA FIX
   ========================= */
.mr2-textarea{
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.14);
  color:#fff;
  border-radius:14px;
  padding:12px 12px;
  outline:none;
  resize:vertical;
  min-height:110px;
  font-size:14px;
  line-height:1.35;
}

.mr2-textarea::placeholder{
  color:rgba(255,255,255,0.55);
}

.mr2-textarea:focus{
  border-color:rgba(255, 196, 0, 0.75);
  box-shadow:0 0 0 3px rgba(255, 196, 0, 0.12);
}

/* =========================
   OWNER ACTION BUTTON ROW (NO CLASH)
   ========================= */
.mr2-owner-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;          /* critical */
}

@media (max-width: 520px){
  .mr2-owner-actions .mr2-btn{
    width:100%;
  }
}
/* =========================
   OWNER PANEL: CLUTTER-FREE HEADER
   ========================= */
.mr2-owner-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.mr2-owner-titlewrap{
  min-width:220px;
  flex:1 1 260px;
}

.mr2-owner-title{
  margin:0;
  font-size:18px;
  font-weight:800;
}

.mr2-owner-statusrow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  flex:0 1 260px;
}

.mr2-badge-compact{
  padding:6px 10px;
  font-size:12px;
  border-radius:999px;
  white-space:nowrap;
}

/* Small POPIA flag to avoid big badge stacking */
.mr2-mini-flag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04);
}

.mr2-mini-flag.is-ok{
  border-color: rgba(0,255,160,0.25);
}

.mr2-mini-flag.is-bad{
  border-color: rgba(255,80,80,0.25);
}

/* =========================
   ATTENTION STRIP (PULSE ANIMATION)
   ========================= */
.mr2-owner-attn{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  font-size:13px;
  border:1px solid rgba(255,196,0,0.28);
  background:rgba(255,196,0,0.10);
}

.mr2-owner-attn-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,196,0,0.95);
  box-shadow: 0 0 0 0 rgba(255,196,0,0.55);
  animation: mr2Pulse 1.2s infinite;
}

@keyframes mr2Pulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,196,0,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(255,196,0,0.00); }
  100% { box-shadow: 0 0 0 0 rgba(255,196,0,0.00); }
}

/* =========================
   PROGRESS BAR (PERCENTAGE)
   ========================= */
.mr2-progress{
  margin:10px 0 14px;
  padding:10px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  border-radius:14px;
}

.mr2-progress-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

.mr2-progress-bar{
  width:100%;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  overflow:hidden;
}

.mr2-progress-fill{
  height:100%;
  border-radius:999px;
  background:rgba(255,196,0,0.95);
  transition: width 280ms ease;
}

.mr2-progress-steps{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color: rgba(255,255,255,0.55);
}

.mr2-progress-steps span.is-done{
  color: rgba(255,255,255,0.95);
  font-weight:700;
}

/* =========================
   TEXTAREA LOOK (CONSISTENT)
   ========================= */
.mr2-textarea{
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.14);
  color:#fff;
  border-radius:14px;
  padding:12px 12px;
  outline:none;
  resize:vertical;
  min-height:110px;
  font-size:14px;
  line-height:1.35;
}

.mr2-textarea::placeholder{
  color:rgba(255,255,255,0.55);
}

.mr2-textarea:focus{
  border-color:rgba(255, 196, 0, 0.75);
  box-shadow:0 0 0 3px rgba(255, 196, 0, 0.12);
}

/* =========================
   OWNER ACTION BUTTONS (STACK ON SMALL)
   ========================= */
.mr2-owner-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width: 520px){
  .mr2-owner-actions .mr2-btn{
    width:100%;
  }
}
/* =========================
   TENANT: MY APPLICATIONS (CARDS)
   ========================= */
.mr2-tenant-apps{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}

@media (max-width: 900px){
  .mr2-tenant-apps{ grid-template-columns: 1fr; }
}

.mr2-tenant-card{
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);
  border-radius:18px;
  padding:14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

.mr2-tenant-card.is-attn{
  border-color: rgba(255,196,0,0.25);
}

.mr2-tenant-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.mr2-tenant-ref{
  font-weight:800;
  font-size:14px;
}

.mr2-tenant-status{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.mr2-tenant-prop{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.08);
}

.mr2-tenant-prop-title{
  font-weight:800;
  font-size:15px;
}

.mr2-tenant-meta{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

@media (max-width: 700px){
  .mr2-tenant-meta{ grid-template-columns: 1fr; }
}

.mr2-tenant-meta-box{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.02);
  border-radius:14px;
  padding:10px;
}

.mr2-tenant-meta-k{
  font-size:12px;
  color:rgba(255,255,255,0.62);
  margin-bottom:6px;
}

.mr2-tenant-meta-v{
  font-size:14px;
}

.mr2-note{
  display:block;
  color: rgba(255,255,255,0.92);
}

.mr2-tenant-progress{
  margin-top:12px;
}

/* Small button for tenant actions */
.mr2-btn-sm{
  padding:8px 12px;
  border-radius:12px;
  font-size:13px;
}

/* Bottom actions row */
.mr2-tenant-actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}

.mr2-tenant-good{
  color: rgba(120, 255, 190, 0.95);
  font-weight:700;
}

.mr2-tenant-bad{
  color: rgba(255, 140, 140, 0.95);
  font-weight:700;
}

/* Tenant "In progress" pill + pulse */
.mr2-tenant-attn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,196,0,0.28);
  background:rgba(255,196,0,0.10);
  white-space:nowrap;
}

.mr2-tenant-attn-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,196,0,0.95);
  box-shadow: 0 0 0 0 rgba(255,196,0,0.55);
  animation: mr2Pulse 1.2s infinite;
}
/* =========================
   NAV FIX: prevent top-right overlap
   ========================= */
.mr-nav{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding-right:14px;
}

.mr-nav-left{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  min-width: 220px;
}

.mr-nav-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width: 520px;
}

.nav-user{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  white-space:nowrap;
}

@media (max-width: 900px){
  .mr-nav-right{
    margin-left: 0;
    width: 100%;
    justify-content:flex-start;
  }
  .nav-user{
    white-space:normal;
    line-height:1.2;
  }
}

/* =========================
   BADGE FIX: prevent badge overlap anywhere
   ========================= */
.mr2-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Compact badge used in cards */
.mr2-badge-compact{
  padding:6px 10px;
  font-size:12px;
  border-radius:999px;
}

/* =========================
   OWNER ACTIONS HEADER FIX
   (Approved + POPIA should NEVER overlap)
   ========================= */
.mr2-owner-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.mr2-owner-title{
  margin:0;
}

.mr2-owner-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  max-width: 100%;
}

@media (max-width: 520px){
  .mr2-owner-badges{
    width:100%;
    justify-content:flex-start;
  }
}

/* =========================
   (Optional) attention pulse for approved/important
   ========================= */
.mr2-attention{
  animation: mr2Glow 1.2s infinite;
}

@keyframes mr2Glow{
  0%   { box-shadow: 0 0 0 rgba(255,196,0,0.0); }
  50%  { box-shadow: 0 0 18px rgba(255,196,0,0.28); }
  100% { box-shadow: 0 0 0 rgba(255,196,0,0.0); }
}
/* ==========================================================
   FINAL OVERRIDES (must be LAST in file)
   Fix: badge/pill clustering + topbar overlap + owner header
   ========================================================== */

/* ---------- GLOBAL: stop badge/pills from collapsing ---------- */
.mr2-badge,
.mr2-badge-compact,
.mr2-openchip,
.mr2-mini-flag,
.mr2-nav-pill,
.nav-user{
  position: static !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  /* prevents crushing */
  white-space: nowrap !important;
  line-height: 1.15 !important;
  height: auto !important;

  /* prevents overflow mess */
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ---------- TOP NAV: stop right side from squeezing ---------- */
.topnav{
  display:flex !important;
  align-items:center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
}

.nav-spacer{ flex: 1 1 auto !important; }

.nav-user{
  max-width: 420px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.04) !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
}

/* Small screens: stack neatly */
@media (max-width: 860px){
  .nav-user{ max-width: 100% !important; white-space: normal !important; }
}

/* ---------- OWNER ACTION PANEL HEADER: clean row (no overlap) ---------- */
.mr2-owner-header{
  display:flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.mr2-owner-titlewrap{
  display:flex !important;
  align-items:flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.mr2-owner-statusrow{
  display:flex !important;
  align-items:center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  width:100% !important;
}

/* Mobile: align left so it never jams */
@media (max-width: 720px){
  .mr2-owner-statusrow{ justify-content: flex-start !important; }
}

/* ---------- Make badges consistent sizing ---------- */
.mr2-badge-compact,
.mr2-mini-flag{
  padding: 7px 12px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}

/* ---------- If you use the progress bar, keep it tidy ---------- */
.mr2-progress{
  margin: 10px 0 14px !important;
  padding: 12px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 14px !important;
}

.mr2-progress-top{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}

/* ---------- Strong “Needs attention” pulse for admin ---------- */
.mr2-owner-attn{
  animation: mr2OwnerAttention 1.3s ease-in-out infinite !important;
}

@keyframes mr2OwnerAttention{
  0%   { box-shadow: 0 0 0 0 rgba(255,196,0,.35); }
  70%  { box-shadow: 0 0 0 14px rgba(255,196,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,196,0,0); }
}
/* ==========================================================
   UI POLISH (premium look)
   Put this AFTER the FINAL OVERRIDES block
   ========================================================== */

/* ---------- TOP NAV: identity chip looks premium ---------- */
.nav-user{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(8px);
}

.nav-user::before{
  content:"●";
  color: rgba(0,255,160,.85);
  font-size: 14px;
  line-height: 1;
}

.nav-user strong{
  font-weight: 900;
}

.nav-user .role,
.nav-user small{
  opacity:.65;
  font-weight: 700;
}

/* ---------- Owner Actions: clean “panel header” ---------- */
.mr2-action-panel{
  border-radius: 18px !important;
  padding: 16px !important;
}

.mr2-owner-header{
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.mr2-owner-title{
  font-size: 18px !important;
  letter-spacing: .2px;
}

/* Status row: make it look intentional */
.mr2-owner-statusrow{
  margin-top: 4px;
}

/* Smaller, crisp badges */
.mr2-badge-compact{
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.05) !important;
  padding: 7px 12px !important;
  font-weight: 950 !important;
}

.mr2-mini-flag{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.14) !important;
  font-weight: 900;
}

/* Make POPIA “OK” feel positive without being loud */
.mr2-mini-flag.is-ok{
  border-color: rgba(0,255,160,.22) !important;
  box-shadow: 0 0 0 3px rgba(0,255,160,.06);
}

/* Make POPIA “BAD” stand out */
.mr2-mini-flag.is-bad{
  border-color: rgba(255,90,90,.30) !important;
  box-shadow: 0 0 0 3px rgba(255,90,90,.06);
}

/* ---------- Attention: ONLY when needed (admin eyes) ---------- */
.mr2-owner-attn{
  font-weight: 900;
  letter-spacing: .2px;
}

/* Optional: add a subtle shake every few pulses (attention grab) */
@keyframes mr2Nudge {
  0%, 80%, 100% { transform: translateX(0); }
  86% { transform: translateX(-2px); }
  92% { transform: translateX(2px); }
  98% { transform: translateX(-1px); }
}

.mr2-owner-attn{
  animation:
    mr2OwnerAttention 1.3s ease-in-out infinite,
    mr2Nudge 2.6s ease-in-out infinite !important;
}

/* ---------- Progress bar: more “dashboard” ---------- */
.mr2-progress{
  padding: 12px !important;
}

.mr2-progress-bar{
  height: 12px !important;
}

.mr2-progress-steps{
  margin-top: 10px !important;
  font-size: 12px !important;
  letter-spacing: .1px;
}

.mr2-progress-steps span{
  opacity: .6;
}

.mr2-progress-steps span.is-done{
  opacity: 1;
  font-weight: 900;
}

/* Make the fill animate slightly when it appears */
.mr2-progress-fill{
  transition: width 420ms ease !important;
}
/* =========================================================
   UI HOTFIX (Properties):
   1) Stop "Available" badge overlapping title
   2) Make number inputs look clean on dark UI
   ========================================================= */

/* 1) Badge must ONLY position inside the image wrapper */
.mr2-card .mr2-card-imgwrap {
  position: relative !important;
  height: 220px !important;
  overflow: hidden !important;
}

/* Ensure image always fills */
.mr2-card .mr2-card-imgwrap .mr2-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Pin price + badge inside image wrapper */
.mr2-card .mr2-card-imgwrap .mr2-price {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 5 !important;
}

.mr2-card .mr2-card-imgwrap .mr2-badge {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 5 !important;
}

/* Extra safety: keep body away from image area */
.mr2-card .mr2-card-body {
  padding-top: 16px !important;
}

/* 2) Number inputs on dark theme: remove ugly spinners + improve visibility */
.mr2-filter .mr2-field input[type="number"] {
  color: #ffffff !important;
  background: rgba(10,20,40,.35) !important;
}

/* Chrome/Edge/Safari spinners off */
.mr2-filter .mr2-field input[type="number"]::-webkit-outer-spin-button,
.mr2-filter .mr2-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Firefox spinners off */
.mr2-filter .mr2-field input[type="number"] {
  -moz-appearance: textfield !important;
}
/* ===== Available badge (improved visibility) ===== */
.mr2-badge-ok {
  background: linear-gradient(
    135deg,
    #6fe3a1,
    #3fbf7f
  ); /* light green */
  color: #0b2e1a;          /* dark green text */
  font-weight: 900;
  letter-spacing: .3px;

  /* subtle elevation so it pops on images */
  box-shadow:
    0 4px 10px rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(255,255,255,.35);
}

/* Optional: small pulse on hover for clarity (non-animated by default) */
.mr2-card:hover .mr2-badge-ok {
  filter: brightness(1.05);
}