/* =====================================================
   Minimal Custom Styles for 自己办 (zjb)
   Leveraging Pico CSS - Keep it Simple!
   ===================================================== */

/* ----- Global Font Size Reduction ----- */
body {
    font-size: 0.7rem !important;  /* ~14px instead of Pico's default 16px */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Make form elements inherit the smaller font size */
input, button, select, textarea, a[role="button"] {
    font-size: 0.7rem !important;
}

/* ----- Fix Dropdown Overflow ----- */
nav details[open] ul {
    right: 0;
    left: auto;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-bottom:  solid 0.2px #efebeb;
}

/* ----- Grid: 75% Main / 25% Aside ----- */
.grid {
    grid-template-columns: 3fr 1fr;
    gap: 3rem;
    flex: 1;
}

/* ----- Sidebar Layout ----- */
#right-area {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#browse-section {
    flex: 1;
}

#ongoings {
    margin-top: auto;
    padding-top: 2rem;
}

/* ----- Question Input: Centered & Constrained ----- */
section {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* Input + Button on one line */
#question-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
}

/* ----- Tabs Styling ----- */
#tabs {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
    margin-bottom: 1rem;
}

#tabs .tab {
    padding-bottom: 0.5rem;
    text-decoration: none;
    color: var(--pico-muted-color);
    border-bottom: 2px solid transparent;
}

#tabs .tab:hover {
    color: var(--pico-primary);
}

#tabs .tab.active {
    color: var(--pico-primary);
    border-bottom-color: var(--pico-primary);
}

/* ----- Footer: Space Between ----- */
footer small {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ----- Answer Notes ----- */

#answer-notes small {
    color: var(--pico-muted-color);
}

/* >>>>>>>>>>   Toast Notifications    >>>>>>>>>> */

#toast-container {
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    align-items: center;
}

.toast {
    min-width: 250px;
    max-width: 400px;
    padding: 1rem 1.5rem;
    border-radius: var(--pico-border-radius);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
    animation: slideIn 0.3s ease-out;
}

.toast.success {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

.toast.error {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #ef4444;
}

.toast.info {
    background: #dbeafe;
    color: #1e40af;
    border-left: 4px solid #3b82f6;
}

@keyframes slideIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.toast.hiding {
    animation: slideOut 0.3s ease-out forwards;
}

@keyframes slideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}
/* <<<<<<<<<<<<   Toast Notifications    <<<<<<<<<<<< */

/* ----- Mobile: Stack Layout ----- */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
    
    section {
        width: 100%;
    }
    
    #question-form {
        grid-template-columns: 1fr;
    }
    
    footer small {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}