/*
██████  ██ ███    ██ ██   ██     ████████ ██   ██ ███████ ███    ███ ███████ 
██   ██ ██ ████   ██ ██  ██         ██    ██   ██ ██      ████  ████ ██      
██████  ██ ██ ██  ██ █████          ██    ███████ █████   ██ ████ ██ █████   
██      ██ ██  ██ ██ ██  ██         ██    ██   ██ ██      ██  ██  ██ ██      
██      ██ ██   ████ ██   ██        ██    ██   ██ ███████ ██      ██ ███████ 
*/

/* Customize button colors for light theme only */
html[data-bs-theme="light"] {

    /* Background and text colors */
    --bs-body-bg: #fcdde8;       /* Pink Background */
    --bs-body-color: #660033;    /* Dark Text Color */

    /* Core theme colors */
    --bs-primary: #ff66b2;       /* Primary Pink */
    --bs-primary-rgb: 255, 102, 178;
    --bs-secondary: #ff99cc;     /* Secondary Pink */
    --bs-secondary-rgb: 255, 153, 204;
    --bs-success: #ff80c2;       /* Success Pink */
    --bs-success-rgb: 255, 128, 194;
    --bs-info: #ffcce6;          /* Info Pink */
    --bs-info-rgb: 255, 204, 230;
    --bs-warning: #ffe6f2;       /* Warning Pink */
    --bs-warning-rgb: 255, 230, 242;
    --bs-danger: #ff3399;        /* Danger Pink */
    --bs-danger-rgb: 255, 51, 153;
    --bs-light: #ffe6f2;         /* Light Pink */
    --bs-light-rgb: 255, 230, 242;
    --bs-dark: #660033;          /* Dark Text Color */
    --bs-dark-rgb: 102, 0, 51;

    --bs-secondary-bg: #ffb6c1; /* Light pink for secondary background */
    --bs-tertiary-bg: #ffc0cb; /* Slightly lighter pink for tertiary background */

    /* HR Styling for Pink Theme in Light Mode */
    --bs-hr-color: #f14861; /* Light pink color */

    /* Button focus shadow color */
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);

    /* Primary button variables */
    --bs-btn-primary-color: #fff;
    --bs-btn-primary-bg: var(--bs-primary);
    --bs-btn-primary-border-color: var(--bs-primary);
    --bs-btn-primary-hover-color: #fff;
    --bs-btn-primary-hover-bg: #ff3399; /* Hover background */
    --bs-btn-primary-hover-border-color: #ff3399; /* Hover border */
    --bs-btn-primary-active-color: #fff;
    --bs-btn-primary-active-bg: var(--bs-primary);
    --bs-btn-primary-active-border-color: var(--bs-primary);
    --bs-btn-primary-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-primary-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);


    /* Secondary button variables */
    --bs-btn-secondary-color: #660033;
    --bs-btn-secondary-bg: var(--bs-secondary);
    --bs-btn-secondary-border-color: var(--bs-secondary);
    --bs-btn-secondary-hover-color: #660033;
    --bs-btn-secondary-hover-bg: #ff80b3;
    --bs-btn-secondary-hover-border-color: #ff80b3;
    --bs-btn-secondary-active-color: #660033;
    --bs-btn-secondary-active-bg: var(--bs-secondary);
    --bs-btn-secondary-active-border-color: var(--bs-secondary);
    --bs-btn-secondary-focus-shadow-rgb: var(--bs-secondary-rgb);
    --bs-btn-secondary-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    /* Success button variables */
    --bs-btn-success-color: #660033;
    --bs-btn-success-bg: var(--bs-success);
    --bs-btn-success-border-color: var(--bs-success);
    --bs-btn-success-hover-color: #660033;
    --bs-btn-success-hover-bg: #ff99c2;
    --bs-btn-success-hover-border-color: #ff99c2;
    --bs-btn-success-active-color: #660033;
    --bs-btn-success-active-bg: var(--bs-success);
    --bs-btn-success-active-border-color: var(--bs-success);
    --bs-btn-success-focus-shadow-rgb: var(--bs-success-rgb);
    --bs-btn-success-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    
    /* Danger button variables */
    --bs-btn-danger-color: #fff;
    --bs-btn-danger-bg: var(--bs-danger);
    --bs-btn-danger-border-color: var(--bs-danger);
    --bs-btn-danger-hover-color: #fff;
    --bs-btn-danger-hover-bg: #cc0066;
    --bs-btn-danger-hover-border-color: #cc0066;
    --bs-btn-danger-active-color: #fff;
    --bs-btn-danger-active-bg: var(--bs-danger);
    --bs-btn-danger-active-border-color: var(--bs-danger);
    --bs-btn-danger-focus-shadow-rgb: var(--bs-danger-rgb);
    --bs-btn-danger-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    /* Warning button variables */
    --bs-btn-warning-color: #660033;
    --bs-btn-warning-bg: var(--bs-warning);
    --bs-btn-warning-border-color: var(--bs-warning);
    --bs-btn-warning-hover-color: #660033;
    --bs-btn-warning-hover-bg: #ffd6e0; /* Adjusted hover color */
    --bs-btn-warning-hover-border-color: #ffd6e0;
    --bs-btn-warning-active-color: #660033;
    --bs-btn-warning-active-bg: var(--bs-warning);
    --bs-btn-warning-active-border-color: var(--bs-warning);
    --bs-btn-warning-focus-shadow-rgb: var(--bs-warning-rgb);
    --bs-btn-warning-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    /* Info button variables */
    --bs-btn-info-color: #660033;
    --bs-btn-info-bg: var(--bs-info);
    --bs-btn-info-border-color: var(--bs-info);
    --bs-btn-info-hover-color: #660033;
    --bs-btn-info-hover-bg: #ffb3d9; /* Adjusted hover color */
    --bs-btn-info-hover-border-color: #ffb3d9;
    --bs-btn-info-active-color: #660033;
    --bs-btn-info-active-bg: var(--bs-info);
    --bs-btn-info-active-border-color: var(--bs-info);
    --bs-btn-info-focus-shadow-rgb: var(--bs-info-rgb);
    --bs-btn-info-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    /* Light button variables */
    --bs-btn-light-color: #660033;
    --bs-btn-light-bg: var(--bs-light);
    --bs-btn-light-border-color: #ff99cc;
    --bs-btn-light-hover-color: #660033;
    --bs-btn-light-hover-bg: #ffccd5;
    --bs-btn-light-hover-border-color: #ffccd5;
    --bs-btn-light-active-color: #660033;
    --bs-btn-light-active-bg: var(--bs-light);
    --bs-btn-light-active-border-color: var(--bs-light);
    --bs-btn-light-focus-shadow-rgb: var(--bs-light-rgb);
    --bs-btn-light-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    /* Dark button variables */
    --bs-btn-dark-color: #fff;
    --bs-btn-dark-bg: var(--bs-dark);
    --bs-btn-dark-border-color: var(--bs-dark);
    --bs-btn-dark-hover-color: #fff;
    --bs-btn-dark-hover-bg: #4d0026;
    --bs-btn-dark-hover-border-color: #4d0026;
    --bs-btn-dark-active-color: #fff;
    --bs-btn-dark-active-bg: var(--bs-dark);
    --bs-btn-dark-active-border-color: var(--bs-dark);
    --bs-btn-dark-focus-shadow-rgb: var(--bs-dark-rgb);
    --bs-btn-dark-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    /* Outline primary button variables */
    --bs-btn-outline-primary-color: var(--bs-primary);
    --bs-btn-outline-primary-border-color: var(--bs-primary);
    --bs-btn-outline-primary-hover-color: #fff;
    --bs-btn-outline-primary-hover-bg: var(--bs-primary);
    --bs-btn-outline-primary-hover-border-color: var(--bs-primary);
    --bs-btn-outline-primary-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-outline-primary-active-color: #fff;
    --bs-btn-outline-primary-active-bg: var(--bs-primary);
    --bs-btn-outline-primary-active-border-color: var(--bs-primary);
    --bs-btn-outline-primary-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);


    /* Base button variables */
    --bs-btn-color: var(--bs-btn-primary-color);
    --bs-btn-bg: var(--bs-btn-primary-bg);
    --bs-btn-border-color: var(--bs-btn-primary-border-color);
    --bs-btn-hover-color: var(--bs-btn-primary-hover-color);
    --bs-btn-hover-bg: var(--bs-btn-primary-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-primary-hover-border-color);
    --bs-btn-active-color: var(--bs-btn-primary-active-color);
    --bs-btn-active-bg: var(--bs-btn-primary-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-primary-active-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-btn-primary-focus-shadow-rgb);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    /* Universal Link Color for Pink Theme */
    --bs-link-color: var(--bs-body-color);      /* Use body color for links */
    --bs-link-hover-color: #b3005e;             /* Slightly darker pink for hover effect */

    /* Form input and button colors */
    --bs-input-bg: var(--bs-body-bg);        /* Light input background */
    --bs-input-border-color: #ff66b2;        /* Input border color */
    --bs-button-color: #660033;              /* Button text color */
    --bs-button-bg: #ff66b2;                 /* Button background color */
    --bs-button-hover-bg: #ff3399;           /* Button hover background */

    /* Nav Tabs colors for Pink Theme */
    --bs-nav-tabs-border-width: 1px;
    --bs-nav-tabs-border-color: #ff99cc;                          /* Pink border for the tab container */
    --bs-nav-tabs-border-radius: 0.25rem;                         /* Slightly rounded corners */
    --bs-nav-tabs-link-hover-border-color: #ffccd5 #ffccd5 #ff99cc; /* Pink border on hover */
    --bs-nav-tabs-link-active-color: #660033;                     /* Dark pink text color for active tab */
    --bs-nav-tabs-link-active-bg: transparent;                    /* Transparent background for active tab */
    --bs-nav-tabs-link-active-border-color: #ff99cc #ff99cc transparent; /* Pink border for active tab, no bottom border */

    /* Dropdown Menu Color Variables for Pink Theme */
    --bs-dropdown-color: var(--bs-body-color);                   /* Text color for dropdown */
    --bs-dropdown-bg: var(--bs-body-bg);                         /* Background color for dropdown */
    --bs-dropdown-border-color: #ff99cc;                         /* Pink border color */
    --bs-dropdown-link-color: var(--bs-body-color);              /* Text color for dropdown links */
    --bs-dropdown-link-hover-color: var(--bs-body-color);        /* Hover text color */
    --bs-dropdown-link-hover-bg: #ffd6e0;                        /* Slightly darker pink background on hover */
    --bs-dropdown-link-active-color: #f8d8e5;                    /* Light pink for active text */
    --bs-dropdown-link-active-bg: #ff66b2;                       /* Active background color */
    --bs-dropdown-link-disabled-color: #6c757d;                  /* Muted gray for disabled items */
    --bs-dropdown-divider-bg: #ff99cc;                           /* Pink divider color */
    --bs-dropdown-header-color: #6c757d;                         /* Muted gray for dropdown headers */

    /* Link and tab colors */
    --bs-link-color: var(--bs-body-color);                        /* Use body color for links */
    --bs-link-hover-color: #b3005e;                               /* Slightly darker pink for hover */
    --bs-nav-link-color: var(--bs-link-color);                    /* Default nav link color */
    --bs-nav-link-hover-color: #ff80b3;                           /* Slightly darker pink for nav hover */

    /* Additional nav link padding */
    --bs-nav-link-padding-x: 1rem;                                /* Horizontal padding */
    --bs-nav-link-padding-y: 0.5rem;                              /* Vertical padding */

    /* Week Separator Colors */
    --bs-week-separator-bg: #fbcfe8; /* Light pink background for week separator */
    --bs-week-separator-text-color: #333333; /* Dark text color for readability */

    /* Entry box colors */
    --entry-box-even-bg: #ffe6f2;          /* Light pink for even entries */
    --entry-box-odd-bg: var(--bs-body-bg);           /* Slightly lighter pink for odd entries */

    /* Download link color */
    --download-link-color: inherit;        /* Default link color for downloads */

    /* Form Control Colors */
    --bs-form-control-bg: var(--bs-input-bg);                  /* Background color for inputs */
    --bs-form-control-color: var(--bs-body-color);             /* Text color for inputs */
    --bs-form-control-border-color: var(--bs-input-border-color); /* Border color for inputs */
    --bs-form-control-focus-border-color: var(--bs-input-border-color); /* Border color on focus */
    --bs-form-control-focus-shadow: rgba(255, 102, 178, 0.5);  /* Focus shadow color */
    --bs-form-control-placeholder-color: #d72378;              /* Placeholder color */
    --bs-form-control-disabled-bg: #f8d8e5;                    /* Background color for disabled/readonly inputs */
    --bs-form-control-disabled-color: #660033;                 /* Text color for disabled/readonly inputs */
    --bs-form-control-disabled-border-color: #ff99cc;          /* Border color for disabled/readonly inputs */

    /* Checkbox and Switch Colors */
    --bs-form-check-bg: #ffe6f2;                     /* Light pink background for unchecked */
    --bs-form-check-border: #d72378;                 /* Border color for unchecked state */
    --bs-form-check-checked-bg: #ff66b2;             /* Darker pink for checked background */
    --bs-form-check-checked-border-color: #d72378;   /* Border color when checked */
    --bs-form-check-focus-shadow: rgba(255, 102, 178, 0.5); /* Pink shadow on focus */
    --bs-form-check-focus-border-color: #ff66b2;     /* Border color on focus */
    --bs-form-check-switch-handle-color: #ffffff;    /* White handle for checked switch */

    /* Striped Table Colors for Pink Theme */
    --bs-table-bg: var(--bs-body-bg);             /* Light background for table */
    --bs-table-color: #660033;          /* Dark text color for table */
    --bs-table-border-color: #ff99cc;   /* Border color for table cells */
    --bs-table-accent-bg: #ffe6f2;      /* Light pink for striped rows */
    --bs-table-hover-color: #660033;    /* Text color for hovered row */
    --bs-table-hover-bg: #ffccd5;       /* Slightly darker pink on hover */

    /* Global Modal Color Variables for Light Mode */
    --bs-modal-color: var(--bs-body-color);                       /* Text color */
    --bs-modal-bg: var(--bs-body-bg);                             /* Background color */
    --bs-modal-border-color: #ff99cc;                             /* Light pink border */
    --bs-modal-header-border-color: var(--bs-modal-border-color); /* Header border color now references modal border color */
    --bs-modal-header-border-width: var(--bs-border-width);       /* Header border width */
    --bs-modal-footer-bg: var(--bs-body-bg);                                /* Footer background */
    --bs-modal-footer-border-color: var(--bs-modal-border-color); /* Footer border now also references modal border color */
    --bs-modal-footer-border-width: var(--bs-border-width);       /* Footer border width */

}

