/* ============================================================
   App shell redesign — re-themes the logged-in experience (listings,
   listing detail, my listings, new/edit listing, saved homes, messaging,
   roommates) to match the cream / Cormorant Garamond + Inter / olive
   brand established on the landing page and auth pages.

   How this works: static/css/styles.css already routes almost every
   rule through CSS custom properties (--forest, --lime, --mint, --fd,
   --fb, --border, --sh-sm, --r-lg, …) instead of hardcoded values —
   including inline style="...var(--forest)..." attributes baked into
   the templates. Redefining those properties once, scoped under
   .app-redesign (the new body class), re-themes the entire shell —
   sidebar, cards, buttons, badges, chat bubbles, forms — without
   touching a single template. Only the handful of truly hardcoded
   values (#fff, literal hex) below need a direct selector override.
   ============================================================ */

.app-redesign{
  --white:#f8f6ef; --bg:#f2eee5; --surface:#f8f6ef; --surface-alt:#ede8dd;
  --mint:#ede8dd; --mint-soft:#f2eee5;
  --lime:#8e9c75; --lime-dark:#7c8a64;
  --forest:#1c2016; --forest-800:#12140f; --forest-600:#2a3322;
  --green:#7c8a64;
  --text:#171512; --text-2:rgba(23,21,18,.62); --text-3:rgba(23,21,18,.42);
  --on-dark:#f2eee5; --on-dark-2:rgba(242,238,229,.62); --on-lime:#171512;
  --border:rgba(23,21,18,.08); --border-2:rgba(23,21,18,.16);
  --danger:#b3543f; --warning:#a8702f; --star:#c9a227;
  --r-sm:10px; --r-md:14px; --r-lg:22px; --r-xl:28px; --pill:999px;
  --sh-sm:0 4px 14px rgba(23,21,18,.07);
  --sh:0 14px 34px rgba(23,21,18,.10);
  --sh-lg:0 30px 70px rgba(23,21,18,.16);
  --fd:'Inter',system-ui,sans-serif;
  --fb:'Inter',system-ui,sans-serif;
}

/* ---------- Display type — Cormorant Garamond for headings, prices,
   stat values and the sidebar wordmark; everything else (buttons,
   nav, badges, card titles) stays Inter, matching the landing page. ---------- */
.app-redesign h1,
.app-redesign h2,
.app-redesign h3,
.app-redesign h4{
  font-family:'Cormorant Garamond', serif; font-weight:500; letter-spacing:-.01em;
}
.app-redesign .logo .wm{ font-family:'Cormorant Garamond', serif; font-weight:500; font-size:21px; }
.app-redesign .prop-card .price{ font-family:'Cormorant Garamond', serif; font-weight:600; font-size:17px; }
.app-redesign .stat .v{ font-family:'Cormorant Garamond', serif; font-weight:500; }

/* ---------- Buttons: one filled style (ink/cream), matching the
   landing page — there is no separate "lime" primary button in this
   brand, so .btn-primary and .btn-dark render identically. ---------- */
