/* =====================================================================
   Jostino: tables, search and filters for both panels (admin + seller).
   Same layout as the Persis Payam theme, in Jostino's green, with dark mode.
   Loaded from both panel providers (STYLES_AFTER, versioned by filemtime).
   ===================================================================== */

:root {
    --jt-primary: #00A651;
    --jt-primary-hover: #008C44;
    --jt-primary-soft: #E6F6EE;
    --jt-primary-softer: #F3FBF7;
    --jt-accent: #FF9606;
    --jt-surface: #FFFFFF;
    --jt-surface-2: #FAFAFA;
    --jt-head: #FFFFFF;
    --jt-border: #E5E5E5;
    --jt-border-strong: #D4D4D4;
    --jt-row-line: #F0F0F0;
    --jt-text: #262626;
    --jt-text-2: #525252;
    --jt-text-muted: #8A8A8A;
    --jt-radius: 18px;
    --jt-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --jt-shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, .18), 0 4px 10px rgba(0, 0, 0, .05);
    --jt-shadow-primary: 0 6px 16px -4px rgba(0, 166, 81, .45);
    --jt-ease: cubic-bezier(.2, .7, .2, 1);
}

.dark {
    --jt-primary-soft: rgba(0, 166, 81, .14);
    --jt-primary-softer: rgba(0, 166, 81, .07);
    --jt-surface: #18181B;
    --jt-surface-2: rgba(255, 255, 255, .04);
    --jt-head: #18181B;
    --jt-border: rgba(255, 255, 255, .09);
    --jt-border-strong: rgba(255, 255, 255, .16);
    --jt-row-line: rgba(255, 255, 255, .06);
    --jt-text: #E5E5E5;
    --jt-text-2: #C4C4C4;
    --jt-text-muted: #8F8F8F;
}

/* ===================== Table container ===================== */

.fi-ta-ctn {
    border: 1px solid var(--jt-border) !important;
    border-radius: var(--jt-radius) !important;
    box-shadow: var(--jt-shadow-sm) !important;
    overflow: hidden;
    background: var(--jt-surface) !important;
}

.fi-ta-header-ctn,
.fi-ta-header-toolbar {
    background-color: var(--jt-surface);
}

.fi-ta-header-toolbar {
    border-bottom: 1px solid var(--jt-border) !important;
    /* room for the filter count badge above the filter button */
    padding-block: 18px 14px !important;
    align-items: center !important;
}

.fi-ta-header-heading {
    font-weight: 700 !important;
    color: var(--jt-text) !important;
}

/* ===================== Search ===================== */

.fi-ta-search-field .fi-input-wrp {
    min-width: 240px;
    min-height: 38px;
    border-radius: 12px !important;
    background: var(--jt-surface-2) !important;
    transition: box-shadow .2s ease, background-color .2s ease;
}

.fi-ta-search-field .fi-input-wrp:focus-within {
    background: var(--jt-surface) !important;
    box-shadow: 0 0 0 4px rgba(0, 166, 81, .14), inset 0 0 0 1px var(--jt-primary) !important;
}

.fi-ta-search-field .fi-input-wrp .fi-input {
    padding-block: 8px !important;
}

/* Only the wrapper draws the frame and focus ring. The inner <input type="search"> got the
   browser / forms-plugin focus style too (a second green box inside the first): remove it. */
.fi-input-wrp .fi-input,
.fi-input-wrp .fi-input:focus,
.fi-input-wrp .fi-input:focus-visible {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    background-color: transparent !important;
}

.fi-input-wrp input[type="search"]::-webkit-search-decoration,
.fi-input-wrp input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* ===================== Rows ===================== */

.fi-ta-ctn table thead tr {
    background-color: var(--jt-head) !important;
    border-bottom: 1px solid var(--jt-border) !important;
}

