/* Reports, integrations and the setup checklist in the merchant dashboard; tokens from shubbak.css. */
.rpt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.rpt-toolbar .rpt-select { width: 14rem; }
.rpt-muted { color: var(--sb-muted); font-size: .875rem; }
.rpt-grid { display: grid; gap: 1rem; }
.rpt-cards { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.rpt-halves { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.rpt-value { font-size: 1.5rem; font-weight: 700; margin: .25rem 0; }
.rpt-table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.rpt-table th { text-align: start; font-weight: 600; color: var(--sb-muted); padding: .25rem .75rem; }
.rpt-table :is(th, td):first-child { padding-inline-start: 0; }
.rpt-table :is(th, td):last-child { padding-inline-end: 0; }
.rpt-table td { padding: .5rem .75rem; border-top: 1px solid var(--sb-line); }
.dark .rpt-table td { border-top-color: rgb(255 255 255 / .05); }
.rpt-hours { display: flex; align-items: flex-end; gap: 3px; height: 8rem; }
.rpt-hours span { flex: 1; border-radius: 4px 4px 0 0; background: var(--sb-blue); }
.rpt-hour-axis { display: flex; justify-content: space-between; font-size: .75rem; color: var(--sb-muted); margin-top: .25rem; }
.int-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.int-card { display: grid; gap: .5rem; align-content: start; }
.int-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.int-name { font-weight: 600; }
.int-badge { font-size: .75rem; font-weight: 600; padding: .125rem .625rem; border-radius: 999px; background: #EDEFF5; color: var(--sb-muted); white-space: nowrap; }
.dark .int-badge { background: rgb(255 255 255 / .08); color: #CFD2DB; }

/* "جهّز متجرك" checklist for new stores. */
.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.setup-step { display: flex; gap: .75rem; align-items: flex-start; }
.setup-mark { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 1px solid #747A8B; font-size: .8rem; font-weight: 600; }
.setup-step.is-done .setup-mark { background: var(--sb-blue); border-color: var(--sb-blue); color: #fff; }
.setup-step.is-done .setup-label { color: var(--sb-muted); text-decoration: line-through; text-decoration-color: #B3B7C2; }
.setup-text { display: grid; gap: .125rem; }
.setup-label { font-weight: 600; }
a.setup-label { color: var(--sb-blue); }
.setup-link { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--sb-line); }
.setup-link a { color: var(--sb-blue); font-weight: 500; }
.dark .setup-link { border-top-color: rgb(255 255 255 / .05); }

/* The design studio (Appearance): device switcher and a scaled live preview. */
.studio { position: sticky; top: 1rem; display: grid; gap: .75rem; }
.studio-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem; border: 1px solid var(--sb-line); border-radius: .875rem; background: #fff; }
.dark .studio-toolbar { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .08); }
.studio-devices { display: inline-flex; padding: .25rem; border-radius: .75rem; background: #EDEFF5; gap: .25rem; }
.dark .studio-devices { background: rgb(255 255 255 / .06); }
.studio-devices button { padding: .45rem .9rem; border-radius: .55rem; font-size: .85rem; font-weight: 600; color: var(--sb-muted); transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.studio-devices button[aria-pressed="true"] { background: #fff; color: var(--sb-blue); box-shadow: 0 1px 3px rgb(11 21 48 / .12); }
.dark .studio-devices button[aria-pressed="true"] { background: rgb(255 255 255 / .12); color: #fff; }
.studio-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; }
.studio-status { padding: .2rem .7rem; border-radius: 999px; background: #E6F4EA; color: #146C2E; font-weight: 600; }
.studio-status.is-draft { background: #FFF4DB; color: #8A5300; }
.studio-link { padding: .35rem .7rem; border-radius: .55rem; color: var(--sb-blue); font-weight: 600; }
.studio-link:hover { background: #EDEFF5; }
.dark .studio-link:hover { background: rgb(255 255 255 / .06); }
.studio-canvas { padding: 1rem; border-radius: 1rem; background: repeating-conic-gradient(#F1F3F8 0 25%, #F7F8FB 0 50%) 0 0 / 20px 20px; overflow: hidden; }
.dark .studio-canvas { background: rgb(255 255 255 / .03); }
.studio-stage { display: flex; justify-content: center; transition: height .35s ease; }
.studio-device { flex: none; display: flex; flex-direction: column; transform-origin: top center; background: #fff; overflow: hidden; transition: width .35s ease, height .35s ease, transform .35s ease, border-radius .35s ease; box-shadow: 0 20px 50px rgb(11 21 48 / .18); }
.studio-device iframe { flex: 1; width: 100%; border: 0; display: block; background: #fff; }
.studio-device.is-mobile { border: 12px solid #111827; border-radius: 44px; }
.studio-device.is-tablet { border: 14px solid #1F2937; border-radius: 28px; }
.studio-device.is-desktop { border: 1px solid #D6DAE3; border-radius: 12px; }
.studio-chrome { display: flex; gap: 6px; padding: 10px 12px; background: #F1F3F8; border-bottom: 1px solid #E3E6ED; }
.studio-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #D3D7E0; }
.studio-chrome i:first-child { background: #F26B5B; } .studio-chrome i:nth-child(2) { background: #F6B12E; } .studio-chrome i:nth-child(3) { background: #3CC46C; }
.studio-note { text-align: center; font-size: .8rem; color: var(--sb-muted); }
/* The theme library: the current theme first, then cards to preview and activate. */
.tl-current { display: grid; gap: 1.25rem; padding: 1rem; border: 1px solid var(--sb-line); border-radius: 1rem; background: #fff; }
.dark .tl-current { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .08); }
/* A live miniature of the store: the page drawn at four times the box's width, scaled to fit. */
.tl-mini { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .75rem; border: 1px solid var(--sb-line); background: #f4f5f8; }
.tl-mini iframe { position: absolute; top: 0; right: 0; width: 400%; height: 400%; border: 0; transform: scale(.25); transform-origin: top right; pointer-events: none; }
.tl-mini a { position: absolute; inset: 0; border-radius: inherit; }
.tl-mini a:focus-visible { outline: 2px solid var(--sb-blue); outline-offset: -2px; }
.tl-current-body { display: grid; align-content: center; gap: .5rem; }
.tl-current h2 { font-size: 1.5rem; font-weight: 700; }
@media (min-width: 900px) { .tl-current { grid-template-columns: 1.3fr 1fr; padding: 1.25rem; } .tl-current .tl-mini iframe { width: 250%; height: 250%; transform: scale(.4); } }
.tl-badge { justify-self: start; padding: .2rem .75rem; border-radius: 999px; background: #E6F4EA; color: #146C2E; font-size: .8rem; font-weight: 700; }
.tl-heading { margin-top: .5rem; font-size: 1.15rem; font-weight: 700; }
.tl-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.tl-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--sb-line); border-radius: 1rem; background: #fff; transition: box-shadow .2s ease, border-color .2s ease; }
.dark .tl-card { background: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .08); }
.tl-card:hover { border-color: var(--sb-blue); box-shadow: 0 10px 30px rgb(11 21 48 / .08); }
.tl-thumb { display: block; padding: .75rem .75rem 0; }
.tl-card-body { display: grid; align-content: start; gap: .5rem; padding: .75rem 1rem 1rem; }
.tl-card h3 { font-size: 1.05rem; font-weight: 700; }
.tl-swatches { display: flex; gap: .35rem; }
.tl-swatches i { width: 1.1rem; height: 1.1rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.tl-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }