/* ═══════════════════════════════════════════════════
   Casa Regal — Channel Management System
   app.css  |  Main stylesheet
   ═══════════════════════════════════════════════════ */

/* ── CSS VARIABLES ── */
:root {
  --bg:#f5f6fa; --surface:#fff; --border:#e2e6ef; --text:#1a1d2e;
  --muted:#7b8299; --accent:#4f6ef7; --today:#eef1ff;
  --airbnb:#FF5A5F; --booking:#003580; --mmt:#e8532a;
  --offline:#2ecc71; --blocked:#f39c12;
  --radius:8px; --shadow:0 2px 12px rgba(0,0,0,.08);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}

/* ── HEADER ── */
.hdr{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:var(--shadow);}
.hdr-inner{display:flex;align-items:center;gap:12px;padding:8px 20px;min-height:54px;}
#hdr-user{font-size:11px;color:var(--muted);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hdr-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:1.5px solid var(--border);border-radius:7px;padding:5px 7px;cursor:pointer;width:34px;height:34px;box-sizing:border-box;}
.hdr-hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;}
.mob-menu{display:none;flex-direction:column;border-top:1px solid var(--border);background:var(--surface);padding:8px 16px 12px;gap:4px;}
.mob-menu.open{display:flex;}
.mob-mnav{text-align:left;padding:10px 14px;border-radius:8px;border:none;background:none;font-size:14px;font-weight:500;color:var(--text);cursor:pointer;transition:background .15s;}
.mob-mnav:hover,.mob-mnav.active{background:var(--bg);color:var(--accent);}
.mob-mnav-sync{color:var(--muted);border-top:1px solid var(--border);margin-top:4px;padding-top:14px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-icon{width:34px;height:34px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex-shrink:0;}
.brand-name{font-size:16px;font-weight:700;} .brand-sub{font-size:11px;color:var(--muted);}
.hdr-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto;}
.view-toggle{display:flex;background:var(--bg);border-radius:8px;padding:3px;gap:2px;}
.vbtn{padding:5px 12px;border-radius:6px;border:none;cursor:pointer;font-size:12px;font-weight:500;color:var(--muted);background:transparent;transition:all .15s;}
.vbtn.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.1);}
.nav-btn{width:30px;height:30px;border-radius:6px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:14px;color:var(--muted);display:flex;align-items:center;justify-content:center;}
.nav-btn:hover{border-color:var(--accent);color:var(--accent);}
.today-nav-btn{width:auto;padding:0 10px;font-size:11px;font-weight:700;color:var(--accent);border-color:var(--accent);letter-spacing:.4px;}
.period-lbl{font-size:14px;font-weight:600;text-align:center;}
.btn{padding:7px 14px;border-radius:7px;border:none;font-size:12px;font-weight:600;cursor:pointer;transition:opacity .15s;}
.btn-primary{background:var(--accent);color:#fff;} .btn-primary:hover{opacity:.88;}
.btn-outline{background:var(--surface);color:var(--accent);border:1.5px solid var(--accent);}
.btn-outline:hover{background:var(--accent);color:#fff;}

/* ── BARS ── */
.status-bar{padding:5px 20px;font-size:11px;color:var(--muted);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0;}
.dot.live{background:#2ecc71;} .dot.err{background:#e74c3c;}
.legend{display:flex;align-items:center;gap:12px;padding:7px 20px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.li{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);}
.lc{width:10px;height:10px;border-radius:3px;}
.summary{display:flex;gap:10px;padding:10px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 16px;min-width:120px;}
.stat-l{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.4px;text-transform:uppercase;}
.stat-v{font-size:20px;font-weight:700;margin-top:2px;line-height:1.1;}
.stat-v.g{color:#2ecc71;} .stat-v.b{color:var(--accent);} .stat-v.warn{color:#e67e22;}
.stat-sub{font-size:10px;color:var(--muted);margin-top:3px;font-weight:500;}
/* Occupancy progress bar inside stat card */
.stat-occ-bar{height:4px;background:var(--border);border-radius:2px;margin-top:5px;overflow:hidden;}
.stat-occ-fill{height:100%;border-radius:2px;background:var(--accent);transition:width .4s ease;}

/* ── PROPERTY SELECTOR (month view) ── */
.prop-tabs{display:flex;align-items:center;gap:10px;padding:8px 20px;border-bottom:1px solid var(--border);background:var(--surface);position:relative;}
.prop-label{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;flex-shrink:0;}
.prop-search-wrap{display:flex;align-items:center;min-width:240px;max-width:340px;background:#f4f6ff;border:1px solid var(--border);border-radius:20px;padding:5px 12px;gap:6px;cursor:text;}
.prop-search-wrap:focus-within{border-color:var(--accent);background:#eef1ff;}
.prop-search-input{border:none;outline:none;background:transparent;font-size:13px;font-weight:600;color:var(--text);width:100%;min-width:0;}
.prop-search-input::placeholder{color:var(--muted);font-weight:400;}
.prop-search-arrow{font-size:11px;color:var(--muted);flex-shrink:0;pointer-events:none;}
.prop-list{position:fixed;z-index:2000;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 24px rgba(0,0,0,.13);overflow-y:auto;max-height:260px;}
.prop-opt{padding:8px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px;}
.prop-opt:hover,.prop-opt.selected{background:#eef1ff;}
.prop-opt-name{font-size:12px;font-weight:600;color:var(--text);}
.prop-opt-id{font-size:10px;color:var(--muted);}
.prop-opt-empty{padding:10px 12px;font-size:12px;color:var(--muted);text-align:center;}

/* ── Mobile booking-hint prompt ── */
.tl-mob-prompt{
  display:none;   /* shown only on mobile via @media below */
}
@keyframes mob-prompt-blink{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(79,110,247,.35);}
  50%{opacity:.55;box-shadow:0 0 0 6px rgba(79,110,247,0);}
}

/* ── TIMELINE ── */
/* tl-wrap is now the single scroll container (both x and y).
   JS sets its height so it fills the viewport below the app header.
   position:sticky children key off this as the scroll root. */
.tl-wrap{overflow:auto;padding:14px 20px;-webkit-overflow-scrolling:touch;}
.tl-con{min-width:800px;}

/* ── Frozen header wrapper: sticks to TOP of .tl-wrap's scroll area ── */
.tl-hdr-wrap{
  position:sticky;
  top:0;               /* relative to .tl-wrap, not the viewport */
  z-index:20;
  background:var(--bg);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}

.tl-hdr{display:flex;}

/* Frozen corner cell in header — must be above body rows AND above .tl-pl */
.tl-lbl-col{
  width:155px;min-width:155px;
  position:sticky;left:0;z-index:25;   /* above hdr-wrap(20) + tl-pl(4) */
  background:var(--bg);
}
.tl-dates{display:flex;flex:1;}

/* Month label row */
.tl-month-row{background:var(--surface);}
.tl-month-span{flex:1;text-align:center;font-size:11px;font-weight:800;letter-spacing:.3px;
  color:var(--accent);padding:5px 6px 4px;background:#eef1ff;
  border-right:2px solid var(--surface);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.tl-month-span.last{border-right:none;}

/* Date header row */
.tl-dc{flex:1;min-width:var(--tl-cell-w,34px);text-align:center;font-size:10px;font-weight:600;color:var(--muted);padding-bottom:5px;border-bottom:2px solid var(--border);transition:min-width .15s ease;}
.tl-dc.today{color:var(--accent);position:relative;}
.tl-dc.today::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:18px;height:3px;background:var(--accent);border-radius:2px 2px 0 0;}
.tl-dc .dow{font-size:9px;font-weight:400;}

/* Property rows — no overflow:hidden so sticky left works on .tl-pl */
.tl-body{margin-top:6px;}
.tl-row{display:flex;align-items:stretch;border-radius:var(--radius);margin-bottom:8px;background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.05);}

/* Frozen property name — sticky left within .tl-wrap's horizontal scroll */
.tl-pl{
  width:155px;min-width:155px;padding:10px 12px;font-size:12px;font-weight:600;
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:center;
  background:#fafbff;
  position:sticky;left:0;z-index:4;    /* above .tl-cell content */
  border-radius:var(--radius) 0 0 var(--radius);
  box-shadow:3px 0 6px rgba(0,0,0,.07);
  overflow:hidden;   /* clip children so name can't overflow the frozen column */
}
.tl-pl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
.tl-pl span{font-size:10px;font-weight:400;color:var(--muted);margin-top:2px;}
.tl-pl-link{cursor:pointer;transition:background .15s;}
.tl-pl-link:hover{background:#eef1ff;}
/* ::after arrow removed — Airbnb button used on hover instead */
.tl-pl-id{font-size:9px!important;font-weight:500!important;color:#bbb!important;letter-spacing:.3px;margin-top:1px!important;font-family:monospace;}
/* Airbnb calendar link — appears on hover inside the frozen property column */
.tl-pl-airbnb {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 10px;
  background: #FF5A5F;
  color: #fff !important;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
  opacity: 0;
  transition: opacity .15s;
  white-space: nowrap;
  width: fit-content;
  pointer-events: none;
}
.tl-pl-link:hover .tl-pl-airbnb {
  opacity: 1;
  pointer-events: auto;
}
.tl-pl-airbnb:hover { background: #e04e52; }

/* Clip booking bars within the cell grid; round right corners.
   z-index:1 creates a stacking context that CONTAINS the .bk bars (z-index:10)
   so they paint below .tl-pl (z-index:4) and .tl-hdr-wrap (z-index:20) */
.tl-grid{display:flex;flex:1;position:relative;z-index:1;min-height:52px;overflow:hidden;border-radius:0 var(--radius) var(--radius) 0;}
.tl-cell{flex:1;min-width:var(--tl-cell-w,34px);border-right:1px solid var(--border);cursor:crosshair;position:relative;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:min-width .15s ease;}
/* Mobile cells: let the browser handle scroll natively, tap to create */
.tl-cell-mob{touch-action:pan-x pan-y;cursor:pointer;}
.tl-cell:last-child{border-right:none;}
.tl-cell.tday{background:var(--today);}
.tl-cell.wknd{background:#fafafa;}
.tl-cell.dh{background:#dce5ff!important;}
/* Past timeline cells — subtle tint, no drag cursor */
.tl-cell.tpast{background:#f7f8fb;cursor:default!important;}
/* Mobile two-tap selection highlight */
.tl-cell.mob-sel{background:rgba(124,58,237,.12)!important;}
.tl-cell.mob-sel-anchor{background:rgba(124,58,237,.28)!important;}
.bk{position:absolute;top:6px;height:calc(100% - 12px);border-radius:4px;display:flex;align-items:center;padding:0 7px;font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;z-index:10;box-shadow:0 1px 4px rgba(0,0,0,.12);}
.bk:hover{opacity:.85;}
.bk.airbnb{background:var(--airbnb);color:#fff;}
.bk.booking{background:var(--booking);color:#fff;}
.bk.mmt{background:var(--mmt);color:#fff;}
.bk.offline{background:var(--offline);color:#fff;}
.bk.blocked{background:var(--blocked);color:#fff;}

/* ── MONTH ── */
.mo-wrap{padding:14px 20px;}
.mo-grid{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.mo-dow{display:grid;grid-template-columns:repeat(7,1fr);background:#fafbff;border-bottom:1px solid var(--border);}
.mo-dow div{padding:8px;text-align:center;font-size:11px;font-weight:700;color:var(--muted);}
/* Week rows — each a 7-column grid with position:relative for absolutely placed booking spans */
.mo-weeks{}
.mo-week{display:grid;grid-template-columns:repeat(7,1fr);position:relative;border-bottom:1px solid var(--border);}
.mo-week:last-child{border-bottom:none;}
.mo-day{border-right:1px solid var(--border);padding:5px;cursor:crosshair;min-height:90px;}
.mo-day:nth-child(7n){border-right:none;}
.mo-day.other{background:#fafafa;} .mo-day.today{background:var(--today);} .mo-day.dh{background:#dce5ff!important;}
/* Past month cells — no new bookings allowed */
.mo-day.mpast{background:repeating-linear-gradient(135deg,transparent,transparent 4px,rgba(0,0,0,.025) 4px,rgba(0,0,0,.025) 8px);cursor:default!important;}
.mo-day.mpast .day-n{color:var(--muted);opacity:.6;}
.day-n{font-size:12px;font-weight:600;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-bottom:3px;}
.today .day-n{background:var(--accent);color:#fff;} .other .day-n{color:var(--muted);}
/* Continuous booking span — absolutely positioned across day columns */
.mo-bk-span{position:absolute;height:20px;display:flex;align-items:center;padding:0 7px;font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;z-index:2;pointer-events:auto;}
.mo-bk-span:hover{opacity:.82;box-shadow:0 1px 4px rgba(0,0,0,.18);}
.mo-bk-span.airbnb{background:var(--airbnb);color:#fff;}
.mo-bk-span.booking{background:var(--booking);color:#fff;}
.mo-bk-span.mmt{background:var(--mmt);color:#fff;}
.mo-bk-span.offline{background:var(--offline);color:#fff;}
.mo-bk-span.blocked{background:var(--blocked);color:#fff;}

/* ── MODAL ── */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;align-items:center;justify-content:center;}
.overlay.open{display:flex;}
.modal{background:var(--surface);border-radius:12px;padding:24px;width:420px;max-width:95vw;max-height:90dvh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.18);animation:mIn .18s ease;}
@keyframes mIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.modal h3{font-size:16px;font-weight:700;margin-bottom:16px;}
.fr{margin-bottom:12px;}
.fr label{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:4px;}
.fr input,.fr select,.fr textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;color:var(--text);background:var(--surface);outline:none;font-family:inherit;}
.fr input:focus,.fr select:focus{border-color:var(--accent);}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mact{display:flex;gap:8px;margin-top:16px;justify-content:flex-end;}
.bcnl{padding:8px 16px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;font-size:12px;font-weight:600;}
.bsav{padding:8px 16px;border-radius:7px;border:none;background:var(--accent);color:#fff;cursor:pointer;font-size:12px;font-weight:600;}

/* ── TOOLTIP ── */
.tip{position:fixed;background:#1a1d2e;color:#fff;padding:10px 13px;border-radius:8px;font-size:11px;pointer-events:none;z-index:500;display:none;box-shadow:0 4px 16px rgba(0,0,0,.2);max-width:230px;line-height:1.6;}
.tip.on{display:block;pointer-events:auto;}
.tr{display:flex;gap:6px;}
.tl{color:rgba(255,255,255,.6);}

/* ── MAIN NAV ── */
.main-nav{display:flex;align-items:center;background:var(--bg);border-radius:8px;padding:3px;gap:2px;flex:1;}
.mnav{padding:6px 18px;border-radius:6px;border:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);background:transparent;transition:all .15s;white-space:nowrap;}
.mnav.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.1);}
.mnav-badge{display:inline-block;background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:8px;margin-left:5px;vertical-align:middle;}

/* ── CAL CONTROLS BAR ── */
.cal-ctrl{display:flex;align-items:center;gap:8px;padding:9px 20px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;}

/* ── CAL NAV BAR — sits directly above the calendar grid ── */
.cal-nav-bar{display:flex;align-items:center;gap:10px;padding:8px 20px;background:var(--surface);border-bottom:1px solid var(--border);}
.cal-nav-bar .period-lbl{font-size:14px;font-weight:700;color:var(--text);min-width:160px;}

/* ── CRM SECTION ── */
.crm-subtabs{display:flex;gap:6px;border-bottom:2px solid var(--border);padding:10px 16px;background:var(--surface);overflow-x:auto;}
.ctab{padding:9px 16px;font-size:13px;font-weight:700;color:var(--muted);border:none;background:var(--bg);cursor:pointer;border-radius:10px;transition:all .15s;display:flex;align-items:center;gap:6px;white-space:nowrap;border:1.5px solid transparent;}
.ctab-txt-short{display:none;} /* shown only on mobile via media query */
.ctab:hover{color:var(--text);background:var(--border);}
.ctab.active{color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:0 2px 8px rgba(79,70,229,.25);}
.ctab-badge{background:rgba(255,255,255,.25);color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:20px;min-width:18px;text-align:center;}
.ctab:not(.active) .ctab-badge{background:#e8ecff;color:var(--accent);}
.ctab.pending-tab.active{background:#e74c3c;border-color:#e74c3c;box-shadow:0 2px 8px rgba(231,76,60,.25);}
.ctab.pending-tab:not(.active) .ctab-badge{background:#fde8e8;color:#e74c3c;}

/* ── CRM SECOND-LEVEL SUB-TABS ── */
.crm-sub2tabs{display:flex;gap:4px;padding:8px 20px 0;background:var(--surface);border-bottom:1px solid var(--border);}
.csub{padding:7px 14px;border:1.5px solid var(--border);border-radius:8px 8px 0 0;background:var(--bg);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;border-bottom:none;margin-bottom:-1px;white-space:nowrap;}
.csub:hover{border-color:var(--accent);color:var(--accent);background:var(--surface);}
.csub.active{background:var(--surface);border-color:var(--accent);color:var(--accent);border-bottom-color:var(--surface);}
.csub-badge{min-width:16px;padding:1px 5px;border-radius:10px;background:#e8ecff;color:var(--accent);font-size:10px;font-weight:700;text-align:center;}
.csub.active .csub-badge{background:var(--accent);color:#fff;}

/* ── CRM FILTER TILES ── */
.crm-filter-tiles{display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.cft-tile{display:flex;flex-direction:column;align-items:center;min-width:90px;padding:8px 20px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);cursor:pointer;transition:all .15s;user-select:none;}
.cft-tile:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(79,110,247,.12);}
.cft-tile.active{background:var(--accent);border-color:var(--accent);}
.cft-count{font-size:20px;font-weight:800;color:var(--text);line-height:1;}
.cft-tile.active .cft-count{color:#fff;}
.cft-label{font-size:10px;font-weight:600;color:var(--muted);margin-top:3px;white-space:nowrap;}
.cft-tile.active .cft-label{color:rgba(255,255,255,.8);}
.cft-intl.active{background:#be185d;border-color:#be185d;}
.cft-issues{border-color:#f59e0b;}
.cft-issues .cft-count{color:#d97706;}
.cft-issues.cft-issues-active .cft-count{font-weight:800;}
.cft-issues.active{background:#d97706;border-color:#d97706;}
@keyframes issue-tile-pulse{0%,100%{border-color:#f59e0b;}50%{border-color:#d97706;box-shadow:0 0 0 3px rgba(245,158,11,.2);}}
.cft-issues.cft-issues-active{animation:issue-tile-pulse 2s ease-in-out infinite;}
/* HK filter tile */
.cft-hk .cft-count{color:#d97706;}
.cft-hk.active{background:#d97706;border-color:#d97706;}
.cft-hk.cft-hk-active .cft-count{font-weight:800;}
@keyframes hk-tile-pulse{0%,100%{border-color:#f59e0b;}50%{border-color:#d97706;box-shadow:0 0 0 3px rgba(245,158,11,.2);}}
.cft-hk.cft-hk-active{animation:hk-tile-pulse 2s ease-in-out infinite;}
.cft-assignee{margin-left:8px;}
.crf-select{padding:7px 10px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:11px;cursor:pointer;outline:none;transition:border .15s;}
.crf-select:focus{border-color:var(--accent);}
.crf-search-wrap{display:flex;align-items:center;gap:7px;background:var(--surface);border:2px solid var(--accent);border-radius:10px;padding:7px 14px;margin-left:8px;transition:border .15s;box-shadow:0 0 0 3px rgba(79,70,229,.08);}
.crf-search-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,70,229,.15);}
.crf-search-icon{font-size:14px;line-height:1;}
.crf-search{border:none;outline:none;background:transparent;color:var(--text);font-size:13px;font-weight:500;width:200px;}
.crf-search::placeholder{color:var(--muted);font-weight:400;}
.crf-count{margin-left:auto;font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap;}
/* legacy — keep for mobile overrides */
.crf-group,.crf-label,.crf-pills,.crf-pill{display:none;}

.crm-stay-filter{display:flex;align-items:center;gap:8px;padding:8px 20px;background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.csf-btn{padding:5px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;}
.csf-btn:hover{border-color:var(--accent);color:var(--accent);}
.csf-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}

.crm-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;padding:20px;}

/* ── CRM TILE CARDS ── */
.crm-tile{background:var(--surface);border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.07);border:1px solid var(--border);transition:box-shadow .15s,border-color .15s;overflow:hidden;}
.crm-tile:hover{box-shadow:0 6px 24px rgba(0,0,0,.12);border-color:var(--accent);}
.ct-top{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 10px;}
.ct-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:800;flex-shrink:0;letter-spacing:-.5px;}
/* Identity block wraps avatar + info — plain div or anchor */
.ct-id-block{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;}
.ct-id-link{border-radius:10px;padding:4px 6px 4px 2px;margin:-4px -6px -4px -2px;transition:background .15s,box-shadow .15s;cursor:pointer;}
.ct-id-link:hover{background:#eff6ff;box-shadow:0 0 0 2px #93c5fd;}
.ct-id-link:hover .ct-guest{color:var(--accent);}
.ct-id-link:hover .ct-avatar{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent);}
.ct-plat-arrow{font-size:11px;color:var(--accent);opacity:.7;font-weight:600;vertical-align:super;line-height:0;}
/* Info block: takes all remaining width, truncates text */
.ct-info{flex:1;min-width:0;padding-right:4px;}
.ct-guest{font-size:15px;font-weight:800;color:var(--text);line-height:1.25;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ct-prop{font-size:11.5px;font-weight:600;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ct-ref{font-size:10px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:0 5px;margin-left:5px;letter-spacing:.3px;vertical-align:middle;}
/* Contact buttons — left side, flex-shrink:0 so they never get squeezed */
.ct-contact-btns{display:flex;gap:4px;align-items:center;flex-shrink:0;}
/* Right side — dates only, pushed to far right with margin-left:auto */
.ct-right{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;margin-left:auto;}
.ct-dates-badge{text-align:right;}
.ct-dates{font-size:11px;color:var(--muted);white-space:nowrap;}
.ct-nights{font-size:11px;font-weight:700;color:var(--text);margin-top:1px;text-align:right;}
.ct-tags{display:flex;gap:5px;flex-wrap:wrap;padding:0 16px 10px;}
.ctag{padding:3px 8px;border-radius:10px;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;}
.ctag.checkin{background:#dcfce7;color:#16a34a;}
.ctag.checkout{background:#fef9c3;color:#b45309;}
.ctag.hosting{background:#e0f2fe;color:#0369a1;}
.ctag.intl{background:#fce7f3;color:#be185d;}
.ctag.pending{background:#fde8e8;color:#e74c3c;}
.ctag.assigned{background:#f3e8ff;color:#7c3aed;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ct-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface);font-size:15px;cursor:pointer;text-decoration:none;transition:all .15s;color:var(--text);}
.ct-icon-btn:hover{border-color:var(--accent);background:#eef1ff;}
.ct-icon-btn.call:hover{border-color:#16a34a;background:#f0fdf4;}
.ct-icon-btn.wa{border:none;background:#25D366;color:#fff;}
.ct-icon-btn.wa:hover{background:#1ebe57;}
.ct-icon-btn.platform:hover{border-color:currentColor;}
.ct-icon-btn.disabled{opacity:.3;cursor:default;pointer-events:none;}
/* Task status flag toggles */
.ct-task-flags{display:flex;gap:6px;padding:8px 16px;border-top:1px solid var(--border);}
.ctf-btn{flex:1;padding:6px 4px;border:1.5px solid #d97706;border-radius:8px;background:#fef3c7;color:#d97706;font-size:10px;font-weight:600;cursor:pointer;text-align:center;transition:all .15s;user-select:none;}
.ctf-btn:hover{opacity:.8;}
.ctf-btn:active{transform:scale(.96);}
.ctf-btn.done{background:#dcfce7;border-color:#16a34a;color:#16a34a;}

/* Bulk bar task toggle buttons */
.bulk-task-checks{display:flex;gap:6px;align-items:center;}
.btc-btn{padding:6px 12px;border:1.5px solid var(--border);border-radius:8px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s;user-select:none;}
.btc-btn:hover{border-color:var(--accent);color:var(--accent);}
.btc-btn.all-done{background:#dcfce7;border-color:#16a34a;color:#16a34a;}
.btc-btn.some-done{background:#fef9c3;border-color:#ca8a04;color:#ca8a04;}
/* Keep old ct-actions hidden if rendered elsewhere */
.ct-actions{display:none;}

/* Open-issue amber highlights */
@keyframes issue-blink{
  0%,100%{border-color:var(--border);color:var(--text);background:transparent;}
  50%{border-color:#f59e0b;color:#d97706;background:#fef9c3;}
}
.ctab.issue-alert,.csub.issue-alert{animation:issue-blink 1.8s ease-in-out infinite;}

/* ── Open-issue tile highlight ── */
.crm-tile.has-open-issue{
  border:2px solid #f59e0b;
  border-left:4px solid #dc2626;
  background:linear-gradient(135deg,#fff7ed 0%,var(--surface) 50%);
  box-shadow:0 0 0 3px rgba(245,158,11,.15), 0 4px 16px rgba(220,38,38,.1);
}
.crm-tile.has-open-issue:hover{
  border-color:#dc2626;
  box-shadow:0 0 0 4px rgba(220,38,38,.18), 0 6px 24px rgba(220,38,38,.15);
}
/* Task flag row gets an amber tint when there's an open issue */
.crm-tile.has-open-issue .ct-task-flags{
  background:linear-gradient(90deg,#fff7ed,transparent);
  border-top-color:#fed7aa;
}
/* The open-issue tag becomes bold red */
.ctag.open-issue{
  background:#fef2f2;
  color:#dc2626;
  border:1.5px solid #fca5a5;
  font-weight:700;
  animation:issue-tag-pulse 2s ease-in-out infinite;
}
@keyframes issue-tag-pulse{
  0%,100%{background:#fef2f2;border-color:#fca5a5;}
  50%{background:#fee2e2;border-color:#f87171;}
}
.ct-note{padding:8px 16px;font-size:11px;color:var(--muted);border-top:1px solid var(--border);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.crm-empty{text-align:center;padding:70px 20px;color:var(--muted);}
.crm-empty .ce-icon{font-size:36px;margin-bottom:10px;}
.crm-empty .ce-msg{font-size:14px;font-weight:500;}
.crm-empty .ce-sub{font-size:12px;margin-top:4px;}

/* ── ISSUE LOGGER ── */
.il-add-btn{padding:6px 14px;border-radius:8px;border:1.5px solid var(--accent);background:transparent;color:var(--accent);font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;}
.il-add-btn:hover{background:var(--accent);color:#fff;}
.il-empty{font-size:12px;color:var(--muted);text-align:center;padding:20px 0;}
.il-loading{display:flex;justify-content:center;padding:20px;}
.il-issue-card{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:var(--bg);}
.il-issue-card:last-child{margin-bottom:0;}
.il-issue-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.il-cat-tag{font-size:11px;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:3px 8px;}
.il-status-badge{font-size:10px;font-weight:700;border-radius:20px;padding:3px 10px;}
.il-status-open{background:#fee2e2;color:#dc2626;}
.il-status-inprog{background:#fef3c7;color:#d97706;}
.il-status-resolved{background:#dcfce7;color:#16a34a;}
.il-edit-btn{margin-left:auto;font-size:10px;font-weight:600;color:var(--accent);background:none;border:none;cursor:pointer;padding:0;}
.il-issue-desc{font-size:12px;color:var(--text);line-height:1.5;margin-bottom:6px;}
.il-issue-card:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(79,110,247,.1);}
.il-assignee-chip{font-size:10px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2px 8px;}
.il-resolution{font-size:11px;color:#16a34a;background:#dcfce7;border-radius:6px;padding:6px 10px;margin-bottom:6px;}
.il-res-label{font-weight:700;}
.il-issue-meta{font-size:10px;color:var(--muted);}

/* Issue modal */
.il-modal-card{background:var(--surface);border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.2);width:100%;max-width:500px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;}
.il-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);font-size:14px;font-weight:700;color:var(--text);}
.il-modal-close{background:none;border:none;font-size:16px;cursor:pointer;color:var(--muted);line-height:1;}
.il-edit-toggle-btn{display:inline-flex;align-items:center;padding:5px 12px;border-radius:7px;border:1.5px solid var(--accent);background:transparent;color:var(--accent);font-size:11px;font-weight:700;cursor:pointer;}
.il-modal-body{padding:18px 20px;}
.il-modal-footer{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--border);}
.il-delete-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:8px;border:1.5px solid #fca5a5;background:transparent;color:#dc2626;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;}
.il-delete-btn:hover{background:#fef2f2;border-color:#dc2626;}
.il-field-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;}
.il-category-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.il-cat-btn{padding:6px 11px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;}
.il-cat-btn:hover{border-color:var(--accent);color:var(--accent);}
.il-cat-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.il-status-row{display:flex;gap:8px;margin-bottom:4px;flex-wrap:wrap;}
.il-status-btn{padding:7px 14px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;}
.il-status-btn:hover{border-color:var(--accent);}
.il-status-btn.active{border-width:2px;}
.il-status-btn[data-status="open"].active{background:#fee2e2;border-color:#dc2626;color:#dc2626;}
.il-status-btn[data-status="in_progress"].active{background:#fef3c7;border-color:#d97706;color:#d97706;}
.il-status-btn[data-status="resolved"].active{background:#dcfce7;border-color:#16a34a;color:#16a34a;}

/* Priority buttons */
.il-priority-row{display:flex;gap:8px;margin-bottom:4px;flex-wrap:wrap;}
.il-pri-btn{padding:7px 14px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;}
.il-pri-btn:hover{border-color:var(--accent);}
.il-pri-btn.active{border-width:2px;}
.il-pri-btn[data-pri="low"].active{background:#dcfce7;border-color:#16a34a;color:#16a34a;}
.il-pri-btn[data-pri="medium"].active{background:#fef3c7;border-color:#d97706;color:#d97706;}
.il-pri-btn[data-pri="high"].active{background:#ffedd5;border-color:#ea580c;color:#ea580c;}
.il-pri-btn[data-pri="critical"].active{background:#fee2e2;border-color:#dc2626;color:#dc2626;}

/* View panel */
.il-view-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.il-view-desc{font-size:13px;color:var(--text);line-height:1.6;margin-bottom:10px;}
.il-view-field{font-size:12px;color:var(--text);margin-bottom:6px;}
.il-view-lbl{font-weight:700;color:var(--muted);margin-right:4px;}

/* History timeline */
.il-history-section{padding:0 20px 20px;}
.il-history-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:14px;padding-top:14px;border-top:1px solid var(--border);}
.il-hist-item{display:flex;gap:12px;position:relative;padding-bottom:16px;}
.il-hist-item:not(.il-hist-last)::before{content:'';position:absolute;left:7px;top:16px;bottom:0;width:2px;background:var(--border);}
.il-hist-dot{width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);box-shadow:0 0 0 2px var(--accent);flex-shrink:0;margin-top:2px;}
.il-hist-last .il-hist-dot{background:var(--surface);border-color:var(--accent);}
.il-hist-content{flex:1;padding-top:0;}
.il-hist-detail{font-size:12px;color:var(--text);line-height:1.5;margin-bottom:3px;}
.il-hist-meta{font-size:10px;color:var(--muted);}

/* ── ADMIN INLINE ── */
#sec-adm .atab-bar{border-bottom:2px solid var(--border);padding:0 20px;background:var(--surface);display:flex;}
#sec-adm .admin-body{max-width:900px;margin:0 auto;padding:24px 20px;}

/* ── LOADING / ERROR ── */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px;gap:14px;color:var(--muted);}
.spin{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0;}
@keyframes spin{to{transform:rotate(360deg)}}
.err-box{padding:40px;text-align:center;color:var(--muted);}
.err-box .icon{font-size:28px;margin-bottom:10px;}
.err-box .msg{font-size:13px;color:#e74c3c;margin-top:6px;word-break:break-all;}

/* ── GLOBAL REFRESH LOADER ── */
/* Covers entire viewport, shown when Refresh is clicked regardless of active tab */
.g-loader{position:fixed;inset:0;z-index:1500;background:rgba(245,246,250,.9);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;}
.g-loader-card{background:var(--surface);border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.15);padding:40px 48px;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:260px;}
.g-loader-msg{font-size:16px;font-weight:700;color:var(--text);}
.g-loader-sub{font-size:12px;color:var(--muted);text-align:center;}

/* ── DETAILS PANEL LOADER ── */
/* Covers the details panel while fetching booking data from Sheets */
.dp-loader-overlay{position:fixed;inset:0;z-index:310;background:rgba(245,246,250,.82);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;}
.dp-loader-box{background:var(--surface);border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.12);padding:28px 36px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.dp-loader-msg{font-size:13px;font-weight:600;color:var(--muted);}

/* ═══════════════════════════════════════════════════
   DETAILS PANEL
   ═══════════════════════════════════════════════════ */
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
.dp-hdr{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 20px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:10;box-shadow:var(--shadow);}
.dp-back{background:none;border:1px solid var(--border);border-radius:7px;padding:6px 14px;cursor:pointer;font-size:13px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px;}
.dp-back:hover{border-color:var(--accent);color:var(--accent);}

/* Two-column layout: left=cards, right=WhatsApp */
.dp-assign-bar{background:#fafbff;border-bottom:1px solid var(--border);padding:10px 20px;position:sticky;top:64px;z-index:9;display:flex;}
.dp-assign-bar-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:10px;flex:1;padding-right:20px;}

/* Save button in the action bar — aligns with WhatsApp sidebar (340px) */
.dp-save-top{
  width:340px !important;
  padding:5px 14px;
  font-size:11px;
  border-radius:6px;
  white-space:nowrap;
  flex-shrink:0;
  align-self:center;
  margin-left:auto;
  font-weight:700;
}

/* Dirty / unsaved state — pulses amber to draw attention */
.dp-save-dirty{
  background:#f59e0b !important;
  animation:save-pulse 1.6s ease-in-out infinite;
}
.dp-save-dirty:hover{opacity:1 !important;background:#d97706 !important;}
@keyframes save-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.5);}
  50%     {box-shadow:0 0 0 7px rgba(245,158,11,0);}
}

/* Per-field inline save buttons */
.dp-field-save{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:7px;padding:5px 14px;
  border-radius:6px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--muted);
  font-size:11px;font-weight:700;cursor:pointer;
  transition:all .15s;letter-spacing:.3px;
}
.dp-field-save:hover{border-color:var(--accent);color:var(--accent);}
.dp-field-save.dirty{
  border-color:var(--accent);color:var(--accent);
  background:#f0edff;
  animation:save-pulse 1.6s ease-in-out infinite;
}
.dp-field-save:disabled{opacity:.5;cursor:not-allowed;animation:none;}
.dp-body{max-width:1220px;margin:0 auto;padding:16px 20px;display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start;}
.dp-main{display:flex;flex-direction:column;gap:14px;}
.dp-sidebar{position:sticky;top:64px;display:flex;flex-direction:column;gap:0;}
/* WhatsApp collapsible accordion */
.dp-wa-card{border:2px solid #25D36622;}
.dp-wa-toggle-hdr{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:2px 0;user-select:none;}
.dp-wa-toggle-hdr:hover .dp-wa-chevron{color:var(--accent);}
.dp-wa-chevron{font-size:14px;color:var(--muted);transition:transform .2s ease;}
.dp-wa-chevron.open{transform:rotate(180deg);}
.dp-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;}
.dp-card-info{padding:14px 18px;}
.dp-card h4{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.5px;margin-bottom:12px;text-transform:uppercase;}
/* Card header row — title left, check-chips right */
.dp-card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px;}
.dp-hdr-checks{display:flex;gap:6px;flex-shrink:0;}
/* Compact check chips — replace the old full-row check-item */
.dp-check-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg);font-size:11px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;user-select:none;white-space:nowrap;}
.dp-check-chip input[type=checkbox]{display:none;}
.dp-check-chip:hover{border-color:var(--accent);color:var(--accent);}
.dp-check-chip.checked{background:#dcfce7;border-color:#16a34a;color:#16a34a;font-weight:700;}
.dp-check-chip.checked::before{content:'✓ ';font-weight:800;}
/* Two-column layout for First Call + Review Call */
.dp-calls-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
.dp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.dp-field{display:flex;flex-direction:column;gap:3px;}
.dp-field .lbl{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;}
.dp-field .val{font-size:14px;font-weight:500;color:var(--text);}
.dp-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;color:#fff;}
.dp-badge.airbnb{background:var(--airbnb);} .dp-badge.booking{background:var(--booking);}
.dp-badge.mmt{background:var(--mmt);} .dp-badge.offline{background:var(--offline);} .dp-badge.blocked{background:var(--blocked);}
.checklist{display:flex;flex-direction:column;gap:12px;}
.check-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s;}
.check-item:hover{border-color:var(--accent);background:#f8f9ff;}
.check-item.checked{border-color:#2ecc71;background:#edfaf3;}
.check-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.check-item .ci-label{flex:1;}
.check-item .ci-title{font-size:13px;font-weight:600;color:var(--text);}
.check-item .ci-desc{font-size:11px;color:var(--muted);margin-top:2px;}
.check-item .ci-icon{font-size:20px;}
.dp-textarea{width:100%;min-height:120px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text);font-family:inherit;resize:vertical;outline:none;line-height:1.5;}
.dp-textarea:focus{border-color:var(--accent);}
.dp-save{width:100%;padding:12px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s;}
.dp-save:hover{opacity:.88;}
.dp-save:disabled{opacity:.5;cursor:not-allowed;}
.dp-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1a1d2e;color:#fff;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:600;opacity:0;transition:opacity .3s;pointer-events:none;z-index:400;}
.dp-toast.show{opacity:1;}

/* ── DETAIL SECTION — FIRST CALL / REVIEW CALL ── */
.dp-toggle-row{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;background:var(--bg);}
.dp-toggle-label{flex:1;font-size:12px;font-weight:600;}
.dp-toggle-sub{font-size:11px;color:var(--muted);margin-top:1px;}
.dp-toggle{position:relative;width:42px;height:24px;flex-shrink:0;}
.dp-toggle input{opacity:0;width:0;height:0;}
.dp-toggle-slider{position:absolute;inset:0;background:#ccc;border-radius:12px;cursor:pointer;transition:.25s;}
.dp-toggle input:checked + .dp-toggle-slider{background:var(--accent);}
.dp-toggle-slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.25s;}
.dp-toggle input:checked + .dp-toggle-slider:before{transform:translateX(18px);}
.dp-toggle.green input:checked + .dp-toggle-slider{background:#2ecc71;}
.dp-star-row{display:flex;gap:6px;align-items:center;}
.dp-star{font-size:24px;cursor:pointer;color:#ddd;transition:color .1s;}
.dp-star.on{color:#f1c40f;}
.dp-field-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;margin-bottom:6px;}
.dp-assign-row{display:flex;align-items:center;gap:8px;}

/* ── MULTI-SELECT ASSIGN COMBO (details panel) ── */
.assign-combo{display:flex;align-items:center;flex-wrap:wrap;gap:5px;flex:1;}
/* Chip = one assigned user */
.assign-chip{display:inline-flex;align-items:center;gap:4px;background:#eef1ff;color:var(--accent);border:1px solid #c7d2fe;border-radius:12px;padding:3px 8px 3px 9px;font-size:11px;font-weight:600;max-width:160px;}
.assign-chip .chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.assign-chip .chip-x{cursor:pointer;opacity:.5;font-size:12px;line-height:1;flex-shrink:0;margin-left:2px;}
.assign-chip .chip-x:hover{opacity:1;color:#e74c3c;}
/* "+ Add" button */
.assign-add-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:12px;border:1px dashed var(--border);background:transparent;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s;}
.assign-add-btn:hover{border-color:var(--accent);color:var(--accent);background:#f0f3ff;}
.assign-arrow{font-size:10px;user-select:none;transition:transform .2s;pointer-events:none;}
.assign-arrow.open{display:inline-block;transform:rotate(180deg);}

/* The dropdown renders at position:fixed — always above overflow:auto containers */
.assign-list{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.16);z-index:9999;overflow-y:auto;max-height:260px;min-width:200px;}
/* Inline search inside dropdown */
.assign-list-search{padding:7px 10px;border-bottom:1px solid var(--border);background:#fafbff;position:sticky;top:0;}
.assign-list-search input{width:100%;border:1px solid var(--border);border-radius:5px;padding:5px 8px;font-size:12px;outline:none;font-family:inherit;}
/* Options */
.assign-opt{display:flex;align-items:center;gap:9px;padding:9px 12px;font-size:12px;cursor:pointer;color:var(--text);border-bottom:1px solid var(--border);}
.assign-opt:last-child{border-bottom:none;}
.assign-opt:hover{background:#f0f3ff;}
.assign-opt.checked{background:#eef1ff;}
/* Checkbox icon inside option */
.asgn-chk{width:16px;height:16px;border:1.5px solid var(--border);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px;color:#fff;background:var(--surface);transition:all .15s;}
.assign-opt.checked .asgn-chk{background:var(--accent);border-color:var(--accent);}
.assign-opt.unassigned{color:#e74c3c;font-size:11px;font-weight:600;}
.assign-no-results{padding:10px 14px;font-size:12px;color:var(--muted);text-align:center;}

/* ── TILE ASSIGN SECTION (chip display only) ── */
.ct-assign{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:8px 14px 10px;border-top:1px solid var(--border);}
.ct-asgn-chip{display:inline-flex;align-items:center;gap:3px;background:#f3e8ff;color:#7c3aed;border-radius:10px;padding:2px 7px;font-size:10px;font-weight:700;letter-spacing:.2px;}
.ct-asgn-chip .chip-x{opacity:.5;cursor:pointer;margin-left:1px;font-size:10px;}
.ct-asgn-chip .chip-x:hover{opacity:1;color:#e74c3c;}

/* ── TILE CHECKBOX for multi-select ── */
.crm-tile{position:relative;}
.ct-checkbox{position:absolute;top:10px;right:10px;width:18px;height:18px;border:2px solid var(--border);border-radius:4px;background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;z-index:5;transition:all .15s;opacity:0;}
.crm-tile:hover .ct-checkbox{opacity:1;}
.ct-checkbox.checked{opacity:1;background:var(--accent);border-color:var(--accent);color:#fff;}
.crm-tile.tile-selected{border-color:var(--accent);box-shadow:0 0 0 2px #4f6ef755;background:#fafbff;}
.crm-tile.tile-selected .ct-checkbox{opacity:1;}

/* ── BULK ASSIGN BAR ── */
.crm-bulk-bar{background:var(--surface);border-top:2px solid var(--accent);padding:12px 20px;display:flex;align-items:center;gap:12px;position:sticky;bottom:0;z-index:50;box-shadow:0 -4px 20px rgba(79,110,247,.12);animation:slideUp .18s ease;}
@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}

/* ── BULK TASK MENU ── */
.bulk-task-wrap{position:relative;}
.bulk-task-menu{position:absolute;bottom:calc(100% + 6px);right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.18);min-width:190px;z-index:200;overflow:hidden;animation:fadeIn .12s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.btm-item{padding:10px 16px;font-size:13px;cursor:pointer;transition:background .12s;white-space:nowrap;}
.btm-item:hover{background:var(--bg);}
.btm-divider{height:1px;background:var(--border);margin:2px 0;}
.btm-all{font-weight:700;color:var(--accent);}

/* ── iCAL EXPORT TAB ── */
.ical-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:10px;transition:box-shadow .15s;flex-wrap:wrap;}
.ical-row:hover{box-shadow:0 2px 12px rgba(0,0,0,.08);}
.ical-row-all{border-color:var(--accent);background:rgba(79,110,247,.04);}
.ical-prop-info{min-width:160px;flex-shrink:0;}
.ical-prop-name{font-size:14px;font-weight:700;color:var(--text);}
.ical-prop-meta{font-size:11px;color:var(--muted);margin-top:2px;}
.ical-url-wrap{display:flex;align-items:center;gap:6px;flex:1;min-width:0;}
.ical-url-input{flex:1;min-width:0;padding:5px 10px;border:1.5px solid var(--border);border-radius:7px;background:var(--bg);color:var(--muted);font-size:11px;font-family:monospace;cursor:text;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ical-copy-btn{white-space:nowrap;padding:5px 12px;font-size:11px;flex-shrink:0;}
.ical-dl-btn{white-space:nowrap;padding:5px 12px;font-size:11px;flex-shrink:0;}
.ical-section-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;padding:12px 4px 4px;}

/* ── MAP EDIT MODE ── */
.map-edit-row{background:rgba(79,110,247,.04);}
.map-cell-input{width:100%;padding:5px 8px;border:1.5px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:12px;transition:border .15s;}
.map-cell-input:focus{outline:none;border-color:var(--accent);background:var(--surface);}
.map-cell-input:hover{border-color:var(--accent);}
.map-cell-input[readonly]{background:var(--surface);color:var(--muted);cursor:default;border-style:dashed;}
.map-cell-required{border-color:#f59e0b !important;}
.map-new-row{background:rgba(245,158,11,.06) !important;border-left:3px solid #f59e0b;}
.map-new-badge{display:inline-block;font-size:9px;font-weight:800;background:#f59e0b;color:#fff;border-radius:4px;padding:1px 5px;margin-right:5px;vertical-align:middle;letter-spacing:.5px;}
.map-pending-sep{background:rgba(245,158,11,.08);color:#b45309;font-size:11px;font-weight:700;padding:8px 12px;border-top:2px solid #f59e0b;border-bottom:1px solid #fde68a;letter-spacing:.2px;}
#map-edit-bar{display:none;}
.bulk-count{font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap;}

/* ═══════════════════════════════════════════════════
   ADMIN PANEL
   ═══════════════════════════════════════════════════ */
.atab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);padding:0 20px;background:var(--surface);}
.atab{padding:12px 20px;font-size:13px;font-weight:600;color:var(--muted);border:none;background:none;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .15s;}
.atab.active{color:var(--accent);border-bottom-color:var(--accent);}
.admin-body{max-width:900px;margin:0 auto;padding:24px 20px;}
.admin-section{display:none;} .admin-section.active{display:block;}
.adm-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:16px;}
.adm-card h4{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:14px;}
.tmpl-list{display:flex;flex-direction:column;gap:10px;}
.tmpl-item{border:1px solid var(--border);border-radius:8px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;}
.tmpl-item:hover{border-color:var(--accent);}
.tmpl-info{flex:1;min-width:0;}
.tmpl-name{font-size:13px;font-weight:700;margin-bottom:4px;}
.tmpl-plat{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;background:var(--bg);color:var(--muted);border:1px solid var(--border);margin-bottom:6px;}
.tmpl-body{font-size:11px;color:var(--muted);line-height:1.5;white-space:pre-wrap;max-height:60px;overflow:hidden;mask-image:linear-gradient(to bottom,#000 60%,transparent);}
.tmpl-actions{display:flex;gap:6px;flex-shrink:0;}
.icon-btn{padding:5px 10px;border-radius:6px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);transition:all .15s;}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);}
.icon-btn.danger:hover{border-color:#e74c3c;color:#e74c3c;}
.map-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.mf{padding:4px 14px;border-radius:16px;border:1px solid var(--border);font-size:11px;font-weight:600;cursor:pointer;background:var(--surface);color:var(--muted);}
.mf.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.map-table{width:100%;border-collapse:collapse;font-size:12px;}
.map-table th{text-align:left;padding:8px 10px;background:#fafbff;border-bottom:2px solid var(--border);font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;}
.map-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
.map-table tr:last-child td{border-bottom:none;}
.map-table tr:hover td{background:#fafbff;}
.plat-badge{padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;color:#fff;white-space:nowrap;}
.plat-badge.airbnb{background:var(--airbnb);} .plat-badge.booking{background:var(--booking);}
.plat-badge.mmt{background:var(--mmt);} .plat-badge.offline{background:var(--offline);}
.adm-add-btn{display:flex;align-items:center;gap:7px;padding:9px 18px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-size:13px;font-weight:700;cursor:pointer;margin-bottom:16px;}
.adm-add-btn:hover{opacity:.88;}
.adm-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;align-items:center;justify-content:center;}
.adm-overlay.open{display:flex;}
.adm-modal{background:var(--surface);border-radius:12px;padding:24px;width:540px;max-width:96vw;max-height:90vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.2);animation:mIn .18s ease;}
.adm-modal h3{font-size:16px;font-weight:700;margin-bottom:16px;}
.af{margin-bottom:12px;}
.af label{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:4px;}
.af input,.af select,.af textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;color:var(--text);background:var(--surface);outline:none;font-family:inherit;}
.af input:focus,.af select:focus,.af textarea:focus{border-color:var(--accent);}
.af textarea{resize:vertical;}
.placeholder-hint{font-size:10px;color:var(--muted);margin-top:4px;}
.placeholder-hint code{background:var(--bg);padding:1px 5px;border-radius:3px;border:1px solid var(--border);font-size:10px;}
.af2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.adm-mact{display:flex;gap:8px;margin-top:18px;justify-content:flex-end;}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — MOBILE & TABLET
   ═══════════════════════════════════════════════════ */

/* ── TABLET (≤ 900px) ── */
@media (max-width:900px) {
  .dp-body{grid-template-columns:1fr;gap:16px;}
  .dp-sidebar{position:static;top:auto;}
  .dp-calls-row{grid-template-columns:1fr;}
  .tl-lbl-col,.tl-pl{width:120px;min-width:120px;}
}

/* ══════════════════════════════════════════════════
   MOBILE + TABLET + LANDSCAPE  (≤ 1024px)
   ══════════════════════════════════════════════════ */
@media (max-width:1024px) {

  /* ━━ HEADER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Layout: [Brand] [· · · ·] [SignOut][☰]  then hamburger drops menu
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* Header: single compact row */
  .hdr-inner{padding:6px 12px;min-height:46px;gap:8px;}
  .brand{flex:0 0 auto;}
  .brand-name{font-size:13px;}
  .brand-sub{display:none;}
  .brand-icon{width:28px;height:28px;font-size:12px;}
  /* Hide desktop nav + standalone Sync btn, show hamburger */
  .main-nav{display:none !important;}
  .hdr-hamburger{display:flex;}
  #hdr-user{display:none;}
  .hdr-inner{flex-wrap:nowrap;}
  .hdr-right{gap:6px;}
  .sync-lbl{display:none;}
  #hdr-refresh-btn{padding:5px 8px;font-size:13px;}
  .hdr-right .btn{padding:5px 8px;font-size:11px;white-space:nowrap;}

  /* ━━ CAL CONTROLS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .cal-ctrl{padding:7px 12px;gap:8px;flex-wrap:nowrap;}
  .view-toggle{flex-shrink:0;}
  .vbtn{padding:5px 10px;font-size:12px;}
  .cal-add-btn{font-size:11px;padding:6px 10px;}

  /* ━━ STATUS BAR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .status-bar{padding:3px 12px;font-size:10px;gap:5px;}
  .status-bar .sync-ts{display:none;}
  /* Zoom controls — hide on mobile (not useful, pinch to zoom works) */
  .tl-zoom-wrap{display:none;}
  /* Filter bar — slightly tighter */
  .tl-filter-bar{padding:5px 10px;gap:6px;}
  .tl-filter-input{font-size:12px;}
  .tl-type-select{font-size:12px;padding:3px 6px;}

  /* ━━ LEGEND  — horizontal scroll, hide drag hint ━ */
  .legend{
    padding:5px 12px;
    gap:10px;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .legend > span:first-child{flex-shrink:0;}
  .legend > span:last-child{display:none;}  /* "Drag across dates…" */
  .li{font-size:10px;flex-shrink:0;}

  /* ━━ SUMMARY STATS — hidden on mobile to maximise calendar space ━━ */
  .summary{ display:none !important; }

  /* ━━ MOBILE BOOKING HINT ━━━━━━━━━━━━━━━━━━━━━━━ */
  .tl-mob-prompt{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:12px;
    font-weight:500;
    color:var(--accent);
    background:rgba(79,110,247,.09);
    border:1px solid rgba(79,110,247,.18);
    border-radius:10px;
    margin:6px 10px 4px;
    padding:8px 14px;
    text-align:center;
    line-height:1.4;
    animation:mob-prompt-blink 2s ease-in-out infinite;
  }
  .tl-mob-prompt-icon{font-size:16px;flex-shrink:0;}

  /* ━━ PROPERTY SELECTOR (month view) ━━━━━━━━━━━ */
  .prop-tabs{padding:6px 12px;gap:6px;}
  .prop-label{display:none;}        /* hide "Property:" label — saves space */
  .prop-search-wrap{flex:1;min-width:0;}

  /* ━━ CAL NAV BAR (← month/period →) ━━━━━━━━━━ */
  .cal-nav-bar{padding:6px 12px;gap:8px;}
  .cal-nav-bar .period-lbl{
    flex:1;
    text-align:center;
    font-size:13px;
    min-width:0;
  }
  .nav-btn{width:36px;height:36px;font-size:16px;} /* bigger tap target */
  .today-nav-btn{
    background:var(--accent);
    color:#fff !important;
    border-color:var(--accent);
    padding:0 14px;
    font-size:12px;
    border-radius:18px;
    width:auto;
    -webkit-tap-highlight-color:transparent;
  }
  .today-nav-btn:hover,.today-nav-btn:active{opacity:.88;background:var(--accent);}

  /* ━━ TIMELINE VIEW ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Freeze panes: header rows + property column both sticky
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .tl-wrap{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    padding:8px 0 8px 0;
  }
  .tl-con{min-width:600px;}
  /* Frozen property column — slightly wider for readability */
  .tl-lbl-col{width:82px;min-width:82px;}
  .tl-pl{
    width:82px;min-width:82px;
    padding:6px 6px;
    font-size:10px;
    overflow:hidden;
  }
  .tl-pl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:70px;}
  .tl-pl span,.tl-pl-id{font-size:8px !important;}
  .tl-dc{min-width:max(26px,var(--tl-cell-w,26px));font-size:9px;}
  .tl-dc .dow{font-size:8px;}
  .tl-row{margin-bottom:5px;}
  .tl-grid{min-height:40px;}
  .bk{font-size:8px;padding:0 3px;top:4px;height:calc(100% - 8px);}
  /* Month-span label row */
  .tl-month-span{font-size:9px;padding:3px 4px;}

  /* ━━ MONTH CALENDAR VIEW ━━━━━━━━━━━━━━━━━━━━━━ */
  .mo-wrap{padding:6px;}
  .mo-grid{border-radius:6px;}
  .mo-dow div{
    padding:4px 1px;
    font-size:8px;
    font-weight:800;
  }
  .mo-day{
    min-height:56px;
    padding:2px;
    cursor:default;   /* tap-friendly — no crosshair cursor */
  }
  .day-n{
    font-size:10px;
    width:18px;
    height:18px;
    margin-bottom:1px;
  }
  /* Booking spans in month view */
  .mo-bk-span{
    height:14px;
    font-size:8px;
    padding:0 3px;
    border-radius:2px !important;
  }

  /* ━━ CRM SUBTABS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .crm-subtabs{
    padding:6px 8px;
    gap:6px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    flex-wrap:nowrap;
    justify-content:flex-start;
  }
  .crm-subtabs::-webkit-scrollbar{display:none;}
  .ctab{
    flex:0 0 auto;          /* don't stretch — scroll instead */
    padding:8px 12px;
    font-size:12px;
    gap:4px;
    white-space:nowrap;
  }
  .ctab-txt      { display:none; }   /* hide long label */
  .ctab-txt-short{ display:inline; } /* show short label */
  .ctab-badge{font-size:10px;padding:2px 5px;}

  .crm-sub2tabs{
    padding:6px 8px 0;
    gap:4px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    flex-wrap:nowrap;
  }
  .crm-sub2tabs::-webkit-scrollbar{display:none;}
  .csub{flex:0 0 auto;padding:6px 11px;font-size:11px;}

  /* ━━ CRM FILTER TILES ━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .crm-filter-tiles{padding:8px 10px;gap:6px;}
  .cft-tile{min-width:72px;padding:6px 14px;}
  .cft-count{font-size:17px;}
  .cft-label{font-size:9px;}
  .crf-search-wrap{margin-left:0;width:100%;box-shadow:none;}
  .crf-search{width:100%;}
  .crf-count{margin-left:0;width:100%;text-align:right;}

  /* ━━ CRM TILES — single column ━━━━━━━━━━━━━━━━ */
  .crm-tiles{
    grid-template-columns:1fr;
    padding:10px;
    gap:12px;
  }
  .ct-icon-btn{width:26px;height:26px;font-size:13px;}
  .ctf-btn{font-size:9px;padding:5px 3px;}

  /* ━━ BULK ASSIGN BAR ━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .crm-bulk-bar{
    flex-wrap:wrap;
    padding:10px 12px;
    gap:8px;
  }
  .bulk-count{width:100%;font-size:12px;}
  .crm-bulk-bar > span:not(.bulk-count){font-size:11px;}
  #bulk-assign-combo{max-width:100%;width:100%;}
  .crm-bulk-bar .btn{flex:1;}

  /* ━━ DETAILS PANEL ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .dp-body{
    grid-template-columns:1fr;
    padding:12px;
    gap:14px;
  }
  .dp-sidebar{position:static;top:auto;gap:12px;}
  .dp-hdr{padding:10px 12px;gap:8px;flex-wrap:wrap;}
  .dp-hdr > div:last-child{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  #d-title{font-size:15px;}
  #d-view-btn{font-size:11px;padding:6px 10px;}
  .dp-assign-bar{padding:8px 12px;top:54px;}
  .dp-card{padding:14px;}
  .dp-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .dp-save{font-size:13px;padding:11px;}
  .dp-save-top{width:auto !important;}

  /* Two-col form grids → single col */
  .f2{grid-template-columns:1fr;}
  .af2{grid-template-columns:1fr;}

  /* ━━ MODALS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* Align overlay to top so modal sits above the soft keyboard */
  .overlay{align-items:flex-start;padding:16px 10px;}
  .modal{padding:16px 14px;border-radius:10px;max-height:85dvh;width:100%;}
  .modal h3{font-size:14px;margin-bottom:12px;}
  .mact{flex-direction:row;}

  /* ━━ ADMIN ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .admin-body{padding:10px 8px;}
  .adm-modal{padding:16px 12px;}
  .adm-modal h3{font-size:14px;}
  .tmpl-item{flex-direction:column;gap:8px;}
  .tmpl-actions{flex-direction:row;}
  .map-table{font-size:10px;}
  .map-table th,.map-table td{padding:5px 6px;}

  /* ── Admin top tab bar: horizontal scroll instead of overflow wrap ── */
  .atab-bar{overflow-x:auto;flex-wrap:nowrap;padding:0 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .atab-bar::-webkit-scrollbar{display:none;}
  .atab{padding:10px 12px;font-size:11px;white-space:nowrap;flex-shrink:0;}

  /* ── Property sub-tabs ─────────────────────────────────────────────── */
  .prop-stab-bar{overflow-x:auto;flex-wrap:nowrap;padding:8px 8px 0;gap:4px;scrollbar-width:none;}
  .prop-stab-bar::-webkit-scrollbar{display:none;}
  .prop-stab{padding:7px 12px;font-size:11px;white-space:nowrap;flex-shrink:0;}

  /* ── Lock Codes sub-tabs ───────────────────────────────────────────── */
  .lc-subtab-bar{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
  .lc-subtab-bar::-webkit-scrollbar{display:none;}
  .lc-stab{white-space:nowrap;flex-shrink:0;font-size:11px;padding:6px 12px;}

  /* ── Property Attributes: full-width stacked on mobile ─────────────── */
  /* The container becomes a single column; the right panel slides over */
  #prop-attr-container{flex-direction:column;height:auto;overflow:visible;}
  #prop-attr-left{width:100%;border-right:none;border-bottom:1px solid var(--border);padding:0 8px 8px;}
  #prop-attr-right{
    position:fixed;inset:54px 0 0 0;   /* fullscreen below fixed header */
    z-index:300;
    flex-direction:column;
    background:var(--surface);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    display:none;                      /* JS shows/hides as before */
  }
  /* Ensure close/save buttons are always visible at bottom */
  .paf-footer{position:sticky;bottom:0;z-index:1;background:var(--bg);}

  /* ── Tables inside admin: always scrollable ────────────────────────── */
  .adm-card{overflow:hidden;}
  .adm-card table,.map-table{display:block;overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch;}

  /* ── Import dropzone compact ───────────────────────────────────────── */
  .import-dropzone{padding:18px 12px;font-size:12px;}

  /* ── iCal list ─────────────────────────────────────────────────────── */
  #ical-property-list{gap:8px;}

  /* ━━ ASSIGN DROPDOWN ━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .assign-list{
    min-width:200px;
    max-height:50vh;   /* never taller than half-screen on phone */
  }

  /* ━━ TOOLTIP ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .tip{
    max-width:calc(100vw - 24px);
    font-size:12px;
    padding:12px 14px;
  }

  /* ━━ GLOBAL LOADER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .g-loader-card{padding:24px 20px;min-width:180px;}
  .g-loader-msg{font-size:14px;}
}

/* ══════════════════════════════════════════════════
   SMALL PHONE  (≤ 400px)
   ══════════════════════════════════════════════════ */
@media (max-width:400px) {
  .brand-name{font-size:12px;}
  .mnav{font-size:10px;padding:5px 3px;}
  /* Stats: stack to full-width */
  /* Timeline property col even narrower on very small screens */
  .tl-lbl-col,.tl-pl{width:60px;min-width:60px;}
  /* CRM tabs: already handled in 768px breakpoint */
  /* Month day cells */
  .mo-day{min-height:48px;}
  .mo-bk-span{height:12px;font-size:7px;}
}


/* ═══════════════════════════════════════════════════
   MIC / VOICE DICTATION
   ═══════════════════════════════════════════════════ */
.mic-wrap{position:relative;display:block;}
.mic-wrap .dp-textarea{padding-right:38px;}
.mic-btn{
  position:absolute;
  top:7px;right:7px;
  width:26px;height:26px;
  border-radius:50%;
  border:1.5px solid var(--border);
  background:#fff;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
  padding:0;
  z-index:2;
}
.mic-btn:hover{border-color:var(--accent);background:#eef1ff;}
.mic-btn-active{
  background:#e74c3c !important;
  border-color:#e74c3c !important;
  color:#fff;
  animation:mic-pulse 1s infinite;
}
@keyframes mic-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,.4);}
  50%     {box-shadow:0 0 0 6px rgba(231,76,60,0);}
}

/* ═══════════════════════════════════════════════════
   UNMAPPED PROPERTIES ALERT
   ═══════════════════════════════════════════════════ */
.unmapped-card{border:1.5px solid #fde68a !important;background:#fffbeb !important;}
.unmapped-card h4{color:#b45309;}
.unmapped-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  background:#fff;border:1px solid #fde68a;
  border-radius:7px;margin-bottom:8px;
}
.unmapped-name{flex:1;font-size:12px;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Amber badge on nav / tab */
.mnav-badge-warn{background:#f59e0b !important;}
.atab-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:#f59e0b;color:#fff;
  font-size:10px;font-weight:700;margin-left:5px;vertical-align:middle;
}

/* ═══════════════════════════════════════════════════
   REFRESH PENDING — blinking header button
   ═══════════════════════════════════════════════════ */
#hdr-refresh-btn.refresh-pending {
  background: #7c3aed !important;
  color: #fff !important;
  border-color: #7c3aed !important;
  animation: refresh-blink 1.4s ease-in-out infinite;
}
@keyframes refresh-blink {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(124,58,237,.5); }
  50%      { opacity: .85; box-shadow: 0 0 0 6px rgba(124,58,237,0); }
}

/* ═══════════════════════════════════════════════════
   DETAILS PANEL — booking info meta row
   ═══════════════════════════════════════════════════ */
.dp-info-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.dp-view-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 5px 10px;
  border: 1.5px solid var(--accent);
  border-radius: 7px;
  transition: background .15s;
}
.dp-view-link:hover { background: rgba(124,58,237,.07); }

/* Call button inline with phone number */
.dp-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
  text-decoration: none;
  padding: 3px 9px;
  border: 1.5px solid #16a34a;
  border-radius: 6px;
  transition: background .15s;
  vertical-align: middle;
}
.dp-call-btn:hover { background: rgba(22,163,74,.08); }

/* Full-width field row (contact spans both columns) */
.dp-field.dp-field-full {
  grid-column: 1 / -1;
}

/* Confirmation button inside booking info meta row */
.dp-confirm-meta-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  color: #7c3aed;
  background: transparent;
  border: 1.5px solid #7c3aed;
  border-radius: 6px;
  padding: 5px 13px;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.dp-confirm-meta-btn:hover { background: rgba(124,58,237,.1); }

/* ═══════════════════════════════════════════════════
   MMT EDITABLE FIELDS in Booking Info
   ═══════════════════════════════════════════════════ */
.mmt-field-input {
  width: 100%;
  padding: 5px 8px;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: box-shadow .15s;
}
.mmt-field-input:focus {
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.mmt-field-num {
  max-width: 90px;
}
.mmt-editable-badge {
  font-size: 9px;
  font-weight: 700;
  color: #7c3aed;
  background: rgba(124,58,237,.1);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Mobile timeline tap feedback */
.tl-cell-mob:active { background: rgba(124,58,237,.1); }

/* ── Timeline property filter bar ─────────────────────────────── */
#tl-prop-filter-wrap { padding: 0 0 6px; }
.tl-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
}
.tl-filter-icon { font-size: 13px; flex-shrink: 0; opacity: .6; }
.tl-filter-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  min-width: 0;
}
.tl-filter-input::placeholder { color: var(--muted); }
.tl-filter-count {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.tl-filter-clear {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}
.tl-filter-clear:hover { background: var(--border); color: var(--text); }

/* ── Timeline type filter select ─────────────────────────────── */
.tl-type-select {
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  padding: 2px 4px;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  padding-left: 10px;
  margin-left: 4px;
  max-width: 130px;
}
.tl-type-select:hover { color: var(--accent); }

/* ── Timeline zoom controls ──────────────────────────────────── */
.tl-zoom-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  border-left: 1px solid var(--border);
  padding-left: 10px;
  margin-left: 4px;
  flex-shrink: 0;
}
.tl-zoom-lbl { font-size: 10px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.tl-zoom-btn {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  font-size: 13px; font-weight: 700;
  cursor: pointer; color: var(--muted);
  line-height: 1;
  padding: 0;
}
.tl-zoom-btn:hover { border-color: var(--accent); color: var(--accent); background: #eef1ff; }
.tl-zoom-pct { font-size: 10px; color: var(--muted); min-width: 30px; text-align: center; }

/* ── Occupancy stat row label ────────────────────────────────── */
.stat-period-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .4px;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
  text-transform: uppercase;
}
.stat-period-badge.past { background: var(--muted); }
.stat-period-badge.future30 { background: #7c3aed; }

/* ── Booking bar hover tooltip ───────────────────────────────── */
/* Tooltip is already #tip — we just need to ensure it shows on hover smoothly */
#tip { transition: opacity .12s ease; }
#tip.on { opacity: 1; pointer-events: auto; }

/* ── Payment log rows (booking details panel) ────────────────── */
.dp-pay-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.dp-pay-row:last-child { border-bottom: none; }
.dp-pay-mode { font-weight: 600; color: var(--text); }
.dp-pay-amt  { font-weight: 700; text-align: right; white-space: nowrap; }
.dp-pay-note { color: var(--muted); font-size: 11px; grid-column: 1 / -1; }
.dp-pay-balance { background: rgba(251,146,60,.07); border-radius: 5px; padding: 6px 8px; }

/* On touch devices, booking bars must NOT intercept touch events —
   the .tl-cell underneath handles all touch (long-press drag, tap).
   Tapping a booked cell is handled by _mobCellTap which calls showTip. */
@media (pointer: coarse) {
  .bk { pointer-events: none; }
}
.dp-call-btn {
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
  background: var(--surface);
  border: 1.5px solid #16a34a;
  border-radius: 6px;
  transition: background .15s;
  vertical-align: middle;
}
.dp-call-btn:hover { background: rgba(22,163,74,.08); }

/* Full-width field row (contact spans both columns) */
.dp-field.dp-field-full {
  grid-column: 1 / -1;
}

/* ════════════════════════════════════════════
   ISSUES BOARD (Pending Issues kanban tab)
   ════════════════════════════════════════════ */

/* Filter bar */
.ib-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.ib-filter-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
.ib-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Category pill buttons */
.icp-btn {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.icp-btn:hover { border-color: var(--accent); color: var(--accent); }
.icp-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Kanban board layout */
.issues-board {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 12px;
  -webkit-overflow-scrolling: touch;
  gap: 10px;
  padding: 10px 0 10px 12px;      /* left pad only — next col peeks on right */
  height: calc(100dvh - 195px);
  min-height: 0;
  align-items: stretch;
  scrollbar-width: none;
  box-sizing: border-box;
}
.issues-board::-webkit-scrollbar { display: none; }
.ib-col {
  flex: 0 0 min(300px, calc(100vw - 40px));  /* fixed width — scrolls into view */
  width: min(300px, calc(100vw - 40px));
  min-width: 0;
  background: var(--bg);
  border-radius: 12px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: start;
  height: 100%;
}

/* Column headers */
.ib-col-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 2px solid transparent;
}
.ib-hdr-open     { background: #fee2e2; border-color: #dc2626; color: #991b1b; }
.ib-hdr-inprog   { background: #fef3c7; border-color: #d97706; color: #92400e; }
.ib-hdr-resolved { background: #dcfce7; border-color: #16a34a; color: #14532d; }
.ib-col-icon  { font-size: 14px; }
.ib-col-title { flex: 1; }
.ib-col-count {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0,0,0,.12);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

/* Card list (scrollable vertically within column) */
.ib-cards {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 0;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.ib-empty {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding: 24px 0;
}
.ib-loading {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

/* Individual kanban card */
.ib-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ib-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(79,110,247,.12);
}
.ib-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ib-card-desc {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ib-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ib-meta-prop,
.ib-meta-guest {
  font-size: 11px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
}
.ib-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.ib-meta-date {
  font-size: 10px;
  color: var(--muted);
}
.ib-meta-assignee {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: #eef1ff;
  border-radius: 10px;
  padding: 2px 7px;
}

/* ── Kanban drag-and-drop ───────────────────────── */
.ib-drag-handle {
  font-size: 14px;
  color: var(--muted);
  cursor: grab;
  margin-right: 2px;
  flex-shrink: 0;
  user-select: none;
}
.ib-drag-handle:active { cursor: grabbing; }

/* Priority badges on kanban cards */
.ib-pri-badge{display:inline-block;font-size:10px;font-weight:700;padding:1px 7px;border-radius:6px;border:1px solid transparent;}
.ib-pri-badge.pri-low{background:#dcfce7;border-color:#16a34a;color:#16a34a;}
.ib-pri-badge.pri-medium{background:#fef3c7;border-color:#d97706;color:#d97706;}
.ib-pri-badge.pri-high{background:#ffedd5;border-color:#ea580c;color:#ea580c;}
.ib-pri-badge.pri-critical{background:#fee2e2;border-color:#dc2626;color:#dc2626;animation:pulse-badge 1.4s ease-in-out infinite;}
@keyframes pulse-badge{0%,100%{opacity:1;}50%{opacity:.55;}}

.ib-card-dragging {
  opacity: .45;
  transform: rotate(1.5deg);
}
.ib-col.ib-drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: -3px;
  background: #eef1ff;
}
/* While a drag is in progress, cards don't intercept pointer events
   so drop events land cleanly on the column */
.issues-board.ib-dragging .ib-card:not(.ib-card-dragging) {
  pointer-events: none;
}

/* ── Card move action buttons ───────────────────── */
.ib-move-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.ib-move-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  background: var(--bg);
  color: var(--muted);
}
.ib-move-fwd {
  border-color: var(--accent);
  color: var(--accent);
  background: #eef1ff;
}
.ib-move-fwd:hover  { background: var(--accent); color: #fff; }
.ib-move-back { border-color: var(--border); color: var(--muted); }
.ib-move-back:hover { border-color: #6b7280; color: var(--text); background: var(--surface); }

/* ── Note modal overlay ─────────────────────────── */
.ib-note-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: mIn .18s ease;
}
.ib-note-modal {
  background: var(--surface);
  border-radius: 14px;
  padding: 28px 28px 24px;
  width: 420px;
  max-width: 95vw;
  box-shadow: 0 16px 60px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ib-note-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.ib-note-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: -6px;
}
.ib-note-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  resize: vertical;
  min-height: 90px;
  outline: none;
  transition: border .15s;
}
.ib-note-textarea:focus { border-color: var(--accent); }
.ib-note-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ── Issue detail drawer ────────────────────────── */
.ib-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(0,0,0,.3);
}
.ib-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 801;
  width: 400px;
  max-width: 95vw;
  background: var(--surface);
  box-shadow: -4px 0 32px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  animation: slideInRight .2s ease;
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.ib-drawer-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ib-drawer-hdr-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}
.ib-drawer-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
}
.ib-drawer-close:hover { background: #fee2e2; border-color: #dc2626; color: #dc2626; }

.ib-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ibd-section { display: flex; flex-direction: column; gap: 6px; }
.ibd-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}
.ibd-desc {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
}
.ibd-resolution {
  font-size: 12px;
  color: #14532d;
  background: #dcfce7;
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.5;
}
.ibd-meta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ibd-meta-item {
  font-size: 12px;
  color: var(--muted);
}

/* History timeline */
.ibd-history {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ibd-hist-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0;
}
.ibd-hist-entry {
  display: flex;
  gap: 10px;
  padding-bottom: 14px;
  position: relative;
}
.ibd-hist-entry:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.ibd-hist-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
  border: 2px solid var(--surface);
  outline: 2px solid var(--accent);
}
.ibd-hist-content { flex: 1; }
.ibd-hist-detail {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
}
.ibd-hist-meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── View Booking button (drawer header + card) ── */
.ib-view-booking-btn {
  padding: 5px 11px;
  border-radius: 7px;
  border: 1.5px solid var(--accent);
  background: #eef1ff;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.ib-view-booking-btn:hover    { background: var(--accent); color: #fff; }
.ib-view-booking-btn:disabled { opacity: .4; cursor: default; }
.ib-edit-btn {
  border-color: var(--border);
  color: var(--muted);
  margin-left: auto;
}
.ib-edit-btn:hover { border-color: var(--accent); color: var(--accent); background: #eef1ff; }

.ib-del-btn {
  border-color: #fca5a5;
  color: #dc2626;
  padding: 3px 8px;
}
.ib-del-btn:hover { background: #fef2f2; border-color: #dc2626; }

.ib-booking-link {
  border-color: var(--accent);
  color: var(--accent);
  background: #eef1ff;
  font-size: 13px;
  padding: 3px 9px;
}
.ib-booking-link:hover { background: var(--accent); color: #fff; }

/* ── Permissions matrix ─────────────────────── */
.perms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.perms-table th {
  padding: 10px 14px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
}
.perms-table th:first-child { text-align: left; }
.perms-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.perms-table tr:last-child td { border-bottom: none; }
.perms-table tr:hover td { background: var(--bg); }
.perms-role-cell { min-width: 120px; }
.perms-role-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
}
.perms-check-cell { text-align: center; }

/* Toggle switch */
.perms-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.perms-toggle input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.perms-toggle-track {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--border);
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.perms-toggle-track::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.perms-toggle input:checked + .perms-toggle-track {
  background: var(--accent);
}
.perms-toggle input:checked + .perms-toggle-track::after {
  transform: translateX(16px);
}
.perms-locked { opacity: .5; cursor: not-allowed; }

/* ── Drawer action footer ───────────────────────────────────────── */
.ib-drawer-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  background: var(--surface);
}
.ib-drawer-action-btn {
  flex: 1;
  padding: 9px 14px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s, transform .1s;
}
.ib-drawer-action-btn:active { transform: scale(.97); }
.ibd-action-start   { background: #dbeafe; color: #1d4ed8; }
.ibd-action-start:hover { background: #bfdbfe; }
.ibd-action-resolve { background: #dcfce7; color: #16a34a; }
.ibd-action-resolve:hover { background: #bbf7d0; }
.ibd-action-reopen  { background: #fee2e2; color: #dc2626; }
.ibd-action-reopen:hover { background: #fecaca; }

.ibd-action-claim { background: #ede9fe; color: #7c3aed; }
.ibd-action-claim:hover { background: #ddd6fe; }

/* ── Issues board assignee filter dropdown ────────────────────────── */
.ib-assignee-select {
  padding: 5px 10px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
  flex-shrink: 0;
}
.ib-assignee-select:focus { border-color: var(--accent); }

/* ── Issues board — category tiles ───────────────────────────────── */
.ib-cat-tiles {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 14px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.ib-cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 82px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.ib-cat-tile:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(79,110,247,.12); }
.ib-cat-tile.active { background: var(--accent); border-color: var(--accent); }
.ib-cat-count {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.ib-cat-tile.active .ib-cat-count { color: #fff; }
.ib-cat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 4px;
  white-space: nowrap;
  text-align: center;
}
.ib-cat-tile.active .ib-cat-label { color: rgba(255,255,255,.85); }

/* ── Controls row (search + type filter + assignee + buttons) ────── */
.ib-search-input {
  flex: 1; min-width: 160px; max-width: 260px;
  padding: 5px 12px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--bg);
  font-size: 12px; color: var(--text); outline: none;
  transition: border-color .15s;
}
.ib-search-input:focus { border-color: var(--accent); }

/* Booking / Standalone type filter */
.ib-type-filter {
  display: flex; gap: 4px; flex-shrink: 0;
}
.ib-type-btn {
  padding: 4px 11px; border-radius: 16px; border: 1.5px solid var(--border);
  background: transparent; color: var(--muted);
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.ib-type-btn:hover  { border-color: var(--accent); color: var(--accent); }
.ib-type-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Standalone badge on kanban cards */
.ib-standalone-badge {
  font-size: 10px; font-weight: 700; color: #7c3aed;
  background: #ede9fe; border-radius: 10px; padding: 1px 7px;
  margin-left: auto;
}
/* Standalone cards get a subtle left-border accent */
.ib-card-standalone { border-left: 3px solid #7c3aed; }

.ib-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* Mobile — category tiles + controls row */
@media (max-width: 700px) {
  .ib-cat-tiles { padding: 8px 10px; gap: 6px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ib-cat-tiles::-webkit-scrollbar { display: none; }
  .ib-cat-tile  { min-width: 58px; flex-shrink: 0; padding: 6px 10px; }
  .ib-cat-count { font-size: 16px; }
  .ib-cat-label { font-size: 9px; }
  /* Controls: search full-width row 1, filters + buttons row 2 */
  .ib-controls-row {
    flex-wrap: wrap;
    gap: 5px;
    padding: 6px 10px;
  }
  .ib-search-input { flex: 1 1 100%; order: 0; min-width: 0; }
  .ib-type-filter  { flex: 1 1 auto; order: 1; }
  .ib-type-btn     { padding: 3px 8px; font-size: 10px; }
  .ib-assignee-select { flex: 1 1 auto; order: 2; font-size: 11px; min-width: 0; max-width: 140px; }
  .ib-controls-row > .btn { order: 3; font-size: 10px; padding: 4px 8px; flex-shrink: 0; }
}

/* ── Booking Import section ───────────────────────────────────── */
.import-plat-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ipt {
  padding: 6px 18px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.ipt.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.ipt:hover:not(.active) {
  border-color: var(--accent);
  color: var(--accent);
}

.import-dropzone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  transition: border-color .2s, background .2s, color .2s;
  user-select: none;
}
.import-dropzone:hover,
.import-dropzone.drag-over {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(79, 110, 247, .04);
}

/* ── Guest IDs — Google Drive upload section ─────────────────────────── */
/* Inline label + action row inside the booking info card */
.dp-ids-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.dp-ids-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: .4px; text-transform: uppercase; white-space: nowrap;
}

/* Upload more — solid action button */
.dp-ids-upload-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: 8px; border: none;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: opacity .15s;
}
.dp-ids-upload-btn:hover { opacity: .85; }

/* Folder link — plain muted text link shown below the IDs row */
.dp-ids-folder-link {
  font-size: 11px; color: var(--muted);
  text-decoration: none; display: inline-block;
  transition: color .15s;
}
.dp-ids-folder-link:hover { color: var(--accent); text-decoration: underline; }

/* Legacy pill button (kept for backward compat) */
.dp-ids-drive-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 20px;
  background: #e8f0fe; color: #1a73e8;
  border: 1.5px solid #aecbfa;
  font-size: 11px; font-weight: 700; text-decoration: none;
  transition: background .15s, box-shadow .15s;
  white-space: nowrap;
}
.dp-ids-drive-btn:hover { background: #d2e3fc; box-shadow: 0 0 0 2px #aecbfa; }

/* Upload zone — large (first-time) */
.dp-ids-upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 22px 16px;
  border: 2px dashed var(--border); border-radius: 10px;
  cursor: pointer; text-align: center;
  transition: border-color .2s, background .2s;
  user-select: none;
}
.dp-ids-upload-zone:hover { border-color: var(--accent); background: rgba(79,110,247,.04); }
.dp-ids-upload-icon { font-size: 26px; line-height: 1; }
.dp-ids-upload-label { font-size: 13px; font-weight: 700; color: var(--text); }
.dp-ids-upload-sub { font-size: 11px; color: var(--muted); }

/* Upload zone — small (add more) */
.dp-ids-upload-zone-sm {
  display: flex; align-items: center; justify-content: center;
  padding: 9px 14px; border-radius: 8px;
  border: 1.5px dashed var(--border); cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--muted);
  transition: border-color .2s, color .2s;
  user-select: none;
}
.dp-ids-upload-zone-sm:hover { border-color: var(--accent); color: var(--accent); }

/* File chip grid */
.dp-ids-file-grid {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px;
}
.dp-ids-file-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px;
  background: #f1f3f4; border: 1px solid var(--border);
  font-size: 11px; font-weight: 600; color: var(--text);
  text-decoration: none; max-width: 160px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s, border-color .15s;
}
.dp-ids-file-chip:hover { background: #e8f0fe; border-color: #aecbfa; color: #1a73e8; }

/* Utility states */
.dp-ids-notice {
  font-size: 12px; color: var(--muted); padding: 4px 0;
}
.dp-ids-loading {
  font-size: 12px; color: var(--muted); padding: 10px 0; text-align: center;
}
.dp-ids-signin-btn {
  margin-top: 8px; padding: 7px 14px; border-radius: 7px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: 12px; font-weight: 700; color: var(--accent);
  cursor: pointer; transition: border-color .15s;
}
.dp-ids-signin-btn:hover { border-color: var(--accent); }
.dp-ids-file-area { display: flex; flex-direction: column; gap: 8px; }

/* ══════════════════════════════════
   PAYMENTS TAB
══════════════════════════════════ */
.pay-summary-bar{display:flex;align-items:stretch;gap:0;background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;}
.pay-sum-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:18px 28px 18px 0;gap:3px;}
.pay-sum-card.accent .pay-sum-val{color:#fb923c;}
.pay-sum-val{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.5px;}
.pay-sum-lbl{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.pay-sum-divider{width:1px;background:var(--border);margin:14px 28px 14px 0;}
@media(max-width:600px){
  .pay-summary-bar{padding:0 12px;}
  .pay-sum-card{padding:12px 10px 12px 0;flex:1;min-width:0;}
  .pay-sum-val{font-size:15px;letter-spacing:-.3px;}
  .pay-sum-lbl{font-size:9px;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pay-sum-divider{margin:10px 10px 10px 0;}
}

.pay-tiles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;padding:12px 16px;}

/* ── Compact payment tile ─────────────────────────────────────────────── */
.pay-tile-compact{padding:10px 14px;}

/* Row 1: guest name + property */
.ptc-header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:3px;}
.ptc-guest{font-size:14px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ptc-prop{font-size:11px;font-weight:700;color:var(--accent);white-space:nowrap;flex-shrink:0;}

/* Row 2: dates · ref · mode */
.ptc-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin-bottom:7px;}
.ptc-ref{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-weight:700;letter-spacing:.3px;white-space:nowrap;}
.ptc-mode{font-style:italic;}

/* Row 3: amounts inline + log button */
.ptc-amounts{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding-top:7px;border-top:1px solid var(--border);}
.ptc-total{font-size:12px;font-weight:700;color:var(--text);}
.ptc-sep{color:var(--border);font-size:12px;}
.ptc-paid{font-size:12px;font-weight:700;color:#34d399;}
.ptc-due{font-size:12px;font-weight:700;color:#fb923c;}
.ptc-log-btn{margin-left:auto;padding:3px 10px;font-size:11px;}
.pay-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted);font-size:14px;font-weight:600;}

.pay-tile{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;cursor:pointer;border:1.5px solid var(--border);transition:border-color .15s,box-shadow .15s;}
.pay-tile:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(0,0,0,.12);}
.pay-tile-urgent{border-left:4px solid #ef4444;}

.pay-tile-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.pay-tile-ref{font-size:11px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 7px;letter-spacing:.4px;}
.pay-tile-prop{font-size:11px;font-weight:700;color:var(--accent);}
.pay-tile-guest{font-size:16px;font-weight:800;color:var(--text);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pay-tile-dates{font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:12px;}
.pay-tile-mode{font-size:11px;color:var(--muted);margin-top:10px;padding-top:8px;border-top:1px solid var(--border);}

.pay-tile-amounts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;background:var(--bg);border-radius:8px;padding:10px 12px;}
.pay-amt-item{display:flex;flex-direction:column;gap:2px;}
.pay-amt-val{font-size:14px;font-weight:800;color:var(--text);}
.pay-amt-val.paid{color:#34d399;}
.pay-amt-val.due{color:#fb923c;}
.pay-amt-lbl{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.pay-subtabs{display:flex;gap:6px;padding:12px 24px 0;border-bottom:1px solid var(--border);background:var(--surface);}
.pay-stab{padding:8px 18px;border-radius:7px 7px 0 0;border:1px solid transparent;border-bottom:none;font-size:13px;font-weight:600;color:var(--muted);background:transparent;cursor:pointer;transition:all .15s;position:relative;bottom:-1px;}
.pay-stab:hover{color:var(--text);background:var(--bg);}
.pay-stab.active{color:var(--accent);background:var(--bg);border-color:var(--border);border-bottom-color:var(--bg);}
.pay-tile-past{opacity:.82;border-left:4px solid var(--muted);}.pay-stab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;margin-left:5px;}.pay-tile-footer{display:flex;justify-content:flex-end;margin-top:10px;padding-top:8px;border-top:1px solid var(--border);}.pay-log-btn{padding:5px 14px;border-radius:6px;border:1.5px solid var(--accent);background:transparent;color:var(--accent);font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;}.pay-log-btn:hover{background:var(--accent);color:#fff;}

/* Per-tab search + summary bar */
.pay-tab-bar{display:flex;align-items:center;gap:12px;padding:10px 24px;background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.pay-tab-search-wrap{display:flex;align-items:center;gap:8px;background:var(--surface);border:2px solid var(--border);border-radius:10px;padding:7px 14px;transition:border .15s;flex-shrink:0;}
.pay-tab-search-wrap:focus-within{border-color:var(--accent);}
.pay-tab-search-icon{font-size:13px;line-height:1;}
.pay-tab-search{border:none;outline:none;background:transparent;color:var(--text);font-size:13px;width:200px;}
.pay-tab-search::placeholder{color:var(--muted);}
.pay-tab-summary{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-left:auto;}
.pay-tab-sum-item{color:var(--text);font-size:12px;}
.pay-tab-sum-item strong{color:var(--accent);}
.pay-tab-sum-item.pending strong{color:#fb923c;}
.pay-tab-sum-div{color:var(--border);font-size:14px;font-weight:300;}

.dp-cancel-btn,.dp-edit-booking-btn{
  display:inline-flex;align-items:center;
  padding:5px 13px;border-radius:6px;font-size:12px;font-weight:700;
  cursor:pointer;transition:all .15s;white-space:nowrap;font-family:inherit;
}
.dp-cancel-btn{border:1.5px solid #ef4444;background:transparent;color:#ef4444;}
.dp-cancel-btn:hover{background:#ef4444;color:#fff;}
.dp-edit-booking-btn{border:1.5px solid var(--accent);background:transparent;color:var(--accent);}
.dp-edit-booking-btn:hover{background:var(--accent);color:#fff;}
/* -- Contacts Tab --------------------------------------------------------- */
.ct-action-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;gap:10px;}
.ct-title{font-size:16px;font-weight:800;color:var(--text);}
.ct-count-chip{background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:2px 10px;border-radius:12px;}
.ct-btn{padding:7px 16px;border-radius:7px;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;}
.ct-btn:hover{border-color:var(--accent);color:var(--accent);}
.ct-btn-primary{border-color:var(--accent);color:var(--accent);}
.ct-btn-primary:hover{background:var(--accent);color:#fff;}
.ct-btn-google{border-color:#4285F4;color:#4285F4;}
.ct-btn-google:hover{background:#4285F4;color:#fff;}
.ct-btn:disabled{opacity:.5;cursor:not-allowed;}
.ct-btn-short{display:none;}
@media(max-width:600px){
  .ct-btn-long{display:none;}
  .ct-btn-short{display:inline;}
  .ct-btn{padding:6px 10px;font-size:11px;}
}
.ct-panel{margin:16px 24px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.ct-panel-hdr{padding:12px 16px;font-size:12px;font-weight:700;color:var(--text);border-bottom:1px solid var(--border);background:var(--bg);}
.ct-panel-sub{font-weight:400;color:var(--muted);font-size:11px;}
.ct-empty{padding:24px;text-align:center;color:var(--muted);font-size:13px;}
.ct-table{width:100%;border-collapse:collapse;font-size:13px;}
.ct-table thead th{padding:9px 14px;text-align:left;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--bg);}
.ct-table tbody tr{border-bottom:1px solid var(--border);}
.ct-table tbody tr:last-child{border-bottom:none;}
.ct-table tbody tr:hover{background:#f8faff;}
.ct-table tbody td{padding:9px 14px;vertical-align:middle;}
.ct-name-input{width:100%;border:1px solid transparent;border-radius:5px;padding:4px 7px;font-size:13px;font-weight:500;color:var(--text);background:transparent;transition:border-color .15s;}
.ct-name-input:hover{border-color:var(--border);}
.ct-name-input:focus{outline:none;border-color:var(--accent);background:#fff;}
.ct-saved-name{font-weight:600;color:var(--text);}
.ct-phone{font-size:12px;color:var(--muted);font-family:monospace;}
.ct-dates{font-size:12px;color:var(--muted);}
.ct-plat-badge{display:inline-block;padding:2px 8px;border-radius:4px;color:#fff;font-size:10px;font-weight:700;letter-spacing:.3px;}
.ct-remove-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:4px;transition:all .15s;}
.ct-remove-btn:hover{background:#fee2e2;color:#ef4444;}
.ct-sync-badge{display:inline-block;padding:2px 9px;border-radius:10px;font-size:11px;font-weight:700;}
.ct-sync-done{background:#dcfce7;color:#16a34a;}
.ct-sync-pending{background:#f1f5f9;color:#64748b;}
/* ── Contacts table → compact cards on mobile ───────────────────────────── */
@media (max-width: 700px) {
  .ct-table thead { display: none; }
  .ct-table, .ct-table tbody { display: block; width: 100%; }

  /* ── Saved contacts ── */
  .ct-saved-row {
    display: grid;
    grid-template-areas:
      "name  plat"
      "meta  sync";
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
  }
  .ct-saved-name { grid-area: name; font-size: 13px; padding: 0; }
  .ct-saved-plat { grid-area: plat; padding: 0; }
  /* Phone + dates merged into one meta cell visually */
  .ct-saved-row .ct-phone { grid-area: meta; padding: 0; font-size: 11px; }
  .ct-saved-row .ct-dates { display: none; } /* dates hidden — space too tight */
  .ct-saved-sync  { grid-area: sync; padding: 0; text-align: right; }

  /* ── Pending contacts ── */
  .ct-pend-row {
    display: grid;
    grid-template-areas:
      "name  plat  rm"
      "phone dates rm";
    grid-template-columns: 1fr auto auto;
    gap: 3px 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
  }
  .ct-pend-name  { grid-area: name;  padding: 0; }
  .ct-pend-plat  { grid-area: plat;  padding: 0; align-self: center; }
  .ct-pend-rm    { grid-area: rm;    padding: 0; align-self: center; }
  .ct-pend-row .ct-phone { grid-area: phone; padding: 0; font-size: 11px; align-self: center; }
  .ct-pend-row .ct-dates { grid-area: dates; padding: 0; font-size: 11px; align-self: center; }
  .ct-name-input { padding: 2px 4px; font-size: 13px; }
}

.ct-sample-note{display:flex;align-items:center;gap:8px;padding:9px 16px;margin:0;font-size:11.5px;font-weight:600;color:#4f46e5;background:linear-gradient(90deg,#eef2ff 0%,#f8faff 100%);border-bottom:1px solid #e0e7ff;letter-spacing:.1px;}.ct-sample-note::before{content:'\2139';display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#4f46e5;color:#fff;font-size:10px;font-weight:800;flex-shrink:0;}
/* -- Property Attributes -------------------------------------------------- */
.prop-stab-bar{display:flex;gap:4px;padding:14px 16px 0;border-bottom:1px solid var(--border);background:var(--bg);margin-bottom:16px;}
.prop-stab{padding:8px 18px;border-radius:7px 7px 0 0;border:1px solid transparent;border-bottom:none;font-size:13px;font-weight:600;color:var(--muted);background:transparent;cursor:pointer;transition:all .15s;position:relative;bottom:-1px;}
.prop-stab:hover{color:var(--text);background:var(--surface);}
.prop-stab.active{color:var(--accent);background:var(--surface);border-color:var(--border);}
.prop-attr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding:4px 2px 24px;}
.prop-attr-loading{padding:32px;text-align:center;color:var(--muted);font-size:13px;grid-column:1/-1;}
.prop-attr-tile{background:var(--surface);border-radius:10px;box-shadow:var(--shadow);padding:16px;cursor:pointer;border:1.5px solid var(--border);transition:all .18s;display:flex;flex-direction:column;gap:8px;}
.prop-attr-tile:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(99,102,241,.1);transform:translateY(-1px);}
.prop-attr-tile-incomplete{border-left:4px solid #f59e0b;}
.prop-attr-tile-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.prop-attr-name{font-size:15px;font-weight:800;color:var(--text);line-height:1.25;}
.prop-attr-code{display:inline-block;margin-top:4px;font-size:10px;font-weight:700;color:var(--accent);background:#eef2ff;border-radius:4px;padding:1px 7px;letter-spacing:.4px;}
.prop-attr-pct{font-size:13px;font-weight:800;color:#16a34a;white-space:nowrap;}
.prop-attr-pct-low{color:#f59e0b;}
.prop-attr-loc{font-size:12px;color:var(--muted);font-weight:500;}
.prop-attr-loc-empty{color:#d1d5db;font-style:italic;}
.prop-attr-specs{font-size:13px;font-weight:600;color:var(--text);}
.prop-attr-chips{display:flex;flex-wrap:wrap;gap:5px;min-height:10px;}
.prop-chip{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--bg);border:1px solid var(--border);color:var(--muted);}
.prop-chip-pool{background:#e0f2fe;border-color:#7dd3fc;color:#0369a1;}
.prop-chip-pet{background:#fce7f3;border-color:#f9a8d4;color:#9d174d;}
.paf-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);}
.paf-panel{position:relative;width:520px;max-width:100vw;background:var(--surface);display:flex;flex-direction:column;box-shadow:-4px 0 32px rgba(0,0,0,.15);overflow:hidden;}
.paf-hdr{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg);}
.paf-title{font-size:17px;font-weight:800;color:var(--text);}
.paf-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.paf-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--muted);padding:0 4px;line-height:1;transition:color .15s;}
.paf-close:hover{color:var(--text);}
.paf-body{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:4px;}
.paf-section-hdr{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-top:14px;margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid var(--border);}
.paf-section-hdr:first-child{margin-top:0;}
.paf-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;}
.paf-row-checks{display:flex;flex-wrap:wrap;gap:14px;padding:4px 0;}
.paf-field{display:flex;flex-direction:column;gap:4px;}
.paf-lbl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.paf-input{padding:7px 10px;border:1.5px solid var(--border);border-radius:7px;font-size:13px;color:var(--text);background:var(--surface);transition:border-color .15s;width:100%;box-sizing:border-box;}
.paf-input:focus{outline:none;border-color:var(--accent);}
.paf-check{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;user-select:none;}
.paf-check input{accent-color:var(--accent);width:14px;height:14px;cursor:pointer;}
.paf-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--border);flex-shrink:0;background:var(--bg);}
.paf-btn-cancel{padding:8px 18px;border-radius:7px;border:1.5px solid var(--border);background:transparent;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;}
.paf-btn-cancel:hover{border-color:var(--text);color:var(--text);}
.paf-btn-save{padding:8px 22px;border-radius:7px;border:none;background:var(--accent);color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:opacity .15s;}
.paf-btn-save:hover{opacity:.88;}
.paf-btn-save:disabled{opacity:.5;cursor:not-allowed;}
/* ── Property Attributes split layout ───────────────────────────── */
/* Break admin-body max-width when attr view is active */
.admin-body.prop-attr-expand{max-width:none !important;padding:0 !important;}
.admin-body.prop-attr-expand #asec-map.prop-attr-expand .prop-stab-bar{padding:8px 16px 0;margin-bottom:0;}
/* Container fills exactly the space below header + tab bars */
#prop-attr-container{display:flex;height:calc(100vh - 148px);overflow:hidden;gap:0;}
#prop-attr-left{width:320px;min-width:220px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--border);padding:0 10px 0 16px;}
#prop-attr-left .prop-attr-search-bar{padding:10px 0 8px;position:sticky;top:0;background:var(--bg);z-index:1;}
#prop-attr-left .prop-attr-search-input{max-width:none;}
#prop-attr-left .prop-attr-grid{display:flex;flex-direction:column;gap:6px;padding:0 0 16px;}
#prop-attr-left .prop-attr-tile{padding:10px 12px;gap:4px;}
#prop-attr-left .prop-attr-name{font-size:13px;}
#prop-attr-left .prop-attr-specs{font-size:11px;}
#prop-attr-left .prop-attr-loc{font-size:11px;}
#prop-attr-left .prop-attr-chips{gap:3px;}
#prop-attr-left .prop-chip{font-size:10px;padding:1px 6px;}
#prop-attr-right{flex:1;min-width:0;overflow-y:auto;display:flex;flex-direction:column;}
#prop-attr-right .paf-hdr{position:sticky;top:0;z-index:2;background:var(--bg);border-bottom:1px solid var(--border);padding:12px 22px 10px;display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0;}
#prop-attr-right .paf-body{flex:1;min-height:0;overflow-y:auto;padding:14px 22px;display:flex;flex-direction:column;gap:4px;}
#prop-attr-right .paf-section-hdr{margin-top:10px;margin-bottom:4px;}
#prop-attr-right .paf-row{gap:8px;}
#prop-attr-right .paf-footer{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--border);padding:10px 22px;display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;}
.prop-attr-tile-selected{outline:2px solid var(--accent);outline-offset:-2px;background:color-mix(in srgb,var(--accent) 6%,var(--surface));}
.prop-attr-tile-selected:hover{transform:none;}
.prop-attr-search-bar{display:flex;align-items:center;gap:10px;padding:14px 2px 12px;}
.prop-attr-search-icon{font-size:15px;flex-shrink:0;}
.prop-attr-search-input{flex:1;padding:9px 14px;border:1.5px solid var(--border);border-radius:9px;font-size:13px;color:var(--text);background:var(--surface);transition:border-color .15s;max-width:420px;}
.prop-attr-search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.08);}
.prop-attr-search-input::placeholder{color:var(--muted);}

/* Combined property — chip + search UI */
.paf-comp-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:28px;margin-bottom:8px;}
.paf-comp-empty{font-size:12px;color:var(--muted);align-self:center;}
.paf-comp-chip{display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:20px;padding:3px 10px 3px 11px;font-size:12px;font-weight:600;}
.paf-comp-chip-remove{background:none;border:none;cursor:pointer;font-size:15px;line-height:1;color:var(--accent);padding:0;margin:0;opacity:.7;transition:opacity .12s;}
.paf-comp-chip-remove:hover{opacity:1;}
.paf-comp-search-row{position:relative;}
.paf-comp-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg);border:1px solid var(--border);border-radius:9px;box-shadow:0 6px 20px rgba(0,0,0,.12);z-index:50;max-height:200px;overflow-y:auto;}
.paf-comp-dd-item{padding:9px 14px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px;transition:background .1s;}
.paf-comp-dd-item:hover{background:var(--surface);}
.paf-comp-dd-name{flex:1;color:var(--text);}
.paf-comp-dd-code{font-size:11px;color:var(--muted);background:var(--border);padding:1px 7px;border-radius:20px;}
.paf-comp-dd-empty{padding:10px 14px;font-size:13px;color:var(--muted);}
.prop-chip-combined{background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);}

/* Scroll lock when modal is open */
body.modal-open {
  overflow: hidden;
}

/* ── Add Booking Modal (ob-*) ─────────────────────────── */
#modal-tab-bk {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.ob-modal {
  background: var(--card, #fff);
  border-radius: 16px;
  width: 92vw;
  max-width: 520px;
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
}
.ob-hdr {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ob-hdr h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.ob-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ob-section {
  background: var(--bg-alt, #f5f6fa);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ob-section-hdr {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent, #5b5ef4);
  margin-bottom: 2px;
}
.ob-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ob-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ob-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.ob-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  background: var(--card, #fff);
  color: var(--text);
  transition: border-color .15s;
}
.ob-input:focus {
  border-color: var(--accent, #5b5ef4);
  outline: none;
}
textarea.ob-input {
  resize: vertical;
  min-height: 58px;
}
.ob-footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--card, #fff);
}
.ob-btn-cancel {
  flex: 1;
  padding: 9px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.ob-btn-cancel:hover { background: var(--bg-alt, #f5f6fa); }
.ob-btn-save {
  flex: 2;
  padding: 9px;
  border-radius: 8px;
  border: none;
  background: var(--accent, #5b5ef4);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s;
}
.ob-btn-save:hover { opacity: .88; }
@media (max-width: 480px) {
  .ob-modal { width: 100vw; max-width: 100vw; border-radius: 16px 16px 0 0; max-height: 95vh; max-height: 95dvh; }
  .ob-2col { grid-template-columns: 1fr 1fr; }
}

/* ── Add Booking: searchable property dropdown ───────────── */
.m-prop-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: var(--card, #fff);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  max-height: 180px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.m-prop-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  border-radius: 6px;
  margin: 2px 4px;
}
.m-prop-item:hover, .m-prop-item-active {
  background: var(--bg, #f5f6fa);
}
.m-prop-item:hover .m-prop-name, .m-prop-item-active .m-prop-name { color: var(--accent); }
.m-prop-name { font-size: 13px; font-weight: 500; color: var(--text); flex: 1; min-width: 0; }
.m-prop-id   { font-size: 10px; color: var(--muted); white-space: nowrap; font-family: monospace; }
.m-prop-avail-banner { padding: 6px 12px; font-size: 11px; font-weight: 700; color: #166534; background: #f0fdf4; border-bottom: 1px solid #bbf7d0; }
/* Required field star */
.ob-req { color: #e74c3c; font-size: 10px; vertical-align: super; }

/* ══════════════════════════════════════════════════════
   ADVANCED TIMELINE FILTERS
   ══════════════════════════════════════════════════════ */
/* Filter button in the filter bar */
.tl-filter-btn {
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: 7px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.tl-filter-btn:hover,
.tl-filter-btn-on { border-color: var(--accent); color: var(--accent); background: var(--surface); }

/* Badge on filter button */
.tl-filter-badge {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Active-filter chips in the filter bar */
.tl-filter-chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; }
.tl-chip {
  background: #fff3f2;
  border: 1px solid #f5c6c3;
  color: var(--accent);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.tl-chip-x { cursor: pointer; opacity: .65; font-size: 11px; }
.tl-chip-x:hover { opacity: 1; }

/* Sliding filter panel */
.tl-adv-filter {
  max-height: 0;
  overflow: hidden;
  transition: max-height .22s ease;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.tl-adv-filter.open { max-height: 200px; }
.tl-adv-inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 12px 14px 14px;
  flex-wrap: wrap;
}

/* Individual filter groups */
.tl-flt-group { display: flex; flex-direction: column; gap: 7px; }
.tl-flt-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.tl-pill-row  { display: flex; gap: 4px; flex-wrap: wrap; }

/* Pill buttons */
.tl-bed-pill, .tl-pool-pill {
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  transition: all .12s;
}
.tl-bed-pill:hover, .tl-pool-pill:hover { border-color: var(--accent); color: var(--accent); }
.tl-bed-pill.sel, .tl-pool-pill.sel {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Vertical divider between groups */
.tl-flt-div {
  width: 1px;
  background: var(--border);
  align-self: stretch;
  margin: 4px 0;
  flex-shrink: 0;
}

/* Availability date row */
.tl-avail-row { display: flex; align-items: center; gap: 6px; }
.tl-avail-input {
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text);
  background: var(--bg);
  outline: none;
  width: 136px;
}
.tl-avail-input:focus { border-color: var(--accent); }
.tl-avail-arrow { color: var(--muted); font-size: 13px; flex-shrink: 0; }
.tl-avail-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.tl-avail-btn:hover { opacity: .88; }

/* Clear-all button */
.tl-flt-clear-wrap { justify-content: flex-end; align-self: center; }
.tl-flt-clear-all {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 0;
}
.tl-flt-clear-all:hover { color: var(--accent); }

/* Mobile tweaks for filter panel */
@media (max-width: 640px) {
  .tl-adv-inner { gap: 12px; padding: 10px 10px 12px; }
  .tl-avail-input { width: 120px; }
  .tl-flt-div { display: none; }
  .tl-filter-btn { padding: 4px 8px; font-size: 11px; }
}

/* ══════════════════════════════════════════════════════
   QUOTATION WIDGET
   ══════════════════════════════════════════════════════ */
.cal-quote-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text); border-radius: 7px;
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 5px;
}
.cal-quote-btn:hover { background: var(--bg); }

/* Modal shell */
.qt-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.52);
  display: none; align-items: center; justify-content: center;
  padding: 16px; z-index: 2000;
}
.qt-overlay.open { display: flex; }
.qt-modal {
  background: #fff; border-radius: 14px;
  width: 100%; max-width: 1040px;
  height: 88vh; max-height: 820px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  display: flex; flex-direction: column; overflow: hidden;
}

/* Header */
.qt-hdr {
  padding: 16px 22px 13px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-shrink: 0;
}
.qt-title { font-size: 17px; font-weight: 700; }
.qt-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }
.qt-close { border: none; background: none; font-size: 20px; color: var(--muted); cursor: pointer; padding: 2px 4px; line-height:1; }
.qt-close:hover { color: var(--text); }

/* Two-column body */
.qt-body { display: flex; flex-direction: row; flex: 1; overflow: hidden; min-height: 0; }

/* LEFT panel */
.qt-left-panel {
  width: 300px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 16px 16px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
}
.qt-section { display: flex; flex-direction: column; gap: 7px; }
.qt-section-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }

/* Dates */
.qt-date-row { display: flex; gap: 8px; flex-wrap: wrap; }
.qt-field { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 110px; }
.qt-lbl { font-size: 10px; color: var(--muted); font-weight: 500; }
.qt-date {
  border: 1.5px solid var(--border); border-radius: 7px;
  padding: 7px 9px; font-size: 12px; outline: none;
  background: var(--bg); width: 100%;
}
.qt-date:focus { border-color: var(--accent); background: #fff; }
.qt-nights {
  background: var(--bg); border-radius: 7px;
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  color: var(--accent); display: inline-block; align-self: flex-start;
}

/* Property search */
.qt-prop-wrap { position: relative; }
.qt-prop-input {
  width: 100%; border: 1.5px solid var(--border); border-radius: 7px;
  padding: 8px 11px; font-size: 13px; outline: none; background: var(--bg);
  box-sizing: border-box;
}
.qt-prop-input:focus { border-color: var(--accent); background: #fff; }
.qt-prop-list {
  position: fixed; background: #fff;
  border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 9999;
  max-height: 240px; overflow-y: auto; min-width: 240px;
}
.qt-prop-item {
  padding: 9px 13px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid var(--bg);
}
.qt-prop-item:hover { background: #fff3f2; }
.qt-prop-item-name { font-size: 13px; font-weight: 600; }
.qt-prop-item-meta { font-size: 11px; color: var(--muted); }
.qt-prop-empty { padding: 12px 14px; font-size: 12px; color: var(--muted); text-align: center; }
.qt-avail-banner { padding: 7px 13px; font-size: 11px; font-weight: 700; color: #166534; background: #f0fdf4; border-bottom: 1px solid #bbf7d0; border-radius: 9px 9px 0 0; }

/* BHK filter chips */
.qt-bed-chips {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px;
}
.qt-bed-chip {
  padding: 5px 13px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer; font-family: inherit; transition: all .15s;
  white-space: nowrap;
}
.qt-bed-chip:hover { border-color: var(--accent); color: var(--accent); }
.qt-bed-chip.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.qt-bed-clear-wrap { font-size: 11px; font-weight: 400; color: var(--muted); }
.qt-bed-clear {
  background: none; border: none; color: var(--accent);
  font-size: 11px; font-weight: 600; cursor: pointer;
  padding: 0; font-family: inherit; text-decoration: underline;
}

/* Closing message */
.qt-footer-msg {
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 8px 11px; font-size: 13px; resize: vertical;
  outline: none; font-family: inherit; color: var(--text);
  background: var(--bg); width: 100%; box-sizing: border-box;
  flex: 1; min-height: 80px;
}
.qt-footer-msg:focus { border-color: var(--accent); background: #fff; }

/* Generate button */
.qt-generate-wrap { flex-shrink: 0; margin-top: auto; padding-top: 4px; }
.qt-btn-generate {
  width: 100%; background: var(--accent); color: #fff; border: none;
  border-radius: 8px; padding: 11px 18px; font-size: 14px;
  font-weight: 600; cursor: pointer; transition: opacity .15s;
}
.qt-btn-generate:hover { opacity: .88; }

/* RIGHT panel */
.qt-right-panel {
  flex: 1; display: flex; flex-direction: column;
  padding: 16px 16px; gap: 12px; overflow: hidden; min-width: 0;
}
.qt-table-outer {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0; border: 1px solid var(--border); border-radius: 10px;
}

/* Empty state */
.qt-table-placeholder {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: var(--muted); font-size: 13px; padding: 20px;
}
.qt-table-placeholder span { font-size: 36px; }
.qt-table-placeholder p { margin: 0; text-align: center; }

/* Table */
.qt-table-wrap { flex: 1; overflow-y: auto; }
.qt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qt-table th {
  background: var(--bg); padding: 9px 12px; text-align: left;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.qt-table td { padding: 11px 12px; border-bottom: 1px solid var(--bg); vertical-align: middle; }
.qt-table tr:last-child td { border-bottom: none; }
.qt-table tr:hover td { background: #fafbff; }
.qt-prop-name { font-weight: 600; font-size: 13px; }
.qt-prop-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.qt-rate-wrap { display: flex; align-items: center; gap: 5px; }
.qt-rupee { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.qt-rate {
  border: 1.5px solid var(--border); border-radius: 7px;
  padding: 6px 10px; font-size: 13px; font-weight: 600;
  width: 100%; max-width: 130px; text-align: right; outline: none;
  background: var(--bg);
}
.qt-rate:focus { border-color: var(--accent); background: #fff; }
.qt-total-cell { white-space: nowrap; }
.qt-total-amt { font-size: 13px; font-weight: 700; }
.qt-nights-note { font-size: 10px; color: var(--muted); margin-top: 1px; }
.qt-remove-cell { text-align: center; }
.qt-remove-btn {
  border: 1.5px solid #ffcccc; background: #fff5f5; color: #cc3333;
  cursor: pointer; font-size: 14px; padding: 5px 8px; border-radius: 7px;
  line-height: 1; transition: background .15s;
}
.qt-remove-btn:hover { background: #ffe0e0; border-color: #ff4444; }

/* Output section */
.qt-output-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.qt-output {
  width: 100%; border: 1.5px solid var(--border); border-radius: 8px;
  padding: 10px 13px; font-size: 12px; font-family: monospace;
  resize: none; outline: none; background: var(--bg);
  box-sizing: border-box; height: 200px; line-height: 1.6;
}
.qt-output:focus { border-color: var(--accent); background: #fff; }
.qt-copy-btn {
  background: #e8f4fd; color: #1a6fa8; border: 1px solid #b3d7f5;
  border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.qt-copy-btn:hover { background: #d0e9f8; }

/* Footer */
.qt-footer {
  padding: 11px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0;
  background: var(--bg);
}
.qt-btn-cancel {
  border: 1.5px solid var(--border); background: #fff; color: var(--text);
  border-radius: 7px; padding: 7px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.qt-btn-cancel:hover { border-color: var(--text); }
.qt-btn-copy {
  background: var(--accent); color: #fff; border: none;
  border-radius: 7px; padding: 7px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.qt-btn-copy:hover { opacity: .9; }

/* ── Mobile ── */
@media (max-width: 700px) {
  .qt-overlay { padding: 0; align-items: flex-end; }
  .qt-modal { height: 96vh; max-height: none; border-radius: 14px 14px 0 0; }
  .qt-body { flex-direction: column; overflow-y: auto; }
  .qt-left-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding: 14px; }
  .qt-right-panel { padding: 14px; overflow: visible; flex: none; }
  .qt-table-outer { flex: none; border-radius: 10px; }
  .qt-table-wrap { max-height: 260px; }
  .qt-rate { max-width: 90px; }
  .qt-output { height: 140px; }
}

/* ══════════════════════════════════════════════════════
   NOTES SUMMARY MODAL
   ══════════════════════════════════════════════════════ */
.bulk-notes-btns { display: flex; gap: 6px; }
.bulk-notes-btn  { padding: 7px 12px; font-size: 12px; white-space: nowrap; }

.ns-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.48);
  display: none; align-items: center; justify-content: center;
  padding: 20px; z-index: 2100;
}
.ns-overlay.open { display: flex; }

.ns-modal {
  background: #fff; border-radius: 14px;
  width: 100%; max-width: 640px;
  max-height: 88vh;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  display: flex; flex-direction: column; overflow: hidden;
}
.ns-hdr {
  padding: 15px 20px 12px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.ns-title { font-size: 16px; font-weight: 700; }
.ns-close  { border: none; background: none; font-size: 20px; color: var(--muted); cursor: pointer; line-height:1; padding: 2px 4px; }
.ns-close:hover { color: var(--text); }

.ns-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; flex: 1; overflow: hidden; }
.ns-hint { font-size: 11px; color: var(--muted); }
.ns-output {
  flex: 1; min-height: 320px;
  border: 1.5px solid var(--border); border-radius: 9px;
  padding: 12px 14px; font-size: 12.5px; font-family: monospace;
  line-height: 1.7; resize: none; outline: none;
  background: var(--bg); color: var(--text);
}
.ns-output:focus { border-color: var(--accent); background: #fff; }

.ns-footer {
  padding: 12px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0;
  background: var(--bg);
}
.ns-btn-cancel {
  border: 1.5px solid var(--border); background: #fff; color: var(--text);
  border-radius: 7px; padding: 7px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ns-btn-cancel:hover { border-color: var(--text); }
.ns-btn-copy {
  background: var(--accent); color: #fff; border: none;
  border-radius: 7px; padding: 7px 20px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ns-btn-copy:hover { opacity: .9; }

@media (max-width: 640px) {
  .bulk-notes-btns { display: none; }
  .ns-modal { max-width: 100%; border-radius: 14px 14px 0 0; }
  .ns-overlay { align-items: flex-end; padding: 0; }
}

/* ════════════════════════════════════════════
   LOCK CODE — DETAILS PANEL
   ════════════════════════════════════════════ */

.dp-lock-card { padding: 14px 16px; }

/* No-code state */
.lock-no-code {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
}
.lock-no-code-icon { font-size: 22px; }
.lock-no-code-title { font-size: 13px; font-weight: 600; color: var(--muted); }
.lock-no-code-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Code card */
.lock-code-card {
  border: 1.5px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--surface);
}
.lock-code-card.lock-sent { border-color: #22c55e40; background: #f0fdf4; }
[data-theme="dark"] .lock-code-card.lock-sent { background: #052e16; }

.lock-code-header {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px 10px; border-bottom: 1px solid var(--border);
}
.lock-type-icon   { font-size: 20px; }
.lock-type-info   { flex: 1; }
.lock-type-label  { font-size: 12px; font-weight: 700; color: var(--text); }
.lock-validity    { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* Multi-code rows in details panel */
.lock-multi-row{display:flex;align-items:center;gap:10px;padding:7px 14px;border-bottom:1px solid var(--border);}
.lock-multi-row:last-child{border-bottom:none;}
.lock-multi-label{font-size:11px;font-weight:700;color:var(--muted);min-width:100px;flex-shrink:0;text-transform:uppercase;letter-spacing:.4px;}
.lock-multi-code{font-size:20px;font-weight:900;color:var(--text);letter-spacing:3px;flex:1;}
.lock-multi-row .lock-validity{margin-top:0;}
.lock-prop-tag{font-size:11px;font-weight:700;color:var(--accent);padding:8px 14px 2px;letter-spacing:.3px;}
/* Multi-code chips in Send Codes table */
.sc-code-item{display:flex;align-items:center;gap:6px;padding:2px 0;}
.sc-code-item-label{font-size:11px;font-weight:700;color:var(--muted);min-width:80px;flex-shrink:0;}
.sc-code-prop{font-size:10px;color:var(--accent);}
/* Admin: combined-property tag + per-code label */
.lc-combined-tag{display:inline-block;font-size:10px;font-weight:700;color:#7c3aed;background:#ede9fe;border-radius:4px;padding:1px 7px;margin-left:6px;vertical-align:middle;}
.lc-code-label{font-size:11px;font-weight:700;color:var(--muted);margin-right:6px;text-transform:uppercase;letter-spacing:.3px;}
.lc-active-summary{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1;}

.lock-status-pill {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  white-space: nowrap;
}
.lock-status-pill.sent   { background: #dcfce7; color: #15803d; }
.lock-status-pill.unsent { background: #fef9c3; color: #92400e; }
[data-theme="dark"] .lock-status-pill.sent   { background: #14532d; color: #86efac; }
[data-theme="dark"] .lock-status-pill.unsent { background: #422006; color: #fde68a; }

.lock-code-value {
  font-family: 'Courier New', Courier, monospace;
  font-size: 26px; font-weight: 800; letter-spacing: 4px;
  color: var(--accent); text-align: center;
  padding: 16px 14px 12px;
}

.lock-code-actions {
  display: flex; gap: 8px; padding: 0 14px 14px; flex-wrap: wrap;
}
.lock-send-btn { font-size: 12px; padding: 6px 14px; }

.lock-send-history {
  padding: 8px 14px 12px; border-top: 1px solid var(--border);
}
.lock-send-log {
  font-size: 11px; color: var(--muted); padding: 2px 0;
}

/* ════════════════════════════════════════════
   LOCK CODE — ADMIN PANEL
   ════════════════════════════════════════════ */

.lc-prop-row {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 14px; overflow: hidden;
}
.lc-prop-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--bg);
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.lc-prop-info  { flex: 1; min-width: 0; }
.lc-prop-name  { font-size: 14px; font-weight: 700; color: var(--text); }

.lc-type-select {
  font-size: 11px; padding: 3px 7px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); margin-top: 4px; cursor: pointer;
}

.lc-active-badge {
  font-size: 12px; color: #15803d; background: #dcfce7;
  padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
.lc-missing-badge {
  font-size: 12px; color: #b45309; background: #fef3c7;
  padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}
[data-theme="dark"] .lc-active-badge  { background: #14532d; color: #86efac; }
[data-theme="dark"] .lc-missing-badge { background: #422006; color: #fde68a; }

.lc-add-btn { font-size: 12px; padding: 5px 12px; }

.lc-codes-list { padding: 6px 0; }
.lc-no-codes { font-size: 12px; color: var(--muted); padding: 10px 16px; }

.lc-code-row {
  display: flex; align-items: center;
  padding: 8px 16px; border-bottom: 1px solid var(--border);
  gap: 12px;
}
.lc-code-row:last-child { border-bottom: none; }
.lc-code-row.expired  { opacity: .55; }

.lc-code-main   { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.lc-code-text   {
  font-family: 'Courier New', monospace; font-size: 15px;
  font-weight: 700; color: var(--accent); letter-spacing: 2px;
}
.lc-code-range  { font-size: 11px; color: var(--muted); }

.lc-code-row-right { display: flex; align-items: center; gap: 8px; }

.lc-status-tag {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
}
.lc-status-tag.active  { background: #dcfce7; color: #15803d; }
.lc-status-tag.expired { background: #f3f4f6; color: #6b7280; }
.lc-status-tag.future  { background: #dbeafe; color: #1d4ed8; }
[data-theme="dark"] .lc-status-tag.active  { background: #14532d; color: #86efac; }
[data-theme="dark"] .lc-status-tag.expired { background: #1f2937; color: #9ca3af; }
[data-theme="dark"] .lc-status-tag.future  { background: #1e3a5f; color: #93c5fd; }

.lc-del-btn {
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 13px; padding: 3px 6px;
  border-radius: 5px; line-height: 1;
}
.lc-del-btn:hover { background: #fee2e2; color: #dc2626; }

/* ════════════════════════════════════════════
   LOCK CODE — ADD CODE MODAL
   ════════════════════════════════════════════ */

.lac-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 1200;
  align-items: center; justify-content: center; padding: 20px;
}
.lac-modal {
  background: var(--surface); border-radius: 14px;
  width: 100%; max-width: 420px;
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
  display: flex; flex-direction: column;
}
.lac-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 14px; border-bottom: 1px solid var(--border);
}
.lac-title { font-size: 15px; font-weight: 700; }
.lac-close {
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 16px; padding: 2px 6px;
}
.lac-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.lac-prop-label {
  font-size: 13px; font-weight: 700; color: var(--accent);
  padding: 6px 10px; background: var(--bg); border-radius: 6px;
}
.lac-field  { display: flex; flex-direction: column; gap: 4px; }
.lac-lbl    { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.lac-input  { padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 7px; font-size: 14px; background: var(--bg); color: var(--text); }
.lac-input:focus { outline: none; border-color: var(--accent); }
.lac-hint   { font-size: 11px; color: var(--muted); }
.lac-field-row { display: flex; gap: 12px; }
.lac-field-row .lac-field { flex: 1; }
.lac-err    { font-size: 12px; color: #dc2626; min-height: 16px; }
.lac-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 18px 16px; border-top: 1px solid var(--border);
}

/* CRM tile lock flag */
.ctf-lock.unsent { background: #fef9c3; color: #92400e; border-color: #fde68a; }
.ctf-lock.missing { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
[data-theme="dark"] .ctf-lock.unsent  { background: #422006; color: #fde68a; }
[data-theme="dark"] .ctf-lock.missing { background: #450a0a; color: #fca5a5; }

@media (max-width: 600px) {
  .lc-prop-header { flex-direction: column; align-items: flex-start; }

  .lock-code-value { font-size: 20px; letter-spacing: 3px; }
  .lac-field-row { flex-direction: column; }
}

/* ════════════════════════════════════════════
   LOCK CODE — DETAILS PANEL
   ════════════════════════════════════════════ */

.dp-lock-card { padding: 14px 16px; }

/* No-code state */
.lock-no-code {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
}
.lock-no-code-icon  { font-size: 22px; }
.lock-no-code-title { font-size: 13px; font-weight: 600; color: var(--muted); }
.lock-no-code-sub   { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Code card */
.lock-code-card {
  border: 1.5px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--surface);
}
.lock-code-card.lock-sent { border-color: #22c55e40; background: #f0fdf4; }
[data-theme="dark"] .lock-code-card.lock-sent { background: #052e16; }

.lock-code-header {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px 10px; border-bottom: 1px solid var(--border);
}
.lock-type-icon  { font-size: 20px; }
.lock-type-info  { flex: 1; }
.lock-type-label { font-size: 12px; font-weight: 700; color: var(--text); }
.lock-validity   { font-size: 11px; color: var(--muted); margin-top: 1px; }

.lock-status-pill {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  white-space: nowrap;
}
.lock-status-pill.sent   { background: #dcfce7; color: #15803d; }
.lock-status-pill.unsent { background: #fef9c3; color: #92400e; }
[data-theme="dark"] .lock-status-pill.sent   { background: #14532d; color: #86efac; }
[data-theme="dark"] .lock-status-pill.unsent { background: #422006; color: #fde68a; }

.lock-code-value {
  font-family: 'Courier New', Courier, monospace;
  font-size: 26px; font-weight: 800; letter-spacing: 4px;
  color: var(--accent); text-align: center;
  padding: 16px 14px 12px;
}

.lock-code-actions {
  display: flex; gap: 8px; padding: 0 14px 14px; flex-wrap: wrap;
}
.lock-send-btn { font-size: 12px; padding: 6px 14px; }

.lock-send-history {
  padding: 8px 14px 12px; border-top: 1px solid var(--border);
}
.lock-send-log { font-size: 11px; color: var(--muted); padding: 2px 0; }

/* ════════════════════════════════════════════

/* ════════════════════════════════════════════
   SEND CODES PANEL
   ════════════════════════════════════════════ */

.sc-open-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff; border: none;
  padding: 6px 14px; border-radius: 8px; font-size: 12px;
  font-weight: 700; cursor: pointer; margin-left: auto;
}
.sc-open-btn:hover { opacity: .88; }
.sc-btn-badge {
  background: #f59e0b; color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 10px;
}

.sc-panel {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 0;
}

.sc-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 12px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap; gap: 10px;
}
.sc-hdr-title { font-size: 15px; font-weight: 800; color: var(--text); }
.sc-hdr-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sc-close-btn {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 12px; font-weight: 600;
  padding: 5px 14px; border-radius: 8px; cursor: pointer;
}
.sc-close-btn:hover { background: var(--bg); }

.sc-summary {
  display: flex; gap: 8px; padding: 10px 20px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.sc-pill {
  font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: 20px;
}
.sc-pill.sent    { background: #dcfce7; color: #15803d; }
.sc-pill.unsent  { background: #fef9c3; color: #92400e; }
.sc-pill.missing { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .sc-pill.sent    { background: #14532d; color: #86efac; }
[data-theme="dark"] .sc-pill.unsent  { background: #422006; color: #fde68a; }
[data-theme="dark"] .sc-pill.missing { background: #450a0a; color: #fca5a5; }

.sc-table-wrap { overflow-x: auto; padding: 0 8px 20px; }
.sc-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.sc-table th {
  text-align: left; padding: 10px 12px;
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.sc-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.sc-table tr:last-child td { border-bottom: none; }

.sc-guest { font-size: 13px; font-weight: 700; color: var(--text); }
.sc-prop  { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sc-plat  { font-weight: 600; color: var(--accent); }

.sc-code-chip {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-size: 14px; font-weight: 800;
  color: var(--accent); letter-spacing: 2px;
  background: var(--bg); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 6px;
}
.sc-code-missing { font-size: 12px; color: #991b1b; font-weight: 700; }
.sc-lock-type    { font-size: 11px; color: var(--muted); margin-left: 6px; }

.sc-dates { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sc-th-dates { min-width: 100px; }

.sc-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.sc-status.sent    { background: #dcfce7; color: #15803d; }
.sc-status.unsent  { background: #fef9c3; color: #92400e; }
.sc-status.missing { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .sc-status.sent    { background: #14532d; color: #86efac; }
[data-theme="dark"] .sc-status.unsent  { background: #422006; color: #fde68a; }
[data-theme="dark"] .sc-status.missing { background: #450a0a; color: #fca5a5; }

.sc-sent-log { font-size: 10px; color: var(--muted); margin-top: 3px; }

.sc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-btn-airbnb {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; padding: 5px 12px;
  background: #ff5a5f; color: #fff; border-radius: 7px;
  border: none; cursor: pointer; text-decoration: none;
}
.sc-btn-airbnb:hover { background: #e8474c; }
.sc-btn-wa {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; padding: 5px 12px;
  background: #25d366; color: #fff; border-radius: 7px;
  border: none; cursor: pointer;
}
.sc-btn-wa:hover { background: #1ebe5a; }
.sc-btn-disabled {
  font-size: 12px; color: var(--muted); padding: 5px 4px;
}

/* ── Send Codes — mobile card layout ────────────────────────────────────── */
@media (max-width: 768px) {
  .sc-table-wrap { padding: 0 4px 16px; }

  .sc-table thead { display: none; }

  .sc-table,
  .sc-table tbody,
  .sc-table tr,
  .sc-table td { display: block; width: 100%; box-sizing: border-box; }

  .sc-card-row {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }

  /* Hide the td borders — card has its own border */
  .sc-card-row td { border: none; padding: 0; }

  /* Guest + status row: name/prop on left, status pill on right */
  .sc-td-guest { margin-bottom: 8px; }
  .sc-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }
  .sc-td-status-inline { flex-shrink: 0; text-align: right; }

  /* Code cell: show label prefix, chip inline */
  .sc-td-codes {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
  .sc-td-codes::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    flex-shrink: 0;
  }

  /* Dates row: compact single line with label */
  .sc-td-dates {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .sc-td-dates::before {
    content: attr(data-label) ": ";
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
  }

  /* Actions: full-width flex row */
  .sc-td-actions { margin-top: 4px; }
  .sc-actions { flex-wrap: nowrap; width: 100%; }
  .sc-btn-airbnb,
  .sc-btn-wa {
    flex: 1;
    justify-content: center;
    font-size: 13px;
    padding: 8px 10px;
  }
}

/* CRM tile lock flag */
.ctf-lock.unsent  { background: #fef9c3; color: #92400e; border-color: #fde68a; }
.ctf-lock.missing { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
[data-theme="dark"] .ctf-lock.unsent  { background: #422006; color: #fde68a; }
[data-theme="dark"] .ctf-lock.missing { background: #450a0a; color: #fca5a5; }
/* CRM tile HK flag */
.ctf-hk-flag.hk-pending { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.ctf-hk-flag.done       { background: #dcfce7; color: #166534; border-color: #86efac; }
[data-theme="dark"] .ctf-hk-flag.hk-pending { background: #422006; color: #fde68a; }
[data-theme="dark"] .ctf-hk-flag.done       { background: #052e16; color: #86efac; }

/* ── CRM Split-pane layout ──────────────────────────────────────────────── */
/* #crm-body becomes flex row; sub-tabs stay above as full-width header */
#crm-body.split-mode {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 88px); /* viewport minus subtabs + sub2tabs rows */
  overflow: hidden;
  align-items: stretch;
}

/* Left tiles column */
#crm-body.split-mode #crm-left {
  width: 380px;
  min-width: 260px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  height: 100%;
  background: var(--bg);
}

/* Right detail column */
#crm-body.split-mode #details-panel {
  position: relative !important;
  inset: auto !important;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  z-index: 1 !important;
  animation: none !important;
  display: block !important;
}

/* Shrink close button — tiles visible on left */
#crm-body.split-mode .dp-back {
  font-size: 12px;
  padding: 5px 10px;
  opacity: 0.7;
}

/* Highlight the tile whose detail is currently open */
.crm-tile.tile-detail-open {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}


/* ═══════════════════════════════════════════════════════════
   Lock Codes — Admin panel: search · collapsible · inline add
   ═══════════════════════════════════════════════════════════ */

/* Search bar */
.lc-search-wrap {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.lc-search-input {
  flex: 1; padding: 8px 13px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13px; color: var(--text); background: var(--surface);
  outline: none; font-family: inherit; transition: border-color .15s;
}
.lc-search-input:focus { border-color: var(--accent); }
.lc-search-clear {
  padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--muted);
  cursor: pointer; font-size: 13px; transition: all .15s;
}
.lc-search-clear:hover { border-color: var(--accent); color: var(--accent); }

/* ── Lock Codes sub-tabs ───────────────────────────────────────── */
.lc-subtab-bar {
  display: flex; gap: 6px; margin-bottom: 18px;
  border-bottom: 2px solid var(--border); padding-bottom: 0;
}
.lc-stab {
  padding: 7px 16px; border: none; background: none;
  font-size: 13px; font-weight: 600; color: var(--muted);
  cursor: pointer; border-radius: 8px 8px 0 0;
  transition: color .15s, background .15s;
  margin-bottom: -2px; border-bottom: 2px solid transparent;
}
.lc-stab:hover { color: var(--accent); background: var(--bg); }
.lc-stab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--bg); }

/* ── Master / Static Codes panel ──────────────────────────────── */
.mc-list { display: flex; flex-direction: column; gap: 14px; }

.mc-prop-row {
  border: 1.5px solid var(--border); border-radius: 12px;
  padding: 16px; background: var(--surface);
}
.mc-prop-header { margin-bottom: 14px; }
.mc-prop-name { font-size: 14px; font-weight: 700; color: var(--text); }
.mc-prop-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

.mc-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.mc-field-row { display: flex; align-items: center; gap: 10px; }
.mc-field-label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  min-width: 130px; flex-shrink: 0;
}
.mc-field-ctrl { display: flex; align-items: center; gap: 6px; flex: 1; }
.mc-field-inp {
  flex: 1; padding: 7px 11px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: 'Courier New', monospace; letter-spacing: .05em;
  color: var(--text); background: var(--surface);
  outline: none; transition: border-color .15s;
}
.mc-field-inp:focus { border-color: var(--accent); }
.mc-eye-btn {
  padding: 5px 9px; border: 1.5px solid var(--border); border-radius: 7px;
  background: var(--bg); cursor: pointer; font-size: 14px;
  line-height: 1; transition: border-color .15s;
  flex-shrink: 0;
}
.mc-eye-btn:hover { border-color: var(--accent); }

.mc-notes-row {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px;
}
.mc-notes-inp {
  flex: 1; padding: 7px 11px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 12px; font-family: inherit; color: var(--text);
  background: var(--surface); resize: vertical; min-height: 52px;
  outline: none; transition: border-color .15s;
}
.mc-notes-inp:focus { border-color: var(--accent); }

.mc-updated {
  font-size: 11px; color: var(--muted); margin-bottom: 10px;
  font-style: italic;
}
.mc-actions { display: flex; justify-content: flex-end; }
.mc-save-btn {
  padding: 7px 20px; background: var(--accent); color: #fff;
  border: none; border-radius: 8px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background .15s, transform .1s;
}
.mc-save-btn:hover  { background: #4338ca; }
.mc-save-btn:active { transform: scale(.97); }
.mc-save-btn.saved  { background: #16a34a; }
.mc-save-btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 600px) {
  .mc-field-row    { flex-wrap: wrap; }
  .mc-field-label  { min-width: 100%; }
  .mc-notes-row    { flex-wrap: wrap; }
  .mc-notes-row .mc-field-label { min-width: 100%; }
}

/* Collapsible property header */
.lc-prop-header { cursor: pointer; user-select: none; }
.lc-prop-header:hover { background: var(--bg); }
.lc-chevron {
  font-size: 11px; color: var(--muted); flex-shrink: 0; margin-right: 2px;
}

/* Inline add-code row */
.lc-inline-add-row {
  border: 1.5px dashed var(--accent); border-radius: 8px;
  padding: 10px 12px; margin: 6px 0 4px;
  background: #f8f9ff;
  display: flex; flex-direction: column; gap: 8px;
}
[data-theme="dark"] .lc-inline-add-row { background: #1a1d2e; }

.lc-ia-fields {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
}
.lc-ia-input {
  padding: 6px 10px; border: 1.5px solid var(--border); border-radius: 7px;
  font-size: 12px; color: var(--text); background: var(--surface);
  outline: none; font-family: inherit; transition: border-color .15s;
}
.lc-ia-input:focus { border-color: var(--accent); }
.lc-ia-label  { flex: 2; min-width: 130px; }
.lc-ia-type   { flex: 1; min-width: 120px; }
.lc-ia-code   { flex: 1; min-width: 90px; }
.lc-ia-from,
.lc-ia-until  { flex: 1; min-width: 120px; }

.lc-ia-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lc-ia-err {
  flex: 1; font-size: 11px; color: #dc2626; font-weight: 600;
}

@media (max-width: 600px) {
  .lc-ia-fields { flex-direction: column; }
  .lc-ia-input, .lc-ia-label, .lc-ia-type,
  .lc-ia-code, .lc-ia-from, .lc-ia-until { width: 100%; min-width: 0; }
}

/* ════════════════════════════════════════════
   HOUSEKEEPING TAB
   ════════════════════════════════════════════ */

.hk-wrap {
  padding: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Toolbar ─────────────────────────────── */
.hk-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.hk-date-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.hk-date-input {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
}
.hk-date-input:focus { outline: none; border-color: var(--primary); }
.hk-gen-btn { font-size: 13px; padding: 6px 14px; white-space: nowrap; }
.hk-date-pick {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hk-summary {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.hk-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.hk-pill-turnover { background: #e8f4fd; color: #1e6fa8; }   /* now "Setup" */
.hk-pill-checkout  { background: #fde8e8; color: #c0392b; }
.hk-pill-setup     { background: #e8f4fd; color: #1e6fa8; }
.hk-pill-regular   { background: #e8f8e8; color: #27783d; }

/* ── Step 3 colour legend ───────────────────────────────────────────────────── */
.hk-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  margin-right: 4px;
}
.hk-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hk-legend-count {
  font-weight: 700;
  font-size: 11px;
  background: var(--bg);
  border-radius: 999px;
  padding: 0 6px;
  color: var(--muted);
}

/* ── Staff panel ─────────────────────────── */
.hk-staff-btn { font-size: 13px; white-space: nowrap; }
.hk-staff-panel {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  max-width: 420px;
}
.hk-staff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.hk-staff-title { font-size: 14px; font-weight: 700; color: var(--text); }
.hk-staff-close {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 16px; padding: 0 4px;
}
.hk-staff-list { margin-bottom: 10px; }
.hk-staff-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
}
.hk-staff-item:nth-child(odd) { background: var(--bg); }
.hk-staff-name { color: var(--text); font-weight: 500; }
.hk-staff-del {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 13px; padding: 0 4px;
  border-radius: 4px;
  transition: color 0.15s;
}
.hk-staff-del:hover { color: #c0392b; }
.hk-staff-add {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.hk-staff-input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
}
.hk-staff-input:focus { outline: none; border-color: var(--primary); }
.hk-staff-empty { font-size: 13px; color: var(--muted); padding: 4px 0; }

/* ── Locality cards ──────────────────────── */
.hk-localities { display: flex; flex-direction: column; gap: 12px; }
.hk-locality-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.hk-loc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  flex-wrap: wrap;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.hk-loc-header:hover { background: color-mix(in srgb, var(--primary) 6%, var(--bg)); }
.hk-loc-chevron { font-size: 11px; color: var(--muted); min-width: 12px; }
.hk-loc-name { font-size: 15px; font-weight: 700; color: var(--text); }
.hk-loc-count { font-size: 12px; color: var(--muted); margin-right: 4px; }
.hk-loc-staff {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.hk-no-staff { font-size: 12px; color: var(--muted); font-style: italic; }
.hk-staff-chip {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.hk-staff-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ── Property rows ───────────────────────── */
.hk-prop-rows { padding: 8px 0; }
.hk-prop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  transition: background 0.12s;
}
.hk-prop-row:last-child { border-bottom: none; }
.hk-prop-row:hover { background: color-mix(in srgb, var(--primary) 3%, var(--bg)); }
.hk-prop-skip { opacity: 0.45; }
.hk-prop-skip:hover { opacity: 0.75; }

/* Badges */
.hk-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  min-width: 76px;
  text-align: center;
  white-space: nowrap;
}
/* badge colours — indexed by HK_CSS mapping */
.hk-badge-setup          { background: #e8f4fd; color: #1e6fa8; }   /* Setup / Turnover / Arriving */
.hk-badge-setup-no-guest { background: #fff3cd; color: #856404; }   /* Setup – No Guest / Checkout */
.hk-badge-cursory        { background: #ede9fe; color: #6d28d9; }   /* Cursory Check */
.hk-badge-basic          { background: #e8f8e8; color: #27783d; }   /* Basic Cleaning */
.hk-badge-skip           { background: #f3f4f6; color: #9ca3af; }   /* Skip */
/* legacy aliases (keep so old cache doesn't break) */
.hk-badge-turnover { background: #e8f4fd; color: #1e6fa8; }
.hk-badge-checkout { background: #fff3cd; color: #856404; }
.hk-badge-regular  { background: #e8f8e8; color: #27783d; }

.hk-prop-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 140px;
  flex: 1;
}
.hk-prop-guests {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  flex: 2;
}
.hk-guest-out   { color: #c0392b; }
.hk-guest-in    { color: #27783d; }
.hk-guest-staying { color: var(--muted); }

.hk-prop-controls { margin-left: auto; }
.hk-skip-override {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px dashed #9ca3af;
  background: transparent;
  color: #6b7280;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hk-skip-override.active {
  background: #e8f8e8;
  color: #27783d;
  border-color: #27783d;
  border-style: solid;
}
.hk-skip-override:hover { border-color: var(--primary); color: var(--primary); }

/* ── Task cell inline editor ─────────────────────────────────── */
.hk-task-cell { display: inline-flex; align-items: center; gap: 6px; }
.hk-task-edit-btn {
  opacity: 0; padding: 2px 6px; border: none; background: none;
  cursor: pointer; font-size: 12px; border-radius: 5px;
  transition: opacity .15s, background .15s;
}
.hk-flat-row:hover .hk-task-edit-btn,
.hk-check-card:hover .hk-task-edit-btn { opacity: 1; }
.hk-task-edit-btn:hover { background: var(--bg); }

/* On touch devices (mobile) always show the edit button — no hover available */
@media (hover: none) {
  .hk-task-edit-btn { opacity: 1; }
}
.hk-task-type-sel {
  padding: 4px 8px; border: 1.5px solid var(--accent);
  border-radius: 7px; font-size: 12px; font-family: inherit;
  background: var(--surface); color: var(--text);
  cursor: pointer; outline: none;
}
.hk-task-cancel-btn {
  padding: 3px 7px; border: 1.5px solid var(--border);
  border-radius: 6px; background: var(--bg); color: var(--muted);
  font-size: 11px; cursor: pointer; line-height: 1;
}
.hk-task-cancel-btn:hover { border-color: #ef4444; color: #ef4444; }

/* ── Empty / tracking placeholder ───────── */
.hk-empty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
/* ── Tracking tab ────────────────────────────────────────────── */
.hk-track-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 14px;
}
.hk-track-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
/* ── Live dot ────────────────────────────────────────────────── */
.hk-trk-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  align-self: center;
  flex-shrink: 0;
  transition: background .4s;
}
.hk-trk-live-dot.is-live {
  background: #22c55e;
  animation: hk-live-pulse 2s ease-in-out infinite;
}
.hk-trk-live-dot.is-flash {
  background: #f59e0b !important;
  box-shadow: 0 0 8px 2px rgba(245,158,11,.5);
  animation: none !important;
}
@keyframes hk-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.hk-track-empty {
  text-align: center;
  padding: 64px 20px;
  color: var(--muted);
}

/* Progress board */
.hk-trk-progress {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hk-trk-overall-row,
.hk-trk-type-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hk-trk-overall-lbl {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  width: 64px;
  flex-shrink: 0;
}
.hk-trk-type-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  width: 130px;
  flex-shrink: 0;
}
.hk-trk-bar-track {
  flex: 1;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.hk-trk-bar-lg  { height: 10px; }
.hk-trk-bar-grp { height: 4px; margin-top: 6px; flex: none; width: 100%; }
.hk-trk-bar-track:not(.hk-trk-bar-lg):not(.hk-trk-bar-grp) { height: 7px; }
.hk-trk-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
  min-width: 0;
}
.hk-trk-bar-overall { background: var(--accent); }
.hk-trk-overall-frac,
.hk-trk-type-frac {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  min-width: 36px;
  text-align: right;
}
.hk-trk-overall-frac { color: var(--accent); font-size: 13px; }
.hk-trk-celebrate {
  background: linear-gradient(135deg,#4f46e5,#7c3aed);
  color: #fff;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  animation: pop .35s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes pop {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Groups header */
.hk-trk-groups-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hk-trk-saved-lbl {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

/* Group tiles */
.hk-trk-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hk-trk-tile {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s;
}
.hk-trk-tile-done {
  border-color: #86efac;
}
.hk-trk-tile-hdr {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  background: #fafafa;
}
.hk-trk-tile-done .hk-trk-tile-hdr { background: #f0fdf4; }
.hk-trk-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.hk-trk-tile-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.hk-trk-tile-frac {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.hk-trk-staff-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.hk-trk-staff-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.hk-trk-no-staff {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* Item rows inside tile */
.hk-trk-tile-body {
  display: flex;
  flex-direction: column;
}
.hk-trk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.hk-trk-item:last-child { border-bottom: none; }
.hk-trk-item.is-done    { background: #f0fdf4; }
.hk-trk-item.is-arrived { background: #eff6ff; }
.hk-trk-item.is-pending { background: var(--surface); }
.hk-trk-item-accent {
  width: 4px;
  height: 36px;
  border-radius: 999px;
  flex-shrink: 0;
}
.hk-trk-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hk-trk-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hk-trk-item-type {
  font-size: 11px;
  font-weight: 600;
}
.hk-trk-item-status { flex-shrink: 0; }
.hk-trk-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.hk-trk-pending { background: #fffbeb; color: #92400e; }
.hk-trk-arrived { background: #eff6ff; color: #1e40af; }
.hk-trk-done    { background: #dcfce7; color: #166534; }


/* ── Notes per property row ──────────────── */
.hk-note-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 12px;
  cursor: pointer;
  color: var(--muted);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.hk-note-btn:hover { border-color: var(--primary); color: var(--primary); }
.hk-note-btn.has-note {
  background: #fef9e7;
  border-color: #f0c040;
  color: #856404;
}
.hk-note-wrap {
  display: flex;
  width: 100%;
  padding: 6px 0 4px 0;
  flex-basis: 100%;
}
.hk-note-input {
  width: 100%;
  min-height: 54px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  background: #fefdf6;
  resize: vertical;
  font-family: inherit;
  line-height: 1.4;
}
.hk-note-input:focus { outline: none; border-color: var(--primary); }
/* ── Mobile ──────────────────────────────── */
@media (max-width: 600px) {
  .hk-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hk-loc-header { gap: 8px; }
  .hk-loc-staff { margin-left: 0; margin-top: 6px; width: 100%; }
  .hk-prop-row { gap: 6px; }
  .hk-prop-name { min-width: 100px; }
  .hk-prop-guests { flex: 1 1 100%; }
}

/* ── Housekeeping 3-step additions ────────────────────────────────────────── */

/* Step headers */
.hk-step-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
}
.hk-step-badge {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hk-step-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Flat A-Z table */
/* ── Step 1 check-schedule card grid ──────────────────────────────────── */
.hk-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.hk-check-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow .15s;
}
.hk-check-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.hk-check-card.hk-row-skip { opacity: .5; }
.hk-check-card.hk-row-skip:hover { opacity: .75; }

/* Card header: Airbnb name + task badge side-by-side */
.hkc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.hkc-airbnb {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

/* Guest line */
.hkc-guests {
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.4;
}

/* Card footer: internal name + note button */
.hkc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}
.hkc-internal {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Step 1 — tabular view (desktop) ───────────────────────────────────── */
.hk-step1-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.hk-step1-tbl thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--border);
  background: var(--surface);
  white-space: nowrap;
}
.hk-step1-row {
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.hk-step1-row:hover { background: var(--bg); }
.hk-step1-row.hk-row-skip { opacity: .45; }
.hk-step1-row.hk-row-skip:hover { opacity: .7; }
.hk-step1-tbl td { padding: 9px 10px; vertical-align: middle; }
.hk-step1-note-row td { padding: 0; }
.hk-s1-listing {
  font-weight: 600;
  color: var(--text);
  max-width: 260px;
}
.hk-s1-prop {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.hk-s1-task {
  white-space: nowrap;
  min-width: 130px;
}
.hk-s1-guests {
  font-size: 12px;
  color: var(--muted);
  min-width: 140px;
}
.hk-s1-actions {
  white-space: nowrap;
  text-align: right;
}
/* hover reveals edit btn in table rows */
.hk-step1-row .hk-task-edit-btn { opacity: 0; }
.hk-step1-row:hover .hk-task-edit-btn { opacity: 1; }

/* Keep old flat-table classes so manual-adds table (step 2) still works */
.hk-flat-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 4px;
}
.hk-flat-tbl thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 6px 10px;
  border-bottom: 2px solid var(--border);
  background: var(--surface);
}
.hk-flat-tbl tbody tr { border-bottom: 1px solid var(--border); }
.hk-flat-tbl tbody tr:last-child { border-bottom: none; }
.hk-flat-tbl td { padding: 8px 10px; vertical-align: middle; }
.hk-col-airbnb  { font-weight: 600; color: var(--text); min-width: 180px; }
.hk-col-internal{ color: var(--muted); font-size: 12px; }
.hk-col-task    { white-space: nowrap; }
.hk-col-guests  { font-size: 12px; }
.hk-col-note    { width: 36px; }

/* Add-property bar (step 2) */
/* Sticky add-property bar (Step 2 merged into top of Step 1) */
.hk-sticky-add-bar {
  position: sticky;
  top: 54px; /* clear the .hdr bar (min-height: 54px, position:sticky) */
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0 10px;
  margin-bottom: 8px;
  background: var(--bg);
  border-bottom: 1.5px solid var(--border);
}
.hk-add-bar-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
/* Keep .hk-add-bar as alias in case referenced elsewhere */
.hk-add-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.hk-add-select {
  flex: 1;
  min-width: 180px;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
}
.hk-add-type-sel {
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
}
.hk-add-btn { white-space: nowrap; }

/* Card footer — internal name + action buttons */
.hkc-footer-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hkc-remove-btn {
  padding: 2px 7px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: none;
  font-size: 11px;
  color: #ef4444;
  cursor: pointer;
  line-height: 1;
}
.hkc-remove-btn:hover { background: #fee2e2; border-color: #ef4444; }
[data-theme="dark"] .hkc-remove-btn:hover { background: #450a0a; }

/* Manual-adds table (kept for backwards compat) */
.hk-manual-tbl { margin-top: 6px; }
.hk-manual-tbl td { padding: 6px 10px; }

/* Generate button row */
.hk-generate-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.hk-gen-final-btn {
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 700;
}

/* Step 3 toolbar */
.hk-step3-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* ── Landscape nudge banner ─────────────────────────────────────────────── */
.hk-landscape-nudge {
  display: none; /* shown via JS on portrait mobile */
  align-items: center;
  gap: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #1e40af;
}
[data-theme="dark"] .hk-landscape-nudge {
  background: #1e3a5f;
  border-color: #3b82f6;
  color: #93c5fd;
}
@keyframes hk-nudge-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}
.hk-landscape-icon {
  font-size: 20px;
  flex-shrink: 0;
  display: inline-block;
  transform: rotate(90deg);
  animation: hk-nudge-blink 1.1s ease-in-out infinite;
}
.hk-landscape-nudge span:last-of-type { flex: 1; }
.hk-landscape-dismiss {
  flex-shrink: 0;
  padding: 4px 12px;
  border: 1.5px solid #3b82f6;
  border-radius: 6px;
  background: none;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.hk-landscape-dismiss:hover { background: #dbeafe; }
[data-theme="dark"] .hk-landscape-dismiss { color: #93c5fd; border-color: #3b82f6; }
[data-theme="dark"] .hk-landscape-dismiss:hover { background: #1e3a5f; }

@media (max-width: 600px) {
  .hk-card-grid { grid-template-columns: 1fr; }
  .hk-flat-tbl thead { display: none; }
  .hk-flat-tbl td { display: block; padding: 4px 8px; }
  .hk-flat-tbl tr { border-bottom: 1px solid var(--border); display: block; padding: 6px 0; }

  /* Step 1 table → card-like rows on mobile */
  .hk-step1-tbl thead { display: none; }
  .hk-step1-tbl, .hk-step1-tbl tbody { display: block; }
  .hk-step1-row, .hk-step1-note-row { display: block; }
  .hk-step1-row {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
  }
  .hk-step1-tbl td { display: block; padding: 3px 0; }
  .hk-step1-note-row td { padding: 0 0 6px; }
  .hk-s1-prop, .hk-s1-guests { display: inline; }

  /* Step 3 layout → stacked on mobile */
  .hk-step3-layout {
    flex-direction: column;
  }
  .hk-staff-pane {
    flex: none;
    width: 100%;
    max-height: 180px;
    position: static;
  }
  .hk-board { grid-template-columns: 1fr; }

  /* Sticky add bar: keep as wrapping row so property select stays at top */
  .hk-sticky-add-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .hk-add-bar-lbl { display: none; }
  /* Property select: full width on its own line */
  .hk-add-select  { flex: 1 1 100%; min-width: unset; }
  /* Type select and add button share the second line */
  .hk-add-type-sel { flex: 1 1 auto; min-width: unset; }
  .hk-add-btn      { flex: 0 0 auto; }

  /* Non-sticky add bar (fallback) */
  .hk-add-bar { flex-direction: column; align-items: stretch; }

  .hk-generate-row { justify-content: stretch; }
  .hk-gen-final-btn { width: 100%; }
}

/* ── Assignment group cards (step 3) ───────────────────────────────────────── */
#hk-groups-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hk-grp-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.hk-unassigned-card {
  background: #fff8f0;
  border: 1.5px solid #f59e0b;
  border-radius: 12px;
  overflow: hidden;
}

.hk-grp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.hk-unassigned-card .hk-grp-header {
  background: #fef3c7;
  border-bottom-color: #f59e0b;
}
.hk-grp-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.hk-grp-loc {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.hk-grp-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--border);
  padding: 2px 7px;
  border-radius: 10px;
}
.hk-grp-stem {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.hk-grp-subtitle {
  font-size: 12px;
  color: var(--muted);
}
.hk-grp-del-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 4px;
  border-radius: 5px;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.hk-grp-del-btn:hover { background: #fef2f2; color: #dc2626; }

.hk-grp-edit-btn {
  background: none;
  border: none;
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 4px;
  border-radius: 5px;
  transition: background .15s, color .15s;
  flex-shrink: 0;
  opacity: 0.5;
}
.hk-grp-edit-btn:hover { background: #eef2ff; color: #4f46e5; opacity: 1; }
.hk-lane-header-top:hover .hk-grp-edit-btn { opacity: 1; }

.hk-lane-title-inp {
  font-weight: 700;
  font-size: .88rem;
  color: var(--fg);
  background: var(--surface);
  border: 1.5px solid #6366f1;
  border-radius: 5px;
  padding: 2px 6px;
  outline: none;
  width: 100%;
  min-width: 80px;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

.hk-grp-body { padding: 4px 0; }

.hk-grp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.hk-grp-row:last-child { border-bottom: none; }
.hk-grp-prop-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 120px;
}
.hk-grp-guests {
  font-size: 12px;
  color: var(--muted);
  flex: 1;
  min-width: 120px;
}
.hk-grp-note-wrap { display: flex; align-items: center; }
.hk-grp-empty {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.hk-grp-note {
  padding: 0 16px 10px;
  border-bottom: 1px solid var(--border);
}

.hk-move-sel {
  font-size: 12px;
  padding: 5px 8px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  max-width: 160px;
}
.hk-move-sel:focus { outline: none; border-color: var(--accent); }

.hk-unassigned-row { background: #fffbeb; }

.hk-grp-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.hk-grp-add-empty-btn {
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.hk-grp-add-empty-btn:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 600px) {
  .hk-grp-row { gap: 6px; }
  .hk-move-sel { max-width: 100%; width: 100%; }
}

/* ── Step 3 — Staff sidebar + board layout ───────────────────────────────── */
.hk-step3-layout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-height: 400px;
}
.hk-staff-pane {
  flex: 0 0 180px;
  max-height: calc(100dvh - 230px);
  min-height: 200px;
  overflow-y: auto;
  position: sticky;
  top: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  font-size: 13px;
}
.hk-board-scroll {
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
}

/* ── 3-column group grid — Step 3 ───────────────────────────────────────── */
.hk-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 4px 4px 20px;
}

/* Lane = one assignment group */
.hk-lane {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.hk-lane.drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79,110,247,.18);
}

/* Unassigned lane — amber tint */
.hk-lane-unassigned {
  border-color: #d97706;
}
.hk-lane-unassigned .hk-lane-header {
  background: rgba(217,119,6,.06);
  border-radius: 10px 10px 0 0;
}

/* Lane header */
.hk-lane-header {
  padding: 10px 12px 9px;
  border-bottom: 1px solid var(--border);
}
.hk-lane-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 2px;
}
.hk-lane-title {
  font-weight: 700;
  font-size: .88rem;
  color: var(--text);
  flex: 1;
}
.hk-lane-subtitle {
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: 5px;
}
.hk-lane-assign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.hk-lane-staff-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 999px;
  padding: 2px 4px 2px 8px;
  font-size: 10px;
  font-weight: 700;
}

/* Lane body — drop zone */
.hk-lane-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 56px;
  flex: 1 1 auto;
}
.hk-lane-empty {
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
  font-style: italic;
  padding: 14px 0;
}

/* ── Staff sidebar pane ──────────────────────────────────────────────────── */
.hk-pane-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.hk-pane-hint {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}
.hk-pane-search-wrap {
  margin-bottom: 8px;
}
.hk-pane-search {
  width: 100%;
  padding: 5px 8px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
  box-sizing: border-box;
}
.hk-pane-search:focus { outline: none; border-color: var(--primary); }
.hk-pane-section-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 8px 0 3px;
}
.hk-pane-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 5px 0 2px 2px;
}
.hk-pane-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 8px 2px;
  text-align: center;
}
.hk-pane-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 8px;
  margin-bottom: 4px;
  cursor: grab;
  user-select: none;
  transition: box-shadow .12s, opacity .12s;
}
.hk-pane-card:hover  { box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.hk-pane-card:active { cursor: grabbing; }
.hk-pane-card.hk-pane-off   { opacity: .65; }
.hk-pane-card.hk-pane-taken { opacity: .45; filter: grayscale(.4); }
.hk-pane-card.dragging      { opacity: .4; }
.hk-pane-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.hk-pane-card-meta {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 1px;
}
.hk-pane-off-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  padding: 1px 5px;
}

/* ── Assign staff picker inside each lane header ─────────────────────────── */
.hk-spick-wrap {
  position: relative;
  flex: 1 1 100%;
  min-width: 100px;
}
.hk-spick-inp {
  width: 100%;
  padding: 4px 8px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
  box-sizing: border-box;
}
.hk-spick-inp:focus { outline: none; border-color: var(--primary); }
.hk-spick-drop {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  max-height: 180px;
  overflow-y: auto;
  z-index: 800;
}
.hk-spick-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.hk-spick-opt:last-child { border-bottom: none; }
.hk-spick-opt:hover      { background: var(--hover); }
.hk-spick-role {
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hk-spick-name {
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hk-spick-loc {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Staff chip × button ─────────────────────────────────────────────────── */
.hk-staff-chip-x {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 0 2px;
  font-size: 14px;
  line-height: 1;
  opacity: .7;
}
.hk-staff-chip-x:hover { opacity: 1; }

/* ── Step 3 — per-lane add task footer ───────────────────────────────────── */
.hk-lane-footer {
  padding: 6px 8px 8px;
  border-top: 1px solid var(--border);
}
.hk-lane-add-btn {
  width: 100%;
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
  padding: 5px 0;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.hk-lane-add-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--hover);
}
/* ── Add task modal ──────────────────────────────────────────────────────── */
.hkm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.hkm-card {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  width: 340px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hkm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.hkm-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.hkm-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.hkm-close {
  background: none;
  border: none;
  font-size: 17px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.hkm-close:hover { color: var(--text); }
.hkm-body {
  padding: 18px 20px;
}
.hkm-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.hkm-type-sel {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
}
.hkm-type-sel:focus { outline: none; border-color: var(--primary); }
.hkm-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
}
.btn-sm {
  font-size: 12px;
  padding: 4px 12px;
}

/* ── Tracking tab guest info line ───────────────────────────────────────── */
.hk-trk-item-guests {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.3;
}

/* ── Card inline type selector ───────────────────────────────────────────── */
.hk-card-type-sel {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
}
.hk-card-type-sel:focus { outline: none; border-color: var(--primary); }

/* ── Dragging state ──────────────────────────────────────────────────────── */
.hk-card.dragging      { opacity: .35; }
.hk-pane-card.dragging { opacity: .35; }

/* ── Touch drag clone (mobile) ───────────────────────────────────────────── */
.hk-touch-clone {
  position: fixed !important;
  pointer-events: none;
  z-index: 9999;
  opacity: .88;
  transform: scale(1.04) rotate(1.5deg);
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
  border-radius: 8px;
  transition: none !important;
}

/* Draggable card — compact */
.hk-card {
  border-radius: 8px;
  padding: 8px 10px;
  cursor: grab;
  transition: box-shadow .15s, transform .1s;
  user-select: none;
}
.hk-card:active { cursor: grabbing; }
.hk-card:hover  { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.hk-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.hk-card-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Step 2 — Searchable property picker ─────────────────────────────── */
.hk-prop-pick-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 160px;
  max-width: 280px;
}
.hk-prop-pick-inp {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  box-sizing: border-box;
}
.hk-prop-pick-inp:focus { outline: none; border-color: var(--primary); }
.hk-prop-pick-drop {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  max-height: 240px;
  overflow-y: auto;
  z-index: 900;
}
.hk-prop-pick-item {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.hk-prop-pick-item:hover { background: var(--hover); }

/* ── Kanban compact cards (all viewports) ─────────────────────────────── */
@media (max-width: 700px) {
  .ib-card        { padding: 8px 10px; gap: 4px; }
  .ib-card-top    { gap: 4px; }
  .ib-card-desc   { font-size: 11px; -webkit-line-clamp: 2; }
  .ib-meta-prop,
  .ib-meta-guest  { font-size: 10px; padding: 1px 5px; }
  .ib-meta-date     { font-size: 10px; }
  .ib-meta-assignee { font-size: 10px; padding: 1px 6px; }
  .ib-pri-badge     { font-size: 9px; padding: 1px 5px; }
  .ib-drag-handle   { display: none; }
  .ib-move-row      { gap: 4px; flex-wrap: wrap; }
  .ib-move-btn      { flex: 1; font-size: 10px; }
}

/* ── Searchable property picker (issue modal) ───────────────────────────── */
.ilp-wrap {
  margin-bottom: 14px;
}
.ilp-input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}
.ilp-input:focus { border-color: var(--accent); }
/* List is inline (not absolute) so it works inside overflow:auto modal.
   Hidden by default; .open makes it visible as a scrollable inline block. */
.ilp-list {
  display: none;
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 180px;
  overflow-y: auto;
  box-sizing: border-box;
  margin-top: -2px;          /* overlap the input bottom border */
}
.ilp-input:focus,
.ilp-wrap:focus-within .ilp-input { border-radius: 8px 8px 0 0; }
.ilp-list.open { display: block; }
.ilp-item {
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.ilp-item:last-child  { border-bottom: none; }
.ilp-item:hover       { background: #eef1ff; color: var(--accent); }
.ilp-no-match { color: var(--muted); font-style: italic; cursor: default; }

/* ── Property attr back button (mobile only) ────────────────────────────── */
.paf-back-btn {
  display: none;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 0 10px 0 0;
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .paf-back-btn { display: inline-flex; align-items: center; }
  .paf-close    { display: none; }   /* back btn replaces ✕ on mobile */
}