/* Application styles */
/* Add your CSS here or import a prebuilt framework such as Bootstrap or Tabler */

/* ------------------------------------------------------------------ */
/* Sidebar: active submenu item — softer background                    */
/* ------------------------------------------------------------------ */
.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item.active,
.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item:active {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* ------------------------------------------------------------------ */
/* Low Stock card — clickable toggle                                    */
/* ------------------------------------------------------------------ */
.card-low-stock-toggle {
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
}

.card-low-stock-toggle:hover {
    box-shadow: 0 0 0 2px rgba(32, 107, 196, 0.2);
    border-color: var(--tblr-primary, #206bc4);
}

.card-low-stock-toggle.card-low-stock-active {
    box-shadow: 0 0 0 2px var(--tblr-primary, #206bc4);
    border-color: var(--tblr-primary, #206bc4);
}

.card-low-stock-empty {
    opacity: 0.6;
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* DataTables 2.x — Tabler-compatible styling                          */
/* ------------------------------------------------------------------ */

/* Reset DataTables default styles that conflict with Tabler */
table.dataTable {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 0.875rem;
    font-family: inherit;
}

/* Header — match Tabler's thead style */
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    background-color: var(--tblr-bg-surface-secondary, #f6f8fb) !important;
    color: var(--tblr-secondary, #626976) !important;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.75rem !important;
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9) !important;
    white-space: nowrap;
}

/* Restore right padding for sortable columns so sort arrow doesn't overlap text */
table.dataTable > thead > tr > th.dt-orderable-asc,
table.dataTable > thead > tr > th.dt-orderable-desc {
    padding-right: 30px !important;
}

/* Remove the ugly outline that appears on hover for sortable columns */
table.dataTable > thead > tr > th.dt-orderable-asc:hover,
table.dataTable > thead > tr > th.dt-orderable-desc:hover,
table.dataTable > thead > tr > td.dt-orderable-asc:hover,
table.dataTable > thead > tr > td.dt-orderable-desc:hover {
    outline: none !important;
}

/* Sort icons — subtle opacity */
table.dataTable > thead > tr > th span.dt-column-order:before,
table.dataTable > thead > tr > th span.dt-column-order:after {
    opacity: 0.25 !important;
}
table.dataTable > thead > tr > th.dt-ordering-asc span.dt-column-order:before,
table.dataTable > thead > tr > th.dt-ordering-desc span.dt-column-order:after {
    opacity: 0.7 !important;
}

/* Body rows — match Tabler table-sm + table-vcenter */
table.dataTable > tbody > tr > td {
    padding: 0.4rem 0.75rem !important;
    vertical-align: middle;
    border-top: none;
    color: var(--tblr-body-color, #1d273b);
}

/* Row borders — use Tabler color */
table.dataTable.row-border > tbody > tr > *,
table.dataTable.display > tbody > tr > * {
    border-top-color: var(--tblr-border-color, #e6e7e9) !important;
}

/* Hover row */
table.dataTable > tbody > tr:hover > td {
    background-color: var(--tblr-active-bg, rgba(32, 107, 196, 0.04)) !important;
    box-shadow: none !important;
}

/* Bottom border on table */
div.dt-container.dt-empty-footer > tbody > tr:last-child > * {
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9) !important;
}

/* ------------------------------------------------------------------ */
/* Container + layout rows                                              */
/* ------------------------------------------------------------------ */
div.dt-container {
    font-size: 0.875rem;
    font-family: inherit;
}

/* Top row: breathing room + make the search cell stretch full width */
div.dt-container div.dt-layout-row:first-child {
    padding: 0.75rem 0.75rem;
    margin: 0 !important;
}

div.dt-container div.dt-layout-row:first-child div.dt-layout-cell {
    flex: 1 1 100% !important;
}

/* Table row: no extra margin */
div.dt-container div.dt-layout-row.dt-layout-table {
    padding: 0;
    margin: 0 !important;
}

/* Bottom row: pageLength left, paging right */
div.dt-container div.dt-layout-row:last-child:not(.dt-layout-table):not(:first-child) {
    padding: 0.6rem 1rem;
    margin: 0 !important;
    border-top: 1px solid var(--tblr-border-color, #e6e7e9);
}

/* ------------------------------------------------------------------ */
/* Search input — responsive widths                                     */
/* ------------------------------------------------------------------ */
div.dt-container .dt-search {
    display: block;
    width: 100%;
}

div.dt-container .dt-search input {
    width: 100% !important;
    border: 1px solid var(--tblr-border-color, #e6e7e9) !important;
    border-radius: var(--tblr-border-radius, 4px) !important;
    padding: 0.4rem 0.75rem 0.4rem 2rem !important;
    font-size: 0.875rem;
    outline: none;
    color: var(--tblr-body-color, #1d273b);
    background-color: var(--tblr-bg-surface, #fff) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23939dad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.5rem center;
    margin: 0 !important;
}

/* Tablet (>=768px): cap at 60% */
@media (min-width: 768px) {
    div.dt-container .dt-search input {
        width: 60% !important;
    }
}

/* Desktop (>=992px): cap at 50% */
@media (min-width: 992px) {
    div.dt-container .dt-search input {
        width: 50% !important;
    }
}

div.dt-container .dt-search input:focus {
    border-color: var(--tblr-primary, #206bc4) !important;
    box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.15);
}

/* ------------------------------------------------------------------ */
/* Length (page-size select)                                             */
/* ------------------------------------------------------------------ */
div.dt-container .dt-length {
    font-size: 0.8rem;
    color: var(--tblr-body-color, #1d273b);
    white-space: nowrap;
    padding-left: 0.75rem;
}

div.dt-container .dt-length select.dt-input {
    border: 1px solid var(--tblr-border-color, #e6e7e9) !important;
    border-radius: var(--tblr-border-radius, 4px) !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem;
    background: var(--tblr-bg-surface, #fff) !important;
    color: var(--tblr-body-color, #1d273b);
    margin: 0 0.25rem;
}

/* ------------------------------------------------------------------ */
/* Pagination — Tabler-style buttons                                    */
/* ------------------------------------------------------------------ */
div.dt-container .dt-paging {
    display: flex;
    align-items: center;
    gap: 2px;
}

div.dt-container .dt-paging .dt-paging-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2rem !important;
    height: 2rem;
    padding: 0 0.4rem !important;
    font-size: 0.8rem;
    line-height: 1;
    border-radius: var(--tblr-border-radius, 4px) !important;
    border: 1px solid transparent !important;
    cursor: pointer;
    color: var(--tblr-body-color, #1d273b) !important;
    background: transparent !important;
    user-select: none;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    margin: 0 1px !important;
}

div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
    background: var(--tblr-active-bg, rgba(32, 107, 196, 0.06)) !important;
    border-color: var(--tblr-border-color, #e6e7e9) !important;
    color: var(--tblr-primary, #206bc4) !important;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: var(--tblr-primary, #206bc4) !important;
    border-color: var(--tblr-primary, #206bc4) !important;
    color: #fff !important;
    font-weight: 600;
}

div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active {
    opacity: 0.4;
    cursor: default;
    color: var(--tblr-secondary, #626976) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

div.dt-container .dt-paging .ellipsis {
    padding: 0 0.25rem;
    color: var(--tblr-secondary, #626976);
}