/* Customer Portal - deliberately plain, classic styling. Navy / grey / white. */

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #e9ebee;
    color: #222;
    font: 13px/1.45 Verdana, Tahoma, Arial, sans-serif;
}

a { color: #1a4f8b; }
a:hover { color: #0d2f57; }

/* ---- Header & navigation ---- */
.header {
    background: #242424;
    border-bottom: 10px solid #eb5e28;
    color: #fff;
}
.header-inner, .nav-inner, .page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
}
.brand { font: bold 20px Verdana, Tahoma, Arial, sans-serif; color: #fff; text-decoration: none; }
.who { font-size: 12px; color: #d5dce6; }
.who a { color: #fff; }
.who form { display: inline; }
.link-button {
    background: none; border: 0; padding: 0;
    color: #fff; text-decoration: underline; font: inherit; cursor: pointer;
}

.nav { background: #d4d9e0; border-bottom: 1px solid #aab3bf; }
.nav-inner { display: flex; flex-wrap: wrap; }
.nav a {
    display: block;
    padding: 9px 16px;
    color: #23395d;
    font-weight: bold;
    text-decoration: none;
    border-right: 1px solid #b9c1cc;
}
.nav a:first-child { border-left: 1px solid #b9c1cc; }
.nav a:hover { background: #c3cad4; }
.nav a.active { background: #fff; color: #111; }

/* ---- Page body ---- */
.page { padding-top: 18px; padding-bottom: 40px; width: 100%; flex: 1 0 auto; }

/* Login page: welcome text on the left, login box on the right, a centre bar between them,
   all centred top-to-bottom in the space between header and footer. */
.page.login-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-layout {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 0 40px;
    align-items: center;
}
.login-welcome { padding: 20px 0; }
.login-welcome h1 { font-size: 26px; margin-bottom: 10px; }
.login-welcome p { margin: 0 0 10px; }
.login-welcome ul { margin: 0 0 14px; padding-left: 18px; }
.login-welcome li { margin-bottom: 6px; }

/* The centre bar stops short of the top and bottom, leaving a gap at each end. */
.login-divider {
    align-self: stretch;
    background: #aab3bf;
    margin: 30px 0;
}
.page.login-page .login-box { margin: 0; width: 100%; justify-self: end; }

@media (max-width: 760px) {
    .login-layout { grid-template-columns: 1fr; }
    .login-divider { height: 1px; margin: 4px 15%; }
    .page.login-page .login-box { justify-self: stretch; max-width: none; }
}
h1 { font: bold 22px Verdana, Tahoma, Arial, sans-serif; color: #23395d; margin: 0 0 4px; }
.intro { color: #555; margin: 0 0 16px; }
h2 { font-size: 14px; margin: 0; }

.box {
    background: #fff;
    border: 1px solid #b9c1cc;
    margin-bottom: 18px;
}
.box-head {
    background: #f1f3f6;
    border-bottom: 1px solid #b9c1cc;
    padding: 7px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.box-head a { font-size: 12px; }
.box-body { padding: 10px; }
.box .empty { padding: 14px 10px; color: #666; margin: 0; }

.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 760px) { .columns { grid-template-columns: 1fr; } }

/* ---- Summary figures ---- */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 860px) { .figures { grid-template-columns: repeat(2, 1fr); } }
.figure {
    background: #fff;
    border: 1px solid #b9c1cc;
    border-top: 4px solid #23395d;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    display: block;
}
a.figure:hover { background: #f7f8fa; }
.figure .label { font-size: 11px; text-transform: uppercase; color: #555; letter-spacing: .3px; }
.figure .value { font: bold 24px Verdana, Tahoma, Arial, sans-serif; color: #23395d; margin: 4px 0 2px; }
.figure .note { font-size: 12px; color: #555; }
.figure.warn { border-top-color: #c98a12; }
.figure.alert { border-top-color: #b02a2a; }
.figure.alert .value { color: #b02a2a; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 6px 10px; border-bottom: 1px solid #dde1e6; text-align: left; vertical-align: top; }
th { background: #f1f3f6; font-size: 12px; color: #333; white-space: nowrap; }
tbody tr:nth-child(even) { background: #f8f9fb; }
tbody tr:hover { background: #eef2f7; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.nowrap { white-space: nowrap; }
tfoot td { font-weight: bold; background: #f1f3f6; border-top: 2px solid #b9c1cc; }
.zero { color: #aaa; }
.mono { font-family: Consolas, "Courier New", monospace; }

/* ---- Status labels (no green: blue = good, amber = warning, red = problem) ---- */
.tag {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid;
    border-radius: 2px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}
.tag-ok      { color: #1a4f8b; background: #e6eef8; border-color: #9fb9d9; }
.tag-warn    { color: #8a5a00; background: #fff4dc; border-color: #e3c27a; }
.tag-bad     { color: #9b1c1c; background: #fbe7e7; border-color: #e0a3a3; }
.tag-neutral { color: #555;    background: #f0f0f0; border-color: #c8c8c8; }

/* ---- Filters & pagination ---- */
.filters { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 10px; }
.filters .group a, .filters .group strong {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid #b9c1cc;
    background: #fff;
    margin-right: -1px;
    text-decoration: none;
    font-size: 12px;
}
.filters .group strong { background: #23395d; color: #fff; border-color: #23395d; }
.filters .caption { font-size: 12px; color: #555; }

.pager { padding: 8px 10px; border-top: 1px solid #dde1e6; font-size: 12px; display: flex; justify-content: space-between; }

/* ---- Bars (seat usage, uptime) ---- */
.bar { background: #e3e6ea; border: 1px solid #c3c9d1; height: 10px; width: 100px; display: inline-block; vertical-align: middle; }
.bar span { display: block; height: 100%; background: #3c6aa3; }
.bar.full span { background: #c98a12; }

/* ---- Messages & forms ---- */
.message { background: #e6eef8; border: 1px solid #9fb9d9; padding: 8px 12px; margin-bottom: 14px; }
.message.error { background: #fbe7e7; border-color: #e0a3a3; }

dl.details { display: grid; grid-template-columns: 180px 1fr; margin: 0; }
dl.details dt, dl.details dd { padding: 6px 10px; margin: 0; border-bottom: 1px solid #eee; }
dl.details dt { font-weight: bold; background: #f8f9fb; }
@media (max-width: 560px) { dl.details { grid-template-columns: 1fr; } }

.button, button.button {
    display: inline-block;
    background: #23395d;
    color: #fff;
    border: 1px solid #142440;
    padding: 6px 14px;
    font: bold 12px Verdana, Tahoma, Arial, sans-serif;
    cursor: pointer;
    text-decoration: none;
}
.button:hover { background: #1a2c49; color: #fff; }
.button.secondary { background: #f1f3f6; color: #23395d; border-color: #b9c1cc; }

.login-box { max-width: 380px; margin: 50px auto; }
.form-row { margin-bottom: 12px; }
.form-row label { display: block; font-weight: bold; margin-bottom: 3px; }
.form-row input { width: 100%; padding: 6px; border: 1px solid #9aa4b1; font: inherit; }
.form-row .helptext, .form-row ul { font-size: 11px; color: #555; }
.errorlist { color: #9b1c1c; padding-left: 18px; margin: 4px 0; }

/* ---- images strip, above the footer ---- */
.ticker {
    background: #fff;
    border-top: 1px solid #b9c1cc;
    border-bottom: 1px solid #b9c1cc;
    overflow: hidden;
    padding: 14px 0 10px;
}
.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker-scroll 80s linear infinite;
}
.ticker-set { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker-set li { flex: none; width: 516px; margin-right: 15px; text-align: center; }
.ticker-set img { display: block; width: 516px; height: 130px; image-rendering: pixelated; }
.ticker-set span {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #23395d;
}
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ticker { overflow-x: auto; }
    .ticker-track { animation: none; }
}

.footer { text-align: center; font-size: 11px; color: #777; padding: 12px 16px 24px; }
.small { font-size: 11px; color: #666; }

/* ---- Sign-in pages (password and single sign-on) ---- */
.auth-or { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; color: #777; font-size: 11px; text-transform: uppercase; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid #dde1e6; }
.login-page .login-box form .button,
.auth-alt-button { display: block; width: 100%; text-align: center; }
.login-page .login-box .box-body > p:first-child,
.login-page .login-box .box-body > .message + p { margin-top: 0; }