/*
 * MADO AI USAGE PAGE SSOT — 2026-07-23
 * Markup: includes/portal/ai-usage-page.php
 * Scope: AI利用量ページ専用。共通見出し・AI管理ナビはcrawl-usage-page.css / mado-base.cssが担当する。
 * Do not restore the legacy token/cost cards, purpose breakdown, or customer-facing ledger diagnostics here.
 */

body.mado-portal-account-page .mado-portal-shell--action-ai-usage .mado-portal-shell__content-frame.is-standard,
body.mado-portal-standalone--ai-usage .mado-portal-shell__content-frame.is-standard {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(
        1140px
        + var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px))
        + var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px))
    );
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px));
    padding-left: var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px));
}

body.mado-portal-account-page .mado-portal-shell--action-ai-usage .mado-portal-container,
body.mado-portal-standalone--ai-usage .mado-portal-container {
    width: 100%;
    max-width: none;
    margin: 0;
}

.mado-ai-usage-page,
.mado-ai-usage-page *,
.mado-ai-usage-page *::before,
.mado-ai-usage-page *::after {
    box-sizing: border-box;
}

.mado-ai-usage-page {
    --mado-ai-usage-text: #0f172a;
    --mado-ai-usage-text-soft: #475569;
    --mado-ai-usage-muted: #64748b;
    --mado-ai-usage-border: #dbe5ef;
    --mado-ai-usage-border-strong: #cbd8e5;
    --mado-ai-usage-surface: #ffffff;
    --mado-ai-usage-surface-soft: #f8fcfd;
    --mado-ai-usage-primary: #0b6870;
    --mado-ai-usage-primary-hover: #075861;
    --mado-ai-usage-primary-2: #15a9ba;
    --mado-ai-usage-primary-soft: #e9f9fb;
    --mado-ai-usage-track: #e9f1f5;
    display: grid;
    gap: 18px;
    width: 100%;
    min-width: 0;
    margin: 0;
    color: var(--mado-ai-usage-text);
    font-family: var(--mado-portal-font-family, "Noto Sans JP", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: 14px;
    line-height: 1.7;
}

.mado-ai-usage-page h1,
.mado-ai-usage-page h2,
.mado-ai-usage-page p,
.mado-ai-usage-page fieldset {
    margin: 0;
}

.mado-ai-usage-page h1,
.mado-ai-usage-page h2 {
    color: var(--mado-ai-usage-text);
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 0;
}

.mado-ai-usage-page button,
.mado-ai-usage-page input,
.mado-ai-usage-page select {
    font: inherit;
}

.mado-ai-usage-page button:focus-visible,
.mado-ai-usage-page input:focus-visible,
.mado-ai-usage-page select:focus-visible {
    outline: 3px solid rgba(21, 169, 186, 0.26);
    outline-offset: 2px;
}

.mado-ai-usage-page .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mado-ai-usage-page__hero {
    margin-bottom: 18px;
}

.mado-ai-usage-page__hero > p {
    margin-top: 4px;
    color: var(--mado-ai-usage-text-soft);
}

.mado-ai-usage-page__eyebrow {
    color: var(--mado-ai-usage-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.mado-ai-usage-page__panel {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--mado-ai-usage-border);
    border-radius: 20px;
    background: var(--mado-ai-usage-surface);
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
}

.mado-ai-usage-page__usage-card {
    padding: clamp(22px, 4vw, 40px);
}

.mado-ai-usage-page__card-head,
.mado-ai-usage-page__settings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.mado-ai-usage-page__card-head > div,
.mado-ai-usage-page__settings-head > div {
    min-width: 0;
}

.mado-ai-usage-page__card-head h2,
.mado-ai-usage-page__settings-head h2 {
    margin-top: 4px;
    font-size: var(--mado-portal-section-heading-size, 18px);
    line-height: var(--mado-portal-heading-line-height, 1.5);
}

.mado-ai-usage-page__card-head p,
.mado-ai-usage-page__settings-head p {
    color: var(--mado-ai-usage-muted);
    font-size: 13px;
    line-height: 1.7;
}

.mado-ai-usage-page__card-head p {
    margin-top: 2px;
}

.mado-ai-usage-page__period {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    background: #f1f5f9;
    color: var(--mado-ai-usage-text-soft);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.mado-ai-usage-page__main-number {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 28px;
}

.mado-ai-usage-page__main-number > span {
    color: var(--mado-ai-usage-text-soft);
    font-size: 14px;
    font-weight: 800;
}

.mado-ai-usage-page__main-number > strong {
    color: var(--mado-ai-usage-primary);
    font-size: clamp(42px, 8vw, 70px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}

.mado-ai-usage-page__main-number > em {
    color: var(--mado-ai-usage-primary);
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
}

.mado-ai-usage-page__progress-wrap {
    margin-top: 22px;
}

.mado-ai-usage-page__progress {
    display: block;
    width: 100%;
    height: 22px;
    overflow: hidden;
    border: 1px solid #cce8ed;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--mado-ai-usage-track);
}

progress.mado-ai-usage-page__progress::-webkit-progress-bar {
    border-radius: 999px;
    background: var(--mado-ai-usage-track);
}

progress.mado-ai-usage-page__progress::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, #2eb2c1 0%, #15a9ba 58%, #0b6870 100%);
}

progress.mado-ai-usage-page__progress::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, #2eb2c1 0%, #15a9ba 58%, #0b6870 100%);
}

.mado-ai-usage-page__progress.is-pending {
    position: relative;
    background: var(--mado-ai-usage-track);
}

.mado-ai-usage-page__progress.is-pending::after {
    content: "集計準備中";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mado-ai-usage-muted);
    font-size: 11px;
    font-weight: 700;
}

.mado-ai-usage-page__progress-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    color: var(--mado-ai-usage-muted);
    font-size: 11px;
}