.app-redesign .btn-primary{ background:var(--forest); color:var(--on-dark); }
.app-redesign .btn-primary:hover{ background:#2a2621; }
.app-redesign .btn{ font-weight:500; }

/* ---------- Hardcoded (non-variable) colors in styles.css that need
   a direct override to pick up the cream theme. ---------- */
.app-redesign .topbar{ background:var(--white); border-bottom:1px solid var(--border); }
.app-redesign .msg .list{ background:var(--white); }
.app-redesign .bubble.them{ background:var(--white); border-color:var(--border); }
.app-redesign .prop-card .fav{ background:var(--white); }
.app-redesign .badge-warn{ background:#f3e6da; color:var(--warning); }
.app-redesign .drawer-backdrop{ background:rgba(23,21,18,.5); }
.app-redesign .sidebar.open{ box-shadow:0 0 60px rgba(23,21,18,.4); }

/* ---------- Sidebar polish — subtle depth to match the dark ink
   panels used elsewhere in the brand (auth page, pricing card). ---------- */
.app-redesign .sidebar{
  background:linear-gradient(165deg, #202519 0%, #171a12 100%);
}
.app-redesign .sidebar .snav a{ transition:background .15s ease, color .15s ease; }

/* ---------- Verified badge + focus ring accent ---------- */
.app-redesign :focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }

/* ---------- Radio / checkbox groups on Django-rendered forms.
   Django 5's default RadioSelect/CheckboxSelectMultiple render each
   option as <div><label><input>…text</label></div>, not <ul><li> —
   targeting "label with an input as its first child" catches that
   pattern regardless of the widget's own class name, while leaving
   single BooleanField checkboxes (label and input as siblings, per
   partials/formfields.html) untouched. ---------- */
.app-redesign .form .fld label:has(> input[type=radio]),
.app-redesign .form .fld label:has(> input[type=checkbox]){
  display:inline-flex; align-items:center; gap:8px; font-weight:500; color:var(--text);
  background:var(--surface-alt); border:1px solid var(--border); padding:9px 13px;
  border-radius:var(--pill); cursor:pointer; margin:4px 6px 0 0;
}
.app-redesign .form .fld label:has(> input[type=radio]:checked),
.app-redesign .form .fld label:has(> input[type=checkbox]:checked){
  background:var(--forest); color:var(--on-dark); border-color:var(--forest);
}

/* ---------- Property card: slightly warmer hover lift, matching the
   landing page's card grad-border feel. ---------- */
.app-redesign .prop-card{ transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.app-redesign .prop-card:hover{ transform:translateY(-4px); box-shadow:var(--sh); }

/* ---------- Chat bubble: ink instead of near-black forest, unchanged
   shape — just the themed variable, called out here for clarity. ---------- */
.app-redesign .bubble.me{ background:var(--forest); color:var(--on-dark); }

/* ---------- Note / info banner: sage-tinted, matching the landing
   page's note/info card treatment. ---------- */
.app-redesign .note{ background:#eef1e8; color:var(--forest); }
.app-redesign .note .ic{ color:var(--green); }

/* ============================================================
   Listings page — horizontal filter bar + rich property cards.
   Structure and interaction ported from the reference design at
   drentals.ng/listings/ (dark glassmorphism + emerald accent);
   every color below is re-mapped to the cream/ink/olive brand
   instead. Class names kept identical to the reference on purpose.
   ============================================================ */

/* FILTERS BAR — horizontal, sits above the grid */
.app-redesign .filters-section{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:24px; margin-bottom:32px; box-shadow:var(--sh-sm);
}
.app-redesign .filters-container{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:18px;
}
.app-redesign .filter-group{ display:flex; flex-direction:column; gap:8px; }
.app-redesign .filter-group label{
  font-family:'Inter', sans-serif; font-size:12.5px; font-weight:600; color:var(--text-2);
  display:flex; align-items:center; gap:6px;
}
.app-redesign .filter-group label .ic{ width:14px; height:14px; color:var(--green); }
.app-redesign .filter-group select,
.app-redesign .filter-group input{
  padding:12px 14px; background:var(--surface-alt); border:1px solid var(--border);
  border-radius:var(--r-md); color:var(--text); font-size:14px; font-family:'Inter', sans-serif;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.app-redesign .filter-group select:focus,
.app-redesign .filter-group input:focus{ border-color:var(--lime); box-shadow:0 0 0 3px rgba(142,156,117,.2); }
.app-redesign .filter-actions{ display:flex; gap:12px; align-items:flex-end; }
.app-redesign .apply-filters{
  padding:12px 24px; background:var(--forest); color:var(--on-dark); border:none;
  border-radius:var(--r-md); font-weight:600; font-family:'Inter', sans-serif; cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.app-redesign .apply-filters:hover{ background:#2a2621; transform:translateY(-2px); }
.app-redesign .reset-filters{
  padding:12px 24px; background:var(--surface-alt); color:var(--text); border:1px solid var(--border);
  border-radius:var(--r-md); font-weight:600; font-family:'Inter', sans-serif; cursor:pointer;
  text-align:center; transition:background .2s ease;
}
.app-redesign .reset-filters:hover{ background:var(--border-2); }

/* LISTINGS HEADER — count + sort */
.app-redesign .listings-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--border);
}
.app-redesign .listings-count{ font-size:15px; color:var(--text-2); }
.app-redesign .sort-select{
  padding:10px 14px; background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-md); color:var(--text); font-size:14px; font-family:'Inter', sans-serif;
}

/* GRID */
.app-redesign .listings-grid{
  display:grid; grid-template-columns:1fr; gap:26px; margin-bottom:50px;
}
@media(min-width:640px){ .app-redesign .listings-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(min-width:1080px){ .app-redesign .listings-grid{ grid-template-columns:repeat(3, 1fr); } }
@media(min-width:1400px){ .app-redesign .listings-grid{ grid-template-columns:repeat(4, 1fr); } }

/* PROPERTY CARD */
.app-redesign .property-card{
  position:relative; background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.app-redesign .property-card:hover{
  transform:translateY(-6px); box-shadow:var(--sh); border-color:var(--border-2);
}
.app-redesign .property-image{
  width:100%; height:200px; object-fit:cover; border-bottom:1px solid var(--border); display:block;
}
.app-redesign .property-badge{
  position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:5px;
  background:var(--green); color:#fff; padding:5px 12px; border-radius:var(--pill);
  font-size:11.5px; font-weight:600; font-family:'Inter', sans-serif;
}
.app-redesign .property-badge .ic{ width:13px; height:13px; }
.app-redesign .property-content{ padding:20px; flex-grow:1; display:flex; flex-direction:column; }
.app-redesign .property-header{ margin-bottom:12px; }
.app-redesign .property-title{
  font-family:'Cormorant Garamond', serif; font-size:20px; font-weight:600; line-height:1.3;
  margin-bottom:4px; color:var(--forest);
}
.app-redesign .property-location{
  color:var(--text-2); font-size:13px; display:flex; align-items:center; gap:5px;
}
.app-redesign .property-location .ic{ color:var(--green); width:14px; height:14px; flex:none; }
.app-redesign .property-description{
  color:var(--text-2); font-size:13.5px; line-height:1.5; margin-bottom:16px; flex-grow:1;
}
.app-redesign .property-features{ display:flex; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.app-redesign .feature{ display:flex; align-items:center; gap:5px; color:var(--text-2); font-size:12.5px; }
.app-redesign .feature .ic{ color:var(--green); width:14px; height:14px; }
.app-redesign .property-footer{
  display:flex; justify-content:space-between; align-items:center; margin-top:auto; gap:10px;
}
.app-redesign .property-price{
  font-family:'Cormorant Garamond', serif; font-size:19px; font-weight:600; color:var(--forest);
}
.app-redesign .property-price span{
  font-size:12px; color:var(--text-2); font-weight:400; font-family:'Inter', sans-serif;
}
.app-redesign .view-details{
  padding:9px 18px; background:var(--surface-alt); border:1px solid var(--border);
  border-radius:var(--pill); color:var(--text); font-weight:600; font-size:12.5px;
  font-family:'Inter', sans-serif; cursor:pointer; transition:background .2s ease, color .2s ease;
}
.app-redesign .view-details:hover{ background:var(--forest); color:var(--on-dark); }

/* THREE-DOT MENU */
.app-redesign .property-more-options{ position:absolute; top:14px; right:14px; z-index:10; }
.app-redesign .more-options-btn{
  width:30px; height:30px; border:none; border-radius:var(--pill); background:rgba(23,21,18,.55);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease; backdrop-filter:blur(4px);
}
.app-redesign .more-options-btn:hover{ background:rgba(23,21,18,.8); transform:scale(1.08); }
.app-redesign .more-options-btn .ic{ width:16px; height:16px; transform:rotate(90deg); }
.app-redesign .options-dropdown{
  position:absolute; top:38px; right:0; background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-md); padding:6px; min-width:170px; opacity:0; visibility:hidden;
  transform:translateY(-8px); transition:all .2s ease; box-shadow:var(--sh);
}
.app-redesign .property-more-options.active .options-dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.app-redesign .save-property-btn{
  width:100%; display:flex; align-items:center; gap:9px; padding:9px 12px; background:none;
  border:none; border-radius:var(--r-sm); color:var(--text); font-size:13.5px;
  font-family:'Inter', sans-serif; cursor:pointer; transition:background .15s ease;
}
.app-redesign .save-property-btn:hover{ background:var(--mint); }
.app-redesign .save-property-btn .ic{ width:15px; height:15px; color:var(--green); }
.app-redesign .save-property-btn.saved{ color:var(--green); font-weight:600; }
.app-redesign .save-property-btn.saved .ic{ fill:var(--green); }

/* ============================================================
   Property detail page — structure ported from the reference
   design at drentals.ng/listings/1 (dark glass + emerald), colors
   remapped to the cream/ink/olive brand. Classes prefixed "pd-"
   since the reference reused names (.property-title etc.) that
   already belong to the listing-card CSS above.
   ============================================================ */

/* HEADER */
.app-redesign .pd-header{ margin:0 0 28px; }
.app-redesign .pd-breadcrumb{
  display:flex; align-items:center; gap:8px; color:var(--text-2); font-size:13px; margin-bottom:20px; flex-wrap:wrap;
}
.app-redesign .pd-breadcrumb a{ color:var(--text-2); transition:color .2s ease; }
.app-redesign .pd-breadcrumb a:hover{ color:var(--forest); }
.app-redesign .pd-breadcrumb strong{ color:var(--forest); font-weight:600; }
.app-redesign .pd-title-section{
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;
}
.app-redesign .pd-title-wrapper{ flex:1; min-width:260px; }
.app-redesign .pd-title{
  font-family:'Cormorant Garamond', serif; font-size:clamp(28px, 4vw, 40px); font-weight:600;
  line-height:1.2; margin-bottom:10px; color:var(--forest);
}
.app-redesign .pd-location{ display:flex; align-items:center; gap:7px; color:var(--text-2); font-size:14px; }
.app-redesign .pd-location .ic{ color:var(--green); width:15px; height:15px; flex:none; }
.app-redesign .pd-status{
  display:inline-flex; align-items:center; gap:6px; background:var(--green); color:#fff;
  padding:6px 14px; border-radius:var(--pill); font-size:12.5px; font-weight:600; margin-top:12px;
}
.app-redesign .pd-price-section{ text-align:right; min-width:200px; }
.app-redesign .pd-price{ font-family:'Cormorant Garamond', serif; font-size:clamp(26px, 3.4vw, 36px); font-weight:600; color:var(--forest); }
.app-redesign .pd-price-period{ font-size:13.5px; color:var(--text-2); }

/* IMAGE CAROUSEL */
.app-redesign .pd-carousel{
  position:relative; width:100%; height:320px; border-radius:var(--r-lg); overflow:hidden;
  margin:26px 0 36px; background:var(--surface-alt); box-shadow:var(--sh-sm);
}
.app-redesign .pd-carousel-container{ width:100%; height:100%; position:relative; }
.app-redesign .pd-slide{
  width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; transition:opacity .5s ease;
}
.app-redesign .pd-slide.active{ opacity:1; }
.app-redesign .pd-slide-image{ width:100%; height:100%; object-fit:cover; display:block; }
.app-redesign .pd-video-overlay{
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  background:rgba(23,21,18,.25); cursor:pointer;
}
.app-redesign .pd-video-overlay .ic{ width:56px; height:56px; color:#fff; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.app-redesign .pd-carousel-nav{
  position:absolute; top:0; left:0; width:100%; height:100%; display:flex;
  justify-content:space-between; align-items:center; padding:0 16px; pointer-events:none;
}
.app-redesign .pd-carousel-btn{
  pointer-events:auto; background:rgba(23,21,18,.55); border:none; color:#fff; width:42px; height:42px;
  border-radius:var(--pill); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all .2s ease; z-index:10; backdrop-filter:blur(4px);
}
.app-redesign .pd-carousel-btn:hover{ background:rgba(23,21,18,.8); transform:scale(1.08); }
.app-redesign .pd-carousel-dots{
  position:absolute; bottom:16px; left:0; width:100%; display:flex; justify-content:center; gap:8px; z-index:10;
}
.app-redesign .pd-dot{
  width:9px; height:9px; background:rgba(255,255,255,.55); border-radius:50%; cursor:pointer; transition:all .2s ease;
}
.app-redesign .pd-dot.active{ background:#fff; transform:scale(1.25); }
@media(min-width:900px){ .app-redesign .pd-carousel{ height:460px; } }

/* VIDEO MODAL */
.app-redesign .pd-video-modal{
  display:none; position:fixed; inset:0; z-index:200; background:rgba(23,21,18,.85);
  align-items:center; justify-content:center; padding:20px;
}
.app-redesign .pd-video-modal.active{ display:flex; }
.app-redesign .pd-video-modal-content{ position:relative; width:100%; max-width:860px; }
.app-redesign .pd-video-modal-player{ width:100%; border-radius:var(--r-md); display:block; }
.app-redesign .pd-video-modal-close{
  position:absolute; top:-40px; right:0; background:none; border:none; color:#fff; font-size:30px;
  cursor:pointer; line-height:1;
}

/* CONTENT LAYOUT */
.app-redesign .pd-layout{ display:grid; grid-template-columns:1fr; gap:32px; margin-bottom:60px; }
@media(min-width:900px){ .app-redesign .pd-layout{ grid-template-columns:1fr 380px; } }

/* LEFT COLUMN */
.app-redesign .pd-main{
  background:var(--white); border-radius:var(--r-lg); padding:28px; border:1px solid var(--border); box-shadow:var(--sh-sm);
}
@media(min-width:900px){ .app-redesign .pd-main{ padding:38px; } }
.app-redesign .pd-section-title{
  font-family:'Cormorant Garamond', serif; font-size:22px; font-weight:600; margin-bottom:18px;
  display:flex; align-items:center; gap:10px; color:var(--forest);
}
.app-redesign .pd-section-title .ic{ color:var(--green); width:19px; height:19px; }
.app-redesign .pd-description{ color:var(--text-2); line-height:1.7; margin-bottom:36px; font-size:15px; }

.app-redesign .pd-features-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:16px; margin-bottom:36px;
}
.app-redesign .pd-feature{
  background:var(--surface-alt); border-radius:var(--r-md); padding:18px; display:flex; flex-direction:column;
  align-items:center; text-align:center; transition:transform .2s ease, background .2s ease;
}
.app-redesign .pd-feature:hover{ background:var(--mint); transform:translateY(-3px); }
.app-redesign .pd-feature-icon{ color:var(--green); margin-bottom:12px; }
.app-redesign .pd-feature-icon .ic{ width:24px; height:24px; }
.app-redesign .pd-feature-name{ font-weight:600; font-size:13.5px; color:var(--forest); margin-bottom:4px; }
.app-redesign .pd-feature-value{ color:var(--text-2); font-size:12.5px; }

.app-redesign .pd-amenities{ margin-bottom:36px; }
.app-redesign .pd-amenities-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
.app-redesign .pd-amenity{
  display:flex; align-items:center; gap:9px; padding:11px 14px; background:var(--surface-alt);
  border-radius:var(--r-sm); transition:background .2s ease; font-size:13.5px; color:var(--text);
}
.app-redesign .pd-amenity:hover{ background:var(--mint); }
.app-redesign .pd-amenity .ic{ color:var(--green); width:16px; height:16px; flex:none; }

.app-redesign .pd-rules{
  background:#eef1e8; border-left:4px solid var(--green); padding:20px 22px; border-radius:var(--r-md); margin-top:8px;
}
.app-redesign .pd-rules h3{ font-family:'Inter', sans-serif; font-size:14.5px; font-weight:700; color:var(--forest); display:flex; align-items:center; gap:8px; }
.app-redesign .pd-rules h3 .ic{ color:var(--green); width:16px; height:16px; }
.app-redesign .pd-rules-list{ list-style:none; margin-top:10px; }
.app-redesign .pd-rules-list li{ padding:6px 0; color:var(--text-2); display:flex; align-items:flex-start; gap:9px; font-size:13.5px; }
.app-redesign .pd-rules-list li .ic{ color:var(--green); width:15px; height:15px; margin-top:2px; flex:none; }

/* RIGHT COLUMN */
.app-redesign .pd-side{ display:flex; flex-direction:column; gap:18px; }
.app-redesign .pd-agent-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-sm);
}
.app-redesign .pd-agent-header{
  display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--border);
}
.app-redesign .pd-agent-avatar{
  width:52px; height:52px; background:var(--forest); color:var(--on-dark); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:19px; flex:none;
  font-family:'Cormorant Garamond', serif;
}
.app-redesign .pd-agent-name{ font-size:17px; font-weight:600; color:var(--forest); margin-bottom:3px; }
.app-redesign .pd-agent-role{ color:var(--green); font-size:12.5px; font-weight:600; }
.app-redesign .pd-agent-company{ color:var(--text-2); font-size:13px; display:flex; align-items:center; gap:7px; margin-bottom:14px; }
.app-redesign .pd-agent-company .ic{ color:var(--green); width:14px; height:14px; flex:none; }
.app-redesign .pd-agent-phone{
  margin-bottom:16px; padding:11px; background:#eef1e8; border-radius:var(--r-sm); text-align:center;
}
.app-redesign .pd-agent-phone a{ color:var(--forest); text-decoration:none; font-size:14.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.app-redesign .pd-agent-phone .ic{ width:15px; height:15px; color:var(--green); }
.app-redesign .pd-contact-buttons{ display:flex; flex-direction:column; gap:12px; }
.app-redesign .pd-contact-btn{
  padding:14px; border-radius:var(--r-md); font-weight:600; font-size:14px; cursor:pointer;
  transition:all .2s ease; border:none; display:flex; align-items:center; justify-content:center; gap:9px; text-decoration:none;
}
.app-redesign .pd-message-btn{ background:var(--forest); color:var(--on-dark); }
.app-redesign .pd-message-btn:hover{ transform:translateY(-2px); box-shadow:var(--sh); }

.app-redesign .pd-actions{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-sm);
}
.app-redesign .pd-actions h3{ font-size:14.5px; font-weight:700; color:var(--forest); margin-bottom:16px; display:flex; align-items:center; gap:8px; font-family:'Inter', sans-serif; }
.app-redesign .pd-actions h3 .ic{ color:var(--green); width:16px; height:16px; }
.app-redesign .pd-action-buttons{ display:flex; flex-direction:column; gap:12px; }
.app-redesign .pd-save-btn{
  padding:14px; background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--r-md);
  color:var(--text); font-weight:600; font-size:14px; cursor:pointer; transition:all .2s ease;
  display:flex; align-items:center; justify-content:center; gap:9px; text-decoration:none;
}
.app-redesign .pd-save-btn:hover{ background:var(--mint); transform:translateY(-2px); }
.app-redesign .pd-save-btn.saved{ background:var(--green); border-color:var(--green); color:#fff; }
.app-redesign .pd-save-btn.saved .ic{ fill:#fff; }
.app-redesign .pd-whatsapp-btn{ background:#25D366; border-color:#25D366; color:#fff; }
.app-redesign .pd-whatsapp-btn:hover{ background:#1fb856; transform:translateY(-2px); }

/* ============================================================
   AGENT / LANDLORD DASHBOARD
   The first screen a lister sees after signing in. Same cream
   surface + ink type as the rest of the shell; the only new
   shapes here are the stat row, the two-column split and the
   quick-action tiles.
   ============================================================ */

.app-redesign .dash-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:16px; margin-bottom:26px;
}
.app-redesign .dash-eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--green); margin:0 0 8px;
}
.app-redesign .dash-title{
  font-family:'Cormorant Garamond', serif; font-weight:500; letter-spacing:-.015em;
  font-size:32px; line-height:1.1; margin:0 0 8px;
}
@media(min-width:768px){ .app-redesign .dash-title{ font-size:38px; } }

.app-redesign .dash-alert{
  display:inline-flex; align-items:center; gap:9px; padding:11px 16px;
  border-radius:var(--pill); background:var(--forest); color:var(--on-dark);
  font-size:13.5px; white-space:nowrap;
}
.app-redesign .dash-alert .ic{ width:17px; height:17px; color:var(--lime); }

/* ---------- stat row ---------- */
.app-redesign .dash-stats{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-bottom:18px;
}
@media(min-width:900px){ .app-redesign .dash-stats{ grid-template-columns:repeat(4, 1fr); } }
.app-redesign .dash-stats .stat{
  border:1px solid var(--border); background:var(--white); border-radius:var(--r-lg); padding:20px;
}
.app-redesign .dash-stats .stat.dark{
  background:linear-gradient(165deg, #202519 0%, #171a12 100%); border-color:transparent;
}
.app-redesign .dash-stats .stat .v{ font-size:30px; line-height:1; }
.app-redesign .dash-stats .stat .sic{ margin-bottom:4px; }

.app-redesign .dash-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }

/* ---------- two-column split ---------- */
.app-redesign .dash-cols{ display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:24px; }
@media(min-width:1024px){ .app-redesign .dash-cols{ grid-template-columns:1.35fr 1fr; } }

.app-redesign .dash-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--border);
}
.app-redesign .dash-card-head h2{ font-size:22px; margin:0; }
.app-redesign .dash-more{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--green);
}
.app-redesign .dash-more .ic{ width:14px; height:14px; }

