/* =========================================================
   SchoolLoop – Shared Custom Styles
   Tailwind handles utilities; this file covers patterns
   that can't be expressed cleanly with utility classes.
   ========================================================= */

/* Hide browser-native password reveal button (Edge/IE/Chrome) */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-credentials-auto-fill-button {
  display: none !important;
}

body {
    background-color: #FAFAF8;
    color: #1b1c1c;
    font-family: 'Nunito Sans', sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    min-height: max(884px, 100dvh);
}

/* Material Symbols default variation */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Cards */
.soft-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(74, 74, 74, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.soft-card:hover {
    transform: scale(1.01);
    box-shadow: 0 8px 30px rgba(245, 169, 98, 0.12);
}
.soft-shadow {
    box-shadow: 0 4px 20px rgba(74, 74, 74, 0.06);
}
.hover-shadow {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-shadow:hover {
    box-shadow: 0 8px 30px rgba(245, 169, 98, 0.12);
    transform: translateY(-2px);
}

/* Glass / blur effects */
.glass-effect {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.7);
}
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
}

/* Scrollbars */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #E4E2E2; border-radius: 10px; }

/* Chat bubbles */
.message-bubble-left  { border-bottom-left-radius: 4px; }
.message-bubble-right { border-bottom-right-radius: 4px; }

/* Calendar */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* Marketplace badges */
.pill-badge {
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

/* Bottom nav active state (set by app.js) */
nav a.nav-active {
    background-color: #f5a962;
    color: #703d00;
    border-radius: 9999px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
nav a.nav-active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}