/* HR Styling for Pink Theme in Light Mode */
html[data-bs-theme="light"] hr {
    --bs-hr-border-width: var(--bs-border-width);
    --bs-hr-opacity: 0.25;
    
    margin: 1rem 0;
    color: var(--bs-hr-color);
    border: 0;
    border-top: var(--bs-hr-border-width) solid var(--bs-hr-color);
    opacity: var(--bs-hr-opacity);
}

html[data-bs-theme="light"] a {
    color: var(--bs-link-color);
    text-decoration: none; /* Optional: remove underline by default */
}

html[data-bs-theme="light"] a:hover,
html[data-bs-theme="light"] a:focus {
    color: var(--bs-link-hover-color);   /* Apply darker color on hover */
}

/* Navbar Links Styling for Light Theme */
html[data-bs-theme="light"] .navbar a {
    color: var(--bs-body-color);       /* Body color for navbar links */
    text-decoration: none;             /* Remove underline */
}

html[data-bs-theme="light"] .navbar a:hover,
html[data-bs-theme="light"] .navbar a:focus {
    color: var(--bs-link-hover-color); /* Pink theme hover color */
    text-decoration: none;
}

/* Light Mode Dropdown Menu Styling for Pink Theme */
html[data-bs-theme="light"] .dropdown-menu {
    --bs-dropdown-color: var(--bs-body-color);                        /* Text color for dropdown */
    --bs-dropdown-bg: var(--bs-body-bg);                              /* Background color for dropdown */
    --bs-dropdown-border-color: #ff99cc;                              /* Pink border color */
    --bs-dropdown-link-color: var(--bs-body-color);                   /* Text color for dropdown links */
    --bs-dropdown-link-hover-color: var(--bs-body-color);             /* Hover text color */
    --bs-dropdown-link-hover-bg: #ffd6e0;                             /* Hover background */
    --bs-dropdown-link-active-color: #f8d8e5;                         /* Light pink for active text */
    --bs-dropdown-link-active-bg: #ff66b2;                            /* Active background color */
    --bs-dropdown-link-disabled-color: #6c757d;                       /* Muted gray for disabled items */
    --bs-dropdown-divider-bg: #ff99cc;                                /* Divider color */
    --bs-dropdown-header-color: #6c757d;                              /* Header text color */

    /* Additional menu styling */
    color: var(--bs-dropdown-color);
    background-color: var(--bs-dropdown-bg);
    border-color: var(--bs-dropdown-border-color);
}

