/*
 * Panel chrome — sidebar width, structural shadows, dropdown stacking and the
 * rest of the global overrides that used to be printed inline by the
 * panels::styles.before hook in AdminPanelProvider. Same position in the
 * cascade (before Filament's own CSS); now a file the browser keeps.
 *
 * The organisation-specific colours stay inline in that provider — they
 * differ per organisation, and are small.
 */

:root {
    --sidebar-width: 72px;
    --primary-orange: #ff5100;
    --light-gray: #f8f9fa;
    --border-gray: #e9ecef;
}

/* ── Global: strip box-shadows from structural elements only ── */
.fi-sidebar,
.fi-topbar,
.fi-section,
.fi-ta-table,
.fi-wi,
.fi-wi-stats-overview-stat,
.fi-wi-chart,
.fi-modal-window,
.fi-notification,
.fi-fo-repeater-item,
.fi-btn,
.fi-btn-primary,
[class*="shadow"] {
    box-shadow: none !important;
    --tw-shadow: none !important;
}

/* ── Input wrappers: replace ring with a clean border ── */
/* Filament uses ring-1 (box-shadow based) for input borders.
   We convert that to a real CSS border for a crisp look.     */
.fi-input-wrp {
    --tw-ring-shadow: none !important;
    --tw-ring-offset-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    background: #ffffff !important;
    transition: border-color 0.15s ease !important;
}
/* Focus state — orange border */
.fi-input-wrp:focus-within {
    border-color: var(--primary-orange) !important;
    --tw-ring-shadow: none !important;
    box-shadow: none !important;
}
/* Invalid / error state — keep red visible */
.fi-input-wrp.fi-invalid {
    border-color: #dc2626 !important;
}
/* Disabled state */
.fi-input-wrp.fi-disabled {
    background: #f9fafb !important;
    border-color: #e5e7eb !important;
}

/* Clean white background for main content */
.fi-body {
    background: #ffffff !important;
}

/* Sidebar - Clean white with border only */
.fi-sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--border-gray) !important;
    box-shadow: none !important;
}

/* Sidebar brand area */
.fi-sidebar-header {
    padding: 0.875rem 1rem !important;
    border-bottom: 1px solid var(--border-gray) !important;
    background: #ffffff !important;
}

/* Brand logo */
.fi-logo img {
    height: 2.25rem !important;
}

/* Navigation items - Clean and minimal */
.fi-sidebar-nav {
    padding: 0.5rem 0.625rem !important;
}

.fi-sidebar-nav-item {
    margin-bottom: 0.0625rem !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.15s ease !important;
    font-size: 0.875rem !important;
    color: #495057 !important;
    background: transparent !important;
}

.fi-sidebar-item-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-right: 0.75rem !important;
    color: #6c757d !important;
    transition: color 0.15s ease !important;
}

.fi-sidebar-item-label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: color 0.15s ease !important;
}

.fi-sidebar-item-badge {
    font-size: 0.75rem !important;
    padding: 0.125rem 0.5rem !important;
    min-width: 1.5rem !important;
    height: 1.5rem !important;
    margin-left: auto !important;
    background: var(--light-gray) !important;
    color: #495057 !important;
    font-weight: 600 !important;
}

.fi-sidebar-nav-item:hover {
    background: var(--light-gray) !important;
    color: var(--primary-orange) !important;
}

.fi-sidebar-nav-item:hover .fi-sidebar-item-icon {
    color: var(--primary-orange) !important;
}

.fi-sidebar-nav-item:hover .fi-sidebar-item-label {
    color: var(--primary-orange) !important;
}

/* Active item — Filament v3 uses fi-active class + aria-[current=page] */
.fi-sidebar-nav-item-active,
.fi-sidebar-item-button.fi-active,
.fi-sidebar-item-button[aria-current="page"] {
    background: var(--primary-orange) !important;
    color: white !important;
    box-shadow: none !important;
    border-radius: 0.5rem !important;
}

