/* Customer portal in the site's house style. Loaded by the portal panel only (PortalPanelProvider), never by /admin,
   after header.css (the site header, mobile menu panel and footer, shared with the site).
   Filament's own CSS lives in cascade layers, so these unlayered rules win where they overlap.
   1. Base: what the site's body and link styles give the header and footer there.
   2. Portal parts: the account menu, the tab bar and Filament in the site's light look. */

/* 1. Base */
/* Zero specificity (:where), like the site's own body, a and button rules, so header.css keeps the upper hand. */
:where(.header-portal,.site-footer){--navy:#082344;--blue:#087bfa;--muted:#52667e;--line:#dce4ee;color:var(--navy);font-family:'DM Sans',Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
:where(.header-portal,.site-footer) a{color:inherit;text-decoration:none}
:where(.header-portal) button{font:inherit;color:inherit;cursor:pointer}
:where(.header-portal,.site-footer,.portal-tabs) :is(a,button,summary):focus-visible{outline:3px solid #5aa7ff;outline-offset:5px}
.skip-link{color:#082344}
.site-footer .wrap{max-width:1260px;margin:auto;padding-left:40px;padding-right:40px}
@media(max-width:760px){
.site-footer .wrap{padding-left:24px;padding-right:24px}
}

/* 2. Portal */
/* The header spans the full width in white, like the site's white page behind it (border-image paints outside the box without scrolling). */
header.header-portal{border-image:linear-gradient(#fff 0 0) fill 0//0 100vmax}
.header-portal .nav-login[aria-current],.header-portal .nav-panel-login[aria-current]{color:#006be8}
/* Account menu next to Portal (desktop); the mobile panel repeats it as .nav-panel-account. */
.header-portal .nav-account{position:relative;flex:none}
.header-portal .nav-account summary{display:flex;align-items:center;gap:7px;max-width:180px;min-height:42px;padding:0 14px;border:1px solid #dce4ee;border-radius:100px;font-size:13px;font-weight:450;color:#536278;cursor:pointer;list-style:none;white-space:nowrap}
.header-portal .nav-account summary::-webkit-details-marker{display:none}
.header-portal .nav-account summary::after{content:'';flex:none;width:6px;height:6px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.header-portal .nav-account summary:hover,.header-portal .nav-account[open] summary{color:#006be8;border-color:#b9d6f7}
.header-portal .nav-account-name{overflow:hidden;text-overflow:ellipsis}
.header-portal .nav-account-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:190px;padding:8px;border:1px solid #dce4ee;border-radius:12px;background:#fff;box-shadow:0 20px 60px #052c561a}
.header-portal .nav-account-menu a,.header-portal .nav-account-menu button{display:block;width:100%;padding:10px 12px;border:0;border-radius:8px;background:none;text-align:left;font-size:14px;font-weight:450;color:#082344}
.header-portal .nav-account-menu a:hover,.header-portal .nav-account-menu button:hover{background:#f0f6fd;color:#006be8}
.header-portal .nav-account-menu form{margin:0}
.header-portal .nav-panel-account{display:none}
@media(max-width:1100px){
.header-portal .nav-account summary{min-height:38px;padding:0 12px;font-size:11px;max-width:150px}
}
@media(max-width:760px){
.header-portal .nav-account summary{font-size:12px}
}
@media(max-width:640px){
header.header-portal>.nav-account{display:none}
/* No Get started in the portal: the menu button takes its place at the right. */
.header-portal .menu-toggle{margin-left:auto}
header.header-portal nav .nav-panel-account{display:flex;flex-direction:column;align-items:stretch;margin-top:14px;padding-top:14px;border-top:1px solid #e2ebf4}
header.header-portal nav .nav-panel-account-name{font-size:13px;color:#52667e;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header.header-portal nav .nav-panel-account a,header.header-portal nav .nav-panel-account button{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0;border:0;background:none;font-size:16px;font-weight:450;color:#082344}
header.header-portal nav .nav-panel-account form{margin:0}
}

/* Page: white header band, light page, white footer band. */
.fi-body{background:#f7fafe;font-family:'DM Sans',Arial,sans-serif;color:#082344}
.site-footer{width:100%;align-self:stretch;margin-top:auto;background:#fff;border-top:1px solid #dce4ee}
.fi-main-ctn{min-height:calc(100dvh - 86px)}
.fi-simple-layout{min-height:calc(100dvh - 86px)}
@media(max-width:760px){
.fi-main-ctn,.fi-simple-layout{min-height:calc(100dvh - 74px)}
}

/* The portal menu as a tab bar under the header; on small screens it scrolls sideways and fades out at the edge to show there is more. */
.portal-tabs{background:#fff;border-top:1px solid #eef3f8;border-bottom:1px solid #dce4ee}
.portal-tabs-list{position:relative;display:flex;gap:30px;max-width:1440px;margin:auto;padding:0 32px;overflow-x:auto;scrollbar-width:none}
.portal-tabs-list::-webkit-scrollbar{display:none}
.portal-tabs a{flex:none;display:flex;align-items:center;min-height:52px;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:14px;font-weight:450;color:#536278;white-space:nowrap}
.portal-tabs a:hover{color:#006be8}
.portal-tabs a[aria-current]{color:#006be8;border-bottom-color:#087bfa;font-weight:500}
@media(max-width:1100px){
.portal-tabs-list{padding:0 24px}
}
@media(max-width:760px){
.portal-tabs-list{gap:24px;padding:0 48px 0 20px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
.portal-tabs a{min-height:48px}
}

/* Forms in a card in the site's style. */
.fi-simple-main{border:1px solid #dce4ee;border-radius:14px;box-shadow:0 20px 60px #052c560f}
.fi-simple-header .fi-logo{display:none}
.fi-simple-header-heading,.fi-header-heading{font-weight:500;letter-spacing:-.04em;color:#082344}
.fi-simple-header-heading{font-size:30px;line-height:1.2}
.fi-header-heading{font-size:clamp(28px,3vw,36px);line-height:1.15}
.portal-auth-note{margin:0;padding:12px 16px;border-radius:10px;background:#f0f6fd;color:#0a4c96;font-size:14px;font-weight:500;text-align:center}
.portal-link{color:#006be8;font-weight:500;text-decoration:underline;text-underline-offset:3px}
button.portal-link{padding:0;border:0;background:none;font:inherit;font-size:14px;cursor:pointer}

/* The sign-up wizard's steps: all three side by side in the card, the number above the label and a line between the
   numbers. Filament scrolls this bar sideways (too wide for the card) and shows only the current step on small screens. */
.fi-simple-main .fi-sc-wizard-header{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
.fi-simple-main .fi-sc-wizard-header .fi-sc-wizard-header-step,.fi-simple-main .fi-sc-wizard-header .fi-sc-wizard-header-step:not(.fi-active){display:flex;justify-content:center;min-width:0}
.fi-simple-main .fi-sc-wizard-header .fi-sc-wizard-header-step .fi-sc-wizard-header-step-separator{display:none}
.fi-simple-main .fi-sc-wizard-header .fi-sc-wizard-header-step .fi-sc-wizard-header-step-btn{flex-direction:column;justify-content:flex-start;row-gap:8px;width:100%;padding:12px 6px;text-align:center}
.fi-simple-main .fi-sc-wizard-header .fi-sc-wizard-header-step .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-icon-ctn{position:relative;z-index:1;width:36px;height:36px}
.fi-simple-main .fi-sc-wizard-header .fi-sc-wizard-header-step:not(.fi-completed) .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-icon-ctn{background:#fff}
.fi-simple-main .fi-sc-wizard-header .fi-sc-wizard-header-step .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-text{width:auto;max-width:none;justify-items:center}
.fi-simple-main .fi-sc-wizard-header .fi-sc-wizard-header-step .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-text .fi-sc-wizard-header-step-label{font-size:13px;line-height:1.35}
.fi-simple-main .fi-sc-wizard-header .fi-sc-wizard-header-step+.fi-sc-wizard-header-step::before{content:'';position:absolute;top:29px;left:calc(-50% + 18px);right:calc(50% + 18px);height:2px;background:#dce4ee}
.fi-simple-main .fi-sc-wizard-header .fi-sc-wizard-header-step+.fi-sc-wizard-header-step:is(.fi-active,.fi-completed)::before{background:#087bfa}

/* The review step of the sign-up wizard. */
.portal-review{display:grid;gap:20px;font-size:14px;color:#082344}
.portal-review-plan{padding:16px;border-radius:10px;background:#f0f6fd;color:#0a4c96}
.portal-review-plan p{margin:0}
.portal-review-plan .portal-review-plan-name{font-size:18px;font-weight:600;color:#082344}
.portal-review-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid #dce4ee}
.portal-review-heading h3{margin:0;font-size:15px;font-weight:600}
.portal-review dl{display:grid;gap:8px;margin:10px 0 0}
.portal-review dl div{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:12px}
.portal-review dt{color:#52667e}
.portal-review dd{margin:0;overflow-wrap:anywhere}
@media(max-width:640px){
.fi-simple-main-ctn{padding-inline:16px}
.fi-simple-main{margin-block:24px;padding-inline:20px;padding-block:32px}
}

/* Cards, tables and buttons with the site's corners. */
.fi-section,.fi-ta-ctn,.fi-wi-stats-overview-stat{border-radius:14px}
.fi-btn:not(.fi-btn-group .fi-btn){border-radius:100px;padding-inline:18px}
/* Filament gives white text on this blue too little contrast and falls back to a pale blue with dark text; the site uses white on #087bfa. */
.fi-btn.fi-color-primary[class*="fi-bg-color-"]{--bg:#087bfa;--hover-bg:#0567d5;--text:#fff;--hover-text:#fff}

/* The start checklist on the dashboard. */
.portal-checklist{padding:20px 24px;border:1px solid #dce4ee;border-radius:14px;background:#fff;color:#082344}
.portal-checklist-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.portal-checklist-head h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.portal-checklist-head p{margin:0;font-size:13px;color:#52667e}
.portal-checklist-list{margin:0;padding:0;list-style:none}
.portal-checklist-item{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 0;border-top:1px solid #eef3f8;font-size:15px}
.portal-checklist-item:first-child{border-top:0}
.portal-checklist-mark{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:2px solid #b9c7d8;border-radius:50%;color:#fff}
.portal-checklist-item.is-done .portal-checklist-mark{border-color:#16a34a;background:#16a34a}
.portal-checklist-item.is-done .portal-checklist-label{color:#52667e}
.portal-checklist-label{flex:1;min-width:0}
@media(max-width:640px){
.portal-checklist{padding:16px}
.portal-checklist-item{flex-wrap:wrap}
.portal-checklist-label{flex-basis:calc(100% - 40px)}
.portal-checklist-item .fi-btn{margin-left:34px}
}
.portal-checklist-state{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#connect-console{scroll-margin-top:16px}

/* Subscription page: the connect-your-console steps, numbered like the site, and the features list in the portal font. */
.portal-connect-steps{display:grid;gap:14px;margin:0;padding:0;list-style:none;counter-reset:step;font-size:14px;line-height:1.6;color:#52667e}
.portal-connect-steps li{position:relative;min-width:0;padding-left:36px;counter-increment:step}
.portal-connect-steps li::before{content:counter(step);position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#f0f6fd;color:#006be8;font-size:13px;font-weight:600}
.portal-connect-steps strong{font-weight:600;color:#082344}
.portal-connect-command{display:block;margin-top:8px;padding:10px 14px;border:1px solid #dce4ee;border-radius:10px;background:#f7fafe;color:#082344;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;overflow-wrap:anywhere;user-select:all}
.fi-in-key-value tbody{font-family:inherit}

/* Phones: form fields at 16px (iOS zooms in on anything smaller) and 44px tap targets for fields and buttons. */
@media(max-width:760px){
.fi-body :is(.fi-input,.fi-select-input,.fi-select-input-btn,.fi-textarea){font-size:16px}
}
@media(max-width:640px){
.fi-body :is(.fi-input,.fi-select-input,.fi-select-input-btn){min-height:44px}
.fi-body .fi-btn{min-height:44px}
.fi-body .fi-icon-btn{min-width:44px;min-height:44px}
.fi-body .fi-link.fi-ac-link-action{padding-block:12px;margin-block:-12px}
.fi-in-key-value :is(th,td){font-size:14px}
}