/* ---------- rows ---------- */
.app-redesign .dash-row{
  display:flex; align-items:center; gap:13px; padding:14px 0;
  border-bottom:1px solid var(--border);
}
.app-redesign .dash-row:last-child{ border-bottom:0; }
.app-redesign .dash-thumb{
  width:52px; height:52px; flex:none; border-radius:var(--r-sm);
  background:var(--surface-alt) center/cover no-repeat;
}
.app-redesign .dash-avatar{
  width:40px; height:40px; flex:none; border-radius:var(--pill);
  background:var(--surface-alt); color:var(--text-2);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:15px;
}
.app-redesign .dash-row-title{
  display:block; font-weight:500; font-size:14.5px; color:var(--forest); line-height:1.35;
}
.app-redesign a.dash-row:hover .dash-row-title,
.app-redesign .dash-row a.dash-row-title:hover{ color:var(--green); }
.app-redesign .dash-unread{
  flex:none; min-width:22px; height:22px; padding:0 7px; border-radius:var(--pill);
  background:var(--forest); color:var(--on-dark);
  display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:600;
}
@media(max-width:520px){ .app-redesign .hide-tight{ display:none; } }

/* ---------- empty states ---------- */
.app-redesign .dash-empty{ text-align:center; padding:34px 12px 18px; }
.app-redesign .dash-empty-ic{
  width:48px; height:48px; border-radius:var(--pill); background:var(--surface-alt);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.app-redesign .dash-empty-ic .ic{ width:22px; height:22px; color:var(--green); }
.app-redesign .dash-empty-title{
  font-family:'Cormorant Garamond', serif; font-size:21px; font-weight:500; margin:0 0 6px;
}
.app-redesign .dash-empty .btn{ margin-top:14px; }

/* ---------- quick actions ---------- */
.app-redesign .dash-actions{ display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:768px){ .app-redesign .dash-actions{ grid-template-columns:repeat(3, 1fr); } }
.app-redesign .dash-action{
  display:flex; align-items:center; gap:14px; padding:18px;
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.app-redesign .dash-action:hover{ transform:translateY(-3px); box-shadow:var(--sh); border-color:var(--border-2); }
.app-redesign .dash-action-ic{
  width:42px; height:42px; flex:none; border-radius:var(--r-sm); background:var(--surface-alt);
  display:flex; align-items:center; justify-content:center;
}
.app-redesign .dash-action-ic .ic{ width:19px; height:19px; color:var(--green); }
.app-redesign .dash-action strong{ display:block; font-size:14.5px; font-weight:600; color:var(--forest); }
.app-redesign .dash-action small{ display:block; font-size:12px; color:var(--text-2); margin-top:3px; }

/* ============================================================
   NEW / EDIT LISTING FORM
   Grouped into numbered sections so a long form reads as five
   short ones. Same cream card surface as the dashboard.
   ============================================================ */

.app-redesign .lf-wrap{ max-width:880px; }
.app-redesign .lf-head{ margin-bottom:26px; }

.app-redesign .lf-alert{
  display:flex; gap:10px; align-items:flex-start; padding:14px 16px; margin-bottom:20px;
  border-radius:var(--r-md); background:#f7e7e0; color:var(--danger); font-size:13.5px;
}
.app-redesign .lf-alert .ic{ width:18px; height:18px; flex:none; color:var(--danger); }
.app-redesign .lf-alert ul{ margin:0; padding:0; list-style:none; }

.app-redesign .lf-form{ gap:20px; }

.app-redesign .lf-section{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:24px; box-shadow:var(--sh-sm);
}
.app-redesign .lf-section-head{
  display:flex; gap:14px; align-items:flex-start;
  padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid var(--border);
}
.app-redesign .lf-section-head h2{ font-size:22px; margin:0 0 3px; }
.app-redesign .lf-step{
  width:32px; height:32px; flex:none; border-radius:var(--pill);
  background:var(--forest); color:var(--on-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600;
}

.app-redesign .lf-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:700px){
  .app-redesign .lf-grid{ grid-template-columns:1fr 1fr; }
  .app-redesign .lf-grid .span-2{ grid-column:1 / -1; }
}

.app-redesign .lf-form input[type=file]{
  width:100%; padding:13px 15px; background:var(--surface-alt);
  border:1px dashed var(--border-2); border-radius:var(--r-md);
  font-size:13.5px; color:var(--text-2); cursor:pointer;
}
.app-redesign .lf-form input[type=file]:hover{ border-color:var(--green); }

.app-redesign .lf-check{
  display:inline-flex!important; align-items:center; gap:9px; font-weight:500!important;
  color:var(--text)!important; cursor:pointer;
}
.app-redesign .lf-req{
  font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--green); margin-left:4px;
}

.app-redesign .lf-previews{ display:flex; flex-wrap:wrap; gap:10px; }
.app-redesign .lf-preview{
  width:84px; height:84px; object-fit:cover; border-radius:var(--r-sm);
  border:1px solid var(--border);
}

.app-redesign .lf-current{
  display:flex; gap:14px; align-items:center; padding:14px; margin-bottom:20px;
  background:var(--surface-alt); border-radius:var(--r-md);
}
.app-redesign .lf-current img{ width:76px; height:76px; object-fit:cover; border-radius:var(--r-sm); flex:none; }

.app-redesign .lf-actions{
  display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap;
}
@media(max-width:520px){ .app-redesign .lf-actions .btn{ flex:1; } }

/* ============================================================
   MY LISTINGS — the agent's own portfolio grid. Same card shape
   as the student-facing property card, but the overlay badge
   reports review/availability state and the footer carries the
   two actions an agent reaches for: edit, and mark taken.
   ============================================================ */

.app-redesign .ml-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:700px){ .app-redesign .ml-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(min-width:1200px){ .app-redesign .ml-grid{ grid-template-columns:repeat(3, 1fr); } }

.app-redesign .ml-card{
  display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-sm); transition:transform .2s ease, box-shadow .2s ease;
}
.app-redesign .ml-card:hover{ transform:translateY(-4px); box-shadow:var(--sh); }
.app-redesign .ml-media{
  position:relative; display:block; height:170px;
  background:var(--surface-alt) center/cover no-repeat;
  border-bottom:1px solid var(--border);
}
.app-redesign .ml-media .badge{ position:absolute; top:12px; left:12px; }

