/* Merchant payment breakdown sidebar ("Payout Details") — opened from a row of the
   Connected merchants > Payments table. Markup: dispatchSettings.scala.html (#sd-payout-sidebar).
   Content is filled by merchant.payment.breakdown.controller.js. */

.sd-payout-sidebar {
    position: fixed;
    top: 64px; /* sits below .main-top-nav (64px) so navigation stays reachable */
    right: 0;
    z-index: 1000; /* below Bootstrap modals (1050) so the order detail modal opens on top */
    width: min(600px, 100vw);
    height: calc(100vh - 64px);
    display: flex;
    border-top: 1px solid var(--sd-neutral-300);
    flex-direction: column;
    background: var(--sd-neutral-100);
    box-shadow: -4px 2px 10px -2px rgba(51, 51, 51, 0.1), 0px 5px 10px -1px rgba(51, 51, 51, 0.04);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.sd-payout-sidebar.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .sd-payout-sidebar,
    .sd-payout-sidebar.open {
        transition: none;
    }
}

/* Header */
.sd-payout-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    flex-shrink: 0;
}

.sd-payout-header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.sd-payout-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sd-payout-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sd-neutral-900);
    font-size: 18px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.02em;
}

.sd-payout-status {
    flex-shrink: 0;
    padding: 5px 8px;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 500;
    line-height: 110%;
}

.sd-payout-status--paid {
    background: var(--sd-status-green-bg);
    color: #045040;
}

.sd-payout-status--failed {
    background: #FEF3F2;
    color: #B42318;
}

.sd-payout-subtitle {
    display: flex;
    flex-direction: column;
    color: var(--sd-order-status);
    font-size: 15px;
    font-weight: 400;
    line-height: 140%;
}

.sd-payout-subtitle-id {
    overflow-wrap: anywhere; /* only breaks if the panel is too narrow for the whole uuid */
}

.sd-payout-close {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: none;
    border-radius: 99px;
    background: transparent;
    cursor: pointer;
}

.sd-payout-close:hover {
    background: var(--sd-neutral-260);
}

.sd-payout-close .material-symbols-rounded {
    font-size: 20px;
    color: var(--sd-neutral-700-route);
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20;
    line-height: 1;
}

/* Scrolling body: summary + order list */
.sd-payout-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Summary card */
.sd-payout-summary {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 12px 16px;
    border: 1px solid var(--sd-map-border);
    border-radius: 12px;
}

.sd-payout-metric {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sd-payout-metric-label {
    color: var(--driver-scheme-default-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
}

.sd-payout-metric-value {
    color: var(--sd-neutral-900);
    font-size: 20px;
    font-weight: 700;
    line-height: 130%;
}

.sd-payout-summary-divider {
    width: 1px;
    height: 32px;
    flex-shrink: 0;
    background: var(--sd-neutral-400-route);
}

/* Search + export */
.sd-payout-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sd-payout-search {
    flex: 1;
    min-width: 0;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--sd-neutral-400-route);
    border-radius: 8px;
    background: var(--sd-neutral-100);
}

.sd-payout-search:focus-within {
    border-color: var(--sd-dark-green);
}

.sd-payout-search .material-symbols-rounded,
.sd-payout-export .material-symbols-rounded {
    flex-shrink: 0;
    font-size: 20px;
    line-height: 1;
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20;
}

.sd-payout-search .material-symbols-rounded {
    color: var(--driver-scheme-default-color);
}

.sd-payout-search input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--sd-neutral-950);
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.01em;
}

.sd-payout-search input::placeholder {
    color: var(--driver-scheme-default-color);
}

.sd-payout-export {
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    border: 1px solid var(--sd-neutral-400-route);
    border-radius: 8px;
    background: var(--sd-neutral-100);
    color: var(--sd-neutral-950);
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.01em;
    cursor: pointer;
}

.sd-payout-export:hover {
    background: var(--sd-neutral-200);
}

.sd-payout-export .material-symbols-rounded {
    color: var(--sd-neutral-700-route);
}

/* Orders table (DataTables). Scoped by id to beat the global dataTable / table.css rules. */
#sd-payout-sidebar .sd-payout-orders-table {
    width: 100% !important;
    table-layout: fixed;
    margin: 0 !important;
    border: 1px solid var(--sd-neutral-400-route) !important;
    border-radius: 12px;
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
}

