/* GridJS Mermaid Theme Styles - Essential base styling */
@import url('https://unpkg.com/gridjs@6.2.0/dist/theme/mermaid.min.css');

/* Custom GridJS overrides to integrate with Abstack theme */
.gridjs-wrapper {
    border-radius: 0.5rem;
    overflow: hidden;
}

.gridjs-head {
    /* background-color: var(--bs-light) !important; */
}

.gridjs-th {
    background-color: var(--bs-light) !important;
    font-weight: 600;
    /* padding: 0.75rem 1rem; */
    border-bottom: 1px solid var(--bs-border-color);
    position: relative;
}
th.gridjs-th-sort .gridjs-th-content {
    width: calc(100% - 25px) !important;
}

.gridjs-td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.gridjs-tr:hover .gridjs-td {
    background-color: var(--bs-gray-50) !important;
}

/* Fix search box centering */
.gridjs-search {
    /* margin-bottom: 1rem; */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gridjs-search input {
    border-radius: 0.5rem;
    border: 1px solid var(--bs-border-color);
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    max-width: 400px;
    width: 100%;
}

.gridjs-search input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
    outline: 0;
}

/* Add sorting icons using Remix icons */
.gridjs-th-sort {
    cursor: pointer;
    user-select: none;
}

.gridjs-th-sort::after {
    font-family: "remixicon";
    content: "\ea73"; /* ri-arrow-up-down-line */
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.4;
    font-size: 0.75rem;
    transition: opacity 0.2s ease;
}

.gridjs-th-sort:hover::after {
    opacity: 0.8;
}

.gridjs-th-sort[aria-sort="asc"]::after {
    content: "\ea75"; /* ri-arrow-up-line */
    opacity: 1;
    color: var(--bs-primary);
}

.gridjs-th-sort[aria-sort="desc"]::after {
    content: "\ea4b"; /* ri-arrow-down-line */
    opacity: 1;
    color: var(--bs-primary);
}

/* Pagination styling */
.gridjs-pagination {
    margin-top: 1rem;
}

.gridjs-pagination button {
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-white);
    color: var(--bs-body-color);
    padding: 0.375rem 0.75rem;
    margin: 0 0.125rem;
}

.gridjs-pagination button:hover {
    background-color: var(--bs-gray-100);
}

.gridjs-pagination button[disabled] {
    opacity: 0.65;
}