.app-redesign .ml-body{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.app-redesign .ml-title{
  font-family:'Cormorant Garamond', serif; font-size:20px; font-weight:600;
  line-height:1.25; color:var(--forest);
}
.app-redesign .ml-title:hover{ color:var(--green); }
.app-redesign .ml-loc{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-2); }
.app-redesign .ml-loc .ic{ width:14px; height:14px; color:var(--green); }
.app-redesign .ml-price{
  font-family:'Cormorant Garamond', serif; font-size:22px; font-weight:600; color:var(--green);
}
.app-redesign .ml-price small{ font-family:'Inter', sans-serif; font-size:11.5px; color:var(--text-3); font-weight:400; }
.app-redesign .ml-reject{
  font-size:12.5px; color:var(--danger); background:#f7e7e0;
  padding:9px 11px; border-radius:var(--r-sm); margin:0;
}
.app-redesign .ml-metrics{
  display:flex; gap:16px; padding-top:10px; margin-top:auto;
  border-top:1px solid var(--border); font-size:12.5px; color:var(--text-2);
}
.app-redesign .ml-metrics span{ display:inline-flex; align-items:center; gap:6px; }
.app-redesign .ml-metrics .ic{ width:14px; height:14px; color:var(--green); }
.app-redesign .ml-actions{ display:flex; gap:10px; padding-top:4px; }
.app-redesign .ml-actions form{ margin:0; }

