/*
 * Modern UI theme (PoC) — overlay on top of the existing AdminLTE 2 markup.
 *
 * Activation: body carries `modern` plus a variant class (`modern-light` or
 * `modern-dark`). Without these classes this file has no effect, so the
 * classic AdminLTE skins keep working unchanged.
 *
 * Design direction "Haltestelle": deep transit green + signal yellow taken
 * from the German bus stop sign, sidebar navigation rendered as a bus route
 * line with stops.
 */

@font-face {
    font-family: 'InterVariable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../fonts/InterVariable.woff2') format('woff2');
}

/* ------------------------------------------------------------------ */
/* Design tokens                                                       */
/* ------------------------------------------------------------------ */

body.modern-light {
    color-scheme: light;
    --bb-bg: #f1f4f2;
    --bb-surface: #ffffff;
    --bb-surface-2: #f6f9f7;
    --bb-border: #dde5df;
    --bb-border-strong: #c8d4cc;
    --bb-text: #1a2620;
    --bb-text-muted: #617168;
    --bb-primary: #046a38;
    --bb-primary-hover: #0a814a;
    --bb-primary-soft: #e2f1e8;
    --bb-on-primary: #ffffff;
    --bb-accent: #ffcc00;
    --bb-on-accent: #045130;
    --bb-danger: #c0392b;
    --bb-danger-soft: #fbeae8;
    --bb-warning: #b97c07;
    --bb-warning-soft: #fdf3dc;
    --bb-info: #26708f;
    --bb-info-soft: #e4f0f5;
    --bb-success: #046a38;
    --bb-success-soft: #e2f1e8;
    --bb-header-bg: #ffffff;
    --bb-sidebar-bg: #102018;
    --bb-sidebar-text: #a7b8ae;
    --bb-sidebar-line: #33493e;
    --bb-sidebar-active-bg: #1c3227;
    --bb-shadow: 0 1px 2px rgba(12, 32, 22, 0.05), 0 4px 14px rgba(12, 32, 22, 0.06);
    --bb-shadow-lg: 0 8px 30px rgba(12, 32, 22, 0.16);
}

body.modern-dark {
    color-scheme: dark;
    --bb-bg: #0e1512;
    --bb-surface: #171f1b;
    --bb-surface-2: #1d2721;
    --bb-border: #2b382f;
    --bb-border-strong: #3a4a3f;
    --bb-text: #e7eeea;
    --bb-text-muted: #93a59a;
    --bb-primary: #1ea05f;
    --bb-primary-hover: #27b56e;
    --bb-primary-soft: #14301f;
    --bb-on-primary: #ffffff;
    --bb-accent: #ffd23f;
    --bb-on-accent: #1c2a1d;
    --bb-danger: #e06055;
    --bb-danger-soft: #35201d;
    --bb-warning: #e0a93e;
    --bb-warning-soft: #322a17;
    --bb-info: #58a5c4;
    --bb-info-soft: #16282f;
    --bb-success: #1ea05f;
    --bb-success-soft: #14301f;
    --bb-header-bg: #131b17;
    --bb-sidebar-bg: #0a110d;
    --bb-sidebar-text: #93a59a;
    --bb-sidebar-line: #2b382f;
    --bb-sidebar-active-bg: #1a2a20;
    --bb-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
    --bb-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.45);
}

body.modern-blue-light {
    color-scheme: light;
    --bb-bg: #f1f3f6;
    --bb-surface: #ffffff;
    --bb-surface-2: #f6f8fa;
    --bb-border: #dee3ea;
    --bb-border-strong: #c8d1dc;
    --bb-text: #1a2230;
    --bb-text-muted: #5f6b7d;
    --bb-primary: #1a56a0;
    --bb-primary-hover: #2266ba;
    --bb-primary-soft: #e4edf8;
    --bb-on-primary: #ffffff;
    --bb-accent: #ffb020;
    --bb-on-accent: #1c2536;
    --bb-danger: #c0392b;
    --bb-danger-soft: #fbeae8;
    --bb-warning: #b97c07;
    --bb-warning-soft: #fdf3dc;
    --bb-info: #26708f;
    --bb-info-soft: #e4f0f5;
    --bb-success: #1e7d43;
    --bb-success-soft: #e3f0e8;
    --bb-header-bg: #ffffff;
    --bb-sidebar-bg: #0f1826;
    --bb-sidebar-text: #a5b1c2;
    --bb-sidebar-line: #31405a;
    --bb-sidebar-active-bg: #1b2a44;
    --bb-shadow: 0 1px 2px rgba(12, 22, 38, 0.05), 0 4px 14px rgba(12, 22, 38, 0.06);
    --bb-shadow-lg: 0 8px 30px rgba(12, 22, 38, 0.16);
}