/* Individual Dropdown Item Styling */
html[data-bs-theme="light"] .dropdown-item {
    color: var(--bs-dropdown-link-color);                             /* Link color */
    background-color: transparent;                                    /* Default transparent background */
}

html[data-bs-theme="light"] .dropdown-item:hover,
html[data-bs-theme="light"] .dropdown-item:focus {
    color: var(--bs-dropdown-link-hover-color);                       /* Hover text color */
    background-color: var(--bs-dropdown-link-hover-bg);               /* Hover background */
}

html[data-bs-theme="light"] .dropdown-item.active,
html[data-bs-theme="light"] .dropdown-item:active {
    color: var(--bs-dropdown-link-active-color);                      /* Active text color */
    background-color: var(--bs-dropdown-link-active-bg);              /* Active background */
    text-decoration: none;
}

/* Disabled State */
html[data-bs-theme="light"] .dropdown-item.disabled,
html[data-bs-theme="light"] .dropdown-item:disabled {
    color: var(--bs-dropdown-link-disabled-color);                    /* Disabled text color */
    pointer-events: none;
    background-color: transparent;
}

/* Divider and Header Styling */
html[data-bs-theme="light"] .dropdown-divider {
    background-color: var(--bs-dropdown-divider-bg);                  /* Divider color */
}

html[data-bs-theme="light"] .dropdown-header {
    color: var(--bs-dropdown-header-color);                           /* Header text color */
}


/* Alert Box Customization */
html[data-bs-theme="light"] .alert-primary {
    background-color: var(--bs-primary);
    color: var(--bs-dark);
    border-color: var(--bs-primary);
}
html[data-bs-theme="light"] .alert-secondary {
    background-color: var(--bs-secondary);
    color: var(--bs-dark);
    border-color: var(--bs-secondary);
}
html[data-bs-theme="light"] .alert-success {
    background-color: var(--bs-success);
    color: var(--bs-dark);
    border-color: var(--bs-success);
}
html[data-bs-theme="light"] .alert-info {
    background-color: var(--bs-info);
    color: var(--bs-dark);
    border-color: var(--bs-info);
}
html[data-bs-theme="light"] .alert-warning {
    background-color: var(--bs-warning);
    color: var(--bs-dark);
    border-color: var(--bs-warning);
}
html[data-bs-theme="light"] .alert-danger {
    background-color: var(--bs-danger);
    color: var(--bs-light);
    border-color: var(--bs-danger);
}
html[data-bs-theme="light"] .alert-light {
    background-color: var(--bs-light);
    color: var(--bs-dark);
    border-color: var(--bs-secondary);
}
html[data-bs-theme="light"] .alert-dark {
    background-color: var(--bs-dark);
    color: var(--bs-light);
    border-color: var(--bs-dark);
}

/* Buttons */

/* Primary Button */
html[data-bs-theme="light"] .btn-primary {
    background-color: var(--bs-primary);
    color: var(--bs-light);
    border-color: var(--bs-primary);
}
html[data-bs-theme="light"] .btn-primary:hover,
html[data-bs-theme="light"] .btn-primary:focus,
html[data-bs-theme="light"] .btn-primary:active {
    background-color: var(--bs-button-hover-bg);
    border-color: var(--bs-button-hover-bg);
}

/* Secondary Button */
html[data-bs-theme="light"] .btn-secondary {
    background-color: var(--bs-secondary);
    color: var(--bs-dark);
    border-color: var(--bs-secondary);
}
html[data-bs-theme="light"] .btn-secondary:hover,
html[data-bs-theme="light"] .btn-secondary:focus,
html[data-bs-theme="light"] .btn-secondary:active {
    background-color: var(--bs-btn-secondary-hover-bg);
    border-color: var(--bs-btn-secondary-hover-border-color);
}

/* Success Button */
html[data-bs-theme="light"] .btn-success {
    background-color: var(--bs-success);
    color: var(--bs-dark);
    border-color: var(--bs-success);
}
html[data-bs-theme="light"] .btn-success:hover,
html[data-bs-theme="light"] .btn-success:focus,
html[data-bs-theme="light"] .btn-success:active {
    background-color: var(--bs-btn-success-hover-bg);
    border-color: var(--bs-btn-success-hover-border-color);
}

/* Info Button */
html[data-bs-theme="light"] .btn-info {
    background-color: var(--bs-info);
    color: var(--bs-dark);
    border-color: var(--bs-info);
}
html[data-bs-theme="light"] .btn-info:hover,
html[data-bs-theme="light"] .btn-info:focus,
html[data-bs-theme="light"] .btn-info:active {
    background-color: var(--bs-btn-info-hover-bg);
    border-color: var(--bs-btn-info-hover-border-color);
}

/* Warning Button */
html[data-bs-theme="light"] .btn-warning {
    background-color: var(--bs-warning);
    color: var(--bs-dark);
    border-color: var(--bs-warning);
}
html[data-bs-theme="light"] .btn-warning:hover,
html[data-bs-theme="light"] .btn-warning:focus,
html[data-bs-theme="light"] .btn-warning:active {
    background-color: var(--bs-btn-warning-hover-bg);
    border-color: var(--bs-btn-warning-hover-border-color);
}