.fi-ta-ctn table thead th,
.fi-ta-ctn table thead .fi-ta-header-cell,
.fi-ta-ctn table thead .fi-ta-header-cell-sort-btn span {
    color: var(--jt-text-2) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

.fi-ta-ctn table tbody tr.fi-ta-row:not(.fi-ta-group-header-row) {
    background-color: var(--jt-surface) !important;
    border-bottom: 1px solid var(--jt-row-line) !important;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.fi-ta-ctn table tbody tr.fi-ta-row:not(.fi-ta-group-header-row):hover {
    background-color: var(--jt-surface-2) !important;
}

.fi-ta-ctn table tbody tr.fi-ta-row.fi-selected {
    background-color: var(--jt-primary-soft) !important;
}

.fi-ta-ctn table tbody .fi-ta-cell {
    color: var(--jt-text);
}

.fi-ta-text-item-label,
.fi-ta-text {
    font-variant-numeric: tabular-nums;
}

/* ===================== Empty state ===================== */

.fi-ta-empty-state {
    padding-block: 3.5rem !important;
}

/* The circle is enlarged from Filament's padded box, so center the icon explicitly */
.fi-ta-empty-state-icon-bg {
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    width: 72px !important;
    height: 72px !important;
    margin-inline: auto;
    background: var(--jt-primary-soft) !important;
    box-shadow: 0 0 0 10px var(--jt-primary-softer);
}

.fi-ta-empty-state-icon-bg .fi-icon {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    color: var(--jt-primary) !important;
}

.fi-ta-empty-state-heading {
    font-weight: 700 !important;
    color: var(--jt-text) !important;
}

.fi-ta-empty-state-description {
    color: var(--jt-text-muted) !important;
}

/* ===================== Pagination ===================== */

.fi-ta-ctn .fi-pagination {
    padding-block: 12px;
}

.fi-ta-ctn .fi-pagination-items {
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px var(--jt-border) !important;
    overflow: hidden;
}

.fi-ta-ctn .fi-pagination-item-btn {
    font-weight: 600;
}

.fi-ta-ctn .fi-pagination-item.fi-active .fi-pagination-item-btn {
    background: var(--jt-primary) !important;
}

.fi-ta-ctn .fi-pagination-item.fi-active .fi-pagination-item-label {
    color: #FFFFFF !important;
}

.fi-ta-ctn .fi-pagination-overview {
    color: var(--jt-text-muted);
    font-size: 12.5px;
}

/* ===================== Filters: trigger button ===================== */

.fi-ta-filters-trigger-action-ctn .fi-icon-btn,
.fi-ta-filters-dropdown > .fi-dropdown-trigger .fi-icon-btn,
.fi-ta-col-manager-dropdown > .fi-dropdown-trigger .fi-icon-btn {
    /* Neutral tool buttons: the brand color is kept for the page's real actions */
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: var(--jt-surface) !important;
    border: 1px solid var(--jt-border-strong) !important;
    color: var(--jt-text-2) !important;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.fi-ta-filters-trigger-action-ctn .fi-icon-btn:hover,
.fi-ta-filters-dropdown > .fi-dropdown-trigger .fi-icon-btn:hover,
.fi-ta-col-manager-dropdown > .fi-dropdown-trigger .fi-icon-btn:hover {
    background: var(--jt-surface-2) !important;
    color: var(--jt-text) !important;
}

/* Open dropdown: soft brand tint so it is clear which panel belongs to which button */
.fi-ta-filters-dropdown > .fi-dropdown-trigger[aria-expanded="true"] .fi-icon-btn,
.fi-ta-col-manager-dropdown > .fi-dropdown-trigger[aria-expanded="true"] .fi-icon-btn {
    background: var(--jt-primary-soft) !important;
    border-color: rgba(0, 166, 81, .35) !important;
    color: #007F3E !important;
}

.fi-ta-filters-trigger-action-ctn .fi-icon-btn .fi-icon,
.fi-ta-filters-dropdown > .fi-dropdown-trigger .fi-icon-btn .fi-icon,
.fi-ta-col-manager-dropdown > .fi-dropdown-trigger .fi-icon-btn .fi-icon {
    width: 20px !important;
    height: 20px !important;
    color: currentColor !important;
}

/* Filament always passes the count, so a "0" badge showed with no filter applied. The indicator
   row (.fi-ta-filter-indicators) exists only when a filter is active: show the badge only then. */
.fi-ta:not(:has(.fi-ta-filter-indicators)) .fi-ta-filters-trigger-action-ctn .fi-icon-btn-badge-ctn,
.fi-ta:not(:has(.fi-ta-filter-indicators)) .fi-ta-filters-dropdown > .fi-dropdown-trigger .fi-icon-btn-badge-ctn {
    display: none !important;
}

/* Active filter count */
.fi-ta-filters-trigger-action-ctn .fi-icon-btn-badge-ctn,
.fi-ta-filters-dropdown > .fi-dropdown-trigger .fi-icon-btn-badge-ctn {
    top: -7px !important;
    inset-inline-start: -7px !important;
    inset-inline-end: auto !important;
    transform: none !important;
}

.fi-ta-filters-trigger-action-ctn .fi-icon-btn-badge-ctn .fi-badge,
.fi-ta-filters-dropdown > .fi-dropdown-trigger .fi-icon-btn-badge-ctn .fi-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px !important;
    line-height: 18px !important;
    border-radius: 99px !important;
    /* Active filters count: brand-dark (orange read as a warning) */
    background: #007F3E !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    box-shadow: 0 0 0 2px var(--jt-surface) !important;
}

/* ===================== Filters: dropdown panel ===================== */

.fi-ta-filters-dropdown .fi-dropdown-panel {
    overflow: hidden;
    padding: 0 !important;
    border-radius: 16px !important;
    border: 1px solid var(--jt-border) !important;
    box-shadow: var(--jt-shadow-lg) !important;
}

.fi-ta-filters-dropdown .fi-ta-filters {
    padding: 0 !important;
    gap: 0 !important;
}

.fi-ta-filters-dropdown .fi-ta-filters-header {
    padding: 14px 16px !important;
    background: linear-gradient(180deg, var(--jt-primary-softer), var(--jt-surface));
    border-bottom: 1px solid var(--jt-border);
}

.fi-ta-filters-dropdown .fi-ta-filters-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--jt-text) !important;
}

