/* View-Specific Styles */

/* Verifikationer View */
.verifikationer-list {
    margin-top: var(--spacing-md);
}

.verifikation-item {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.verifikation-item:hover {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-sm);
}

.verifikation-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.verifikation-nummer {
    font-weight: 600;
    color: var(--primary-blue);
}

.verifikation-datum {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.verifikation-beskrivning {
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.verifikation-meta {
    display: flex;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.verifikation-rad-item {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
}

.verifikation-rad-item:not(:last-child) {
    border-bottom: 1px solid var(--bg-light);
}

/* Search View */
.search-form {
    margin-bottom: var(--spacing-xl);
}

.search-result-item {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-result-item:hover {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-sm);
}

.search-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.search-result-nummer {
    font-weight: 600;
    color: var(--primary-blue);
}

.search-result-datum {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.search-result-beskrivning {
    color: var(--text-primary);
}

/* Bank Import View */
.pending-imports-list {
    margin-top: var(--spacing-md);
}

.pending-import-item {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    transition: all var(--transition-fast);
}

.pending-import-item.selected {
    border-color: var(--primary-blue);
    background-color: var(--primary-blue-light);
}

.pending-import-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.pending-import-checkbox {
    flex-shrink: 0;
}

.pending-import-details {
    flex: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-md);
    align-items: center;
}

.pending-import-datum {
    font-weight: 500;
    white-space: nowrap;
}

.pending-import-beskrivning {
    color: var(--text-primary);
}

.pending-import-belopp {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.pending-import-belopp.positive {
    color: var(--success-green);
}

.pending-import-belopp.negative {
    color: var(--error-red);
}

.pending-import-motkonto {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.pending-import-motkonto label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.pending-import-motkonto select {
    flex: 1;
    max-width: 400px;
}

.matchning-score {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    padding: 2px 8px;
    border-radius: var(--border-radius);
}

.matchning-score.high {
    background-color: var(--success-green-light);
    color: var(--success-green);
}

.matchning-score.medium {
    background-color: var(--warning-yellow-light);
    color: #8B6914;
}

.matchning-score.low {
    background-color: var(--error-red-light);
    color: var(--error-red);
}

.post-status {
    margin-top: var(--spacing-md);
}

.post-status-message {
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
}

.post-status-message.success {
    background-color: var(--success-green-light);
    color: var(--success-green);
    border-left: 4px solid var(--success-green);
}

.post-status-message.error {
    background-color: var(--error-red-light);
    color: var(--error-red);
    border-left: 4px solid var(--error-red);
}

/* Rapporter View */
.rapport-form {
    margin-bottom: var(--spacing-xl);
}

.rapport-results {
    margin-top: var(--spacing-xl);
}

.rapport-table {
    width: 100%;
    background: var(--bg-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.rapport-table th {
    background-color: var(--bg-light);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
}

.rapport-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.rapport-table tbody tr:last-child td {
    border-bottom: none;
}

.rapport-section-header {
    background-color: var(--primary-blue-light);
    font-weight: 600;
    color: var(--primary-blue);
}

.rapport-total-row {
    font-weight: 600;
    background-color: var(--bg-light);
}

.rapport-subtotal-row {
    font-weight: 500;
    background-color: var(--bg-light);
}

.rapport-amount {
    text-align: right;
    font-family: 'Courier New', monospace;
}

.rapport-amount.positive {
    color: var(--success-green);
}

.rapport-amount.negative {
    color: var(--error-red);
}

.rapport-konto-nummer {
    font-family: 'Courier New', monospace;
    color: var(--text-secondary);
}

/* Konton View */
.konton-list {
    margin-top: var(--spacing-md);
}

.konto-item {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--spacing-md);
    align-items: center;
}

.konto-item:hover {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-sm);
}

.konto-nummer {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--primary-blue);
}

.konto-namn {
    color: var(--text-primary);
}

.konto-klass {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.konto-typ {
    font-size: var(--font-size-sm);
}

/* Ledger Display */
.ledger-header {
    margin-bottom: var(--spacing-md);
}

.ledger-konto-info {
    background: var(--bg-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.ledger-table {
    width: 100%;
}

.ledger-table th {
    background-color: var(--bg-light);
    padding: var(--spacing-sm);
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    font-size: var(--font-size-sm);
}

.ledger-table td {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
}

.ledger-table tbody tr:hover {
    background-color: var(--bg-light);
}

.ledger-saldo {
    font-weight: 600;
    text-align: right;
    font-family: 'Courier New', monospace;
}

.ledger-debet,
.ledger-kredit {
    text-align: right;
    font-family: 'Courier New', monospace;
}

/* Modal Content Specific Styles */
.verifikation-details {
    font-size: var(--font-size-sm);
}

.verifikation-details-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.verifikation-details-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.verifikation-details-value {
    color: var(--text-primary);
}

.verifikation-details-rader {
    margin-top: var(--spacing-md);
}

.verifikation-details-rad {
    display: grid;
    grid-template-columns: auto 2fr 1fr 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--bg-light);
}

.verifikation-details-rad:last-child {
    border-bottom: none;
}

.verifikation-details-totals {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 2px solid var(--border-color);
    font-weight: 600;
}

/* Responsive adjustments for views */
@media (max-width: 768px) {
    .pending-import-details {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }

    .pending-import-belopp {
        text-align: left;
    }

    .konto-item {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }

    .verifikation-details-rad {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }

    .rapport-table {
        font-size: var(--font-size-sm);
    }

    .rapport-table th,
    .rapport-table td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}