/*
 * A thin layer on top of Tabler.
 *
 * Everything structural - the shell, cards, forms, buttons, badges - is Tabler's. What is
 * left here is the handful of things it has no opinion about: the expand affordance on a
 * table row, the certificate detail panel, and making DataTables' own furniture sit
 * comfortably inside a Tabler card.
 */

/* The row-expand column. */
td.expand {
    cursor: pointer;
    width: 2.5rem;
    text-align: center;
    color: var(--tblr-primary);
    user-select: none;
}

td.expand svg {
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
}

/* Cached certificate detail, shown when a row is expanded. */
.cert-detail {
    padding: 0.75rem 1rem;
    background: var(--tblr-bg-surface-secondary);
}

.cert-detail .cert + .cert {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tblr-border-color);
}

.cert-detail table {
    width: 100%;
    font-size: 0.8125rem;
}

.cert-detail th {
    width: 8rem;
    padding: 0.15rem 0.75rem 0.15rem 0;
    color: var(--tblr-secondary);
    font-weight: 500;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.cert-detail td {
    padding: 0.15rem 0;
    word-break: break-all;
}

/* DataTables puts its length, search and pagination controls around the table; give them
   the padding a Tabler card would. */
.card .dt-layout-row {
    padding: 0.75rem 1rem;
    margin: 0;
}

.card .dt-layout-row:has(table) {
    padding: 0;
}

.card .dt-search input,
.card .dt-length select {
    display: inline-block;
    width: auto;
}

/* Per-column search inputs live in the footer. */
table.datatable tfoot.column-search-hidden {
    display: none;
}

table.datatable tfoot th {
    padding: 0.5rem;
    font-weight: 400;
}

/* How long is left, next to the expiry date. */
.days {
    margin-left: 0.4rem;
    font-size: 0.75rem;
    color: var(--tblr-secondary);
}

.mono {
    font-family: var(--tblr-font-monospace);
    font-size: 0.8125rem;
}

/* The badge in the point-of-contact filter carries a clear button. */
#poc-user-field .btn-close {
    font-size: 0.6rem;
    vertical-align: middle;
}

/* Points of contact, in the expanded row of the servers table. */
.contacts {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--tblr-border-color);
}

.contacts-heading {
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.contacts-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.contacts-label {
    width: 9rem;
    flex: none;
    font-size: 0.75rem;
    color: var(--tblr-secondary);
}

.contact-badge {
    display: inline-flex;
    align-items: center;
    white-space: normal;
    text-align: left;
}

.contact-badge .icon {
    width: 0.85rem;
    height: 0.85rem;
}

.contact-badge .btn-close {
    font-size: 0.55rem;
}

.contacts-add {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-left: 9rem;
}

/* The suggestion list hangs off the input rather than the page. */
.contacts-search {
    position: relative;
    width: 22rem;
    max-width: 100%;
}

.contacts-search .contact-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 16rem;
    overflow-y: auto;
    z-index: 30;
}

.contact-message {
    font-size: 0.8125rem;
}

@media (max-width: 40rem) {
    .contacts-label {
        width: 100%;
    }

    .contacts-add {
        padding-left: 0;
        flex-wrap: wrap;
    }
}

/* On a details page the contacts block is a card of its own, so the card's title says
   what it is and the block's own heading and separator would repeat it. */
.contacts-standalone {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.contacts-standalone .contacts-heading {
    display: none;
}

/* An entry's history, at the bottom of its expanded row. */
.audit {
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--tblr-border-color);
}

