/* Owner Dashboard → Calendar (owner-calendar.js), from Moataz's 2026-11-07 mockup. Scoped to .oc-*.
   Day colours: available #DDF5DF, booked #C9E2FF, pending #FFF0CF, blocked #FADCE0. */
.oc-view{--oc-ink:#10283D;--oc-navy:#203D4E;--oc-gold:#C7A250;--oc-gold-grad:linear-gradient(135deg,#E0B755 0%,#B98412 100%);
  --oc-bg:#F5F7F9;--oc-card:#FFFFFF;--oc-line:#E0E5EB;--oc-muted:#64748B;
  --oc-av:#DDF5DF;--oc-av-ink:#1F7A35;--oc-bk:#C9E2FF;--oc-bk-bar:#8EC0FA;--oc-bk-ink:#0E3F78;--oc-pd:#FFF0CF;--oc-pd-ink:#8A5A00;--oc-bl:#FADCE0;--oc-bl-ink:#B42335;
  --oc-shadow:0 10px 30px -18px rgba(16,40,61,.35),0 2px 6px -2px rgba(16,40,61,.06);
  background:var(--oc-bg);color:var(--oc-ink)}
.oc-view .oc-ic{width:20px;height:20px;flex:none}
.oc-page{padding:0 18px 28px;min-width:0}
.oc-card{background:var(--oc-card);border:1px solid var(--oc-line);border-radius:16px;box-shadow:var(--oc-shadow)}

