/* OPSFlow client workspace and sign-in */
:is(.client-portal, .portal-login) {
    --bg: #f2f6fc;
    --surface: #fff;
    --surface-2: #f5f8fe;
    --line: #dce6f3;
    --line-soft: #e9eff8;
    --text: #102748;
    --muted: #516683;
    --muted-2: #586e89;
    --brand: #0758c9;
    --brand-2: #007fbe;
    --brand-soft: #e4efff;
    --brand-deep: #034694;
    --portal-navy: #092e65;
    --portal-cyan: #15c5e9;
    --portal-heading: Outfit, "Plus Jakarta Sans", system-ui, sans-serif;
    --radius: 12px;
    color: var(--text);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

:is(.client-portal, .portal-login) *,
:is(.client-portal, .portal-login) *::before,
:is(.client-portal, .portal-login) *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
}

:is(.client-portal, .portal-login) [hidden] { display: none !important; }
:is(.client-portal, .portal-login) :focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; }
:is(.client-portal, .portal-login) :is(button, .button, .icon-action, .header-icon-button) { border: 0 !important; }
.client-portal :is(button, .button):is(:hover, :active) { transform: none !important; }
.client-portal :is(button, .button):disabled { cursor: not-allowed; }
.client-portal { --sidebar-w: 236px; --header-h: 70px; background: var(--bg); font-size: 14px; }
.client-portal .portal-skip {
    position: fixed; z-index: 110; left: 12px; top: 12px; padding: 12px 16px;
    border-radius: 8px; background: var(--portal-navy); color: white;
}
.client-portal .portal-skip:not(:focus) { clip-path: inset(50%); }
.client-portal .portal-nav-backdrop { display: none; }
.client-portal .app-sidebar {
    padding: 0 14px 16px;
    background: #fff;
    color: var(--text);
    border: 0;
}
.client-portal .app-sidebar__brand {
    height: var(--header-h);
    margin: 0 0 22px;
    padding: 0 9px;
    border: 0;
    flex: none;
}
.client-portal .app-sidebar__brand img { display: block; width: 170px; max-width: 100%; height: auto; }
.client-portal .sidebar-nav { gap: 5px; }
.client-portal .sidebar-nav__caption { color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 0 10px 8px; }
.client-portal .sidebar-link { color: var(--muted); min-height: 45px; gap: 12px; border-radius: 8px; font-weight: 650; }
.client-portal .sidebar-link .material-symbols-outlined { color: inherit; font-size: 20px; }
.client-portal .sidebar-link:hover { background: var(--surface-2); color: var(--brand-deep); }
.client-portal .sidebar-link--active,
.client-portal .sidebar-link--active:hover { background: var(--brand-soft); color: var(--brand-deep); font-weight: 800; }
.client-portal .sidebar-card { background: var(--surface-2); border: 0; border-radius: 10px; padding: 10px; }
.client-portal .sidebar-card__identity,
.client-portal .sidebar-card__copy { min-width: 0; }
.client-portal .sidebar-card__copy strong,
.client-portal .user-chip strong { color: var(--text); }
.client-portal .sidebar-card__copy span,
.client-portal .user-chip span { color: var(--muted); }
.client-portal .sidebar-logout { background: transparent; color: var(--muted); }
.client-portal .sidebar-logout:hover { background: var(--brand-soft); color: var(--brand-deep); }
.client-portal .user-chip__avatar { flex: none; background: var(--brand-soft); color: var(--brand-deep); font-weight: 800; }
.client-portal .user-chip__avatar .material-symbols-outlined { color: var(--brand-deep); font-size: 19px; }

