/**
 * FlowShipZ dashboard — logo palette
 * Navy #003060 (Flow) · Green #68B030 (ShipZ)
 */
:root {
    --fs-navy: #003060;
    --fs-navy-deep: #00244a;
    --fs-navy-mid: #004a7a;
    --fs-green: #68b030;
    --fs-green-dark: #5a9629;
    --fs-green-deep: #4a7d22;
    --fs-brand-gradient: linear-gradient(135deg, #003060 0%, #004a7a 42%, #68b030 100%);
    --fs-brand-gradient-soft: linear-gradient(145deg, #003060 0%, #68b030 100%);
    --fs-surface-gradient: linear-gradient(165deg, #f8faf6 0%, #f4f7fa 50%, #eef6e6 100%);

    --menu-item-hover-color: var(--fs-green);
    --menu-item-active-color: var(--fs-green);
    --menu-active-color: var(--fs-green);
    --topbar-item-hover-color: var(--fs-green);
}

/* Main content — light neutral + soft green (not blue wash) */
.page-wrapper {
    background: var(--fs-surface-gradient) !important;
}

/* Sidebar — navy structure, green active */
.sidebar {
    background: var(--fs-navy) !important;
    border-right-color: rgba(255, 255, 255, 0.08) !important;
}

.sidebar .sidebar-logo {
    background: var(--fs-navy) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar .sidebar-logo #toggle_btn {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

.sidebar .sidebar-menu .menu-title span {
    color: rgba(255, 255, 255, 0.45) !important;
}

.sidebar .sidebar-menu > ul > li > a {
    color: rgba(255, 255, 255, 0.88) !important;
}

.sidebar .sidebar-menu > ul > li > a span,
.sidebar .sidebar-menu > ul > li > a .menu-icon,
.sidebar .sidebar-menu > ul > li > a i {
    color: rgba(255, 255, 255, 0.78) !important;
}

.sidebar .sidebar-menu > ul > li > a:hover,
.sidebar .sidebar-menu > ul > li > a.active,
.sidebar .sidebar-menu > ul > li.active > a,
.sidebar .sidebar-menu > ul > li.submenu > a.active.subdrop {
    color: #fff !important;
    background: rgba(104, 176, 48, 0.2) !important;
    border-left-color: var(--fs-green) !important;
}

.sidebar .sidebar-menu > ul > li > a:hover span,
.sidebar .sidebar-menu > ul > li > a:hover .menu-icon,
.sidebar .sidebar-menu > ul > li > a.active span,
.sidebar .sidebar-menu > ul > li > a.active .menu-icon,
.sidebar .sidebar-menu > ul > li.active > a .menu-icon {
    color: var(--fs-green) !important;
}

.sidebar .sidebar-menu > ul > li ul li a:hover,
.sidebar .sidebar-menu > ul > li ul li a.active {
    color: var(--fs-green) !important;
    border-left-color: var(--fs-green) !important;
}

.sidebar .sidebar-top .avatar {
    background: linear-gradient(135deg, var(--fs-navy-mid) 0%, var(--fs-green) 100%) !important;
}

/* Top bar accents */
.navbar-header .btn-outline-primary {
    color: var(--fs-navy) !important;
    border-color: var(--fs-navy) !important;
}

.navbar-header .btn-outline-primary:hover {
    background: var(--fs-navy) !important;
    color: #fff !important;
}

/* Primary actions = logo green */
.btn-primary,
.btn.bg-primary:not(.login-covers):not(.login-backgrounds) {
    background: linear-gradient(135deg, var(--fs-green) 0%, var(--fs-green-dark) 100%) !important;
    border-color: var(--fs-green-dark) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn.bg-primary:not(.login-covers):not(.login-backgrounds):hover {
    background: linear-gradient(135deg, var(--fs-green-dark) 0%, var(--fs-green-deep) 100%) !important;
    border-color: var(--fs-green-deep) !important;
    color: #fff !important;
}

.btn-check:checked + .btn-primary,
.btn-primary:first-child:active,
:not(.btn-check) + .btn-primary:active {
    background: var(--fs-green-deep) !important;
    border-color: var(--fs-green-deep) !important;
}

/* Secondary / outline — navy */
.btn-secondary {
    background: var(--fs-navy) !important;
    border-color: var(--fs-navy) !important;
}

.btn-secondary:hover {
    background: var(--fs-navy-deep) !important;
    border-color: var(--fs-navy-deep) !important;
}

.btn-outline-primary {
    color: var(--fs-navy) !important;
    border-color: var(--fs-navy) !important;
}

.btn-outline-primary:hover {
    background: var(--fs-navy) !important;
    border-color: var(--fs-navy) !important;
    color: #fff !important;
}

.text-primary {
    color: var(--fs-navy) !important;
}

.text-secondary,
.text-success {
    color: var(--fs-green) !important;
}

.border-primary {
    border-color: var(--fs-navy) !important;
}

/* Auth left panel — navy → green (logo) */
.login-covers.bg-primary,
.login-backgrounds.login-covers,
.login-backgrounds.login-covers.bg-primary {
    background: var(--fs-brand-gradient) !important;
}

.auth-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 85% 15%, rgba(104, 176, 48, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(0, 48, 96, 0.4) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.auth-bg .hover-a {
    color: var(--fs-green) !important;
}

.auth-bg .hover-a:hover {
    color: var(--fs-green-dark) !important;
}

.auth-go-back {
    margin-top: 12px;
    float: right;
    padding: 4px 10px;
    color: #fff !important;
    border: none;
    background: var(--fs-navy) !important;
    border-radius: 5px;
    text-decoration: none;
}

.auth-go-back:hover {
    background: var(--fs-navy-deep) !important;
    color: #fff !important;
}

/* Progress, tabs, badges */
.progress-bar.bg-primary {
    background: var(--fs-navy) !important;
}

.progress-bar:not(.bg-primary) {
    background: linear-gradient(90deg, var(--fs-navy) 0%, var(--fs-green) 100%) !important;
}

.nav-tabs .nav-link.active {
    border-bottom-color: var(--fs-green) !important;
    color: var(--fs-navy) !important;
}

.badge.bg-primary {
    background: var(--fs-navy) !important;
}

.badge.bg-success,
.badge-success {
    background-color: var(--fs-green) !important;
}

.bg-primary.rounded-circle,
span.avatar.bg-primary {
    background: linear-gradient(135deg, var(--fs-navy) 0%, var(--fs-green) 100%) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fs-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(104, 176, 48, 0.2) !important;
}

.form-check-input:checked {
    background-color: var(--fs-green) !important;
    border-color: var(--fs-green) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--fs-green) !important;
    border-color: var(--fs-green) !important;
}

.alert-primary {
    background-color: var(--primary-transparent) !important;
    border-color: rgba(0, 48, 96, 0.15) !important;
    color: var(--fs-navy) !important;
}

.card .card-header.bg-primary {
    background: var(--fs-brand-gradient-soft) !important;
}

.fs-auth-panel-side {
    background: var(--fs-brand-gradient) !important;
    min-height: 100vh;
}

.fs-user-avatar {
    background: linear-gradient(135deg, #e6eef5 0%, #eef6e6 100%) !important;
    color: var(--fs-navy) !important;
}