/* sp_app — laptop / desktop layout (>= 821 px). Loaded with media="(min-width: 821px)" and wrapped again in the same
   query, so nothing here can reach a phone or a small tablet. Mobile CSS (app.css, ux.css, office*.css) is untouched.
   Design: one centred reading column, the bottom bar becomes a side rail on the right (RTL), sheets become centred
   dialogs, lists use the width in two or three columns, hover and keyboard states. Tokens come from app.css. */
@media (min-width: 821px) {
  :root { --dsk-nav: 220px; --dsk-col: 760px; --dsk-office: 1120px; --dsk-top: 64px; --dsk-pad: 32px; }

  /* ---------- shell: the rail takes the inline-start side (right in RTL), the page keeps the rest ---------- */
  body.has-nav { padding-inline-start: var(--dsk-nav); }
  .sp-main { max-width: var(--dsk-col); padding: 20px var(--dsk-pad) 56px; }
  body.has-nav .sp-main { padding-bottom: 56px; }
  body.has-nav:has(#bk-form) .sp-main, body.has-nav:has(#sr-form) .sp-main { padding-bottom: 56px; }
  body:has(.o-page) .sp-main { max-width: var(--dsk-office); }
  .o-narrow { max-width: 800px; }
  #o-fu.o-narrow { max-width: 880px; }
  .sp-main:has(.lp) { max-width: 520px; }
  .sp-main:has(.lg) { max-width: 780px; }

  /* side rail */
  .sp-nav, .sp-nav.o-nav {
    position: fixed; inset: 0 0 0 auto; width: var(--dsk-nav); height: auto;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px;
    padding: 22px 14px 24px; border-top: 0; border-inline-end: 1px solid var(--sp-line);
    background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow-y: auto; z-index: 5;
  }
  body.acting .sp-nav { border-top: 0; border-inline-end: 3px solid var(--sp-primary); }
  body:has(#bk-form) .sp-nav, body:has(#sr-form) .sp-nav { display: flex; }
  .sp-nav::before { content: ""; order: -2; flex: none; width: 44px; height: 44px; margin: 0 10px 8px; border-radius: 13px;
    background: url(/sp_brand/static/brand/sepehr-tile-96.png) center/cover no-repeat; box-shadow: 0 2px 8px rgba(20, 30, 80, .12); }
  .sp-nav::after { content: "سپهر"; order: -1; display: block; margin: 0 12px 22px; font-weight: 800; font-size: var(--fs-title-sm,17px); line-height: 1.4; color: var(--sp-primary); }
  .sp-nav a, .sp-nav.o-nav a {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; min-width: 0;
    padding: 0 14px; border-radius: 12px; font-size: var(--fs-body,15px); font-weight: 500; color: var(--sp-ink-2); text-decoration: none;
    transition: background .15s ease-out, color .15s ease-out;
  }
  .sp-nav a svg, .sp-nav.u-tnav a svg { width: 22px; height: 22px; padding: 0; background: none; border-radius: 0; flex: none; }
  .sp-nav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-nav a:hover { background: var(--sp-bg); color: var(--sp-ink); }
  .sp-nav a.on { background: var(--sp-primary-soft); color: var(--sp-primary); font-weight: 700; }
  .sp-nav a.on svg { background: none; }
  .sp-nav a:focus-visible { outline: 2px solid var(--sp-primary); outline-offset: -2px; }

  /* app bar: inside the column, taller, same translucent look */
  .top, .top.bk-head { min-height: var(--dsk-top); margin: -20px calc(-1 * var(--dsk-pad)) 16px; padding: 0 24px; gap: 10px; }
  .top h1, .top .u-thead-t h1 { font-size: var(--fs-title,20px); }
  .top .back { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .top .back:hover, .top .acct-btn:hover { background: rgba(20, 30, 80, .06); border-radius: 50%; }
  .top .wallet-chip:hover { filter: brightness(.97); }
  .u-live { margin: 0 calc(-1 * var(--dsk-pad)) 12px; padding: 10px 24px; }
  .act-bar { padding: 4px max(24px, calc((100% - (var(--dsk-col) - 2 * var(--dsk-pad))) / 2)); }
  html:has(.act-bar) { scroll-padding-top: calc(var(--act-h, 50px) + 72px); }

  /* sticky helpers sit under the app bar instead of sliding beneath it */
  .o-fchips, .oc-bar, .om-find { top: var(--dsk-top); }
  .o-aside { top: calc(var(--dsk-top) + 16px); }
  .u-sec, .lg h2 { scroll-margin-top: calc(var(--dsk-top) + 12px); }

  /* fixed bottom pieces stay inside the column (the rail is on the inline-start side = right in RTL) */
  .bk-pad .confirm-bar, body:has(#bk-form) .bk-pad .confirm-bar, body:has(#sr-form) .bk-pad .confirm-bar, .o-page.bk-pad .confirm-bar {
    inset-inline-start: var(--dsk-nav); inset-inline-end: 0; bottom: 0; max-width: calc(var(--dsk-col) - 2 * var(--dsk-pad));
    padding: 12px 20px; border: 1px solid var(--sp-line); border-bottom: 0; border-radius: 18px 18px 0 0;
  }
  /* office booking/reschedule: same id-level specificity as the ux.css rule, wider bar */
  body:has(#bk-form) .o-page.bk-pad .confirm-bar, body:has(.o-page) .bk-pad .confirm-bar { max-width: calc(var(--dsk-office) - 2 * var(--dsk-pad)); }
  .o-save { bottom: 0; }
  .confirm-bar .sp-btn.block, .confirm-bar .btn.big { display: inline-flex; width: auto; flex: none; min-width: 200px; margin: 0; padding: 0 28px; }
  .logout-foot { position: static; width: 100%; max-width: none; margin: 28px 0 0; border: 1px solid var(--sp-line); border-radius: 12px; }
  .acct-page { min-height: 0; padding-bottom: 0; }

  /* ---------- sheets -> centred dialogs ---------- */
  .sheet { align-items: center; justify-content: center; padding: 24px; }
  .sheet .panel { max-width: 540px; border-radius: 22px; padding: 24px 26px 24px; max-height: min(86vh, 920px);
    box-shadow: 0 30px 70px -20px rgba(20, 30, 80, .45), 0 0 0 1px rgba(20, 30, 80, .04); }
  .sheet .panel.who-panel { padding-top: 20px; }
  .sh-grip { display: none; }

  /* ---------- hover + keyboard polish (touch targets stay as they are) ---------- */
  .btn:hover, .sp-btn:hover, .u-btn:hover, .wl-btn:hover, .hm-go:hover, .h2-go:hover, .hero-cta:hover, .rl-book:hover, .o-fr-call:hover, .ss-join:hover { filter: brightness(1.07); }
  .btn.ghost:hover, .sp-btn.sec:hover, .sp-btn.link:hover, .u-btn.line:hover, .u-btn.soft:hover, .pc-btn:hover, .cr-btn:hover, .bk-change:hover, .link:hover, .rl-link:hover { filter: none; background: var(--sp-primary-soft); }
  .sp-btn.danger:hover, .u-btn.ghost-bad:hover, .o-danger:hover, .pc-btn.danger:hover, .u-mini-x:hover { filter: none; background: var(--u-bad-s, #FCEBEA) !important; }
  .card:not(.set):not(.center):not(.prof):hover, a.row:hover, button.row:hover, .row-card:hover, .th-card:hover, .bk-card:hover, .hm-card:hover, .u-row:hover, .sx:hover,
  .tx:hover, .o-rel:hover, .oc-main:hover, .oc-tel:hover, .o-debt:hover, .en-big:hover, .cl-card:hover, .h2-tile:hover, .qa-i:hover, .u-qa-i:hover, .u-tile:hover,
  .ss-a:hover, .u-kpi[href]:hover, .o-dcard:hover, .who-opt:hover, .cal-opt:hover, .o-act:hover, .calm-btn:hover, .tp-opt:hover, .o-occ:hover, .occ:hover, .o-pk:hover, .wl-row > summary:hover { background: var(--ds-surface-low,#F2F4FA); }
  .o-dcard.today:hover { background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-dark)); filter: brightness(1.06); }
  .o-page .o-qa-main .u-qa-i:hover { background: var(--sp-primary-dark); }
  .hero:hover, .quick:hover, .u-hero:hover, .u-tcard:hover { filter: brightness(1.05); }
  .chip:hover, .chip.slot:hover, .day:hover, .o-day:hover, .u-day:hover, .seg:hover, .u-seg a:hover, .wl-sl:hover, .lp-tab:hover, .o-tabs a:hover { border-color: var(--sp-primary); }
  .seg:not(.on):hover, .u-seg a:not(.on):hover, .wl-sl:hover, .lp-tab:not(.on):hover { background: rgba(255, 255, 255, .6); }
  a.cal-d:hover, .cal-d:not(.off):not(.on):hover { background: var(--sp-primary-soft); }
  .o-fr:hover { background: var(--ds-surface-low,#F6F7FC); }
  .set-row select:hover, .form select:hover, .form input:not([readonly]):hover, .o-form input:hover, .o-form select:hover, .u-search input:hover, .om-find input:hover { border-color: #B9BED2; }
  .set-row:hover, .idc-list > div:hover, .ss-r:hover { background: var(--ds-surface-low,#FAFBFE); }
  .wl-faq summary:hover, .u-more summary:hover, .oc-more > summary:hover, .om-more > summary:hover, .o-wfut > summary:hover, .o-fold > summary:hover, .wl-more summary:hover { color: var(--sp-primary-dark); }
  .oc-more > summary:hover, .om-more > summary:hover { background: var(--sp-primary-soft); }

  /* ---------- client app: the width is used for lists ---------- */
  .sx-list:has(> .sx:nth-child(2)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tx-list:has(> .tx:nth-child(2)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bk-pad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; align-items: start; }
  .bk-pad > *:not(.bk-card) { grid-column: 1 / -1; }
  .bk-pad > .bk-card { margin: 0 0 10px; }
  .sp-main:has(> .rl) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; align-items: start; }
  .sp-main:has(> .rl) > *:not(.rl) { grid-column: 1 / -1; }
  .sp-main:has(> .rl) > .rl { margin: 0 0 12px; }
  .h2-empty, .hm-empty, .rl-empty, .wl-empty, .u-empty, .card.center, .center.err-page { padding-top: 30px; padding-bottom: 30px; }
  .h2-empty small { max-width: 380px; }
  .lp { min-height: calc(100vh - 120px); }
  .lp-card { padding: 40px 36px 28px; }
  .wl-hero { padding: 26px 28px 24px; }
  .set-row select { max-width: 46%; }
  .calm-row { gap: 12px; }
  .cards { grid-template-columns: repeat(3, 1fr); }

  /* ---------- therapist panel ---------- */
  .sp-main:not(:has(.o-page)) .u-list:has(> .u-srow:nth-child(2)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
  #client-rows.u-list:has(> .u-row:nth-child(2)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #client-rows .u-row { margin-bottom: 0; }
  form.u-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
  form.u-hours > button, form.u-hours > p { grid-column: 1 / -1; }
  form.u-hours .u-dayc { margin-bottom: 0; }
  .u-tiles { gap: 10px; }
  .u-tile { min-height: 84px; font-size: var(--fs-body-sm,13.5px); }
  .u-kpi b { font-size: var(--fs-title,21px); }
  .u-week { gap: 8px; }
  .u-day { padding: 10px 0; }

  /* ---------- office ---------- */
  .days { flex-wrap: wrap; overflow: visible; }
  .o-days { flex-wrap: nowrap; overflow: visible; gap: 8px; }
  .o-day { flex: 1 1 0; width: auto; min-width: 0; }
  .o-chips { flex-wrap: wrap; overflow: visible; }
  .o-fchips { flex-wrap: wrap; }
  .o-cols { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
  .o-cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .oc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .oc-bar { max-width: 640px; }
  .o-page .slots { grid-template-columns: repeat(6, 1fr); }
  .o-page .u-qa.four .u-qa-i { min-height: 88px; font-size: var(--fs-caption,12.5px); }
  .o-srow .u-btn.o-prim { flex: 0 0 160px; }
  .o-opts { grid-template-columns: 1fr 1fr; }
  .o-opts .full { grid-column: 1 / -1; }
  .o-dcards { grid-template-columns: 1fr 1fr; }
  .o-dl { grid-template-columns: minmax(120px, auto) 1fr; }
  .o-fu-list .o-fr { padding: 12px 18px; }
  .o-fu-kpis .u-kpi { min-height: 84px; }
  .u-list.cl-list, .u-list.en-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .o-wl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .o-wl .wl-row, .o-wl .wl-row:first-child, .o-wl .wl-row:last-child { border-width: 1px; border-radius: var(--u-r); }
  .o-page .o-cols > .u-sec { margin-top: 18px; }

  /* ---------- legal / public ---------- */
  .lg { font-size: var(--fs-body,15.5px); }
  .lg-toc ol { columns: 2; }
}

/* wide laptops and monitors: a wider rail, three columns where the lists are long */
@media (min-width: 1280px) {
  :root { --dsk-nav: 248px; --dsk-office: 1240px; --dsk-pad: 40px; }
  .sp-nav a, .sp-nav.o-nav a { min-height: 50px; font-size: var(--fs-body,15.5px); }
  .oc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o-cols { grid-template-columns: 360px minmax(0, 1fr); gap: 28px; }
  .o-page .slots { grid-template-columns: repeat(8, 1fr); }
  .o-wl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  :root { --dsk-office: 1320px; }
  .o-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}