body.modern-blue-dark {
    color-scheme: dark;
    --bb-bg: #0d1218;
    --bb-surface: #151c26;
    --bb-surface-2: #1b2431;
    --bb-border: #2a3648;
    --bb-border-strong: #3a4a61;
    --bb-text: #e7ecf2;
    --bb-text-muted: #93a0b4;
    --bb-primary: #3579cf;
    --bb-primary-hover: #4a8ada;
    --bb-primary-soft: #14263e;
    --bb-on-primary: #ffffff;
    --bb-accent: #ffc04d;
    --bb-on-accent: #2a2210;
    --bb-danger: #e06055;
    --bb-danger-soft: #35201d;
    --bb-warning: #e0a93e;
    --bb-warning-soft: #322a17;
    --bb-info: #58a5c4;
    --bb-info-soft: #16282f;
    --bb-success: #2fae74;
    --bb-success-soft: #14301f;
    --bb-header-bg: #121924;
    --bb-sidebar-bg: #0a0f16;
    --bb-sidebar-text: #93a0b4;
    --bb-sidebar-line: #2a3648;
    --bb-sidebar-active-bg: #182438;
    --bb-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
    --bb-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.45);
}

body.modern-purple-light {
    color-scheme: light;
    --bb-bg: #f3f2f6;
    --bb-surface: #ffffff;
    --bb-surface-2: #f8f6fa;
    --bb-border: #e2dfe9;
    --bb-border-strong: #cdc7da;
    --bb-text: #221c2e;
    --bb-text-muted: #6a6377;
    --bb-primary: #5e4390;
    --bb-primary-hover: #6f52a6;
    --bb-primary-soft: #eee9f6;
    --bb-on-primary: #ffffff;
    --bb-accent: #ffc857;
    --bb-on-accent: #332752;
    --bb-danger: #c0392b;
    --bb-danger-soft: #fbeae8;
    --bb-warning: #b97c07;
    --bb-warning-soft: #fdf3dc;
    --bb-info: #26708f;
    --bb-info-soft: #e4f0f5;
    --bb-success: #1e7d43;
    --bb-success-soft: #e3f0e8;
    --bb-header-bg: #ffffff;
    --bb-sidebar-bg: #161022;
    --bb-sidebar-text: #aea6c0;
    --bb-sidebar-line: #3c3355;
    --bb-sidebar-active-bg: #251c3a;
    --bb-shadow: 0 1px 2px rgba(24, 16, 40, 0.05), 0 4px 14px rgba(24, 16, 40, 0.06);
    --bb-shadow-lg: 0 8px 30px rgba(24, 16, 40, 0.16);
}

body.modern-purple-dark {
    color-scheme: dark;
    --bb-bg: #100d16;
    --bb-surface: #181320;
    --bb-surface-2: #1f1929;
    --bb-border: #302743;
    --bb-border-strong: #41365a;
    --bb-text: #ebe7f2;
    --bb-text-muted: #9d94b0;
    --bb-primary: #7f5ac2;
    --bb-primary-hover: #8f6cd0;
    --bb-primary-soft: #241a38;
    --bb-on-primary: #ffffff;
    --bb-accent: #ffd166;
    --bb-on-accent: #2a2210;
    --bb-danger: #e06055;
    --bb-danger-soft: #35201d;
    --bb-warning: #e0a93e;
    --bb-warning-soft: #322a17;
    --bb-info: #58a5c4;
    --bb-info-soft: #16282f;
    --bb-success: #2fae74;
    --bb-success-soft: #14301f;
    --bb-header-bg: #151020;
    --bb-sidebar-bg: #0c0913;
    --bb-sidebar-text: #9d94b0;
    --bb-sidebar-line: #302743;
    --bb-sidebar-active-bg: #231a36;
    --bb-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
    --bb-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.45);
}

body.modern-red-light {
    color-scheme: light;
    --bb-bg: #f6f2f2;
    --bb-surface: #ffffff;
    --bb-surface-2: #faf6f6;
    --bb-border: #e9dede;
    --bb-border-strong: #d9c7c7;
    --bb-text: #2b1c1e;
    --bb-text-muted: #7a6462;
    --bb-primary: #a32638;
    --bb-primary-hover: #b93247;
    --bb-primary-soft: #f8e8ea;
    --bb-on-primary: #ffffff;
    --bb-accent: #f2b705;
    --bb-on-accent: #3d1220;
    --bb-danger: #c0392b;
    --bb-danger-soft: #fbeae8;
    --bb-warning: #b97c07;
    --bb-warning-soft: #fdf3dc;
    --bb-info: #26708f;
    --bb-info-soft: #e4f0f5;
    --bb-success: #1e7d43;
    --bb-success-soft: #e3f0e8;
    --bb-header-bg: #ffffff;
    --bb-sidebar-bg: #1e1013;
    --bb-sidebar-text: #c0a8ab;
    --bb-sidebar-line: #553339;
    --bb-sidebar-active-bg: #361b21;
    --bb-shadow: 0 1px 2px rgba(40, 14, 18, 0.05), 0 4px 14px rgba(40, 14, 18, 0.06);
    --bb-shadow-lg: 0 8px 30px rgba(40, 14, 18, 0.16);
}

