@charset "UTF-8";
/* CSS Document */

/*******************************************************
 * =====================================================
 * CUSTOM.CSS – JDS ERP / AdminLTE 4
 * -----------------------------------------------------
 * This file contains all custom overrides, utilities,
 * and extra styles for the JDS ERP theme.
 * =====================================================
 *******************************************************/


/* ===========================
   CSS Variables (Custom Properties)
   =========================== */
:root {
    --color-indigo: #6610f2;
    --color-olive: #3d9970;
    --color-teal: #20c997;
    --color-purple: #6f42c1;
    --color-orange: #fd7e14;
    --color-maroon: #d81b60;
    --color-fuchsia: #f012be;
    --color-pink: #f56954;
}


/* =====================================================
   Color Utilities
   -----------------------------------------------------
   Custom colors for text, backgrounds, and borders
   ===================================================== */

/* =====================================================
   AdminLTE 3 Colors for AdminLTE 4
   ===================================================== */

/* Indigo */
.text-indigo   { color: var(--color-indigo) !important; }
.bg-indigo     { background-color: var(--color-indigo) !important; }
.border-indigo { border-color: var(--color-indigo) !important; }

/* Olive */
.text-olive    { color: var(--color-olive) !important; }
.bg-olive      { background-color: var(--color-olive) !important; }
.border-olive  { border-color: var(--color-olive) !important; }

/* Teal */
.text-teal     { color: var(--color-teal) !important; }
.bg-teal       { background-color: var(--color-teal) !important; }
.border-teal   { border-color: var(--color-teal) !important; }

/* Purple */
.text-purple   { color: var(--color-purple) !important; }
.bg-purple     { background-color: var(--color-purple) !important; }
.border-purple { border-color: var(--color-purple) !important; }

/* Orange */
.text-orange   { color: var(--color-orange) !important; }
.bg-orange     { background-color: var(--color-orange) !important; }
.border-orange { border-color: var(--color-orange) !important; }

/* Maroon */
.text-maroon   { color: var(--color-maroon) !important; }
.bg-maroon     { background-color: var(--color-maroon) !important; }
.border-maroon { border-color: var(--color-maroon) !important; }

/* Fuchsia */
.text-fuchsia  { color: var(--color-fuchsia) !important; }
.bg-fuchsia    { background-color: var(--color-fuchsia) !important; }
.border-fuchsia{ border-color: var(--color-fuchsia) !important; }

/* Pink */
.text-pink     { color: var(--color-pink) !important; }
.bg-pink       { background-color: var(--color-pink) !important; }
.border-pink   { border-color: var(--color-pink) !important; }


/* =====================================================
   Hide the Google reCAPTCHA v3 badge
   -----------------------------------------------------
   https://developers.google.com/recaptcha/docs/faq
   ===================================================== */
.grecaptcha-badge {
    visibility: hidden;
}


/* =====================================================
   Bootstrap Modal
   -----------------------------------------------------
   Left align modal footer buttons.
   ===================================================== */
.modal .modal-footer {
    justify-content: flex-start;
}


/* =====================================================
   Hero
   -----------------------------------------------------
   Defines a reusable hero section:
   - Sets background properties for full-width hero images
   - Centers content vertically (and optionally horizontally)
   - Handles responsive heights for desktop and mobile
   - Supports dark theme text color overrides
   ===================================================== */
.hero {
    background-color: transparent; /* Used if the image is unavailable */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */

    min-height: 30vh;
    max-height: 40vh;
    display: flex;       /* enable flex */
    align-items: center; /* vertical centering */
}
[data-bs-theme='dark'] .hero h1,
[data-bs-theme='dark'] .hero p.lead {
    color: var(--bs-body-bg);
}
@media (max-width: 768px) {
    .hero {
        min-height: 25vh;
    }
}