.fi-sidebar-nav-item-active .fi-sidebar-item-label,
.fi-sidebar-nav-item-active .fi-sidebar-item-icon,
.fi-sidebar-item-button.fi-active .fi-sidebar-item-label,
.fi-sidebar-item-button.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-label,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon {
    color: white !important;
}

.fi-sidebar-nav-item-active .fi-sidebar-item-badge,
.fi-sidebar-item-button.fi-active .fi-sidebar-item-badge,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
}

/* Navigation groups - Clean minimal */
.fi-sidebar-group {
    margin-bottom: 0.25rem !important;
}

/* Remove extra gaps between nav groups wrapper */
.fi-sidebar-nav > ul,
.fi-sidebar-nav > div {
    gap: 0 !important;
}

/* Collapse empty navigation slots / spacers */
.fi-sidebar-nav li:empty,
.fi-sidebar-nav div:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}                    
.fi-sidebar-group-label {
    color: #6c757d !important;
    font-weight: 600 !important;
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.075em !important;
    padding: 0.375rem 0.75rem 0.25rem !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0.125rem !important;
    border-bottom: 1px solid var(--border-gray) !important;
}

.fi-sidebar-group:first-child .fi-sidebar-group-label {
    margin-top: 0 !important;
    padding-top: 0.25rem !important;
}

.fi-sidebar-group-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.0625rem !important;
}

/* Topbar - Clean white with border only */
.fi-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--border-gray) !important;
    box-shadow: none !important;
}

/* User menu button */
.fi-user-menu-trigger {
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
}

.fi-user-menu-trigger:hover {
    background: var(--light-gray) !important;
}

/* Main content area - Clean white */
.fi-main {
    background: #ffffff !important;
}

/* Cards and sections - Clean with border only */
.fi-section {
    border-radius: 0.5rem !important;
    box-shadow: none !important;
    border: 1px solid var(--border-gray) !important;
    background: #ffffff !important;
}

/* Form sections */
.fi-fo-section-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--border-gray) !important;
    padding: 1rem 1.5rem !important;
}

.fi-fo-section-header-heading {
    color: #212529 !important;
    font-weight: 600 !important;
}

.fi-fo-section-description {
    color: #6c757d !important;
}