/* Danger Button */
html[data-bs-theme="light"] .btn-danger {
    background-color: var(--bs-danger);
    color: var(--bs-dark);
    border-color: var(--bs-danger);
}
html[data-bs-theme="light"] .btn-danger:hover,
html[data-bs-theme="light"] .btn-danger:focus,
html[data-bs-theme="light"] .btn-danger:active {
    background-color: var(--bs-btn-danger-hover-bg);
    border-color: var(--bs-btn-danger-hover-border-color);
}

/* Light Button */
html[data-bs-theme="light"] .btn-light {
    background-color: var(--bs-light);
    color: var(--bs-dark);
    border-color: var(--bs-secondary);
}
html[data-bs-theme="light"] .btn-light:hover,
html[data-bs-theme="light"] .btn-light:focus,
html[data-bs-theme="light"] .btn-light:active {
    background-color: var(--bs-btn-light-hover-bg);
    border-color: var(--bs-btn-light-hover-border-color);
}

/* Dark Button */
html[data-bs-theme="light"] .btn-dark {
    background-color: var(--bs-dark);
    color: var(--bs-light);
    border-color: var(--bs-dark);
}
html[data-bs-theme="light"] .btn-dark:hover,
html[data-bs-theme="light"] .btn-dark:focus,
html[data-bs-theme="light"] .btn-dark:active {
    background-color: var(--bs-btn-dark-hover-bg);
    border-color: var(--bs-btn-dark-hover-border-color);
}

/* Entry Box Styling */
html[data-bs-theme="light"] .entry-box:nth-child(even) {
    background-color: var(--entry-box-even-bg); /* Light theme color for even entries */
}
html[data-bs-theme="light"] .entry-box:nth-child(odd) {
    background-color: var(--entry-box-odd-bg); /* Light theme color for odd entries */
}

/* Week Separators */
html[data-bs-theme="light"] .weekSeparator.custom-week-header {
    background-color: var(--bs-week-separator-bg); /* Light pink background */
    padding: 0.5em 1em;
    text-align: center;
    margin: 1em 0;
}

html[data-bs-theme="light"] .custom-week-title,
html[data-bs-theme="light"] .custom-week-range {
    color: var(--bs-week-separator-text-color); /* Dark text for readability on light pink background */
}


/* Checkbox and Switch Customization */
html[data-bs-theme="light"] .form-check-input {
    background-color: var(--bs-form-check-bg); /* Light pink background for unchecked */
    border: 1px solid var(--bs-form-check-border); /* Border color for unchecked state */
}

html[data-bs-theme="light"] .form-check-input:checked {
    background-color: var(--bs-form-check-checked-bg); /* Darker pink background when checked */
    border-color: var(--bs-form-check-checked-border-color); /* Border color when checked */
}

html[data-bs-theme="light"] .form-check-input:focus,
html[data-bs-theme="light"] .form-check-input:active {
    box-shadow: 0 0 0 0.25rem var(--bs-form-check-focus-shadow); /* Pink shadow on focus */
    border-color: var(--bs-form-check-focus-border-color); /* Focused border color */
}

html[data-bs-theme="light"] .form-switch .form-check-input:checked {
    background-color: var(--bs-form-check-checked-bg); /* Darker pink for checked switch */
    border-color: var(--bs-form-check-checked-border-color); /* Border color when checked */
}

html[data-bs-theme="light"] .form-switch .form-check-input:checked::before {
    background-color: var(--bs-form-check-switch-handle-color); /* White handle on checked switch */
}

/* Form Control Customization */
html[data-bs-theme="light"] .form-control {
    background-color: var(--bs-form-control-bg); /* Background for inputs */
    color: var(--bs-form-control-color); /* Text color */
    border: 1px solid var(--bs-form-control-border-color); /* Border color */
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}

html[data-bs-theme="light"] .form-control::placeholder {
    color: var(--bs-form-control-placeholder-color); /* Placeholder color */
    opacity: 0.7;
}

html[data-bs-theme="light"] .form-control:focus {
    border-color: var(--bs-form-control-focus-border-color); /* Focus border color */
    box-shadow: 0 0 0 0.25rem var(--bs-form-control-focus-shadow); /* Focus shadow */
}

html[data-bs-theme="light"] .form-control:disabled,
html[data-bs-theme="light"] .form-control[readonly] {
    background-color: var(--bs-form-control-disabled-bg); /* Background for disabled/readonly */
    color: var(--bs-form-control-disabled-color); /* Text color for disabled/readonly */
    border-color: var(--bs-form-control-disabled-border-color); /* Border color for disabled/readonly */
    opacity: 1;
}

html[data-bs-theme="light"] .form-select {
    background-color: var(--bs-form-control-bg); /* Background for select inputs */
    color: var(--bs-form-control-color); /* Text color for select */
    border: 1px solid var(--bs-form-control-border-color); /* Border color for select */
}

html[data-bs-theme="light"] .form-select:focus {
    border-color: var(--bs-form-control-focus-border-color); /* Focus border color for select */
    box-shadow: 0 0 0 0.25rem var(--bs-form-control-focus-shadow); /* Focus shadow for select */
}

/* Light Theme Customizations for File Input Button */
html[data-bs-theme="light"] .form-control::-webkit-file-upload-button {
    background-color: var(--bs-tertiary-bg); /* Set pink tertiary background color */
    color: var(--bs-body-color); /* Text color */
}

html[data-bs-theme="light"] .form-control::file-selector-button {
    background-color: var(--bs-tertiary-bg); /* Set pink tertiary background color */
    color: var(--bs-body-color); /* Text color */
}

html[data-bs-theme="light"] .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
    background-color: var(--bs-secondary-bg); /* Set pink secondary background color for hover */
}

html[data-bs-theme="light"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--bs-secondary-bg); /* Set pink secondary background color for hover */
}

/* Table Styling */
html[data-bs-theme="light"] .table {
    background-color: var(--bs-table-bg);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

html[data-bs-theme="light"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bs-table-accent-bg); /* Striped row color */
}

html[data-bs-theme="light"] .table-hover tbody tr:hover {
    background-color: var(--bs-table-hover-bg); /* Hover background color */
    color: var(--bs-table-hover-color);
}

/* Nav Tabs Styling for Pink Theme in Light Theme */
html[data-bs-theme="light"] .nav-tabs {
    --bs-nav-tabs-border-width: var(--bs-border-width);
    --bs-nav-tabs-border-color: #ff69b4; /* Pink border color */
    --bs-nav-tabs-link-hover-border-color: #ff1493 #ff1493 #ff69b4; /* Pink hover color */
    --bs-nav-tabs-link-active-color: #ff69b4; /* Pink active link color */
    --bs-nav-tabs-link-active-bg: var(--bs-body-bg); /* Background remains the same */
    --bs-nav-tabs-link-active-border-color: #ff1493 #ff1493 var(--bs-body-bg); /* Pink active border color */
    border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}