body.modern-red-dark {
    color-scheme: dark;
    --bb-bg: #151011;
    --bb-surface: #1e1618;
    --bb-surface-2: #261c1e;
    --bb-border: #3c2c2f;
    --bb-border-strong: #4f3a3e;
    --bb-text: #f0e9ea;
    --bb-text-muted: #ab9598;
    --bb-primary: #d04f63;
    --bb-primary-hover: #da6276;
    --bb-primary-soft: #331b20;
    --bb-on-primary: #ffffff;
    --bb-accent: #ffc94d;
    --bb-on-accent: #2a2210;
    --bb-danger: #e06055;
    --bb-danger-soft: #35201d;
    --bb-warning: #e0a93e;
    --bb-warning-soft: #322a17;
    --bb-info: #58a5c4;
    --bb-info-soft: #16282f;
    --bb-success: #2fae74;
    --bb-success-soft: #14301f;
    --bb-header-bg: #1a1315;
    --bb-sidebar-bg: #120c0d;
    --bb-sidebar-text: #ab9598;
    --bb-sidebar-line: #3c2c2f;
    --bb-sidebar-active-bg: #2c1b1f;
    --bb-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
    --bb-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.45);
}

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

body.modern {
    font-family: 'InterVariable', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0.005em;
    color: var(--bb-text);
    background-color: var(--bb-bg);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'tnum' off;
}

body.modern .wrapper,
body.modern .content-wrapper {
    background-color: var(--bb-bg);
    color: var(--bb-text);
}

body.modern h1, body.modern h2, body.modern h3,
body.modern h4, body.modern h5 {
    font-family: inherit;
    color: var(--bb-text);
}

body.modern a {
    color: var(--bb-primary);
}

body.modern a:hover,
body.modern a:focus {
    color: var(--bb-primary-hover);
}

/* keep FullCalendar's white event text despite the themed link color */
body.modern a.fc-event,
body.modern a.fc-event:hover,
body.modern a.fc-event:focus {
    color: #ffffff;
}

body.modern ::selection {
    background: var(--bb-accent);
    color: var(--bb-on-accent);
}

body.modern .content-header > h1 {
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin: 4px 0 2px;
}

body.modern .content-header > h1 small,
body.modern h1 small, body.modern h3 small {
    color: var(--bb-text-muted);
}

body.modern .text-muted {
    color: var(--bb-text-muted);
}

body.modern hr {
    border-top-color: var(--bb-border);
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

body.modern .main-header .navbar {
    background-color: var(--bb-header-bg);
    border-bottom: 1px solid var(--bb-border);
}

body.modern .main-header .navbar .sidebar-toggle {
    color: var(--bb-text-muted);
}

body.modern .main-header .navbar .sidebar-toggle:hover {
    color: var(--bb-text);
    background: var(--bb-surface-2);
}

body.modern .main-header .navbar .nav > li > a {
    color: var(--bb-text-muted);
}

body.modern .main-header .navbar .nav > li > a:hover,
body.modern .main-header .navbar .nav > li > a:focus,
body.modern .main-header .navbar .nav .open > a {
    color: var(--bb-text);
    background: var(--bb-surface-2);
}

body.modern .main-header .navbar .navbar-text span {
    color: var(--bb-text-muted) !important;
    font-size: 12px;
}

body.modern .main-header .logo {
    background-color: var(--bb-sidebar-bg);
    color: #ffffff;
    font-family: inherit;
    font-weight: 650;
    letter-spacing: -0.01em;
    border-bottom: 1px solid var(--bb-sidebar-line);
}

body.modern .main-header .logo:hover {
    background-color: var(--bb-sidebar-bg);
}

/* "H" sign badge for the collapsed logo */
body.modern .main-header .logo .logo-mini b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bb-accent);
    color: var(--bb-on-accent);
    font-size: 12px;
    font-weight: 750;
}

body.modern .main-header .navbar .nav > li > a > .label {
    background: var(--bb-accent);
    color: var(--bb-on-accent);
    font-weight: 700;
}

/* User menu dropdown */
body.modern .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    background-color: var(--bb-primary);
    border-radius: 10px 10px 0 0;
}

body.modern .navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    background-color: var(--bb-surface-2);
    border-radius: 0 0 10px 10px;
}

body.modern .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default {
    color: var(--bb-text);
}

/* Notification dropdown */
body.modern .navbar-nav > .notifications-menu > .dropdown-menu > li.header {
    background: var(--bb-surface-2);
    color: var(--bb-text-muted);
    border-radius: 10px 10px 0 0;
    border-color: var(--bb-border);
}

body.modern .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a {
    background: var(--bb-surface-2);
    color: var(--bb-primary);
    border-radius: 0 0 10px 10px;
    border-color: var(--bb-border);
}

body.modern .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
    background: var(--bb-surface);
    color: var(--bb-text);
    border-bottom-color: var(--bb-border);
}

body.modern .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover {
    background: var(--bb-surface-2);
}

/* ------------------------------------------------------------------ */
/* Sidebar — the route line                                            */
/* ------------------------------------------------------------------ */

