/*
|--------------------------------------------------------------------------
| BANK TRANSACTIONS - SHARED
|--------------------------------------------------------------------------
*/

.bank-transactions-page .dashboard {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:20px;
    margin-bottom:40px;
}

.bank-transactions-page .dashboard-card {
    min-width:0;
}


/*
|--------------------------------------------------------------------------
| FILTERS
|--------------------------------------------------------------------------
*/

.bank-filter-grid {
    display:grid;
    grid-template-columns:1fr 1.4fr 1fr 1.5fr;
    gap:12px;
}

.bank-filter-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:18px;
}

.bank-filter-actions .btn-primary,
.bank-filter-actions .btn-secondary {
    width:100%;
    box-sizing:border-box;
}


/*
|--------------------------------------------------------------------------
| TRANSACTION TABLE
|--------------------------------------------------------------------------
*/

.bank-table {
    width:100%;
    table-layout:fixed;
}

.bank-table th,
.bank-table td {
    vertical-align:top;
}

.bank-table .bank-col-date {
    width:12%;
}

.bank-table .bank-col-description {
    width:58%;
}

.bank-table .bank-col-movement {
    width:18%;
}

.bank-table .bank-col-action {
    width:12%;
    text-align:right;
}

.bank-table td.bank-col-action {
    text-align:right;
}

.bank-transaction-bank {
    display:block;
    font-weight:600;
}

.bank-transaction-bank-mobile {
    display:none;
}

.bank-transaction-description {
    display:block;
    margin-top:2px;
}

.bank-transaction-reference,
.bank-transaction-import {
    display:block;
    margin-top:3px;
    font-size:13px;
    color:#666666;
}

.movement-type {
    display:block;
    font-size:13px;
}

.movement-amount {
    display:block;
    margin-top:2px;
    font-weight:700;
}

.bank-view-link {
    color:#1a4fa3;
    font-weight:600;
    text-decoration:none;
}


/*
|--------------------------------------------------------------------------
| CLICKABLE ROW
|--------------------------------------------------------------------------
*/

.bank-clickable-row {
    cursor:pointer;
}

.bank-clickable-row:focus {
    outline:2px solid currentColor;
    outline-offset:-2px;
}


/*
|--------------------------------------------------------------------------
| PAGINATION
|--------------------------------------------------------------------------
*/

.bank-pagination {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    margin-top:22px;
}

.bank-pagination-current {
    text-align:center;
}

.bank-pagination .btn-primary,
.bank-pagination .btn-secondary {
    width:90px;
    min-width:90px;
    padding:7px 10px;
    text-align:center;
}

/*
|--------------------------------------------------------------------------
| ALL TRANSACTIONS
|--------------------------------------------------------------------------
*/

.bank-all-table .bank-col-date {
    width:10%;
}

.bank-all-table .bank-col-description {
    width:46%;
}

.bank-all-table .bank-col-movement {
    width:14%;
}

.bank-all-table .bank-col-status {
    width:12%;
}

.bank-all-table .bank-col-allocation {
    width:12%;
}

.bank-all-table .bank-col-action {
    width:6%;
}

.bank-transaction-meta {
    display:none;
}

.bank-status {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:82px;
    padding:5px 10px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}

.bank-status-allocated {
    background:#dcfce7;
    color:#166534;
}

.bank-status-unallocated {
    background:#fff3cd;
    color:#856404;
}

.bank-status-ignored {
    background:#e5e7eb;
    color:#374151;
}

.bank-action-muted {
    color:#999999;
}

/*
|--------------------------------------------------------------------------
| IMPORT HISTORY
|--------------------------------------------------------------------------
*/

.bank-import-table .bank-col-date {
    width:12%;
}

.bank-import-table .bank-col-file {
    width:34%;
}

.bank-import-table .bank-col-statement {
    width:24%;
}

.bank-import-table .bank-col-movement {
    width:20%;
}

.bank-import-table .bank-col-action {
    width:10%;
    text-align:right;
}

.bank-import-table td.bank-col-action {
    text-align:right;
}

.import-bank {
    display:block;
    font-weight:600;
}

.import-bank-mobile {
    display:none;
}

.import-file {
    display:block;
    margin-top:2px;
}

.import-subtext {
    display:block;
    margin-top:3px;
    color:#666666;
    font-size:12px;
}

.import-movement {
    display:block;
    white-space:nowrap;
}