html[data-bs-theme="light"] .nav-tabs .nav-link {
    margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
    border: var(--bs-nav-tabs-border-width) solid transparent;
    border-top-left-radius: var(--bs-nav-tabs-border-radius);
    border-top-right-radius: var(--bs-nav-tabs-border-radius);
    color: var(--bs-nav-link-color);
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    background-color: transparent; /* Transparent background for inactive tabs */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Hover effect for nav links */
html[data-bs-theme="light"] .nav-tabs .nav-link:hover {
    color: var(--bs-nav-link-hover-color);
    border-color: var(--bs-nav-tabs-link-hover-border-color); /* Uses hover border color from defined variables */
}

/* Active Tab Styling */
html[data-bs-theme="light"] .nav-tabs .nav-item.show .nav-link,
html[data-bs-theme="light"] .nav-tabs .nav-link.active {
    color: var(--bs-nav-tabs-link-active-color);               /* Dark pink for active tab text */
    background-color: var(--bs-nav-tabs-link-active-bg);       /* Transparent background for active tab */
    border-color: var(--bs-nav-tabs-link-active-border-color); /* Pink border on top and sides, no bottom border */
}

/* Primary Button in Button Group */
html[data-bs-theme="light"] .btn-group .btn-primary {
    color: var(--bs-btn-primary-color);
    background-color: var(--bs-btn-primary-bg);
    border-color: var(--bs-btn-primary-border-color);
}

html[data-bs-theme="light"] .btn-group .btn-primary:hover,
html[data-bs-theme="light"] .btn-group .btn-primary:focus {
    color: var(--bs-btn-primary-hover-color);
    background-color: var(--bs-btn-primary-hover-bg);
    border-color: var(--bs-btn-primary-hover-border-color);
}

/* Secondary Button in Button Group */
html[data-bs-theme="light"] .btn-group .btn-secondary {
    color: var(--bs-btn-secondary-color);
    background-color: var(--bs-btn-secondary-bg);
    border-color: var(--bs-btn-secondary-border-color);
}

html[data-bs-theme="light"] .btn-group .btn-secondary:hover,
html[data-bs-theme="light"] .btn-group .btn-secondary:focus {
    color: var(--bs-btn-secondary-hover-color);
    background-color: var(--bs-btn-secondary-hover-bg);
    border-color: var(--bs-btn-secondary-hover-border-color);
}

/* Success Button in Button Group */
html[data-bs-theme="light"] .btn-group .btn-success {
    color: var(--bs-btn-success-color);
    background-color: var(--bs-btn-success-bg);
    border-color: var(--bs-btn-success-border-color);
}

html[data-bs-theme="light"] .btn-group .btn-success:hover,
html[data-bs-theme="light"] .btn-group .btn-success:focus {
    color: var(--bs-btn-success-hover-color);
    background-color: var(--bs-btn-success-hover-bg);
    border-color: var(--bs-btn-success-hover-border-color);
}

/* Danger Button in Button Group */
html[data-bs-theme="light"] .btn-group .btn-danger {
    color: var(--bs-btn-danger-color);
    background-color: var(--bs-btn-danger-bg);
    border-color: var(--bs-btn-danger-border-color);
}

html[data-bs-theme="light"] .btn-group .btn-danger:hover,
html[data-bs-theme="light"] .btn-group .btn-danger:focus {
    color: var(--bs-btn-danger-hover-color);
    background-color: var(--bs-btn-danger-hover-bg);
    border-color: var(--bs-btn-danger-hover-border-color);
}

/* Light Button in Button Group */
html[data-bs-theme="light"] .btn-group .btn-light {
    color: var(--bs-btn-light-color);
    background-color: var(--bs-btn-light-bg);
    border-color: var(--bs-btn-light-border-color);
}

html[data-bs-theme="light"] .btn-group .btn-light:hover,
html[data-bs-theme="light"] .btn-group .btn-light:focus {
    color: var(--bs-btn-light-hover-color);
    background-color: var(--bs-btn-light-hover-bg);
    border-color: var(--bs-btn-light-hover-border-color);
}

/* Dark Button in Button Group */
html[data-bs-theme="light"] .btn-group .btn-dark {
    color: var(--bs-btn-dark-color);
    background-color: var(--bs-btn-dark-bg);
    border-color: var(--bs-btn-dark-border-color);
}

html[data-bs-theme="light"] .btn-group .btn-dark:hover,
html[data-bs-theme="light"] .btn-group .btn-dark:focus {
    color: var(--bs-btn-dark-hover-color);
    background-color: var(--bs-btn-dark-hover-bg);
    border-color: var(--bs-btn-dark-hover-border-color);
}

html[data-bs-theme="light"] .btn-outline-primary:hover,
html[data-bs-theme="light"] .btn-outline-primary:focus {
    color: var(--bs-btn-outline-primary-hover-color);  /* White text on hover */
    background-color: var(--bs-btn-outline-primary-hover-bg);
    border-color: var(--bs-btn-outline-primary-hover-border-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-btn-outline-primary-focus-shadow-rgb), 0.5);
}

/* Active and Checked Button States in Light Theme */
html[data-bs-theme="light"] .btn-check:checked + .btn,
html[data-bs-theme="light"] .btn.active,
html[data-bs-theme="light"] .btn.show,
html[data-bs-theme="light"] .btn:first-child:active,
html[data-bs-theme="light"] :not(.btn-check) + .btn:active {
    color: var(--bs-btn-active-color);                          /* Text color when active */
    background-color: var(--bs-btn-active-bg);                  /* Background color when active */
    border-color: var(--bs-btn-active-border-color);            /* Border color when active */
    background-image: none;                                     /* Remove gradient if enabled */
    box-shadow: var(--bs-btn-active-shadow);                    /* Active shadow effect */
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Focus-visible state for Active and Checked Buttons */
html[data-bs-theme="light"] .btn-check:checked:focus-visible + .btn,
html[data-bs-theme="light"] .btn:focus-visible {
    color: var(--bs-btn-hover-color);                           /* Text color on focus */
    background-color: var(--bs-btn-hover-bg);                   /* Background color on focus */
    border-color: var(--bs-btn-hover-border-color);             /* Border color on focus */
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5); /* Pink focus shadow */
}

/* Override variables for .btn-outline-primary */
html[data-bs-theme="light"] .btn-outline-primary {
    --bs-btn-color: var(--bs-btn-outline-primary-color);
    --bs-btn-border-color: var(--bs-btn-outline-primary-border-color);
    --bs-btn-hover-color: var(--bs-btn-outline-primary-hover-color);
    --bs-btn-hover-bg: var(--bs-btn-outline-primary-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-outline-primary-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-btn-outline-primary-focus-shadow-rgb);
    --bs-btn-active-color: var(--bs-btn-outline-primary-active-color);
    --bs-btn-active-bg: var(--bs-btn-outline-primary-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-outline-primary-active-border-color);
    --bs-btn-active-shadow: var(--bs-btn-outline-primary-active-shadow);
}

/* Override variables for .btn-primary */
html[data-bs-theme="light"] .btn-primary {
    --bs-btn-color: var(--bs-btn-primary-color);
    --bs-btn-bg: var(--bs-btn-primary-bg);
    --bs-btn-border-color: var(--bs-btn-primary-border-color);
    --bs-btn-hover-color: var(--bs-btn-primary-hover-color);
    --bs-btn-hover-bg: var(--bs-btn-primary-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-primary-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-btn-primary-focus-shadow-rgb);
    --bs-btn-active-color: var(--bs-btn-primary-active-color);
    --bs-btn-active-bg: var(--bs-btn-primary-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-primary-active-border-color);
    --bs-btn-active-shadow: var(--bs-btn-active-shadow);
}

