/* ---------------------------

==============================
Blacknight APP CSS HEADER
Version: 1.0
==============================

1. GLOBAL STYLE
2. HEADER STYLE
3. MENU STYLE
4. BODY STYLE
5. COMPONENTS
6. FOOTER STYLE
7. RESPONSIVENESS

--------------------------- */


/* ---------------------------
1. GLOBAL STYLE
--------------------------- */

:root {
    --bk-white: #ffffff;
    --bk-grey: #f6f6f6;
    --bk-black: #242424;
    --bk-black-dark: #1D1C1C;
    --bk-green: #96a843;
    --bk-green-dark: #758434;
}

.bg-grey {
    background-color: var(--bk-grey) !important;
}

.green {
    color: var(--bk-green);
}


/* ---------------------------
2. HEADER STYLE
--------------------------- */

header {
    background: var(--bk-black);
}

#logo {
    padding: 8px 0px;
}

header .menu {
    justify-content: center;
    color: var(--bk-white);
}

header .top-bar,
header .top-bar ul {
    background: none;
    padding: 0;
}


/* ---------------------------
3. MENU STYLE
--------------------------- */

/* Off Canvas Vertical Menu */
.title-bar {
    background: var(--bk-green);
}

.bk-off-canvas-menu {
    background: var(--bk-black);
}

.bk-off-canvas-menu a{
    color: var(--bk-white);
}

.bk-off-canvas-menu a:hover
{
    color: var(--bk-green);
}

.bk-off-canvas-menu .close-button {
    color: var(--bk-white);
}

.bk-off-canvas-menu .close-button:hover {
    color: var(--bk-grey);
}

.bk-off-canvas-menu .accordion-menu > li.is-accordion-submenu-parent > a::after {
    border-color: var(--bk-white) transparent transparent;
}

/* Main Horizontal Menu */
.bk-main-menu {
    background: var(--bk-green);
    color: var(--bk-white);
}

.bk-main-menu a {
    color: var(--bk-white);
}

.bk-main-menu .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
    border-color: var(--bk-white) transparent transparent;
}

.bk-main-menu,
.bk-main-menu .menu {
    background: var(--bk-green);
    border: none;
}

.bk-main-menu a:hover,
.bk-main-menu a:focus {
    background: var(--bk-green-dark);
}

.bk-main-menu .dropdown.menu .is-active>a {
    color: var(--bk-white);
    background: var(--bk-green-dark);
}


/* ---------------------------
4. BODY STYLE
--------------------------- */

.bk-title {
    background: var(--bk-grey);
}

.bk-title h3 {
    margin: 0;
}

.standard p {
    margin-bottom: 0; /* Remove padding on choice */
}

.btn-black {
    background-color: var(--bk-black) !important;
}

.btn-black:focus,
.btn-black:hover
{
    background-color: var(--bk-green-dark) !important;
}

.mrgn-left {
    margin-left: 10px;
}

.fa-mrgn-top {
    margin-top: 37px;
}



/* ---------------------------
5. COMPONENTS
--------------------------- */

.button {
    background: var(--bk-green);
    margin: 0px;
}

.button:focus,
.button:hover
{
    background: var(--bk-green-dark);
}

.callout {
    margin: 0;
}

.callout.secondary {
    background: var(--bk-grey);
}

table tbody tr:nth-child(even) {
    background: var(--bk-grey);
}

.card {
    border: none;
    background-color: var(--bk-grey);
}

.card-section table label strong,
.card-section table label b {
    text-transform: capitalize;
}

.card-section table p.help-text {
    text-transform: capitalize;
    color: grey;
}

.table-no-style {
    margin: 0 !important;
}
.table-no-style tbody {
    background-color: rgba(255,255,255,0.0) !important;
    border: none;
}

/* ---------------------------
6. FOOTER STYLE
--------------------------- */

footer {
    background: var(--bk-black);
    color: var(--bk-white);
}

footer p {
    margin-bottom: 0;
}

footer a,
footer a:active {
    color: var(--bk-white);
}

footer a:hover,
footer a:focus {
    color: var(--bk-green);
}


/* ---------------------------
7. RESPONSIVENESS
--------------------------- */

/* Small only */
@media screen and (max-width: 39.9375em) {
    .bk-main-menu {
        padding: 0;
    }
}

/* Medium and up */
@media screen and (min-width: 40em) {
    header .menu {
        justify-content: flex-end;
    }
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {

}

/* Large and up */
@media screen and (min-width: 64em) {

}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {

}


/* for pinning footer to bottom of view-screen */
html, body { height: 100%; margin: 0; }

.main-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.off-canvas-content {
  display: block;
}

footer {
  margin-top: auto;       /* pins footer on short pages */
  flex: 0 0 auto;
}

/* guard against margin-collapsing pushing content down */
.main-content > :first-child { margin-top: 0; }


/* Header logout button → pill */
.top-bar-right form button.button {
  border-radius: 9999px;     /* pill */
  padding: .4rem .9rem;      /* a bit wider */
  line-height: 1;
  display: inline-flex;      /* nicer icon alignment */
  align-items: center;
  gap: .5rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset; /* subtle edge */
}

/* keep your theme colors on hover/focus */
.top-bar-right form button.button:hover,
.top-bar-right form button.button:focus {
  background: var(--bk-green-dark);
}