/* ==========================================================================
   SubscriptionList — page-specific overrides on top of HomeDashboard.css
   ----------------------------------------------------------------------------
   Scoped via `.subscription-list-page` (also added on body as
   `body.page-subscription-list`).

   Architecture: the page renders inside `.dashboard-container >
   .dashboard-card.dashboard-card--grid` (the same wrapper HomeDashboard uses
   for its Inspections/Certificates/etc. cards). HomeDashboard.css — already
   linked from the ASCX — provides ALL the dx-datagrid styling (48px header
   row, 14/600 column labels, 42px data rows, transparent zebra, gray pager,
   teal selection chip, 32px filter editors). This file ONLY adds:

     1. Header-row flatten of the legacy `tblAdmin` <table> so the Company
        label + select + Go button render as an inline-flex cluster aligned
        with the title.
     2. Pill skin for the Company `<select>` (matches dashboard select chrome).
     3. Teal-pill skin for the Go LinkButton (legacy LinkButton uses navy +
        `!important` in MainWhiteout.css, so we have to win the cascade).
   ========================================================================== */

/* §1 — Admin filter row: collapse the legacy <table.subscription-admin>
   chain so its two cells become direct flex children of the table itself,
   which the `.header-filter-group` flex parent then treats as a single
   inline cluster. */
.subscription-list-page .subscription-admin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-collapse: collapse;
    background: transparent;
}

.subscription-list-page .subscription-admin > tbody,
.subscription-list-page .subscription-admin > tbody > tr {
    display: contents;
}

.subscription-list-page .subscription-admin tr > td {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    line-height: 20px;
    white-space: nowrap;
    height: 32px;
    vertical-align: middle;
    width: auto;
}

/* §2 — Company select. Mirror the dashboard select chrome (32px height,
   8px radius, slate-200 border, white bg with chevron). */
.subscription-list-page .subscription-admin select {
    height: 32px;
    width: 240px;
    padding: 0 28px 0 10px;
    margin: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--raw-radius-md);
    background-color: var(--card-raised);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
        linear-gradient(-45deg, transparent 50%, var(--text-secondary) 50%);
    background-position:
        right 12px center,
        right 7px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 20px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.subscription-list-page .subscription-admin select:hover {
    background-color: var(--muted);
    border-color: var(--border-strong);
}

.subscription-list-page .subscription-admin select:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
    border-color: var(--primary);
}

/* §3 — Go LinkButton: teal pill matching ScheduledReports and the dashboard
   primary-action treatment. `!important` is required on bg / color / padding
   / font-weight because MainWhiteout.css `.LinkButton` uses `!important`
   (legacy navy CTA). Font declared longhand to avoid the shorthand+
   !important parser trap (see memory: css-shorthand-var-important-parser-trap). */
.subscription-list-page .subscription-admin a.LinkButton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 32px;
    padding: 0 16px !important;
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border-width: 0.8px;
    border-style: solid;
    border-color: var(--primary);
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 20px;
    text-decoration: none !important;
    box-shadow: 0 1px 2px 0 rgba(var(--primary-tint), 0.25);
    cursor: pointer;
}

.subscription-list-page .subscription-admin a.LinkButton:hover {
    background-color: var(--button-primary-hover) !important;
    border-color: var(--button-primary-hover);
    color: #ffffff !important;
}

.subscription-list-page .subscription-admin a.LinkButton:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Kill the LinkButton `<ins>&nbsp;</ins>` spacer trap — invisible in legacy
   block layout but in `display: inline-flex` it becomes a flex item and
   shifts "Go" off-centre. See memory: linkbutton-ins-spacer-trap. */
.subscription-list-page .subscription-admin a.LinkButton > ins {
    display: none;
}

/* §4 — Card framing. The shared `.dashboard-card` rule in HomeDashboard.css
   (§"Card container") provides the white surface, slate-200 border, 12px
   radius, padding and shadow. The dashboard root container is normally
   centred by its parent layout chain (dx-drawer-content > content). On
   non-dashboard pages the chain is plain DNN ContentPane <td>, so add the
   24px/48px page gutter here. */
.subscription-list-page {
    margin: 24px 48px;
    box-sizing: border-box;
}