/* Branches screen (لوحة الفروع): the manager branches panel - its toolbar and branch list - and the branch details sheet.
   Presentation only, scoped to #branches-panel and .ref-sheet.branch-sheet: no other screen, sheet or control of the app
   is styled here, and the branch map inside the panel keeps its own stylesheet (ewaa-map.css). Identity: navy and gold on
   warm white, the same values as the branch map; gold is an accent, status colours are information. */
#branches-panel,.ref-sheet.branch-sheet{
  --bs-navy:#0E2438;--bs-navy-2:#17344E;--bs-gold:#C9A24A;--bs-gold-soft:rgba(201,162,74,.16);
  --bs-paper:#FFFFFF;--bs-warm:#FBF9F5;--bs-warm-2:#F5F1E8;--bs-line:#E9E3D7;--bs-line-2:#F1ECE3;
  --bs-ink:#132434;--bs-ink-2:#4A5B6B;--bs-ink-3:#7D8C9A;
  --bs-ok:#1E7A52;--bs-ok-soft:#EAF5EF;--bs-warn:#A86A12;--bs-warn-soft:#FBF2E0;--bs-bad:#B23A31;--bs-bad-soft:#FBECEA;
  --bs-bar:var(--bs-navy);
  --bs-f:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --bs-shadow:0 1px 2px rgba(16,32,48,.05),0 8px 24px rgba(16,32,48,.05);
}
.ref-dark #branches-panel,.ref-dark .ref-sheet.branch-sheet{
  --bs-navy:#2C4A68;--bs-navy-2:#35587A;--bs-gold-soft:rgba(201,162,74,.2);
  --bs-paper:#17202D;--bs-warm:#1B2533;--bs-warm-2:#212C3B;--bs-line:#2A3647;--bs-line-2:#232E3D;
  --bs-ink:#EEF3F9;--bs-ink-2:#C3CFDC;--bs-ink-3:#8C9CAE;
  --bs-ok:#4FBF8B;--bs-ok-soft:rgba(79,191,139,.12);--bs-warn:#E0B060;--bs-warn-soft:rgba(224,176,96,.12);--bs-bad:#E8857C;--bs-bad-soft:rgba(232,133,124,.12);
  --bs-bar:var(--bs-gold);
  --bs-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* ── the panel ── */
#branches-panel{background:var(--bs-paper);border:1px solid var(--bs-line);border-radius:20px;padding:16px;box-shadow:var(--bs-shadow);font-family:var(--bs-f);color:var(--bs-ink)}

/* ── toolbar: search first and widest; the map/list switch, status, sort and branch beside it ── */
#branches-panel .ref-toolbar{display:grid;grid-template-columns:minmax(240px,1fr) auto minmax(132px,auto) minmax(112px,auto) minmax(132px,auto);
  grid-template-areas:"q sw st so br";align-items:center;gap:8px;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--bs-line-2)}
#branches-panel .ref-toolbar-buttons{display:contents}
#branches-panel .ref-search{grid-area:q;width:auto;max-width:520px;height:44px;margin:0;padding:0 14px;gap:9px;border:1px solid var(--bs-line);border-radius:12px;
  background:var(--bs-warm);color:var(--bs-ink-3);font-size:17px;line-height:1;transition:border-color .16s ease-out,box-shadow .16s ease-out,background-color .16s ease-out}
