/* Our own layer on top of the pristine beer.min.css. */

/* Basilicom dark theme — set through beercss's own Material color tokens (the intended
   theming path), so surfaces, containers, inputs and accents all derive coherently.
   Palette from basilicom.de: navy surfaces (#000617 …), amber primary (#ffb800).
   The customer listing (build/nginx/listing.xslt) inlines the same palette — it is
   deliberately self-contained (no asset coupling to this app); keep both in sync
   when the theme changes. */
body.dark {
    --primary: #ffb800;
    --on-primary: #000617;
    --primary-container: #574400;
    --on-primary-container: #ffe08a;
    --inverse-primary: #7a5a00;

    --background: #000617;
    --on-background: #e8e6ea;
    --surface: #000617;
    --on-surface: #e8e6ea;
    --surface-dim: #000617;
    --surface-bright: #383c4e;
    --surface-variant: #383c4e;
    --on-surface-variant: #c7cbd6;
    --surface-container-lowest: #00040f;
    --surface-container-low: #141a2b;
    --surface-container: #1a1f2e;
    --surface-container-high: #1d253f;
    --surface-container-highest: #2a3350;

    --outline: #5a6070;
    --outline-variant: #2a3145;
}

/* Cards let the body texture shimmer through: 0.7 alpha applied to the surface color
   itself (beercss's article background token), not element opacity — so the card's
   text, icons and accent buttons stay fully saturated while the navy pattern shows. */
body.dark article {
    background-color: color-mix(in srgb, var(--surface-container-low) 70%, transparent);
}

/* Body texture — same asset and embedding as basilicom.de (the navy base comes from
   the --surface token above; this only overlays the pattern). */
body {
    background-image: url("vendor/basilicom/main-background.png");
    background-repeat: repeat-y;
    background-position: center -950px;
}

/* Confirmation cards (revoke / rotate): capped at half the content width and centered;
   collapses to full width on viewports narrower than the cap. */
.narrow-card {
    max-width: 37.5rem;
    margin-inline: auto;
}

/* A little breathing room so cards do not butt against the fixed app bar. */
body > main.responsive {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

/* Login: beercss `middle-align center-align` (on .login-viewport) does the flex
   centering; these only supply the viewport height below the 4rem app bar and the
   card width — beercss has no viewport-height or fixed-card-width utility. */
body.login-page main.responsive {
    padding-top: 0;
    padding-bottom: 0;
}

.login-viewport {
    min-height: calc(100vh - 4rem);
}

.login-card {
    max-width: 26rem;
    width: 100%;
    /* center-align on the wrapper centers the card but also inherits text-align:center;
       keep the card's own content left-aligned. */
    text-align: left;
}

/* Hint lines under form fields ("e.g. project/acme"). beercss 4 ships no styling
   for these, so they'd render at full body prominence; same muted tone as the
   customer listing's secondary text (scoped here — dimming the theme token would
   also dim the floating field labels). */
.field .helper {
    font-size: .8rem;
    color: #8b91a3;
}

/* Sortable dashboard tables (table-tools.js): clickable headers, direction arrow. */
th.sortable {
    cursor: pointer;
    user-select: none;
}

th[aria-sort='ascending']::after {
    content: ' ↑';
}

th[aria-sort='descending']::after {
    content: ' ↓';
}

/* The global time-zone note at the bottom of every admin page. */
.app-footer {
    margin-top: 2rem;
    font-size: .8rem;
}

.app-footer i {
    vertical-align: text-bottom;
}

/* Flash messages: a dark tint with light text, legible on the dark theme (Material
   has no "success" token, and the beercss tonal classes assume dark text). */
.flash-success {
    background-color: #14361f;
    color: #b8ecc7;
}

.flash-error {
    background-color: #45191d;
    color: #ffc4c7;
}

/* The refresh snackbar sits on beercss's inverse surface (light on our dark theme);
   the action link needs the inverse accent to stay readable there. */
#refresh-hint a {
    color: var(--inverse-primary);
    font-weight: 600;
    text-decoration: underline;
}