/* ─────────────────────────────────────────────────────────────
   alb.css — Aion Licensing & Billing, in Aion New Media's brand.

   Deliberately NOT a copy of the public marketing site's site.css
   (nav-with-icons, particle effects, portfolio grid, terms modal —
   none of that applies to a login-gated internal admin tool). This
   pulls just the brand tokens (palette, fonts, the fixed hero
   background technique from aion.co.uk/portfolio) and applies them
   to ALB's own actual UI: a header bar, data tables, forms, buttons,
   status banners.
   ───────────────────────────────────────────────────────────── */

:root {
    --navy: #091929;
    --navy-panel: rgba(9, 25, 41, 0.94);
    --cyan: #13b5cf;
    --cyan-hover: #20c5e0;
    --cyan-deep: #0c77a3;
    --sage: #6aad87;
    --text-light: #f0f4f7;
    --text-light-dim: rgba(240, 244, 247, 0.65);
    --danger: #d33;
    --font: 'DM Sans', 'Quicksand', sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    color: #1c2733;
    background-color: var(--navy);
}

/* ─── Fixed atmospheric background — same technique as
   aion.co.uk/portfolio's #wrapper: a fixed, full-bleed photo behind
   the whole page, with content panels sitting on solid/near-opaque
   backgrounds on top so nothing readability-critical (tables, forms)
   depends on the photo showing through. ─── */
#wrapper {
    min-height: 100vh;
    background-image: url('/images/BAKP.jpg');
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}
@media (max-width: 480px) {
    /* background-attachment: fixed is unreliable on iOS Safari —
       same fallback the source site uses. */
    #wrapper {
        background: url('/images/BAKM.jpg') no-repeat top center !important;
        background-attachment: fixed !important;
        background-size: contain !important;
        background-color: var(--cyan-deep) !important;
    }
}

/* ─── Header ─── */
.alb-header {
    background: var(--navy-panel);
    border-bottom: 1px solid rgba(19, 181, 207, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.alb-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 24px;
    flex-wrap: wrap;
}
.alb-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.alb-logo img { display: block; height: 22px; width: auto; }
.alb-logo-suffix {
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-light-dim);
    border-left: 1px solid rgba(240, 244, 247, 0.2);
    padding-left: 10px;
}
.alb-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.alb-nav a {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-light-dim);
    text-decoration: none;
}
.alb-nav a:hover { color: var(--text-light); }
.alb-user {
    font-size: 12px;
    color: var(--text-light-dim);
}
.alb-signout button {
    background: none;
    border: 1px solid rgba(240, 244, 247, 0.25);
    color: var(--text-light-dim);
    font-family: var(--font);
    font-size: 12px;
    padding: 6px 14px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.alb-signout button:hover { border-color: var(--cyan); color: var(--text-light); }

/* ─── Page content shell ─── */
.alb-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 64px;
}
.alb-panel {
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 12px 32px rgba(6, 18, 30, 0.35);
    padding: 32px;
    margin-bottom: 24px;
}
.alb-panel h1, .alb-panel h2 {
    font-family: var(--font);
    color: var(--navy);
    margin-top: 0;
}
.alb-panel h1 { font-size: 22px; font-weight: 600; }
.alb-panel h2 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }

/* Auth pages (Login) — centered card straight on the atmospheric
   background, no header bar. */
.alb-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.alb-auth-card {
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 20px 48px rgba(6, 18, 30, 0.45);
    padding: 40px;
    width: 100%;
    max-width: 380px;
}
.alb-wordmark {
    font-family: var(--font);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.10em;
    color: var(--navy);
    margin-bottom: 28px;
}
.alb-wordmark span {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cyan-deep);
    margin-top: 2px;
}

/* ─── Forms ─── */
.alb-field { margin-bottom: 18px; }
.alb-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5a6a78;
    margin-bottom: 6px;
}
.alb-field input[type="text"],
.alb-field input[type="email"],
.alb-field input[type="password"],
.alb-field input[type="number"],
.alb-field select,
.alb-field textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--font);
    font-size: 14px;
    border: 1px solid #d4dbe0;
    border-radius: 3px;
    background: #fff;
}
.alb-field textarea { resize: vertical; min-height: 80px; }
.alb-field input:focus,
.alb-field select:focus,
.alb-field textarea:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(19, 181, 207, 0.15);
}
.alb-field-hint { font-size: 12px; color: #8a97a3; margin-top: 4px; }
.alb-checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5a6a78; }