#branches-panel .ref-search:focus-within{background:var(--bs-paper);border-color:rgba(201,162,74,.75);box-shadow:0 0 0 3px var(--bs-gold-soft)}
#branches-panel .ref-search input{height:100%;min-width:0;font:inherit;font-size:14px;color:var(--bs-ink)}
#branches-panel .ref-search input::placeholder{color:var(--bs-ink-3);opacity:1}
#branches-panel .ref-toolbar .map-switch{grid-area:sw;display:inline-flex;align-items:stretch;height:44px;margin:0;padding:3px;gap:2px;border:1px solid var(--bs-line);border-radius:12px;background:var(--bs-warm-2);box-shadow:none}
#branches-panel .ref-toolbar .map-switch button{height:auto;min-width:68px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--bs-ink-2);font:inherit;font-size:13px;font-weight:600;box-shadow:none;transition:background-color .16s ease-out,color .16s ease-out}
#branches-panel .ref-toolbar .map-switch button:hover{color:var(--bs-ink)}
#branches-panel .ref-toolbar .map-switch button.on{background:var(--bs-navy);color:#fff;box-shadow:0 1px 2px rgba(14,36,56,.22)}
#branches-panel .ref-toolbar .map-switch button:focus-visible{outline:2px solid var(--bs-gold);outline-offset:1px}
#branches-panel #status-filter{grid-area:st}
#branches-panel #sort-filter{grid-area:so}
#branches-panel #branch-filter{grid-area:br}
#branches-panel .ref-toolbar select{-webkit-appearance:none;appearance:none;width:100%;min-width:0;height:44px;margin:0;padding:0 12px;padding-inline-end:30px;
  border:1px solid var(--bs-line);border-radius:12px;background-color:var(--bs-paper);color:var(--bs-ink);font:inherit;font-size:13px;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237D8C9A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 12px center;transition:border-color .16s ease-out,box-shadow .16s ease-out}
#branches-panel .ref-toolbar select:hover{border-color:#DCD3C3}
#branches-panel .ref-toolbar select:focus{outline:0;border-color:rgba(201,162,74,.75);box-shadow:0 0 0 3px var(--bs-gold-soft)}

/* map view: the list filters and the page search act on the list only (the map has its own search and filters), so while
   the map is shown the toolbar keeps just the map/list switch. Browsers without :has() keep every control, as before. */
#branches-panel:has(>.ref-grid[hidden]) .ref-toolbar{grid-template-columns:auto;grid-template-areas:"sw";justify-content:start}
#branches-panel:has(>.ref-grid[hidden]) .ref-search,#branches-panel:has(>.ref-grid[hidden]) .ref-toolbar select{display:none}

/* ── branch list ── */
#branches-panel .ref-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px}
#branches-panel .ref-branch-card{display:flex;flex-direction:column;gap:12px;padding:14px 16px 12px;border:1px solid var(--bs-line);border-radius:14px;background:var(--bs-paper);color:var(--bs-ink);
  box-shadow:0 1px 2px rgba(16,32,48,.04);cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;
  transition:border-color .16s ease-out,box-shadow .16s ease-out,transform .12s ease-out}
#branches-panel .ref-branch-card:hover{border-color:#DCD2BF;box-shadow:0 1px 2px rgba(16,32,48,.05),0 8px 22px rgba(16,32,48,.07)}
#branches-panel .ref-branch-card:active{transform:scale(.99)}
/* status accent: a short bar on the card's start edge, coloured by how recent the last update is */
#branches-panel .ref-branch-card:before{top:15px;bottom:auto;right:0;width:3px;height:22px;border-radius:3px 0 0 3px;background:var(--bs-line)}
#branches-panel .ref-branch-card[data-state="fresh"]:before{background:var(--bs-ok)}
#branches-panel .ref-branch-card[data-state="late"]:before{background:var(--bs-warn)}
#branches-panel .ref-branch-card[data-state="missing"]:before{background:var(--bs-bad)}
#branches-panel .ref-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
#branches-panel .ref-branch-name{display:block;min-width:0;flex:1 1 auto}
#branches-panel .ref-branch-name h3{margin:0;font-size:16px;font-weight:700;line-height:1.35;color:var(--bs-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#branches-panel .ref-branch-name span{display:block;margin-top:2px;font-size:12px;color:var(--bs-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#branches-panel .ref-card-actions{display:flex;align-items:center;gap:0;flex:0 0 auto}
#branches-panel .ref-status{gap:6px;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
#branches-panel .ref-status i{width:6px;height:6px}
#branches-panel .ref-status.fresh{background:var(--bs-ok-soft);color:var(--bs-ok)}
#branches-panel .ref-status.late{background:var(--bs-warn-soft);color:var(--bs-warn)}
#branches-panel .ref-status.missing{background:var(--bs-bad-soft);color:var(--bs-bad)}
/* the chevron: a 44px hit area around a quiet glyph, pulled back into the header by negative margins */
#branches-panel .ref-card-actions .branch-more{display:grid;place-items:center;width:44px;height:44px;margin:-8px -6px -8px -12px;padding:0;border:0;border-radius:12px;background:transparent;
  color:var(--bs-ink-3);font-size:22px;line-height:1;cursor:pointer}
