/* ==========================================================
   FOUR-COLOR COMBO THEME – Bootstrap 5 + jQuery UI
   Green:  #00C853  (Primary / Success)
   Blue:   #2196F3  (Secondary / Info)
   Red:    #F44336  (Danger)
   Yellow: #FFEB3B  (Warning)
   ========================================================== */

/* Shared Design Tokens ------------------------------------- */
@import url('pdrmetricbs.css');
:root {
    --four-green: #00C853;
    --four-green-dark: #00A344;
    --four-blue: #2196F3;
    --four-blue-dark: #1976D2;
    --four-red: #F44336;
    --four-red-dark: #D32F2F;
    --four-yellow: #FFEB3B;
    --four-yellow-dark: #FBC02D;
    --four-light: #F5F6F7;
    --four-border: #D3D6DB;
    --four-dark: #212529;
    /* Bootstrap mapping ------------------------------------- */
    --bs-primary: var(--four-green);
    --bs-secondary: var(--four-blue);
    --bs-success: var(--four-green);
    --bs-info: var(--four-blue);
    --bs-warning: var(--four-yellow);
    --bs-danger: var(--four-red);
    --bs-light: var(--four-light);
    --bs-dark: var(--four-dark);
    --bs-primary-rgb: 0, 200, 83;
    --bs-secondary-rgb: 33, 150, 243;
    --bs-success-rgb: 0, 200, 83;
    --bs-info-rgb: 33, 150, 243;
    --bs-warning-rgb: 255, 235, 59;
    --bs-danger-rgb: 244, 67, 54;
    --bs-light-rgb: 245, 246, 247;
    --bs-dark-rgb: 33, 37, 41;
    --bs-body-bg: #FFFFFF;
    --bs-body-color: var(--four-dark);
    --bs-border-color: var(--four-border);
    --bs-link-color: var(--four-blue);
    --bs-link-hover-color: var(--four-green);
    --bs-focus-ring-color: rgba(33, 150, 243, .35);
}

/* ==========================================================
   BOOTSTRAP – CORE
   ========================================================== */

body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Links */
a {
    color: var(--bs-link-color);
    text-decoration-color: rgba(33,150,243,.35);
}

    a:hover,
    a:focus {
        color: var(--bs-link-hover-color);
        text-decoration-color: rgba(0,200,83,.45);
    }

/* Buttons --------------------------------------------------- */
.btn {
    border-radius: .35rem;
    font-weight: 600;
}

/* Primary (Green) */
.btn-primary {
    background: var(--four-green);
    border-color: var(--four-green);
    color: #fff;
}

    .btn-primary:hover {
        background: var(--four-green-dark);
        border-color: var(--four-green-dark);
    }

/* Secondary (Blue) */
.btn-secondary {
    background: var(--four-blue);
    border-color: var(--four-blue);
    color: #000;
}

    .btn-secondary:hover {
        background: var(--four-blue-dark);
        border-color: var(--four-blue-dark);
    }

/* Success (Green) */
.btn-success {
    background: var(--four-green);
    border-color: var(--four-green);
    color: #fff;
}

    .btn-success:hover {
        background: var(--four-green-dark);
        border-color: var(--four-green-dark);
    }

/* Warning (Yellow) */
.btn-warning {
    background: var(--four-yellow);
    border-color: var(--four-yellow);
    color: #000;
}

    .btn-warning:hover {
        background: var(--four-yellow-dark);
        border-color: var(--four-yellow-dark);
    }

/* Danger (Red) */
.btn-danger {
    background: var(--four-red);
    border-color: var(--four-red);
    color: #fff;
}

    .btn-danger:hover {
        background: var(--four-red-dark);
        border-color: var(--four-red-dark);
    }

/* Outline buttons */
.btn-outline-primary {
    color: var(--four-green);
    border-color: var(--four-green);
}

    .btn-outline-primary:hover {
        background: var(--four-green);
        color: #fff;
    }

.btn-outline-secondary {
    color: var(--four-blue);
    border-color: var(--four-blue);
}

    .btn-outline-secondary:hover {
        background: var(--four-blue);
        color: #fff;
    }

/* Navbar base (we override text later) ---------------------- */
.navbar-dark {
    background: var(--four-blue) !important;
}

.navbar-light {
    background: var(--four-light) !important;
    border-bottom: 1px solid var(--four-border);
}

/* Forms ----------------------------------------------------- */
.form-control,
.form-select {
    border-color: var(--four-border);
    border-radius: .35rem;
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--four-blue);
        box-shadow: 0 0 0 .2rem rgba(33,150,243,.25);
    }

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

