/*
 * PUSPANITA system theme aligned with Sneat Bootstrap.
 * Keep this file loaded after page-level styles.
 */
:root {
    --ink: #566a7f;
    --muted: #697a8d;
    --line: #d9dee3;
    --soft: #f5f5f9;
    --brand: #696cff;
    --brand-dark: #5f61e6;
    --available: #03c3ec;
    --booked: #ff3e1d;
    --booked-soft: #ffe7e3;
    --available-soft: #d7f5fc;
    --white: #ffffff;
}

html,
body {
    font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: #566a7f !important;
    background:
        radial-gradient(circle at 18px 18px, rgba(105, 108, 255, .08) 2px, transparent 2.5px),
        radial-gradient(circle at 52px 52px, rgba(3, 195, 236, .08) 2px, transparent 2.5px),
        #f5f5f9 !important;
    background-size: 68px 68px, 68px 68px, auto !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
label,
.card-title {
    color: #566a7f !important;
}

.eyebrow,
.admin-meta,
.lead,
.info-item p,
.booking-item span {
    color: #697a8d !important;
}

.page,
.calendar-page {
    padding-top: 2rem !important;
}

.panel,
.login-card,
.calendar-panel,
.detail-panel,
.photo-card,
.info-item,
.table-wrap,
.confirm-dialog {
    border: 0 !important;
    border-radius: .5rem !important;
    background: #ffffff !important;
    box-shadow: 0 .125rem .375rem 0 rgba(67, 89, 113, .12) !important;
}

.topbar {
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 .125rem .375rem 0 rgba(67, 89, 113, .08);
}

.brand-block img,
.hero-emblem {
    filter: drop-shadow(0 .5rem 1rem rgba(105, 108, 255, .18)) !important;
}

.button,
.btn,
.admin-button,
.back-link,
.nav-button,
.confirm-button {
    border-radius: .375rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        background-color .16s ease,
        color .16s ease !important;
    will-change: transform;
}

.button-primary,
.btn-primary,
.admin-button,
.confirm-button.is-danger {
    color: #fff !important;
    border-color: #696cff !important;
    background-color: #696cff !important;
}

.button-primary:hover,
.btn-primary:hover,
.admin-button:hover,
.confirm-button.is-danger:hover {
    border-color: #5f61e6 !important;
    background-color: #5f61e6 !important;
    transform: translateY(-2px);
    box-shadow: 0 .375rem .875rem rgba(105, 108, 255, .28) !important;
}

.button-secondary,
.btn-outline-secondary,
.back-link,
.nav-button,
.confirm-button {
    color: #696cff !important;
    border: 1px solid #d9dee3 !important;
    background: #fff !important;
}

.button-secondary:hover,
.btn-outline-secondary:hover,
.back-link:hover,
.nav-button:hover,
.confirm-button:hover {
    color: #fff !important;
    border-color: #696cff !important;
    background-color: #696cff !important;
    transform: translateY(-2px);
    box-shadow: 0 .375rem .875rem rgba(105, 108, 255, .22) !important;
}

.calendar-nav .nav-button:hover {
    color: #fff !important;
    border-color: #696cff !important;
    background-color: #696cff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 .5rem 1rem rgba(105, 108, 255, .32) !important;
}

.calendar-nav .nav-button:hover i {
    color: #fff !important;
}

.calendar-nav .nav-button:hover .ti-angle-left,
.calendar-nav .nav-button:hover .ti-arrow-left {
    transform: translateX(-2px);
}

.calendar-nav .nav-button:hover .ti-angle-right {
    transform: translateX(2px);
}

.calendar-nav .nav-button i {
    display: inline-block;
    transition: transform .16s ease, color .16s ease !important;
}

.button:active,
.btn:active,
.admin-button:active,
.back-link:active,
.nav-button:active,
.confirm-button:active {
    transform: translateY(0) scale(.98);
    box-shadow: 0 .125rem .375rem rgba(67, 89, 113, .14) !important;
}

.button:focus-visible,
.btn:focus-visible,
.admin-button:focus-visible,
.back-link:focus-visible,
.nav-button:focus-visible,
.confirm-button:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 .2rem rgba(105, 108, 255, .22) !important;
}

.admin-button.is-danger,
.btn-danger {
    color: #fff !important;
    border-color: #ff3e1d !important;
    background-color: #ff3e1d !important;
}

.admin-button.is-danger:hover,
.btn-danger:hover {
    border-color: #e6381a !important;
    background-color: #e6381a !important;
    box-shadow: 0 .375rem .875rem rgba(255, 62, 29, .24) !important;
}

.icon,
.date-status.is-available,
.detail-state {
    color: #03c3ec !important;
    background: #d7f5fc !important;
}

.date-status.is-booked,
.detail-state.is-booked {
    color: #ff3e1d !important;
    background: #ffe7e3 !important;
}

.date-cell {
    border-color: #ebeef0 !important;
    border-radius: .5rem !important;
    background: #fff !important;
}

.date-cell.is-selected {
    border-color: #696cff !important;
    outline: 3px solid rgba(105, 108, 255, .55) !important;
    outline-offset: 2px !important;
    box-shadow: 0 .5rem 1rem rgba(105, 108, 255, .18) !important;
}

.month-select,
.year-select,
.form-control,
.custom-select,
select,
input,
textarea {
    border-color: #d9dee3 !important;
    border-radius: .375rem !important;
    color: #566a7f !important;
}

.month-select:focus,
.year-select:focus,
.form-control:focus,
.custom-select:focus,
select:focus,
input:focus,
textarea:focus {
    border-color: #696cff !important;
    box-shadow: 0 0 0 .2rem rgba(105, 108, 255, .16) !important;
}

.alert-danger {
    color: #ff3e1d !important;
    border: 0 !important;
    background: #ffe7e3 !important;
}

.flash-message,
.alert-success {
    color: #71dd37 !important;
    border: 0 !important;
    border-radius: .5rem !important;
    background: #e8fadf !important;
}

.visual {
    border-radius: .5rem !important;
    box-shadow: 0 .5rem 1rem rgba(67, 89, 113, .18) !important;
}

.photo-lightbox {
    background: rgba(67, 89, 113, .78) !important;
}

table {
    color: #566a7f !important;
}

th {
    color: #566a7f !important;
    background: #f5f5f9 !important;
    font-weight: 600 !important;
}

@media (max-width: 620px) {
    .topbar {
        padding: 1rem;
    }
}