#branches-panel .ref-card-actions .branch-more:hover{background:var(--bs-warm-2);color:var(--bs-ink)}
#branches-panel .ref-card-actions .branch-more:focus-visible{outline:2px solid var(--bs-gold);outline-offset:-4px}
#branches-panel .ref-metrics{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:0;margin:0;padding-top:11px;border-top:1px solid var(--bs-line-2)}
#branches-panel .ref-metrics>div{min-width:0;padding:0 12px;border-radius:0;background:none;text-align:start;border-inline-start:1px solid var(--bs-line-2)}
#branches-panel .ref-metrics>div:first-child{padding-inline-start:0;border-inline-start:0}
#branches-panel .ref-metrics span{display:block;font-size:11px;color:var(--bs-ink-3);white-space:nowrap}
#branches-panel .ref-metrics strong{display:block;margin-top:2px;font-size:20px;font-weight:700;line-height:1.15;color:var(--bs-ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
#branches-panel .ref-metrics .is-warn strong{color:var(--bs-warn)}
#branches-panel .occ-bar{display:block;height:4px;margin-top:7px;border-radius:99px;background:var(--bs-line-2);overflow:hidden}
#branches-panel .occ-bar b{display:block;height:100%;border-radius:inherit;background:var(--bs-bar)}
#branches-panel .ref-card-foot{display:block;margin:0;padding:0;border:0;color:var(--bs-ink-3)}
#branches-panel .ref-card-foot span{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-compact #branches-panel .ref-branch-card{padding:11px 14px 10px;gap:9px}
.ref-compact #branches-panel .ref-metrics{padding-top:8px}
.ref-compact #branches-panel .ref-metrics strong{font-size:18px}

/* brand swatches (the branch map's group colours) */
#branches-panel .bc-dot{display:inline-block;vertical-align:middle;margin:-2px 0 0;margin-inline-end:6px}
#branches-panel .bc-dot,.branch-sheet .bc-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--bs-ink-3)}
#branches-panel .bc-dot.g-muhaidb,.branch-sheet .bc-dot.g-muhaidb{background:#A9761B}
#branches-panel .bc-dot.g-nawara,.branch-sheet .bc-dot.g-nawara{background:#1F7A6F}
#branches-panel .bc-dot.g-sama,.branch-sheet .bc-dot.g-sama{background:#3C6296}
#branches-panel .bc-dot.g-neyara,.branch-sheet .bc-dot.g-neyara{background:#9C4A41}

/* ── branch details sheet ── */
.ref-sheet-back .ref-sheet.branch-sheet{width:min(560px,100%);background:var(--bs-paper);color:var(--bs-ink);border:1px solid var(--bs-line);border-radius:20px;font-family:var(--bs-f);
  box-shadow:0 1px 3px rgba(16,32,48,.08),0 24px 64px rgba(16,32,48,.2)}
