/*
 * Credo design system for both Filament panels (Credo Admin and Partner Portal).
 * Clean fintech look: Inter, slate neutrals, one green accent, compact but even spacing, tabular figures for money.
 * Works by adjusting Filament's own design tokens, so every page, form, table and card follows the same scale.
 * Loaded after Filament's stylesheet by the panels' HEAD_END render hook.
 */

:root {
    /* Spacing: one step is 3.5px instead of 4px, so every gap, padding and margin tightens evenly. */
    --spacing: 0.21875rem;

    /* Type scale (13px body text in tables and forms). */
    --text-xs: 0.75rem;
    --text-xs--line-height: 1.1rem;
    --text-sm: 0.8125rem;
    --text-sm--line-height: 1.25rem;
    --text-base: 0.875rem;
    --text-base--line-height: 1.35rem;
    --text-lg: 1rem;
    --text-lg--line-height: 1.5rem;
    --text-xl: 1.125rem;
    --text-xl--line-height: 1.6rem;
    --text-2xl: 1.375rem;
    --text-2xl--line-height: 1.8rem;
    --text-3xl: 1.625rem;
    --text-3xl--line-height: 2rem;

    /* Corners: soft but not bubbly. */
    --radius-md: 0.4375rem;
    --radius-lg: 0.5625rem;
    --radius-xl: 0.75rem;
}

.fi-body {
    font-feature-settings: 'cv11', 'ss01';
    letter-spacing: -0.003em;
}

/* Numbers line up in tables, stats and badges (amounts, balances, counts). */
.fi-ta-text-item,
.fi-wi-stats-overview-stat-value,
.fi-in-text-item,
.fi-badge {
    font-variant-numeric: tabular-nums;
}

/* Page header: smaller title, calmer subheading, less air above the content. */
.fi-page-header-main-ctn {
    row-gap: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 6);
}

.fi-header-heading {
    font-weight: 650;
    letter-spacing: -0.015em;
}

.fi-header-subheading {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    margin-top: calc(var(--spacing) * 1);
}

/* ---------------------------------------------------------------
 * Cards ("small boxes"): soft 16px corners, hairline border, a whisper of shadow.
 * --------------------------------------------------------------- */

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.credo-card {
    border-radius: 1rem;
    box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 0 0 1px rgb(15 23 42 / 0.05);
}

.fi-section-header {
    padding-block: calc(var(--spacing) * 4);
}

/* Card titles: bold and clear, with a quiet one-line description under them. */
.fi-section-header-heading {
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.fi-section-header-description {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

/* Settings: one card per page ("one bubble"), groups inside separated by thin lines. */
.credo-settings-card .fi-section-not-contained .fi-section-header-heading {
    font-size: var(--text-sm);
}

.credo-settings-card .fi-section-not-contained .fi-section-header {
    padding-block: 0 calc(var(--spacing) * 3);
}

/* Buttons: pill-shaped (except inside joined button groups). */
.fi-btn:not(.fi-btn-group > .fi-btn) {
    border-radius: 9999px;
    padding-inline: calc(var(--spacing) * 4);
}

/* Tables: a light grey header row, title-case labels, like a billing history list. */
.fi-ta-table > thead > tr {
    background: var(--gray-50);
}

.dark .fi-ta-table > thead > tr {
    background: rgb(255 255 255 / 0.03);
}

.fi-ta-header-cell {
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray-600);
}

.fi-ta-header-heading {
    font-size: 0.9375rem;
    font-weight: 650;
}

/* Stats: clear value, quiet label. */
.fi-wi-stats-overview-stat-value {
    font-size: var(--text-2xl);
    letter-spacing: -0.02em;
}

.fi-wi-stats-overview-stat-label {
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
}

/* Badges: compact pills. */
.fi-badge {
    padding-block: calc(var(--spacing) * 0.5);
    border-radius: 9999px;
    font-size: var(--text-xs);
    font-weight: 600;
}

/* ---------------------------------------------------------------
 * Credo cards built by hand (token balances): title + pill, big figure, callout, footer link.
 * --------------------------------------------------------------- */

.credo-card {
    display: flex;
    flex-direction: column;
    background: #fff;
}

.dark .credo-card {
    background: var(--gray-900);
}

.credo-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.125rem 1.25rem;
    flex: 1;
}