/* Buttons - XYTech orange theme */
.fi-btn-primary {
    background: var(--primary-orange) !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.fi-btn-primary:hover {
    background: #ff6b2b !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}

/* Tables - Clean white */
.fi-ta-table {
    border-radius: 0.5rem !important;
    overflow: visible !important;
    border: 1px solid var(--border-gray) !important;
}

.fi-ta-header-cell {
    background: var(--light-gray) !important;
    font-weight: 600 !important;
    color: #495057 !important;
    border-bottom: 1px solid var(--border-gray) !important;
}

.fi-ta-row:hover {
    background: #fafbfc !important;
}

/* Badges */
.fi-badge {
    border-radius: 0.375rem !important;
    font-weight: 500 !important;
    padding: 0.25rem 0.75rem !important;
}

/* ── Raw input/select/textarea elements inside wrappers ── */
.fi-input,
.fi-select-input,
textarea.fi-textarea-input {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}
.fi-input:focus,
.fi-select-input:focus,
textarea.fi-textarea-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ── Search fields already covered by global .fi-input-wrp rule above ── */
/* Ensure topbar + table search wrappers also pick up the border */
.fi-global-search-field .fi-input-wrp,
.fi-ta-search-field .fi-input-wrp {
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
}
.fi-global-search-field .fi-input-wrp:focus-within,
.fi-ta-search-field .fi-input-wrp:focus-within {
    border-color: var(--primary-orange) !important;
}

/* ── Filter & Column-toggle icon buttons: outlined style ── */

/* Container that holds both icon buttons */
.fi-ta-filters-modal,
.fi-ta-filters-dropdown,
.fi-ta-col-toggle {
    display: inline-flex !important;
}

/* The icon button itself — add a border */
.fi-ta-filters-modal .fi-icon-btn,
.fi-ta-filters-dropdown .fi-icon-btn,
.fi-ta-col-toggle .fi-icon-btn {
    border: 1px solid var(--border-gray) !important;
    border-radius: 0.5rem !important;
    padding: 0.375rem !important;
    background: #ffffff !important;
    color: #6c757d !important;
}
.fi-ta-filters-modal .fi-icon-btn:hover,
.fi-ta-filters-dropdown .fi-icon-btn:hover,
.fi-ta-col-toggle .fi-icon-btn:hover {
    border-color: var(--primary-orange) !important;
    color: var(--primary-orange) !important;
    background: #fff5f0 !important;
}

/* Force outlined (stroke) icons — hide filled paths, show stroked ones */
/* Filament uses heroicon-m (mini/filled) for these; we swap to outlined style via CSS */
.fi-ta-filters-modal .fi-icon-btn svg,
.fi-ta-filters-dropdown .fi-icon-btn svg,
.fi-ta-col-toggle .fi-icon-btn svg {
    stroke-width: 1.5 !important;
    fill: none !important;
    stroke: currentColor !important;
}

/* Dashboard stats - Clean cards with border only */
.fi-wi-stats-overview-stat {
    border-radius: 0.5rem !important;
    box-shadow: none !important;
    border: 1px solid var(--border-gray) !important;
    transition: all 0.2s ease !important;
    background: white !important;
}

.fi-wi-stats-overview-stat:hover {
    box-shadow: none !important;
    transform: translateY(-2px) !important;
    border-color: var(--primary-orange) !important;
}

/* Chart widgets - Clean white background with border only */
.fi-wi-chart {
    border-radius: 0.5rem !important;
    box-shadow: none !important;
    border: 1px solid var(--border-gray) !important;
    background: white !important;
    padding: 1.5rem !important;
}

.fi-wi-heading {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin-bottom: 1rem !important;
}

/* Dashboard grid */
.fi-dashboard-page {
    /* padding: 1.5rem !important; */
}

/* Widget spacing */
.fi-wi {
    margin-bottom: 1.5rem !important;
}

/* Stat card icons */
.fi-wi-stats-overview-stat-icon {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 0.75rem !important;
}

/* Stat values */
.fi-wi-stats-overview-stat-value {
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Stat labels */
.fi-wi-stats-overview-stat-label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
}

/* Stat descriptions */
.fi-wi-stats-overview-stat-description {
    font-size: 0.75rem !important;
    margin-top: 0.5rem !important;
}

/* Dashboard welcome header - XYTech orange gradient */
.fi-header-heading {
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6b2b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Invoice Items Repeater Styling - Clean white */
.fi-fo-repeater-item {
    background: #ffffff !important;
    border: 1px solid var(--border-gray) !important;
    border-radius: 0.375rem !important;
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
    transition: all 0.2s ease !important;
}

.fi-fo-repeater-item:hover {
    border-color: var(--primary-orange) !important;
    box-shadow: none !important;
}

/* Compact input fields */
.fi-fo-field-wrp {
    margin-bottom: 0.5rem !important;
}

/* Make labels more compact */
.fi-fo-field-wrp-label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #495057 !important;
    margin-bottom: 0.25rem !important;
}

/* Page background - Clean white */
.fi-page {
    background: #ffffff !important;
}

/* Action buttons - Orange theme */
.fi-ac-btn-action {
    transition: all 0.2s ease !important;
}

/* Only neutralise the hover on GRAY/link actions. Scoping to
   .fi-color-gray keeps this from clobbering filled colored
   buttons (primary/info/warning): those have white text, so a
   flat light-gray hover made them vanish (e.g. New Product).
   Colored buttons keep the framework default lighter-shade hover. */
.fi-ac-btn-action.fi-color-gray:hover {
    background: var(--light-gray) !important;
}

/* Modal backgrounds - Clean white */
.fi-modal-window {
    background: #ffffff !important;
    border: 1px solid var(--border-gray) !important;
}

/* Notification styling */
.fi-notification {
    border-radius: 0.5rem !important;
    box-shadow: none !important;
    border: 1px solid var(--border-gray) !important;
}

/* Loading spinner - Orange */
.fi-spinner {
    color: var(--primary-orange) !important;
}

/* =============================================
   MODERN SIDEBAR SCROLLBAR
   ============================================= */

/* Make sidebar nav area scrollable */
.fi-sidebar-nav {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    scroll-behavior: smooth !important;
}

/* Firefox - hide scrollbar by default, show on hover */
.fi-sidebar-nav:hover {
    scrollbar-width: thin !important;
    scrollbar-color: #e2e8f0 transparent !important;
}

.fi-sidebar {
    scrollbar-width: none !important;
}

.fi-sidebar:hover {
    scrollbar-width: thin !important;
    scrollbar-color: #e2e8f0 transparent !important;
}

/* Webkit (Chrome, Safari, Edge) - hide scrollbar by default */
.fi-sidebar-nav::-webkit-scrollbar {
    width: 0px !important;
}

/* Show scrollbar on hover */
.fi-sidebar-nav:hover::-webkit-scrollbar {
    width: 4px !important;
}

.fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent !important;
    margin: 4px 0 !important;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: transparent !important;
    border-radius: 999px !important;
}

.fi-sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: #e2e8f0 !important;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1 !important;
}

