body,
button,
input,
select,
textarea {
    font-family: "DM Sans", Arial, sans-serif;
}

.brand,
.badge,
.button,
.detail-grid dt,
.detail-grid h2,
.field label,
.invoice-meta dt,
.menu-toggle,
.metric,
.metric-value,
.page-heading h1,
.section h2,
.sidebar nav a,
.table th,
.topbar {
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
}

.forecast-heading {
    align-items: flex-end;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 15px;
}

.forecast-heading h2 {
    margin-bottom: 3px;
}

.forecast-heading p {
    color: var(--muted);
    margin: 0;
}

.forecast-heading strong {
    color: var(--muted);
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
    font-size: 12px;
    white-space: nowrap;
}

.forecast-summary {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.forecast-summary .forecast-total {
    color: var(--ink);
    font-size: 18px;
}

.metric-card {
    border: 0;
    border-top: 4px solid var(--metric-accent, var(--brand));
    box-shadow: 0 8px 24px rgba(31, 45, 56, .07);
    min-height: 132px;
    position: relative;
}

.metric-card .metric-value {
    font-size: clamp(20px, 2vw, 27px);
    letter-spacing: -.6px;
    padding-right: 48px;
}

.metric-icon {
    align-items: center;
    background: var(--metric-soft, #e8f2ff);
    border-radius: 12px;
    color: var(--metric-accent, var(--brand));
    display: flex;
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
    font-size: 18px;
    font-weight: 800;
    height: 42px;
    justify-content: center;
    position: absolute;
    right: 18px;
    top: 18px;
    width: 42px;
}

.metric-card.blue { --metric-accent: #4f72ee; --metric-soft: #e9eeff; }
.metric-card.green { --metric-accent: #35c98b; --metric-soft: #ddf8ed; }
.metric-card.cyan { --metric-accent: #2eb9ca; --metric-soft: #ddf5f8; }
.metric-card.amber { --metric-accent: #f2ad24; --metric-soft: #fff2d6; }
.metric-card.red { --metric-accent: #e05252; --metric-soft: #fde7e7; }
.metric-card.red .metric-value,
.metric-card.red .metric-detail { color: #bd3232; }

.quick-metrics {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 24px;
    max-width: 720px;
}

.pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 18px;
}

.pagination-link {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink);
    display: inline-flex;
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    min-height: 36px;
    min-width: 36px;
    padding: 0 11px;
    text-decoration: none;
}

.pagination-link:hover,
.pagination-link.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.pagination-link.disabled {
    opacity: .45;
    pointer-events: none;
}

.table tbody tr:hover {
    background: #f8fafc;
}

.table td a:not(.button) {
    color: #1f2d38;
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
    font-weight: 750;
    text-decoration: none;
}

.table td a:not(.button):visited {
    color: #1f2d38;
}

.table td a:not(.button):hover {
    color: var(--brand-dark);
    text-decoration: underline;
    text-decoration-color: #91cde9;
    text-underline-offset: 3px;
}

.table td a:not(.button):focus-visible {
    border-radius: 3px;
    outline: 2px solid #78c6e8;
    outline-offset: 3px;
}

.table td .subscription-count {
    color: #0077bf;
    font-size: 13px;
}

.table td .subscription-count:visited {
    color: #0077bf;
}

.table td .subscription-count span {
    color: var(--muted);
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.billing-generation,
.row-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.billing-generation select {
    background: #fff;
    border: 1px solid #bfcdd5;
    border-radius: 7px;
    color: var(--ink);
    font: 600 13px "DM Sans", Arial, sans-serif;
    min-height: 39px;
    padding: 0 34px 0 11px;
}

.row-actions form {
    margin: 0;
}

.pix-status-indicator {
    display: inline-block;
    background: #087e5b;
    border-radius: 999px;
    color: #fff;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px;
    line-height: 1.35;
    margin-left: 5px;
    padding: 2px 7px;
    text-transform: uppercase;
    vertical-align: 1px;
}

.billing-tabs {
    margin-top: 32px;
}

.button.danger {
    background: #fde7e7;
    color: #bd3232;
}

.button.danger:hover {
    background: #bd3232;
    color: #fff;
}

.button.warning {
    background: #fff2d6;
    color: #a66a00;
}

.button.warning:hover {
    background: #d88a00;
    color: #fff;
}

.section-heading {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

.section-heading p {
    color: var(--muted);
    margin: -6px 0 16px;
}

.payment-entry {
    align-items: end;
    background: #f7fafc;
    border: 1px solid var(--line);
    border-radius: 9px;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    margin-bottom: 20px;
    padding: 16px;
}

.payment-entry .payment-notes {
    grid-column: span 3;
}

.payment-entry .payment-submit {
    align-items: flex-end;
    display: flex;
    height: 100%;
}

.payment-entry .payment-submit .button {
    width: 100%;
}

.section-intro {
    color: var(--muted);
    margin: -6px 0 16px;
}

.payment-edit-list {
    display: grid;
    gap: 10px;
}

.payment-edit-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.payment-edit-panel summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
    font-size: 13px;
    justify-content: space-between;
    padding: 13px 15px;
}

.payment-edit-panel[open] summary {
    background: #f7fafc;
    border-bottom: 1px solid var(--line);
}

.payment-edit-entry {
    border: 0;
    border-radius: 0;
    margin: 0;
}

.payment-delete {
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
}

.payment-correction-actions {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 12px 16px;
}

.payment-correction-actions form {
    align-items: center;
    display: flex;
    gap: 8px;
    margin: 0;
}

.payment-correction-actions input {
    background: #fff;
    border: 1px solid #bfcdd5;
    border-radius: 6px;
    color: var(--ink);
    font: inherit;
    min-width: 230px;
    padding: 9px 10px;
}

.invoice-management {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.invoice-management .invoice-reason,
.invoice-management .invoice-notes {
    grid-column: span 2;
}

.invoice-management-submit {
    grid-column: 1 / -1;
}

.invoice-cancel {
    align-items: center;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 18px;
}

.invoice-cancel strong {
    color: #bd3232;
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
}

.invoice-cancel p {
    color: var(--muted);
    margin: 3px 0 0;
}

.invoice-cancel form {
    align-items: center;
    display: flex;
    gap: 8px;
}

.invoice-cancel input {
    background: #fff;
    border: 1px solid #e4b9b9;
    border-radius: 6px;
    color: var(--ink);
    font: inherit;
    min-width: 250px;
    padding: 9px 10px;
}

.invoice-timeline {
    display: grid;
    gap: 0;
    margin-top: 6px;
}

.timeline-event {
    display: grid;
    gap: 12px;
    grid-template-columns: 16px 1fr;
    min-height: 76px;
    position: relative;
}

.timeline-event::before {
    background: var(--line);
    content: "";
    left: 7px;
    position: absolute;
    top: 17px;
    bottom: -4px;
    width: 2px;
}

.timeline-event:last-child::before {
    display: none;
}

.timeline-marker {
    background: #4f72ee;
    border: 3px solid #e9eeff;
    border-radius: 50%;
    height: 16px;
    position: relative;
    width: 16px;
    z-index: 1;
}

.timeline-event.payment .timeline-marker { background: #35c98b; border-color: #ddf8ed; }
.timeline-event.email .timeline-marker { background: #2eb9ca; border-color: #ddf5f8; }
.timeline-event.cancelled .timeline-marker { background: #e05252; border-color: #fde7e7; }
.timeline-event.updated .timeline-marker { background: #f2ad24; border-color: #fff2d6; }

.timeline-event time {
    color: var(--muted);
    display: block;
    font-size: 11px;
    margin-bottom: 2px;
}

.timeline-event strong {
    display: block;
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
    font-size: 13px;
}

.timeline-event p {
    color: var(--muted);
    margin: 2px 0 0;
}

.period-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.period-filter {
    background: #fff;
    border: 1px solid #bfcdd5;
    border-radius: 999px;
    color: var(--ink);
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 13px;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.period-filter:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.period-filter.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.products-table {
    table-layout: fixed;
    min-width: 760px;
}

.products-table th:nth-child(1) {
    width: 23%;
}

.products-table th:nth-child(2) {
    width: 42%;
}

.products-table th:nth-child(3) {
    width: 17%;
}

.products-table th:nth-child(4) {
    width: 10%;
}

.products-table th:nth-child(5) {
    width: 8%;
}

.products-table .product-description {
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: normal;
}

.alerts-panel > .section-heading {
    margin-bottom: 14px;
}

.alerts-panel > .section-heading > strong {
    color: var(--muted);
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
    font-size: 12px;
}

.alerts-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.action-alert {
    border-left: 4px solid var(--alert-color);
    box-shadow: 0 8px 24px rgba(31, 45, 56, .05);
    padding: 18px;
}

.action-alert.danger { --alert-color: #e05252; --alert-soft: #fde7e7; }
.action-alert.warning { --alert-color: #e39d16; --alert-soft: #fff2d6; }
.action-alert.info { --alert-color: #2b9eae; --alert-soft: #ddf5f8; }

.action-alert-header {
    align-items: flex-start;
    display: grid;
    gap: 10px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
}

.action-alert-icon,
.alerts-empty > span {
    align-items: center;
    background: var(--alert-soft, #ddf8ed);
    border-radius: 10px;
    color: var(--alert-color, #35a875);
    display: inline-flex;
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 800;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.action-alert h3 {
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
    font-size: 14px;
    margin: 1px 0 2px;
}

.action-alert p,
.alerts-empty p {
    color: var(--muted);
    font-size: 12px;
    margin: 0;
}

.action-alert-header > strong {
    color: var(--alert-color);
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
    font-size: 18px;
}

.action-alert ul {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.action-alert li {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 1px;
    padding: 9px 0;
}

.action-alert li a,
.action-alert li strong {
    color: var(--ink);
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-alert li a:hover { color: var(--brand); }

.action-alert li span {
    color: var(--muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alerts-empty {
    align-items: center;
    background: #fff;
    border: 1px solid #dceee4;
    display: flex;
    gap: 12px;
}

@media (max-width: 520px) {
    .forecast-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .forecast-summary {
        align-items: flex-start;
    }

    .quick-metrics {
        grid-template-columns: 1fr;
    }

    .alerts-grid {
        grid-template-columns: 1fr;
    }

    .billing-generation {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .payment-entry {
        grid-template-columns: 1fr;
    }

    .payment-entry .payment-notes {
        grid-column: auto;
    }

    .payment-correction-actions,
    .payment-correction-actions form,
    .invoice-cancel,
    .invoice-cancel form {
        align-items: stretch;
        flex-direction: column;
    }

    .payment-correction-actions input,
    .invoice-cancel input {
        min-width: 0;
        width: 100%;
    }

    .invoice-management {
        grid-template-columns: 1fr;
    }

    .invoice-management .invoice-reason,
    .invoice-management .invoice-notes,
    .invoice-management-submit {
        grid-column: auto;
    }

    .period-filters {
        flex-wrap: nowrap;
        margin-left: -4px;
        margin-right: -4px;
        overflow-x: auto;
        padding: 0 4px 8px;
    }

    .period-filter {
        flex: 0 0 auto;
    }
}