/* ============================================================
   FOCUS PAGES — verification, onboarding steps. One centred
   column, a slim brand bar, no sidebar. Same cream tokens.
   ============================================================ */

.app-redesign.focus-page{ background:var(--bg); min-height:100vh; }

.app-redesign .focus-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; background:var(--white); border-bottom:1px solid var(--border);
}
@media(min-width:768px){ .app-redesign .focus-bar{ padding:20px 32px; } }
.app-redesign .focus-logo{
  font-family:'Cormorant Garamond', serif; font-size:22px; font-weight:500;
  letter-spacing:-.01em; color:var(--forest);
}
.app-redesign .focus-step{ font-size:12.5px; color:var(--text-2); }

.app-redesign .focus-main{ display:flex; justify-content:center; padding:36px 16px 60px; }
.app-redesign .focus-col{ width:100%; max-width:720px; }

.app-redesign .focus-progress{ display:flex; gap:8px; margin-bottom:22px; }
.app-redesign .focus-progress span{ flex:1; height:5px; border-radius:var(--pill); background:var(--border-2); }
.app-redesign .focus-progress span.on{ background:var(--green); }

.app-redesign .focus-title{
  font-family:'Cormorant Garamond', serif; font-weight:500; letter-spacing:-.015em;
  font-size:30px; line-height:1.15; margin:0 0 8px;
}
@media(min-width:768px){ .app-redesign .focus-title{ font-size:36px; } }