/* Cards ----------------------------------------------------- */
.card {
    border-color: var(--four-border);
    border-radius: .65rem;
}

.card-header {
    background: var(--four-light);
    border-bottom-color: var(--four-border);
    color: var(--four-blue);
    font-weight: 600;
}

.card-footer {
    background: var(--four-light);
    border-top-color: var(--four-border);
}

/* Tables ---------------------------------------------------- */
.table {
    color: var(--four-dark);
    border-color: var(--four-border);
}

    .table th {
        background: var(--four-light);
        border-bottom: 2px solid var(--four-blue);
        color: var(--four-blue-dark);
    }

.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: #F8FAFC;
}

.table-hover > tbody > tr:hover {
    --bs-table-accent-bg: rgba(33,150,243,.10);
}

/* Alerts ---------------------------------------------------- */
.alert {
    border-radius: .4rem;
}

.alert-primary {
    background: rgba(0,200,83,.1);
    border-color: var(--four-green);
    color: var(--four-green-dark);
}

.alert-secondary {
    background: rgba(33,150,243,.12);
    border-color: var(--four-blue);
    color: var(--four-blue-dark);
}

.alert-success {
    background: rgba(0,200,83,.12);
    border-color: var(--four-green);
    color: var(--four-green-dark);
}

.alert-warning {
    background: rgba(255,235,59,.25);
    border-color: var(--four-yellow);
    color: var(--four-yellow-dark);
}

.alert-danger {
    background: rgba(244,67,54,.12);
    border-color: var(--four-red);
    color: var(--four-red-dark);
}

/* Badges ---------------------------------------------------- */
.badge {
    border-radius: 999px;
    font-weight: 600;
}

    .badge.bg-primary {
        background: var(--four-green) !important;
    }

    .badge.bg-secondary {
        background: var(--four-blue) !important;
    }

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

    .badge.bg-warning {
        background: var(--four-yellow) !important;
        color: #000;
    }

    .badge.bg-danger {
        background: var(--four-red) !important;
    }

/* Pagination ------------------------------------------------ */
.page-link {
    color: var(--four-blue);
    border-color: var(--four-border);
}

    .page-link:hover {
        color: var(--four-green);
        border-color: var(--four-blue);
        background: var(--four-light);
    }

.page-item.active .page-link {
    background: var(--four-green);
    border-color: var(--four-green);
    color: #fff;
}

/* Accordion ------------------------------------------------- */
.accordion-button {
    background: var(--four-light);
    color: var(--four-dark);
}

    .accordion-button:not(.collapsed) {
        background: var(--four-green);
        color: #fff;
    }

    .accordion-button:focus {
        box-shadow: 0 0 0 .2rem rgba(33,150,243,.25);
    }

/* Modal ----------------------------------------------------- */
.modal-content {
    border-radius: .75rem;
    border-color: var(--four-border);
}

.modal-header,
.modal-footer {
    background: var(--four-light);
    border-color: var(--four-border);
}

/* Utilities ------------------------------------------------- */
.bg-primary {
    background-color: var(--four-green) !important;
}

.bg-secondary {
    background-color: var(--four-blue) !important;
}

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

.bg-warning {
    background-color: var(--four-yellow) !important;
}

.bg-danger {
    background-color: var(--four-red) !important;
}

.text-primary {
    color: var(--four-green) !important;
}

.text-secondary {
    color: var(--four-blue) !important;
}

.text-success {
    color: var(--four-green) !important;
}

.text-warning {
    color: var(--four-yellow-dark) !important;
}

.text-danger {
    color: var(--four-red) !important;
}

/* ==========================================================
   NAVBAR – BLACK TEXT + 4-COLOR UNDERLINE
   (Green → Blue → Red → Yellow)
   ========================================================== */

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-text {
    color: #000 !important;
    position: relative;
    font-weight: 600;
    font-size: 1.10rem;
    padding-top: .65rem;
    padding-bottom: .65rem;
}

    .navbar .nav-link:hover,
    .navbar .nav-link:focus,
    .navbar .navbar-brand:hover,
    .navbar .navbar-brand:focus {
        color: #000 !important;
    }

    /* Multicolor underline */
    .navbar .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 4px;
        width: 0%;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, #00C853 0%, /* Green  */
        #2196F3 33%, /* Blue   */
        #F44336 66%, /* Red    */
        #FFEB3B 100% /* Yellow */
        );
        transition: width 0.25s ease-in-out;
    }

    .navbar .nav-link:hover::after,
    .navbar .nav-link:focus::after,
    .navbar .nav-link.active::after {
        width: 100%;
    }