.mado-ai-usage-page__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.mado-ai-usage-page__stat {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--mado-ai-usage-border);
    border-radius: 14px;
    background: #fbfdfe;
}

.mado-ai-usage-page__stat > span {
    display: block;
    color: var(--mado-ai-usage-muted);
    font-size: 12px;
    font-weight: 700;
}

.mado-ai-usage-page__stat > strong {
    display: block;
    margin-top: 3px;
    color: var(--mado-ai-usage-text);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.35;
}

.mado-ai-usage-page__stat.is-remaining > strong {
    color: var(--mado-ai-usage-primary);
}

.mado-ai-usage-page__usage-note {
    margin-top: 18px;
    padding: 14px 16px;
    border-left: 4px solid var(--mado-ai-usage-primary-2);
    border-radius: 0 12px 12px 0;
    background: var(--mado-ai-usage-primary-soft);
    color: var(--mado-ai-usage-text-soft);
    font-size: 13px;
    line-height: 1.8;
}

.mado-ai-usage-page__usage-note > strong {
    color: var(--mado-ai-usage-primary);
}

.mado-ai-usage-page__usage-note > p {
    margin-top: 2px;
}

.mado-ai-usage-page__settings-panel {
    padding: clamp(22px, 3.2vw, 30px);
}

.mado-ai-usage-page__settings-help {
    max-width: 560px;
    text-align: right;
}

.mado-ai-usage-page__settings-form {
    margin-top: 22px;
}

.mado-ai-usage-page__settings-form fieldset {
    min-width: 0;
    padding: 0;
    border: 0;
}

.mado-ai-usage-page__settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.mado-ai-usage-page__setting-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--mado-ai-usage-border);
    border-radius: 14px;
    background: var(--mado-ai-usage-surface-soft);
}

.mado-ai-usage-page__setting-card > label {
    display: block;
    margin-bottom: 9px;
    color: #19374c;
    font-size: 13px;
    font-weight: 800;
}

.mado-ai-usage-page__setting-card select,
.mado-ai-usage-page__setting-card input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 1px solid var(--mado-ai-usage-border-strong);
    border-radius: 11px;
    background: #ffffff;
    color: var(--mado-ai-usage-text);
}

.mado-ai-usage-page__setting-card select {
    padding: 8px 34px 8px 12px;
}

.mado-ai-usage-page__setting-card input {
    padding: 8px 12px;
}

.mado-ai-usage-page__setting-card select:disabled,
.mado-ai-usage-page__setting-card input:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.mado-ai-usage-page__setting-card > p {
    margin-top: 9px;
    color: var(--mado-ai-usage-muted);
    font-size: 11px;
    line-height: 1.65;
}

.mado-ai-usage-page__amount-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.mado-ai-usage-page__amount-row > em {
    color: var(--mado-ai-usage-text);
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
}

.mado-ai-usage-page__settings-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.mado-ai-usage-page__save-button {
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid #13a9bf;
    border-radius: 10px;
    background: #e8fbfe;
    color: #075e69;
    font-weight: 800;
    cursor: pointer;
}

.mado-ai-usage-page__save-button:hover {
    background: #d9f7fb;
}

.mado-ai-usage-page__notice,
.mado-ai-usage-page__system-message,
.mado-ai-usage-page__read-only,
.mado-ai-usage-page__runtime-note {
    padding: 12px 14px;
    border: 1px solid var(--mado-ai-usage-border);
    border-radius: 12px;
    background: #ffffff;
    font-size: 13px;
    line-height: 1.7;
}

.mado-ai-usage-page__notice.is-success {
    border-color: #86d8ce;
    background: #edfbf8;
    color: #0f766e;
}

.mado-ai-usage-page__notice.is-error,
.mado-ai-usage-page__system-message {
    border-color: #f3b2ae;
    background: #fff5f4;
    color: #9f2118;
}

.mado-ai-usage-page__read-only {
    margin-top: 14px;
    border-color: #d8e2ed;
    background: #f8fafc;
    color: var(--mado-ai-usage-text-soft);
}

.mado-ai-usage-page__runtime-note {
    margin-top: 14px;
    border-color: #ead8a4;
    background: #fffaf0;
    color: #715313;
    font-size: 11px;
}

@media (max-width: 820px) {
    .mado-ai-usage-page__settings-head {
        flex-direction: column;
    }

    .mado-ai-usage-page__settings-help {
        max-width: none;
        text-align: left;
    }

    .mado-ai-usage-page__settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    body.mado-portal-account-page .mado-portal-shell--action-ai-usage .mado-portal-shell__content-frame.is-standard,
    body.mado-portal-standalone--ai-usage .mado-portal-shell__content-frame.is-standard {
        padding-right: 12px;
        padding-left: 12px;
    }

    .mado-ai-usage-page__card-head {
        flex-direction: column;
    }

    .mado-ai-usage-page__period {
        align-self: flex-start;
    }

    .mado-ai-usage-page__stats {
        grid-template-columns: 1fr;
    }

    .mado-ai-usage-page__panel {
        border-radius: 16px;
    }

    .mado-ai-usage-page__settings-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mado-ai-usage-page__save-button {
        width: 100%;
    }
}