/* Active scroll (while dragging) */
.fi-sidebar-nav::-webkit-scrollbar-thumb:active {
    background: var(--primary-orange) !important;
}

/* Webkit - full sidebar scroll - hidden by default */
.fi-sidebar::-webkit-scrollbar {
    width: 0px !important;
}

.fi-sidebar:hover::-webkit-scrollbar {
    width: 4px !important;
}

.fi-sidebar::-webkit-scrollbar-track {
    background: transparent !important;
}

.fi-sidebar::-webkit-scrollbar-thumb {
    background: transparent !important;
    border-radius: 999px !important;
}

.fi-sidebar:hover::-webkit-scrollbar-thumb {
    background: #e2e8f0 !important;
}

.fi-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--primary-orange) !important;
}
}

/* =============================================
   SCROLLABLE TABS (for pages with many tabs)
   ============================================= */
.fi-tabs-nav {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    scroll-behavior: smooth !important;
}
.fi-tabs-nav::-webkit-scrollbar {
    display: none !important;
}
.fi-tabs-nav .fi-tabs-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* ── Checkboxes: border instead of ring/shadow ── */
.fi-checkbox-input {
    --tw-ring-shadow: none !important;
    --tw-ring-offset-shadow: none !important;
    --tw-shadow: none !important;
    box-shadow: none !important;
    border: 1.5px solid #d1d5db !important;
}
.fi-checkbox-input:focus {
    --tw-ring-shadow: none !important;
    box-shadow: none !important;
    border-color: var(--primary-orange) !important;
}
.fi-checkbox-input:checked {
    border-color: var(--primary-orange) !important;
    background-color: var(--primary-orange) !important;
}

/* ── Section headers: light grey background ── */
/* header.fi-section-header { */
    /* background: #f6f6f6 !important; */
/* } */

/* ── Sticky actions column on table scroll ── */
.fi-ta-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.fi-ta-actions-cell {
    position: sticky !important;
    right: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    border-left: 1px solid var(--border-gray) !important;
}
tr:hover .fi-ta-actions-cell {
    background: #fafbfc !important;
}
th.fi-ta-actions-header-cell {
    position: sticky !important;
    right: 0 !important;
    z-index: 11 !important;
    background: var(--light-gray) !important;
    border-left: 1px solid var(--border-gray) !important;
}