body.modern .main-sidebar {
    background-color: var(--bb-sidebar-bg);
}

body.modern .sidebar {
    padding-bottom: 24px;
}

body.modern .user-panel {
    padding: 14px 12px;
    overflow: hidden;
}

/* without the avatar image the panel has no height, so .info must flow */
body.modern .user-panel > .info {
    position: static;
    padding: 0 5px;
}

body.modern .user-panel > .info,
body.modern .user-panel > .info > p {
    color: #ffffff;
    font-weight: 600;
}

body.modern .user-panel > .info > small {
    color: var(--bb-sidebar-text);
    font-weight: 400;
}

/* the bundled bb.png roundel does not fit the modern surfaces */
body.modern .user-panel > .image > img,
body.modern .navbar-nav > .user-menu > .dropdown-toggle > .user-image,
body.modern .navbar-nav > .user-menu > .dropdown-menu > .user-header > img {
    display: none;
}

body.modern .navbar-nav > .user-menu > .dropdown-toggle > .hidden-xs {
    display: inline !important;
}

body.modern .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    height: auto;
    padding: 18px;
}

body.modern .sidebar-menu > li > a {
    color: var(--bb-sidebar-text);
    font-weight: 500;
    border-left: 3px solid transparent;
}

body.modern .sidebar-menu > li > a:hover,
body.modern .sidebar-menu > li.active > a {
    color: #ffffff;
    background: var(--bb-sidebar-active-bg);
}

body.modern .sidebar-menu > li.active > a {
    border-left-color: var(--bb-accent);
}

/* calm the oversized fa-2x menu icons */
body.modern .sidebar-menu li > a > .fa {
    font-size: 15px;
    width: 22px;
    text-align: center;
    opacity: 0.85;
}

body.modern .sidebar-menu li.active > a > .fa {
    color: var(--bb-accent);
    opacity: 1;
}

body.modern .sidebar-menu li > a > .pull-right-container > .fa-angle-left {
    font-size: 13px;
}

/* Submenus as a route line with stops */
body.modern .sidebar-menu .treeview-menu {
    background: var(--bb-sidebar-bg);
    padding-left: 0;
}

body.modern .treeview-menu > li > a {
    color: var(--bb-sidebar-text);
    position: relative;
    padding: 7px 5px 7px 44px;
}

body.modern .treeview-menu > li > a::before {
    content: '';
    position: absolute;
    left: 21px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bb-sidebar-line);
}

body.modern .treeview-menu > li > a::after {
    content: '';
    position: absolute;
    left: 17px;
    top: 50%;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bb-sidebar-line);
    background: var(--bb-sidebar-bg);
}

body.modern .treeview-menu > li > a:hover,
body.modern .treeview-menu > li.active > a {
    color: #ffffff;
}

body.modern .treeview-menu > li.active > a::after {
    border-color: var(--bb-accent);
    background: var(--bb-accent);
}

body.modern .treeview-menu > li > a > .fa {
    display: none;
}

/* collapsed mini-sidebar flyout (desktop only, mobile expands inline) */
@media (min-width: 768px) {
    body.modern.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
        background: var(--bb-sidebar-bg);
        box-shadow: var(--bb-shadow-lg);
        border-radius: 0 0 10px 0;
    }

    body.modern.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span:not(.pull-right) {
        background: var(--bb-sidebar-active-bg);
        color: #ffffff;
        border-radius: 0 10px 0 0;
    }
}

/* ------------------------------------------------------------------ */
/* Content boxes as cards                                              */
/* ------------------------------------------------------------------ */

body.modern .box {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-top: 1px solid var(--bb-border);
    border-radius: 12px;
    box-shadow: var(--bb-shadow);
}

body.modern .box.box-primary,
body.modern .box.box-info,
body.modern .box.box-success,
body.modern .box.box-warning,
body.modern .box.box-danger,
body.modern .box.box-default {
    border-top-color: var(--bb-border);
}

body.modern .box-header {
    color: var(--bb-text);
    border-radius: 12px 12px 0 0;
}

body.modern .box-header.with-border {
    border-bottom-color: var(--bb-border);
}

body.modern .box-header .box-title {
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.005em;
}

body.modern .box-footer {
    background: var(--bb-surface-2);
    border-top-color: var(--bb-border);
    border-radius: 0 0 12px 12px;
}

/* Dashboard stat tiles (small-box) as quiet cards with a tinted icon chip */
body.modern .small-box {
    border-radius: 12px;
    border: 1px solid var(--bb-border);
    box-shadow: var(--bb-shadow);
    background: var(--bb-surface) !important;
}

body.modern .small-box > .inner {
    padding: 16px 18px;
}

body.modern .small-box h3 {
    color: var(--bb-text);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.02em;
    font-feature-settings: 'tnum' on;
}

body.modern .small-box p {
    color: var(--bb-text-muted);
    font-size: 13px;
}

body.modern .small-box .icon {
    top: 14px;
    right: 12px;
    font-size: 26px;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: 10px;
    color: var(--bb-primary);
    background: var(--bb-primary-soft);
}

