:root {
    --primary: #00CCCC;
    /* bright teal accent */
    --dark: #024A26;
    /* deep school green */
    --white: #FFFFFF;
    --muted: #f3f7f6;
    --card-shadow: rgba(2, 74, 38, 0.12);
}

/* Page base */
body {
    background: var(--white);
    color: var(--dark);
    font-family: Arial, Helvetica, sans-serif;
}

/* Header */
header {
    background: var(--white);
    border-bottom: 2px solid rgba(0, 204, 204, 0.08);
}

#Name p,
#Name #tag,
.li-btn,
.hr-tag {
    color: var(--dark) !important;
}

.li-btn {
    color: var(--dark);
}

.li-btn:hover {
    background: var(--primary);
    color: var(--white);
}

/* Buttons / CTAs */
.btn,
button,
input[type="submit"] {
    background: var(--primary);
    color: var(--white);
    border: none;
    padding: .5rem .9rem;
    border-radius: 6px;
    cursor: pointer
}

.btn:hover,
button:hover {
    opacity: .93
}

/* Footer */
.school-footer {
    background: var(--dark);
    color: var(--white)
}

.school-footer h2 {
    color: var(--primary)
}

.school-footer a,
.school-footer p {
    color: var(--white)
}

/* Content area common */
/* .ContentAreaWeb {
    padding: 2rem 1rem
} */

.aboutus-container-Page-1,
.abt-panel,
.ngo-card,
.admin-home-div,
.hpage-settings-card {
    background: linear-gradient(180deg, var(--white), var(--muted));
    border: 1px solid rgba(2, 74, 38, 0.08);
    box-shadow: 0 8px 20px var(--card-shadow);
}

/* Admin specific overrides */
.Left-sidePanel {
    background: var(--primary);
    color: var(--white)
}

.Navigation-Admin-group h1 {
    color: var(--white)
}

.nav-li-link {
    background-color: transparent;
    color: var(--white);
    border-radius: .5rem;
    padding: .6rem 1rem
}

.nav-li-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

.Right-sidePanel {
    background: linear-gradient(180deg, var(--muted), var(--white))
}

#LogOutbtn {
    background: transparent;
    color: var(--dark);
    border: 1px solid var(--dark);
}

/* Cards and thumbnails */
.abt-person-img-div img,
.thumb img,
.ngo-event img,
.logo img,
.coups-image-card-div img {
    object-fit: cover
}

/* Links */
a {
    color: var(--primary)
}

a:hover {
    color: var(--dark)
}

/* Small helpers */
.accent-text {
    color: var(--primary)
}

.muted {
    color: #6e7780
}

/* Ensure theme overrides are applied last for most files */
/* Add more specific overrides below if a page still shows old colors */

/* Admin / action buttons overrides (ensure consistent palette)
    - save/primary actions use --primary
    - destructive actions use --dark (to stay visible on light backgrounds)
*/
.gallery-image-div .btn-save,
.gallery-post-btn,
.btn-save {
    background: var(--primary) !important;
    color: var(--white) !important
}

.gallery-image-div .btn-delete,
.btn-delete,
.facility-admin-card .delete-btn,
.delete-btn {
    background: var(--dark) !important;
    color: var(--white) !important
}

.file-delete-btn {
    background: var(--dark) !important;
    color: var(--white) !important
}


/* Component utilities: spacing, cards, forms, and buttons */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem
}

.card {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(2, 74, 38, 0.06);
    padding: 1rem
}

.card--elevated {
    box-shadow: 0 12px 36px rgba(2, 74, 38, 0.08)
}

.u-row {
    display: flex;
    gap: 1rem;
    align-items: center
}

.u-col {
    flex: 1
}

.btn--primary {
    background: var(--primary);
    color: var(--white);
    padding: .5rem .9rem;
    border-radius: 8px;
    border: none
}

.btn--ghost {
    background: transparent;
    color: var(--dark);
    border: 1px solid rgba(2, 74, 38, 0.08);
    padding: .45rem .8rem;
    border-radius: 8px
}

.btn--danger {
    background: var(--dark);
    color: var(--white);
    padding: .45rem .8rem;
    border-radius: 8px
}

.form-control {
    width: 100%;
    padding: .6rem .8rem;
    border-radius: 8px;
    border: 1px solid rgba(2, 74, 38, 0.08);
    margin: 0.4rem 0
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .6rem
}

.typography-h1 {
    font-size: 2rem;
    color: var(--dark);
    margin-bottom: .5rem
}

.typography-h2 {
    font-size: 1.25rem;
    color: var(--dark);
    margin-bottom: .4rem
}

/* small helper spacing classes */
.mt-1 {
    margin-top: .5rem
}

.mt-2 {
    margin-top: 1rem
}

.mb-1 {
    margin-bottom: .5rem
}