/* Seraj Partner Extranet — standalone application UI. * Self-contained: the extranet loads no theme CSS. */ :root { --sp-bg: #f4f6f8; --sp-surface: #ffffff; --sp-ink: #10231c; --sp-muted: #5f7069; --sp-line: #e2e8e5; --sp-brand: #14543a; --sp-brand-ink: #ffffff; --sp-accent: #c98a3f; --sp-ok: #12703a; --sp-ok-bg: #e7f5ec; --sp-warn: #8a5c00; --sp-warn-bg: #fff5df; --sp-err: #9b1c1c; --sp-err-bg: #fdecec; --sp-radius: 14px; --sp-shadow: 0 1px 2px rgba(16,35,28,.06), 0 12px 32px -24px rgba(16,35,28,.5); /* bridged to --s-shadow-raised in backoffice.css */ --sp-sidebar: 264px; --sp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.sp-body { margin: 0; font-family: var(--sp-font); font-size: 15px; line-height: 1.55; color: var(--sp-ink); background: var(--sp-bg); /* `hidden` here turns into a scroll container, which silently kills `position: sticky` on the sidebar. `clip` trims the same horizontal overflow without creating a scrollport. */ overflow-x: clip; } /* Keep the document scroller on the root so sticky resolves against it. */ html:has(body.sp-body) { overflow-x: clip; } body.sp-body img { max-width: 100%; height: auto; } .sp-main a:not(.sp-btn), .sp-auth a:not(.sp-btn), .sp-footer a:not(.sp-btn) { color: var(--sp-brand); } .sp-skip { position: absolute; left: -9999px; } .sp-skip:focus { left: 12px; top: 12px; z-index: 999; background: #fff; padding: .6rem 1rem; border-radius: 8px; } .sp-icon { width: 19px; height: 19px; flex: 0 0 19px; } /* ---------------------------------------------------------------- layout */ .sp-app { display: flex; align-items: flex-start; min-height: 100vh; } .sp-sidebar { width: var(--sp-sidebar); flex: 0 0 var(--sp-sidebar); background: var(--sp-brand); color: rgba(255,255,255,.86); display: flex; flex-direction: column; padding: 1.1rem .85rem 1.1rem; position: sticky; top: 0; height: 100vh; max-height: 100vh; align-self: flex-start; overflow: hidden; } .sp-brand, .sp-auth__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; padding: .35rem .5rem 1.15rem; } .sp-brand__mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--sp-accent); color: #1a1205; font-weight: 800; font-size: 1.1rem; } .sp-brand__text { display: flex; flex-direction: column; font-weight: 700; line-height: 1.2; font-size: .95rem; } .sp-brand__text small { font-weight: 500; font-size: .72rem; opacity: .72; letter-spacing: .04em; text-transform: uppercase; } .sp-nav { flex: 1; overflow-y: auto; } .sp-nav__label { margin: .9rem .75rem .35rem; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); font-weight: 700; } .sp-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .sp-sidebar .sp-nav__link, .sp-sidebar__foot .sp-nav__link { position: relative; display: flex; align-items: center; gap: .7rem; padding: .62rem .75rem; border-radius: 10px; color: rgba(255,255,255,.92); text-decoration: none; font-weight: 500; font-size: .92rem; transition: background .15s ease, color .15s ease; } .sp-sidebar .sp-nav__link .sp-icon { opacity: .75; transition: opacity .15s ease; } .sp-sidebar .sp-nav__link:hover, .sp-sidebar__foot .sp-nav__link:hover { background: rgba(255,255,255,.13); color: #fff; } .sp-sidebar .sp-nav__link:hover .sp-icon { opacity: 1; } .sp-sidebar .sp-nav__link.is-active { background: #fff; color: var(--sp-brand); font-weight: 650; box-shadow: var(--s-shadow-raised); } .sp-sidebar .sp-nav__link.is-active .sp-icon { opacity: 1; } .sp-sidebar .sp-nav__link.is-active::before { content: ""; position: absolute; left: -.85rem; top: 50%; transform: translateY(-50%); width: 4px; height: 60%; border-radius: 0 4px 4px 0; background: var(--sp-accent); } .sp-brand, .sp-sidebar__foot .sp-nav__link { color: #fff; } .sp-pill { margin-left: auto; font-style: normal; font-size: .72rem; font-weight: 700; background: var(--sp-accent); color: #fff; border-radius: 999px; padding: .05rem .45rem; } .sp-sidebar__foot { border-top: 1px solid rgba(255,255,255,.14); padding-top: .6rem; display: grid; gap: 2px; } .sp-shell { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sp-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .8rem clamp(1rem, 3vw, 2rem); background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--sp-line); } .sp-topbar__title h1 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; } .sp-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: .85rem; } .sp-iconbtn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--sp-line); background: #fff; color: var(--sp-ink); } .sp-dot { position: absolute; top: -6px; right: -6px; font-style: normal; background: var(--sp-err); color: #fff; font-size: .66rem; font-weight: 700; min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; padding: 0 4px; } .sp-account { display: flex; align-items: center; gap: .6rem; } .sp-account__avatar img { border-radius: 999px; display: block; } .sp-account__meta { display: flex; flex-direction: column; line-height: 1.2; } .sp-account__meta strong { font-size: .88rem; } .sp-state { font-style: normal; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sp-muted); } .sp-state--verified { color: var(--sp-ok); } .sp-state--pending { color: var(--sp-warn); } .sp-state--suspended, .sp-state--rejected { color: var(--sp-err); } .sp-main { flex: 1; padding: clamp(1rem, 3vw, 2rem); padding-bottom: 5.5rem; max-width: 1240px; width: 100%; } .sp-foot { display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; padding: 1rem clamp(1rem, 3vw, 2rem) 5rem; color: var(--sp-muted); font-size: .82rem; border-top: 1px solid var(--sp-line); } .sp-burger { display: none; } /* ----------------------------------------------------------- components */ .sp-card { background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); padding: clamp(1rem, 2.4vw, 1.5rem); min-width: 0; } .sp-card + .sp-card, .sp-section + .sp-section { margin-top: 1.15rem; } .sp-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; } .sp-card__head h2, .sp-card__head h3 { margin: 0; font-size: 1.02rem; font-weight: 700; } .sp-muted { color: var(--sp-muted); } .sp-small { font-size: .84rem; } .sp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; margin-bottom: 1.2rem; } .sp-stat { background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 1rem 1.1rem; box-shadow: var(--sp-shadow); } .sp-stat span { display: block; font-size: .78rem; color: var(--sp-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .sp-stat strong { display: block; font-size: 1.85rem; font-weight: 750; letter-spacing: -.02em; margin-top: .2rem; } .sp-stat em { font-style: normal; font-size: .78rem; color: var(--sp-muted); } .sp-grid { display: grid; gap: 1.15rem; } .sp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .sp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .sp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sp-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .sp-table th, .sp-table td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--sp-line); vertical-align: middle; } .sp-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--sp-muted); font-weight: 700; } .sp-table tbody tr:hover { background: #fafbfb; } .sp-table td strong { font-weight: 650; } a.sp-btn, .sp-btn { display: inline-flex; align-items: center; gap: .45rem; justify-content: center; padding: .58rem 1rem; border-radius: 10px; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; text-decoration: none; background: var(--sp-brand); color: var(--sp-brand-ink, #fff); } a.sp-btn:hover, a.sp-btn:focus, a.sp-btn:visited { color: var(--sp-brand-ink, #fff); } .sp-btn:hover { filter: brightness(1.08); } a.sp-btn--ghost, .sp-btn--ghost { background: #fff; color: var(--sp-ink); border-color: var(--sp-line); } a.sp-btn--ghost:hover, a.sp-btn--ghost:visited { color: var(--sp-ink); } .sp-btn--ghost:hover { background: #f6f8f7; filter: none; } a.sp-btn--danger, .sp-btn--danger { background: var(--sp-err); color: #fff; } .sp-btn--sm { padding: .38rem .7rem; font-size: .8rem; } .sp-btn[disabled] { opacity: .55; cursor: not-allowed; } .sp-btnrow { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .sp-form { display: grid; gap: 1rem; max-width: 760px; } .sp-form label, .sp-field { display: grid; gap: .3rem; font-size: .84rem; font-weight: 600; } .sp-form input[type=text], .sp-form input[type=email], .sp-form input[type=url], .sp-form input[type=tel], .sp-form input[type=password], .sp-form input[type=date], .sp-form input[type=search], .sp-form input[type=number], .sp-form input[type=time], .sp-form input[type=datetime-local], .sp-form input[type=month], .sp-form input[type=week], .sp-form input[type=file], .sp-form textarea, .sp-form select, .sp-card input[type=text]:not(.sp-raw), .sp-card input[type=email]:not(.sp-raw), .sp-card input[type=url]:not(.sp-raw), .sp-card input[type=tel]:not(.sp-raw), .sp-card input[type=number]:not(.sp-raw), .sp-card input[type=date]:not(.sp-raw), .sp-card input[type=search]:not(.sp-raw), .sp-card input[type=password]:not(.sp-raw), .sp-card textarea:not(.sp-raw), .sp-card select:not(.sp-raw) { width: 100%; max-width: 100%; padding: .62rem .75rem; font: inherit; font-weight: 400; border: 1px solid var(--sp-line); border-radius: 10px; background: #fff; color: var(--sp-ink); } .sp-form textarea { resize: vertical; min-height: 90px; } .sp-form input:focus-visible, .sp-form textarea:focus-visible, .sp-form select:focus-visible, .sp-btn:focus-visible, .sp-nav__link:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 1px; } .sp-form .sp-hint { font-weight: 400; font-size: .78rem; color: var(--sp-muted); } .sp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .sp-check { display: flex; align-items: center; gap: .5rem; font-weight: 500; } .sp-check input { width: auto; } /* Standalone field classes — usable outside a .sp-form wrapper. */ .sp-input, .sp-textarea, .sp-select { width: 100%; max-width: 100%; padding: .62rem .75rem; font: inherit; font-weight: 400; border: 1px solid var(--sp-line); border-radius: 10px; background: #fff; color: var(--sp-ink); } .sp-textarea { resize: vertical; min-height: 90px; } .sp-input:focus-visible, .sp-textarea:focus-visible, .sp-select:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 1px; } /* Notification cards. */ .sp-note { align-items: flex-start; } .sp-note__image { display: block; max-width: 100%; border-radius: 12px; margin: .6rem 0; } .sp-note__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; } .sp-note__foot form { margin: 0; } .sp-filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; } .sp-filters select, .sp-filters input { padding: .5rem .7rem; border: 1px solid var(--sp-line); border-radius: 10px; font: inherit; font-size: .88rem; background: #fff; } .sp-chips { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1rem; } .sp-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--sp-line); background: #fff; text-decoration: none; color: var(--sp-ink); font-size: .84rem; font-weight: 600; } .sp-chip.is-active { background: var(--sp-brand); color: #fff; border-color: var(--sp-brand); } .sp-chip em { font-style: normal; opacity: .7; font-weight: 500; } .sp-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; background: #eef2f0; color: var(--sp-muted); text-transform: capitalize; } .sp-badge--new, .sp-badge--pending { background: var(--sp-warn-bg); color: var(--sp-warn); } .sp-badge--verified, .sp-badge--completed, .sp-badge--contacted { background: var(--sp-ok-bg); color: var(--sp-ok); } .sp-badge--spam, .sp-badge--rejected, .sp-badge--suspended { background: var(--sp-err-bg); color: var(--sp-err); } .sp-banner { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; padding: .85rem 1.05rem; border-radius: 12px; margin-bottom: 1.15rem; background: #eef2f0; font-size: .9rem; } .sp-banner strong { font-weight: 700; } .sp-banner--warn { background: var(--sp-warn-bg); color: var(--sp-warn); } .sp-banner--ok { background: var(--sp-ok-bg); color: var(--sp-ok); } .sp-banner--err { background: var(--sp-err-bg); color: var(--sp-err); } .sp-banner .sp-btn { margin-left: auto; } .sp-empty { text-align: center; padding: 2.5rem 1rem; color: var(--sp-muted); } .sp-empty h3 { margin: .4rem 0 .3rem; color: var(--sp-ink); font-size: 1.05rem; } .sp-progress { height: 8px; border-radius: 999px; background: #eaefec; overflow: hidden; } .sp-progress i { display: block; height: 100%; background: var(--sp-brand); border-radius: 999px; } .sp-progress--warn i { background: var(--sp-accent); } .sp-checklist { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .87rem; } .sp-checklist li { display: flex; gap: .5rem; align-items: center; color: var(--sp-muted); } .sp-checklist li::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--sp-accent); flex: none; } /* Sparkline bars */ .sp-spark { display: flex; align-items: flex-end; gap: 3px; height: 56px; margin-top: .7rem; } .sp-spark i { flex: 1; background: #d6e2dc; border-radius: 3px 3px 0 0; min-height: 2px; display: block; } .sp-spark i.is-peak { background: var(--sp-brand); } /* Listing tabs */ .sp-tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--sp-line); margin-bottom: 1.2rem; } .sp-tabs a { padding: .55rem .9rem; text-decoration: none; color: var(--sp-muted); font-weight: 600; font-size: .89rem; border-bottom: 2px solid transparent; margin-bottom: -1px; } .sp-tabs a.is-active { color: var(--sp-brand); border-bottom-color: var(--sp-brand); } /* Media grid */ .sp-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .9rem; } .sp-media__item { border: 1px solid var(--sp-line); border-radius: 12px; overflow: hidden; background: #fff; } .sp-media__item img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; } .sp-media__bar { display: flex; gap: .3rem; padding: .45rem; flex-wrap: wrap; } .sp-media__bar .sp-btn { flex: 1; } .sp-drop { border: 2px dashed var(--sp-line); border-radius: var(--sp-radius); padding: 1.6rem 1rem; text-align: center; color: var(--sp-muted); background: #fbfcfc; margin-bottom: 1rem; } .sp-drop.is-over { border-color: var(--sp-brand); background: #f1f7f4; color: var(--sp-brand); } /* Enquiry detail */ .sp-thread { display: grid; gap: .7rem; margin: 1rem 0; } .sp-thread__item { border: 1px solid var(--sp-line); border-radius: 12px; padding: .8rem .95rem; background: #fff; } .sp-thread__item small { color: var(--sp-muted); font-size: .78rem; } .sp-thread__item--staff { background: #f3f7f5; } .sp-kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; font-size: .9rem; margin: 0; } .sp-kv dt { color: var(--sp-muted); } .sp-kv dd { margin: 0; } /* Plans */ .sp-planhead { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; } .sp-planhead__main h2 { margin: .15rem 0 .3rem; font-size: 1.5rem; letter-spacing: -.02em; } .sp-planhead__pick { min-width: 220px; } .sp-pill--warn { background: var(--sp-warn-bg, #fff5e0); color: var(--sp-warn, #8a5a00); } .sp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; align-items: stretch; } .sp-plan { position: relative; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 1.35rem 1.2rem; background: #fff; display: flex; flex-direction: column; gap: .6rem; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .sp-plan:hover { transform: translateY(-3px); box-shadow: var(--s-shadow-lifted); } .sp-plan.is-current { border-color: var(--sp-brand); box-shadow: 0 0 0 2px rgba(20,84,58,.12); } .sp-plan.is-popular { border-color: rgba(20,84,58,.45); background: linear-gradient(180deg, rgba(20,84,58,.05), #fff 60%); } .sp-plan__ribbon { position: absolute; top: -.65rem; right: 1rem; background: var(--sp-brand); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .22rem .55rem; border-radius: 999px; } .sp-plan h3 { margin: 0; font-size: 1.02rem; } .sp-plan__price { font-size: 1.75rem; font-weight: 750; letter-spacing: -.02em; margin: 0; } .sp-plan__per { font-size: .8rem; font-weight: 500; font-style: normal; color: var(--sp-muted); } .sp-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .86rem; color: var(--sp-muted); } .sp-plan ul li::before { content: "✓ "; color: var(--sp-ok); font-weight: 700; } .sp-plan__cta, .sp-plan__state { margin-top: auto; } .sp-plan__cta .sp-btn { width: 100%; justify-content: center; } .sp-plan__state { align-self: flex-start; } /* Pagination */ .sp-pager { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1.1rem; } .sp-pager a, .sp-pager span { padding: .4rem .75rem; border-radius: 9px; border: 1px solid var(--sp-line); text-decoration: none; color: var(--sp-ink); font-size: .85rem; background: #fff; } .sp-pager span.is-current { background: var(--sp-brand); color: #fff; border-color: var(--sp-brand); } /* Bottom tab bar (mobile) */ .sp-tabbar { display: none; } .sp-scrim { display: none; } /* ------------------------------------------------------------ auth screens */ .sp-body--auth { background: linear-gradient(160deg, #10382a 0%, #14543a 45%, #0d2b21 100%); } .sp-auth { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; } .sp-auth__panel { width: 100%; max-width: 440px; background: #fff; border-radius: 20px; padding: clamp(1.3rem, 4vw, 2.2rem); box-shadow: var(--s-shadow-floating); } .sp-auth__brand { color: var(--sp-ink); padding: 0 0 1.3rem; } .sp-auth h1 { margin: 0 0 .3rem; font-size: 1.4rem; letter-spacing: -.02em; } .sp-auth p.sp-lede { margin: 0 0 1.3rem; color: var(--sp-muted); font-size: .92rem; } .sp-auth .sp-form { max-width: none; } .sp-auth .sp-btn { width: 100%; padding: .72rem 1rem; } .sp-auth__alt { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--sp-line); font-size: .88rem; color: var(--sp-muted); display: grid; gap: .35rem; } .sp-auth__legal { text-align: center; color: rgba(255,255,255,.6); font-size: .78rem; margin: 1.2rem 0 0; } /* honeypot */ .sp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* ------------------------------------------------------------- responsive */ @media (max-width: 1024px) { .sp-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--s-shadow-floating); } .sp-app.is-nav-open .sp-sidebar { transform: none; } .sp-app.is-nav-open .sp-scrim { display: block; position: fixed; inset: 0; background: rgba(6,20,15,.5); z-index: 55; } .sp-burger { display: grid; gap: 4px; align-content: center; width: 40px; height: 40px; padding: 0 9px; border-radius: 10px; border: 1px solid var(--sp-line); background: #fff; cursor: pointer; } .sp-burger span { display: block; height: 2px; background: var(--sp-ink); border-radius: 2px; } } @media (max-width: 720px) { body.sp-body { font-size: 14.5px; } .sp-main { padding: 1rem max(1rem, env(safe-area-inset-left)) 6.5rem max(1rem, env(safe-area-inset-right)); } .sp-topbar { padding: .7rem 1rem; } .sp-topbar__title h1 { font-size: 1rem; } .sp-account__meta { display: none; } .sp-foot { padding-bottom: 6.5rem; } .sp-stat strong { font-size: 1.5rem; } .sp-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(255,255,255,.97); border-top: 1px solid var(--sp-line); padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); backdrop-filter: saturate(180%) blur(8px); } .sp-tabbar a { flex: 1; display: grid; justify-items: center; gap: 2px; padding: .35rem .1rem; text-decoration: none; color: var(--sp-muted); font-size: .66rem; font-weight: 600; } .sp-tabbar a.is-active { color: var(--sp-brand); } .sp-tabbar span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; } /* Tables collapse into stacked cards (all tables unless opted out) */ .sp-table:not(.sp-table--keep) { display: block; font-size: .92rem; } .sp-table:not(.sp-table--keep) thead { display: none; } .sp-table:not(.sp-table--keep) tbody { display: block; } .sp-table:not(.sp-table--keep) tbody tr { display: grid; gap: .4rem; border: 1px solid var(--sp-line); border-radius: 12px; padding: .8rem; margin-bottom: .7rem; background: #fff; } .sp-table:not(.sp-table--keep) tbody tr:hover { background: #fff; } .sp-table:not(.sp-table--keep) td { border: 0; padding: 0; display: flex; gap: .6rem; align-items: flex-start; justify-content: space-between; text-align: right; min-width: 0; } .sp-table:not(.sp-table--keep) td::before { content: attr(data-label); color: var(--sp-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; flex: none; max-width: 45%; text-align: left; line-height: 1.35; } .sp-table:not(.sp-table--keep) td:not([data-label]) { justify-content: flex-start; text-align: left; } .sp-table:not(.sp-table--keep) td:not([data-label])::before { display: none; } .sp-table:not(.sp-table--keep) td > * { min-width: 0; } .sp-table:not(.sp-table--keep) td select, .sp-table:not(.sp-table--keep) td input, .sp-table:not(.sp-table--keep) td textarea, .sp-table:not(.sp-table--keep) td form { width: 100%; max-width: 100%; } .sp-table:not(.sp-table--keep) td .sp-btn { width: 100%; justify-content: center; } .sp-table:not(.sp-table--keep) td:last-child { justify-content: stretch; padding-top: .35rem; } .sp-table-wrap { overflow-x: visible; } } /* Text bleed guards */ .sp-main, .sp-card, .sp-thread__item { overflow-wrap: anywhere; } .sp-table td { overflow-wrap: break-word; word-break: normal; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ------------------------------------------------- v2: create + schema forms */ .sp-fieldgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; } .sp-fieldgrid .sp-field--wide { grid-column: 1 / -1; } @media (max-width: 720px) { .sp-fieldgrid { grid-template-columns: 1fr; } } .sp-select, .sp-form select { width: 100%; padding: .6rem .7rem; border-radius: 10px; border: 1px solid var(--sp-line, #d9e2dd); background: #fff; color: inherit; font: inherit; } .sp-hint { display: block; margin-top: .3rem; font-size: .78rem; color: var(--sp-muted, #5f7069); } .sp-choicegrid { border: 0; margin: 0 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; } .sp-choicegrid legend { margin-bottom: .5rem; } .sp-choice { position: relative; display: block; cursor: pointer; } .sp-choice input { position: absolute; opacity: 0; inset: 0; } .sp-choice__body { display: grid; gap: .3rem; padding: .95rem 1rem; height: 100%; border: 1.5px solid var(--sp-line, #d9e2dd); border-radius: 14px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .sp-choice__body strong { font-size: .98rem; } .sp-choice__body em { font-style: normal; font-size: .8rem; color: var(--sp-muted, #5f7069); } .sp-choice input:focus-visible + .sp-choice__body { outline: 2px solid var(--sp-brand); outline-offset: 2px; } .sp-choice input:checked + .sp-choice__body { border-color: var(--sp-brand); background: color-mix(in srgb, var(--sp-brand) 6%, #fff); box-shadow: var(--s-shadow-raised); } .sp-choice .sp-icon { color: var(--sp-brand); } .sp-steps { list-style: none; counter-reset: sp; margin: 0; padding: 0; display: grid; gap: .8rem; } .sp-steps li { counter-increment: sp; position: relative; padding-left: 2.4rem; display: grid; gap: .15rem; } .sp-steps li::before { content: counter(sp); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 700; background: var(--sp-brand); color: #fff; } .sp-steps li span { font-size: .85rem; color: var(--sp-muted, #5f7069); } .sp-repeater { display: grid; gap: .6rem; } .sp-repeater__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) auto; gap: .5rem; align-items: end; padding: .7rem; border: 1px solid var(--sp-line, #d9e2dd); border-radius: 12px; background: #fff; } .sp-repeater__row .sp-x { border: 0; background: transparent; color: #a12b2b; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: .4rem; } /* ------------------------------------------------------------------------- * Wizard, repeaters, term grids, notification feed (Extranet v3) * ---------------------------------------------------------------------- */ .sp-wizsteps { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1.4rem; padding: 0; counter-reset: sp-wiz; } .sp-wizsteps li { flex: 1 1 130px; } .sp-wizsteps li > a, .sp-wizsteps li > span { display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem; border-radius: 10px; background: var(--sp-soft, #f4f6f5); color: var(--sp-ink, #17211d); font-size: .84rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; } .sp-wizsteps li > a:hover { border-color: var(--sp-line); } .sp-wizsteps__n { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; border-radius: 50%; background: #fff; border: 1px solid var(--sp-line); font-size: .75rem; } .sp-wizsteps li.is-active > a, .sp-wizsteps li.is-active > span { background: var(--sp-brand); color: #fff; } .sp-wizsteps li.is-active .sp-wizsteps__n { background: rgba(255,255,255,.22); border-color: transparent; color: #fff; } .sp-wizsteps li.is-done > a { background: #fff; border-color: var(--sp-brand); color: var(--sp-brand); } .sp-wizsteps li.is-todo > span { opacity: .55; } .sp-wizfoot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--sp-line); } /* Repeater (rooms and similar) */ .sp-rep { display: grid; gap: .6rem; } .sp-rep__rows { display: grid; gap: .6rem; } .sp-rep__row { position: relative; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); padding: .8rem 2.2rem .8rem .8rem; background: var(--sp-soft, #f4f6f5); border: 1px solid var(--sp-line); border-radius: 12px; } .sp-rep__cell { display: grid; gap: .25rem; font-size: .74rem; font-weight: 600; color: var(--sp-muted); } .sp-rep__cell input, .sp-rep__cell select { width: 100%; } .sp-rep__del { position: absolute; top: .5rem; right: .5rem; width: 1.6rem; height: 1.6rem; line-height: 1; border-radius: 50%; border: 1px solid var(--sp-line); background: #fff; color: var(--sp-muted); cursor: pointer; font-size: 1rem; } .sp-rep__del:hover { color: var(--sp-danger, #b3261e); border-color: currentColor; } /* Taxonomy checkbox grids */ .sp-termgrid { display: grid; gap: .35rem .9rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); max-height: 230px; overflow: auto; padding: .7rem .8rem; border: 1px solid var(--sp-line); border-radius: 12px; background: #fff; } .sp-check { display: flex; align-items: center; gap: .45rem; font-size: .86rem; } .sp-check input { margin: 0; } /* Single-image picker */ .sp-imgpick { display: grid; gap: .5rem; justify-items: start; } .sp-imgpick__preview { width: 140px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--sp-soft, #f4f6f5); border: 1px dashed var(--sp-line); } .sp-imgpick__preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .sp-imgpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .4rem; } .sp-imgpick__grid button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; line-height: 0; } .sp-imgpick__grid button.is-active { border-color: var(--sp-brand); } .sp-imgpick__grid img { width: 100%; height: 64px; object-fit: cover; } /* Notification feed */ .sp-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .sp-feed__item { display: flex; align-items: flex-start; gap: .8rem; padding: .9rem .2rem; border-bottom: 1px solid var(--sp-line); } .sp-feed__item:last-child { border-bottom: 0; } .sp-feed__item.is-unread { background: var(--sp-soft, #f4f6f5); border-radius: 10px; padding-inline: .8rem; } .sp-feed__icon { flex: 0 0 auto; color: var(--sp-brand); display: inline-flex; } .sp-feed__icon svg { width: 18px; height: 18px; } .sp-feed__body { display: grid; gap: .15rem; flex: 1 1 auto; min-width: 0; } .sp-feed__body strong { font-size: .92rem; } .sp-feed__body span { font-size: .85rem; color: var(--sp-muted); } @media (max-width: 640px) { .sp-wizsteps li { flex: 1 1 100%; } .sp-rep__row { grid-template-columns: 1fr 1fr; } } /* ------------------------------------------------------------------------- * Manager Console accents (Phase 13) * ---------------------------------------------------------------------- */ .sp-body--manager { --sp-brand: #1f4b8f; --sp-brand-ink: #ffffff; --sp-accent: #1f4b8f; --sp-accent-ink: #ffffff; --sp-accent-soft: #eaf1fb; } /* Guarantee readable labels on filled controls, whatever the accent is. */ .sp-body--manager .sp-btn:not(.sp-btn--ghost):not(.sp-btn--danger), .sp-body--manager a.sp-btn:not(.sp-btn--ghost):not(.sp-btn--danger), .sp-body--manager .sp-chip.is-active, .sp-body--manager .sp-wizsteps li.is-active > a, .sp-body--manager .sp-wizsteps li.is-active > span { background: var(--sp-brand); border-color: var(--sp-brand); color: #fff; } .sp-body--manager .sp-btn:not(.sp-btn--ghost) * , .sp-body--manager .sp-chip.is-active * { color: inherit; } .sp-body--manager .sp-chip.is-active em { opacity: .85; } .sp-body--manager .sp-sidebar__brand em { color: #9dc0f2; } .sp-body--manager .sp-badge--role { background: var(--sp-accent-soft); color: var(--sp-accent); } .sp-checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem .9rem; max-height: 320px; overflow: auto; padding: .6rem; border: 1px solid var(--sp-line); border-radius: 12px; background: #fff; } .sp-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; } .sp-check input { margin-top: .2rem; } .sp-form--inline { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; margin: 0; } .sp-form--inline label { margin: 0; } .sp-progress { height: 6px; border-radius: 99px; background: var(--sp-line); overflow: hidden; min-width: 90px; } .sp-progress i { display: block; height: 100%; background: var(--sp-ok); } .sp-progress--warn i { background: var(--sp-warn); } .sp-manager-card { display: flex; gap: .9rem; align-items: center; } .sp-manager-card img { border-radius: 50%; } .sp-mgrcard__row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; } .sp-mgrcard__avatar img { border-radius: 50%; } .sp-mgrcard__meta { display: grid; margin-right: auto; } /* SLA escalation tiers */ .sp-badge--sla { border-radius: 99px; font-weight: 600; white-space: nowrap; } .sp-badge--sla1 { background: var(--sp-warn-bg); color: var(--sp-warn); } .sp-badge--sla2 { background: #fdece7; color: #b64a1f; } .sp-badge--sla3 { background: #fbe3e3; color: var(--sp-err); } .sp-hr { border: 0; border-top: 1px solid var(--sp-line); margin: 1.1rem 0 .9rem; } .sp-h3 { font-size: 1rem; margin: 0 0 .3rem; } .sp-grid--3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; } /* --------------------------------------------------------------- * Outcome notifications — tone accent + next-step instructions * ------------------------------------------------------------ */ .sp-feed__item--positive { border-left: 3px solid #1f9d6b; } .sp-feed__item--action_needed { border-left: 3px solid #c98a12; } .sp-feed__item--neutral { border-left: 3px solid var(--sp-brand, #14543a); } .sp-feed__steps-label { display: block; margin: 8px 0 2px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sp-brand, #14543a); } .sp-feed__steps { margin: 0 0 4px; padding-left: 18px; font-size: .88rem; line-height: 1.55; color: inherit; } .sp-feed__steps li { margin: 0 0 4px; } /* ---------------------------------------------------------------- messages */ .sp-maillog { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; } .sp-maillog__item { border: 1px solid var(--sp-line); border-left: 3px solid var(--sp-brand, #14543a); border-radius: 12px; padding: .9rem 1rem; background: #fff; } .sp-maillog__item.is-unread { background: #f6fbf8; } .sp-maillog__item--positive { border-left-color: #1f9d6b; } .sp-maillog__item--action_needed { border-left-color: #c98a12; } .sp-maillog__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: .4rem; } .sp-maillog__body p { margin: 0 0 .55rem; font-size: .92rem; line-height: 1.6; } .sp-tpl { border: 1px solid var(--sp-line); border-radius: 12px; padding: 1rem; margin: 0 0 1rem; } .sp-tpl legend { font-weight: 600; padding: 0 .4rem; font-size: .9rem; } .sp-tpl--new { border-style: dashed; } .sp-notice { padding: .75rem 1rem; border-radius: 10px; margin: 0 0 1rem; font-size: .92rem; } .sp-notice--ok { background: #e7f7ee; color: #14543a; border: 1px solid #bfe7d2; } .sp-notice--warn { background: #fdf2e3; color: #7a4b06; border: 1px solid #f3d9ab; } .sp-pill--alert { background: #c0392b; color: #fff; } /* --------------------------------------------------------- assign listings */ .sp-assign__owner { gap: .4rem; margin: 0 0 .35rem; align-items: center; } .sp-assign__owner:last-child { margin-bottom: 0; } /* -------------------------------------------------- notification cards */ .sp-notes { display: grid; gap: .7rem; } .sp-note { display: grid; grid-template-columns: 40px 1fr auto; gap: .85rem; align-items: start; padding: 1rem 1.05rem; border: 1px solid var(--sp-line, #e5e8e7); border-radius: 14px; background: var(--sp-card, #fff); color: inherit; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } a.sp-note:hover, a.sp-note:focus-visible { border-color: var(--sp-brand, #14543a); box-shadow: var(--s-shadow-raised); transform: translateY(-1px); } .sp-note.is-unread { background: var(--sp-soft, #f4f6f5); border-color: var(--sp-brand, #14543a); } .sp-note__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--sp-accent-soft, #eef3f1); color: var(--sp-brand, #14543a); } .sp-note__icon svg { width: 18px; height: 18px; } .sp-note__body { display: grid; gap: .3rem; min-width: 0; } .sp-note__title { font-weight: 650; line-height: 1.35; } .sp-note__text, .sp-note__steps { color: var(--sp-muted, #667); font-size: .92rem; line-height: 1.5; } .sp-note__steps { margin: .2rem 0 0; padding-left: 1.1rem; display: grid; gap: .15rem; } .sp-note__steps-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sp-muted, #667); } .sp-note__time { font-size: .8rem; color: var(--sp-muted, #667); font-style: normal; } .sp-note__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sp-brand, #14543a); margin-top: .5rem; } .sp-note--positive { border-left: 3px solid #1f9d6b; } .sp-note--action_needed { border-left: 3px solid #c98a12; } .sp-note--negative { border-left: 3px solid #c0392b; } @media (max-width: 600px) { .sp-note { grid-template-columns: 32px 1fr; padding: .85rem; } .sp-note__icon { width: 32px; height: 32px; } .sp-note__dot { display: none; } } /* Featured image panel (partner photo manager) */ .sp-cover{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap} .sp-cover img{width:min(320px,100%);height:auto;border-radius:12px;display:block} /* --------------------------------------------------------------------------- * Phase 15 — Communications Hub * ------------------------------------------------------------------------ */ .sc-reach { display: inline-flex; align-items: baseline; gap: .4rem; font-size: .85rem; color: var(--sp-muted, #5f7069); } .sc-reach__n { font-size: 1.35rem; font-weight: 700; color: var(--sp-ink, #10231c); } .sc-panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--sp-line, #e3ebe7); display: grid; gap: 1rem; } .sc-panel[hidden] { display: none; } .sc-check-grid { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; } .sc-check-grid legend { padding: 0; margin-bottom: .35rem; } .sc-check-inline { align-self: end; } .sc-media { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .5rem 0 1rem; } .sc-media__preview img { max-width: 180px; border-radius: 10px; display: block; } .sp-tpl { border: 1px solid var(--sp-line, #e3ebe7); border-radius: 12px; padding: 1rem 1.15rem; margin: 0 0 1rem; display: grid; gap: .85rem; } .sp-tpl legend { font-weight: 600; padding: 0 .4rem; } /* Audit trail --------------------------------------------------------- */ .seraj-audit { margin-top: 1rem; border: 1px solid var(--sp-line); border-radius: 12px; background: #fff; } .seraj-audit > summary { cursor: pointer; padding: .7rem .9rem; font-size: .82rem; font-weight: 650; display: flex; align-items: center; gap: .5rem; } .seraj-audit__count { font-size: .7rem; font-weight: 700; background: var(--sp-soft, #eef4f1); color: var(--sp-muted); border-radius: 999px; padding: .1rem .45rem; } .seraj-audit__list { list-style: none; margin: 0; padding: 0 .9rem .8rem; } .seraj-audit__item { padding: .55rem 0 .55rem .9rem; border-left: 2px solid var(--sp-line); position: relative; } .seraj-audit__item::before { content: ""; position: absolute; left: -5px; top: .85rem; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-brand, #1f6f5c); } .seraj-audit__msg { margin: 0; font-size: .85rem; } .seraj-audit__meta { margin: .15rem 0 0; font-size: .72rem; color: var(--sp-muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .seraj-audit__role { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: .64rem; } /* Payment status timeline ------------------------------------------ */ .seraj-ptl { margin-top: 1rem; border: 1px solid var(--sp-line); border-radius: 12px; background: #fff; } .seraj-ptl > summary { cursor: pointer; padding: .7rem .9rem; font-size: .82rem; font-weight: 650; display: flex; align-items: center; gap: .5rem; } .seraj-ptl__sum { font-size: .72rem; font-weight: 700; background: var(--sp-soft, #eef4f1); color: var(--sp-muted); border-radius: 999px; padding: .1rem .5rem; } .seraj-ptl__list { list-style: none; margin: 0; padding: 0 .9rem .8rem; } .seraj-ptl__item { padding: .55rem 0 .55rem .9rem; border-left: 2px solid var(--sp-line); position: relative; } .seraj-ptl__item::before { content: ""; position: absolute; left: -5px; top: .85rem; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-muted, #7a8a85); } .seraj-ptl__item--good::before { background: var(--sp-brand, #1f6f5c); } .seraj-ptl__item--warn::before { background: #c98a1b; } .seraj-ptl__item--bad::before { background: #b5443a; } .seraj-ptl__row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; } .seraj-ptl__title { font-size: .85rem; } .seraj-ptl__amt { font-size: .85rem; font-weight: 700; white-space: nowrap; } .seraj-ptl__item--good .seraj-ptl__amt { color: var(--sp-brand, #1f6f5c); } .seraj-ptl__item--warn .seraj-ptl__amt { color: #c98a1b; } .seraj-ptl__item--bad .seraj-ptl__amt { color: #b5443a; } .seraj-ptl__meta { margin: .15rem 0 0; font-size: .72rem; color: var(--sp-muted); display: flex; flex-wrap: wrap; gap: .35rem; } /* Voucher access override (support desk) ---------------------------- */ .sb-docs { margin-top: .75rem; border-top: 1px solid var(--sp-line, rgba(0,0,0,.08)); padding-top: .6rem; } .sb-docs > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .5rem; } .sb-docs__state { font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 999px; } .sb-docs__state--on { background: rgba(22,140,90,.12); color: #0f7a4d; } .sb-docs__state--off { background: rgba(190,70,40,.12); color: #a53b1d; } .sb-docs__denied { display: grid; gap: .25rem; margin: .5rem 0; } .sb-docs__denied span { font-size: .84rem; line-height: 1.45; opacity: .9; } .sb-docs__denied-title { margin: .35rem 0 .1rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .sb-docs__denied-steps { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; font-size: .84rem; line-height: 1.45; } .sb-docs__denied-link { margin: .35rem 0 0; font-size: .84rem; } .sb-docs__denied-link a { font-weight: 600; text-decoration: underline; } .sb-docs__form { margin-top: .6rem; display: grid; gap: .5rem; } .sb-docs__form textarea { width: 100%; } .sb-docs__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; } /* ================================================================== */ /* Reservations — card grid + detail workspace */ /* Canonical home (booking.css is dequeued by the partner shell). */ /* ================================================================== */ /* Partner reservations — card grid */ .sb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1rem; margin: 0 0 1rem; align-items: stretch; } @media (max-width: 900px) { .sb-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .8rem; } } @media (max-width: 600px) { .sb-cards { grid-template-columns: 1fr; } } .sb-cards .sp-card + .sp-card { margin-top: 0; } a.sb-card, .sb-card { display: flex; flex-direction: column; gap: .6rem; height: 100%; min-width: 0; text-decoration: none; color: inherit; padding: 1.05rem 1.15rem; border-radius: 16px; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } @media (max-width: 480px) { a.sb-card, .sb-card { padding: .9rem 1rem; border-radius: 14px; } } .sb-card:hover, .sb-card:focus-visible { transform: translateY(-2px); border-color: var(--sp-brand, #1f6f5c); box-shadow: var(--s-shadow-lifted); } .sb-card__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } .sb-card__top code { font-size: .74rem; letter-spacing: .05em; font-weight: 700; background: var(--sp-soft, #f2f6f4); border-radius: 999px; padding: .2rem .55rem; overflow-wrap: anywhere; } .sb-card__top .sp-badge { flex-shrink: 0; } .sb-card__name { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; } .sb-card__meta { margin: 0; font-size: .82rem; line-height: 1.45; overflow-wrap: anywhere; } .sb-card__stay { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; font-weight: 600; background: var(--sp-soft, #f2f6f4); border-radius: 10px; padding: .5rem .7rem; } .sb-card__stay i { font-style: normal; opacity: .5; } .sb-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: auto; padding-top: .65rem; border-top: 1px solid var(--sp-line, rgba(0,0,0,.08)); } .sb-card__money { display: grid; gap: .1rem; min-width: 0; } .sb-card__money span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; } .sb-card__money strong { font-size: 1.05rem; font-weight: 700; } .sb-card__money em { font-style: normal; font-size: .78rem; opacity: .7; overflow-wrap: anywhere; } .sb-card__cta { font-size: .82rem; font-weight: 700; color: var(--sp-brand, #1f6f5c); white-space: nowrap; margin-inline-start: auto; } /* Partner reservation detail */ .sb-detail__back { display: inline-block; margin: 0 0 .5rem; text-decoration: none; font-weight: 600; font-size: .82rem; } .sb-detail__title { margin: 0 0 .2rem; font-size: 1.4rem; line-height: 1.2; font-weight: 750; overflow-wrap: anywhere; } .sb-detail__title code { font-size: .82rem; opacity: .7; margin-inline-start: .45rem; } @media (max-width: 600px) { .sb-detail__title { font-size: 1.15rem; } } .sb-detail .sp-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem; } .sb-detail .sp-card__head > div { min-width: 0; flex: 1 1 12rem; } .sb-detail .sp-badge { flex-shrink: 0; } .sb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .65rem; margin-top: 1rem; } @media (max-width: 480px) { .sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } } .sb-grid > div { display: grid; gap: .15rem; padding: .7rem .8rem; min-width: 0; border: 1px solid var(--sp-line, rgba(0,0,0,.08)); border-radius: 12px; background: var(--sp-soft, #f8faf9); } .sb-grid strong { font-size: .98rem; font-weight: 700; overflow-wrap: anywhere; } .sb-grid a { text-decoration: none; } .sb-actions { display: flex; flex-wrap: wrap; gap: .55rem; align-items: end; padding: .9rem; border: 1px dashed var(--sp-line, rgba(0,0,0,.14)); border-radius: 12px; } .sb-actions__amount { min-width: 180px; flex: 1 1 180px; } .sb-actions__amount input { width: 100%; } @media (max-width: 480px) { .sb-actions { padding: .75rem; } .sb-actions__amount { flex-basis: 100%; } .sb-actions .sp-btn { flex: 1 1 calc(50% - .55rem); justify-content: center; text-align: center; } } .sp-note { margin: 1rem 0 0; padding: .75rem .9rem; border-radius: 12px; background: var(--sp-soft, #f2f6f4); font-size: .9rem; line-height: 1.5; } /* Detail tiles — label above value, never glued together. */ .sb-grid > div > span, .sb-grid > div .sp-small { display: block; font-size: .7rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .06em; opacity: .65; margin-bottom: .15rem; } .sb-grid > div > strong { display: block; line-height: 1.35; } /* Commission / document line — breathing room between the parts. */ .sb-detail .sp-small a { text-decoration: underline; } .sb-detail > .sp-small, .sb-detail p.sp-small { margin-top: 1rem; line-height: 1.7; word-spacing: .04em; } /* Commission block + document buttons */ .sb-commission { display: grid; gap: .75rem; margin-top: 1.1rem; padding: .9rem 1rem; border: 1px solid var(--sp-line, rgba(0,0,0,.08)); border-radius: 14px; background: var(--sp-soft, #f8faf9); } .sb-commission__summary { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--sp-text, #1a1a1a); } .sb-doc-links { display: flex; flex-wrap: wrap; gap: .55rem; } /* Document buttons. The shell paints every non-.sp-btn link brand-green, which put green text on a green button — pin the ink explicitly on all link states so the label is always readable. */ a.sb-doc-link, .sb-doc-link { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .85rem; font-size: .82rem; font-weight: 600; line-height: 1; color: var(--sp-brand-ink, #fff); background: var(--sp-brand, #1f6f5c); border: 1px solid transparent; border-radius: 10px; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } a.sb-doc-link:link, a.sb-doc-link:visited, a.sb-doc-link:hover, a.sb-doc-link:focus, a.sb-doc-link:active { color: var(--sp-brand-ink, #fff); } .sb-doc-link:hover, .sb-doc-link:focus-visible { background: var(--sp-brand-dark, #164c3f); transform: translateY(-1px); box-shadow: var(--s-shadow-raised); } .sb-doc-link:focus-visible { outline: 2px solid var(--sp-brand, #1f6f5c); outline-offset: 2px; } .sb-doc-link svg { flex-shrink: 0; width: 16px; height: 16px; } .sb-commission--direct { background: rgba(22,140,90,.07); border-color: rgba(22,140,90,.22); } /* Same guarantee for every button in the reservation workspace. */ .sb-actions a.sp-btn, .sb-card a.sp-btn, .sp-main a.sp-btn:not(.sp-btn--ghost):not(.sp-btn--danger) { color: var(--sp-brand-ink, #fff); } .sp-main a.sp-btn--ghost, .sp-main a.sp-btn--ghost:visited { color: var(--sp-ink); } .sp-main a.sp-btn--danger, .sp-main a.sp-btn--danger:visited { color: #fff; } @media (max-width: 480px) { .sb-commission { padding: .8rem .85rem; } .sb-doc-link { flex: 1 1 calc(50% - .55rem); justify-content: center; text-align: center; } } /* Plan payment history ------------------------------------------------ */ .sp-doclist { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .sp-doclist__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--sp-line, #e4ebe8); border-radius: 12px; background: #fff; } .sp-doclist__row > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sp-doclist__amt { font-weight: 700; white-space: nowrap; } @media (max-width: 600px) { .sp-doclist__row { align-items: stretch; } .sp-doclist__row > div:last-child, .sp-doclist__row .sp-btn { width: 100%; } .sp-doclist__row .sp-btn { justify-content: center; } } /* Plan timeline (billing) */ .sp-timeline { list-style: none; margin: 14px 0 0; padding: 0 0 0 20px; position: relative; } .sp-timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 2px; background: var(--sp-line, rgba(0,0,0,.10)); } .sp-timeline__item { position: relative; padding: 0 0 16px 14px; } .sp-timeline__item:last-child { padding-bottom: 0; } .sp-timeline__dot { position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--sp-line, rgba(0,0,0,.20)); box-shadow: 0 0 0 3px var(--sp-surface, #fff); } .sp-timeline__item.is-now .sp-timeline__dot { background: var(--sp-brand, #16794a); } .sp-timeline__item.is-next .sp-timeline__dot { background: transparent; border: 2px solid var(--sp-brand, #16794a); } .sp-timeline__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sp-timeline__title { line-height: 1.3; } .sp-timeline__link { align-self: flex-start; margin-top: 4px; text-decoration: underline; } /* Payment-history row actions + inline flash */ .sp-doclist__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .sp-doclist__actions form { margin: 0; } .sp-flash { display: block; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; border: 1px solid var(--sp-line, #e4ebe8); background: var(--sp-soft, #f4f6f5); color: var(--sp-ink, #14201b); } .sp-flash--ok { border-color: var(--sp-brand, #14543a); } .sp-flash--warn { border-color: #d9822b; } @media (max-width: 640px) { .sp-doclist__actions { width: 100%; } .sp-doclist__actions form, .sp-doclist__actions .sp-btn { width: 100%; justify-content: center; } } /* Phase 22 — payouts, preferences, setup score, security */ .sp-table .sp-pill { margin-left: 0; display: inline-block; } .sp-pill--ok { background: var(--sp-ok-bg, #e6f6ec); color: var(--sp-ok, #1c6b3c); } .sp-pill--muted { background: var(--sp-soft, #f1f1ef); color: var(--sp-muted, #5c5c57); } .sp-fieldset { border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: .9rem 1rem; margin: 0 0 1rem; display: grid; gap: .75rem; } .sp-fieldset > legend { font-size: .82rem; font-weight: 700; padding: 0 .35rem; } .sp-btnrow--wrap { flex-wrap: wrap; gap: .4rem .9rem; } .sp-setup__score { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; } .sp-setup__bar { height: 8px; border-radius: 999px; background: var(--sp-soft, #f1f1ef); overflow: hidden; margin: .2rem 0 1rem; } .sp-setup__bar > span { display: block; height: 100%; background: var(--sp-brand); border-radius: 999px; } .sp-setup__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .sp-setup__item { display: flex; gap: .55rem; align-items: baseline; font-size: .92rem; } .sp-setup__item.is-done { color: var(--sp-muted, #5c5c57); } .sp-setup__tick { width: 1rem; text-align: center; color: var(--sp-brand); font-weight: 700; } .sp-setup__item a { text-decoration: underline; } @media (max-width: 640px) { .sp-setup__score { font-size: 1.3rem; } .sp-fieldset { padding: .75rem .8rem; } } /* ---- Phase 22.1: stat tiles, card actions, channel status ---- */ .sp-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; } .sp-tile { display: flex; flex-direction: column; gap: .25rem; padding: .85rem .95rem; border: 1px solid var(--sp-line, #e6e5e0); border-radius: 12px; background: var(--sp-surface, #fff); } .sp-tile__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sp-muted, #5c5c57); } .sp-tile__value { font-size: 1.15rem; line-height: 1.25; color: var(--sp-ink, #22221f); } .sb-chan__stats { margin: .9rem 0 1.1rem; } .sb-chan__error { display: block; margin-top: .25rem; word-break: break-word; } @media (max-width: 640px) { .sp-card__actions { width: 100%; } .sp-card__actions .sp-btn { flex: 1 1 auto; text-align: center; } } /* ---- Consistent controls across every extranet screen ------------------ */ .sp-form input[type=checkbox], .sp-form input[type=radio], .sp-card input[type=checkbox], .sp-card input[type=radio] { width: 1.05rem; height: 1.05rem; accent-color: var(--sp-brand); border-radius: 5px; margin: 0; flex: none; } .sp-form input[type=file] { padding: .45rem .5rem; background: #fbfcfb; } .sp-card input[type=number]::-webkit-outer-spin-button, .sp-card input[type=number]::-webkit-inner-spin-button { opacity: .5; } .sp-card input:focus-visible, .sp-card textarea:focus-visible, .sp-card select:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 1px; } .sp-card input[disabled], .sp-card select[disabled], .sp-card textarea[disabled] { background: #f4f6f5; color: var(--sp-muted); cursor: not-allowed; } /* ---- Sidebar: search, collapsible module sections ---------------------- */ .sp-nav__search { position: relative; margin: .5rem .35rem .2rem; } .sp-nav__search .sp-icon { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; opacity: .6; color: #fff; pointer-events: none; } .sp-nav__search input { width: 100%; padding: .45rem .6rem .45rem 1.9rem; font: inherit; font-size: .86rem; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 9px; } .sp-nav__search input::placeholder { color: rgba(255,255,255,.55); } .sp-nav__search input:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 1px; } .sp-nav__toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: calc(100% - 1.5rem); background: none; border: 0; cursor: pointer; text-align: left; font: inherit; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.62); } .sp-nav__toggle .sp-icon { width: 14px; height: 14px; transition: transform .22s ease; } .sp-nav__group.is-open > .sp-nav__toggle .sp-icon { transform: rotate(180deg); } .sp-nav__group.is-collapsible > .sp-nav__list { max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: max-height .24s ease, opacity .2s ease, visibility 0s linear .24s; } .sp-nav__group.is-collapsible.is-open > .sp-nav__list { max-height: 60rem; opacity: 1; visibility: visible; transition: max-height .24s ease, opacity .2s ease, visibility 0s; } @media (prefers-reduced-motion: reduce) { .sp-nav__group.is-collapsible > .sp-nav__list { transition: none; } } .sp-nav__empty { margin: .8rem .75rem; font-size: .82rem; color: rgba(255,255,255,.6); } .sp-nav__group[hidden] { display: none; } /* ---- Settings hub ------------------------------------------------------ */ .sp-settings-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .sp-settings-card { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--sp-line); border-radius: 14px; text-decoration: none; color: var(--sp-ink); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .sp-settings-card:hover { border-color: var(--sp-brand); transform: translateY(-1px); box-shadow: var(--s-shadow-lifted); } .sp-settings-card__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; background: #f1f5f3; color: var(--sp-brand); } .sp-settings-card__body { display: grid; gap: .18rem; min-width: 0; } .sp-settings-card__body strong { display: flex; align-items: center; gap: .45rem; font-size: .95rem; } .sp-settings-card > .sp-icon { margin-left: auto; opacity: .45; flex: none; } /* ---- Shop status card -------------------------------------------------- */ .sp-shopstatus { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } .sp-shopstatus__url { display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; background: #f4f6f5; border-radius: 999px; padding: .3rem .8rem; word-break: break-all; } .sp-checklist { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .4rem; font-size: .9rem; } .sp-checklist li { display: flex; align-items: center; gap: .55rem; } .sp-checklist li .sp-icon { width: 16px; height: 16px; flex: none; opacity: .45; } .sp-checklist li.is-done { color: var(--sp-muted); } .sp-checklist li.is-done .sp-icon { color: var(--sp-ok); opacity: 1; } /* Payout reconciliation ------------------------------------------------ */ .sp-stats--recon { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .sp-stat--good strong { color: var(--sp-ok, #1c7a4d); } .sp-stat--warn strong { color: var(--sp-warn, #a8560c); } .sp-recon__list { display: grid; gap: .35rem; margin: .6rem 0 0; } .sp-recon__list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .1rem; border-bottom: 1px dashed var(--sp-line, rgba(0,0,0,.08)); } .sp-recon__list dt, .sp-recon__list dd { margin: 0; } .sp-recon__list dd { font-variant-numeric: tabular-nums; } .sp-recon__list .is-sub { font-weight: 600; } .sp-recon__list .is-total { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--sp-line, rgba(0,0,0,.12)); } .sp-invcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1rem; margin-top: .9rem; } .sp-invcard { border: 1px solid var(--sp-line, rgba(0,0,0,.1)); border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; background: var(--sp-surface, #fff); } .sp-invcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; } .sp-invcard__head span.sp-muted { display: block; font-size: .85em; } .sp-invcard__figures { display: grid; gap: .3rem; margin: 0; } .sp-invcard__figures > div { display: flex; justify-content: space-between; gap: .8rem; } .sp-invcard__figures dt, .sp-invcard__figures dd { margin: 0; } .sp-invcard__figures dd { font-variant-numeric: tabular-nums; } .sp-invcard__lines { margin: 0; padding-left: 1.1rem; font-size: .88em; opacity: .8; } .sp-invcard__foot { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; } /* ---------------------------------------------------------------- */ /* Widgets & Embeds (/partner/widgets/) */ /* ---------------------------------------------------------------- */ .seraj-pembeds__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:28px} .seraj-pembeds__card{display:block;text-decoration:none;color:inherit;padding:16px} .seraj-pembeds__card strong{display:block;margin-bottom:6px} .seraj-pembeds__card span{display:block;font-size:13px;opacity:.75;line-height:1.45} .seraj-pembeds__card em{display:block;margin-top:10px;font-style:normal;font-weight:600;font-size:13px;color:var(--seraj-primary,#0f766e)} .seraj-pembeds__builder{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr);gap:20px;align-items:start} @media (max-width:900px){.seraj-pembeds__builder{grid-template-columns:1fr}} .seraj-pembeds__form .seraj-field{display:block;margin-bottom:14px} .seraj-pembeds__form .seraj-field>span{display:block;font-size:13px;font-weight:600;margin-bottom:4px} .seraj-pembeds__form input[type=text],.seraj-pembeds__form input[type=number],.seraj-pembeds__form select,.seraj-pembeds__form textarea{width:100%;max-width:420px} .seraj-pembeds__preview{width:100%;min-height:380px;border:1px solid rgba(0,0,0,.1);border-radius:12px;background:#f6f7f9} .seraj-pembeds__code{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:#f6f7f9;border-radius:8px;padding:10px;margin-bottom:10px} .seraj-pembeds__list{display:grid;gap:10px} .seraj-pembeds__row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 16px} .seraj-pembeds__stats{display:flex;gap:18px} .seraj-pembeds__stats span{display:flex;flex-direction:column;font-size:12px;opacity:.75} .seraj-pembeds__stats strong{font-size:17px;opacity:1} .seraj-pembeds__actions{display:flex;gap:8px;align-items:center} /* ----------------------------------------------- support desk ticket cards */ .sp-ticketbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; } .sp-ticketbar .sp-pill { margin-left: 0; } .sp-tickets { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .sp-ticket { position: relative; display: flex; flex-direction: column; gap: .6rem; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); padding: 1rem 1.1rem; min-width: 0; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .sp-ticket:hover { transform: translateY(-2px); border-color: var(--sp-brand); box-shadow: 0 12px 28px rgba(16,16,16,.10); } .sp-ticket:focus-within { border-color: var(--sp-brand); box-shadow: 0 0 0 3px rgba(0,0,0,.08); } .sp-ticket.is-awaiting { border-left: 4px solid var(--sp-accent, #2563eb); } .sp-ticket__head { display: flex; align-items: center; gap: .6rem; } .sp-ticket__avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--sp-soft, #f1f1ef); color: var(--sp-ink); font-weight: 700; font-size: .9rem; } .sp-ticket__who { display: grid; min-width: 0; } .sp-ticket__who strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-ticket__who em { font-style: normal; } .sp-ticket__head .sp-pill { margin-left: auto; } .sp-ticket__title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; } .sp-ticket__link { color: inherit; text-decoration: none; } .sp-ticket__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .sp-ticket__link:focus-visible { outline: none; } .sp-ticket__snippet { margin: 0; font-size: .87rem; color: var(--sp-muted); line-height: 1.5; } .sp-ticket__foot { margin-top: auto; padding-top: .55rem; border-top: 1px solid var(--sp-line); display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; } .sp-ticket__flag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--sp-warn-bg, #fff5e0); color: var(--sp-warn, #8a5a00); border-radius: 999px; padding: .1rem .5rem; } .sp-ticket__cta { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--sp-brand); } @media (max-width: 600px) { .sp-tickets { grid-template-columns: 1fr; } } /* ── Support desk: filter bar, priority pills, live board ─────────────── */ .sp-filterbar { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(130px, 1fr)); gap: 12px; align-items: end; margin-top: 14px; } .sp-filterbar > label { margin: 0; } .sp-filterbar__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } @media (max-width: 860px) { .sp-filterbar { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .sp-filterbar { grid-template-columns: 1fr; } } .sp-prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 9px; border-radius: 999px; border: 1px solid currentColor; background: transparent; } .sp-prio::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .sp-prio--urgent { color: #b42318; background: rgba(180, 35, 24, .08); } .sp-prio--high { color: #b54708; background: rgba(181, 71, 8, .08); } .sp-prio--normal { color: #475467; background: rgba(71, 84, 103, .08); } .sp-prio--low { color: #667085; background: rgba(102, 112, 133, .06); } .sp-ticket--p-urgent { border-left: 3px solid #b42318; } .sp-ticket--p-high { border-left: 3px solid #b54708; } [data-support-board] { transition: opacity .18s ease; } [data-support-board].is-loading { opacity: .45; pointer-events: none; } /* ------------------------------------------------------------------ Manager → Partner modules board ------------------------------------------------------------------ */ .sm-modstats { margin: .9rem 0 .2rem; } .sm-modfilter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; } .sm-modfilter__q { flex: 1 1 240px; margin: 0; } .sm-modfilter__q input { width: 100%; } .sm-partnercards .sm-pcard { gap: .75rem; } .sm-pcard.is-waiting { border-color: var(--sp-warn, #a8720f); } .sm-pcard__head { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; } .sm-pcard__avatar img, .sm-modhead__avatar img { border-radius: 50%; display: block; } .sm-pcard__id { display: flex; flex-direction: column; min-width: 0; } .sm-pcard__id strong { overflow-wrap: anywhere; } .sm-pcard__mods { display: flex; flex-wrap: wrap; gap: .35rem; } .sm-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .55rem; border-top: 1px solid var(--sp-line, #e2e8e5); } .sm-state { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: var(--s-radius-pill, 999px); border: 1px solid transparent; font-size: .74rem; font-weight: 600; line-height: 1.5; white-space: nowrap; } .sm-state::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; } .sm-state--on { background: var(--sp-ok-bg, #e7f5ec); color: var(--sp-ok, #12703a); } .sm-state--req { background: var(--sp-warn-bg, #fdf3e0); color: var(--sp-warn, #8a5c00); } .sm-state--off { background: var(--sp-bg, #f4f6f8); color: var(--sp-muted, #5f7069); } .sm-state--blocked { background: var(--sp-bg, #f4f6f8); color: var(--sp-muted, #5f7069); opacity: .8; } /* Detail view */ .sm-modhead { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; } .sm-modhead__id { flex: 1 1 220px; min-width: 0; } .sm-modhead__id h2 { margin: 0; } .sm-modhead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .sm-modgrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .sm-modgrid .sm-modcard { display: flex; flex-direction: column; gap: .6rem; margin: 0; } .sm-modcard__top { display: grid; grid-template-columns: auto 1fr auto; gap: .65rem; align-items: start; } .sm-modcard__top p { margin: .15rem 0 0; } .sm-modcard__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--sp-bg, #f4f6f8); color: var(--sp-brand, #1f7a4d); } .sm-modcard__icon svg { width: 18px; height: 18px; } .sm-modcard.is-on { border-color: color-mix(in srgb, var(--sp-ok, #1f7a4d) 40%, transparent); } .sm-modcard.is-req { border-color: var(--sp-warn, #a8720f); } .sm-modcard__why { margin: 0; } .sm-modcard__form { display: flex; flex-direction: column; gap: .5rem; margin-top: auto; } .sm-modcard__form .sp-field { margin: 0; } /* ------------------------------------------------------------------ Manager → Reservations board (cards) ------------------------------------------------------------------ */ .sm-bookcards .sm-bcard { display: flex; flex-direction: column; gap: .6rem; margin: 0; } .sm-bcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; } .sm-bcard__stay { margin: 0; } .sm-bcard__dates { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; padding: .6rem .7rem; border: 1px solid var(--sp-line, #e2e8e5); border-radius: var(--s-radius-md, 12px); background: var(--sp-bg, #f4f6f8); } .sm-bcard__dates > div { display: flex; flex-direction: column; min-width: 0; } .sm-bcard__dates strong { font-size: .92rem; } .sm-bcard__arrow { color: var(--sp-muted, #5f7069); } .sm-bcard__tags { display: flex; flex-wrap: wrap; gap: .35rem; } .sm-bcard__owner { margin: 0; } .sm-chip { display: inline-flex; align-items: center; padding: .16rem .55rem; border-radius: var(--s-radius-pill, 999px); background: var(--sp-bg, #f4f6f8); color: var(--sp-muted, #5f7069); font-size: .74rem; font-weight: 600; line-height: 1.5; white-space: nowrap; } .sm-chip--ok { background: var(--sp-ok-bg, #e7f5ec); color: var(--sp-ok, #12703a); } .sm-chip--warn { background: var(--sp-warn-bg, #fdf3e0); color: var(--sp-warn, #8a5c00); } .sm-back { margin: 0 0 .8rem; } .sb-detailhead__id h2 { margin: .35rem 0 .2rem; } .sb-detailhead__id p { margin: 0; } /* Manager — Shops & payouts: search bar and sponsored picker ---------- */ .sm-shopsearch { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; } .sm-shopsearch--inline { margin: .2rem 0 .9rem; } .sm-shopsearch input[type="search"] { flex: 1 1 280px; min-width: 0; padding: .6rem .85rem; border: 1px solid var(--sp-line); border-radius: var(--s-radius-sm, 10px); font: inherit; background: #fff; color: var(--sp-ink); } .sm-shopsearch input[type="search"]:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 1px; } .sm-sponsored__table tr[hidden] { display: none; } .sm-pin__grid { display: grid; gap: 1rem; margin: .8rem 0 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; } .sm-pin__grid .sp-field { margin: 0; } .sm-pin select[size] { min-height: 9.5rem; } .sm-pin select:disabled, .sm-pin input:disabled { opacity: .55; }