/* Override variables for .btn-secondary */
html[data-bs-theme="light"] .btn-secondary {
    --bs-btn-color: var(--bs-btn-secondary-color);
    --bs-btn-bg: var(--bs-btn-secondary-bg);
    --bs-btn-border-color: var(--bs-btn-secondary-border-color);
    --bs-btn-hover-color: var(--bs-btn-secondary-hover-color);
    --bs-btn-hover-bg: var(--bs-btn-secondary-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-secondary-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-btn-secondary-focus-shadow-rgb);
    --bs-btn-active-color: var(--bs-btn-secondary-active-color);
    --bs-btn-active-bg: var(--bs-btn-secondary-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-secondary-active-border-color);
    --bs-btn-active-shadow: var(--bs-btn-active-shadow);
}

/* Override variables for .btn-success */
html[data-bs-theme="light"] .btn-success {
    --bs-btn-color: var(--bs-btn-success-color);
    --bs-btn-bg: var(--bs-btn-success-bg);
    --bs-btn-border-color: var(--bs-btn-success-border-color);
    --bs-btn-hover-color: var(--bs-btn-success-hover-color);
    --bs-btn-hover-bg: var(--bs-btn-success-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-success-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-btn-success-focus-shadow-rgb);
    --bs-btn-active-color: var(--bs-btn-success-active-color);
    --bs-btn-active-bg: var(--bs-btn-success-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-success-active-border-color);
    --bs-btn-active-shadow: var(--bs-btn-active-shadow);
}

/* Override variables for .btn-danger */
html[data-bs-theme="light"] .btn-danger {
    --bs-btn-color: var(--bs-btn-danger-color);
    --bs-btn-bg: var(--bs-btn-danger-bg);
    --bs-btn-border-color: var(--bs-btn-danger-border-color);
    --bs-btn-hover-color: var(--bs-btn-danger-hover-color);
    --bs-btn-hover-bg: var(--bs-btn-danger-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-danger-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-btn-danger-focus-shadow-rgb);
    --bs-btn-active-color: var(--bs-btn-danger-active-color);
    --bs-btn-active-bg: var(--bs-btn-danger-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-danger-active-border-color);
    --bs-btn-active-shadow: var(--bs-btn-active-shadow);
}

/* Override variables for .btn-warning */
html[data-bs-theme="light"] .btn-warning {
    --bs-btn-color: var(--bs-btn-warning-color);
    --bs-btn-bg: var(--bs-btn-warning-bg);
    --bs-btn-border-color: var(--bs-btn-warning-border-color);
    --bs-btn-hover-color: var(--bs-btn-warning-hover-color);
    --bs-btn-hover-bg: var(--bs-btn-warning-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-warning-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-btn-warning-focus-shadow-rgb);
    --bs-btn-active-color: var(--bs-btn-warning-active-color);
    --bs-btn-active-bg: var(--bs-btn-warning-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-warning-active-border-color);
    --bs-btn-active-shadow: var(--bs-btn-active-shadow);
}

/* Override variables for .btn-info */
html[data-bs-theme="light"] .btn-info {
    --bs-btn-color: var(--bs-btn-info-color);
    --bs-btn-bg: var(--bs-btn-info-bg);
    --bs-btn-border-color: var(--bs-btn-info-border-color);
    --bs-btn-hover-color: var(--bs-btn-info-hover-color);
    --bs-btn-hover-bg: var(--bs-btn-info-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-info-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-btn-info-focus-shadow-rgb);
    --bs-btn-active-color: var(--bs-btn-info-active-color);
    --bs-btn-active-bg: var(--bs-btn-info-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-info-active-border-color);
    --bs-btn-active-shadow: var(--bs-btn-active-shadow);
}

/* Override variables for .btn-light */
html[data-bs-theme="light"] .btn-light {
    --bs-btn-color: var(--bs-btn-light-color);
    --bs-btn-bg: var(--bs-btn-light-bg);
    --bs-btn-border-color: var(--bs-btn-light-border-color);
    --bs-btn-hover-color: var(--bs-btn-light-hover-color);
    --bs-btn-hover-bg: var(--bs-btn-light-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-light-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-btn-light-focus-shadow-rgb);
    --bs-btn-active-color: var(--bs-btn-light-active-color);
    --bs-btn-active-bg: var(--bs-btn-light-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-light-active-border-color);
    --bs-btn-active-shadow: var(--bs-btn-active-shadow);
}

/* Override variables for .btn-dark */
html[data-bs-theme="light"] .btn-dark {
    --bs-btn-color: var(--bs-btn-dark-color);
    --bs-btn-bg: var(--bs-btn-dark-bg);
    --bs-btn-border-color: var(--bs-btn-dark-border-color);
    --bs-btn-hover-color: var(--bs-btn-dark-hover-color);
    --bs-btn-hover-bg: var(--bs-btn-dark-hover-bg);
    --bs-btn-hover-border-color: var(--bs-btn-dark-hover-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-btn-dark-focus-shadow-rgb);
    --bs-btn-active-color: var(--bs-btn-dark-active-color);
    --bs-btn-active-bg: var(--bs-btn-dark-active-bg);
    --bs-btn-active-border-color: var(--bs-btn-dark-active-border-color);
    --bs-btn-active-shadow: var(--bs-btn-active-shadow);
}

/* Define color and border variables for each outline button type */
html[data-bs-theme="light"] .btn-outline-primary {
    --bs-btn-color: var(--bs-btn-outline-primary-color);
    --bs-btn-border-color: var(--bs-btn-outline-primary-color);
}

html[data-bs-theme="light"] .btn-outline-secondary {
    --bs-btn-color: var(--bs-btn-outline-secondary-color);
    --bs-btn-border-color: var(--bs-btn-outline-secondary-color);
}

html[data-bs-theme="light"] .btn-outline-success {
    --bs-btn-color: var(--bs-btn-outline-success-color);
    --bs-btn-border-color: var(--bs-btn-outline-success-color);
}

html[data-bs-theme="light"] .btn-outline-danger {
    --bs-btn-color: var(--bs-btn-outline-danger-color);
    --bs-btn-border-color: var(--bs-btn-outline-danger-color);
}

html[data-bs-theme="light"] .btn-outline-warning {
    --bs-btn-color: var(--bs-btn-outline-warning-color);
    --bs-btn-border-color: var(--bs-btn-outline-warning-color);
}

html[data-bs-theme="light"] .btn-outline-info {
    --bs-btn-color: var(--bs-btn-outline-info-color);
    --bs-btn-border-color: var(--bs-btn-outline-info-color);
}

html[data-bs-theme="light"] .btn-outline-light {
    --bs-btn-color: var(--bs-btn-outline-light-color);
    --bs-btn-border-color: var(--bs-btn-outline-light-color);
}

html[data-bs-theme="light"] .btn-outline-dark {
    --bs-btn-color: var(--bs-btn-outline-dark-color);
    --bs-btn-border-color: var(--bs-btn-outline-dark-color);
}

/* Single hover rule for outline buttons */
html[data-bs-theme="light"] .btn-outline-primary:hover,
html[data-bs-theme="light"] .btn-outline-secondary:hover,
html[data-bs-theme="light"] .btn-outline-success:hover,
html[data-bs-theme="light"] .btn-outline-danger:hover,
html[data-bs-theme="light"] .btn-outline-warning:hover,
html[data-bs-theme="light"] .btn-outline-info:hover,
html[data-bs-theme="light"] .btn-outline-light:hover,
html[data-bs-theme="light"] .btn-outline-dark:hover {
    color: var(--bs-btn-color);
    background-color: transparent;
    border-color: var(--bs-btn-border-color);
    box-shadow: none;
}