.client-portal .app-frame { display: flex; flex-direction: column; }
.client-portal .app-header {
    padding-inline: clamp(18px, 3vw, 40px);
    gap: 12px;
    background: #fff;
    border-bottom: 1px solid var(--line-soft);
    backdrop-filter: none;
}
.client-portal .app-header__leading { min-width: 0; }
.client-portal .portal-breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.client-portal .portal-breadcrumb .material-symbols-outlined { font-size: 16px; }
.client-portal .portal-breadcrumb strong { color: var(--text); }
.client-portal :is(.header-icon-button, .mobile-nav-toggle) { color: var(--brand-deep); background: var(--surface-2); }
.client-portal :is(.header-icon-button, .mobile-nav-toggle):hover { background: var(--brand-soft); }
.client-portal .user-chip--compact { border: 0; background: transparent; padding: 0 0 0 6px; }
body.client-portal .app-content { flex: 1; padding: 28px clamp(18px, 3vw, 40px) 34px; max-width: 1570px; }
.client-portal .app-footer { display: flex; justify-content: space-between; gap: 12px; padding: 0 clamp(18px, 3vw, 40px) 22px; }
body.client-portal :is(.dashboard-layout, .inbox-layout) { gap: 22px; }

.client-portal :is(h1, h2, h3) { font-family: var(--portal-heading); }
.client-portal :is(.section-kicker, .page-toolbar__eyebrow) { color: var(--brand-deep); letter-spacing: .08em; }
.client-portal :is(.page-heading-card, .page-toolbar) {
    border: 0;
    border-radius: 12px;
    background: #fff;
    padding: clamp(18px, 2.6vw, 28px);
}
.client-portal :is(.page-heading-card, .page-toolbar) h1 { font-size: clamp(26px, 3vw, 36px); line-height: 1.13; margin: 4px 0 8px; }
.client-portal :is(.page-heading-card, .page-toolbar) p { color: var(--muted); font-size: 13px; line-height: 1.65; }
.client-portal :is(.chart-card, .status-card, .settings-section-card, .table-panel, .empty-state-card, .request-service-card) {
    border: 0;
    border-radius: 12px;
    background: #fff;
    padding: clamp(17px, 2vw, 24px);
}
.client-portal :is(.template-list-row, .template-builder__section, .entitlement-grid article, .connector-endpoint-grid article, .plan-chip) {
    border: 0;
    border-radius: 9px;
    background: var(--surface-2);
}
.client-portal .template-list-row { background: #fff; }
.client-portal .template-list-row:hover { background: #fbfdff; }
.client-portal :is(.settings-tab, .template-list-row .icon-action) { border-radius: 8px; }
.client-portal .settings-tab { border: 0; color: var(--muted); }
.client-portal .settings-tab.is-active { background: var(--brand-soft); color: var(--brand-deep); }
.client-portal .plan-chip strong { color: var(--brand-deep); }
.client-portal .text-link { color: var(--brand-deep); }
.client-portal :is(.button--ghost, .button--secondary) { background: var(--brand-soft); color: var(--brand-deep); }
.client-portal :is(.button--ghost, .button--secondary):hover { background: #d6e8ff; }
.client-portal .button--primary { background: var(--brand); color: white; }
.client-portal .button--primary:hover { background: var(--brand-deep); }
.client-portal .template-button-remove:hover { background: #ffedf0 !important; }

.core-portal .app-sidebar--platform .sidebar-nav { flex: 1; overflow-y: auto; }
.core-portal .sidebar-link--active::before { display: none; }
.core-portal .portal-breadcrumb a { color: inherit; }
.core-portal .app-content > section { margin-bottom: 18px; }
.core-portal :is(.banner-card, .metric-tile, .settings-tab-panel, .settings-summary-card) {
    border: 0;
    border-radius: var(--radius);
}
.core-portal .banner-card {
    padding: clamp(20px, 3vw, 34px);
    background: var(--portal-navy);
    color: #fff;
}
.core-portal .banner-card h1 { color: inherit; }
.core-portal .banner-card :is(p, .section-kicker) { color: #d5e5fa; }
.core-portal .banner-card .button--primary { background: var(--portal-cyan); color: var(--portal-navy); }
.core-portal .banner-card .button--primary:hover { background: #75e3fa; }
.core-portal .banner-card :focus-visible { outline-color: #8eeafa; }
.core-portal .metric-tile { background: var(--surface); }
.core-portal .metric-tile__icon { background: var(--brand-soft); color: var(--brand-deep); }
.core-portal .core-reminder {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    background: var(--brand-soft);
    color: var(--portal-navy);
    border-radius: var(--radius);
}
.core-reminder > div:first-of-type { flex: 1 1 230px; min-width: 0; }
.core-reminder h2 { margin: 0 0 4px; font-size: 16px; }
.core-reminder p { margin: 0; line-height: 1.5; }
.core-reminder code { overflow-wrap: anywhere; }
.core-reminder__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.core-portal .core-reminder .button--ghost { background: var(--surface); }
.core-reminder-status { color: var(--brand-deep); margin: 0 0 12px; }
.core-reminder-status:empty { display: none; }

.client-portal .client-hero {
    grid-template-columns: minmax(0, 1fr) minmax(215px, 29%);
    padding: clamp(22px, 3vw, 36px);
    gap: clamp(18px, 4vw, 48px);
    border: 0;
    border-radius: 14px;
    background: var(--portal-navy);
    color: white;
}
.client-portal .client-hero h1 { color: white; margin: 8px 0 10px; font-size: clamp(34px, 4vw, 53px); line-height: 1.04; overflow-wrap: anywhere; }
.client-portal .client-hero p { color: #d5e5fa; font-size: 14px; line-height: 1.65; max-width: 530px; }
.client-portal .client-hero__eyebrow { color: #a8eafa; font-size: 11px; }
.client-portal .client-hero .button-row { margin-top: 22px; }
.client-portal .client-hero .button { min-height: 43px; border-radius: 8px; }
.client-portal .client-hero .button--primary { background: var(--portal-cyan); color: #082c59; }
.client-portal .client-hero .button--primary:hover { background: #75e3fa; }
.client-portal .client-hero .button--ghost { background: #174583; color: white; }
.client-portal .client-hero .button--ghost:hover { background: #205493; }
.client-portal .client-hero :focus-visible { outline-color: #8eeafa; }
.client-portal .client-hero__account { background: #174583; border: 0; color: white; border-radius: 10px; padding: 18px; gap: 6px; }
.client-portal .client-hero__account .section-kicker { color: #b7d9fa; }
.client-portal .client-hero__account > strong { font-size: 19px; overflow-wrap: anywhere; }
.client-portal .portal-service-icon { color: #82e6fa; font-size: 23px; margin-bottom: 4px; }
.client-portal .client-hero__number { background: transparent; border: 0; color: #edf6ff; padding: 2px 0 4px; font-size: 13px; overflow-wrap: anywhere; }
.client-portal .client-hero__number .material-symbols-outlined,
.client-portal .client-hero__account .text-link { color: #a5ebfa; }
.client-portal .client-hero__account .text-link { width: fit-content; }
.client-portal .portal-overview__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 11px; }
.client-portal .portal-overview__heading h2 { margin: 0; font-size: 21px; }
.client-portal .portal-overview__heading span { color: var(--muted); font-size: 12px; }
.client-portal .client-metric-grid { gap: 12px; }
.client-portal .client-metric { border: 0; border-radius: 10px; padding: 16px; gap: 11px; }
.client-portal .client-metric > .material-symbols-outlined { flex: none; background: var(--brand-soft); color: var(--brand-deep); }
.client-portal .client-metric:nth-child(even) > .material-symbols-outlined { background: #dbf5fa; color: #005d7e; }
.client-portal .client-metric small { color: var(--muted); line-height: 1.35; }
.client-portal .client-metric strong { color: var(--text); font-family: var(--portal-heading); font-size: 26px; font-variant-numeric: tabular-nums; }
.client-portal .dashboard-columns { gap: 14px; }
.client-portal .chart-bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: end;
    gap: 5px;
    height: auto;
    margin-top: 18px;
}
.client-portal .chart-bars__item { display: grid; justify-items: center; gap: 3px; min-width: 0; }
.client-portal .chart-bars__columns {
    justify-content: center;
    width: 100%;
    height: clamp(88px, 14vw, 185px);
    border-bottom: 1px solid var(--line-soft);
}
.client-portal .chart-bar { display: block; height: var(--bar-size); width: min(24%, 16px); }
.client-portal .chart-bars__item strong { font-size: 12px; }
.client-portal .chart-bars__item small { color: var(--muted); font-size: 10px; white-space: nowrap; }
.client-portal .chart-legend span { display: inline-flex; align-items: center; gap: 4px; }
.client-portal .chart-bar--inbound,
.client-portal .legend-dot--inbound { background: #31bce1; }
.client-portal .chart-bar--outbound,
.client-portal .legend-dot--outbound { background: var(--brand); }

.client-portal .inbox-grid--whatsapp .conversation-panel--inbox { border: 0; border-radius: 12px; }
.client-portal .conversation-list-head { background: var(--surface-2); }
.client-portal :is(.conversation-avatar, .whatsapp-drawer__avatar) { background: var(--brand-soft); color: var(--brand-deep); }
.client-portal .conversation-unread-badge { background: var(--brand); color: white; }
.client-portal .inbox-grid--whatsapp .conversation-item { border-color: var(--line-soft); }
.client-portal .inbox-grid--whatsapp .conversation-item:hover { background: var(--surface-2); }
.client-portal .inbox-grid--whatsapp .conversation-item.is-active,
.client-portal .inbox-grid--whatsapp .conversation-item--active { background: var(--brand-soft); }
.client-portal .conversation-item__row strong { color: var(--text); }
.client-portal :is(.conversation-item__row time, .conversation-item__submeta) { color: var(--muted); }
.client-portal .whatsapp-drawer__header { background: #fff; }
.client-portal .inbox-drawer--embedded .message-stream { background: #eaf2fc; }
.client-portal .inbox-drawer--embedded .message-bubble { border: 0; }
.client-portal .inbox-drawer--embedded .message-bubble--outbound { background: #d8edff; }
.client-portal .message-bubble__body { color: var(--text); }
.client-portal .template-phone-preview__chat { background: #eef5fd; }
.client-portal .template-preview-sheet__card { background: #deefff; border: 0; }
.client-portal .request-service-card { background: #e5effd; }
.client-portal .usage-meter > span { background: var(--brand); }

body.portal-login,
body.portal-login .auth-layout { background: #fff !important; }
.portal-access { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .93fr); min-height: 100vh; min-height: 100dvh; }
.portal-access__entry { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 32px; padding: 46px clamp(24px, 6vw, 92px); }
.portal-access__form { width: min(100%, 395px); }
.portal-access__logo { display: block; width: min(206px, 100%); height: auto; margin-bottom: 32px; }
.portal-access__kicker,
.portal-access__intro-label { color: var(--brand-deep); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.portal-access h1 { font: 650 clamp(34px, 3.6vw, 48px)/1.04 var(--portal-heading); letter-spacing: -.025em; margin: 8px 0 10px; color: var(--text); }
.portal-access__form > p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.portal-access__form form { display: grid; gap: 9px; margin-top: 28px; }
.portal-access__form label { color: var(--text); font-size: 13px; font-weight: 750; }
.portal-access__form input:not([type="hidden"]) {
    width: 100%;
    height: 49px;
    border: 0;
    border-radius: 8px;
    background: #eef4fd;
    color: var(--text);
    padding: 0 14px;
    font-size: 16px;
}
.portal-access__form input[name="email"] { margin-bottom: 10px; }
.portal-access__form input::placeholder { color: var(--muted); }
.portal-access__password { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: 8px; background: #eef4fd; }
.portal-access__password button { display: grid; place-items: center; margin-right: 4px; width: 41px; height: 41px; border-radius: 8px; background: transparent; color: var(--brand-deep); }
.portal-access__password button:hover { background: #e0edff; }
.portal-access__submit {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 49px; margin-top: 10px; padding: 10px 16px; border-radius: 8px;
    color: white; background: var(--brand); font-weight: 800; font-size: 14px;
}
.portal-access__submit:hover { background: var(--brand-deep); }
.portal-access__register { margin: 21px 0 0; }
.portal-access__register a,
.portal-access__back { color: var(--brand-deep); font-weight: 750; }
.portal-access__register a { text-decoration: underline; text-underline-offset: 3px; }
.portal-access__back { display: inline-flex; align-items: center; gap: 8px; width: min(100%, 395px); font-size: 12px; }
.portal-access__back .material-symbols-outlined { font-size: 17px; }
.portal-access__error { background: #ffedf0; color: #912535; border-radius: 8px; padding: 12px; margin-top: 16px; font-size: 13px; }

.portal-access__intro {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-items: center;
    background: var(--portal-navy);
    color: white;
    padding: 42px clamp(26px, 6vw, 90px);
}
.portal-access__intro::before,
.portal-access__intro::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
.portal-access__intro::before { width: 400px; aspect-ratio: 1; background: #113c79; inset: auto -160px -185px auto; }
.portal-access__intro::after { width: 185px; aspect-ratio: 1; background: #124785; inset: -105px auto auto -50px; }
.portal-access__intro-content { max-width: 540px; margin-inline: auto; }
.portal-access__symbol { display: block; padding: 7px; border-radius: 14px; background: #fff; margin-bottom: 27px; }
.portal-access__intro .portal-access__intro-label { color: #a3ecfa; }
.portal-access__intro h2 { font: 650 clamp(36px, 4.2vw, 66px)/1.02 var(--portal-heading); letter-spacing: -.025em; margin: 10px 0 15px; color: #fff; }
.portal-access__intro p { color: #cfe2fa; font-size: 15px; line-height: 1.65; max-width: 350px; }
.portal-access__features { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 25px 0 0; gap: 8px; }
.portal-access__features li { display: flex; align-items: center; gap: 6px; background: #174583; border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.portal-access__features .material-symbols-outlined { font-size: 17px; color: #93e8fa; }

@media (max-width: 1100px) {
    .client-portal .client-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-portal .dashboard-columns { grid-template-columns: 1fr; }
}
@media (min-width: 901px) {
    .client-portal .app-layout { display: grid; }
    .client-portal .app-sidebar { transform: none; visibility: visible; }
    .client-portal .mobile-nav-toggle { display: none; }
}
@media (max-width: 900px) {
    .client-portal .app-layout { display: block; }
    .client-portal .app-sidebar { transform: none; visibility: hidden; z-index: 90; }
    .client-portal .app-sidebar.is-mobile-open { visibility: visible; }
    .client-portal .portal-nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; background: #0b2a52aa; z-index: 85; }
    .client-portal .mobile-nav-toggle { display: grid; flex: none; }
    .portal-access { grid-template-columns: 1fr; }
    .portal-access__entry { min-height: 100dvh; padding: 34px 24px; gap: 26px; }
    .portal-access__intro { display: none; }
}
@media (max-width: 650px) {
    .client-portal { --header-h: 62px; }
    body.client-portal .app-content { padding-top: 16px; }
    .client-portal .portal-breadcrumb > :not(strong) { display: none; }
    .client-portal .user-chip--compact > div:not(.user-chip__avatar) { display: none; }
    .client-portal .client-hero { grid-template-columns: 1fr; }
    .client-portal .client-hero .button-row { gap: 8px; }
    .client-portal .client-metric { padding: 12px; align-items: flex-start; gap: 8px; }
    .client-portal .client-metric > .material-symbols-outlined { width: 30px; height: 30px; font-size: 17px; }
    .client-portal .portal-overview__heading span { display: none; }
}