/* basa - Custom Stylesheet */

/* Standard static hidden utility helper */
.hidden {
    display: none !important;
}

/* Navigation Active Tab Highlight */
.tab-btn {
    text-align: left;
    color: #4b5563; /* text-gray-600 */
}
.tab-btn:hover {
    color: #111827; /* text-gray-900 */
    background-color: #f3f4f6; /* bg-gray-100 */
}
.tab-btn.active {
    color: #4f46e5; /* text-indigo-600 */
    background-color: #e0e7ff; /* bg-indigo-100 */
}
.tab-btn.active svg {
    color: #4f46e5;
}

/* Parent view overrides (Elderly Accessible Mode) */
body.parent-mode {
    font-size: 1.125rem; /* Larger font */
}
body.parent-mode h1, 
body.parent-mode h2, 
body.parent-mode h3 {
    font-size: 1.5 times !important;
}
body.parent-mode p, 
body.parent-mode select, 
body.parent-mode input, 
body.parent-mode button,
body.parent-mode span {
    font-size: 1.15rem !important;
    line-height: 1.75rem;
}
body.parent-mode input, 
body.parent-mode select {
    padding: 0.85rem !important;
}
body.parent-mode .tab-btn span {
    font-size: 1.25rem !important;
}

/* Pulsing Red SOS Alert State Animation */
@keyframes pulse-red {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(220, 38, 38, 0);
    }
}
.emergency-pulsing {
    animation: pulse-red 1.5s infinite;
}

/* Brain Game Flip Transition Style rules */
.memory-card {
    perspective: 1000px;
    height: 60px;
}
.memory-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}
.memory-card.flipped .memory-card-inner {
    transform: rotateY(180deg);
}
.memory-card-front, .memory-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-width: 1px;
}
.memory-card-front {
    background-color: #4f46e5;
    color: white;
    border-color: #4338ca;
    cursor: pointer;
}
.memory-card-back {
    background-color: white;
    color: #111827;
    border-color: #e5e7eb;
    transform: rotateY(180deg);
}
.memory-card.matched .memory-card-back {
    background-color: #ecfdf5; /* green-50 */
    border-color: #a7f3d0; /* green-200 */
}

/* Smooth transitions */
.transition-all-300 {
    transition: all 0.3s ease;
}

/* Mobile navigation tab strip (horizontal scrolling on small screens) */
#main-nav {
    scrollbar-width: none;
}
#main-nav::-webkit-scrollbar {
    display: none;
}

/* Hamburger navigation drawer (all viewport sizes) */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    max-width: 85vw;
    overflow-y: auto;
    z-index: 60;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease-in-out, visibility 0.25s ease-in-out;
}
body.nav-open #sidebar {
    transform: translateX(0);
    visibility: visible;
}
#nav-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(17, 24, 39, 0.5);
    z-index: 50;
}

/* Visually hidden labels kept available for assistive technology */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Small screen refinements */
@media (max-width: 767px) {
    /* Prevent accidental sideways scrolling of the whole page */
    body {
        overflow-x: hidden;
    }
    /* Comfortable touch targets */
    .tab-btn,
    button[type="submit"] {
        min-height: 44px;
    }
    /* Avoid iOS auto-zoom when focusing form fields */
    input,
    select,
    textarea {
        font-size: 16px;
    }
    /* Keep the elderly-accessible mode readable without overflowing */
    body.parent-mode {
        font-size: 1rem;
    }
    body.parent-mode p,
    body.parent-mode select,
    body.parent-mode input,
    body.parent-mode button,
    body.parent-mode span {
        font-size: 1rem !important;
        line-height: 1.5rem;
    }
    body.parent-mode .tab-btn span {
        font-size: 1rem !important;
    }
    body.parent-mode input,
    body.parent-mode select {
        padding: 0.65rem !important;
    }
}

/* ---------------------------------------------------------------------
 * Dark mode
 * The interface is built with Tailwind utility classes loaded from the CDN,
 * so dark mode re-colours those utilities under body.dark-mode instead of
 * duplicating a dark: variant on every element.
 * ------------------------------------------------------------------- */
