/*
 * Styles for our own panel pieces (not Filament's), loaded by all three panels through SharedLook.
 * Use the panel colour variables (--primary-*, --gray-*, --success-*, ...) only, never fixed colours,
 * so every page follows the one shared look. Filament only ships the Tailwind classes it uses itself,
 * hence plain CSS.
 */

/* Shared helpers */
.smsr-note { font-size: .875rem; opacity: .7; margin-top: .75rem; }
.smsr-subhead { margin-top: 1.25rem; font-weight: 600; }
.smsr-subnote { font-size: .875rem; opacity: .7; margin-bottom: .5rem; }
.smsr-steps { list-style: decimal; padding-left: 1.25rem; line-height: 1.8; }
.smsr-banner { background: var(--warning-600); color: #fff; padding: .5rem 1rem; text-align: center; font-size: .875rem; }
.smsr-banner form { display: inline; }
.smsr-banner button { margin-left: 1rem; text-decoration: underline; color: #fff; }

/* from conversation-thread.blade.php */
.smsr-thread { display: flex; flex-direction: column; gap: .75rem; }
.smsr-row { display: flex; }
.smsr-row.is-out { justify-content: flex-end; }
.smsr-bubble { max-width: 80%; border-radius: 1rem; padding: .5rem .9rem; font-size: .875rem; line-height: 1.4; }
.smsr-row.is-out .smsr-bubble { background: var(--primary-600); color: #fff; border-bottom-right-radius: .25rem; }
.smsr-row.is-in .smsr-bubble { background: var(--gray-100); color: var(--gray-900); border-bottom-left-radius: .25rem; }
.dark .smsr-row.is-in .smsr-bubble { background: var(--gray-800); color: var(--gray-100); }
.smsr-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.smsr-meta { margin-top: .25rem; font-size: .72rem; opacity: .75; }
.smsr-row.is-failed .smsr-bubble { background: var(--danger-600); }

/* from attribution-breakdown.blade.php */
.smsr-credit { width: 100%; border-collapse: collapse; font-size: .9rem; }
.smsr-credit td { padding: .55rem 0; border-top: 1px solid var(--gray-200); }
.dark .smsr-credit td { border-color: var(--gray-700); }
.smsr-credit td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 1.5rem; }
.smsr-credit .tag { font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; margin-left: .4rem; }
.smsr-credit .tag.confirmed { background: var(--success-100); color: var(--success-700); }
.smsr-credit .tag.influenced { background: var(--gray-100); color: var(--gray-600); }
.smsr-credit-notes { margin-top: .9rem; font-size: .82rem; opacity: .75; display: flex; flex-direction: column; gap: .25rem; }

/* from quote-a-store.blade.php */
.smsr-quote { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.smsr-quote div { border: 1px solid var(--gray-200); border-radius: .75rem; padding: .75rem 1rem; }
.dark .smsr-quote div { border-color: var(--gray-700); }
.smsr-quote b { display: block; font-size: 1.6rem; }
.smsr-quote span { font-size: .8rem; opacity: .7; }
.smsr-break { width: 100%; max-width: 32rem; margin-bottom: 1rem; font-size: .9rem; }
.smsr-break td { padding: .25rem 0; }
.smsr-break td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.smsr-break tr.total td { border-top: 1px solid var(--gray-300); font-weight: 600; padding-top: .5rem; }
.smsr-break .who { opacity: .6; font-size: .8rem; }
.smsr-warn { margin-top: .75rem; padding: .6rem .9rem; border-radius: .6rem; background: var(--warning-50); color: var(--warning-700); font-size: .875rem; }
@media (max-width: 640px) { .smsr-quote { grid-template-columns: 1fr; } }

/* from onboarding-checklist.blade.php */
.smsr-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.smsr-progress-head b { font-size: 1rem; }
.smsr-progress-head span { font-size: .85rem; opacity: .7; }
.smsr-bar { height: .6rem; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.dark .smsr-bar { background: var(--gray-700); }
.smsr-bar i { display: block; height: 100%; border-radius: 999px; background: var(--primary-500); transition: width .4s ease; }
.smsr-bar i.is-full { background: var(--success-600); }
.smsr-next { margin: 1rem 0 1.25rem; padding: .85rem 1rem; border-radius: .75rem; border: 1px solid var(--primary-300); background: var(--primary-50); }
.dark .smsr-next { background: var(--gray-900); border-color: var(--primary-700); }
.smsr-next small { display: block; font-size: .75rem; font-weight: 600; color: var(--primary-700); margin-bottom: .2rem; }
.dark .smsr-next small { color: var(--primary-400); }
.smsr-next b { display: block; font-size: .95rem; }
.smsr-next p { font-size: .85rem; margin-top: .2rem; opacity: .85; }
.smsr-ready { margin: 1rem 0 1.25rem; padding: .85rem 1rem; border-radius: .75rem; background: var(--success-50); color: var(--success-700); font-size: .9rem; font-weight: 600; }
.smsr-checklist { display: flex; flex-direction: column; gap: .6rem; }
.smsr-check { display: flex; gap: .7rem; align-items: flex-start; }
.smsr-check-mark { flex: none; width: 1.3rem; height: 1.3rem; border-radius: 999px; display: grid; place-items: center; font-size: .75rem; font-weight: 700; margin-top: .1rem; }
.smsr-check-mark.is-done { background: var(--success-600); color: #fff; }
.smsr-check-mark.is-todo { border: 2px solid var(--gray-300); color: var(--gray-500); }
.smsr-check-mark.is-next { border: 2px solid var(--primary-500); color: var(--primary-600); }
.smsr-check-mark.is-optional { border: 2px dashed var(--gray-300); }
.smsr-check-label { font-size: .9rem; font-weight: 600; }
.smsr-check.is-done .smsr-check-label { opacity: .6; font-weight: 500; }
.smsr-check-hint { font-size: .8rem; opacity: .7; }

/* Pricing page summary */
.smsr-quote--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .smsr-quote--four { grid-template-columns: repeat(2, 1fr); } }

/* Brand logo (all panels): the afanorth.com gradient mark plus the panel's name. */
.afa-logo { display: inline-flex; align-items: center; gap: .6rem; height: 100%; }
.afa-logo-mark { width: 1.35rem; height: 1.35rem; flex: none; border-radius: .45rem .45rem .45rem .15rem; background: linear-gradient(110deg, #1e7cf2 0%, #7a5cff 50%, #ff6b57 100%); }
.afa-logo-name { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: var(--gray-950); white-space: nowrap; }
.dark .afa-logo-name { color: #fff; }

/* Login, password reset and two-factor pages: soft brand glow behind a raised card. */
.fi-simple-layout {
    background:
        radial-gradient(38rem 38rem at 8% 0%, rgba(30, 124, 242, .22), transparent 70%),
        radial-gradient(34rem 34rem at 100% 18%, rgba(122, 92, 255, .2), transparent 70%),
        radial-gradient(30rem 30rem at 55% 105%, rgba(255, 107, 87, .16), transparent 70%),
        #f5f7fb;
}
.dark .fi-simple-layout {
    background:
        radial-gradient(38rem 38rem at 8% 0%, rgba(30, 124, 242, .22), transparent 70%),
        radial-gradient(34rem 34rem at 100% 18%, rgba(122, 92, 255, .22), transparent 70%),
        var(--gray-950);
}
.fi-simple-main { border-radius: 1.5rem !important; box-shadow: 0 30px 70px -35px rgba(20, 18, 58, .45), 0 0 0 1px rgba(20, 18, 58, .05) !important; }
.fi-simple-main .afa-logo-mark { width: 1.75rem; height: 1.75rem; border-radius: .55rem .55rem .55rem .2rem; }
.fi-simple-main .afa-logo-name { font-size: 1.45rem; }
.afa-signin-label { display: table; margin: 0 auto 1.25rem; padding: .3rem .8rem; border-radius: 999px; background: var(--primary-50); color: var(--primary-700); font-size: .8rem; font-weight: 600; }
.dark .afa-signin-label { background: rgba(255, 255, 255, .08); color: var(--primary-300); }
.fi-simple-main .fi-btn.fi-color-primary { background: linear-gradient(110deg, #1e7cf2 0%, #7a5cff 100%) !important; border: 0; box-shadow: 0 10px 24px -12px rgba(122, 92, 255, .7); transition: filter .2s ease, transform .2s ease; }
.fi-simple-main .fi-btn.fi-color-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* AFA North panels (super admin, client portal) use the compass mark; product panels keep the plain gradient. */
.afa-logo-mark.is-compass { background: url(/afa-mark.svg) center / contain no-repeat; border-radius: 0; }

/* Admin > Emails list */
.afa-email-list { display: grid; gap: .75rem; }
.afa-email-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: 1rem 1.25rem; border-radius: .9rem; background: #fff; box-shadow: 0 0 0 1px var(--gray-200); }
.dark .afa-email-row { background: var(--gray-900); box-shadow: 0 0 0 1px var(--gray-800); }
.afa-email-name { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-weight: 600; }
.afa-email-to { font-size: .85rem; opacity: .7; margin-top: .15rem; }
.afa-email-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.afa-email-previews { display: grid; gap: 1.5rem; }
.afa-email-previews h3 { font-weight: 600; margin-bottom: .5rem; }

/* Super admin running AFA North's own stores in the partner portal */
.afa-house-banner { background: linear-gradient(110deg, #1e7cf2, #7a5cff); }
.afa-house-banner a { margin-left: 1rem; color: #fff; text-decoration: underline; font-weight: 600; }

/* Client portal: more from AFA North */
.afa-more-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding: 2rem; border-radius: 1.25rem; background: linear-gradient(110deg, #1e7cf2, #7a5cff 60%, #ff6b57); color: #fff; overflow: hidden; }
.afa-more-hero h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: .35rem 0 .6rem; }
.afa-more-hero p { opacity: .92; max-width: 38em; }
.afa-more-hero ul { margin: .9rem 0 0; padding-left: 1.1rem; list-style: disc; opacity: .95; }
.afa-more-hero li { margin-top: .25rem; }
.afa-more-kicker { font-size: .8rem; font-weight: 700; opacity: .85; }
.afa-more-cta { display: grid; justify-items: start; gap: .8rem; }
.afa-more-cta a { color: #fff; text-decoration: underline; font-weight: 600; }
.afa-more-done { display: inline-block; padding: .4rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .2); font-weight: 600; font-size: .85rem; }
.afa-more-head h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin: .25rem 0 .4rem; }
.afa-more-head p { opacity: .75; }
.afa-more-head a { color: var(--primary-600); font-weight: 600; text-decoration: underline; }
.afa-more-head .afa-more-kicker { color: var(--primary-600); opacity: 1; }
.afa-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.afa-more-card { display: grid; gap: .5rem; align-content: start; justify-items: start; padding: 1.2rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 0 1px var(--gray-200); }
.dark .afa-more-card { background: var(--gray-900); box-shadow: 0 0 0 1px var(--gray-800); }
.afa-more-card h3 { font-weight: 700; }
.afa-more-card p { font-size: .9rem; opacity: .75; }
.afa-more-card .afa-more-done { background: var(--success-50); color: var(--success-700); }
@media (max-width: 1024px) { .afa-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .afa-more-hero { grid-template-columns: 1fr; } .afa-more-grid { grid-template-columns: 1fr; } }

/* Admin: show a shared site login */
.afa-login-show { display: grid; gap: .9rem; }
.afa-login-show dt { font-size: .8rem; font-weight: 600; opacity: .65; }
.afa-login-show dd { display: flex; align-items: center; gap: .6rem; margin-top: .2rem; word-break: break-all; }
.afa-login-show code { font-size: .95rem; padding: .25rem .5rem; border-radius: .4rem; background: var(--gray-100); }
.dark .afa-login-show code { background: var(--gray-800); }
.afa-login-show a { color: var(--primary-600); text-decoration: underline; }
.afa-login-show button { flex: none; font-size: .8rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; box-shadow: 0 0 0 1px var(--gray-300); }
.afa-login-show-note { font-size: .8rem; opacity: .6; }
.afa-login-log { width: 100%; font-size: .875rem; border-collapse: collapse; }
.afa-login-log th { text-align: left; font-weight: 600; opacity: .65; padding: 0 .75rem .4rem 0; }
.afa-login-log td { text-align: left; padding: .45rem .75rem .45rem 0; border-top: 1px solid var(--gray-200); }
.dark .afa-login-log td { border-top-color: var(--gray-800); }
.afa-nowrap { white-space: nowrap; }
.afa-login-log-empty { font-size: .875rem; opacity: .6; }

/* Sign-in: two-step code, centered */
.fi-simple-main .fi-fo-field:has(.fi-one-time-code-input-ctn) { justify-items: center; text-align: center; }
.fi-simple-main .fi-fo-field:has(.fi-one-time-code-input-ctn) .fi-fo-field-label-ctn,
.fi-simple-main .fi-fo-field:has(.fi-one-time-code-input-ctn) .fi-sc { justify-content: center; }
.fi-simple-main .fi-one-time-code-input-ctn { justify-content: center; }