/* ==========================================================
   jQUERY UI – THEME
   ========================================================== */

.ui-widget {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--four-dark);
    font-size: 1rem;
}

.ui-widget-content {
    background: #FFFFFF;
    border: 1px solid var(--four-border);
    color: var(--four-dark);
}

.ui-widget-header {
    background: var(--four-blue);
    border: 1px solid var(--four-blue-dark);
    color: #FFFFFF;
    font-weight: 600;
}

    /* States ---------------------------------------------------- */
    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default {
        background: var(--four-light);
        border: 1px solid var(--four-border);
        color: var(--four-dark);
    }

    .ui-state-hover,
    .ui-widget-content .ui-state-hover,
    .ui-widget-header .ui-state-hover,
    .ui-state-focus,
    .ui-widget-content .ui-state-focus,
    .ui-widget-header .ui-state-focus {
        background: #E3F2FD;
        border: 1px solid var(--four-blue);
        color: var(--four-blue-dark);
    }

    .ui-state-active,
    .ui-widget-content .ui-state-active,
    .ui-widget-header .ui-state-active {
        background: var(--four-green);
        border: 1px solid var(--four-green-dark);
        color: #fff;
    }

    .ui-state-highlight,
    .ui-widget-content .ui-state-highlight,
    .ui-widget-header .ui-state-highlight {
        background: #FFFDE7;
        border: 1px solid var(--four-yellow);
        color: #8C6D1F;
    }

    .ui-state-error,
    .ui-widget-content .ui-state-error,
    .ui-widget-header .ui-state-error {
        background: #FFEBEE;
        border: 1px solid var(--four-red);
        color: var(--four-red-dark);
    }

    .ui-state-disabled,
    .ui-widget-content .ui-state-disabled,
    .ui-widget-header .ui-state-disabled {
        opacity: .5;
        background-image: none;
    }

/* jQuery UI Buttons ---------------------------------------- */
.ui-button,
button.ui-button,
input.ui-button {
    background: var(--four-blue);
    border: 1px solid var(--four-blue-dark);
    color: #FFFFFF;
    border-radius: .35rem;
    padding: .3em .9em;
    font-weight: 600;
}

    .ui-button:hover,
    button.ui-button:hover,
    input.ui-button:hover,
    .ui-button.ui-state-hover {
        background: var(--four-blue-dark);
        border-color: var(--four-blue-dark);
    }

    .ui-button:active,
    .ui-button.ui-state-active {
        background: var(--four-green);
        border-color: var(--four-green-dark);
    }

/* Dialog ---------------------------------------------------- */
.ui-dialog {
    background: #FFFFFF;
    border: 1px solid var(--four-blue);
    border-radius: .75rem;
    box-shadow: 0 .75rem 2rem rgba(0,0,0,.25);
}

    .ui-dialog .ui-dialog-titlebar {
        background: var(--four-blue);
        color: #FFFFFF;
        border: none;
        border-radius: .75rem .75rem 0 0;
    }

    .ui-dialog .ui-dialog-content {
        padding: 1em 1.2em;
    }

/* Tabs ------------------------------------------------------ */
.ui-tabs {
    padding: .3em;
    border: 1px solid var(--four-border);
    background: #FFFFFF;
}

    .ui-tabs .ui-tabs-nav {
        margin: 0;
        padding: .2em .2em 0;
        border-bottom: 1px solid var(--four-border);
        background: var(--four-light);
    }

        .ui-tabs .ui-tabs-nav li {
            margin: 0 .2em 0 0;
            border: 1px solid transparent;
            border-radius: .4rem .4rem 0 0;
            background: #E3E7ED;
        }

            .ui-tabs .ui-tabs-nav li a {
                padding: .4em 1em;
                color: var(--four-dark);
            }

            .ui-tabs .ui-tabs-nav li.ui-tabs-active {
                border-color: var(--four-blue) var(--four-blue) #FFFFFF;
                background: #FFFFFF;
            }

                .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
                    color: var(--four-blue-dark);
                }

/* Accordion ------------------------------------------------- */
.ui-accordion .ui-accordion-header {
    background: var(--four-blue);
    border: 1px solid var(--four-blue-dark);
    color: #FFFFFF;
    padding: .5em .8em;
    font-weight: 600;
}

    .ui-accordion .ui-accordion-header.ui-state-hover {
        background: var(--four-blue-dark);
    }

