/*
Theme Name: PropTrack
Theme URI: https://proptrack.in
Author: PropTrack Realty
Author URI: https://proptrack.in
Description: A complete real estate management system for brokers and agents. Manage residential and commercial property listings, client enquiries, deal tracking (Kanban), calendar scheduling, user roles, and PDF exports.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: proptrack
Tags: real-estate, property-management, crm, kanban, custom-post-type
*/

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
    --ink:     #111827;
    --ink2:    #1f2937;
    --ink3:    #374151;
    --teal:    #0d7377;
    --teal2:   #14a085;
    --teal-lt: #e6f7f6;
    --gold:    #b5811a;
    --gold2:   #d4981f;
    --gold-lt: #fdf8ee;
    --slate:   #6b7280;
    --border:  #e5e7eb;
    --border2: #d1d5db;
    --bg:      #f9fafb;
    --white:   #ffffff;
    --red:     #dc2626;
    --green:   #16a34a;
    --amber:   #d97706;
    --blue:    #2563eb;
    --sidebar-w: 230px;
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: var(--font-body); background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal2); }
img { max-width: 100%; height: auto; display: block; }
button { font-family: var(--font-body); cursor: pointer; }
input, select, textarea { font-family: var(--font-body); }

/* ============================================================
   APP LAYOUT
   ============================================================ */
.pt-app { display: flex; height: 100vh; overflow: hidden; }
.pt-sidebar { width: var(--sidebar-w); background: var(--ink2); display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; }
.pt-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.pt-topbar { height: 56px; background: var(--white); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; }
.pt-body { flex: 1; overflow-y: auto; padding: 24px; }
.pt-footer { background: var(--ink2); color: rgba(255,255,255,.5); font-size: 11.5px; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }

/* ============================================================
   SCREEN VISIBILITY
   Hide every screen by default; only .active is shown.
   This was missing - causing all screens to stack on one page.
   ============================================================ */
