/*
 * Apeiron UI refresh — Phase 0 override layer.
 *
 * Loaded after style.css / headers/header1.css / themes/default.css and wins by
 * source order. Pure CSS overrides on the existing Bootstrap 3 / Unify markup —
 * no template structure changes. Rollback: remove the tokens.css + refresh.css
 * <link> tags from the base templates.
 */

/* ---------- Base typography ---------- */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    color: var(--color-heading);
    text-shadow: none;
    letter-spacing: -0.01em;
}

a:hover {
    color: var(--primary-color);
}

/* ---------- Top bar (logo / customer switcher / loginbar) ---------- */

.top {
    padding: 12px 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.logo-link > img {
    max-width: 200px;
    margin: 12px auto 8px;
}

.loginbar li a,
.loginbar li a:hover {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-muted);
}

.loginbar li a:hover {
    color: var(--primary-color);
}

/* ---------- Main navigation ---------- */

.header {
    border-bottom: 1px solid var(--color-border);
}

.navbar .nav > li > a {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    color: #4b5563;
    padding: 12px 18px;
    border-bottom: solid 2px var(--color-border);
}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover,
.navbar .nav > .active > a,
.navbar .nav > .active > a:focus,
.navbar .nav > .active > a:hover {
    color: var(--primary-color);
    border-bottom: solid 2px var(--primary-color);
}

.navbar .btn-navbar:hover {
    background: var(--primary-hover, var(--primary-color));
}

/* Bootstrap 3 paints open dropdown parents gray — keep the underline style */
.navbar .nav > .open > a,
.navbar .nav > .open > a:hover,
.navbar .nav > .open > a:focus {
    background: none;
    color: var(--primary-color);
    border-bottom: solid 2px var(--primary-color);
}

/* ---------- Dropdown menus ---------- */

.dropdown-menu {
    padding: 6px 0;
    border: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    -webkit-box-shadow: var(--shadow-md);
}

.dropdown-menu li a {
    color: var(--color-text);
    font-size: 13px;
    padding: 8px 16px;
    border-bottom: none;
}

/* .header-prefixed selectors match a desktop media-query rule in header1.css
   that would otherwise out-rank these overrides */
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a,
.header .dropdown-menu li > a:hover {
    color: var(--color-text) !important;
    background: var(--color-surface-alt) !important;
}

.dropdown-menu li.active > a,
.dropdown-menu .active > a,
.header .dropdown-menu li.active > a,
.header .dropdown-menu .active > a {
    color: var(--primary-color) !important;
    background-color: var(--color-surface-alt) !important;
    background-color: var(--primary-soft, var(--color-surface-alt)) !important;
}

/* ---------- Buttons ---------- */

.btn {
    font-family: var(--font-body);
    font-weight: 500;
    border-radius: var(--radius-md);
    box-shadow: none;
    text-shadow: none;
    background-image: none;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.btn:focus,
.btn:active:focus {
    outline: 0;
    box-shadow: 0 0 0 3px var(--primary-soft, rgba(0, 0, 0, 0.08));
}

.btn-default {
    color: var(--color-text);
    background: var(--color-surface);
    border-color: var(--color-border-strong);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    color: var(--color-text);
    background: var(--color-surface-alt);
    border-color: var(--color-border-strong);
}

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

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

.btn-success,
.btn-success:focus {
    color: #fff;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-success:hover,
.btn-success:active,
.btn-success:active:hover {
    color: #fff;
    background: var(--primary-hover, var(--primary-color));
    border-color: var(--primary-hover, var(--primary-color));
}

/* ---------- Forms ---------- */

label {
    font-weight: 500;
}

.form-control {
    border-radius: var(--radius-md);
    border-color: var(--color-border-strong);
    box-shadow: none;
    color: var(--color-text);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft, rgba(0, 0, 0, 0.06));
}

/* Select2 single-selects: app.css puts the visible box on span.select2 and
   zeroes .select2-selection--single. Reskin the wrapper — re-bordering the
   inner element double-boxes it. */
span.select2.select2-container {
    border-color: var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: none;
}

span.select2.select2-container--focus,
span.select2.select2-container--open {
    border-color: var(--primary-color);
}

.select2-dropdown {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary-color);
}

/* ---------- Tables ---------- */

.table > thead > tr > th {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-strong);
}

.table > tbody > tr > td {
    border-top: 1px solid var(--color-border);
}

.table-hover > tbody > tr:hover,
.table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--color-surface-alt);
}

/* ---------- Panels & wells ---------- */

.panel {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.panel-heading {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.panel-default > .panel-heading {
    font-weight: 600;
    color: var(--color-heading);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}

.well {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

/* ---------- Tabs (replaces the solid-fill active tab from themes/default.css) ---------- */

.nav-tabs {
    border-bottom: 1px solid var(--color-border-strong);
}

.nav-tabs > li > a {
    font-weight: 500;
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.nav-tabs > li > a:hover {
    color: var(--primary-color);
    background: none;
    border: none;
    border-bottom: 2px solid var(--color-border-strong);
}

.nav-tabs li.active a,
.nav-tabs li.active a:hover,
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
    color: var(--primary-color);
    background: none;
    border: none;
    border-bottom: 2px solid var(--primary-color);
}

/* ---------- Breadcrumbs & pagination ---------- */

.breadcrumb {
    background: none;
    padding-left: 0;
    font-size: 13px;
}

.pagination li a {
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm) !important;
    margin: 0 2px;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
    color: #fff;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* ---------- Alerts, labels, badges ---------- */

.alert {
    border-radius: var(--radius-md);
}

.label {
    font-weight: 500;
    border-radius: var(--radius-sm);
}

/* ---------- Modals ---------- */

.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--color-border);
}

.modal-footer {
    border-top: 1px solid var(--color-border);
}

/* ---------- Footer ---------- */

.footer {
    background: var(--brand-coal);
    color: #cfcfcf;
}

.footer p {
    color: #cfcfcf;
}

.footer a:hover,
.footer .dl-horizontal a:hover,
.copyright a:hover {
    color: #ffffff !important;
}

.copyright {
    background: #2e2e2e;
    border-top: 1px solid #4a4a4a;
}