/* ===== TABLET (1024px and below) ===== */
@media (max-width: 1024px) {
    .quote-layout {
        grid-template-columns: 1fr;
    }

    .recorder-panel {
        position: static;
    }
}

/* ===== MOBILE (768px and below) ===== */
@media (max-width: 768px) {
    /* Sidebar: slide out */
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-toggle {
        display: flex;
    }

    /* Support both class names (dashboard uses 'visible', other pages use 'active') */
    .sidebar-overlay.active,
    .sidebar-overlay.visible {
        display: block;
    }

    /* Main content: remove sidebar margin */
    .main-content {
        margin-left: 0;
        padding: var(--space-4);
        padding-top: var(--space-16);
    }

    /* Forms: stack columns */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Stats: 2 per row */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Cards: less padding */
    .card {
        padding: var(--space-4);
    }

    .card-header {
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-3);
    }

    /* Page header: allow wrapping */
    .page-header {
        margin-bottom: var(--space-5);
    }

    .page-header h1 {
        font-size: var(--text-xl);
    }

    /* Tables: compact on mobile */
    table th,
    table td {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }

    /* Truncate long text in table cells */
    .truncate,
    table td:nth-child(3) {
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Quote preview: tighter */
    .doc-preview {
        padding: var(--space-4);
    }

    .doc-header {
        flex-direction: column;
        gap: var(--space-4);
    }

    .doc-quote-title {
        text-align: left;
        font-size: var(--text-xl);
    }

    .doc-meta {
        text-align: left;
    }

    .doc-meta-row {
        justify-content: flex-start;
    }

    .doc-company-name {
        font-size: var(--text-lg);
    }

    .doc-signatures {
        grid-template-columns: 1fr;
    }

    /* Line items table: scrollable + compact */
    .doc-items-table {
        font-size: var(--text-xs);
    }

    .doc-items-table th,
    .doc-items-table td {
        padding: var(--space-1) var(--space-2);
        white-space: nowrap;
    }

    .doc-items-table td:nth-child(3) {
        white-space: normal;
        min-width: 100px;
    }

    /* Totals: full width on mobile */
    .doc-totals {
        justify-content: stretch;
    }

    .doc-totals-table {
        width: 100%;
    }

    /* Modals */
    .modal {
        padding: var(--space-4);
        margin: var(--space-4);
    }

    .auth-card {
        padding: var(--space-5);
    }

    /* View modal: nearly full-screen on mobile */
    .view-modal-overlay {
        padding: 16px 8px;
    }

    .view-modal {
        max-height: 95vh;
    }

    .view-modal-body {
        padding: var(--space-4);
    }

    /* Quick action: normal size on mobile */
    .btn-lg {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-sm);
    }

    /* Sidebar user: tighter */
    .sidebar-user-info {
        gap: var(--space-2);
    }

    .sidebar-user-name {
        font-size: var(--text-xs);
    }

    .sidebar-user-email {
        font-size: 0.65rem;
    }

    /* File input: don't overflow */
    input[type="file"] {
        max-width: 100%;
        font-size: var(--text-xs);
    }

    /* Logo upload: stack on mobile */
    .card > div[style*="display:flex"] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== SMALL MOBILE (480px and below) ===== */
@media (max-width: 480px) {
    /* Stats: single column */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-card-value {
        font-size: var(--text-xl);
    }

    /* Even less padding */
    .main-content {
        padding: var(--space-3);
        padding-top: var(--space-16);
    }

    .card {
        padding: var(--space-3);
    }

    .page-header h1 {
        font-size: var(--text-lg);
    }

    /* Record button */
    .record-btn {
        width: 80px;
        height: 80px;
    }

    .record-btn svg {
        width: 32px;
        height: 32px;
    }

    .record-pulse {
        width: 80px;
        height: 80px;
    }

    /* Quote actions: stack */
    .quote-actions {
        flex-direction: column;
    }

    .quote-actions .btn {
        width: 100%;
    }

    /* Recorder card: less padding */
    .recorder-card {
        padding: var(--space-4);
    }

    /* Tables: hide low-priority columns */
    table th:nth-child(3),
    table td:nth-child(3) {
        display: none;
    }

    /* Action buttons: smaller */
    .btn-action {
        width: 26px;
        height: 26px;
    }

    /* Quote preview: minimal padding */
    .doc-preview {
        padding: var(--space-3);
    }

    .doc-header {
        gap: var(--space-3);
    }

    .doc-quote-title {
        font-size: var(--text-lg);
    }

    /* Totals: smaller text */
    .doc-totals-row {
        font-size: var(--text-xs);
    }

    .doc-totals-row.total {
        font-size: var(--text-base);
    }

    /* Toast: narrower */
    .toast {
        max-width: calc(100vw - 32px);
    }

    .toast-container {
        right: var(--space-2);
        left: var(--space-2);
    }
}