body {
    background-color:#efe7e2;
    padding-top:120px;
    transition: padding-top 0.3s ease;
}

.bg-wire {
    background-color: #e6d9c1;
}

.bg-wire:hover{
    background-color: #958566;
    color:white;
}

/* Base style for bg-wire-dark */
.bg-wire-dark {
    background-color: #7b6a4f;      /* Darker earthy brown */
    color: #ffffff;                 /* White text for contrast */
}

/* For buttons or clickable elements */
.bg-wire-dark:hover,
.bg-wire-dark:focus,
.bg-wire-dark:active {
    background-color: #64553f;      /* Even darker on hover/focus */
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

/* Optional border variant */
.border-wire-dark {
    border-color: #7b6a4f !important;
}

/* Text color class if needed separately */
.text-wire-dark {
    color: #7b6a4f !important;
}

/* For Bootstrap Buttons specifically */
.btn.bg-wire-dark {
    border: 1px solid #7b6a4f;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn.bg-wire-dark:hover,
.btn.bg-wire-dark:focus {
    background-color: #64553f;
    border-color: #64553f;
    color: #fff;
}
  

/* Core background classes */
.bg-wire-dark        { background-color: #7b6a4f; color: #ffffff; }
.bg-wire-secondary   { background-color: #a8926c; color: #212529; }
.bg-wire-light       { background-color: #d8c3a5; color: #212529; }
.bg-wire-accent      { background-color: #b46c35; color: #ffffff; }
.bg-wire-muted       { background-color: #5c4a33; color: #ffffff; }

/* Hover & focus styles */
.bg-wire-dark:hover,
.bg-wire-dark:focus       { background-color: #64553f; color: #ffffff; }

.bg-wire-secondary:hover,
.bg-wire-secondary:focus  { background-color: #927c58; color: #212529; }

.bg-wire-light:hover,
.bg-wire-light:focus      { background-color: #c7b091; color: #212529; }

.bg-wire-accent:hover,
.bg-wire-accent:focus     { background-color: #944d1d; color: #ffffff; }

.bg-wire-muted:hover,
.bg-wire-muted:focus      { background-color: #443524; color: #ffffff; }

/* Optional border variants */
.border-wire-dark        { border-color: #7b6a4f !important; }
.border-wire-secondary   { border-color: #a8926c !important; }
.border-wire-light       { border-color: #d8c3a5 !important; }
.border-wire-accent      { border-color: #b46c35 !important; }
.border-wire-muted       { border-color: #5c4a33 !important; }

/* Bootstrap buttons specifically */
.btn.bg-wire-dark,
.btn.bg-wire-secondary,
.btn.bg-wire-light,
.btn.bg-wire-accent,
.btn.bg-wire-muted {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn.bg-wire-dark:hover         { background-color: #64553f; }
.btn.bg-wire-secondary:hover    { background-color: #927c58; }
.btn.bg-wire-light:hover        { background-color: #c7b091; }
.btn.bg-wire-accent:hover       { background-color: #944d1d; }
.btn.bg-wire-muted:hover        { background-color: #443524; }







/* Remove default link styles */
.link-no-style a {
    text-decoration: none; /* Remove underline */
    color: inherit; 
}

/* Hover effect: white text, no underline */
.link-no-style  a:hover {
    text-decoration: none;
    color: inherit; 
}


/* Header background image */
.header {
    background: url('../images/header-min.jpg') no-repeat center center;
    background-size: cover;
    color: white;
    padding: 10px 0; /* Reduce unnecessary spacing */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1050; /* Ensure it stays above other elements */
}

/* Logo */
.header .logo {
    max-height: 100px; /* Reduce height for better alignment */
}

/* Ensure text and logo align properly */
.container {
    max-width: 1200px;
    display: flex;
    align-items: center; /* Aligns logo and WIRE text properly */
}

/* "WIRE" text */
.header div h2 {
    font-size: 2.5em;
    margin: 0; /* Remove extra spacing */
    font-stretch: wider;
}

/* Navbar items */
.header-menu-item {
    border-radius: 20px;
    padding: 5px 12px;
    text-align: center;
    margin: 5px;
    background-color: #979797;
    text-decoration: none;
}

/* Menu button */
.menu-btn {
    color: white;
    font-size: 16px;
}

/* Navbar hover effect */
.header-menu-item:hover {
    background-color: black; /* Background changes to black */
}

/* Keep text color white even on hover */
.menu-btn:hover {
    color: white;
}

/* Logout button */
.header-menu-item.logout {
    border-radius: 100px;
}

/* Fix: Make background red on hover instead of text */
.header-menu-item.logout:hover {
    background-color: darkred !important;
}

/* Keep text color white inside the logout button */
.header-menu-item.logout .menu-btn {
    color: white !important;
}

.navbar-collapse {
    background-color: transparent !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.container-box {
    max-width: 1200px;
    margin: auto;
    padding: 15px;
    background: white;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
/* Footer Styling */
.footer {
    background-color: black;
    color: white;
    padding: 15px 0;
}

/* Make footer content flex */
.footer .container {
    display: flex;
    justify-content: space-between; /* Text on left, links on right */
    align-items: center;
}

/* Footer text */
.footer p {
    margin: 0;
    font-size: 14px;
}

/* Footer links */
.footer-links {
    list-style: none;
    display: flex;
    gap: 15px; /* Space between links */
    margin: 0;
    padding: 0;
}

/* Footer link styling */
.footer-links li {
    display: inline;
}

/* Remove default link styles */
.footer-links a {
    color: white; /* White text */
    text-decoration: none; /* Remove underline */
    font-size: 14px;
}

/* Hover effect: white text, no underline */
.footer-links a:hover {
    color: white;
    text-decoration: none;
}


.table td, .table th {
    vertical-align: middle;
}

.accordion-details td {
    padding: 0.4rem 0.75rem;
    vertical-align: top;
}



/* ***************** TRANSITIONS ******************** */
/* Style for the full details section */
.collapse {
    transition: all 0.3s ease-in-out;
}

.collapse.show {
    padding-left: 20px;
    background-color: #f8f9fa;
}



/* **************** SHRINKING HEADER ***************** */
/* Shrink behavior on scroll */
.header.shrink {
    padding: 3px 0;
    background-position: center top;
    transition: all 0.3s ease-in-out;
}

.header.shrink .logo {
    max-height: 45px;
    transition: max-height 0.3s ease-in-out;
}

.header.shrink .navbar-brand {
    font-size: 1.6rem !important;
    transition: font-size 0.3s ease-in-out;
}



@media (max-width: 992px) {
    .container-box {
        width:96% !important;
    }

    .navbar-nav .nav-item {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 768px) {

    .logo {
        max-height: 30px; /* Smaller size for mobile */
    }

    .header div h2{
        margin: auto !important;
    }
}


@media (max-width: 576px) {
    body {
        padding-top: 60px;  /* Default padding for small screens */
    }
    .login-box {
        margin: 10px;
        width:95% !important;
    }

    .header {
        padding: 0.5rem 1rem !important;
    }

    .header .logo {
        height: 36px;
    }

    .header .navbar-brand {
        font-size: 1.4rem !important;
    }
}