/* Underground Pixel — London Underground visual identity
   Roundel (red ring + blue bar), corporate blue/red, Johnston-style type.
   This file is loaded last and overrides the korrigan base + Bootstrap. */
:root {
    --up-blue:        #10069f; /* TfL corporate blue (roundel bar)   */
    --up-blue-dark:   #0a0470;
    --up-blue-bright: #0098d4; /* Victoria line blue (focus/info)    */
    --up-red:         #dc241f; /* TfL corporate red (roundel ring)   */
    --up-red-dark:    #b71d18;
    --up-green:       #007a33; /* District / Park green              */
    --up-yellow:      #ffce00; /* Circle line yellow                 */
    --up-bg:          #f4f4f2;
    --up-surface:     #ffffff;
    --up-ink:         #1c1c1c;
    --up-muted:       #5f6b7a;
    --up-border:      #d4d8dd;
    --up-font: "Gill Sans Nova", "Gill Sans", "Gill Sans MT", "Johnston",
               "Johnston100", "Frutiger", Calibri, "Trebuchet MS",
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ---- Strip the korrigan base background image + overlay + triskel ---- */
body::before,
body::after,
body > .container::before,
body > .container::after {
    display: none !important;
    background: none !important;
}

body {
    background-color: var(--up-bg) !important;
    background-image: none !important;
    color: var(--up-ink);
    font-family: var(--up-font);
    -webkit-font-smoothing: antialiased;
}

/* ---- Main content surface: clean white "platform" card ---- */
body > .container {
    background-color: var(--up-surface) !important;
    background-image: none !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    border: 1px solid var(--up-border);
    border-top: 4px solid var(--up-blue);
    border-radius: 2px;
    color: var(--up-ink);
}

body.index > .container > * {
    background-color: transparent !important;
}

/* ---- Typography & links ---- */
h1, h2, h3, h4, .header {
    font-family: var(--up-font);
    letter-spacing: 0.2px;
}

a { color: var(--up-blue); }
a:hover,
a:focus { color: var(--up-red); }

body .hennypenny { color: var(--up-ink); font-family: var(--up-font); }
.help-block { color: var(--up-muted); }

/* ================= ROUNDEL + WORDMARK ================= */
.up-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    text-decoration: none;
}
.up-brand:hover,
.up-brand:focus { text-decoration: none; }

/* The roundel: red ring with a blue bar across the middle.
   Scale the whole mark by setting font-size on .up-roundel. */
.up-roundel {
    position: relative;
    display: inline-block;
    width: 1.55em;
    height: 1.55em;
    border-radius: 50%;
    border: 0.30em solid var(--up-red);
    background: #ffffff;
    box-sizing: border-box;
    vertical-align: middle;
    flex: 0 0 auto;
}
.up-roundel-bar {
    position: absolute;
    left: -0.18em;
    right: -0.18em;
    top: 50%;
    transform: translateY(-50%);
    height: 0.36em;
    background: var(--up-blue);
}