/* ─── Buttons ─── */
.alb-btn {
    display: inline-block;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 10px 20px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s, opacity 0.2s;
}
.alb-btn-primary, .alb-btn-secondary { background: var(--cyan); color: #ffffff; }
.alb-btn-primary:hover, .alb-btn-secondar:hovery { background: var(--cyan-hover); }
.alb-btn-block { display: block; width: 100%; }

/* ─── Status banner (TempData messages) ─── */
.alb-status {
    padding: 12px 16px;
    border-radius: 3px;
    background: rgba(19, 181, 207, 0.10);
    border: 1px solid rgba(19, 181, 207, 0.35);
    color: #FFFFFF;
    font-size: 13px;
    margin-bottom: 20px;
}

/* ─── Data tables ─── */
.alb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.alb-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5a6a78;
    padding: 10px 12px;
    border-bottom: 2px solid #e1e6ea;
}
.alb-table td {
    padding: 12px;
    border-bottom: 1px solid #eef1f3;
    vertical-align: middle;
}
.alb-table tbody tr:hover { background: #f7f9fa; }
.alb-table a { color: var(--cyan-deep); text-decoration: none; font-weight: 600; }
.alb-table a:hover { color: var(--cyan); }

/* ─── Table-cell action stacks (Client Detail's Subscriptions/One-off invoices
   Actions columns) — each row's actions stack vertically at a consistent width,
   rather than squeezing a reason input beside a button on one line. ─── */
.alb-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 170px;
}
.alb-actions-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.alb-actions-group:not(:first-child) {
    padding-top: 12px;
    border-top: 1px solid #eef1f3;
}
.alb-actions-input {
    width: 100%;
    padding: 6px 8px;
    font-family: var(--font);
    font-size: 12px;
    border: 1px solid #d4dbe0;
    border-radius: 3px;
    background: #fff;
}
.alb-actions-note {
    font-size: 12px;
    color: #5a6a78;
    margin: 0;
}

/* ─── Status pills ─── */
.alb-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 999px;
}
.alb-pill-current { background: rgba(106, 173, 135, 0.16); color: #3d7a58; }
.alb-pill-pending { background: rgba(19, 181, 207, 0.14); color: #0c5a70; }
.alb-pill-grace { background: rgba(230, 165, 30, 0.16); color: #916007; }
.alb-pill-blocked { background: rgba(211, 51, 51, 0.14); color: var(--danger); }
.alb-pill-cancelled { background: rgba(90, 106, 120, 0.14); color: #5a6a78; }

/* ─── Provisioning checklist ─── */
.alb-checklist { list-style: none; margin: 0; padding: 0; }
.alb-checklist li { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.alb-checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font);
    font-size: 13px;
    color: #1c2733;
    background: #f7f9fa;
    border: 1px solid #e1e6ea;
    border-radius: 3px;
    padding: 6px 12px;
    cursor: pointer;
}
.alb-checklist-item:hover { border-color: var(--cyan); }
.alb-checklist-item.is-complete { background: rgba(106, 173, 135, 0.10); border-color: rgba(106, 173, 135, 0.4); color: #3d7a58; }
.alb-checklist-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: 1px solid #b8c2ca;
    border-radius: 2px;
    font-size: 11px;
    color: #3d7a58;
}
.is-complete .alb-checklist-box { border-color: #3d7a58; background: rgba(106, 173, 135, 0.2); }
.alb-checklist-meta { font-size: 11px; color: #8a97a3; }

/* ─── Summary stat row (Dashboard) ─── */
.alb-stats { display: flex; gap: 16px; flex-wrap: wrap; margin: 20px 0; }
.alb-stat {
    flex: 1;
    min-width: 130px;
    background: #f7f9fa;
    border-radius: 4px;
    padding: 16px 18px;
}
.alb-stat .value { font-size: 24px; font-weight: 700; color: var(--navy); }
.alb-stat .label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5a6a78;
}