/* NOTEBOOK FOOTER STYLE ------------------------------------------------ */

.admin-footer {
    margin-top: 3rem;
    padding: 2rem 1rem 1.5rem;
    border-top: 3px dashed var(--brand-color);
    background: transparent;
    font-family: "Patrick Hand", "Comic Sans MS", sans-serif;
    text-align: center;
    position: relative;
}

/* paper hole decorations */
.admin-footer:before,
.admin-footer:after {
    content: "●";
    font-size: 1.2rem;
    color: var(--brand-color);
    opacity: 0.35;
    position: absolute;
    top: -11px;
}

.admin-footer:before {
    left: 32px;
}
.admin-footer:after {
    right: 32px;
}

/* footer area inner alignment */
.admin-footer-inner {
    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
}

.footer-actions {
    display: flex;
    gap: 2.5rem;
	justify-content: center;
}


/* button styling – notebook look */
.footer-actions .btn {
    border: 2px dashed var(--brand-color-hex);
    letter-spacing: .4px;
    font-size: 1.15rem;
    font-weight: 700;
    background: rgba(255,255,255,0.4);
    color: var(--brand-color);
    border-radius: 7px;
    box-shadow: 1px 2px 0 rgba(0,0,0,0.12);
	justify-content: center;
}

.footer-actions .btn:hover {
    transform: scale(1.06) rotate(-1deg);
    opacity: 0.9;
}

/* individual button colors */
.btn-primary { background: rgba(11,142,216,0.17); }
.btn-secondary { background: rgba(100,100,100,0.18); }
.btn-tertiary { background: rgba(0,150,0,0.18); }
.btn-quaternary { background: rgba(255,190,0,0.18); }

/* mobile improvements */
@media (max-width: 600px) {
    .admin-footer {
        padding: 1.5rem 0.5rem;
    }
    .footer-actions {
        flex-direction: column;
        gap: 0.6rem;
    }
    .footer-actions .btn {
        width: 100%;
        transform: none;
    }
}

/* dark mode enhancements */
body.dark-mode .admin-footer {
    border-color: #fff;
}

body.dark-mode .footer-actions .btn {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255,255,255,0.13);
}

body.dark-mode .admin-footer:before,
body.dark-mode .admin-footer:after {
    color: #fff;
}