/* =============================================================
   Reusable design components (Figma "Table/ Cell",
   "Table/Pagination", "Button/ Reguler", "Aksi Vendor")
   =============================================================
   - .content-card  — white surface for plain content over the
                      dark page background
   - .dt-card       — white card shell for DataTables
   - .dt-table      — table cell styles (header + rows)
   - pagination     — DataTables full_numbers buttons (40×40)
   - .dt-action-menu — per-row "Aksi" dropdown panel
   ============================================================= */

/* =============================================================
   Content card — for pages with plain forms/text (not tables)
   ============================================================= */
.content-card {
    background: var(--dn-white, #f9fafb);
    border-radius: var(--dn-radius-card, 24px);
    box-shadow: var(--dn-shadow-inner, inset 0 0 0 1px rgba(0, 0, 0, .1));
    padding: 24px;
}

/* =============================================================
   Page title sub-label + toolbar (Figma "Title" & "Frame 8025")
   ============================================================= */
.main-title .main-title__sub {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    margin-left: 10px;
}

.dt-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 24px 0 20px;
}

/* Search pill (Figma "Button/ Cari" — 262×40, #F6F6F8) */
.dt-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    min-width: 262px;
    padding: 0 16px;
    background: #f6f6f8;
    border-radius: 99px;
    color: #5d5d5d;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

.dt-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 400;
    color: #202529;
}

.dt-search input::placeholder {
    color: #a0aec0;
}

.dt-search__reset {
    background: transparent;
    border: none;
    color: #108a86;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* =============================================================
   Design button base (Figma "Button/ Reguler") — used by
   partials/buttons.php. Base styles live here so the component
   works on every page (dashboard pages also load them via
   dashboard-new.css — identical rules, no conflict).
   ============================================================= */
.dn-btn-icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--dn-white, #f9fafb);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--dn-tosca-1, #108a86);
    box-shadow: var(--dn-shadow-inner, inset 0 0 0 1px rgba(0, 0, 0, .1));
    flex-shrink: 0;
}

.dn-btn-text {
    display: flex; align-items: center; gap: 6px;
    height: 40px;
    padding: 0 16px;
    background: var(--dn-white, #f9fafb);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dn-tosca-1, #108a86);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--dn-shadow-inner, inset 0 0 0 1px rgba(0, 0, 0, .1));
}

/* Solid Button/ Reguler variants (Figma #3AA398 + #3AB54A) */
.dn-btn-text--primary,
.dn-btn-text--green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    box-shadow: none;
}

.dn-btn-text--primary {
    background: #3aa398;
}

.dn-btn-text--primary:hover {
    background: #108a86;
    color: #fff;
}

.dn-btn-text--green {
    background: #3ab54a;
}

.dn-btn-text--green:hover {
    background: #2d9c3b;
    color: #fff;
}

/* =============================================================
   DataTable card — wraps the scrollable table (Figma Frame 8033)
   ============================================================= */
.dt-card {
    max-width: 100%;
    min-width: 0;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

/* Horizontal scroll stays inside the content column and never overlaps the sidebar. */
.dt-table-wrap {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.dt-table-wrap .dataTables_wrapper {
    min-width: 0;
}

.dt-table-wrap .dt-table {
    width: 100%;
    min-width: 900px; /* keep columns readable when scrolling */
    margin-bottom: 0;
    border-collapse: collapse;
}

.dt-table-wrap .dt-table--min-1600 {
    min-width: 1600px;
}

.dt-table-wrap .dt-table--min-1720 {
    min-width: 1720px;
}

/* Header cells — Figma "Table/ Cell (Header=True)":
   #F9FAFB fill, 14px/700 #202529 label, sort arrows #202529 */
.dt-table thead th {
    background: #f9fafb;
    color: #202529;
    font-size: 14px;
    font-weight: 700;
    padding: 16px 20px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #e1e5eb;
    border-top: none;
}

.dt-table thead th.sorting,
.dt-table thead th.sorting_asc,
.dt-table thead th.sorting_desc {
    background-image: none;
    position: relative;
    padding-right: 28px;
}

.dt-table thead th.sorting::after,
.dt-table thead th.sorting_asc::after,
.dt-table thead th.sorting_desc::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 8px;
    opacity: .7;
}

.dt-table thead th.sorting::after {
    background: url("data:image/svg+xml,%3Csvg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 0L6 3H0L3 0Z' fill='%23202529'/%3E%3Cpath d='M3 8L6 5H0L3 8Z' fill='%23C1C8D0'/%3E%3C/svg%3E") no-repeat center;
}

.dt-table thead th.sorting_asc::after {
    background: url("data:image/svg+xml,%3Csvg width='6' height='4' viewBox='0 0 6 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 0L6 4H0L3 0Z' fill='%23202529'/%3E%3C/svg%3E") no-repeat center;
}

.dt-table thead th.sorting_desc::after {
    background: url("data:image/svg+xml,%3Csvg width='6' height='4' viewBox='0 0 6 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4L6 0H0L3 4Z' fill='%23202529'/%3E%3C/svg%3E") no-repeat center;
}

/* Body cells — Figma "Table/ Cell (Default)":
   12px/400 #202529, ~48-67px rows, zebra #F9FAFB */
.dt-table tbody td {
    color: #202529;
    font-size: 13px;
    font-weight: 400;
    padding: 14px 20px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f2f5;
    white-space: nowrap;
}

.dt-table tbody tr:nth-child(even) {
    background: #f9fafb;
}

.dt-table tbody tr:hover {
    background: #eef4f3;
}

/* =============================================================
   Pagination + length + info (Figma "Table/Pagination")
   DataTables sDom: '<"dt-table-foot"l i p>t'
   ============================================================= */
.dt-table-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 20px;
    background: #ffffff;
    border-top: 1px solid #e1e5eb;
    /* stays visible at the left edge while the table scrolls
       horizontally inside .dt-table-wrap */
    position: sticky;
    left: 0;
    z-index: 2;
}