#sd-payout-sidebar .sd-payout-orders-table thead th {
    padding: 10px 20px !important;
    background: var(--sd-card-hover) !important;
    border-bottom: 1px solid var(--sd-neutral-400-route) !important;
    color: var(--sd-neutral-700-route) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px;
    text-align: left !important;
}

#sd-payout-sidebar .sd-payout-orders-table tbody td {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--sd-neutral-400-route) !important;
    color: var(--sd-order-status) !important;
    font-size: 13px !important;
    line-height: 140%;
    vertical-align: middle !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sd-payout-sidebar .sd-payout-orders-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Column widths: 1 Order #, 2 Customer, 3 Date & time, 4 Total amount */
#sd-payout-sidebar .sd-payout-orders-table th:nth-child(1),
#sd-payout-sidebar .sd-payout-orders-table td:nth-child(1) { width: 22%; }

#sd-payout-sidebar .sd-payout-orders-table th:nth-child(2),
#sd-payout-sidebar .sd-payout-orders-table td:nth-child(2) { width: 32%; }

#sd-payout-sidebar .sd-payout-orders-table th:nth-child(3),
#sd-payout-sidebar .sd-payout-orders-table td:nth-child(3) { width: 25%; }

#sd-payout-sidebar .sd-payout-orders-table th:nth-child(4),
#sd-payout-sidebar .sd-payout-orders-table td:nth-child(4) {
    width: 21%;
    text-align: right !important;
}

#sd-payout-sidebar .sd-payout-order-link {
    color: var(--sd-darker-green) !important;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

/* Footer: "Showing 1-12 from 24 orders" left, numbered pager right */
#sd-payout-sidebar .sd-payout-orders-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 20px;
}

#sd-payout-sidebar .sd-payout-orders-footer .dataTables_info,
#sd-payout-sidebar .sd-payout-orders-footer .dataTables_paginate {
    float: none;
    padding: 0;
    color: var(--sd-order-status);
    font-size: 13px;
    line-height: 140%;
}

#sd-payout-sidebar .dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 6px;
}

#sd-payout-sidebar .dataTables_paginate > span {
    display: flex;
    align-items: center;
    gap: 6px;
}

#sd-payout-sidebar .dataTables_paginate .paginate_button {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--sd-neutral-400-route);
    border-radius: 6px;
    background: var(--sd-neutral-100) !important;
    color: var(--sd-neutral-700-route) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    box-shadow: none;
}

#sd-payout-sidebar .dataTables_paginate .paginate_button:hover {
    background: var(--sd-neutral-200) !important;
    color: var(--sd-neutral-700-route) !important;
}

#sd-payout-sidebar .dataTables_paginate .paginate_button.current,
#sd-payout-sidebar .dataTables_paginate .paginate_button.current:hover {
    border-color: var(--sd-dark-green);
    background: var(--sd-dark-green) !important;
    color: #FFFFFF !important;
    font-weight: 500;
}

#sd-payout-sidebar .dataTables_paginate .paginate_button.disabled,
#sd-payout-sidebar .dataTables_paginate .paginate_button.disabled:hover {
    background: var(--sd-neutral-100) !important;
    border: 1px solid var(--sd-neutral-400-route);
    color: var(--sd-neutral-500) !important;
    cursor: default;
}

#sd-payout-sidebar .dataTables_paginate .paginate_button .material-symbols-rounded {
    font-size: 20px;
    line-height: 1;
}

#sd-payout-sidebar .dataTables_paginate .ellipsis {
    color: var(--driver-scheme-default-color);
}

/* Empty state row ("No orders") */
#sd-payout-sidebar .sd-payout-orders-table td.dataTables_empty {
    padding: 32px 20px !important;
    text-align: center !important;
    white-space: normal;
}

[data-theme="dark"] .sd-payout-status--paid {
    background: rgba(2, 122, 72, 0.2);
    color: #6CE9A6;
}

[data-theme="dark"] .sd-payout-status--failed {
    background: rgba(180, 35, 24, 0.2);
    color: #FDA29B;
}

@media (max-width: 640px) {
    .sd-payout-header,
    .sd-payout-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sd-payout-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    #sd-payout-sidebar .sd-payout-orders-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}