.gridjs-pagination button.gridjs-currentPage {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

/* Summary text styling */
.gridjs-summary {
    color: var(--bs-secondary);
    font-size: 0.875rem;
    text-align: center;
}

/* Mobile tab navigation — vertical stacked tabs in card headers */
@media (max-width: 767.98px) {
    .card-header .nav-tabs {
        flex-direction: column;
        border-bottom: none;
        gap: 0.25rem;
    }

    .card-header .nav-tabs .nav-item {
        width: 100%;
    }

    .card-header .nav-tabs .nav-link {
        border-radius: 0.375rem !important;
        border: 1px solid var(--bs-border-color);
        width: 100%;
        text-align: left;
    }

    .card-header .nav-tabs .nav-link.active {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
        color: #fff;
    }

    .card-header .nav-tabs .nav-link:not(.active):hover {
        background-color: var(--bs-gray-100);
        border-color: var(--bs-border-color);
    }
}

/* Mobile page header action buttons — full width stacked on small screens */
@media (max-width: 575.98px) {
    .page-header-actions {
        width: 100%;
        flex-direction: column !important;
    }

    .page-header-actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* Mobile pagination layout */
@media (max-width: 767.98px) {
    .gridjs-pagination {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .gridjs-pages {
        order: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }

    .gridjs-summary {
        order: 2;
        font-size: 0.8rem;
    }

    .gridjs-pagination button {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* Mobile responsive styles for purchase orders table */
@media (max-width: 767.98px) {
    /* Hide specific columns on mobile except PO Number, Status and Actions */
    #purchase-orders-table .gridjs-th:nth-child(2),
    #purchase-orders-table .gridjs-th:nth-child(3),
    #purchase-orders-table .gridjs-th:nth-child(5),
    #purchase-orders-table .gridjs-th:nth-child(6),
    #purchase-orders-table .gridjs-th:nth-child(7),
    #purchase-orders-table .gridjs-td:nth-child(2),
    #purchase-orders-table .gridjs-td:nth-child(3),
    #purchase-orders-table .gridjs-td:nth-child(5),
    #purchase-orders-table .gridjs-td:nth-child(6),
    #purchase-orders-table .gridjs-td:nth-child(7) {
        display: none;
    }

    /* Make first column wider to accommodate stacked content */
    #purchase-orders-table .gridjs-th:nth-child(1),
    #purchase-orders-table .gridjs-td:nth-child(1) {
        width: auto;
        min-width: 200px;
    }

    /* Style for stacked mobile content */
    .mobile-stacked-content {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    /* Legacy PO-specific classes */
    .mobile-stacked-content .po-number {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--bs-primary);
    }

    .mobile-stacked-content .vendor-name {
        font-size: 0.85rem;
        color: var(--bs-body-color);
    }

    .mobile-stacked-content .project-name {
        font-size: 0.8rem;
        color: var(--bs-secondary);
        font-style: italic;
    }

    /* Generic stacked content classes used by all other tables */
    .mobile-stacked-content .mobile-primary {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--bs-primary);
    }

    .mobile-stacked-content .mobile-secondary {
        font-size: 0.85rem;
        color: var(--bs-body-color);
    }

    .mobile-stacked-content .mobile-meta {
        font-size: 0.8rem;
        color: var(--bs-secondary);
    }

    /* Adjust action buttons for mobile - target the correct Actions column (8th column) */
    #purchase-orders-table .gridjs-td:nth-child(8) .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        width: 100%;
    }

    #purchase-orders-table .gridjs-td:nth-child(8) .btn-group .btn {
        flex: 0 0 auto;
        margin: 0;
        border-radius: 0.375rem !important;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    /* Ensure Actions column has proper width */
    #purchase-orders-table .gridjs-th:nth-child(8),
    #purchase-orders-table .gridjs-td:nth-child(8) {
        width: auto;
        min-width: 120px;
    }

    /* Make Actions column header centered */
    #purchase-orders-table .gridjs-th:nth-child(8) {
        text-align: center;
    }

    #purchase-orders-table .gridjs-td:nth-child(8) {
        text-align: center;
    }

    /* Make table more compact on mobile */
    #purchase-orders-table .gridjs-td {
        padding: 0.5rem 0.75rem;
        vertical-align: top;
    }

    /* Adjust column headers for mobile */
    #purchase-orders-table .gridjs-th:nth-child(1) {
        text-align: left;
    }
}

/* Mobile responsive styles for vendors table */
/* Columns: 1=Company Name(stacked), 2=Contact, 3=Email, 4=Phone, 5=Type, 6=Orders, 7=Actions */
@media (max-width: 767.98px) {
    #vendors-table .gridjs-th:nth-child(2),
    #vendors-table .gridjs-th:nth-child(3),
    #vendors-table .gridjs-th:nth-child(4),
    #vendors-table .gridjs-th:nth-child(5),
    #vendors-table .gridjs-th:nth-child(6),
    #vendors-table .gridjs-td:nth-child(2),
    #vendors-table .gridjs-td:nth-child(3),
    #vendors-table .gridjs-td:nth-child(4),
    #vendors-table .gridjs-td:nth-child(5),
    #vendors-table .gridjs-td:nth-child(6) {
        display: none;
    }

    #vendors-table .gridjs-th:nth-child(1),
    #vendors-table .gridjs-td:nth-child(1) {
        width: auto;
        min-width: 200px;
    }

    #vendors-table .gridjs-th:nth-child(7),
    #vendors-table .gridjs-td:nth-child(7) {
        width: auto;
        min-width: 120px;
        text-align: center;
    }

    #vendors-table .gridjs-td:nth-child(7) .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    #vendors-table .gridjs-td:nth-child(7) .btn-group .btn {
        flex: 0 0 auto;
        margin: 0;
        border-radius: 0.375rem !important;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    #vendors-table .gridjs-td {
        padding: 0.5rem 0.75rem;
        vertical-align: top;
    }
}

