/* =========================================================
   AMAKA FINANCE - TRANSACTIONS
   REDESIGN 2026
========================================================= */

.amaka-transactions-page {
    padding: 26px;
}

/* =========================================================
   PAGE HEADER
========================================================= */

.amaka-transactions-page .amaka-page-header {
    position: relative;
    overflow: hidden;

    padding: 26px 28px;
    margin-bottom: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    background:
        radial-gradient(circle at 92% 15%, rgba(45, 212, 191, .12), transparent 22%),
        linear-gradient(135deg, #ffffff 0%, #f7fbfb 100%);

    border: 1px solid #dbe7e8;
    border-radius: 16px;

    box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
}

.amaka-transactions-page .amaka-page-header h1 {
    margin: 2px 0 6px;

    color: #0f172a;

    font-size: 28px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -.6px;
}

.amaka-transactions-page .amaka-page-header p {
    margin: 0;

    color: #64748b;

    font-size: 11px;
    line-height: 1.6;
}

.amaka-transactions-page .amaka-page-actions {
    flex-shrink: 0;
}

.amaka-transactions-page .amaka-page-actions .amaka-btn {
    min-height: 40px;
    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #075e58;
    border-radius: 10px;

    background: linear-gradient(135deg, #087c73, #075e58);

    color: #fff;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;

    box-shadow: 0 8px 18px rgba(8, 124, 115, .16);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.amaka-transactions-page .amaka-page-actions .amaka-btn:hover {
    transform: translateY(-1px);

    box-shadow: 0 11px 22px rgba(8, 124, 115, .22);
}

/* =========================================================
   NOTICE
========================================================= */

.amaka-transactions-page .amaka-notice {
    margin-bottom: 16px;
    padding: 12px 15px;

    border-radius: 10px;

    font-size: 10px;

    box-shadow: 0 5px 14px rgba(15, 23, 42, .025);
}

/* =========================================================
   SUMMARY
========================================================= */

.amaka-transaction-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 20px;
}

.amaka-summary-card {
    position: relative;
    overflow: hidden;

    min-height: 128px;

    padding: 20px 21px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border: 1px solid #dce7eb;
    border-radius: 15px;

    background: #ffffff;

    box-shadow: 0 8px 24px rgba(15, 23, 42, .035);
}

.amaka-summary-card::after {
    content: "";

    position: absolute;
    right: -34px;
    top: -34px;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    background: rgba(15, 118, 110, .055);
}

.amaka-summary-card:nth-child(1) {
    background: linear-gradient(135deg, #ffffff, #f0fdfa);
}

.amaka-summary-card:nth-child(2) {
    background: linear-gradient(135deg, #ffffff, #fff8f1);
}

.amaka-summary-card:nth-child(3) {
    background: linear-gradient(135deg, #ffffff, #f4f7ff);
}

.amaka-summary-card > span {
    position: relative;
    z-index: 1;

    margin-bottom: 11px;

    color: #64748b;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .35px;

    text-transform: uppercase;
}

.amaka-summary-card strong {
    position: relative;
    z-index: 1;

    margin-bottom: 7px;

    color: #0f172a;

    font-size: 24px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.35px;
}

.amaka-summary-card strong.income {
    color: #059669;
}

.amaka-summary-card strong.expense {
    color: #e07a00;
}

.amaka-summary-card small {
    position: relative;
    z-index: 1;

    color: #718096;

    font-size: 9px;
}

/* =========================================================
   TRANSACTION PANEL
========================================================= */

.amaka-transactions-panel {
    overflow: hidden;

    margin-bottom: 24px;
    padding: 20px;

    border: 1px solid #dce7eb;
    border-radius: 15px;

    background: #ffffff;

    box-shadow: 0 10px 28px rgba(15, 23, 42, .04);
}

/* =========================================================
   TOOLBAR / FILTER
========================================================= */

.amaka-transaction-toolbar {
    margin-bottom: 16px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;
}

.amaka-transaction-toolbar h2 {
    margin: 0 0 5px;

    color: #0f172a;

    font-size: 14px;
    font-weight: 900;
    letter-spacing: -.1px;

    text-transform: uppercase;
}

.amaka-transaction-toolbar p {
    margin: 0;

    color: #64748b;

    font-size: 10px;
}

.amaka-transaction-filter {
    display: flex;
    align-items: center;

    gap: 7px;
}

.amaka-transaction-filter input,
.amaka-transaction-filter select {
    height: 38px;

    padding: 0 11px;

    border: 1px solid #dbe4ee;
    border-radius: 9px;

    background: #f8fafc;

    color: #334155;

    font-size: 10px;

    outline: none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.amaka-transaction-filter input {
    width: 185px;
}

.amaka-transaction-filter input:focus,
.amaka-transaction-filter select:focus {
    border-color: #14b8a6;

    background: #fff;

    box-shadow: 0 0 0 3px rgba(20, 184, 166, .08);
}

.amaka-transaction-filter button {
    height: 38px;

    padding: 0 15px;

    border: 1px solid #075e58;
    border-radius: 9px;

    background: #075e58;

    color: #fff;

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .15s ease,
        background .15s ease;
}

.amaka-transaction-filter button:hover {
    background: #064e49;
    transform: translateY(-1px);
}

.amaka-filter-reset {
    padding: 0 5px;

    color: #64748b;

    font-size: 9px;
    font-weight: 700;

    text-decoration: none;
}

/* =========================================================
   TABLE
========================================================= */

.amaka-transactions-panel .amaka-table-wrap {
    overflow-x: auto;

    border: 1px solid #e5edf1;
    border-radius: 11px;
}

.amaka-transactions-panel table {
    width: 100%;

    border-collapse: collapse;

    background: #ffffff;
}

.amaka-transactions-panel thead {
    background: #f7fafb;
}

.amaka-transactions-panel th {
    padding: 11px 12px;

    border-bottom: 1px solid #e4ebef;

    color: #64748b;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .25px;

    text-align: left;
    text-transform: uppercase;

    white-space: nowrap;
}

.amaka-transactions-panel td {
    padding: 13px 12px;

    border-bottom: 1px solid #edf2f4;

    color: #334155;

    font-size: 10px;

    vertical-align: middle;
}

.amaka-transactions-panel tbody tr {
    transition: background .15s ease;
}

.amaka-transactions-panel tbody tr:hover {
    background: #f8fcfb;
}

.amaka-transactions-panel tbody tr:last-child td {
    border-bottom: 0;
}

/* =========================================================
   TRANSACTION NAME / TYPE
========================================================= */

.amaka-transaction-name {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.amaka-transaction-name strong {
    color: #0f172a;

    font-size: 10px;
    font-weight: 800;
}

.amaka-transaction-type {
    width: fit-content;

    padding: 4px 7px;

    border-radius: 999px;

    font-size: 8px;
    line-height: 1;
    font-weight: 800;
}

.amaka-transaction-type.income {
    border: 1px solid #bbf7d0;

    background: #ecfdf5;

    color: #047857;
}

.amaka-transaction-type.expense {
    border: 1px solid #fed7aa;

    background: #fff7ed;

    color: #c2410c;
}

.amaka-transaction-type.transfer {
    border: 1px solid #bfdbfe;

    background: #eff6ff;

    color: #2563eb;
}

/* =========================================================
   AMOUNT / PROOF
========================================================= */

.amaka-amount {
    white-space: nowrap;

    font-weight: 900;
}

.amaka-amount.income {
    color: #059669 !important;
}

.amaka-amount.expense {
    color: #e11d48 !important;
}

.amaka-amount.transfer {
    color: #2563eb !important;
}

.amaka-proof-link {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 0 8px;

    border: 1px solid #ccfbf1;
    border-radius: 7px;

    background: #f0fdfa;

    color: #087c73;

    font-size: 9px;
    font-weight: 800;

    text-decoration: none;
}

.amaka-proof-link:hover {
    background: #ccfbf1;
}

.amaka-no-proof {
    color: #a1aebf;
}

/* =========================================================
   EDIT / DELETE BUTTONS
========================================================= */

.amaka-row-actions {
    display: flex;
    align-items: center;

    gap: 6px;

    white-space: nowrap;
}

.amaka-edit-link,
.amaka-delete-link,
.amaka-cancel-transfer-link {
    min-height: 29px;

    padding: 0 9px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    font-size: 9px;
    line-height: 1;
    font-weight: 800;

    text-decoration: none !important;

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.amaka-edit-link {
    border: 1px solid #99f6e4;

    background: #f0fdfa;

    color: #087c73;
}

.amaka-edit-link:hover {
    border-color: #14b8a6;

    background: #087c73;

    color: #ffffff;

    transform: translateY(-1px);
}

.amaka-delete-link,
.amaka-cancel-transfer-link {
    border: 1px solid #fecaca;

    background: #fff5f5;

    color: #dc2626;
}

.amaka-delete-link:hover,
.amaka-cancel-transfer-link:hover {
    border-color: #dc2626;

    background: #dc2626;

    color: #ffffff;

    transform: translateY(-1px);
}

/* =========================================================
   RESPONSIVE - LIST
========================================================= */

@media (max-width: 1000px) {

    .amaka-transaction-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 700px) {

    .amaka-transactions-page {
        padding: 14px;
    }

    .amaka-transactions-page .amaka-page-header {
        padding: 20px;

        align-items: flex-start;
        flex-direction: column;
    }

    .amaka-transactions-page .amaka-page-header h1 {
        font-size: 23px;
    }

    .amaka-transactions-page .amaka-page-actions {
        width: 100%;
    }

    .amaka-transactions-page .amaka-page-actions .amaka-btn {
        width: 100%;
    }

    .amaka-transaction-summary {
        grid-template-columns: 1fr;
    }

    .amaka-transactions-panel {
        padding: 14px;
    }

    .amaka-transaction-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .amaka-transaction-filter input,
    .amaka-transaction-filter select,
    .amaka-transaction-filter button {
        width: 100%;
    }

    .amaka-row-actions {
        align-items: stretch;
        flex-direction: column;
    }
}


/* =========================================================
   FRONTEND TRANSACTION FORM
========================================================= */

.amaka-transaction-form-page {
    padding: 24px;

    max-width: 1050px;
}


/* FORM SECTION */

.amaka-form-section {
    margin-bottom: 16px;
}

.amaka-form-heading {
    margin-bottom: 20px;
}

.amaka-form-heading h2 {
    margin: 0 0 5px;

    font-size: 14px;

    color: #0f172a;

    text-transform: uppercase;
}

.amaka-form-heading p {
    margin: 0;

    color: #64748b;

    font-size: 11px;
}


/* TYPE */

.amaka-front-type-selector {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.amaka-front-type input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.amaka-front-type > span {
    min-height: 78px;

    padding: 16px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border: 1px solid #dbe4ee;
    border-radius: 9px;

    cursor: pointer;

    transition: .15s ease;
}

.amaka-front-type strong {
    margin-bottom: 5px;

    font-size: 13px;

    color: #334155;
}

.amaka-front-type small {
    color: #64748b;

    font-size: 10px;
}


.amaka-front-type.income
input:checked + span {

    border-color: #0d7b7b;

    background: #ecfdf5;
}

.amaka-front-type.income
input:checked + span strong {

    color: #047857;
}


.amaka-front-type.expense
input:checked + span {

    border-color: #f59e0b;

    background: #fff7ed;
}

.amaka-front-type.expense
input:checked + span strong {

    color: #c2410c;
}


/* GRID */

.amaka-front-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.amaka-front-field.full {
    grid-column: 1 / -1;
}


/* FIELDS */

.amaka-front-field label {
    display: block;

    margin-bottom: 7px;

    color: #334155;

    font-size: 11px;
    font-weight: 700;
}

.amaka-front-field label em {
    color: #dc2626;

    font-style: normal;
}

.amaka-front-field input,
.amaka-front-field select,
.amaka-front-field textarea {

    width: 100%;

    padding: 10px 11px;

    border: 1px solid #dbe4ee;
    border-radius: 7px;

    outline: none;

    background: #ffffff;

    color: #0f172a;

    font-size: 12px;
}

.amaka-front-field input,
.amaka-front-field select {
    height: 41px;
}

.amaka-front-field textarea {
    resize: vertical;

    min-height: 100px;
}

.amaka-front-field input:focus,
.amaka-front-field select:focus,
.amaka-front-field textarea:focus {

    border-color: #0d7b7b;

    box-shadow:
        0 0 0 2px
        rgba(13, 123, 123, .07);
}


/* MONEY */

.amaka-money-input {
    position: relative;
}

.amaka-money-input > span {
    position: absolute;

    left: 12px;
    top: 50%;

    transform: translateY(-50%);

    color: #64748b;

    font-size: 11px;
    font-weight: 700;
}

.amaka-money-input input {
    padding-left: 36px;
}


/* UPLOAD */

.amaka-upload-box {
    min-height: 85px;

    padding: 15px;

    display: flex;
    align-items: center;

    gap: 15px;

    border: 1px dashed #cbd5e1;
    border-radius: 8px;

    background: #f8fafc;
}

.amaka-upload-box input {
    width: auto;
    height: auto;

    max-width: 230px;

    padding: 0;

    border: 0;

    background: transparent;
}

.amaka-upload-box div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.amaka-upload-box strong {
    font-size: 11px;

    color: #334155;
}

.amaka-upload-box small {
    font-size: 9px;

    color: #94a3b8;
}


/* ACTION */

.amaka-form-actions {
    padding-bottom: 30px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 9px;
}

.amaka-cancel-button,
.amaka-save-button {

    min-height: 40px;

    padding: 0 17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
}

.amaka-cancel-button {
    border: 1px solid #dbe4ee;

    background: #ffffff;

    color: #475569;
}

.amaka-save-button {
    border: 1px solid #094949;

    background: #094949;

    color: #ffffff;

    cursor: pointer;
}


/* MOBILE */

@media (max-width: 700px) {

    .amaka-transaction-form-page {
        padding: 14px;

        max-width: none;
    }

    .amaka-front-type-selector,
    .amaka-front-form-grid {

        grid-template-columns: 1fr;

    }

    .amaka-front-field.full {
        grid-column: auto;
    }

    .amaka-form-actions {
        align-items: stretch;

        flex-direction: column-reverse;
    }

    .amaka-cancel-button,
    .amaka-save-button {

        width: 100%;

    }

}

/* =========================================================
   TRANSACTION NOTICES
========================================================= */

.amaka-notice {
    margin-bottom: 16px;

    padding: 13px 15px;

    display: flex;
    align-items: center;

    gap: 6px;

    border-radius: 8px;

    font-size: 11px;
}

.amaka-notice.success {
    border: 1px solid #a7f3d0;

    background: #ecfdf5;

    color: #047857;
}

.amaka-notice.warning {
    border: 1px solid #fed7aa;

    background: #fff7ed;

    color: #c2410c;
}


/* =========================================================
   TABLE ACTIONS
========================================================= */

.amaka-row-actions {
    display: flex;
    align-items: center;

    gap: 10px;

    white-space: nowrap;
}

.amaka-delete-link {
    color: #dc2626;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;
}

.amaka-delete-link:hover {
    text-decoration: underline;
}


/* =========================================================
   EXISTING PROOF
========================================================= */

.amaka-current-proof {
    margin-bottom: 10px;

    padding: 12px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    border: 1px solid #a7f3d0;
    border-radius: 8px;

    background: #f0fdf4;
}

.amaka-current-proof > div:first-child {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.amaka-current-proof strong {
    color: #166534;

    font-size: 11px;
}

.amaka-current-proof small {
    color: #64748b;

    font-size: 9px;
}

.amaka-proof-actions {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}

.amaka-proof-actions a,
.amaka-proof-actions button {

    padding: 6px 9px;

    border-radius: 5px;

    font-size: 9px;
    font-weight: 700;

    text-decoration: none;
}

.amaka-proof-actions a {
    border: 1px solid #99f6e4;

    background: #ffffff;

    color: #087c73;
}

.amaka-proof-actions button {
    border: 1px solid #fecaca;

    background: #ffffff;

    color: #dc2626;

    cursor: pointer;
}


@media (max-width: 600px) {

    .amaka-current-proof {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* =========================================================
   CANCEL TRANSFER
========================================================= */

.amaka-cancel-transfer-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 12px;

    border: 1px solid #fecaca;
    border-radius: 8px;

    background: #fff5f5;

    color: #dc2626;

    font-size: 13px;
    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.amaka-cancel-transfer-link:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}



/* =========================================================
   INTERNAL TRANSFER
========================================================= */

.amaka-transaction-type.transfer {
    background: #eff6ff;
    color: #2563eb;
}

.amaka-amount.transfer {
    color: #2563eb;
}

/* =========================================================
   FINAL LIST OVERRIDES
   Must remain at the end because legacy form CSS contains
   older table-action declarations.
========================================================= */

.amaka-transactions-page .amaka-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.amaka-transactions-page .amaka-edit-link,
.amaka-transactions-page .amaka-delete-link,
.amaka-transactions-page .amaka-cancel-transfer-link {
    min-height: 29px;
    padding: 0 9px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    font-size: 9px;
    line-height: 1;
    font-weight: 800;

    text-decoration: none !important;

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.amaka-transactions-page .amaka-edit-link {
    border: 1px solid #99f6e4;
    background: #f0fdfa;
    color: #087c73;
}

.amaka-transactions-page .amaka-edit-link:hover {
    border-color: #087c73;
    background: #087c73;
    color: #fff;
    transform: translateY(-1px);
}

.amaka-transactions-page .amaka-delete-link,
.amaka-transactions-page .amaka-cancel-transfer-link {
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #dc2626;
}

.amaka-transactions-page .amaka-delete-link:hover,
.amaka-transactions-page .amaka-cancel-transfer-link:hover {
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
    transform: translateY(-1px);
}