body.modern .small-box.bg-aqua .icon { color: var(--bb-info); background: var(--bb-info-soft); }
body.modern .small-box.bg-yellow .icon { color: var(--bb-warning); background: var(--bb-warning-soft); }
body.modern .small-box.bg-red .icon { color: var(--bb-danger); background: var(--bb-danger-soft); }

body.modern .small-box > .small-box-footer {
    background: var(--bb-surface-2) !important;
    color: var(--bb-primary) !important;
    font-weight: 550;
    border-top: 1px solid var(--bb-border);
    border-radius: 0 0 12px 12px;
    text-align: left;
    padding-left: 18px;
}

body.modern .small-box > .small-box-footer:hover {
    color: var(--bb-primary-hover) !important;
    background: var(--bb-primary-soft) !important;
}

/* info-box (if used) */
body.modern .info-box {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    box-shadow: var(--bb-shadow);
    color: var(--bb-text);
}

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

body.modern .btn {
    border-radius: 8px;
    font-weight: 550;
    border-width: 1px;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

body.modern .btn.btn-flat {
    border-radius: 8px;
}

body.modern .btn-primary {
    background-color: var(--bb-primary);
    border-color: var(--bb-primary);
    color: var(--bb-on-primary);
}

body.modern .btn-primary:hover,
body.modern .btn-primary:focus,
body.modern .btn-primary:active,
body.modern .btn-primary:active:hover,
body.modern .btn-primary.active {
    background-color: var(--bb-primary-hover);
    border-color: var(--bb-primary-hover);
    color: var(--bb-on-primary);
}

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

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

body.modern .btn-success {
    background-color: var(--bb-success);
    border-color: var(--bb-success);
}

body.modern .btn-success:hover,
body.modern .btn-success:focus,
body.modern .btn-success:active {
    background-color: var(--bb-primary-hover);
    border-color: var(--bb-primary-hover);
}

body.modern .btn-danger {
    background-color: var(--bb-danger);
    border-color: var(--bb-danger);
}

body.modern .btn-danger:hover,
body.modern .btn-danger:focus,
body.modern .btn-danger:active {
    filter: brightness(0.92);
}

body.modern .btn-warning {
    background-color: var(--bb-warning);
    border-color: var(--bb-warning);
    color: #ffffff;
}

body.modern .btn-info {
    background-color: var(--bb-info);
    border-color: var(--bb-info);
}

body.modern .btn[disabled],
body.modern .btn.disabled {
    opacity: 0.5;
}

/* anchor buttons must not inherit the global link color */
body.modern a.btn-primary, body.modern a.btn-primary:hover, body.modern a.btn-primary:focus,
body.modern a.btn-success, body.modern a.btn-success:hover, body.modern a.btn-success:focus,
body.modern a.btn-danger, body.modern a.btn-danger:hover, body.modern a.btn-danger:focus,
body.modern a.btn-warning, body.modern a.btn-warning:hover, body.modern a.btn-warning:focus,
body.modern a.btn-info, body.modern a.btn-info:hover, body.modern a.btn-info:focus {
    color: var(--bb-on-primary);
}

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

body.modern label {
    color: var(--bb-text);
    font-weight: 550;
    font-size: 13px;
}

body.modern .form-control {
    background-color: var(--bb-surface);
    border: 1px solid var(--bb-border-strong);
    border-radius: 8px;
    color: var(--bb-text);
    box-shadow: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

body.modern .form-control:focus {
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 3px var(--bb-primary-soft);
}

body.modern .form-control::placeholder {
    color: var(--bb-text-muted);
    opacity: 0.7;
}

body.modern .form-control[disabled],
body.modern .form-control[readonly] {
    background-color: var(--bb-surface-2);
    color: var(--bb-text-muted);
}

body.modern .help-block {
    color: var(--bb-text-muted);
}

body.modern .has-error .form-control {
    border-color: var(--bb-danger);
    box-shadow: none;
}

body.modern .has-error .help-block,
body.modern .has-error .control-label,
body.modern .has-error label {
    color: var(--bb-danger);
}

body.modern .input-group-addon {
    background: var(--bb-surface-2);
    border-color: var(--bb-border-strong);
    color: var(--bb-text-muted);
    border-radius: 8px;
}

/* Select2 */
body.modern .select2-container--default .select2-selection--single,
body.modern .select2-container--default .select2-selection--multiple {
    background-color: var(--bb-surface);
    border: 1px solid var(--bb-border-strong);
    border-radius: 8px;
}

body.modern .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bb-text);
}

body.modern .select2-container--default.select2-container--focus .select2-selection--single,
body.modern .select2-container--default.select2-container--focus .select2-selection--multiple,
body.modern .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 3px var(--bb-primary-soft);
}

body.modern .select2-dropdown {
    background-color: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 10px;
    box-shadow: var(--bb-shadow-lg);
    overflow: hidden;
}

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

body.modern .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--bb-primary-soft);
    color: var(--bb-text);
}