/* Mobile responsive styles for projects table */
/* Columns: 1=Project Name(stacked), 2=Code, 3=Start Date, 4=End Date, 5=Status, 6=Orders, 7=Actions */
@media (max-width: 767.98px) {
    #projects-table .gridjs-th:nth-child(2),
    #projects-table .gridjs-th:nth-child(3),
    #projects-table .gridjs-th:nth-child(4),
    #projects-table .gridjs-th:nth-child(5),
    #projects-table .gridjs-th:nth-child(6),
    #projects-table .gridjs-td:nth-child(2),
    #projects-table .gridjs-td:nth-child(3),
    #projects-table .gridjs-td:nth-child(4),
    #projects-table .gridjs-td:nth-child(5),
    #projects-table .gridjs-td:nth-child(6) {
        display: none;
    }

    #projects-table .gridjs-th:nth-child(1),
    #projects-table .gridjs-td:nth-child(1) {
        width: auto;
        min-width: 200px;
    }

    #projects-table .gridjs-th:nth-child(7),
    #projects-table .gridjs-td:nth-child(7) {
        width: auto;
        min-width: 120px;
        text-align: center;
    }

    #projects-table .gridjs-td:nth-child(7) .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    #projects-table .gridjs-td:nth-child(7) .btn-group .btn {
        flex: 0 0 auto;
        margin: 0;
        border-radius: 0.375rem !important;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    #projects-table .gridjs-td {
        padding: 0.5rem 0.75rem;
        vertical-align: top;
    }
}

/* Mobile responsive styles for customers table */
/* Columns: 1=Customer Name(stacked), 2=Phone, 3=Address, 4=Status, 5=Projects, 6=Actions */
@media (max-width: 767.98px) {
    #customers-table .gridjs-th:nth-child(2),
    #customers-table .gridjs-th:nth-child(3),
    #customers-table .gridjs-th:nth-child(4),
    #customers-table .gridjs-th:nth-child(5),
    #customers-table .gridjs-td:nth-child(2),
    #customers-table .gridjs-td:nth-child(3),
    #customers-table .gridjs-td:nth-child(4),
    #customers-table .gridjs-td:nth-child(5) {
        display: none;
    }

    #customers-table .gridjs-th:nth-child(1),
    #customers-table .gridjs-td:nth-child(1) {
        width: auto;
        min-width: 200px;
    }

    #customers-table .gridjs-th:nth-child(6),
    #customers-table .gridjs-td:nth-child(6) {
        width: auto;
        min-width: 120px;
        text-align: center;
    }

    #customers-table .gridjs-td:nth-child(6) .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    #customers-table .gridjs-td:nth-child(6) .btn-group .btn {
        flex: 0 0 auto;
        margin: 0;
        border-radius: 0.375rem !important;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    #customers-table .gridjs-td {
        padding: 0.5rem 0.75rem;
        vertical-align: top;
    }
}

/* Mobile responsive styles for vendor invoices table */
/* Columns: 1=Invoice(stacked), 2=Vendor, 3=Project, 4=Invoice Date, 5=Received Date, 6=Total, 7=Status, 8=Actions */
@media (max-width: 767.98px) {
    #vendor-invoices-table .gridjs-th:nth-child(2),
    #vendor-invoices-table .gridjs-th:nth-child(3),
    #vendor-invoices-table .gridjs-th:nth-child(4),
    #vendor-invoices-table .gridjs-th:nth-child(5),
    #vendor-invoices-table .gridjs-th:nth-child(6),
    #vendor-invoices-table .gridjs-th:nth-child(7),
    #vendor-invoices-table .gridjs-td:nth-child(2),
    #vendor-invoices-table .gridjs-td:nth-child(3),
    #vendor-invoices-table .gridjs-td:nth-child(4),
    #vendor-invoices-table .gridjs-td:nth-child(5),
    #vendor-invoices-table .gridjs-td:nth-child(6),
    #vendor-invoices-table .gridjs-td:nth-child(7) {
        display: none;
    }

    #vendor-invoices-table .gridjs-th:nth-child(1),
    #vendor-invoices-table .gridjs-td:nth-child(1) {
        width: auto;
        min-width: 200px;
    }

    #vendor-invoices-table .gridjs-th:nth-child(8),
    #vendor-invoices-table .gridjs-td:nth-child(8) {
        width: auto;
        min-width: 120px;
        text-align: center;
    }

    #vendor-invoices-table .gridjs-td:nth-child(8) .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    #vendor-invoices-table .gridjs-td:nth-child(8) .btn-group .btn {
        flex: 0 0 auto;
        margin: 0;
        border-radius: 0.375rem !important;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    #vendor-invoices-table .gridjs-td {
        padding: 0.5rem 0.75rem;
        vertical-align: top;
    }
}

