/* What is left after Tabler (https://tabler.io), MIT, vendored at
 * wwwroot/lib/tabler/tabler.min.css.
 *
 * To upgrade, replace that one file:
 *   curl -o MSS.LicenseGenerator.Web/wwwroot/lib/tabler/tabler.min.css
 *        https://cdn.jsdelivr.net/npm/@tabler/core@<version>/dist/css/tabler.min.css
 *
 * Vendored rather than loaded from a CDN so the image carries everything it
 * needs: the portal looks the same whether or not outbound traffic to a CDN is
 * allowed, and no third party sits in the path of an internal tool. Tabler's
 * JavaScript is deliberately not included -- nothing here needs it, and the
 * tab behaviour this app does need is in js/tabs.js, which survives a reload.
 *
 * Tabler supplies the shell, cards, tables, forms, buttons, alerts and badges.
 * This file is only the handful of things it has no opinion about: the brand
 * block, the tab mechanism this app drives itself, and the plans table. If a
 * rule here could be a Tabler class instead, it should be. */

/* ------------------------------------------------------------------- brand */
.navbar-brand .brand-name {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
}

.navbar-brand .brand-sub {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
    font-weight: 400;
}

/* -------------------------------------------------------------------- tabs */
/* The tabs are driven by tabs.js, not Bootstrap's tab plugin, so that the
   selected tab survives a reload and a failed post lands on the form that
   failed. Tabler styles the strip; the panels are shown and hidden here. */
.tab-button {
    appearance: none;
    background: none;
    border: none;
    font: inherit;
}

/* Beats Tabler's display rules on .tab-panel and .card, which are more
   specific than a bare class would be. */
.hidden {
    display: none !important;
}

/* ------------------------------------------------- App Service plans table */
/* Hostnames read as one word. Letting them break mid-label turned every row
   into three lines, and row height is set by the tallest cell. */
.plans-table .site a {
    white-space: nowrap;
}

.plans-table td:first-child strong {
    white-space: nowrap;
}

.sub-note {
    display: block;
    font-size: 0.78rem;
    color: var(--tblr-secondary);
}

.current-sku {
    font-family: var(--tblr-font-monospace);
    white-space: nowrap;
}

/* One line: tier, how long, Apply. nowrap with both selects free to shrink --
   allowed to wrap they went one per line at some widths and three-across at
   others, so a row's height depended on the window.
   The options carry the tier and its price only; the vCPU and RAM figures are
   in the tier reference table at the foot of the page, and keeping them here
   made the control too wide to sit beside anything. */
.tier-form {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: nowrap;
}

.tier-form select[name="newSku"],
.tier-form select[name="sku"] {
    flex: 1 1 10rem;
    min-width: 0;
}

.table-filter input[type="search"] {
    max-width: 26rem;
}

.filter-count {
    white-space: nowrap;
}

/* ---------------------------------------------------------- sign-in page */
/* There is no sidebar when signed out, so the card would otherwise sit at the
   full width of the content column. */
.signin-page {
    max-width: 26rem;
    margin: 2rem auto;
}

/* ------------------------------------------------------------- form card */
/* The licence form is a form, not a dashboard panel. Left to fill the content
   column it puts a short "License Name" field across 1200px, which is harder
   to scan than a narrower one, not easier. */
.form-card {
    max-width: 56rem;
}

/* --------------------------------------------------------- scheduled revert */
/* Narrower than the tier select: it holds "for 7 days", not a tier and a price. */
.tier-form .revert-select {
    flex: 0 0 6.5rem;
}

.tier-form .btn {
    flex: 0 0 auto;
}

.revert-pending {
    margin-top: 0.35rem;
    font-size: 0.8rem;
}

/* ------------------------------------------------------------- est. cost */
.est-cost {
    white-space: nowrap;
}

.plan-total {
    white-space: nowrap;
}


/* ---------------------------------------------------------- shared plans */
/* The plans every app in a shared-plan subscription sits on. Cards in a row
   rather than table rows: there are two or three of them, they are the thing
   the table above is relative to, and a card gives the tier control somewhere
   to sit without squeezing a table column. */
.shared-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1rem;
}

.shared-plan {
    margin: 0;
}

.shared-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

/* Label on the left, value on the right, one pair per line. */
.shared-plan-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
}

.shared-plan-facts dt {
    color: var(--tblr-secondary);
    font-weight: 400;
}

.shared-plan-facts dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.shared-plan .tier-form select[name="newSku"] {
    flex: 1 1 11rem;
}

/* ------------------------------------------------------------- est. cost */
.est-cost {
    white-space: nowrap;
}

.plan-total {
    white-space: nowrap;
}

/* A promoted app can be resized or handed back, so its cell carries both.
   The return sits under the tier control: it is the rarer action, and the
   two read as "change this" then "or give it up". */
.return-form {
    margin-top: 0.35rem;
}