body.modern .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border-strong);
    border-radius: 6px;
    color: var(--bb-text);
}

body.modern .select2-results__option {
    color: var(--bb-text);
}

/* autocomplete (jquery-autocomplete) */
body.modern .autocomplete-suggestions {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 10px;
    box-shadow: var(--bb-shadow-lg);
    color: var(--bb-text);
}

body.modern .autocomplete-selected {
    background: var(--bb-primary-soft);
}

body.modern .autocomplete-suggestions strong {
    color: var(--bb-primary);
}

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

body.modern .table {
    color: var(--bb-text);
}

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

body.modern .table > tbody > tr > td,
body.modern .table > tbody > tr > th,
body.modern .table > tfoot > tr > td {
    border-top: 1px solid var(--bb-border);
    vertical-align: middle;
}

body.modern .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--bb-surface-2);
}

body.modern .table-hover > tbody > tr:hover {
    background-color: var(--bb-primary-soft);
}

body.modern .table-bordered,
body.modern .table-bordered > thead > tr > th,
body.modern .table-bordered > tbody > tr > td,
body.modern .table-bordered > tbody > tr > th,
body.modern .table-bordered > tfoot > tr > td {
    border-color: var(--bb-border);
}

body.modern table.dataTable {
    background: transparent;
}

body.modern table.dataTable thead .sorting_asc,
body.modern table.dataTable thead .sorting_desc {
    color: var(--bb-primary);
}

body.modern .dataTables_wrapper .dataTables_length,
body.modern .dataTables_wrapper .dataTables_filter,
body.modern .dataTables_wrapper .dataTables_info,
body.modern .dataTables_wrapper .dataTables_paginate {
    color: var(--bb-text-muted);
}

body.modern .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--bb-text) !important;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
}

body.modern .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bb-surface-2);
    border-color: var(--bb-border);
    color: var(--bb-text) !important;
}

body.modern .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.modern .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--bb-primary);
    border-color: var(--bb-primary);
    color: var(--bb-on-primary) !important;
}

body.modern .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.modern .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: transparent;
    border-color: transparent;
    color: var(--bb-text-muted) !important;
}

/* Bootstrap pagination */
body.modern .pagination > li > a,
body.modern .pagination > li > span {
    background: var(--bb-surface);
    border-color: var(--bb-border);
    color: var(--bb-text);
}

body.modern .pagination > li > a:hover {
    background: var(--bb-surface-2);
    color: var(--bb-text);
}

body.modern .pagination > .active > a,
body.modern .pagination > .active > a:hover,
body.modern .pagination > .active > span {
    background: var(--bb-primary);
    border-color: var(--bb-primary);
    color: var(--bb-on-primary);
}

/* ------------------------------------------------------------------ */
/* Dropdowns, modals, alerts, labels, tabs                             */
/* ------------------------------------------------------------------ */

body.modern .dropdown-menu {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 10px;
    box-shadow: var(--bb-shadow-lg);
    padding: 6px;
}

body.modern .dropdown-menu > li > a {
    color: var(--bb-text);
    border-radius: 6px;
    padding: 7px 12px;
}

body.modern .dropdown-menu > li > a:hover,
body.modern .dropdown-menu > li > a:focus {
    background: var(--bb-surface-2);
    color: var(--bb-text);
}

body.modern .dropdown-menu .divider {
    background-color: var(--bb-border);
    margin: 6px 4px;
}

/* bootstrap paints active dropdown items blue, e.g. the DataTables
   column visibility list */
body.modern .dropdown-menu > .active > a,
body.modern .dropdown-menu > .active > a:hover,
body.modern .dropdown-menu > .active > a:focus {
    background: var(--bb-primary-soft);
    color: var(--bb-primary);
}

body.modern .modal-content {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 14px;
    box-shadow: var(--bb-shadow-lg);
    color: var(--bb-text);
}

body.modern .modal-header {
    border-bottom-color: var(--bb-border);
}

body.modern .modal-header .modal-title {
    font-weight: 650;
}

body.modern .modal-footer {
    border-top-color: var(--bb-border);
}

body.modern .modal-header .close {
    color: var(--bb-text);
    opacity: 0.5;
}

body.modern .alert {
    border-radius: 10px;
    border: 1px solid transparent;
}

/* AdminLTE sets alert colors with !important, so these must too */
body.modern .alert-success {
    background: var(--bb-success-soft) !important;
    border-color: var(--bb-success) !important;
    color: var(--bb-text) !important;
}

body.modern .alert-danger,
body.modern .alert-error {
    background: var(--bb-danger-soft) !important;
    border-color: var(--bb-danger) !important;
    color: var(--bb-text) !important;
}

body.modern .alert-warning {
    background: var(--bb-warning-soft) !important;
    border-color: var(--bb-warning) !important;
    color: var(--bb-text) !important;
}

body.modern .alert-info {
    background: var(--bb-info-soft) !important;
    border-color: var(--bb-info) !important;
    color: var(--bb-text) !important;
}