/* "Tampilkan" label + length select */
.dt-table-foot .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: #5d5d5d;
}

.dt-table-foot .dataTables_length select {
    height: 40px;
    width: 62px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 400;
    color: #202529;
    background-color: #ffffff;
    border: 1px solid #e1e5eb;
    border-radius: 8px;
    cursor: pointer;
    outline: none;
}

/* "Showing X to Y of Z entries" */
.dt-table-foot .dataTables_info {
    padding: 0;
    font-size: 12px;
    font-weight: 400;
    color: #5d5d5d;
    margin-right: auto;
}

/* Pagination buttons — 40×40 pills (Figma Table/ Pagination) */
.dt-table-foot .dataTables_paginate {
    display: flex;
    gap: 4px;
    padding: 0;
}

.dt-table-foot .paginate_button {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid #e1e5eb;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    color: #202529;
    cursor: pointer;
    margin: 0;
}

.dt-table-foot .paginate_button:hover:not(.disabled) {
    background: #f9fafb;
    color: #202529;
}

.dt-table-foot .paginate_button.current {
    background: #f9fafb;
    border-color: #108a86;
    color: #202529;
    font-weight: 700;
}

.dt-table-foot .paginate_button.disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* =============================================================
   Per-row action dropdown (Figma "Aksi Vendor")
   Trigger: 32×32 icon button with three-dot icon.
   Panel: white, radius 12, items 40px with tosca icon + label.
   ============================================================= */
.dt-action-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    border: 1px solid #e1e5eb;
    border-radius: 8px;
    color: #108a86;
    cursor: pointer;
}

.dt-action-btn:hover {
    background: #eef4f3;
}

.dt-action-menu {
    min-width: 190px;
    background: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(16, 34, 43, .18);
}

.dt-action-menu .dt-action-item {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    margin: 0;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #202529;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.dt-action-menu .dt-action-item + .dt-action-item {
    margin-top: 4px;
}

.dt-action-menu .dt-action-item:hover {
    background: #eef4f3;
    color: #202529;
}

.dt-action-menu .dt-action-item svg {
    flex-shrink: 0;
    color: #108a86;
}

.dt-action-menu .dt-action-item.hidden {
    display: none;
}

/* =============================================================
   User page (Figma node 4090:60477)
   ============================================================= */
.users-page {
    min-width: 0;
    overflow-x: hidden;
}

.users-page .users-toolbar {
    margin-top: 0;
}

.users-page .dt-search__reset {
    display: none;
}

@media (max-width: 600px) {
    .users-page .users-toolbar,
    .users-page .users-toolbar .dn-btn-text,
    .users-page .users-toolbar .dt-search {
        width: 100%;
    }

    .users-page .dt-search {
        min-width: 0;
    }
}

/* =============================================================
   Vendor bank detail (Figma node 4148:141845)
   ============================================================= */
.bank-vendor-page {
    padding-bottom: 32px;
}

.bank-vendor-page .main-title .header-content {
    width: 100%;
    align-items: center;
    gap: 24px;
}

.bank-vendor-page .main-title h5 {
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
}

.bank-vendor-table-card {
    border-radius: 0;
    box-shadow: none;
}

.bank-vendor-table {
    min-width: 900px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    background: #eef0f2;
}

.bank-vendor-table thead th {
    height: 64px;
    background: #f9fafb;
    border-bottom: 1px solid #e1e5eb;
}

.bank-vendor-table tbody td {
    height: 66px;
    background: #f9fafb;
    border-top: 1px solid #e1e5eb;
    border-bottom: 1px solid #e1e5eb;
}

.bank-vendor-table tbody td:first-child {
    border-left: 1px solid #e1e5eb;
    border-radius: 8px 0 0 8px;
}

.bank-vendor-table tbody td:last-child {
    border-right: 1px solid #e1e5eb;
    border-radius: 0 8px 8px 0;
}

.bank-vendor-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bank-vendor-btn {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.bank-vendor-btn--edit {
    color: #202529;
    background: #ffffff;
    border: 1px solid #e1e5eb;
}

.bank-vendor-btn--edit:hover {
    background: #eef4f3;
    border-color: #3aa398;
}

.bank-vendor-btn--delete {
    color: #ffffff;
    background: #ce2029;
    border: 1px solid #ce2029;
}

.bank-vendor-btn--delete:hover {
    background: #aa1820;
}

.bank-vendor-error {
    display: none;
    text-align: center;
}

.bank-vendor-form-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

.bank-vendor-form-row label {
    margin: 0;
    color: #202529;
    font-size: 14px;
    font-weight: 700;
}

.bank-vendor-modal {
    width: min(540px, calc(100% - 32px));
    max-width: 540px;
}

@media (max-width: 767px) {
    .bank-vendor-page .main-title .header-content {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
    }

    .bank-vendor-page .main-title .dn-btn-text {
        width: 100%;
    }

    .bank-vendor-table {
        min-width: 760px;
    }

    .bank-vendor-form-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .bank-vendor-page .dt-table-foot {
        align-items: flex-start;
        flex-direction: column;
    }
}