/* ── Filter / column-toggle dropdown panels above sticky actions ── */
.fi-ta-header-ctn .fi-dropdown-panel,
.fi-ta-header-toolbar .fi-dropdown-panel,
.fi-dropdown-panel {
    z-index: 50 !important;
}

/* ── Cheque lists ─────────────────────────────────────────────────────────
 * resources/views/filament/partials/upcoming-cheques.blade.php (dashboards,
 * Cheque Report) and party-cheques.blade.php (customer and vendor profiles).
 * Here rather than in the partials because both land inside Livewire roots,
 * where a <style> block is re-sent on every round trip. Scoped to .chq-.
 */
.chq-pair { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; width: 100%; }
.chq-pair > * { min-width: 0; }
.chq-card { background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; overflow: hidden; display: flex; flex-direction: column; }
.dark .chq-card { background: #1f2937; border-color: #374151; }
.chq-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .85rem 1.1rem; border-bottom: 1px solid #f1f5f9; }
.dark .chq-head { border-color: #374151; }
.chq-title { display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 700; color: #0f172a; }
.dark .chq-title { color: #f1f5f9; }
.chq-sub { font-size: .75rem; color: #94a3b8; }
.chq-dot { width: .55rem; height: .55rem; border-radius: 9999px; background: #16a34a; }
.chq-dot.out { background: #dc2626; }
.chq-count { font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 9px; background: #f1f5f9; color: #64748b; }
.dark .chq-count { background: #111827; color: #94a3b8; }
.chq-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.chq-scroll { overflow-x: auto; }
.chq-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.chq-table th { padding: .55rem 1.1rem; text-align: left; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; white-space: nowrap; }
.chq-table td { padding: .55rem 1.1rem; border-top: 1px solid #f1f5f9; color: #334155; vertical-align: top; }
.dark .chq-table td { border-color: #374151; color: #d1d5db; }
.chq-table .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chq-table tfoot td { background: #f8fafc; font-size: .78rem; color: #475569; }
.dark .chq-table tfoot td { background: #111827; color: #9ca3af; }
.chq-link { color: inherit; font-weight: 600; text-decoration: none; }
.chq-link:hover { color: #ff5100; text-decoration: underline; }
.chq-muted { font-size: .72rem; color: #94a3b8; }
.chq-due { font-weight: 600; white-space: nowrap; }
.chq-due.overdue { color: #dc2626; }
.chq-due.soon { color: #d97706; }
.chq-pill { display: inline-block; padding: 1px 8px; border-radius: 9999px; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.chq-pill.good { background: #dcfce7; color: #166534; }
.chq-pill.warn { background: #fef3c7; color: #92400e; }
.chq-pill.bad  { background: #fee2e2; color: #991b1b; }
.chq-pill.info { background: #dbeafe; color: #1e40af; }
.chq-pill.gray { background: #f3f4f6; color: #4b5563; }
.chq-empty { padding: 1.75rem 1.1rem; text-align: center; font-size: .85rem; color: #94a3b8; flex: 1; }
.chq-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: auto; padding: .7rem 1.1rem; border-top: 1px solid #f1f5f9; font-size: .8rem; color: #64748b; }
.dark .chq-foot { border-color: #374151; color: #9ca3af; }
.chq-foot strong { color: #0f172a; }
.dark .chq-foot strong { color: #f1f5f9; }
.chq-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .8rem; border-radius: .5rem; font-size: .75rem; font-weight: 600; text-decoration: none; background-color: #f1f5f9; color: #334155; white-space: nowrap; }
.chq-btn:hover { background-color: #e2e8f0; }
.dark .chq-btn { background-color: #374151; color: #e5e7eb; }
.chq-btn.primary { background-color: #ff5100; color: #fff; }
.chq-btn.primary:hover { background-color: #e64a00; }