.app-redesign .focus-badge{
  width:56px; height:56px; border-radius:var(--pill); background:var(--surface-alt);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.app-redesign .focus-badge .ic{ width:24px; height:24px; color:var(--green); }

.app-redesign .focus-mailbox{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 16px; margin:18px 0; border-radius:var(--r-md);
  background:var(--surface-alt); border:1px solid var(--border);
  font-size:14px; word-break:break-all;
}
.app-redesign .focus-mailbox .ic{ width:18px; height:18px; color:var(--green); flex:none; }

.app-redesign .focus-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; margin-top:8px; }
@media(max-width:520px){ .app-redesign .focus-actions .btn{ flex:1; } }

/* ============================================================
   LISTING FORM — the WhatsApp-paste shortcut and the grouped
   amenity checklist. Same cream card surface as everything else.
   ============================================================ */

.app-redesign .lf-paste{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:20px; margin-bottom:20px; box-shadow:var(--sh-sm);
}
.app-redesign .lf-paste-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.app-redesign .lf-paste-head h2{ font-size:19px; margin:0 0 2px; }
.app-redesign .lf-paste-head > div{ flex:1; min-width:200px; }
.app-redesign .lf-paste-ic{
  width:42px; height:42px; flex:none; border-radius:var(--r-sm); background:var(--surface-alt);
  display:flex; align-items:center; justify-content:center;
}
.app-redesign .lf-paste-ic .ic{ width:19px; height:19px; color:var(--green); }
.app-redesign .lf-paste-body{ margin-top:16px; }
.app-redesign .lf-paste-body textarea{
  width:100%; padding:14px 15px; border-radius:var(--r-md);
  background:var(--surface-alt); border:1px solid var(--border);
  font:inherit; font-size:14px; color:var(--text); line-height:1.6; resize:vertical;
}
.app-redesign .lf-paste-body textarea:focus{
  outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(142,156,117,.2);
}

