waddling-errors 0.7.3

/* ============================================
   RESPONSIVE DESIGN
   Mobile and Tablet Breakpoints
   ============================================ */

/* === Tablet (< 1024px) === */
@media (max-width: 1023px) {
    :root {
        --sidebar-width: 260px;
    }

    .main {
        margin-right: var(--sidebar-width);
    }
}

/* === Mobile (< 768px) === */
@media (max-width: 767px) {
    :root {
        --header-height: 56px;
        --sidebar-width: 0;
    }

    .header {
        padding: 0 1rem;
    }

    .brand-name {
        display: none;
    }

    .brand-divider {
        display: none;
    }

    .version {
        display: none;
    }

    .main {
        margin-right: 0;
    }

    /* Hide sidebar on mobile */
    .sidebar {
        display: none;
    }

    .sidebar.mobile-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        z-index: var(--z-sidebar);
        background: var(--bg-secondary);
        overflow-y: auto;
        animation: slideIn 0.2s ease-out;
    }

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

    /* Show hamburger menu on mobile */
    .hamburger-btn {
        display: flex;
    }

    /* Search section adjustments */
    .search-section {
        padding: 0.75rem 1rem;
    }

    .search-input-row {
        flex-direction: row;
        gap: 0.5rem;
    }

    .search-box {
        flex: 1;
        min-width: 0;
    }

    .search-input {
        font-size: 0.875rem;
        padding: 0.625rem 0.75rem 0.625rem 2.25rem;
    }

    .search-icon {
        font-size: 0.875rem;
        left: 0.625rem;
    }

    .query-builder-toggle {
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
        flex-shrink: 0;
    }

    .query-builder-toggle span:last-child {
        display: none;
    }

    /* Severity bar scrollable */
    .severity-filter-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }

    .severity-filter-bar::-webkit-scrollbar {
        display: none;
    }

    .severity-pill {
        flex-shrink: 0;
    }

    /* Visibility row */
    .visibility-row {
        flex-wrap: wrap;
    }

    /* Card adjustments */
    .error-header {
        padding: 0.875rem 1rem;
    }

    .severity-indicator {
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
    }

    .error-code {
        font-size: 0.9375rem;
    }

    .error-message {
        font-size: 0.875rem;
    }

    .section-content {
        padding: 0.875rem 1rem;
    }
}

/* === Small Mobile (< 480px) === */
@media (max-width: 479px) {
    .filter-label {
        display: none;
    }

    .format-toggle {
        display: none;
    }

    .error-meta {
        display: none;
    }

    /* Show hash but more compact on small screens */
    .error-hash {
        font-size: 0.6875rem;
        padding: 0.1875rem 0.375rem;
    }

    /* Hide share link on very small screens */
    .share-link-btn {
        display: none;
    }

    .copy-btn {
        display: none;
    }
}

/* === Print Styles === */
@media print {
    .header,
    .search-section,
    .sidebar,
    .toast-container,
    .copy-btn,
    .theme-toggle {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .main {
        margin-right: 0;
    }

    .error-card {
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .error-body {
        display: block !important;
    }

    .section.open .section-content,
    .section-content {
        display: block !important;
    }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === High Contrast Mode === */
@media (prefers-contrast: high) {
    :root {
        --border-color: currentColor;
    }

    .error-card,
    .sidebar,
    .toast {
        border-width: 2px;
    }
}