/* Holiday Homes CRM - the few things its pages need on top of the company CRM's 2026 look (kept apart from the copied
   ui.css / ui-2026.css so a future re-copy of those two never loses them). */

/* Transactions & Commission: the share pills had no style at all (raw browser buttons) and the Stay / money cells wrapped
   word by word. */
html body .txn-share-default, html body .txn-share-missing{
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; margin-inline-start: 6px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 11px; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer; box-shadow: none;
}
html body .txn-share-default:hover{ border-color: var(--brand-600, #0F6B46); color: var(--brand-text, #0b5538); }
html body .txn-share-missing{ border-color: #f0c36d; background: #fff7e0; color: #8a5a00; }
html body.dark .txn-share-missing{ border-color: rgba(240,195,109,.5); background: rgba(240,195,109,.12); color: #f0c36d; }
html body #txn-s-source-note{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 12px 0 14px; font-size: 13px; color: var(--ink-2); }
html body #txn-s-source-note .txn-share-default{ margin-inline-start: 2px; }
html body .txn-table td.txn-date, html body .txn-table td.txn-money, html body .txn-table td.txn-comm-val{ white-space: nowrap; }
html body .txn-table td:first-child{ min-width: 190px; }
html body .txn-table td.txn-money .txn-prop-code{ display: inline; margin: 0 2px 0 4px; }
html body .txn-table td.txn-money .txn-share-default{ display: inline-flex; margin-top: 4px; }

/* ── HH-only rules that the old Holiday Homes ui.css carried and the copied CRM stylesheet does not (restored 2026-10-04: the in-page select dropdown, Holiday Home page, owner reports ...) ── */
.ztask-check{flex:0 0 19px;width:19px;height:19px;padding:0;border:1.5px solid #a9b3c1;border-radius:50%;background:#fff;color:#fff;font-size:11px;cursor:pointer}

.ztask-check.checked{border-color:var(--zt-green);background:var(--zt-green)}

.ztask-check[disabled]{opacity:.35;cursor:not-allowed}

/* Mobile: business record lists become cards; tables are hidden (not h-scrolled) */
@media (max-width:900px){
  #page-daily-media .dmhh-desktop-only,
  #page-holiday-homes .dmhh-desktop-only{display:none !important}
  #page-daily-media .dmhh-cards,
  #page-holiday-homes .dmhh-cards{display:grid;grid-template-columns:1fr;gap:var(--dmhh-gap)}
  /* touch targets */
  #page-daily-media .dmhh-actions .btn,
  #page-holiday-homes .dmhh-actions .btn,
  #page-daily-media .btn-xs,
  #page-holiday-homes .btn-xs{min-height:var(--dmhh-touch);padding-left:14px;padding-right:14px}
  /* nothing in these two modules may push the document sideways */
  #page-daily-media,#page-holiday-homes{overflow-x:hidden}
  #page-daily-media *,#page-holiday-homes *{max-width:100%}
  #page-daily-media img,#page-holiday-homes img{height:auto}
  /* horizontally scrollable section tab strip (Holiday Home has 9 sections) */
  #page-holiday-homes .dmhh-tabstrip{
    display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:4px;margin-bottom:10px;
  }
  #page-holiday-homes .dmhh-tabstrip::-webkit-scrollbar{display:none}
  #page-holiday-homes .dmhh-tabstrip .btn{flex:0 0 auto;min-height:40px}
  /* right rail becomes stacked accordion sections, not an endless column */
  #page-holiday-homes .dmhh-rail-acc summary{
    cursor:pointer;font-size:13px;font-weight:800;padding:11px 2px;list-style:none;
    display:flex;justify-content:space-between;align-items:center;
  }
  #page-holiday-homes .dmhh-rail-acc summary::-webkit-details-marker{display:none}
  #page-holiday-homes .dmhh-rail-acc[open] summary{border-bottom:1px solid var(--border-light,var(--border));margin-bottom:9px}
  /* calendar keeps its matrix, but scrolling stays INSIDE the component */
  #page-holiday-homes .dmhh-cal-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  #page-holiday-homes .dmhh-cal-scroll > *{min-width:302px}
  /* modals fit 320-430px */
  #hh-media-modal > div,#hh-pf-modal > div{max-height:92vh;padding:14px !important}
}

@media (max-width:900px){
  /* cards only — the grid is hidden, so the page never scrolls sideways */
  #page-data .dt-wrap{display:none}
  #page-data .dmhh-card.is-sel{border-color:var(--ok,var(--primary))}
  #page-data .dmhh-actions .dt-act.is-lg{min-height:44px}
  #page-data .dt-mcheck{width:18px;height:18px;margin-top:2px}
  #small-modal .dt-dgrid{grid-template-columns:1fr}
  #small-modal .dt-dhead{flex-direction:column;align-items:flex-start}
}

/* ── 1. Selected state ────────────────────────────────────────────────────────
   Was: a 2px outline in var(--primary). After the graphite theme conversion
   --primary is #9EA3AB, which on a #1D2026 card with a #34373D border reads as
   "slightly different edge", not "selected". Nothing else changed - same
   background, same border - so a checked card looked unchanged.
   Now: a tinted ground + a solid start-edge rail + the ring, all painted with
   properties that DO NOT participate in layout (background, box-shadow, outline),
   so a card can never change height, width or text position when selected. */
#page-customers.crm-gold-v2 .crm-dl-card.is-sel,
#page-deals.crm-gold-v2 .crm-dl-card.is-sel,
#page-data .dmhh-card.is-sel{
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--primary) 13%, transparent),
      color-mix(in srgb, var(--primary) 13%, transparent)),
    var(--card);
  outline:2px solid var(--primary);
  outline-offset:-2px;
  /* the rail is an inset shadow, not a border: zero layout cost, mirrors in RTL
     because it is drawn from the inline-start edge via the logical offset below */
  box-shadow: inset 3px 0 0 0 var(--primary);
}