.statement-period {
    display:block;
    white-space:nowrap;
}

/*
|--------------------------------------------------------------------------
| IMPORT HISTORY FILTERS
|--------------------------------------------------------------------------
*/

.bank-import-filter-grid {
    grid-template-columns:1fr 2fr;
}

/*
|--------------------------------------------------------------------------
| BANK RULES
|--------------------------------------------------------------------------
*/

.bank-rule-filter-grid {
    display:grid;
    grid-template-columns:1.2fr 1.2fr 1fr 1.6fr;
    gap:12px;
}

.bank-rules-table th:nth-child(1),
.bank-rules-table td:nth-child(1) {
    width:38%;
}

.bank-rules-table th:nth-child(2),
.bank-rules-table td:nth-child(2) {
    width:16%;
}

.bank-rules-table th:nth-child(3),
.bank-rules-table td:nth-child(3) {
    width:26%;
}

.bank-rules-table th:nth-child(4),
.bank-rules-table td:nth-child(4) {
    width:10%;
}

.bank-rules-table th:nth-child(5),
.bank-rules-table td:nth-child(5) {
    width:10%;
    text-align:right;
}

.rule-name {
    display:block;
    font-weight:700;
}

.rule-match {
    display:block;
    margin-top:3px;
}

.rule-source-mobile {
    display:none;
}

.rule-destination-type {
    display:block;
    font-weight:700;
}

.rule-destination-name {
    display:block;
    margin-top:3px;
}

.rule-subtext {
    display:block;
    margin-top:3px;
    color:#666666;
    font-size:12px;
}

.rule-status {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:72px;
    padding:5px 10px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}

.rule-status-active {
    background:#dcfce7;
    color:#166534;
}