/* Mobile responsive styles for prices table */
/* Columns: 1=Item(stacked), 2=Vendor, 3=Unit Price, 4=Project, 5=Valid From, 6=Valid To, 7=Actions */
@media (max-width: 767.98px) {
    #prices-table .gridjs-th:nth-child(2),
    #prices-table .gridjs-th:nth-child(3),
    #prices-table .gridjs-th:nth-child(4),
    #prices-table .gridjs-th:nth-child(5),
    #prices-table .gridjs-th:nth-child(6),
    #prices-table .gridjs-td:nth-child(2),
    #prices-table .gridjs-td:nth-child(3),
    #prices-table .gridjs-td:nth-child(4),
    #prices-table .gridjs-td:nth-child(5),
    #prices-table .gridjs-td:nth-child(6) {
        display: none;
    }

    #prices-table .gridjs-th:nth-child(1),
    #prices-table .gridjs-td:nth-child(1) {
        width: auto;
        min-width: 200px;
    }

    #prices-table .gridjs-th:nth-child(7),
    #prices-table .gridjs-td:nth-child(7) {
        width: auto;
        min-width: 120px;
        text-align: center;
    }

    #prices-table .gridjs-td:nth-child(7) .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    #prices-table .gridjs-td:nth-child(7) .btn-group .btn {
        flex: 0 0 auto;
        margin: 0;
        border-radius: 0.375rem !important;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    #prices-table .gridjs-td {
        padding: 0.5rem 0.75rem;
        vertical-align: top;
    }
}

/* Mobile responsive styles for items (pricing catalog) table */
/* Columns: 1=Vendor(stacked), 2=Item#, 3=Name, 4=Unit, 5=Type, 6=Std Cost, 7=Lowest Price, 8=Expiry, 9=Status, 10=Actions */
@media (max-width: 767.98px) {
    #items-table .gridjs-th:nth-child(2),
    #items-table .gridjs-th:nth-child(3),
    #items-table .gridjs-th:nth-child(4),
    #items-table .gridjs-th:nth-child(5),
    #items-table .gridjs-th:nth-child(6),
    #items-table .gridjs-th:nth-child(7),
    #items-table .gridjs-th:nth-child(8),
    #items-table .gridjs-th:nth-child(9),
    #items-table .gridjs-td:nth-child(2),
    #items-table .gridjs-td:nth-child(3),
    #items-table .gridjs-td:nth-child(4),
    #items-table .gridjs-td:nth-child(5),
    #items-table .gridjs-td:nth-child(6),
    #items-table .gridjs-td:nth-child(7),
    #items-table .gridjs-td:nth-child(8),
    #items-table .gridjs-td:nth-child(9) {
        display: none;
    }

    #items-table .gridjs-th:nth-child(1),
    #items-table .gridjs-td:nth-child(1) {
        width: auto;
        min-width: 200px;
    }

    #items-table .gridjs-th:nth-child(10),
    #items-table .gridjs-td:nth-child(10) {
        width: auto;
        min-width: 120px;
        text-align: center;
    }

    #items-table .gridjs-td:nth-child(10) .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    #items-table .gridjs-td:nth-child(10) .btn-group .btn {
        flex: 0 0 auto;
        margin: 0;
        border-radius: 0.375rem !important;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    #items-table .gridjs-td {
        padding: 0.5rem 0.75rem;
        vertical-align: top;
    }
}