.ui-accordion .ui-accordion-content {
    background: #FFFFFF;
    border: 1px solid var(--four-border);
    border-top: none;
}


/* Slider ---------------------------------------------------- */
.ui-slider {
    background: #E0E4EA;
    border: 1px solid var(--four-border);
    border-radius: 999px;
}

.ui-slider-horizontal {
    height: .5em;
}

.ui-slider .ui-slider-range {
    background: var(--four-blue);
}

.ui-slider .ui-slider-handle {
    background: var(--four-green);
    border: 1px solid var(--four-green-dark);
    width: 1em;
    height: 1em;
    border-radius: 50%;
    top: -.3em;
}

/* Progressbar ---------------------------------------------- */
.ui-progressbar {
    background: #E0E4EA;
    border: 1px solid var(--four-border);
    border-radius: 999px;
    height: .9em;
}

    .ui-progressbar .ui-progressbar-value {
        background: var(--four-green);
        border-radius: 999px;
    }

/* Autocomplete / Menu -------------------------------------- */
.ui-autocomplete,
.ui-menu {
    background: #FFFFFF;
    border: 1px solid var(--four-border);
    max-height: 260px;
    overflow-y: auto;
}

    .ui-menu .ui-menu-item-wrapper {
        padding: .4em .8em;
    }

    .ui-menu .ui-state-active,
    .ui-autocomplete .ui-state-active {
        background: var(--four-blue);
        color: #FFFFFF;
    }

/* Spinner --------------------------------------------------- */
.ui-spinner {
    border: 1px solid var(--four-border);
    border-radius: .35rem;
}

.ui-spinner-input {
    border: none;
    padding: .3em .4em;
}

.ui-spinner-button {
    background: var(--four-light);
    border-left: 1px solid var(--four-border);
}

    .ui-spinner-button:hover {
        background: #E3F2FD;
    }

/* Tooltip --------------------------------------------------- */
.ui-tooltip {
    background: #212121;
    border: 1px solid var(--four-blue);
    color: #FFFFFF;
    padding: .5em .8em;
    border-radius: .35rem;
    box-shadow: 0 .4rem 1rem rgba(0,0,0,.25);
}

/* ==========================================================
   UPGRADE PACK — Navbar Width, Submenu Width, Forms, Yellow Button
   For Four-Color Theme
   ========================================================== */

/* ----------------------------- */
/* NAVBAR — Increase Link Width */
/* ----------------------------- */
.navbar .nav-link {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    min-width: 120px; /* <— Increase clickable width */
    text-align: left;
    font-weight: 600;
}

/* Even more spacing on desktop */
@media (min-width: 992px) {
    .navbar .nav-link {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        min-width: 140px;
    }
}

/* ---------------------------------------- */
/* SUBMENU (Dropdown) — Increase Width */
/* ---------------------------------------- */
.dropdown-menu {
    min-width: 220px !important; /* <— Change to any size you want */
    border-radius: .5rem;
    padding: .5rem .75rem;
}

.dropdown-item {
    padding-top: .55rem;
    padding-bottom: .55rem;
    font-weight: 600;
}

    /* Hover underline animation */
    .dropdown-item:hover {
        background: rgba(33,150,243,.15); /* blue tint */
    }

/* ---------------------------- */
/* FORM UPGRADE — Bold Labels */
/* ---------------------------- */
.form-label,
label {
    font-weight: 700 !important;
    color: #000;
    font-size: 1rem;
}

/* ---------------------------- */
/* FORM INPUT TEXT — GREEN */
/* ---------------------------- */
.form-control,
.form-select,
textarea.form-control {
    color: #1976D2 !important; /* Green text */
    font-weight: 600;
}

    /* Placeholder color adjusted */
    .form-control::placeholder {
        color: rgba(0, 200, 83, 0.55) !important;
    }

    /* Input border & focus */
    .form-control:focus,
    .form-select:focus,
    textarea.form-control:focus {
        border-color: #00C853 !important;
        box-shadow: 0 0 0 .2rem rgba(0,200,83,.25) !important;
    }

/* Checkbox / radio active */
.form-check-input:checked {
    background-color: #00C853 !important;
    border-color: #00C853 !important;
}

