:root {
    /*BORDER*/
    --br: 10px; /* border radius */
    /*PRIMARY COLOR*/
    --pc: #0B3D2B; /* primary color green */
    --ph: #27D697; /*primary hover color*/
    /*SECONDARY COLOR*/
    --sc: #FFD700; /* secondary color gold D12D20 */
    --sh: #FFA202; /*secondary hover color*/
    /*TERTIARY COLOR*/
    --tc: #FFFFFF; /* tertiary color white*/
    --th: #000000; /*tertiary hover color black*/
    /*QUATERNARY COLOR*/
    --qc: #525252; /* quaternary color GREY*/
    --qh: #C9C9C9; /* quaternary hover color GREY light*/
    /*QUINARY COLOR */
    --uc: #FFA500; /* quaternary color ORGANGE*/
    --uh: #FFDF0B; /* quaternary hover color Yellow*/
    /*SENARY COLOR */
    --yc: #0024FF; /* quaternary color BLUE*/
    --yh: #03BDFF; /* quaternary hover color LGIHT BLUE*/
    /*FONT AND FONT SIZE */
    --fn: Calibri,Times New Roman,Arial,sans-serif; /* font name*/
    --fl: 32px; /* font size large */
    --fm: 16px; /* font size medium */
    --fs: 12px; /* font size small */
    /* PADDNG*/
    --pl: 32px; /* pading large */
    --pm: 16px; /* padding medium */
    --ps: 8px; /* padding small */
    --px: 4px; /* padding extra small*/
    --pn: 0px; /* padding none */
    /*MARGIN*/
    --ml: 44px; /* margin large */
    --mm: 22px; /* margin medium */
    --ms: 11px; /* margin small */
    --mx: 5px; /*   margin extra small*/
    --mn: 0px; /* margin none */
    --ma: auto; /* margin auto*/
    /*IMAGE*/
    --iwq: 25%; /* image width quarter */
    --iwh: 50%; /* image width half */
    --iwf: 100%; /* image width full */
    --ihq: 25%; /*image height quarter*/
    --ihh: 50%; /*image height half*/
    --ihf: 100%; /*image height full*/
    /*GAPS*/
    --gs: 4px; /*gap between items small*/
    --gm: 8px; /*gap between items medium*/
    --gl: 12px; /*gap between items large*/
    /*TXEXT*/
    --dn: none; /* decoration none removes underline from text*/
    /*WIDTH*/
    --ws: 18%; /* width of an object*/
    --wq: 25%; /*quater of screen width*/
    --wh: 50%; /*half of screen width*/
    --wf: 100%; /* full of screen width*/
    --wa: auto; /*auto fit*/
    /*HEIGHT*/
    --hx: 5px;
    --hs: 10px;
    --hm: 15px;
    --hl: 20px;
    --ha: auto;
    /*ICON*/
    --iws: 25px;
    --ihs: 25px;
    --iwm: 50px;
    --ihm: 50px;
    --iwl: 100px;
    --ihl: 100px;
    --iwa: auto;
    --iha: auto;
}

/* ************GLOBAL************ */
.navbar {
    background-color: var(--pc) !important;
}

header {
    margin: var(--mn);
    font-family: var(--fn);
    font-size: var(--fl);
}

body {
    margin: var(--mx);
    padding-top: var(--pl);
    padding-bottom: var(--ps);
    padding-left: var(--ps);
    padding-right: var(--ps);
    font-family: var(--fn);
    font-size: var(--fm);
    color: var(--pc);
}

    body textarea {
        height: 6em; /* roughly 3 rows */
        resize: vertical; /* allow user to resize */
    }
/*ALERTS */
.alert {
    padding: var(--ps) var(--pm);
    margin-bottom: var(--mm);
    border-radius: var(--br);
    font-size: var(--fm);
    border-left: var(--gs) solid transparent;
}

    .alert.error {
        background-color: var(--uh);
        color: var(--pc);
        border-left-color: var(--uc);
    }

    .alert.success {
        background-color: var(--ph);
        color: var(--tc);
        border-left-color: var(--pc);
    }

    .alert.warning {
        background-color: var(--sh);
        color: var(--pc);
        border-left-color: var(--sc);
    }

    .alert.info {
        background-color: var(--yh);
        color: var(--tc);
        border-left-color: var(--yc);
    }

    .alert.debug {
        background-color: #e2e3e5;
        color: #383d41;
        border-left-color: #6c757d;
    }

/* ************ALIGNMENTS************ */
.bottom-left {
    position: absolute;
    bottom: var(--gm);
    left: var(--gl);
}

.top-right {
    position: absolute;
    top: var(--gm);
    right: var(--gl);
}

.center-left {
    position: absolute;
    vertical-align: middle;
    left: var(--gl);
}

.center-right {
    position: absolute;
    vertical-align: middle;
    right: var(--gl);
}
/* ************BACKGROUND COLORS************ */
.bg-primary {
    background-color: var(--pc) !important;
    color: var(--tc) !important;
}