.fi-ta-filters-dropdown .fi-ta-filters-heading::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--jt-primary);
    box-shadow: 0 0 0 4px rgba(0, 166, 81, .15);
}

.fi-ta-filters-dropdown .fi-ta-filters > :not(.fi-ta-filters-header):not(.fi-ta-filters-actions-ctn) {
    padding: 14px 16px 4px !important;
}

.fi-ta-filters-dropdown .fi-ta-filters-actions-ctn {
    padding: 12px 16px 16px !important;
    border-top: 1px dashed var(--jt-border-strong);
}

.fi-ta-filters-dropdown .fi-ta-filters-actions-ctn .fi-btn {
    width: 100%;
    justify-content: center;
}

/* Filters shown above the table (filtersLayout AboveContent) */
.fi-ta-filters-above-content-ctn {
    background: var(--jt-surface-2);
    border-bottom: 1px solid var(--jt-border);
}

/* Active filter indicators (chips under the toolbar) */
.fi-ta-filter-indicators {
    background: var(--jt-primary-softer) !important;
    border-bottom: 1px solid var(--jt-border) !important;
}

.fi-ta-filter-indicators .fi-badge {
    border-radius: 99px !important;
}

/* ===================== Generic dropdowns (row actions, column manager) ===================== */

.fi-ta-ctn .fi-dropdown-panel,
.fi-ta-col-manager-dropdown .fi-dropdown-panel {
    border-radius: 14px !important;
    border: 1px solid var(--jt-border) !important;
    box-shadow: var(--jt-shadow-lg) !important;
    overflow: hidden;
}

.fi-ta-ctn .fi-dropdown-list-item {
    border-radius: 9px !important;
    transition: background-color .12s ease;
}

.fi-ta-ctn .fi-dropdown-list-item:hover {
    background-color: var(--jt-primary-soft) !important;
}

/* ===================== Tabs above tables ===================== */

.fi-resource-list-records-page .fi-tabs,
.fi-page .fi-tabs:not(.fi-sc-tabs .fi-tabs) {
    border-radius: 14px;
    background: var(--jt-surface-2);
    box-shadow: inset 0 0 0 1px var(--jt-border);
    padding: 4px;
}

.fi-page .fi-tabs-item.fi-active {
    background: var(--jt-surface);
    box-shadow: var(--jt-shadow-sm);
}

.fi-page .fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-page .fi-tabs-item.fi-active .fi-icon {
    color: var(--jt-primary) !important;
}