.pt-screen          { display: none !important; }
.pt-screen.active   { display: block !important; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.sb-head { padding: 18px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sb-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
.sb-mark { width: 36px; height: 36px; background: var(--teal); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #fff; flex-shrink: 0; }
.sb-name { font-family: var(--font-display); font-size: 19px; color: #fff; font-weight: 600; line-height: 1; }
.sb-name span { color: var(--teal2); }
.sb-nav { padding: 10px 0; flex: 1; }
.sb-section { padding: 10px 16px 4px; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255,255,255,.28); font-weight: 500; }
.sb-item { display: flex; align-items: center; gap: 9px; padding: 9px 16px; color: rgba(255,255,255,.6); text-decoration: none; font-size: 13px; transition: all .12s; position: relative; }
.sb-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.sb-item.current-menu-item,
.sb-item.active { background: rgba(13,115,119,.25); color: #fff; border-right: 3px solid var(--teal2); }
.sb-item .ico { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.sb-badge { margin-left: auto; background: var(--teal); color: #fff; font-size: 10px; padding: 1px 7px; border-radius: 12px; font-weight: 600; }
.sb-foot { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08); }
.sb-user { display: flex; align-items: center; gap: 9px; }
.pt-avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; font-size: 12px; }
.av-lg { width: 34px; height: 34px; background: var(--teal); color: #fff; }
.av-sm { width: 28px; height: 28px; background: var(--teal); color: #fff; font-size: 11px; }
.av-blue  { background: #2563eb !important; }
.av-green { background: #16a34a !important; }
.av-amber { background: #d97706 !important; }
.sb-uname { color: #fff; font-size: 13px; font-weight: 500; }
.sb-urole { color: rgba(255,255,255,.4); font-size: 11px; }
.logout-btn { margin-left: auto; background: none; border: none; color: rgba(255,255,255,.4); cursor: pointer; font-size: 17px; padding: 2px; transition: color .12s; text-decoration: none; }
.logout-btn:hover { color: var(--red); }

/* ============================================================
   TOPBAR
   ============================================================ */
.pg-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); }
.tb-right { display: flex; align-items: center; gap: 14px; }
.tb-time { font-size: 12px; color: var(--slate); }
.notif-wrap { position: relative; cursor: pointer; font-size: 18px; }
.notif-dot { position: absolute; top: -1px; right: -1px; width: 7px; height: 7px; background: var(--red); border-radius: 50%; border: 1.5px solid var(--white); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; font-family: var(--font-body); transition: all .12s; white-space: nowrap; text-decoration: none; }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal2); color: #fff; }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold2); color: #fff; }
.btn-outline { background: transparent; color: var(--ink3); border: 1px solid var(--border2); }
.btn-outline:hover { border-color: var(--teal); color: var(--teal); }
.btn-ghost { background: transparent; color: var(--slate); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg); }
.btn-danger { background: #fef2f2; color: var(--red); border: 1px solid #fecaca; }
.btn-sm  { padding: 5px 12px; font-size: 12px; }
.btn-xs  { padding: 3px 9px;  font-size: 11px; }
.btn-full { width: 100%; justify-content: center; padding: 11px 16px; font-size: 14px; }

/* ============================================================
   CARDS & SECTIONS
   ============================================================ */
.card { background: var(--white); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
.card-hd { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); }
.card-bd { padding: 18px; }
.sec { background: var(--white); border-radius: 12px; border: 1px solid var(--border); margin-bottom: 16px; }
.sec-hd { padding: 13px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.sec-icon { width: 32px; height: 32px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.sec-icon.teal { background: var(--teal-lt); }
.sec-icon.gold  { background: var(--gold-lt); }
.sec-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.sec-bd { padding: 18px; }

/* ============================================================
   STAT CARDS (Dashboard)
   ============================================================ */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 24px; }
.stat { background: var(--white); border-radius: 12px; border: 1px solid var(--border); padding: 20px 18px 16px; position: relative; overflow: hidden; cursor: pointer; transition: box-shadow .15s; text-decoration: none; display: block; }
.stat:hover { box-shadow: 0 4px 18px rgba(0,0,0,.08); }
.stat::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.stat.s-teal::after  { background: var(--teal); }
.stat.s-blue::after  { background: var(--blue); }
.stat.s-green::after { background: var(--green); }
.stat.s-amber::after { background: var(--amber); }
.stat-ico { position: absolute; right: 16px; top: 14px; font-size: 26px; opacity: .12; }
.stat-lbl { font-size: 11px; font-weight: 500; color: var(--slate); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.stat-val { font-family: var(--font-display); font-size: 34px; font-weight: 600; color: var(--ink); line-height: 1; }
.stat-sub { font-size: 11.5px; color: var(--slate); margin-top: 5px; }

/* ============================================================
   FORMS
   ============================================================ */
.fg { margin-bottom: 16px; }
.fg label { display: block; font-size: 12px; font-weight: 500; color: var(--ink3); margin-bottom: 5px; letter-spacing: .3px; }
.fc { width: 100%; padding: 9px 12px; border: 1px solid var(--border2); border-radius: 7px; font-size: 13.5px; font-family: var(--font-body); color: var(--ink); outline: none; background: var(--white); transition: border .12s; }
.fc:focus { border-color: var(--teal); }
.fc-sm { padding: 7px 10px; font-size: 13px; }
textarea.fc { resize: vertical; min-height: 76px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.col-span2 { grid-column: span 2; }
.col-span3 { grid-column: span 3; }

/* ============================================================
   CHECKBOX GRID (Amenities)
   ============================================================ */
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px,1fr)); gap: 6px; }
.chk-item { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; transition: all .1s; font-size: 13px; user-select: none; }
.chk-item:hover { border-color: var(--teal); background: var(--teal-lt); }
.chk-item input { accent-color: var(--teal); cursor: pointer; flex-shrink: 0; }
.chk-item.checked { border-color: var(--teal); background: var(--teal-lt); }

/* ============================================================
   TABLES
   ============================================================ */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { background: #f8fafc; padding: 9px 13px; text-align: left; font-size: 11px; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); }
td { padding: 11px 13px; border-bottom: 1px solid #f1f5f9; font-size: 13px; color: var(--ink3); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafcfe; }
.prop-name { font-weight: 600; color: var(--ink); font-size: 13px; }
.prop-sub  { font-size: 11.5px; color: var(--slate); margin-top: 2px; }

/* ============================================================
   BADGES
   ============================================================ */
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.b-rent    { background: #fff7ed; color: #c2410c; }
.b-sale    { background: #eff6ff; color: #1d4ed8; }
.b-lease   { background: #f0fdf4; color: #15803d; }
.b-res     { background: #f5f3ff; color: #6d28d9; }
.b-com     { background: #fdf4ff; color: #9333ea; }
.b-apt     { background: #ecfeff; color: #0e7490; }
.b-villa   { background: #fefce8; color: #a16207; }
.b-plot    { background: #fff1f2; color: #be123c; }
.b-office  { background: #f0f9ff; color: #0369a1; }
.b-godown  { background: #fafaf0; color: #713f12; }
.b-factory { background: #fef3c7; color: #92400e; }
.b-active  { background: #f0fdf4; color: var(--green); }
.b-pending { background: #fffbeb; color: var(--amber); }
.b-closed  { background: #f8fafc; color: var(--slate); }
.b-admin   { background: var(--gold-lt); color: var(--gold); }
.b-agent   { background: #eff6ff; color: var(--blue); }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-bar .fc { min-width: 130px; flex: 1; }
.search-fc { flex: 2 1 200px !important; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pag { display: flex; align-items: center; gap: 5px; justify-content: flex-end; margin-top: 14px; }
.pag-btn { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; background: var(--white); color: var(--ink3); transition: all .12s; text-decoration: none; }
.pag-btn.active { background: var(--teal); color: #fff; border-color: var(--teal); font-weight: 600; }
.pag-btn:hover:not(.active) { border-color: var(--teal); color: var(--teal); }

/* ============================================================
   SELECTION BAR
   ============================================================ */
.sel-bar { background: var(--ink); color: #fff; border-radius: 10px; padding: 11px 18px; margin-bottom: 14px; display: none; align-items: center; justify-content: space-between; gap: 12px; }
.sel-bar.active { display: flex; }

/* ============================================================
   KANBAN
   ============================================================ */
.kanban { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.kb-col { min-width: 175px; background: #f1f5f9; border-radius: 10px; overflow: hidden; }
.kb-hd { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.kb-insp   { background: #dbeafe; color: #1e40af; }
.kb-done   { background: #dcfce7; color: #166534; }
.kb-rej    { background: #fee2e2; color: #991b1b; }
.kb-neg    { background: #fef9c3; color: #854d0e; }
.kb-doc    { background: #f3e8ff; color: #7e22ce; }
.kb-closed { background: var(--ink); color: #fff; }
.kb-body { padding: 8px; display: flex; flex-direction: column; gap: 7px; min-height: 100px; }
.kb-card { background: var(--white); border-radius: 8px; padding: 11px; border: 1px solid var(--border); cursor: pointer; transition: box-shadow .12s; }
.kb-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.1); }
.kb-card.dark { background: #1f2937; border-color: #374151; }
.kb-count { background: rgba(255,255,255,.25); font-size: 10px; padding: 1px 6px; border-radius: 10px; font-weight: 700; }
.kb-closed .kb-count { background: rgba(255,255,255,.15); color: #fff; }
.kc-nm  { font-weight: 600; font-size: 13px; color: var(--ink); }
.kc-nm.w { color: #fff; }
.kc-p   { font-size: 11.5px; color: var(--slate); margin-top: 2px; }
.kc-p.w { color: #9ca3af; }
.kc-dt  { font-size: 11px; color: var(--slate); margin-top: 6px; }
.kc-dt.g { color: var(--teal2); }
.kc-ag  { display: inline-flex; background: var(--teal-lt); color: var(--teal); font-size: 10px; padding: 2px 7px; border-radius: 10px; margin-top: 5px; font-weight: 500; }

/* ============================================================
   CALENDAR
   ============================================================ */
.cal-grid-hd { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.cal-hdr  { text-align: center; font-size: 11px; font-weight: 600; color: var(--slate); text-transform: uppercase; padding: 6px; }
.cal-day  { min-height: 78px; background: var(--white); border: 1px solid var(--border); border-radius: 6px; padding: 6px; cursor: pointer; transition: border-color .12s; }
.cal-day:hover { border-color: var(--teal); }
.cal-day.today { border-color: var(--teal); background: var(--teal-lt); }
.cal-day.other { background: #f8fafc; opacity: .5; }
.cal-num { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.cal-day.today .cal-num { color: var(--teal); }
.cal-ev { background: var(--ink); color: #fff; font-size: 10px; padding: 2px 5px; border-radius: 3px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.teal { background: var(--teal); }
.cal-ev.gold { background: var(--gold); }

/* ============================================================
   VISIT LIST
   ============================================================ */
.visit-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--white); border-radius: 9px; border: 1px solid var(--border); margin-bottom: 9px; }
.v-time   { background: var(--ink); color: #fff; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.v-info   { flex: 1; }
.v-client { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.v-prop   { font-size: 12px; color: var(--slate); margin-top: 2px; }

/* ============================================================
   TABS
   ============================================================ */
.tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.tab { padding: 9px 18px; font-size: 13px; font-weight: 500; color: var(--slate); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .12s; }
.tab.active { color: var(--teal); border-bottom-color: var(--teal); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ============================================================
   MODAL
   ============================================================ */
.pt-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.55); z-index: 500; display: none; align-items: center; justify-content: center; padding: 20px; }
.pt-overlay.open { display: flex; }
.pt-modal { background: var(--white); border-radius: 14px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-hd { padding: 22px 24px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--white); z-index: 2; }
.modal-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); }
.modal-close { background: none; border: none; font-size: 20px; color: var(--slate); cursor: pointer; padding: 2px 6px; border-radius: 4px; line-height: 1; }
.modal-close:hover { color: var(--red); background: #fef2f2; }
.modal-bd { padding: 22px 24px; }
.modal-ft { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 9px; background: var(--white); position: sticky; bottom: 0; }

/* ============================================================
   PHOTO UPLOAD
   ============================================================ */
.upload-zone { border: 2px dashed var(--border2); border-radius: 9px; padding: 26px; text-align: center; cursor: pointer; transition: all .15s; }
.upload-zone:hover { border-color: var(--teal); background: var(--teal-lt); }
.photo-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-top: 13px; }
.p-thumb { aspect-ratio: 4/3; border-radius: 7px; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 28px; position: relative; overflow: hidden; }
.p-thumb .rm { position: absolute; top: 3px; right: 3px; background: rgba(220,38,38,.88); color: #fff; border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ============================================================
   TAGGED PROPERTIES
   ============================================================ */
.tagged-prop { display: inline-flex; align-items: center; gap: 6px; background: var(--teal-lt); border: 1px solid #b2dfdc; color: var(--ink); border-radius: 20px; padding: 3px 11px; font-size: 12px; font-weight: 500; margin: 2px; }
.tagged-prop .tx { cursor: pointer; color: var(--slate); margin-left: 2px; line-height: 1; }
.tagged-prop .tx:hover { color: var(--red); }

/* ============================================================
   SETTINGS
   ============================================================ */
.soc-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 9px; }
.soc-ico { font-size: 20px; width: 30px; text-align: center; }
.soc-lbl { font-size: 12px; font-weight: 500; color: var(--slate); min-width: 80px; }
.usr-row-admin { border-left: 3px solid var(--gold); }
.usr-row-agent  { border-left: 3px solid var(--blue); }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.info-box { background: var(--teal-lt); border: 1px solid #b2dfdc; border-radius: 8px; padding: 11px 14px; font-size: 12.5px; color: var(--ink3); }
.warn-box { background: var(--gold-lt); border: 1px solid #e9d5a0; border-radius: 8px; padding: 11px 14px; font-size: 12.5px; color: var(--ink3); }
.divider  { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.flex { display: flex; }
.items-c { align-items: center; }
.jc-sb { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.txt-sm   { font-size: 12px; }
.txt-xs   { font-size: 11px; }
.txt-muted { color: var(--slate); }
.fw6 { font-weight: 600; }
.txt-teal  { color: var(--teal); }
.txt-gold  { color: var(--gold); }
.txt-green { color: var(--green); }
.txt-red   { color: var(--red); }
.ml-auto { margin-left: auto; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.pt-login-wrap { min-height: 100vh; background: var(--ink2); display: flex; align-items: center; justify-content: center; }
.pt-login-card { background: var(--white); border-radius: 16px; padding: 48px 44px; width: 400px; box-shadow: 0 32px 80px rgba(0,0,0,.4); }
.lp-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 28px; }
.lp-mark { width: 44px; height: 44px; border-radius: 10px; background: var(--teal); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; color: #fff; font-weight: 600; }
.lp-name { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--ink); }
.lp-name span { color: var(--teal); }
.lp-h   { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.lp-sub { color: var(--slate); font-size: 13px; margin-bottom: 24px; }
.lp-error { background: #fef2f2; border: 1px solid #fecaca; border-radius: 7px; padding: 9px 13px; font-size: 13px; color: var(--red); margin-bottom: 14px; display: none; }

/* ============================================================
   PROPERTY DETAIL PAGE
   ============================================================ */
.prop-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-bottom: 20px; }
.prop-gallery img { border-radius: 9px; width: 100%; }
.prop-gallery-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prop-meta-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 18px; }
.prop-meta-item .lbl { font-size: 11px; color: var(--slate); margin-bottom: 3px; }
.prop-meta-item .val { font-weight: 600; font-size: 14px; color: var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .pt-sidebar { display: none; }
    .stat-grid { grid-template-columns: repeat(2,1fr); }
    .kanban { grid-template-columns: repeat(3,1fr); }
    .row3 { grid-template-columns: 1fr 1fr; }
    .col-span3 { grid-column: span 2; }
}
@media (max-width: 600px) {
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .row2, .row3 { grid-template-columns: 1fr; }
    .col-span2, .col-span3 { grid-column: span 1; }
    .pt-body { padding: 14px; }
}