:root {
    /* Brand & neutrals */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-bg: #f8f9fa; /* page background */
    --color-text: #212529;
    --color-muted: #6c757d;
    --color-gray-600: #6e6e6e;
    --color-gray-700: #343a40;
    --color-gray-800: #2b2b2b;
    --color-gray-900: #1a1a1a;
    --color-gray-950: #3c3c3c; /* used in gradients */
    --color-gray-300: #e6e6e6;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #f2f2f2;
    --color-gray-400: #ababab;
    --color-border: #9898480;

    /* Color opacities */
    --color-white-05: rgba(255, 255, 255, 0.05);
    --color-white-85: rgba(255, 255, 255, 0.85);
    --color-danger-25: rgba(220, 53, 69, 0.25);

    /* Brand accents */
    --color-primary: #4a83ef;
    --color-secondary: var(--color-gray-600);
    --color-accent-100: #dbe4ff; /* light accent for hovers */
    --color-nav-link: #e9edf7; /* navbar link base */
    --color-slate-800: #2c3e50;
    --color-content-bg: #cacaca; /* page wrapper bg used in navbar layout */

    /* Semantic (Bootstrap-aligned) */
    --color-success: #198754;
    --color-danger: #dc3545;
    --color-info: #0dcaf0;
    --color-info-strong: #0b5ed7; /* Slightly darker blue for better contrast */
    --color-warning: #ffc107;
    --color-success-strong: #53a66b;
    --color-success-light: #e6f4ea;
    --color-success-strong-alpha50: rgba(83, 166, 107, 0.5);
    --color-warning-strong: #f3c154;
    --color-danger-strong: #c64847;

    /* Toast backgrounds and text tints */
    --toast-bg: var(--color-gray-800);
    --toast-fg: #f1f1f1;
    --toast-success-bg: #1f3e2e;
    --toast-success-fg: #d4edda;
    --toast-danger-bg: #3b1f1f;
    --toast-danger-fg: #f8d7da;
    --toast-info-bg: #1e2f3d;
    --toast-info-fg: #cff4fc;
    --toast-warning-bg: #d0a800;
    --toast-warning-fg: #fff3cd;

    /* Common effects */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.3);
    --transition-normal: all 0.2s ease;

    /* Border Radius */
    --border-radius-xs: 0.125rem; /* 2px */
    --border-radius-sm: 0.25rem; /* 4px */
    --border-radius-md: 0.5rem; /* 8px */
    --border-radius-lg: 1rem; /* 16px */
    --border-radius-xl: 2rem; /* 32px */
    --border-radius-pill: 50rem; /* For pill-shaped elements */
    --border-radius-circle: 50%; /* For circular elements */

    /* Spacing */
    --spacing-xxs: 0.25rem; /* 4px */
    --spacing-xs: 0.5rem; /* 8px */
    --spacing-sm: 0.75rem; /* 12px */
    --spacing-md: 1rem; /* 16px */
    --spacing-lg: 1.5rem; /* 24px */
    --spacing-xl: 2rem; /* 32px */
    --spacing-xxl: 3rem; /* 48px */
    --spacing-xxxl: 4rem; /* 64px */

    /* Reusable gradients */
    --gradient-medium: linear-gradient(180deg, #1e2a3a 0%, #2a3852 10%, #3a4560 100%);
    --gradient-dark: linear-gradient(135deg, #0d1b2a 0%, #1b263b 50%, #2b2d42 100%);
    --gradient-green: linear-gradient(135deg, #28a745, #218838)

}

/* Usage: prefer var() tokens for colors in all CSS files */

body {
    font-family: 'Montserrat', sans-serif; /* Replace with your desired font family */
    background-color: var(--color-bg); /* Light gray background color */
    min-height: 100vh; /* Ensure it covers full viewport height */
    margin: 0;
    padding: 0;
}

/* ===============================
   Notifications (Toasts / Alerts)
   =============================== */

/* General Toast container */
.toast,
.alert {
    background-color: var(--toast-bg) !important; /* dark neutral background */
    color: var(--toast-fg) !important; /* light text for contrast */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-md);
}

/* Success notifications */
.toast-success,
.alert-success {
    background-color: var(--toast-success-bg) !important;
    color: var(--toast-success-fg) !important;
    border-left: 4px solid var(--color-success);
}

/* Error / danger notifications */
.toast-danger,
.alert-danger {
    background-color: var(--toast-danger-bg) !important;
    color: var(--toast-danger-fg) !important;
    border-left: 4px solid var(--color-danger);
}

/* Info */
.toast-info,
.alert-info {
    background-color: var(--toast-info-bg) !important;
    color: var(--toast-info-fg) !important;
    border-left: 4px solid var(--color-info);
}

/* Warning */
.toast-warning,
.alert-warning {
    background-color: var(--toast-warning-bg) !important;
    color: var(--toast-warning-fg) !important;
    border-left: 4px solid var(--color-warning);
}

/* ----------------------------
   Dropdown Menu
   ---------------------------- */
.dropdown-menu {
    background-color: var(--color-white);
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.dropdown-item {
    color: var(--color-slate-800);
    font-weight: 500;
    padding: 0.6rem 1.2rem;
    transition: var(--transition-normal);
}

.dropdown-item:hover {
    background-color: var(--color-gray-800);
    color: var(--color-white);
    transition: var(--transition-normal);
}

/* Change icons color on dropdown hover */
.dropdown-item:hover i {
    color: var(--color-white);
    transition: var(--transition-normal);
}

.dropdown-divider {
    margin: 0.3rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}


/* Landing Page */

.feature-box {
    transition: transform 0.3s ease-in-out;
}

.feature-box:hover {
    transform: scale(1.05);
}

img {
    transform: translateX(0%); /* Move it left off the screen */
    transition: transform 1s ease-in-out; /* Add animation for smooth effect */
}

img.animate-in {
    transform: translateX(0); /* Bring it back to its original position */
}

.image-wrapper {
    overflow: hidden; /* Prevent image overflow */
}

section {
    border-radius: 8px;
}

/* Ensure the body and html take full height */
html, body {

    overflow-x: clip;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Make the wrapper grow and take up available space */
.content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Push the footer to the bottom */
footer {
    background-color: var(--color-gray-700);
    color: var(--color-white);
    text-align: center;
    padding: 1rem 0;
    margin-top: auto; /* This pushes the footer down when content is short */
}

@media (max-width: 768px) {
    .row .col-md-6 {
        margin-bottom: 20px;
    }

    .feature-box {
        max-width: 100%; /* Ensure the boxes don't exceed the container width */
    }
}

.hero-section h1 {
    font-weight: 700;
    color: var(--color-text);
}

.hero-section p.lead {
    color: var(--color-muted);
    font-style: italic;
}

.feature-box h3 {
    font-size: 1.75rem;
    font-weight: 600;
}


/* Badges */
.badge {
    border-radius: 25%/70%;
    border: 2px solid var(--color-border);
    min-width: 110px;
}

.btn {
    min-width: 110px;
    font-weight: bold;
    cursor: pointer;
}

.table thead th {
    background: var(--gradient-medium);
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: none;
}

.table td, .table th {
    white-space: nowrap;
    text-align: left;
}

.table th.actions {
    width: 1%;
}

.table tr:nth-child(even) td, .table tr:nth-child(even) th {
    background-color: var(--color-gray-200); /* Light gray */
}

.table tr:nth-child(odd) td, .table tr:nth-child(odd) th {
    background-color: var(--color-gray-300); /* Slightly darker gray */
}

.banner {
    background-color: var(--color-gray-400);
    color: var(--color-muted);
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 1.2em;
    font-weight: bold;
}

.center {
    width: 75%;
    margin: auto;
    padding: 10px;
}

td.active {
    color: unset !important;
    background-color: unset !important;
    border-color: unset !important;
    text-shadow: unset;
}

.modal-content {
    color: black;
}

/* Style of the items inside the calendars */

.class-item {
    display: flex; /* Arrange content and button side by side */
    justify-content: space-between; /* Space out the content */
    align-items: center; /* Align items vertically */
    overflow: hidden; /* Prevent overflow */
    position: relative;
}

.class-content {
    flex-grow: 1; /* Allow the content to take most of the space */
}

.add-button-area {
    position: absolute;
    flex-shrink: 0; /* Prevent the delete button from shrinking */
    top: 0;
    right: 0;
    width: 40px; /* Adjust the width of the red strip */
    height: 100%; /* Fill the full height of the parent div */
    background-color: var(--color-gray-600);
    display: flex;
    justify-content: center;
    align-items: center;
}

.add-link {
    color: var(--color-white);
    text-decoration: none;
}

.delete-button-area {
    position: absolute;
    flex-shrink: 0; /* Prevent the delete button from shrinking */
    top: 0;
    right: 0;
    width: 40px; /* Adjust the width of the red strip */
    height: 100%; /* Fill the full height of the parent div */
    background-color: var(--color-danger-strong);
    display: flex;
    justify-content: center;
    align-items: center;
}

.delete-link {
    color: var(--color-white);
    text-decoration: none;
}

.delete-link:hover {
    color: var(--toast-danger-fg);
    scale: 1.25;
    transition: all var(--transition-fast);
}


/* Redefine btn-primary color */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

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

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

/* Redefine btn-secondary color */
.btn-secondary {
    background-color: var(--color-gray-600) !important;
    border-color: var(--color-gray-600) !important;
}

/* Redefine bg-secondary color */
.bg-secondary {
    background-color: var(--color-gray-600) !important;
}

/* Example: Redefine other colors */
.btn-success {
    background-color: var(--color-success-strong) !important;
    border-color: var(--color-success-strong) !important;
}

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

.bg-success-subtle {
    background-color: var(--color-success-strong-alpha50) !important;
}

.btn-warning {
    background-color: var(--color-warning-strong) !important;
    border-color: var(--color-warning-strong) !important;
}

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

.btn-danger {
    background-color: var(--color-danger-strong) !important;
    border-color: var(--color-danger-strong) !important;
}

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

/* Collapsible */
.collapse {
    transition: height var(--transition-normal);
}

.collapsing {
    height: 0;
    transition: height var(--transition-normal);
}

.collapse.show {
    height: auto; /* Fully expanded */
}

/* Modals Styles */
label.form-label {
    text-align: left !important;
    display: block !important;
}