.rule-status-inactive {
    background:#e5e7eb;
    color:#374151;
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width:600px) {

/*
|--------------------------------------------------------------------------
| BANK TRANSACTIONS INDEX
|--------------------------------------------------------------------------
*/

.bank-transactions-index .bank-last-import-title {
    overflow:hidden;
    text-overflow:ellipsis;
}

.bank-transactions-index .bank-last-import-name,
.bank-transactions-index .bank-last-import-account {
    display:inline;
}

@media (max-width:600px) {
    .bank-transactions-index .bank-last-import-account {
        display:none;
    }
}


    /*
    |--------------------------------------------------------------------------
    | DASHBOARD
    |--------------------------------------------------------------------------
    */

    .bank-transactions-page .dashboard {
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:6px;
        margin-bottom:24px;
    }

    .bank-transactions-page .dashboard-card {
        min-width:0;
        padding:10px 3px;
        border-radius:6px;
    }

    .bank-transactions-page .dashboard-card h3 {
        margin:0;
        font-size:clamp(13px, 3.8vw, 18px);
        line-height:1.15;
        letter-spacing:-0.3px;
        white-space:nowrap;
    }

    .bank-transactions-page .dashboard-card p {
        margin:4px 0 0;
        font-size:10px;
        line-height:1.15;
    }

/*
|--------------------------------------------------------------------------
| BANK TRANSACTIONS INDEX
|--------------------------------------------------------------------------
*/

.bank-transactions-index .dashboard-card {
    padding:9px 3px;
}

.bank-transactions-index .dashboard-card h3 {
    font-size:clamp(12px, 3.4vw, 17px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.bank-transactions-index .dashboard-card p {
    font-size:9px;
    line-height:1.15;
}


    /*
    |--------------------------------------------------------------------------
    | FILTERS
    |--------------------------------------------------------------------------
    */

    .bank-filter-grid {
        grid-template-columns:1fr;
        gap:10px;
    }

    .bank-filter-actions {
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-top:14px;
    }


    /*
    |--------------------------------------------------------------------------
    | TABLE
    |--------------------------------------------------------------------------
    */

    .bank-table {
        table-layout:fixed;
        font-size:12px;
    }

    .bank-table .bank-col-date {
        width:20%;
    }

    .bank-table .bank-col-description {
        width:55%;
    }

    .bank-table .bank-col-movement {
        width:25%;
        text-align:right;
    }

    .bank-table .bank-col-action {
        display:none;
    }

    .bank-table th,
    .bank-table td {
        padding:9px 5px;
    }

    .bank-table th {
        font-size:11px;
    }

    .bank-table td.bank-col-movement {
        text-align:right;
    }

    .bank-transaction-bank {
        display:none;
    }

    .bank-transaction-bank-mobile {
        display:block;
        font-weight:600;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .bank-transaction-description {
        display:-webkit-box;
        margin-top:2px;
        overflow:hidden;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        line-clamp:2;
        line-height:1.25;
    }

    .bank-transaction-reference {
        display:none;
    }

    .bank-transaction-import {
        margin-top:2px;
        font-size:10px;
    }

    .movement-type {
        font-size:10px;
        white-space:nowrap;
    }

    .movement-amount {
        margin-top:2px;
        font-size:12px;
        white-space:nowrap;
    }

/*
|--------------------------------------------------------------------------
| ALL TRANSACTIONS
|--------------------------------------------------------------------------
*/

.bank-all-table .bank-col-date {
    width:20%;
}

.bank-all-table .bank-col-description {
    width:55%;
}

.bank-all-table .bank-col-movement {
    width:25%;
}

.bank-all-table .bank-col-status,
.bank-all-table .bank-col-allocation,
.bank-all-table .bank-col-action {
    display:none;
}

.bank-transaction-meta {
    display:block;
    margin-top:3px;
    font-size:10px;
    font-weight:600;
    line-height:1.2;
}

/*
|--------------------------------------------------------------------------
| IMPORT HISTORY
|--------------------------------------------------------------------------
*/

.bank-import-table {
    table-layout:fixed;
    font-size:12px;
}

.bank-import-table .bank-col-date {
    width:20%;
}

.bank-import-table .bank-col-file {
    width:45%;
}

.bank-import-table .bank-col-statement {
    width:35%;
}

.bank-import-table .bank-col-movement,
.bank-import-table .bank-col-action {
    display:none;
}

.bank-import-table th,
.bank-import-table td {
    padding:9px 5px;
}

.bank-import-table th {
    font-size:11px;
}

.import-bank {
    display:none;
}

.import-bank-mobile {
    display:block;
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.import-file {
    display:-webkit-box;
    margin-top:2px;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    line-height:1.2;
}

.import-subtext {
    margin-top:2px;
    font-size:10px;
}

.statement-period {
    white-space:normal;
    line-height:1.2;
}

/*
|--------------------------------------------------------------------------
| BANK RULES
|--------------------------------------------------------------------------
*/

.bank-rule-filter-grid {
    grid-template-columns:1fr;
    gap:10px;
}

.bank-rules-table {
    table-layout:fixed;
    font-size:12px;
}

.bank-rules-table th:nth-child(1),
.bank-rules-table td:nth-child(1) {
    width:52%;
}

.bank-rules-table th:nth-child(2),
.bank-rules-table td:nth-child(2) {
    display:none;
}

.bank-rules-table th:nth-child(3),
.bank-rules-table td:nth-child(3) {
    width:30%;
}

.bank-rules-table th:nth-child(4),
.bank-rules-table td:nth-child(4) {
    width:18%;
    text-align:right;
}

.bank-rules-table th:nth-child(5),
.bank-rules-table td:nth-child(5) {
    display:none;
}

.bank-rules-table th,
.bank-rules-table td {
    padding:9px 5px;
    vertical-align:top;
}

.bank-rules-table th {
    font-size:11px;
}

.bank-rules-table .rule-subtext {
    display:none;
}

.rule-name {
    line-height:1.2;
}

.rule-match {
    display:-webkit-box;
    margin-top:3px;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    line-height:1.2;
}

.rule-source-mobile {
    display:block;
    margin-top:3px;
    color:#666666;
    font-size:10px;
    line-height:1.2;
}

.rule-destination-name {
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    line-height:1.2;
}

.rule-status {
    min-width:0;
    padding:4px 7px;
    font-size:10px;
}

    /*
    |--------------------------------------------------------------------------
    | PAGINATION
    |--------------------------------------------------------------------------
    */

    .bank-pagination {
        grid-template-columns:auto 1fr auto;
        gap:6px;
        margin-top:16px;
    }

    .bank-pagination-current {
        font-size:12px;
        white-space:nowrap;
    }

    .bank-pagination .btn-primary,
    .bank-pagination .btn-secondary {
        width:76px !important;
        min-width:76px !important;
        height:auto !important;
        min-height:0 !important;
        padding:6px 8px !important;
        font-size:12px !important;
        line-height:1.2 !important;
    }
}