/* ═══ r273 ═══ */
/* C3 · Agent Tracker organization mode: the personal blocks fold away unless the person opts back in */
#page-agent-tracker.at-org-mode:not(.at-show-personal) #at-status-banner,
#page-agent-tracker.at-org-mode:not(.at-show-personal) .at-hero-row,
#page-agent-tracker.at-org-mode:not(.at-show-personal) #at-today-location,
#page-agent-tracker.at-org-mode:not(.at-show-personal) #at-panel-today .at-stats-grid,
#page-agent-tracker.at-org-mode:not(.at-show-personal) #at-btn-checkin,
#page-agent-tracker.at-org-mode:not(.at-show-personal) #at-btn-checkout,
#page-agent-tracker.at-org-mode:not(.at-show-personal) #at-btn-break{display:none}

.at-personal-toggle{margin-inline-start:auto;border:0;background:transparent;color:var(--brand-text);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:8px 10px;border-radius:999px}

.at-personal-toggle:hover{background:var(--brand-tint)}

#page-agent-tracker.at-org-mode.at-show-personal #at-panel-report .at-report-form{display:block}

/* ── Agents bridge (Holiday Homes) ─────────────────────────────────────── */
.hhb-person{display:flex;align-items:center;gap:10px}

.hhb-person img,.hhb-av{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}

.hhb-av{display:inline-grid;place-items:center;background:var(--brand-tint);color:var(--brand-text);font-weight:700}

.hhb-person b{display:block;font-size:13px}

.hhb-person small{display:block;color:var(--ink-3);font-size:11.5px}

.hhb-row.is-on td{background:var(--brand-tint)}

.hhb-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}

.hhb-table td{vertical-align:middle}

.hhb-table select{min-width:120px}

