/* Magspire Edu, custom styles on top of DaisyUI */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

html {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Sidebar nav active link */
.sidebar-nav .active {
    background-color: color-mix(in oklch, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-weight: 600;
}

/* Smooth theme transition, skip on inputs to avoid input lag */
*, *::before, *::after {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}
input, button, select, textarea {
    transition: none;
}

/* Brand monogram */
.brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-primary-content);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: -0.02em;
    border-radius: 0.65rem;
    flex-shrink: 0;
    overflow: hidden;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.brand-mark-inverse {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.page-content {
    min-height: calc(100vh - 4rem);
}

/* Page shell background: FLAT opaque colour. Do NOT put bg-base-200/30 back.
   That Tailwind utility compiles to
     color-mix(in oklab, var(--color-base-200) 30%, transparent)
   i.e. a ~2-level-alpha translucent overlay that the browser quantises once
   into the mix result and again when compositing over the page - two 8-bit
   roundings in a row, which is what renders as horizontal banding across the
   whole viewport on Chrome/Android (other engines dither it away). Pre-mixing
   the colour once, in CSS, leaves nothing for the GPU to band.
   base.html reads it as bg-[var(--shell-bg)]. */
:root { --shell-bg: #fdfdfe; }
[data-theme="dark"] { --shell-bg: #121b2e; }

/* Exam taking, question navigator */
.question-nav-btn {
    background-color: var(--color-base-100);
    border-color: var(--color-base-300);
    color: var(--color-base-content);
}

.question-nav-btn.question-nav-answered {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-success-content);
}
/* Question form, correct option highlight */
.option-wrapper {
    border: 1px solid var(--color-base-300);
    border-radius: 0.65rem;
    padding: 0.75rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.option-wrapper.option-selected {
    border-color: var(--color-success);
    background-color: color-mix(in oklch, var(--color-success) 8%, transparent);
}

/* Softer card shadow than the DaisyUI default */
.card.shadow-sm {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
}

/* Scrollbar, subtle */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background: var(--color-base-300);
    border-radius: 999px;
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* Mobile drawer slide-out backdrop — no blur, GPU-safe on low-end devices */
.drawer-overlay {
    background-color: rgba(15, 23, 42, 0.5) !important;
    transition: background-color 0.2s ease;
}

/* Softer and premium outlines/borders */
.btn.btn-outline {
    border-color: color-mix(in oklch, var(--color-base-content) 15%, transparent) !important;
    color: var(--color-base-content) !important;
}
.btn.btn-outline:hover {
    background-color: color-mix(in oklch, var(--color-base-content) 8%, transparent) !important;
    border-color: color-mix(in oklch, var(--color-base-content) 30%, transparent) !important;
    color: var(--color-base-content) !important;
}

.badge.badge-outline {
    border-color: color-mix(in oklch, var(--color-base-content) 20%, transparent) !important;
    color: var(--color-base-content) !important;
    background-color: transparent !important;
}

/* Softer base borders that might use base-200/base-300 or fallbacks */
[class*="border-base-200"],
[class*="border-base-300"] {
    border-color: color-mix(in oklch, var(--color-base-content) 10%, transparent) !important;
}

.input:focus {
    outline: none;
    border-color: #5b4fcf;
    border-width: 1.5px;
    box-shadow: 0 0 0 3px rgba(91, 79, 207, 0.1);
}

.btn-loading {
    opacity: 0.75;
    pointer-events: none;
    cursor: not-allowed;
}

@keyframes ellipsis-wave {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

.btn-loading-dots span {
    display: inline-block;
    animation: ellipsis-wave 1.2s ease-in-out infinite;
}
.btn-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.btn-loading-dots span:nth-child(3) { animation-delay: 0.30s; }