.credo-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.credo-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.credo-card-subtitle {
    margin: 0.125rem 0 0;
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.credo-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.5rem;
    border-radius: 9999px;
    background: var(--primary-50);
    color: var(--primary-700);
    font-size: 0.6875rem;
    font-weight: 600;
}

.credo-figure {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.credo-figure small {
    margin-left: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--gray-500);
}

.credo-meter-label {
    display: flex;
    justify-content: space-between;
    margin: 0 0 0.375rem;
    font-size: var(--text-xs);
    color: var(--gray-600);
}

.credo-meter {
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--gray-100);
    overflow: hidden;
}

.credo-meter > span {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: var(--primary-500);
}

.credo-meter.is-warning > span {
    background: var(--warning-500);
}

.credo-meter.is-danger > span {
    background: var(--danger-500);
}

/* Callout: a tinted box with an icon, a bold line, a short explanation and its own button. */
.credo-callout {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid;
    font-size: var(--text-xs);
}

.credo-callout.is-danger {
    background: var(--danger-50);
    border-color: var(--danger-200);
    color: var(--danger-800);
}

.credo-callout.is-warning {
    background: var(--warning-50);
    border-color: var(--warning-200);
    color: var(--warning-800);
}

.credo-callout-text {
    flex: 1;
}

.credo-callout-text strong {
    display: block;
    font-size: var(--text-sm);
    font-weight: 650;
    color: var(--gray-900);
}

.credo-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    border-top: 1px solid var(--gray-100);
}

.dark .credo-card-footer {
    border-color: rgb(255 255 255 / 0.06);
}

.credo-link {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--primary-700);
    text-decoration: none;
}

.credo-link:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------
 * Compact choices (George, 2026-10-19): radio options show just their name in a smaller font;
 * the explanation appears in a small pop-up on hover, or when the option is focused/tapped.
 * --------------------------------------------------------------- */

.fi-fo-radio:not(.fi-inline).fi-grid-direction-col > .fi-fo-radio-label {
    padding-top: calc(var(--spacing) * 2);
}

.fi-fo-radio:not(.fi-inline).fi-grid-direction-col {
    margin-top: calc(var(--spacing) * -2);
}

.fi-fo-radio > .fi-fo-radio-label {
    position: relative;
}

.fi-fo-radio > .fi-fo-radio-label > .fi-fo-radio-label-text {
    font-size: var(--text-xs);
    line-height: 1.5rem;
}

