/* ============================================================
   be'ah green & white theme
   Loaded LAST by BeahGreenPortalTheme so it overrides the
   default PortalLight (Inspinia) palette. The same custom
   properties are shared by the standalone onboarding portal
   (views/onboarding/onboarding.css). Reuse var(--beah-*) in all
   subsequent screens.
   ============================================================ */

:root {
    --beah-green-dark: #1B5E20;
    --beah-green: #185c24;
    --beah-green-light: #2E7D32;
    --beah-green-mid: #43A047;
    --beah-green-pale: #E8F5E9;
    --beah-green-wash: #edf7ee;
    --beah-bg: #f5f7f5;
    --beah-surface: #FFFFFF;
    --beah-border: #E2E8F0;
    --beah-border-green: #cfe3d2;
    --beah-text: #0F172A;
    --beah-muted: #64748B;
    --beah-gold: #F57F17;
    --beah-red: #C62828;
}

/* ---- Buttons ---- */
.btn-primary {
    background-color: var(--beah-green);
    border-color: var(--beah-green);
    color: #FFFFFF;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--beah-green-light);
    border-color: var(--beah-green-light);
    color: #FFFFFF;
}

.btn-outline.btn-primary,
.btn-outline-primary {
    color: var(--beah-green);
    border-color: var(--beah-green);
    background: transparent;
}

.btn-outline.btn-primary:hover,
.btn-outline-primary:hover {
    background-color: var(--beah-green);
    color: #FFFFFF;
}

/* ---- Links ---- */
a {
    color: var(--beah-green-light);
}

a:hover,
a:focus {
    color: var(--beah-green-dark);
}

/* ---- Navigation / side menu ---- */
.navbar-static-side,
body.canvas-menu .navbar-static-side,
body.canvas-menu nav.navbar-static-side {
    background: var(--beah-surface) !important;
    border-right: 1px solid var(--beah-border);
}

.nav-header,
body.canvas-menu .nav-header {
    background: var(--beah-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--beah-border);
}

/* Keep these scoped to the sidebar — `.nav` is also on the tab strip and topbar. */
.navbar-static-side .nav > li > a {
    color: var(--beah-text) !important;
}

.menu-title.menu-group-title {
    color: var(--beah-muted) !important;
}

.navbar-static-side .nav > li.active {
    border-left-color: var(--beah-green);
    background: transparent !important;
}

.navbar-static-side .nav > li.active:not(.submenu) > a {
    background: var(--beah-green-pale) !important;
    color: var(--beah-green) !important;
}

.navbar-static-side .nav > li:not(.menu-title) > a:hover,
.navbar-static-side .nav > li:not(.menu-title) > a:focus {
    background: var(--beah-green-wash) !important;
    color: var(--beah-green) !important;
}

.navbar-static-side .nav-second-level {
    background: var(--beah-surface) !important;
}

.navbar-static-side .nav-second-level > li.active > a {
    color: var(--beah-green);
    font-weight: 700;
}

.nav.navbar-right > li > a:hover,
.nav.navbar-right > li > a:focus,
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
    color: var(--beah-green);
}

/* ---- Tabs ----
   Two selector shapes: BS4+ marks the <a>, BS3/Inspinia marks the <li>. */
.tabs-container .nav-tabs .nav-link.active,
.tabs-container .nav-tabs .nav-link.active:hover,
.tabs-container .nav-tabs .nav-link.active:focus,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: var(--beah-green) !important;
    border-color: var(--beah-green) !important;
    color: #FFFFFF !important;
}

.tabs-container .nav-tabs .nav-link.active i,
.nav-tabs > li.active > a i {
    color: #FFFFFF !important;
}

.tabs-container .nav-tabs .nav-link:not(.active):hover,
.tabs-container .nav-tabs .nav-link:not(.active):focus,
.nav-tabs > li:not(.active) > a:hover,
.nav-tabs > li:not(.active) > a:focus {
    background-color: var(--beah-green-wash);
    border-color: transparent;
    color: var(--beah-green);
}

