/*
 * Free Tier Monitor — pane-specific styles.
 *
 * Doc 32 §1. Per docs/service-discovery-v2/35-pane-style-guide.md —
 * every colour goes through a CSS variable; no hex literals (§3.1).
 *
 * Reuses chrome, subhead, section-divider, chevron, drill-down
 * patterns from the established panes.
 */

.lp-pane {

    container-type: inline-size;
}

.lp-free-tier-body {
    padding: 20px var(--lp-pane-pad-x);
}

/* ---------- Top summary card ---------- */

.lp-free-tier-summary {
    text-align: center;
    margin-bottom: 4px;
    padding: 8px 0 12px;
}

.lp-free-tier-overage {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: var(--lp-pane-amber-900);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.lp-free-tier-overage--ok { color: var(--lp-pane-status-ok-ink); }

.lp-free-tier-overage-label {
    font-size: 11px;
    color: var(--lp-pane-ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

.lp-free-tier-meta {
    font-size: 13px;
    color: var(--lp-pane-ink-dim);
    margin-top: 8px;
}

/* ---------- Per-service rows ---------- */

.lp-free-tier-section {
    margin: 0 calc(-1 * var(--lp-pane-pad-x));
}

.lp-free-tier-row {
    padding: 12px var(--lp-pane-pad-x);
    border-bottom: 1px solid var(--lp-pane-divider);
    cursor: pointer;
    background: var(--lp-pane-bg);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14px;
    grid-template-areas:
        "head chev"
        "bar  chev"
        "stat chev";
    gap: 4px 12px;
}

.lp-free-tier-row:hover {
    background: var(--lp-pane-amber-50);
}

.lp-free-tier-row:last-child {
    border-bottom: 0;
}

.lp-free-tier-row[aria-expanded="true"] {
    background: var(--lp-pane-detail-bg);
}

.lp-free-tier-row-head {
    grid-area: head;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--lp-pane-ink);
}

.lp-free-tier-row-name {
    font-weight: 600;
    color: var(--lp-pane-amber-900);
}

.lp-free-tier-row-usage-type {
    color: var(--lp-pane-ink-dim);
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.lp-free-tier-row-bar-wrap {
    grid-area: bar;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}

.lp-free-tier-row-track {
    height: 10px;
    background: var(--lp-pane-amber-100);
    border-radius: 5px;
    overflow: hidden;
}

.lp-free-tier-row-fill {
    height: 100%;
    background: var(--lp-pane-amber-700);
    transition: width 220ms ease;
}

.lp-free-tier-row-fill--low { background: var(--lp-pane-amber-300); }
.lp-free-tier-row-fill--high { background: var(--lp-pane-status-critical-ink); }

.lp-free-tier-row-counts {
    color: var(--lp-pane-ink-dim);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lp-free-tier-row-projected {
    grid-area: stat;
    font-size: 12px;
    color: var(--lp-pane-ink-dim);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.lp-free-tier-row-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.lp-free-tier-row-status--ok       { color: var(--lp-pane-status-ok-ink); }
.lp-free-tier-row-status--warning  { color: var(--lp-pane-amber-700); }
.lp-free-tier-row-status--over     { color: var(--lp-pane-status-critical-ink); }

.lp-free-tier-row-chevron-cell {
    grid-area: chev;
    align-self: center;
    width: 14px;
}

.lp-pane-chevron {
    display: block;
    color: var(--lp-pane-amber-700);
    transition: transform 150ms ease, color 120ms ease;
    transform-origin: center;
}

.lp-free-tier-row:hover .lp-pane-chevron {
    color: var(--lp-pane-amber-900);
}

.lp-free-tier-row[aria-expanded="true"] .lp-pane-chevron {
    transform: rotate(90deg);
}

/* ---------- Drill-down detail (style guide §6.5 Case B) ----------
 * No leftmost glyph column — use 24px half-step indent. */
.lp-free-tier-detail {
    background: var(--lp-pane-amber-50);
    border-top: 1px solid var(--lp-pane-divider);
    border-bottom: 1px solid var(--lp-pane-divider);
    padding: 12px var(--lp-pane-pad-x) 14px
             calc(var(--lp-pane-pad-x) + 24px);
    margin: 0 calc(-1 * var(--lp-pane-pad-x));
    font-size: 13px;
    color: var(--lp-pane-ink);
}

.lp-free-tier-detail strong {
    color: var(--lp-pane-amber-900);
    font-weight: 600;
}

.lp-free-tier-detail-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 6px 12px;
    margin-top: 8px;
    font-size: 12px;
}

.lp-free-tier-detail-grid dt {
    color: var(--lp-pane-ink-dim);
}

.lp-free-tier-detail-grid dd {
    margin: 0;
    color: var(--lp-pane-ink);
    font-variant-numeric: tabular-nums;
}

.lp-free-tier-detail-resets {
    margin-top: 8px;
    color: var(--lp-pane-ink-dim);
    font-size: 12px;
}

/* ---------- "Within safe range" expandable group ---------- */

.lp-free-tier-safe-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--lp-pane-bg);
    border: 0;
    width: 100%;
    padding: 12px var(--lp-pane-pad-x);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--lp-pane-ink);
    text-align: left;
}

.lp-free-tier-safe-toggle:hover {
    background: var(--lp-pane-amber-50);
}

.lp-free-tier-safe-toggle[aria-expanded="true"] .lp-pane-chevron {
    transform: rotate(90deg);
}

.lp-free-tier-safe-list {
    display: none;
}

.lp-free-tier-safe-list--open {
    display: block;
}

/* ---------- Narrow breakpoint (<520px) ---------- */

@container (max-width: 520px) {
    .lp-free-tier-body { padding: 16px 12px; }
    .lp-free-tier-overage { font-size: 26px; }

    .lp-pane-section-end { margin-left: -12px; margin-right: -12px; }
    .lp-pane-subhead     { margin-left: -12px; margin-right: -12px; padding: 8px 12px; }

    .lp-free-tier-section { margin-left: -12px; margin-right: -12px; }
    .lp-free-tier-row     { padding: 10px 12px; }
    .lp-free-tier-detail  { padding: 10px 12px 12px 36px; margin: 0 -12px; }
    .lp-free-tier-safe-toggle { padding: 10px 12px; }
}

@media (max-width: 520px) {
    .lp-free-tier-body { padding: 16px 12px; }
    .lp-free-tier-overage { font-size: 26px; }
    .lp-pane-section-end { margin-left: -12px; margin-right: -12px; }
    .lp-pane-subhead     { margin-left: -12px; margin-right: -12px; padding: 8px 12px; }
    .lp-free-tier-section { margin-left: -12px; margin-right: -12px; }
    .lp-free-tier-row     { padding: 10px 12px; }
    .lp-free-tier-detail  { padding: 10px 12px 12px 36px; margin: 0 -12px; }
    .lp-free-tier-safe-toggle { padding: 10px 12px; }
}

/* ------- Empty / not-eligible message -----------------------------
   Mirrors compute-optimizer / rightsize / cost-by-tag / ri-savings
   empty states. Same UX for both "no data" success and load-failure
   paths since the underlying cause is most often Free Tier
   ineligibility on this account. */
.lp-free-tier-empty {
    margin: 16px;
    padding: 18px 16px;
    background: var(--lp-pane-amber-50);
    border: 1px dashed var(--lp-pane-amber-300);
    border-radius: 6px;
    color: var(--lp-pane-ink);
    font-size: 13px;
    line-height: 1.55;
}

.lp-free-tier-empty strong { color: var(--lp-pane-amber-900); }

.lp-free-tier-empty a {
    color: var(--lp-pane-amber-900);
    text-decoration: none;
    border-bottom: 1px dotted var(--lp-pane-amber-700);
}

.lp-free-tier-empty a:hover {
    background: var(--lp-pane-amber-100);
    border-bottom-style: solid;
}