.fi-fo-radio > .fi-fo-radio-label .fi-fo-radio-label-description {
    position: absolute;
    left: 1.75rem;
    top: calc(100% + 0.25rem);
    z-index: 30;
    width: max-content;
    max-width: min(22rem, 80vw);
    padding: 0.5rem 0.65rem;
    border-radius: 0.5rem;
    background: var(--gray-900);
    color: #fff;
    font-size: 0.6875rem;
    line-height: 1.4;
    box-shadow: 0 8px 20px -8px rgb(15 23 42 / 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    pointer-events: none;
}

.fi-fo-radio > .fi-fo-radio-label:hover .fi-fo-radio-label-description,
.fi-fo-radio > .fi-fo-radio-label:focus-within .fi-fo-radio-label-description {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Options with an explanation get a dotted underline, so people know there is more on hover. */
.fi-fo-radio > .fi-fo-radio-label:has(.fi-fo-radio-label-description) {
    cursor: help;
}

.fi-fo-radio > .fi-fo-radio-label:has(.fi-fo-radio-label-description) > .fi-fo-radio-label-text {
    text-decoration: underline dotted var(--gray-400);
    text-underline-offset: 3px;
}

/* Field help texts: smaller and quieter. */
.fi-fo-field-content-col .fi-sc-text,
.fi-fo-field-content-col > .fi-sc {
    font-size: var(--text-xs);
}

/* Websites & domains: free address, status and DNS records */
.credo-domain {
    display: grid;
    gap: 0.625rem;
    font-size: var(--text-sm);
}

.credo-domain-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.credo-domain-row > span:last-child {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.credo-domain-label {
    min-width: 7rem;
    color: var(--gray-500);
    font-size: var(--text-xs);
    font-weight: 600;
}

.credo-domain-muted {
    color: var(--gray-500);
    font-size: var(--text-xs);
}

.credo-domain-steps {
    margin-top: 0.25rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.dark .credo-domain-steps {
    background: rgb(255 255 255 / 0.03);
    border-color: rgb(255 255 255 / 0.08);
}

.credo-domain-title {
    margin: 0 0 0.375rem;
    font-weight: 650;
}

.credo-domain-steps ol {
    margin: 0;
    padding-left: 1.125rem;
    list-style: decimal;
    color: var(--gray-600);
}

.credo-domain-steps li + li {
    margin-top: 0.25rem;
}

.credo-dns {
    width: 100%;
    margin: 0.75rem 0;
    border-collapse: collapse;
    font-size: var(--text-xs);
}

.credo-dns th {
    padding: 0.4rem 0.6rem;
    background: var(--gray-100);
    text-align: left;
    font-weight: 600;
    color: var(--gray-600);
}

.credo-dns td {
    padding: 0.5rem 0.6rem;
    border-top: 1px solid var(--gray-200);
}

.credo-dns code {
    font-family: ui-monospace, monospace;
    font-weight: 600;
}

/* Sidebar: section labels read as headings, items stay compact. */
.fi-sidebar-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-500);
}

/* ---------------------------------------------------------------
 * Dashboard "Needs your attention" list (Partner Portal).
 * --------------------------------------------------------------- */

.credo-alerts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.credo-alert {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--gray-100);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

.credo-alert:first-child {
    border-top: 0;
    padding-top: 0;
}

.credo-alert:last-child {
    padding-bottom: 0;
}

.credo-alert-dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
}

.credo-alert-dot.is-danger {
    background: var(--danger-500);
}

.credo-alert-dot.is-warning {
    background: var(--warning-500);
}

.credo-alert-message {
    flex: 1;
    color: var(--gray-700);
}

.credo-alert-action {
    flex: none;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--primary-700);
    text-decoration: none;
    white-space: nowrap;
}

.credo-alert-action:hover {
    text-decoration: underline;
}

.dark .credo-alert {
    border-color: rgb(255 255 255 / 0.06);
}

.dark .credo-alert-message {
    color: var(--gray-300);
}

.dark .credo-alert-action {
    color: var(--primary-400);
}

@media (max-width: 640px) {
    .credo-alert {
        flex-wrap: wrap;
    }

    .credo-alert-action {
        margin-left: 1.125rem;
    }
}