html[data-bs-theme="light"] .table {
    --bs-table-color: var(--bs-body-color);           /* Text color for table */
    --bs-table-border-color: var(--bs-secondary);      /* Light pink border color for table */
}

/* Light Mode Modal Styling */
html[data-bs-theme="light"] .modal {
    --bs-modal-color: var(--bs-body-color);                          /* Text color */
    --bs-modal-bg: var(--bs-body-bg);                                /* Background color */
    --bs-modal-border-color: #ff99cc;                                /* Light pink border color */
    --bs-modal-header-border-color: var(--bs-modal-border-color);    /* Header border color, referencing modal border color */
    --bs-modal-header-border-width: var(--bs-border-width);          /* Custom header border width */
    --bs-modal-footer-bg: var(--bs-body-bg);                                  /* Footer background */
    --bs-modal-footer-border-color: #ff99cc;                         /* Footer border color */
    --bs-modal-footer-border-width: var(--bs-border-width);          /* Footer border width */

    color: var(--bs-modal-color);                                    /* Apply text color */
    border-color: var(--bs-modal-border-color);                      /* Apply border color */
    box-shadow: var(--bs-modal-box-shadow);                          /* Apply shadow effect */
}

/* Modal Header Styling for Light Mode */
html[data-bs-theme="light"] .modal .modal-header {
    color: var(--bs-modal-color);                                    /* Header text color */
    border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color); /* Apply header border color */
}

/* Modal Footer Styling for Light Mode */
html[data-bs-theme="light"] .modal-footer {
    border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color); /* Footer border */
}

/* Custom Modal Backdrop Styling */
html[data-bs-theme="light"] .modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.5); /* Darker semi-transparent backdrop */
}

/* Border Top Styling */
html[data-bs-theme="light"] .border-top {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-secondary) !important;
}

/* 
██████   █████  ██████  ██   ██     ████████ ██   ██ ███████ ███    ███ ███████ 
██   ██ ██   ██ ██   ██ ██  ██         ██    ██   ██ ██      ████  ████ ██      
██   ██ ███████ ██████  █████          ██    ███████ █████   ██ ████ ██ █████   
██   ██ ██   ██ ██   ██ ██  ██         ██    ██   ██ ██      ██  ██  ██ ██      
██████  ██   ██ ██   ██ ██   ██        ██    ██   ██ ███████ ██      ██ ███████ 
*/

/* Dark Mode Customization */
html[data-bs-theme="dark"] {
    /* Entry box colors */
    --entry-box-even-bg: var(--bs-gray-900); /* Dark gray for even entries */
    --entry-box-odd-bg: var(--bs-gray-800);  /* Lighter gray for odd entries */

    /* Link colors */
    --download-link-color: #ffffff; /* White for links in dark mode */
}

/* Entry Box Styling for Dark Mode */
html[data-bs-theme="dark"] .entry-box:nth-child(even) {
    background-color: var(--entry-box-even-bg); /* Dark theme color for even entries */
}
html[data-bs-theme="dark"] .entry-box:nth-child(odd) {
    background-color: var(--entry-box-odd-bg); /* Dark theme color for odd entries */
}

/* Week Separators in Dark Mode */
html[data-bs-theme="dark"] .weekSeparator.custom-week-header {
    background-color: #efadce;
    padding: 0.5em 1em;
    text-align: center;
    margin: 1em 0;
}

/* var(--bs-gray-800); */

html[data-bs-theme="dark"] .custom-week-title,
html[data-bs-theme="dark"] .custom-week-range {
    color: #000; /* Light text for readability on dark background */
}

/* color: #e0e0e0;  */
/* Light text for readability on dark background */

/*    ____  ____   _________   ____    ____    _____                        */
/*   |_   ||   _| |  _   _  | |_   \  /   _|  |_   _|                       */
/*     | |__| |   |_/ | | \_|   |   \/   |      | |                         */
/*     |  __  |       | |       | |\  /| |      | |   _                     */
/*    _| |  | |_     _| |_     _| |_\/_| |_    _| |__/ |                    */
/*   |____||____|   |_____|   |_____||_____|  |________|                    */
/*                                                                          */
/*      ___             ___                      _                          */
/*    .' _ '.         .' ..]                    / |_                        */
/*    | (_) '___     _| |_     .--.     .--.   `| |-'  .---.   _ .--.       */
/*    .`___'/ _/    '-| |-'  / .'`\ \ / .'`\ \  | |   / /__\\ [ `/'`\]      */
/*   | (___)  \_      | |    | \__. | | \__. |  | |,  | \__.,  | |          */
/*   `._____.\__|    [___]    '.__.'   '.__.'   \__/   '.__.' [___]         */


html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content-wrap {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
}


.icon-link .pencil-icon {
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out; /* Smooth transition for transform, color, and opacity */
    color: lightgrey; /* Default color for pencil icon */
    opacity: 0.2; /* Start with a lower opacity */
}

.icon-link:hover .pencil-icon {
    transform: translateY(-0.25rem); /* Moves icon slightly up */
    color: #62c370; /* Pleasant pastel green on hover */
    opacity: 1.0; /* Full opacity on hover */
}


/* Buttons used in the index.php to accept and reject users*/

.user-activation-buttons {
    border: none;
    background: none;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 100%;
    transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
}

.user-activation-buttons:hover {
    transform: translateY(-10%);
}

/*Console log in the index.php*/

body#login-console-page {
    background-color: #121212; /* This sets the body's background color directly */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Courier New', Courier, monospace;
}

.console-wrapper {
    --console-bg-color: #333; /* Console background color */
    --console-text-color: #0F0; /* Text color */
    --console-border-color: #646464; /* Border and scrollbar handle color */
    --scrollbar-track-color: #2b2b2b; /* Scrollbar track color */
    display: flex;
    flex-direction: column;
    width: 60em; /* Fixed width */
    height: 35em; /* Fixed height */
    border: 4px solid var(--console-border-color);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    font-size: 1em; /* Base font size */
}

.console-output {
    flex-grow: 1;
    background-color: var(--console-bg-color);
    color: var(--console-text-color);
    overflow-y: auto;
    padding: 15px;
    scrollbar-width: thin;
    scrollbar-color: var(--console-border-color) var(--scrollbar-track-color);
}

.console-input-wrapper {
    display: flex;
    background-color: var(--console-bg-color);
    padding-left: 15px;
    color: var(--console-text-color);
}

#console-prefix, #console-input {
    background: transparent;
    border: none;
    outline: none;
    padding-top: 15px;

}

#console-input {
    flex-grow: 1;
    color: var(--console-text-color);
}

/* Scrollbar styling */
.console-output::-webkit-scrollbar {
    width: 8px;
}

.console-output::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
}

.console-output::-webkit-scrollbar-thumb {
    background: var(--console-border-color);
    border-radius: 4px;
}

/* Responsive font size adjustments */

@media (max-width: 575.98px) {
    .console-wrapper {
        position: fixed;
        top: 0;
        width: 100%;
        height: 50vh; /* Full viewport height */
        font-size: 0.75em; /* Smaller font size for small devices */
        border: none;
    }

    .console-output {
        padding: 0 0 0 8px; /* Remove padding */
    }

    #console-input {
        padding: 15px 0 0 0;
    }

    .console-input-wrapper {
        padding: 5px 0 0 8px;
    }
}

/* Maintain fixed dimensions and adjust font size for larger screens */
@media (min-width: 576px) {
    .console-wrapper {
        font-size: 0.875em;
    }
}

