/* ============================================================================
   ArmourTel Billing - portal styles
   ============================================================================

   The portal's entire custom layer is this one file, on top of stock Bootstrap
   5. It now uses the same design tokens as armour.tel, so the main site, the
   store and this portal agree on colour, radius and type.

   Two things to know before editing:

     .scrollable-menu  at the top is unrelated to the theme - it stops the long
                       customer dropdown overflowing the viewport. Leave it.

     Fonts come from pageHead() in functions.php, which loads Sora and Inter
     from the same Google Fonts request armour.tel uses. Nothing here downloads
     a font; this file only names the families.

   The navbar is the main site's white bar rather than the old navy gradient:
   translucent white, a hairline rule underneath, muted links and blue for the
   active page. That is deliberate - it is what makes the two sites read as one.

   ============================================================================ */

/* Long customer dropdown menu scrolls instead of overflowing the viewport. */
.scrollable-menu {
    height: auto;
    max-height: 500px;
    overflow-x: hidden;
}

/* ============================================================================
   Tokens - the same values as armour.tel
   ============================================================================ */

:root {
    --ink:        #0b1220;
    --navy:       #101c33;
    --text:       #1c2536;
    --muted:      #5a6779;
    --bg:         #ffffff;
    --bg-soft:    #f4f7fb;
    --border:     #e7ecf3;
    --blue:       #2563eb;
    --blue-600:   #1d4ed8;

    --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --radius-sm:  8px;
    --radius:     10px;
    --radius-md:  14px;

    --shadow-sm:  0 1px 2px rgba(11, 18, 32, .06), 0 1px 3px rgba(11, 18, 32, .08);
    --shadow-md:  0 10px 30px -12px rgba(11, 18, 32, .22);

    /* Names earlier revisions of this file used, kept so any page-level
       override that still refers to them keeps working. */
    --brand-navy: var(--navy);
    --brand-blue: var(--blue);
    --page-bg:    var(--bg-soft);
}

/* ============================================================================
   Base type
   ============================================================================ */

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg-soft) !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    color: var(--ink);
    letter-spacing: -0.02em;
}

a {
    color: var(--blue);
}

a:hover {
    color: var(--blue-600);
}

/* ============================================================================
   Brand lockup
   ----------------------------------------------------------------------------
   Markup comes from brandLockup() in functions.php: the shield SVG armour.tel
   uses, the two-tone name, and an optional muted suffix such as "Billing
   Portal". Sizes here are the main site's header values, 34px and 1.22rem.
   ============================================================================ */

.armour-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.armour-brand-mark {
    width: 34px;
    height: 34px;
    flex: none;
}

.armour-brand-name {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    white-space: nowrap;
}

.armour-brand-name span {
    color: var(--blue);
}

.armour-brand-suffix {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
}

/* ============================================================================
   Navbar - the main site's white bar
   ============================================================================ */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.86) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* The old navy bar needed a white plate behind the logo image and a fixed
   image height. The lockup is drawn on the page now, so there is no plate and
   nothing to size - this only keeps Bootstrap's navbar spacing around it. */
.navbar > .armour-brand {
    margin-right: 1rem;
}

.navbar .nav-link {
    color: var(--muted) !important;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.5rem 0.68rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--ink) !important;
    background: var(--bg-soft);
}

/* Active page: blue and heavier, no pill. Matches .nav-links a.is-active on
   the main site. The old rule painted a translucent white pill, which is
   invisible on a white bar. */
.navbar .nav-link.active,
.navbar .nav-item.active > .nav-link {
    color: var(--blue) !important;
    font-weight: 600;
    background: transparent;
}

.navbar-text {
    color: var(--muted) !important;
    font-size: 0.9rem;
    padding-right: 1rem;
}

/* Bootstrap's toggler icon is a dark SVG under .navbar-light, which is what
   adminTop.php now sets. This just sizes it to match the bar. */
.navbar-toggler {
    border-color: var(--border);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.5rem;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, .18);
}

/* "Viewing: customer" badge. bg-light is near-invisible on a white bar, so it
   gets the soft tint and a hairline instead. */
.navbar .badge.bg-light {
    background-color: var(--bg-soft) !important;
    border: 1px solid var(--border);
    color: var(--text) !important;
    font-weight: 600;
}

/* ============================================================================
   Auth pages - login, forgotten password, new password
   ----------------------------------------------------------------------------
   Same white bar as the navbar so the login screen and the portal behind it
   look like one product.
   ============================================================================ */

.auth-header {
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}

.auth-header .container {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    display: flex;
    align-items: center;
}

/* ============================================================================
   Controls
   ============================================================================ */

.btn {
    border-radius: var(--radius);
    font-weight: 600;
}

.btn-primary {
    background-color: var(--blue);
    border-color: var(--blue);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--blue-600);
    border-color: var(--blue-600);
}

.form-control,
.form-select {
    border-color: var(--border);
    border-radius: var(--radius);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, .18);
}

/* ============================================================================
   Surfaces
   ============================================================================ */

.dropdown-menu {
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.5rem;
}

.dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.9rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-soft);
    color: var(--ink);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--blue);
    color: #ffffff;
}

.dropdown-divider {
    border-top-color: var(--border);
}

.card,
.modal-content {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.card-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
}

.table {
    background-color: #ffffff;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--border);
}

.table thead th {
    border-bottom-color: var(--border);
    font-family: var(--font-display);
    font-weight: 600;
}

.pagination .page-link {
    color: var(--blue);
    border-color: var(--border);
}

.pagination .page-item.active .page-link {
    background-color: var(--blue);
    border-color: var(--blue);
}

/* ============================================================================
   Maintenance banner
   ----------------------------------------------------------------------------
   Shown while maintenance mode is on, so it is obvious from any page that the
   portal is in that state. Stays navy with an amber rule: it is an alert, and
   now that the navbar is white it stands out more, not less.
   z-index sits above the sticky navbar (1030) but below Bootstrap's modal
   backdrop (1050), so dialogs still cover it.
   ============================================================================ */

.maintenance-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem;
    background: var(--navy);
    border-top: 3px solid #e0b400;
    box-shadow: 0 -6px 22px rgba(11, 18, 32, .35);
    color: #ffd764;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

.maintenance-banner svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.maintenance-banner .mb-label {
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .maintenance-banner {
        font-size: 0.84rem;
        padding: 0.6rem 0.75rem;
    }

    .maintenance-banner svg {
        width: 16px;
        height: 16px;
    }
}