/* ---------------------------- */
/* NEW BUTTON COLOR — YELLOW */
/* ---------------------------- */
.btn-yellow,
.btn-warning {
    background: #FFEB3B !important;
    border-color: #FFEB3B !important;
    color: #000 !important;
    font-weight: 700;
    /* 20% smaller than previous large setup */
    font-size: 1rem; /* was ~1.20rem */
    padding: 0.55rem 1.10rem; /* was ~0.70rem 1.40rem */
    border-radius: .35rem;
}

    .btn-yellow:hover,
    .btn-warning:hover {
        background: #FBC02D !important;
        border-color: #FBC02D !important;
        color: #000 !important;
    }

/* Outline version */
.btn-outline-yellow {
    border-color: #FFEB3B !important;
    color: #FFEB3B !important;
    font-weight: 700;
}

    .btn-outline-yellow:hover {
        background-color: #FFEB3B !important;
        color: #000 !important;
    }
.btn-yellow-large {
    background: var(--four-yellow) !important;
    border: 2px solid var(--four-yellow-dark) !important;
    color: #000 !important;
    font-size: 1.15rem; /* Bigger text */
    padding: .85rem 1rem; /* Large padding */
    font-weight: 800; /* Extra bold */
    border-radius: .65rem; /* Slightly rounded */
    text-transform: uppercase;
    letter-spacing: .5px;
}

    /* Hover: darker yellow */
    .btn-yellow-large:hover {
        background: var(--four-yellow-dark) !important;
        border-color: var(--four-yellow-dark) !important;
    }

    /* Active */
    .btn-yellow-large:active,
    .btn-yellow-large:focus {
        box-shadow: 0 0 0 .25rem rgba(255,235,59,.35) !important;
    }
/* ==========================================================
   NAVBAR: wider items, submenu width, fs-4 text
   ========================================================== */

/* All navbar text fs-4 */
.navbar, .navbar .nav-link, .navbar .navbar-brand, .navbar .dropdown-item {
    font-size: 1.2rem !important; /* fs-4 */
    font-weight: 600;
}

    /* Increase navbar clickable width */
    .navbar .nav-link {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

/* Dropdown submenu width */
.dropdown-menu {
    min-width: 300px !important;
    font-size: 1.4rem !important;
}

/* ==========================================================
   GLOBAL: all text fs-4
   ========================================================== */

body, p, div, span, a, li, ul, table, th, td, nav, section {
    font-size: 1.2rem !important; /* fs-4 */
}

/* ==========================================================
   FORMS: bold input text, green text, fs-4 labels
   ========================================================== */

/* Labels fs-4 */
label, .form-label {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

/* Input text bold + green */
input.form-control,
textarea.form-control,
select.form-select {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #1976D2 !important; /* Four-color GREEN */
    border-width: 2px;
    padding: 0.85rem 0.85rem 0.85rem 0.85rem !important;
    border-radius: 0.65rem !important;
}

    /* Focus ring stays green */
    input.form-control:focus,
    textarea.form-control:focus,
    select.form-select:focus {
        border-color: #00C853 !important;
        box-shadow: 0 0 0 .25rem rgba(0, 200, 83, .25) !important;
    }

/* Placeholder readable */
::placeholder {
    color: #44DD88 !important;
    opacity: 1;
}

/* Checkboxes + radios bigger */
.form-check-input {
    width: 1.4em;
    height: 1.4em;
}

/* ==========================================================
   BUTTONS: yellow + large (then 20% smaller)
   ========================================================== */

/* Your theme yellow */
.btn-yellow {
    background: #FFEB3B !important;
    border-color: #FFEB3B !important;
    color: #000 !important;
    font-weight: 700;
}

/* Large button */
.btn-lg-custom {
    font-size: 2.2rem !important;
    padding: 1rem 2.2rem !important;
    border-radius: .65rem !important;
}

    /* Reduce by 20% (your instruction “smaller by 20%”) */
    .btn-lg-custom.smaller-20 {
        font-size: calc(2.2rem * 0.8) !important;
        padding: calc(1rem * 0.8) calc(2.2rem * 0.8) !important;
    }

/* ==========================================================
   DROPDOWN ITEMS fs-4 and wider
   ========================================================== */

/* All labels fs-5 */
label,
.form-label {
    font-size: 1.25rem !important; /* fs-5 equivalent */
    font-weight: 600;
}
/* Global text size fs-5 */
body,
p,
span,
td,
th,
a,
div,
input,
button,
select,
textarea {
    font-size: 1.25rem !important; /* fs-5 */
}
.form-group label {
    display: block;
    margin-bottom: 5px;
}