@media (min-width: 768px) {
    .console-wrapper {
        font-size: 1em;
    }
}

@media (min-width: 992px) {
    .console-wrapper {
        font-size: 1.125em;
    }
}

@media (min-width: 1200px) {
    .console-wrapper {
        font-size: 1.25em;
    }
}

@media (min-width: 1400px) {
    .console-wrapper {
        font-size: 1.5em;
    }
}



/*   _     _____ _____ ___________  ___  _____  _____   */
/*  | |   |_   _/  ___|_   _| ___ \/ _ \|  __ \|  ___|  */
/*  | |     | | \ `--.  | | | |_/ / /_\ \ |  \/| |__    */
/*  | |     | |  `--. \ | | |  __/|  _  | | __ |  __|   */
/*  | |_____| |_/\__/ / | | | |   | | | | |_\ \| |___   */
/*  \_____/\___/\____/  \_/ \_|   \_| |_/\____/\____/   */

/* Cards for the "list tasks" page */

.list-card {
    cursor: pointer;
    transition: transform 0.3s ease-in-out; /* Add border to the transition */
}

.list-card:hover {
    transform: scale(1.05);
}

.list-card-description {
    position: relative;
    max-height: 240px; /* Default max height */
    overflow: hidden;
}

.list-card-description::after {
    content: '';
    position: absolute;
    top: 180px;
    left: 0;
    right: 0;
    height: 60px; /* Height of the fade effect */
    background: linear-gradient(to bottom, rgba(33,37,41,0), rgba(33,37,41,1));
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .list-card-description {
        max-height: 240px; /* Adjusted max height for medium screens */
    }

    .list-card-description::after {
        content: '';
        position: absolute;
        top: 180px;
        height: 60px; /* Height of the fade effect */
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .list-card-description {
        max-height: 240px; /* Adjusted max height for large screens */
    }

    .list-card-description::after {
        content: '';
        position: absolute;
        top: 180px;
        height: 60px; /* Height of the fade effect */
    }
}

/* Extra-large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .list-card-description {
        max-height: 220px; /* Optional: Adjust if needed for extra-large screens */
    }

    .list-card-description::after {
        content: '';
        position: absolute;
        top: 160px;
        height: 60px; /* Height of the fade effect */
    }
}

@media (min-width: 1400px) {
    .list-card-description {
        max-height: 240px; /* Optional: Adjust if needed for extra-large screens */
    }

    .list-card-description::after {
        content: '';
        position: absolute;
        top: 180px;
        height: 60px; /* Height of the fade effect */
    }
}



.custom-input, .custom-span {
    border-radius: 0;  /* Removes rounded corners */
}

.custom-span {
    width: 125px;       /* Fixed width of 60px */
    display: inline-block; /* Changes display to inline-block */
    text-align: center; /* Centers text horizontally */
    border-radius: 0;  /* Removes rounded corners */
}


/* compare.php */

.blinking-today strong {
    font-weight: bold;
    color: yellow;
}


/* Custom style for inline code blocks */
.inline-code {
    font-family: Consolas, "Courier New", monospace;
    background-color: var(--bs-body-bg); /* Use body background color as base */
    color: var(--bs-body-color); /* Ensure text color is appropriate */
    padding: 0px 4px;
    border-radius: 4px;
    display: inline-block;
}

/* Adjust the background and border for dark mode */
[data-bs-theme="dark"] .inline-code {
    background-color: var(--bs-gray-700);
}

/* Adjust the background and border for light mode */
[data-bs-theme="light"] .inline-code {
    background-color: var(--bs-gray-200);
}

.print-only {
    display: none;
}

.no-print {
    display: block; /* Visible by default */
}

@media print {
    body {
        color: #000;
        background: #fff;
    }
    table {
        border: 1px solid #000;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #000;
        padding: 8px;
    }
    .print-only {
        display: block !important; /* Make the message visible in print */
    }
    #reportForm button[type="submit"] {
        display: none; /* Hide the submit button in print */
    }
    .no-print {
        display: none !important; /* Hide in print */
    }
}

/* Custom class for paragraphs with no spacing */
.no-spacing {
    margin-bottom: 0 !important; /* No margin between paragraphs */
    margin-top: 0 !important;    /* No margin above the paragraph */
}

/* Ensure the custom class has higher specificity than Bootstrap's default */
.ql-editor p.no-spacing {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.bg-green-300 { background-color: rgba(111, 207, 151, 0.5); }  /* Soft green */
.bg-green-200 { background-color: rgba(129, 234, 161, 0.5); }
.bg-yellow-300 { background-color: rgba(255, 235, 59, 0.5); }  /* Soft yellow */
.bg-yellow-200 { background-color: rgba(255, 238, 88, 0.5); }
.bg-orange-300 { background-color: rgba(255, 167, 38, 0.5); }  /* Soft orange */
.bg-orange-200 { background-color: rgba(255, 183, 77, 0.5); }
.bg-red-300 { background-color: rgba(255, 82, 82, 0.5); }      /* Soft red */
.bg-red-200 { background-color: rgba(255, 134, 124, 0.5); }

/* Entry box in Posts index */
.entry-box {
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
}

.entry-box:nth-child(odd) {
    background-color: var(--bs-gray-900);
}

.entry-box:nth-child(even) {
    background-color: var(--bs-gray-800);
}

/* Adjust image columns */
@media (min-width: 768px) {
    .entry-box .col-md-6 {
        max-width: 50%;
        flex: 0 0 50%;
    }
}
@media (max-width: 767.98px) {
    .entry-box .col-md-6 {
        max-width: 100%;
        flex: 0 0 100%;
    }
}

/* light theme */
:root {
    --pink-pencil-color: #ff0066;
}

.pink-pencil {
    color: var(--pink-pencil-color);
    font-size: 1.5rem; /* Adjust as needed */
}

/* dark theme */
html[data-bs-theme="dark"] {
    --pink-pencil-color: #fbcfe8;
}



/* Apply the color to the download-link-text class */
.download-link-text {
    color: var(--download-link-color);
}

/* Charts in statistics_ajax.php */

@media (max-width: 576px) {
    /* Adjust the chart container height to accommodate rotated labels */
    #categoryUsageChart {
        height: 400px !important; /* Increase height if necessary */
    }
}

/* Big checkbox scale(3) */

.form-check-input[type=checkbox].big-checkbox {
    transform: scale(3); /* Scaled up significantly */
    margin: 1.5rem; /* Provides decent spacing */
    border-radius: 0; /* Overrides the default border-radius */
}

.collapsing.smooth-collapse {
    transition: height 0.6s ease-in-out;
    overflow: hidden;
}

.custom-cookie-consent {
    margin: 0 8px 20px; /* Adds 8px gap on left and right, and 20px gap at the bottom */
    padding: 15px;
    text-align: center;
    max-width: 600px;
    background: rgba(33, 37, 41, 0.92); /* Matches Bootstrap dark theme color */
    color: #fff; /* Text color for contrast */
    border: 2px solid rgba(255, 255, 255, 0.4); /* Thicker, subtle border */
    border-radius: 8px;
    backdrop-filter: blur(8px); /* Adds a blur effect to the background */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4); /* Enhanced shadow for more prominence */
    position: fixed;
    bottom: 0;
    z-index: 1050; /* Ensures it appears on top of other elements */
    width: calc(100% - 16px); /* Ensures box fits within screen width minus left/right gaps */
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.padding-left-1px {
    padding-left: 1px;
}

#termsSection {
    display: flex;
    flex-direction: column;
}