body.dark-mode {
    background-color: #0f172a; /* slate-900 */
    color: #e2e8f0; /* slate-200 */
}
body.dark-mode .bg-white,
body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100 {
    background-color: #1e293b !important; /* slate-800 */
}
body.dark-mode header,
body.dark-mode #sidebar {
    background-color: #111827 !important; /* gray-900 */
}
body.dark-mode .border-gray-100,
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300 {
    border-color: #334155 !important; /* slate-700 */
}
body.dark-mode .text-gray-900,
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-700 {
    color: #e2e8f0 !important;
}
body.dark-mode .text-gray-600,
body.dark-mode .text-gray-500,
body.dark-mode .text-gray-400 {
    color: #94a3b8 !important; /* slate-400 */
}
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #64748b; /* slate-500 */
}
body.dark-mode .tab-btn {
    color: #cbd5e1; /* slate-300 */
}
body.dark-mode .tab-btn:hover {
    color: #ffffff;
    background-color: #334155;
}
body.dark-mode .tab-btn.active {
    color: #c7d2fe; /* indigo-200 */
    background-color: #312e81; /* indigo-900 */
}
body.dark-mode .tab-btn.active svg {
    color: #c7d2fe;
}
body.dark-mode .memory-card-back {
    background-color: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}

/* ---------------------------------------------------------------------
 * Skip link
 * Hidden until focused, so keyboard users can jump past the header and
 * navigation drawer straight into the active tab.
 * ------------------------------------------------------------------- */
#skip-to-content {
    position: absolute;
    left: 0.5rem;
    top: -4rem;
    z-index: 80;
    transition: top 0.2s ease-in-out;
}
#skip-to-content:focus {
    top: 0.5rem;
}
#main-content:focus {
    outline: none;
}

/* Clear keyboard focus ring on every interactive control */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #4f46e5; /* indigo-600 */
    outline-offset: 2px;
    border-radius: 0.375rem;
}
body.dark-mode a:focus-visible,
body.dark-mode button:focus-visible,
body.dark-mode input:focus-visible,
body.dark-mode select:focus-visible,
body.dark-mode textarea:focus-visible,
body.dark-mode [tabindex]:focus-visible {
    outline-color: #a5b4fc; /* indigo-300 */
}

/* ---------------------------------------------------------------------
 * Toast notifications
 * Short, non-blocking confirmations shown in the bottom corner instead of
 * blocking alert() dialogs.
 * ------------------------------------------------------------------- */
.toast {
    pointer-events: auto;
    max-width: min(22rem, calc(100vw - 2rem));
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    color: #111827;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    font-size: 0.875rem;
    line-height: 1.25rem;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.toast.toast-visible {
    opacity: 1;
    transform: translateY(0);
}
.toast-success {
    border-color: #a7f3d0; /* green-200 */
    background-color: #ecfdf5; /* green-50 */
    color: #065f46; /* green-800 */
}
.toast-error {
    border-color: #fecaca; /* red-200 */
    background-color: #fef2f2; /* red-50 */
    color: #991b1b; /* red-800 */
}
.toast-info {
    border-color: #c7d2fe; /* indigo-200 */
    background-color: #eef2ff; /* indigo-50 */
    color: #3730a3; /* indigo-800 */
}
.toast-close {
    margin-left: auto;
    font-weight: 700;
    line-height: 1;
    opacity: 0.6;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
}
.toast-close:hover {
    opacity: 1;
}
body.dark-mode .toast {
    background-color: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
body.dark-mode .toast-success {
    background-color: #064e3b;
    border-color: #047857;
    color: #d1fae5;
}
body.dark-mode .toast-error {
    background-color: #7f1d1d;
    border-color: #b91c1c;
    color: #fee2e2;
}
body.dark-mode .toast-info {
    background-color: #312e81;
    border-color: #4338ca;
    color: #e0e7ff;
}

/* ---------------------------------------------------------------------
 * Reduced motion
 * The dashboard uses bouncing and pulsing attention cues; honour the
 * operating system preference and hold them still instead.
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}