/* ---- Forms ---- */
.form-control:focus,
.single-line:focus {
    border-color: var(--beah-green-mid);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, .10);
}

/* ---- Checkboxes / labels / badges ---- */
.label-primary,
.badge-primary {
    background-color: var(--beah-green);
    color: #FFFFFF;
}

.text-navy,
.text-primary {
    color: var(--beah-green) !important;
}

.bg-primary {
    background-color: var(--beah-green) !important;
}

/* ---- Panels / ibox ---- */
.ibox-title {
    border-top-color: var(--beah-border);
}

.border-left-right,
.border-bottom {
    border-color: var(--beah-border);
}

/* ---- Pagination ---- */
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background-color: var(--beah-green);
    border-color: var(--beah-green);
    color: #FFFFFF;
}

/* ---- Progress ---- */
.progress-bar {
    background-color: var(--beah-green-mid);
}

/* ---- Switchery-style toggles fall back to green ---- */
.onoffswitch-inner:before {
    background-color: var(--beah-green);
}

/* ---- Body ---- */
body {
    background-color: var(--beah-bg);
}

/* ---- Portal shell topbar ---- */
.navbar-static-top {
    background: linear-gradient(135deg, var(--beah-green-dark) 0%, var(--beah-green-light) 60%, var(--beah-green-mid) 100%);
    border-bottom: 3px solid var(--beah-gold);
}

.navbar-static-top .row {
    align-items: center;
}

.navbar-static-top,
.navbar-static-top a,
.navbar-static-top span,
.navbar-static-top i,
.navbar-static-top .system-name,
.navbar-static-top .system-name a,
.navbar-static-top .system-name-color,
.navbar-static-top a.fa-bars {
    color: #FFFFFF !important;
    text-shadow: none !important;
}

/* Theme paints this with a clipped gradient, which outranks `color`. */
.navbar-static-top .system-name-color {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.navbar-static-top .dropdown-menu,
.navbar-static-top .dropdown-menu a,
.navbar-static-top .dropdown-menu span,
.navbar-static-top .dropdown-menu i,
.navbar-static-top .dropdown-menu li {
    color: var(--beah-text) !important;
    text-shadow: none !important;
}

/* Direct-child only, so dropdown contents keep their light-background styling. */
.navbar-top-links > li > a,
.beah-tb-chip {
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    min-height: 0 !important;
}

.navbar-top-links > li > a:hover,
.navbar-top-links > li > a:focus,
.beah-tb-chip:hover {
    background: rgba(255, 255, 255, .22) !important;
    color: #FFFFFF !important;
}

.beah-tb-avatar {
    background: linear-gradient(135deg, #69F0AE, #00BCD4);
    color: var(--beah-text);
}

/* ---- Login screen ---- */
.login-role-panel {
    background-color: var(--beah-green);
    background-image: linear-gradient(rgba(8, 54, 17, .62), rgba(6, 40, 13, .78)), url(../assets/img/login-bg.jpg);
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
}

.login-role-content > p {
    color: rgba(255, 255, 255, .78);
}

.role-card {
    border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(0, 0, 0, .30);
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    outline: none;
}

.role-card:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

.role-card:hover {
    border-color: #FFFFFF;
    background: rgba(0, 0, 0, .42);
}

.role-card.selected,
.role-card.admin-card:hover,
.role-card.admin-card.selected {
    border-color: #FFFFFF;
    background: #FFFFFF;
    color: var(--beah-green);
    text-shadow: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}

.login-foot {
    color: rgba(255, 255, 255, .48);
}

.login-card h2 {
    color: var(--beah-text);
}

.login-card .sub {
    color: var(--beah-muted);
}

.login-register {
    color: var(--beah-muted);
}

.login-register a {
    color: var(--beah-green);
}

.beah-forgot-link {
    color: var(--beah-green);
}

/* ---- Modal bodies ----
   Our modals reuse `.panel-body` as a plain content wrapper, which picks up
   EasyUI's global 1px panel border and draws a box inside the modal. */
.modal-content .panel-header,
.modal-content .panel-body {
    border: 0;
}