/* FILE: assets/js/style-bs.css*/

@font-face {
    font-family: 'Bookman Old Style';
    src: url('../fonts/bookman/BookmanOldStyle.woff2') format('woff2'),
        url('../fonts/bookman/BookmanOldStyle.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Bookman Old Style';
    src: url('../fonts/bookman/BookmanOldStyle-Italic.woff2') format('woff2'),
        url('../fonts/bookman/BookmanOldStyle-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Bookman Old Style';
    src: url('../fonts/bookman/BookmanOldStyle-Bold.woff2') format('woff2'),
        url('../fonts/bookman/BookmanOldStyle-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Bookman Old Style';
    src: url('../fonts/bookman/BookmanOldStyle-BoldItalic.woff2') format('woff2'),
        url('../fonts/bookman/BookmanOldStyle-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

/*
====================================
    SITE-WIDE VARIABLES
====================================
*/
:root {
    --custom-green-primary: #238141;
    --custom-green-dark: #1b6330;
    --custom-green-light: #3a8946;
    --custom-green-border: #226f0e;
    --offcanvas-text: #ecf0f1;
}

/*
====================================
    CUSTOM BOOTSTRAP COMPONENTS
====================================
*/

/* 1. Define our custom green button color */
.btn-custom-green {
    background-color: var(--custom-green-primary); /* This is the green from your original CSS */
    color: white;
    border: none; /* remove the default border */
}

/* 2. Add a hover effect for our custom button */
.btn-custom-green:hover {
    background-color: var(--custom-green-dark); /* A darker shade of the green */
    color: white;
}


/*
====================================
    OFFCANVAS SIDEBAR STYLES
====================================
*/

/* Style the green offcanvas sidebar. 
   Using !important to force the override of Bootstrap's default. */
body .offcanvas.offcanvas-custom-green {
    background-color: var(--custom-green-primary); 
    color: var(--offcanvas-text) !important; 
}

/* Style the header inside the offcanvas */
.offcanvas.offcanvas-custom-green .offcanvas-header {
    border-bottom: 1px solid var(--custom-green-border);
}

/* Style the navigation links in the sidebar. 
   This also needs !important to override Bootstrap's blue link color. */
body .offcanvas.offcanvas-custom-green .nav-link {
    color: var(--offcanvas-text);
    font-size: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Add a hover/active effect to the links */
.offcanvas.offcanvas-custom-green .nav-link:hover,
.offcanvas.offcanvas-custom-green .nav-link.active {
    background-color: var(--custom-green-dark);
    border-radius: 5px;
}

/* Style the sub-menu */
.offcanvas.offcanvas-custom-green .sub-menu {
    padding-left: 1rem;
    background-color: var(--custom-green-light);
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.offcanvas.offcanvas-custom-green .sub-menu .nav-link:hover {
    background-color: var(--custom-green-dark);
}

/*
====================================
    MAIN CONTENT LAYOUT
====================================
*/
.main-content-bs {
    /* This adds the breathing room back around your content! */
    /* 1.5rem is about 24px, a standard Bootstrap spacing. */
    padding: 1.5rem;
}

/*
====================================
    CUSTOM PAGINATION STYLES
====================================
*/

/* 1. Style the ACTIVE page link. This is the main change. */
/* We target the .page-link inside an .active .page-item to override Bootstrap's default. */
.pagination .page-item.active .page-link {
    background-color: var(--custom-green-primary); /* Use your primary green variable */
    border-color: var(--custom-green-dark);     /* Use a darker green for the border */
    color: white;                               /* Make the number white */
}

/* 2. Change the color of the links when you hover over them (but they are not active). */
.pagination .page-link:hover {
    background-color: #e9ecef; /* A light grey, standard Bootstrap hover color */
    color: var(--custom-green-dark); /* Make the text dark green on hover */
}

/* 3. Change the text color of the regular (non-active, non-hover) page links to green. */
.pagination .page-link {
    color: var(--custom-green-primary);
}

/* 4. (Optional) Style the disabled state to look a bit more muted. */
.pagination .page-item.disabled .page-link {
    color: #868e96; /* A muted grey color */
    background-color: #f8f9fa; /* A very light background */
}

.site-footer {
    border-top: 1px solid var(--offcanvas-text); /* A standard Bootstrap border color */
}

/*
====================================
    HELPER CLASSES
====================================
*/
.toggle-password-icon {
    cursor: pointer;
}

/*
====================================
    UI POLISHING
====================================
*/

/* Aligns icons inside headings for a cleaner look */
.card-title .fa-solid {
    vertical-align: -0.1em; /* Adjusts icon to sit perfectly on the text baseline */
}

/* 
 * Makes the badge for "Type" inside the Edit Option modal bigger
 * for better readability.
*/
.modal-body .badge {
    font-size: 1rem;  /* Make the font a little bigger */
    padding: 0.5em 0.8em; /* Increase the padding for more space */
    vertical-align: middle; /* Ensures it lines up nicely with the text */
}

/*
 * =======================================================
 * === THE NEW, COMPLETE WHITE TOOLTIP THEME =============
 * =======================================================
 */

/* 1. Override Bootstrap's CSS variables for the tooltip component */
.tooltip {
    --bs-tooltip-bg: green;               /* Change background to white */
    --bs-tooltip-color: #fbfcfc;          /* Change text to Bootstrap's standard dark color */
    --bs-tooltip-opacity: 1;              /* Make it fully opaque */
    --bs-tooltip-arrow-width: .8rem;
    --bs-tooltip-arrow-height: .4rem;
}

/* 2. Add a border to the white bubble so it stands out */
.tooltip-inner {
    border: 1px solid #dee2e6; /* A light grey border, standard in Bootstrap */
}