body.modern .alert .close {
    color: var(--bb-text);
    opacity: 0.4;
}

body.modern .label {
    border-radius: 6px;
    font-weight: 600;
    padding: 3px 8px;
}

body.modern .label-danger { background-color: var(--bb-danger); }
body.modern .label-success { background-color: var(--bb-success); }
body.modern .label-warning { background-color: var(--bb-warning); }
body.modern .label-info { background-color: var(--bb-info); }
body.modern .label-primary { background-color: var(--bb-primary); }

body.modern .badge {
    background-color: var(--bb-primary-soft);
    color: var(--bb-primary);
    border-radius: 999px;
    font-weight: 650;
}

body.modern .nav-tabs {
    border-bottom-color: var(--bb-border);
}

body.modern .nav-tabs > li > a {
    color: var(--bb-text-muted);
    border-radius: 8px 8px 0 0;
    font-weight: 550;
}

body.modern .nav-tabs > li > a:hover {
    background: var(--bb-surface-2);
    border-color: var(--bb-border) var(--bb-border) var(--bb-border);
    color: var(--bb-text);
}

body.modern .nav-tabs > li.active > a,
body.modern .nav-tabs > li.active > a:hover,
body.modern .nav-tabs > li.active > a:focus {
    background: var(--bb-surface);
    border-color: var(--bb-border) var(--bb-border) transparent;
    color: var(--bb-primary);
}

body.modern .nav-tabs-custom {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    box-shadow: var(--bb-shadow);
}

body.modern .nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--bb-primary);
}

/* ------------------------------------------------------------------ */
/* Flatpickr                                                           */
/* ------------------------------------------------------------------ */

body.modern .flatpickr-calendar {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    box-shadow: var(--bb-shadow-lg);
    color: var(--bb-text);
}

body.modern .flatpickr-day {
    color: var(--bb-text);
}

body.modern .flatpickr-day:hover {
    background: var(--bb-primary-soft);
    border-color: var(--bb-primary-soft);
}

body.modern .flatpickr-day.selected,
body.modern .flatpickr-day.selected:hover {
    background: var(--bb-primary);
    border-color: var(--bb-primary);
    color: var(--bb-on-primary);
}

body.modern .flatpickr-day.today {
    border-color: var(--bb-accent);
}

body.modern .flatpickr-day.flatpickr-disabled,
body.modern .flatpickr-day.prevMonthDay,
body.modern .flatpickr-day.nextMonthDay {
    color: var(--bb-text-muted);
    opacity: 0.5;
}

body.modern .flatpickr-months .flatpickr-month,
body.modern .flatpickr-current-month .flatpickr-monthDropdown-months,
body.modern .flatpickr-weekday {
    color: var(--bb-text);
    fill: var(--bb-text);
    background: transparent;
}

body.modern .flatpickr-months .flatpickr-prev-month,
body.modern .flatpickr-months .flatpickr-next-month {
    color: var(--bb-text-muted);
    fill: var(--bb-text-muted);
}

body.modern .flatpickr-time input,
body.modern .flatpickr-time .flatpickr-am-pm {
    color: var(--bb-text);
    background: transparent;
}

body.modern .flatpickr-today-btn {
    background: var(--bb-surface-2);
    color: var(--bb-primary);
    border-color: var(--bb-border);
}

/* ------------------------------------------------------------------ */
/* Misc                                                                */
/* ------------------------------------------------------------------ */

body.modern .callout {
    border-radius: 10px;
    background: var(--bb-surface);
    border-left: 4px solid var(--bb-primary);
    color: var(--bb-text);
    box-shadow: var(--bb-shadow);
}

body.modern .progress {
    background: var(--bb-surface-2);
    border-radius: 999px;
    box-shadow: none;
}

body.modern .progress-bar {
    background-color: var(--bb-primary);
}

body.modern .well {
    background: var(--bb-surface-2);
    border-color: var(--bb-border);
    border-radius: 10px;
    box-shadow: none;
    color: var(--bb-text);
}

body.modern .list-group-item {
    background: var(--bb-surface);
    border-color: var(--bb-border);
    color: var(--bb-text);
}

body.modern .popover {
    background: var(--bb-surface);
    border-color: var(--bb-border);
    border-radius: 10px;
    box-shadow: var(--bb-shadow-lg);
    color: var(--bb-text);
}

body.modern .leaflet-bar a {
    background: var(--bb-surface);
    color: var(--bb-text);
    border-bottom-color: var(--bb-border);
}

body.modern ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.modern ::-webkit-scrollbar-thumb {
    background: var(--bb-border-strong);
    border-radius: 999px;
    border: 2px solid var(--bb-bg);
}

body.modern ::-webkit-scrollbar-track {
    background: transparent;
}