.branch-sheet header{position:sticky;top:0;z-index:2;align-items:flex-start;gap:12px;padding:16px 20px 14px;background:var(--bs-paper);border-bottom:1px solid var(--bs-line-2)}
.branch-sheet header>div{min-width:0}
.branch-sheet header small{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--bs-ink-3)}
.branch-sheet header h2{margin:3px 0 0;font-size:22px;font-weight:700;line-height:1.3;color:var(--bs-ink)}
.branch-sheet .bs-fresh{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;margin:6px 0 0;font-size:12px;color:var(--bs-ink-3)}
.branch-sheet .bs-fresh i{width:7px;height:7px;border-radius:50%;background:var(--bs-ink-3)}
.branch-sheet .bs-fresh b{font-weight:600}
.branch-sheet .bs-fresh.fresh b{color:var(--bs-ok)}.branch-sheet .bs-fresh.fresh i{background:var(--bs-ok)}
.branch-sheet .bs-fresh.late b{color:var(--bs-warn)}.branch-sheet .bs-fresh.late i{background:var(--bs-warn)}
.branch-sheet .bs-fresh.missing b{color:var(--bs-bad)}.branch-sheet .bs-fresh.missing i{background:var(--bs-bad)}
/* close: a 44x44 hit area around a quiet 32px box */
.branch-sheet header #sheet-close{position:relative;isolation:isolate;flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;margin:-6px -6px 0 -8px;padding:0;border:0;border-radius:12px;
  background:transparent;color:var(--bs-ink-2);font-size:22px;line-height:1;cursor:pointer;touch-action:manipulation}
