html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: static;
    min-height: 100%;
}

body {
    padding-top: 5rem; /* tweak if navbar is taller/shorter */

}

/* Add Site button styling */
.btn-add-site {
    color: #ffffff !important;
    background-color: #32cd32 !important; /* lime green */
    border-color: #2eb82e !important;
}

.btn-add-site:hover,
.btn-add-site:focus {
    color: #ffffff !important;
    background-color: #28b828 !important;
    border-color: #25a325 !important;
}

/* Delete site button: show on row hover only */
.site-row .site-delete-btn {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.site-row:hover .site-delete-btn {
    opacity: 1;
}

/* Narrow form inputs on admin user pages */
.narrow-input {
    max-width: 400px; 
}

/* Password input group */
.password-input-group {
    max-width: 400px;
}

/* Eye button */
.password-toggle-btn {
    min-width: 44px;
}

.centered-form {
    max-width: 450px; /* width of form */
    margin: 0 auto; /* centers it */
}

.save-btn-wrapper {
    display: flex;
    justify-content: flex-end;
}

/* ===================== DARK MODE ===================== */

/* Base background + text */
html.dark-mode body {
    background-color: #212121; /* main page background */
    color: #f8f9fa;
}

/* ALL TEXT becomes light in dark mode */
html.dark-mode body,
html.dark-mode body * {
    color: #f1f1f1 !important;
}

/* Let the body background show to the edges instead of a black "card" */
html.dark-mode .container,
html.dark-mode main,
html.dark-mode .body-content {
    background-color: transparent !important;
}

/* Links */
html.dark-mode a {
    color: #66b0ff;
}

    html.dark-mode a:hover {
        color: #99c8ff;
    }

/* Navbar & header/footer bars */
html.dark-mode .navbar,
html.dark-mode .bg-white {
    background-color: #212529 !important;
    color: #1a1e21;
}

    /* Navbar links */
    html.dark-mode .navbar,
    html.dark-mode .navbar a,
    html.dark-mode .nav-link {
        color: #ffffff !important;
    }

        html.dark-mode .navbar a:hover,
        html.dark-mode .nav-link:hover {
            color: #d0d0ff !important;
        }

/* Borders / lines */
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode hr {
    border-color: #444 !important;
}

/* Footer */
html.dark-mode .footer {
    background-color: #212529;
    border-top-color: #444;
    color: #f8f9fa;
}

/* Form controls */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode textarea {
    background-color: #1e1e1e;
    color: #f8f9fa;
    border-color: #555;
}

    html.dark-mode .form-control:focus,
    html.dark-mode .form-select:focus,
    html.dark-mode textarea:focus {
        background-color: #252525;
        color: #ffffff;
        border-color: #888;
    }

/* Checkboxes / labels */
html.dark-mode .form-check-label {
    color: #ffffff !important;
}

/* Placeholder text */
html.dark-mode ::placeholder {
    color: #cccccc !important;
}

/* Tables */
html.dark-mode table,
html.dark-mode .table {
    background-color: transparent !important;
    color: #f8f9fa;
}

    /* Dark table header */
    html.dark-mode .table thead th {
        background-color: #22252a !important;
        color: #f8f9fa !important;
    }

    /* Dark table rows */
    html.dark-mode .table tbody tr {
        background-color: #1f2126 !important;
    }

/* Remove striped row alternating colours */
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd),
html.dark-mode .table-striped > tbody > tr:nth-of-type(even) {
    background-color: #1f2126 !important;
}

/* Hover highlight for rows */
html.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Primary button stays vivid on dark bg */
html.dark-mode .btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

html.dark-mode .card {
    background-color: #1f1f23 !important;
    border-color: #333 !important;
}

html.dark-mode .card-body {
    color: #ffffff !important;
}

/* ======== DARK MODE ALERT FIXES ======== */

/* General alert dark style */
html.dark-mode .alert {
    border-color: #444 !important;
}

/* Info alert */
html.dark-mode .alert-info {
    background-color: #0d3b4f !important; /* dark teal */
    color: #d6f0ff !important;
}

/* Warning alert */
html.dark-mode .alert-warning {
    background-color: #4f3b0d !important; /* dark amber */
    color: #fff3c4 !important;
}

/* Danger alert */
html.dark-mode .alert-danger {
    background-color: #4f0d0d !important;
    color: #ffd6d6 !important;
}

/* Success alert */
html.dark-mode .alert-success {
    background-color: #0d4f1d !important;
    color: #d6ffd6 !important;
}

html.dark-mode .chart-legend-label {
    color: #ffffff !important;
}

html.dark-mode .chart-color-box {
    border: 1px solid #ffffff !important;
}

/* Force red error text in dark mode */
html.dark-mode .text-danger {
    color: #ff4d4d !important; /* brighter red for visibility */
}

/* Also ensure error text beside labels is not white */
html.dark-mode label .text-danger {
    color: #ff4d4d !important;
}

.content-wrapper {
    max-width: 1650px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Dashboard: keep chart smaller so it never crowds the table */
@media (min-width: 768px) {
    #completionChart {
        display: block;
        max-width: 260px; /* try 240–300 */
        max-height: 260px;
        margin: 0 auto; /* center inside the card */
    }

    /* keep the chart card contents from stretching */
    .dashboard-chart-actions {
        max-width: 520px;
    }
}
/* LOGIN (base / desktop) */
.login-page-wrap {
    min-height: calc(100vh - 64px); /* match your fixed navbar spacing */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 12px;
}

.login-card {
    width: 100%;
    max-width: 420px; /* <-- makes it thinner on desktop */
    border-radius: 18px;
    overflow: hidden;
}

/* =========================
   NOTIFICATIONS MODAL – DESKTOP WIDTH
   ========================= */
@media (min-width: 768px) {

    #notificationsModal .modal-dialog {
        max-width: 1100px; 
        width: 90%;
        margin: 1.75rem auto;
    }

    #notificationsModal .modal-content {
        border-radius: 16px;
    }

    /* Make list breathe more on desktop */
    #notificationsModal .modal-body {
        max-height: 65vh;
        overflow-y: auto;
    }

    /* Footer spacing */
    #notificationsModal .modal-footer {
        padding: 16px 20px;
    }
}

@media (min-width: 768px) {
    #notificationsModal .list-group-item {
        padding: 14px 18px;
        font-size: 1rem;
    }
}