.bg-secondary {
    background-color: var(--sc) !important;
    color: var(--pc) !important;
}

.bg-success {
    background-color: var(--pc) !important;
    color: var(--tc) !important;
}

.bg-danger {
    background-color: var(--uc) !important;
    color: var(--pc) !important;
}

.bg-warning {
    background-color: var(--sc) !important;
    color: var(--pc) !important;
}

.bg-muted {
    background-color: var(--qc) !important;
    color: var(--tc) !important;
}

/* ************TEXT COLORS************ */
.text-primary {
    color: var(--pc) !important;
}

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

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

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

.text-warning {
    color: var(--uc) !important;
}

.text-muted {
    color: var(--qc) !important;
}

.text-info {
    color: var(--yc) !important;
}
/* ************BANNER************ */
.banner {
    background-color: var(--pc);
    color: var(--tc);
    padding: var(--ps);
    margin-top: var(--ma);
    margin-bottom: var(--mm);
    border-radius: var(--br);
}

    .banner img {
        width: var(--iwh);
        object-fit: contain;
    }

/* ************BODY CONTENT************ */
.body-content {
    padding: var(--ps);
}
/* ************PAGE FOOTER************ */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ************OBJECT BORDERS************ */
.br-left {
    border-left: 5px solid;
}

.br-top {
    border-top: 5px solid !important;
    border-color: var(--sc) !important;
}
/* ************BUTTON************ */
.main-btn {
    background: var(--sc);
    padding: var(--ps) var(--pm);
    border-radius: var(--br);
    color: var(--pc);
    transition: 0.3s ease;
    text-decoration: var(--dn);
    border: none;
}

    .main-btn:hover {
        background: var(--sh);
        color: var(--pc);
    }

.link-btn {
    font-size: var(--fm);
    color: var(--pc);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
    padding: var(--px);
}

    .link-btn:hover {
        color: var(--sc);
    }

/* ************CARD************ */
.card {
    background: var(--tc);
    padding: var(--pn);
    border-radius: var(--br);
    margin-bottom: var(--ms);
    text-align: center;
    width: auto;
    height: auto;
    color: var(--pc);
    border: 1px solid;
    border-color: var(--sc);
}

    .card p {
        text-align: center;
        font-weight: bold;
        font-size: var(--fm);
        padding: var(--pn);
    }

.card-header {
    display: flex;
    position: relative;
    background-color: var(--sc);
    color: var(--pc);
    padding: var(--pn) var(--pn) var(--pn) var(--px);
    font-size: 1.2rem;
    font-weight: bold;
    border-top-left-radius: var(--br);
    border-top-right-radius: var(--br);
    width: var(--wf);
}

.card-content {
    display: flex;
    flex-direction:column;
    text-align: left !important;
    font-size: var(--fm);
    font-weight: normal;
    padding: var(--ps);
    margin-left: var(--mm)
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-size: var(--fs);
    font-weight: bold;
    background-color: transparent !important;
    border-top: none !important;
    padding: var(--pm);
}

.card-icon {
    width: var(--iwa);
    height: var(--iha);
    border-radius: var(--br);
    margin: var(--ms);
    padding: var(--ps);
    background-color: var(--pc);
    color: var(--pc);
    border: 1px solid;
    border-color: var(--sc);
    overflow: hidden; /* important */
}

/* ************FONT SIZE************ */
.font-size-small {
    font-size: 12px;
}

.font-size-medium {
    font-size: 18px;
}

.font-size-large {
    font-size: 30px;
}

/* ************FLEX LAYOUT WRAPPER************ */
.layout-wrapper {
    display: flex;
}

/* ************IGNORE FLEX LAYOUT************ */
.no-layout-flex .layout-wrapper {
    display: block !important;
}

.no-layout-flex .main-content {
    margin-left: 0 !important;
    width: auto !important;
}

/* ************IMAGES************ */
.image-small {
    width: 150px;
}

.image-medium {
    width: 250px;
}

.image-large {
    width: 350px;
}

/* ************MAIN CONTENT************ */
.main-content {
    margin-left: var(--ws);
    padding: var(--pm);
    width: calc(100% - var(--ws));
}

/* ************PROGRESS BAR************ */
.progress-flex {
    display: flex;
    height: var(--hx);
    border-radius: var(--br);
    overflow: hidden; /* This is the key to make it look like ONE bar */
    background: var(--qc);
}

/* ************SECTION************ */
.section {
    background: var(--tc);
    border-radius: var(--br);
    margin-bottom: var(--mm);
    overflow: hidden;
}

.section-header {
    position: relative;
    background-color: var(--primary-color);
    color: var(--pc);
    padding: var(--pm);
    font-size: var(--fl);
    font-weight: bold;
}

.section-footer {
    background-color: var(--primary-color);
    color: var(--pc);
    padding: var(--pm);
    font-size: var(--fs);
}