/* Mobile responsive styles for project pricing table (project show page) */
/* Columns: 1=Vendor(stacked), 2=Item, 3=Unit Price, 4=Valid From, 5=Valid To, 6=Actions, 7=ID(hidden) */
@media (max-width: 767.98px) {
    #project-pricing-table .gridjs-th:nth-child(2),
    #project-pricing-table .gridjs-th:nth-child(3),
    #project-pricing-table .gridjs-th:nth-child(4),
    #project-pricing-table .gridjs-th:nth-child(5),
    #project-pricing-table .gridjs-td:nth-child(2),
    #project-pricing-table .gridjs-td:nth-child(3),
    #project-pricing-table .gridjs-td:nth-child(4),
    #project-pricing-table .gridjs-td:nth-child(5) {
        display: none;
    }

    #project-pricing-table .gridjs-th:nth-child(1),
    #project-pricing-table .gridjs-td:nth-child(1) {
        width: auto;
        min-width: 160px;
    }

    #project-pricing-table .gridjs-th:nth-child(6),
    #project-pricing-table .gridjs-td:nth-child(6) {
        width: auto;
        min-width: 80px;
        text-align: center;
    }

    #project-pricing-table .gridjs-td:nth-child(6) .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    #project-pricing-table .gridjs-td:nth-child(6) .btn-group .btn {
        flex: 0 0 auto;
        margin: 0;
        border-radius: 0.375rem !important;
    }

    #project-pricing-table .gridjs-td {
        padding: 0.5rem 0.75rem;
        vertical-align: top;
    }
}

/* Mobile responsive styles for roles table */
/* Columns: 1=Name(stacked), 2=Description, 3=Level, 4=Status, 5=Permissions, 6=Users, 7=Actions */
@media (max-width: 1199.98px) {
    #roles-table .gridjs-th:nth-child(2),
    #roles-table .gridjs-th:nth-child(3),
    #roles-table .gridjs-th:nth-child(4),
    #roles-table .gridjs-th:nth-child(5),
    #roles-table .gridjs-th:nth-child(6),
    #roles-table .gridjs-td:nth-child(2),
    #roles-table .gridjs-td:nth-child(3),
    #roles-table .gridjs-td:nth-child(4),
    #roles-table .gridjs-td:nth-child(5),
    #roles-table .gridjs-td:nth-child(6) {
        display: none;
    }

    #roles-table .gridjs-th:nth-child(1),
    #roles-table .gridjs-td:nth-child(1) {
        width: auto;
        min-width: 200px;
    }

    #roles-table .gridjs-th:nth-child(7),
    #roles-table .gridjs-td:nth-child(7) {
        width: auto;
        min-width: 120px;
        text-align: center;
    }

    #roles-table .gridjs-td:nth-child(7) .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    #roles-table .gridjs-td:nth-child(7) .btn-group .btn {
        flex: 0 0 auto;
        margin: 0;
        border-radius: 0.375rem !important;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    #roles-table .gridjs-td {
        padding: 0.5rem 0.75rem;
        vertical-align: top;
    }
}

/* Mobile responsive styles for project purchase orders table (project show page) */
/* Columns: 1=PO#(stacked), 2=Vendor, 3=Status, 4=Order Date, 5=Total, 6=Requested By, 7=Actions, 8=ID(hidden) */
@media (max-width: 767.98px) {
    #project-purchase-orders-table .gridjs-th:nth-child(2),
    #project-purchase-orders-table .gridjs-th:nth-child(3),
    #project-purchase-orders-table .gridjs-th:nth-child(4),
    #project-purchase-orders-table .gridjs-th:nth-child(5),
    #project-purchase-orders-table .gridjs-th:nth-child(6),
    #project-purchase-orders-table .gridjs-td:nth-child(2),
    #project-purchase-orders-table .gridjs-td:nth-child(3),
    #project-purchase-orders-table .gridjs-td:nth-child(4),
    #project-purchase-orders-table .gridjs-td:nth-child(5),
    #project-purchase-orders-table .gridjs-td:nth-child(6) {
        display: none;
    }

    #project-purchase-orders-table .gridjs-th:nth-child(1),
    #project-purchase-orders-table .gridjs-td:nth-child(1) {
        width: auto;
        min-width: 160px;
    }

    #project-purchase-orders-table .gridjs-th:nth-child(7),
    #project-purchase-orders-table .gridjs-td:nth-child(7) {
        width: auto;
        min-width: 80px;
        text-align: center;
    }

    #project-purchase-orders-table .gridjs-td:nth-child(7) .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    #project-purchase-orders-table .gridjs-td:nth-child(7) .btn-group .btn {
        flex: 0 0 auto;
        margin: 0;
        border-radius: 0.375rem !important;
    }

    #project-purchase-orders-table .gridjs-td {
        padding: 0.5rem 0.75rem;
        vertical-align: top;
    }
}