/* ---------- hero ---------- */
.oc-hero{position:relative;margin:0 -18px;height:200px;display:flex;align-items:flex-start;padding:22px 28px 0;overflow:hidden;
  background:#0B2D46 url('/img/home/owner-profile-banner-1180.webp') right 55%/cover no-repeat;background-image:image-set(url('/img/home/owner-profile-banner-1180.webp') 1x,url('/img/home/owner-profile-banner.webp') 2x)}
/* the villa and pool sit at the image's left: keep them clear of the title side in Arabic, mirror in English */
html[dir="rtl"] .oc-hero{background-position:left 55%}
.oc-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(8,36,58,.97) 0%,rgba(8,36,58,.9) 34%,rgba(8,36,58,.35) 64%,rgba(8,36,58,0) 88%)}
html[dir="ltr"] .oc-hero::before{background:linear-gradient(90deg,rgba(8,36,58,.97) 0%,rgba(8,36,58,.9) 34%,rgba(8,36,58,.35) 64%,rgba(8,36,58,0) 88%)}
.oc-hero::after{content:"";position:absolute;inset:auto 0 0;height:60px;background:linear-gradient(180deg,rgba(245,247,249,0),var(--oc-bg))}
.oc-hero-text{position:relative;z-index:1;color:#fff;max-width:620px}
.oc-view .oc-hero h1{color:#fff;display:flex;align-items:center;gap:16px;margin:0;font-size:2.05rem;line-height:1.25;font-weight:800;letter-spacing:-.01em}
html[lang="ar"] .oc-hero h1,html[dir="rtl"] .oc-hero h1{font-family:Cairo,'Segoe UI',Tahoma,sans-serif}
.oc-hero-ic{color:var(--oc-gold);display:inline-flex}
.oc-hero-ic .oc-ic{width:46px;height:46px;stroke-width:1.6}
.oc-view .oc-hero p{margin:10px 0 0;font-size:1.12rem;color:rgba(255,255,255,.92)}

/* ---------- main grid: calendar + property panel ---------- */
.oc-main{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;margin-top:-58px;align-items:start}
.oc-cal{padding:16px 14px 16px}
.oc-side{display:flex;flex-direction:column;gap:18px}

/* toolbar */
.oc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.oc-views{display:inline-flex;background:#F0F2F5;border:1px solid var(--oc-line);border-radius:14px;padding:4px;gap:2px}
.oc-views button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 22px;border:0;border-radius:11px;background:transparent;color:var(--oc-ink);font:inherit;font-weight:600;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.oc-views button .oc-ic{width:20px;height:20px}
.oc-views button:hover{background:#E6E9EE}
.oc-views button[aria-pressed="true"]{background:var(--oc-gold-grad);color:#fff;box-shadow:0 6px 14px -8px rgba(185,132,18,.9)}
.oc-nav{position:relative;display:inline-flex;align-items:center;border:1px solid var(--oc-line);border-radius:14px;background:#fff;min-height:50px;box-shadow:0 1px 2px rgba(16,40,61,.05)}
.oc-nav-btn{width:46px;height:48px;border:0;background:transparent;color:var(--oc-ink);cursor:pointer;display:grid;place-items:center;border-radius:12px}
.oc-nav-btn:hover,.oc-period:hover{background:#F3F5F8}
.oc-period{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border:0;background:transparent;color:var(--oc-ink);font:inherit;font-size:1.25rem;font-weight:800;cursor:pointer;min-width:190px;justify-content:center;border-inline:1px solid transparent}
.oc-period .oc-ic{width:24px;height:24px}
.oc-picker{position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:30;width:300px;background:#fff;border:1px solid var(--oc-line);border-radius:16px;box-shadow:0 20px 40px -18px rgba(16,40,61,.45);padding:12px}
.oc-picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.oc-picker-head button{width:40px;height:40px;border:1px solid var(--oc-line);border-radius:10px;background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--oc-ink)}
.oc-picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.oc-picker-grid button,.oc-picker-today{min-height:40px;border:1px solid var(--oc-line);border-radius:10px;background:#fff;font:inherit;font-size:.92rem;cursor:pointer;color:var(--oc-ink)}
.oc-picker-grid button[aria-pressed="true"]{background:var(--oc-gold-grad);color:#fff;border-color:transparent}
.oc-picker-today{width:100%;margin-top:8px;font-weight:700}

/* month grid */
.oc-month{display:flex;flex-direction:column;gap:6px;background:#F7F9FB;border:1px solid var(--oc-line);border-radius:14px;padding:0 6px 6px;overflow:hidden}
.oc-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin:0 -6px;background:#F1F4F7;border-bottom:1px solid var(--oc-line)}
.oc-head>div{padding:12px 4px;text-align:center;font-weight:700;font-size:.98rem;color:var(--oc-ink)}
.oc-head>div+div{border-inline-start:1px solid var(--oc-line)}
.oc-week{position:relative}
.oc-cells{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.oc-day{position:relative;min-height:64px;border:1px solid transparent;border-radius:6px;padding:6px 10px;background:var(--oc-av);color:var(--oc-ink);font:inherit;text-align:start;cursor:pointer;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
.oc-day:hover:not([aria-disabled="true"]){box-shadow:0 0 0 2px rgba(199,162,80,.55) inset}
.oc-day:focus-visible{outline:3px solid var(--oc-gold);outline-offset:1px}
.oc-num{font-weight:800;font-size:1.12rem;line-height:1.2}
.oc-price{margin-top:auto;font-size:.74rem;color:var(--oc-muted);font-weight:600}
.oc-price.is-custom{color:var(--oc-navy);font-weight:800}
.oc-day.st-out{background:#fff;border:1px solid #EEF1F4;cursor:default}
.oc-day.st-reserved{background:var(--oc-bk)}
.oc-day.st-pending{background:var(--oc-pd)}
.oc-day.st-requested{box-shadow:inset 0 0 0 2px #F0C86A}
.oc-day.st-blocked{background:var(--oc-bl)}
.oc-day.st-unavailable{background:#EEF1F4;color:#94A3B8;cursor:not-allowed}
.oc-day.st-unavailable .oc-num{color:#94A3B8}
.oc-day.st-unavailable:not([aria-disabled="true"]){cursor:pointer}
.oc-ban{position:absolute;top:8px;inset-inline-end:8px;width:18px!important;height:18px!important;color:var(--oc-bl-ink)}
.oc-day.is-today .oc-num{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:999px;background:var(--oc-ink);color:#fff;align-self:flex-start;font-size:1rem}
.oc-day.is-sel{box-shadow:0 0 0 2px var(--oc-gold) inset;filter:saturate(1.15)}
.oc-day.is-sel-edge{box-shadow:0 0 0 3px #B98412 inset}
.oc-day.is-sel .oc-price{color:var(--oc-ink)}
/* bars */
.oc-bars{position:absolute;inset-inline:0;bottom:6px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:26px;gap:2px 6px;pointer-events:none;padding-inline:4px}
.oc-bar{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;height:26px;padding:0 6px;border-radius:7px;font-size:.84rem;font-weight:700;text-decoration:none;white-space:nowrap;overflow:hidden}
.oc-bar span{overflow:hidden;text-overflow:ellipsis}
.oc-bar .oc-ic{width:17px;height:17px}
.oc-bar.b-reserved{background:var(--oc-bk-bar);color:var(--oc-bk-ink);box-shadow:inset 0 0 0 1px rgba(14,63,120,.12)}
.oc-bar.b-pending{background:transparent;color:var(--oc-pd-ink)}
.oc-bar.b-requested{background:rgba(255,240,207,.9);color:var(--oc-pd-ink);border:1px dashed #E2B04A}
.oc-bar.b-blocked{background:#F6C3CA;color:var(--oc-bl-ink)}
.oc-bar.b-blocked.by-imported{background:#F1D3D7}
a.oc-bar:hover{filter:brightness(.97);text-decoration:none}
a.oc-bar:focus-visible{outline:3px solid var(--oc-gold);outline-offset:1px}
.oc-week:has(.oc-bars) .oc-day{padding-bottom:34px}
.oc-week:has(.oc-bar:nth-child(n+2)[style*="grid-row:2"]) .oc-day{padding-bottom:62px}

/* week view */
.oc-weekview{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.oc-wday{min-height:220px;border:1px solid transparent;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:start;background:var(--oc-av);font:inherit;color:var(--oc-ink);cursor:pointer}
.oc-wday.st-reserved{background:var(--oc-bk)}.oc-wday.st-pending{background:var(--oc-pd)}.oc-wday.st-blocked{background:var(--oc-bl)}.oc-wday.st-unavailable{background:#EEF1F4;color:#94A3B8}
.oc-wday.st-requested{box-shadow:inset 0 0 0 2px #F0C86A}
.oc-wday.is-sel{box-shadow:0 0 0 3px var(--oc-gold) inset}
.oc-wday:focus-visible{outline:3px solid var(--oc-gold);outline-offset:1px}
.oc-wname{font-weight:700;font-size:.9rem;color:var(--oc-muted)}
.oc-wday .oc-num{font-size:1.6rem}
.oc-wstate{font-weight:700;font-size:.88rem}
.oc-wday .oc-price{margin-top:auto;font-size:.95rem}
.oc-wguest{display:flex;align-items:center;gap:6px;font-size:.84rem;font-weight:600}
.oc-wguest .oc-ic{width:16px;height:16px}
.oc-bars-week{position:static;margin-top:8px;padding:0}

/* day view */
.oc-dayview{border-radius:14px;padding:20px;background:var(--oc-av)}
.oc-dayview.st-reserved{background:var(--oc-bk)}.oc-dayview.st-pending{background:var(--oc-pd)}.oc-dayview.st-blocked{background:var(--oc-bl)}.oc-dayview.st-unavailable{background:#EEF1F4}
.oc-dayhead{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.oc-dayhead .oc-num{font-size:2.6rem}
.oc-dayhead b{display:block;font-size:1.2rem}.oc-dayhead span{color:var(--oc-muted)}
.oc-dayview dl{margin:0;display:grid;gap:10px;background:#fff;border-radius:12px;padding:14px 16px;border:1px solid var(--oc-line)}
.oc-dayview dl>div{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.oc-dayview dt{min-width:120px;color:var(--oc-muted);font-weight:600}
.oc-dayview dd{margin:0;font-weight:600}
.oc-dayview small{color:var(--oc-muted);font-weight:500}
.oc-chip{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--oc-av);color:var(--oc-av-ink);font-weight:700;font-size:.88rem}
.oc-chip.st-reserved{background:var(--oc-bk);color:var(--oc-bk-ink)}.oc-chip.st-pending,.oc-chip.st-requested{background:var(--oc-pd);color:var(--oc-pd-ink)}.oc-chip.st-blocked{background:var(--oc-bl);color:var(--oc-bl-ink)}.oc-chip.st-unavailable{background:#E2E8F0;color:#475569}
.oc-dayactions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* selection bar + actions */
.oc-selbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;padding:10px 14px;border-radius:12px;background:#FFF8E8;border:1px solid #F1DDA8;font-weight:600;font-size:.94rem}
.oc-selbar .oc-hint{color:var(--oc-muted);font-weight:500}
.oc-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:16px}
.oc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 20px;border-radius:12px;font:inherit;font-weight:800;font-size:1.04rem;cursor:pointer;text-decoration:none;transition:filter .15s ease,box-shadow .15s ease,background-color .15s ease}
.oc-btn .oc-ic{width:22px;height:22px}
.oc-btn-gold{background:var(--oc-gold-grad);color:#fff;border:0;box-shadow:0 10px 20px -12px rgba(185,132,18,.9)}
.oc-btn-gold:hover{filter:brightness(1.06);color:#fff;text-decoration:none}
.oc-btn-line{background:#fff;color:var(--oc-ink);border:1.5px solid var(--oc-gold)}
.oc-btn-line:hover{background:#FFF8E8}
.oc-btn:focus-visible{outline:3px solid var(--oc-navy);outline-offset:2px}
.oc-btn[disabled]{opacity:.5;cursor:not-allowed}
.oc-link{background:none;border:0;padding:0;font:inherit;color:#9A6E12;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.oc-link:hover{text-decoration:underline}
html[dir="ltr"] .oc-flip{transform:scaleX(-1)}

/* property panel */
.oc-update{width:100%;min-height:56px;padding:0 14px;font-size:1rem;white-space:nowrap}
.oc-view h1,.oc-view h2,.oc-view h3{font-family:inherit;letter-spacing:normal}
.oc-prop{overflow:hidden;padding:0}
.oc-photo{position:relative;height:150px;background:#DCE7EF}
.oc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.oc-photo-none{display:grid;place-items:center;height:100%;color:#7C93A8}.oc-photo-none .oc-ic{width:48px;height:48px}
.oc-live{position:absolute;bottom:10px;inset-inline-start:14px;padding:4px 14px;border-radius:999px;background:#1E9E46;color:#fff;font-weight:800;font-size:.86rem;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
html[dir="rtl"] .oc-live{inset-inline-start:auto;inset-inline-end:14px}
.oc-live-off{background:#64748B}
.oc-prop-row{position:relative;display:flex;align-items:center;gap:10px;padding:14px 16px}
.oc-prop-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.oc-prop-text b{font-size:1.08rem;line-height:1.3}
.oc-prop-text span{display:flex;align-items:center;gap:6px;color:var(--oc-ink);font-size:.92rem}
.oc-pin{width:18px!important;height:18px!important}
.oc-prop-chev{display:grid;place-items:center;width:32px;height:32px;color:var(--oc-ink)}
.oc-prop-select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.oc-prop-row:focus-within{box-shadow:inset 0 0 0 3px var(--oc-gold);border-radius:0 0 16px 16px}
.oc-note{margin:0;padding:10px 14px;border-radius:12px;background:#FFF8E8;border:1px solid #F1DDA8;font-size:.9rem}
.oc-legend{padding:16px 18px}
.oc-legend h2{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--oc-line);font-size:1.12rem;font-weight:800}
.oc-legend ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.oc-legend li{display:flex;align-items:center;gap:12px;font-weight:600}
.oc-key{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;flex:none}
.oc-key .oc-ic{width:17px;height:17px}
.k-available{background:var(--oc-av);box-shadow:inset 0 0 0 6px var(--oc-av)}
.k-available::after{content:"";width:16px;height:16px;border-radius:4px;background:#2BB24C}
.k-reserved{background:var(--oc-bk);color:#2B6FD6}
.k-pending{background:var(--oc-pd);color:#C98A00}
.k-blocked{background:var(--oc-bl);color:#D92D44}

/* upcoming bookings */
.oc-upcoming{margin-top:20px;padding:16px 20px 8px}
.oc-up-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.oc-up-head h2{display:flex;align-items:center;gap:10px;margin:0;font-size:1.25rem;font-weight:800}
.oc-up-head h2 .oc-ic{width:30px;height:30px;color:#B98412}
.oc-up-empty{margin:4px 0 14px;color:var(--oc-muted)}
.oc-table-wrap{overflow-x:auto}
.oc-table{width:100%;border-collapse:separate;border-spacing:0;font-size:1rem}
.oc-table th{background:#F1F4F7;padding:12px 14px;font-weight:700;text-align:start;white-space:nowrap;color:var(--oc-ink)}
.oc-table th:first-child{border-start-start-radius:10px;border-end-start-radius:10px}
.oc-table th:last-child{border-start-end-radius:10px;border-end-end-radius:10px}
.oc-th{display:inline-flex;align-items:center;gap:8px}
.oc-table th .oc-ic{width:18px;height:18px}
.oc-table td{padding:14px;border-bottom:1px solid var(--oc-line);font-weight:600;white-space:nowrap}
.oc-table tbody tr{cursor:pointer;transition:background-color .15s ease}
.oc-table tbody tr:hover{background:#F8FAFC}
.oc-table tbody tr:focus-visible{outline:3px solid var(--oc-gold);outline-offset:-3px}
.oc-table tbody tr:last-child td{border-bottom:0}
.oc-total{font-weight:800!important;font-size:1.06rem}
.oc-pill{display:inline-block;min-width:96px;text-align:center;padding:5px 14px;border-radius:999px;font-weight:800;font-size:.9rem}
.p-confirmed{background:#C9EFD0;color:#16753A}
.p-awaiting_payment,.p-requested{background:#FCE7B6;color:#8A5A00}
.oc-up-cards{display:none;list-style:none;margin:0;padding:0}

/* states */
.oc-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:48px 20px;min-height:260px;color:var(--oc-ink)}
.oc-state h2{margin:0;font-size:1.25rem}.oc-state p{margin:0;color:var(--oc-muted)}
.oc-state-ic{width:48px!important;height:48px!important;color:var(--oc-gold)}
.oc-spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--oc-line);border-top-color:var(--oc-gold);animation:oc-spin 1s linear infinite}
@keyframes oc-spin{to{transform:rotate(360deg)}}
[data-oc-grid][aria-busy="true"]{opacity:.55;transition:opacity .15s ease}
.oc-empty .oc-actions{display:none}

/* dialogs */
.oc-dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 40px);border:0;border-radius:18px;padding:0;color:#10283D;box-shadow:0 30px 60px -20px rgba(8,36,58,.5)}
.oc-dialog::backdrop{background:rgba(8,36,58,.55)}
.oc-dlg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 22px;border-bottom:1px solid #E0E5EB}
.oc-dlg-head h2{margin:0;font-size:1.2rem;font-weight:800}
.oc-x{width:42px;height:42px;border-radius:12px;border:1px solid #E0E5EB;background:#fff;cursor:pointer;display:grid;place-items:center;color:#10283D}
.oc-x .oc-ic{width:20px;height:20px}
.oc-form{display:grid;gap:14px;padding:18px 22px}
.oc-form+.oc-form{border-top:1px solid #E0E5EB}
.oc-form h3{margin:0;font-size:1.02rem;font-weight:800}
.oc-form label{display:grid;gap:6px;font-weight:600;font-size:.94rem}
.oc-form input[type=number],.oc-form input[type=date],.oc-form input[type=time]{min-height:46px;border:1px solid #CBD5E1;border-radius:10px;padding:0 12px;font:inherit;font-size:16px;background:#fff;color:#10283D}
.oc-form input:focus{outline:3px solid rgba(199,162,80,.45);border-color:#C7A250}
.oc-form small{color:#64748B;font-weight:500;font-size:.82rem}
.oc-form fieldset{border:1px solid #E0E5EB;border-radius:12px;padding:10px 14px;margin:0;display:grid;gap:8px}
.oc-form legend{font-weight:700;padding:0 6px}
.oc-radio,.oc-check{display:flex!important;grid-template-columns:none!important;align-items:center;gap:10px!important;font-weight:600;min-height:36px;cursor:pointer}
.oc-radio input,.oc-check input{width:20px;height:20px;accent-color:#B98412;flex:none}
.oc-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.oc-policy{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:#F5F7F9;border:1px solid #E0E5EB}
.oc-policy small{display:block;color:#64748B;margin-top:2px}
.oc-muted{margin:0;color:#64748B;font-size:.88rem}
.oc-err{margin:0;color:#B42335;font-weight:600;font-size:.92rem;min-height:0}
.oc-err:empty{display:none}
.oc-dlg-foot{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.oc-dlg-foot .oc-btn{min-height:46px;font-size:.98rem}

/* ---------- tablet ---------- */
@media (max-width:1180px){
  .oc-main{grid-template-columns:minmax(0,1fr) 250px;gap:16px}
  .oc-actions{gap:14px}
  .oc-views button{padding:0 14px}
}
@media (max-width:1024px){
  .oc-page{padding:0 16px 24px}
  .oc-hero{margin:12px -16px 0;height:190px;padding:22px 20px 0}
  .oc-main{grid-template-columns:1fr;margin-top:-50px}
  /* property first, then the calendar, then the key */
  .oc-main{display:flex;flex-direction:column}
  .oc-side{display:contents}
  .oc-side .oc-update{order:1}.oc-side .oc-prop{order:2}.oc-side .oc-note{order:3}.oc-main .oc-cal{order:4}.oc-side .oc-legend{order:5}
  .oc-prop{display:grid;grid-template-columns:220px 1fr}.oc-photo{height:auto;min-height:120px}
}
/* ---------- phone ---------- */
@media (max-width:640px){
  .oc-hero{height:auto;min-height:170px;padding-bottom:70px}
  .oc-prop{grid-template-columns:1fr}.oc-photo{height:150px}
  .oc-hero h1{font-size:1.45rem;gap:10px}
  .oc-hero-ic .oc-ic{width:34px;height:34px}
  .oc-hero p{font-size:.98rem}
  .oc-legend ul{grid-template-columns:1fr 1fr}
  .oc-cal{padding:12px 8px}
  .oc-toolbar{flex-direction:column;align-items:stretch}
  .oc-views{justify-content:stretch}.oc-views button{flex:1;justify-content:center;padding:0 8px}
  .oc-nav{justify-content:space-between}.oc-period{min-width:0;font-size:1.08rem;flex:1}
  .oc-picker{width:min(300px,calc(100vw - 48px))}
  .oc-month{padding:0 3px 3px;gap:3px}
  .oc-head{margin:0 -3px}
  .oc-head>div{font-size:.72rem;padding:8px 0;overflow:hidden;text-overflow:clip;white-space:nowrap}
  .oc-cells{gap:3px}
  .oc-day{min-height:52px;padding:4px 5px}
  .oc-num{font-size:.95rem}
  .oc-price{font-size:.62rem}
  .oc-ban{width:13px!important;height:13px!important;top:5px;inset-inline-end:4px}
  .oc-bars{grid-auto-rows:20px;bottom:4px;gap:2px 3px;padding-inline:2px}
  .oc-bar{height:20px;font-size:.66rem;padding:0 4px;gap:3px;border-radius:5px}
  .oc-bar .oc-ic{width:12px;height:12px}
  .oc-week:has(.oc-bars) .oc-day{padding-bottom:26px}
  .oc-day.is-today .oc-num{min-width:24px;height:24px;font-size:.85rem}
  .oc-weekview{grid-template-columns:1fr;gap:6px}
  .oc-wday{min-height:0;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"num name price" "num state guest";column-gap:12px;align-items:center}
  .oc-wday .oc-num{grid-area:num;font-size:1.5rem}.oc-wname{grid-area:name}.oc-wstate{grid-area:state}.oc-wday .oc-price{grid-area:price;margin:0}.oc-wguest{grid-area:guest}
  .oc-actions{grid-template-columns:1fr;gap:10px}
  .oc-upcoming{padding:14px 12px}
  .oc-table-wrap{display:none}
  .oc-up-cards{display:grid;gap:10px}
  .oc-up-card{display:grid;gap:8px;padding:14px;border:1px solid var(--oc-line);border-radius:14px;color:var(--oc-ink);text-decoration:none;background:#fff}
  .oc-up-card:hover{border-color:var(--oc-gold);text-decoration:none}
  .oc-up-top,.oc-up-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .oc-up-dates,.oc-up-foot span{display:flex;align-items:center;gap:6px;color:var(--oc-muted);font-weight:600;font-size:.92rem}
  .oc-up-dates .oc-ic,.oc-up-foot .oc-ic{width:16px;height:16px}
  .oc-pill{min-width:0;font-size:.8rem;padding:4px 10px}
  .oc-row2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.oc-day,.oc-btn,.oc-views button,.oc-spin{transition:none;animation:none}}
/* A booking opened from the calendar (#/host/bookings/:id) is highlighted in the bookings table. */
#hostBookingsTable tr.is-focus>td{background:#FFF5DF;box-shadow:inset 0 2px 0 #C7A250,inset 0 -2px 0 #C7A250}
#hostBookingsTable tr.is-focus:focus{outline:none}
.oc-dialog .oc-btn-gold,.oc-dialog button.oc-btn-gold[type=submit]{background:linear-gradient(135deg,#E0B755 0%,#B98412 100%)!important;color:#fff!important;border:0!important}
.oc-dialog .oc-btn-line{background:#fff!important;color:#10283D!important;border:1.5px solid #C7A250!important}
.oc-dialog,.oc-dialog input,.oc-dialog button{font-family:inherit}

/* ---------- measured against the 1536×1024 mockup (2026-11-07) ---------- */
@media (min-width:1025px){
  .oc-page{padding:0 0 28px;padding-inline:20px 27px}
  /* the photo runs under the sidebar's rounded corner, as in the mockup */
  .oc-hero{margin:0;margin-inline:-288px -27px;height:178px;padding:14px 0 0;padding-inline:304px 16px;z-index:0}
  .oc-view .oc-hero h1{font-size:2.1rem}
  .oc-view .oc-hero p{font-size:1.2rem;margin-top:8px}
  .oc-main{grid-template-columns:minmax(0,1fr) 285px;gap:18px;margin-top:-53px}
  .oc-side{padding-top:23px;gap:20px}
  .oc-cal{padding:24px 14px 16px}
  .oc-toolbar{margin-bottom:22px}
  .oc-views button{min-height:40px;padding:0 30px;font-size:1.08rem}
  .oc-period{min-width:212px}
  .oc-update{min-height:55px;font-size:1.08rem}
  .oc-photo{height:135px}
  .oc-actions{gap:30px;margin-top:16px}
  .oc-btn{min-height:52px;font-size:1.1rem}
}
/* month cells as in the mockup: number at the top, price small on the same line, bars along the bottom */
.oc-month .oc-day{min-height:63px;flex-direction:row;align-items:flex-start;justify-content:space-between;padding:7px 10px}
.oc-month .oc-day .oc-price{margin:3px 0 0;order:2}
.oc-month .oc-day .oc-ban{display:none}
.oc-head>div{padding:9px 4px}
.oc-week:has(.oc-bars) .oc-day{padding-bottom:7px}
.oc-week:has(.oc-bar:nth-child(n+2)[style*="grid-row:2"]) .oc-day{min-height:92px}
.oc-bars{bottom:5px}
@media (max-width:640px){.oc-month .oc-day{min-height:52px;flex-direction:column;justify-content:flex-start}.oc-month .oc-day .oc-price{margin:auto 0 0}.oc-week:has(.oc-bars) .oc-day{padding-bottom:26px}}

.oc-selbar[hidden]{display:none}
/* closed-night bars are labels only: a tap goes through to the night underneath (select / reopen it) */
span.oc-bar{pointer-events:none}

/* ---------- phones: compact top, readable month, day details (Moataz, 2026-11-07) ---------- */
@media (max-width:640px){
  /* hero about 38% shorter: title, icon and a two-line subtitle on the coastal photo */
  .oc-hero{height:150px;min-height:0;padding:14px 16px 0}
  .oc-view .oc-hero h1{font-size:1.22rem;gap:8px;line-height:1.3}
  .oc-hero-ic .oc-ic{width:26px;height:26px}
  .oc-view .oc-hero p{font-size:.86rem;margin-top:6px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .oc-main{margin-top:-34px;gap:12px}
  .oc-update{min-height:46px;font-size:.95rem}
  /* property: one compact row (thumbnail, name, place, status, dropdown) */
  .oc-prop{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:0;padding:8px}
  .oc-photo{height:84px;min-height:0;border-radius:10px;overflow:hidden}
  .oc-photo .oc-live{bottom:5px;inset-inline:5px auto;padding:2px 8px;font-size:.68rem;box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
  html[dir="rtl"] .oc-photo .oc-live{inset-inline:auto 5px}
  .oc-prop-row{padding:4px 10px;min-height:84px}
  .oc-prop-row:focus-within{border-radius:10px}
  .oc-prop-text{gap:4px}
  .oc-prop-text b{font-size:.98rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .oc-prop-text span{font-size:.84rem}
  /* month: bigger day numbers, prices kept whole, clear selection */
  .oc-month .oc-day{min-height:56px;padding:5px 4px;align-items:center}
  .oc-month .oc-num{font-size:1.02rem;font-weight:800}
  .oc-month .oc-price{font-size:.64rem;letter-spacing:-.01em;white-space:nowrap}
  .oc-day.is-sel{box-shadow:inset 0 0 0 2px #B98412}
  .oc-day.is-sel-edge{box-shadow:inset 0 0 0 3px #B98412}
  /* the three actions side by side, icon over label */
  .oc-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
  .oc-actions .oc-btn{flex-direction:column;gap:4px;min-height:62px;padding:6px 4px;font-size:.78rem;line-height:1.2;text-align:center;border-radius:12px}
  .oc-actions .oc-btn .oc-ic{width:20px;height:20px}
  /* day details for a tapped night */
  .oc-selbar.has-day{display:block;padding:0;background:#fff;border:1.5px solid #E0B755;border-radius:14px;box-shadow:0 10px 24px -14px rgba(16,40,61,.45)}
  .oc-dd{padding:12px 14px}
  .oc-dd-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:.95rem}
  .oc-dd-x{width:36px;height:36px;border-radius:10px;border:1px solid var(--oc-line);background:#fff;display:grid;place-items:center;color:var(--oc-ink);cursor:pointer}
  .oc-dd-x .oc-ic{width:18px;height:18px}
  .oc-dd dl{margin:0;display:grid;gap:8px}
  .oc-dd dl>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.9rem}
  .oc-dd dt{min-width:92px;color:var(--oc-muted);font-weight:600}
  .oc-dd dd{margin:0;font-weight:600}
  .oc-dd small{color:var(--oc-muted);font-weight:500}
  .oc-dd-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  .oc-dd-actions .oc-btn{min-height:46px;font-size:.88rem;padding:0 8px;gap:6px}
  .oc-dd-actions .oc-btn .oc-ic{width:18px;height:18px}
  /* booking cards: view details */
  .oc-up-more{display:flex;align-items:center;justify-content:flex-end;gap:6px;color:#9A7426;font-weight:800;font-size:.88rem;border-top:1px solid var(--oc-line);padding-top:8px}
  .oc-up-more .oc-ic{width:16px;height:16px}
}
/* tablets: the same day details */
@media (min-width:641px) and (max-width:1024px){
  .oc-selbar.has-day{display:block;padding:0;background:#fff;border:1.5px solid #E0B755;border-radius:14px}
  .oc-dd{padding:14px 16px}
  .oc-dd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .oc-dd-x{width:38px;height:38px;border-radius:10px;border:1px solid var(--oc-line);background:#fff;display:grid;place-items:center;cursor:pointer}
  .oc-dd-x .oc-ic{width:18px;height:18px}
  .oc-dd dl{margin:0;display:grid;gap:8px}.oc-dd dl>div{display:flex;gap:12px;align-items:center}.oc-dd dt{min-width:120px;color:var(--oc-muted);font-weight:600}.oc-dd dd{margin:0;font-weight:600}
  .oc-dd-actions{display:flex;gap:10px;margin-top:12px}.oc-dd-actions .oc-btn{min-height:46px}
  .oc-up-more{display:none}
}
.oc-head .oc-ds{display:none}
@media (max-width:640px){
  html[dir="ltr"] .oc-head .oc-dl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  html[dir="ltr"] .oc-head .oc-ds{display:inline}
  .oc-main{margin-top:-14px}
  .oc-hero::after{height:24px}
}

/* booking bars: full text on larger screens, the guest's first name on phones; the full booking opens on tap */
.oc-bar .oc-bt-s{display:none}
.oc-bar .oc-bt-l,.oc-bar .oc-bt-s{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.oc-bar{cursor:pointer}
@media (max-width:640px){.oc-bar .oc-bt-l{display:none}.oc-bar .oc-bt-s{display:inline}}
/* booking details: the same panel as a night's details, on every screen size */
.oc-selbar.has-day{display:block;padding:0;background:#fff;border:1.5px solid #E0B755;border-radius:14px;box-shadow:0 10px 24px -14px rgba(16,40,61,.45)}
.oc-dd{padding:14px 16px}
.oc-dd-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.oc-dd-x{width:38px;height:38px;border-radius:10px;border:1px solid var(--oc-line);background:#fff;display:grid;place-items:center;color:var(--oc-ink);cursor:pointer}
.oc-dd-x .oc-ic{width:18px;height:18px}
.oc-dd dl{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 18px}
.oc-dd dl>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.oc-dd dt{min-width:92px;color:var(--oc-muted);font-weight:600}
.oc-dd dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.oc-dd-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.oc-dd-actions .oc-btn{min-height:46px;text-decoration:none}
.oc-dd-one .oc-btn{width:auto}
@media (max-width:640px){.oc-dd dl{grid-template-columns:1fr}.oc-dd-one .oc-btn{width:100%}}