/* ---------- grouped amenity checklist ---------- */
.app-redesign .lf-amgroup{ margin-bottom:20px; }
.app-redesign .lf-amgroup:last-of-type{ margin-bottom:0; }
.app-redesign .lf-amtitle{
  font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-2); margin:0 0 10px;
}
.app-redesign .lf-amgrid{ display:flex; flex-wrap:wrap; gap:9px; }
.app-redesign label.lf-am{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 14px; border-radius:var(--pill);
  background:var(--surface-alt); border:1px solid var(--border);
  font-family:var(--fb); font-size:13.5px; font-weight:400; color:var(--text);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.app-redesign label.lf-am:hover{ border-color:var(--border-2); }
.app-redesign label.lf-am input{ width:auto; margin:0; accent-color:var(--green); }
.app-redesign label.lf-am:has(input:checked){
  background:var(--forest); border-color:var(--forest); color:var(--on-dark);
}

/* ---------- Listing detail: landmark, flags and the cost breakdown ---------- */
.app-redesign .pd-landmark{
  display:flex; align-items:center; gap:6px; margin-top:6px;
  font-size:13px; color:var(--text-2);
}
.app-redesign .pd-landmark .ic{ width:14px; height:14px; color:var(--green); flex:none; }
.app-redesign .pd-flags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.app-redesign .pd-flag{
  display:inline-flex; align-items:center; gap:5px; padding:5px 11px;
  border-radius:var(--pill); background:var(--surface-alt); border:1px solid var(--border);
  font-size:12px; color:var(--text-2);
}
.app-redesign .pd-flag .ic{ width:13px; height:13px; color:var(--green); }
.app-redesign .pd-price-sub{ font-size:12.5px; color:var(--text-2); margin-top:4px; }

.app-redesign .pd-cost-table{
  background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden;
}
.app-redesign .pd-cost-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:13px 18px; border-bottom:1px solid var(--border); font-size:14px;
}
.app-redesign .pd-cost-row:last-child{ border-bottom:0; }
.app-redesign .pd-cost-row span{ color:var(--text-2); }
.app-redesign .pd-cost-row strong{ font-weight:600; color:var(--forest); text-align:right; }
.app-redesign .pd-cost-total{ background:var(--surface-alt); }
.app-redesign .pd-cost-total strong{
  font-family:'Cormorant Garamond', serif; font-size:22px; font-weight:600; color:var(--green);
}
.app-redesign .pd-cost-note{
  display:flex; gap:8px; align-items:flex-start; margin:12px 0 0;
  font-size:12.5px; color:var(--text-2); line-height:1.5;
}
.app-redesign .pd-cost-note .ic{ width:15px; height:15px; color:var(--green); flex:none; margin-top:1px; }