/* in-page select dropdown */
.hh-select-pop{background:var(--surface,#fff);color:var(--text,#1D1E24);border:1px solid var(--border,#d9d9e0);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);overflow:auto;padding:4px;font-size:13px}

.hh-select-opt{padding:8px 10px;border-radius:7px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hh-select-opt:hover{background:var(--primary-light,rgba(79,83,88,.10))}

.hh-select-opt.is-selected{background:var(--brand-200,#cfe0d6);color:var(--text,#1D1E24);font-weight:600}

.hh-select-opt.is-disabled{opacity:.45;cursor:default}

body.dark .hh-select-pop,body[data-theme="dark"] .hh-select-pop{background:var(--surface,#1f2126);border-color:var(--border,#33363d)}

/* Transactions: a booking whose home has no Owner Share % — the way to fix it, not a blank cell */
.txn-share-missing{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border:1px dashed var(--warning,#D97706);border-radius:999px;background:var(--warning-light,#FFFBEB);color:var(--warning,#D97706);font:inherit;font-size:12px;font-weight:600;line-height:1.4;cursor:pointer;white-space:nowrap}

.txn-share-missing:hover{border-style:solid}

.txn-share-missing:focus-visible{outline:2px solid var(--warning,#D97706);outline-offset:2px}

/* Transactions: seven columns must fit beside the side panel on a laptop — the two money columns the page is about were off-screen */
#page-transactions .txn-table{min-width:700px}

#page-transactions .txn-table th,#page-transactions .txn-table td{padding-left:10px;padding-right:10px}

#page-transactions .txn-prop-name{max-width:150px}

/* txn-main-stack: below a wide desktop the by-channel panel goes under the table, so the table keeps the full width */
@media (max-width:1700px){#page-transactions .txn-main{grid-template-columns:minmax(0,1fr)}#page-transactions .txn-agent-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 16px}}

/* txn-rtl-names: an English home name in an RTL page was cut at its START ("…ubai Mall & Burj Khalifa") */
html[dir="rtl"] #page-transactions .txn-prop-name{direction:ltr;text-align:right}

/* Guest message: the photo that travels with it */
.hh-msg-photo{display:flex;gap:12px;align-items:flex-start;margin:4px 0 12px;padding:10px;border:1px solid var(--border,#e5e7eb);border-radius:12px;background:var(--surface-2,rgba(0,0,0,.02))}

.hh-msg-photo img{width:112px;height:84px;flex:0 0 auto;object-fit:cover;border-radius:8px;background:var(--border,#e5e7eb)}

.hh-msg-photo-side{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto}

.hh-msg-check{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:600;cursor:pointer}

.hh-msg-check input{margin-top:2px;flex:0 0 auto}

.hh-msg-photo-actions{display:flex;gap:6px;flex-wrap:wrap}

@media (max-width:480px){.hh-msg-photo img{width:84px;height:64px}}

/* Reports & KPI → Home & owner reports */
.hhr-root{display:flex;flex-direction:column;gap:14px;padding:4px 0 24px}

.hhr-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}

.hhr-controls label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--text-muted,#6b7280);min-width:150px}

.hhr-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}

.hhr-tile{background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:14px}

.hhr-tile b{display:block;font-size:19px;font-variant-numeric:tabular-nums}

.hhr-tile span{font-size:12px;color:var(--text-muted,#6b7280)}

.hhr-card{background:var(--surface,#fff);border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:16px}

.hhr-card h3{margin:0 0 10px;font-size:15px}

.hhr-card h4{margin:18px 0 8px;font-size:13px}

.hhr-card-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}

.hhr-actions{display:flex;gap:6px;flex-wrap:wrap}

.hhr-muted{color:var(--text-muted,#6b7280);font-size:13px}

.hhr-warn{background:var(--warning-light,#FFFBEB);color:var(--warning,#D97706);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.7}

.hhr-table-wrap{overflow-x:auto}

.hhr-table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}

.hhr-table th,.hhr-table td{padding:9px 10px;border-bottom:1px solid var(--border,#e5e7eb);text-align:start;white-space:nowrap}

.hhr-table th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted,#6b7280)}

.hhr-table .num{text-align:end;font-variant-numeric:tabular-nums}

.hhr-table tr.hhr-total td{font-weight:700;border-bottom:0}

.hhr-newlink{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0;padding:12px;border:1px dashed var(--brand-600,#0f6b46);border-radius:12px;font-size:13px}

.hhr-newlink input{flex:1 1 320px;min-width:0}

@media print{body.hhr-printing .sidebar,body.hhr-printing .topbar,body.hhr-printing .anl-tab-bar,body.hhr-printing .hhr-controls,body.hhr-printing .hhr-actions,body.hhr-printing .mobile-tabbar{display:none!important}body.hhr-printing .main-content,body.hhr-printing #content{margin:0!important;padding:0!important;overflow:visible!important}}

/* ── Owner / company split (r19): WHERE a percentage came from ───────────────────────────────
   Neutral, not amber: a figure priced with the company default is correct, it just was not
   negotiated for that home. The marker is a button because it is also the way to the home's
   Owner tab (Transactions, the home report) or to Settings (the totals note). */
.txn-share-default{display:inline-flex;align-items:center;gap:4px;margin-inline-start:6px;padding:2px 8px;border:1px solid var(--border,#d8dbe0);border-radius:999px;background:var(--card2,#f4f5f7);color:var(--text-muted,#6b7280);font:inherit;font-size:11px;font-weight:600;line-height:1.5;cursor:pointer;white-space:nowrap}

.txn-share-default:hover{border-color:var(--brand-600,#0f6b46);color:var(--brand-600,#0f6b46)}

.txn-share-default:focus-visible{outline:2px solid var(--brand-600,#0f6b46);outline-offset:2px}

.txn-source-note{margin:10px 2px 0;padding:10px 14px;border:1px solid var(--border,#d8dbe0);border-radius:12px;background:var(--card2,#f4f5f7);color:var(--text-muted,#6b7280);font-size:12.5px;line-height:1.7}

.hhr-note{background:var(--card2,#f4f5f7);color:var(--text-muted,#6b7280);border:1px solid var(--border,#d8dbe0);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.7}

/* Settings → Holiday home defaults: two numbers that always add up to 100 */
.hhd-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}

.hhd-row .form-field{flex:1 1 180px;min-width:0}

.hhd-row .form-input{width:100%}

.hhd-split{padding-bottom:10px;font-size:18px;font-weight:700;color:var(--text-muted,#6b7280)}

@media (max-width:640px){.hhd-split{display:none}.hhd-row{gap:8px}.hhd-row .form-field{flex:1 1 100%}}