/* Responsive Design */

/* Large Screens */
@media (min-width: 1024px) {
    .main-content {
        padding: 32px;
        max-width: 1000px;
    }
    
    .header h1 {
        font-size: 2.5rem;
    }
    
    .upload-area {
        padding: 64px 32px;
    }
    
    .confidence-display {
        gap: 16px;
    }
    
    .confidence-card {
        min-width: 140px;
        padding: 20px;
    }
}

/* Medium Screens - Tablets */
@media (max-width: 768px) {
    .main-content {
        padding: 16px;
    }
    
    .header {
        margin-bottom: 20px;
        padding: 16px 0 12px;
    }
    
    .header h1 {
        font-size: 1.8rem;
    }
    
    .header .subtitle {
        font-size: 1rem;
    }
    
    .progress-steps {
        gap: 12px;
        margin: 24px 0;
    }
    
    .step-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .step-label {
        font-size: 0.8rem;
    }
    
    .step-connector {
        width: 40px;
    }
    
    .upload-area {
        padding: 32px 16px;
    }
    
    .upload-icon {
        font-size: 2.5rem;
    }
    
    .upload-text {
        font-size: 1.1rem;
    }
    
    /* Forms */
    .form-grid-2,
    .form-grid-3,
    .form-grid-4 {
        grid-template-columns: 1fr;
    }
    
    .edit-form {
        grid-template-columns: 1fr;
    }
    
    /* Confidence Display */
    .confidence-display {
        gap: 8px;
    }
    
    .confidence-card {
        min-width: 100px;
        padding: 12px;
    }
    
    .confidence-score {
        font-size: 1.25rem;
    }
    
    .confidence-label {
        font-size: 0.8rem;
    }
    
    /* Buttons */
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .btn-large {
        padding: 14px 28px;
        font-size: 1rem;
    }
    
    .btn-small {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    /* Batch Actions */
    .batch-actions {
        flex-direction: column;
        gap: 12px;
    }
    
    .batch-actions .btn {
        width: 100%;
    }
    
    /* Invoice Cards */
    .invoice-card {
        padding: 16px;
    }
    
    .invoice-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .invoice-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .invoice-actions .btn {
        width: 100%;
    }
    
    /* Line Items */
    .item-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .edit-items-column-headers {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .edit-item-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px;
    }
    
    /* Modal */
    .edit-modal-content {
        padding: 20px;
        margin: 1vh 10px 2vh 10px;
        max-width: 100%;
        width: calc(100% - 20px);
        max-height: 96vh;
    }
    
    .edit-modal {
        padding-top: 1vh;
    }
    
    .edit-tabs {
        flex-direction: column;
        gap: 0;
    }
    
    .edit-tab {
        border-bottom: none;
        border-right: 2px solid transparent;
        padding: 10px 16px;
        text-align: left;
    }
    
    .edit-tab.active {
        border-right-color: #6366f1;
        border-bottom-color: transparent;
        background: rgba(99, 102, 241, 0.05);
    }
}

/* Small Screens - Mobile */
@media (max-width: 480px) {
    .main-content {
        padding: 12px;
    }
    
    .header h1 {
        font-size: 1.6rem;
    }
    
    .header .subtitle {
        font-size: 0.95rem;
    }
    
    .header .description {
        font-size: 0.9rem;
    }
    
    .progress-steps {
        gap: 8px;
        margin: 20px 0;
    }
    
    .step-circle {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    
    .step-label {
        font-size: 0.75rem;
    }
    
    .step-connector {
        width: 30px;
    }
    
    .upload-area {
        padding: 24px 12px;
    }
    
    .upload-icon {
        font-size: 2rem;
        margin-bottom: 12px;
    }
    
    .upload-text {
        font-size: 1rem;
    }
    
    .upload-subtext {
        font-size: 0.85rem;
    }
    
    /* Status Message */
    .status-message {
        min-width: 280px;
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    /* Forms */
    .form-input,
    .form-select,
    .form-textarea {
        padding: 12px 14px;
        font-size: 0.95rem;
    }
    
    .form-label {
        font-size: 0.9rem;
    }
    
    /* Cards */
    .card {
        border-radius: 12px;
    }
    
    .card-content,
    .card-header,
    .card-footer {
        padding: 16px;
    }
    
    .invoice-card {
        padding: 12px;
        margin-bottom: 12px;
        border-radius: 12px;
    }
    
    .invoice-filename {
        font-size: 1rem;
    }
    
    .invoice-details {
        font-size: 0.85rem;
    }
    
    /* File Queue */
    .file-queue {
        padding: 16px;
    }
    
    .queue-item {
        padding: 10px 12px;
        border-radius: 6px;
    }
    
    .queue-item-name {
        font-size: 0.9rem;
    }
    
    .queue-item-size {
        font-size: 0.8rem;
    }
    
    /* Confidence Cards */
    .confidence-card {
        min-width: 90px;
        padding: 10px;
    }
    
    .confidence-score {
        font-size: 1.1rem;
    }
    
    .confidence-label {
        font-size: 0.75rem;
    }
    
    /* Modal Adjustments */
    .edit-modal-content {
        padding: 16px;
        margin: 0.5vh 8px 1vh 8px;
        width: calc(100% - 16px);
        max-height: 98vh;
    }
    
    .edit-modal-title {
        font-size: 1.25rem;
    }
    
    .edit-modal-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .edit-modal-actions .btn {
        width: 100%;
    }
    
    /* Line Items Mobile */
    .edit-items-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .edit-add-item {
        width: 100%;
    }
    
    .edit-items-column-headers {
        display: none;
    }
    
    .edit-item-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px;
    }
    
    .edit-item-row input {
        width: 100%;
    }
    
    .edit-item-remove {
        align-self: flex-end;
        margin-top: 8px;
    }
    
    /* Grid Responsive */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Print Styles */
@media print {
    .background-pattern,
    .edit-modal,
    .status-message,
    .btn,
    .upload-area {
        display: none !important;
    }
    
    .container {
        background: white;
        box-shadow: none;
    }
    
    .main-content {
        padding: 0;
        max-width: 100%;
    }
    
    .invoice-card {
        border: 1px solid #ccc;
        break-inside: avoid;
        margin-bottom: 20px;
    }
}