/* "3 rooms left" — the line that makes a student act on a card. Sits at the
   foot of the image: the top-right corner belongs to the three-dot menu, and
   the top-left to the Verified badge. */
.app-redesign .property-units{
  position:absolute; top:172px; left:14px; z-index:2;
  padding:5px 11px; border-radius:var(--pill);
  background:var(--forest); color:var(--on-dark);
  font-size:11.5px; font-weight:600; white-space:nowrap;
}

/* ── Listing visibility ──────────────────────────────────────────────
   The radio group on the upload form, and the per-row controls in the
   listings table. Mobile-first like the rest of this file: the actions
   row wraps rather than scrolling sideways on a phone. */
.lf-vis-group{display:grid;gap:10px}
.lf-vis-group label{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;line-height:1.35}
.lf-vis-group label:hover{border-color:var(--forest)}
.lf-vis-group input[type=radio]{margin-top:3px;flex:none}

.ml-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ml-avail{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ml-alsolabel{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft)}
.ml-visselect{padding:6px 10px;border:1px solid var(--line);border-radius:var(--pill);
  background:var(--surface);font:inherit;font-size:13px;max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The share-state banner on a listing the owner is previewing. */
.pd-visbanner{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px;
  padding:12px 14px;border-radius:var(--r-md);background:#e3e9f3;color:var(--forest);font-size:14px}
.pd-visbanner.is-draft{background:#e8e4db;color:var(--ink-soft)}