.branch-sheet header #sheet-close::before{content:"";position:absolute;inset:6px;z-index:-1;border-radius:10px;border:1px solid var(--bs-line);background:var(--bs-warm)}
.branch-sheet header #sheet-close:hover::before{background:var(--bs-warm-2)}
.branch-sheet header #sheet-close:focus-visible{outline:none}
.branch-sheet header #sheet-close:focus-visible::before{outline:2px solid var(--bs-gold);outline-offset:1px}
/* the body reads top-down by importance; injected pieces (the directive button and log) take their place by order */
.branch-sheet .ref-sheet-body{display:flex;flex-direction:column;gap:14px;padding:16px 20px 22px}
.branch-sheet .ref-sheet-body>*{order:9;margin:0}
.branch-sheet .ref-sheet-body>.detail-grid[data-branch-id]{order:1}
.branch-sheet .ref-sheet-body>#directive-send-btn{order:2}
.branch-sheet .ref-sheet-body>.net-contact{order:3}
.branch-sheet .ref-sheet-body>.bs-types{order:4}
.branch-sheet .ref-sheet-body>.bs-rates{order:5}
.branch-sheet .ref-sheet-body>#directive-log{order:6}
.branch-sheet .ref-sheet-body>.bs-owner-h{order:7}
.branch-sheet .ref-sheet-body>#net-contact-edit{order:8}
.branch-sheet .ref-sheet-body>.bs-photo{order:0}
.branch-sheet .ref-sheet-body>#bs-photo-edit{order:8}
/* the branch photo, when there is one: a calm cover strip above the figures, never taller than the occupancy block */
.branch-sheet .bs-photo{position:relative;height:148px;border-radius:16px;overflow:hidden;background:var(--bs-warm-2);border:1px solid var(--bs-line)}
.branch-sheet .bs-photo img{display:block;width:100%;height:100%;object-fit:cover}
.branch-sheet h3{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--bs-ink)}
.branch-sheet h3 small{margin-inline-start:4px;font-size:11px;font-weight:500;color:var(--bs-ink-3)}
/* lead figures: occupancy with its bar, then occupied · available · sellable · out of service */
.branch-sheet .detail-grid[data-branch-id]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:14px 14px 12px;border:1px solid var(--bs-line);border-radius:16px;background:var(--bs-warm)}
.branch-sheet .detail-grid[data-branch-id]>div{min-width:0;padding:10px 10px 0;border-radius:0;background:none;border-inline-start:1px solid var(--bs-line)}
.branch-sheet .detail-grid[data-branch-id]>div:nth-child(2){padding-inline-start:0;border-inline-start:0}
.branch-sheet .detail-grid[data-branch-id] span{display:block;font-size:11px;color:var(--bs-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.branch-sheet .detail-grid[data-branch-id] strong{display:block;margin-top:2px;font-size:20px;font-weight:700;line-height:1.15;color:var(--bs-ink);font-variant-numeric:tabular-nums}
.branch-sheet .detail-grid[data-branch-id] small{display:block;margin-top:2px;font-size:11px;color:var(--bs-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.branch-sheet .detail-grid[data-branch-id] .is-warn strong{color:var(--bs-warn)}
.branch-sheet .detail-grid[data-branch-id]>.bs-occ{grid-column:1/-1;padding:0 0 12px;border:0;border-bottom:1px solid var(--bs-line)}
.branch-sheet .bs-occ span{font-size:12px}
.branch-sheet .detail-grid[data-branch-id] .bs-occ strong{margin-top:1px;font-size:34px;line-height:1.05;letter-spacing:-.02em}
.branch-sheet .bs-occ .occ-bar{display:block;height:8px;margin-top:10px;border-radius:99px;background:var(--bs-line);overflow:hidden}
.branch-sheet .bs-occ .occ-bar b{display:block;height:100%;border-radius:inherit;background:var(--bs-bar)}
.branch-sheet .detail-grid[data-branch-id] .bs-occ small{margin-top:8px;font-size:12px;color:var(--bs-ink-2);white-space:normal}
/* manager action */
.branch-sheet #directive-send-btn{position:static;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:0!important;padding:0 16px;
  border:0;border-radius:11px;background:var(--bs-navy);color:#fff;font:inherit;font-size:14px;font-weight:600;box-shadow:none;cursor:pointer}
.branch-sheet #directive-send-btn:hover{background:var(--bs-navy-2)}
.branch-sheet #directive-send-btn:focus-visible{outline:2px solid var(--bs-gold);outline-offset:2px}
/* contact: the phone and the location as two quiet actions */
.branch-sheet .net-contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.branch-sheet .net-contact>div{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:8px 12px;border:1px solid var(--bs-line);border-radius:12px;background:var(--bs-paper)}
.branch-sheet .net-contact>div:hover{border-color:#DCD2BF}
.branch-sheet .net-contact span{font-size:12px;color:var(--bs-ink-3)}
.branch-sheet .net-contact strong{margin:0;font-size:14px;font-weight:600;color:var(--bs-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.branch-sheet .net-contact a{color:var(--bs-navy);text-decoration:none}
.ref-dark .branch-sheet .net-contact a{color:#E0BE71}
.branch-sheet .net-contact a::after{content:"";position:absolute;inset:0;border-radius:12px}
.branch-sheet .net-contact a:focus-visible{outline:none}
.branch-sheet .net-contact a:focus-visible::after{outline:2px solid var(--bs-gold);outline-offset:1px}
.branch-sheet .net-contact a[href^="tel:"]{direction:ltr;unicode-bidi:isolate}
.branch-sheet .net-contact .is-empty strong{color:var(--bs-ink-3);font-weight:500}
/* room types: the three reported types side by side */
.branch-sheet .bs-types .detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.branch-sheet .bs-types .detail-grid>div{min-width:0;padding:10px 12px;border:1px solid var(--bs-line);border-radius:12px;background:var(--bs-paper)}
.branch-sheet .bs-types .detail-grid span{display:block;font-size:12px;color:var(--bs-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.branch-sheet .bs-types .detail-grid strong{display:block;margin-top:2px;font-size:22px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.branch-sheet .bs-types .detail-grid .is-zero strong{color:var(--bs-ink-3);font-weight:600}
.branch-sheet .bs-types .detail-meta{margin:0;padding:10px 12px;border:1px dashed var(--bs-line);border-radius:12px;font-size:12px;color:var(--bs-ink-3)}
/* prices: two compact lists */
.branch-sheet .bs-rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.branch-sheet .bs-rates>div{min-width:0}
.branch-sheet .detail-rates{display:block;border:1px solid var(--bs-line-2);border-radius:12px;overflow:hidden}
.branch-sheet .detail-rates>div{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:0;background:var(--bs-paper);font-size:12.5px;color:var(--bs-ink-2);border-top:1px solid var(--bs-line-2)}
.branch-sheet .detail-rates>div:first-child{border-top:0}
.branch-sheet .detail-rates b{font-weight:600;color:var(--bs-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.branch-sheet .detail-rates .ref-empty{margin:0;padding:10px 12px;font-size:12px;color:var(--bs-ink-3)}
/* directive log (branch-directives.js) */
.branch-sheet #directive-log{margin-top:0!important}
/* SYSTEM_OWNER branch data: last, behind a hairline, in the quietest treatment */
.branch-sheet .bs-owner-h{margin:4px 0 -6px;padding-top:14px;border-top:1px dashed var(--bs-line);font-size:12px;font-weight:600;color:var(--bs-ink-3)}
.branch-sheet #net-contact-edit{display:grid;gap:10px;margin:0;padding:12px;border:1px solid var(--bs-line-2);border-radius:12px;background:var(--bs-warm)}
.branch-sheet #net-contact-edit label{display:grid;gap:5px;font-size:12px;color:var(--bs-ink-3)}
.branch-sheet #net-contact-edit input,.branch-sheet #net-contact-edit select{width:100%;min-width:0;height:44px;padding:0 12px;border:1px solid var(--bs-line);border-radius:10px;background:var(--bs-paper);color:var(--bs-ink);font:inherit;font-size:14px}
.branch-sheet #net-contact-edit input:focus,.branch-sheet #net-contact-edit select:focus{outline:0;border-color:rgba(201,162,74,.75);box-shadow:0 0 0 3px var(--bs-gold-soft)}
.branch-sheet #net-contact-edit .avail-hint{font-size:11px;line-height:1.7;color:var(--bs-ink-3)}
.branch-sheet #net-contact-save{min-height:44px;padding:0 16px;border:1px solid var(--bs-line);border-radius:10px;background:var(--bs-paper);color:var(--bs-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}

/* SYSTEM_OWNER branch photo editor: preview, upload / replace, remove */
.branch-sheet #bs-photo-edit{display:grid;gap:10px;margin:0;padding:12px;border:1px solid var(--bs-line-2);border-radius:12px;background:var(--bs-warm)}
.branch-sheet .bpe-head strong{display:block;font-size:12.5px;font-weight:600;color:var(--bs-ink)}
.branch-sheet .bpe-head span{display:block;margin-top:2px;font-size:11px;line-height:1.6;color:var(--bs-ink-3)}
.branch-sheet .bpe-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.branch-sheet .bpe-preview{flex:0 0 auto;width:112px;height:72px;border-radius:10px;overflow:hidden;border:1px solid var(--bs-line);background:var(--bs-warm-2)}
.branch-sheet .bpe-preview[hidden]{display:none}
.branch-sheet .bpe-preview img{display:block;width:100%;height:100%;object-fit:cover}
.branch-sheet .bpe-actions{display:flex;flex-wrap:wrap;gap:8px}
.branch-sheet .bpe-actions[hidden]{display:none}
.branch-sheet .bpe-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:1px solid var(--bs-line);border-radius:10px;
  background:var(--bs-paper);color:var(--bs-ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;touch-action:manipulation}
.branch-sheet .bpe-btn:hover{border-color:#DCD2BF}
.branch-sheet .bpe-btn:disabled{opacity:.6;cursor:default}
.branch-sheet .bpe-btn:focus-visible,.branch-sheet .bpe-file:focus-within{outline:2px solid var(--bs-gold);outline-offset:1px}
.branch-sheet .bpe-btn.is-primary{border-color:var(--bs-navy);background:var(--bs-navy);color:#fff}
.branch-sheet .bpe-btn.is-danger{color:var(--bs-bad)}
.branch-sheet .bpe-btn.is-danger.is-armed{border-color:var(--bs-bad);background:var(--bs-bad-soft)}
.branch-sheet .bpe-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.branch-sheet .bpe-msg{font-size:11.5px;line-height:1.6;color:var(--bs-ink-2)}
.branch-sheet .bpe-msg:empty{display:none}

@media (prefers-reduced-motion:reduce){
  #branches-panel .ref-branch-card,#branches-panel .ref-search,#branches-panel .ref-toolbar select,#branches-panel .ref-toolbar .map-switch button{transition:none}
  #branches-panel .ref-branch-card:active{transform:none}
}

/* ── desktop and tablet list cards: a little more air, mostly between the identity row and the figures ── */
@media (min-width:821px){
  #branches-panel .ref-branch-card{padding:16px 17px 14px;gap:14px}
  #branches-panel .ref-metrics{padding-top:13px}
  #branches-panel .ref-metrics strong{margin-top:3px}
  #branches-panel .occ-bar{margin-top:8px}
  #branches-panel .ref-card-foot{margin-top:-1px}
}

/* ── tablets: the search on its own row, the four controls under it ── */
@media (max-width:1180px) and (min-width:821px){
  #branches-panel .ref-toolbar{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"q q q q" "sw st so br"}
  #branches-panel .ref-search{max-width:none}
}

/* ── phones: search and the map/list switch on one row, the three filters under it ── */
@media (max-width:820px){
  #branches-panel{padding:12px;border-radius:18px}
  #branches-panel .ref-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"q q sw" "st so br";gap:8px;margin-bottom:12px;padding-bottom:12px}
  #branches-panel .ref-search{max-width:none;padding:0 12px;gap:7px}
  #branches-panel .ref-search input{font-size:16px}
  #branches-panel .ref-toolbar .map-switch button{flex:1 1 0;min-width:0;padding:0 6px}
  #branches-panel .ref-toolbar select{padding:0 10px;padding-inline-end:26px;background-position:left 9px center;font-size:13px}
  #branches-panel .ref-grid{grid-template-columns:1fr;gap:10px}
  #branches-panel .ref-branch-card{padding:13px 14px 11px;gap:11px}
  #branches-panel .ref-branch-name h3{font-size:15.5px}
  #branches-panel .ref-metrics strong{font-size:19px}
  .ref-sheet-back .ref-sheet.branch-sheet{width:100%;max-height:90dvh;border:0;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .branch-sheet header{padding:14px 16px 12px;background:var(--bs-paper)}
  .branch-sheet header::before{content:"";position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:99px;background:var(--bs-line)}
  .branch-sheet header h2{font-size:20px}
  .branch-sheet .ref-sheet-body{padding:14px 16px 22px;gap:12px}
  .branch-sheet .detail-grid[data-branch-id]{padding:12px 12px 10px}
  .branch-sheet .detail-grid[data-branch-id]>div{padding:10px 7px 0}
  .branch-sheet .detail-grid[data-branch-id] strong{font-size:18px}
  .branch-sheet .detail-grid[data-branch-id] .bs-occ strong{font-size:30px}
  .branch-sheet .bs-types .detail-grid>div{padding:9px 10px}
  .branch-sheet .bs-types .detail-grid strong{font-size:20px}
  .branch-sheet .bs-rates{grid-template-columns:1fr}
  .branch-sheet .bs-photo{height:124px;border-radius:14px}
}
@media (max-width:360px){
  #branches-panel .ref-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"q q" "sw st" "so br"}
  .branch-sheet .detail-grid[data-branch-id]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .branch-sheet .detail-grid[data-branch-id]>div:nth-child(4){padding-inline-start:0;border-inline-start:0}
}