/* =============================================
   ROOT VARIABLES
   ============================================= */
:root {
    --bp-primary:        #D74100;
    --bp-primary-alt:    #000E54;
    --bp-secondary-red:  #FF431B;
    --bp-secondary-amber:#FF8E00;
    --bp-secondary-navy: #203299;
    --bp-secondary-blue: #2872D7;
    --bp-bg:             #F1F4F8;
    --bp-dark:           #404040;
    --bp-white:          #ffffff;
    --bp-sidebar-width:  200px;
}

/* =============================================
   BODY & LAYOUT
   ============================================= */
body {
    background-color: var(--bp-bg) !important;
    color: var(--bp-dark) !important;
}

/* =============================================
   HEADER / TOP NAVBAR
   ============================================= */
.app-header {
    background: var(--bp-dark) !important;
    border-bottom: 3px solid var(--bp-primary) !important;
}

.app-header .navbar-brand {
    background: var(--bp-dark) !important;
}

.app-header .nav-link {
    color: rgba(255,255,255,0.75) !important;
}

.app-header .nav-link:hover {
    color: var(--bp-white) !important;
}

/* =============================================
   SIDEBAR
   ============================================= */
.sidebar {
    background-color: rgba(0, 0, 0, 0.02);
    /*background: var(--bp-dark) !important;*/
}

.sidebar .sidebar-header {
    background: rgba(0,0,0,0.2) !important;
    color: var(--bp-white) !important;
}

/* Nav items */
.sidebar .nav-link {
    color: var(--bp-primary);
}

.sidebar.sidebar-pills .nav-link.active,
.sidebar.sidebar-pills .nav-link:hover {
    color: var(--bp-primary) !important;
    background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Icons */
.sidebar .nav-icon {
    color: var(--bp-primary) !important;
}

.sidebar.sidebar-pills .nav-link.active .nav-icon,
.sidebar.sidebar-pills .nav-link:hover .nav-icon {
    color: var(--bp-primary) !important;
}

/* Dropdown section headers */
.sidebar .nav-title {
    color: rgba(255,255,255,0.35) !important;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

/* =============================================
   BREADCRUMBS
   ============================================= */
.breadcrumb {
    background: transparent !important;
}

.breadcrumb-item a {
    color: var(--bp-secondary-blue) !important;
}

.breadcrumb-item.active {
    color: var(--bp-dark) !important;
}

/* =============================================
   CARDS
   ============================================= */
.card {
    border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

.card-header {
    background: var(--bp-white) !important;
    border-bottom: 2px solid var(--bp-bg) !important;
    font-weight: 600;
    color: var(--bp-dark) !important;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn-danger {
    background-color: var(--bp-primary) !important;
    border-color: var(--bp-primary) !important;
    color: var(--bp-white) !important;
}

.btn-primary {
    background-color: var(--bp-primary) !important;
    border-color: var(--bp-primary) !important;
    color: var(--bp-white) !important;
}

.btn-primary:hover {
    background-color: var(--bp-secondary-red) !important;
    border-color: var(--bp-secondary-red) !important;
}

.btn-secondary {
    background-color: var(--bp-secondary-navy) !important;
    border-color: var(--bp-secondary-navy) !important;
    color: var(--bp-white) !important;
}

.btn-secondary:hover {
    background-color: var(--bp-secondary-blue) !important;
    border-color: var(--bp-secondary-blue) !important;
}

.btn-success {
    background-color: var(--bp-primary) !important;
    border-color: var(--bp-primary) !important;
    color: var(--bp-white) !important;
}

/* =============================================
   LINKS
   ============================================= */
a {
    color: var(--bp-secondary-blue) !important;
}

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

.btn-link {
    color: var(--bp-primary) !important;
    text-decoration: none !important;
}

/* =============================================
   TABLES (CRUD list view)
   ============================================= */
.table thead th {
    background: var(--bp-primary-alt) !important;
    color: var(--bp-white) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

.table tbody tr:hover {
    background: rgba(215,65,0,0.04) !important;
}

/* =============================================
   FOOTER
   ============================================= */
.app-footer {
    background: var(--bp-dark) !important;
    color: rgba(255,255,255,0.5) !important;
    border-top: 2px solid var(--bp-primary) !important;
}