/* ************SIDEBAR************ */
.sidebar {
    width: var(--ws);
    background-color: none;
    border-right: 1px solid var(--pc);
    padding: var(--ps);
    position: fixed;
    top: 50px;
    left: var(--gs);
    height: calc(100vh - 50px);
    overflow-y: auto;
}

.sidebar-label {
    color: var(--qc);
}

.sidebar ul {
    list-style: none;
    padding: var(--pn);
    margin: var(--mn);
}

    .sidebar ul li {
        margin: var(--ms);
        text-align: left;
    }

        .sidebar ul li img {
            width: var(--iws);
            height: var(--ihs);
            cursor: pointer;
        }

.sidebar-item {
    text-decoration: var(--dn);
    color: var(--pc);
    gap: var(--gl);
    padding-top: var(--ps);
}

    .sidebar-item:hover {
        text-decoration: var(--dn);
        background-color: var(--sc);
        border-radius: var(--br);
        padding: var(--ps);
    }

.sidebar-footer {
    border-top: 1px solid;
    border-color: var(--pc);
    margin-top: var(--ms);
    padding: var(--ps);
    align-items: flex-start;
}

/* **************TABLE STRUCTURE*************** */
.table-wrapper {
    width: var(--wf);
    overflow-x: auto;
    overflow-y: hidden;
    display: block;
    background: var(--tc);
    padding: var(--px);
    border-radius: var(--br);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}


table.table-mint {
    width:var(--wf);
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fm);
    color: var(--sc) !important;
}

    table.table-mint thead th {
        background: var(--sc);
        color: var(--pc);
        padding: 14px 16px;
        text-align: center;
        border-bottom: 2px solid var(--sc);
        position: sticky;
        top: 0;
        z-index: 2;
    }

    table.table-mint tbody tr td {
        padding: var(--ps);
        transition: background 0.25s ease;
        border: 1px,solid,var(--sc);
        color: var(--pc);
        text-align: center;
        white-space: nowrap;
    }

    table.table-mint tbody tr:nth-child(even) td {
        background-color: var(--qh);
    }

    table.table-mint tbody tr:nth-child(odd) td {
        background-color: var(--tc);
    }

    table.table-mint tbody tr:hover td {
        background-color: var(--ph);
        cursor: pointer;
    }

    table.table-mint thead th:first-child {
        border-top-left-radius: 10px;
    }

    table.table-mint thead th:last-child {
        border-top-right-radius: 10px;
    }

    table.table-mint tbody tr:last-child td:first-child {
        border-bottom-left-radius: 10px;
    }

    table.table-mint tbody tr:last-child td:last-child {
        border-bottom-right-radius: 10px;
    }

.table-cell {
    display: flex;
    justify-content: space-between;
    padding: var(--px) var(--pl);
}
/* ******************select 2**************** */
.select2-container {
    width: 100% !important;
}
/* Style Select2 to match your form-input fields */
.form-input .select2-container .select2-selection--single {
    height: auto;
    padding: var(--ps);
    border: 1px solid var(--sh);
    border-radius: var(--br);
    display: flex;
    align-items: center;
    width: var(--wf) !important;
}

/* Ensure the text inside Select2 matches your input style */
.form-input .select2-selection__rendered {
    color: var(--pc);
    padding-left: 0;
}

/* Remove the default Select2 arrow spacing */
.form-input .select2-selection__arrow {
    height: 100%;
    right: 8px;
}

/*FORMS*/
.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--pn);
    margin-bottom: var(--mx);
    border-radius: var(--br);
}

.form-label {
    flex: 1;
    font-weight: 600;
    color: var(--pc);
    padding-right: var(--ps);
}

.form-input {
    flex: 2;
}

    .form-input input,
    .form-input select,
    .form-input textarea {
        width: var(--wf);
        padding: var(--ps);
        border: 1px solid var(--sh);
        border-radius: var(--br);
    }

/*SEARCH BOX*/
.search-box {
    width: 300px; /* fixed width */
    max-width: 100%; /* responsive */
    resize: none; /* prevents dragging */
}

/*TABS*/
.nav-tabs .nav-link.active {
    background-color: var(--pc) !important;
    color: var(--tc) !important;
    border-color: var(--sc) !important;
}

.nav-tabs .nav-link {
    background-color: var(--qh) !important;
    color: var(--pc) !important;
    border-color: var(--sc) !important;
}

    .nav-tabs .nav-link:hover {
        background-color: var(--sc) !important;
        color: var(--pc) !important;
    }

/* PROFILE IMAGE*/
.profile-pic img {
    width: 100px; /* Fixed size for profile pic */
    height: 100px;
    border-radius: 50%; /* Makes it circular */
    object-fit: cover; /* Prevents distortion */
}

.profile-info {
    display: flex;
    flex-direction: column; /* Stacks name and ID vertically */
    justify-content: center;
}