/* Agent app pairing QR (SMS Gateway Pool → gateway → Connect agent app) */
.credo-pairing { display: grid; gap: 1rem; justify-items: center; text-align: left; }
.credo-pairing-qr { width: min(15rem, 100%); padding: 0.5rem; border-radius: 0.75rem; background: #fff; box-shadow: 0 0 0 1px rgb(15 23 42 / 0.08); }
.credo-pairing-qr svg { display: block; width: 100%; height: auto; }
.credo-pairing-steps { margin: 0; padding-left: 1.25rem; list-style: decimal; font-size: 0.875rem; line-height: 1.5; justify-self: stretch; }
.credo-pairing-steps li + li { margin-top: 0.25rem; }
.credo-pairing-warning { margin: 0; padding: 0.625rem 0.75rem; border-radius: 0.625rem; font-size: 0.8125rem; line-height: 1.45; color: rgb(146 64 14); background: rgb(254 243 199); justify-self: stretch; }
.dark .credo-pairing-warning { color: rgb(253 230 138); background: rgb(120 53 15 / 0.35); }

/* Connect a phone window: Haso app (QR) and SMS Gateway app (address + key) */
.credo-connect { display: grid; gap: 1rem; }
.credo-connect-option { display: grid; gap: 0.6rem; align-content: start; justify-items: center; padding: 1rem; border-radius: 0.875rem; border: 1px solid rgb(15 23 42 / 0.08); }
.dark .credo-connect-option { border-color: rgb(255 255 255 / 0.1); }
.credo-connect-option > * { justify-self: stretch; }
.credo-connect-option > .credo-pairing-qr { justify-self: center; }
.credo-connect-title { margin: 0; font-size: 0.95rem; font-weight: 600; }
.credo-connect-badge { margin-left: 0.35rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; color: rgb(4 120 87); background: rgb(209 250 229); vertical-align: middle; }
.credo-connect-text { margin: 0; font-size: 0.85rem; line-height: 1.5; color: rgb(71 85 105); }
.dark .credo-connect-text { color: rgb(203 213 225); }
.credo-copy-field { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.5rem; align-items: center; }
.credo-copy-label { grid-column: 1 / -1; font-size: 0.75rem; font-weight: 600; color: rgb(100 116 139); }
.credo-copy-value { min-width: 0; padding: 0.45rem 0.6rem; border-radius: 0.5rem; font-size: 0.78rem; overflow-wrap: anywhere; background: rgb(241 245 249); }
.dark .credo-copy-value { background: rgb(255 255 255 / 0.06); }
.credo-copy-buttons { display: flex; gap: 0.35rem; }
.credo-copy-button { padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; border: 1px solid rgb(203 213 225); background: #fff; color: rgb(15 23 42); }
.credo-copy-button:hover { border-color: rgb(5 150 105); }
.dark .credo-copy-button { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.2); }
@media (min-width: 768px) { .credo-connect { grid-template-columns: 1fr 1fr; } .credo-pairing-warning { grid-column: 1 / -1; } }
.credo-download-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; align-items: center; padding: 0.6rem; border-radius: 0.75rem; background: rgb(236 253 245); }
.dark .credo-download-row { background: rgb(6 78 59 / 0.35); }
.credo-download-qr { padding: 0.25rem; border-radius: 0.5rem; background: #fff; }
.credo-download-qr svg { display: block; width: 100%; height: auto; }
.credo-link { color: rgb(4 120 87); text-decoration: underline; overflow-wrap: anywhere; }

/* "Get Haso Partner App" in the Partner Portal top bar */
.credo-app-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-inline-end: 0.75rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: rgb(4 120 87); background: rgb(236 253 245); text-decoration: none; white-space: nowrap; }
.credo-app-link:hover { background: rgb(209 250 229); }
.dark .credo-app-link { color: rgb(110 231 183); background: rgb(6 78 59 / 0.4); }
.credo-app-link-icon { width: 1rem; height: 1rem; }
@media (max-width: 639px) { .credo-app-link-text { display: none; } .credo-app-link { padding: 0.35rem; } }

/* Haso logo in the portals' top-left corner */
.credo-brand { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.credo-brand-mark { width: 1.75rem; height: 1.75rem; border-radius: 0.45rem; }
.credo-brand-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: rgb(15 23 42); }
.dark .credo-brand-name { color: #fff; }
.credo-brand-portal { font-size: 0.8rem; font-weight: 600; color: rgb(100 116 139); }
.dark .credo-brand-portal { color: rgb(148 163 184); }

/* Profile → Signed-in phones */
.credo-phones { display: grid; gap: 0.6rem; }
.credo-phone { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.75rem; border-radius: 0.75rem; border: 1px solid rgb(15 23 42 / 0.08); }
.dark .credo-phone { border-color: rgb(255 255 255 / 0.1); }
.credo-phone-name { margin: 0; font-size: 0.875rem; font-weight: 600; }
.credo-phone-meta { margin: 0; font-size: 0.78rem; color: rgb(100 116 139); }