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;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Corporate Colors*/
:root {
    /* Brand */
    --brand-blue: #1E81B0; /* primary */
    --brand-blue-dark: #16658A;
    --brand-blue-light: #E6F2F8;
    --brand-red: #C0392B; /* danger */
    --brand-red-dark: #922B21;
    --brand-red-light: #FDECEA;
    /* Neutrals */
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-500: #6B7280;
    --gray-300: #D1D5DB;
    --gray-100: #F3F4F6;
    /* Feedback */
    --success: #198754;
    --warning: #F59E0B;
    --info: #0DCAF0;
}

/* Primary buttons*/
.btn-primary,
.btnDefault {
    background-color: #fff;
    border-color: var(--brand-blue-dark);
    color: var(--brand-blue-dark);
}

    .btn-primary:hover,
    .btnDefault:hover {
        background-color: var(--brand-blue);
        border-color: var(--brand-blue);
        color: #fff;
    }

    .btn-primary:focus {
        box-shadow: 0 0 0 0.25rem rgba(30, 129, 176, 0.25);
        color: #fff;
    }

/* Target all headings */
h1, h2, h3, h4, h5, h6, .navbar-nav {
    color: var(--brand-blue-dark) !important; /* Force override existing styles */
}

.brand-text {
    color: var(--brand-blue-dark);
    letter-spacing: 0.3px;
}

    .brand-text:hover {
        color: var(--brand-blue); /* subtle hover polish */
    }

a {
    color: var(--brand-blue);
    text-decoration: none;
}

body {
    padding-top: 70px; /* adjust to navbar height */
}

/* Progress Bar*/
/* Password strength meter */
.progress {
    background-color: var(--gray-100);
}

.progress-bar {
    background-color: var(--brand-blue);
    transition: width 0.25s ease-in-out;
}

/* Table format*/
.table > thead > tr > th {
    background-color: var(--brand-blue-dark) !important; /* MX blue */
    color: #ffffff !important; /* white text */
}


/* Bell animation keyframes */
@keyframes bell-ring {
    0% {
        transform: rotate(0);
    }

    15% {
        transform: rotate(18deg);
    }

    30% {
        transform: rotate(-14deg);
    }

    45% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(-6deg);
    }

    75% {
        transform: rotate(4deg);
    }

    100% {
        transform: rotate(0);
    }
}


#bellBtn:hover i {
    animation: bell-ring 1s ease-in-out;
    transform-origin: top center;
}

.text-bell {
    color: #1E81B0;
}

a.markread {
    color: #1E81B0;
    text-decoration: none;
}

    a.markread:hover {
        text-decoration: underline;
    }

.notif.read {
    opacity: .6;
}

#notifPopover {
    display: none;
    position: fixed;
    top: 72px;
    right: 20px;
    z-index: 1080;
    width: 320px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Zoom cards*/
/* Card hover zoom (used across dashboards) */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .card-hover:hover {
        transform: scale(1.02);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
    }