.audit-heading {
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.audit-table {
    width: 100%;
    font-size: 0.8125rem;
}

.audit-table td {
    padding: 0.2rem 0.75rem 0.2rem 0;
    vertical-align: top;
    border-top: 1px solid var(--tblr-border-color);
    /* The table this sits inside is text-nowrap, and a summary is a sentence. */
    white-space: normal;
}

.audit-table tr:first-child td {
    border-top: 0;
}

/* The same column treatment in both places the trail is shown: the history block in an
   expanded row, and the audit table on a details page. */
td.audit-when,
td.audit-actor {
    white-space: nowrap;
    color: var(--tblr-secondary);
}

.audit-table td.audit-when {
    width: 10rem;
}

.audit-table td.audit-action {
    width: 12rem;
}

.audit-table td.audit-actor {
    width: 10rem;
}

.audit-pager {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
}

@media (max-width: 40rem) {
    td.audit-when,
    td.audit-action,
    td.audit-actor {
        width: auto;
        white-space: normal;
    }
}

/* The contacts column on the servers table.

   Bounded, because what goes in it is not: a server with a team on it publishes a dozen
   addresses, and a cell that prints them all takes the width of the table and pushes the
   certificate columns out of sight. One contact, a count of the rest, and a hard ceiling so
   that a single long address cannot do the same thing on its own. */
td.pocs {
    max-width: 22rem;
}

.pocs-cell {
    display: flex;
    align-items: baseline;
    gap: 0.125rem;
    min-width: 0;
}

.pocs-cell .poc-first {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Both counts keep their width whatever the address beside them does. */
.pocs-cell .badge {
    flex: none;
}

.pocs-cell .poc-more {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.6875rem;
    line-height: inherit;
}

@media (max-width: 40rem) {
    td.pocs {
        max-width: 12rem;
    }
}

/* The strip under the navigation bar on a demo. Part of the dark bar rather than a card
   of its own, so it reads as a property of the whole application and not as one more thing
   on the page that can be dismissed or scrolled past. */
/* navbar-expand-md sets nowrap at desktop widths, so the strip would sit inline and take
   the room from the navigation. Said with a class rather than :has(), which not every
   browser on an accredited network is new enough for. */
.navbar.has-demo-strip {
    flex-wrap: wrap;
}

.demo-strip {
    padding: 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8125rem;
    text-align: center;
}

/* What a demo says when somebody presses something. Fixed at the bottom so it is the same
   place whichever button it was, and out of the way of the classification banner at the
   top. */
.demo-notice {
    position: fixed;
    left: 50%;
    bottom: 2.5rem;
    z-index: 1080;
    transform: translate(-50%, 0.5rem);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--tblr-dark);
    color: #fff;
    font-size: 0.875rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.demo-notice.is-shown {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .demo-notice {
        transition: none;
    }
}

/* An unread notification, which is most of what somebody is looking for on that page. */
tr.notification-unread td {
    font-weight: 500;
}

tr.notification-unread td:first-child {
    box-shadow: inset 2px 0 0 0 var(--tblr-primary);
}

/* The metrics chart: inline SVG, because everything here ships in the jar. */
.metric-chart {
    width: 100%;
    height: 220px;
}

.metric-bar-issued {
    fill: var(--tblr-primary);
}

.metric-bar-expiring {
    fill: var(--tblr-orange);
}

.metric-grid {
    stroke: var(--tblr-border-color);
    stroke-width: 1;
}

.metric-now {
    stroke: var(--tblr-secondary);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.metric-axis {
    fill: var(--tblr-secondary);
    font-size: 10px;
}

.metric-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 1rem;
    font-size: 0.8125rem;
}

.metric-swatch {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
    display: inline-block;
}

/*
 * The logo. Sized by height so the lockup keeps its proportions wherever it appears, and
 * given a width bound so a narrow window scales it down rather than pushing the navigation
 * off the bar.
 */
.logo {
    height: 1.75rem;
    width: auto;
    max-width: 100%;
}

.logo-lg {
    height: 3rem;
}


/*
 * The demo's sign-in accounts. A list of buttons rather than a table, because each row is
 * one thing to press and a table of credentials invites reading rather than choosing.
 */
.demo-accounts .list-group-item-action {
    cursor: pointer;
}

.demo-accounts .list-group-item-action.active {
    /* Tabler's `active` is a solid fill that swallows the badges and the description, so
       this marks the chosen row without taking the text with it. */
    background-color: var(--tblr-active-bg, rgba(32, 107, 196, 0.06));
    color: inherit;
    border-color: var(--tblr-border-color);
}

/*
 * The sign-in page, on a screen shorter than its contents.
 *
 * Tabler centres this page with `justify-content: center`, which is fine until the content
 * is taller than the viewport: the overflow then spills off BOTH ends, and the top half
 * cannot be scrolled to because scroll position cannot go below zero. On a 375x667 phone
 * the demo's account tile pushed the page to 905px, and the logo and the username field
 * ended up 214px and 53px above the top of a page already scrolled to the top - invisible
 * and unreachable.
 *
 * `safe` says: centre it, unless that would overflow, in which case align to the start.
 * The plain `flex-start` before it is the fallback for a browser that does not know `safe`
 * - top-aligned rather than centred, which is the right way to be wrong.
 */
.page.page-center {
    justify-content: flex-start;
    justify-content: safe center;
}