/**
 * My Account > Documents - Odoo invoice list.
 *
 * Deliberately light: the table reuses WooCommerce's own shop_table classes so
 * it inherits the theme. Only the status pill and the amount alignment are
 * added here.
 */

/* Subscription page: "contact support to make changes" notice */

.ed-isp-subscription-notice {
    background-color: #f8f9fa;
    border-left: 4px solid #145ae2;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin: 20px 0;
}

.ed-isp-subscription-notice__inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ed-isp-subscription-notice__icon {
    width: 20px;
    height: 20px;
    color: #145ae2;
    flex-shrink: 0;
}

.ed-isp-subscription-notice strong {
    font-size: 16px;
}

.ed-isp-subscription-notice p {
    margin: 5px 0 0 0;
    opacity: 0.75;
}

.ed-isp-subscription-notice a {
    color: #145ae2;
    font-weight: 500;
    text-decoration: none;
}

.ed-isp-subscription-notice a:hover {
    color: #124cbf;
    text-decoration: underline;
}

/*
 * The `hidden` attribute only gets its display:none from the browser's own
 * stylesheet, which any theme rule carrying a `display` property beats -
 * .woocommerce-info being a flex container is enough to make a hidden element
 * show up anyway. These elements have to stay hidden whatever the theme does,
 * hence the !important.
 */
.ed-isp-documents[hidden],
.ed-isp-documents__row[hidden],
.ed-isp-documents__no-match[hidden] {
    display: none !important;
}

/* Toolbar: type filter and search */

.ed-isp-documents__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25em;
}

.ed-isp-documents__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ed-isp-documents__filters li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ed-isp-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35em 0.9em;
    border: 1px solid rgba(20, 90, 226, 0.35);
    border-radius: 999px;
    font-size: 0.9em;
    line-height: 1.6;
    text-decoration: none;
    color: inherit;
}

.ed-isp-filter:hover,
.ed-isp-filter:focus {
    border-color: #145ae2;
    text-decoration: none;
}

.ed-isp-filter.is-active {
    background-color: #145ae2;
    border-color: #145ae2;
    color: #fff;
}

.ed-isp-filter.is-active:hover,
.ed-isp-filter.is-active:focus {
    background-color: #124cbf;
    border-color: #124cbf;
    color: #fff;
}

.ed-isp-filter__count {
    font-size: 0.85em;
    opacity: 0.75;
}

.ed-isp-documents__search {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

.ed-isp-documents__search input[type="search"] {
    min-width: 14em;
}

.ed-isp-documents__amount {
    white-space: nowrap;
}

.ed-isp-documents__type {
    white-space: nowrap;
}

.ed-isp-documents__download {
    text-align: right;
}

.ed-isp-status {
    display: inline-block;
    padding: 0.15em 0.7em;
    border-radius: 999px;
    font-size: 0.85em;
    line-height: 1.6;
    white-space: nowrap;
}

.ed-isp-status--paid {
    background-color: #e6f4ea;
    color: #1e6b34;
}

.ed-isp-status--open {
    background-color: #fdf3e2;
    color: #8a5a00;
}

.ed-isp-status--partial {
    background-color: #fdf3e2;
    color: #8a5a00;
}

.ed-isp-status--credit {
    background-color: #eaf0fd;
    color: #124cbf;
}

.ed-isp-status--reversed {
    background-color: #f1f1f1;
    color: #5c5c5c;
}

@media screen and (max-width: 768px) {
    .ed-isp-documents__download {
        text-align: left;
    }

    .ed-isp-documents__button {
        display: block;
        width: 100%;
        text-align: center;
    }

    .ed-isp-documents__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .ed-isp-documents__search {
        width: 100%;
    }

    .ed-isp-documents__search input[type="search"] {
        flex: 1 1 auto;
        min-width: 0;
    }
}