/* Header (large) lockup: roundel + blue station nameboard */
.up-brand-lg { margin: 10px 0 16px; }
.up-brand-lg .up-roundel { font-size: 40px; }
.up-nameboard {
    display: inline-block;
    background: var(--up-blue);
    color: #ffffff !important;
    font-family: var(--up-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 30px;
    line-height: 1;
    padding: 0.30em 0.55em 0.34em;
    border-radius: 1px;
    white-space: nowrap;
}

/* Navbar (small) lockup: roundel + ink wordmark on white navbar */
.up-brand-sm { padding-top: 12px !important; padding-bottom: 12px !important; height: auto; }
.up-brand-sm .up-roundel { font-size: 22px; }
.up-wordmark {
    font-family: var(--up-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 19px;
    color: var(--up-blue) !important;
}
.up-wordmark .up-w-pixel { color: var(--up-red) !important; }

/* ---- Navbar: white station-sign bar with a thick blue underline ---- */
.navbar.navbar-default,
body .navbar-default {
    background-color: var(--up-surface) !important;
    border: 0 !important;
    border-bottom: 4px solid var(--up-blue) !important;
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-text {
    color: var(--up-ink) !important;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: var(--up-blue) !important;
    background-color: #eef0fb !important;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form { border-color: var(--up-border); }

.navbar-default .navbar-toggle { border-color: var(--up-border); }
.navbar-default .navbar-toggle .icon-bar { background-color: var(--up-blue); }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: #eef0fb; }

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
body .navbar-default .open > a,
body .navbar-default .open > a:focus,
body .navbar-default .open > a:hover,
body .navbar-default .open > a:active {
    color: var(--up-blue) !important;
    background-color: #eef0fb !important;
}

.dropdown-menu { background-color: #ffffff; border-color: var(--up-border); }
.dropdown-menu > li > a { color: var(--up-ink); }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { color: #ffffff; background-color: var(--up-blue); }

/* ---- Buttons: solid corporate-blue signage ---- */
body .btn {
    background-color: #eef0f3;
    border: 1px solid var(--up-border);
    color: var(--up-ink);
    border-radius: 2px;
    padding: 0.5em 0.9em;
    font-weight: 500;
}
body .btn:hover,
body .btn:focus,
body .btn:active {
    background-color: #e2e5ea;
    border-color: #c2c7cf;
    color: var(--up-ink);
}

.btn-primary,
.btn.btn-primary,
body .btn.btn-primary {
    background-color: var(--up-blue);
    border-color: var(--up-blue-dark);
    color: #ffffff;
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.open > .dropdown-toggle.btn-primary,
body .btn.btn-primary:hover,
body .btn.btn-primary:focus,
body .btn.btn-primary:active {
    background-color: var(--up-blue-dark);
    border-color: var(--up-blue-dark);
    color: #ffffff;
}

body .btn.btn-danger {
    background-color: var(--up-red);
    border-color: var(--up-red-dark);
    color: #ffffff;
}
body .btn.btn-danger:hover,
body .btn.btn-danger:focus { background-color: var(--up-red-dark); color: #ffffff; }

/* ---- Uploader drop zone: dashed blue "mind the gap" ---- */
body .uploader {
    border: 2px dashed var(--up-blue);
    background-color: #fafbff;
    color: var(--up-muted);
    border-radius: 2px;
}
body .uploader:hover { background-color: #eef0fb; }
body .uploader div.browser label {
    background-color: var(--up-blue);
    color: #ffffff;
}

/* ---- Toggle checkboxes (blue when on) ---- */
body input[type='checkbox'] { background-color: #c7ccd3; }
body input[type='checkbox']:checked { background-color: var(--up-blue); }

/* ---- Alerts: tube-line colour coding ---- */
.alert {
    border-radius: 2px;
    border-left-width: 5px;
}
.alert-success {
    background-color: #e7f4ec;
    border-color: var(--up-green);
    color: #0c4d24;
}
.alert-danger {
    background-color: #fdecec;
    border-color: var(--up-red);
    color: #8a1411;
}
.alert-info {
    background-color: #e6f5fb;
    border-color: var(--up-blue-bright);
    color: #0b4d63;
}
.alert-warning {
    background-color: #fff7d9;
    border-color: var(--up-yellow);
    color: #6b5800;
}

/* ---- Forms ---- */
.form-control,
.input-group-addon {
    color: var(--up-ink);
    background-color: #ffffff;
    border-color: var(--up-border);
    border-radius: 2px;
}
.form-control[readonly],
.form-control[disabled],
fieldset[disabled] .form-control {
    color: var(--up-ink);
    background-color: #f3f4f6;
    border-color: var(--up-border);
    opacity: 1;
}
.form-control:focus {
    border-color: var(--up-blue);
    box-shadow: 0 0 0 3px rgba(16, 6, 159, 0.18);
}

.modal-content { background-color: #ffffff; color: var(--up-ink); border-radius: 2px; }
.modal-content .modal-title,
.modal-content label { color: var(--up-ink); }
.modal-content .form-control {
    background-color: #ffffff;
    border-color: var(--up-border);
    color: var(--up-ink);
}

/* ---- Tables (admin / curator pages) ---- */
.table,
.table > thead > tr > th,
.table > tbody > tr > td {
    color: var(--up-ink);
    border-color: var(--up-border);
}
.table > thead > tr > th {
    border-bottom: 2px solid var(--up-blue);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.92em;
}
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: #f5f6f8;
    color: var(--up-ink);
}
.table-hover > tbody > tr:hover { background-color: #eef0fb; }

.panel { background-color: var(--up-surface); border-color: var(--up-border); border-radius: 2px; }
.panel-default > .panel-heading {
    background-color: var(--up-blue);
    color: #ffffff;
    border-color: var(--up-blue);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ---- Footer / misc ink ---- */
.help-block, .text-muted { color: var(--up-muted); }