body.modern :focus-visible {
    outline: 2px solid var(--bb-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    body.modern *,
    body.modern *::before,
    body.modern *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ------------------------------------------------------------------ */
/* Auth pages (login, password reset, register)                        */
/* ------------------------------------------------------------------ */

body.modern.login-page,
body.modern.register-page {
    background: var(--bb-bg);
}

body.modern.login-page .login-box-msg,
body.modern.register-page .login-box-msg,
body.modern.register-page .register-box-msg {
    color: var(--bb-text-muted);
}

body.modern.login-page .login-box-body,
body.modern.register-page .register-box-body {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 14px;
    box-shadow: var(--bb-shadow-lg);
    color: var(--bb-text);
    padding: 28px;
}

body.modern.login-page .login-box::before,
body.modern.register-page .register-box::before {
    content: 'H';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--bb-accent);
    color: var(--bb-on-accent);
    font-size: 26px;
    font-weight: 750;
    font-family: 'InterVariable', 'Segoe UI', sans-serif;
    box-shadow: 0 0 0 4px var(--bb-primary);
}

body.modern.register-page .register-logo {
    font-family: inherit;
    font-weight: 650;
    letter-spacing: -0.01em;
    font-size: 26px;
    margin-bottom: 18px;
}

body.modern.register-page .register-logo a {
    color: var(--bb-text);
}

/* the login button sits in a narrow col-xs-4; size it to its label instead */
body.modern.login-page .login-box .btn-block {
    width: auto;
    min-width: 140px;
    padding: 10px 26px;
    text-align: center;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Mobile
   --------------------------------------------------------------------------- */

/* DataTables use the Responsive extension (column collapse) in the modern
   design; the expand control needs a visible affordance on the theme colors */
body.modern table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
body.modern table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    background-color: var(--bb-accent);
    box-shadow: none;
    border: none;
}

body.modern table.dataTable > tbody > tr.child ul.dtr-details {
    width: 100%;
}

body.modern table.dataTable > tbody > tr.child span.dtr-title {
    min-width: 110px;
}

@media (max-width: 767px) {
    /* stack page title and its action buttons instead of floating them */
    body.modern .content-header h1.pull-left,
    body.modern .content-header h1.pull-right {
        float: none !important;
        display: block;
        margin: 0 0 10px;
    }

    /* long button rows (e.g. dayview time bar) wrap instead of overflowing */
    body.modern .content .btn-group {
        display: inline-flex;
        flex-wrap: wrap;
        max-width: 100%;
    }

    body.modern .content .btn-group > .btn {
        float: none;
    }

    body.modern .content .btn-group.pull-right {
        float: none !important;
        margin-top: 10px;
    }

    /* fixed 500px widgets would eat the whole phone viewport */
    body.modern #bus-location-map,
    body.modern #notes,
    body.modern #location-map,
    body.modern #location-map-bottom {
        height: 300px !important;
    }

    /* DataTables toolbar: length/filter/buttons stack with some air */
    body.modern .dataTables_wrapper .dataTables_filter,
    body.modern .dataTables_wrapper .dataTables_length {
        float: none;
        text-align: left;
        margin-bottom: 8px;
    }

    body.modern .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        max-width: 260px;
        margin-left: 0;
    }

    /* submenus expand inline in the open off-canvas sidebar, never as flyout */
    body.modern .sidebar-menu > li > .treeview-menu {
        position: static !important;
        width: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        padding-left: 12px;
        box-shadow: none;
        border-radius: 0;
    }

    body.modern .sidebar-menu > li > a > span:not(.pull-right) {
        background: transparent !important;
        color: inherit !important;
        border-radius: 0 !important;
    }

    /* btn-xs row actions are far below a comfortable touch target */
    body.modern table.dataTable .btn-group > .btn.btn-xs {
        min-width: 44px;
        min-height: 44px;
        padding: 0 14px;
        font-size: 17px;
        line-height: 42px;
    }

    body.modern table.dataTable .btn-group > .btn.btn-xs > .glyphicon,
    body.modern table.dataTable .btn-group > .btn.btn-xs > .fa {
        vertical-align: middle;
    }

    body.modern table.dataTable > tbody > tr.child .dtr-data > form {
        display: inline-block;
    }

    /* bulk selection is unusable on a phone: hide the row checkboxes
       (plain input plus its iCheck wrapper) and the bulk action they feed */
    body.modern .disable-order-check,
    body.modern .icheckbox_square-red,
    body.modern .delete-orders {
        display: none !important;
    }

    /* manual column toggling clashes with responsive column collapsing */
    body.modern .dt-buttons .buttons-colvis {
        display: none;
    }

    /* 16px inputs keep iOS Safari from auto-zooming into focused fields */
    body.modern input.form-control,
    body.modern select.form-control,
    body.modern textarea.form-control,
    body.modern .select2-container .select2-selection {
        font-size: 16px;
    }

    /* FullCalendar: stack the toolbar and let the grid breathe */
    body.modern .fc-toolbar .fc-left,
    body.modern .fc-toolbar .fc-center,
    body.modern .fc-toolbar .fc-right {
        float: none;
        display: block;
        text-align: center;
        margin-bottom: 6px;
    }

    body.modern .fc-toolbar h2 {
        font-size: 17px;
    }

    body.modern .fc button {
        font-size: 13px;
    }
}