:root {
    --poly-dark: #244b3a;
    --poly-deep: #315e49;
    --poly-green: #5fa98b;
    --poly-green-dark: #488a70;
    --poly-mint: #a9d5bd;
    --poly-light: #f3faf5;
    --poly-sage: #d9e5cf;
    --poly-text: #24352d;
    --poly-muted: #68776f;
    --poly-white: #ffffff;
    --poly-shadow: 0 20px 50px rgba(36, 75, 58, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--poly-light);
    color: var(--poly-text);
    font-family: "Poppins", sans-serif;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

.poly-navbar {
    background: rgba(243, 250, 245, 0.88);
    border-bottom: 1px solid rgba(36, 75, 58, 0.08);
    backdrop-filter: blur(16px);
    padding: 16px 0;
}

.poly-logo {
    color: var(--poly-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
}

.poly-logo:hover {
    color: var(--poly-dark);
}

.poly-navbar .nav-link {
    color: var(--poly-text);
    font-size: 15px;
    font-weight: 500;
    margin: 0 8px;
}

.poly-navbar .nav-link:hover {
    color: var(--poly-green-dark);
}

.btn-poly {
    background: linear-gradient(
        135deg,
        var(--poly-green),
        var(--poly-green-dark)
    );
    border: none;
    border-radius: 50px;
    box-shadow: 0 12px 25px rgba(72, 138, 112, 0.25);
    color: var(--poly-white);
    font-weight: 600;
    padding: 14px 34px;
    transition: 0.3s ease;
}

.btn-poly:hover {
    background: linear-gradient(
        135deg,
        var(--poly-green-dark),
        var(--poly-dark)
    );
    box-shadow: 0 16px 30px rgba(36, 75, 58, 0.25);
    color: var(--poly-white);
    transform: translateY(-3px);
}

.btn-small {
    padding: 10px 24px;
}

.btn-outline-poly {
    background: transparent;
    border: 2px solid var(--poly-green-dark);
    border-radius: 50px;
    color: var(--poly-green-dark);
    font-weight: 600;
    padding: 12px 32px;
    transition: 0.3s ease;
}

.btn-outline-poly:hover {
    background: var(--poly-green-dark);
    color: var(--poly-white);
    transform: translateY(-3px);
}

.hero-section {
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(169, 213, 189, 0.45),
            transparent 26%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(217, 229, 207, 0.75),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f5fbf6 0%,
            #ebf5ec 100%
        );
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

.hero-content {
    padding-top: 100px;
    position: relative;
    z-index: 2;
}

.hero-badge {
    background: rgba(95, 169, 139, 0.14);
    border: 1px solid rgba(95, 169, 139, 0.2);
    border-radius: 30px;
    color: var(--poly-green-dark);
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
    padding: 10px 18px;
}

.hero-section h1 {
    color: var(--poly-dark);
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1.1;
    max-width: 680px;
}

.hero-section h1 span {
    color: var(--poly-green);
}

.hero-description {
    color: var(--poly-muted);
    font-size: 18px;
    line-height: 1.9;
    margin-top: 24px;
    max-width: 620px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 32px;
}

.trust-item {
    align-items: center;
    color: var(--poly-muted);
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
}

.trust-icon {
    align-items: center;
    background: var(--poly-mint);
    border-radius: 50%;
    color: var(--poly-dark);
    display: inline-flex;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.hero-image-wrapper {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 650px;
    padding-top: 80px;
    position: relative;
}

.hero-image {
    animation: floatImage 5s ease-in-out infinite;
    filter: drop-shadow(0 30px 35px rgba(36, 75, 58, 0.15));
    max-height: 620px;
    object-fit: contain;
    position: relative;
    width: 82%;
    z-index: 2;
}

.floating-card {
    align-items: center;
    animation: floatCard 4s ease-in-out infinite;
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, 0.83);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 20px;
    box-shadow: var(--poly-shadow);
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    position: absolute;
    text-align: left;
    z-index: 3;
}

.floating-card span {
    font-size: 30px;
}

.floating-card strong {
    color: var(--poly-dark);
    display: block;
    font-size: 14px;
}

.floating-card small {
    color: var(--poly-muted);
    display: block;
    font-size: 11px;
    margin-top: 3px;
}

.floating-card-one {
    left: 0;
    top: 30%;
}

.floating-card-two {
    left: 10;
    top: 15%;
}

.floating-card-three {
    bottom: 18%;
    right: 0;
}

.hero-blob {
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.5;
    position: absolute;
}

.hero-blob-one {
    background: var(--poly-mint);
    height: 260px;
    right: -90px;
    top: 70px;
    width: 260px;
}

.hero-blob-two {
    background: var(--poly-sage);
    bottom: -100px;
    height: 320px;
    left: -90px;
    width: 320px;
}

.section-padding {
    padding: 100px 0;
}

.section-heading {
    margin: 0 auto;
    max-width: 760px;
}

.section-heading span {
    color: var(--poly-green-dark);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.section-heading h2 {
    color: var(--poly-dark);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.25;
    margin-top: 12px;
}

.section-heading p {
    color: var(--poly-muted);
    font-size: 17px;
    line-height: 1.8;
    margin-top: 18px;
}

.info-card,
.feature-card {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(36, 75, 58, 0.08);
    border-radius: 28px;
    box-shadow: 0 16px 40px rgba(36, 75, 58, 0.08);
    padding: 34px;
    transition: 0.3s ease;
}

.info-card:hover,
.feature-card:hover {
    box-shadow: 0 24px 50px rgba(36, 75, 58, 0.14);
    transform: translateY(-8px);
}

.info-icon {
    align-items: center;
    background: var(--poly-sage);
    border-radius: 18px;
    display: flex;
    font-size: 30px;
    height: 64px;
    justify-content: center;
    margin-bottom: 22px;
    width: 64px;
}

.info-card h3,
.feature-card h3 {
    color: var(--poly-dark);
    font-size: 21px;
    font-weight: 600;
}

.info-card p,
.feature-card p {
    color: var(--poly-muted);
    font-size: 15px;
    line-height: 1.8;
    margin: 14px 0 0;
}

.features-section {
    background: #eaf3e8;
}

.feature-number {
    color: rgba(95, 169, 139, 0.35);
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 24px;
}

.cta-section {
    background: var(--poly-light);
    padding: 30px 0 100px;
}

.cta-card {
    align-items: center;
    background:
        radial-gradient(
            circle at top right,
            rgba(169, 213, 189, 0.45),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            var(--poly-dark),
            var(--poly-deep)
        );
    border-radius: 36px;
    box-shadow: var(--poly-shadow);
    color: var(--poly-white);
    display: flex;
    gap: 30px;
    justify-content: space-between;
    overflow: hidden;
    padding: 55px 60px;
    position: relative;
}

.cta-label {
    color: var(--poly-mint);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.cta-card h2 {
    font-size: clamp(28px, 4vw, 43px);
    font-weight: 700;
    margin-top: 12px;
    max-width: 700px;
}

.cta-card p {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    margin: 15px 0 0;
}

.cta-button {
    border: none;
    border-radius: 50px;
    color: var(--poly-dark);
    flex-shrink: 0;
    font-weight: 600;
    padding: 14px 30px;
}

.poly-footer {
    background: #19372b;
    color: rgba(255, 255, 255, 0.72);
    padding: 34px 0;
}

.footer-content {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.footer-content strong {
    color: var(--poly-white);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    letter-spacing: 1px;
}

.footer-content p {
    font-size: 13px;
    margin: 5px 0 0;
}

@keyframes floatImage {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

@keyframes floatCard {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

@media (max-width: 991px) {
    .poly-navbar {
        background: rgba(243, 250, 245, 0.97);
    }

    .navbar-collapse {
        padding: 18px 0;
    }

    .hero-content {
        padding-top: 150px;
        text-align: center;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons,
    .hero-trust {
        justify-content: center;
    }

    .hero-image-wrapper {
        min-height: 530px;
        padding-top: 20px;
    }

    .hero-image {
        max-height: 490px;
        width: 70%;
    }

    .floating-card-one {
        left: 4%;
    }

    .floating-card-two {
        right: 4%;
    }

    .cta-card {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .hero-section h1 {
        font-size: 44px;
        letter-spacing: -1px;
    }

    .hero-description {
        font-size: 16px;
    }

    .hero-buttons {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-image-wrapper {
        min-height: 430px;
    }

    .hero-image {
        width: 85%;
    }

    .floating-card {
        padding: 12px 14px;
    }

    .floating-card strong {
        font-size: 12px;
    }

    .floating-card small {
        display: none;
    }

    .floating-card-one {
        top: 22%;
    }

    .floating-card-two {
        bottom: 11%;
    }

    .section-padding {
        padding: 75px 0;
    }

    .info-card,
    .feature-card {
        border-radius: 22px;
        padding: 28px;
    }

    .cta-card {
        border-radius: 26px;
        padding: 38px 28px;
    }

    .footer-content {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }
}

@media (max-width: 480px) {
    .hero-section h1 {
        font-size: 38px;
    }

    .hero-image-wrapper {
        min-height: 390px;
    }

    .hero-image {
        width: 100%;
    }

    .floating-card-one {
        left: 0;
    }

    .floating-card-two {
        right: 0;
    }
}

.auth-body {
    background:
        radial-gradient(
            circle at top left,
            rgba(191, 203, 170, 0.55),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(101, 173, 145, 0.3),
            transparent 30%
        ),
        #eef5ed;
    min-height: 100vh;
}

.auth-page {
    align-items: center;
    display: flex;
    min-height: 100vh;
    padding: 50px 0;
}

.auth-container {
    background: #ffffff;
    border-radius: 34px;
    box-shadow: 0 25px 70px rgba(42, 79, 61, 0.15);
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    margin: 0 auto;
    max-width: 1180px;
    min-height: 720px;
    overflow: hidden;
}

.auth-information {
    background:
        radial-gradient(
            circle at top right,
            rgba(191, 203, 170, 0.36),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #294638,
            #4d7860
        );
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 50px;
}

.auth-logo {
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 1px;
}

.auth-logo:hover {
    color: #ffffff;
}

.auth-information-content {
    margin: auto 0;
}

.auth-label {
    color: #cfe4d6;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.auth-information h1 {
    font-size: clamp(38px, 4vw, 55px);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 22px;
}

.auth-information p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.auth-benefit {
    align-items: center;
    display: flex;
    font-size: 14px;
    gap: 11px;
    margin-top: 15px;
}

.auth-benefit span {
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.auth-form-section {
    padding: 55px;
}

.auth-form-header {
    margin-bottom: 30px;
}

.auth-form-header h2 {
    color: #355744;
    font-size: 34px;
    font-weight: 700;
}

.auth-form-header p {
    color: #68776f;
    margin: 8px 0 0;
}

.form-label {
    color: #355744;
    font-size: 14px;
    font-weight: 600;
}

.poly-input {
    background: #f8fbf8;
    border: 1px solid #dce8df;
    border-radius: 14px;
    font-size: 14px;
    min-height: 51px;
    padding: 12px 15px;
}

.poly-input:focus {
    background: #ffffff;
    border-color: #65ad91;
    box-shadow: 0 0 0 4px rgba(101, 173, 145, 0.14);
}

.password-field {
    position: relative;
}

.password-field .poly-input {
    padding-right: 70px;
}

.password-toggle {
    background: transparent;
    border: none;
    color: #4d9377;
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.auth-submit-button {
    margin-top: 27px;
    width: 100%;
}

.auth-bottom-text,
.auth-home-link {
    color: #68776f;
    font-size: 14px;
    margin: 22px 0 0;
    text-align: center;
}

.auth-bottom-text a,
.auth-home-link a {
    color: #4d9377;
    font-weight: 600;
}

.auth-home-link {
    margin-top: 10px;
}

@media (max-width: 991px) {
    .auth-container {
        grid-template-columns: 1fr;
    }

    .auth-information {
        min-height: 420px;
    }

    .auth-information-content {
        margin-top: 60px;
    }
}

@media (max-width: 767px) {
    .auth-page {
        padding: 20px 0;
    }

    .auth-container {
        border-radius: 24px;
    }

    .auth-information,
    .auth-form-section {
        padding: 34px 25px;
    }

    .auth-information {
        min-height: 380px;
    }

    .auth-form-header h2 {
        font-size: 29px;
    }
}

.login-container {
    min-height: 620px;
}

.login-form-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.student-help-note {
    background: #f1f7f2;
    border: 1px solid #dce9df;
    border-radius: 16px;
    color: #355744;
    margin-top: 28px;
    padding: 18px;
    text-align: center;
}

.student-help-note strong {
    font-size: 14px;
}

.student-help-note p {
    color: #68776f;
    font-size: 13px;
    margin: 5px 0 0;
}

.dashboard-body {
    background: #eef5ef;
    min-height: 100vh;
}

.student-navbar {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid #dce9df;
    box-shadow: 0 5px 20px rgba(42, 79, 61, 0.06);
    padding: 15px 0;
}

.student-logo {
    color: #355744;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 1px;
}

.student-logo:hover {
    color: #355744;
}

.student-navbar .nav-link {
    color: #607168;
    font-size: 14px;
    font-weight: 500;
    margin: 0 6px;
}

.student-navbar .nav-link:hover,
.student-navbar .nav-link.active {
    color: #4d9377;
}

.student-dashboard {
    padding: 48px 0 80px;
}

.dashboard-welcome {
    align-items: center;
    background:
        radial-gradient(
            circle at top right,
            rgba(191, 203, 170, 0.42),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #355744,
            #547960
        );
    border-radius: 30px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    overflow: hidden;
    padding: 40px;
}

.dashboard-date,
.section-label {
    color: #cce0d1;
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.dashboard-welcome h1 {
    font-size: clamp(31px, 5vw, 48px);
    font-weight: 700;
    margin-bottom: 8px;
}

.dashboard-welcome p {
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}

.student-summary {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    min-width: 250px;
    padding: 22px;
}

.student-summary span,
.student-summary small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
}

.student-summary strong {
    font-size: 18px;
    margin: 6px 0;
}

.daily-checkin {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 26px;
    box-shadow: 0 15px 40px rgba(42, 79, 61, 0.07);
    margin-bottom: 32px;
    padding: 32px;
}

.daily-checkin .section-label {
    color: #4d9377;
}

.daily-checkin h2 {
    color: #355744;
    font-size: 27px;
    font-weight: 700;
}

.daily-checkin p {
    color: #68776f;
}

.mood-options {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 25px;
}

.mood-button {
    align-items: center;
    background: #f4f8f4;
    border: 1px solid #dce9df;
    border-radius: 18px;
    color: #466153;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 600;
    gap: 7px;
    padding: 17px 10px;
    transition: 0.25s ease;
}

.mood-button span {
    font-size: 31px;
}

.mood-button:hover {
    background: #e4f1e8;
    border-color: #65ad91;
    transform: translateY(-4px);
}

.mood-notice {
    color: #87958e;
    display: block;
    margin-top: 16px;
}

.dashboard-features {
    margin-bottom: 32px;
}

.dashboard-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 24px;
    box-shadow: 0 12px 32px rgba(42, 79, 61, 0.06);
    color: inherit;
    display: flex;
    gap: 18px;
    height: 100%;
    padding: 26px;
    transition: 0.3s ease;
}

.dashboard-card:hover {
    border-color: #a9cdb8;
    box-shadow: 0 20px 42px rgba(42, 79, 61, 0.12);
    transform: translateY(-6px);
}

.dashboard-card-icon {
    align-items: center;
    background: #e7f1e8;
    border-radius: 17px;
    display: flex;
    flex-shrink: 0;
    font-size: 27px;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.dashboard-card h3 {
    color: #355744;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 9px;
}

.dashboard-card p {
    color: #6b7a72;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 13px;
}

.dashboard-card div span {
    color: #4d9377;
    font-size: 13px;
    font-weight: 600;
}

.dashboard-message {
    align-items: center;
    background: #dfece1;
    border-radius: 24px;
    display: flex;
    gap: 20px;
    padding: 27px 30px;
}

.dashboard-message > span {
    font-size: 38px;
}

.dashboard-message h2 {
    color: #355744;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
}

.dashboard-message p {
    color: #637269;
    font-size: 14px;
    margin: 0;
}

@media (max-width: 991px) {
    .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }

    .student-summary {
        width: 100%;
    }

    .mood-options {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .student-dashboard {
        padding-top: 25px;
    }

    .dashboard-welcome,
    .daily-checkin {
        border-radius: 22px;
        padding: 25px;
    }

    .mood-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-card {
        padding: 22px;
    }
}

.today-mood-result {
    align-items: center;
    display: flex;
    gap: 25px;
    justify-content: space-between;
}

.recorded-mood {
    align-items: center;
    background: #edf6ef;
    border: 1px solid #d4e8d9;
    border-radius: 20px;
    display: flex;
    gap: 15px;
    min-width: 245px;
    padding: 18px 22px;
}

.recorded-mood-emoji {
    font-size: 42px;
}

.recorded-mood div {
    display: flex;
    flex-direction: column;
}

.recorded-mood small {
    color: #78877f;
    font-size: 11px;
    text-transform: uppercase;
}

.recorded-mood strong {
    color: #355744;
    font-size: 20px;
    margin: 3px 0;
}

.recorded-mood div span {
    color: #7b8982;
    font-size: 12px;
}

.mood-history-link {
    color: #4d9377;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    margin-top: 20px;
}

.mood-form {
    margin: 0;
}

@media (max-width: 767px) {
    .today-mood-result {
        align-items: flex-start;
        flex-direction: column;
    }

    .recorded-mood {
        width: 100%;
    }
}

.history-header {
    margin-bottom: 28px;
}

.history-header .section-label {
    color: #4d9377;
}

.history-header h1 {
    color: #355744;
    font-size: 38px;
    font-weight: 700;
}

.history-header p {
    color: #6b7a72;
}

.mood-history-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 24px;
    box-shadow: 0 15px 38px rgba(42, 79, 61, 0.07);
    overflow: hidden;
    padding: 28px;
}

.mood-history-table {
    margin: 0;
}

.mood-history-table thead th {
    border-bottom: 1px solid #dce9df;
    color: #718078;
    font-size: 12px;
    letter-spacing: 0.8px;
    padding: 14px;
    text-transform: uppercase;
}

.mood-history-table tbody td {
    border-bottom: 1px solid #edf2ee;
    color: #5f6f66;
    padding: 16px 14px;
    vertical-align: middle;
}

.history-mood {
    align-items: center;
    display: flex;
    gap: 12px;
}

.history-mood span {
    font-size: 27px;
}

.history-mood strong {
    color: #355744;
}

.empty-state {
    padding: 55px 20px;
    text-align: center;
}

.empty-state > span {
    font-size: 55px;
}

.empty-state h2 {
    color: #355744;
    font-size: 24px;
    font-weight: 700;
    margin-top: 16px;
}

.empty-state p {
    color: #6b7a72;
    margin-bottom: 24px;
}

.screening-page {
    padding: 48px 0 80px;
}

.screening-header {
    margin-bottom: 28px;
    max-width: 800px;
}

.screening-header .section-label {
    color: #4d9377;
}

.screening-header h1 {
    color: #355744;
    font-size: clamp(34px, 5vw, 50px);
    font-weight: 700;
    margin-bottom: 12px;
}

.screening-header p {
    color: #68776f;
    font-size: 16px;
    line-height: 1.8;
}

.screening-instructions {
    background:
        linear-gradient(
            135deg,
            #355744,
            #537b63
        );
    border-radius: 24px;
    color: #ffffff;
    margin-bottom: 28px;
    padding: 28px;
}

.screening-instructions h2 {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 20px;
}

.screening-instructions > p {
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    margin: 20px 0 0;
}

.instruction-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, 1fr);
}

.instruction-grid div {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    padding: 15px;
}

.instruction-grid strong {
    font-size: 22px;
}

.instruction-grid span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    margin-top: 4px;
}

.screening-questions {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.screening-question {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(42, 79, 61, 0.05);
    display: flex;
    gap: 20px;
    padding: 26px;
}

.question-number {
    align-items: center;
    background: #dfeee3;
    border-radius: 15px;
    color: #355744;
    display: flex;
    flex-shrink: 0;
    font-size: 17px;
    font-weight: 700;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.question-content {
    flex-grow: 1;
}

.question-content > p {
    color: #355744;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
    margin: 2px 0 20px;
}

.answer-options {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, 1fr);
}

.answer-choice {
    cursor: pointer;
    position: relative;
}

.answer-choice input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.answer-choice > span,
.answer-choice > small {
    pointer-events: none;
}

.answer-choice {
    align-items: center;
    background: #f5f9f5;
    border: 1px solid #dce9df;
    border-radius: 15px;
    display: flex;
    gap: 10px;
    min-height: 62px;
    padding: 12px;
    transition: 0.2s ease;
}

.answer-choice:hover {
    background: #eaf4ec;
    border-color: #91bea2;
}

.answer-choice:has(input:checked) {
    background: #dceddf;
    border-color: #4d9377;
    box-shadow: 0 0 0 3px rgba(77, 147, 119, 0.12);
}

.answer-value {
    align-items: center;
    background: #ffffff;
    border-radius: 10px;
    color: #355744;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.answer-choice small {
    color: #627168;
    font-size: 11px;
    line-height: 1.3;
}

.screening-notice {
    background: #fff8e8;
    border: 1px solid #f1dfb7;
    border-radius: 18px;
    margin-top: 28px;
    padding: 20px;
}

.screening-notice strong {
    color: #745c25;
}

.screening-notice p {
    color: #7c704f;
    font-size: 13px;
    line-height: 1.7;
    margin: 7px 0 0;
}

.screening-submit {
    display: block;
    margin: 28px auto 0;
    min-width: 290px;
}

@media (max-width: 991px) {
    .answer-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .instruction-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .screening-question {
        flex-direction: column;
        padding: 21px;
    }
}

@media (max-width: 480px) {
    .answer-options {
        grid-template-columns: 1fr;
    }

    .screening-submit {
        min-width: 100%;
        width: 100%;
    }
}

.result-page {
    padding: 48px 0 80px;
}

.result-header {
    align-items: center;
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin-bottom: 30px;
}

.result-header .section-label,
.result-section-heading .section-label,
.uppsik-support-card .section-label {
    color: #4d9377;
}

.result-header h1 {
    color: #355744;
    font-size: clamp(35px, 5vw, 52px);
    font-weight: 700;
    margin-bottom: 10px;
}

.result-header p {
    color: #68776f;
    margin: 0;
}

.result-date-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 19px;
    display: flex;
    flex-direction: column;
    min-width: 205px;
    padding: 19px 22px;
}

.result-date-card small {
    color: #849189;
    font-size: 11px;
    text-transform: uppercase;
}

.result-date-card strong {
    color: #355744;
    font-size: 15px;
    margin: 5px 0 2px;
}

.result-date-card span {
    color: #77857d;
    font-size: 12px;
}

.immediate-support-alert {
    background:
        radial-gradient(
            circle at top right,
            rgba(255, 255, 255, 0.15),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #8b3d45,
            #b25c62
        );
    border-radius: 27px;
    color: #ffffff;
    display: flex;
    gap: 22px;
    margin-bottom: 32px;
    padding: 32px;
}

.support-alert-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    display: flex;
    flex-shrink: 0;
    font-size: 34px;
    height: 68px;
    justify-content: center;
    width: 68px;
}

.support-alert-content > span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.support-alert-content h2 {
    font-size: 25px;
    font-weight: 700;
    margin: 8px 0 10px;
}

.support-alert-content p {
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.7;
    margin-bottom: 20px;
}

.support-alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.attention-result-alert {
    align-items: center;
    background: #fff1d8;
    border: 1px solid #eed29b;
    border-radius: 22px;
    display: flex;
    gap: 18px;
    margin-bottom: 30px;
    padding: 23px;
}

.attention-icon {
    font-size: 38px;
}

.attention-result-alert h2 {
    color: #715929;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
}

.attention-result-alert p {
    color: #806f4b;
    font-size: 14px;
    margin: 0;
}

.result-summary-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 35px;
}

.result-score-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 25px;
    box-shadow: 0 13px 35px rgba(42, 79, 61, 0.07);
    overflow: hidden;
    padding: 27px;
    position: relative;
}

.result-score-card::before {
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.result-score-card.level-normal::before {
    background: #68a87e;
}

.result-score-card.level-mild::before {
    background: #d1ae46;
}

.result-score-card.level-moderate::before {
    background: #dd8b3d;
}

.result-score-card.level-severe::before {
    background: #c95b53;
}

.result-score-card.level-extreme::before {
    background: #873d4c;
}

.result-card-heading {
    align-items: center;
    display: flex;
    gap: 13px;
}

.result-category-icon {
    align-items: center;
    background: #edf5ef;
    border-radius: 16px;
    display: flex;
    font-size: 27px;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.result-card-heading small {
    color: #849189;
    font-size: 11px;
}

.result-card-heading h2 {
    color: #355744;
    font-size: 19px;
    font-weight: 700;
    margin: 2px 0 0;
}

.result-score-display {
    margin: 28px 0;
}

.result-score-display strong {
    color: #355744;
    display: block;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

.result-score-display span {
    color: #839087;
    font-size: 12px;
}

.result-level-row {
    align-items: center;
    border-top: 1px solid #e5ede7;
    display: flex;
    justify-content: space-between;
    padding-top: 17px;
}

.result-level-row span {
    color: #78867e;
    font-size: 12px;
}

.result-level-row strong {
    border-radius: 20px;
    font-size: 12px;
    padding: 7px 12px;
}

.level-normal .result-level-row strong,
.guide-badge.level-normal {
    background: #dff0e4;
    color: #39744e;
}

.level-mild .result-level-row strong,
.guide-badge.level-mild {
    background: #fff2c9;
    color: #886c19;
}

.level-moderate .result-level-row strong,
.guide-badge.level-moderate {
    background: #ffe4c9;
    color: #98571d;
}

.level-severe .result-level-row strong,
.guide-badge.level-severe {
    background: #f9d7d4;
    color: #94413c;
}

.level-extreme .result-level-row strong,
.guide-badge.level-extreme {
    background: #ecd6dc;
    color: #783445;
}

.result-raw-score {
    color: #8a968f;
    font-size: 11px;
    margin-top: 15px;
}

.result-explanation,
.result-scale-guide {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 25px;
    box-shadow: 0 13px 35px rgba(42, 79, 61, 0.06);
    margin-bottom: 30px;
    padding: 30px;
}

.result-section-heading {
    margin-bottom: 25px;
}

.result-section-heading h2 {
    color: #355744;
    font-size: 27px;
    font-weight: 700;
    margin-bottom: 8px;
}

.result-section-heading p {
    color: #718078;
    margin: 0;
}

.recommendation-list {
    display: grid;
    gap: 17px;
}

.recommendation-card {
    background: #f5f9f6;
    border: 1px solid #e0ebe2;
    border-radius: 19px;
    padding: 21px;
}

.recommendation-heading {
    align-items: center;
    display: flex;
    gap: 12px;
}

.recommendation-heading > span {
    font-size: 27px;
}

.recommendation-heading h3 {
    color: #355744;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.recommendation-heading small {
    color: #7b8982;
}

.recommendation-card > p {
    color: #617168;
    font-size: 14px;
    line-height: 1.75;
    margin: 15px 0 0;
}

.result-guide-table {
    margin: 0;
}

.result-guide-table thead th {
    border-bottom: 1px solid #dce9df;
    color: #78867e;
    font-size: 12px;
    padding: 14px;
    text-transform: uppercase;
}

.result-guide-table tbody td {
    border-bottom: 1px solid #edf2ee;
    color: #5d6c64;
    padding: 16px 14px;
    vertical-align: middle;
}

.guide-badge {
    border-radius: 20px;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 7px 11px;
}

.uppsik-support-card {
    align-items: flex-start;
    background:
        radial-gradient(
            circle at top right,
            rgba(191, 203, 170, 0.35),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #355744,
            #537960
        );
    border-radius: 27px;
    color: #ffffff;
    display: flex;
    gap: 23px;
    margin-bottom: 30px;
    padding: 32px;
}

.uppsik-support-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    display: flex;
    flex-shrink: 0;
    font-size: 34px;
    height: 65px;
    justify-content: center;
    width: 65px;
}

.uppsik-support-card .section-label {
    color: #cce0d1;
}

.uppsik-support-card h2 {
    font-size: 29px;
    font-weight: 700;
    margin: 5px 0 9px;
}

.uppsik-support-card p {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
}

.uppsik-contact-placeholder {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
    margin: 22px 0;
}

.uppsik-contact-placeholder div {
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    padding: 14px;
}

.uppsik-contact-placeholder small {
    color: rgba(255, 255, 255, 0.64);
    font-size: 10px;
    text-transform: uppercase;
}

.uppsik-contact-placeholder strong {
    font-size: 12px;
    margin-top: 5px;
}

.screening-disclaimer {
    background: #fff8e8;
    border: 1px solid #f1dfb7;
    border-radius: 19px;
    padding: 21px;
}

.screening-disclaimer strong {
    color: #735d2d;
}

.screening-disclaimer p {
    color: #7d704f;
    font-size: 13px;
    line-height: 1.7;
    margin: 7px 0 0;
}

.result-bottom-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    justify-content: center;
    margin-top: 30px;
}

@media (max-width: 991px) {
    .result-summary-grid {
        grid-template-columns: 1fr;
    }

    .uppsik-contact-placeholder {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .result-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .result-date-card {
        width: 100%;
    }

    .immediate-support-alert,
    .uppsik-support-card {
        flex-direction: column;
    }

    .attention-result-alert {
        align-items: flex-start;
    }

    .result-explanation,
    .result-scale-guide {
        padding: 22px;
    }
}

.screening-history-page {
    padding: 48px 0 80px;
}

.screening-history-header {
    align-items: center;
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin-bottom: 30px;
}

.screening-history-header .section-label {
    color: #4d9377;
}

.screening-history-header h1 {
    color: #355744;
    font-size: clamp(34px, 5vw, 50px);
    font-weight: 700;
    margin-bottom: 10px;
}

.screening-history-header p {
    color: #68776f;
    margin: 0;
}

.screening-history-empty {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 26px;
    box-shadow: 0 15px 40px rgba(42, 79, 61, 0.07);
    padding: 65px 25px;
    text-align: center;
}

.history-empty-icon {
    display: block;
    font-size: 60px;
    margin-bottom: 18px;
}

.screening-history-empty h2 {
    color: #355744;
    font-size: 26px;
    font-weight: 700;
}

.screening-history-empty p {
    color: #68776f;
    margin: 10px auto 25px;
    max-width: 520px;
}

.screening-history-summary {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 28px;
}

.history-summary-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 21px;
    box-shadow: 0 10px 28px rgba(42, 79, 61, 0.05);
    display: flex;
    flex-direction: column;
    padding: 23px;
}

.history-summary-card span {
    color: #7d8a83;
    font-size: 12px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.history-summary-card strong {
    color: #355744;
    font-size: 25px;
    font-weight: 700;
}

.screening-history-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.screening-history-item {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 25px;
    box-shadow: 0 13px 35px rgba(42, 79, 61, 0.06);
    display: flex;
    gap: 20px;
    padding: 26px;
}

.history-item-number {
    align-items: center;
    background: #dfeee3;
    border-radius: 17px;
    color: #355744;
    display: flex;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 700;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.history-item-content {
    flex-grow: 1;
}

.history-item-heading {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.history-item-heading small {
    color: #4d9377;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.history-item-heading h2 {
    color: #355744;
    font-size: 21px;
    font-weight: 700;
    margin: 5px 0 2px;
}

.history-item-heading div > span {
    color: #849188;
    font-size: 12px;
}

.history-attention-badge,
.history-completed-badge {
    border-radius: 30px;
    font-size: 11px;
    font-weight: 600;
    padding: 8px 13px;
}

.history-attention-badge {
    background: #f9d9d6;
    color: #984842;
}

.history-completed-badge {
    background: #dff0e4;
    color: #39744e;
}

.history-score-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 23px;
}

.history-score-box {
    background: #f5f9f6;
    border: 1px solid #e0ebe2;
    border-radius: 17px;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.history-score-box > span {
    color: #74827a;
    font-size: 11px;
    text-transform: uppercase;
}

.history-score-box > strong {
    color: #355744;
    font-size: 27px;
    font-weight: 700;
    margin: 4px 0 8px;
}

.history-score-box > small {
    border-radius: 20px;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 10px;
    text-align: center;
    width: fit-content;
}

.history-normal {
    background: #dff0e4;
    color: #39744e;
}

.history-mild {
    background: #fff2c9;
    color: #886c19;
}

.history-moderate {
    background: #ffe4c9;
    color: #98571d;
}

.history-severe {
    background: #f9d7d4;
    color: #94413c;
}

.history-extreme {
    background: #ecd6dc;
    color: #783445;
}

.history-unknown {
    background: #e8ece9;
    color: #5e6b64;
}

.history-item-actions {
    border-top: 1px solid #e7eee8;
    margin-top: 21px;
    padding-top: 18px;
}

.screening-history-notice {
    background: #eef6ef;
    border: 1px solid #d8e7db;
    border-radius: 19px;
    margin-top: 28px;
    padding: 21px;
}

.screening-history-notice strong {
    color: #355744;
}

.screening-history-notice p {
    color: #68776f;
    font-size: 13px;
    margin: 6px 0 0;
}

@media (max-width: 991px) {
    .screening-history-summary {
        grid-template-columns: 1fr;
    }

    .history-score-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .screening-history-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .screening-history-header .btn {
        width: 100%;
    }

    .screening-history-item {
        flex-direction: column;
        padding: 22px;
    }

    .history-item-content {
        width: 100%;
    }

    .history-item-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

.journal-page {
    padding: 48px 0 80px;
}

.journal-header {
    align-items: center;
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin-bottom: 30px;
}

.journal-header .section-label,
.journal-modal .section-label {
    color: #4d9377;
}

.journal-header h1 {
    color: #355744;
    font-size: clamp(34px, 5vw, 50px);
    font-weight: 700;
    margin-bottom: 10px;
}

.journal-header p {
    color: #68776f;
    line-height: 1.7;
    margin: 0;
    max-width: 700px;
}

.journal-empty {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 26px;
    box-shadow: 0 15px 40px rgba(42, 79, 61, 0.07);
    padding: 65px 25px;
    text-align: center;
}

.journal-empty-icon {
    display: block;
    font-size: 60px;
    margin-bottom: 18px;
}

.journal-empty h2 {
    color: #355744;
    font-size: 26px;
    font-weight: 700;
}

.journal-empty p {
    color: #68776f;
    margin: 10px auto 25px;
    max-width: 520px;
}

.journal-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, 1fr);
}

.journal-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 24px;
    box-shadow: 0 13px 35px rgba(42, 79, 61, 0.06);
    display: flex;
    flex-direction: column;
    padding: 25px;
}

.journal-card-top {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.journal-mood-icon {
    align-items: center;
    background: #e6f1e8;
    border-radius: 14px;
    display: flex;
    font-size: 25px;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.journal-mood-label {
    background: #edf5ef;
    border-radius: 20px;
    color: #4d765c;
    font-size: 11px;
    font-weight: 600;
    padding: 7px 12px;
}

.journal-card h2 {
    color: #355744;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 13px;
}

.journal-content-preview {
    color: #617168;
    display: -webkit-box;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 20px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

.journal-ai-feedback {
    background: #f1f7f2;
    border: 1px solid #dae8dd;
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 15px;
}

.journal-ai-feedback strong {
    color: #355744;
    font-size: 12px;
}

.journal-ai-feedback p {
    color: #68776f;
    font-size: 12px;
    line-height: 1.6;
    margin: 6px 0 0;
}

.journal-card-footer {
    align-items: flex-end;
    border-top: 1px solid #e7eee8;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 18px;
}

.journal-card-footer > div:first-child {
    display: flex;
    flex-direction: column;
}

.journal-card-footer small {
    color: #8a968f;
    font-size: 10px;
    text-transform: uppercase;
}

.journal-card-footer span {
    color: #68776f;
    font-size: 11px;
    margin-top: 3px;
}

.journal-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.journal-card-actions form {
    margin: 0;
}

.journal-privacy-notice {
    background: #eef6ef;
    border: 1px solid #d8e7db;
    border-radius: 19px;
    margin-top: 28px;
    padding: 21px;
}

.journal-privacy-notice strong {
    color: #355744;
}

.journal-privacy-notice p {
    color: #68776f;
    font-size: 13px;
    margin: 6px 0 0;
}

.journal-modal {
    border: 0;
    border-radius: 25px;
    overflow: hidden;
}

.journal-modal .modal-header {
    border-bottom: 1px solid #e2ece4;
    padding: 25px 28px;
}

.journal-modal .modal-title {
    color: #355744;
    font-size: 24px;
    font-weight: 700;
}

.journal-modal .modal-body {
    padding: 28px;
}

.journal-modal .modal-footer {
    border-top: 1px solid #e2ece4;
    padding: 20px 28px;
}

.journal-modal .form-label {
    color: #355744;
    font-size: 13px;
    font-weight: 600;
}

.journal-modal .form-control,
.journal-modal .form-select {
    border: 1px solid #d7e4da;
    border-radius: 13px;
    padding: 13px 15px;
}

.journal-modal .form-control:focus,
.journal-modal .form-select:focus {
    border-color: #4d9377;
    box-shadow: 0 0 0 3px rgba(77, 147, 119, 0.12);
}

.journal-form-notice {
    background: #fff8e8;
    border: 1px solid #efdfb8;
    border-radius: 15px;
    padding: 15px;
}

.journal-form-notice strong {
    color: #725d2e;
    font-size: 13px;
}

.journal-form-notice p {
    color: #7d704f;
    font-size: 12px;
    line-height: 1.6;
    margin: 5px 0 0;
}

@media (max-width: 991px) {
    .journal-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .journal-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .journal-header .btn {
        width: 100%;
    }

    .journal-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Make action buttons consistent */
.student-navbar .btn,
.journal-card-actions .btn {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 16px;
}

/* Logout button */
.student-navbar .btn-outline-danger {
    background: transparent;
    border: 1px solid #c96a6a;
    color: #a94f4f;
}

.student-navbar .btn-outline-danger:hover {
    background: #c96a6a;
    color: #ffffff;
}

/* Edit button */
.journal-card-actions .btn-outline-secondary {
    background: transparent;
    border: 1px solid #8d9a92;
    color: #5e6b64;
}

.journal-card-actions .btn-outline-secondary:hover {
    background: #5e6b64;
    color: #ffffff;
}

/* Delete button */
.journal-card-actions .btn-outline-danger {
    background: transparent;
    border: 1px solid #d07a7a;
    color: #b75252;
}

.journal-card-actions .btn-outline-danger:hover {
    background: #c95f5f;
    color: #ffffff;
}

/* Keep all journal action buttons aligned */
.journal-card-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.journal-card-actions form {
    display: inline-flex;
    margin: 0;
}

.view-journal-page {
    padding: 48px 0 80px;
}

.view-journal-header {
    align-items: center;
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin-bottom: 28px;
}

.view-journal-header .section-label,
.view-journal-feedback .section-label {
    color: #4d9377;
}

.view-journal-header h1 {
    color: #355744;
    font-size: clamp(34px, 5vw, 50px);
    font-weight: 700;
    margin-bottom: 10px;
}

.view-journal-header p {
    color: #74827a;
    margin: 0;
}

.view-journal-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 27px;
    box-shadow: 0 15px 40px rgba(42, 79, 61, 0.07);
    padding: 34px;
}

.view-journal-meta {
    align-items: center;
    border-bottom: 1px solid #e4ece6;
    display: flex;
    gap: 25px;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 24px;
}

.view-journal-mood {
    align-items: center;
    display: flex;
    gap: 14px;
}

.view-journal-mood > span {
    align-items: center;
    background: #e6f1e8;
    border-radius: 16px;
    display: flex;
    font-size: 29px;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.view-journal-mood div,
.view-journal-date {
    display: flex;
    flex-direction: column;
}

.view-journal-meta small {
    color: #8a968f;
    font-size: 10px;
    text-transform: uppercase;
}

.view-journal-meta strong {
    color: #355744;
    font-size: 14px;
    margin-top: 4px;
}

.view-journal-content {
    color: #53645a;
    font-size: 15px;
    line-height: 1.9;
    min-height: 180px;
    white-space: normal;
}

.view-journal-feedback {
    background: #eef6ef;
    border: 1px solid #d8e7db;
    border-radius: 19px;
    margin-top: 30px;
    padding: 22px;
}

.view-journal-feedback h2 {
    color: #355744;
    font-size: 19px;
    font-weight: 700;
    margin: 7px 0 10px;
}

.view-journal-feedback p {
    color: #617168;
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
}

.view-journal-notice {
    background: #fff8e8;
    border: 1px solid #efdfb8;
    border-radius: 18px;
    margin-top: 25px;
    padding: 20px;
}

.view-journal-notice strong {
    color: #725d2e;
}

.view-journal-notice p {
    color: #7d704f;
    font-size: 13px;
    line-height: 1.7;
    margin: 6px 0 0;
}

.view-journal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
}

@media (max-width: 767px) {
    .view-journal-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .view-journal-header .btn {
        width: 100%;
    }

    .view-journal-card {
        padding: 23px;
    }

    .view-journal-meta {
        align-items: flex-start;
        flex-direction: column;
    }
}

.edit-journal-page {
    padding: 48px 0 80px;
}

.edit-journal-header {
    margin-bottom: 28px;
}

.edit-journal-header .section-label {
    color: #4d9377;
}

.edit-journal-header h1 {
    color: #355744;
    font-size: clamp(34px, 5vw, 50px);
    font-weight: 700;
    margin-bottom: 10px;
}

.edit-journal-header p {
    color: #68776f;
    margin: 0;
}

.edit-journal-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 27px;
    box-shadow: 0 15px 40px rgba(42, 79, 61, 0.07);
    margin: 0 auto;
    max-width: 900px;
    padding: 34px;
}

.edit-journal-card .form-label {
    color: #355744;
    font-size: 13px;
    font-weight: 600;
}

.edit-journal-card .form-control,
.edit-journal-card .form-select {
    border: 1px solid #d7e4da;
    border-radius: 14px;
    padding: 13px 15px;
}

.edit-journal-card textarea.form-control {
    line-height: 1.8;
    resize: vertical;
}

.edit-journal-card .form-control:focus,
.edit-journal-card .form-select:focus {
    border-color: #4d9377;
    box-shadow: 0 0 0 3px rgba(77, 147, 119, 0.12);
}

.edit-journal-notice {
    background: #eef6ef;
    border: 1px solid #d8e7db;
    border-radius: 17px;
    padding: 18px;
}

.edit-journal-notice strong {
    color: #355744;
}

.edit-journal-notice p {
    color: #68776f;
    font-size: 13px;
    line-height: 1.7;
    margin: 6px 0 0;
}

.edit-journal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 27px;
}

@media (max-width: 767px) {
    .edit-journal-card {
        padding: 23px;
    }

    .edit-journal-actions {
        flex-direction: column-reverse;
    }

    .edit-journal-actions .btn {
        width: 100%;
    }
}

.therapy-page {
    padding: 48px 0 80px;
}

.therapy-hero {
    align-items: center;
    background:
        radial-gradient(
            circle at top right,
            rgba(196, 221, 201, 0.7),
            transparent 36%
        ),
        #ffffff;
    border: 1px solid #dce9df;
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(42, 79, 61, 0.07);
    display: grid;
    gap: 40px;
    grid-template-columns: 1.4fr 0.6fr;
    margin-bottom: 25px;
    overflow: hidden;
    padding: 42px;
}

.therapy-hero .section-label,
.therapy-section-heading .section-label {
    color: #4d9377;
}

.therapy-hero h1 {
    color: #355744;
    font-size: clamp(36px, 5vw, 55px);
    font-weight: 700;
    margin: 8px 0 14px;
}

.therapy-hero p {
    color: #68776f;
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 720px;
}

.therapy-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.therapy-hero-visual {
    align-items: center;
    background: linear-gradient(145deg, #355744, #5a8167);
    border-radius: 25px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    justify-content: center;
    padding: 25px;
    text-align: center;
}

.therapy-hero-visual > span {
    font-size: 72px;
}

.therapy-hero-visual strong {
    font-size: 20px;
    margin-top: 15px;
}

.therapy-hero-visual small {
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.6;
    margin-top: 7px;
}

.therapy-reminder {
    align-items: flex-start;
    background: #eef6ef;
    border: 1px solid #d8e7db;
    border-radius: 20px;
    display: flex;
    gap: 15px;
    margin-bottom: 38px;
    padding: 21px;
}

.therapy-reminder-icon {
    font-size: 29px;
}

.therapy-reminder strong {
    color: #355744;
}

.therapy-reminder p {
    color: #68776f;
    font-size: 13px;
    line-height: 1.7;
    margin: 5px 0 0;
}

.therapy-section-heading {
    margin-bottom: 26px;
}

.therapy-section-heading h2 {
    color: #355744;
    font-size: 31px;
    font-weight: 700;
    margin: 7px 0;
}

.therapy-section-heading p {
    color: #68776f;
    margin: 0;
}

.therapy-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, 1fr);
}

.therapy-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 24px;
    box-shadow: 0 12px 32px rgba(42, 79, 61, 0.06);
    display: flex;
    flex-direction: column;
    padding: 25px;
    transition: 0.2s ease;
}

.therapy-card:hover {
    box-shadow: 0 17px 38px rgba(42, 79, 61, 0.11);
    transform: translateY(-4px);
}

.therapy-card-heading {
    align-items: center;
    display: flex;
    gap: 14px;
    margin-bottom: 17px;
}

.therapy-card-icon {
    align-items: center;
    background: #e7f1e9;
    border-radius: 16px;
    display: flex;
    flex-shrink: 0;
    font-size: 28px;
    height: 55px;
    justify-content: center;
    width: 55px;
}

.therapy-card-heading small {
    color: #4d9377;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.therapy-card h3 {
    color: #355744;
    font-size: 18px;
    font-weight: 700;
    margin: 3px 0 0;
}

.therapy-card > p {
    color: #65756c;
    flex-grow: 1;
    font-size: 13px;
    line-height: 1.75;
}

.therapy-card-duration {
    align-items: center;
    background: #f3f7f4;
    border-radius: 12px;
    color: #617168;
    display: flex;
    gap: 7px;
    margin: 12px 0 18px;
    padding: 10px 12px;
}

.therapy-modal {
    border: 0;
    border-radius: 26px;
    overflow: hidden;
}

.therapy-modal .modal-header {
    border-bottom: 1px solid #e2ece4;
    padding: 25px 28px;
}

.therapy-modal-heading {
    align-items: center;
    display: flex;
    gap: 14px;
}

.therapy-modal-heading > span {
    align-items: center;
    background: #e7f1e9;
    border-radius: 15px;
    display: flex;
    font-size: 28px;
    height: 55px;
    justify-content: center;
    width: 55px;
}

.therapy-modal-heading small {
    color: #4d9377;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.therapy-modal-heading h2 {
    color: #355744;
    font-size: 22px;
    font-weight: 700;
}

.therapy-modal .modal-body {
    padding: 28px;
}

.therapy-modal-description {
    color: #607067;
    line-height: 1.75;
}

.therapy-modal-time {
    background: #eef6ef;
    border-radius: 14px;
    color: #617168;
    margin: 18px 0 25px;
    padding: 13px 16px;
}

.therapy-modal h3 {
    color: #355744;
    font-size: 18px;
    font-weight: 700;
}

.therapy-step-list {
    counter-reset: therapy-step;
    list-style: none;
    margin: 20px 0;
    padding: 0;
}

.therapy-step-list li {
    align-items: flex-start;
    counter-increment: therapy-step;
    display: flex;
    gap: 13px;
    margin-bottom: 15px;
}

.therapy-step-list li::before {
    align-items: center;
    background: #dfeee3;
    border-radius: 50%;
    color: #355744;
    content: counter(therapy-step);
    display: flex;
    flex: 0 0 34px;
    font-size: 12px;
    font-weight: 700;
    height: 34px;
    justify-content: center;
}

.therapy-step-list span {
    color: #607067;
    font-size: 14px;
    line-height: 1.7;
    padding-top: 5px;
}

.therapy-modal-notice {
    background: #fff8e8;
    border: 1px solid #efdfb8;
    border-radius: 16px;
    padding: 17px;
}

.therapy-modal-notice strong {
    color: #725d2e;
}

.therapy-modal-notice p {
    color: #7d704f;
    font-size: 12px;
    line-height: 1.65;
    margin: 5px 0 0;
}

.therapy-modal .modal-footer {
    border-top: 1px solid #e2ece4;
    padding: 20px 28px;
}

.therapy-support-card {
    align-items: flex-start;
    background: linear-gradient(135deg, #355744, #577d64);
    border-radius: 28px;
    color: #ffffff;
    display: flex;
    gap: 22px;
    margin-top: 38px;
    padding: 32px;
}

.therapy-support-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    display: flex;
    flex: 0 0 64px;
    font-size: 34px;
    height: 64px;
    justify-content: center;
}

.therapy-support-card .section-label {
    color: #cce0d1;
}

.therapy-support-card h2 {
    font-size: 27px;
    font-weight: 700;
    margin: 6px 0 10px;
}

.therapy-support-card p {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.75;
    max-width: 800px;
}

@media (max-width: 991px) {
    .therapy-hero {
        grid-template-columns: 1fr;
    }

    .therapy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .therapy-hero {
        padding: 26px;
    }

    .therapy-grid {
        grid-template-columns: 1fr;
    }

    .therapy-support-card {
        flex-direction: column;
    }
}

.motivation-page {
    padding: 48px 0 80px;
}

.motivation-hero {
    align-items: center;
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin-bottom: 28px;
}

.motivation-hero .section-label,
.motivation-section-heading .section-label,
.daily-motivation-card .section-label {
    color: #4d9377;
}

.motivation-hero h1 {
    color: #355744;
    font-size: clamp(36px, 5vw, 54px);
    font-weight: 700;
    margin: 8px 0 12px;
}

.motivation-hero p {
    color: #68776f;
    line-height: 1.8;
    margin: 0;
    max-width: 700px;
}

.motivation-date-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    min-width: 210px;
    padding: 20px 22px;
}

.motivation-date-card small {
    color: #839087;
    font-size: 10px;
    text-transform: uppercase;
}

.motivation-date-card strong {
    color: #355744;
    font-size: 16px;
    margin: 5px 0 3px;
}

.motivation-date-card span {
    color: #77857d;
    font-size: 12px;
}

.daily-motivation-card {
    align-items: center;
    background:
        radial-gradient(
            circle at top right,
            rgba(255, 255, 255, 0.18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #355744,
            #5d866a
        );
    border-radius: 30px;
    color: #ffffff;
    display: flex;
    gap: 26px;
    margin-bottom: 38px;
    padding: 38px;
}

.daily-motivation-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    display: flex;
    flex: 0 0 82px;
    font-size: 45px;
    height: 82px;
    justify-content: center;
}

.daily-motivation-card .section-label {
    color: #cfe3d4;
}

.daily-motivation-card h2 {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 700;
    margin: 8px 0 12px;
}

.daily-motivation-card p {
    color: rgba(255, 255, 255, 0.84);
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
    max-width: 900px;
}

.motivation-section {
    margin-bottom: 38px;
}

.motivation-section-heading {
    margin-bottom: 25px;
}

.motivation-section-heading h2 {
    color: #355744;
    font-size: 31px;
    font-weight: 700;
    margin: 7px 0;
}

.motivation-section-heading p {
    color: #68776f;
    margin: 0;
}

.motivation-grid {
    display: grid;
    gap: 21px;
    grid-template-columns: repeat(3, 1fr);
}

.motivation-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 23px;
    box-shadow: 0 12px 32px rgba(42, 79, 61, 0.06);
    padding: 25px;
    transition: 0.2s ease;
}

.motivation-card:hover {
    box-shadow: 0 17px 38px rgba(42, 79, 61, 0.1);
    transform: translateY(-4px);
}

.motivation-card-icon {
    align-items: center;
    background: #e8f2ea;
    border-radius: 16px;
    display: flex;
    font-size: 28px;
    height: 55px;
    justify-content: center;
    margin-bottom: 18px;
    width: 55px;
}

.motivation-card h3 {
    color: #355744;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 11px;
}

.motivation-card p {
    color: #65756c;
    font-size: 13px;
    line-height: 1.75;
    margin: 0;
}

.motivation-actions-section {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 38px;
}

.motivation-action-card {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 24px;
    display: flex;
    gap: 18px;
    padding: 25px;
}

.motivation-action-card > span {
    align-items: center;
    background: #e8f2ea;
    border-radius: 16px;
    display: flex;
    flex: 0 0 55px;
    font-size: 28px;
    height: 55px;
    justify-content: center;
}

.motivation-action-card h3 {
    color: #355744;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 8px;
}

.motivation-action-card p {
    color: #65756c;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 17px;
}

.motivation-support-card {
    align-items: flex-start;
    background: linear-gradient(135deg, #355744, #587f65);
    border-radius: 28px;
    color: #ffffff;
    display: flex;
    gap: 22px;
    padding: 33px;
}

.motivation-support-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    display: flex;
    flex: 0 0 66px;
    font-size: 35px;
    height: 66px;
    justify-content: center;
}

.motivation-support-card .section-label {
    color: #cce0d1;
}

.motivation-support-card h2 {
    font-size: 27px;
    font-weight: 700;
    margin: 7px 0 10px;
}

.motivation-support-card p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.75;
    max-width: 850px;
}

@media (max-width: 991px) {
    .motivation-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .motivation-actions-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .motivation-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .motivation-date-card {
        width: 100%;
    }

    .daily-motivation-card,
    .motivation-support-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .motivation-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   HELP AND UPPSIK SUPPORT PAGE
   ========================================================= */

.help-page {
    padding: 48px 0 80px;
}

.help-hero {
    align-items: center;
    background:
        radial-gradient(
            circle at top right,
            rgba(197, 222, 203, 0.75),
            transparent 38%
        ),
        #ffffff;
    border: 1px solid #dce9df;
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(42, 79, 61, 0.07);
    display: grid;
    gap: 38px;
    grid-template-columns: 1.35fr 0.65fr;
    margin-bottom: 25px;
    overflow: hidden;
    padding: 42px;
}

.help-hero .section-label,
.help-section-heading .section-label,
.uppsik-overview .section-label,
.help-office-heading .section-label {
    color: #4d9377;
}

.help-hero h1 {
    color: #355744;
    font-size: clamp(37px, 5vw, 56px);
    font-weight: 700;
    margin: 8px 0 14px;
}

.help-hero p {
    color: #68776f;
    line-height: 1.8;
    margin-bottom: 24px;
    max-width: 720px;
}

.help-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.help-hero-visual {
    align-items: center;
    background: linear-gradient(145deg, #355744, #5b8268);
    border-radius: 25px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 260px;
    padding: 27px;
    text-align: center;
}

.help-hero-visual > span {
    font-size: 68px;
}

.help-hero-visual strong {
    font-size: 21px;
    margin-top: 15px;
}

.help-hero-visual small {
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.7;
    margin-top: 7px;
    max-width: 240px;
}

/* Emergency card */

.help-emergency-card {
    align-items: flex-start;
    background: #fff4f3;
    border: 1px solid #efc8c4;
    border-radius: 25px;
    display: flex;
    gap: 21px;
    margin-bottom: 38px;
    padding: 28px;
}

.help-emergency-icon {
    align-items: center;
    background: #ffe2df;
    border-radius: 18px;
    display: flex;
    flex: 0 0 65px;
    font-size: 32px;
    height: 65px;
    justify-content: center;
}

.help-emergency-label {
    color: #b74239;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.help-emergency-card h2 {
    color: #763832;
    font-size: 26px;
    font-weight: 700;
    margin: 7px 0 11px;
}

.help-emergency-card p {
    color: #765b58;
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 8px;
    max-width: 930px;
}

.help-emergency-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 18px;
}

/* UPPSIK overview */

.uppsik-overview {
    align-items: center;
    display: grid;
    gap: 27px;
    grid-template-columns: 1.1fr 0.9fr;
    margin-bottom: 42px;
}

.uppsik-overview-content h2 {
    color: #355744;
    font-size: 32px;
    font-weight: 700;
    margin: 7px 0 14px;
}

.uppsik-overview-content p {
    color: #68776f;
    line-height: 1.8;
    margin-bottom: 11px;
}

.uppsik-services-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 24px;
    box-shadow: 0 12px 34px rgba(42, 79, 61, 0.06);
    padding: 27px;
}

.uppsik-services-card h3 {
    color: #355744;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 17px;
}

.uppsik-services-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.uppsik-services-card li {
    align-items: flex-start;
    color: #617168;
    display: flex;
    font-size: 13px;
    gap: 11px;
    line-height: 1.65;
    margin-bottom: 12px;
}

.uppsik-services-card li:last-child {
    margin-bottom: 0;
}

.uppsik-services-card li span {
    align-items: center;
    background: #e4f1e7;
    border-radius: 50%;
    color: #3f7658;
    display: flex;
    flex: 0 0 25px;
    font-size: 12px;
    font-weight: 700;
    height: 25px;
    justify-content: center;
}

/* Section heading */

.help-section-heading {
    margin-bottom: 25px;
}

.help-section-heading h2 {
    color: #355744;
    font-size: 31px;
    font-weight: 700;
    margin: 7px 0;
}

.help-section-heading p {
    color: #68776f;
    margin: 0;
}

/* Contact cards */

.help-contact-section {
    margin-bottom: 40px;
}

.help-contact-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
}

.help-contact-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 23px;
    box-shadow: 0 12px 32px rgba(42, 79, 61, 0.06);
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
    transition: 0.2s ease;
}

.help-contact-card:hover {
    box-shadow: 0 17px 38px rgba(42, 79, 61, 0.11);
    transform: translateY(-4px);
}

.help-contact-icon {
    align-items: center;
    background: #e8f2ea;
    border-radius: 16px;
    display: flex;
    font-size: 29px;
    height: 57px;
    justify-content: center;
    margin-bottom: 17px;
    width: 57px;
}

.help-contact-card h3 {
    color: #355744;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 10px;
}

.help-contact-main {
    color: #476653;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 7px;
    overflow-wrap: anywhere;
}

.help-email-text {
    font-size: 12px;
}

.help-contact-card small {
    color: #77857d;
    flex-grow: 1;
    font-size: 12px;
    line-height: 1.65;
}

.help-contact-buttons {
    display: grid;
    gap: 9px;
    margin-top: 18px;
}

.help-contact-buttons .btn {
    font-size: 12px;
    font-weight: 600;
    width: 100%;
}

.help-whatsapp-btn {
    background: #25d366;
    border: 1px solid #25d366;
    color: #ffffff;
}

.help-whatsapp-btn:hover,
.help-whatsapp-btn:focus {
    background: #1dbb58;
    border-color: #1dbb58;
    color: #ffffff;
}

/* Office information */

.help-office-section {
    margin-bottom: 42px;
    scroll-margin-top: 30px;
}

.help-office-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 27px;
    box-shadow: 0 13px 36px rgba(42, 79, 61, 0.06);
    padding: 29px;
}

.help-office-heading {
    align-items: center;
    display: flex;
    gap: 15px;
    margin-bottom: 23px;
}

.help-office-icon {
    align-items: center;
    background: #e8f2ea;
    border-radius: 17px;
    display: flex;
    flex: 0 0 59px;
    font-size: 30px;
    height: 59px;
    justify-content: center;
}

.help-office-heading h2 {
    color: #355744;
    font-size: 26px;
    font-weight: 700;
    margin: 5px 0 0;
}

.help-office-details {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, 1fr);
}

.help-office-item {
    background: #f4f8f5;
    border: 1px solid #e0ebe2;
    border-radius: 16px;
    padding: 17px;
}

.help-office-item small {
    color: #829087;
    display: block;
    font-size: 10px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.help-office-item strong {
    color: #4c6856;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}

.help-office-note {
    background: #fff8e8;
    border: 1px solid #efdfb8;
    border-radius: 16px;
    margin-top: 18px;
    padding: 17px;
}

.help-office-note strong {
    color: #725d2e;
}

.help-office-note p {
    color: #7d704f;
    font-size: 12px;
    line-height: 1.65;
    margin: 5px 0 0;
}

/* Help signs */

.help-signs-section {
    margin-bottom: 42px;
}

.help-signs-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}

.help-sign-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 22px;
    padding: 23px;
}

.help-sign-icon {
    align-items: center;
    background: #e8f2ea;
    border-radius: 15px;
    display: flex;
    font-size: 27px;
    height: 53px;
    justify-content: center;
    margin-bottom: 16px;
    width: 53px;
}

.help-sign-card h3 {
    color: #355744;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 9px;
}

.help-sign-card p {
    color: #68776f;
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

/* Self-care */

.help-selfcare-section {
    margin-bottom: 42px;
}

.help-selfcare-grid {
    display: grid;
    gap: 17px;
    grid-template-columns: repeat(3, 1fr);
}

.help-selfcare-card {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 20px;
    display: flex;
    gap: 14px;
    padding: 20px;
}

.help-selfcare-card > span {
    align-items: center;
    background: #e8f2ea;
    border-radius: 14px;
    display: flex;
    flex: 0 0 49px;
    font-size: 25px;
    height: 49px;
    justify-content: center;
}

.help-selfcare-card h3 {
    color: #355744;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.help-selfcare-card p {
    color: #68776f;
    font-size: 12px;
    line-height: 1.65;
    margin: 0;
}

.help-resource-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 24px;
}

/* Final CTA */

.help-final-card {
    align-items: flex-start;
    background:
        radial-gradient(
            circle at top right,
            rgba(255, 255, 255, 0.14),
            transparent 34%
        ),
        linear-gradient(135deg, #355744, #587f65);
    border-radius: 29px;
    color: #ffffff;
    display: flex;
    gap: 23px;
    padding: 35px;
}

.help-final-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 19px;
    display: flex;
    flex: 0 0 70px;
    font-size: 37px;
    height: 70px;
    justify-content: center;
}

.help-final-card .section-label {
    color: #cce0d1;
}

.help-final-card h2 {
    font-size: 29px;
    font-weight: 700;
    margin: 7px 0 11px;
}

.help-final-card p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.75;
    margin-bottom: 20px;
    max-width: 850px;
}

.help-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}

.help-disclaimer {
    color: #7a8880;
    font-size: 11px;
    line-height: 1.7;
    margin: 22px auto 0;
    max-width: 900px;
    text-align: center;
}

/* Responsive layout */

@media (max-width: 1199px) {
    .help-contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .help-hero,
    .uppsik-overview {
        grid-template-columns: 1fr;
    }

    .help-signs-grid,
    .help-selfcare-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .help-page {
        padding-top: 30px;
    }

    .help-hero {
        padding: 25px;
    }

    .help-emergency-card,
    .help-final-card {
        flex-direction: column;
    }

    .help-contact-grid,
    .help-signs-grid,
    .help-selfcare-grid,
    .help-office-details {
        grid-template-columns: 1fr;
    }

    .help-hero-actions,
    .help-emergency-actions,
    .help-resource-actions,
    .help-final-actions {
        flex-direction: column;
    }

    .help-hero-actions .btn,
    .help-emergency-actions .btn,
    .help-resource-actions .btn,
    .help-final-actions .btn {
        width: 100%;
    }
}

/* =========================================================
   STUDENT PROFILE PAGE
   ========================================================= */

.profile-page {
    padding: 48px 0 80px;
}

.profile-header {
    margin-bottom: 27px;
}

.profile-header .section-label {
    color: #4d9377;
}

.profile-header h1 {
    color: #355744;
    font-size: clamp(35px, 5vw, 50px);
    font-weight: 700;
    margin: 7px 0 10px;
}

.profile-header p {
    color: #68776f;
    margin: 0;
}

.profile-alert {
    border-radius: 18px;
    margin-bottom: 25px;
}

.profile-layout {
    align-items: flex-start;
    display: grid;
    gap: 25px;
    grid-template-columns: 320px minmax(0, 1fr);
}

.profile-summary-card,
.profile-form-card {
    background: #ffffff;
    border: 1px solid #dce9df;
    box-shadow: 0 14px 38px rgba(42, 79, 61, 0.07);
}

.profile-summary-card {
    border-radius: 27px;
    padding: 30px;
    position: sticky;
    text-align: center;
    top: 25px;
}

.profile-avatar {
    align-items: center;
    background: linear-gradient(145deg, #355744, #659072);
    border: 6px solid #eef5ef;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    font-size: 39px;
    font-weight: 700;
    height: 105px;
    justify-content: center;
    margin: 0 auto 18px;
    width: 105px;
}

.profile-summary-card h2 {
    color: #355744;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

.profile-summary-card > p {
    color: #718077;
    font-size: 13px;
    margin: 0;
}

.profile-summary-divider,
.profile-form-divider {
    border-top: 1px solid #e1ebe3;
}

.profile-summary-divider {
    margin: 23px 0;
}

.profile-summary-item {
    margin-bottom: 17px;
    text-align: left;
}

.profile-summary-item small {
    color: #89968e;
    display: block;
    font-size: 10px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.profile-summary-item strong {
    color: #506c5a;
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.profile-privacy-note {
    align-items: flex-start;
    background: #eef6ef;
    border: 1px solid #d9e8dc;
    border-radius: 16px;
    display: flex;
    gap: 10px;
    margin-top: 22px;
    padding: 15px;
    text-align: left;
}

.profile-privacy-note span {
    font-size: 19px;
}

.profile-privacy-note p {
    color: #68776f;
    font-size: 10px;
    line-height: 1.65;
    margin: 0;
}

.profile-form-card {
    border-radius: 27px;
    padding: 32px;
}

.profile-form-section {
    margin: 0;
}

.profile-form-divider {
    margin: 32px 0;
}

.profile-form-heading {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    margin-bottom: 25px;
}

.profile-form-heading > span {
    align-items: center;
    background: #e8f2ea;
    border-radius: 15px;
    display: flex;
    flex: 0 0 53px;
    font-size: 27px;
    height: 53px;
    justify-content: center;
}

.profile-form-heading h2 {
    color: #355744;
    font-size: 21px;
    font-weight: 700;
    margin: 1px 0 5px;
}

.profile-form-heading p {
    color: #748279;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}

.profile-form-card .form-label {
    color: #405e4b;
    font-size: 12px;
    font-weight: 600;
}

.profile-form-card .form-control,
.profile-form-card .form-select {
    border: 1px solid #d7e4da;
    border-radius: 14px;
    min-height: 48px;
    padding: 12px 14px;
}

.profile-form-card .form-control:focus,
.profile-form-card .form-select:focus {
    border-color: #4d9377;
    box-shadow: 0 0 0 3px rgba(77, 147, 119, 0.12);
}

.profile-form-card .form-control:disabled {
    background: #f2f5f3;
    color: #7b8780;
}

.profile-form-card .form-text {
    color: #87938c;
    font-size: 10px;
    margin-top: 7px;
}

.profile-password-field {
    position: relative;
}

.profile-password-field .form-control {
    padding-right: 70px;
}

.profile-password-toggle {
    background: transparent;
    border: 0;
    color: #4d8065;
    font-size: 11px;
    font-weight: 600;
    padding: 8px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.profile-password-toggle:hover {
    color: #355744;
}

.profile-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
}

@media (max-width: 991px) {
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-summary-card {
        position: static;
    }
}

@media (max-width: 767px) {
    .profile-page {
        padding-top: 30px;
    }

    .profile-summary-card,
    .profile-form-card {
        padding: 23px;
    }

    .profile-form-actions {
        flex-direction: column-reverse;
    }

    .profile-form-actions .btn {
        width: 100%;
    }
}

/* =========================================================
   ADMIN LOGIN PAGE
   ========================================================= */

.admin-login-body {
    background:
        radial-gradient(
            circle at top left,
            rgba(107, 151, 119, 0.22),
            transparent 34%
        ),
        linear-gradient(135deg, #eef5ef, #f9fbf9);
    font-family: "Poppins", sans-serif;
    min-height: 100vh;
}

.admin-login-page {
    align-items: center;
    display: flex;
    min-height: 100vh;
    padding: 45px 0;
}

.admin-login-wrapper {
    background: #ffffff;
    border: 1px solid #dce9df;
    border-radius: 32px;
    box-shadow: 0 24px 60px rgba(42, 79, 61, 0.13);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    margin: 0 auto;
    max-width: 1100px;
    overflow: hidden;
}

.admin-login-intro {
    background:
        radial-gradient(
            circle at bottom right,
            rgba(255, 255, 255, 0.12),
            transparent 35%
        ),
        linear-gradient(145deg, #294b37, #52745e);
    color: #ffffff;
    padding: 55px;
}

.admin-login-logo {
    color: #ffffff;
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 45px;
    text-decoration: none;
}

.admin-login-logo:hover {
    color: #ffffff;
}

.admin-login-label {
    color: #d3e7d8;
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 11px;
    text-transform: uppercase;
}

.admin-login-intro h1 {
    font-size: clamp(34px, 5vw, 49px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 19px;
}

.admin-login-intro > p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 31px;
    max-width: 500px;
}

.admin-login-feature-list {
    display: grid;
    gap: 14px;
}

.admin-login-feature {
    align-items: center;
    display: flex;
    gap: 12px;
}

.admin-login-feature span {
    align-items: center;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    display: flex;
    flex: 0 0 28px;
    font-size: 12px;
    font-weight: 700;
    height: 28px;
    justify-content: center;
}

.admin-login-feature p {
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    margin: 0;
}

.admin-login-privacy {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 17px;
    display: flex;
    gap: 11px;
    margin-top: 36px;
    padding: 16px;
}

.admin-login-privacy span {
    font-size: 19px;
}

.admin-login-privacy p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    line-height: 1.7;
    margin: 0;
}

.admin-login-card {
    padding: 55px;
}

.admin-login-card-header {
    margin-bottom: 28px;
}

.admin-login-icon {
    align-items: center;
    background: #e7f1e9;
    border-radius: 17px;
    display: flex;
    font-size: 29px;
    height: 61px;
    justify-content: center;
    margin-bottom: 20px;
    width: 61px;
}

.admin-login-card .section-label {
    color: #4d9377;
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.admin-login-card h2 {
    color: #355744;
    font-size: 33px;
    font-weight: 700;
    margin: 6px 0 8px;
}

.admin-login-card-header p {
    color: #748279;
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
}

.admin-login-alert {
    border-radius: 16px;
    font-size: 12px;
    margin-bottom: 23px;
}

.admin-login-form .form-label {
    color: #405e4b;
    font-size: 12px;
    font-weight: 600;
}

.admin-login-input-group {
    position: relative;
}

.admin-login-input-group .form-control {
    border: 1px solid #d5e3d8;
    border-radius: 15px;
    min-height: 51px;
    padding: 12px 70px 12px 48px;
}

.admin-login-input-group .form-control:focus {
    border-color: #4d9377;
    box-shadow: 0 0 0 3px rgba(77, 147, 119, 0.12);
}

.admin-login-input-icon {
    font-size: 18px;
    left: 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.admin-login-password-toggle {
    background: transparent;
    border: 0;
    color: #4d8065;
    font-size: 11px;
    font-weight: 600;
    padding: 8px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.admin-login-password-toggle:hover {
    color: #294b37;
}

.admin-login-button {
    border-radius: 15px;
    font-size: 13px;
    font-weight: 600;
    min-height: 51px;
    width: 100%;
}

.admin-login-help {
    border-top: 1px solid #e1ebe3;
    margin-top: 29px;
    padding-top: 22px;
    text-align: center;
}

.admin-login-help p {
    color: #7c8981;
    display: inline;
    font-size: 12px;
    margin-right: 4px;
}

.admin-login-help a {
    color: #3f7658;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.admin-login-help a:hover {
    text-decoration: underline;
}

@media (max-width: 991px) {
    .admin-login-wrapper {
        grid-template-columns: 1fr;
    }

    .admin-login-intro {
        padding: 38px;
    }

    .admin-login-logo {
        margin-bottom: 30px;
    }

    .admin-login-card {
        padding: 38px;
    }
}

@media (max-width: 575px) {
    .admin-login-page {
        padding: 20px 0;
    }

    .admin-login-wrapper {
        border-radius: 23px;
    }

    .admin-login-intro,
    .admin-login-card {
        padding: 27px;
    }
}

/* =========================================================
   ADMIN DASHBOARD
   ========================================================= */

.admin-dashboard-body {
    background: #f3f7f4;
    color: #3e5145;
    font-family: "Poppins", sans-serif;
    margin: 0;
}

.admin-dashboard-layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */

.admin-sidebar {
    background:
        radial-gradient(
            circle at bottom left,
            rgba(255, 255, 255, 0.08),
            transparent 35%
        ),
        #294b37;
    color: #ffffff;
    display: flex;
    flex: 0 0 275px;
    flex-direction: column;
    height: 100vh;
    left: 0;
    overflow-y: auto;
    padding: 25px 19px;
    position: fixed;
    top: 0;
    width: 275px;
    z-index: 1050;
}

.admin-sidebar-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px;
    padding: 0 8px;
}

.admin-sidebar-logo {
    align-items: center;
    color: #ffffff;
    display: flex;
    font-size: 17px;
    font-weight: 700;
    gap: 10px;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.admin-sidebar-logo:hover {
    color: #ffffff;
}

.admin-sidebar-logo-icon {
    align-items: center;
    background: #ffffff;
    border-radius: 10px;
    color: #355744;
    display: flex;
    font-size: 21px;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.admin-sidebar-close {
    background: transparent;
    border: 0;
    color: #ffffff;
    display: none;
    font-size: 30px;
}

.admin-sidebar-profile {
    align-items: center;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 17px;
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    padding: 14px;
}

.admin-sidebar-avatar,
.admin-topbar-avatar {
    align-items: center;
    background: #e5f0e8;
    border-radius: 50%;
    color: #355744;
    display: flex;
    flex: 0 0 auto;
    font-weight: 700;
    justify-content: center;
}

.admin-sidebar-avatar {
    font-size: 18px;
    height: 45px;
    width: 45px;
}

.admin-sidebar-profile strong {
    display: block;
    font-size: 12px;
    margin-bottom: 3px;
}

.admin-sidebar-profile small {
    color: rgba(255, 255, 255, 0.65);
    display: block;
    font-size: 9px;
}

.admin-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-nav-label {
    color: rgba(255, 255, 255, 0.45);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0 12px 7px;
    text-transform: uppercase;
}

.admin-nav-label-second {
    margin-top: 20px;
}

.admin-nav-link {
    align-items: center;
    border-radius: 13px;
    color: rgba(255, 255, 255, 0.76);
    display: flex;
    font-size: 12px;
    font-weight: 500;
    gap: 12px;
    padding: 12px 14px;
    text-decoration: none;
    transition: 0.2s ease;
}

.admin-nav-link span {
    font-size: 17px;
    width: 22px;
}

.admin-nav-link:hover,
.admin-nav-link.active {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
}

.admin-logout-link {
    color: #ffc6c1;
}

.admin-sidebar-footer {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    display: flex;
    gap: 9px;
    margin-top: auto;
    padding: 13px;
}

.admin-sidebar-footer span {
    font-size: 16px;
}

.admin-sidebar-footer p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 9px;
    line-height: 1.6;
    margin: 0;
}

/* Main area */

.admin-dashboard-main {
    margin-left: 275px;
    min-width: 0;
    width: calc(100% - 275px);
}

.admin-topbar {
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #dce7de;
    display: flex;
    height: 78px;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.admin-menu-button {
    background: transparent;
    border: 0;
    color: #355744;
    display: none;
    font-size: 25px;
}

.admin-topbar-title span {
    color: #85928a;
    display: block;
    font-size: 9px;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.admin-topbar-title strong {
    color: #355744;
    display: block;
    font-size: 14px;
}

.admin-topbar-account {
    align-items: center;
    display: flex;
    gap: 11px;
}

.admin-topbar-avatar {
    font-size: 15px;
    height: 39px;
    width: 39px;
}

.admin-topbar-user strong {
    color: #405e4b;
    display: block;
    font-size: 11px;
}

.admin-topbar-user small {
    color: #89958e;
    display: block;
    font-size: 9px;
}

.admin-topbar-logout {
    border: 1px solid #d7e3d9;
    border-radius: 20px;
    color: #4a6755;
    font-size: 10px;
    margin-left: 9px;
    padding: 7px 15px;
}

.admin-topbar-logout:hover {
    background: #355744;
    border-color: #355744;
    color: #ffffff;
}

.admin-dashboard-content {
    padding: 34px;
}

/* Welcome */

.admin-welcome-section {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 27px;
}

.admin-section-label {
    color: #4d9377;
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.admin-welcome-section h1 {
    color: #355744;
    font-size: clamp(28px, 4vw, 39px);
    font-weight: 700;
    margin: 7px 0 8px;
}

.admin-welcome-section p {
    color: #748279;
    font-size: 12px;
    margin: 0;
}

.admin-current-date {
    align-items: center;
    background: #ffffff;
    border: 1px solid #dce7de;
    border-radius: 16px;
    display: flex;
    gap: 12px;
    padding: 13px 17px;
}

.admin-current-date > span {
    font-size: 24px;
}

.admin-current-date small {
    color: #89958e;
    display: block;
    font-size: 8px;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.admin-current-date strong {
    color: #456050;
    display: block;
    font-size: 11px;
}

/* Statistics */

.admin-stat-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 19px;
}

.admin-stat-card {
    background: #ffffff;
    border: 1px solid #dce7de;
    border-radius: 21px;
    box-shadow: 0 10px 27px rgba(42, 79, 61, 0.05);
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 21px;
}

.admin-stat-icon {
    align-items: center;
    background: #e8f2ea;
    border-radius: 15px;
    display: flex;
    font-size: 26px;
    height: 52px;
    justify-content: center;
    margin-bottom: 17px;
    width: 52px;
}

.admin-stat-content span {
    color: #77857d;
    display: block;
    font-size: 10px;
    margin-bottom: 3px;
}

.admin-stat-content strong {
    color: #355744;
    display: block;
    font-size: 29px;
    font-weight: 700;
    margin-bottom: 3px;
}

.admin-stat-content small {
    color: #8a968f;
    display: block;
    font-size: 9px;
    line-height: 1.5;
}

.admin-stat-card > a {
    border-top: 1px solid #e5ece7;
    color: #4d8065;
    font-size: 9px;
    font-weight: 600;
    margin-top: 17px;
    padding-top: 12px;
    text-decoration: none;
}

.admin-stat-attention {
    background: #fffafa;
    border-color: #efd4d1;
}

.admin-stat-attention .admin-stat-icon {
    background: #ffe7e4;
}

.admin-stat-attention .admin-stat-content strong {
    color: #a94b43;
}

.admin-secondary-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 34px;
}

.admin-secondary-card {
    align-items: center;
    background: #ffffff;
    border: 1px solid #dce7de;
    border-radius: 17px;
    display: flex;
    gap: 13px;
    padding: 16px 18px;
}

.admin-secondary-icon {
    align-items: center;
    background: #edf5ef;
    border-radius: 13px;
    display: flex;
    font-size: 22px;
    height: 45px;
    justify-content: center;
    width: 45px;
}

.admin-secondary-card small {
    color: #7c8981;
    display: block;
    font-size: 9px;
    margin-bottom: 2px;
}

.admin-secondary-card strong {
    color: #355744;
    display: block;
    font-size: 19px;
}

/* Sections */

.admin-dashboard-section {
    margin-bottom: 34px;
}

.admin-dashboard-heading {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 17px;
}

.admin-dashboard-heading h2 {
    color: #355744;
    font-size: 22px;
    font-weight: 700;
    margin: 5px 0 0;
}

.admin-heading-link {
    color: #4d8065;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.admin-heading-link:hover {
    text-decoration: underline;
}

/* Quick actions */

.admin-quick-action-grid {
    display: grid;
    gap: 17px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-quick-action-card {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #dce7de;
    border-radius: 19px;
    display: flex;
    gap: 13px;
    padding: 19px;
    text-decoration: none;
    transition: 0.2s ease;
}

.admin-quick-action-card:hover {
    box-shadow: 0 13px 30px rgba(42, 79, 61, 0.09);
    transform: translateY(-3px);
}

.admin-quick-action-card > span {
    align-items: center;
    background: #e8f2ea;
    border-radius: 13px;
    display: flex;
    flex: 0 0 45px;
    font-size: 23px;
    height: 45px;
    justify-content: center;
}

.admin-quick-action-card h3 {
    color: #3f5c49;
    font-size: 13px;
    font-weight: 700;
    margin: 1px 0 5px;
}

.admin-quick-action-card p {
    color: #7a8780;
    font-size: 9px;
    line-height: 1.6;
    margin: 0;
}

/* Tables */

.admin-table-card {
    background: #ffffff;
    border: 1px solid #dce7de;
    border-radius: 21px;
    box-shadow: 0 10px 28px rgba(42, 79, 61, 0.04);
    overflow: hidden;
}

.admin-dashboard-table {
    margin: 0;
    min-width: 850px;
    vertical-align: middle;
}

.admin-dashboard-table thead th {
    background: #f7faf8;
    border-bottom: 1px solid #e0e9e2;
    color: #7b8880;
    font-size: 8px;
    font-weight: 700;
    padding: 14px 17px;
    text-transform: uppercase;
}

.admin-dashboard-table tbody td {
    border-color: #edf1ee;
    color: #5f7166;
    font-size: 10px;
    padding: 14px 17px;
}

.admin-table-student {
    align-items: center;
    display: flex;
    gap: 10px;
}

.admin-table-avatar {
    align-items: center;
    background: #e7f0e9;
    border-radius: 50%;
    color: #41604b;
    display: flex;
    flex: 0 0 37px;
    font-size: 13px;
    font-weight: 700;
    height: 37px;
    justify-content: center;
}

.admin-table-student strong {
    color: #3f5949;
    display: block;
    font-size: 10px;
    margin-bottom: 2px;
}

.admin-table-student small {
    color: #8c9790;
    display: block;
    font-size: 8px;
}

.admin-severity-badge {
    border-radius: 20px;
    display: inline-flex;
    font-size: 8px;
    font-weight: 600;
    gap: 5px;
    padding: 6px 9px;
    white-space: nowrap;
}

.admin-severity-badge small {
    font-size: 8px;
    font-weight: 700;
}

.severity-normal {
    background: #e5f4e8;
    color: #39734a;
}

.severity-mild {
    background: #fff5d9;
    color: #8a6b19;
}

.severity-moderate {
    background: #ffe8cb;
    color: #9c5e18;
}

.severity-severe {
    background: #ffe1de;
    color: #a23e37;
}

.severity-default {
    background: #edf0ee;
    color: #627068;
}

.admin-attention-status,
.admin-stable-status {
    border-radius: 20px;
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    padding: 6px 9px;
}

.admin-attention-status {
    background: #ffe2df;
    color: #a43f37;
}

.admin-stable-status {
    background: #e6f3e9;
    color: #39734a;
}

.admin-table-date {
    color: #5f7166;
    display: block;
    font-size: 9px;
    white-space: nowrap;
}

.admin-table-date small {
    color: #929d96;
    display: block;
    font-size: 8px;
    margin-top: 2px;
}

.admin-empty-state {
    padding: 48px 20px;
    text-align: center;
}

.admin-empty-state > span {
    display: block;
    font-size: 43px;
    margin-bottom: 12px;
}

.admin-empty-state h3 {
    color: #405e4b;
    font-size: 17px;
    font-weight: 700;
}

.admin-empty-state p {
    color: #7f8c84;
    font-size: 10px;
    margin: 0 auto;
    max-width: 430px;
}

/* Footer */

.admin-dashboard-footer {
    align-items: center;
    border-top: 1px solid #dde7df;
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
}

.admin-dashboard-footer p,
.admin-dashboard-footer span {
    color: #89958e;
    font-size: 9px;
    margin: 0;
}

.admin-sidebar-overlay {
    background: rgba(20, 36, 26, 0.5);
    display: none;
    inset: 0;
    position: fixed;
    z-index: 1040;
}

/* Responsive */

@media (max-width: 1199px) {
    .admin-stat-grid,
    .admin-quick-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .admin-sidebar.show {
        transform: translateX(0);
    }

    .admin-sidebar-close {
        display: block;
    }

    .admin-sidebar-overlay.show {
        display: block;
    }

    .admin-sidebar-open {
        overflow: hidden;
    }

    .admin-dashboard-main {
        margin-left: 0;
        width: 100%;
    }

    .admin-menu-button {
        display: block;
    }

    .admin-topbar {
        padding: 0 20px;
    }

    .admin-topbar-title {
        display: none;
    }

    .admin-dashboard-content {
        padding: 25px 20px;
    }
}

@media (max-width: 767px) {
    .admin-welcome-section {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .admin-current-date {
        width: 100%;
    }

    .admin-stat-grid,
    .admin-secondary-grid,
    .admin-quick-action-grid {
        grid-template-columns: 1fr;
    }

    .admin-topbar-user {
        display: none;
    }

    .admin-topbar-logout {
        margin-left: 0;
    }

    .admin-dashboard-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}

/* =========================================================
   ADMIN MANAGE STUDENTS
   ========================================================= */

.admin-page-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 27px;
}

.admin-page-header h1 {
    color: #355744;
    font-size: clamp(29px, 4vw, 40px);
    font-weight: 700;
    margin: 7px 0 8px;
}

.admin-page-header p {
    color: #748279;
    font-size: 12px;
    margin: 0;
}

.admin-secondary-button {
    border: 1px solid #d4e1d7;
    border-radius: 20px;
    color: #496653;
    font-size: 11px;
    padding: 9px 17px;
}

.admin-secondary-button:hover {
    background: #355744;
    border-color: #355744;
    color: #ffffff;
}

.admin-page-alert {
    border-radius: 17px;
    font-size: 12px;
    margin-bottom: 22px;
}

.admin-student-stat-grid {
    display: grid;
    gap: 17px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 23px;
}

.admin-student-stat-card {
    align-items: center;
    background: #ffffff;
    border: 1px solid #dce7de;
    border-radius: 18px;
    display: flex;
    gap: 13px;
    padding: 17px;
}

.admin-student-stat-card > span {
    align-items: center;
    background: #e9f2eb;
    border-radius: 14px;
    display: flex;
    flex: 0 0 48px;
    font-size: 24px;
    height: 48px;
    justify-content: center;
}

.admin-student-stat-card small {
    color: #7c8981;
    display: block;
    font-size: 9px;
    margin-bottom: 3px;
}

.admin-student-stat-card strong {
    color: #355744;
    display: block;
    font-size: 22px;
}

.admin-student-stat-card.attention {
    background: #fffafa;
    border-color: #efd4d1;
}

.admin-student-stat-card.attention > span {
    background: #ffe5e2;
}

.admin-student-stat-card.attention strong {
    color: #a54840;
}

/* Filters */

.admin-filter-card {
    background: #ffffff;
    border: 1px solid #dce7de;
    border-radius: 20px;
    box-shadow: 0 9px 27px rgba(42, 79, 61, 0.04);
    margin-bottom: 30px;
    padding: 20px;
}

.admin-filter-form {
    align-items: flex-end;
    display: grid;
    gap: 14px;
    grid-template-columns:
        minmax(240px, 1.7fr)
        minmax(150px, 1fr)
        minmax(140px, 0.8fr)
        minmax(140px, 0.8fr)
        auto;
}

.admin-filter-form label {
    color: #536c5c;
    display: block;
    font-size: 9px;
    font-weight: 600;
    margin-bottom: 7px;
}

.admin-filter-form .form-control,
.admin-filter-form .form-select {
    border: 1px solid #d5e2d8;
    border-radius: 12px;
    font-size: 10px;
    min-height: 42px;
}

.admin-filter-form .form-control:focus,
.admin-filter-form .form-select:focus {
    border-color: #4d9377;
    box-shadow: 0 0 0 3px rgba(77, 147, 119, 0.1);
}

.admin-filter-actions {
    display: flex;
    gap: 8px;
}

.admin-filter-actions .btn {
    border-radius: 12px;
    font-size: 9px;
    min-height: 42px;
    padding: 9px 15px;
    white-space: nowrap;
}

.admin-filter-reset {
    border: 1px solid #d7e3d9;
    color: #63756a;
}

.admin-filter-reset:hover {
    background: #eef4ef;
    color: #355744;
}

.admin-record-count {
    background: #e8f2ea;
    border-radius: 20px;
    color: #456650;
    font-size: 9px;
    font-weight: 600;
    padding: 7px 12px;
}

/* Student table */

.admin-students-table {
    margin: 0;
    min-width: 1120px;
    vertical-align: middle;
}

.admin-students-table thead th {
    background: #f7faf8;
    border-bottom: 1px solid #e0e9e2;
    color: #7b8880;
    font-size: 8px;
    font-weight: 700;
    padding: 14px 15px;
    text-transform: uppercase;
}

.admin-students-table tbody td {
    border-color: #edf1ee;
    color: #5f7166;
    font-size: 9px;
    line-height: 1.55;
    padding: 14px 15px;
}

.admin-contact-cell strong {
    color: #50685a;
    display: block;
    font-size: 9px;
    font-weight: 600;
    margin-bottom: 3px;
    overflow-wrap: anywhere;
}

.admin-contact-cell small {
    color: #8a968f;
    display: block;
    font-size: 8px;
}

.admin-activity-cell {
    display: flex;
    gap: 7px;
}

.admin-activity-cell span {
    background: #eef4ef;
    border-radius: 12px;
    color: #586e60;
    font-size: 8px;
    padding: 5px 7px;
}

.admin-neutral-status {
    background: #edf0ee;
    border-radius: 20px;
    color: #67736c;
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    padding: 6px 9px;
    white-space: nowrap;
}

.admin-table-actions {
    display: flex;
    gap: 7px;
}

.admin-table-actions a,
.admin-table-actions button {
    background: transparent;
    border-radius: 10px;
    font-size: 8px;
    font-weight: 600;
    padding: 6px 9px;
    text-decoration: none;
}

.admin-action-view {
    border: 1px solid #cfe0d3;
    color: #447058;
}

.admin-action-view:hover {
    background: #355744;
    border-color: #355744;
    color: #ffffff;
}

.admin-action-delete {
    border: 1px solid #efd0cd;
    color: #a54a42;
}

.admin-action-delete:hover {
    background: #b74d44;
    border-color: #b74d44;
    color: #ffffff;
}

/* Pagination */

.admin-pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

.admin-pagination {
    gap: 5px;
    margin: 0;
}

.admin-pagination .page-link {
    border: 1px solid #d8e4da;
    border-radius: 10px;
    color: #506b59;
    font-size: 9px;
    padding: 8px 12px;
}

.admin-pagination .page-item.active .page-link {
    background: #355744;
    border-color: #355744;
    color: #ffffff;
}

.admin-pagination .page-link:focus {
    box-shadow: none;
}

/* Delete modal */

.admin-delete-modal {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
}

.admin-delete-modal .modal-header,
.admin-delete-modal .modal-footer {
    border-color: #e5ece7;
    padding: 18px 22px;
}

.admin-delete-modal .modal-title {
    color: #64423f;
    font-weight: 700;
}

.admin-delete-modal .modal-body {
    padding: 24px;
    text-align: center;
}

.admin-delete-warning-icon {
    align-items: center;
    background: #ffe5e2;
    border-radius: 50%;
    display: flex;
    font-size: 35px;
    height: 74px;
    justify-content: center;
    margin: 0 auto 17px;
    width: 74px;
}

.admin-delete-modal .modal-body > p {
    color: #596b60;
    font-size: 13px;
    line-height: 1.7;
}

.admin-delete-modal .alert {
    border-radius: 13px;
    font-size: 10px;
    line-height: 1.6;
    text-align: left;
}

.admin-delete-modal .btn {
    border-radius: 12px;
    font-size: 10px;
    padding: 9px 15px;
}

@media (max-width: 1199px) {
    .admin-student-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-filter-search {
        grid-column: span 2;
    }
}

@media (max-width: 767px) {
    .admin-page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
    }

    .admin-student-stat-grid,
    .admin-filter-form {
        grid-template-columns: 1fr;
    }

    .admin-filter-search {
        grid-column: auto;
    }

    .admin-filter-actions {
        flex-direction: column;
    }

    .admin-filter-actions .btn {
        width: 100%;
    }

    .admin-dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

/* =========================================================
   ADMIN STUDENT DETAILS
   ========================================================= */

.admin-student-profile-card {
    align-items: center;
    background:
        radial-gradient(
            circle at right,
            rgba(255, 255, 255, 0.13),
            transparent 35%
        ),
        linear-gradient(135deg, #355744, #587963);
    border-radius: 23px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
    padding: 27px;
}

.admin-student-profile-main {
    align-items: center;
    display: flex;
    gap: 17px;
}

.admin-student-profile-avatar {
    align-items: center;
    background: rgba(255, 255, 255, 0.17);
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    display: flex;
    flex: 0 0 76px;
    font-size: 28px;
    font-weight: 700;
    height: 76px;
    justify-content: center;
}

.admin-profile-label {
    color: rgba(255, 255, 255, 0.66);
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.admin-student-profile-main h2 {
    font-size: 25px;
    font-weight: 700;
    margin: 0 0 5px;
}

.admin-student-profile-main p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    margin: 0;
}

.admin-profile-status-area {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-profile-status-area > span {
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
    padding: 8px 12px;
}

.admin-profile-attention {
    background: #ffe1de;
    color: #a23e37;
}

.admin-profile-screened {
    background: #dff0e3;
    color: #39734a;
}

.admin-profile-neutral {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.admin-profile-status-area small {
    color: rgba(255, 255, 255, 0.62);
    font-size: 9px;
}

.admin-details-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 34px;
}

.admin-details-card {
    background: #ffffff;
    border: 1px solid #dce7de;
    border-radius: 21px;
    box-shadow: 0 9px 26px rgba(42, 79, 61, 0.04);
    padding: 22px;
}

.admin-details-card-header {
    align-items: center;
    border-bottom: 1px solid #e4ece6;
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 15px;
}

.admin-details-card-header > span {
    align-items: center;
    background: #e8f2ea;
    border-radius: 13px;
    display: flex;
    font-size: 23px;
    height: 47px;
    justify-content: center;
    width: 47px;
}

.admin-details-card-header small {
    color: #85928a;
    display: block;
    font-size: 8px;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.admin-details-card-header h2 {
    color: #3e5a48;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.admin-information-list {
    display: grid;
    gap: 0;
}

.admin-information-item {
    align-items: flex-start;
    border-bottom: 1px solid #edf1ee;
    display: flex;
    justify-content: space-between;
    padding: 11px 0;
}

.admin-information-item:last-child {
    border-bottom: 0;
}

.admin-information-item span {
    color: #859088;
    font-size: 9px;
}

.admin-information-item strong {
    color: #4c6455;
    font-size: 10px;
    font-weight: 600;
    max-width: 65%;
    overflow-wrap: anywhere;
    text-align: right;
}

.admin-profile-stat-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-profile-stat {
    background: #f4f8f5;
    border: 1px solid #e0e9e2;
    border-radius: 15px;
    padding: 15px;
}

.admin-profile-stat > span {
    display: block;
    font-size: 21px;
    margin-bottom: 6px;
}

.admin-profile-stat strong {
    color: #355744;
    display: block;
    font-size: 21px;
    margin-bottom: 2px;
}

.admin-profile-stat small {
    color: #7e8b83;
    display: block;
    font-size: 8px;
}

.admin-profile-stat.attention {
    background: #fff8f7;
    border-color: #efd7d4;
}

.admin-profile-stat.attention strong {
    color: #a94b43;
}

.admin-confidential-note {
    align-items: flex-start;
    background: #f1f6f2;
    border-radius: 14px;
    display: flex;
    gap: 9px;
    margin-top: 15px;
    padding: 12px;
}

.admin-confidential-note span {
    font-size: 17px;
}

.admin-confidential-note p {
    color: #77857d;
    font-size: 8px;
    line-height: 1.6;
    margin: 0;
}

.admin-latest-screening-card {
    background: #ffffff;
    border: 1px solid #dce7de;
    border-radius: 21px;
    box-shadow: 0 9px 27px rgba(42, 79, 61, 0.04);
    padding: 22px;
}

.admin-latest-screening-header {
    align-items: center;
    border-bottom: 1px solid #e4ece6;
    display: flex;
    justify-content: space-between;
    margin-bottom: 19px;
    padding-bottom: 15px;
}

.admin-latest-screening-header div > span {
    color: #87938c;
    display: block;
    font-size: 8px;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.admin-latest-screening-header div > strong {
    color: #496151;
    display: block;
    font-size: 11px;
}

.admin-dass-result-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-dass-result-card {
    background: #f6f9f7;
    border: 1px solid #e1e9e3;
    border-radius: 17px;
    padding: 20px;
    text-align: center;
}

.admin-dass-title {
    color: #748279;
    display: block;
    font-size: 10px;
    margin-bottom: 5px;
}

.admin-dass-result-card > strong {
    color: #355744;
    display: block;
    font-size: 32px;
    margin-bottom: 9px;
}

.admin-screening-warning {
    align-items: flex-start;
    background: #fff5f3;
    border: 1px solid #f0d5d1;
    border-radius: 14px;
    display: flex;
    gap: 10px;
    margin-top: 17px;
    padding: 14px;
}

.admin-screening-warning span {
    font-size: 20px;
}

.admin-screening-warning p {
    color: #82534f;
    font-size: 9px;
    line-height: 1.6;
    margin: 0;
}

.admin-screening-history-table {
    margin: 0;
    min-width: 700px;
    vertical-align: middle;
}

.admin-screening-history-table thead th {
    background: #f7faf8;
    border-bottom: 1px solid #e0e9e2;
    color: #7b8880;
    font-size: 8px;
    font-weight: 700;
    padding: 14px 17px;
    text-transform: uppercase;
}

.admin-screening-history-table tbody td {
    border-color: #edf1ee;
    color: #5f7166;
    font-size: 10px;
    padding: 14px 17px;
}

@media (max-width: 767px) {
    .admin-student-profile-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .admin-profile-status-area {
        align-items: flex-start;
    }

    .admin-details-grid,
    .admin-dass-result-grid {
        grid-template-columns: 1fr;
    }

    .admin-latest-screening-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .admin-information-item {
        flex-direction: column;
        gap: 5px;
    }

    .admin-information-item strong {
        max-width: 100%;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .admin-student-profile-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-profile-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ADMIN SCREENING RESULTS
   ========================================================= */

.admin-screening-summary-card {
    background: #ffffff;
    border: 1px solid #dce7de;
    border-radius: 20px;
    margin-bottom: 23px;
    padding: 20px;
}

.admin-screening-summary-card strong {
    color: #a54840;
    display: block;
    font-size: 30px;
    margin: 5px 0;
}

.admin-screening-summary-card p {
    color: #7c8981;
    font-size: 9px;
    margin: 0 0 15px;
}

.admin-screening-progress {
    background: #edf1ee;
    border-radius: 20px;
    height: 10px;
    overflow: hidden;
}

.admin-screening-progress-bar {
    background: linear-gradient(
        90deg,
        #d88b82,
        #a94b43
    );
    border-radius: 20px;
    height: 100%;
    min-width: 0;
}

.admin-screening-filter-form {
    align-items: flex-end;
    display: grid;
    gap: 13px;
    grid-template-columns:
        minmax(220px, 1.5fr)
        repeat(3, minmax(130px, 0.8fr));
}

.admin-screening-filter-form label {
    color: #536c5c;
    display: block;
    font-size: 9px;
    font-weight: 600;
    margin-bottom: 7px;
}

.admin-screening-filter-form .form-control,
.admin-screening-filter-form .form-select {
    border: 1px solid #d5e2d8;
    border-radius: 12px;
    font-size: 10px;
    min-height: 42px;
}

.admin-screening-filter-form .form-control:focus,
.admin-screening-filter-form .form-select:focus {
    border-color: #4d9377;
    box-shadow: 0 0 0 3px rgba(77, 147, 119, 0.1);
}

.admin-screening-search {
    grid-column: span 2;
}

.admin-screening-results-table {
    margin: 0;
    min-width: 1050px;
    vertical-align: middle;
}

.admin-screening-results-table thead th {
    background: #f7faf8;
    border-bottom: 1px solid #e0e9e2;
    color: #7b8880;
    font-size: 8px;
    font-weight: 700;
    padding: 14px 15px;
    text-transform: uppercase;
}

.admin-screening-results-table tbody td {
    border-color: #edf1ee;
    color: #5f7166;
    font-size: 9px;
    padding: 14px 15px;
}

.admin-screening-score-cell {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-screening-score-cell > strong {
    color: #355744;
    font-size: 18px;
}

.admin-screening-score-cell .admin-severity-badge {
    justify-content: center;
}

.admin-screening-results-table .admin-action-view {
    border: 1px solid #cfe0d3;
    border-radius: 10px;
    color: #447058;
    display: inline-block;
    font-size: 8px;
    font-weight: 600;
    padding: 7px 10px;
    text-decoration: none;
    white-space: nowrap;
}

.admin-screening-results-table .admin-action-view:hover {
    background: #355744;
    border-color: #355744;
    color: #ffffff;
}

@media (max-width: 1199px) {
    .admin-screening-filter-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-screening-search {
        grid-column: span 3;
    }
}

@media (max-width: 767px) {
    .admin-screening-filter-form {
        grid-template-columns: 1fr;
    }

    .admin-screening-search {
        grid-column: auto;
    }
}

/* =========================================================
   ADMIN JOURNAL MANAGEMENT
   ========================================================= */

.admin-journal-privacy-card {
    align-items: flex-start;
    background: linear-gradient(135deg, #eef6f0, #f8fbf9);
    border: 1px solid #d7e6da;
    border-radius: 18px;
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
    padding: 18px 20px;
}

.admin-journal-privacy-icon {
    align-items: center;
    background: #dfeee3;
    border-radius: 13px;
    display: flex;
    flex: 0 0 45px;
    font-size: 21px;
    height: 45px;
    justify-content: center;
}

.admin-journal-privacy-card strong {
    color: #3c5e49;
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
}

.admin-journal-privacy-card p {
    color: #728078;
    font-size: 9px;
    line-height: 1.7;
    margin: 0;
}

.admin-journal-filter-form {
    align-items: flex-end;
    display: grid;
    gap: 14px;
    grid-template-columns:
        minmax(260px, 2fr)
        minmax(170px, 0.8fr)
        auto;
}

.admin-journal-filter-form label {
    color: #536c5c;
    display: block;
    font-size: 9px;
    font-weight: 600;
    margin-bottom: 7px;
}

.admin-journal-filter-form .form-control {
    border: 1px solid #d5e2d8;
    border-radius: 12px;
    font-size: 10px;
    min-height: 42px;
}

.admin-journal-filter-form .form-control:focus {
    border-color: #4d9377;
    box-shadow: 0 0 0 3px rgba(77, 147, 119, 0.1);
}

.admin-journals-table {
    margin: 0;
    min-width: 1050px;
    vertical-align: middle;
}

.admin-journals-table thead th {
    background: #f7faf8;
    border-bottom: 1px solid #e0e9e2;
    color: #7b8880;
    font-size: 8px;
    font-weight: 700;
    padding: 14px 16px;
    text-transform: uppercase;
}

.admin-journals-table tbody td {
    border-color: #edf1ee;
    color: #5f7166;
    font-size: 9px;
    padding: 15px 16px;
}

.admin-journals-table tbody tr {
    transition: background-color 0.2s ease;
}

.admin-journals-table tbody tr:hover {
    background: #fafcfb;
}

.admin-journal-title-cell strong {
    color: #3f5c4a;
    display: block;
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 4px;
    max-width: 200px;
    overflow-wrap: anywhere;
}

.admin-journal-title-cell small {
    color: #98a39c;
    display: block;
    font-size: 8px;
}

.admin-journal-preview {
    color: #718078;
    font-size: 9px;
    line-height: 1.65;
    margin: 0;
    max-width: 330px;
    min-width: 220px;
}

.admin-table-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-action-view,
.admin-action-student,
.admin-action-delete {
    border-radius: 9px;
    display: inline-block;
    font-size: 8px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 10px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

button.admin-action-view,
button.admin-action-delete {
    cursor: pointer;
    font-family: inherit;
}

.admin-action-view {
    background: #e7f2ea;
    border: 1px solid #cce0d2;
    color: #3e7050;
}

.admin-action-view:hover {
    background: #3f7052;
    border-color: #3f7052;
    color: #ffffff;
}

.admin-action-student {
    background: #f4f7f5;
    border: 1px solid #dce5df;
    color: #627369;
}

.admin-action-student:hover {
    background: #586e60;
    border-color: #586e60;
    color: #ffffff;
}

.admin-action-delete {
    background: #fff5f3;
    border: 1px solid #efd5d1;
    color: #a14b43;
}

.admin-action-delete:hover {
    background: #a64e46;
    border-color: #a64e46;
    color: #ffffff;
}

.admin-journal-view-modal {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
}

.admin-journal-view-modal .modal-header {
    align-items: flex-start;
    background: #f7faf8;
    border-bottom: 1px solid #dfe8e1;
    padding: 20px 22px;
}

.admin-journal-view-modal .modal-title {
    color: #395744;
    font-size: 19px;
    font-weight: 700;
    margin-top: 4px;
}

.admin-journal-view-modal .modal-body {
    padding: 22px;
}

.admin-journal-view-modal .modal-footer {
    background: #f9fbfa;
    border-top: 1px solid #e3ebe5;
    padding: 14px 22px;
}

.admin-journal-modal-meta {
    background: #f4f8f5;
    border: 1px solid #e0e9e2;
    border-radius: 15px;
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 18px;
    padding: 16px;
}

.admin-journal-modal-meta > div {
    min-width: 0;
}

.admin-journal-modal-meta span {
    color: #89958d;
    display: block;
    font-size: 8px;
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.admin-journal-modal-meta strong {
    color: #4a6353;
    display: block;
    font-size: 10px;
    margin-bottom: 3px;
    overflow-wrap: anywhere;
}

.admin-journal-modal-meta small {
    color: #8c9890;
    display: block;
    font-size: 8px;
}

.admin-journal-modal-content {
    background: #ffffff;
    border: 1px solid #e0e8e2;
    border-radius: 16px;
    min-height: 220px;
    padding: 18px;
}

.admin-journal-modal-content > span {
    color: #88958d;
    display: block;
    font-size: 8px;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.admin-journal-modal-content p {
    color: #54675b;
    font-size: 10px;
    line-height: 1.9;
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.admin-journal-modal-notice {
    align-items: flex-start;
    background: #fff9ed;
    border: 1px solid #efe1bd;
    border-radius: 13px;
    display: flex;
    gap: 9px;
    margin-top: 16px;
    padding: 12px;
}

.admin-journal-modal-notice span {
    font-size: 17px;
}

.admin-journal-modal-notice p {
    color: #7d6a3f;
    font-size: 8px;
    line-height: 1.6;
    margin: 0;
}

.admin-page-alert {
    border: 0;
    border-radius: 13px;
    font-size: 10px;
    margin-bottom: 20px;
    padding: 12px 15px;
}

@media (max-width: 991px) {
    .admin-journal-filter-form {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(160px, 0.65fr);
    }

    .admin-journal-filter-form .admin-filter-actions {
        grid-column: span 2;
    }
}

@media (max-width: 767px) {
    .admin-journal-filter-form {
        grid-template-columns: 1fr;
    }

    .admin-journal-filter-form .admin-filter-actions {
        grid-column: auto;
    }

    .admin-journal-modal-meta {
        grid-template-columns: 1fr;
    }

    .admin-journal-view-modal .modal-header,
    .admin-journal-view-modal .modal-body,
    .admin-journal-view-modal .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =========================================================
   ADMIN REPORTS & ANALYTICS
   ========================================================= */

.admin-report-page-header {
    align-items: center;
}

.admin-report-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.admin-report-filter-card {
    align-items: flex-end;
    background: #ffffff;
    border: 1px solid #dce7de;
    border-radius: 17px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
    padding: 16px 18px;
}

.admin-report-filter-form {
    align-items: flex-end;
    display: flex;
    gap: 10px;
}

.admin-report-filter-form label {
    color: #536c5c;
    display: block;
    font-size: 9px;
    font-weight: 600;
    margin-bottom: 6px;
}

.admin-report-filter-form .form-select {
    border: 1px solid #d5e2d8;
    border-radius: 11px;
    font-size: 10px;
    min-height: 40px;
    min-width: 190px;
}

.admin-report-filter-card > span {
    color: #87938c;
    font-size: 8px;
}

.admin-report-stat-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 20px;
}

.admin-report-stat-card {
    align-items: center;
    background: #ffffff;
    border: 1px solid #dce7de;
    border-radius: 18px;
    display: flex;
    gap: 13px;
    padding: 18px;
}

.admin-report-stat-icon {
    align-items: center;
    background: #e9f2eb;
    border-radius: 14px;
    display: flex;
    flex: 0 0 48px;
    font-size: 22px;
    height: 48px;
    justify-content: center;
}

.admin-report-stat-card small {
    color: #86928b;
    display: block;
    font-size: 8px;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.admin-report-stat-card strong {
    color: #355744;
    display: block;
    font-size: 23px;
}

.admin-report-stat-card p {
    color: #98a29c;
    font-size: 8px;
    margin: 2px 0 0;
}

.admin-report-rate-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 22px;
}

.admin-report-rate-card {
    background: #ffffff;
    border: 1px solid #dce7de;
    border-radius: 19px;
    padding: 19px;
}

.admin-report-rate-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
}

.admin-report-rate-heading small {
    color: #89958d;
    display: block;
    font-size: 8px;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.admin-report-rate-heading strong {
    color: #3e5d49;
    display: block;
    font-size: 13px;
}

.admin-report-rate-heading > span {
    color: #3c7452;
    font-size: 24px;
    font-weight: 700;
}

.admin-report-progress {
    background: #edf2ee;
    border-radius: 20px;
    height: 10px;
    overflow: hidden;
}

.admin-report-progress-bar {
    background: linear-gradient(90deg, #78a989, #3f7955);
    border-radius: 20px;
    height: 100%;
}

.admin-report-rate-card.attention
.admin-report-progress-bar {
    background: linear-gradient(90deg, #da9188, #a94b43);
}

.admin-report-rate-card.attention
.admin-report-rate-heading > span {
    color: #a94b43;
}

.admin-report-rate-card p {
    color: #7e8c83;
    font-size: 8px;
    line-height: 1.6;
    margin: 11px 0 0;
}

.admin-report-two-column {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 30px;
}

.admin-report-card {
    background: #ffffff;
    border: 1px solid #dce7de;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(40, 73, 54, 0.04);
    padding: 20px;
}

.admin-report-card-heading {
    align-items: flex-start;
    border-bottom: 1px solid #e4ece6;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
}

.admin-report-card-heading h2 {
    color: #3c5947;
    font-size: 15px;
    font-weight: 700;
    margin: 3px 0 0;
}

.admin-report-card-heading > span {
    color: #929d96;
    font-size: 8px;
}

.admin-report-average-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-report-average-grid > div {
    background: #f4f8f5;
    border: 1px solid #e1e9e3;
    border-radius: 15px;
    padding: 17px;
    text-align: center;
}

.admin-report-average-grid span {
    color: #7d8b82;
    display: block;
    font-size: 9px;
    margin-bottom: 5px;
}

.admin-report-average-grid strong {
    color: #355744;
    display: block;
    font-size: 27px;
}

.admin-report-disclaimer {
    background: #fff9ed;
    border: 1px solid #eee1c3;
    border-radius: 12px;
    color: #7b6b46;
    font-size: 8px;
    line-height: 1.6;
    margin-top: 14px;
    padding: 11px;
}

.admin-risk-list {
    display: grid;
    gap: 17px;
}

.admin-risk-item > div:first-child {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
}

.admin-risk-item span {
    color: #64756a;
    font-size: 9px;
}

.admin-risk-item strong {
    color: #a64d45;
    font-size: 13px;
}

.admin-risk-bar {
    background: #f0e7e5;
    border-radius: 20px;
    height: 9px;
    overflow: hidden;
}

.admin-risk-bar span {
    background: linear-gradient(90deg, #de9b92, #aa5047);
    border-radius: 20px;
    display: block;
    height: 100%;
}

.admin-monthly-chart {
    align-items: flex-end;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(6, minmax(60px, 1fr));
    min-height: 250px;
    padding: 15px 5px 0;
}

.admin-monthly-column {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 220px;
    justify-content: flex-end;
}

.admin-monthly-value {
    color: #486151;
    font-size: 9px;
    font-weight: 700;
    margin-bottom: 6px;
}

.admin-monthly-track {
    align-items: flex-end;
    background: #eff4f0;
    border-radius: 11px 11px 4px 4px;
    display: flex;
    height: 165px;
    justify-content: center;
    overflow: hidden;
    width: 52px;
}

.admin-monthly-bar {
    background: linear-gradient(180deg, #76a889, #3d7150);
    border-radius: 10px 10px 3px 3px;
    min-height: 4px;
    width: 100%;
}

.admin-monthly-column > span {
    color: #7c8981;
    font-size: 8px;
    margin-top: 8px;
    text-align: center;
}

.admin-report-severity-table,
.admin-course-report-table,
.admin-report-attention-table {
    margin: 0;
    min-width: 700px;
    vertical-align: middle;
}

.admin-report-severity-table thead th,
.admin-course-report-table thead th,
.admin-report-attention-table thead th {
    background: #f7faf8;
    border-bottom: 1px solid #e0e9e2;
    color: #7b8880;
    font-size: 8px;
    font-weight: 700;
    padding: 14px 16px;
    text-transform: uppercase;
}

.admin-report-severity-table tbody td,
.admin-course-report-table tbody td,
.admin-report-attention-table tbody td {
    border-color: #edf1ee;
    color: #5f7166;
    font-size: 9px;
    padding: 14px 16px;
}

.admin-course-report-table tbody strong {
    color: #405d4b;
    font-size: 9px;
}

.admin-report-footer-note {
    align-items: flex-start;
    background: #f1f6f2;
    border: 1px solid #d9e5dc;
    border-radius: 16px;
    display: flex;
    gap: 12px;
    margin-top: 25px;
    padding: 16px;
}

.admin-report-footer-note > span {
    font-size: 21px;
}

.admin-report-footer-note strong {
    color: #425f4c;
    display: block;
    font-size: 10px;
    margin-bottom: 4px;
}

.admin-report-footer-note p {
    color: #75837a;
    font-size: 8px;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 1100px) {
    .admin-report-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .admin-report-filter-card,
    .admin-report-filter-form {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-report-filter-card {
        gap: 14px;
    }

    .admin-report-filter-form .form-select {
        min-width: 100%;
    }

    .admin-report-stat-grid,
    .admin-report-rate-grid,
    .admin-report-two-column {
        grid-template-columns: 1fr;
    }

    .admin-report-average-grid {
        grid-template-columns: 1fr;
    }

    .admin-monthly-chart {
        gap: 8px;
        min-width: 520px;
    }

    .admin-report-card:has(.admin-monthly-chart) {
        overflow-x: auto;
    }
}

@media print {
    .admin-sidebar,
    .admin-topbar,
    .admin-sidebar-overlay,
    .admin-report-header-actions,
    .admin-report-filter-card,
    .admin-view-all-link {
        display: none !important;
    }

    .admin-dashboard-main {
        margin: 0 !important;
        width: 100% !important;
    }

    .admin-dashboard-content {
        padding: 15px !important;
    }

    .admin-report-card,
    .admin-report-stat-card,
    .admin-report-rate-card,
    .admin-table-card {
        break-inside: avoid;
        box-shadow: none !important;
    }

    body {
        background: #ffffff !important;
    }
}

/* =========================================================
   ADMIN PROFILE
   ========================================================= */

.admin-profile-page-grid {
    align-items: start;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(240px, 0.72fr)
        minmax(0, 1.8fr);
}

.admin-profile-summary-card,
.admin-profile-form-card {
    background: #ffffff;
    border: 1px solid #dce7de;
    border-radius: 21px;
    box-shadow: 0 9px 26px rgba(42, 79, 61, 0.04);
}

.admin-profile-summary-card {
    padding: 25px;
    text-align: center;
}

.admin-profile-large-avatar {
    align-items: center;
    background: linear-gradient(135deg, #3e6950, #6b9278);
    border: 6px solid #edf5ef;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    font-size: 35px;
    font-weight: 700;
    height: 105px;
    justify-content: center;
    margin: 0 auto 15px;
    width: 105px;
}

.admin-profile-summary-card h2 {
    color: #385743;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 5px;
}

.admin-profile-summary-card > p {
    color: #849087;
    font-size: 9px;
    margin: 0 0 10px;
    overflow-wrap: anywhere;
}

.admin-profile-role {
    background: #e8f2ea;
    border-radius: 20px;
    color: #477157;
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    padding: 7px 11px;
}

.admin-profile-summary-list {
    border-top: 1px solid #e3ebe5;
    margin-top: 21px;
    padding-top: 10px;
    text-align: left;
}

.admin-profile-summary-list > div {
    align-items: center;
    border-bottom: 1px solid #edf1ee;
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
}

.admin-profile-summary-list > div:last-child {
    border-bottom: 0;
}

.admin-profile-summary-list span {
    color: #859189;
    font-size: 8px;
}

.admin-profile-summary-list strong {
    color: #4b6253;
    font-size: 9px;
}

.admin-profile-summary-list
.admin-profile-active {
    color: #3d7c52;
}

.admin-profile-security-note {
    align-items: flex-start;
    background: #f2f7f3;
    border: 1px solid #dce8df;
    border-radius: 13px;
    display: flex;
    gap: 8px;
    margin-top: 15px;
    padding: 12px;
    text-align: left;
}

.admin-profile-security-note span {
    font-size: 17px;
}

.admin-profile-security-note p {
    color: #76837b;
    font-size: 8px;
    line-height: 1.6;
    margin: 0;
}

.admin-profile-form-card {
    padding: 23px;
}

.admin-profile-form-heading {
    align-items: center;
    border-bottom: 1px solid #e3ebe5;
    display: flex;
    gap: 12px;
    margin-bottom: 21px;
    padding-bottom: 16px;
}

.admin-profile-form-heading > span {
    align-items: center;
    background: #e9f2eb;
    border-radius: 13px;
    display: flex;
    font-size: 22px;
    height: 47px;
    justify-content: center;
    width: 47px;
}

.admin-profile-form-heading small {
    color: #86928a;
    display: block;
    font-size: 8px;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.admin-profile-form-heading h2 {
    color: #3b5946;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.admin-profile-form {
    display: grid;
    gap: 23px;
}

.admin-profile-form-section {
    background: #f9fbfa;
    border: 1px solid #e2eae4;
    border-radius: 16px;
    padding: 18px;
}

.admin-profile-form-section h3 {
    color: #42604c;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 4px;
}

.admin-profile-form-section > p {
    color: #849087;
    font-size: 8px;
    line-height: 1.6;
    margin: 0 0 16px;
}

.admin-profile-form-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-profile-form-grid label {
    color: #526b5a;
    display: block;
    font-size: 9px;
    font-weight: 600;
    margin-bottom: 7px;
}

.admin-profile-form-grid .form-control {
    border: 1px solid #d4e1d7;
    border-radius: 11px;
    font-size: 10px;
    min-height: 42px;
}

.admin-profile-form-grid .form-control:focus {
    border-color: #4d9377;
    box-shadow: 0 0 0 3px rgba(77, 147, 119, 0.1);
}

.admin-profile-full-field {
    grid-column: 1 / -1;
}

.admin-password-field {
    position: relative;
}

.admin-password-field .form-control {
    padding-right: 60px;
}

.admin-password-toggle {
    background: transparent;
    border: 0;
    color: #4b765b;
    font-size: 8px;
    font-weight: 700;
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
}

.admin-field-help {
    color: #8b978f;
    display: block;
    font-size: 7px;
    margin-top: 5px;
}

.admin-profile-form-actions {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

@media (max-width: 991px) {
    .admin-profile-page-grid {
        grid-template-columns: 1fr;
    }

    .admin-profile-summary-card {
        text-align: left;
    }

    .admin-profile-large-avatar {
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .admin-profile-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-profile-full-field {
        grid-column: auto;
    }

    .admin-profile-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .admin-profile-form-actions .btn {
        width: 100%;
    }
}

/* DASHBOARD STATISTICS */

.admin-statistics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
}

.admin-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 210px;
    padding: 24px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e7eee9;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(21, 74, 50, 0.07);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.admin-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(21, 74, 50, 0.12);
}

.admin-stat-icon {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    place-items: center;
    background: #edf8f1;
    border-radius: 16px;
    font-size: 23px;
}

.admin-stat-content {
    display: flex;
    flex-direction: column;
}

.admin-stat-content span {
    color: #64756b;
    font-size: 13px;
    font-weight: 600;
}

.admin-stat-content strong {
    margin: 5px 0;
    color: #173f2c;
    font-size: 34px;
    line-height: 1.2;
}

.admin-stat-content small {
    color: #87958d;
    font-size: 12px;
}

.admin-stat-card a {
    margin-top: auto;
    padding-top: 20px;
    color: #177245;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.admin-stat-card a:hover {
    color: #0d5431;
}

.admin-stat-card-alert {
    background:
        linear-gradient(
            145deg,
            #fffaf3,
            #ffffff
        );
    border-color: #f2ddbc;
}

.admin-stat-card-alert .admin-stat-icon {
    background: #fff1dc;
}

.admin-stat-card-alert
.admin-stat-content strong {
    color: #bb6619;
}

@media (max-width: 1200px) {
    .admin-statistics-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .admin-statistics-grid {
        grid-template-columns: 1fr;
    }

    .admin-stat-card {
        min-height: 190px;
    }
}

.admin-chart-card{
    background:#fff;
    padding:25px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.admin-chart-card canvas{
    width:100%!important;
    height:350px!important;
}

.admin-dashboard-two-column{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    margin-top:30px;
}

.admin-placeholder-card{
    background:#fff;
    border-radius:18px;
    padding:30px;
    min-height:220px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#777;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

@media(max-width:991px){

.admin-dashboard-two-column{

grid-template-columns:1fr;

}

}
.admin-page-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 576px) {
    .admin-page-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .admin-page-header-actions .btn {
        flex: 1;
    }
}

@media print {

    body,
    html{
        margin:0 !important;
        padding:0 !important;
        background:#fff !important;
    }

    .admin-sidebar,
    .admin-sidebar-overlay,
    .admin-topbar,
    .admin-filter-card,
    .admin-pagination-wrapper,
    .admin-page-header-actions{
        display:none !important;
    }

    .admin-dashboard-layout,
    .admin-dashboard-main,
    .admin-dashboard-content{

        display:block !important;
        width:100% !important;
        max-width:100% !important;

        margin:0 !important;
        padding:0 !important;
    }

    .admin-dashboard-section,
    .admin-table-card,
    .admin-screening-summary-card,
    .admin-student-stat-grid{

        break-inside:avoid;
        page-break-inside:avoid;

    }

    table{

        width:100% !important;

    }

}

.main-footer{

    width:100%;

    margin-top:60px;

}


/* Developer credit area */

.developer-section{

    background:#064e3b;

    color:white;

    text-align:center;

    padding:40px 20px;

}


.developer-section h4{

    font-size:24px;

    margin-bottom:8px;

}


.developer-section p{

    font-size:14px;

    opacity:.85;

}


.developer-team{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin:25px 0;

}


.developer-team strong{

    background:white;

    color:#064e3b;

    padding:8px 15px;

    border-radius:20px;

    font-size:12px;

}


/* Bottom footer */

.footer-bottom{

    background:#022c22;

    color:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 8%;

}


.footer-bottom h3{

    margin:0;

    font-size:24px;

}


.footer-bottom p{

    margin:5px 0 0;

    font-size:14px;

    opacity:.8;

}


.footer-bottom span{

    font-size:12px;

    opacity:.8;

}



@media(max-width:768px){

    .footer-bottom{

        flex-direction:column;

        text-align:center;

        gap:15px;

    }

}

.form-control,
select.form-control{

    border-radius:12px;

    padding:12px;

    border:1px solid #d9e5dd;

    background:white;

    color:#374151;

}

.uppsik-person-image img{

    width:120px;
    height:120px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #2f7d57;

}


.uppsik-overview{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:30px;

}


.uppsik-person-image{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

}


.uppsik-overview-content{

    width:100%;

    max-width:800px;

    text-align:center;

}


/* =====================================
   ROLE LOGIN PAGE
===================================== */
/* =========================
 ROLE SELECTION BUTTON
========================= */


.role-container {

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-top:30px;

}



.role-card {


    display:flex;

    align-items:center;

    gap:20px;


    padding:22px 25px;


    width:100%;


    background:#2f8f75;


    color:white;


    text-decoration:none;


    border-radius:20px;


    box-shadow:0 10px 25px rgba(0,0,0,0.12);


    transition:.3s;


}



.role-card:hover {


    background:#246b58;

    transform:translateY(-5px);


}




.role-icon {


    font-size:35px;


}




.role-card h3 {


    margin:0;


    font-size:22px;


    color:white;


    font-weight:600;


}




.role-card p {


    margin-top:5px;


    margin-bottom:0;


    color:#e8f5f1;


    font-size:14px;


}

/* =========================
   BEAUTIFUL ROLE BUTTON
========================= */


.role-container {

    display:flex;
    flex-direction:column;
    gap:22px;
    margin-top:35px;

}



.role-card {

    position:relative;

    display:flex;

    align-items:center;

    gap:22px;


    padding:22px 25px;


    width:100%;


    background:linear-gradient(
        135deg,
        #2f8f75,
        #3da58a
    );


    color:white;

    text-decoration:none;


    border-radius:24px;


    overflow:hidden;


    box-shadow:
    0 12px 25px rgba(47,143,117,0.25);


    transition:all .35s ease;


}



/* little shine effect */

.role-card::before {


    content:"";

    position:absolute;

    top:-50%;

    left:-20%;


    width:80px;

    height:200%;


    background:rgba(255,255,255,0.18);


    transform:rotate(25deg);


    transition:.5s;


}





.role-card:hover::before {


    left:120%;


}





.role-card:hover {


    transform:translateY(-6px);


    box-shadow:

    0 18px 35px rgba(47,143,117,0.35);


}





.role-icon {


    width:65px;

    height:65px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:rgba(255,255,255,0.18);


    border-radius:18px;


    font-size:35px;


    backdrop-filter:blur(5px);


}





.role-card h3 {


    margin:0;


    font-size:22px;


    font-weight:600;


    color:white;


}




.role-card p {


    margin:5px 0 0;


    color:#e8f5f1;


    font-size:14px;


}

/* =========================
   SUPER ADMIN ADMIN PAGE
========================= */


.super-admin-page {

    min-height:100vh;

    background:#f6f7f2;

    padding:50px;

}



.super-admin-container {

    max-width:1200px;

    margin:auto;

}



.super-admin-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}



.super-admin-header h1 {

    color:#16423C;

    font-size:36px;

}



.super-admin-header p {

    color:#777;

}



.super-back-btn {

    background:#16423C;

    color:white;

    padding:12px 25px;

    border-radius:15px;

    text-decoration:none;

}



.super-add-btn {


    display:inline-block;

    background:#2f8f75;

    color:white;

    padding:14px 25px;

    border-radius:15px;

    text-decoration:none;

    margin-bottom:25px;

}




.admin-management-card {


    background:white;

    border-radius:25px;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,0.1);

}



.admin-management-table {


    width:100%;

    border-collapse:collapse;

}



.admin-management-table th {


    background:#16423C;

    color:white;

    padding:15px;

    text-align:left;

}



.admin-management-table td {


    padding:15px;

    border-bottom:1px solid #eee;

}



.role-badge {


    background:#dff3ec;

    color:#16423C;

    padding:6px 15px;

    border-radius:20px;

}



.table-edit-btn {


    background:#2f8f75;

    color:white;

    padding:8px 15px;

    border-radius:10px;

    text-decoration:none;

    margin-right:5px;

}



.table-delete-btn {


    background:#dc3545;

    color:white;

    padding:8px 15px;

    border-radius:10px;

    text-decoration:none;

}

/* ==================================
   SUPER ADMIN DASHBOARD
   POLY-HEALTH STYLE
================================== */


.super-dashboard-body{

    margin:0;

    font-family:'Poppins', sans-serif;

    background:#f6f3eb;

}




.super-dashboard-page{


    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;


}



.super-dashboard-container{


    width:100%;

    max-width:1100px;


}



.super-dashboard-card{


    background:white;

    border-radius:35px;

    padding:60px;

    box-shadow:
    0 20px 50px rgba(0,0,0,0.08);


}





.dashboard-header{


    text-align:center;

    margin-bottom:50px;


}



.dashboard-logo{


    display:block;

    text-decoration:none;

    font-size:30px;

    font-weight:700;

    color:#16423C;

    margin-bottom:25px;


}



.dashboard-label{


    display:inline-block;

    background:#e4f2e9;

    color:#2f8f75;

    padding:8px 20px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

}



.dashboard-header h1{


    margin-top:25px;

    font-size:42px;

    color:#16423C;

    font-weight:700;


}



.dashboard-header p{


    color:#777;

    max-width:600px;

    margin:auto;

    font-size:16px;


}




.dashboard-grid{


    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;


}




.dashboard-item{


    background:#f9faf6;

    border-radius:25px;

    padding:30px;

    text-decoration:none;

    color:#16423C;

    border:1px solid #edf0e8;

    transition:.3s;


}




.dashboard-item:hover{


    background:#2f8f75;

    transform:translateY(-6px);


}



.dashboard-item:hover h3,
.dashboard-item:hover p{


    color:white;

}



.dashboard-icon{


    font-size:45px;

    margin-bottom:15px;


}



.dashboard-item h3{


    font-size:22px;

    margin-bottom:10px;

}



.dashboard-item p{


    color:#777;

    margin:0;

}




@media(max-width:768px){


.dashboard-grid{

grid-template-columns:1fr;

}


.super-dashboard-card{

padding:30px;

}


.dashboard-header h1{

font-size:32px;

}


}

.login-back-button {
    text-align: center;
    margin-top: 25px;
}


.login-back-button a {

    color: #2f8f75;
    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    transition: .3s;

}


.login-back-button a:hover {

    color: #246b58;
    text-decoration: underline;

}

.auth-forgot-password {

    text-align:center;
    margin-top:15px;

}


.auth-forgot-password a {

    color:#2f8f75;
    font-weight:600;
    text-decoration:none;

}


.auth-forgot-password a:hover {

    text-decoration:underline;

}

/* =========================
   APPOINTMENT PAGE
========================= */


.appointment-wrapper{

display:flex;

justify-content:center;

padding:60px 0;

}



.appointment-card{

background:white;

width:600px;

padding:45px;

border-radius:30px;

box-shadow:
0 20px 50px rgba(0,0,0,0.08);

}



.appointment-header{

margin-bottom:35px;

}



.appointment-header h1{

font-size:32px;

font-weight:700;

color:#164d3b;

}



.appointment-header p{

color:#777;

}



.poly-input{

border-radius:15px;

padding:14px 18px;

border:1px solid #ddd;

}



.poly-input:focus{

border-color:#2f8f75;

box-shadow:
0 0 0 .2rem rgba(47,143,117,.15);

}



.appointment-card label{

font-weight:600;

color:#333;

}

/* ===================================
   ADMIN APPOINTMENT MANAGEMENT
=================================== */


.appointment-list {

    max-width:1200px;

    margin:40px auto;

    display:grid;

    grid-template-columns:
    repeat(2, minmax(330px,1fr));

    gap:35px;

}





.appointment-admin-card {


    background:white;

    border-radius:25px;

    padding:30px;


    box-shadow:
    0 15px 35px rgba(0,0,0,0.08);


    transition:0.3s;


}



.appointment-admin-card:hover {

    transform:translateY(-5px);

}






.appointment-header {


    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:15px;

    margin-bottom:25px;


}





.appointment-header h3 {


    font-size:20px;

    font-weight:700;

    color:#164b3d;

    margin:0;


}





.appointment-status {


    background:#e8f5ef;

    color:#25805d;


    padding:7px 15px;

    border-radius:50px;


    font-size:13px;

    font-weight:600;


}







.appointment-details p {


    color:#555;

    margin-bottom:12px;


}





.appointment-details strong {


    color:#164b3d;


}





.appointment-form select {


    border-radius:15px;

    padding:12px;



}

/* ===========================
   ADMIN BACK BUTTON
=========================== */


.admin-back-button {

    display:inline-flex;

    align-items:center;

    gap:8px;


    padding:12px 25px;


    background:#2f8f75;

    color:white;


    text-decoration:none;


    border-radius:50px;


    font-weight:600;

    font-size:14px;


    transition:0.3s;


}



.admin-back-button:hover {


    background:#246b58;


    color:white;


    transform:translateY(-2px);


    box-shadow:
    0 8px 20px rgba(47,143,117,0.25);


}





.appointment-form .btn {


    width:100%;

    border-radius:30px;


}

/* ============================
   ADMIN PAGE WIDTH FIX
============================ */


.student-dashboard .container {

    max-width:1200px;

    margin:0 auto;

    padding-left:25px;

    padding-right:25px;

}

.dashboard-welcome {

    max-width:1200px;

    margin:40px auto;

}

/* =========================
   ADMIN NAVBAR
========================= */


.admin-navbar {

    background:white;

    padding:20px 0;

    border-bottom:1px solid #e5e5e5;

}


.admin-nav-container {

    max-width:1200px;

    margin:auto;

    padding:0 25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.admin-logo {

    font-family: Georgia, serif;

    font-size:32px;

    font-weight:700;

    color:#254d3c;

    text-decoration:none;

}


.admin-dashboard-btn {

    background:#3b9278;

    color:white;

    padding:12px 25px;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}


.admin-dashboard-btn:hover {

    background:#2d705d;

    color:white;

}

/* =================================
   ADMIN APPOINTMENT CARD FINAL FIX
================================= */


.appointment-wrapper {

    display:grid;

    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:30px;

    width:100%;

}



.appointment-card {

    background:#ffffff;

    border-radius:25px;

    padding:35px;

    min-height:560px;

    box-shadow:0 15px 35px rgba(0,0,0,0.08);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    overflow:hidden;

}



.appointment-card-header {

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:15px;

}



.appointment-card h3 {

    font-size:22px;

    font-weight:700;

    color:#164734;

    margin:0;

    word-break:break-word;

}



.appointment-card p {

    margin-bottom:14px;

    color:#555;

    font-size:15px;

}



.appointment-card strong {

    color:#164734;

}



.appointment-status {

    background:#e7f4ed;

    color:#27815d;

    padding:7px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

}



.appointment-card form {

    margin-top:auto;

    padding-top:25px;

}



.appointment-card select {

    height:45px;

    border-radius:25px;

    padding-left:20px;

    margin-bottom:20px;

}



.appointment-card .btn-poly {

    width:100%;

    height:45px;

    border-radius:30px;

    font-weight:600;

}



@media(max-width:900px){

    .appointment-wrapper{

        grid-template-columns:1fr;

    }

}

/* APPOINTMENT CARD SMALLER VERSION */

.appointment-card {

    padding: 25px;
    min-height: auto;
    height: auto;

    border-radius: 22px;

    background: #ffffff;

    box-shadow: 0 10px 25px rgba(0,0,0,0.08);

}


.appointment-card h3 {

    font-size: 20px;
    margin-bottom: 15px;

}


.appointment-card p {

    margin-bottom: 10px;
    font-size: 14px;

}


.appointment-card form {

    margin-top: 15px;

}


.appointment-card select {

    height: 40px;

}


.appointment-card .btn-poly {

    padding: 10px;
    font-size: 14px;

}

/* APPOINTMENT GRID */

.appointment-wrapper {

    display:grid;

    grid-template-columns: repeat(2, minmax(0,1fr));

    gap:25px;

    width:100%;

}


/* card */

.appointment-card {

    padding:25px;

    border-radius:24px;

    min-height:420px;

    width:100%;

}



/* header */

.appointment-card-header {

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:20px;

}



.appointment-card h3 {

    font-size:22px;

    color:#164734;

    max-width:70%;

}



.appointment-card p {

    margin-bottom:10px;

}



.appointment-select {

    margin-top:15px;

    border-radius:20px;

}



.appointment-button {

    margin-top:10px;

    border-radius:30px;

}



@media(max-width:900px){

.appointment-wrapper{

grid-template-columns:1fr;

}

}

/* ==========================
   APPOINTMENT ALERT
========================== */

.appointment-alert {

    width:100%;

    margin-bottom:25px;

    padding:15px 25px;

    border-radius:16px;

    font-weight:600;

    position:relative;

}


.success-alert {

    background:#e7f4ed;

    color:#176b45;

    border:1px solid #c7e8d5;

}


.error-alert {

    background:#fde8e8;

    color:#a61b1b;

    border:1px solid #f5c2c2;

}

/* =================================
   STUDENT BOOK APPOINTMENT PAGE
================================= */


.student-appointment-wrapper {

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:40px;

}


.student-appointment-card {

    width:100%;

    max-width:850px;

    background:white;

    padding:45px;

    border-radius:30px;

    box-shadow:0 15px 40px rgba(0,0,0,0.08);

}



.student-appointment-card .appointment-header {

    margin-bottom:35px;

}



.student-appointment-card h1 {

    font-size:36px;

    font-weight:700;

    color:#164734;

}



.student-appointment-card p {

    color:#666;

}



.student-appointment-card .section-label {

    color:#2d8060;

    font-weight:600;

    letter-spacing:1px;

}



.student-appointment-card .poly-input {

    height:50px;

    border-radius:15px;

}



.student-appointment-card textarea.poly-input {

    height:auto;

}



.student-appointment-card .auth-submit-button {

    width:100%;

    border-radius:30px;

    padding:14px;

}



/* ================================
   STUDENT SUCCESS ALERT
================================ */

.student-alert {

    width:100%;

    padding:22px 30px;

    margin-bottom:35px;

    border-radius:18px;

    font-size:18px;

    font-weight:600;

    display:flex;

    align-items:center;

}



/* success message */

.student-success-alert {

    background:#e8f4ec;

    color:#176b45;

    border-left:8px solid #27815d;

    box-shadow:0 8px 20px rgba(0,0,0,0.05);

}



/* error message */

.error-alert {

    background:#fdeaea;

    color:#a61b1b;

    border-left:8px solid #dc3545;

}

/* ===========================
   MY APPOINTMENT
=========================== */


.appointment-detail-box {

    margin-top:30px;

    background:#f8fbf9;

    padding:30px;

    border-radius:20px;

}


.appointment-detail-box p {

    margin-bottom:15px;

    font-size:16px;

}



.appointment-status {

    background:#e7f4ed;

    color:#176b45;

    padding:8px 18px;

    border-radius:30px;

    font-weight:600;

}



.empty-appointment {

    text-align:center;

    padding:40px;

}

/* ================================
   STUDENT TOP NAVBAR
================================ */


.student-top-navbar {

    background:white;

    padding:35px 0;

    width:100%;

}



.student-nav-container {

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 30px;

}



.student-nav-logo a {

    text-decoration:none;

    font-size:28px;

    font-weight:700;

    color:#164734;

    letter-spacing:1px;

}



.student-nav-actions {

    display:flex;

    gap:15px;

}



.student-nav-btn {

    text-decoration:none;

    padding:12px 30px;

    border-radius:30px;

    border:1.5px solid #164734;

    color:#164734;

    font-weight:500;

    transition:.3s;

}



.student-nav-btn:hover {

    background:#164734;

    color:white;

}

@media print {


.admin-sidebar,
.admin-topbar,
button {

    display:none !important;

}


.admin-dashboard-content {

    width:100%;

}

}

/* =================================
   SUPPORT STUDENTS TABLE SMALLER
================================= */


.admin-table-card {

    padding: 20px;
    border-radius: 20px;

}



.admin-table-card table {

    font-size: 14px;

}



.admin-table-card th {

    font-size: 13px;
    font-weight: 600;
    padding: 12px 10px;
    white-space: nowrap;

}



.admin-table-card td {

    font-size: 13px;
    padding: 10px;
    vertical-align: middle;

}



/* Reduce long student name width */

.admin-table-card td:first-child {

    max-width: 180px;
    word-wrap: break-word;

}



/* Smaller header section gap */

.admin-welcome-section {

    margin-bottom: 20px;

}



/* Make table not too wide */

.admin-table-card {

    width: 95%;
    margin: auto;

}

@media print {


    /* Hide unnecessary parts */
    .admin-sidebar,
    .admin-topbar,
    .admin-welcome-section a,
    button {
        display:none !important;
    }


    /* Remove empty dashboard spacing */
    body,
    .admin-dashboard-body {

        margin:0 !important;
        padding:0 !important;
        background:white !important;

    }


    .admin-dashboard-layout {

        display:block !important;

    }


    .admin-dashboard-main {

        margin:0 !important;
        padding:0 !important;

        width:100% !important;

    }


    .admin-dashboard-content {

        padding:0 !important;
        margin:0 !important;

    }


    .admin-dashboard-section {

        margin:0 !important;
        padding:0 !important;

    }


    /* Move table to top */
    .admin-table-card {

        margin:0 !important;
        padding:10px !important;
        box-shadow:none !important;

    }


    table {

        width:100% !important;
        font-size:12px !important;

    }


    th, td {

        padding:6px !important;

    }


    @page {

        margin:15mm;

    }


}

.super-admin-page .form-control,
.super-admin-page .form-select {

    border-radius:15px;

    padding:14px;

    border:1px solid #ddd;

}


.super-admin-page label {

    font-weight:600;

    color:#164734;

}

.super-admin-page label {

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#164734;

}


.super-admin-page .form-control,
.super-admin-page .form-select {

    border-radius:15px;

    padding:14px;

}

/* =====================================
   SUPER ADMIN - MANAGE STUDENTS
===================================== */


.super-admin-page {

    min-height:100vh;

    background:#f6f8f7;

    padding:50px;

    font-family:'Poppins',sans-serif;

}



.super-admin-container {

    max-width:1400px;

    margin:auto;

}



/* Header */


.super-admin-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}



.super-admin-header h1 {

    font-size:36px;

    font-weight:700;

    color:#164734;

    margin-bottom:8px;

}



.super-admin-header p {

    color:#666;

    margin:0;

}





/* Back Button */


.super-back-btn {

    text-decoration:none;

    padding:12px 28px;

    border-radius:30px;

    border:1.5px solid #164734;

    color:#164734;

    font-weight:600;

    transition:.3s;

}



.super-back-btn:hover {

    background:#164734;

    color:white;

}





/* Table Container */


.admin-management-card {

    background:white;

    border-radius:25px;

    padding:30px;

    box-shadow:

    0 15px 35px rgba(0,0,0,0.08);

    overflow-x:auto;

}





/* Table */


.admin-management-table {

    width:100%;

    border-collapse:collapse;

    min-width:1000px;

}



.admin-management-table thead {

    background:#f3f7f5;

}



.admin-management-table th {

    padding:18px;

    color:#164734;

    font-size:14px;

    font-weight:600;

    text-align:left;

}



.admin-management-table td {

    padding:18px;

    color:#555;

    border-bottom:1px solid #eeeeee;

    vertical-align:middle;

}



.admin-management-table tr:last-child td {

    border-bottom:none;

}



.admin-management-table tbody tr:hover {

    background:#fafdfb;

}





/* Action Buttons */


.table-edit-btn,
.table-delete-btn {


    display:inline-block;

    text-decoration:none;

    padding:8px 18px;

    border-radius:25px;

    font-size:13px;

    font-weight:600;

    margin-right:8px;

    transition:.3s;

}




.table-edit-btn {


    border:1px solid #27815d;

    color:#27815d;

}



.table-edit-btn:hover {


    background:#27815d;

    color:white;

}




.table-delete-btn {


    border:1px solid #d9534f;

    color:#d9534f;

}



.table-delete-btn:hover {


    background:#d9534f;

    color:white;

}




/* Mobile Responsive */


@media(max-width:768px){


.super-admin-page{

    padding:25px;

}



.super-admin-header{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}


}

/* =========================================================
   SUPER ADMIN REPORT PAGE
   UNIQUE PREFIX: sa-report-
========================================================= */

.sa-report-body {
    margin: 0;
    min-height: 100vh;
    background: #f4f7f5;
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.sa-report-body *,
.sa-report-body *::before,
.sa-report-body *::after {
    box-sizing: border-box;
}

.sa-report-page {
    min-height: 100vh;
    padding: 38px;
}

.sa-report-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* =========================================================
   TOP BAR
========================================================= */

.sa-report-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.sa-report-logo {
    color: #164734;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-decoration: none;
}

.sa-report-logo:hover {
    color: #2f8f75;
}

.sa-report-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sa-report-print-btn,
.sa-report-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 10px 20px;
    border-radius: 30px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: 0.25s ease;
}

.sa-report-print-btn {
    border: none;
    background: #2f8f75;
    color: #ffffff;
    cursor: pointer;
}

.sa-report-print-btn:hover {
    background: #246f5a;
    transform: translateY(-1px);
}

.sa-report-back-btn {
    border: 1px solid #164734;
    background: transparent;
    color: #164734;
}

.sa-report-back-btn:hover {
    background: #164734;
    color: #ffffff;
}

/* =========================================================
   HEADER
========================================================= */

.sa-report-header {
    margin-bottom: 25px;
    padding: 38px 40px;
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            #164734 0%,
            #205e48 55%,
            #2f8f75 100%
        );
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(22, 71, 52, 0.16);
}

.sa-report-header-label {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.sa-report-header h1 {
    margin: 18px 0 10px;
    color: #ffffff;
    font-size: 39px;
    font-weight: 700;
    line-height: 1.2;
}

.sa-report-header p {
    max-width: 760px;
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.7;
}

.sa-report-header small {
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
}

/* =========================================================
   MAIN STATISTICS
========================================================= */

.sa-report-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 17px;
    margin-bottom: 32px;
}

.sa-report-stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
    min-height: 115px;
    padding: 22px;
    border: 1px solid #edf2ef;
    border-radius: 21px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(22, 71, 52, 0.07);
    transition: 0.25s ease;
}

.sa-report-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 34px rgba(22, 71, 52, 0.1);
}

.sa-report-stat-icon {
    display: flex;
    flex: 0 0 51px;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 51px;
    border-radius: 16px;
    background: #edf6f1;
    font-size: 25px;
}

.sa-report-stat-content {
    min-width: 0;
}

.sa-report-stat-content span {
    display: block;
    overflow: hidden;
    margin-bottom: 5px;
    color: #738078;
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
}

.sa-report-stat-content strong {
    display: block;
    color: #164734;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.sa-report-stat-attention {
    border-color: #f2ddad;
    background: #fffaf0;
}

.sa-report-stat-attention .sa-report-stat-icon {
    background: #fff0cb;
}

/* =========================================================
   SECTIONS
========================================================= */

.sa-report-section {
    margin-top: 32px;
}

.sa-report-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 25px;
    margin-bottom: 17px;
}

.sa-report-section-label {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    background: #e8f3ee;
    color: #2f8f75;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.sa-report-section-heading h2 {
    margin: 11px 0 5px;
    color: #164734;
    font-size: 25px;
    font-weight: 700;
}

.sa-report-section-heading p {
    margin: 0;
    color: #7a857f;
    font-size: 13px;
}

/* =========================================================
   APPOINTMENT CARDS
========================================================= */

.sa-report-appointment-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
}

.sa-report-appointment-card {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 105px;
    padding: 22px;
    border: 1px solid #edf2ef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(22, 71, 52, 0.06);
}

.sa-report-appointment-icon {
    display: flex;
    flex: 0 0 47px;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border-radius: 15px;
    font-size: 23px;
}

.sa-report-appointment-card span {
    display: block;
    margin-bottom: 5px;
    color: #718078;
    font-size: 12px;
    font-weight: 500;
}

.sa-report-appointment-card strong {
    display: block;
    color: #164734;
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
}

.sa-report-appointment-pending .sa-report-appointment-icon {
    background: #fff4cf;
}

.sa-report-appointment-approved .sa-report-appointment-icon {
    background: #e4f5ec;
}

.sa-report-appointment-completed .sa-report-appointment-icon {
    background: #e8effb;
}

.sa-report-appointment-cancelled .sa-report-appointment-icon {
    background: #fbe9e7;
}

/* =========================================================
   SUPPORT LINK
========================================================= */

.sa-report-support-link {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: #2f8f75;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.sa-report-support-link:hover {
    color: #164734;
}

/* =========================================================
   TABLE
========================================================= */

.sa-report-table-card {
    overflow: hidden;
    border: 1px solid #edf2ef;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(22, 71, 52, 0.07);
}

.sa-report-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.sa-report-table {
    width: 100%;
    min-width: 1150px;
    margin: 0;
    border-collapse: collapse;
}

.sa-report-table thead {
    background: #edf5f1;
}

.sa-report-table thead th {
    padding: 16px 15px;
    border: none;
    color: #164734;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.sa-report-table tbody td {
    padding: 15px;
    border-bottom: 1px solid #edf1ef;
    color: #536158;
    font-size: 12px;
    vertical-align: middle;
    white-space: nowrap;
}

.sa-report-table tbody tr:last-child td {
    border-bottom: none;
}

.sa-report-table tbody tr:hover {
    background: #fafcfb;
}

.sa-report-student-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.sa-report-student-avatar {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #dff0e8;
    color: #164734;
    font-size: 14px;
    font-weight: 700;
}

.sa-report-student-cell strong {
    display: block;
    color: #2d4138;
    font-size: 12px;
    font-weight: 600;
}

.sa-report-student-cell small {
    display: block;
    margin-top: 2px;
    color: #8a948e;
    font-size: 10px;
}

.sa-report-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 20px;
    background: #f0f5f2;
    color: #365d4c;
    font-size: 10px;
    font-weight: 600;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.sa-report-empty {
    padding: 65px 25px;
    text-align: center;
}

.sa-report-empty-icon {
    margin-bottom: 13px;
    font-size: 44px;
}

.sa-report-empty h3 {
    margin: 0 0 8px;
    color: #164734;
    font-size: 20px;
    font-weight: 700;
}

.sa-report-empty p {
    margin: 0;
    color: #7b8780;
    font-size: 13px;
}

/* =========================================================
   FOOTER
========================================================= */

.sa-report-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 35px;
    padding: 20px 0 5px;
    border-top: 1px solid #dfe7e2;
    color: #849088;
    font-size: 11px;
}

.sa-report-footer p {
    margin: 0;
}

.sa-report-footer span {
    text-align: right;
}

/* =========================================================
   RESPONSIVE TABLET
========================================================= */

@media (max-width: 1150px) {

    .sa-report-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sa-report-appointment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media (max-width: 750px) {

    .sa-report-page {
        padding: 22px;
    }

    .sa-report-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .sa-report-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .sa-report-header {
        padding: 30px 24px;
        border-radius: 23px;
    }

    .sa-report-header h1 {
        font-size: 31px;
    }

    .sa-report-stat-grid {
        grid-template-columns: 1fr;
    }

    .sa-report-appointment-grid {
        grid-template-columns: 1fr;
    }

    .sa-report-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .sa-report-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .sa-report-footer span {
        text-align: left;
    }
}

/* =========================================================
   PRINT REPORT
========================================================= */

@media print {

    .sa-report-body {
        background: #ffffff;
        color: #000000;
    }

    .sa-report-page {
        padding: 0;
    }

    .sa-report-topbar,
    .sa-report-support-link {
        display: none !important;
    }

    .sa-report-header {
        border: 1px solid #cccccc;
        background: #ffffff;
        color: #000000;
        box-shadow: none;
    }

    .sa-report-header-label {
        border: 1px solid #cccccc;
        background: #ffffff;
        color: #000000;
    }

    .sa-report-header h1,
    .sa-report-header p,
    .sa-report-header small {
        color: #000000;
    }

    .sa-report-stat-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .sa-report-stat-card,
    .sa-report-appointment-card,
    .sa-report-table-card {
        box-shadow: none;
    }

    .sa-report-stat-card:hover {
        transform: none;
    }

    .sa-report-table {
        min-width: 100%;
    }

    .sa-report-table thead th,
    .sa-report-table tbody td {
        padding: 8px;
        color: #000000;
        font-size: 8px;
        white-space: normal;
    }

    .sa-report-footer {
        color: #000000;
    }
}

/* =========================================================
   SUPER ADMIN SETTINGS PAGE
   UNIQUE PREFIX: sa-settings-
========================================================= */

.sa-settings-body {
    margin: 0;
    min-height: 100vh;
    background: #f4f7f5;
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.sa-settings-body *,
.sa-settings-body *::before,
.sa-settings-body *::after {
    box-sizing: border-box;
}

.sa-settings-page {
    min-height: 100vh;
    padding: 38px;
}

.sa-settings-container {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}

/* Top bar */

.sa-settings-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.sa-settings-logo {
    color: #164734;
    font-size: 27px;
    font-weight: 700;
    text-decoration: none;
}

.sa-settings-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 20px;
    border: 1px solid #164734;
    border-radius: 30px;
    background: transparent;
    color: #164734;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.25s ease;
}

.sa-settings-back-btn:hover {
    background: #164734;
    color: #ffffff;
}

/* Header */

.sa-settings-header {
    margin-bottom: 25px;
    padding: 36px 40px;
    border-radius: 28px;
    background: linear-gradient(
        135deg,
        #164734,
        #2f8f75
    );
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(22, 71, 52, 0.15);
}

.sa-settings-header-label {
    display: inline-flex;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.sa-settings-header h1 {
    margin: 18px 0 8px;
    color: #ffffff;
    font-size: 37px;
    font-weight: 700;
}

.sa-settings-header p {
    max-width: 700px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.7;
}

/* Alert */

.sa-settings-alert {
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 500;
}

.sa-settings-alert-success {
    border: 1px solid #b9dfcb;
    background: #eaf8f0;
    color: #216b48;
}

.sa-settings-alert-error {
    border: 1px solid #efc4c0;
    background: #fff0ef;
    color: #a13a32;
}

/* Form */

.sa-settings-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.sa-settings-card {
    padding: 28px;
    border: 1px solid #e7eeea;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(22, 71, 52, 0.07);
}

.sa-settings-card-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.sa-settings-card-icon {
    display: flex;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: #e9f4ee;
    font-size: 24px;
}

.sa-settings-card-heading h2 {
    margin: 0 0 4px;
    color: #164734;
    font-size: 20px;
    font-weight: 700;
}

.sa-settings-card-heading p {
    margin: 0;
    color: #7c8982;
    font-size: 12px;
}

/* Input grid */

.sa-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.sa-settings-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sa-settings-field-full {
    grid-column: 1 / -1;
}

.sa-settings-field label {
    color: #344b41;
    font-size: 12px;
    font-weight: 600;
}

.sa-settings-field input {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid #d9e4de;
    border-radius: 12px;
    outline: none;
    background: #fbfcfb;
    color: #2f4139;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    transition: 0.2s ease;
}

.sa-settings-field input:focus {
    border-color: #2f8f75;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(47, 143, 117, 0.1);
}

/* Toggle controls */

.sa-settings-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sa-settings-toggle-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    min-height: 78px;
    padding: 17px 19px;
    border: 1px solid #e6ede9;
    border-radius: 16px;
    background: #fafcfb;
    cursor: pointer;
}

.sa-settings-toggle-row div {
    padding-right: 70px;
}

.sa-settings-toggle-row strong {
    display: block;
    margin-bottom: 4px;
    color: #284137;
    font-size: 13px;
}

.sa-settings-toggle-row div > span {
    display: block;
    color: #7c8982;
    font-size: 11px;
    line-height: 1.5;
}

.sa-settings-toggle-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sa-settings-switch {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 47px;
    height: 26px;
    border-radius: 30px;
    background: #cfd8d3;
    transform: translateY(-50%);
    transition: 0.25s ease;
}

.sa-settings-switch::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    transition: 0.25s ease;
}

.sa-settings-toggle-row input:checked
+ .sa-settings-switch {
    background: #2f8f75;
}

.sa-settings-toggle-row input:checked
+ .sa-settings-switch::before {
    transform: translateX(21px);
}

/* Actions */

.sa-settings-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.sa-settings-cancel-btn,
.sa-settings-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 22px;
    border-radius: 30px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.sa-settings-cancel-btn {
    border: 1px solid #b8c5be;
    background: #ffffff;
    color: #53665d;
}

.sa-settings-save-btn {
    border: none;
    background: #164734;
    color: #ffffff;
}

.sa-settings-save-btn:hover {
    background: #2f8f75;
}

/* Mobile */

@media (max-width: 700px) {

    .sa-settings-page {
        padding: 22px;
    }

    .sa-settings-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .sa-settings-header {
        padding: 30px 24px;
    }

    .sa-settings-header h1 {
        font-size: 31px;
    }

    .sa-settings-form-grid {
        grid-template-columns: 1fr;
    }

    .sa-settings-field-full {
        grid-column: auto;
    }

    .sa-settings-toggle-row {
        min-height: 95px;
    }

    .sa-settings-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .sa-settings-cancel-btn,
    .sa-settings-save-btn {
        width: 100%;
    }
}

/* =========================================================
   SUPER ADMIN - MANAGE ADMINISTRATORS
   UNIQUE PREFIX: sa-admins-
========================================================= */

.sa-admins-body {
    margin: 0;
    min-height: 100vh;
    background: #f4f7f5;
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.sa-admins-body *,
.sa-admins-body *::before,
.sa-admins-body *::after {
    box-sizing: border-box;
}

.sa-admins-page {
    min-height: 100vh;
    padding: 36px;
}

.sa-admins-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Top navigation */

.sa-admins-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.sa-admins-logo {
    color: #164734;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-decoration: none;
}

.sa-admins-logo:hover {
    color: #2f8f75;
}

.sa-admins-dashboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 9px 19px;
    border: 1px solid #164734;
    border-radius: 30px;
    background: transparent;
    color: #164734;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.25s ease;
}

.sa-admins-dashboard-btn:hover {
    background: #164734;
    color: #ffffff;
}

/* Header */

.sa-admins-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 24px;
    padding: 34px 38px;
    border-radius: 26px;
    background:
        linear-gradient(
            135deg,
            #164734 0%,
            #205d47 55%,
            #2f8f75 100%
        );
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(22, 71, 52, 0.14);
}

.sa-admins-header-label {
    display: inline-flex;
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.sa-admins-header h1 {
    margin: 16px 0 8px;
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
}

.sa-admins-header p {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.7;
}

.sa-admins-header-icon {
    display: flex;
    flex: 0 0 80px;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 38px;
}

/* Action bar */

.sa-admins-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 20px;
    padding: 20px 24px;
    border: 1px solid #e5ece8;
    border-radius: 19px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(22, 71, 52, 0.05);
}

.sa-admins-action-bar h2 {
    margin: 0 0 4px;
    color: #164734;
    font-size: 18px;
    font-weight: 700;
}

.sa-admins-action-bar p {
    margin: 0;
    color: #7b8780;
    font-size: 11px;
}

.sa-admins-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 10px 19px;
    border-radius: 30px;
    background: #164734;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: 0.25s ease;
}

.sa-admins-add-btn span {
    font-size: 18px;
    line-height: 1;
}

.sa-admins-add-btn:hover {
    background: #2f8f75;
    color: #ffffff;
    transform: translateY(-1px);
}

/* Alerts */

.sa-admins-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px 17px;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 500;
}

.sa-admins-alert > span {
    display: flex;
    flex: 0 0 25px;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-weight: 700;
}

.sa-admins-alert-success {
    border: 1px solid #bae1cd;
    background: #eaf8f0;
    color: #216b48;
}

.sa-admins-alert-success > span {
    background: #ccebd9;
}

.sa-admins-alert-error {
    border: 1px solid #efc5c1;
    background: #fff0ef;
    color: #a13a32;
}

.sa-admins-alert-error > span {
    background: #f5d5d2;
}

/* Table card */

.sa-admins-table-card {
    overflow: hidden;
    border: 1px solid #e5ece8;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(22, 71, 52, 0.07);
}

.sa-admins-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.sa-admins-table {
    width: 100%;
    min-width: 850px;
    margin: 0;
    border-collapse: collapse;
}

.sa-admins-table thead {
    background: #edf5f1;
}

.sa-admins-table thead th {
    padding: 15px 18px;
    border: none;
    color: #164734;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.sa-admins-table tbody td {
    padding: 15px 18px;
    border-bottom: 1px solid #edf1ef;
    color: #526158;
    font-size: 12px;
    vertical-align: middle;
}

.sa-admins-table tbody tr:last-child td {
    border-bottom: none;
}

.sa-admins-table tbody tr:hover {
    background: #fafcfb;
}

.sa-admins-id {
    color: #718078;
    font-size: 11px;
    font-weight: 600;
}

/* Administrator cell */

.sa-admins-user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sa-admins-avatar {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #dff0e8;
    color: #164734;
    font-size: 15px;
    font-weight: 700;
}

.sa-admins-user-cell strong {
    display: block;
    color: #2b4137;
    font-size: 12px;
    font-weight: 600;
}

.sa-admins-user-cell small {
    display: block;
    margin-top: 3px;
    color: #8a958f;
    font-size: 10px;
}

/* Role badges */

.sa-admins-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.sa-admins-role-super {
    background: #e7eefb;
    color: #315b9c;
}

.sa-admins-role-admin {
    background: #e7f5ed;
    color: #287052;
}

/* Action buttons */

.sa-admins-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.sa-admins-edit-btn,
.sa-admins-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 20px;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s ease;
}

.sa-admins-edit-btn {
    border: 1px solid #2f8f75;
    background: #ffffff;
    color: #2f8f75;
}

.sa-admins-edit-btn:hover {
    background: #2f8f75;
    color: #ffffff;
}

.sa-admins-delete-btn {
    border: 1px solid #d7645b;
    background: #ffffff;
    color: #c24e45;
}

.sa-admins-delete-btn:hover {
    background: #d7645b;
    color: #ffffff;
}

.sa-admins-delete-disabled,
.sa-admins-delete-disabled:hover {
    border-color: #d9dfdc;
    background: #f1f3f2;
    color: #a1aaa5;
    cursor: not-allowed;
}

/* Empty state */

.sa-admins-empty {
    padding: 55px 20px;
    text-align: center;
}

.sa-admins-empty-icon {
    margin-bottom: 12px;
    font-size: 42px;
}

.sa-admins-empty h3 {
    margin: 0 0 7px;
    color: #164734;
    font-size: 19px;
    font-weight: 700;
}

.sa-admins-empty p {
    margin: 0 0 18px;
    color: #7d8982;
    font-size: 12px;
}

.sa-admins-empty-btn {
    display: inline-flex;
    padding: 9px 18px;
    border-radius: 25px;
    background: #164734;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

/* Footer */

.sa-admins-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #dfe7e2;
    color: #89938e;
    font-size: 10px;
}

.sa-admins-footer p {
    margin: 0;
}

/* Responsive */

@media (max-width: 750px) {

    .sa-admins-page {
        padding: 20px;
    }

    .sa-admins-topbar,
    .sa-admins-action-bar,
    .sa-admins-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .sa-admins-header {
        padding: 28px 23px;
    }

    .sa-admins-header h1 {
        font-size: 28px;
    }

    .sa-admins-header-icon {
        display: none;
    }

    .sa-admins-add-btn {
        width: 100%;
    }
}

/* =========================================================
   SUPER ADMIN - EDIT ADMINISTRATOR
   UNIQUE PREFIX: sa-edit-admin-
========================================================= */

.sa-edit-admin-body {
    margin: 0;
    min-height: 100vh;
    background: #f4f7f5;
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.sa-edit-admin-body *,
.sa-edit-admin-body *::before,
.sa-edit-admin-body *::after {
    box-sizing: border-box;
}

.sa-edit-admin-page {
    min-height: 100vh;
    padding: 36px;
}

.sa-edit-admin-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Top bar */

.sa-edit-admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.sa-edit-admin-logo {
    color: #164734;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-decoration: none;
}

.sa-edit-admin-logo:hover {
    color: #2f8f75;
}

.sa-edit-admin-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 9px 19px;
    border: 1px solid #164734;
    border-radius: 30px;
    background: transparent;
    color: #164734;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.25s ease;
}

.sa-edit-admin-back-btn:hover {
    background: #164734;
    color: #ffffff;
}

/* Header */

.sa-edit-admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 22px;
    padding: 32px 36px;
    border-radius: 26px;
    background:
        linear-gradient(
            135deg,
            #164734 0%,
            #205d47 55%,
            #2f8f75 100%
        );
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(22, 71, 52, 0.14);
}

.sa-edit-admin-header-label {
    display: inline-flex;
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.sa-edit-admin-header h1 {
    margin: 16px 0 8px;
    color: #ffffff;
    font-size: 33px;
    font-weight: 700;
}

.sa-edit-admin-header p {
    max-width: 610px;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.7;
}

.sa-edit-admin-header-icon {
    display: flex;
    flex: 0 0 72px;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 33px;
}

/* Card */

.sa-edit-admin-card {
    padding: 29px;
    border: 1px solid #e5ece8;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(22, 71, 52, 0.07);
}

.sa-edit-admin-card-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9efec;
}

.sa-edit-admin-avatar {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #dff0e8;
    color: #164734;
    font-size: 18px;
    font-weight: 700;
}

.sa-edit-admin-card-heading h2 {
    margin: 0 0 3px;
    color: #164734;
    font-size: 20px;
    font-weight: 700;
}

.sa-edit-admin-card-heading p {
    margin: 0;
    color: #849088;
    font-size: 11px;
}

/* Alerts */

.sa-edit-admin-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 13px 16px;
    border: 1px solid #efc5c1;
    border-radius: 13px;
    background: #fff0ef;
    color: #a13a32;
    font-size: 12px;
    font-weight: 500;
}

.sa-edit-admin-alert > span {
    display: flex;
    flex: 0 0 25px;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #f5d5d2;
    font-weight: 700;
}

.sa-edit-admin-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #cbdced;
    border-radius: 13px;
    background: #eef6fd;
    color: #355f80;
}

.sa-edit-admin-notice > span {
    font-size: 18px;
}

.sa-edit-admin-notice strong {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
}

.sa-edit-admin-notice p {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
}

/* Form */

.sa-edit-admin-form {
    width: 100%;
}

.sa-edit-admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.sa-edit-admin-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sa-edit-admin-field label {
    color: #344b41;
    font-size: 12px;
    font-weight: 600;
}

.sa-edit-admin-field label span {
    margin-left: 4px;
    color: #8d9892;
    font-size: 10px;
    font-weight: 400;
}

.sa-edit-admin-field input,
.sa-edit-admin-field select {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid #d9e4de;
    border-radius: 12px;
    outline: none;
    background: #fbfcfb;
    color: #2f4139;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    transition: 0.2s ease;
}

.sa-edit-admin-field input:focus,
.sa-edit-admin-field select:focus {
    border-color: #2f8f75;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(47, 143, 117, 0.1);
}

.sa-edit-admin-field select:disabled {
    cursor: not-allowed;
    background: #edf1ef;
    color: #808c85;
}

.sa-edit-admin-field small {
    color: #89948e;
    font-size: 10px;
    line-height: 1.5;
}

/* Password */

.sa-edit-admin-password-wrap {
    position: relative;
}

.sa-edit-admin-password-wrap input {
    padding-right: 66px;
}

.sa-edit-admin-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    min-width: 50px;
    padding: 6px 9px;
    border: none;
    border-radius: 20px;
    background: #e8f3ee;
    color: #2f8f75;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    transform: translateY(-50%);
}

/* Actions */

.sa-edit-admin-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 11px;
    margin-top: 27px;
    padding-top: 21px;
    border-top: 1px solid #e9efec;
}

.sa-edit-admin-cancel-btn,
.sa-edit-admin-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 21px;
    border-radius: 30px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s ease;
}

.sa-edit-admin-cancel-btn {
    border: 1px solid #b8c5be;
    background: #ffffff;
    color: #586a60;
}

.sa-edit-admin-cancel-btn:hover {
    border-color: #84938b;
    color: #344b41;
}

.sa-edit-admin-save-btn {
    border: none;
    background: #164734;
    color: #ffffff;
}

.sa-edit-admin-save-btn:hover {
    background: #2f8f75;
    transform: translateY(-1px);
}

/* Footer */

.sa-edit-admin-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 26px;
    padding-top: 17px;
    border-top: 1px solid #dfe7e2;
    color: #89938e;
    font-size: 10px;
}

.sa-edit-admin-footer p {
    margin: 0;
}

/* Mobile */

@media (max-width: 700px) {

    .sa-edit-admin-page {
        padding: 20px;
    }

    .sa-edit-admin-topbar,
    .sa-edit-admin-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .sa-edit-admin-header {
        padding: 27px 23px;
    }

    .sa-edit-admin-header h1 {
        font-size: 28px;
    }

    .sa-edit-admin-header-icon {
        display: none;
    }

    .sa-edit-admin-card {
        padding: 22px;
    }

    .sa-edit-admin-form-grid {
        grid-template-columns: 1fr;
    }

    .sa-edit-admin-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .sa-edit-admin-cancel-btn,
    .sa-edit-admin-save-btn {
        width: 100%;
    }
}

/* =========================================================
   SUPER ADMIN - ADD ADMINISTRATOR
   UNIQUE PREFIX: sa-add-admin-
========================================================= */

.sa-add-admin-body {
    margin: 0;
    min-height: 100vh;
    background: #f4f7f5;
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.sa-add-admin-body *,
.sa-add-admin-body *::before,
.sa-add-admin-body *::after {
    box-sizing: border-box;
}

.sa-add-admin-page {
    min-height: 100vh;
    padding: 36px;
}

.sa-add-admin-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Top bar */

.sa-add-admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.sa-add-admin-logo {
    color: #164734;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-decoration: none;
}

.sa-add-admin-logo:hover {
    color: #2f8f75;
}

.sa-add-admin-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 9px 19px;
    border: 1px solid #164734;
    border-radius: 30px;
    background: transparent;
    color: #164734;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.25s ease;
}

.sa-add-admin-back-btn:hover {
    background: #164734;
    color: #ffffff;
}

/* Header */

.sa-add-admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 22px;
    padding: 32px 36px;
    border-radius: 26px;
    background:
        linear-gradient(
            135deg,
            #164734 0%,
            #205d47 55%,
            #2f8f75 100%
        );
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(22, 71, 52, 0.14);
}

.sa-add-admin-header-label {
    display: inline-flex;
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.sa-add-admin-header h1 {
    margin: 16px 0 8px;
    color: #ffffff;
    font-size: 33px;
    font-weight: 700;
}

.sa-add-admin-header p {
    max-width: 610px;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.7;
}

.sa-add-admin-header-icon {
    display: flex;
    flex: 0 0 72px;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 33px;
}

/* Main card */

.sa-add-admin-card {
    padding: 29px;
    border: 1px solid #e5ece8;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(22, 71, 52, 0.07);
}

.sa-add-admin-card-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9efec;
}

.sa-add-admin-card-icon {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: #dff0e8;
    color: #164734;
    font-size: 24px;
    font-weight: 600;
}

.sa-add-admin-card-heading h2 {
    margin: 0 0 3px;
    color: #164734;
    font-size: 20px;
    font-weight: 700;
}

.sa-add-admin-card-heading p {
    margin: 0;
    color: #849088;
    font-size: 11px;
}

/* Error alert */

.sa-add-admin-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 13px 16px;
    border: 1px solid #efc5c1;
    border-radius: 13px;
    background: #fff0ef;
    color: #a13a32;
    font-size: 12px;
    font-weight: 500;
}

.sa-add-admin-alert > span {
    display: flex;
    flex: 0 0 25px;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #f5d5d2;
    font-weight: 700;
}

/* Form */

.sa-add-admin-form {
    width: 100%;
}

.sa-add-admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.sa-add-admin-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sa-add-admin-field label {
    color: #344b41;
    font-size: 12px;
    font-weight: 600;
}

.sa-add-admin-field input,
.sa-add-admin-field select {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid #d9e4de;
    border-radius: 12px;
    outline: none;
    background: #fbfcfb;
    color: #2f4139;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    transition: 0.2s ease;
}

.sa-add-admin-field input:focus,
.sa-add-admin-field select:focus {
    border-color: #2f8f75;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(47, 143, 117, 0.1);
}

.sa-add-admin-field small {
    color: #89948e;
    font-size: 10px;
    line-height: 1.5;
}

/* Password */

.sa-add-admin-password-wrap {
    position: relative;
}

.sa-add-admin-password-wrap input {
    padding-right: 66px;
}

.sa-add-admin-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    min-width: 50px;
    padding: 6px 9px;
    border: none;
    border-radius: 20px;
    background: #e8f3ee;
    color: #2f8f75;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    transform: translateY(-50%);
}

.sa-add-admin-password-toggle:hover {
    background: #d9ece3;
}

/* Role information */

.sa-add-admin-role-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
}

.sa-add-admin-role-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 15px;
    border: 1px solid #e5ece8;
    border-radius: 14px;
    background: #fafcfb;
}

.sa-add-admin-role-item > span {
    font-size: 20px;
}

.sa-add-admin-role-item strong {
    display: block;
    margin-bottom: 4px;
    color: #2d463b;
    font-size: 11px;
}

.sa-add-admin-role-item p {
    margin: 0;
    color: #7c8982;
    font-size: 10px;
    line-height: 1.5;
}

/* Form actions */

.sa-add-admin-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 11px;
    margin-top: 27px;
    padding-top: 21px;
    border-top: 1px solid #e9efec;
}

.sa-add-admin-cancel-btn,
.sa-add-admin-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 21px;
    border-radius: 30px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s ease;
}

.sa-add-admin-cancel-btn {
    border: 1px solid #b8c5be;
    background: #ffffff;
    color: #586a60;
}

.sa-add-admin-cancel-btn:hover {
    border-color: #84938b;
    color: #344b41;
}

.sa-add-admin-submit-btn {
    border: none;
    background: #164734;
    color: #ffffff;
}

.sa-add-admin-submit-btn:hover {
    background: #2f8f75;
    transform: translateY(-1px);
}

/* Footer */

.sa-add-admin-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 26px;
    padding-top: 17px;
    border-top: 1px solid #dfe7e2;
    color: #89938e;
    font-size: 10px;
}

.sa-add-admin-footer p {
    margin: 0;
}

/* Responsive */

@media (max-width: 700px) {

    .sa-add-admin-page {
        padding: 20px;
    }

    .sa-add-admin-topbar,
    .sa-add-admin-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .sa-add-admin-header {
        padding: 27px 23px;
    }

    .sa-add-admin-header h1 {
        font-size: 28px;
    }

    .sa-add-admin-header-icon {
        display: none;
    }

    .sa-add-admin-card {
        padding: 22px;
    }

    .sa-add-admin-form-grid,
    .sa-add-admin-role-info {
        grid-template-columns: 1fr;
    }

    .sa-add-admin-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .sa-add-admin-cancel-btn,
    .sa-add-admin-submit-btn {
        width: 100%;
    }
}

/* =========================================================
   SUPER ADMIN DASHBOARD
   UNIQUE PREFIX: sa-dashboard-
========================================================= */

.sa-dashboard-body {
    margin: 0;
    min-height: 100vh;
    background: #f3f7f5;
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.sa-dashboard-body *,
.sa-dashboard-body *::before,
.sa-dashboard-body *::after {
    box-sizing: border-box;
}

.sa-dashboard-page {
    min-height: 100vh;
    padding: 34px;
}

.sa-dashboard-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}

/* =========================================================
   TOP BAR
========================================================= */

.sa-dashboard-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 27px;
}

.sa-dashboard-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #164734;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-decoration: none;
}

.sa-dashboard-logo:hover {
    color: #2f8f75;
}

.sa-dashboard-logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #164734;
    color: #ffffff;
    font-size: 24px;
    font-weight: 500;
}

.sa-dashboard-top-actions {
    display: flex;
    align-items: center;
    gap: 17px;
}

.sa-dashboard-account {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sa-dashboard-account-icon {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #dcefe6;
    color: #164734;
    font-size: 14px;
    font-weight: 700;
}

.sa-dashboard-account strong {
    display: block;
    color: #294238;
    font-size: 11px;
    font-weight: 600;
}

.sa-dashboard-account span {
    display: block;
    margin-top: 2px;
    color: #88938d;
    font-size: 9px;
}

.sa-dashboard-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 37px;
    padding: 8px 17px;
    border: 1px solid #d7655c;
    border-radius: 25px;
    background: #ffffff;
    color: #c34e45;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s ease;
}

.sa-dashboard-logout-btn:hover {
    background: #d7655c;
    color: #ffffff;
}

/* =========================================================
   HERO
========================================================= */

.sa-dashboard-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
    margin-bottom: 23px;
    padding: 36px 40px;
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            #164734 0%,
            #205e48 55%,
            #2f8f75 100%
        );
    color: #ffffff;
    box-shadow: 0 17px 40px rgba(22, 71, 52, 0.16);
}

.sa-dashboard-hero-content {
    max-width: 760px;
}

.sa-dashboard-hero-label {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.sa-dashboard-hero h1 {
    margin: 17px 0 9px;
    color: #ffffff;
    font-size: 35px;
    font-weight: 700;
    line-height: 1.25;
}

.sa-dashboard-hero p {
    max-width: 690px;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.7;
}

.sa-dashboard-hero-graphic {
    display: flex;
    flex: 0 0 92px;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.13);
}

.sa-dashboard-hero-graphic span {
    font-size: 46px;
}

/* =========================================================
   STATISTICS
========================================================= */

.sa-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.sa-dashboard-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 103px;
    padding: 20px;
    border: 1px solid #e6ede9;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 9px 25px rgba(22, 71, 52, 0.06);
    transition: 0.25s ease;
}

.sa-dashboard-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(22, 71, 52, 0.09);
}

.sa-dashboard-stat-icon {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #e8f3ee;
    font-size: 23px;
}

.sa-dashboard-stat-card span {
    display: block;
    margin-bottom: 4px;
    color: #7b8881;
    font-size: 11px;
    font-weight: 500;
}

.sa-dashboard-stat-card strong {
    display: block;
    color: #164734;
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
}

.sa-dashboard-stat-alert {
    border-color: #efdaa9;
    background: #fffaf0;
}

.sa-dashboard-stat-alert .sa-dashboard-stat-icon {
    background: #fff0ca;
}

/* =========================================================
   SECTION HEADING
========================================================= */

.sa-dashboard-management {
    margin-top: 5px;
}

.sa-dashboard-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 18px;
}

.sa-dashboard-section-heading > div > span {
    display: inline-flex;
    padding: 5px 11px;
    border-radius: 20px;
    background: #e7f2ed;
    color: #2f8f75;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.sa-dashboard-section-heading h2 {
    margin: 10px 0 5px;
    color: #164734;
    font-size: 24px;
    font-weight: 700;
}

.sa-dashboard-section-heading p {
    margin: 0;
    color: #7c8982;
    font-size: 11px;
}

/* =========================================================
   MENU CARDS
========================================================= */

.sa-dashboard-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.sa-dashboard-menu-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 135px;
    padding: 22px 55px 22px 22px;
    border: 1px solid #e5ece8;
    border-radius: 21px;
    background: #ffffff;
    color: inherit;
    box-shadow: 0 10px 27px rgba(22, 71, 52, 0.06);
    text-decoration: none;
    transition: 0.25s ease;
}

.sa-dashboard-menu-card:hover {
    border-color: #bcd7ca;
    transform: translateY(-3px);
    box-shadow: 0 15px 34px rgba(22, 71, 52, 0.1);
}

.sa-dashboard-menu-icon {
    display: flex;
    flex: 0 0 60px;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 19px;
    font-size: 29px;
}

.sa-dashboard-menu-admin {
    background: #e5f2ec;
}

.sa-dashboard-menu-student {
    background: #e7effb;
}

.sa-dashboard-menu-report {
    background: #fff2d8;
}

.sa-dashboard-menu-settings {
    background: #f0eafb;
}

.sa-dashboard-menu-content {
    min-width: 0;
}

.sa-dashboard-menu-content h3 {
    margin: 0 0 7px;
    color: #214236;
    font-size: 15px;
    font-weight: 700;
}

.sa-dashboard-menu-content p {
    margin: 0;
    color: #7a8780;
    font-size: 10px;
    line-height: 1.6;
}

.sa-dashboard-menu-arrow {
    position: absolute;
    top: 50%;
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #edf4f0;
    color: #2f8f75;
    font-size: 15px;
    transform: translateY(-50%);
    transition: 0.2s ease;
}

.sa-dashboard-menu-card:hover
.sa-dashboard-menu-arrow {
    background: #2f8f75;
    color: #ffffff;
    transform: translateY(-50%) translateX(3px);
}

/* =========================================================
   FOOTER
========================================================= */

.sa-dashboard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 29px;
    padding-top: 17px;
    border-top: 1px solid #dfe7e2;
    color: #8a958f;
    font-size: 9px;
}

.sa-dashboard-footer p {
    margin: 0;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .sa-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .sa-dashboard-page {
        padding: 20px;
    }

    .sa-dashboard-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .sa-dashboard-top-actions {
        width: 100%;
        justify-content: space-between;
    }

    .sa-dashboard-hero {
        padding: 29px 24px;
    }

    .sa-dashboard-hero h1 {
        font-size: 29px;
    }

    .sa-dashboard-hero-graphic {
        display: none;
    }

    .sa-dashboard-stats,
    .sa-dashboard-menu-grid {
        grid-template-columns: 1fr;
    }

    .sa-dashboard-menu-card {
        min-height: 125px;
    }

    .sa-dashboard-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 430px) {

    .sa-dashboard-account {
        display: none;
    }

    .sa-dashboard-top-actions {
        justify-content: flex-end;
    }

    .sa-dashboard-stat-card {
        min-height: 95px;
    }

    .sa-dashboard-menu-card {
        align-items: flex-start;
        padding: 20px 50px 20px 19px;
    }

    .sa-dashboard-menu-icon {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
        font-size: 25px;
    }
}

/* =========================================================
   SUPER ADMIN - MANAGE STUDENTS
   UNIQUE PREFIX: sa-students-
========================================================= */

.sa-students-body {
    margin: 0;
    min-height: 100vh;
    background: #f4f7f5;
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.sa-students-body *,
.sa-students-body *::before,
.sa-students-body *::after {
    box-sizing: border-box;
}

.sa-students-page {
    min-height: 100vh;
    padding: 36px;
}

.sa-students-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

/* Top bar */

.sa-students-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.sa-students-logo {
    color: #164734;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-decoration: none;
}

.sa-students-logo:hover {
    color: #2f8f75;
}

.sa-students-dashboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 9px 19px;
    border: 1px solid #164734;
    border-radius: 30px;
    background: transparent;
    color: #164734;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.25s ease;
}

.sa-students-dashboard-btn:hover {
    background: #164734;
    color: #ffffff;
}

/* Header */

.sa-students-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 23px;
    padding: 34px 38px;
    border-radius: 26px;
    background:
        linear-gradient(
            135deg,
            #164734 0%,
            #205d47 55%,
            #2f8f75 100%
        );
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(22, 71, 52, 0.14);
}

.sa-students-header-label {
    display: inline-flex;
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.sa-students-header h1 {
    margin: 16px 0 8px;
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
}

.sa-students-header p {
    max-width: 700px;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.7;
}

.sa-students-header-icon {
    display: flex;
    flex: 0 0 80px;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 38px;
}

/* Toolbar */

.sa-students-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 19px;
    padding: 19px 22px;
    border: 1px solid #e5ece8;
    border-radius: 19px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(22, 71, 52, 0.05);
}

.sa-students-toolbar h2 {
    margin: 0 0 4px;
    color: #164734;
    font-size: 18px;
    font-weight: 700;
}

.sa-students-toolbar p {
    margin: 0;
    color: #7b8780;
    font-size: 11px;
}

.sa-students-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sa-students-search-box {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 320px;
    min-height: 41px;
    padding: 0 13px;
    border: 1px solid #d9e4de;
    border-radius: 30px;
    background: #fbfcfb;
    transition: 0.2s ease;
}

.sa-students-search-box:focus-within {
    border-color: #2f8f75;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(47, 143, 117, 0.1);
}

.sa-students-search-box > span {
    font-size: 13px;
}

.sa-students-search-box input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #33483f;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
}

.sa-students-search-btn,
.sa-students-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    padding: 8px 16px;
    border-radius: 25px;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.sa-students-search-btn {
    border: none;
    background: #164734;
    color: #ffffff;
}

.sa-students-search-btn:hover {
    background: #2f8f75;
}

.sa-students-clear-btn {
    border: 1px solid #bdc9c3;
    background: #ffffff;
    color: #64766c;
}

/* Alerts */

.sa-students-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px 17px;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 500;
}

.sa-students-alert > span {
    display: flex;
    flex: 0 0 25px;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-weight: 700;
}

.sa-students-alert-success {
    border: 1px solid #bae1cd;
    background: #eaf8f0;
    color: #216b48;
}

.sa-students-alert-success > span {
    background: #ccebd9;
}

.sa-students-alert-error {
    border: 1px solid #efc5c1;
    background: #fff0ef;
    color: #a13a32;
}

.sa-students-alert-error > span {
    background: #f5d5d2;
}

/* Table */

.sa-students-table-card {
    overflow: hidden;
    border: 1px solid #e5ece8;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(22, 71, 52, 0.07);
}

.sa-students-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.sa-students-table {
    width: 100%;
    min-width: 1180px;
    margin: 0;
    border-collapse: collapse;
}

.sa-students-table thead {
    background: #edf5f1;
}

.sa-students-table thead th {
    padding: 15px 16px;
    border: none;
    color: #164734;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.sa-students-table tbody td {
    padding: 15px 16px;
    border-bottom: 1px solid #edf1ef;
    color: #526158;
    font-size: 11px;
    vertical-align: middle;
}

.sa-students-table tbody tr:last-child td {
    border-bottom: none;
}

.sa-students-table tbody tr:hover {
    background: #fafcfb;
}

/* Student cell */

.sa-students-user-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.sa-students-avatar {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #dff0e8;
    color: #164734;
    font-size: 15px;
    font-weight: 700;
}

.sa-students-user-cell strong {
    display: block;
    color: #2b4137;
    font-size: 11px;
    font-weight: 600;
}

.sa-students-user-cell small {
    display: block;
    margin-top: 3px;
    color: #8a958f;
    font-size: 9px;
}

.sa-students-number {
    color: #315f4c;
    font-size: 10px;
    font-weight: 600;
}

/* Contact */

.sa-students-contact-cell span {
    display: block;
    color: #43564c;
    font-size: 10px;
}

.sa-students-contact-cell small {
    display: block;
    margin-top: 3px;
    color: #8b9690;
    font-size: 9px;
}

/* Semester */

.sa-students-semester-badge {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 20px;
    background: #e8f1fb;
    color: #3c6595;
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}

/* Advisor */

.sa-students-advisor {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #35604d;
    font-size: 10px;
}

.sa-students-advisor-dot {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3ca36f;
}

.sa-students-unassigned {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 20px;
    background: #fff2df;
    color: #aa6c23;
    font-size: 9px;
    font-weight: 600;
}

/* Action buttons */

.sa-students-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.sa-students-edit-btn,
.sa-students-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    min-height: 31px;
    padding: 6px 11px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s ease;
}

.sa-students-edit-btn {
    border: 1px solid #2f8f75;
    background: #ffffff;
    color: #2f8f75;
}

.sa-students-edit-btn:hover {
    background: #2f8f75;
    color: #ffffff;
}

.sa-students-delete-btn {
    border: 1px solid #d7645b;
    background: #ffffff;
    color: #c24e45;
}

.sa-students-delete-btn:hover {
    background: #d7645b;
    color: #ffffff;
}

/* Empty state */

.sa-students-empty {
    padding: 58px 20px;
    text-align: center;
}

.sa-students-empty-icon {
    margin-bottom: 12px;
    font-size: 42px;
}

.sa-students-empty h3 {
    margin: 0 0 7px;
    color: #164734;
    font-size: 19px;
    font-weight: 700;
}

.sa-students-empty p {
    margin: 0 0 17px;
    color: #7d8982;
    font-size: 11px;
}

.sa-students-empty-btn {
    display: inline-flex;
    padding: 9px 18px;
    border-radius: 25px;
    background: #164734;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

/* Footer */

.sa-students-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #dfe7e2;
    color: #89938e;
    font-size: 9px;
}

.sa-students-footer p {
    margin: 0;
}

/* Responsive */

@media (max-width: 850px) {

    .sa-students-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .sa-students-search-form {
        width: 100%;
        flex-wrap: wrap;
    }

    .sa-students-search-box {
        flex: 1 1 240px;
        width: auto;
    }
}

@media (max-width: 700px) {

    .sa-students-page {
        padding: 20px;
    }

    .sa-students-topbar,
    .sa-students-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .sa-students-header {
        padding: 28px 23px;
    }

    .sa-students-header h1 {
        font-size: 28px;
    }

    .sa-students-header-icon {
        display: none;
    }

    .sa-students-search-btn,
    .sa-students-clear-btn {
        flex: 1;
    }
}

/* =========================================================
   SUPER ADMIN - EDIT STUDENT
   UNIQUE PREFIX: sa-edit-student-
========================================================= */

.sa-edit-student-body {
    margin: 0;
    min-height: 100vh;
    background: #f4f7f5;
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.sa-edit-student-body *,
.sa-edit-student-body *::before,
.sa-edit-student-body *::after {
    box-sizing: border-box;
}

.sa-edit-student-page {
    min-height: 100vh;
    padding: 36px;
}

.sa-edit-student-container {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
}

/* Top bar */

.sa-edit-student-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.sa-edit-student-logo {
    color: #164734;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-decoration: none;
}

.sa-edit-student-logo:hover {
    color: #2f8f75;
}

.sa-edit-student-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 9px 19px;
    border: 1px solid #164734;
    border-radius: 30px;
    background: transparent;
    color: #164734;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.25s ease;
}

.sa-edit-student-back-btn:hover {
    background: #164734;
    color: #ffffff;
}

/* Header */

.sa-edit-student-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 22px;
    padding: 32px 36px;
    border-radius: 26px;
    background: linear-gradient(
        135deg,
        #164734 0%,
        #205d47 55%,
        #2f8f75 100%
    );
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(22, 71, 52, 0.14);
}

.sa-edit-student-header-label {
    display: inline-flex;
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.sa-edit-student-header h1 {
    margin: 16px 0 8px;
    color: #ffffff;
    font-size: 33px;
    font-weight: 700;
}

.sa-edit-student-header p {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.7;
}

.sa-edit-student-header-icon {
    display: flex;
    flex: 0 0 72px;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 34px;
}

/* Card */

.sa-edit-student-card {
    padding: 29px;
    border: 1px solid #e5ece8;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(22, 71, 52, 0.07);
}

.sa-edit-student-card-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9efec;
}

.sa-edit-student-avatar {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #dff0e8;
    color: #164734;
    font-size: 18px;
    font-weight: 700;
}

.sa-edit-student-card-heading h2 {
    margin: 0 0 3px;
    color: #164734;
    font-size: 20px;
    font-weight: 700;
}

.sa-edit-student-card-heading p {
    margin: 0;
    color: #849088;
    font-size: 11px;
}

/* Alert */

.sa-edit-student-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 13px 16px;
    border: 1px solid #efc5c1;
    border-radius: 13px;
    background: #fff0ef;
    color: #a13a32;
    font-size: 12px;
    font-weight: 500;
}

.sa-edit-student-alert > span {
    display: flex;
    flex: 0 0 25px;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #f5d5d2;
    font-weight: 700;
}

/* Form */

.sa-edit-student-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.sa-edit-student-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sa-edit-student-field-full {
    grid-column: 1 / -1;
}

.sa-edit-student-field label {
    color: #344b41;
    font-size: 12px;
    font-weight: 600;
}

.sa-edit-student-field label span {
    margin-left: 4px;
    color: #8d9892;
    font-size: 10px;
    font-weight: 400;
}

.sa-edit-student-field input {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid #d9e4de;
    border-radius: 12px;
    outline: none;
    background: #fbfcfb;
    color: #2f4139;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    transition: 0.2s ease;
}

.sa-edit-student-field input:focus {
    border-color: #2f8f75;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(47, 143, 117, 0.1);
}

.sa-edit-student-field small {
    color: #89948e;
    font-size: 10px;
}

/* Password */

.sa-edit-student-password-wrap {
    position: relative;
}

.sa-edit-student-password-wrap input {
    padding-right: 66px;
}

.sa-edit-student-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    min-width: 50px;
    padding: 6px 9px;
    border: none;
    border-radius: 20px;
    background: #e8f3ee;
    color: #2f8f75;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    transform: translateY(-50%);
}

.sa-edit-student-password-toggle:hover {
    background: #d9ece3;
}

/* Actions */

.sa-edit-student-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 11px;
    margin-top: 27px;
    padding-top: 21px;
    border-top: 1px solid #e9efec;
}

.sa-edit-student-cancel-btn,
.sa-edit-student-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 21px;
    border-radius: 30px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s ease;
}

.sa-edit-student-cancel-btn {
    border: 1px solid #b8c5be;
    background: #ffffff;
    color: #586a60;
}

.sa-edit-student-cancel-btn:hover {
    border-color: #84938b;
    color: #344b41;
}

.sa-edit-student-save-btn {
    border: none;
    background: #164734;
    color: #ffffff;
}

.sa-edit-student-save-btn:hover {
    background: #2f8f75;
    transform: translateY(-1px);
}

/* Footer */

.sa-edit-student-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 26px;
    padding-top: 17px;
    border-top: 1px solid #dfe7e2;
    color: #89938e;
    font-size: 10px;
}

.sa-edit-student-footer p {
    margin: 0;
}

/* Responsive */

@media (max-width: 700px) {

    .sa-edit-student-page {
        padding: 20px;
    }

    .sa-edit-student-topbar,
    .sa-edit-student-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .sa-edit-student-header {
        padding: 27px 23px;
    }

    .sa-edit-student-header h1 {
        font-size: 28px;
    }

    .sa-edit-student-header-icon {
        display: none;
    }

    .sa-edit-student-card {
        padding: 22px;
    }

    .sa-edit-student-form-grid {
        grid-template-columns: 1fr;
    }

    .sa-edit-student-field-full {
        grid-column: auto;
    }

    .sa-edit-student-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .sa-edit-student-cancel-btn,
    .sa-edit-student-save-btn {
        width: 100%;
    }
}

/* =========================================================
   STUDENT - MY APPOINTMENT
   UNIQUE PREFIX: stu-myappt-
========================================================= */

.stu-myappt-body {
    margin: 0;
    min-height: 100vh;
    background: #f3f7f5;
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.stu-myappt-body *,
.stu-myappt-body *::before,
.stu-myappt-body *::after {
    box-sizing: border-box;
}


/* =========================================================
   NAVIGATION
========================================================= */

.stu-myappt-navbar {
    width: 100%;
    border-bottom: 1px solid #e1eae5;
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(22, 71, 52, 0.04);
}

.stu-myappt-navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    width: 100%;
    max-width: 1180px;
    min-height: 74px;
    margin: 0 auto;
    padding: 0 28px;
}

.stu-myappt-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #164734;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.4px;
    text-decoration: none;
}

.stu-myappt-logo:hover {
    color: #2f8f75;
}

.stu-myappt-logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 11px;
    background: #164734;
    color: #ffffff;
    font-size: 22px;
    font-weight: 500;
}

.stu-myappt-nav-actions {
    display: flex;
    align-items: center;
    gap: 11px;
}

.stu-myappt-student-info {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-right: 5px;
}

.stu-myappt-student-avatar {
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dcefe6;
    color: #164734;
    font-size: 13px;
    font-weight: 700;
}

.stu-myappt-student-info strong {
    display: block;
    color: #294238;
    font-size: 10px;
    font-weight: 600;
}

.stu-myappt-student-info span {
    display: block;
    margin-top: 1px;
    color: #8a958f;
    font-size: 8px;
}

.stu-myappt-dashboard-btn,
.stu-myappt-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 15px;
    border-radius: 24px;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s ease;
}

.stu-myappt-dashboard-btn {
    border: 1px solid #164734;
    background: #ffffff;
    color: #164734;
}

.stu-myappt-dashboard-btn:hover {
    background: #164734;
    color: #ffffff;
}

.stu-myappt-logout-btn {
    border: 1px solid #d7655c;
    background: #ffffff;
    color: #c34e45;
}

.stu-myappt-logout-btn:hover {
    background: #d7655c;
    color: #ffffff;
}


/* =========================================================
   PAGE LAYOUT
========================================================= */

.stu-myappt-page {
    min-height: calc(100vh - 74px);
    padding: 35px;
}

.stu-myappt-container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.stu-myappt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 22px;
    padding: 31px 35px;
    border-radius: 26px;
    background:
        linear-gradient(
            135deg,
            #164734 0%,
            #205d47 55%,
            #2f8f75 100%
        );
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(22, 71, 52, 0.14);
}

.stu-myappt-header-label {
    display: inline-flex;
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.stu-myappt-header h1 {
    margin: 15px 0 7px;
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
}

.stu-myappt-header p {
    max-width: 640px;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    line-height: 1.7;
}

.stu-myappt-header-icon {
    display: flex;
    flex: 0 0 72px;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 34px;
}


/* =========================================================
   ERROR ALERT
========================================================= */

.stu-myappt-error-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 13px 16px;
    border: 1px solid #efc5c1;
    border-radius: 13px;
    background: #fff0ef;
    color: #a13a32;
    font-size: 11px;
    font-weight: 500;
}

.stu-myappt-error-alert > span {
    display: flex;
    flex: 0 0 25px;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #f5d5d2;
    font-weight: 700;
}


/* =========================================================
   APPOINTMENT CARD
========================================================= */

.stu-myappt-status-card {
    padding: 29px;
    border: 1px solid #e4ece7;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(22, 71, 52, 0.07);
}

.stu-myappt-status-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9efec;
}

.stu-myappt-section-label {
    display: inline-flex;
    padding: 5px 11px;
    border-radius: 20px;
    background: #e7f2ed;
    color: #2f8f75;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.stu-myappt-status-heading h2 {
    margin: 10px 0 4px;
    color: #164734;
    font-size: 21px;
    font-weight: 700;
}

.stu-myappt-status-heading p {
    margin: 0;
    color: #87928c;
    font-size: 10px;
}


/* =========================================================
   STATUS BADGES
========================================================= */

.stu-myappt-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 25px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.stu-myappt-status-badge > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 9px;
}

.stu-myappt-status-pending {
    background: #fff3d5;
    color: #996715;
}

.stu-myappt-status-pending > span {
    background: #ffe5a6;
}

.stu-myappt-status-approved {
    background: #e5f5ec;
    color: #277251;
}

.stu-myappt-status-approved > span {
    background: #c9ead8;
}

.stu-myappt-status-completed {
    background: #e7eefb;
    color: #355f99;
}

.stu-myappt-status-completed > span {
    background: #cedcf4;
}

.stu-myappt-status-cancelled {
    background: #fbe9e7;
    color: #b34d44;
}

.stu-myappt-status-cancelled > span {
    background: #f3cbc7;
}


/* =========================================================
   DETAIL GRID
========================================================= */

.stu-myappt-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 21px;
}

.stu-myappt-detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 85px;
    padding: 16px;
    border: 1px solid #e7eeea;
    border-radius: 17px;
    background: #fafcfb;
}

.stu-myappt-detail-icon {
    display: flex;
    flex: 0 0 41px;
    align-items: center;
    justify-content: center;
    width: 41px;
    height: 41px;
    border-radius: 13px;
    background: #e6f2ec;
    font-size: 19px;
}

.stu-myappt-detail-item span {
    display: block;
    margin-bottom: 4px;
    color: #86918b;
    font-size: 9px;
}

.stu-myappt-detail-item strong {
    display: block;
    color: #2b453a;
    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   CONTENT AND NOTES
========================================================= */

.stu-myappt-content-box,
.stu-myappt-note-box {
    margin-top: 15px;
    padding: 19px;
    border-radius: 17px;
}

.stu-myappt-content-box {
    border: 1px solid #e5ece8;
    background: #fafcfb;
}

.stu-myappt-note-box {
    border: 1px solid #c9dced;
    background: #f0f7fd;
}

.stu-myappt-content-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
}

.stu-myappt-content-heading > span {
    font-size: 17px;
}

.stu-myappt-content-heading h3 {
    margin: 0;
    color: #274238;
    font-size: 12px;
    font-weight: 700;
}

.stu-myappt-content-box p,
.stu-myappt-note-box p {
    margin: 0;
    color: #66746d;
    font-size: 11px;
    line-height: 1.7;
}

.stu-myappt-waiting-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 15px;
    padding: 15px 17px;
    border: 1px solid #d8e4de;
    border-radius: 15px;
    background: #f7faf8;
}

.stu-myappt-waiting-note > span {
    font-size: 17px;
}

.stu-myappt-waiting-note strong {
    display: block;
    margin-bottom: 3px;
    color: #40574d;
    font-size: 10px;
}

.stu-myappt-waiting-note p {
    margin: 0;
    color: #87918c;
    font-size: 9px;
}


/* =========================================================
   STATUS MESSAGES
========================================================= */

.stu-myappt-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 16px;
}

.stu-myappt-message > span {
    display: flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.stu-myappt-message strong {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
}

.stu-myappt-message p {
    margin: 0;
    font-size: 10px;
    line-height: 1.6;
}

.stu-myappt-message-pending {
    border: 1px solid #efd79c;
    background: #fff9e9;
    color: #85601c;
}

.stu-myappt-message-pending > span {
    background: #ffe7ad;
}

.stu-myappt-message-approved {
    border: 1px solid #b9deca;
    background: #edf8f2;
    color: #256a4b;
}

.stu-myappt-message-approved > span {
    background: #cbead9;
}

.stu-myappt-message-completed {
    border: 1px solid #c4d5eb;
    background: #f0f5fc;
    color: #385f8d;
}

.stu-myappt-message-completed > span {
    background: #d6e1f2;
}

.stu-myappt-message-cancelled {
    border: 1px solid #ecc6c2;
    background: #fff1f0;
    color: #a44941;
}

.stu-myappt-message-cancelled > span {
    background: #f4d3d0;
}


/* =========================================================
   BUTTONS
========================================================= */

.stu-myappt-actions,
.stu-myappt-empty-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 23px;
    padding-top: 20px;
    border-top: 1px solid #e9efec;
}

.stu-myappt-secondary-btn,
.stu-myappt-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 9px 20px;
    border-radius: 28px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s ease;
}

.stu-myappt-secondary-btn {
    border: 1px solid #b8c5be;
    background: #ffffff;
    color: #586a60;
}

.stu-myappt-secondary-btn:hover {
    border-color: #82928a;
    color: #344b41;
}

.stu-myappt-primary-btn {
    border: 1px solid #164734;
    background: #164734;
    color: #ffffff;
}

.stu-myappt-primary-btn:hover {
    border-color: #2f8f75;
    background: #2f8f75;
    color: #ffffff;
    transform: translateY(-1px);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.stu-myappt-empty-card {
    padding: 60px 30px;
    border: 1px solid #e4ece7;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(22, 71, 52, 0.07);
    text-align: center;
}

.stu-myappt-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    margin: 0 auto 17px;
    border-radius: 23px;
    background: #e7f3ed;
    font-size: 37px;
}

.stu-myappt-empty-card h2 {
    margin: 12px 0 8px;
    color: #164734;
    font-size: 23px;
    font-weight: 700;
}

.stu-myappt-empty-card > p {
    max-width: 500px;
    margin: 0 auto;
    color: #7a8780;
    font-size: 11px;
    line-height: 1.7;
}

.stu-myappt-empty-actions {
    justify-content: center;
    max-width: 520px;
    margin-right: auto;
    margin-left: auto;
}


/* =========================================================
   FOOTER
========================================================= */

.stu-myappt-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 27px;
    padding-top: 17px;
    border-top: 1px solid #dfe7e2;
    color: #89938e;
    font-size: 9px;
}

.stu-myappt-footer p {
    margin: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 780px) {

    .stu-myappt-detail-grid {
        grid-template-columns: 1fr;
    }

    .stu-myappt-student-info {
        display: none;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

    .stu-myappt-navbar-container {
        min-height: 68px;
        padding: 0 18px;
    }

    .stu-myappt-logo {
        font-size: 17px;
    }

    .stu-myappt-logo-icon {
        width: 32px;
        height: 32px;
    }

    .stu-myappt-dashboard-btn {
        display: none;
    }

    .stu-myappt-page {
        padding: 20px;
    }

    .stu-myappt-header {
        padding: 27px 23px;
    }

    .stu-myappt-header h1 {
        font-size: 27px;
    }

    .stu-myappt-header-icon {
        display: none;
    }

    .stu-myappt-status-card {
        padding: 22px;
    }

    .stu-myappt-status-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .stu-myappt-actions,
    .stu-myappt-empty-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .stu-myappt-secondary-btn,
    .stu-myappt-primary-btn {
        width: 100%;
    }

    .stu-myappt-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   ACCOUNT TYPE SELECTION PAGE
   UNIQUE PREFIX: role-login-
========================================================= */

.role-login-body {
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(
            135deg,
            #edf4f0 0%,
            #f7faf8 55%,
            #e6f0eb 100%
        );
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.role-login-body *,
.role-login-body *::before,
.role-login-body *::after {
    box-sizing: border-box;
}


/* =========================================================
   PAGE LAYOUT
========================================================= */

.role-login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 34px;
}

.role-login-container {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    width: 100%;
    max-width: 1180px;
    min-height: 690px;
    overflow: hidden;
    border: 1px solid rgba(22, 71, 52, 0.08);
    border-radius: 31px;
    background: #ffffff;
    box-shadow:
        0 30px 70px rgba(22, 71, 52, 0.13);
}


/* =========================================================
   LEFT INFORMATION PANEL
========================================================= */

.role-login-info-panel {
    position: relative;
    overflow: hidden;
    min-height: 690px;
    background:
        linear-gradient(
            145deg,
            #123d2d 0%,
            #1a5a42 55%,
            #2f8f75 100%
        );
    color: #ffffff;
}

.role-login-info-pattern {
    position: absolute;
    top: -110px;
    right: -120px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.role-login-info-pattern::before,
.role-login-info-pattern::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
}

.role-login-info-pattern::before {
    top: 55px;
    left: 55px;
    width: 250px;
    height: 250px;
}

.role-login-info-pattern::after {
    top: 110px;
    left: 110px;
    width: 140px;
    height: 140px;
}

.role-login-info-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 690px;
    padding: 42px 46px 34px;
}


/* =========================================================
   LOGO
========================================================= */

.role-login-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    width: fit-content;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-decoration: none;
}

.role-login-logo:hover {
    color: #ffffff;
}

.role-login-logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    font-size: 24px;
    font-weight: 500;
}


/* =========================================================
   LEFT COPY
========================================================= */

.role-login-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    max-width: 510px;
    padding: 55px 0 35px;
}

.role-login-campus-label {
    display: inline-flex;
    width: fit-content;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.11);
    color: rgba(255, 255, 255, 0.92);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.role-login-copy > h1 {
    max-width: 500px;
    margin: 22px 0 14px;
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -1.1px;
}

.role-login-copy > p {
    max-width: 500px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   BENEFITS
========================================================= */

.role-login-benefits {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 32px;
}

.role-login-benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 470px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.07);
}

.role-login-benefit > span {
    display: flex;
    flex: 0 0 25px;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.17);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.role-login-benefit strong {
    display: block;
    margin-bottom: 3px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
}

.role-login-benefit p {
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 9px;
    line-height: 1.55;
}


/* =========================================================
   LEFT FOOTER
========================================================= */

.role-login-info-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    color: rgba(255, 255, 255, 0.62);
}

.role-login-info-footer span {
    font-size: 9px;
}

.role-login-info-footer small {
    font-size: 8px;
}


/* =========================================================
   RIGHT SELECTION PANEL
========================================================= */

.role-login-selection-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 690px;
    padding: 50px 48px;
    background: #ffffff;
}

.role-login-selection-content {
    width: 100%;
    max-width: 470px;
}


/* =========================================================
   RIGHT HEADER
========================================================= */

.role-login-form-header {
    margin-bottom: 29px;
}

.role-login-form-label {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 20px;
    background: #e7f2ed;
    color: #2f8f75;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.role-login-form-header h2 {
    margin: 15px 0 8px;
    color: #173f30;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.6px;
}

.role-login-form-header p {
    margin: 0;
    color: #7a8780;
    font-size: 11px;
    line-height: 1.7;
}


/* =========================================================
   ROLE CARDS
========================================================= */

.role-login-card-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.role-login-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 146px;
    padding: 20px 52px 20px 20px;
    border: 1px solid #e2ebe6;
    border-radius: 21px;
    background: #ffffff;
    color: inherit;
    box-shadow:
        0 10px 25px rgba(22, 71, 52, 0.055);
    text-decoration: none;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.role-login-card:hover {
    border-color: #acd0bf;
    color: inherit;
    transform: translateY(-4px);
    box-shadow:
        0 17px 35px rgba(22, 71, 52, 0.1);
}

.role-login-card-icon {
    display: flex;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 20px;
    font-size: 29px;
}

.role-login-student-card .role-login-card-icon {
    background: #e4f2eb;
}

.role-login-admin-card .role-login-card-icon {
    background: #e8eef9;
}

.role-login-card-content {
    min-width: 0;
}

.role-login-card-label {
    display: inline-block;
    margin-bottom: 4px;
    color: #7f8b84;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.role-login-card-content h3 {
    margin: 0 0 6px;
    color: #1e4134;
    font-size: 17px;
    font-weight: 700;
}

.role-login-card-content p {
    margin: 0;
    color: #7b8780;
    font-size: 9px;
    line-height: 1.6;
}

.role-login-card-arrow {
    position: absolute;
    top: 50%;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: #edf4f0;
    color: #2f8f75;
    font-size: 15px;
    transform: translateY(-50%);
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.role-login-card:hover .role-login-card-arrow {
    background: #2f8f75;
    color: #ffffff;
    transform:
        translateY(-50%)
        translateX(3px);
}


/* =========================================================
   SECURITY NOTE
========================================================= */

.role-login-security-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 19px;
    padding: 14px 15px;
    border: 1px solid #dfe9e4;
    border-radius: 15px;
    background: #f8fbf9;
}

.role-login-security-icon {
    display: flex;
    flex: 0 0 29px;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border-radius: 10px;
    background: #e8f2ed;
    font-size: 13px;
}

.role-login-security-note p {
    margin: 1px 0 0;
    color: #75827b;
    font-size: 9px;
    line-height: 1.6;
}


/* =========================================================
   BACK LINK
========================================================= */

.role-login-back-area {
    margin-top: 26px;
    padding-top: 19px;
    border-top: 1px solid #e8eeeb;
    text-align: center;
}

.role-login-back-link {
    color: #52665c;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.role-login-back-link:hover {
    color: #2f8f75;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .role-login-container {
        grid-template-columns: 1fr;
        max-width: 760px;
    }

    .role-login-info-panel,
    .role-login-info-content {
        min-height: auto;
    }

    .role-login-info-content {
        padding: 36px 38px;
    }

    .role-login-copy {
        padding: 45px 0 25px;
    }

    .role-login-copy > h1 {
        max-width: 620px;
        font-size: 36px;
    }

    .role-login-selection-panel {
        min-height: auto;
        padding: 45px 38px;
    }

    .role-login-selection-content {
        max-width: 600px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

    .role-login-page {
        align-items: flex-start;
        padding: 18px;
    }

    .role-login-container {
        border-radius: 23px;
    }

    .role-login-info-content {
        padding: 28px 24px;
    }

    .role-login-logo {
        font-size: 18px;
    }

    .role-login-copy {
        padding: 38px 0 22px;
    }

    .role-login-copy > h1 {
        font-size: 30px;
    }

    .role-login-benefit {
        padding: 12px;
    }

    .role-login-info-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .role-login-selection-panel {
        padding: 36px 24px;
    }

    .role-login-form-header h2 {
        font-size: 26px;
    }

    .role-login-card {
        align-items: flex-start;
        min-height: 158px;
        padding: 18px 47px 18px 17px;
    }

    .role-login-card-icon {
        flex-basis: 53px;
        width: 53px;
        height: 53px;
        border-radius: 17px;
        font-size: 25px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .role-login-page {
        padding: 0;
    }

    .role-login-container {
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .role-login-info-content,
    .role-login-selection-panel {
        padding-right: 20px;
        padding-left: 20px;
    }

    .role-login-card {
        gap: 12px;
    }

    .role-login-card-content h3 {
        font-size: 15px;
    }
}

/* =========================================================
   SMTP FORGOT PASSWORD
   UNIQUE PREFIX: forgot-smtp-
========================================================= */

.forgot-smtp-body {
    margin: 0;
    min-height: 100vh;
    background: #eef4f1;
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.forgot-smtp-body *,
.forgot-smtp-body *::before,
.forgot-smtp-body *::after {
    box-sizing: border-box;
}

.forgot-smtp-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 35px;
}

.forgot-smtp-container {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    width: 100%;
    max-width: 1100px;
    min-height: 650px;
    overflow: hidden;
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 28px 65px rgba(22, 71, 52, 0.13);
}

.forgot-smtp-info {
    padding: 43px;
    background: linear-gradient(
        145deg,
        #123d2d,
        #1d664b,
        #2f8f75
    );
    color: #ffffff;
}

.forgot-smtp-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
}

.forgot-smtp-logo > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 23px;
}

.forgot-smtp-info-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 510px;
}

.forgot-smtp-label,
.forgot-smtp-form-label {
    display: inline-flex;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.forgot-smtp-label {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.11);
}

.forgot-smtp-form-label {
    background: #e7f2ed;
    color: #2f8f75;
}

.forgot-smtp-info h1 {
    margin: 22px 0 13px;
    font-size: 40px;
    line-height: 1.25;
}

.forgot-smtp-info p {
    margin: 0 0 29px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    line-height: 1.8;
}

.forgot-smtp-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 11px;
}

.forgot-smtp-benefit > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.forgot-smtp-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.forgot-smtp-form-content {
    width: 100%;
    max-width: 390px;
}

.forgot-smtp-form-content h2,
.forgot-smtp-reset-card h1 {
    margin: 15px 0 8px;
    color: #164734;
    font-size: 29px;
}

.forgot-smtp-description,
.forgot-smtp-reset-card > p {
    margin: 0 0 25px;
    color: #7b8780;
    font-size: 11px;
    line-height: 1.7;
}

.forgot-smtp-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 17px;
}

.forgot-smtp-field label {
    color: #344b41;
    font-size: 11px;
    font-weight: 600;
}

.forgot-smtp-field input {
    width: 100%;
    min-height: 47px;
    padding: 11px 14px;
    border: 1px solid #d9e4de;
    border-radius: 12px;
    outline: none;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
}

.forgot-smtp-field input:focus {
    border-color: #2f8f75;
    box-shadow: 0 0 0 3px rgba(47, 143, 117, 0.1);
}

.forgot-smtp-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 45px;
    margin-top: 5px;
    border: none;
    border-radius: 28px;
    background: #164734;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.forgot-smtp-submit-btn:hover {
    background: #2f8f75;
    color: #ffffff;
}

.forgot-smtp-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: 13px;
    font-size: 10px;
}

.forgot-smtp-alert-error {
    border: 1px solid #efc5c1;
    background: #fff0ef;
    color: #a13a32;
}

.forgot-smtp-alert-success {
    border: 1px solid #bae1cd;
    background: #eaf8f0;
    color: #216b48;
}

.forgot-smtp-back-area {
    margin-top: 24px;
    text-align: center;
}

.forgot-smtp-back-area a {
    color: #586a60;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.forgot-smtp-reset-container {
    width: 100%;
    max-width: 520px;
}

.forgot-smtp-reset-card {
    padding: 38px;
    border-radius: 25px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(22, 71, 52, 0.11);
}

.forgot-smtp-reset-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin-bottom: 18px;
    border-radius: 19px;
    background: #e7f3ed;
    font-size: 30px;
}

@media (max-width: 850px) {

    .forgot-smtp-container {
        grid-template-columns: 1fr;
    }

    .forgot-smtp-info-content {
        min-height: auto;
        padding: 60px 0 30px;
    }
}

@media (max-width: 600px) {

    .forgot-smtp-page {
        padding: 18px;
    }

    .forgot-smtp-info,
    .forgot-smtp-form-panel,
    .forgot-smtp-reset-card {
        padding: 28px 23px;
    }

    .forgot-smtp-info h1 {
        font-size: 31px;
    }
}

/* =========================================================
   STUDENT APPOINTMENT BOOKING
   UNIQUE PREFIX: stu-booking-
========================================================= */

.stu-booking-body {
    margin: 0;
    min-height: 100vh;
    background: #f3f7f5;
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.stu-booking-body *,
.stu-booking-body *::before,
.stu-booking-body *::after {
    box-sizing: border-box;
}

.stu-booking-navbar {
    border-bottom: 1px solid #e2eae6;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(22, 71, 52, 0.04);
}

.stu-booking-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 1100px;
    min-height: 73px;
    margin: 0 auto;
    padding: 0 28px;
}

.stu-booking-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #164734;
    font-size: 21px;
    font-weight: 700;
    text-decoration: none;
}

.stu-booking-logo > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #164734;
    color: #ffffff;
    font-size: 21px;
}

.stu-booking-nav-right,
.stu-booking-user {
    display: flex;
    align-items: center;
    gap: 11px;
}

.stu-booking-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dcefe6;
    color: #164734;
    font-size: 13px;
    font-weight: 700;
}

.stu-booking-user strong,
.stu-booking-user small {
    display: block;
}

.stu-booking-user strong {
    color: #294238;
    font-size: 10px;
}

.stu-booking-user small {
    color: #8a958f;
    font-size: 8px;
}

.stu-booking-dashboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 17px;
    border: 1px solid #164734;
    border-radius: 25px;
    color: #164734;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.stu-booking-dashboard-btn:hover {
    background: #164734;
    color: #ffffff;
}

.stu-booking-page {
    min-height: calc(100vh - 73px);
    padding: 35px;
}

.stu-booking-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.stu-booking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 22px;
    padding: 31px 35px;
    border-radius: 26px;
    background: linear-gradient(
        135deg,
        #164734,
        #205d47,
        #2f8f75
    );
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(22, 71, 52, 0.14);
}

.stu-booking-header-label {
    display: inline-flex;
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.stu-booking-header h1 {
    margin: 14px 0 7px;
    font-size: 31px;
}

.stu-booking-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
}

.stu-booking-header-icon {
    display: flex;
    flex: 0 0 70px;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 21px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 32px;
}

.stu-booking-card {
    padding: 29px;
    border: 1px solid #e4ece7;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(22, 71, 52, 0.07);
}

.stu-booking-card-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
    padding-bottom: 19px;
    border-bottom: 1px solid #e9efec;
}

.stu-booking-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border-radius: 15px;
    background: #e5f2eb;
    font-size: 21px;
}

.stu-booking-card-heading h2 {
    margin: 0 0 3px;
    color: #164734;
    font-size: 19px;
}

.stu-booking-card-heading p {
    margin: 0;
    color: #86918b;
    font-size: 10px;
}

.stu-booking-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 19px;
    padding: 13px 16px;
    border-radius: 13px;
    font-size: 10px;
}

.stu-booking-success {
    border: 1px solid #b9dfca;
    background: #eaf8f0;
    color: #216b48;
}

.stu-booking-error {
    border: 1px solid #efc5c1;
    background: #fff0ef;
    color: #a13a32;
}

.stu-booking-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.stu-booking-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stu-booking-full-field {
    grid-column: 1 / -1;
}

.stu-booking-field label {
    color: #344b41;
    font-size: 11px;
    font-weight: 600;
}

.stu-booking-field input,
.stu-booking-field select,
.stu-booking-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d9e4de;
    border-radius: 12px;
    outline: none;
    background: #fbfcfb;
    color: #2f4139;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
}

.stu-booking-field input,
.stu-booking-field select {
    min-height: 47px;
}

.stu-booking-field textarea {
    resize: vertical;
    line-height: 1.7;
}

.stu-booking-field input:focus,
.stu-booking-field select:focus,
.stu-booking-field textarea:focus {
    border-color: #2f8f75;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(47, 143, 117, 0.1);
}

.stu-booking-field select:disabled {
    cursor: not-allowed;
    background: #f0f3f1;
    color: #919b95;
}

.stu-booking-field small {
    color: #89948e;
    font-size: 9px;
}

.stu-booking-character-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.stu-booking-unavailable-box {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 20px;
    padding: 15px 17px;
    border: 1px solid #efd49b;
    border-radius: 15px;
    background: #fff9e9;
    color: #805c1c;
}

.stu-booking-unavailable-box[hidden] {
    display: none;
}

.stu-booking-unavailable-box > span {
    font-size: 18px;
}

.stu-booking-unavailable-box strong {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
}

.stu-booking-unavailable-box p {
    margin: 0;
    font-size: 9px;
    line-height: 1.6;
}

.stu-booking-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #e9efec;
}

.stu-booking-cancel-btn,
.stu-booking-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 21px;
    border-radius: 27px;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.stu-booking-cancel-btn {
    border: 1px solid #b8c5be;
    background: #ffffff;
    color: #586a60;
}

.stu-booking-submit-btn {
    border: none;
    background: #164734;
    color: #ffffff;
}

.stu-booking-submit-btn:hover {
    background: #2f8f75;
}

.stu-booking-submit-btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

@media (max-width: 650px) {

    .stu-booking-user {
        display: none;
    }

    .stu-booking-page {
        padding: 20px;
    }

    .stu-booking-header {
        padding: 27px 23px;
    }

    .stu-booking-header-icon {
        display: none;
    }

    .stu-booking-card {
        padding: 22px;
    }

    .stu-booking-form-grid {
        grid-template-columns: 1fr;
    }

    .stu-booking-full-field {
        grid-column: auto;
    }

    .stu-booking-actions {
        flex-direction: column-reverse;
    }

    .stu-booking-cancel-btn,
    .stu-booking-submit-btn {
        width: 100%;
    }
}

/* =========================================================
   ADMIN APPOINTMENT MANAGEMENT
   UNIQUE PREFIX: adm-appt-
========================================================= */

.adm-appt-body {
    margin: 0;
    min-height: 100vh;
    background: #f3f7f5;
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.adm-appt-body *,
.adm-appt-body *::before,
.adm-appt-body *::after {
    box-sizing: border-box;
}

.adm-appt-layout {
    display: flex;
    min-height: 100vh;
}


/* =========================================================
   SIDEBAR
========================================================= */

.adm-appt-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: 250px;
    height: 100vh;
    overflow-y: auto;
    background:
        linear-gradient(
            180deg,
            #123d2d 0%,
            #174b38 55%,
            #1d5f48 100%
        );
    color: #ffffff;
    box-shadow: 10px 0 35px rgba(14, 54, 39, 0.1);
}

.adm-appt-sidebar-header {
    padding: 27px 24px 23px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.adm-appt-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
}

.adm-appt-sidebar-logo:hover {
    color: #ffffff;
}

.adm-appt-sidebar-logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 23px;
}

.adm-appt-sidebar-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 24px 16px;
}

.adm-appt-nav-label {
    margin: 0 11px 8px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.adm-appt-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 45px;
    padding: 11px 14px;
    border-radius: 13px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.2s ease;
}

.adm-appt-nav-link > span {
    width: 22px;
    font-size: 16px;
    text-align: center;
}

.adm-appt-nav-link:hover,
.adm-appt-nav-link.active {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
}

.adm-appt-nav-link.active {
    box-shadow: inset 3px 0 0 #9fd6c0;
}

.adm-appt-logout-link {
    margin-top: auto;
    color: #ffd3cf;
}

.adm-appt-logout-link:hover {
    background: rgba(231, 104, 94, 0.16);
    color: #ffffff;
}


/* =========================================================
   MAIN
========================================================= */

.adm-appt-main {
    width: calc(100% - 250px);
    min-height: 100vh;
    margin-left: 250px;
}

.adm-appt-topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    min-height: 73px;
    padding: 13px 31px;
    border-bottom: 1px solid #e2eae6;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
}

.adm-appt-topbar-title span,
.adm-appt-topbar-title strong {
    display: block;
}

.adm-appt-topbar-title span {
    margin-bottom: 2px;
    color: #89958f;
    font-size: 9px;
}

.adm-appt-topbar-title strong {
    color: #234236;
    font-size: 12px;
    font-weight: 600;
}

.adm-appt-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 17px;
    border: 1px solid #164734;
    border-radius: 25px;
    color: #164734;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.adm-appt-topbar-btn:hover {
    background: #164734;
    color: #ffffff;
}

.adm-appt-content {
    padding: 31px;
}


/* =========================================================
   ALERT
========================================================= */

.adm-appt-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 10px;
    font-weight: 500;
}

.adm-appt-alert > span {
    display: flex;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-weight: 700;
}

.adm-appt-alert-success {
    border: 1px solid #b9dfca;
    background: #eaf8f0;
    color: #216b48;
}

.adm-appt-alert-success > span {
    background: #caead9;
}

.adm-appt-alert-error {
    border: 1px solid #efc5c1;
    background: #fff0ef;
    color: #a13a32;
}

.adm-appt-alert-error > span {
    background: #f5d5d2;
}


/* =========================================================
   HERO
========================================================= */

.adm-appt-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 22px;
    padding: 30px 34px;
    border-radius: 25px;
    background:
        linear-gradient(
            135deg,
            #164734 0%,
            #205d47 55%,
            #2f8f75 100%
        );
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(22, 71, 52, 0.14);
}

.adm-appt-hero-label {
    display: inline-flex;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.adm-appt-hero h1 {
    margin: 14px 0 7px;
    font-size: 30px;
    line-height: 1.3;
}

.adm-appt-hero p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
}

.adm-appt-hero-icon {
    display: flex;
    flex: 0 0 70px;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border: 1px solid rgba(255, 255, 255, 0.21);
    border-radius: 21px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 32px;
}


/* =========================================================
   SUMMARY
========================================================= */

.adm-appt-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 22px;
}

.adm-appt-summary-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 105px;
    padding: 17px;
    border: 1px solid #e4ece7;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(22, 71, 52, 0.05);
}

.adm-appt-summary-icon {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #e6f2ec;
    font-size: 20px;
}

.adm-appt-summary-card span,
.adm-appt-summary-card strong {
    display: block;
}

.adm-appt-summary-card span {
    margin-bottom: 3px;
    color: #849189;
    font-size: 9px;
}

.adm-appt-summary-card strong {
    color: #164734;
    font-size: 23px;
}


/* =========================================================
   FILTER
========================================================= */

.adm-appt-filter-card {
    margin-bottom: 22px;
    padding: 19px;
    border: 1px solid #e4ece7;
    border-radius: 18px;
    background: #ffffff;
}

.adm-appt-filter-form {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 190px auto;
    align-items: end;
    gap: 15px;
}

.adm-appt-filter-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.adm-appt-filter-field label {
    color: #344b41;
    font-size: 10px;
    font-weight: 600;
}

.adm-appt-filter-field input,
.adm-appt-filter-field select {
    width: 100%;
    min-height: 43px;
    padding: 10px 13px;
    border: 1px solid #d9e4de;
    border-radius: 11px;
    outline: none;
    background: #fbfcfb;
    color: #344b41;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
}

.adm-appt-filter-field input:focus,
.adm-appt-filter-field select:focus {
    border-color: #2f8f75;
    box-shadow: 0 0 0 3px rgba(47, 143, 117, 0.1);
}

.adm-appt-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.adm-appt-filter-btn,
.adm-appt-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 9px 17px;
    border-radius: 24px;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.adm-appt-filter-btn {
    border: none;
    background: #164734;
    color: #ffffff;
}

.adm-appt-filter-btn:hover {
    background: #2f8f75;
}

.adm-appt-reset-btn {
    border: 1px solid #b8c5be;
    background: #ffffff;
    color: #586a60;
}


/* =========================================================
   SECTION
========================================================= */

.adm-appt-section {
    padding: 24px;
    border: 1px solid #e4ece7;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(22, 71, 52, 0.055);
}

.adm-appt-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 19px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e9efec;
}

.adm-appt-section-heading h2 {
    margin: 0 0 3px;
    color: #164734;
    font-size: 19px;
}

.adm-appt-section-heading p {
    margin: 0;
    color: #86918b;
    font-size: 9px;
}


/* =========================================================
   APPOINTMENT CARDS
========================================================= */

.adm-appt-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.adm-appt-card {
    padding: 21px;
    border: 1px solid #e4ece7;
    border-radius: 19px;
    background: #fbfdfc;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.adm-appt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(22, 71, 52, 0.08);
}

.adm-appt-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 17px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e8efeb;
}

.adm-appt-student-heading {
    display: flex;
    align-items: center;
    gap: 11px;
}

.adm-appt-avatar {
    display: flex;
    flex: 0 0 43px;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: #dcefe6;
    color: #164734;
    font-size: 15px;
    font-weight: 700;
}

.adm-appt-student-heading h3 {
    margin: 0 0 3px;
    color: #193f30;
    font-size: 14px;
}

.adm-appt-student-heading p {
    margin: 0;
    color: #87928c;
    font-size: 9px;
}

.adm-appt-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border-radius: 22px;
    font-size: 8px;
    font-weight: 600;
    white-space: nowrap;
}

.adm-appt-status-badge > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    font-size: 8px;
}

.adm-appt-status-pending {
    background: #fff3d5;
    color: #996715;
}

.adm-appt-status-pending > span {
    background: #ffe5a6;
}

.adm-appt-status-approved {
    background: #e5f5ec;
    color: #277251;
}

.adm-appt-status-approved > span {
    background: #c9ead8;
}

.adm-appt-status-completed {
    background: #e7eefb;
    color: #355f99;
}

.adm-appt-status-completed > span {
    background: #cedcf4;
}

.adm-appt-status-cancelled {
    background: #fbe9e7;
    color: #b34d44;
}

.adm-appt-status-cancelled > span {
    background: #f3cbc7;
}

.adm-appt-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.adm-appt-detail-item {
    padding: 11px 12px;
    border: 1px solid #e7eeea;
    border-radius: 12px;
    background: #ffffff;
}

.adm-appt-detail-item span,
.adm-appt-detail-item strong {
    display: block;
}

.adm-appt-detail-item span {
    margin-bottom: 4px;
    color: #8a958f;
    font-size: 8px;
}

.adm-appt-detail-item strong {
    overflow-wrap: anywhere;
    color: #344b41;
    font-size: 9px;
    font-weight: 600;
}

.adm-appt-reason-box,
.adm-appt-note-box {
    margin-top: 12px;
    padding: 14px;
    border-radius: 13px;
}

.adm-appt-reason-box {
    border: 1px solid #e4ece7;
    background: #ffffff;
}

.adm-appt-note-box {
    border: 1px solid #c9dced;
    background: #f0f7fd;
}

.adm-appt-reason-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
}

.adm-appt-reason-heading strong {
    color: #344b41;
    font-size: 9px;
}

.adm-appt-reason-box p,
.adm-appt-note-box p {
    margin: 0;
    color: #68766f;
    font-size: 9px;
    line-height: 1.7;
}


/* =========================================================
   UPDATE FORM
========================================================= */

.adm-appt-update-form {
    display: grid;
    gap: 13px;
    margin-top: 17px;
    padding-top: 17px;
    border-top: 1px solid #e8efeb;
}

.adm-appt-update-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.adm-appt-update-field label {
    color: #344b41;
    font-size: 9px;
    font-weight: 600;
}

.adm-appt-update-field select,
.adm-appt-update-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9e4de;
    border-radius: 11px;
    outline: none;
    background: #ffffff;
    color: #344b41;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
}

.adm-appt-update-field select {
    min-height: 42px;
}

.adm-appt-update-field textarea {
    resize: vertical;
    line-height: 1.6;
}

.adm-appt-update-field select:focus,
.adm-appt-update-field textarea:focus {
    border-color: #2f8f75;
    box-shadow: 0 0 0 3px rgba(47, 143, 117, 0.1);
}

.adm-appt-update-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    border: none;
    border-radius: 24px;
    background: #164734;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

.adm-appt-update-btn:hover {
    background: #2f8f75;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.adm-appt-empty-state {
    padding: 55px 25px;
    text-align: center;
}

.adm-appt-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    border-radius: 21px;
    background: #e7f3ed;
    font-size: 32px;
}

.adm-appt-empty-state h3 {
    margin: 0 0 7px;
    color: #164734;
    font-size: 17px;
}

.adm-appt-empty-state p {
    margin: 0 auto 18px;
    color: #7c8982;
    font-size: 10px;
}

.adm-appt-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 18px;
    border-radius: 24px;
    background: #164734;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .adm-appt-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .adm-appt-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {

    .adm-appt-sidebar {
        position: static;
        width: 100%;
        height: auto;
    }

    .adm-appt-layout {
        flex-direction: column;
    }

    .adm-appt-main {
        width: 100%;
        margin-left: 0;
    }

    .adm-appt-sidebar-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .adm-appt-nav-label {
        grid-column: 1 / -1;
    }

    .adm-appt-logout-link {
        margin-top: 0;
    }

    .adm-appt-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .adm-appt-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {

    .adm-appt-content {
        padding: 19px;
    }

    .adm-appt-topbar {
        padding: 12px 18px;
    }

    .adm-appt-topbar-title strong {
        font-size: 10px;
    }

    .adm-appt-hero {
        padding: 25px 22px;
    }

    .adm-appt-hero h1 {
        font-size: 25px;
    }

    .adm-appt-hero-icon {
        display: none;
    }

    .adm-appt-summary-grid {
        grid-template-columns: 1fr;
    }

    .adm-appt-filter-form {
        grid-template-columns: 1fr;
    }

    .adm-appt-filter-actions {
        grid-column: auto;
        flex-direction: column;
        align-items: stretch;
    }

    .adm-appt-filter-btn,
    .adm-appt-reset-btn {
        width: 100%;
    }

    .adm-appt-section {
        padding: 18px;
    }

    .adm-appt-card {
        padding: 17px;
    }

    .adm-appt-card-header {
        flex-direction: column;
    }

    .adm-appt-detail-grid {
        grid-template-columns: 1fr;
    }

    .adm-appt-sidebar-nav {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   POLY-HEALTH HOMEPAGE
   UNIQUE PREFIX: home-
========================================================= */

:root {
    --home-primary: #1f6a4e;
    --home-primary-dark: #164734;
    --home-primary-light: #4fa579;
    --home-accent: #e5f3eb;
    --home-background: #f5faf7;
    --home-surface: #ffffff;
    --home-text: #263e34;
    --home-muted: #718078;
    --home-border: #dfe9e3;
    --home-shadow: 0 18px 50px rgba(22, 71, 52, 0.10);
}

html {
    scroll-behavior: smooth;
}

.home-body {
    margin: 0;
    overflow-x: hidden;
    background: var(--home-background);
    color: var(--home-text);
    font-family: "Poppins", sans-serif;
    -webkit-font-smoothing: antialiased;
}

.home-body *,
.home-body *::before,
.home-body *::after {
    box-sizing: border-box;
}

.home-body a,
.home-body button {
    transition:
        color 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}


/* =========================================================
   NAVBAR
========================================================= */

.home-navbar {
    min-height: 78px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(31, 106, 78, 0.08);
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 7px 28px rgba(22, 71, 52, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.home-navbar-container {
    max-width: 1180px;
}

.home-logo {
    position: relative;
    color: var(--home-primary-dark) !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 29px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.home-logo::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -4px;
    left: 0;
    width: 38%;
    height: 3px;
    border-radius: 20px;
    background: var(--home-primary-light);
}

.home-nav-link {
    position: relative;
    margin: 0 5px;
    padding: 10px 13px !important;
    color: #374c42 !important;
    font-size: 13px;
    font-weight: 500;
}

.home-nav-link::after {
    content: "";
    position: absolute;
    right: 13px;
    bottom: 4px;
    left: 13px;
    height: 2px;
    border-radius: 20px;
    background: var(--home-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s ease;
}

.home-nav-link:hover {
    color: var(--home-primary) !important;
}

.home-nav-link:hover::after {
    transform: scaleX(1);
}

.home-navbar-toggler {
    border: 1px solid var(--home-border);
    border-radius: 12px;
    box-shadow: none !important;
}


/* =========================================================
   BUTTONS
========================================================= */

.home-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--home-primary);
    border-radius: 999px;
    background:
        linear-gradient(
            135deg,
            var(--home-primary-dark),
            var(--home-primary)
        );
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(31, 106, 78, 0.18);
}

.home-primary-btn:hover,
.home-primary-btn:focus {
    border-color: var(--home-primary-light);
    background:
        linear-gradient(
            135deg,
            var(--home-primary),
            var(--home-primary-light)
        );
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(31, 106, 78, 0.25);
}

.home-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--home-primary-dark);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--home-primary-dark);
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(8px);
}

.home-outline-btn:hover,
.home-outline-btn:focus {
    background: var(--home-primary-dark);
    color: #ffffff;
    transform: translateY(-2px);
}

.home-small-btn {
    min-height: 43px;
    padding: 10px 22px;
    font-size: 12px;
}

.home-large-btn {
    min-height: 52px;
    padding: 13px 28px;
    font-size: 14px;
}


/* =========================================================
   HERO
========================================================= */

.home-main {
    overflow: hidden;
}

.home-hero-section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding-top: 78px;
    background:
        radial-gradient(
            circle at 80% 35%,
            rgba(123, 191, 151, 0.20),
            transparent 32%
        ),
        radial-gradient(
            circle at 12% 85%,
            rgba(193, 229, 207, 0.25),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f4faf6 0%,
            #f9fcfa 47%,
            #edf7f1 100%
        );
}

.home-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.38;
    background-image:
        linear-gradient(
            rgba(31, 106, 78, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(31, 106, 78, 0.025) 1px,
            transparent 1px
        );
    background-size: 34px 34px;
    pointer-events: none;
}

.home-hero-container {
    max-width: 1180px;
}

.home-hero-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.home-hero-blob-one {
    top: 13%;
    right: -100px;
    width: 390px;
    height: 390px;
    background: rgba(113, 184, 141, 0.13);
}

.home-hero-blob-two {
    bottom: -130px;
    left: -120px;
    width: 350px;
    height: 350px;
    background: rgba(190, 226, 203, 0.23);
}

.home-hero-content {
    position: relative;
    z-index: 4;
    padding-top: 40px;
    padding-bottom: 40px;
}

.home-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 17px;
    border: 1px solid rgba(31, 106, 78, 0.13);
    border-radius: 999px;
    background: rgba(229, 244, 235, 0.88);
    color: var(--home-primary);
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(31, 106, 78, 0.06);
}

.home-hero-title {
    max-width: 660px;
    margin: 26px 0 20px;
    color: var(--home-primary-dark);
    font-size: clamp(48px, 5.1vw, 72px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -2.5px;
}

.home-hero-title span {
    display: block;
    background:
        linear-gradient(
            135deg,
            var(--home-primary-light),
            var(--home-primary)
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-hero-description {
    max-width: 660px;
    margin: 0;
    color: #5e7067;
    font-size: 16px;
    line-height: 1.95;
}

.home-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 31px;
}

.home-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 21px;
    margin-top: 27px;
}

.home-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #607168;
    font-size: 11px;
    font-weight: 500;
}

.home-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #dff1e7;
    color: var(--home-primary);
    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   HERO FLOATING CARDS
========================================================= */

.home-hero-visual-column {
    position: relative;
}

.home-hero-image-wrapper {
    position: relative;
    width: 100%;
    min-height: 570px;
    margin: 0 auto;
}

.home-hero-image-wrapper::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 4%;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(47, 143, 117, 0.08);
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255, 255, 255, 0.8),
            rgba(169, 216, 187, 0.24) 58%,
            rgba(126, 190, 151, 0.17)
        );
    box-shadow:
        inset 0 0 80px rgba(255, 255, 255, 0.45),
        0 40px 85px rgba(31, 106, 78, 0.10);
    transform: translateY(-50%);
}

.home-hero-image-wrapper::after {
    content: "";
    position: absolute;
    top: 20%;
    right: 19%;
    width: 165px;
    height: 165px;
    border: 1px dashed rgba(31, 106, 78, 0.14);
    border-radius: 50%;
}

.home-floating-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 215px;
    padding: 17px 19px;
    border: 1px solid rgba(255, 255, 255, 0.80);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.90);
    box-shadow:
        0 18px 45px rgba(32, 84, 61, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.home-floating-card:hover {
    box-shadow:
        0 23px 52px rgba(32, 84, 61, 0.17);
}

.home-floating-card-icon {
    display: flex;
    flex: 0 0 49px;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 49px;
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            #eef8f2,
            #dcefe5
        );
    font-size: 24px;
    box-shadow: inset 0 0 0 1px rgba(31, 106, 78, 0.05);
}

.home-floating-card-content {
    text-align: left;
}

.home-floating-card-content strong {
    display: block;
    margin-bottom: 4px;
    color: #29483a;
    font-size: 12px;
    font-weight: 700;
}

.home-floating-card-content small {
    display: block;
    color: #7d8a83;
    font-size: 9px;
    line-height: 1.45;
}

.home-floating-card-one {
    top: 43%;
    left: 1%;
    animation: homeFloatOne 5.2s ease-in-out infinite;
}

.home-floating-card-two {
    top: 15%;
    right: 3%;
    animation: homeFloatTwo 6.1s ease-in-out infinite;
}

.home-floating-card-three {
    right: 1%;
    bottom: 12%;
    animation: homeFloatThree 6.6s ease-in-out infinite;
}

@keyframes homeFloatOne {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

@keyframes homeFloatTwo {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

@keyframes homeFloatThree {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

.home-section-padding {
    padding: 105px 0;
}

.home-section-container {
    max-width: 1180px;
}

.home-section-heading {
    max-width: 760px;
    margin: 0 auto;
}

.home-section-label {
    display: inline-flex;
    padding: 7px 14px;
    border-radius: 999px;
    background: #e7f3ec;
    color: var(--home-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.home-section-heading h2 {
    margin: 17px 0 14px;
    color: var(--home-primary-dark);
    font-size: clamp(31px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -1px;
}

.home-section-heading p {
    max-width: 680px;
    margin: 0 auto;
    color: var(--home-muted);
    font-size: 13px;
    line-height: 1.85;
}


/* =========================================================
   ABOUT
========================================================= */

.home-about-section {
    position: relative;
    background: #ffffff;
}

.home-info-card {
    position: relative;
    overflow: hidden;
    min-height: 265px;
    padding: 29px;
    border: 1px solid var(--home-border);
    border-radius: 23px;
    background:
        linear-gradient(
            155deg,
            #ffffff,
            #f8fbf9
        );
    box-shadow: 0 13px 35px rgba(22, 71, 52, 0.06);
    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease,
        border-color 0.24s ease;
}

.home-info-card::before {
    content: "";
    position: absolute;
    top: -65px;
    right: -65px;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: rgba(95, 170, 124, 0.07);
}

.home-info-card:hover {
    border-color: #bcd8c9;
    transform: translateY(-7px);
    box-shadow: 0 22px 45px rgba(22, 71, 52, 0.11);
}

.home-info-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 59px;
    height: 59px;
    margin-bottom: 23px;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #eaf6ef,
            #dcefe5
        );
    font-size: 27px;
}

.home-info-card h3 {
    position: relative;
    margin: 0 0 12px;
    color: var(--home-primary-dark);
    font-size: 17px;
    font-weight: 700;
}

.home-info-card p {
    position: relative;
    margin: 0;
    color: #718078;
    font-size: 11px;
    line-height: 1.85;
}


/* =========================================================
   FEATURES
========================================================= */

.home-features-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #f3f8f5 0%,
            #edf5f1 100%
        );
}

.home-features-section::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -130px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(112, 181, 139, 0.08);
}

.home-feature-card {
    position: relative;
    overflow: hidden;
    min-height: 290px;
    padding: 27px;
    border: 1px solid rgba(31, 106, 78, 0.10);
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 32px rgba(22, 71, 52, 0.055);
    backdrop-filter: blur(8px);
    transition:
        transform 0.24s ease,
        box-shadow 0.24s ease,
        border-color 0.24s ease;
}

.home-feature-card:hover {
    border-color: #a9cfba;
    transform: translateY(-7px);
    box-shadow: 0 22px 45px rgba(22, 71, 52, 0.11);
}

.home-feature-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    margin-bottom: 26px;
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            var(--home-primary-dark),
            var(--home-primary)
        );
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(31, 106, 78, 0.18);
}

.home-feature-card h3 {
    margin: 0 0 12px;
    color: var(--home-primary-dark);
    font-size: 16px;
    font-weight: 700;
}

.home-feature-card p {
    margin: 0;
    color: #718078;
    font-size: 11px;
    line-height: 1.85;
}


/* =========================================================
   CTA
========================================================= */

.home-cta-section {
    padding: 80px 0;
    background: #ffffff;
}

.home-cta-card {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
    overflow: hidden;
    min-height: 280px;
    padding: 53px 58px;
    border-radius: 31px;
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(255, 255, 255, 0.18),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #153f2f 0%,
            #1f6a4e 56%,
            #3c9470 100%
        );
    color: #ffffff;
    box-shadow: 0 28px 60px rgba(22, 71, 52, 0.21);
}

.home-cta-card::after {
    content: "";
    position: absolute;
    right: -75px;
    bottom: -95px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
}

.home-cta-content,
.home-cta-button {
    position: relative;
    z-index: 2;
}

.home-cta-label {
    display: inline-flex;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.88);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.home-cta-content h2 {
    max-width: 650px;
    margin: 17px 0 11px;
    color: #ffffff;
    font-size: clamp(29px, 3.5vw, 42px);
    font-weight: 700;
    line-height: 1.28;
}

.home-cta-content p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    line-height: 1.75;
}

.home-cta-button {
    flex: 0 0 auto;
    min-width: 180px;
    border: none;
    border-radius: 999px;
    color: var(--home-primary-dark);
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.home-cta-button:hover {
    color: var(--home-primary);
    transform: translateY(-3px);
}


/* =========================================================
   FOOTER
========================================================= */

.home-main-footer {
    background: #102f24;
    color: #ffffff;
}

.home-developer-section {
    padding: 62px 25px 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    text-align: center;
}

.home-developer-section h4 {
    margin: 0 0 9px;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.home-developer-section > p {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
}

.home-developer-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    max-width: 720px;
    margin: 28px auto 22px;
    padding: 23px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.045);
}

.home-developer-team span {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 9px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.home-developer-team strong {
    color: rgba(255, 255, 255, 0.88);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.home-developer-section small {
    color: rgba(255, 255, 255, 0.42);
    font-size: 9px;
}

.home-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 33px 25px;
}

.home-footer-brand h3 {
    margin: 0 0 5px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
}

.home-footer-brand p {
    margin: 0;
    color: rgba(255, 255, 255, 0.50);
    font-size: 9px;
}

.home-footer-copyright {
    color: rgba(255, 255, 255, 0.43);
    font-size: 9px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .home-navbar-collapse {
        margin-top: 14px;
        padding: 15px;
        border: 1px solid var(--home-border);
        border-radius: 17px;
        background: #ffffff;
        box-shadow: 0 14px 32px rgba(22, 71, 52, 0.08);
    }

    .home-nav-link {
        padding: 11px 10px !important;
    }

    .home-hero-section {
        padding-top: 100px;
    }

    .home-hero-section .row {
        min-height: auto !important;
    }

    .home-hero-content {
        padding-top: 70px;
        text-align: center;
    }

    .home-hero-title,
    .home-hero-description {
        margin-right: auto;
        margin-left: auto;
    }

    .home-hero-buttons,
    .home-hero-trust {
        justify-content: center;
    }

    .home-hero-image-wrapper {
        max-width: 650px;
        min-height: 460px;
        margin-top: 10px;
    }

    .home-hero-image-wrapper::before {
        right: 50%;
        width: 330px;
        height: 330px;
        transform: translate(50%, -50%);
    }

    .home-floating-card-one {
        left: 7%;
    }

    .home-floating-card-two {
        right: 7%;
    }

    .home-floating-card-three {
        right: 7%;
    }

    .home-section-padding {
        padding: 85px 0;
    }

    .home-cta-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 45px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .home-navbar {
        min-height: 70px;
    }

    .home-logo {
        font-size: 23px;
    }

    .home-hero-section {
        padding-top: 88px;
    }

    .home-hero-content {
        padding-top: 50px;
    }

    .home-hero-badge {
        font-size: 10px;
    }

    .home-hero-title {
        margin-top: 21px;
        font-size: 44px;
        letter-spacing: -1.7px;
    }

    .home-hero-description {
        font-size: 13px;
        line-height: 1.8;
    }

    .home-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .home-hero-buttons .btn {
        width: 100%;
    }

    .home-hero-trust {
        gap: 13px;
    }

    .home-trust-item {
        font-size: 9px;
    }

    .home-hero-image-wrapper {
        min-height: 430px;
    }

    .home-hero-image-wrapper::before {
        width: 255px;
        height: 255px;
    }

    .home-hero-image-wrapper::after {
        display: none;
    }

    .home-floating-card {
        min-width: 178px;
        padding: 13px;
        border-radius: 16px;
    }

    .home-floating-card-icon {
        flex-basis: 41px;
        width: 41px;
        height: 41px;
        font-size: 20px;
    }

    .home-floating-card-content strong {
        font-size: 10px;
    }

    .home-floating-card-content small {
        font-size: 8px;
    }

    .home-floating-card-one {
        top: 43%;
        left: 0;
    }

    .home-floating-card-two {
        top: 10%;
        right: 0;
    }

    .home-floating-card-three {
        right: 0;
        bottom: 8%;
    }

    .home-section-padding {
        padding: 70px 0;
    }

    .home-section-heading h2 {
        font-size: 31px;
    }

    .home-info-card,
    .home-feature-card {
        min-height: auto;
        padding: 24px;
    }

    .home-cta-section {
        padding: 55px 0;
    }

    .home-cta-card {
        padding: 34px 25px;
        border-radius: 24px;
        text-align: center;
    }

    .home-cta-content h2 {
        font-size: 29px;
    }

    .home-cta-button {
        width: 100%;
    }

    .home-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .home-floating-card-one,
    .home-floating-card-two,
    .home-floating-card-three {
        animation: none;
    }

    .home-body *,
    .home-body *::before,
    .home-body *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   INVENTORY MANAGEMENT
   UNIQUE PREFIX: inv-manage-
========================================================= */

.inv-manage-body {
    margin: 0;
    min-height: 100vh;
    background: #f3f7f5;
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.inv-manage-body *,
.inv-manage-body *::before,
.inv-manage-body *::after {
    box-sizing: border-box;
}

.inv-manage-layout {
    display: flex;
    min-height: 100vh;
}


/* SIDEBAR */

.inv-manage-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: 250px;
    height: 100vh;
    overflow-y: auto;
    background:
        linear-gradient(
            180deg,
            #123d2d 0%,
            #174b38 55%,
            #1d5f48 100%
        );
    color: #ffffff;
}

.inv-manage-sidebar-header {
    padding: 27px 24px 23px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.inv-manage-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
}

.inv-manage-sidebar-logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 23px;
}

.inv-manage-sidebar-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    padding: 24px 16px;
}

.inv-manage-nav-label {
    margin: 0 11px 8px;
    color: rgba(255, 255, 255, 0.43);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.inv-manage-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 45px;
    padding: 11px 14px;
    border-radius: 13px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
}

.inv-manage-nav-link > span {
    width: 22px;
    font-size: 16px;
    text-align: center;
}

.inv-manage-nav-link:hover,
.inv-manage-nav-link.active {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
}

.inv-manage-nav-link.active {
    box-shadow: inset 3px 0 0 #9fd6c0;
}

.inv-manage-logout-link {
    margin-top: auto;
    color: #ffd3cf;
}


/* MAIN */

.inv-manage-main {
    width: calc(100% - 250px);
    min-height: 100vh;
    margin-left: 250px;
}

.inv-manage-topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    min-height: 73px;
    padding: 13px 31px;
    border-bottom: 1px solid #e2eae6;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
}

.inv-manage-topbar-title span,
.inv-manage-topbar-title strong {
    display: block;
}

.inv-manage-topbar-title span {
    margin-bottom: 2px;
    color: #89958f;
    font-size: 9px;
}

.inv-manage-topbar-title strong {
    color: #234236;
    font-size: 12px;
}

.inv-manage-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 17px;
    border: 1px solid #164734;
    border-radius: 25px;
    color: #164734;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.inv-manage-topbar-btn:hover {
    background: #164734;
    color: #ffffff;
}

.inv-manage-content {
    padding: 31px;
}


/* ALERT */

.inv-manage-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 10px;
}

.inv-manage-alert > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-weight: 700;
}

.inv-manage-alert-success {
    border: 1px solid #b9dfca;
    background: #eaf8f0;
    color: #216b48;
}

.inv-manage-alert-error {
    border: 1px solid #efc5c1;
    background: #fff0ef;
    color: #a13a32;
}


/* HERO */

.inv-manage-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 22px;
    padding: 30px 34px;
    border-radius: 25px;
    background:
        linear-gradient(
            135deg,
            #164734 0%,
            #205d47 55%,
            #2f8f75 100%
        );
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(22, 71, 52, 0.14);
}

.inv-manage-hero-label {
    display: inline-flex;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.inv-manage-hero h1 {
    margin: 14px 0 7px;
    font-size: 30px;
}

.inv-manage-hero p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
}

.inv-manage-hero-actions {
    display: flex;
    align-items: center;
    gap: 13px;
}

.inv-manage-hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 28px;
}

.inv-manage-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 19px;
    border-radius: 25px;
    background: #ffffff;
    color: #164734;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}


/* SUMMARY */

.inv-manage-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 22px;
}

.inv-manage-summary-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 105px;
    padding: 17px;
    border: 1px solid #e4ece7;
    border-radius: 18px;
    background: #ffffff;
}

.inv-manage-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #e6f2ec;
    font-size: 20px;
}

.inv-manage-summary-card span,
.inv-manage-summary-card strong {
    display: block;
}

.inv-manage-summary-card span {
    margin-bottom: 3px;
    color: #849189;
    font-size: 9px;
}

.inv-manage-summary-card strong {
    color: #164734;
    font-size: 23px;
}


/* FILTER */

.inv-manage-filter-card {
    margin-bottom: 22px;
    padding: 19px;
    border: 1px solid #e4ece7;
    border-radius: 18px;
    background: #ffffff;
}

.inv-manage-filter-form {
    display: grid;
    grid-template-columns:
        minmax(230px, 1fr)
        180px
        180px
        auto;
    align-items: end;
    gap: 15px;
}

.inv-manage-filter-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.inv-manage-filter-field label {
    color: #344b41;
    font-size: 10px;
    font-weight: 600;
}

.inv-manage-filter-field input,
.inv-manage-filter-field select {
    width: 100%;
    min-height: 43px;
    padding: 10px 13px;
    border: 1px solid #d9e4de;
    border-radius: 11px;
    outline: none;
    background: #fbfcfb;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
}

.inv-manage-filter-field input:focus,
.inv-manage-filter-field select:focus {
    border-color: #2f8f75;
    box-shadow: 0 0 0 3px rgba(47, 143, 117, 0.1);
}

.inv-manage-filter-actions {
    display: flex;
    gap: 8px;
}

.inv-manage-filter-btn,
.inv-manage-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 9px 16px;
    border-radius: 24px;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.inv-manage-filter-btn {
    border: none;
    background: #164734;
    color: #ffffff;
}

.inv-manage-reset-btn {
    border: 1px solid #b8c5be;
    background: #ffffff;
    color: #586a60;
}


/* SECTION */

.inv-manage-section {
    padding: 24px;
    border: 1px solid #e4ece7;
    border-radius: 22px;
    background: #ffffff;
}

.inv-manage-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 19px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e9efec;
}

.inv-manage-section-heading h2 {
    margin: 0 0 3px;
    color: #164734;
    font-size: 19px;
}

.inv-manage-section-heading p {
    margin: 0;
    color: #86918b;
    font-size: 9px;
}

.inv-manage-secondary-create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 17px;
    border-radius: 24px;
    background: #164734;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}


/* TABLE */

.inv-manage-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.inv-manage-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.inv-manage-table th {
    padding: 14px;
    border-bottom: 1px solid #dfe8e3;
    background: #f6faf8;
    color: #5b6b62;
    font-size: 8px;
    letter-spacing: 0.7px;
    text-align: left;
    text-transform: uppercase;
}

.inv-manage-table td {
    padding: 15px 14px;
    border-bottom: 1px solid #edf2ef;
    vertical-align: middle;
}

.inv-manage-table tbody tr:hover {
    background: #fafcfb;
}

.inv-manage-name-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}

.inv-manage-inventory-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: #e5f2eb;
    font-size: 19px;
}

.inv-manage-name-cell strong,
.inv-manage-name-cell small {
    display: block;
}

.inv-manage-name-cell strong {
    color: #234236;
    font-size: 10px;
}

.inv-manage-name-cell small {
    margin-top: 3px;
    color: #8a958f;
    font-size: 8px;
}

.inv-manage-date,
.inv-manage-admin-name {
    color: #4d6157;
    font-size: 9px;
}

.inv-manage-admin-name {
    font-weight: 600;
}

.inv-manage-badge {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 20px;
    font-size: 8px;
    font-weight: 600;
}

.inv-manage-cluster-development {
    background: #e5f5ec;
    color: #277251;
}

.inv-manage-cluster-recovery {
    background: #e7eefb;
    color: #355f99;
}

.inv-manage-cluster-prevention {
    background: #fff3d5;
    color: #996715;
}

.inv-manage-category-group {
    background: #eee8fb;
    color: #6b4ca1;
}

.inv-manage-category-individual {
    background: #e8f2f8;
    color: #346f8d;
}

.inv-manage-participant-count strong,
.inv-manage-participant-count span {
    display: block;
}

.inv-manage-participant-count strong {
    color: #164734;
    font-size: 15px;
}

.inv-manage-participant-count span {
    color: #8b9690;
    font-size: 8px;
}

.inv-manage-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.inv-manage-edit-btn,
.inv-manage-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 20px;
    font-family: "Poppins", sans-serif;
    font-size: 8px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.inv-manage-edit-btn {
    border: 1px solid #2f8f75;
    background: #ffffff;
    color: #2f8f75;
}

.inv-manage-delete-btn {
    border: none;
    background: #d85e55;
    color: #ffffff;
}


/* EMPTY */

.inv-manage-empty-state {
    padding: 55px 25px;
    text-align: center;
}

.inv-manage-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    border-radius: 21px;
    background: #e7f3ed;
    font-size: 32px;
}

.inv-manage-empty-state h3 {
    margin: 0 0 7px;
    color: #164734;
    font-size: 17px;
}

.inv-manage-empty-state p {
    color: #7c8982;
    font-size: 10px;
}

.inv-manage-empty-btn {
    display: inline-flex;
    margin-top: 10px;
    padding: 9px 18px;
    border-radius: 24px;
    background: #164734;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .inv-manage-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inv-manage-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .inv-manage-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 850px) {

    .inv-manage-sidebar {
        position: static;
        width: 100%;
        height: auto;
    }

    .inv-manage-layout {
        flex-direction: column;
    }

    .inv-manage-main {
        width: 100%;
        margin-left: 0;
    }

    .inv-manage-sidebar-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inv-manage-nav-label {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {

    .inv-manage-content {
        padding: 19px;
    }

    .inv-manage-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 25px 22px;
    }

    .inv-manage-hero h1 {
        font-size: 25px;
    }

    .inv-manage-hero-actions {
        width: 100%;
    }

    .inv-manage-hero-icon {
        display: none;
    }

    .inv-manage-create-btn {
        width: 100%;
    }

    .inv-manage-summary-grid {
        grid-template-columns: 1fr;
    }

    .inv-manage-filter-form {
        grid-template-columns: 1fr;
    }

    .inv-manage-filter-actions {
        grid-column: auto;
        flex-direction: column;
    }

    .inv-manage-filter-btn,
    .inv-manage-reset-btn {
        width: 100%;
    }

    .inv-manage-section {
        padding: 18px;
    }

    .inv-manage-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .inv-manage-secondary-create {
        width: 100%;
    }

    .inv-manage-sidebar-nav {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ADD INVENTORY
   UNIQUE PREFIX: inv-add-
========================================================= */

.inv-add-body {
    margin: 0;
    min-height: 100vh;
    background: #f3f7f5;
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.inv-add-body *,
.inv-add-body *::before,
.inv-add-body *::after {
    box-sizing: border-box;
}

.inv-add-page {
    min-height: 100vh;
    padding: 36px;
}

.inv-add-container {
    width: 100%;
    max-width: 930px;
    margin: 0 auto;
}

.inv-add-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 27px;
}

.inv-add-logo {
    color: #164734;
    font-size: 25px;
    font-weight: 700;
    text-decoration: none;
}

.inv-add-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 18px;
    border: 1px solid #164734;
    border-radius: 24px;
    color: #164734;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.inv-add-back-btn:hover {
    background: #164734;
    color: #ffffff;
}

.inv-add-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 22px;
    padding: 31px 35px;
    border-radius: 25px;
    background: linear-gradient(
        135deg,
        #164734,
        #205d47,
        #2f8f75
    );
    color: #ffffff;
    box-shadow: 0 16px 38px rgba(22, 71, 52, 0.14);
}

.inv-add-header-label {
    display: inline-flex;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.inv-add-header h1 {
    margin: 14px 0 7px;
    font-size: 31px;
}

.inv-add-header p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    line-height: 1.7;
}

.inv-add-header-icon {
    display: flex;
    flex: 0 0 70px;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 21px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 32px;
}

.inv-add-card {
    padding: 29px;
    border: 1px solid #e4ece7;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(22, 71, 52, 0.07);
}

.inv-add-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 19px;
    padding: 13px 16px;
    border: 1px solid #efc5c1;
    border-radius: 13px;
    background: #fff0ef;
    color: #a13a32;
    font-size: 10px;
}

.inv-add-alert > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #f5d5d2;
    font-weight: 700;
}

.inv-add-card-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
    padding-bottom: 19px;
    border-bottom: 1px solid #e9efec;
}

.inv-add-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border-radius: 15px;
    background: #e5f2eb;
    font-size: 21px;
}

.inv-add-card-heading h2 {
    margin: 0 0 3px;
    color: #164734;
    font-size: 19px;
}

.inv-add-card-heading p {
    margin: 0;
    color: #86918b;
    font-size: 10px;
}

.inv-add-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.inv-add-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inv-add-full-field {
    grid-column: 1 / -1;
}

.inv-add-field label {
    color: #344b41;
    font-size: 11px;
    font-weight: 600;
}

.inv-add-field label span {
    margin-left: 4px;
    color: #8c9691;
    font-size: 9px;
    font-weight: 400;
}

.inv-add-field input,
.inv-add-field select,
.inv-add-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d9e4de;
    border-radius: 12px;
    outline: none;
    background: #fbfcfb;
    color: #2f4139;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
}

.inv-add-field input,
.inv-add-field select {
    min-height: 47px;
}

.inv-add-field textarea {
    resize: vertical;
    line-height: 1.7;
}

.inv-add-field input:focus,
.inv-add-field select:focus,
.inv-add-field textarea:focus {
    border-color: #2f8f75;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(47, 143, 117, 0.1);
}

.inv-add-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #e9efec;
}

.inv-add-cancel-btn,
.inv-add-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 21px;
    border-radius: 27px;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.inv-add-cancel-btn {
    border: 1px solid #b8c5be;
    background: #ffffff;
    color: #586a60;
}

.inv-add-submit-btn {
    border: none;
    background: #164734;
    color: #ffffff;
}

.inv-add-submit-btn:hover {
    background: #2f8f75;
}

@media (max-width: 650px) {

    .inv-add-page {
        padding: 20px;
    }

    .inv-add-header {
        padding: 26px 22px;
    }

    .inv-add-header-icon {
        display: none;
    }

    .inv-add-card {
        padding: 22px;
    }

    .inv-add-grid {
        grid-template-columns: 1fr;
    }

    .inv-add-full-field {
        grid-column: auto;
    }

    .inv-add-actions {
        flex-direction: column-reverse;
    }

    .inv-add-cancel-btn,
    .inv-add-submit-btn {
        width: 100%;
    }
}

.screening-inventory-info {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
    padding: 18px;
    border: 1px solid #dfe9e3;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(22, 71, 52, 0.05);
}

.screening-inventory-info > div {
    padding: 13px 14px;
    border-radius: 13px;
    background: #f5faf7;
}

.screening-inventory-info span,
.screening-inventory-info strong {
    display: block;
}

.screening-inventory-info span {
    margin-bottom: 4px;
    color: #87928c;
    font-size: 9px;
}

.screening-inventory-info strong {
    color: #164734;
    font-size: 11px;
    font-weight: 600;
}

@media (max-width: 760px) {
    .screening-inventory-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .screening-inventory-info {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   KPT INVENTORY REPORT
   UNIQUE PREFIX: kpt-report-
========================================================= */

.kpt-report-body {
    margin: 0;
    min-height: 100vh;
    background: #f3f7f5;
    color: #263c34;
    font-family: "Poppins", sans-serif;
}

.kpt-report-body *,
.kpt-report-body *::before,
.kpt-report-body *::after {
    box-sizing: border-box;
}

.kpt-report-page {
    min-height: 100vh;
    padding: 32px;
}

.kpt-report-container {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.kpt-report-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
}

.kpt-report-topbar span {
    display: block;
    margin-bottom: 4px;
    color: #859189;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.kpt-report-topbar h1 {
    margin: 0;
    color: #164734;
    font-size: 28px;
}

.kpt-report-topbar-actions {
    display: flex;
    gap: 10px;
}

.kpt-report-back-btn,
.kpt-report-print-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 18px;
    border-radius: 24px;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.kpt-report-back-btn {
    border: 1px solid #164734;
    background: #ffffff;
    color: #164734;
}

.kpt-report-print-btn {
    border: none;
    background: #164734;
    color: #ffffff;
}

.kpt-report-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 22px;
}

.kpt-report-summary-card {
    padding: 18px;
    border: 1px solid #e2ebe6;
    border-radius: 17px;
    background: #ffffff;
}

.kpt-report-summary-card span,
.kpt-report-summary-card strong {
    display: block;
}

.kpt-report-summary-card span {
    margin-bottom: 5px;
    color: #87928c;
    font-size: 9px;
}

.kpt-report-summary-card strong {
    color: #164734;
    font-size: 24px;
}

.kpt-report-filter-card {
    margin-bottom: 22px;
    padding: 19px;
    border: 1px solid #e2ebe6;
    border-radius: 18px;
    background: #ffffff;
}

.kpt-report-filter-form {
    display: grid;
    grid-template-columns:
        160px
        160px
        190px
        190px
        auto;
    align-items: end;
    gap: 14px;
}

.kpt-report-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.kpt-report-field label {
    color: #344b41;
    font-size: 9px;
    font-weight: 600;
}

.kpt-report-field input,
.kpt-report-field select {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #d9e4de;
    border-radius: 11px;
    background: #fbfcfb;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
}

.kpt-report-filter-actions {
    display: flex;
    gap: 8px;
}

.kpt-report-filter-btn,
.kpt-report-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 16px;
    border-radius: 23px;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
}

.kpt-report-filter-btn {
    border: none;
    background: #164734;
    color: #ffffff;
}

.kpt-report-reset-btn {
    border: 1px solid #b8c5be;
    background: #ffffff;
    color: #586a60;
}

.kpt-report-table-card {
    padding: 23px;
    border: 1px solid #e2ebe6;
    border-radius: 20px;
    background: #ffffff;
}

.kpt-report-table-heading {
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9efec;
}

.kpt-report-table-heading h2 {
    margin: 0 0 4px;
    color: #164734;
    font-size: 19px;
}

.kpt-report-table-heading p {
    margin: 0;
    color: #87928c;
    font-size: 9px;
}

.kpt-report-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.kpt-report-table {
    width: 100%;
    min-width: 1800px;
    border-collapse: collapse;
}

.kpt-report-table th,
.kpt-report-table td {
    border: 1px solid #dfe7e2;
    padding: 10px 9px;
    text-align: center;
}

.kpt-report-table th {
    background: #eef5f1;
    color: #40554b;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.kpt-report-table td {
    color: #53665c;
    font-size: 8px;
}

.kpt-report-table tbody tr:nth-child(even) {
    background: #fafcfb;
}

.kpt-report-total-cell {
    background: #e9f5ef;
    color: #164734 !important;
    font-weight: 700;
}

.kpt-report-empty {
    padding: 55px 20px;
    text-align: center;
}

.kpt-report-empty h3 {
    margin: 0 0 7px;
    color: #164734;
    font-size: 17px;
}

.kpt-report-empty p {
    margin: 0;
    color: #7d8982;
    font-size: 10px;
}

@media (max-width: 900px) {

    .kpt-report-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpt-report-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpt-report-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {

    .kpt-report-page {
        padding: 18px;
    }

    .kpt-report-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .kpt-report-topbar-actions {
        width: 100%;
    }

    .kpt-report-back-btn,
    .kpt-report-print-btn {
        flex: 1;
    }

    .kpt-report-summary-grid,
    .kpt-report-filter-form {
        grid-template-columns: 1fr;
    }

    .kpt-report-filter-actions {
        grid-column: auto;
        flex-direction: column;
    }
}

@media print {

    .kpt-report-topbar-actions,
    .kpt-report-filter-card {
        display: none !important;
    }

    .kpt-report-body {
        background: #ffffff;
    }

    .kpt-report-page {
        padding: 0;
    }

    .kpt-report-table-card {
        border: none;
        box-shadow: none;
    }

    .kpt-report-table {
        min-width: 100%;
    }

    @page {
        size: landscape;
        margin: 8mm;
    }
}

.inv-manage-report-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 19px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    backdrop-filter: blur(8px);
}

.inv-manage-report-btn:hover {
    background: #ffffff;
    color: #164734;
}

.kpt-report-export-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 18px;
    border: 1px solid #2f8f75;
    border-radius: 24px;
    background: #e8f5ef;
    color: #246f54;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.kpt-report-export-btn:hover {
    background: #2f8f75;
    color: #ffffff;
}

/* =========================================================
   ADMIN REPORT - KPT BUTTON
========================================================= */

.admin-kpt-report-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid #2f8f75;
    border-radius: 25px;
    background: #e8f5ef;
    color: #246f54;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.admin-kpt-report-button:hover {
    border-color: #2f8f75;
    background: #2f8f75;
    color: #ffffff;
    transform: translateY(-1px);
}

@media (max-width: 680px) {

    .admin-report-header-actions {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .admin-kpt-report-button,
    .admin-report-header-actions .btn {
        width: 100%;
    }
}

/* =========================================================
   ADMIN REPORT DEMOGRAPHICS
========================================================= */

.admin-demographic-section {
    margin-bottom: 26px;
    padding: 24px;
    border: 1px solid #e2ebe6;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(22, 71, 52, 0.055);
}

.admin-demographic-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e9efec;
}

.admin-demographic-heading h2 {
    margin: 10px 0 5px;
    color: #164734;
    font-size: 20px;
    font-weight: 700;
}

.admin-demographic-heading p {
    margin: 0;
    color: #7d8982;
    font-size: 10px;
    line-height: 1.7;
}

.admin-demographic-report-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    padding: 9px 16px;
    border: 1px solid #2f8f75;
    border-radius: 23px;
    background: #e9f5ef;
    color: #246f54;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.admin-demographic-report-link:hover {
    background: #2f8f75;
    color: #ffffff;
}

.admin-demographic-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.admin-demographic-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 112px;
    padding: 17px;
    border: 1px solid #e5ece8;
    border-radius: 17px;
    background: #f9fcfa;
}

.admin-demographic-icon {
    display: flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #e4f2eb;
    font-size: 21px;
}

.admin-demographic-card span,
.admin-demographic-card strong,
.admin-demographic-card small {
    display: block;
}

.admin-demographic-card span {
    margin-bottom: 3px;
    color: #7d8982;
    font-size: 9px;
}

.admin-demographic-card strong {
    margin-bottom: 3px;
    color: #164734;
    font-size: 22px;
    font-weight: 700;
}

.admin-demographic-card small {
    color: #919b95;
    font-size: 8px;
    line-height: 1.5;
}

@media (max-width: 1050px) {

    .admin-demographic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {

    .admin-demographic-heading {
        flex-direction: column;
    }

    .admin-demographic-report-link {
        width: 100%;
    }

    .admin-demographic-grid {
        grid-template-columns: 1fr;
    }
}

@media print {

    .admin-demographic-report-link {
        display: none;
    }
}

/* =========================================================
   ADMIN REPORT DEMOGRAPHIC SECTION
========================================================= */

.admin-dashboard-content .admin-demographic-section {
    width: 100%;
    margin: 0 0 26px;
    padding: 24px;
    border: 1px solid #e2ebe6;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(22, 71, 52, 0.06);
}

.admin-dashboard-content .admin-demographic-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e9efec;
}

.admin-dashboard-content .admin-demographic-heading h2 {
    margin: 10px 0 5px;
    color: #164734;
    font-size: 20px;
    font-weight: 700;
}

.admin-dashboard-content .admin-demographic-heading p {
    margin: 0;
    color: #7d8982;
    font-size: 10px;
    line-height: 1.7;
}

.admin-dashboard-content .admin-demographic-report-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    padding: 9px 16px;
    border: 1px solid #2f8f75;
    border-radius: 23px;
    background: #e9f5ef;
    color: #246f54;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.admin-dashboard-content .admin-demographic-report-link:hover {
    background: #2f8f75;
    color: #ffffff;
}

.admin-dashboard-content .admin-demographic-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.admin-dashboard-content .admin-demographic-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    min-height: 112px;
    padding: 17px;
    border: 1px solid #e5ece8;
    border-radius: 17px;
    background: #f9fcfa;
}

.admin-dashboard-content .admin-demographic-icon {
    display: flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #e4f2eb;
    font-size: 21px;
}

.admin-dashboard-content .admin-demographic-card > div:last-child {
    min-width: 0;
}

.admin-dashboard-content .admin-demographic-card span,
.admin-dashboard-content .admin-demographic-card strong,
.admin-dashboard-content .admin-demographic-card small {
    display: block;
}

.admin-dashboard-content .admin-demographic-card span {
    margin-bottom: 4px;
    color: #7d8982;
    font-size: 9px;
}

.admin-dashboard-content .admin-demographic-card strong {
    margin-bottom: 4px;
    color: #164734;
    font-size: 22px;
    font-weight: 700;
}

.admin-dashboard-content .admin-demographic-card small {
    color: #919b95;
    font-size: 8px;
    line-height: 1.5;
}

@media (max-width: 1100px) {

    .admin-dashboard-content .admin-demographic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {

    .admin-dashboard-content .admin-demographic-heading {
        flex-direction: column;
    }

    .admin-dashboard-content .admin-demographic-report-link {
        width: 100%;
    }

    .admin-dashboard-content .admin-demographic-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   REPORT DEMOGRAPHICS
   UNIQUE PREFIX: report-demo-
========================================================= */

.report-demo-section {
    width: 100%;
    margin: 0 0 26px;
    padding: 24px;
    border: 1px solid #e2ebe6;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(22, 71, 52, 0.06);
}

.report-demo-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e9efec;
}

.report-demo-label {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    background: #e8f5ef;
    color: #246f54;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.report-demo-heading h2 {
    margin: 11px 0 5px;
    color: #164734;
    font-size: 20px;
    font-weight: 700;
}

.report-demo-heading p {
    margin: 0;
    color: #7d8982;
    font-size: 10px;
    line-height: 1.7;
}

.report-demo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    padding: 9px 16px;
    border: 1px solid #2f8f75;
    border-radius: 23px;
    background: #e9f5ef;
    color: #246f54;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.report-demo-link:hover {
    background: #2f8f75;
    color: #ffffff;
}

.report-demo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.report-demo-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    min-height: 112px;
    padding: 17px;
    border: 1px solid #e5ece8;
    border-radius: 17px;
    background: #f9fcfa;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.report-demo-card:hover {
    transform: translateY(-3px);
    border-color: #bdd8ca;
    box-shadow: 0 12px 24px rgba(22, 71, 52, 0.08);
}

.report-demo-icon {
    display: flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #e4f2eb;
    font-size: 21px;
}

.report-demo-content {
    min-width: 0;
}

.report-demo-content span,
.report-demo-content strong,
.report-demo-content small {
    display: block;
}

.report-demo-content span {
    margin-bottom: 4px;
    color: #7d8982;
    font-size: 9px;
}

.report-demo-content strong {
    margin-bottom: 4px;
    color: #164734;
    font-size: 22px;
    font-weight: 700;
}

.report-demo-content small {
    color: #919b95;
    font-size: 8px;
    line-height: 1.5;
}

@media (max-width: 1100px) {

    .report-demo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {

    .report-demo-heading {
        flex-direction: column;
    }

    .report-demo-link {
        width: 100%;
    }

    .report-demo-grid {
        grid-template-columns: 1fr;
    }
}

@media print {

    .report-demo-link {
        display: none;
    }
}

/* =========================================================
   APPOINTMENT PAGE
   MATCH ADMIN DASHBOARD LAYOUT
   UNIQUE PREFIX: appointment-page-
========================================================= */

.appointment-page-alert {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    padding: 14px 17px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 500;
}

.appointment-page-alert > span {
    display: flex;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    font-weight: 700;
}

.appointment-page-alert-success {
    border: 1px solid #b9dfca;
    background: #ebf8f1;
    color: #216b48;
}

.appointment-page-alert-error {
    border: 1px solid #efc5c1;
    background: #fff0ef;
    color: #a13a32;
}


/* PAGE HEADER */

.appointment-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 25px;
}

.appointment-page-label {
    display: inline-block;
    color: #2e8968;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.appointment-page-header h1 {
    margin: 13px 0 8px;
    color: #244d3b;
    font-size: clamp(31px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.15;
}

.appointment-page-header p {
    margin: 0;
    color: #718078;
    font-size: 12px;
}

.appointment-page-date-card {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
    min-width: 200px;
    padding: 17px 20px;
    border: 1px solid #e1e9e5;
    border-radius: 19px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(22, 71, 52, 0.06);
}

.appointment-page-date-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border-radius: 14px;
    background: #e5f2eb;
    font-size: 22px;
}

.appointment-page-date-card span,
.appointment-page-date-card strong {
    display: block;
}

.appointment-page-date-card span {
    margin-bottom: 3px;
    color: #8b9690;
    font-size: 8px;
    text-transform: uppercase;
}

.appointment-page-date-card strong {
    color: #2d483b;
    font-size: 11px;
}


/* SUMMARY CARDS */

.appointment-page-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.appointment-page-summary-card {
    min-width: 0;
    min-height: 205px;
    padding: 26px;
    border: 1px solid #e4ece7;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(22, 71, 52, 0.06);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.appointment-page-summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(22, 71, 52, 0.10);
}

.appointment-page-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 27px;
    border-radius: 18px;
    background: #e5f2eb;
    font-size: 27px;
}

.appointment-page-summary-icon.pending {
    background: #fff4d9;
}

.appointment-page-summary-icon.approved {
    background: #e4f4eb;
}

.appointment-page-summary-icon.completed {
    background: #e8f0fb;
}

.appointment-page-summary-card span,
.appointment-page-summary-card strong,
.appointment-page-summary-card small {
    display: block;
}

.appointment-page-summary-card span {
    margin-bottom: 8px;
    color: #68776f;
    font-size: 12px;
    font-weight: 600;
}

.appointment-page-summary-card strong {
    margin-bottom: 7px;
    color: #164734;
    font-size: 34px;
    line-height: 1;
}

.appointment-page-summary-card small {
    color: #9aa39e;
    font-size: 9px;
    line-height: 1.6;
}


/* FILTER */

.appointment-page-filter-card {
    margin-bottom: 25px;
    padding: 21px;
    border: 1px solid #e2ebe6;
    border-radius: 19px;
    background: #ffffff;
}

.appointment-page-filter-form {
    display: grid;
    grid-template-columns:
        minmax(280px, 1fr)
        210px
        auto;
    align-items: end;
    gap: 15px;
}

.appointment-page-filter-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.appointment-page-filter-field label {
    color: #42564c;
    font-size: 9px;
    font-weight: 600;
}

.appointment-page-filter-field input,
.appointment-page-filter-field select {
    width: 100%;
    min-height: 45px;
    padding: 11px 14px;
    border: 1px solid #d9e4de;
    border-radius: 12px;
    outline: none;
    background: #fbfcfb;
    color: #34483e;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
}

.appointment-page-filter-field input:focus,
.appointment-page-filter-field select:focus {
    border-color: #2f8f75;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(47, 143, 117, 0.10);
}

.appointment-page-filter-actions {
    display: flex;
    gap: 9px;
}

.appointment-page-filter-button,
.appointment-page-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 10px 18px;
    border-radius: 25px;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
}

.appointment-page-filter-button {
    border: none;
    background: #164734;
    color: #ffffff;
}

.appointment-page-reset-button {
    border: 1px solid #b8c5be;
    background: #ffffff;
    color: #5c6c63;
}


/* LIST SECTION */

.appointment-page-list-section {
    padding: 25px;
    border: 1px solid #e2ebe6;
    border-radius: 22px;
    background: #ffffff;
}

.appointment-page-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 21px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e9efec;
}

.appointment-page-section-heading h2 {
    margin: 9px 0 0;
    color: #164734;
    font-size: 21px;
    font-weight: 700;
}

.appointment-page-record-count {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: #edf6f1;
    color: #39745a;
    font-size: 8px;
    font-weight: 600;
}


/* APPOINTMENT CARDS */

.appointment-page-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.appointment-page-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid #e3ebe6;
    border-radius: 20px;
    background: #fbfdfc;
    box-shadow: 0 10px 26px rgba(22, 71, 52, 0.045);
}

.appointment-page-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9efec;
}

.appointment-page-student {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.appointment-page-student-avatar {
    display: flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #dfeee6;
    color: #164734;
    font-size: 15px;
    font-weight: 700;
}

.appointment-page-student h3 {
    margin: 0 0 4px;
    overflow: hidden;
    color: #28483a;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointment-page-student p {
    margin: 0;
    color: #8b9690;
    font-size: 9px;
}

.appointment-page-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 600;
}

.appointment-page-status-pending {
    background: #fff3d7;
    color: #936410;
}

.appointment-page-status-approved {
    background: #e4f4eb;
    color: #26704f;
}

.appointment-page-status-completed {
    background: #e6effa;
    color: #386b9d;
}

.appointment-page-status-cancelled {
    background: #fde8e5;
    color: #b64c43;
}


/* DETAILS */

.appointment-page-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 16px;
}

.appointment-page-detail-grid > div {
    min-width: 0;
    padding: 12px;
    border-radius: 13px;
    background: #f1f7f4;
}

.appointment-page-detail-grid span,
.appointment-page-detail-grid strong {
    display: block;
}

.appointment-page-detail-grid span {
    margin-bottom: 5px;
    color: #8a958f;
    font-size: 8px;
}

.appointment-page-detail-grid strong {
    overflow-wrap: anywhere;
    color: #344d41;
    font-size: 9px;
    font-weight: 600;
}

.appointment-page-reason,
.appointment-page-admin-note {
    margin-bottom: 15px;
    padding: 14px;
    border-radius: 14px;
}

.appointment-page-reason {
    background: #f4f7f5;
}

.appointment-page-admin-note {
    border: 1px solid #cce3d7;
    background: #edf7f2;
}

.appointment-page-reason > span,
.appointment-page-admin-note > span {
    display: block;
    margin-bottom: 7px;
    color: #385347;
    font-size: 9px;
    font-weight: 700;
}

.appointment-page-reason p,
.appointment-page-admin-note p {
    margin: 0;
    color: #66766e;
    font-size: 9px;
    line-height: 1.7;
}


/* UPDATE FORM */

.appointment-page-update-form {
    padding-top: 16px;
    border-top: 1px solid #e9efec;
}

.appointment-page-update-grid {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 13px;
}

.appointment-page-update-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.appointment-page-update-field label {
    color: #42564c;
    font-size: 8px;
    font-weight: 600;
}

.appointment-page-update-field select,
.appointment-page-update-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9e4de;
    border-radius: 11px;
    outline: none;
    background: #ffffff;
    color: #34483e;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
}

.appointment-page-update-field select {
    min-height: 42px;
}

.appointment-page-update-field textarea {
    resize: vertical;
    line-height: 1.6;
}

.appointment-page-update-field select:focus,
.appointment-page-update-field textarea:focus {
    border-color: #2f8f75;
    box-shadow: 0 0 0 3px rgba(47, 143, 117, 0.10);
}

.appointment-page-save-button {
    width: 100%;
    min-height: 42px;
    margin-top: 13px;
    border: none;
    border-radius: 24px;
    background: #164734;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
}

.appointment-page-save-button:hover {
    background: #2f8f75;
}


/* EMPTY */

.appointment-page-empty {
    padding: 65px 20px;
    text-align: center;
}

.appointment-page-empty > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 21px;
    background: #e7f3ed;
    font-size: 32px;
}

.appointment-page-empty h3 {
    margin: 0 0 7px;
    color: #164734;
    font-size: 17px;
}

.appointment-page-empty p {
    margin: 0 0 17px;
    color: #7d8982;
    font-size: 10px;
}

.appointment-page-empty a {
    display: inline-flex;
    padding: 9px 18px;
    border-radius: 24px;
    background: #164734;
    color: #ffffff;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
}


/* RESPONSIVE */

@media (max-width: 1180px) {

    .appointment-page-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .appointment-page-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {

    .appointment-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .appointment-page-date-card {
        width: 100%;
    }

    .appointment-page-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .appointment-page-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {

    .appointment-page-summary-grid {
        grid-template-columns: 1fr;
    }

    .appointment-page-summary-card {
        min-height: auto;
    }

    .appointment-page-filter-form {
        grid-template-columns: 1fr;
    }

    .appointment-page-filter-actions {
        grid-column: auto;
        flex-direction: column;
    }

    .appointment-page-filter-button,
    .appointment-page-reset-button {
        width: 100%;
    }

    .appointment-page-list-section {
        padding: 18px;
    }

    .appointment-page-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .appointment-page-card {
        padding: 18px;
    }

    .appointment-page-card-header {
        flex-direction: column;
    }

    .appointment-page-detail-grid,
    .appointment-page-update-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   INVENTORY MANAGEMENT PAGE
   MATCH ADMIN DASHBOARD
   UNIQUE PREFIX: inventory-page-
========================================================= */


/* ALERTS */

.inventory-page-alert {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    padding: 14px 17px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 500;
}

.inventory-page-alert > span {
    display: flex;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    font-weight: 700;
}

.inventory-page-alert-success {
    border: 1px solid #b9dfca;
    background: #ebf8f1;
    color: #216b48;
}

.inventory-page-alert-error {
    border: 1px solid #efc5c1;
    background: #fff0ef;
    color: #a13a32;
}


/* PAGE HEADER */

.inventory-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 25px;
}

.inventory-page-label {
    display: inline-block;
    color: #2e8968;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.inventory-page-header h1 {
    margin: 13px 0 8px;
    color: #244d3b;
    font-size: clamp(31px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.15;
}

.inventory-page-header p {
    max-width: 700px;
    margin: 0;
    color: #718078;
    font-size: 12px;
    line-height: 1.7;
}

.inventory-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.inventory-page-primary-button,
.inventory-page-report-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.inventory-page-primary-button {
    border: 1px solid #164734;
    background: #164734;
    color: #ffffff;
}

.inventory-page-report-button {
    border: 1px solid #2f8f75;
    background: #e9f5ef;
    color: #246f54;
}

.inventory-page-primary-button:hover,
.inventory-page-report-button:hover {
    transform: translateY(-2px);
}

.inventory-page-primary-button:hover {
    background: #2f8f75;
    color: #ffffff;
}

.inventory-page-report-button:hover {
    background: #2f8f75;
    color: #ffffff;
}

.inventory-page-date-card {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
    min-width: 200px;
    padding: 17px 20px;
    border: 1px solid #e1e9e5;
    border-radius: 19px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(22, 71, 52, 0.06);
}

.inventory-page-date-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border-radius: 14px;
    background: #e5f2eb;
    font-size: 22px;
}

.inventory-page-date-card span,
.inventory-page-date-card strong {
    display: block;
}

.inventory-page-date-card span {
    margin-bottom: 3px;
    color: #8b9690;
    font-size: 8px;
    text-transform: uppercase;
}

.inventory-page-date-card strong {
    color: #2d483b;
    font-size: 11px;
}


/* SUMMARY CARDS */

.inventory-page-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.inventory-page-summary-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 255px;
    padding: 26px;
    border: 1px solid #e4ece7;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(22, 71, 52, 0.06);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.inventory-page-summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(22, 71, 52, 0.10);
}

.inventory-page-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 27px;
    border-radius: 18px;
    background: #e5f2eb;
    font-size: 27px;
}

.inventory-page-summary-icon.group {
    background: #e9effa;
}

.inventory-page-summary-card span,
.inventory-page-summary-card strong,
.inventory-page-summary-card small {
    display: block;
}

.inventory-page-summary-card span {
    margin-bottom: 8px;
    color: #68776f;
    font-size: 12px;
    font-weight: 600;
}

.inventory-page-summary-card strong {
    margin-bottom: 7px;
    color: #164734;
    font-size: 34px;
    line-height: 1;
}

.inventory-page-summary-card small {
    color: #9aa39e;
    font-size: 9px;
    line-height: 1.6;
}

.inventory-page-summary-card > a {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid #edf2ef;
    color: #2b805f;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
}


/* FILTER */

.inventory-page-filter-card {
    margin-bottom: 25px;
    padding: 21px;
    border: 1px solid #e2ebe6;
    border-radius: 19px;
    background: #ffffff;
}

.inventory-page-filter-form {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        190px
        210px
        auto;
    align-items: end;
    gap: 15px;
}

.inventory-page-filter-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.inventory-page-filter-field label {
    color: #42564c;
    font-size: 9px;
    font-weight: 600;
}

.inventory-page-filter-field input,
.inventory-page-filter-field select {
    width: 100%;
    min-height: 45px;
    padding: 11px 14px;
    border: 1px solid #d9e4de;
    border-radius: 12px;
    outline: none;
    background: #fbfcfb;
    color: #34483e;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
}

.inventory-page-filter-field input:focus,
.inventory-page-filter-field select:focus {
    border-color: #2f8f75;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(47, 143, 117, 0.10);
}

.inventory-page-filter-actions {
    display: flex;
    gap: 9px;
}

.inventory-page-filter-button,
.inventory-page-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 10px 18px;
    border-radius: 25px;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
}

.inventory-page-filter-button {
    border: none;
    background: #164734;
    color: #ffffff;
}

.inventory-page-reset-button {
    border: 1px solid #b8c5be;
    background: #ffffff;
    color: #5c6c63;
}


/* LIST SECTION */

.inventory-page-list-section {
    padding: 25px;
    border: 1px solid #e2ebe6;
    border-radius: 22px;
    background: #ffffff;
}

.inventory-page-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 21px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e9efec;
}

.inventory-page-section-heading h2 {
    margin: 9px 0 0;
    color: #164734;
    font-size: 21px;
    font-weight: 700;
}

.inventory-page-section-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inventory-page-record-count {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: #edf6f1;
    color: #39745a;
    font-size: 8px;
    font-weight: 600;
}

.inventory-page-new-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 16px;
    border-radius: 22px;
    background: #164734;
    color: #ffffff;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
}


/* INVENTORY CARDS */

.inventory-page-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.inventory-page-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid #e3ebe6;
    border-radius: 20px;
    background: #fbfdfc;
    box-shadow: 0 10px 26px rgba(22, 71, 52, 0.045);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.inventory-page-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(22, 71, 52, 0.08);
}

.inventory-page-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9efec;
}

.inventory-page-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.inventory-page-card-icon {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #dfeee6;
    font-size: 22px;
}

.inventory-page-card-title h3 {
    margin: 0 0 4px;
    overflow: hidden;
    color: #28483a;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inventory-page-card-title p {
    margin: 0;
    color: #8b9690;
    font-size: 8px;
}

.inventory-page-category-badge,
.inventory-page-cluster-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 600;
}

.inventory-page-category-badge {
    flex: 0 0 auto;
    padding: 7px 11px;
}

.inventory-page-cluster-badge {
    padding: 6px 10px;
}

.inventory-page-category-group {
    background: #eee8fb;
    color: #6b4ca1;
}

.inventory-page-category-individual {
    background: #e8f2f8;
    color: #346f8d;
}

.inventory-page-cluster-development {
    background: #e5f5ec;
    color: #277251;
}

.inventory-page-cluster-recovery {
    background: #e7eefb;
    color: #355f99;
}

.inventory-page-cluster-prevention {
    background: #fff3d5;
    color: #996715;
}


/* DETAILS */

.inventory-page-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 16px;
}

.inventory-page-detail-grid > div {
    min-width: 0;
    padding: 13px;
    border-radius: 13px;
    background: #f1f7f4;
}

.inventory-page-detail-grid > div > span,
.inventory-page-detail-grid > div > strong {
    display: block;
}

.inventory-page-detail-grid > div > span {
    margin-bottom: 5px;
    color: #8a958f;
    font-size: 8px;
}

.inventory-page-detail-grid > div > strong {
    overflow-wrap: anywhere;
    color: #344d41;
    font-size: 9px;
    font-weight: 600;
}

.inventory-page-participant-value {
    color: #164734 !important;
    font-size: 16px !important;
}

.inventory-page-participant-value small {
    margin-left: 3px;
    color: #8c9891;
    font-size: 7px;
    font-weight: 400;
}


/* NOTES */

.inventory-page-note {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid #dce9e2;
    border-radius: 14px;
    background: #f5f9f7;
}

.inventory-page-note span {
    display: block;
    margin-bottom: 7px;
    color: #385347;
    font-size: 9px;
    font-weight: 700;
}

.inventory-page-note p {
    margin: 0;
    color: #66766e;
    font-size: 9px;
    line-height: 1.7;
}


/* ACTIONS */

.inventory-page-card-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px;
    padding-top: 16px;
    border-top: 1px solid #e9efec;
}

.inventory-page-edit-button,
.inventory-page-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 9px 17px;
    border-radius: 23px;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.inventory-page-edit-button {
    border: none;
    background: #164734;
    color: #ffffff;
}

.inventory-page-delete-button {
    border: 1px solid #e3a7a1;
    background: #fff3f1;
    color: #b44d44;
}

.inventory-page-delete-form {
    margin: 0;
}


/* EMPTY STATE */

.inventory-page-empty {
    padding: 65px 20px;
    text-align: center;
}

.inventory-page-empty > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 21px;
    background: #e7f3ed;
    font-size: 32px;
}

.inventory-page-empty h3 {
    margin: 0 0 7px;
    color: #164734;
    font-size: 17px;
}

.inventory-page-empty p {
    margin: 0 0 17px;
    color: #7d8982;
    font-size: 10px;
}

.inventory-page-empty a {
    display: inline-flex;
    padding: 9px 18px;
    border-radius: 24px;
    background: #164734;
    color: #ffffff;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
}


/* RESPONSIVE */

@media (max-width: 1180px) {

    .inventory-page-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-page-card-grid {
        grid-template-columns: 1fr;
    }

    .inventory-page-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .inventory-page-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 850px) {

    .inventory-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .inventory-page-date-card {
        width: 100%;
    }
}

@media (max-width: 620px) {

    .inventory-page-summary-grid,
    .inventory-page-filter-form {
        grid-template-columns: 1fr;
    }

    .inventory-page-summary-card {
        min-height: auto;
    }

    .inventory-page-filter-actions {
        grid-column: auto;
        flex-direction: column;
    }

    .inventory-page-filter-button,
    .inventory-page-reset-button {
        width: 100%;
    }

    .inventory-page-header-actions {
        flex-direction: column;
    }

    .inventory-page-primary-button,
    .inventory-page-report-button {
        width: 100%;
    }

    .inventory-page-list-section {
        padding: 18px;
    }

    .inventory-page-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .inventory-page-section-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .inventory-page-new-button {
        width: 100%;
    }

    .inventory-page-card {
        padding: 18px;
    }

    .inventory-page-card-header {
        flex-direction: column;
    }

    .inventory-page-detail-grid {
        grid-template-columns: 1fr;
    }

    .inventory-page-card-actions {
        grid-template-columns: 1fr;
    }

    .inventory-page-delete-button {
        width: 100%;
    }
}

/* =========================================================
   SUPPORT STUDENTS PAGE
   UNIQUE PREFIX: support-page-
========================================================= */

.support-page-alert {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    padding: 14px 17px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 500;
}

.support-page-alert > span {
    display: flex;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    font-weight: 700;
}

.support-page-alert-error {
    border: 1px solid #efc5c1;
    background: #fff0ef;
    color: #a13a32;
}


/* HEADER */

.support-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 25px;
}

.support-page-label {
    display: inline-block;
    color: #2e8968;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.support-page-header h1 {
    margin: 13px 0 8px;
    color: #244d3b;
    font-size: clamp(31px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.15;
}

.support-page-header p {
    max-width: 700px;
    margin: 0;
    color: #718078;
    font-size: 12px;
    line-height: 1.7;
}

.support-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.support-page-print-button,
.support-page-results-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 10px 20px;
    border-radius: 24px;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.support-page-print-button {
    border: none;
    background: #164734;
    color: #ffffff;
}

.support-page-results-button {
    border: 1px solid #2f8f75;
    background: #e9f5ef;
    color: #246f54;
}

.support-page-date-card {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
    min-width: 200px;
    padding: 17px 20px;
    border: 1px solid #e1e9e5;
    border-radius: 19px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(22, 71, 52, 0.06);
}

.support-page-date-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border-radius: 14px;
    background: #e5f2eb;
    font-size: 22px;
}

.support-page-date-card span,
.support-page-date-card strong {
    display: block;
}

.support-page-date-card span {
    margin-bottom: 3px;
    color: #8b9690;
    font-size: 8px;
    text-transform: uppercase;
}

.support-page-date-card strong {
    color: #2d483b;
    font-size: 11px;
}


/* SUMMARY */

.support-page-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.support-page-summary-card {
    min-width: 0;
    min-height: 205px;
    padding: 26px;
    border: 1px solid #e4ece7;
    border-radius: 23px;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(22, 71, 52, 0.06);
}

.support-page-summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 27px;
    border-radius: 18px;
    background: #e5f2eb;
    font-size: 27px;
}

.support-page-summary-icon.depression {
    background: #f5e9f2;
}

.support-page-summary-icon.anxiety {
    background: #fff1da;
}

.support-page-summary-icon.stress {
    background: #fde9e5;
}

.support-page-summary-card span,
.support-page-summary-card strong,
.support-page-summary-card small {
    display: block;
}

.support-page-summary-card span {
    margin-bottom: 8px;
    color: #68776f;
    font-size: 12px;
    font-weight: 600;
}

.support-page-summary-card strong {
    margin-bottom: 7px;
    color: #164734;
    font-size: 34px;
    line-height: 1;
}

.support-page-summary-card small {
    color: #9aa39e;
    font-size: 9px;
    line-height: 1.6;
}


/* FILTER */

.support-page-filter-card {
    margin-bottom: 25px;
    padding: 21px;
    border: 1px solid #e2ebe6;
    border-radius: 19px;
    background: #ffffff;
}

.support-page-filter-form {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        190px
        200px
        auto;
    align-items: end;
    gap: 15px;
}

.support-page-filter-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.support-page-filter-field label {
    color: #42564c;
    font-size: 9px;
    font-weight: 600;
}

.support-page-filter-field input,
.support-page-filter-field select {
    width: 100%;
    min-height: 45px;
    padding: 11px 14px;
    border: 1px solid #d9e4de;
    border-radius: 12px;
    outline: none;
    background: #fbfcfb;
    color: #34483e;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
}

.support-page-filter-field input:focus,
.support-page-filter-field select:focus {
    border-color: #2f8f75;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(47, 143, 117, 0.10);
}

.support-page-filter-actions {
    display: flex;
    gap: 9px;
}

.support-page-filter-button,
.support-page-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    padding: 10px 18px;
    border-radius: 25px;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
}

.support-page-filter-button {
    border: none;
    background: #164734;
    color: #ffffff;
}

.support-page-reset-button {
    border: 1px solid #b8c5be;
    background: #ffffff;
    color: #5c6c63;
}


/* LIST */

.support-page-list-section {
    padding: 25px;
    border: 1px solid #e2ebe6;
    border-radius: 22px;
    background: #ffffff;
}

.support-page-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 21px;
    padding-bottom: 17px;
    border-bottom: 1px solid #e9efec;
}

.support-page-section-heading h2 {
    margin: 9px 0 0;
    color: #164734;
    font-size: 21px;
    font-weight: 700;
}

.support-page-record-count {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: #edf6f1;
    color: #39745a;
    font-size: 8px;
    font-weight: 600;
}


/* CARDS */

.support-page-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.support-page-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid #e3ebe6;
    border-radius: 20px;
    background: #fbfdfc;
    box-shadow: 0 10px 26px rgba(22, 71, 52, 0.045);
}

.support-page-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9efec;
}

.support-page-student {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.support-page-avatar {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #dfeee6;
    color: #164734;
    font-size: 16px;
    font-weight: 700;
}

.support-page-student h3 {
    margin: 0 0 4px;
    overflow: hidden;
    color: #28483a;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.support-page-student p {
    margin: 0;
    color: #8b9690;
    font-size: 9px;
}

.support-page-attention-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: #fde8e5;
    color: #b64c43;
    font-size: 8px;
    font-weight: 600;
}


/* INFORMATION */

.support-page-student-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 15px;
}

.support-page-student-info-grid > div {
    min-width: 0;
    padding: 12px;
    border-radius: 13px;
    background: #f1f7f4;
}

.support-page-student-info-grid span,
.support-page-student-info-grid strong {
    display: block;
}

.support-page-student-info-grid span {
    margin-bottom: 5px;
    color: #8a958f;
    font-size: 8px;
}

.support-page-student-info-grid strong {
    overflow-wrap: anywhere;
    color: #344d41;
    font-size: 9px;
    font-weight: 600;
}


/* SEVERITY */

.support-page-severity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.support-page-severity-grid > div {
    min-width: 0;
    padding: 13px;
    border: 1px solid #e4ebe7;
    border-radius: 14px;
    background: #ffffff;
    text-align: center;
}

.support-page-severity-grid span,
.support-page-severity-grid strong,
.support-page-severity-grid small {
    display: block;
}

.support-page-severity-grid span {
    margin-bottom: 6px;
    color: #7f8b84;
    font-size: 8px;
}

.support-page-severity-grid strong {
    margin-bottom: 8px;
    color: #164734;
    font-size: 18px;
}

.support-page-severity-badge {
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 600;
}

.support-page-severity-normal {
    background: #e4f4eb;
    color: #26704f;
}

.support-page-severity-mild {
    background: #e8f2f8;
    color: #346f8d;
}

.support-page-severity-moderate {
    background: #fff3d7;
    color: #936410;
}

.support-page-severity-severe {
    background: #fde8e5;
    color: #b64c43;
}

.support-page-severity-extreme {
    background: #f5dede;
    color: #922e2e;
}

.support-page-severity-default {
    background: #edf1ef;
    color: #5d6b63;
}


/* ACTIONS */

.support-page-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    padding-top: 16px;
    border-top: 1px solid #e9efec;
}

.support-page-view-button,
.support-page-appointment-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 9px 17px;
    border-radius: 23px;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
}

.support-page-view-button {
    background: #164734;
    color: #ffffff;
}

.support-page-appointment-button {
    border: 1px solid #2f8f75;
    background: #e9f5ef;
    color: #246f54;
}


/* EMPTY */

.support-page-empty {
    padding: 65px 20px;
    text-align: center;
}

.support-page-empty > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 21px;
    background: #e7f3ed;
    font-size: 32px;
}

.support-page-empty h3 {
    margin: 0 0 7px;
    color: #164734;
    font-size: 17px;
}

.support-page-empty p {
    margin: 0 0 17px;
    color: #7d8982;
    font-size: 10px;
}

.support-page-empty a {
    display: inline-flex;
    padding: 9px 18px;
    border-radius: 24px;
    background: #164734;
    color: #ffffff;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
}


/* RESPONSIVE */

@media (max-width: 1180px) {

    .support-page-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .support-page-card-grid {
        grid-template-columns: 1fr;
    }

    .support-page-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .support-page-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 850px) {

    .support-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .support-page-date-card {
        width: 100%;
    }
}

@media (max-width: 620px) {

    .support-page-summary-grid,
    .support-page-filter-form {
        grid-template-columns: 1fr;
    }

    .support-page-summary-card {
        min-height: auto;
    }

    .support-page-header-actions {
        flex-direction: column;
    }

    .support-page-print-button,
    .support-page-results-button {
        width: 100%;
    }

    .support-page-filter-actions {
        grid-column: auto;
        flex-direction: column;
    }

    .support-page-filter-button,
    .support-page-reset-button {
        width: 100%;
    }

    .support-page-list-section {
        padding: 18px;
    }

    .support-page-section-heading,
    .support-page-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .support-page-card {
        padding: 18px;
    }

    .support-page-student-info-grid,
    .support-page-severity-grid,
    .support-page-card-actions {
        grid-template-columns: 1fr;
    }
}

@media print {

    .admin-sidebar,
    .admin-topbar,
    .support-page-header-actions,
    .support-page-filter-card,
    .support-page-card-actions {
        display: none !important;
    }

    .admin-dashboard-main {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .admin-dashboard-content {
        padding: 0 !important;
    }

    .support-page-card-grid {
        grid-template-columns: 1fr !important;
    }

    .support-page-card {
        break-inside: avoid;
        box-shadow: none;
    }
}

/* =========================================================
   POLY-HEALTH HOMEPAGE
   DASHBOARD MATCHING THEME
   UNIQUE PREFIX: home-
========================================================= */

:root {
    --poly-primary: #1f5f43;
    --poly-primary-dark: #164734;
    --poly-primary-light: #3d8a68;
    --poly-primary-soft: #e8f5ee;
    --poly-primary-softer: #f1f8f4;

    --poly-background: #f6faf7;
    --poly-background-alt: #edf7f2;

    --poly-white: #ffffff;

    --poly-text: #1b2f27;
    --poly-text-dark: #244d3b;
    --poly-text-light: #6f7f77;
    --poly-text-muted: #8b9690;

    --poly-border: #dce9e2;
    --poly-border-soft: #e7eee9;

    --poly-shadow-sm:
        0 8px 20px rgba(22, 71, 52, 0.05);

    --poly-shadow:
        0 15px 35px rgba(22, 71, 52, 0.08);

    --poly-shadow-lg:
        0 24px 55px rgba(22, 71, 52, 0.12);
}


/* =========================================================
   BASE
========================================================= */

.home-body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--poly-background);
    color: var(--poly-text);
    font-family: "Poppins", sans-serif;
}

.home-body *,
.home-body *::before,
.home-body *::after {
    box-sizing: border-box;
}

.home-body a {
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.home-main {
    overflow: hidden;
}


/* =========================================================
   NAVBAR
========================================================= */

.home-navbar {
    min-height: 78px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(220, 233, 226, 0.88);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 24px rgba(22, 71, 52, 0.035);
}

.home-navbar-container {
    max-width: 1180px;
}

.home-logo {
    color: var(--poly-primary-dark) !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.home-logo:hover {
    color: var(--poly-primary) !important;
}

.home-navbar-list {
    gap: 6px;
}

.home-nav-link {
    position: relative;
    padding: 10px 14px !important;
    color: #34483e !important;
    font-size: 13px;
    font-weight: 500;
}

.home-nav-link::after {
    position: absolute;
    right: 14px;
    bottom: 4px;
    left: 14px;
    height: 2px;
    border-radius: 999px;
    background: var(--poly-primary);
    content: "";
    opacity: 0;
    transform: scaleX(0.5);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.home-nav-link:hover {
    color: var(--poly-primary) !important;
}

.home-nav-link:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.home-navbar-toggler {
    border: 1px solid var(--poly-border);
    border-radius: 12px;
    background: var(--poly-white);
}

.home-navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(31, 95, 67, 0.12);
}


/* =========================================================
   BUTTONS
========================================================= */

.home-primary-btn,
.home-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    text-decoration: none;
}

.home-primary-btn {
    border: 1px solid var(--poly-primary);
    background: var(--poly-primary);
    color: var(--poly-white);
    box-shadow: 0 11px 24px rgba(31, 95, 67, 0.18);
}

.home-primary-btn:hover {
    border-color: var(--poly-primary-dark);
    background: var(--poly-primary-dark);
    color: var(--poly-white);
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(31, 95, 67, 0.24);
}

.home-outline-btn {
    border: 1.5px solid var(--poly-primary-dark);
    background: rgba(255, 255, 255, 0.78);
    color: var(--poly-primary-dark);
}

.home-outline-btn:hover {
    border-color: var(--poly-primary-dark);
    background: var(--poly-primary-dark);
    color: var(--poly-white);
    transform: translateY(-2px);
}

.home-small-btn {
    min-height: 41px;
    padding: 9px 21px;
    font-size: 12px;
}

.home-large-btn {
    min-height: 52px;
    padding: 13px 30px;
    font-size: 14px;
}


/* =========================================================
   HERO SECTION
========================================================= */

.home-hero-section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 28%,
            rgba(61, 138, 104, 0.16),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #f8fbf9 0%,
            var(--poly-background-alt) 100%
        );
}

.home-hero-container {
    max-width: 1180px;
}

.home-hero-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1px);
}

.home-hero-blob-one {
    top: 18%;
    right: -100px;
    width: 390px;
    height: 390px;
    background: rgba(61, 138, 104, 0.12);
}

.home-hero-blob-two {
    bottom: -170px;
    left: -120px;
    width: 350px;
    height: 350px;
    background: rgba(31, 95, 67, 0.07);
}

.home-hero-content {
    position: relative;
    z-index: 2;
    padding-top: 98px;
    padding-bottom: 65px;
}

.home-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 10px 17px;
    border: 1px solid #d6e9df;
    border-radius: 999px;
    background: rgba(232, 245, 238, 0.92);
    color: var(--poly-primary);
    font-size: 11px;
    font-weight: 600;
    box-shadow: var(--poly-shadow-sm);
}

.home-hero-title {
    max-width: 690px;
    margin: 0;
    color: var(--poly-text-dark);
    font-size: clamp(45px, 6vw, 72px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -2.1px;
}

.home-hero-title span {
    display: block;
    color: var(--poly-primary-light);
}

.home-hero-description {
    max-width: 630px;
    margin: 27px 0 0;
    color: var(--poly-text-light);
    font-size: 16px;
    line-height: 1.9;
}

.home-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 31px;
}

.home-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 29px;
}

.home-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #596c62;
    font-size: 11px;
    font-weight: 500;
}

.home-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--poly-primary-soft);
    color: var(--poly-primary);
    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   HERO VISUAL / FLOATING CARDS
========================================================= */

.home-hero-visual-column {
    position: relative;
    z-index: 2;
}

.home-hero-image-wrapper {
    position: relative;
    width: min(100%, 550px);
    min-height: 560px;
    margin: 80px auto 0;
    border: 1px solid rgba(220, 233, 226, 0.74);
    border-radius: 48% 52% 44% 56% / 49% 42% 58% 51%;
    background:
        radial-gradient(
            circle at 32% 25%,
            rgba(255, 255, 255, 0.95),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            rgba(232, 245, 238, 0.96),
            rgba(61, 138, 104, 0.14)
        );
    box-shadow: var(--poly-shadow-lg);
}

.home-hero-image-wrapper::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 265px;
    height: 265px;
    border: 1px solid rgba(31, 95, 67, 0.12);
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.75),
            rgba(232, 245, 238, 0.8)
        );
    content: "🌿";
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--poly-primary);
    font-size: 88px;
    transform: translate(-50%, -50%);
    box-shadow: 0 24px 50px rgba(22, 71, 52, 0.10);
}

.home-floating-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 205px;
    padding: 17px 19px;
    border: 1px solid rgba(220, 233, 226, 0.92);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    text-align: left;
    backdrop-filter: blur(12px);
    box-shadow: var(--poly-shadow);
    animation: homeFloat 4.8s ease-in-out infinite;
}

.home-floating-card-one {
    top: 38%;
    left: -42px;
}

.home-floating-card-two {
    top: 7%;
    right: -5px;
    animation-delay: 0.7s;
}

.home-floating-card-three {
    right: -28px;
    bottom: 10%;
    animation-delay: 1.3s;
}

.home-floating-card-icon {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--poly-primary-soft);
    font-size: 22px;
}

.home-floating-card-content {
    min-width: 0;
}

.home-floating-card-content strong,
.home-floating-card-content small {
    display: block;
}

.home-floating-card-content strong {
    margin-bottom: 3px;
    color: var(--poly-text-dark);
    font-size: 11px;
    font-weight: 700;
}

.home-floating-card-content small {
    color: var(--poly-text-muted);
    font-size: 8px;
}

@keyframes homeFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


/* =========================================================
   COMMON SECTIONS
========================================================= */

.home-section-padding {
    padding: 100px 0;
}

.home-section-container {
    max-width: 1180px;
}

.home-section-heading {
    max-width: 760px;
    margin: 0 auto;
}

.home-section-label {
    display: inline-flex;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--poly-primary-soft);
    color: var(--poly-primary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.home-section-heading h2 {
    margin: 18px 0 13px;
    color: var(--poly-primary-dark);
    font-size: clamp(29px, 4vw, 43px);
    font-weight: 700;
    line-height: 1.2;
}

.home-section-heading p {
    margin: 0;
    color: var(--poly-text-light);
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================================
   ABOUT SECTION
========================================================= */

.home-about-section {
    background: var(--poly-white);
}

.home-info-card {
    padding: 31px;
    border: 1px solid var(--poly-border-soft);
    border-radius: 22px;
    background: var(--poly-white);
    box-shadow: var(--poly-shadow-sm);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.home-info-card:hover {
    border-color: #c9dfd2;
    transform: translateY(-6px);
    box-shadow: var(--poly-shadow);
}

.home-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    border-radius: 17px;
    background: var(--poly-primary-soft);
    font-size: 26px;
}

.home-info-card h3 {
    margin: 0 0 11px;
    color: var(--poly-text-dark);
    font-size: 17px;
    font-weight: 700;
}

.home-info-card p {
    margin: 0;
    color: var(--poly-text-light);
    font-size: 11px;
    line-height: 1.8;
}


/* =========================================================
   FEATURES SECTION
========================================================= */

.home-features-section {
    background:
        linear-gradient(
            180deg,
            var(--poly-background) 0%,
            var(--poly-background-alt) 100%
        );
}

.home-feature-card {
    position: relative;
    overflow: hidden;
    padding: 29px;
    border: 1px solid var(--poly-border-soft);
    border-radius: 22px;
    background: var(--poly-white);
    box-shadow: var(--poly-shadow-sm);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.home-feature-card::after {
    position: absolute;
    right: -35px;
    bottom: -35px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: rgba(61, 138, 104, 0.07);
    content: "";
}

.home-feature-card:hover {
    border-color: #c9dfd2;
    transform: translateY(-6px);
    box-shadow: var(--poly-shadow);
}

.home-feature-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 23px;
    border-radius: 14px;
    background: var(--poly-primary-soft);
    color: var(--poly-primary);
    font-size: 11px;
    font-weight: 700;
}

.home-feature-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 11px;
    color: var(--poly-text-dark);
    font-size: 16px;
    font-weight: 700;
}

.home-feature-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--poly-text-light);
    font-size: 10px;
    line-height: 1.8;
}


/* =========================================================
   CTA SECTION
========================================================= */

.home-cta-section {
    padding: 90px 0;
    background: var(--poly-white);
}

.home-cta-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
    padding: 52px 55px;
    border-radius: 30px;
    background:
        radial-gradient(
            circle at 87% 24%,
            rgba(255, 255, 255, 0.16),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            var(--poly-primary-dark),
            var(--poly-primary-light)
        );
    color: var(--poly-white);
    box-shadow: var(--poly-shadow-lg);
}

.home-cta-content {
    max-width: 740px;
}

.home-cta-label {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.90);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.home-cta-card h2 {
    margin: 0 0 12px;
    color: var(--poly-white);
    font-size: clamp(27px, 4vw, 41px);
    font-weight: 700;
    line-height: 1.25;
}

.home-cta-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    line-height: 1.8;
}

.home-cta-button {
    flex: 0 0 auto;
    border: none;
    color: var(--poly-primary-dark);
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(10, 42, 28, 0.15);
}

.home-cta-button:hover {
    color: var(--poly-primary-dark);
    transform: translateY(-2px);
}


/* =========================================================
   FOOTER
========================================================= */

.home-main-footer {
    background: var(--poly-primary-dark);
    color: var(--poly-white);
}

.home-developer-section {
    padding: 58px 20px 46px;
    text-align: center;
}

.home-developer-section h4 {
    margin: 0 0 8px;
    color: var(--poly-white);
    font-size: 24px;
    font-weight: 700;
}

.home-developer-section > p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
}

.home-developer-team {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 27px auto 21px;
}

.home-developer-team span {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.home-developer-team strong {
    color: var(--poly-white);
    font-size: 10px;
    font-weight: 600;
}

.home-developer-section small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 8px;
}

.home-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 25px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.home-footer-brand h3 {
    margin: 0 0 4px;
    color: var(--poly-white);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;
}

.home-footer-brand p {
    margin: 0;
    color: rgba(255, 255, 255, 0.60);
    font-size: 8px;
}

.home-footer-copyright {
    color: rgba(255, 255, 255, 0.60);
    font-size: 8px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .home-navbar-collapse {
        margin-top: 12px;
        padding: 15px;
        border: 1px solid var(--poly-border);
        border-radius: 17px;
        background: var(--poly-white);
        box-shadow: var(--poly-shadow);
    }

    .home-navbar-list {
        align-items: stretch !important;
    }

    .home-nav-link {
        padding: 11px 12px !important;
    }

    .home-nav-link::after {
        display: none;
    }

    .home-small-btn {
        width: 100%;
        margin-top: 5px;
    }

    .home-hero-content {
        padding-top: 135px;
        padding-bottom: 25px;
        text-align: center;
    }

    .home-hero-title,
    .home-hero-description {
        margin-right: auto;
        margin-left: auto;
    }

    .home-hero-buttons,
    .home-hero-trust {
        justify-content: center;
    }

    .home-hero-image-wrapper {
        min-height: 480px;
        margin-top: 20px;
        margin-bottom: 65px;
    }

    .home-floating-card-one {
        left: 2%;
    }

    .home-floating-card-two {
        right: 2%;
    }

    .home-floating-card-three {
        right: 5%;
    }

    .home-cta-card {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 767px) {

    .home-section-padding {
        padding: 75px 0;
    }

    .home-hero-title {
        font-size: 46px;
        letter-spacing: -1.4px;
    }

    .home-hero-description {
        font-size: 13px;
    }

    .home-hero-image-wrapper {
        min-height: 430px;
        border-radius: 35px;
    }

    .home-hero-image-wrapper::before {
        width: 220px;
        height: 220px;
        font-size: 70px;
    }

    .home-floating-card {
        min-width: 180px;
        padding: 14px 15px;
    }

    .home-floating-card-one {
        top: 42%;
        left: 1%;
    }

    .home-floating-card-two {
        top: 7%;
        right: 1%;
    }

    .home-floating-card-three {
        right: 3%;
        bottom: 6%;
    }

    .home-cta-card {
        padding: 38px 30px;
    }

    .home-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 520px) {

    .home-navbar {
        min-height: 68px;
    }

    .home-logo {
        font-size: 21px;
    }

    .home-hero-content {
        padding-top: 115px;
    }

    .home-hero-badge {
        font-size: 9px;
    }

    .home-hero-title {
        font-size: 39px;
    }

    .home-hero-buttons {
        flex-direction: column;
    }

    .home-primary-btn,
    .home-outline-btn {
        width: 100%;
    }

    .home-hero-trust {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .home-hero-image-wrapper {
        min-height: 495px;
        margin-top: 5px;
    }

    .home-floating-card {
        right: 16px !important;
        left: 16px !important;
        width: auto;
        min-width: 0;
    }

    .home-floating-card-one {
        top: 26px;
    }

    .home-floating-card-two {
        top: 172px;
    }

    .home-floating-card-three {
        top: 318px;
        bottom: auto;
    }

    .home-hero-image-wrapper::before {
        display: none;
    }

    .home-section-heading h2 {
        font-size: 30px;
    }

    .home-info-card,
    .home-feature-card {
        padding: 25px;
    }

    .home-cta-card {
        padding: 31px 23px;
        border-radius: 23px;
    }

    .home-cta-button {
        width: 100%;
    }
}

/* =========================================================
   HELP PAGE UPPSIK STAFF
   UNIQUE PREFIX: help-staff-
========================================================= */

.help-staff-section {
    padding: 75px 0;
}

.help-staff-heading {
    max-width: 850px;
    margin: 0 auto 38px;
    text-align: center;
}

.help-staff-heading h2 {
    margin: 15px 0 12px;
    color: #164734;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
}

.help-staff-heading p {
    margin: 7px auto;
    color: #6f7f77;
    font-size: 12px;
    line-height: 1.8;
}

.help-staff-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto 30px;
}

.help-staff-card {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
    padding: 27px;
    border: 1px solid #dce9e2;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(22, 71, 52, 0.08);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.help-staff-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(22, 71, 52, 0.12);
}

.help-staff-photo {
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
}

.help-staff-photo img {
    display: block;
    width: 100%;
    height: 100%;
    border: 4px solid #dcefe5;
    border-radius: 50%;
    background: #edf7f2;
    object-fit: cover;
    box-shadow: 0 9px 22px rgba(22, 71, 52, 0.12);
}

.help-staff-content {
    flex: 1;
    min-width: 0;
}

.help-staff-role {
    display: inline-block;
    margin-bottom: 7px;
    color: #2e8968;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.help-staff-name {
    margin: 0 0 7px;
    color: #164734;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.help-staff-position {
    min-height: 42px;
    margin: 0;
    color: #6f7f77;
    font-size: 10px;
    line-height: 1.7;
}

.help-staff-contact {
    margin-top: 10px;
}

.help-staff-contact span {
    color: #51675c;
    font-size: 9px;
    font-weight: 500;
}

.help-staff-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 16px;
}

.help-staff-whatsapp,
.help-staff-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 40px;
    padding: 9px 17px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.help-staff-whatsapp {
    border: 1px solid #2f8f5b;
    background: #2f8f5b;
    color: #ffffff;
}

.help-staff-call {
    border: 1px solid #2f8f5b;
    background: #ffffff;
    color: #2f8f5b;
}

.help-staff-whatsapp:hover,
.help-staff-call:hover {
    background: #164734;
    border-color: #164734;
    color: #ffffff;
    transform: translateY(-2px);
}

.help-staff-services-card {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px;
    border: 1px solid #dce9e2;
    border-radius: 22px;
    background: #f8fbf9;
}

.help-staff-services-card h3 {
    margin: 0 0 18px;
    color: #164734;
    font-size: 17px;
    font-weight: 700;
}

.help-staff-services-card ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 25px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-staff-services-card li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #586b61;
    font-size: 10px;
    line-height: 1.6;
}

.help-staff-services-card li span {
    display: inline-flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e5f3eb;
    color: #26704f;
    font-size: 9px;
    font-weight: 700;
}

@media (max-width: 920px) {

    .help-staff-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {

    .help-staff-section {
        padding: 55px 0;
    }

    .help-staff-card {
        align-items: center;
        flex-direction: column;
        padding: 23px;
        text-align: center;
    }

    .help-staff-position {
        min-height: 0;
    }

    .help-staff-buttons {
        justify-content: center;
    }

    .help-staff-services-card ul {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   OFFICER CONTACT SECTION
   UNIQUE PREFIX: help-officer-contact-
========================================================= */

.help-officer-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 35px;
}

.help-officer-contact-item strong{
    font-size:10px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.help-officer-contact-card {
    min-width: 0;
    padding: 26px;
    border: 1px solid #dce9e2;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(22, 71, 52, 0.08);
}

.help-officer-contact-header {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e8efeb;
}

.help-officer-contact-photo {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
}

.help-officer-contact-photo img {
    display: block;
    width: 100%;
    height: 100%;
    border: 3px solid #dcefe5;
    border-radius: 50%;
    object-fit: cover;
}

.help-officer-contact-header span {
    display: block;
    margin-bottom: 5px;
    color: #2e8968;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.help-officer-contact-header h3 {
    margin: 0 0 5px;
    color: #164734;
    font-size: 17px;
    font-weight: 700;
}

.help-officer-contact-header p {
    margin: 0;
    color: #718078;
    font-size: 9px;
    line-height: 1.6;
}

.help-officer-contact-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 19px;
}

.help-officer-contact-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 13px;
    border-radius: 14px;
    background: #f3f8f5;
}

.help-officer-contact-icon {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #e5f3eb;
    font-size: 17px;
}

.help-officer-contact-item small,
.help-officer-contact-item strong {
    display: block;
}

.help-officer-contact-item small {
    margin-bottom: 3px;
    color: #8b9690;
    font-size: 5px;
}

.help-officer-contact-item strong {
    overflow-wrap: anywhere;
    color: #344d41;
    font-size: 9px;
    font-weight: 600;
}

.help-officer-contact-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.help-officer-call-btn,
.help-officer-whatsapp-btn,
.help-officer-email-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 9px 13px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 600;
    text-decoration: none;
}

.help-officer-call-btn {
    border: 1px solid #2f8f5b;
    background: #ffffff;
    color: #2f8f5b;
}

.help-officer-whatsapp-btn {
    border: 1px solid #2f8f5b;
    background: #2f8f5b;
    color: #ffffff;
}

.help-officer-email-btn {
    border: 1px solid #164734;
    background: #164734;
    color: #ffffff;
}

.help-officer-call-btn:hover,
.help-officer-whatsapp-btn:hover,
.help-officer-email-btn:hover {
    background: #1f5f43;
    border-color: #1f5f43;
    color: #ffffff;
    transform: translateY(-2px);
}


/* General office/location cards */

.help-general-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.help-general-contact-card {
    display: flex;
    flex-direction: column;
    min-height: 250px;
    padding: 25px;
    border: 1px solid #dce9e2;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(22, 71, 52, 0.06);
}

.help-general-contact-card h3 {
    margin: 16px 0 9px;
    color: #164734;
    font-size: 16px;
    font-weight: 700;
}

.help-general-contact-card small {
    color: #718078;
    font-size: 9px;
    line-height: 1.7;
}

.help-general-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    margin-top: auto;
    padding: 9px 17px;
    border: 1px solid #164734;
    border-radius: 999px;
    color: #164734;
    font-size: 8px;
    font-weight: 600;
    text-decoration: none;
}

.help-general-contact-btn:hover {
    background: #164734;
    color: #ffffff;
}

@media (max-width: 920px) {
    .help-officer-contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .help-officer-contact-details,
    .help-officer-contact-actions,
    .help-general-contact-grid {
        grid-template-columns: 1fr;
    }

    .help-officer-contact-header {
        align-items: flex-start;
    }
}

.help-staff-email {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 40px;
    padding: 9px 17px;
    border: 1px solid #164734;
    border-radius: 999px;
    background: #164734;
    color: #ffffff;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.help-staff-email:hover {
    border-color: #1f5f43;
    background: #1f5f43;
    color: #ffffff;
    transform: translateY(-2px);
}

/* =========================================================
   FIX CONTACT OFFICER TEXT SIZE
========================================================= */

.help-officer-contact-header span {
    font-size: 12px !important;
    letter-spacing: 1.2px;
}

.help-officer-contact-header h3 {
    font-size: 22px !important;
    line-height: 1.35;
}

.help-officer-contact-header p {
    font-size: 13px !important;
    line-height: 1.6;
}

.help-officer-contact-item small {
    font-size: 11px !important;
}

.help-officer-contact-item strong {
    font-size: 14px !important;
    line-height: 1.5;
}

.help-officer-call-btn,
.help-officer-whatsapp-btn,
.help-officer-email-btn {
    min-height: 42px;
    font-size: 12px !important;
    font-weight: 500;
}

.help-general-contact-card h3 {
    font-size: 15px !important;
}

.help-general-contact-card .help-contact-main {
    font-size: 10px !important;
    line-height: 1.6;
}

.help-general-contact-card small {
    font-size: 12px !important;
    line-height: 1.7;
}

.help-general-contact-btn {
    min-height: 46px;
    font-size: 10px !important;
}

.help-section-heading .section-label {
    font-size: 11px !important;
}

.help-section-heading h2 {
    font-size: 30px !important;
}

.help-section-heading p {
    font-size: 15px !important;
    line-height: 1.8;
}

/* =========================================================
   APPOINTMENT COUNSELLOR GROUP
   UNIQUE PREFIX: appointment-counsellor-
========================================================= */

.appointment-counsellor-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.appointment-counsellor-summary-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 112px;
    padding: 21px;
    border: 1px solid #dce9e2;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(22, 71, 52, 0.06);
}

.appointment-counsellor-summary-avatar {
    display: flex;
    flex: 0 0 54px;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 17px;
    background: #e4f2eb;
    color: #164734;
    font-size: 20px;
    font-weight: 700;
}

.appointment-counsellor-summary-card span,
.appointment-counsellor-summary-card strong,
.appointment-counsellor-summary-card small {
    display: block;
}

.appointment-counsellor-summary-card span {
    margin-bottom: 4px;
    color: #65776d;
    font-size: 12px;
    font-weight: 600;
}

.appointment-counsellor-summary-card strong {
    margin-bottom: 4px;
    color: #164734;
    font-size: 27px;
    line-height: 1;
}

.appointment-counsellor-summary-card small {
    color: #87938c;
    font-size: 10px;
}

.appointment-counsellor-group {
    margin-bottom: 42px;
}

.appointment-counsellor-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    margin-bottom: 20px;
    padding: 21px 24px;
    border: 1px solid #d8e7df;
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            #f7fbf8,
            #edf7f2
        );
}

.appointment-counsellor-title {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.appointment-counsellor-avatar {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #164734;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(22, 71, 52, 0.18);
}

.appointment-counsellor-title span {
    display: block;
    margin-bottom: 4px;
    color: #378063;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.appointment-counsellor-title h3 {
    margin: 0 0 4px;
    color: #164734;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
}

.appointment-counsellor-title p {
    margin: 0;
    color: #718078;
    font-size: 11px;
    line-height: 1.5;
}

.appointment-counsellor-heading > strong {
    flex-shrink: 0;
    padding: 10px 16px;
    border-radius: 999px;
    background: #dcefe5;
    color: #246f54;
    font-size: 11px;
    font-weight: 700;
}

.appointment-counsellor-unassigned {
    border-color: #eadfc9;
    background:
        linear-gradient(
            135deg,
            #fffdf8,
            #fff8eb
        );
}

.appointment-counsellor-unassigned
.appointment-counsellor-avatar {
    background: #9a783b;
}

.appointment-page-counsellor-display {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #dce9e2;
    border-radius: 14px;
    background: #f4f9f6;
}

.appointment-page-counsellor-display span,
.appointment-page-counsellor-display strong {
    display: block;
}

.appointment-page-counsellor-display span {
    margin-bottom: 4px;
    color: #6f7e76;
    font-size: 10px;
    font-weight: 500;
}

.appointment-page-counsellor-display strong {
    color: #164734;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

@media (max-width: 900px) {

    .appointment-counsellor-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {

    .appointment-counsellor-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .appointment-counsellor-title {
        align-items: flex-start;
    }

    .appointment-counsellor-heading > strong {
        margin-left: 68px;
    }
}

@media (max-width: 480px) {

    .appointment-counsellor-heading > strong {
        margin-left: 0;
    }

    .appointment-counsellor-title h3 {
        font-size: 16px;
    }
}

/* =========================================================
   THERAPY GUIDED VIDEO
   UNIQUE PREFIX: therapy-video-guide-
========================================================= */

.therapy-video-guide-section {
    margin: 42px 0 48px;
}

.therapy-video-guide-heading {
    margin-bottom: 22px;
}

.therapy-video-guide-label {
    display: inline-block;
    margin-bottom: 7px;

    color: #3d8a68;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.therapy-video-guide-heading h2 {
    margin: 0 0 9px;

    color: #164734;

    font-size: 30px;
    font-weight: 700;
    line-height: 1.35;
}

.therapy-video-guide-heading p {
    max-width: 780px;
    margin: 0;

    color: #6f7f77;

    font-size: 14px;
    line-height: 1.8;
}


/* CARD */

.therapy-video-guide-card {
    overflow: hidden;

    border: 1px solid #dce9e2;
    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 16px 38px rgba(22, 71, 52, 0.08);
}


/* VIDEO */

.therapy-video-guide-player-wrap {
    position: relative;

    width: 100%;

    background: #0d1f18;
}

.therapy-video-guide-player {
    display: block;

    width: 100%;
    max-height: 560px;

    background: #000000;
}


/* INFORMATION */

.therapy-video-guide-content {
    padding: 25px 27px 28px;
}

.therapy-video-guide-badge {
    display: inline-flex;
    align-items: center;

    margin-bottom: 10px;
    padding: 7px 13px;

    border-radius: 999px;

    background: #e8f5ee;
    color: #2d795b;

    font-size: 11px;
    font-weight: 700;
}

.therapy-video-guide-content h3 {
    margin: 0 0 9px;

    color: #164734;

    font-size: 22px;
    font-weight: 700;
}

.therapy-video-guide-content > p {
    max-width: 850px;

    margin: 0;

    color: #6f7f77;

    font-size: 13px;
    line-height: 1.8;
}


/* VIDEO META */

.therapy-video-guide-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 19px;
}

.therapy-video-guide-meta span {
    display: inline-flex;
    align-items: center;

    padding: 8px 13px;

    border: 1px solid #dce9e2;
    border-radius: 999px;

    background: #f7fbf8;
    color: #50675c;

    font-size: 11px;
    font-weight: 500;
}


/* BEFORE BEGIN */

.therapy-video-guide-instructions {
    margin-top: 23px;
    padding: 19px 20px;

    border: 1px solid #dce9e2;
    border-radius: 17px;

    background: #f7fbf8;
}

.therapy-video-guide-instructions h4 {
    margin: 0 0 11px;

    color: #164734;

    font-size: 14px;
    font-weight: 700;
}

.therapy-video-guide-instructions ul {
    margin: 0;
    padding-left: 19px;
}

.therapy-video-guide-instructions li {
    margin-bottom: 7px;

    color: #61736a;

    font-size: 12px;
    line-height: 1.6;
}

.therapy-video-guide-instructions li:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .therapy-video-guide-heading h2 {
        font-size: 27px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .therapy-video-guide-section {
        margin: 32px 0 38px;
    }

    .therapy-video-guide-heading h2 {
        font-size: 23px;
    }

    .therapy-video-guide-heading p {
        font-size: 13px;
    }

    .therapy-video-guide-card {
        border-radius: 19px;
    }

    .therapy-video-guide-content {
        padding: 19px;
    }

    .therapy-video-guide-content h3 {
        font-size: 19px;
    }

    .therapy-video-guide-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .therapy-video-guide-instructions {
        padding: 16px;
    }

}

/* =========================================================
   THERAPY MODAL SMALL VIDEO
   UNIQUE PREFIX: therapy-modal-video-
========================================================= */

.therapy-modal-video-section {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #e3ece7;
}

.therapy-modal-video-heading {
    margin-bottom: 14px;
}

.therapy-modal-video-heading > span {
    display: inline-block;
    margin-bottom: 5px;

    color: #3d8a68;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.therapy-modal-video-heading h3 {
    margin: 0 0 5px;

    color: #164734;

    font-size: 17px;
    font-weight: 700;
}

.therapy-modal-video-heading p {
    margin: 0;

    color: #6d7c74;

    font-size: 12px;
    line-height: 1.6;
}


/* SMALL VIDEO CONTAINER */

.therapy-modal-video-wrapper {
    width: 100%;
    max-width: 520px;

    margin: 0 auto;

    overflow: hidden;

    border: 1px solid #dce9e2;
    border-radius: 16px;

    background: #0d1f18;

    box-shadow:
        0 10px 25px rgba(22, 71, 52, 0.08);
}


/* VIDEO */

.therapy-modal-video-player {
    display: block;

    width: 100%;
    max-height: 300px;

    background: #000000;
}


/* MOBILE */

@media (max-width: 768px) {

    .therapy-modal-video-wrapper {
        max-width: 100%;
    }

    .therapy-modal-video-player {
        max-height: 240px;
    }

}

.therapy-modal-notice {
    margin-top: 30px !important;
}

.therapy-modal-notice {
    margin-top: 24px !important;
}

/* =========================================================
   STUDENT SYSTEM MESSAGE
   UNIQUE PREFIX: student-system-message-
========================================================= */

.student-system-message {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin: 22px 0;
    padding: 16px 18px;

    border-radius: 16px;
}

.student-system-message-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    font-size: 15px;
    font-weight: 700;
}

.student-system-message strong {
    display: block;

    margin-bottom: 4px;

    font-size: 13px;
    font-weight: 700;
}

.student-system-message p {
    margin: 0;

    font-size: 12px;
    line-height: 1.65;
}


/* ERROR */

.student-system-message-error {
    border: 1px solid #efcccc;
    background: #fff6f6;
    color: #8c3535;
}

.student-system-message-error
.student-system-message-icon {
    background: #f7dddd;
    color: #a33838;
}


/* SUCCESS */

.student-system-message-success {
    border: 1px solid #cce5d7;
    background: #f2faf5;
    color: #245f47;
}

.student-system-message-success
.student-system-message-icon {
    background: #dcefe5;
    color: #1f5f43;
}


/* =========================================================
   DISABLED APPOINTMENT CARD
   UNIQUE PREFIX: student-disabled-appointment-
========================================================= */

.student-disabled-appointment-card {
    cursor: not-allowed !important;

    opacity: 0.72;

    border: 1px dashed #cad9d1 !important;

    background: #f5f8f6 !important;

    box-shadow: none !important;

    transform: none !important;
}

.student-disabled-appointment-card:hover {
    transform: none !important;

    box-shadow: none !important;
}

.student-appointment-unavailable-label {
    display: inline-flex !important;
    align-items: center;

    width: fit-content;

    margin-top: 8px;
    padding: 7px 11px;

    border-radius: 999px;

    background: #eee5d4;

    color: #836a3c !important;

    font-size: 10px !important;
    font-weight: 700 !important;
}

/* =========================================================
   POLY-HEALTH MAINTENANCE PAGE
   UNIQUE PREFIX: ph-maintenance-
========================================================= */

.ph-maintenance-body {
    margin: 0;
    min-height: 100vh;
    background: #f4f8f5;
    font-family: "Poppins", sans-serif;
}

.ph-maintenance-page {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px 20px;
}

.ph-maintenance-card {
    width: 100%;
    max-width: 650px;

    padding: 50px;

    border: 1px solid #dce9e2;
    border-radius: 28px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 20px 50px rgba(22, 71, 52, 0.09);
}

.ph-maintenance-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    margin: 0 auto 20px;

    border-radius: 22px;

    background: #e8f5ee;

    font-size: 30px;
}

.ph-maintenance-label {
    display: inline-block;

    margin-bottom: 10px;

    color: #3d8a68;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ph-maintenance-card h1 {
    margin: 0 0 14px;

    color: #164734;

    font-size: 36px;
    font-weight: 700;
}

.ph-maintenance-card > p {
    max-width: 510px;

    margin: 0 auto;

    color: #6d7d75;

    font-size: 14px;
    line-height: 1.8;
}

.ph-maintenance-notice {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin: 28px 0 0;
    padding: 15px 17px;

    border-radius: 14px;

    background: #edf7f2;

    text-align: left;
}

.ph-maintenance-notice p {
    margin: 0;

    color: #4f665b;

    font-size: 12px;
    line-height: 1.6;
}

.ph-maintenance-contact {
    display: inline-flex;

    margin-top: 25px;
    padding: 11px 22px;

    border-radius: 999px;

    background: #164734;
    color: #ffffff;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}

.ph-maintenance-contact:hover {
    background: #1f5f43;
    color: #ffffff;
}

@media (max-width: 650px) {

    .ph-maintenance-card {
        padding: 35px 22px;
    }

    .ph-maintenance-card h1 {
        font-size: 28px;
    }
}

/* =========================================================
   SUPER ADMIN SYSTEM STATUS
   UNIQUE PREFIX: sa-dashboard-status-
========================================================= */

.sa-dashboard-system-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sa-dashboard-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 7px 11px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}


/* ONLINE */

.sa-dashboard-status-online {
    border: 1px solid #bfe1ce;
    background: #e8f5ee;
    color: #247052;
}


/* MAINTENANCE */

.sa-dashboard-status-maintenance {
    border: 1px solid #ead1a5;
    background: #fff6df;
    color: #82631f;
}


/* DISABLED */

.sa-dashboard-status-disabled {
    border: 1px solid #e5c9c9;
    background: #fff1f1;
    color: #974444;
}


/* =========================================================
   SUPER ADMIN MAINTENANCE ALERT
   UNIQUE PREFIX: sa-dashboard-maintenance-
========================================================= */

.sa-dashboard-maintenance-alert {
    display: flex;
    align-items: center;
    gap: 16px;

    margin: 22px 0;
    padding: 18px 20px;

    border: 1px solid #ead2a8;
    border-radius: 18px;

    background: #fff8e8;

    box-shadow:
        0 8px 24px rgba(100, 74, 25, 0.05);
}

.sa-dashboard-maintenance-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 44px;

    width: 44px;
    height: 44px;

    border-radius: 13px;

    background: #f5e5c5;

    font-size: 20px;
}

.sa-dashboard-maintenance-alert > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.sa-dashboard-maintenance-alert strong {
    display: block;

    margin-bottom: 4px;

    color: #665022;

    font-size: 12px;
    font-weight: 700;
}

.sa-dashboard-maintenance-alert p {
    margin: 0;

    color: #7c6b49;

    font-size: 10px;
    line-height: 1.65;
}

.sa-dashboard-maintenance-settings-btn {
    flex-shrink: 0;

    padding: 9px 14px;

    border-radius: 999px;

    background: #164734;
    color: #ffffff;

    font-size: 10px;
    font-weight: 600;

    text-decoration: none;
}

.sa-dashboard-maintenance-settings-btn:hover {
    background: #1f5f43;
    color: #ffffff;
}


/* MOBILE */

@media (max-width: 850px) {

    .sa-dashboard-system-status {
        display: none;
    }

    .sa-dashboard-maintenance-alert {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .sa-dashboard-maintenance-settings-btn {
        margin-left: 60px;
    }
}


@media (max-width: 500px) {

    .sa-dashboard-maintenance-settings-btn {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
   ADMIN DASHBOARD
   UNIQUE PREFIX: admin-dashboard-
========================================================= */

.admin-dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 28px;
    padding: 30px 32px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #164734,
            #1f5f43
        );

    color: #ffffff;

    box-shadow:
        0 12px 32px
        rgba(22, 71, 52, 0.14);
}

.admin-dashboard-welcome .admin-section-label {
    color: #bfe6d0;
}

.admin-dashboard-welcome h1 {
    margin: 7px 0 8px;

    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
}

.admin-dashboard-welcome p {
    margin: 0;

    max-width: 680px;

    color: rgba(
        255,
        255,
        255,
        0.78
    );

    font-size: 13px;
    line-height: 1.7;
}

.admin-dashboard-welcome-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 80px;

    width: 80px;
    height: 80px;

    border-radius: 22px;

    background:
        rgba(
            255,
            255,
            255,
            0.13
        );

    font-size: 34px;
}


/* =========================================================
   STATS
========================================================= */

.admin-dashboard-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 17px;

    margin-bottom: 30px;
}

.admin-dashboard-stat-card {
    display: flex;
    align-items: center;
    gap: 15px;

    min-width: 0;

    padding: 20px;

    border: 1px solid #deebe4;
    border-radius: 19px;

    background: #ffffff;

    box-shadow:
        0 8px 24px
        rgba(22, 71, 52, 0.05);
}

.admin-dashboard-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    border-radius: 14px;

    background: #e8f5ee;

    font-size: 21px;
}

.admin-dashboard-stat-card > div:last-child {
    min-width: 0;
}

.admin-dashboard-stat-card small {
    display: block;

    margin-bottom: 3px;

    color: #7a8981;

    font-size: 10px;
    font-weight: 500;
}

.admin-dashboard-stat-card strong {
    display: block;

    color: #164734;

    font-size: 25px;
    font-weight: 700;
}

.admin-dashboard-stat-card span {
    color: #849189;

    font-size: 9px;
}

.admin-dashboard-stat-attention {
    border-color: #ead8c5;
}

.admin-dashboard-stat-attention
.admin-dashboard-stat-icon {
    background: #fff4e7;
}


/* =========================================================
   SECTION
========================================================= */

.admin-dashboard-section {
    margin-bottom: 30px;
}

.admin-dashboard-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 14px;
}

.admin-dashboard-heading h2 {
    margin: 4px 0 0;

    color: #164734;

    font-size: 18px;
    font-weight: 700;
}

.admin-dashboard-view-all {
    color: #3d8a68;

    font-size: 10px;
    font-weight: 600;

    text-decoration: none;
}

.admin-dashboard-view-all:hover {
    color: #164734;
}


/* =========================================================
   QUICK ACCESS
========================================================= */

.admin-dashboard-quick-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 15px;
}

.admin-dashboard-quick-card {
    position: relative;

    display: flex;
    align-items: center;
    gap: 15px;

    padding: 20px;

    border: 1px solid #deebe4;
    border-radius: 18px;

    background: #ffffff;

    color: inherit;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.admin-dashboard-quick-card:hover {
    transform: translateY(-2px);

    border-color: #bfd9cb;

    box-shadow:
        0 12px 28px
        rgba(22, 71, 52, 0.08);
}

.admin-dashboard-quick-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 47px;

    width: 47px;
    height: 47px;

    border-radius: 14px;

    background: #edf7f2;

    font-size: 20px;
}

.admin-dashboard-quick-card > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.admin-dashboard-quick-card h3 {
    margin: 0 0 4px;

    color: #164734;

    font-size: 13px;
    font-weight: 700;
}

.admin-dashboard-quick-card p {
    margin: 0;

    color: #78877f;

    font-size: 9px;
    line-height: 1.6;
}

.admin-dashboard-quick-arrow {
    color: #3d8a68;

    font-size: 19px;
}


/* =========================================================
   TWO COLUMN AREA
========================================================= */

.admin-dashboard-two-column {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 22px;
}


/* =========================================================
   LIST CARD
========================================================= */

.admin-dashboard-list-card {
    overflow: hidden;

    border: 1px solid #deebe4;
    border-radius: 18px;

    background: #ffffff;
}

.admin-dashboard-list-item,
.admin-dashboard-appointment-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 14px 16px;

    border-bottom: 1px solid #eef3f0;

    color: inherit;
    text-decoration: none;

    transition:
        background 0.2s ease;
}

.admin-dashboard-list-item:last-child,
.admin-dashboard-appointment-item:last-child {
    border-bottom: 0;
}

.admin-dashboard-list-item:hover,
.admin-dashboard-appointment-item:hover {
    background: #f8fbf9;
}

.admin-dashboard-list-avatar,
.admin-dashboard-appointment-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 39px;

    width: 39px;
    height: 39px;

    border-radius: 12px;

    background: #e8f5ee;

    color: #164734;

    font-size: 13px;
    font-weight: 700;
}

.admin-dashboard-appointment-icon {
    font-size: 16px;
}

.admin-dashboard-list-content {
    flex: 1;
    min-width: 0;
}

.admin-dashboard-list-content strong {
    display: block;

    overflow: hidden;

    color: #263c34;

    font-size: 10px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-dashboard-list-content small {
    display: block;

    overflow: hidden;

    margin-top: 2px;

    color: #849189;

    font-size: 8px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-dashboard-list-date {
    flex-shrink: 0;

    color: #849189;

    font-size: 8px;
}


/* =========================================================
   APPOINTMENT STATUS
========================================================= */

.admin-dashboard-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 5px 8px;

    border-radius: 999px;

    font-size: 7px;
    font-weight: 700;
}

.admin-dashboard-status-pending {
    background: #fff4dd;
    color: #8a661d;
}

.admin-dashboard-status-approved {
    background: #e8f5ee;
    color: #287253;
}

.admin-dashboard-status-rejected {
    background: #fff0f0;
    color: #a24848;
}

.admin-dashboard-status-completed {
    background: #edf3ff;
    color: #44658e;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.admin-dashboard-empty {
    padding: 35px 20px;

    text-align: center;
}

.admin-dashboard-empty span {
    display: block;

    margin-bottom: 8px;

    font-size: 25px;
}

.admin-dashboard-empty p {
    margin: 0;

    color: #849189;

    font-size: 10px;
}


/* =========================================================
   MINI SUMMARY
========================================================= */

.admin-dashboard-mini-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 30px;
    padding: 18px 20px;

    border: 1px solid #deebe4;
    border-radius: 17px;

    background: #ffffff;
}

.admin-dashboard-mini-summary > div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.admin-dashboard-mini-summary > div > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 12px;

    background: #edf7f2;

    font-size: 18px;
}

.admin-dashboard-mini-summary small {
    display: block;

    color: #819087;

    font-size: 9px;
}

.admin-dashboard-mini-summary strong {
    display: block;

    color: #164734;

    font-size: 19px;
}

.admin-dashboard-mini-summary a {
    color: #3d8a68;

    font-size: 9px;
    font-weight: 600;

    text-decoration: none;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .admin-dashboard-stat-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 850px) {

    .admin-dashboard-two-column {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .admin-dashboard-welcome {
        padding: 23px 20px;
    }

    .admin-dashboard-welcome h1 {
        font-size: 23px;
    }

    .admin-dashboard-welcome-icon {
        display: none;
    }

    .admin-dashboard-stat-grid {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-quick-grid {
        grid-template-columns: 1fr;
    }

    .admin-dashboard-mini-summary {
        align-items: flex-start;
        flex-direction: column;
    }

}

.appointment-booking-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.appointment-booking-disabled
.dashboard-card-content span {
    color: #8a8a8a;
}

/* =========================================================
   INVENTORY SELECTION PAGE
   Prefix: inv-select-
========================================================= */

.inv-select-body {
    margin: 0;
    min-height: 100vh;
    font-family: "Poppins", sans-serif;
    background:
        linear-gradient(
            180deg,
            #f4f9f6 0%,
            #ffffff 55%,
            #f7faf8 100%
        );
    color: #203a31;
}


/* =========================================================
   NAVBAR
========================================================= */

.inv-select-navbar {
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e4ece7;
    box-shadow: 0 4px 20px rgba(30, 70, 55, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}


.inv-select-nav-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    min-height: 78px;
    position:sticky;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


.inv-select-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #174d39;
    text-decoration: none;

    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.4px;
}


.inv-select-logo:hover {
    color: #174d39;
}


.inv-select-logo-icon {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #174d39;
    color: #ffffff;

    font-size: 22px;
    font-weight: 500;
}


.inv-select-dashboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 0 19px;

    border: 1px solid #bfd2c8;
    border-radius: 999px;

    background: #ffffff;
    color: #174d39;

    text-decoration: none;
    font-size: 13px;
    font-weight: 600;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.inv-select-dashboard-btn:hover {
    background: #174d39;
    border-color: #174d39;
    color: #ffffff;
    transform: translateY(-1px);
}


/* =========================================================
   PAGE CONTAINER
========================================================= */

.inv-select-page {
    padding: 52px 0 70px;
}


.inv-select-container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.inv-select-header {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    padding: 42px 44px;
    margin-bottom: 34px;

    overflow: hidden;

    border: 1px solid #dce9e2;
    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #eef7f2 100%
        );

    box-shadow:
        0 22px 60px rgba(26, 70, 52, 0.08);
}


.inv-select-header::after {
    content: "";

    position: absolute;
    width: 220px;
    height: 220px;
    right: -80px;
    top: -90px;

    border-radius: 50%;

    background: rgba(67, 137, 106, 0.08);
}


.inv-select-header-copy {
    position: relative;
    z-index: 2;
    max-width: 720px;
}


.inv-select-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 12px;
    padding: 7px 13px;

    border-radius: 999px;

    background: #e5f2eb;
    color: #236548;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}


.inv-select-header h1 {
    margin: 0 0 12px;

    color: #163f30;

    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 700;
}


.inv-select-header p {
    margin: 0;
    max-width: 670px;

    color: #61746c;

    font-size: 15px;
    line-height: 1.8;
}


.inv-select-header-icon {
    position: relative;
    z-index: 2;

    width: 104px;
    height: 104px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 28px;

    background: #174d39;

    box-shadow:
        0 18px 38px rgba(23, 77, 57, 0.2);

    font-size: 46px;
}


/* =========================================================
   INVENTORY GRID
========================================================= */

.inv-select-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 26px;

    margin-bottom: 30px;
}


/* =========================================================
   INVENTORY CARD
========================================================= */

.inv-select-card {
    position: relative;

    min-height: 430px;

    display: flex;
    flex-direction: column;

    padding: 30px;

    overflow: hidden;

    border: 1px solid #dce8e1;
    border-radius: 26px;

    background: #ffffff;

    box-shadow:
        0 16px 42px rgba(31, 72, 56, 0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.inv-select-card:hover {
    transform: translateY(-5px);

    border-color: #b9d2c5;

    box-shadow:
        0 24px 55px rgba(31, 72, 56, 0.13);
}


.inv-select-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: #2d7457;
}


.inv-select-card-phq::before {
    background: #59799a;
}


.inv-select-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 26px;
}


.inv-select-card-icon {
    width: 66px;
    height: 66px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background: #eef7f2;

    font-size: 31px;
}


.inv-select-card-phq .inv-select-card-icon {
    background: #edf3f9;
}


/* =========================================================
   STATUS
========================================================= */

.inv-select-status {
    display: inline-flex;
    align-items: center;

    padding: 7px 12px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}


.inv-select-status-active {
    background: #e5f4eb;
    color: #24724e;
}


.inv-select-status-soon {
    background: #eef1f4;
    color: #69777f;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.inv-select-card-content {
    flex: 1;
}


.inv-select-card-label {
    display: block;

    margin-bottom: 7px;

    color: #5f7c6e;

    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.inv-select-card-content h2 {
    margin: 0 0 13px;

    color: #183f31;

    font-size: 29px;
    font-weight: 700;
}


.inv-select-card-content p {
    margin: 0 0 23px;

    color: #697a72;

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   CATEGORY TAGS
========================================================= */

.inv-select-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


.inv-select-category-list span {
    display: inline-flex;
    align-items: center;

    min-height: 31px;
    padding: 0 11px;

    border-radius: 999px;

    background: #f1f6f3;
    color: #426455;

    font-size: 11px;
    font-weight: 500;
}


.inv-select-card-phq
.inv-select-category-list span {
    background: #f1f5f8;
    color: #566b7e;
}


/* =========================================================
   CARD FOOTER
========================================================= */

.inv-select-card-footer {
    margin-top: 28px;
}


.inv-select-start-btn {
    width: 100%;
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 20px;

    border-radius: 15px;

    background: #174d39;
    color: #ffffff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.inv-select-start-btn span {
    font-size: 20px;
}


.inv-select-start-btn:hover {
    background: #103d2d;
    color: #ffffff;
    transform: translateY(-1px);
}


.inv-select-disabled-btn {
    width: 100%;
    min-height: 50px;

    border: 0;
    border-radius: 15px;

    background: #eef1f2;
    color: #87918d;

    font-size: 14px;
    font-weight: 600;

    cursor: not-allowed;
}


/* =========================================================
   INFORMATION BOX
========================================================= */

.inv-select-info-box {
    display: flex;
    align-items: flex-start;
    gap: 18px;

    margin-bottom: 26px;
    padding: 25px 28px;

    border: 1px solid #dde9e3;
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 12px 34px rgba(31, 72, 56, 0.05);
}


.inv-select-info-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #e9f4ee;

    font-size: 21px;
}


.inv-select-info-box h3 {
    margin: 0 0 7px;

    color: #1b4736;

    font-size: 17px;
    font-weight: 600;
}


.inv-select-info-box p {
    margin: 0;

    color: #697970;

    font-size: 13px;
    line-height: 1.75;
}


/* =========================================================
   SUPPORT BOX
========================================================= */

.inv-select-support-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 32px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #174d39 0%,
            #245f48 100%
        );

    color: #ffffff;

    box-shadow:
        0 20px 45px rgba(22, 70, 52, 0.17);
}


.inv-select-support-label {
    display: block;

    margin-bottom: 6px;

    color: #bfe1cf;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


.inv-select-support-box h2 {
    margin: 0 0 8px;

    font-size: 20px;
    font-weight: 600;
}


.inv-select-support-box p {
    margin: 0;
    max-width: 720px;

    color: rgba(255, 255, 255, 0.8);

    font-size: 13px;
    line-height: 1.7;
}


.inv-select-support-btn {
    flex-shrink: 0;

    min-height: 45px;
    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: #ffffff;
    color: #174d39;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.inv-select-support-btn:hover {
    background: #eff7f3;
    color: #174d39;
    transform: translateY(-2px);
}


.inv-select-support-disabled {
    flex-shrink: 0;

    padding: 11px 17px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);

    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
    max-width: 900px
) {

    .inv-select-grid {
        grid-template-columns: 1fr;
    }


    .inv-select-header {
        padding: 34px;
    }


    .inv-select-header-icon {
        width: 82px;
        height: 82px;

        font-size: 38px;
    }


    .inv-select-support-box {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (
    max-width: 640px
) {

    .inv-select-nav-container,
    .inv-select-container {
        width: min(
            100% - 24px,
            1120px
        );
    }


    .inv-select-page {
        padding-top: 28px;
    }


    .inv-select-navbar {
        position: relative;
    }


    .inv-select-nav-container {
        min-height: 70px;
    }


    .inv-select-logo {
        font-size: 16px;
    }


    .inv-select-logo-icon {
        width: 30px;
        height: 30px;

        font-size: 18px;
    }


    .inv-select-dashboard-btn {
        min-height: 37px;
        padding: 0 13px;

        font-size: 11px;
    }


    .inv-select-header {
        align-items: flex-start;
        flex-direction: column;

        padding: 27px 23px;

        border-radius: 22px;
    }


    .inv-select-header h1 {
        font-size: 30px;
    }


    .inv-select-header-icon {
        width: 67px;
        height: 67px;

        border-radius: 18px;

        font-size: 31px;
    }


    .inv-select-card {
        min-height: auto;
        padding: 24px;

        border-radius: 21px;
    }


    .inv-select-card-content h2 {
        font-size: 25px;
    }


    .inv-select-info-box {
        padding: 21px;

        border-radius: 18px;
    }


    .inv-select-support-box {
        padding: 25px 22px;

        border-radius: 20px;
    }


    .inv-select-support-btn {
        width: 100%;
    }

}
/* =========================================================
   SUPPORT USERS / FOLLOW-UP PAGE
   Unique prefix: support-user-
========================================================= */

.support-user-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    padding: 36px;
    margin-bottom: 28px;
    border-radius: 28px;
    background: linear-gradient(
        135deg,
        #f5faf7,
        #ffffff
    );
    border: 1px solid #e2ece6;
}

.support-user-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #3f7259;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.support-user-header h1 {
    margin: 0 0 10px;
    color: #213a2d;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 700;
}

.support-user-header p {
    max-width: 720px;
    margin: 0;
    color: #66756c;
    line-height: 1.8;
}

.support-user-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.support-user-print-button,
.support-user-screening-button {
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s ease;
}

.support-user-print-button {
    border: 1px solid #d8e4dd;
    background: #ffffff;
    color: #315d47;
}

.support-user-screening-button {
    display: inline-flex;
    align-items: center;
    background: #315d47;
    color: #ffffff;
    border: 1px solid #315d47;
}

.support-user-print-button:hover,
.support-user-screening-button:hover {
    transform: translateY(-1px);
}

.support-user-screening-button:hover {
    color: #ffffff;
}

.support-user-date-card {
    min-width: 205px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e4ece7;
    box-shadow: 0 12px 32px rgba(38, 74, 55, 0.07);
}

.support-user-date-card > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #edf6f0;
    font-size: 21px;
}

.support-user-date-card small,
.support-user-date-card strong {
    display: block;
}

.support-user-date-card small {
    margin-bottom: 3px;
    color: #89968e;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.support-user-date-card strong {
    color: #2f4638;
    font-size: 13px;
}


/* notice */

.support-user-system-notice,
.support-user-error-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
    padding: 18px 20px;
    border-radius: 16px;
}

.support-user-system-notice {
    background: #fff9e9;
    border: 1px solid #f1dfaa;
    color: #705c25;
}

.support-user-system-notice > span {
    font-size: 22px;
}

.support-user-system-notice strong {
    display: block;
    margin-bottom: 4px;
}

.support-user-system-notice p {
    margin: 0;
    line-height: 1.7;
}

.support-user-system-notice code {
    color: inherit;
    font-weight: 700;
}

.support-user-error-alert {
    background: #fff0f0;
    border: 1px solid #f4c9c9;
    color: #8e3333;
}


/* statistics */

.support-user-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.support-user-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 135px;
    padding: 22px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e2ebe5;
    box-shadow: 0 10px 30px rgba(37, 66, 51, 0.05);
}

.support-user-stat-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #eff7f2;
    font-size: 25px;
}

.support-user-stat-card small,
.support-user-stat-card strong,
.support-user-stat-card span {
    display: block;
}

.support-user-stat-card small {
    color: #7d8d83;
    font-size: 12px;
}

.support-user-stat-card strong {
    margin: 3px 0;
    color: #284436;
    font-size: 29px;
}

.support-user-stat-card span {
    color: #8c9991;
    font-size: 11px;
}

.support-user-stat-alert {
    border-color: #f0d4d4;
    background: #fffafa;
}

.support-user-stat-alert .support-user-stat-icon {
    background: #fff0f0;
}


/* confidentiality */

.support-user-confidential-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 26px;
    padding: 19px 22px;
    border-radius: 18px;
    background: #f7faf8;
    border: 1px solid #dfe9e3;
}

.support-user-confidential-icon {
    font-size: 23px;
}

.support-user-confidential-card strong {
    display: block;
    margin-bottom: 4px;
    color: #334e40;
}

.support-user-confidential-card p {
    margin: 0;
    color: #718077;
    font-size: 13px;
    line-height: 1.7;
}


/* filter */

.support-user-filter-card {
    margin-bottom: 30px;
    padding: 24px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e1e9e4;
}

.support-user-filter-form {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.8fr)
        repeat(3, minmax(150px, 1fr))
        auto;
    gap: 16px;
    align-items: end;
}

.support-user-filter-form label {
    display: block;
    margin-bottom: 7px;
    color: #43584c;
    font-size: 12px;
    font-weight: 600;
}

.support-user-filter-form input,
.support-user-filter-form select {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid #d9e3dc;
    border-radius: 11px;
    background: #ffffff;
    color: #31473a;
    font-family: inherit;
    font-size: 13px;
    outline: none;
}

.support-user-filter-form input:focus,
.support-user-filter-form select:focus {
    border-color: #709982;
    box-shadow: 0 0 0 3px rgba(70, 121, 91, 0.1);
}

.support-user-filter-actions {
    display: flex;
    gap: 8px;
}

.support-user-filter-button,
.support-user-reset-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 11px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.support-user-filter-button {
    border: 0;
    background: #315f48;
    color: #ffffff;
}

.support-user-reset-button {
    border: 1px solid #dbe3de;
    background: #ffffff;
    color: #68776e;
}


/* heading */

.support-user-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.support-user-section-heading h2 {
    margin: 0;
    color: #273f32;
    font-size: 23px;
    font-weight: 600;
}

.support-user-record-count {
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef5f1;
    color: #50705e;
    font-size: 12px;
    font-weight: 600;
}


/* cards */

.support-user-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.support-user-card {
    overflow: hidden;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #dfe8e2;
    box-shadow: 0 12px 35px rgba(29, 58, 42, 0.055);
}

.support-user-card-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
    border-bottom: 1px solid #edf1ee;
}

.support-user-person {
    display: flex;
    align-items: center;
    gap: 13px;
}

.support-user-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #315e48;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.support-user-person h3 {
    margin: 0 0 3px;
    color: #273f32;
    font-size: 15px;
    font-weight: 650;
}

.support-user-person p {
    margin: 0;
    color: #8b9990;
    font-size: 11px;
}

.support-user-badge-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.support-user-inventory-badge,
.support-user-attention-badge {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}

.support-user-inventory-dass {
    background: #edf4ff;
    color: #42628f;
}

.support-user-inventory-phq {
    background: #f3edff;
    color: #674a94;
}

.support-user-attention-badge {
    background: #fff0f0;
    color: #a44141;
}


/* info */

.support-user-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: #edf1ee;
    border-bottom: 1px solid #edf1ee;
}

.support-user-info-grid > div {
    padding: 15px 18px;
    background: #fafcfb;
}

.support-user-info-grid span,
.support-user-info-grid strong {
    display: block;
}

.support-user-info-grid span {
    margin-bottom: 4px;
    color: #89958d;
    font-size: 10px;
}

.support-user-info-grid strong {
    color: #43564a;
    font-size: 12px;
    overflow-wrap: anywhere;
}


/* result heading */

.support-user-result-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 20px 10px;
    color: #324c3e;
    font-size: 13px;
}


/* DASS + PHQ */

.support-user-dass-grid,
.support-user-phq-grid {
    display: grid;
    gap: 10px;
    padding: 0 20px 20px;
}

.support-user-dass-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.support-user-phq-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.support-user-dass-grid > div,
.support-user-phq-grid > div {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 13px;
    text-align: center;
    border-radius: 14px;
    background: #f8faf9;
    border: 1px solid #e7ede9;
}

.support-user-dass-grid span,
.support-user-phq-grid span {
    color: #87958d;
    font-size: 10px;
}

.support-user-dass-grid strong,
.support-user-phq-grid strong {
    margin: 5px 0;
    color: #2b4436;
    font-size: 20px;
}


/* severity */

.support-user-severity-badge {
    display: inline-flex;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
}

.support-user-severity-normal {
    background: #e9f8ef;
    color: #357b50;
}

.support-user-severity-mild {
    background: #fff8dc;
    color: #907623;
}

.support-user-severity-moderate {
    background: #fff0d7;
    color: #9a641b;
}

.support-user-severity-severe {
    background: #ffe5e5;
    color: #ad4444;
}

.support-user-severity-extreme {
    background: #f5dddd;
    color: #8f2929;
}

.support-user-severity-default {
    background: #eff2f0;
    color: #69766e;
}


/* Q9 alert */

.support-user-priority-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 20px 20px;
    padding: 15px;
    border-radius: 14px;
    background: #fff4f4;
    border: 1px solid #f2caca;
}

.support-user-priority-alert > span {
    font-size: 20px;
}

.support-user-priority-alert strong {
    display: block;
    margin-bottom: 4px;
    color: #963b3b;
    font-size: 12px;
}

.support-user-priority-alert p {
    margin: 0;
    color: #915959;
    font-size: 11px;
    line-height: 1.6;
}


/* actions */

.support-user-card-actions {
    display: flex;
    gap: 10px;
    padding: 18px 20px 20px;
    border-top: 1px solid #edf1ee;
}

.support-user-view-button,
.support-user-appointment-button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.support-user-view-button {
    background: #315e48;
    color: #ffffff;
}

.support-user-view-button:hover {
    color: #ffffff;
}

.support-user-appointment-button {
    background: #f4f7f5;
    color: #466454;
    border: 1px solid #dce5df;
}


/* empty */

.support-user-empty {
    padding: 70px 30px;
    text-align: center;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #e1e9e4;
}

.support-user-empty > div {
    margin-bottom: 12px;
    font-size: 40px;
}

.support-user-empty h3 {
    margin-bottom: 8px;
    color: #2c4537;
    font-size: 20px;
}

.support-user-empty p {
    max-width: 520px;
    margin: 0 auto 18px;
    color: #849087;
    font-size: 13px;
}

.support-user-empty a {
    display: inline-flex;
    padding: 10px 18px;
    border-radius: 10px;
    background: #315e48;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}


/* responsive */

@media (max-width: 1200px) {

    .support-user-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .support-user-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .support-user-filter-search {
        grid-column: 1 / -1;
    }
}


@media (max-width: 900px) {

    .support-user-header {
        flex-direction: column;
    }

    .support-user-date-card {
        width: 100%;
    }

    .support-user-card-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 650px) {

    .support-user-header {
        padding: 24px 20px;
    }

    .support-user-stat-grid {
        grid-template-columns: 1fr;
    }

    .support-user-filter-form {
        grid-template-columns: 1fr;
    }

    .support-user-filter-search {
        grid-column: auto;
    }

    .support-user-filter-actions {
        flex-direction: column;
    }

    .support-user-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .support-user-card-header {
        flex-direction: column;
    }

    .support-user-badge-area {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .support-user-info-grid {
        grid-template-columns: 1fr;
    }

    .support-user-dass-grid,
    .support-user-phq-grid {
        grid-template-columns: 1fr;
    }

    .support-user-card-actions {
        flex-direction: column;
    }
}


/* print */

@media print {

    .admin-sidebar,
    .admin-topbar,
    .admin-sidebar-overlay,
    .support-user-header-actions,
    .support-user-filter-card,
    .support-user-card-actions,
    .home-main-footer {
        display: none !important;
    }

    .admin-dashboard-main {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .admin-dashboard-content {
        padding: 0 !important;
    }

    .support-user-card-grid {
        grid-template-columns: 1fr 1fr;
    }

    .support-user-card {
        break-inside: avoid;
        box-shadow: none;
    }
}

/* =========================================================
   SUPPORT USERS PAGE
========================================================= */

.support-users-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    padding: 34px;
    margin-bottom: 28px;
    background: #ffffff;
    border: 1px solid #e7ece9;
    border-radius: 24px;
    box-shadow: 0 12px 35px rgba(20, 70, 52, 0.06);
}

.support-users-header h1 {
    margin: 8px 0 10px;
    color: #173d31;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
}

.support-users-header p {
    max-width: 760px;
    margin: 0;
    color: #6d7c76;
    line-height: 1.8;
}

.support-users-label {
    display: inline-block;
    color: #2c755b;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.support-users-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.support-users-print-button,
.support-users-screening-button {
    min-height: 44px;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s ease;
}

.support-users-print-button {
    border: none;
    background: #174735;
    color: #ffffff;
}

.support-users-screening-button {
    border: 1px solid #174735;
    background: #ffffff;
    color: #174735;
}

.support-users-print-button:hover {
    background: #103528;
}

.support-users-screening-button:hover {
    background: #edf7f2;
    color: #174735;
}

.support-users-date-card {
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #f4f8f6;
    border-radius: 18px;
}

.support-users-date-card > span {
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    background: #ffffff;
    border-radius: 14px;
    font-size: 1.3rem;
}

.support-users-date-card small,
.support-users-date-card strong {
    display: block;
}

.support-users-date-card small {
    color: #829089;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.support-users-date-card strong {
    color: #23493c;
    font-size: 0.92rem;
}


/* =========================================================
   SUMMARY
========================================================= */

.support-users-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.support-users-summary-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 23px;
    background: #ffffff;
    border: 1px solid #e5ebe8;
    border-radius: 20px;
    box-shadow: 0 9px 28px rgba(19, 64, 48, 0.05);
}

.support-users-summary-icon {
    flex: 0 0 auto;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    background: #eef7f3;
    border-radius: 17px;
    font-size: 1.4rem;
}

.support-users-summary-card small,
.support-users-summary-card strong,
.support-users-summary-card span {
    display: block;
}

.support-users-summary-card small {
    margin-bottom: 3px;
    color: #718078;
    font-size: 0.76rem;
}

.support-users-summary-card strong {
    color: #183d31;
    font-size: 1.85rem;
    line-height: 1.2;
}

.support-users-summary-card span {
    margin-top: 4px;
    color: #91a098;
    font-size: 0.7rem;
}

.support-users-summary-warning {
    border-color: #f1ded3;
    background: #fffaf7;
}


/* =========================================================
   FILTER
========================================================= */

.support-users-filter-card {
    padding: 24px;
    margin-bottom: 30px;
    background: #ffffff;
    border: 1px solid #e6ece9;
    border-radius: 22px;
}

.support-users-filter-form {
    display: grid;
    grid-template-columns: 1.7fr repeat(4, 1fr) auto;
    gap: 16px;
    align-items: end;
}

.support-users-filter-form label {
    display: block;
    margin-bottom: 7px;
    color: #415b51;
    font-size: 0.78rem;
    font-weight: 600;
}

.support-users-filter-form input,
.support-users-filter-form select {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid #dbe5e0;
    border-radius: 12px;
    background: #ffffff;
    color: #28483d;
    outline: none;
}

.support-users-filter-form input:focus,
.support-users-filter-form select:focus {
    border-color: #4d8b72;
    box-shadow: 0 0 0 3px rgba(49, 121, 91, 0.1);
}

.support-users-filter-actions {
    display: flex;
    gap: 8px;
}

.support-users-filter-button,
.support-users-reset-button {
    min-height: 46px;
    padding: 11px 17px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.support-users-filter-button {
    border: none;
    background: #174735;
    color: #ffffff;
}

.support-users-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d6dfdb;
    color: #52675e;
    text-decoration: none;
}


/* =========================================================
   LIST
========================================================= */

.support-users-list-section {
    margin-bottom: 30px;
}

.support-users-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 18px;
}

.support-users-section-heading h2 {
    margin: 5px 0 0;
    color: #1a4033;
    font-size: 1.45rem;
    font-weight: 700;
}

.support-users-record-count {
    padding: 7px 13px;
    border-radius: 999px;
    background: #edf5f1;
    color: #3f6c59;
    font-size: 0.76rem;
    font-weight: 600;
}

.support-users-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.support-users-card {
    padding: 25px;
    background: #ffffff;
    border: 1px solid #e4ebe7;
    border-radius: 22px;
    box-shadow: 0 9px 30px rgba(15, 60, 43, 0.05);
}

.support-users-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1ef;
}

.support-users-user {
    display: flex;
    align-items: center;
    gap: 13px;
}

.support-users-avatar {
    flex: 0 0 auto;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    background: #174735;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
}

.support-users-user h3 {
    margin: 0;
    color: #1c4034;
    font-size: 1rem;
    font-weight: 700;
}

.support-users-user p {
    margin: 4px 0 0;
    color: #89968f;
    font-size: 0.76rem;
}

.support-users-attention-badge {
    padding: 7px 11px;
    border-radius: 999px;
    background: #fff0e8;
    color: #b0572b;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================================
   META
========================================================= */

.support-users-meta-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 17px 0;
}

.support-users-role-badge,
.support-users-inventory-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}

.support-users-role-badge {
    background: #f0f3f8;
    color: #4b6070;
}

.support-users-inventory-dass {
    background: #e9f5f0;
    color: #2f765d;
}

.support-users-inventory-phq {
    background: #f1edfa;
    color: #69569b;
}


/* =========================================================
   USER INFORMATION
========================================================= */

.support-users-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.support-users-info-grid > div,
.support-users-student-details > div {
    padding: 13px;
    background: #f8faf9;
    border-radius: 13px;
}

.support-users-info-grid span,
.support-users-info-grid strong,
.support-users-student-details span,
.support-users-student-details strong {
    display: block;
}

.support-users-info-grid span,
.support-users-student-details span {
    margin-bottom: 4px;
    color: #89968f;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.support-users-info-grid strong,
.support-users-student-details strong {
    color: #334f45;
    font-size: 0.77rem;
    word-break: break-word;
}

.support-users-student-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}


/* =========================================================
   RESULTS
========================================================= */

.support-users-result-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 12px;
    color: #2d5144;
    font-size: 0.85rem;
}

.support-users-dass-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.support-users-dass-grid > div {
    padding: 15px 10px;
    text-align: center;
    border: 1px solid #e7ecea;
    border-radius: 15px;
}

.support-users-dass-grid span,
.support-users-dass-grid strong {
    display: block;
}

.support-users-dass-grid span {
    color: #71827a;
    font-size: 0.67rem;
}

.support-users-dass-grid strong {
    margin: 4px 0 7px;
    color: #193e32;
    font-size: 1.35rem;
}

.support-users-phq-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
    border: 1px solid #e5e8ee;
    border-radius: 16px;
    background: #faf9fd;
}

.support-users-phq-result span,
.support-users-phq-result strong {
    display: block;
}

.support-users-phq-result > div span {
    color: #7d8582;
    font-size: 0.7rem;
}

.support-users-phq-result > div strong {
    color: #203f35;
    font-size: 1.7rem;
}


/* =========================================================
   SEVERITY
========================================================= */

.support-users-severity-badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
}

.support-users-severity-normal {
    background: #e8f6ef;
    color: #287353;
}

.support-users-severity-mild {
    background: #fff7d9;
    color: #8a6a0a;
}

.support-users-severity-moderate {
    background: #fff0dc;
    color: #aa6420;
}

.support-users-severity-severe {
    background: #fde8e8;
    color: #b43c3c;
}

.support-users-severity-default {
    background: #eef1f3;
    color: #64706b;
}


/* =========================================================
   ACTIONS
========================================================= */

.support-users-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 17px;
    border-top: 1px solid #edf1ef;
}

.support-users-view-button,
.support-users-appointment-button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    padding: 9px 14px;
    border-radius: 11px;
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
}

.support-users-view-button {
    background: #174735;
    color: #ffffff;
}

.support-users-view-button:hover {
    background: #103528;
    color: #ffffff;
}

.support-users-appointment-button {
    border: 1px solid #d5e1dc;
    color: #426b5a;
    background: #ffffff;
}

.support-users-appointment-button:hover {
    background: #f3f8f5;
    color: #315747;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.support-users-empty {
    padding: 60px 25px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e5ece8;
    border-radius: 22px;
}

.support-users-empty > div {
    margin-bottom: 12px;
    font-size: 2.6rem;
}

.support-users-empty h3 {
    color: #204638;
    font-size: 1.2rem;
    font-weight: 700;
}

.support-users-empty p {
    max-width: 470px;
    margin: 8px auto 18px;
    color: #809087;
    line-height: 1.7;
}

.support-users-empty a {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    background: #174735;
    color: #ffffff;
    font-size: 0.8rem;
    text-decoration: none;
}


/* =========================================================
   PAGINATION
========================================================= */

.support-users-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 28px;
}

.support-users-pagination > div {
    display: flex;
    gap: 7px;
}

.support-users-pagination a {
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid #dbe5e0;
    border-radius: 10px;
    background: #ffffff;
    color: #49675a;
    font-size: 0.76rem;
    text-decoration: none;
}

.support-users-pagination a.active {
    border-color: #174735;
    background: #174735;
    color: #ffffff;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .support-users-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .support-users-filter-form {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .support-users-filter-search {
        grid-column: span 2;
    }
}


@media (max-width: 900px) {

    .support-users-header {
        flex-direction: column;
    }

    .support-users-date-card {
        width: 100%;
    }

    .support-users-card-grid {
        grid-template-columns: 1fr;
    }

    .support-users-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 600px) {

    .support-users-header {
        padding: 23px 18px;
    }

    .support-users-summary-grid {
        grid-template-columns: 1fr;
    }

    .support-users-filter-form {
        grid-template-columns: 1fr;
    }

    .support-users-filter-search {
        grid-column: auto;
    }

    .support-users-filter-actions {
        width: 100%;
    }

    .support-users-filter-button,
    .support-users-reset-button {
        flex: 1;
    }

    .support-users-card {
        padding: 18px;
    }

    .support-users-card-header {
        flex-direction: column;
    }

    .support-users-info-grid,
    .support-users-student-details,
    .support-users-dass-grid {
        grid-template-columns: 1fr;
    }

    .support-users-card-actions {
        flex-direction: column;
    }

    .support-users-pagination {
        flex-direction: column;
    }
}


/* =========================================================
   PRINT
========================================================= */

@media print {

    .admin-sidebar,
    .admin-topbar,
    .admin-sidebar-overlay,
    .support-users-header-actions,
    .support-users-filter-card,
    .support-users-card-actions,
    .support-users-pagination,
    .home-main-footer {
        display: none !important;
    }

    .admin-dashboard-main {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .support-users-card-grid {
        grid-template-columns: 1fr;
    }

    .support-users-card {
        break-inside: avoid;
        box-shadow: none;
    }
}

/* =========================================================
   SUPER ADMIN DASHBOARD
========================================================= */


.sa-dashboard-body {
    margin:0;
    font-family:'Poppins',sans-serif;
    background:#f5f7fb;
    color:#1f2937;
}


/* MAIN */

.sa-dashboard-page {
    min-height:100vh;
}


.sa-dashboard-container {
    width:92%;
    max-width:1400px;
    margin:auto;
    padding:30px 0;
}





/* =========================================================
   TOP BAR
========================================================= */


.sa-dashboard-topbar {

    background:white;
    border-radius:20px;
    padding:20px 25px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.06);

}


.sa-dashboard-logo {

    text-decoration:none;
    color:#2563eb;

    display:flex;
    align-items:center;
    gap:12px;

    font-size:22px;
    font-weight:700;

}


.sa-dashboard-logo-icon {

    width:42px;
    height:42px;

    background:#2563eb;
    color:white;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    font-size:25px;

}




.sa-dashboard-top-actions {

    display:flex;
    align-items:center;
    gap:20px;

}




.sa-dashboard-system-status {

    display:flex;
    gap:10px;

}



.sa-dashboard-status-pill {

    padding:8px 15px;

    border-radius:50px;

    font-size:13px;

    background:#ecfdf5;

    color:#059669;

    font-weight:600;

}


.sa-dashboard-status-maintenance {

    background:#fef3c7;
    color:#d97706;

}



.sa-dashboard-account {

    display:flex;
    align-items:center;
    gap:12px;

}



.sa-dashboard-account-icon {

    width:45px;
    height:45px;

    background:#2563eb;
    color:white;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    font-weight:700;

}



.sa-dashboard-account span {

    display:block;

    font-size:13px;
    color:#6b7280;

}




.sa-dashboard-logout-btn {

    text-decoration:none;

    background:#ef4444;

    color:white;

    padding:10px 18px;

    border-radius:10px;

    font-size:14px;

}





/* =========================================================
 HERO
========================================================= */


.sa-dashboard-hero {

    margin-top:30px;

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #7c3aed
    );

    color:white;

    border-radius:25px;

    padding:45px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.sa-dashboard-hero-label {

    font-size:14px;

    opacity:.8;

}



.sa-dashboard-hero h1 {

    font-size:40px;

    margin:15px 0;

}



.sa-dashboard-hero p {

    max-width:600px;

    opacity:.9;

}



.sa-dashboard-hero-graphic {

    font-size:90px;

}




/* =========================================================
 STATISTICS
========================================================= */


.sa-dashboard-stats {

    margin-top:30px;

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

}



.sa-dashboard-stat-card {

    background:white;

    padding:25px;

    border-radius:20px;

    display:flex;

    align-items:center;

    gap:20px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.05);

}



.sa-dashboard-stat-icon {

    width:60px;
    height:60px;

    background:#eff6ff;

    border-radius:15px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:30px;

}



.sa-dashboard-stat-card span {

    color:#6b7280;

    font-size:14px;

}



.sa-dashboard-stat-card strong {

    display:block;

    font-size:30px;

    margin-top:5px;

}


.sa-dashboard-stat-alert {

    border-left:5px solid #ef4444;

}





/* =========================================================
 MENU CARD
========================================================= */


.sa-dashboard-management {

    margin-top:40px;

}


.sa-dashboard-section-heading span {

    color:#2563eb;

    font-weight:600;

}


.sa-dashboard-section-heading h2 {

    margin:5px 0;

    font-size:30px;

}




.sa-dashboard-menu-grid {

    margin-top:25px;

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

}



.sa-dashboard-menu-card {

    background:white;

    padding:25px;

    border-radius:20px;

    text-decoration:none;

    color:#111827;

    box-shadow:
    0 8px 25px rgba(0,0,0,.05);

    transition:.3s;

}



.sa-dashboard-menu-card:hover {

    transform:translateY(-5px);

}



.sa-dashboard-menu-icon {

    font-size:40px;

    margin-bottom:20px;

}



.sa-dashboard-menu-card h3 {

    font-size:18px;

}


.sa-dashboard-menu-card p {

    color:#6b7280;

    font-size:14px;

}




/* =========================================================
 TABLE
========================================================= */


.sa-dashboard-table-card {

    background:white;

    padding:25px;

    border-radius:20px;

    margin-top:20px;

    overflow:hidden;

}


.table {

    width:100%;

    border-collapse:collapse;

}



.table th {

    background:#f3f4f6;

    padding:15px;

    text-align:left;

    font-size:14px;

}



.table td {

    padding:15px;

    border-bottom:1px solid #eee;

}




/* =========================================================
 FOOTER
========================================================= */


.home-main-footer {

    margin-top:50px;

    background:#111827;

    color:white;

    padding:25px;

}



.home-footer-bottom {

    display:flex;

    justify-content:space-between;

    align-items:center;

}





/* =========================================================
 RESPONSIVE
========================================================= */


@media(max-width:1100px){


.sa-dashboard-stats,
.sa-dashboard-menu-grid {

    grid-template-columns:
    repeat(2,1fr);

}


}



@media(max-width:700px){


.sa-dashboard-topbar,
.sa-dashboard-hero,
.home-footer-bottom {

    flex-direction:column;

    gap:20px;

}



.sa-dashboard-stats,
.sa-dashboard-menu-grid {

    grid-template-columns:1fr;

}



.sa-dashboard-hero h1 {

    font-size:30px;

}


}

/* =========================================================
   POLY HEALTH GREEN THEME
========================================================= */


.sa-dashboard-body {

    background:#f4f8f6;
    color:#12372a;

}


/* TOP BAR */

.sa-dashboard-topbar {

    background:#ffffff;

    border-radius:24px;

    box-shadow:
    0 15px 35px rgba(15,55,42,.08);

}




.sa-dashboard-logo {

    color:#124d3a;

}



.sa-dashboard-logo-icon {

    background:#124d3a;

    color:white;

}




/* ACCOUNT */

.sa-dashboard-account-icon {

    background:#dff1e8;

    color:#124d3a;

}



.sa-dashboard-account span {

    color:#77948a;

}



/* LOGOUT */

.sa-dashboard-logout-btn {

    background:white;

    color:#d9534f;

    border:1px solid #f08a84;

}



.sa-dashboard-logout-btn:hover {

    background:#fff5f5;

}



/* =========================================================
 HERO SECTION
========================================================= */


.sa-dashboard-hero {


    background:

    linear-gradient(
        120deg,
        #124d3a,
        #2f8f78
    );


    border-radius:35px;

    box-shadow:

    0 20px 45px rgba(18,77,58,.25);

}



.sa-dashboard-hero-label {


    background:rgba(255,255,255,.15);

    border:1px solid rgba(255,255,255,.25);

    padding:8px 18px;

    border-radius:30px;

}




.sa-dashboard-hero h1 {

    color:white;

}



.sa-dashboard-hero p {

    color:#e8f6ef;

}





/* =========================================================
 STAT CARD
========================================================= */


.sa-dashboard-stat-card {


    background:white;


    border-radius:25px;


    border:1px solid #e3eee9;


}



.sa-dashboard-stat-icon {


    background:#e8f4ef;


}



.sa-dashboard-stat-card span {

    color:#78948a;

}



.sa-dashboard-stat-card strong {

    color:#124d3a;

}



.sa-dashboard-stat-alert {

    border-left:5px solid #e8a317;

}





/* =========================================================
 MENU CARD
========================================================= */


.sa-dashboard-menu-card {


    background:white;


    border:1px solid #e5eee9;


}



.sa-dashboard-menu-card:hover {


    box-shadow:

    0 15px 30px rgba(18,77,58,.12);


}



.sa-dashboard-menu-icon {


    background:#e8f4ef;


    width:65px;

    height:65px;

    border-radius:18px;


    display:flex;

    justify-content:center;

    align-items:center;


}



.sa-dashboard-menu-card h3 {


    color:#124d3a;


}



.sa-dashboard-menu-card p {


    color:#78948a;


}



.sa-dashboard-menu-arrow {


    color:#2f8f78;


}





/* =========================================================
 TABLE
========================================================= */


.sa-dashboard-table-card {


    background:white;

    border-radius:25px;

    border:1px solid #e3eee9;


}



.table th {


    background:#edf6f2;

    color:#124d3a;


}



.table td {


    color:#45665a;


}



/* BADGE */

.severity-badge {


    background:#e8f4ef;

    color:#124d3a;

    padding:6px 12px;

    border-radius:30px;

    font-size:13px;


}



.appointment-status {


    background:#fff1c9;

    color:#a66b00;

    padding:6px 14px;

    border-radius:30px;


}



/* =========================================================
 FOOTER
========================================================= */


.sa-dashboard-footer {


    background:#124d3a;

    color:white;

    border-radius:25px;

    padding:25px;


}


.home-main-footer {


    background:#0c2d22;

}






/* MOBILE */

@media(max-width:900px){


.sa-dashboard-hero {

    padding:30px;

}


.sa-dashboard-hero h1 {

    font-size:32px;

}


}

/* ================================
   GLOBAL FOOTER
================================ */

.home-main-footer {

    background:#063b2d;

    height:120px;

    margin-top:60px;

    display:flex;

    align-items:center;

}


.home-footer-container {

    width:90%;

    max-width:1600px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.home-footer-brand h3 {

    margin:0;

    color:white;

    font-family:Georgia, serif;

    font-size:28px;

    letter-spacing:1px;

}


.home-footer-brand p {

    margin:6px 0 0;

    color:#c6ddd6;

    font-size:12px;

}


.home-footer-copyright {

    color:#c6ddd6;

    font-size:12px;

    white-space:nowrap;

}

/* =====================================
   GLOBAL FOOTER
===================================== */

.home-main-footer {

    background:#063b2d;

    height:120px;

    margin-top:60px;

    display:flex;

    align-items:center;

}


.home-footer-bottom {

    width:90%;

    max-width:1600px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.home-footer-brand h3 {

    margin:0;

    color:white;

    font-family:Georgia, serif;

    font-size:28px;

    letter-spacing:1px;

}


.home-footer-brand p {

    margin-top:6px;

    margin-bottom:0;

    color:#c6ddd6;

    font-size:12px;

}


.home-footer-copyright {

    color:#c6ddd6;

    font-size:12px;

    white-space:nowrap;

}

body {

    min-height:100vh;

    display:flex;

    flex-direction:column;

}


.home-main-footer {

    background:#063b2d;

    height:120px;

    margin-top:60px;

    margin-bottom:0;

    padding:0;

    display:flex;

    align-items:center;

}

/* remove dashboard container effect */

.sa-dashboard-container .home-main-footer {

    width:100vw;

    margin-left:calc(50% - 50vw);

}

/* =====================================================
   SUPER ADMIN USERS PAGE - POLY HEALTH THEME
===================================================== */


.sa-users-body {

    background:#f4f8f6;
    font-family:'Poppins',sans-serif;
    color:#164e3d;

}



.sa-users-page {

    min-height:100vh;
    padding:35px 48px;

}



.sa-users-container {

    max-width:1650px;
    margin:auto;

}



/* =========================
TOP BAR
========================= */


.sa-users-topbar {

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:35px;

}



.sa-users-logo {

    font-size:30px;
    font-weight:700;

    color:#164e3d;

    text-decoration:none;

}



.sa-users-dashboard-btn {

    padding:14px 28px;

    border:1px solid #164e3d;

    border-radius:30px;

    color:#164e3d;

    text-decoration:none;

    font-weight:600;

    background:white;

}





/* =========================
HEADER HERO
========================= */


.sa-users-header {


    background:

    linear-gradient(
        135deg,
        #164e3d,
        #31947b
    );


    border-radius:35px;

    padding:55px 50px;

    color:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;


}



.sa-users-header-label {


    display:inline-block;

    padding:8px 18px;

    border-radius:20px;

    background:rgba(255,255,255,.15);

    border:1px solid rgba(255,255,255,.3);

    font-size:13px;

    font-weight:600;

}



.sa-users-header h1 {


    margin-top:25px;

    font-size:48px;

    font-weight:700;

}



.sa-users-header p {


    font-size:17px;

    opacity:.9;

}



.sa-users-header-icon {


    width:100px;

    height:100px;

    border-radius:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.15);

    font-size:55px;

}





/* =========================
TOOLBAR
========================= */


.sa-users-toolbar {


    background:white;

    border-radius:25px;

    padding:28px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}



.sa-users-toolbar h2 {


    margin:0;

    font-size:25px;

}



.sa-users-toolbar p {


    margin:8px 0 0;

    color:#718096;

}





.sa-users-search-form {


    display:flex;

    gap:12px;

}



.sa-users-search-box {


    width:400px;

    height:52px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 20px;

    border:1px solid #d7e5df;

    border-radius:30px;

}



.sa-users-search-box input {


    border:none;

    outline:none;

    width:100%;

    font-family:Poppins;

}





.sa-users-search-btn {


    background:#164e3d;

    color:white;

    border:none;

    padding:0 28px;

    border-radius:30px;

    font-weight:600;

}





.sa-users-clear-btn {


    padding:15px 25px;

    border-radius:30px;

    background:#fff0ef;

    color:#d9534f;

    text-decoration:none;

}





/* =========================
TABLE
========================= */


.sa-users-table-card {


    background:white;

    border-radius:30px;

    overflow:hidden;

}



.sa-users-table {


    width:100%;

    border-collapse:collapse;

}



.sa-users-table thead {


    background:#edf6f2;

}



.sa-users-table th {


    padding:20px;

    color:#164e3d;

    font-size:14px;

    text-align:left;

}



.sa-users-table td {


    padding:22px 20px;

    border-bottom:1px solid #edf0ee;

    color:#365b53;

}





/* USER */


.sa-users-user-cell {


    display:flex;

    align-items:center;

    gap:15px;

}



.sa-users-avatar {


    width:50px;

    height:50px;

    background:#dff1eb;

    color:#164e3d;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

}



.sa-users-user-cell strong {


    display:block;

}



.sa-users-user-cell small {


    color:#8aa49c;

}





/* BADGES */


.sa-users-number {


    font-weight:600;

    color:#164e3d;

}



.sa-users-category-badge {


    background:#e4f4ee;

    color:#23745d;

    padding:7px 15px;

    border-radius:20px;

    font-size:13px;

}





.sa-users-advisor {


    display:flex;

    align-items:center;

    gap:8px;

}



.sa-users-advisor-dot {


    width:9px;

    height:9px;

    background:#39a96b;

    border-radius:50%;

}



.sa-users-unassigned {


    background:#fff2d8;

    color:#b7791f;

    padding:7px 15px;

    border-radius:20px;

}





/* =========================
BUTTON
========================= */


.sa-users-actions {


    display:flex;

    gap:10px;

}



.sa-users-edit-btn {


    border:1px solid #23856a;

    color:#23856a;

    padding:10px 22px;

    border-radius:25px;

    text-decoration:none;

}



.sa-users-delete-btn {


    border:1px solid #e57373;

    color:#e57373;

    padding:10px 22px;

    border-radius:25px;

    text-decoration:none;

}






/* =====================================================
   SUPER ADMIN DASHBOARD COMPACT MODE
===================================================== */


.sa-dashboard-page {

    padding:25px 40px;

}


.sa-dashboard-container {

    max-width:1350px;
    margin:auto;

}


/* TOP BAR */

.sa-dashboard-topbar {

    padding:15px 25px;

}


.sa-dashboard-logo {

    font-size:24px;

}



/* HERO */

.sa-dashboard-hero {

    padding:35px 40px;

    border-radius:28px;

}



.sa-dashboard-hero h1 {

    font-size:38px !important;

    margin-bottom:12px;

}



.sa-dashboard-hero p {

    font-size:15px;

}



.sa-dashboard-hero-graphic {

    font-size:55px;

}





/* STAT CARD */

.sa-dashboard-stats {

    gap:18px;

}



.sa-dashboard-stat-card {

    padding:20px;

    border-radius:20px;

}



.sa-dashboard-stat-icon {

    width:45px;

    height:45px;

    font-size:22px;

}



.sa-dashboard-stat-card span {

    font-size:13px;

}



.sa-dashboard-stat-card strong {

    font-size:28px;

}





/* MANAGEMENT TITLE */


.sa-dashboard-section-heading h2 {


    font-size:32px;


}


.sa-dashboard-section-heading p {


    font-size:14px;


}





/* MENU CARD */


.sa-dashboard-menu-grid {


    gap:18px;


}



.sa-dashboard-menu-card {


    padding:22px;

    min-height:160px;

    border-radius:22px;


}



.sa-dashboard-menu-icon {


    font-size:30px;


}



.sa-dashboard-menu-content h3 {


    font-size:18px;


}



.sa-dashboard-menu-content p {


    font-size:13px;


}





/* =====================================================
   COMPACT DASHBOARD + STUDENT MANAGEMENT UI
===================================================== */


/* MAIN CONTAINER */

.sa-dashboard-container,
.sa-students-container {

    max-width:1200px;

    margin:auto;

}



/* BODY SCALE */

.sa-dashboard-body,
.sa-students-body {

    font-size:14px;

}



/* TOP BAR */

.sa-dashboard-topbar,
.sa-students-topbar {

    padding:18px 30px;

}


.sa-dashboard-logo,
.sa-students-logo {

    font-size:24px;

}



/* HERO */

.sa-dashboard-hero,
.sa-students-header {

    padding:45px 50px;

    border-radius:30px;

    margin-bottom:30px;

}



.sa-dashboard-hero h1,
.sa-students-header h1 {

    font-size:42px;

}



.sa-dashboard-hero p,
.sa-students-header p {

    font-size:15px;

}



/* HERO ICON */

.sa-dashboard-hero-graphic,
.sa-students-header-icon {

    font-size:60px;

}



/* STAT CARD */

.sa-dashboard-stats {

    gap:20px;

}



.sa-dashboard-stat-card {

    padding:22px;

    border-radius:22px;

}


.sa-dashboard-stat-icon {

    width:55px;

    height:55px;

    font-size:25px;

}


.sa-dashboard-stat-card strong {

    font-size:28px;

}



/* SECTION TITLE */

.sa-dashboard-section-heading h2 {

    font-size:32px;

}


.sa-dashboard-section-heading p {

    font-size:14px;

}



/* MENU CARD */

.sa-dashboard-menu-grid {

    gap:18px;

}


.sa-dashboard-menu-card {

    padding:25px;

    min-height:150px;

}


.sa-dashboard-menu-card h3 {

    font-size:18px;

}


.sa-dashboard-menu-card p {

    font-size:13px;

}



/* TABLE */

.sa-dashboard-table-card,
.sa-students-table-card {

    border-radius:25px;

    padding:20px;

}



.table th,
.sa-students-table th {

    font-size:12px;

    padding:15px;

}



.table td,
.sa-students-table td {

    font-size:13px;

    padding:16px;

}



/* STUDENTS PAGE */


/* Search box */

.sa-students-toolbar {

    padding:25px;

}


.sa-students-toolbar h2 {

    font-size:24px;

}



/* Student avatar */

.sa-students-avatar {

    width:45px;

    height:45px;

}



/* Buttons */

.sa-students-edit-btn,
.sa-students-delete-btn {

    padding:8px 18px;

    font-size:12px;

}



/* =====================================================
   EDIT USER PAGE
===================================================== */


.sa-edit-user-body{

    margin:0;
    background:#f4f8f6;
    font-family:'Poppins',sans-serif;
    color:#123d35;

}




.sa-edit-user-page{

    padding:30px 50px;

}



.sa-edit-user-container{

    max-width:1400px;
    margin:auto;

}




/* =========================
TOP BAR
========================= */


.sa-edit-user-topbar{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;

}



.sa-edit-user-logo{

    font-size:30px;
    font-weight:700;
    color:#145543;
    text-decoration:none;

}



.sa-edit-user-back-btn{

    padding:12px 25px;
    border:1px solid #145543;
    border-radius:30px;
    color:#145543;
    text-decoration:none;
    font-weight:600;
    background:white;

}


.sa-edit-user-back-btn:hover{

    background:#145543;
    color:white;

}




/* =========================
 HERO
========================= */


.sa-edit-user-hero{


    background:linear-gradient(
        120deg,
        #124d3b,
        #2c8c76
    );


    border-radius:35px;

    padding:55px;

    color:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;


}



.sa-edit-user-label{


    background:rgba(255,255,255,.15);

    padding:8px 20px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;


}




.sa-edit-user-hero h1{

    font-size:45px;

    margin:20px 0 10px;

}



.sa-edit-user-hero p{

    font-size:16px;

    opacity:.9;

}



.sa-edit-user-icon{

    font-size:70px;

    background:rgba(255,255,255,.15);

    width:120px;

    height:120px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:30px;


}





/* =========================
 CARD
========================= */


.sa-edit-user-card{


    background:white;

    border-radius:30px;

    padding:45px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);


}





.sa-edit-user-heading{


    display:flex;

    align-items:center;

    gap:20px;

    border-bottom:1px solid #e8eeee;

    padding-bottom:25px;

    margin-bottom:30px;


}



.sa-edit-user-avatar{


    width:65px;

    height:65px;

    border-radius:50%;

    background:#dff1ea;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

    font-weight:700;

    color:#145543;


}



.sa-edit-user-heading h2{

    margin:0;

    font-size:26px;

}



.sa-edit-user-heading p{

    color:#82938e;

}







/* =========================
 ALERT
========================= */


.sa-edit-user-alert{

    background:#fff1ed;

    color:#c94b36;

    padding:15px 20px;

    border-radius:15px;

    margin-bottom:25px;

}





/* =========================
 FORM
========================= */


.sa-edit-user-grid{


    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:25px;


}



.sa-edit-user-field{


    display:flex;

    flex-direction:column;

    gap:8px;


}



.sa-edit-user-full{

    grid-column:1/-1;

}



.sa-edit-user-field label{


    font-weight:600;

    color:#174b3d;


}



.sa-edit-user-field label span{

    color:#999;

    font-size:12px;

}




.sa-edit-user-field input,
.sa-edit-user-field select{


    padding:15px 18px;

    border:1px solid #dbe8e3;

    border-radius:15px;

    font-size:15px;

    outline:none;

    font-family:'Poppins';


}



.sa-edit-user-field input:focus,
.sa-edit-user-field select:focus{


    border-color:#25836c;


}




.sa-edit-user-field small{

    color:#87958f;

}





/* =========================
 BUTTON
========================= */


.sa-edit-user-actions{


    margin-top:35px;

    display:flex;

    justify-content:flex-end;

    gap:15px;


}



.sa-edit-user-cancel,
.sa-edit-user-save{


    padding:14px 35px;

    border-radius:30px;

    font-weight:600;

    text-decoration:none;

    cursor:pointer;


}




.sa-edit-user-cancel{


    background:white;

    border:1px solid #d96b63;

    color:#d96b63;


}



.sa-edit-user-save{


    background:#145543;

    color:white;

    border:none;


}




.sa-edit-user-save:hover{


    background:#0d3d30;

}

.admin-body{

display:flex;

font-family:'Poppins',sans-serif;

background:#f7f8f4;

}



/* SIDEBAR */

.admin-sidebar{

width:290px;

min-height:100vh;

background:#155c43;

padding:35px 25px;

color:white;

}



.admin-logo{

font-size:25px;

font-weight:700;

margin-bottom:40px;

}


.admin-logo span{

background:white;

color:#155c43;

padding:8px 14px;

border-radius:12px;

margin-right:10px;

}



.admin-profile{

background:rgba(255,255,255,.15);

padding:20px;

border-radius:20px;

display:flex;

gap:15px;

align-items:center;

}



.profile-avatar{

background:#fff;

color:#155c43;

width:45px;

height:45px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:bold;

}





.admin-menu{

margin-top:40px;

}


.admin-menu a{

display:block;

padding:15px;

border-radius:15px;

color:white;

text-decoration:none;

margin-bottom:8px;

}



.admin-menu a:hover,
.admin-menu .active{

background:rgba(255,255,255,.18);

}




/* CONTENT */


.admin-content{

flex:1;

padding:35px;

}



.admin-topbar{

display:flex;

justify-content:space-between;

align-items:center;

}



.admin-topbar span{

font-size:12px;

color:#888;

}



.admin-topbar a{

color:#555;

}





.quote-banner{

margin-top:30px;

background:#166044;

color:white;

padding:40px;

border-radius:30px;

display:flex;

justify-content:space-between;

align-items:center;

}



.quote-banner h1{

font-size:38px;

}



.quote-add-btn{

background:white;

color:#155c43;

padding:15px 25px;

border-radius:20px;

text-decoration:none;

font-weight:600;

}






.quote-card{

margin-top:30px;

background:white;

padding:30px;

border-radius:25px;

}



.quote-item{

display:flex;

align-items:center;

gap:20px;

padding:25px 0;

border-bottom:1px solid #eee;

}



.quote-icon{

width:55px;

height:55px;

border-radius:50%;

background:#e6f2eb;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:#155c43;

}



.quote-text{

flex:1;

}



.quote-text p{

font-size:17px;

}



.quote-text span{

color:#777;

}



.quote-action a{

padding:8px 15px;

border-radius:10px;

text-decoration:none;

background:#e8f3ed;

color:#155c43;

margin-left:5px;

}



.quote-action .delete{

background:#ffe8e8;

color:#c33;

}




.admin-footer{

margin-top:50px;

padding:25px 0;

border-top:1px solid #ddd;

display:flex;

justify-content:space-between;

color:#777;

}

/* ===============================
   ADMIN QUOTES PAGE
================================ */


.admin-hero{

    background:#075c43;

    border-radius:32px;

    padding:45px;

    color:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}


.admin-hero span{

    font-size:13px;

    letter-spacing:2px;

    font-weight:600;

}


.admin-hero h1{

    font-size:42px;

    margin:15px 0;

    font-weight:700;

}


.admin-hero p{

    font-size:18px;

    opacity:.9;

}



.admin-btn{

    background:white;

    color:#075c43;

    padding:18px 35px;

    border-radius:40px;

    text-decoration:none;

    font-weight:700;

}



.admin-card{

    background:white;

    border-radius:32px;

    padding:40px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}


.admin-card h2{

    font-size:32px;

    color:#123;

}


.admin-card p{

    color:#888;

    font-size:18px;

}



.admin-footer{

    margin-top:60px;

    padding:30px;

    border-top:1px solid #ddd;

    color:#888;

}

/* =================================
   DAILY QUOTES CONTENT ONLY
================================= */


.admin-card{

background:white;

border-radius:30px;

padding:35px;

margin-top:30px;

}



.quote-header h2{

font-size:32px;

font-weight:700;

color:#16382d;

}



.quote-header p{

color:#89958f;

font-size:17px;

}




.quote-item{

display:flex;

align-items:center;

gap:25px;

padding:25px 0;

border-bottom:1px solid #eee;

}



.quote-icon{

width:55px;

height:55px;

border-radius:50%;

background:#e7f2ed;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:#075c43;

}



.quote-details{

flex:1;

}



.quote-details h3{

font-size:18px;

font-weight:600;

color:#263b34;

}



.quote-details p{

color:#89958f;

}




.quote-buttons a{

padding:10px 20px;

border-radius:20px;

text-decoration:none;

font-weight:600;

margin-left:10px;

}



.edit-btn{

background:#e8f4ee;

color:#075c43;

}



.delete-btn{

background:#ffe7e7;

color:#c0392b;

}




.admin-footer{

margin-top:50px;

padding:30px 0;

border-top:1px solid #ddd;

color:#89958f;

display:flex;

justify-content:space-between;

}

/* =====================================================
   DAILY QUOTES ADD BUTTON
===================================================== */

.admin-quote-add-button{

    background:#ffffff;

    color:#176046;

    padding:14px 32px;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    transition:0.3s ease;

    border:none;

}



.admin-quote-add-button:hover{

    background:#e8f5ef;

    color:#176046;

    transform:translateY(-2px);

}

/* =====================================================
   DAILY QUOTES ADD CARD
===================================================== */


.admin-dashboard-add-card{


background:#ffffff;


border-radius:28px;


padding:30px 35px;


display:flex;


align-items:center;


justify-content:space-between;


gap:25px;


margin-bottom:30px;


border:1px solid #edf1ee;


box-shadow:0 10px 30px rgba(0,0,0,0.04);



}




.admin-dashboard-add-icon{


width:70px;


height:70px;


border-radius:20px;


background:#e9f5ef;


display:flex;


align-items:center;


justify-content:center;


font-size:32px;



}




.admin-dashboard-add-content{


flex:1;


}




.admin-dashboard-add-content h3{


font-size:22px;


font-weight:700;


color:#173f32;


margin-bottom:8px;


}




.admin-dashboard-add-content p{


margin:0;


color:#7c8a84;


font-size:14px;


}




.admin-dashboard-add-button{


background:#176046;


color:white;


padding:14px 30px;


border-radius:50px;


font-weight:600;


text-decoration:none;


transition:.3s;


white-space:nowrap;


}




.admin-dashboard-add-button:hover{


background:#124b38;


color:white;


transform:translateY(-2px);


}

.quote-form-card{

padding:40px;

border-radius:30px;

}


.quote-form-card h2{

font-size:28px;

font-weight:700;

color:#173f32;

margin-bottom:30px;

}


.quote-form-card textarea,
.quote-form-card input{

border-radius:15px;

padding:15px;

border:1px solid #e5ebe7;

}


.quote-form-card textarea:focus,
.quote-form-card input:focus{

border-color:#176046;

box-shadow:0 0 0 .2rem rgba(23,96,70,.15);

}

/* =====================================
   DAILY QUOTES ACTION BUTTONS
===================================== */


.saq-quote-card{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

background:#ffffff;

padding:25px 30px;

border-radius:25px;

margin-top:20px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}



.saq-quote-content{

flex:1;

}



.saq-quote-content h3{

font-size:18px;

font-weight:600;

color:#193d32;

margin-bottom:8px;

}



.saq-quote-content p{

font-size:14px;

color:#777;

margin:0;

}




.saq-actions{

display:flex;

align-items:center;

gap:10px;

}



.saq-actions a{

text-decoration:none;

padding:10px 18px;

border-radius:20px;

font-size:13px;

font-weight:600;

background:#17634d;

color:white;

transition:.3s;

}



.saq-actions a:hover{

opacity:.8;

}



.saq-actions .delete{

background:#e74c3c;

}




.saq-quote-icon{

width:45px;

height:45px;

border-radius:50%;

background:#eef7f2;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

color:#17634d;

}

/* =====================================
   DAILY QUOTE ACTION BUTTONS
===================================== */


.quote-management-actions{

display:flex;

gap:10px;

align-items:center;

margin-left:auto;

}



.quote-edit-btn,
.quote-delete-btn{

padding:8px 18px;

border-radius:20px;

font-size:13px;

font-weight:600;

text-decoration:none;

transition:.3s;

}



.quote-edit-btn{

background:#17634d;

color:white;

}



.quote-delete-btn{

background:#dc3545;

color:white;

}



.quote-edit-btn:hover,
.quote-delete-btn:hover{

opacity:.8;

transform:translateY(-2px);

}

/* =====================================
   EDIT QUOTE PAGE
===================================== */


.editquote-page{

    min-height:100vh;

    background:#f4f8f5;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}



.editquote-card{

    width:600px;

    background:#ffffff;

    border-radius:30px;

    padding:40px;

    box-shadow:
    0 20px 50px rgba(0,0,0,0.08);

}



.editquote-card h1{

    font-size:32px;

    font-weight:700;

    color:#155c46;

    margin-bottom:10px;

}



.editquote-card p{

    color:#777;

    margin-bottom:30px;

}




.editquote-card label{

    display:block;

    font-size:14px;

    font-weight:600;

    color:#24443a;

    margin-bottom:8px;

}




.editquote-card textarea{

    width:100%;

    height:160px;

    resize:none;

    border:1px solid #ddd;

    border-radius:18px;

    padding:18px;

    font-family:Poppins, sans-serif;

    font-size:14px;

    outline:none;

    margin-bottom:25px;

}



.editquote-card textarea:focus{

    border-color:#17634d;

}




.editquote-card input{

    width:100%;

    padding:15px 18px;

    border-radius:18px;

    border:1px solid #ddd;

    font-family:Poppins, sans-serif;

    outline:none;

    margin-bottom:30px;

}



.editquote-card input:focus{

    border-color:#17634d;

}





.editquote-buttons{

    display:flex;

    align-items:center;

    gap:15px;

}




.editquote-save{

    background:#17634d;

    color:white;

    border:none;

    padding:14px 30px;

    border-radius:30px;

    font-weight:600;

    cursor:pointer;

    text-decoration:none;

}



.editquote-save:hover{

    background:#124936;

}





.editquote-cancel{

    color:#17634d;

    background:#eef6f2;

    padding:14px 30px;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

}



.editquote-cancel:hover{

    background:#dceee5;

}





.editquote-error{

    background:#ffe8e8;

    color:#b42318;

    padding:15px 20px;

    border-radius:15px;

    margin-bottom:25px;

    font-size:14px;

}

/* =====================================
   ADMIN DAILY QUOTE DISPLAY
===================================== */


.daily-motivation-card{

display:flex;

align-items:center;

gap:25px;

background:white;

padding:35px;

border-radius:30px;

box-shadow:
0 15px 40px rgba(0,0,0,.06);

margin-bottom:35px;

}



.daily-motivation-icon{

width:70px;

height:70px;

border-radius:25px;

background:#eaf5ef;

display:flex;

align-items:center;

justify-content:center;

font-size:35px;

}



.daily-motivation-card h2{

font-size:26px;

font-weight:600;

color:#17634d;

line-height:1.5;

margin:10px 0;

}



.daily-motivation-card p{

color:#777;

font-size:15px;

margin:0;

}

.admin-notification-wrapper{
    position:relative;
}


.admin-notification-button{

    width:45px;
    height:45px;

    border-radius:50%;

    background:#f1f8f5;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:22px;

    text-decoration:none;

    position:relative;

}



.admin-notification-badge{

    position:absolute;

    top:-3px;
    right:-3px;

    background:#ef4444;

    color:white;

    font-size:11px;

    min-width:20px;
    height:20px;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    font-weight:600;

}

/* =====================================================
   ADMIN NOTIFICATION PAGE
===================================================== */


.notification-page{

    padding:40px;

    min-height:100vh;

    background:#f6f8fc;

    font-family:'Poppins',sans-serif;

}



.notification-card{

    max-width:900px;

    margin:auto;

    background:white;

    border-radius:25px;

    padding:35px;

    box-shadow:0 15px 35px rgba(0,0,0,0.08);

}



.notification-card h1{

    font-size:30px;

    font-weight:700;

    color:#1f2937;

    margin-bottom:30px;

}





/* Notification Item */

.notification-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:22px;

    margin-bottom:18px;

    background:#f8fafc;

    border-radius:20px;

    border:1px solid #e5e7eb;

    transition:.3s;

}



.notification-item:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(0,0,0,0.08);

    background:#ffffff;

}





.notification-icon{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

    background:#dcfce7;

    flex-shrink:0;

}





.notification-item h3{

    margin:0 0 8px;

    font-size:18px;

    font-weight:600;

    color:#111827;

}



.notification-item p{

    margin:0 0 10px;

    color:#6b7280;

    font-size:14px;

    line-height:1.6;

}



.notification-item small{

    color:#9ca3af;

    font-size:12px;

}





/* Empty State */


.notification-empty{

    text-align:center;

    padding:50px;

    color:#9ca3af;

    font-size:16px;

}





/* Mobile */


@media(max-width:768px){


    .notification-page{

        padding:20px;

    }



    .notification-card{

        padding:25px;

    }



    .notification-item{

        flex-direction:column;

    }


}

.notification-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:25px;

}



.notification-back-btn{

    text-decoration:none;

    padding:10px 20px;

    border-radius:30px;

    background:#e8f3eb;

    color:#4f7c59;

    font-weight:600;

    transition:.3s;

}



.notification-back-btn:hover{

    background:#4f7c59;

    color:white;

}




.notification-item{

    display:flex;

    align-items:center;

    gap:20px;

    text-decoration:none;

    color:inherit;

}



.notification-content{

    flex:1;

}



.notification-arrow{

    font-size:25px;

    color:#6b8f71;

}

.notification-bell{

position:relative;

text-decoration:none;

font-size:20px;

}



.notification-bell span{

position:absolute;

top:-10px;

right:-12px;

background:#ef4444;

color:white;

font-size:11px;

width:18px;

height:18px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}

.student-notification-link{

display:flex;

align-items:center;

gap:8px;

position:relative;

text-decoration:none;

color:#4d6658;

font-weight:500;

transition:.3s;

}


.student-notification-link:hover{

color:#315846;

}


.student-notification-badge{

position:absolute;

top:-12px;

right:-14px;

background:#d9534f;

color:white;

font-size:11px;

font-weight:600;

width:20px;

height:20px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}

.notification-page{

min-height:80vh;

padding:60px 0;

}


.notification-card{

background:#ffffff;

border-radius:30px;

padding:40px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

max-width:850px;

margin:auto;

}


.notification-card h1{

color:#315846;

font-weight:700;

margin-bottom:30px;

}


.notification-item{

display:flex;

gap:20px;

padding:22px;

background:#f5f8f3;

border-radius:20px;

margin-bottom:15px;

transition:.3s;

}


.notification-item:hover{

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(0,0,0,.08);

}


.notification-icon{

width:50px;

height:50px;

border-radius:50%;

background:#dcefe2;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

}


.notification-item h3{

color:#315846;

font-size:18px;

}


.notification-item p{

color:#666;

margin-bottom:8px;

}


.notification-item small{

color:#999;

}

/* =====================================================
   HOME FOOTER FIX
===================================================== */


.home-main-footer {

    margin-top: 100px;
    background: #063d2b;
    color: white;
    overflow: hidden;

}



.home-developer-section {

    padding: 55px 20px 45px;
    text-align: center;

}



.home-footer-inner {

    max-width: 900px;
    margin: auto;

}



.home-footer-label {

    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    opacity: .7;
    margin-bottom: 15px;

}



.home-developer-section h4 {

    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;

}



.home-developer-section p {

    font-size: 15px;
    opacity: .85;
    margin-bottom: 30px;

}



.home-developer-team {

    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 20px;

}



.home-developer-team strong {

    font-size: 13px;
    font-weight: 500;
    padding: 8px 18px;
    border-radius: 30px;
    background: rgba(255,255,255,.08);

}



.home-developer-section small {

    opacity: .75;

}



.home-footer-bottom {

    border-top: 1px solid rgba(255,255,255,.15);

    padding: 25px 8%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap:20px;

}



.home-footer-brand h3 {

    margin:0;

    font-size:25px;

}



.home-footer-brand p {

    margin:5px 0 0;

    font-size:13px;

    opacity:.75;

}



.home-footer-copyright {

    font-size:13px;

    opacity:.75;

}



@media(max-width:768px){


.home-footer-bottom{

    flex-direction:column;

    text-align:center;

}


}

.student-notification-bell{

position:relative;
font-size:24px;
text-decoration:none;
color:#166534;

}


.student-notification-bell span{

position:absolute;

top:-8px;

right:-10px;

background:#dc2626;

color:white;

font-size:12px;

width:20px;

height:20px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}



.notification-page{

min-height:100vh;

padding:50px;

background:#f0fdf4;

}



.notification-card{

max-width:900px;

margin:auto;

background:white;

padding:35px;

border-radius:25px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.notification-item{

display:flex;

gap:20px;

padding:20px;

border-bottom:1px solid #dcfce7;

}



.notification-icon{

font-size:30px;

}



.notification-item h3{

color:#166534;

font-size:18px;

}



.notification-item small{

color:#777;

}

.student-notification-bell{

    position:relative;

    text-decoration:none;

    font-size:24px;

    margin:0 15px;

    display:flex;

    align-items:center;

}



.notification-badge{

    position:absolute;

    top:-8px;

    right:-12px;

    background:#dc3545;

    color:white;

    font-size:12px;

    font-weight:700;

    width:20px;

    height:20px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* =====================================================
   PHQ-9 SCREENING PAGE
===================================================== */


.phq9-page-body {

    background: #f6f8f7;

    font-family: 'Poppins', sans-serif;

}


/* MAIN CONTAINER */

.screening-container {

    width: min(900px, 92%);

    margin: 50px auto;

    background: #ffffff;

    padding: 40px;

    border-radius: 25px;

    box-shadow: 
    0 10px 30px rgba(0,0,0,0.08);

}


/* TITLE */

.screening-container h1 {

    font-size: 32px;

    font-weight: 700;

    color: #064d3c;

    margin-bottom: 10px;

}


.screening-container > p {

    color: #666;

    margin-bottom: 35px;

}


/* QUESTION CARD */


.phq-question {

    background: #f9fbfa;

    border-radius: 18px;

    padding: 25px;

    margin-bottom: 25px;

    border-left: 5px solid #087f5b;

}



.phq-question h3 {

    font-size: 18px;

    font-weight: 600;

    color: #1f2937;

    line-height: 1.5;

    margin-bottom: 10px;

}



.phq-question p {

    color: #777;

    font-size: 15px;

    margin-bottom: 20px;

}



/* RADIO OPTION */


.phq-question label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-right: 25px;

    margin-bottom: 10px;

    color: #444;

    cursor: pointer;

    font-size: 15px;

}



.phq-question input[type="radio"] {

    width: 18px;

    height: 18px;

    accent-color: #087f5b;

}



/* SUBMIT BUTTON */


.phq-submit-button {


    width: 100%;

    padding: 15px;

    border: none;

    border-radius: 15px;

    background: #087f5b;

    color: white;

    font-size: 17px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;


}



.phq-submit-button:hover {

    background: #065f46;

}


/* MOBILE */

@media(max-width:768px){


.screening-container {

    padding:25px;

    margin:20px auto;

}



.screening-container h1 {

    font-size:25px;

}



.phq-question label {

    display:flex;

    margin-bottom:12px;

}


}

/* ==========================================
PHQ9 MODERN QUESTION DESIGN
========================================== */


.phq9-answer-guide{

background:#155c46;

padding:35px;

border-radius:25px;

color:white;

margin-bottom:35px;

}


.phq9-answer-guide h2{

font-size:22px;

margin-bottom:25px;

}



.phq9-guide-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:15px;

}



.phq9-guide-grid div{

background:rgba(255,255,255,.18);

padding:20px;

border-radius:18px;

display:flex;

flex-direction:column;

}



.phq9-guide-grid strong{

font-size:30px;

}



.phq9-guide-grid span{

font-size:14px;

margin-top:8px;

}



.phq9-answer-guide p{

margin-top:25px;

opacity:.9;

}



/* QUESTION CARD */


.phq9-question-card{

background:white;

border-radius:25px;

padding:30px;

margin-bottom:25px;

display:flex;

gap:25px;

box-shadow:

0 8px 25px rgba(0,0,0,.05);

}



.phq9-number{

width:55px;

height:55px;

border-radius:18px;

background:#dff1e8;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

font-weight:700;

color:#155c46;

}



.phq9-question-content{

flex:1;

}



.phq9-question-content h3{

font-size:18px;

color:#24483d;

}



.phq9-question-content p{

color:#777;

font-style:italic;

margin-bottom:25px;

}



/* ANSWER */


.phq9-answer-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:15px;

}



.phq9-answer-option{

border:1px solid #dbe7df;

border-radius:18px;

padding:15px;

display:flex;

align-items:center;

gap:12px;

cursor:pointer;

transition:.2s;

}



.phq9-answer-option:hover{

background:#eef8f3;

}



.phq9-answer-option input{

display:none;

}



.phq9-score{

width:35px;

height:35px;

border-radius:12px;

background:#f4f8f5;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

color:#155c46;

}



.phq9-answer-option input:checked + .phq9-score{

background:#155c46;

color:white;

}



@media(max-width:768px){


.phq9-guide-grid,

.phq9-answer-grid{

grid-template-columns:1fr;

}


.phq9-question-card{

flex-direction:column;

}


}

/* =====================================================
   PHQ-9 SCREENING PAGE STYLE
   ===================================================== */


.screening-page-body{

    margin:0;

    background:#eef6ef;

    font-family:'Poppins', sans-serif;

    color:#315b4b;

}



/* ===========================
   NAVBAR
=========================== */


.screening-navbar{

    height:110px;

    background:#ffffff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 90px;

    border-bottom:1px solid #edf2ed;

}



.screening-logo{

    font-family:Georgia, serif;

    font-size:34px;

    font-weight:700;

    letter-spacing:1px;

    color:#315b4b;

}



.screening-actions{

    display:flex;

    gap:15px;

}



.screening-btn-outline{


    padding:14px 30px;

    border-radius:35px;

    border:2px solid #4d8d70;

    color:#4d8d70;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.screening-btn-outline:hover{

    background:#4d8d70;

    color:white;

}



.screening-btn-fill{


    padding:14px 35px;

    border-radius:35px;

    background:linear-gradient(
        135deg,
        #4e9b7d,
        #70b795
    );

    color:white;

    text-decoration:none;

    font-weight:600;

}




/* ===========================
   MAIN CONTAINER
=========================== */


.screening-container{

    padding:60px 90px 100px;

}





/* ===========================
   HEADER
=========================== */


.screening-header span{


    color:#4d8d70;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

}



.screening-header h1{


    margin-top:15px;

    font-size:60px;

    line-height:1.1;

    font-weight:800;

    color:#315b4b;

}



.screening-header p{


    max-width:950px;

    font-size:20px;

    color:#71857b;

    line-height:1.7;

}





/* ===========================
   INFORMATION CARD
=========================== */


.screening-info-card{


    background:white;

    margin-top:40px;

    padding:25px;

    border-radius:28px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}



.screening-info-card div{


    background:#f5faf6;

    padding:22px;

    border-radius:20px;

}



.screening-info-card small{


    display:block;

    color:#91a39a;

    font-size:13px;

    margin-bottom:8px;

}



.screening-info-card strong{


    color:#315b4b;

    font-size:16px;

}





/* ===========================
   ANSWER GUIDE
=========================== */


.phq9-answer-guide{


    margin-top:40px;

    padding:40px;

    border-radius:30px;


    background:linear-gradient(
        135deg,
        #315f4d,
        #5b9075
    );


    color:white;

}



.phq9-answer-guide h2{


    font-size:25px;

    margin-bottom:25px;

}



.phq9-guide-grid{


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}



.phq9-guide-grid div{


    background:rgba(
        255,
        255,
        255,
        .15
    );


    border-radius:20px;

    padding:25px;

    font-size:16px;

}



.phq9-guide-grid strong{


    display:block;

    font-size:35px;

    margin-bottom:10px;

}






/* ===========================
   QUESTION CARD
=========================== */


.phq9-question-card{


    margin-top:35px;


    background:white;


    border-radius:30px;


    padding:35px;


    display:flex;


    gap:25px;


    box-shadow:
    0 10px 30px rgba(
        0,
        0,
        0,
        .03
    );

}



.phq9-number{


    min-width:55px;


    height:55px;


    background:#e1f0e7;


    border-radius:18px;


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:22px;


    font-weight:700;


    color:#315b4b;


}





.phq9-question-content{


    width:100%;

}



.phq9-question-content h3{


    font-size:20px;


    color:#315b4b;


    margin-bottom:10px;


}



.phq9-question-content p{


    color:#71857b;


    font-size:15px;


    font-style:italic;


}





/* ===========================
   ANSWER BUTTON
=========================== */


.phq9-answer-grid{


    margin-top:25px;


    display:grid;


    grid-template-columns:repeat(4,1fr);


    gap:18px;


}



.phq9-answer-option{


    background:#f5faf6;


    border-radius:20px;


    padding:18px;


    display:flex;


    align-items:center;


    gap:12px;


    cursor:pointer;


    color:#4c6258;


    font-weight:500;


    transition:.3s;


    border:2px solid transparent;


}




.phq9-answer-option span{


    background:white;


    width:38px;


    height:38px;


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;


    font-weight:700;


    color:#315b4b;


}




.phq9-answer-option:hover{


    background:#e1f0e7;


    border-color:#8ab89f;


}





.phq9-answer-option input:checked + span{


    background:#4d8d70;

    color:white;

}





/* ===========================
   SUBMIT BUTTON
=========================== */


.phq9-submit-button{


    margin-top:40px;


    width:100%;


    padding:20px;


    border:none;


    border-radius:30px;


    background:linear-gradient(
        135deg,
        #315f4d,
        #5b9075
    );


    color:white;


    font-size:18px;


    font-weight:700;


    cursor:pointer;


}



.phq9-submit-button:hover{


    opacity:.9;


}





/* ===========================
   RESPONSIVE
=========================== */


@media(max-width:900px){


.screening-navbar{

    padding:0 25px;

}


.screening-container{

    padding:40px 25px;

}


.screening-header h1{

    font-size:40px;

}


.screening-info-card{

    grid-template-columns:1fr;

}


.phq9-guide-grid{

    grid-template-columns:1fr 1fr;

}


.phq9-answer-grid{

    grid-template-columns:1fr;

}


.phq9-question-card{

    flex-direction:column;

}


}

/* ======================
PHQ RESULT
====================== */


.phq-result-card{

background:white;

border-radius:35px;

padding:50px;

text-align:center;

margin-top:40px;

}



.phq-result-card h2{

color:#315b4b;

}



.phq-score{


width:130px;

height:130px;

border-radius:50%;

margin:30px auto;


background:#315f4d;


color:white;


font-size:55px;


font-weight:700;


display:flex;

justify-content:center;

align-items:center;


}



.phq-result-card h3{


font-size:32px;

color:#4d8d70;

}



.phq-info-result{


margin-top:35px;


display:grid;

grid-template-columns:1fr 1fr;


gap:25px;


}



.phq-info-result div{


background:white;


padding:35px;


border-radius:30px;


}



.phq-info-result h3{


color:#315b4b;


}



.phq-back-button{


display:block;


margin-top:40px;


text-align:center;


background:#4d8d70;


color:white;


padding:18px;


border-radius:30px;


text-decoration:none;


font-weight:600;


}

/* =====================================================
   POLY HEALTH PREMIUM FOOTER
===================================================== */


.ph-premium-footer{

    width:100%;

    background:
    linear-gradient(
        135deg,
        #064e3b,
        #022c22
    );

    color:white;

    padding:
    55px 30px 45px;

}



.ph-footer-main{

    max-width:1200px;

    margin:auto;

    text-align:center;

}



.ph-footer-title{

    font-family:
    Georgia,
    serif;

    font-size:36px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:10px;

    color:white;

}



.ph-footer-subtitle{

    font-size:17px;

    color:#d1fae5;

    margin-bottom:35px;

}




/* CREATED SECTION */

.ph-footer-developer{


    display:flex;


    align-items:center;


    justify-content:center;


    gap:20px;


    flex-wrap:wrap;


}



.ph-footer-created{


    font-size:18px;


    font-weight:600;


    color:white;


}




/* NAME PILLS */


.ph-footer-members{


    display:flex;


    gap:15px;


    flex-wrap:wrap;


    justify-content:center;


}



.ph-footer-member{


    background:white;


    color:#065f46;


    padding:

    12px 25px;


    border-radius:50px;


    font-size:13px;


    font-weight:600;


    letter-spacing:.3px;


    box-shadow:

    0 5px 15px

    rgba(0,0,0,.15);


}




.ph-footer-batch{


    margin-top:35px;


    font-size:16px;


    color:#d1fae5;


}




/* MOBILE */

@media(max-width:768px){


    .ph-footer-title{

        font-size:30px;

    }



    .ph-footer-created{

        width:100%;

    }



    .ph-footer-member{

        font-size:12px;

    }


}

/* =====================================================
   PH2 COMPACT FOOTER
===================================================== */


.ph2-footer{

    width:100%;

    background:#003b2f;

    color:white;

    padding:35px 20px 25px;

}



.ph2-footer-content{

    max-width:1000px;

    margin:auto;

    text-align:center;

}



.ph2-footer-logo{

    font-family:Georgia,serif;

    font-size:30px;

    margin:0 0 5px;

}



.ph2-footer-desc{

    font-size:14px;

    margin:0 0 25px;

    color:#d1fae5;

}



.ph2-footer-develop{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}



.ph2-footer-label{

    font-size:16px;

    font-weight:600;

}



.ph2-footer-names{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    justify-content:center;

}



.ph2-footer-names span{


    background:white;

    color:#064e3b;


    padding:8px 18px;


    border-radius:30px;


    font-size:11px;


    font-weight:600;


}



.ph2-footer-bottom-text{


    margin-top:25px;


    margin-bottom:0;


    font-size:13px;


    color:#d1fae5;


}

/* =====================================================
   PHQ9 MATCH SCREENING DESIGN
===================================================== */


.phq9-answer-guide{

    background:#064b38;

    color:white;

    border-radius:30px;

    padding:30px;

    margin:30px 0;

}


.phq9-answer-guide h2{

    font-size:28px;

    margin-bottom:25px;

}



.phq9-guide-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}



.phq9-guide-grid div{

    background:rgba(255,255,255,.12);

    border-radius:20px;

    padding:25px;

    text-align:center;

    font-size:16px;

}



.phq9-guide-grid strong{

    display:block;

    font-size:35px;

    margin-bottom:8px;

}




/* QUESTION CARD */


.phq9-question-card{


    background:white;

    border-radius:28px;

    padding:35px;

    margin-bottom:25px;

    display:flex;

    gap:25px;


    box-shadow:

    0 15px 40px rgba(0,0,0,.05);


}



.phq9-number{


    width:55px;

    height:55px;

    background:#e4f1dd;

    color:#176044;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:700;


}




.phq9-question-content{

    flex:1;

}



.phq9-question-content h3{


    font-size:20px;

    font-weight:500;

    color:#26352e;

}



.phq9-question-content p{


    color:#777;

    font-size:18px;

    margin-bottom:25px;

}



/* ANSWER */


.phq9-answer-grid{


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;

}



.phq9-answer-option{


    background:#faf8ef;

    border-radius:20px;

    padding:18px;

    text-align:center;

    cursor:pointer;

    border:1px solid transparent;

    transition:.3s;

}




.phq9-answer-option:hover{


    background:#e4f1dd;


}




.phq9-answer-option input{


    display:none;


}




.phq9-answer-option span{


    display:block;

    font-size:24px;

    font-weight:700;

    color:#176044;


}




.phq9-answer-option:has(input:checked){


    background:#176044;

    color:white;


}



.phq9-answer-option:has(input:checked) span{


    color:white;

}



/* SUBMIT */


.phq9-submit-button{


    display:block;

    margin:50px auto;

    background:#176044;

    color:white;

    border:none;

    padding:16px 50px;

    border-radius:40px;

    font-weight:600;

    font-size:16px;

}



.phq9-submit-button:hover{

    background:#0f4b36;

}

/* =====================================================
   PHQ9 MATCH DASS21 DESIGN
===================================================== */


.student-phq9-page .screening-container{

    max-width:1400px;

    width:100%;

    margin:auto;

    padding:50px 90px;

}



/* HEADER SAME AS DASS21 */

.student-phq9-page .screening-header{

    background:transparent;

    padding:0;

    margin:30px 0 45px;

    max-width:900px;

}



.student-phq9-page .screening-header span{

    font-size:14px;

    letter-spacing:3px;

    font-weight:700;

}



.student-phq9-page .screening-header h1{

    font-size:72px;

    font-weight:700;

    line-height:1.1;

    margin:20px 0;

}



.student-phq9-page .screening-header p{

    font-size:22px;

    line-height:1.7;

    max-width:900px;

}





/* INFO CARD */

.student-phq9-page .screening-info-card{

    width:100%;

    max-width:none;

    padding:25px 35px;

    border-radius:25px;

    margin-bottom:35px;

}





.student-phq9-page .screening-info-card div{

    padding:15px 20px;

}





/* ANSWER GUIDE */

.student-phq9-page .student-phq9-guide{

    width:100%;

    border-radius:35px;

}





/* QUESTION CARD */

.student-phq9-page .student-phq9-question{

    width:100%;

    max-width:none;

}




@media(max-width:900px){

    .student-phq9-page .screening-container{

        padding:30px;

    }


    .student-phq9-page .screening-header h1{

        font-size:42px;

    }


}

/* =====================================================
   PHQ9 MATCH DASS21 DESIGN
===================================================== */


.student-phq9-page .screening-container{

    max-width:1400px;

    width:100%;

    margin:auto;

    padding:50px 90px;

}



/* HEADER SAME AS DASS21 */

.student-phq9-page .screening-header{

    background:transparent;

    padding:0;

    margin:30px 0 45px;

    max-width:900px;

}



.student-phq9-page .screening-header span{

    font-size:14px;

    letter-spacing:3px;

    font-weight:700;

}



.student-phq9-page .screening-header h1{

    font-size:72px;

    font-weight:700;

    line-height:1.1;

    margin:20px 0;

}



.student-phq9-page .screening-header p{

    font-size:22px;

    line-height:1.7;

    max-width:900px;

}





/* INFO CARD */

.student-phq9-page .screening-info-card{

    width:100%;

    max-width:none;

    padding:25px 35px;

    border-radius:25px;

    margin-bottom:35px;

}





.student-phq9-page .screening-info-card div{

    padding:15px 20px;

}





/* ANSWER GUIDE */

.student-phq9-page .student-phq9-guide{

    width:100%;

    border-radius:35px;

}





/* QUESTION CARD */

.student-phq9-page .student-phq9-question{

    width:100%;

    max-width:none;

}




@media(max-width:900px){

    .student-phq9-page .screening-container{

        padding:30px;

    }


    .student-phq9-page .screening-header h1{

        font-size:42px;

    }


}

/* =====================================================
   PHQ9 QUESTION CARD MATCH DASS21
===================================================== */


.student-phq9-question-card{

    background:white;

    border-radius:28px;

    padding:30px 35px;

    margin:25px 0;

    display:flex;

    gap:25px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.04);

}



.student-phq9-number-badge{

    width:45px;

    height:45px;

    background:#e8f0ea;

    color:#285943;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    flex-shrink:0;

}



.student-phq9-question-content h3{

    font-size:18px;

    color:#214d3b;

    margin-bottom:8px;

}



.student-phq9-question-content p{

    color:#777;

    margin-bottom:20px;

}



/* ANSWER OPTIONS */


.student-phq9-options{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:15px;

}



.student-phq9-option{

    background:#f7faf7;

    border:1px solid #e4ece5;

    padding:18px;

    border-radius:18px;

    cursor:pointer;

    text-align:center;

    transition:.3s;

}



.student-phq9-option:hover{

    background:#e8f3ec;

}



.student-phq9-option input{

    display:none;

}



.student-phq9-score{

    display:block;

    font-size:22px;

    font-weight:700;

    color:#286044;

}



.student-phq9-option:has(input:checked){

    background:#2d7356;

    color:white;

}



.student-phq9-option:has(input:checked)
.student-phq9-score{

    color:white;

}



/* SUBMIT */


.student-phq9-submit{

    display:block;

    margin:40px auto;

    background:#2d7356;

    color:white;

    border:none;

    padding:16px 45px;

    border-radius:50px;

    font-size:16px;

    font-weight:600;

}



.student-phq9-submit:hover{

    background:#215640;

}



@media(max-width:768px){

    .student-phq9-options{

        grid-template-columns:1fr;

    }


    .student-phq9-question-card{

        flex-direction:column;

    }

}

/* =====================================================
   STUDENT PHQ9 FULLSCREEN COMPACT DESIGN
===================================================== */

.student-phq9-page .screening-container,
.screening-page-body .screening-container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:40px 25px;

}


/* HEADER */

.screening-page-body .screening-header{

    max-width:1000px;

    margin:30px auto 25px;

    padding:35px 45px;

    background:#ffffff;

    border-radius:28px;

}



.screening-page-body .screening-header span{

    font-size:13px;

    letter-spacing:2px;

}



.screening-page-body .screening-header h1{

    font-size:52px;

    line-height:1.1;

    margin:15px 0;

}



.screening-page-body .screening-header p{

    font-size:17px;

    max-width:750px;

}



/* INFO CARD */

.screening-page-body .screening-info-card{

    max-width:1000px;

    margin:0 auto 25px;

    padding:25px 35px;

    border-radius:22px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}



.screening-page-body .screening-info-card small{

    font-size:12px;

}



.screening-page-body .screening-info-card strong{

    font-size:16px;

}




/* QUESTION AREA */

.student-phq9-question{

    max-width:1100px;

    margin:20px auto;

    padding:25px 35px;

    border-radius:24px;

}



/* QUESTION TEXT */

.student-phq9-content h3{

    font-size:18px;

}


.student-phq9-content p{

    font-size:15px;

}


/* ANSWER BUTTON */

.student-phq9-answer-grid{

    gap:12px;

}



.student-phq9-answer{

    padding:15px;

    border-radius:16px;

    font-size:14px;

}



/* SUBMIT BUTTON */

.student-phq9-submit{

    display:block;

    margin:35px auto;

    padding:15px 45px;

    border-radius:50px;

    font-size:16px;

}



/* MOBILE */

@media(max-width:768px){

    .screening-page-body .screening-header h1{

        font-size:36px;

    }


    .screening-page-body .screening-info-card{

        grid-template-columns:1fr;

    }

}

.inv-select-nav-links {
    display: flex;
    align-items: center;
    gap: 12px;
}


.inv-select-nav-link {

    text-decoration: none;

    color: #1f4d3b;

    font-size: 14px;

    font-weight: 500;

    padding: 8px 14px;

    border-radius: 999px;

    transition: 0.3s ease;

}


.inv-select-nav-link:hover {

    background: #e7f3ed;

    color: #0f5132;

}


.inv-select-dashboard-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 10px 28px;

    border-radius: 50px;

    border: 1px solid #b7cfc5;

    background: transparent;

    color: #164e3b;

    font-size: 15px;

    font-weight: 500;

    text-decoration: none;

    transition: all 0.3s ease;

}


.inv-select-dashboard-btn:hover {

    background: #164e3b;

    color: white;

    border-color: #164e3b;

}

/* =====================================================
   RESPONSIVE DESIGN
   POLY-HEALTH SYSTEM
===================================================== */


/* ==========================
   TABLET
========================== */

@media (max-width: 992px) {


    /* NAVBAR */

    .home-navbar-container,
    .inv-select-nav-container {

        padding: 0 20px;

    }


    .inv-select-nav-container {

        flex-direction: column;

        gap: 15px;

        align-items: flex-start;

    }


    .inv-select-nav-links {

        width:100%;

        flex-wrap:wrap;

    }



    /* HERO */

    .home-hero-container .row {

        text-align:center;

    }


    .home-hero-content {

        margin-bottom:40px;

    }


    .home-hero-title {

        font-size:42px;

    }



    /* CARDS */

    .therapy-grid,
    .help-signs-grid,
    .help-selfcare-grid {

        grid-template-columns: repeat(2,1fr);

    }



    /* RESULT PAGE */

    .result-summary-grid {

        grid-template-columns:repeat(2,1fr);

    }



    /* DASHBOARD */

    .sa-dashboard-stats {

        grid-template-columns:repeat(2,1fr);

    }


}





/* ==========================
   MOBILE
========================== */

@media (max-width:768px) {



    body {

        overflow-x:hidden;

    }



    /* NAVBAR */


    .inv-select-nav-container {

        padding:15px;

    }


    .inv-select-nav-links {

        flex-direction:column;

        width:100%;

    }


    .inv-select-nav-link,
    .inv-select-dashboard-btn {

        width:100%;

        text-align:center;

    }




    /* BUTTON */

    .home-hero-buttons,
    .therapy-hero-actions,
    .help-hero-actions {

        flex-direction:column;

        width:100%;

    }


    .home-large-btn,
    .btn {

        width:100%;

    }





    /* HERO */

    .home-hero-title {

        font-size:32px;

    }


    .home-hero-description {

        font-size:14px;

    }




    /* SECTION */

    .home-section-heading h2,
    .therapy-section-heading h2,
    .help-section-heading h2 {

        font-size:26px;

    }




    /* GRID */

    .therapy-grid,
    .help-signs-grid,
    .help-selfcare-grid,
    .result-summary-grid,
    .sa-dashboard-stats {


        grid-template-columns:1fr;


    }





    /* TABLE */

    .table-responsive {

        overflow-x:auto;

    }


    table {

        min-width:700px;

    }





    /* DASHBOARD */

    .sa-dashboard-topbar {

        flex-direction:column;

        gap:20px;

    }


    .sa-dashboard-top-actions {

        width:100%;

        flex-direction:column;

    }




    /* CARDS */

    .therapy-card,
    .help-staff-card,
    .result-score-card {

        padding:20px;

    }





    /* FOOTER */


    .home-footer-bottom {

        flex-direction:column;

        text-align:center;

        gap:15px;

    }



}




/* ==========================
   SMALL PHONE
========================== */

@media (max-width:480px){


    .home-hero-title {

        font-size:28px;

    }


    .section-label {

        font-size:12px;

    }


    h1 {

        line-height:1.2;

    }



    .help-hero,
    .therapy-hero {

        padding:30px 20px;

    }



    .help-hero-visual,
    .therapy-hero-visual {

        margin-top:25px;

    }


    .role-login-container {

        display:block;

    }


    .role-login-info-panel {

        display:none;

    }


}

/* =====================================================
   INV SELECT NAVBAR RESPONSIVE
===================================================== */


.inv-select-nav-container {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    width:100%;

}



.inv-select-nav-actions {

    display:flex;

    align-items:center;

    gap:12px;

}




.inv-select-dashboard-btn {


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:10px 28px;


    border-radius:50px;


    border:1px solid rgba(22,78,59,0.25);


    color:#164e3b;


    text-decoration:none;


    font-size:14px;


    font-weight:500;


    transition:.3s;


}



.inv-select-dashboard-btn:hover {


    background:#164e3b;

    color:white;


}





/* ==========================
   TABLET
========================== */


@media(max-width:768px){


    .inv-select-nav-container {


        flex-direction:column;


        align-items:stretch;


        gap:15px;


    }



    .inv-select-logo {


        justify-content:center;

    }




    .inv-select-nav-actions {


        width:100%;


        flex-direction:column;


    }





    .inv-select-dashboard-btn,
    .inv-select-whatsapp-btn {


        width:100%;


        text-align:center;


        justify-content:center;


    }



}




/* ==========================
   SMALL PHONE
========================== */


@media(max-width:480px){


    .inv-select-navbar {


        padding:15px;

    }



    .inv-select-logo {


        font-size:14px;

    }



    .inv-select-logo-icon {


        width:35px;

        height:35px;

    }




    .inv-select-dashboard-btn,
    .inv-select-whatsapp-btn {


        font-size:13px;

        padding:10px 15px;


    }


}

/* =====================================================
   NOTIFICATION PAGE
===================================================== */


.notification-page-body{

    background:#f4f8f5;

    font-family:'Poppins',sans-serif;

}





.notification-navbar{

    background:white;

    padding:18px 0;

    box-shadow:0 5px 20px rgba(0,0,0,.05);

}




.notification-nav-container{

    width:90%;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.notification-logo{

    text-decoration:none;

    font-weight:700;

    color:#14532d;

    font-size:20px;

}



.notification-logo span{

    background:#14532d;

    color:white;

    width:35px;

    height:35px;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    margin-right:8px;

}




.notification-dashboard-btn{

    text-decoration:none;

    border:1px solid #cbd5d1;

    padding:10px 25px;

    border-radius:50px;

    color:#14532d;

    font-size:14px;

}






.notification-wrapper{

    width:90%;

    max-width:1000px;

    margin:50px auto;

}





.notification-header-card{


background:white;

padding:35px;

border-radius:30px;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 10px 30px rgba(0,0,0,.06);

margin-bottom:30px;

}




.notification-label{

color:#15803d;

font-size:13px;

font-weight:600;

}





.notification-header-card h1{

font-size:35px;

color:#064e3b;

margin:10px 0;

}




.notification-header-card p{

color:#64748b;

}




.notification-count{


background:#e8f5ee;

padding:20px 35px;

border-radius:25px;

text-align:center;

}



.notification-count span{

display:block;

font-size:13px;

}



.notification-count strong{

font-size:35px;

color:#14532d;

}






.notification-list-card{


background:white;

border-radius:30px;

padding:25px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}





.notification-modern-item{


display:flex;

gap:20px;

padding:22px;

border-radius:20px;

transition:.3s;

margin-bottom:15px;

background:#fafdfb;

border:1px solid #edf3ef;

}



.notification-modern-item:hover{


transform:translateY(-3px);

box-shadow:0 10px 20px rgba(0,0,0,.05);


}




.notification-modern-icon{


width:55px;

height:55px;

border-radius:18px;

background:#14532d;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

}





.notification-title-row{


display:flex;

gap:10px;

align-items:center;

}





.notification-title-row h3{

font-size:17px;

margin:0;

color:#064e3b;

}




.notification-modern-content p{

color:#475569;

margin:8px 0;

}




.notification-modern-content small{

color:#94a3b8;

}




.notification-new,
.notification-read{


font-size:11px;

padding:4px 12px;

border-radius:50px;

}




.notification-new{

background:#dcfce7;

color:#166534;

}



.notification-read{

background:#e2e8f0;

color:#64748b;

}





.notification-empty{

text-align:center;

padding:60px 20px;

}



.notification-empty div{

font-size:50px;

}



.notification-empty-btn{

display:inline-block;

margin-top:20px;

background:#14532d;

color:white;

padding:12px 25px;

border-radius:50px;

text-decoration:none;

}






@media(max-width:768px){


.notification-header-card{

flex-direction:column;

gap:25px;

text-align:center;

}


.notification-modern-item{

flex-direction:column;

}


.notification-title-row{

flex-direction:column;

align-items:flex-start;

}


}

/* =====================================================
   COMPACT NOTIFICATION PAGE
===================================================== */


.notification-wrapper{

    width:85%;

    max-width:850px;

    margin:35px auto;

}




.notification-header-card{

    padding:25px;

    border-radius:22px;

    margin-bottom:20px;

}





.notification-header-card h1{

    font-size:28px;

    margin:8px 0;

}




.notification-header-card p{

    font-size:13px;

}





.notification-label{

    font-size:12px;

}





.notification-count{


    padding:15px 25px;

    border-radius:18px;


}



.notification-count span{

    font-size:12px;

}



.notification-count strong{

    font-size:28px;

}







.notification-list-card{


    padding:18px;

    border-radius:22px;


}






.notification-modern-item{


    padding:16px;

    gap:15px;

    border-radius:16px;

    margin-bottom:12px;


}






.notification-modern-icon{


    width:45px;

    height:45px;

    border-radius:14px;

    font-size:20px;


}





.notification-title-row h3{


    font-size:15px;


}





.notification-modern-content p{


    font-size:13px;

    margin:5px 0;


}





.notification-modern-content small{


    font-size:11px;


}




.notification-new,
.notification-read{


    font-size:10px;

    padding:3px 10px;


}






.notification-dashboard-btn{


    padding:8px 18px;

    font-size:13px;


}





.notification-logo{


    font-size:17px;


}





.notification-logo span{


    width:30px;

    height:30px;


}



@media(max-width:768px){


.notification-wrapper{

    width:92%;

}



.notification-header-card h1{

    font-size:24px;

}


.notification-header-card{


    padding:20px;

}



}

.inv-select-nav-container {

    width: 90%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.inv-select-nav-actions {

    display:flex;

    gap:14px;

    margin-right:20px;

}

.inv-select-logo {

    margin-left:10px;

}

@media(max-width:768px){

    .inv-select-nav-container{

        width:100%;

        padding:15px 20px;

    }

}

/* =====================================================
   PROFILE RESPONSIVE
===================================================== */


/* Desktop spacing */
.profile-page {
    padding: 40px 0;
}


.profile-layout {

    display:grid;

    grid-template-columns: 320px 1fr;

    gap:30px;

    align-items:start;

}



/* ===============================
   NAVBAR RESPONSIVE
================================ */

.stu-myappt-navbar {

    width:100%;

}


.stu-myappt-navbar-container {

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:15px 30px;

}


.stu-myappt-nav-actions {

    display:flex;

    align-items:center;

    gap:12px;

}





/* ===============================
   TABLET
================================ */

@media(max-width:992px){


    .profile-layout {

        grid-template-columns:1fr;

    }



    .profile-summary-card {

        width:100%;

    }


    .stu-myappt-navbar-container {

        padding:15px 20px;

    }


}





/* ===============================
   MOBILE
================================ */

@media(max-width:768px){



    .profile-page {

        padding:25px 12px;

    }



    .profile-header h1 {

        font-size:28px;

    }



    .profile-header p {

        font-size:14px;

    }



    .profile-layout {

        display:flex;

        flex-direction:column;

        gap:20px;

    }



    .profile-summary-card,
    .profile-form-card {

        width:100%;

        padding:20px;

        border-radius:20px;

    }



    .profile-avatar {

        width:70px;

        height:70px;

        font-size:28px;

    }



    .profile-summary-card h2 {

        font-size:20px;

        word-break:break-word;

    }



    .profile-summary-item strong {

        font-size:14px;

        word-break:break-word;

    }



    /* navbar */


    .stu-myappt-navbar-container {

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }



    .stu-myappt-nav-actions {

        width:100%;

        justify-content:space-between;

    }



    .stu-myappt-dashboard-btn,
    .stu-myappt-logout-btn {

        padding:8px 15px;

        font-size:13px;

    }




    /* Form */

    .profile-form-heading h2 {

        font-size:18px;

    }



    .profile-form-heading p {

        font-size:13px;

    }



    .form-label {

        font-size:14px;

    }



    .form-control,
    .form-select {

        font-size:14px;

        padding:10px 12px;

    }



    .profile-password-toggle {

        font-size:12px;

        padding:5px 10px;

    }




    .profile-form-actions {


        display:flex;

        flex-direction:column-reverse;

        gap:12px;


    }



    .profile-form-actions a,
    .profile-form-actions button {


        width:100%;

    }



}





/* ===============================
   SMALL PHONE
================================ */

@media(max-width:480px){



    .stu-myappt-logo {

        font-size:16px;

    }



    .profile-summary-card {

        padding:16px;

    }



    .profile-form-card {

        padding:16px;

    }



    .profile-header h1 {

        font-size:24px;

    }



    .profile-privacy-note {

        font-size:12px;

    }



}

/* =====================================================
   MY APPOINTMENT RESPONSIVE
===================================================== */


/* Main container */

.stu-myappt-container {

    width:100%;

}



/* ===============================
   NAVBAR
================================ */

.stu-myappt-navbar-container {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 40px;

    gap:20px;

}



.stu-myappt-nav-actions {

    display:flex;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}



.stu-myappt-student-info {

    display:flex;

    align-items:center;

    gap:10px;

}



.stu-myappt-student-avatar {

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:600;

}





/* ===============================
   HEADER
================================ */


.stu-myappt-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}



.stu-myappt-header h1 {

    font-size:38px;

}





/* ===============================
   DETAIL GRID
================================ */


.stu-myappt-detail-grid {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}



.stu-myappt-detail-item {

    display:flex;

    gap:15px;

    align-items:center;

}



.stu-myappt-detail-item strong {

    word-break:break-word;

}





/* ===============================
   ACTION BUTTON
================================ */


.stu-myappt-actions {

    display:flex;

    justify-content:flex-end;

    gap:15px;

    flex-wrap:wrap;

}





/* ===============================
   TABLET
================================ */


@media(max-width:992px){


    .stu-myappt-navbar-container {

        padding:15px 25px;

    }


    .stu-myappt-header {

        flex-direction:column;

        align-items:flex-start;

    }


    .stu-myappt-header-icon {

        display:none;

    }


    .stu-myappt-detail-grid {

        grid-template-columns:1fr;

    }


}







/* ===============================
   MOBILE
================================ */


@media(max-width:768px){



    .stu-myappt-page {

        padding:20px 12px;

    }




    /* NAVBAR */


    .stu-myappt-navbar-container {

        flex-direction:column;

        align-items:flex-start;

        padding:15px 20px;

    }



    .stu-myappt-logo {

        font-size:16px;

    }



    .stu-myappt-nav-actions {

        width:100%;

        justify-content:space-between;

    }



    .stu-myappt-student-info {

        width:100%;

    }



    .stu-myappt-dashboard-btn,
    .stu-myappt-logout-btn {

        padding:8px 14px;

        font-size:13px;

    }






    /* HEADER */


    .stu-myappt-header {

        padding:20px;

        border-radius:20px;

    }



    .stu-myappt-header h1 {

        font-size:26px;

    }



    .stu-myappt-header p {

        font-size:14px;

    }







    /* STATUS CARD */


    .stu-myappt-status-card {

        padding:20px;

        border-radius:20px;

    }



    .stu-myappt-status-heading {

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }




    .stu-myappt-status-badge {

        font-size:13px;

        padding:8px 15px;

    }







    /* DETAILS */


    .stu-myappt-detail-grid {

        grid-template-columns:1fr;

        gap:15px;

    }



    .stu-myappt-detail-item {

        padding:15px;

    }



    .stu-myappt-detail-icon {

        width:40px;

        height:40px;

        flex-shrink:0;

    }



    .stu-myappt-detail-item span {

        font-size:12px;

    }



    .stu-myappt-detail-item strong {

        font-size:14px;

    }







    /* CONTENT */


    .stu-myappt-content-box,
    .stu-myappt-note-box,
    .stu-myappt-waiting-note {

        padding:18px;

    }




    .stu-myappt-content-box h3,
    .stu-myappt-note-box h3 {

        font-size:16px;

    }



    .stu-myappt-content-box p,
    .stu-myappt-note-box p {

        font-size:14px;

        line-height:1.6;

    }







    /* MESSAGE BOX */


    .stu-myappt-message {

        padding:15px;

        gap:10px;

    }



    .stu-myappt-message strong {

        font-size:15px;

    }



    .stu-myappt-message p {

        font-size:13px;

    }






    /* BUTTONS */


    .stu-myappt-actions {

        flex-direction:column;

        width:100%;

    }



    .stu-myappt-primary-btn,
    .stu-myappt-secondary-btn {

        width:100%;

        text-align:center;

    }






    /* EMPTY STATE */


    .stu-myappt-empty-card {

        padding:30px 20px;

        text-align:center;

    }



    .stu-myappt-empty-card h2 {

        font-size:22px;

    }


}






/* ===============================
   SMALL PHONE
================================ */


@media(max-width:480px){


    .stu-myappt-header h1 {

        font-size:22px;

    }



    .stu-myappt-status-heading h2 {

        font-size:20px;

    }



    .stu-myappt-student-info strong {

        font-size:13px;

    }



    .stu-myappt-student-info span {

        font-size:12px;

    }



    .stu-myappt-footer {

        text-align:center;

        font-size:12px;

    }


}

/* ======================================
   POLY HEALTH RESPONSIVE NAVBAR
====================================== */


.ph-navbar {

    width:100%;

    background:white;

    padding:25px 20px;

}



.ph-navbar-container {

    max-width:1200px;

    margin:auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:25px;

}



/* LOGO */

.ph-navbar-logo {

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#164b36;

    font-size:26px;

    font-weight:700;

}



.ph-logo-icon {


    width:55px;

    height:55px;

    border-radius:15px;

    background:#164b36;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    font-weight:bold;

}



/* MENU */

.ph-navbar-menu {


    width:100%;

    display:flex;

    flex-direction:column;

    gap:15px;


}



.ph-navbar-link,
.ph-navbar-support {


    width:100%;

    height:60px;

    border-radius:35px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:18px;

    font-weight:500;

    transition:.3s;


}



/* NORMAL BUTTON */

.ph-navbar-link {


    border:1px solid #d8dfdb;

    color:#164b36;

    background:white;


}



.ph-navbar-link:hover {


    background:#f2f7f4;


}



/* SUPPORT BUTTON */

.ph-navbar-support {


    background:#4fa985;

    color:white;

    border:none;


}



.ph-navbar-support:hover {


    background:#164b36;

    color:white;


}





/* DESKTOP */

@media(min-width:992px){


    .ph-navbar-container {


        flex-direction:row;

        justify-content:space-between;


    }


    .ph-navbar-menu {


        width:auto;

        flex-direction:row;

        align-items:center;


    }


    .ph-navbar-link,
    .ph-navbar-support {


        width:auto;

        padding:0 35px;

        height:52px;

        white-space:nowrap;


    }


}

/* =====================================================
   STUDENT MY APPOINTMENT NAVBAR
===================================================== */


.stu-myappt-navbar {

    width:100%;

    background:#ffffff;

    padding:18px 0;

    position:sticky;

    top:0;

    z-index:1000;

    box-shadow:
    0 8px 25px rgba(0,0,0,.08);

}



.stu-myappt-navbar-container {

    width:90%;

    max-width:1200px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}



/* LOGO */

.stu-myappt-logo {

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#14532d;

    font-size:22px;

    font-weight:700;

}



.stu-myappt-logo-icon {

    width:40px;

    height:40px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#14532d;

    color:white;

    font-size:25px;

    font-weight:700;

}



/* ACTIONS */

.stu-myappt-nav-actions {

    display:flex;

    align-items:center;

    gap:15px;

}



.stu-myappt-dashboard-btn,
.stu-myappt-logout-btn {


    text-decoration:none;

    padding:10px 22px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}



/* Dashboard */

.stu-myappt-dashboard-btn {

    background:#14532d;

    color:white;

}



.stu-myappt-dashboard-btn:hover {

    background:#166534;

    transform:translateY(-2px);

}



/* Logout */

.stu-myappt-logout-btn {

    border:2px solid #14532d;

    color:#14532d;

    background:white;

}



.stu-myappt-logout-btn:hover {

    background:#14532d;

    color:white;

}





/* =====================================================
   TABLET
===================================================== */

@media(max-width:768px){


.stu-myappt-navbar-container {


    width:92%;


}



.stu-myappt-logo {

    font-size:18px;

}



.stu-myappt-logo-icon {


    width:35px;

    height:35px;

}


.stu-myappt-dashboard-btn,
.stu-myappt-logout-btn {

    padding:9px 16px;

}



}





/* =====================================================
   MOBILE
===================================================== */

@media(max-width:576px){


.stu-myappt-navbar-container {


    flex-direction:column;

    align-items:stretch;

    gap:15px;


}



.stu-myappt-logo {


    justify-content:center;


}



.stu-myappt-nav-actions {


    width:100%;

    display:flex;

    flex-direction:column;

    gap:10px;


}



.stu-myappt-dashboard-btn,
.stu-myappt-logout-btn {


    width:100%;

    text-align:center;

    display:block;


}


}

/* =====================================================
   DASS21 COMPACT AESTHETIC DESIGN
===================================================== */


.dass21-page-compact {
    font-size: 14px;
}


/* MAIN CONTAINER */

.screening-page .container {

    max-width: 1050px;

    padding-left:20px;
    padding-right:20px;

}



/* NAVBAR SMALLER */

.inv-select-navbar {

    padding:12px 0;

}


.inv-select-logo {

    font-size:20px;

    font-weight:700;

}


.inv-select-logo-icon {

    width:38px;
    height:38px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:12px;

}



/* HEADER */

.screening-header {

    padding:35px 20px;

    margin-bottom:25px;

}


.screening-header h1 {

    font-size:32px;

    line-height:1.25;

    margin:10px 0;

}


.screening-header p {

    font-size:14px;

    max-width:700px;

}



/* INVENTORY CARD */

.screening-inventory-info {


    padding:18px;


    border-radius:18px;


    gap:15px;


}


.screening-inventory-info div span {

    font-size:11px;

}


.screening-inventory-info strong {

    font-size:14px;

}




/* INSTRUCTION */


.screening-instructions {


    padding:22px;

    border-radius:20px;

    margin-bottom:25px;


}


.screening-instructions h2 {

    font-size:22px;

}


.instruction-grid {


    gap:12px;


}


.instruction-grid div {


    padding:14px 10px;

    border-radius:15px;


}


.instruction-grid strong {

    font-size:20px;

}



/* QUESTION CARD */

.screening-question {


    padding:20px;


    margin-bottom:15px;


    border-radius:20px;


    display:flex;


}



.question-number {


    width:38px;

    height:38px;


    font-size:15px;


}



.question-text-bilingual strong {


    font-size:15px;


}


.question-text-bilingual p {


    font-size:13px;

}



/* ANSWER OPTION */

.answer-options {


    display:grid;

    grid-template-columns:
    repeat(4,1fr);


    gap:10px;


}



.answer-choice {


    padding:12px 8px;


    border-radius:15px;


}



.answer-value {


    width:28px;

    height:28px;


    font-size:13px;


}



.answer-choice small {


    font-size:11px;


    line-height:1.3;

}



/* NOTICE */

.screening-notice {


    padding:20px;


    border-radius:18px;


    font-size:13px;


}



.screening-notice strong {

    font-size:16px;

}



/* SUBMIT BUTTON */

.screening-submit {


    width:100%;


    padding:14px;


    border-radius:50px;


    font-size:15px;


    margin-top:20px;


}



/* FOOTER */

.home-main-footer {


    margin-top:40px;


}



.home-footer-brand h3 {


    font-size:20px;


}


/* =====================================================
   MOBILE RESPONSIVE
===================================================== */


@media(max-width:768px){


.screening-header h1 {

    font-size:25px;

}


.screening-header {

    padding:25px 10px;

}



.screening-question {


    flex-direction:column;


}



.question-number {


    margin-bottom:12px;


}



.answer-options {


    grid-template-columns:
    repeat(2,1fr);


}



.answer-choice {


    padding:10px 5px;


}



.inv-select-nav-container {


    padding:0 15px;


}



.inv-select-nav-actions a {


    padding:8px 14px;

    font-size:12px;


}


}



@media(max-width:480px){


.screening-header h1 {


    font-size:22px;


}



.answer-options {


    grid-template-columns:
    1fr;


}



.screening-question {


    padding:15px;


}



.question-text-bilingual strong {


    font-size:14px;


}



.question-text-bilingual p {


    font-size:12px;


}


}
/* =====================================================
   PHQ9 MODERN COMPACT DESIGN
===================================================== */


.student-phq9-body {

    background:#f8faf8;

    font-family:'Poppins',sans-serif;

}



/* ===============================
   NAVBAR
================================ */

.student-phq9-body .screening-navbar {


    position:sticky;

    top:0;

    z-index:9999;

    height:70px;

    background:white;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 40px;

    border-bottom:1px solid rgba(0,0,0,.06);

}



.student-phq9-body .screening-logo {


    font-size:20px;

    font-weight:700;

    color:#164b32;


}



.student-phq9-body .screening-actions {


    display:flex;

    gap:12px;

}



.student-phq9-body .screening-btn-outline,
.student-phq9-body .screening-btn-fill {


    padding:10px 22px;

    border-radius:50px;

    font-size:14px;

    text-decoration:none;

}



.student-phq9-body .screening-btn-outline {


    border:1px solid #d5ddd8;

    color:#355445;

    background:white;

}



.student-phq9-body .screening-btn-fill {


    background:#557d55;

    color:white;

}




/* ===============================
   PAGE SIZE
================================ */


.student-phq9-body .screening-page {


    padding-top:30px;

}



.student-phq9-body .container {


    max-width:1050px;


}



/* ===============================
   HEADER
================================ */


.student-phq9-body .screening-header {


    padding:35px 20px;

    margin-bottom:25px;

}



.student-phq9-body .screening-header span {


    font-size:13px;

    font-weight:600;

    letter-spacing:.5px;

    color:#557d55;


}



.student-phq9-body .screening-header h1 {


    font-size:34px;

    color:#163b2a;

    margin:12px 0;


}



.student-phq9-body .screening-header p {


    font-size:14px;

    line-height:1.8;

    max-width:750px;


}



/* ===============================
 INVENTORY CARD
================================ */


.student-phq9-body .screening-info-card {


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;

    background:white;

    padding:22px;

    border-radius:22px;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    margin-bottom:25px;

}



.student-phq9-body .screening-info-card div {


    background:#f5f8f5;

    padding:15px;

    border-radius:15px;

}



.student-phq9-body .screening-info-card small {


    color:#777;

    font-size:11px;

}



.student-phq9-body .screening-info-card strong {


    display:block;

    margin-top:5px;

    color:#164b32;

    font-size:15px;

}





/* ===============================
 ANSWER GUIDE
================================ */


.student-phq9-body .screening-instructions {


    background:white;

    padding:25px;

    border-radius:22px;

    margin-bottom:25px;

}



.student-phq9-body .screening-instructions h2 {


    font-size:22px;

    color:#163b2a;


}



.student-phq9-body .instruction-grid {


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;

}



.student-phq9-body .instruction-grid div {


    background:#f5f8f5;

    padding:15px;

    border-radius:16px;

    text-align:center;

}



.student-phq9-body .instruction-grid strong {


    display:block;

    font-size:22px;

    color:#164b32;


}



/* ===============================
 QUESTION CARD
================================ */


.student-phq9-body .screening-question {


    background:white;


    border-radius:22px;


    padding:22px;


    margin-bottom:18px;


    box-shadow:0 8px 25px rgba(0,0,0,.04);


    border:1px solid #edf1ed;


}



.student-phq9-body .question-number {


    width:42px;

    height:42px;

    border-radius:50%;


    background:#dcebdc;


    color:#164b32;


    font-weight:700;


    display:flex;

    align-items:center;

    justify-content:center;


}




.student-phq9-body .student-phq9-question-text strong {


    font-size:16px;

    color:#1b2e24;

}



.student-phq9-body .student-phq9-question-text p {


    font-size:13px;

    color:#666;

}



/* ===============================
 ANSWER BUTTON
================================ */


.student-phq9-body .answer-options {


    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;


}



.student-phq9-body .answer-choice {


    background:#fafcf9;

    border:1px solid #dce5dc;

    border-radius:16px;

    padding:12px;

    cursor:pointer;

    transition:.25s;

}



.student-phq9-body .answer-choice:hover {


    background:#eaf4ea;


}



.student-phq9-body .answer-choice input {


    display:none;

}



.student-phq9-body .answer-value {


    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;


    background:#164b32;

    color:white;

    border-radius:50%;


    margin-bottom:8px;


}



.student-phq9-body .answer-choice small {


    font-size:11px;

}



.student-phq9-body .answer-choice:has(input:checked) {


    background:#dcebdc;

    border-color:#557d55;

}




/* ===============================
 SUBMIT
================================ */


.student-phq9-body .screening-submit {


    width:100%;

    border-radius:50px;

    padding:15px;

    font-size:15px;

    margin:25px 0 40px;


}




/* ===============================
 MOBILE
================================ */


@media(max-width:768px){


.student-phq9-body .screening-navbar {


    padding:0 15px;

}



.student-phq9-body .screening-logo {


    font-size:16px;

}



.student-phq9-body .screening-btn-outline,
.student-phq9-body .screening-btn-fill {


    padding:8px 12px;

    font-size:12px;

}



.student-phq9-body .screening-info-card {


    grid-template-columns:1fr 1fr;


}



.student-phq9-body .instruction-grid {


    grid-template-columns:1fr 1fr;

}



.student-phq9-body .answer-options {


    grid-template-columns:1fr 1fr;


}



}


@media(max-width:480px){


.student-phq9-body .screening-info-card {


    grid-template-columns:1fr;

}



.student-phq9-body .answer-options {


    grid-template-columns:1fr;


}



.student-phq9-body .screening-header h1 {


    font-size:25px;


}



}

/* =====================================================
   PHQ9 CENTER ALIGN FIX
===================================================== */


/* Main page center */

.student-phq9-body .screening-page .container {

    max-width:1100px;

    margin:0 auto;

}



/* Header center */

.student-phq9-body .screening-header {


    text-align:center;


    display:flex;

    flex-direction:column;

    align-items:center;


    padding:50px 20px 35px;


}



.student-phq9-body .screening-header span {


    display:block;

    text-align:center;

}



.student-phq9-body .screening-header h1 {


    text-align:center;

}



.student-phq9-body .screening-header p {


    text-align:center;

    max-width:750px;


}



/* Inventory card center */

.student-phq9-body .screening-info-card {


    margin-left:auto;

    margin-right:auto;


}



/* Instruction */

.student-phq9-body .screening-instructions {


    text-align:center;


}



.student-phq9-body .instruction-grid {


    max-width:900px;


    margin:25px auto;


}



/* Question section */

.student-phq9-body .screening-questions {


    max-width:1000px;


    margin:0 auto;


}



/* Question text */

.student-phq9-body .student-phq9-question-text {


    text-align:left;


}



/* Submit */

.student-phq9-body .screening-submit {


    max-width:1000px;


    display:block;


    margin:30px auto;


}

/* =====================================================
   PHQ9 LIGHT GREEN BACKGROUND
===================================================== */


.student-phq9-body {

    background:#f2f8f2;

}



/* main area */

.student-phq9-body .screening-page {

    background:#f2f8f2;

}



/* card white floating */

.student-phq9-body .screening-info-card,
.student-phq9-body .screening-instructions,
.student-phq9-body .screening-question {


    background:#ffffff;


    box-shadow:
    0 10px 30px rgba(36,80,50,0.08);


}



/* question hover */

.student-phq9-body .screening-question:hover {


    transform:translateY(-2px);


    transition:.25s ease;


    box-shadow:
    0 15px 35px rgba(36,80,50,0.12);


}



/* green label */

.student-phq9-body .screening-header span {


    color:#4d7c50;


}



/* question number */

.student-phq9-body .question-number {


    background:#dcebd8;


    color:#285c38;


}



/* answer selected */

.student-phq9-body .answer-choice:has(input:checked) {


    background:#dff0df;


    border-color:#5b8c5a;


}



/* instruction cards */

.student-phq9-body .instruction-grid div {


    background:#edf6ed;


}

/* =====================================================
   PHQ9 ANSWER GUIDE
===================================================== */


.student-phq9-instructions {

    text-align:center;

}



.student-phq9-option-grid {

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

    margin-top:25px;

}



.student-phq9-option {

    background:#edf7ed;

    border-radius:20px;

    padding:22px;

    min-height:90px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}



.student-phq9-option strong {

    font-size:28px;

    color:#245c35;

    font-weight:700;

}



.student-phq9-option span {

    margin-top:8px;

    color:#31523a !important;

    font-size:14px;

    font-weight:600;

    opacity:1 !important;

}



.student-phq9-instructions p {

    color:#425642 !important;

    font-size:15px;

    margin-top:30px;

}



@media(max-width:768px){

    .student-phq9-option-grid{

        grid-template-columns:1fr 1fr;

    }

}


@media(max-width:480px){

    .student-phq9-option-grid{

        grid-template-columns:1fr;

    }

}

/* PHQ9 ERROR WARNING */

.student-phq9-error{


    background:#fff1f0;

    border:2px solid #d9534f;

    color:#7a1c1c;

    border-radius:20px;

    padding:20px 25px;

    margin:25px 0;

    display:flex;

    align-items:center;

    gap:18px;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.05);

}


.student-phq9-error-icon{

    font-size:35px;

}


.student-phq9-error strong{

    font-size:18px;

}


.student-phq9-error p{

    margin:8px 0 0;

    font-size:14px;

}



@keyframes shake {


0%,100%{

transform:translateX(0);

}


25%{

transform:translateX(-8px);

}


75%{

transform:translateX(8px);

}


}

.dass-error-box{


background:#fff3f2;

border:2px solid #d9534f;

border-radius:20px;

padding:22px 25px;

margin:25px 0;

display:flex;

align-items:center;

gap:20px;

color:#7a1c1c;


}



.dass-error-icon{

font-size:35px;

}



.dass-error-box strong{

font-size:18px;

}



.dass-error-box p{

margin-top:8px;

margin-bottom:0;

font-size:14px;

}

/* =====================================================
   PHQ9 RESULT COMPACT DESIGN
===================================================== */


.screening-page-body{

    background:#f1f8f3;

    font-family:'Poppins',sans-serif;

}



/* NAVBAR */

.screening-navbar{

    position:sticky;

    top:0;

    z-index:999;

    background:white;

    padding:12px 35px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.screening-logo{

    font-size:20px;

    font-weight:700;

    color:#14532d;

}



.screening-actions{

    display:flex;

    gap:10px;

}



.screening-btn-outline,
.screening-btn-fill{


    padding:8px 18px;

    border-radius:30px;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

}



.screening-btn-outline{

    border:2px solid #166534;

    color:#166534;

}



.screening-btn-fill{

    background:#166534;

    color:white;

}





/* MAIN */


.screening-container{

    max-width:900px;

    margin:auto;

    padding:35px 20px;

}





/* HEADER */


.screening-header{

    text-align:center;

    margin-bottom:30px;

}



.screening-header span{

    font-size:12px;

    letter-spacing:2px;

    color:#15803d;

    font-weight:600;

}



.screening-header h1{

    font-size:32px;

    line-height:1.3;

    color:#14532d;

    margin:15px 0;

}



.screening-header p{

    font-size:14px;

    color:#64748b;

    max-width:650px;

    margin:auto;

}





/* SCORE CARD */


.phq-result-card{


    background:white;

    border-radius:25px;

    padding:35px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    border:1px solid #dcfce7;

    margin-bottom:25px;

}



.phq-result-card h2{


    font-size:18px;

    color:#14532d;

}



.phq-score{


    width:120px;

    height:120px;

    border-radius:50%;

    background:#166534;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:45px;

    font-weight:700;

    margin:25px auto;

}



.phq-result-card h3{


    font-size:20px;

    color:#15803d;

}



.phq-result-card p{

    font-size:13px;

    color:#64748b;

}





/* INFO SECTION */


.phq-info-result{


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    background:white;

    padding:25px;

    border-radius:22px;

    margin-bottom:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}



.phq-info-result h3{


    color:#14532d;

    font-size:18px;

    margin-bottom:15px;

}



.phq-info-result p{


    font-size:13px;

    color:#475569;

    line-height:1.7;

}





/* HISTORY TABLE */


.table-responsive{


    border-radius:15px;

    overflow:hidden;

}



.table{


    font-size:13px;

    background:white;

}



.table thead{


    background:#166534;

    color:white;

}



.table th{


    padding:12px;

    font-size:12px;

}



.table td{


    padding:12px;

}





/* BACK BUTTON */


.phq-back-button{


    display:block;

    width:max-content;

    margin:30px auto;

    padding:12px 30px;

    background:#166534;

    color:white;

    border-radius:30px;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

}





/* MOBILE */


@media(max-width:768px){


.screening-navbar{

    padding:12px 15px;

}



.screening-logo{

    font-size:16px;

}



.screening-actions a{

    padding:7px 12px;

    font-size:11px;

}



.screening-header h1{

    font-size:25px;

}



.phq-info-result{

    grid-template-columns:1fr;

}



.phq-result-card{

    padding:25px 15px;

}



.phq-score{

    width:100px;

    height:100px;

    font-size:38px;

}



.table{

    font-size:11px;

}


}

/* =====================================================
   SMALL PHQ RESULT CARD
===================================================== */


.phq-result-card{

    background:white;

    border-radius:18px;

    padding:20px 25px;

    max-width:650px;

    margin:0 auto 20px;

    text-align:center;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

    border:1px solid #dcfce7;

}



.phq-result-card h2{

    font-size:16px;

    line-height:1.5;

    color:#14532d;

    margin-bottom:12px;

}



.phq-score{


    width:80px;

    height:80px;


    border-radius:50%;


    background:#166534;


    color:white;


    display:flex;


    justify-content:center;


    align-items:center;


    margin:15px auto;


    font-size:32px;


    font-weight:700;


}



.phq-result-card h3{


    font-size:16px;


    color:#15803d;


    margin-bottom:10px;


}



.phq-result-card p{


    font-size:12px;


    line-height:1.6;


    color:#64748b;


    margin-bottom:10px;


}



.phq-result-card strong{


    font-size:14px;


    color:#166534;


}

/* =====================================================
   PHQ RESULT HEADER COMPACT
===================================================== */


.screening-container{

    max-width:750px;
    padding-top:25px;

}



/* HEADER */

.screening-header{

    margin-bottom:20px;

}



.screening-header span{

    font-size:10px;

    letter-spacing:1.5px;

}



.screening-header h1{

    font-size:26px;

    line-height:1.25;

    margin:10px 0;

}



.screening-header p{

    font-size:12px;

    line-height:1.6;

    max-width:550px;

}





/* NAVBAR SMALLER */

.screening-navbar{

    padding:10px 30px;

}


.screening-logo{

    font-size:18px;

}



.screening-btn-outline,
.screening-btn-fill{

    padding:7px 15px;

    font-size:12px;

}



/* RESULT CARD */

.phq-result-card{

    padding:18px 20px;

    border-radius:16px;

    max-width:600px;

}



.phq-result-card h2{

    font-size:15px;

}



.phq-score{

    width:70px;

    height:70px;

    font-size:28px;

    margin:12px auto;

}



.phq-result-card h3{

    font-size:16px;

}



.phq-result-card p{

    font-size:11px;

}

/* ==========================================
   PHQ9 RESULT V2
========================================== */


.phq9v2-body{

font-family:Poppins,sans-serif;

background:#f1f8f3;

color:#14532d;

}




.phq9v2-navbar{

background:white;

position:sticky;

top:0;

z-index:99;

box-shadow:0 5px 20px #00000010;

}



.phq9v2-nav-container{

max-width:1000px;

margin:auto;

padding:15px 25px;

display:flex;

justify-content:space-between;

align-items:center;

}



.phq9v2-logo{

font-weight:700;

font-size:20px;

color:#14532d;

text-decoration:none;

}



.phq9v2-logo span{

background:#14532d;

color:white;

padding:8px 14px;

border-radius:12px;

margin-right:10px;

}



.phq9v2-actions{

display:flex;

gap:10px;

}



.phq9v2-actions a{

text-decoration:none;

padding:8px 18px;

border-radius:30px;

background:#166534;

color:white;

font-size:13px;

}





.phq9v2-container{

max-width:850px;

margin:auto;

padding:35px 20px;

}





.phq9v2-hero{

text-align:center;

margin-bottom:30px;

}



.phq9v2-hero span{

font-size:12px;

letter-spacing:2px;

color:#15803d;

}



.phq9v2-hero h1{

font-size:34px;

margin:15px 0;

}



.phq9v2-hero p{

font-size:14px;

color:#64748b;

}






.phq9v2-score-card{

background:white;

border-radius:30px;

padding:35px;

text-align:center;

box-shadow:0 15px 40px #00000010;

}



.phq9v2-score-circle{

width:130px;

height:130px;

border-radius:50%;

background:#166534;

color:white;

margin:auto;

display:flex;

justify-content:center;

align-items:center;

font-size:45px;

font-weight:700;

}


.phq9v2-score-circle span{

font-size:15px;

}





.phq9v2-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-top:25px;

}



.phq9v2-card{

background:white;

padding:25px;

border-radius:25px;

box-shadow:0 10px 30px #00000010;

}



.phq9v2-icon{

font-size:35px;

}





.phq9v2-guide,
.phq9v2-history,
.phq9v2-support{

background:white;

margin-top:25px;

padding:25px;

border-radius:25px;

box-shadow:0 10px 30px #00000010;

}





.phq9v2-guide-grid{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:10px;

}



.phq9v2-guide-grid div{

background:#ecfdf5;

padding:15px;

border-radius:15px;

text-align:center;

}





.phq9v2-history table{

width:100%;

font-size:13px;

}





.phq9v2-history th{

background:#166534;

color:white;

padding:12px;

}



.phq9v2-history td{

padding:12px;

}





.phq9v2-support{

text-align:center;

}



.phq9v2-support a{

background:#166534;

color:white;

padding:12px 30px;

border-radius:30px;

text-decoration:none;

}





.phq9v2-bottom{

display:flex;

justify-content:center;

gap:15px;

margin:30px;

}



.phq9v2-bottom a{

background:white;

padding:12px 25px;

border-radius:30px;

text-decoration:none;

color:#166534;

}




.phq9v2-footer{

text-align:center;

padding:20px;

}




@media(max-width:768px){


.phq9v2-grid{

grid-template-columns:1fr;

}


.phq9v2-guide-grid{

grid-template-columns:1fr 1fr;

}


.phq9v2-hero h1{

font-size:25px;

}


}

/* =====================================
   PHQ9 V2 AESTHETIC UPGRADE
===================================== */


/* BODY */

.phq9v2-body{

background:
linear-gradient(
135deg,
#f0fdf4,
#ecfdf5,
#ffffff
);

}


/* NAV BUTTON */

.phq9v2-actions a{

transition:all .3s ease;

border:1px solid transparent;

}



.phq9v2-actions a:hover{

transform:translateY(-3px);

background:#15803d;

box-shadow:
0 10px 20px rgba(22,101,52,.25);

}



/* LOGO */

.phq9v2-logo span{

transition:.3s;

}



.phq9v2-logo:hover span{

transform:rotate(10deg) scale(1.1);

}






/* HERO */

.phq9v2-hero{

animation:
fadeUp .8s ease;

}



.phq9v2-hero h1{

background:
linear-gradient(
90deg,
#14532d,
#16a34a
);

-webkit-background-clip:text;

color:transparent;

}







/* SCORE CARD */

.phq9v2-score-card{

border:
1px solid rgba(22,101,52,.08);

transition:.35s ease;

}



.phq9v2-score-card:hover{

transform:translateY(-8px);

box-shadow:
0 25px 60px rgba(22,101,52,.15);

}






/* SCORE CIRCLE */

.phq9v2-score-circle{


background:
linear-gradient(
135deg,
#166534,
#22c55e
);


box-shadow:

0 15px 35px rgba(22,101,52,.35);


transition:.4s;


}



.phq9v2-score-card:hover
.phq9v2-score-circle{


transform:scale(1.08);

}







/* SMALL CARDS */


.phq9v2-card{


border:
1px solid rgba(22,101,52,.08);


transition:.35s;


}



.phq9v2-card:hover{


transform:
translateY(-8px);


box-shadow:

0 20px 45px rgba(0,0,0,.12);


}




.phq9v2-icon{


background:#ecfdf5;

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;


}







/* GUIDE BOX */


.phq9v2-guide-grid div{


transition:.3s;


cursor:pointer;


border:
1px solid transparent;


}



.phq9v2-guide-grid div:hover{


background:#dcfce7;


transform:
translateY(-5px);


border-color:#86efac;


box-shadow:

0 10px 20px rgba(22,101,52,.15);


}








/* TABLE */


.phq9v2-history tr{


transition:.25s;


}



.phq9v2-history tbody tr:hover{


background:#f0fdf4;


transform:scale(1.01);


}








/* SUPPORT CARD */


.phq9v2-support{


background:

linear-gradient(
135deg,
#14532d,
#166534
);


color:white;


}



.phq9v2-support a{


display:inline-block;


background:white;


color:#166534;


font-weight:600;


transition:.3s;


}



.phq9v2-support a:hover{


transform:
translateY(-4px);


box-shadow:

0 15px 30px rgba(0,0,0,.25);


background:#dcfce7;


}







/* BOTTOM BUTTON */


.phq9v2-bottom a{


transition:.3s;


border:
1px solid #bbf7d0;


}



.phq9v2-bottom a:hover{


transform:
translateY(-5px);


box-shadow:

0 12px 25px rgba(22,101,52,.15);


background:#166534;


color:white;


}




/* ANIMATION */


@keyframes fadeUp{


from{

opacity:0;

transform:
translateY(30px);

}


to{

opacity:1;

transform:
translateY(0);

}


}







/* MOBILE */

@media(max-width:768px){


.phq9v2-actions{

gap:5px;

}



.phq9v2-actions a{

font-size:11px;

padding:7px 12px;

}


}

/* HERO GREEN CARD */

.phq9v2-hero,
.phq9v2-support,
.result-hero-card {

    background:
    linear-gradient(
        135deg,
        #064e3b 0%,
        #065f46 45%,
        #15803d 100%
    );

    border-radius:35px;

    color:white;

    box-shadow:
    0 25px 60px rgba(6,78,59,.25);

}

/* =====================================================
   PHQ9 RESULT V2 DESIGN
===================================================== */


.phq-result-v2-body{

    font-family:'Poppins',sans-serif;

    background:#f1f8f3;

    color:#164e3b;

}





/* NAVBAR */

.phq-result-v2-navbar{

    height:90px;

    background:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 70px;

    border-bottom:1px solid #e5e7eb;

}



.phq-result-v2-logo{

    display:flex;

    align-items:center;

    gap:15px;

    font-size:28px;

    font-weight:700;

    color:#14532d;

}



.phq-result-v2-logo span{

    width:45px;

    height:45px;

    border-radius:15px;

    background:#14532d;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

}



.phq-result-v2-actions{

    display:flex;

    gap:15px;

}



.phq-result-v2-actions a{

    text-decoration:none;

    padding:12px 25px;

    border-radius:50px;

    border:1px solid #166534;

    color:#166534;

    transition:.3s;

}



.phq-result-v2-actions a:hover,
.phq-result-v2-actions .active{


    background:#166534;

    color:white;

    transform:translateY(-3px);

}






/* CONTAINER */


.phq-result-v2-container{

    max-width:1400px;

    margin:auto;

    padding:45px 60px;

}






/* ALERT */


.phq-result-v2-alert{


    background:

    linear-gradient(
    135deg,
    #9f1239,
    #be123c
    );


    color:white;

    border-radius:35px;

    padding:35px;

    display:flex;

    gap:25px;

    box-shadow:
    0 20px 50px rgba(159,18,57,.25);

}



.phq-alert-icon{

    font-size:45px;

}





.phq-result-v2-alert span{

    letter-spacing:2px;

    font-size:13px;

}



.phq-result-v2-alert h2{

    font-size:30px;

    margin:15px 0;

}



.phq-result-v2-alert p{

    opacity:.9;

}



.phq-alert-buttons{

    display:flex;

    gap:15px;

    margin-top:20px;

}



.phq-alert-buttons a{


    text-decoration:none;

    background:white;

    color:#9f1239;

    padding:12px 25px;

    border-radius:50px;

    transition:.3s;

}



.phq-alert-buttons a:hover{

    transform:translateY(-4px);

}







/* HEADER */


.phq-result-v2-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:60px 0 40px;

}



.phq-result-v2-header span{

    font-size:13px;

    letter-spacing:3px;

    color:#4d8b70;

    font-weight:600;

}



.phq-result-v2-header h1{

    font-size:55px;

    line-height:1.1;

    color:#14532d;

}



.phq-result-v2-header p{

    font-size:17px;

    color:#64748b;

}




/* DATE CARD */


.phq-date-card{

    background:white;

    padding:25px;

    border-radius:25px;

    min-width:220px;

    box-shadow:

    0 15px 35px rgba(0,0,0,.08);

}



.phq-date-card small{

    color:#94a3b8;

}



.phq-date-card strong{

    display:block;

    margin-top:10px;

    color:#14532d;

}







/* MAIN SCORE */


.phq-main-score-card{


    background:white;

    border-radius:35px;

    padding:45px;

    display:flex;

    align-items:center;

    gap:40px;


    box-shadow:

    0 20px 50px rgba(0,0,0,.08);


}



.phq-score-circle{


    width:170px;

    height:170px;

    border-radius:50%;


    background:

    linear-gradient(
    135deg,
    #065f46,
    #22c55e
    );


    color:white;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


}



.phq-score-circle strong{

    font-size:60px;

}



.phq-score-circle span{

    font-size:20px;

}




.phq-main-score-card h2{

    font-size:35px;

    color:#166534;

}






/* GRID */


.phq-result-grid{


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    margin-top:35px;


}





.phq-result-card{


    background:white;

    padding:35px;

    border-radius:30px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.07);

    transition:.3s;

}



.phq-result-card:hover{


    transform:translateY(-8px);


}



.phq-card-icon{

    font-size:35px;

    background:#ecfdf5;

    width:65px;

    height:65px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

}





/* HISTORY */


.phq-history-card{


    margin-top:40px;

    background:white;

    padding:35px;

    border-radius:30px;

}



.phq-history-card table{

    width:100%;

    margin-top:20px;

}



.phq-history-card th{

    text-align:left;

    padding:15px;

}



.phq-history-card td{

    padding:15px;

    border-bottom:1px solid #eee;

}





.status-safe{

    color:#15803d;

    font-weight:600;

}



.status-danger{

    color:#dc2626;

    font-weight:600;

}






/* SUPPORT */


.phq-support-box{


    margin-top:40px;


    padding:45px;


    border-radius:35px;


    background:

    linear-gradient(
    135deg,
    #064e3b,
    #15803d
    );


    color:white;

}



.phq-support-box span{

    letter-spacing:3px;

}



.phq-support-box a{


    display:inline-block;

    margin-top:20px;

    background:white;

    color:#166534;

    padding:14px 30px;

    border-radius:50px;

    text-decoration:none;

    transition:.3s;

}



.phq-support-box a:hover{


    transform:translateY(-5px);

}






/* BUTTON */


.phq-bottom-buttons{


    display:flex;

    gap:20px;

    margin-top:40px;


}



.phq-bottom-buttons a{


    text-decoration:none;

    padding:15px 30px;

    border-radius:50px;

    background:#166534;

    color:white;

    transition:.3s;

}



.phq-bottom-buttons a:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 30px #16653455;

}







/* MOBILE */


@media(max-width:768px){


.phq-result-v2-container{

padding:25px;

}



.phq-result-v2-header{

flex-direction:column;

align-items:flex-start;

gap:25px;

}



.phq-result-v2-header h1{

font-size:38px;

}



.phq-result-grid{

grid-template-columns:1fr;

}



.phq-main-score-card{

flex-direction:column;

text-align:center;

}



.phq-result-v2-navbar{

padding:0 20px;

}


}

.phq-result-v2-container{

max-width:1200px;
margin:auto;
padding:40px 30px;

}


.phq-result-v2-header h1{

font-size:48px;

}


.phq-result-grid{

gap:20px;

}


.phq-result-card{

padding:25px;

}

/* =====================================================
   PHQ RESULT RESPONSIVE
===================================================== */


/* TABLET */

@media (max-width: 992px){


.phq-result-v2-navbar{

    padding:0 30px;

}



.phq-result-v2-logo{

    font-size:22px;

}



.phq-result-v2-container{

    padding:35px 25px;

}




.phq-result-v2-header{

    flex-direction:column;

    align-items:flex-start;

    gap:25px;

}



.phq-result-v2-header h1{

    font-size:42px;

}




.phq-date-card{

    width:100%;

}




.phq-main-score-card{

    padding:30px;

}




.phq-result-grid{

    grid-template-columns:1fr;

}




.phq-result-card{

    padding:30px;

}




.phq-support-box{

    padding:35px;

}



}





/* MOBILE */

@media (max-width:600px){



body{

    overflow-x:hidden;

}



/* NAVBAR */

.phq-result-v2-navbar{

    height:auto;

    padding:20px;

    flex-direction:column;

    gap:20px;

    align-items:flex-start;

}



.phq-result-v2-logo{

    font-size:20px;

}



.phq-result-v2-logo span{

    width:38px;

    height:38px;

}





.phq-result-v2-actions{

    width:100%;

    display:flex;

    gap:10px;

}



.phq-result-v2-actions a{

    flex:1;

    text-align:center;

    padding:10px;

    font-size:13px;

}





/* CONTAINER */

.phq-result-v2-container{

    padding:20px 15px;

}






/* ALERT */

.phq-result-v2-alert{

    flex-direction:column;

    padding:25px;

    border-radius:25px;

}



.phq-result-v2-alert h2{

    font-size:22px;

}





.phq-alert-buttons{

    flex-direction:column;

}



.phq-alert-buttons a{

    text-align:center;

}





/* HEADER */

.phq-result-v2-header{

    margin:35px 0;

}



.phq-result-v2-header h1{

    font-size:32px;

}



.phq-result-v2-header p{

    font-size:14px;

}






/* SCORE */

.phq-main-score-card{

    flex-direction:column;

    text-align:center;

    padding:25px;

    border-radius:25px;

}



.phq-score-circle{

    width:130px;

    height:130px;

}



.phq-score-circle strong{

    font-size:45px;

}





.phq-main-score-card h2{

    font-size:28px;

}





/* CARDS */


.phq-result-grid{

    display:block;

}



.phq-result-card{

    margin-bottom:20px;

    padding:25px;

    border-radius:25px;

}





/* HISTORY */


.phq-history-card{

    padding:20px;

    overflow-x:auto;

}



.phq-history-card table{

    min-width:600px;

}





/* SUPPORT */


.phq-support-box{

    padding:25px;

    border-radius:25px;

}



.phq-support-box h2{

    font-size:25px;

}





/* BUTTON */


.phq-bottom-buttons{

    flex-direction:column;

}



.phq-bottom-buttons a{

    text-align:center;

    width:100%;

}




}

/* =====================================================
   PHQ HISTORY RESPONSIVE
===================================================== */

.phq-history-card{
    width:100%;
    overflow:hidden;
}


.phq-history-card .table-responsive{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}



.phq-history-card table{

    width:100%;
    min-width:650px;
    
}



.phq-history-card th{

    font-size:15px;
    white-space:nowrap;

}



.phq-history-card td{

    font-size:14px;
    white-space:nowrap;

}




/* MOBILE */

@media(max-width:600px){


.phq-history-card{

    padding:20px !important;

}



.phq-history-card h3{

    font-size:22px;

}



.phq-history-card table{

    min-width:550px;

}



.phq-history-card th{

    font-size:13px;

}



.phq-history-card td{

    font-size:12px;

}


}

/* =====================================================
 NOTIFICATION PAGE
===================================================== */


.notification-body{

background:#f4faf6;
font-family:'Poppins',sans-serif;

}



/* NAVBAR */

.notification-navbar{

height:95px;
background:white;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 8%;

border-bottom:1px solid #edf2ee;

}



.notification-logo{

display:flex;
align-items:center;

gap:15px;

font-size:25px;
font-weight:700;

color:#164d3b;

text-decoration:none;

}



.logo-icon{

width:48px;
height:48px;

background:#14543f;

color:white;

display:flex;
align-items:center;
justify-content:center;

border-radius:15px;

font-size:30px;

}



.notification-dashboard-btn{


padding:13px 28px;

border:1px solid #aac5b9;

border-radius:30px;

color:#245c48;

text-decoration:none;

font-weight:600;

transition:.3s;

}


.notification-dashboard-btn:hover{

background:#14543f;
color:white;

}





/* MAIN */

.notification-main{

padding:50px 20px;

}



.notification-container{

max-width:1080px;
margin:auto;

}





/* HEADER CARD */


.notification-top-card{


background:white;

border-radius:35px;

padding:40px 45px;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:
0 15px 40px rgba(0,0,0,.05);

margin-bottom:30px;

}



.notification-label{

color:#25805f;

font-weight:600;

}



.notification-top-card h1{

font-size:42px;

color:#14543f;

margin:10px 0;

}



.notification-top-card p{

color:#7b8794;

}



.notification-count{


background:#e7f3ec;

padding:25px 35px;

border-radius:25px;

text-align:center;


}



.notification-count span{

display:block;

color:#60756d;

}



.notification-count strong{

font-size:45px;

color:#14543f;

}






/* CONTENT */


.notification-content-card{


background:white;

border-radius:35px;

padding:50px;

box-shadow:
0 15px 40px rgba(0,0,0,.05);

}




/* ITEM */


.notification-item{


display:flex;

gap:25px;

padding:25px;

background:#f7fbf8;

border-radius:25px;

margin-bottom:20px;

transition:.3s;

}



.notification-item:hover{


transform:translateY(-5px);

box-shadow:
0 10px 25px rgba(0,0,0,.08);

}




.notification-item-icon{


width:55px;
height:55px;

background:#e3f2eb;

border-radius:18px;

display:flex;

align-items:center;
justify-content:center;

font-size:28px;

}



.notification-text h3{

color:#14543f;

margin:0 0 8px;

}



.notification-text p{

color:#6c7c75;

}





/* EMPTY STATE */


.notification-empty{

text-align:center;

padding:70px 20px;

}



.empty-icon{

font-size:60px;

opacity:.8;

}



.notification-empty h2{

color:#68777f;

font-size:28px;

}



.notification-empty p{

color:#9aa6ad;

}



.empty-button{


display:inline-block;

margin-top:25px;

background:#14543f;

color:white;

padding:14px 35px;

border-radius:30px;

text-decoration:none;

font-weight:600;

transition:.3s;

}



.empty-button:hover{

background:#0d3b2d;

transform:translateY(-3px);

}






/* MOBILE */


@media(max-width:700px){


.notification-navbar{

padding:0 20px;

}



.notification-logo{

font-size:20px;

}


.notification-top-card{


flex-direction:column;

align-items:flex-start;

gap:25px;

padding:30px;


}



.notification-top-card h1{

font-size:32px;

}



.notification-content-card{

padding:20px;

}



.notification-item{

padding:18px;

}



.notification-item-icon{

width:45px;
height:45px;

}


}

/* =====================================================
   NOTIFICATION ITEM LIKE DESIGN
===================================================== */


.notification-list-card{

    background:transparent;
    padding:0;

}



.notification-modern-item{


    background:#f8fcf9;

    border-radius:30px;

    padding:30px 35px;

    display:flex;

    align-items:flex-start;

    gap:25px;

    margin-bottom:25px;

    border:1px solid #edf4ef;

    transition:.3s;

}



.notification-modern-item:hover{


    transform:translateY(-6px);

    box-shadow:
    0 15px 35px rgba(20,84,63,.12);

}





.notification-modern-icon{


    width:70px;

    height:70px;

    flex-shrink:0;


    background:#e6f3ec;

    border-radius:22px;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:35px;


}





.notification-modern-content{

    flex:1;

}



.notification-title-row{


    display:flex;

    justify-content:space-between;

    align-items:center;


}



.notification-title-row h3{


    margin:0;


    color:#14543f;


    font-size:25px;

    font-weight:700;


}



.notification-modern-content p{


    margin:12px 0;


    color:#71817a;


    font-size:16px;


}




.notification-modern-content small{


    color:#9aa8a1;

    font-size:14px;


}




/* READ BADGE */


.notification-read{


    background:#dff3e8;

    color:#25805f;

    padding:8px 22px;


    border-radius:25px;


    font-size:14px;

    font-weight:500;


}




.notification-new{


    background:#14543f;

    color:white;

    padding:8px 22px;


    border-radius:25px;


    font-size:14px;


}




/* MOBILE */


@media(max-width:700px){


.notification-modern-item{


    padding:20px;

    gap:15px;


}



.notification-modern-icon{


    width:55px;

    height:55px;

    font-size:25px;


}



.notification-title-row{


    flex-direction:column;

    align-items:flex-start;

    gap:10px;


}



.notification-title-row h3{

    font-size:18px;

}


.notification-modern-content p{

    font-size:14px;

}


}

/* =====================================================
   ADMIN DAILY QUOTES PAGE
===================================================== */


.admin-dashboard-body{

    background:#f3f8f4;
    font-family:'Poppins',sans-serif;

}




/* WELCOME CARD */

.admin-dashboard-welcome{


    background:white;

    border-radius:35px;

    padding:40px;

    margin-bottom:35px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.05);


}



.admin-section-label{


    color:#24805f;

    font-size:14px;

    font-weight:600;

    letter-spacing:.5px;

}



.admin-dashboard-welcome h1{


    color:#14543f;

    font-size:38px;

    font-weight:700;

    margin:10px 0;


}



.admin-dashboard-welcome p{


    color:#77857e;

}





/* ADD QUOTE CARD */


.admin-dashboard-add-card{


    margin-top:30px;

    background:#e9f5ee;

    border-radius:25px;

    padding:25px;

    display:flex;

    align-items:center;

    gap:20px;


}



.admin-dashboard-add-icon{


    width:60px;

    height:60px;

    border-radius:20px;

    background:#14543f;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;


}



.admin-dashboard-add-content{

    flex:1;

}



.admin-dashboard-add-content h3{

    color:#14543f;

    margin:0;

}



.admin-dashboard-add-content p{

    margin:5px 0;

}



.admin-dashboard-add-button{


    background:#14543f;

    color:white;

    padding:13px 28px;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;


}


.admin-dashboard-add-button:hover{


    background:#0c3a2b;

    color:white;

    transform:translateY(-3px);


}





/* QUOTE LIST */


.admin-dashboard-list-card{


    background:white;

    border-radius:35px;

    padding:35px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.05);


}




.admin-dashboard-list-item{


    display:flex;

    align-items:center;

    gap:25px;

    padding:25px;

    background:#f8fcf9;

    border-radius:25px;

    margin-bottom:20px;

    border:1px solid #edf4ef;

    transition:.3s;


}



.admin-dashboard-list-item:hover{


    transform:translateY(-5px);

    box-shadow:
    0 12px 30px rgba(20,84,63,.12);


}





.admin-dashboard-list-avatar{


    width:65px;

    height:65px;

    border-radius:22px;

    background:#e4f2eb;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    flex-shrink:0;


}





.admin-dashboard-list-content{


    flex:1;


}




.admin-dashboard-list-content strong{


    display:block;

    color:#14543f;

    font-size:18px;

    line-height:1.5;


}



.admin-dashboard-list-content small{


    display:block;

    color:#87958e;

    margin-top:6px;


}





/* ACTION BUTTON */


.quote-management-actions{


    display:flex;

    gap:10px;


}



.quote-edit-btn,
.quote-delete-btn{


    padding:10px 22px;

    border-radius:25px;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.3s;


}



.quote-edit-btn{


    background:#dff2e8;

    color:#14543f;


}


.quote-edit-btn:hover{


    background:#14543f;

    color:white;


}



.quote-delete-btn{


    background:#ffe8e8;

    color:#c0392b;


}



.quote-delete-btn:hover{


    background:#c0392b;

    color:white;


}






/* EMPTY */


.admin-dashboard-empty{


    text-align:center;

    padding:70px;


}



.admin-dashboard-empty span{

    font-size:50px;

}



.admin-dashboard-empty p{

    color:#89958f;

}







/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:900px){


.admin-dashboard-welcome{


    padding:25px;


}



.admin-dashboard-welcome h1{


    font-size:30px;


}



.admin-dashboard-add-card{


    flex-direction:column;

    align-items:flex-start;


}



.admin-dashboard-add-button{


    width:100%;

    text-align:center;


}




.admin-dashboard-list-item{


    flex-direction:column;

    align-items:flex-start;


}



.quote-management-actions{


    width:100%;


}



.quote-edit-btn,
.quote-delete-btn{


    flex:1;

    text-align:center;


}



}






@media(max-width:600px){


.admin-dashboard-content{


    padding:20px;


}



.admin-dashboard-list-card{


    padding:20px;


}



.admin-dashboard-list-item{


    padding:20px;


}



.admin-dashboard-list-content strong{


    font-size:16px;


}



}

/* =====================================================
   SCREENING RESULTS RESPONSIVE
===================================================== */


/* Tablet */

@media (max-width: 1100px){


.admin-dashboard-content{
    padding:25px;
}


.admin-student-stat-grid{

    grid-template-columns:repeat(2,1fr);

}



.admin-dashboard-quick-grid{

    grid-template-columns:1fr;

}



.admin-screening-filter-form{

    grid-template-columns:repeat(2,1fr);

}



}



/* =====================================================
   MOBILE SIDEBAR
===================================================== */


@media (max-width: 991px){


.admin-dashboard-layout{

    display:block;

}



/* sidebar hidden */

.admin-sidebar{

    position:fixed;

    left:-300px;

    top:0;

    width:280px;

    height:100vh;

    z-index:2000;

    transition:.3s ease;

}



.admin-sidebar.show{

    left:0;

}



/* overlay */

.admin-sidebar-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    z-index:1500;

    display:none;

}



.admin-sidebar-overlay.show{

    display:block;

}





.admin-dashboard-main{

    width:100%;

}





.admin-menu-button{

    display:flex;

    align-items:center;

    justify-content:center;

}





.admin-topbar{

    padding:15px 20px;

}



.admin-topbar-title span{

    display:none;

}



.admin-topbar-title strong{

    font-size:16px;

}



.admin-topbar-user{

    display:none;

}




.admin-topbar-account{

    gap:10px;

}



.admin-topbar-logout{

    padding:8px 14px;

    font-size:13px;

}





/* Header */

.admin-page-header{

    flex-direction:column;

    gap:20px;

}



.admin-page-header h1{

    font-size:28px;

}





/* Cards */

.admin-student-stat-grid{

    grid-template-columns:1fr;

}



.admin-dashboard-quick-grid{

    grid-template-columns:1fr;

}




/* Filter */


.admin-screening-filter-form,
.admin-filter-form{

    grid-template-columns:1fr;

}





/* Tables */


.admin-table-card{

    overflow-x:auto;

}



.admin-screening-results-table{

    min-width:900px;

}





.table-responsive{

    overflow-x:auto;

}




}





/* =====================================================
   SMALL PHONE
===================================================== */


@media(max-width:576px){



.admin-dashboard-content{

    padding:15px;

}



.admin-topbar{

    padding:12px 15px;

}



.admin-topbar-avatar{

    width:35px;

    height:35px;

    font-size:14px;

}



.admin-topbar-logout{

    font-size:12px;

    padding:7px 10px;

}



.admin-page-header h1{

    font-size:24px;

}



.admin-page-header p{

    font-size:14px;

}




.admin-student-stat-card{

    padding:18px;

}




.admin-dashboard-quick-card{

    padding:18px;

}



.admin-screening-summary-card{

    padding:20px;

}




.admin-filter-card{

    padding:15px;

}




.admin-action-view{

    font-size:12px;

    padding:7px 12px;

}




/* PHQ table */

.admin-screening-results-table{

    min-width:750px;

}




}

/* =====================================================
   ADMIN TABLE HORIZONTAL SCROLL
===================================================== */


.admin-table-card{

    width:100%;

    overflow-x:auto;

}


.admin-table-card .table-responsive{

    overflow-x:auto;

}



.admin-students-table{

    min-width:1200px;

    width:max-content;

}


/* Pastikan status tak pecah */

.admin-students-table td,
.admin-students-table th{

    white-space:nowrap;

}

/* =====================================================
   SMALL RECENT CARDS
===================================================== */

.admin-dashboard-two-column{
    gap:20px;
}


.admin-dashboard-two-column 
.admin-dashboard-section{
    margin-bottom:0;
}


/* Card container */

.admin-dashboard-list-card{

    padding:12px;

    border-radius:18px;

}


/* Each row */

.admin-dashboard-list-item,
.admin-dashboard-appointment-item{

    padding:10px 12px;

    min-height:auto;

}


/* Avatar kecil */

.admin-dashboard-list-avatar{

    width:36px;

    height:36px;

    font-size:14px;

}


/* Text kecil */

.admin-dashboard-list-content strong{

    font-size:13px;

}


.admin-dashboard-list-content small{

    font-size:11px;

}


/* Tarikh */

.admin-dashboard-list-date{

    font-size:11px;

}


/* Appointment icon */

.admin-dashboard-appointment-icon{

    width:32px;

    height:32px;

    font-size:14px;

}


/* Status badge kecil */

.admin-dashboard-status{

    font-size:10px;

    padding:4px 8px;

}

/* =====================================================
   SUPER ADMIN COMPACT MODE
===================================================== */


/* GLOBAL */

.sa-dashboard-body{
    font-size:14px;
}


.sa-dashboard-container{

    max-width:1200px;

    margin:auto;

}


/* TOPBAR */

.sa-dashboard-topbar{

    padding:14px 20px;

}


.sa-dashboard-logo{

    font-size:16px;

}


.sa-dashboard-account{

    font-size:12px;

}


.sa-dashboard-account-icon{

    width:36px;

    height:36px;

    font-size:14px;

}



/* =====================================================
   HERO SMALL
===================================================== */


.sa-dashboard-hero{

    padding:25px 30px;

    border-radius:20px;

}


.sa-dashboard-hero h1{

    font-size:28px;

}


.sa-dashboard-hero p{

    font-size:13px;

}


.sa-dashboard-hero-graphic{

    font-size:45px;

}



/* =====================================================
   STAT CARD SMALL
===================================================== */


.sa-dashboard-stats{

    gap:15px;

}


.sa-dashboard-stat-card{

    padding:18px;

    border-radius:16px;

}


.sa-dashboard-stat-icon{

    width:42px;

    height:42px;

    font-size:20px;

}


.sa-dashboard-stat-card span{

    font-size:12px;

}


.sa-dashboard-stat-card strong{

    font-size:24px;

}



/* =====================================================
   MANAGEMENT MENU
===================================================== */


.sa-dashboard-section-heading h2{

    font-size:22px;

}


.sa-dashboard-section-heading span{

    font-size:11px;

}



.sa-dashboard-menu-grid{

    gap:15px;

}


.sa-dashboard-menu-card{

    padding:18px;

    border-radius:16px;

}


.sa-dashboard-menu-icon{

    width:42px;

    height:42px;

    font-size:20px;

}


.sa-dashboard-menu-card h3{

    font-size:15px;

}


.sa-dashboard-menu-card p{

    font-size:12px;

}



/* =====================================================
   TABLE COMPACT
===================================================== */


.sa-dashboard-table-card{

    padding:10px;

    border-radius:16px;

}


.sa-dashboard-table-card table{

    font-size:12px;

}


.sa-dashboard-table-card th{

    font-size:11px;

    padding:10px;

}


.sa-dashboard-table-card td{

    padding:10px;

}


.sa-dashboard-table-card small{

    font-size:10px;

}



/* =====================================================
   SECTION SPACING
===================================================== */


.sa-dashboard-management{

    margin-top:25px;

}


.sa-dashboard-section-heading{

    margin-bottom:12px;

}



/* FOOTER */

.home-main-footer{

    font-size:12px;

}

/* =====================================================
   SUPER ADMIN USERS - COMPACT RESPONSIVE MODE
===================================================== */


/* GLOBAL */

.sa-users-body{

    font-size:14px;

}


.sa-users-container{

    max-width:1200px;

    margin:auto;

    padding:20px;

}



/* =====================================================
   TOPBAR
===================================================== */


.sa-users-topbar{

    padding:12px 18px;

}


.sa-users-logo{

    font-size:18px;

    font-weight:700;

}


.sa-users-dashboard-btn{

    font-size:13px;

    padding:8px 14px;

}





/* =====================================================
   HEADER
===================================================== */


.sa-users-header{

    padding:25px;

    border-radius:20px;

}


.sa-users-header-label{

    font-size:11px;

}


.sa-users-header h1{

    font-size:30px;

}


.sa-users-header p{

    font-size:13px;

}


.sa-users-header-icon{

    font-size:45px;

}





/* =====================================================
   TOOLBAR
===================================================== */


.sa-users-toolbar{

    padding:15px 20px;

    gap:15px;

}


.sa-users-toolbar h2{

    font-size:20px;

}


.sa-users-toolbar p{

    font-size:12px;

}



.sa-users-search-box{

    height:40px;

}


.sa-users-search-box input{

    font-size:13px;

}


.sa-users-search-btn,
.sa-users-clear-btn{

    padding:9px 15px;

    font-size:12px;

}





/* =====================================================
   ALERT
===================================================== */


.sa-users-alert{

    padding:12px 16px;

    font-size:13px;

}





/* =====================================================
   TABLE CARD
===================================================== */


.sa-users-table-card{

    padding:12px;

    border-radius:18px;

}


.sa-users-table-wrapper{

    overflow-x:auto;

}





/* TABLE */

.sa-users-table{

    min-width:950px;

    font-size:12px;

}



.sa-users-table th{

    font-size:11px;

    padding:12px;

}


.sa-users-table td{

    padding:12px;

}





/* =====================================================
   USER CELL
===================================================== */


.sa-users-avatar{

    width:36px;

    height:36px;

    font-size:14px;

}


.sa-users-user-cell strong{

    font-size:13px;

}


.sa-users-user-cell small{

    font-size:10px;

}





/* CONTACT */


.sa-users-contact-cell span{

    font-size:12px;

}


.sa-users-contact-cell small{

    font-size:10px;

}





/* CATEGORY */


.sa-users-category-badge{

    font-size:10px;

    padding:4px 8px;

}





/* ADVISOR */


.sa-users-advisor{

    font-size:12px;

}


.sa-users-unassigned{

    font-size:11px;

}





/* ACTION BUTTON */


.sa-users-actions{

    display:flex;

    gap:6px;

}



.sa-users-edit-btn,
.sa-users-delete-btn{

    font-size:11px;

    padding:6px 10px;

}





/* EMPTY STATE */


.sa-users-empty{

    padding:40px 20px;

}


.sa-users-empty-icon{

    font-size:35px;

}


.sa-users-empty h3{

    font-size:18px;

}


.sa-users-empty p{

    font-size:13px;

}





/* =====================================================
   TABLET
===================================================== */


@media(max-width:992px){


.sa-users-container{

    padding:15px;

}



.sa-users-header{

    padding:20px;

}



.sa-users-header h1{

    font-size:26px;

}



.sa-users-toolbar{

    flex-direction:column;

    align-items:stretch;

}



.sa-users-search-form{

    width:100%;

}



}




/* =====================================================
   MOBILE
===================================================== */


@media(max-width:576px){



.sa-users-container{

    padding:10px;

}



.sa-users-topbar{

    flex-direction:column;

    gap:10px;

}



.sa-users-header{

    text-align:center;

}



.sa-users-header-icon{

    margin-top:15px;

}



.sa-users-header h1{

    font-size:22px;

}



.sa-users-header p{

    font-size:12px;

}



.sa-users-toolbar h2{

    font-size:18px;

}



.sa-users-search-form{

    display:flex;

    flex-direction:column;

}



.sa-users-search-btn,
.sa-users-clear-btn{

    width:100%;

    text-align:center;

}



.sa-users-table-card{

    padding:8px;

}



}

/* =====================================================
   SUPER ADMIN EDIT USER - COMPACT DESIGN
===================================================== */


.sa-edit-user-page {

    font-family: 'Poppins', sans-serif;

    transform: scale(0.92);

    transform-origin: top center;

}


.sa-edit-user-container {

    max-width: 1050px;

    margin: 0 auto;

}




/* TOP BAR */

.sa-edit-user-topbar {

    padding: 18px 25px;

}


.sa-edit-user-logo {

    font-size: 20px;

    font-weight:700;

}


.sa-edit-user-back-btn {

    font-size:13px;

    padding:8px 18px;

    border-radius:20px;

    transition:.3s ease;

}


/* hover back button */

.sa-edit-user-back-btn:hover {

    transform:translateY(-2px);

    opacity:.8;

}





/* HERO */

.sa-edit-user-hero {

    padding:25px 30px;

    border-radius:20px;

}


.sa-edit-user-label {

    font-size:11px;

}


.sa-edit-user-hero h1 {

    font-size:32px;

    margin:8px 0;

}


.sa-edit-user-hero p {

    font-size:14px;

}



.sa-edit-user-icon {

    font-size:55px;

}







/* FORM CARD */


.sa-edit-user-card {

    margin-top:25px;

    padding:30px;

    border-radius:20px;

}





.sa-edit-user-heading h2 {

    font-size:20px;

}


.sa-edit-user-heading p {

    font-size:13px;

}





.sa-edit-user-avatar {

    width:55px;

    height:55px;

    font-size:22px;

}





/* FORM */


.sa-edit-user-grid {

    gap:18px;

}



.sa-edit-user-field label {

    font-size:13px;

    margin-bottom:6px;

}




.sa-edit-user-field input,
.sa-edit-user-field select {


    height:42px;

    padding:8px 14px;

    font-size:13px;

    border-radius:10px;

}





.sa-edit-user-field small {

    font-size:11px;

}





/* BUTTON AREA */


.sa-edit-user-actions {

    margin-top:25px;

    gap:15px;

}



.sa-edit-user-cancel,
.sa-edit-user-save {


    padding:10px 25px;

    font-size:13px;

    border-radius:25px;

    transition:.3s ease;

}





/* SAVE BUTTON HOVER */

.sa-edit-user-save:hover {


    transform:translateY(-3px);

    box-shadow:
    0 8px 18px rgba(0,0,0,.15);

}





/* CANCEL BUTTON HOVER */


.sa-edit-user-cancel:hover {

    transform:translateY(-3px);

    background:#f3f4f6;

}





/* INPUT HOVER */


.sa-edit-user-field input:hover,
.sa-edit-user-field select:hover {

    border-color:#7c3aed;

}





.sa-edit-user-field input:focus,
.sa-edit-user-field select:focus {


    outline:none;

    border-color:#7c3aed;

    box-shadow:
    0 0 0 3px rgba(124,58,237,.15);

}





/* FOOTER */

.sa-edit-user-small-footer {

    font-size:12px;

}




/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:768px){


.sa-edit-user-page {

    transform:none;

}


.sa-edit-user-container {

    width:95%;

}


.sa-edit-user-hero {

    flex-direction:column;

    text-align:center;

}


.sa-edit-user-hero h1 {

    font-size:26px;

}



.sa-edit-user-card {

    padding:20px;

}



.sa-edit-user-grid {

    grid-template-columns:1fr !important;

}


.sa-edit-user-actions {

    flex-direction:column;

}



.sa-edit-user-save,
.sa-edit-user-cancel {

    width:100%;

    text-align:center;

}


}

/* =====================================================
   SUPER ADMIN DASHBOARD RESPONSIVE
===================================================== */


/* TABLET */
@media (max-width: 1100px){


.sa-dashboard-container{

    width:94%;

}



.sa-dashboard-topbar{

    flex-wrap:wrap;

    gap:20px;

}



.sa-dashboard-top-actions{

    width:100%;

    justify-content:space-between;

}



.sa-dashboard-stats{

    grid-template-columns:
    repeat(2,1fr);

}



.sa-dashboard-menu-grid{

    grid-template-columns:
    repeat(2,1fr);

}



.sa-dashboard-hero{

    padding:35px;

}



.sa-dashboard-hero h1{

    font-size:34px;

}



.sa-dashboard-hero-graphic{

    font-size:80px;

}


}




/* MOBILE LARGE */
@media (max-width:768px){



body.sa-dashboard-body{

    overflow-x:hidden;

}



.sa-dashboard-page{

    padding:20px 0;

}




.sa-dashboard-container{

    width:92%;

}




/* TOP NAV */


.sa-dashboard-topbar{

    flex-direction:column;

    align-items:flex-start;

    padding:20px;

    border-radius:20px;

}



.sa-dashboard-logo{

    font-size:20px;

}



.sa-dashboard-top-actions{

    flex-direction:column;

    align-items:stretch;

    width:100%;

    gap:15px;

}



.sa-dashboard-system-status{

    display:flex;

    flex-direction:column;

    gap:10px;

}



.sa-dashboard-account{

    width:100%;

}



.sa-dashboard-logout-btn{

    width:100%;

    text-align:center;

}





/* HERO */


.sa-dashboard-hero{

    flex-direction:column;

    text-align:center;

    padding:30px 20px;

    border-radius:25px;

}



.sa-dashboard-hero h1{

    font-size:28px;

}



.sa-dashboard-hero p{

    font-size:14px;

}



.sa-dashboard-hero-graphic{

    margin-top:20px;

    font-size:70px;

}





/* STATISTICS */


.sa-dashboard-stats{

    grid-template-columns:1fr;

    gap:15px;

}



.sa-dashboard-stat-card{

    padding:20px;

}



.sa-dashboard-stat-icon{

    font-size:35px;

}



.sa-dashboard-stat-card strong{

    font-size:28px;

}




/* SECTION TITLE */


.sa-dashboard-section-heading h2{

    font-size:24px;

}



.sa-dashboard-section-heading p{

    font-size:14px;

}




/* MENU */


.sa-dashboard-menu-grid{

    grid-template-columns:1fr;

    gap:15px;

}



.sa-dashboard-menu-card{

    padding:20px;

}



.sa-dashboard-menu-icon{

    font-size:35px;

}





/* TABLE RESPONSIVE */


.sa-dashboard-table-card{

    overflow-x:auto;

    border-radius:20px;

}



.sa-dashboard-table-card table{

    min-width:700px;

}



.sa-dashboard-table-card th,

.sa-dashboard-table-card td{

    white-space:nowrap;

    font-size:13px;

}



}





/* SMALL PHONE */
@media(max-width:480px){



.sa-dashboard-container{

    width:95%;

}



.sa-dashboard-logo{

    font-size:18px;

}



.sa-dashboard-hero h1{

    font-size:24px;

}



.sa-dashboard-stat-card{

    flex-direction:column;

    text-align:center;

}



.sa-dashboard-stat-card strong{

    font-size:25px;

}



.sa-dashboard-menu-card h3{

    font-size:18px;

}



.sa-dashboard-menu-card p{

    font-size:13px;

}



.home-footer-container{

    flex-direction:column;

    text-align:center;

}



}

/* =====================================================
   MOBILE TABLE HORIZONTAL SCROLL
===================================================== */

.sa-dashboard-table-card{

    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;

}


.sa-dashboard-table-card table{

    min-width:900px;
    width:100%;
    border-collapse:collapse;

}



/* scrollbar cantik */

.sa-dashboard-table-card::-webkit-scrollbar{

    height:8px;

}


.sa-dashboard-table-card::-webkit-scrollbar-track{

    background:#e8eee9;
    border-radius:20px;

}


.sa-dashboard-table-card::-webkit-scrollbar-thumb{

    background:#245c45;
    border-radius:20px;

}



/* mobile */

@media(max-width:768px){


.sa-dashboard-table-card{

    padding-bottom:10px;

}


.sa-dashboard-table-card table{

    min-width:850px;

}


.sa-dashboard-table-card th,
.sa-dashboard-table-card td{

    white-space:nowrap;

    padding:15px;

}


}

/* =====================================================
   BIGGER FLOATING CARDS - HERO SECTION
====================================================== */

.home-floating-card {

    width: 280px;
    min-height: 90px;

    padding: 22px 28px;

    background: rgba(255,255,255,0.85);

    backdrop-filter: blur(12px);

    border-radius: 24px;

    display: flex;

    align-items: center;

    gap: 18px;

    box-shadow:
        0 20px 45px rgba(20,70,40,0.12);

    border: 1px solid rgba(255,255,255,0.6);

    position: absolute;

    animation: floatingCard 4s ease-in-out infinite;

}


/* icon */

.home-floating-card-icon {

    width: 55px;

    height: 55px;

    border-radius: 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size: 30px;

    background: #eef7ee;

    flex-shrink:0;

}



/* text */

.home-floating-card-content strong {

    display:block;

    font-size:18px;

    font-weight:600;

    color:#173d2a;

    line-height:1.3;

}



.home-floating-card-content small {

    display:block;

    margin-top:6px;

    font-size:13px;

    color:#66756d;

}



/* Position */

.home-floating-card-one {

    top: 110px;

    left: -40px;

}



.home-floating-card-two {

    top: 40px;

    right: -20px;

}



.home-floating-card-three {

    bottom: 90px;

    right: -30px;

}



/* Floating animation */

@keyframes floatingCard {

    0% {

        transform: translateY(0px);

    }


    50% {

        transform: translateY(-12px);

    }


    100% {

        transform: translateY(0px);

    }

}




/* =====================================================
   MOBILE RESPONSIVE
====================================================== */

@media(max-width:768px){


    .home-floating-card {

        width:230px;

        min-height:75px;

        padding:16px 20px;

    }


    .home-floating-card-icon {

        width:45px;

        height:45px;

        font-size:24px;

    }


    .home-floating-card-content strong {

        font-size:15px;

    }


    .home-floating-card-content small {

        font-size:11px;

    }


    .home-floating-card-one {

        left:-10px;

        top:80px;

    }


    .home-floating-card-two {

        right:-10px;

        top:20px;

    }


    .home-floating-card-three {

        right:-10px;

        bottom:60px;

    }

}

.inv-select-start-btn:disabled {

    background: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
    opacity: 0.8;

}

.inv-select-status-disabled {

    background: #f1f1f1;
    color: #888;
    border: 1px solid #ddd;

}

/* =========================================================
   RESPONSIVE FLOATING CARDS
   ========================================================= */

/* Desktop */
.home-hero-visual-column {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-hero-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 560px;
    min-height: 520px;
    margin: 0 auto;
}


/* ---------------------------------------------------------
   Floating Card Base
   --------------------------------------------------------- */

.home-floating-card {
    position: absolute;

    display: flex;
    align-items: center;
    gap: 12px;

    width: 240px;
    min-height: 78px;

    padding: 14px 18px;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(30, 73, 55, 0.08);

    border-radius: 18px;

    box-shadow:
        0 15px 40px rgba(20, 55, 40, 0.12);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    z-index: 5;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* Hover */

.home-floating-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 45px rgba(20, 55, 40, 0.18);
}


/* Icon */

.home-floating-card-icon {
    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #e7f1eb;

    font-size: 22px;
}


/* Text */

.home-floating-card-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.home-floating-card-content strong {
    display: block;

    color: #173f2d;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.3;
}


.home-floating-card-content small {
    display: block;

    color: #718278;

    font-size: 11px;
    font-weight: 400;

    line-height: 1.4;
}


/* ---------------------------------------------------------
   Card Positions - Desktop
   --------------------------------------------------------- */

.home-floating-card-one {

    top: 70px;
    left: 0;

    animation:
        homeFloatOne 5s ease-in-out infinite;
}


.home-floating-card-two {

    top: 215px;
    right: -10px;

    animation:
        homeFloatTwo 6s ease-in-out infinite;
}


.home-floating-card-three {

    bottom: 65px;
    left: 45px;

    animation:
        homeFloatThree 5.5s ease-in-out infinite;
}


/* ---------------------------------------------------------
   Floating Animations
   --------------------------------------------------------- */

@keyframes homeFloatOne {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}


@keyframes homeFloatTwo {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(12px);
    }

}


@keyframes homeFloatThree {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* =========================================================
   LAPTOP / TABLET
   ========================================================= */

@media (max-width: 1199px) {

    .home-hero-visual-column {
        min-height: 500px;
    }


    .home-hero-image-wrapper {
        max-width: 500px;
        min-height: 470px;
    }


    .home-floating-card {
        width: 220px;
        min-height: 72px;

        padding: 12px 15px;
    }


    .home-floating-card-one {
        left: 0;
        top: 60px;
    }


    .home-floating-card-two {
        right: 0;
        top: 195px;
    }


    .home-floating-card-three {
        left: 25px;
        bottom: 45px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    /*
     * Hero becomes stacked.
     */

    .home-hero-section {
        overflow: hidden;
    }


    .home-hero-visual-column {

        min-height: 460px;

        margin-top: 20px;

        padding: 20px 15px 40px;
    }


    .home-hero-image-wrapper {

        width: 100%;
        max-width: 500px;

        min-height: 420px;

        margin: 0 auto;
    }


    .home-floating-card {

        width: 215px;

        min-height: 70px;

        border-radius: 16px;

        padding: 11px 14px;
    }


    .home-floating-card-icon {

        width: 42px;
        height: 42px;

        flex-basis: 42px;

        font-size: 20px;
    }


    .home-floating-card-content strong {
        font-size: 13px;
    }


    .home-floating-card-content small {
        font-size: 10px;
    }


    .home-floating-card-one {

        top: 35px;
        left: 0;
    }


    .home-floating-card-two {

        top: 170px;
        right: 0;
    }


    .home-floating-card-three {

        bottom: 25px;
        left: 35px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .home-hero-visual-column {

        min-height: auto;

        padding: 20px 15px 45px;

        margin-top: 10px;
    }


    /*
     * IMPORTANT:
     * Instead of absolute positioning,
     * cards become normal responsive elements.
     */

    .home-hero-image-wrapper {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 14px;

        width: 100%;

        max-width: 420px;

        min-height: auto;

        margin: 0 auto;
    }


    .home-floating-card {

        position: relative;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: min(100%, 360px);

        min-height: 72px;

        margin: 0 auto;

        animation: none;

        transform: none !important;
    }


    .home-floating-card:hover {

        transform: translateY(-3px) !important;

    }


    .home-floating-card-icon {

        width: 44px;
        height: 44px;

        flex-basis: 44px;

        font-size: 20px;
    }


    .home-floating-card-content strong {

        font-size: 13px;

    }


    .home-floating-card-content small {

        font-size: 11px;

    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .home-hero-visual-column {

        padding-left: 10px;
        padding-right: 10px;

    }


    .home-hero-image-wrapper {

        width: 100%;

        gap: 12px;

    }


    .home-floating-card {

        width: 100%;

        max-width: 340px;

        min-height: 68px;

        padding: 11px 13px;

        border-radius: 15px;

    }


    .home-floating-card-icon {

        width: 40px;
        height: 40px;

        flex-basis: 40px;

        border-radius: 12px;

        font-size: 18px;

    }


    .home-floating-card-content {

        gap: 2px;

    }


    .home-floating-card-content strong {

        font-size: 12px;

    }


    .home-floating-card-content small {

        font-size: 10px;

    }

}


/* =========================================================
   EXTRA SMALL DEVICES
   ========================================================= */

@media (max-width: 360px) {

    .home-floating-card {

        max-width: 310px;

    }


    .home-floating-card-icon {

        width: 36px;
        height: 36px;

        flex-basis: 36px;

        font-size: 16px;

    }


    .home-floating-card-content strong {

        font-size: 11px;

    }


    .home-floating-card-content small {

        font-size: 9px;

    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .home-floating-card-one,
    .home-floating-card-two,
    .home-floating-card-three {

        animation: none;

    }

}

@media(max-width:767px){

    .sa-users-table-wrapper {
        overflow-x:hidden;
    }


    .sa-users-table {
        min-width:100%;
        display:block;
    }


    .sa-users-table thead {
        display:none;
    }


    .sa-users-table tbody {
        display:block;
    }


    .sa-users-table tr {

        display:block;

        background:white;

        margin-bottom:15px;

        border-radius:20px;

        padding:15px;

        box-shadow:0 5px 20px rgba(0,0,0,.05);

    }


    .sa-users-table td {

        display:flex;

        justify-content:space-between;

        align-items:center;

        padding:10px 5px;

        border:none;

    }


    .sa-users-table td::before {

        font-weight:600;

        color:#155c4a;

        font-size:13px;

    }


    .sa-users-table td:nth-child(1)::before {
        content:"User";
    }


    .sa-users-table td:nth-child(2)::before {
        content:"IC Number";
    }


    .sa-users-table td:nth-child(3)::before {
        content:"Contact";
    }


    .sa-users-table td:nth-child(4)::before {
        content:"Category";
    }


    .sa-users-table td:nth-child(5)::before {
        content:"Course";
    }


    .sa-users-table td:nth-child(6)::before {
        content:"Advisor";
    }


    .sa-users-table td:nth-child(7)::before {
        content:"Action";
    }

}

@media(max-width:767px){

.sa-users-header {

    padding:25px;

}


.sa-users-header h1 {

    font-size:28px;

}


.sa-users-header p {

    font-size:14px;

}


.sa-users-header-icon {

    font-size:45px;

}

}

.sa-users-search-box {
    width:100%;
}


.sa-users-search-box input {

    width:100%;

    min-width:0;

    box-sizing:border-box;

}

.home-logo {

    display:flex;

    align-items:center;

    gap:12px;

}


.home-logo-image {

    width:45px;

    height:45px;

    object-fit:contain;

}


.home-logo span {

    font-weight:700;

    letter-spacing:1px;

}

@media(max-width:576px){

    .home-logo-image {

        width:35px;

        height:35px;

    }


    .home-logo span {

        font-size:18px;

    }

}

.auth-logo {

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

}


.auth-logo img {

    width: 70px;

    height: 70px;

    object-fit: contain;

}


.auth-logo span {

    font-size:24px;

    font-weight:700;

    letter-spacing:1px;

}

@media(max-width:576px){

    .auth-logo-image {

        width:35px;

        height:35px;

    }


    .auth-logo span {

        font-size:20px;

    }

}

.student-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
}


.student-logo-image {

    width: 45px;
    height: 45px;

    object-fit: contain;

}

/* =====================================================
SUPER ADMIN USERS RESPONSIVE
===================================================== */


.sa-users-table-wrapper {

    width:100%;
    overflow-x:auto;

}


.sa-users-table {

    min-width:1100px;

}



/* SEARCH */

.sa-users-search-form {

    display:flex;
    gap:12px;
    align-items:center;

}


.sa-users-search-box {

    display:flex;
    align-items:center;

    background:white;

    border-radius:30px;

    padding:10px 18px;

    border:1px solid #ddd;

}


.sa-users-search-box input {

    border:none;

    outline:none;

    width:250px;

}




/* TABLE MOBILE */


@media(max-width:768px){


.sa-admins-container {

    padding:20px 15px;

}



.sa-admins-topbar {

    flex-direction:column;

    align-items:flex-start;

    gap:15px;

}



.sa-admins-header {

    padding:25px;

}



.sa-admins-header h1 {

    font-size:28px;

}



.sa-admins-action-bar {

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}



.sa-users-search-form {

    width:100%;

    flex-direction:column;

}



.sa-users-search-box {

    width:100%;

}



.sa-users-search-box input {

    width:100%;

}



.sa-users-search-form button,
.sa-users-clear-btn {

    width:100%;

    text-align:center;

}



}




@media(max-width:480px){


.sa-admins-header-icon {

    display:none;

}



.sa-admins-header h1 {

    font-size:24px;

}



.sa-users-table {

    min-width:950px;

}


}

/* SEARCH RESPONSIVE FIX */

.sa-users-search-form {

    display:flex;
    gap:12px;
    align-items:center;
    width:100%;

}


.sa-users-search-box {

    display:flex;
    align-items:center;

    background:white;

    border-radius:30px;

    padding:10px 18px;

    border:1px solid #ddd;

    flex:1;

    min-width:0;

}


.sa-users-search-box input {

    border:none;

    outline:none;

    width:100%;

    min-width:0;

    font-size:14px;

}

/* =====================================================
   EDIT USER MOBILE SIZE FIX
===================================================== */

@media (max-width:768px){


    .sa-edit-user-page {

        padding:20px 12px;

    }



    .sa-edit-user-container {

        width:100%;

    }



    /* TOP BAR */

    .sa-edit-user-topbar {

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

        margin-bottom:25px;

    }



    .sa-dashboard-logo {

        font-size:22px;

    }


    .sa-dashboard-logo-icon {

        width:45px;
        height:45px;

        font-size:26px;

    }



    .sa-edit-user-back-btn {

        width:100%;

        text-align:center;

        padding:14px;

        font-size:16px;

    }



    /* HERO */

    .sa-edit-user-hero {

        padding:30px 25px;

        min-height:220px;

        border-radius:28px;

    }



    .sa-edit-user-label {

        font-size:13px;

        padding:8px 18px;

    }



    .sa-edit-user-hero h1 {

        font-size:36px;

        line-height:1.2;

        margin-top:15px;

    }



    .sa-edit-user-hero p {

        font-size:16px;

        line-height:1.6;

    }



    .sa-edit-user-icon {

        display:none;

    }




    /* FORM CARD */


    .sa-edit-user-card {

        margin-top:25px;

        padding:28px 22px;

        border-radius:28px;

    }



    .sa-edit-user-heading {

        gap:15px;

    }



    .sa-edit-user-avatar {

        width:60px;

        height:60px;

        font-size:24px;

    }



    .sa-edit-user-heading h2 {

        font-size:24px;

    }



    .sa-edit-user-heading p {

        font-size:14px;

    }




    /* INPUT GRID */


    .sa-edit-user-grid {

        grid-template-columns:1fr;

        gap:20px;

    }



    .sa-edit-user-field label {

        font-size:15px;

        margin-bottom:8px;

    }



    .sa-edit-user-field input,
    .sa-edit-user-field select {

        width:100%;

        height:52px;

        font-size:16px;

        padding:0 16px;

        border-radius:14px;

    }



    .sa-edit-user-field small {

        font-size:13px;

    }




    /* BUTTONS */


    .sa-edit-user-actions {

        flex-direction:column;

        gap:14px;

        margin-top:25px;

    }



    .sa-edit-user-cancel,
    .sa-edit-user-save {

        width:100%;

        height:52px;

        font-size:16px;

        text-align:center;

    }


}

/* =====================================================
   EDIT USER MOBILE FINAL FIX
===================================================== */

@media (max-width:768px){


/* PAGE */

.sa-edit-user-page{

    padding:20px 20px;

}



/* TOP BAR */

.sa-edit-user-topbar{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:18px;

}



.sa-dashboard-logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:22px;

    white-space:nowrap;

}



.sa-dashboard-logo-icon{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

}



.sa-edit-user-back-btn{

    width:auto;

    padding:12px 25px;

    font-size:15px;

}




/* HERO */

.sa-edit-user-hero{

    margin-top:35px;

    padding:35px 25px;

    min-height:0;

    height:auto;

    text-align:center;

    border-radius:30px;

}



.sa-edit-user-hero h1{

    font-size:34px;

    margin:15px 0;

}



.sa-edit-user-hero p{

    font-size:16px;

    line-height:1.5;

}



.sa-edit-user-icon{

    display:flex;

    margin:25px auto 0;

    width:120px;

    height:120px;

    font-size:60px;

}



/* FORM CARD */

.sa-edit-user-card{

    margin-top:30px;

    padding:25px 20px;

    border-radius:28px;

}



/* HEADER */

.sa-edit-user-heading{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}



.sa-edit-user-avatar{

    width:70px;

    height:70px;

    font-size:28px;

}



.sa-edit-user-heading h2{

    font-size:28px;

    line-height:1.2;

}




/* INPUTS */

.sa-edit-user-grid{

    display:block;

}



.sa-edit-user-field{

    margin-bottom:20px;

}



.sa-edit-user-field input,
.sa-edit-user-field select{

    height:55px;

    font-size:16px;

    width:100%;

}



/* BUTTON */

.sa-edit-user-actions{

    display:flex;

    flex-direction:column;

}



.sa-edit-user-save,
.sa-edit-user-cancel{

    width:100%;

    height:55px;

    font-size:16px;

}



}

/* =====================================================
   DAILY QUOTES RESPONSIVE
===================================================== */


/* TABLET */
@media (max-width: 991px){

    .admin-dashboard-layout{
        display:block;
    }


    /* Sidebar hidden on mobile */
    .admin-sidebar{

        position:fixed;
        top:0;
        left:-280px;

        width:280px;
        height:100vh;

        z-index:9999;

        transition:.3s ease;

    }


    .admin-sidebar.show{

        left:0;

    }


    .admin-sidebar-overlay{

        display:none;

        position:fixed;

        inset:0;

        background:rgba(0,0,0,.45);

        z-index:9998;

    }


    .admin-sidebar-overlay.show{

        display:block;

    }



    .admin-dashboard-main{

        width:100%;

        margin-left:0;

    }


    .admin-topbar{

        padding:15px 20px;

    }


    .admin-menu-button{

        display:block;

    }


}



/* MOBILE */
@media (max-width:600px){


    .admin-topbar{

        flex-wrap:wrap;

        gap:15px;

    }



    .admin-topbar-title{

        order:2;

        width:100%;

    }



    .admin-topbar-title span{

        font-size:12px;

    }


    .admin-topbar-title strong{

        font-size:18px;

    }



    .admin-topbar-account{

        margin-left:auto;

    }



    .admin-topbar-user{

        display:none;

    }



    .admin-topbar-logout{

        padding:7px 15px;

        font-size:13px;

    }




    /* Main content */

    .admin-dashboard-content{

        padding:20px 15px;

    }



    .admin-dashboard-welcome{

        display:block;

    }



    .admin-dashboard-welcome h1{

        font-size:28px;

        line-height:1.3;

    }



    .admin-dashboard-welcome p{

        font-size:14px;

    }





    /* Add quote card */

    .admin-dashboard-add-card{

        margin-top:20px;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

        padding:20px;

    }



    .admin-dashboard-add-button{

        width:100%;

        text-align:center;

    }





    /* Quote list */

    .admin-dashboard-list-card{

        padding:10px;

    }



    .admin-dashboard-list-item{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

        padding:18px;

    }



    .admin-dashboard-list-avatar{

        width:45px;

        height:45px;

    }



    .admin-dashboard-list-content{

        width:100%;

    }



    .admin-dashboard-list-content strong{

        font-size:15px;

        line-height:1.5;

        display:block;

    }



    .admin-dashboard-list-content small{

        display:block;

        margin-top:5px;

        font-size:12px;

    }




    .quote-management-actions{

        width:100%;

        display:flex;

        gap:10px;

    }



    .quote-management-actions a{

        flex:1;

        text-align:center;

        padding:10px;

    }




    /* Footer */

    .home-footer-bottom{

        flex-direction:column;

        text-align:center;

        gap:15px;

    }


}

/* =====================================================
   FIX DAILY QUOTES MOBILE OVERFLOW
===================================================== */

@media(max-width:600px){


    body{
        overflow-x:hidden;
    }



    .admin-dashboard-layout,
    .admin-dashboard-main,
    .admin-dashboard-content{

        width:100%;
        max-width:100%;
        overflow-x:hidden;

    }




    /* Welcome section */

    .admin-dashboard-welcome{

        display:flex !important;

        flex-direction:column !important;

        gap:25px;

        width:100%;

    }



    .admin-dashboard-welcome > div{

        width:100%;

    }



    .admin-dashboard-welcome h1{

        font-size:34px;

        line-height:1.2;

        word-break:break-word;

    }



    .admin-dashboard-welcome p{

        font-size:16px;

        max-width:280px;

    }




    /* Add quote box */

    .admin-dashboard-add-card{

        width:100% !important;

        box-sizing:border-box;

        display:flex;

        flex-direction:column;

        padding:25px;

        margin:0;

    }



    .admin-dashboard-add-content{

        width:100%;

    }



    .admin-dashboard-add-content h3{

        font-size:22px;

    }



    .admin-dashboard-add-button{

        width:100%;

        display:block;

        text-align:center;

    }





    /* Quote section */

    .admin-dashboard-section{

        width:100%;

    }



    .admin-dashboard-heading{

        width:100%;

    }



    .admin-dashboard-list-card{

        width:100%;

    }




    .admin-dashboard-list-item{

        width:100%;

        box-sizing:border-box;

    }




    .quote-management-actions{

        display:flex;

        width:100%;

    }



    .quote-management-actions a{

        flex:1;

    }


}

.quote-success-alert{

    background:#e8f8ef;

    color:#116149;

    border:1px solid #b7e5ce;

    padding:16px 20px;

    border-radius:16px;

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    margin-bottom:25px;

    animation:quoteAlert 0.3s ease;

}


.quote-success-alert span{

    width:30px;

    height:30px;

    border-radius:50%;

    background:#116149;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

}




@keyframes quoteAlert{

from{

    opacity:0;

    transform:translateY(-10px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}

/* =====================================================
   SUPER ADMIN MANAGE USERS RESPONSIVE
===================================================== */


/* TABLE RESPONSIVE */
.sa-users-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


.sa-users-table {
    min-width: 1000px;
}



/* TOP BAR */
.sa-admins-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}



/* HEADER */
.sa-admins-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}


.sa-admins-header h1 {
    word-break: break-word;
}



/* SEARCH BAR */
.sa-admins-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:20px;
    flex-wrap:wrap;
}


.sa-users-search-form {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}


.sa-users-search-box {
    min-width:250px;
}




/* =====================================================
   TABLET
===================================================== */

@media(max-width:991px){


    .sa-admins-container {
        padding:20px;
    }


    .sa-admins-header {
        flex-direction:column;
        align-items:flex-start;
    }


    .sa-admins-header-icon {
        display:none;
    }


    .sa-admins-action-bar {
        flex-direction:column;
        align-items:stretch;
    }


    .sa-users-search-form {
        width:100%;
    }


    .sa-users-search-box {
        flex:1;
        width:100%;
    }


    .sa-users-search-box input {
        width:100%;
    }


    .sa-admins-add-btn,
    .sa-users-clear-btn {
        width:100%;
        text-align:center;
    }


}





/* =====================================================
   MOBILE
===================================================== */


@media(max-width:600px){



    .sa-admins-page {
        width:100%;
    }



    .sa-admins-container {
        padding:15px;
    }



    .sa-dashboard-logo {
        font-size:15px;
    }




    .sa-admins-topbar {

        flex-direction:column;
        align-items:flex-start;

    }




    .sa-admins-header h1 {

        font-size:28px;

    }



    .sa-admins-header p {

        font-size:14px;

    }




    .sa-admins-action-bar h2 {

        font-size:22px;

    }



    .sa-admins-action-bar p {

        font-size:14px;

    }





    .sa-users-search-form {

        flex-direction:column;

    }




    .sa-users-search-box {

        width:100%;

    }




    .sa-admins-table-card {

        border-radius:15px;

    }



    /* make table scroll nicely */

    .sa-users-table {

        min-width:850px;

    }




    .sa-admins-alert {

        font-size:14px;

    }



    .home-main-footer {

        text-align:center;

    }



}






/* =====================================================
   SMALL PHONE
===================================================== */

@media(max-width:400px){


    .sa-admins-header h1 {

        font-size:24px;

    }


    .sa-dashboard-logo-icon {

        width:35px;
        height:35px;

    }


    .sa-admins-empty h3 {

        font-size:18px;

    }


}

@media(max-width:600px){

.sa-users-table,
.sa-users-table thead,
.sa-users-table tbody,
.sa-users-table th,
.sa-users-table td,
.sa-users-table tr {

    display:block;

}


.sa-users-table thead {

    display:none;

}


.sa-users-table tr {

    background:white;
    margin-bottom:20px;
    padding:20px;
    border-radius:20px;

}



.sa-users-table td {

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:12px 0;
    border:none;
    text-align:right;

}



.sa-users-table td::before {

    content: attr(data-label);

    font-weight:600;

    color:#14532d;

    text-align:left;

}



.sa-users-table .sa-admins-user-cell {

    justify-content:flex-end;

}



.sa-users-table .sa-admins-actions {

    justify-content:flex-end;

}


}

@media screen and (max-width:600px){

.sa-admins-table-card{
    padding:0;
    background:transparent;
    box-shadow:none;
}


.sa-users-table-wrapper{
    overflow:visible;
}


.sa-users-table{
    display:block;
    width:100%;
}


.sa-users-table thead{
    display:none;
}


.sa-users-table tbody{
    display:block;
}


.sa-users-table tr{

    display:block;

    background:white;

    border-radius:28px;

    margin-bottom:25px;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,0.08);

}


.sa-users-table td{

    display:block;

    padding:12px 0;

    border:none;

    text-align:left;

}


.sa-users-table td::before{

    display:none;

}



/* USER SECTION */

.sa-admins-user-cell{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}


.sa-admins-avatar{

    width:55px;
    height:55px;

    border-radius:50%;

    flex-shrink:0;

}


/* CONTACT */

.sa-users-contact-cell{

    display:block;

}



/* BADGES */

.sa-admins-role-badge{

    display:inline-block;

}


/* ACTION BUTTON */

.sa-admins-actions{

    display:flex;

    gap:12px;

    margin-top:20px;

}


.sa-admins-edit-btn,
.sa-admins-delete-btn{

    flex:1;

    text-align:center;

    padding:12px;

    border-radius:30px;

}



}

@media (max-width:768px){

    .sa-users-table tr{
        display:block !important;
        padding:25px !important;
        overflow:hidden;
    }


    .sa-users-table td{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        text-align:left !important;
        padding:12px 0 !important;
    }


    /* FIX USER HEADER */
    .sa-admins-user-cell{

        display:flex !important;

        flex-direction:row !important;

        align-items:center !important;

        justify-content:flex-start !important;

        gap:15px;

        width:100%;

    }


    .sa-admins-user-cell strong{

        display:block;

        font-size:16px;

        color:#1c5945;

    }


    .sa-admins-user-cell small{

        display:block;

        margin-top:5px;

    }


    .sa-admins-avatar{

        width:55px !important;

        height:55px !important;

        display:flex;

        align-items:center;

        justify-content:center;

        flex-shrink:0;

    }



    /* FIX LONG EMAIL / PHONE */
    .sa-users-contact-cell strong,
    .sa-users-contact-cell small{

        word-break:break-word;

        display:block;

    }



    /* BUTTONS */
    .sa-admins-actions{

        display:flex !important;

        flex-direction:row !important;

        gap:10px;

    }


    .sa-admins-edit-btn,
    .sa-admins-delete-btn{

        width:50%;

        text-align:center;

    }


}

/* =====================================================
   SUPER ADMIN MANAGE USERS RESPONSIVE
===================================================== */


/* TABLE RESPONSIVE WRAPPER */
.sa-users-table-wrapper{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}


/* TABLE */
.sa-users-table{
    width:100%;
    min-width:1100px;
    border-collapse:collapse;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:991px){


.sa-admins-container{
    padding:20px;
}


/* TOP BAR */

.sa-admins-topbar{

    flex-direction:column;
    align-items:flex-start;
    gap:15px;

}


.sa-admins-dashboard-btn{

    width:100%;
    text-align:center;

}




/* HEADER */

.sa-admins-header{

    flex-direction:column;
    gap:20px;

}


.sa-admins-header-icon{

    align-self:flex-start;

}




/* ACTION BAR */

.sa-admins-action-bar{

    flex-direction:column;
    gap:20px;

}


.sa-users-search-form{

    width:100%;

}


.sa-users-search-box{

    width:100%;

}



.sa-users-search-box input{

    width:100%;

}


.sa-admins-add-btn{

    width:100%;

}



.sa-users-clear-btn{

    width:100%;
    text-align:center;

}



}





/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){



.sa-admins-page{

    padding:10px;

}



.sa-admins-container{

    padding:15px;

}



/* LOGO */

.sa-dashboard-logo span:last-child{

    font-size:14px;

}



/* HEADER */

.sa-admins-header h1{

    font-size:28px;

}


.sa-admins-header p{

    font-size:14px;

}




/* ACTION CARD */

.sa-admins-action-bar h2{

    font-size:20px;

}



.sa-admins-action-bar p{

    font-size:14px;

}





/* SEARCH */

.sa-users-search-form{

    display:flex;
    flex-direction:column;

}


.sa-users-search-box{

    height:45px;

}




/* TABLE CARD */

.sa-admins-table-card{

    border-radius:15px;

}




/*
Keep table scrollable
*/

.sa-users-table{

    min-width:950px;

}




/* FOOTER */

.sa-admins-footer{

    flex-direction:column;
    text-align:center;
    gap:10px;

}


.home-footer-container{

    flex-direction:column;
    text-align:center;
    gap:20px;

}


}
/* =====================================================
   MOBILE USER TABLE -> CARD VIEW
===================================================== */

@media(max-width:600px){


.sa-users-table,
.sa-users-table thead,
.sa-users-table tbody,
.sa-users-table th,
.sa-users-table td,
.sa-users-table tr{

    display:block;
    width:100%;

}


.sa-users-table thead{

    display:none;

}



.sa-users-table tr{

    background:white;
    border-radius:20px;
    margin-bottom:25px;
    padding:25px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);

}



.sa-users-table td{

    border:none;
    padding:12px 0;
    text-align:left;

}



/* USER */

.sa-admins-user-cell{

    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:20px;

}


.sa-admins-avatar{

    width:50px;
    height:50px;
    flex-shrink:0;

}




/* hide empty spacing */

.sa-users-table td:before{

    display:block;
    font-size:12px;
    font-weight:600;
    color:#17604c;
    margin-bottom:5px;

}



/* labels */

.sa-users-table td:nth-child(1):before{
    content:"User";
}


.sa-users-table td:nth-child(2):before{
    content:"IC Number";
}


.sa-users-table td:nth-child(3):before{
    content:"Contact";
}


.sa-users-table td:nth-child(4):before{
    content:"Category";
}


.sa-users-table td:nth-child(5):before{
    content:"Course";
}


.sa-users-table td:nth-child(6):before{
    content:"Advisor";
}


.sa-users-table td:nth-child(7):before{
    content:"Actions";
}



/* buttons */

.sa-admins-actions{

    display:flex;
    gap:10px;

}


.sa-admins-edit-btn,
.sa-admins-delete-btn{

    flex:1;
    text-align:center;

}


}

/* =========================================================
   POLY-HEALTH AI ASSISTANT
========================================================= */

.poly-ai-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    font-family: "Poppins", sans-serif;
}


/* =========================================================
   FLOATING BUTTON
========================================================= */

.poly-ai-floating-button {
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 12px 18px;

    border-radius: 999px;

    background: linear-gradient(
        135deg,
        #4f46e5,
        #7c3aed
    );

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 10px 30px rgba(79, 70, 229, 0.30);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.poly-ai-floating-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 35px rgba(79, 70, 229, 0.38);
}


.poly-ai-floating-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.18);

    font-size: 15px;
}


.poly-ai-floating-text {
    white-space: nowrap;
}


/* =========================================================
   CHAT WINDOW
========================================================= */

.poly-ai-chat {
    position: absolute;

    right: 0;
    bottom: 70px;

    width: 370px;
    height: 540px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid rgba(15, 23, 42, 0.08);

    border-radius: 22px;

    box-shadow:
        0 25px 70px rgba(15, 23, 42, 0.20);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(15px)
        scale(0.97);

    transform-origin: bottom right;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease;
}


.poly-ai-chat.active {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   HEADER
========================================================= */

.poly-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 18px;

    background: linear-gradient(
        135deg,
        #4f46e5,
        #7c3aed
    );

    color: #ffffff;
}


.poly-ai-header-info {
    display: flex;
    align-items: center;
    gap: 11px;
}


.poly-ai-avatar {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.18);

    font-size: 19px;
}


.poly-ai-header-info strong {
    display: block;

    font-size: 14px;
    font-weight: 600;
}


.poly-ai-header-info small {
    display: block;

    margin-top: 1px;

    font-size: 11px;

    color: rgba(255, 255, 255, 0.78);
}


.poly-ai-close {
    width: 34px;
    height: 34px;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.12);

    color: #ffffff;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
}


.poly-ai-close:hover {
    background: rgba(255, 255, 255, 0.22);
}


/* =========================================================
   MESSAGE AREA
========================================================= */

.poly-ai-messages {
    flex: 1;

    padding: 18px;

    overflow-y: auto;

    background: #f8fafc;
}


.poly-ai-message {
    display: flex;

    gap: 9px;

    margin-bottom: 14px;
}


.poly-ai-message-avatar {
    flex-shrink: 0;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #ede9fe;

    font-size: 13px;
}


.poly-ai-message-bubble {
    max-width: 82%;

    padding: 11px 13px;

    border-radius:
        5px
        15px
        15px
        15px;

    background: #ffffff;

    color: #334155;

    font-size: 12.5px;
    line-height: 1.65;

    box-shadow:
        0 2px 8px rgba(15, 23, 42, 0.06);
}


/* USER MESSAGE */

.poly-ai-message.user {
    justify-content: flex-end;
}


.poly-ai-message.user
.poly-ai-message-bubble {
    border-radius:
        15px
        5px
        15px
        15px;

    background: #4f46e5;

    color: #ffffff;
}


/* =========================================================
   SUGGESTIONS
========================================================= */

.poly-ai-suggestions {
    display: flex;

    gap: 6px;

    padding:
        10px
        12px
        4px;

    overflow-x: auto;

    background: #ffffff;
}


.poly-ai-suggestion {
    flex-shrink: 0;

    border:
        1px solid #ddd6fe;

    border-radius: 999px;

    padding: 6px 10px;

    background: #ffffff;

    color: #5b21b6;

    font-family: inherit;
    font-size: 10.5px;
    font-weight: 500;

    cursor: pointer;
}


.poly-ai-suggestion:hover {
    background: #f5f3ff;
}


/* =========================================================
   INPUT
========================================================= */

.poly-ai-input-area {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px 12px;

    background: #ffffff;

    border-top:
        1px solid #eef2f7;
}


.poly-ai-input-area input {
    flex: 1;

    min-width: 0;

    border:
        1px solid #e2e8f0;

    border-radius: 999px;

    padding: 10px 14px;

    outline: none;

    font-family: inherit;
    font-size: 12px;

    color: #1e293b;

    background: #f8fafc;
}


.poly-ai-input-area input:focus {
    border-color: #7c3aed;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(124, 58, 237, 0.08);
}


.poly-ai-send {
    flex-shrink: 0;

    width: 39px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: #4f46e5;

    color: #ffffff;

    cursor: pointer;
}


.poly-ai-send:hover {
    background: #4338ca;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.poly-ai-disclaimer {
    padding:
        0
        15px
        11px;

    background: #ffffff;

    color: #94a3b8;

    text-align: center;

    font-size: 8.5px;
    line-height: 1.4;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .poly-ai-widget {
        right: 14px;
        bottom: 14px;
    }


    .poly-ai-chat {
        position: fixed;

        left: 12px;
        right: 12px;

        bottom: 78px;

        width: auto;

        height: min(
            560px,
            calc(100vh - 105px)
        );
    }


    .poly-ai-floating-button {
        margin-left: auto;
    }

}

/* =========================================================
   POLY-HEALTH AI — SYSTEM COLOUR THEME
========================================================= */

.poly-ai-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    font-family: "Poppins", sans-serif;
}


/* FLOATING ASK AI BUTTON */

.poly-ai-floating-button {
    border: none;
    outline: none;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 12px 18px;

    border-radius: 999px;

    /* Match POLY-HEALTH green */
    background: linear-gradient(
        135deg,
        #183d24,
        #3f633d
    );

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 10px 28px rgba(24, 61, 36, 0.28);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.poly-ai-floating-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 32px rgba(24, 61, 36, 0.36);
}


.poly-ai-floating-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.15);

    font-size: 15px;
}


.poly-ai-floating-text {
    white-space: nowrap;
}


/* =========================================================
   CHAT WINDOW
========================================================= */

.poly-ai-chat {
    position: absolute;

    right: 0;
    bottom: 70px;

    width: 370px;
    height: 540px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dfe8df;

    border-radius: 22px;

    box-shadow:
        0 25px 65px rgba(20, 50, 30, 0.18);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(15px)
        scale(0.97);

    transform-origin: bottom right;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease;
}


.poly-ai-chat.active {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   AI HEADER
========================================================= */

.poly-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 18px;

    /* Same family as dashboard welcome banner */
    background: linear-gradient(
        135deg,
        #183d24,
        #526842
    );

    color: #ffffff;
}


.poly-ai-header-info {
    display: flex;
    align-items: center;
    gap: 11px;
}


.poly-ai-avatar {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.14);

    font-size: 19px;
}


.poly-ai-header-info strong {
    display: block;

    font-size: 14px;
    font-weight: 600;
}


.poly-ai-header-info small {
    display: block;

    margin-top: 2px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 11px;
}


.poly-ai-close {
    width: 34px;
    height: 34px;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.10);

    color: #ffffff;

    font-size: 22px;

    cursor: pointer;

    transition: background 0.2s ease;
}


.poly-ai-close:hover {
    background: rgba(255, 255, 255, 0.20);
}


/* =========================================================
   MESSAGE AREA
========================================================= */

.poly-ai-messages {
    flex: 1;

    padding: 18px;

    overflow-y: auto;

    /* Very light sage */
    background: #f5f8f4;
}


.poly-ai-message {
    display: flex;
    gap: 9px;

    margin-bottom: 14px;
}


.poly-ai-message-avatar {
    flex-shrink: 0;

    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #e2ece0;

    color: #23452c;

    font-size: 13px;
}


.poly-ai-message-bubble {
    max-width: 82%;

    padding: 11px 13px;

    border-radius:
        5px
        15px
        15px
        15px;

    background: #ffffff;

    color: #35423a;

    font-size: 12.5px;
    line-height: 1.65;

    border: 1px solid #e7ede5;

    box-shadow:
        0 2px 8px rgba(24, 61, 36, 0.05);
}


/* USER MESSAGE */

.poly-ai-message.user {
    justify-content: flex-end;
}


.poly-ai-message.user
.poly-ai-message-bubble {
    border: none;

    border-radius:
        15px
        5px
        15px
        15px;

    background: #31563a;

    color: #ffffff;
}


/* =========================================================
   QUICK SUGGESTIONS
========================================================= */

.poly-ai-suggestions {
    display: flex;
    gap: 6px;

    padding:
        10px
        12px
        5px;

    overflow-x: auto;

    background: #ffffff;
}


.poly-ai-suggestion {
    flex-shrink: 0;

    border: 1px solid #cbdac9;

    border-radius: 999px;

    padding: 6px 10px;

    background: #ffffff;

    color: #31563a;

    font-family: inherit;
    font-size: 10.5px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.poly-ai-suggestion:hover {
    background: #edf4eb;
    border-color: #8fa98c;
}


/* =========================================================
   INPUT AREA
========================================================= */

.poly-ai-input-area {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px 12px;

    background: #ffffff;

    border-top: 1px solid #e8eee6;
}


.poly-ai-input-area input {
    flex: 1;
    min-width: 0;

    border: 1px solid #d8e2d6;

    border-radius: 999px;

    padding: 10px 14px;

    outline: none;

    background: #f7faf6;

    color: #26372b;

    font-family: inherit;
    font-size: 12px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.poly-ai-input-area input:focus {
    border-color: #587858;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(49, 86, 58, 0.10);
}


.poly-ai-send {
    flex-shrink: 0;

    width: 39px;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: #31563a;

    color: #ffffff;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.poly-ai-send:hover {
    background: #1f4229;
    transform: scale(1.04);
}


/* =========================================================
   DISCLAIMER
========================================================= */

.poly-ai-disclaimer {
    padding:
        0
        15px
        11px;

    background: #ffffff;

    color: #89958b;

    text-align: center;

    font-size: 8.5px;
    line-height: 1.4;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .poly-ai-widget {
        right: 14px;
        bottom: 14px;
    }


    .poly-ai-chat {
        position: fixed;

        left: 12px;
        right: 12px;
        bottom: 78px;

        width: auto;

        height: min(
            560px,
            calc(100vh - 105px)
        );
    }


    .poly-ai-floating-button {
        margin-left: auto;
    }
}