:root {
    --journea-primary: #00152d;
    --journea-secondary: #006399;
    --journea-surface: #fcf9ef;
    --journea-surface-low: #f7f3e9;
    --journea-surface-container: #f1eee4;
    --journea-surface-high: #ebe8de;
    --journea-border: rgba(196, 198, 207, .2);
    --journea-text-muted: rgba(28, 28, 22, .7);
    --journea-shadow: 0 4px 12px rgba(11, 42, 74, .03);
    --journea-shadow-hover: 0 8px 24px rgba(11, 42, 74, .07);
}

body {
    background: var(--journea-surface) !important;
    max-width: 100%;
    overflow-x: hidden;
}

html {
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
}

img,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

button,
input,
textarea,
select {
    max-width: 100%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span {
    overflow-wrap: break-word;
}

[class*="overflow-x-auto"],
.horizontal-scroll,
.session-scroll {
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

[class*="overflow-x-auto"]::-webkit-scrollbar,
.horizontal-scroll::-webkit-scrollbar,
.session-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.card-shadow {
    box-shadow: var(--journea-shadow) !important;
}

.card-hover {
    transition: all .22s ease !important;
}

.card-hover:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--journea-shadow-hover) !important;
}

aside[class*="w-64"] {
    background: var(--journea-surface) !important;
    border-right-color: rgba(196, 198, 207, .3) !important;
}

aside[class*="w-64"] a,
aside[class*="w-64"] button {
    min-height: 42px;
}

aside[class*="w-64"] nav a.bg-surface-container-high,
aside[class*="w-64"] nav a.bg-surface-container {
    background: var(--journea-surface-high) !important;
    color: var(--journea-secondary) !important;
}

aside[class*="w-64"] nav a:hover,
aside[class*="w-64"] button:hover {
    background: var(--journea-surface-container) !important;
}

header.fixed {
    background: rgba(252, 249, 239, .85) !important;
    border-bottom-color: rgba(196, 198, 207, .1) !important;
    backdrop-filter: blur(12px);
}

main > div[class*="pt-28"],
.mobile-shell {
    width: 100%;
}

main section > .rounded-3xl.bg-surface,
main section.rounded-3xl.bg-surface,
.grade-section,
.note-card,
.agenda-card,
.recording-card,
.stat-card,
.class-card,
.session-card,
.achievement-card {
    background: var(--journea-surface) !important;
    border-color: var(--journea-border) !important;
}

.bg-surface-container-low,
.status-section {
    background-color: var(--journea-surface-low) !important;
}

.bg-surface-container,
.bg-surface-container-high {
    background-color: var(--journea-surface-container) !important;
}

.bg-surface-container-highest {
    background-color: var(--journea-surface-high) !important;
}

.note-card,
.agenda-card,
.recording-card,
.class-card,
.session-card,
.achievement-card {
    color: var(--journea-primary);
}

input,
textarea,
select {
    border-color: rgba(196, 198, 207, .3) !important;
    box-shadow: none !important;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--journea-secondary) !important;
    box-shadow: 0 0 0 2px rgba(0, 99, 153, .2) !important;
}

button.bg-secondary,
a.bg-secondary,
button.bg-primary,
a.bg-primary {
    box-shadow: none;
}

.rounded-3xl.bg-primary.text-white,
.bg-gradient-to-br {
    background: linear-gradient(to bottom right, #002a4a, #004a75) !important;
}

.material-symbols-outlined {
    vertical-align: middle;
}

@media (max-width: 768px) {
    header.fixed {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    main > div[class*="pt-28"],
    .mobile-shell {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    main > div[class*="pt-24"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .admin-page-header {
        margin-bottom: 1.25rem;
    }

    .admin-page-title {
        font-size: clamp(1.75rem, 8vw, 2.125rem) !important;
    }

    .admin-page-subtitle {
        font-size: .9375rem !important;
        line-height: 1.55 !important;
    }

    .admin-content {
        width: 100%;
        min-width: 0;
    }

    .admin-content h1,
    .admin-content h2,
    .admin-content h3,
    .admin-content p,
    .admin-content a,
    .admin-content span {
        overflow-wrap: anywhere;
    }

    .admin-content input[type="file"] {
        max-width: 100%;
        padding: .75rem !important;
    }

    [class*="fixed"][class*="inset-0"] {
        overscroll-behavior: contain;
    }

    [class*="fixed"][class*="inset-0"] > [class*="max-w-"] {
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
    }

    .rounded-3xl {
        border-radius: 1.25rem !important;
    }

    .rounded-\[2rem\],
    .rounded-\[28px\] {
        border-radius: 1.25rem !important;
    }

    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    table {
        font-size: .8125rem;
    }

    th,
    td {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    body > main.flex.min-h-screen > section.flex.w-full {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    body > main.flex.min-h-screen > section.flex.w-full > div > .mb-12 {
        margin-bottom: 2rem !important;
    }
}

@media (max-width: 420px) {
    main > div[class*="pt-28"],
    main > div[class*="pt-24"],
    .mobile-shell {
        padding-left: .875rem !important;
        padding-right: .875rem !important;
    }

    header.fixed {
        padding-left: .875rem !important;
        padding-right: .875rem !important;
    }

    .admin-content .p-6,
    .admin-content .p-5 {
        padding: 1rem !important;
    }

    .admin-content .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .admin-content .py-14,
    .admin-content .py-10 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .calendar-day {
        padding-left: .125rem !important;
        padding-right: .125rem !important;
    }

    .date-number {
        font-size: .75rem;
    }

    .receipt-line {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: .25rem !important;
    }

    .receipt-line > * {
        max-width: none !important;
        text-align: left !important;
    }
}

@media (max-width: 767px) and (max-height: 700px) {
    body > main > section.flex.w-full,
    body > main > section[class*="w-full"] {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    body > main > section > div > .mb-12 {
        margin-bottom: 1.75rem !important;
    }
}