/* ============================================
   PIMFORCE CUSTOM THEME
   ============================================ */

/* Mozilla Headline / Zilla Slab Font */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500;600;700&display=swap');

:root {
    /* Pimforce Primary Color Palette */
    --pimforce-50: 248 245 255;
    --pimforce-100: 243 238 255;
    --pimforce-200: 231 220 255;
    --pimforce-300: 207 185 255;
    --pimforce-400: 175 139 255;
    --pimforce-500: 135 62 255;
    --pimforce-600: 120 45 230;
    --pimforce-700: 100 30 200;
    --pimforce-800: 80 20 170;
    --pimforce-900: 60 10 140;
}

/* ============================================
   TYPOGRAPHY - Zilla Slab for Headers
   ============================================ */

h1, h2, h3, h4, h5, h6,
.fi-header-heading,
.fi-section-header-heading,
.fi-page-header-heading,
.fi-modal-heading,
.fi-wi-stats-overview-stat-value {
    font-family: 'Zilla Slab', Georgia, serif !important;
    font-weight: 700 !important;
}

/* Page titles */
.fi-header-heading {
    font-size: 2rem !important;
    letter-spacing: -0.02em !important;
}

/* ============================================
   BUTTONS
   ============================================ */

.fi-btn-primary {
    background-color: rgb(var(--pimforce-500)) !important;
    border-radius: 0.625rem !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px 0 rgb(135 62 255 / 0.2) !important;
    transition: all 0.15s ease !important;
}

.fi-btn-primary:hover {
    background-color: rgb(var(--pimforce-600)) !important;
    box-shadow: 0 2px 4px 0 rgb(135 62 255 / 0.3) !important;
}

/* ============================================
   TABLES
   ============================================ */

.fi-ta-header-cell {
    background-color: rgb(249 250 251) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: rgb(107 114 128) !important;
}

.dark .fi-ta-header-cell {
    background-color: rgb(17 24 39) !important;
    color: rgb(156 163 175) !important;
}

.fi-ta-row:hover {
    background-color: rgb(249 250 251) !important;
}

.dark .fi-ta-row:hover {
    background-color: rgb(31 41 55) !important;
}

.fi-ta-image {
    border-radius: 0.5rem !important;
    overflow: hidden !important;
}

.fi-ta-image img {
    border-radius: 0.5rem !important;
}

/* ============================================
   CARDS & SECTIONS
   ============================================ */

.fi-section {
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) !important;
    border: 1px solid rgb(229 231 235) !important;
}

.dark .fi-section {
    border-color: rgb(55 65 81) !important;
}

/* ============================================
   WIDGETS
   ============================================ */

.fi-wi-stats-overview-stat {
    border-radius: 0.75rem !important;
    border: 1px solid rgb(229 231 235) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    transition: all 0.15s ease !important;
}

.fi-wi-stats-overview-stat:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
    transform: translateY(-1px);
}

.dark .fi-wi-stats-overview-stat {
    border-color: rgb(55 65 81) !important;
}

/* ============================================
   DROPDOWN MENUS
   ============================================ */

.fi-dropdown-panel {
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.15), 
                0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
    border: 1px solid rgb(229 231 235) !important;
}

.dark .fi-dropdown-panel {
    border-color: rgb(55 65 81) !important;
}

.fi-dropdown-list-item {
    border-radius: 0.5rem !important;
    margin: 0.125rem 0.25rem !important;
}

/* ============================================
   FORM INPUTS
   ============================================ */

.fi-input,
.fi-select-input,
.fi-textarea {
    border-radius: 0.5rem !important;
    transition: all 0.15s ease !important;
}

.fi-input:focus,
.fi-select-input:focus,
.fi-textarea:focus {
    border-color: rgb(var(--pimforce-500)) !important;
    box-shadow: 0 0 0 2px rgb(var(--pimforce-100)) !important;
}

/* ============================================
   PAGE HEADER
   ============================================ */

.fi-header-heading {
    color: rgb(17 24 39) !important;
}

.dark .fi-header-heading {
    color: white !important;
}

/* ============================================
   LOGIN PAGE
   ============================================ */

.fi-simple-main {
    border-radius: 1rem !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 
                0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

/* ============================================
   MODAL
   ============================================ */

.fi-modal-window {
    border-radius: 1rem !important;
}

/* ============================================
   TOOLBAR FILTER TRIGGER - hidden, replaced by header Filter button
   ============================================ */

.fi-ta-filters-dropdown .fi-dropdown-trigger {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
}

/* ============================================
   NOTIFICATIONS
   ============================================ */

.fi-notification {
    border-radius: 0.75rem !important;
}

/* ============================================
   INTEGRATION HEADER COMPONENT
   ============================================ */

.integration-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgb(249 250 251) 0%, rgb(243 244 246) 100%);
    border: 1px solid rgb(229 231 235);
    border-radius: 0.875rem;
    margin-bottom: 1.5rem;
}

.dark .integration-header {
    background: linear-gradient(135deg, rgb(31 41 55) 0%, rgb(17 24 39) 100%);
    border-color: rgb(55 65 81);
}

.integration-header-logos {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}

.integration-header-logo {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.integration-header-arrow {
    color: rgb(156 163 175);
    font-size: 1.25rem;
    font-weight: 300;
}

.integration-header-info {
    flex: 1;
    min-width: 0;
}

.integration-header-title {
    font-family: 'Zilla Slab', Georgia, serif;
    font-weight: 700;
    font-size: 1.125rem;
    color: rgb(17 24 39);
    margin: 0 0 0.25rem 0;
}

.dark .integration-header-title {
    color: white;
}

.integration-header-description {
    font-size: 0.875rem;
    color: rgb(107 114 128);
    margin: 0;
}

.dark .integration-header-description {
    color: rgb(156 163 175);
}

/* ============================================
   FAIRE COMPACT REPEATER
   Flat inline layout: [fields] [reorder] [delete]
   ============================================ */

.faire-compact-repeater.fi-fo-repeater {
    gap: 0.25rem !important;
}

.faire-compact-repeater .fi-fo-repeater-items {
    gap: 0.25rem !important;
}

.faire-compact-repeater .fi-fo-repeater-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0.125rem 0 !important;
}

.faire-compact-repeater .fi-fo-repeater-item-content {
    flex: 1 !important;
    order: 1 !important;
    padding: 0 !important;
    border-top: none !important;
    border-color: transparent !important;
}

.faire-compact-repeater .fi-fo-repeater-item-header {
    order: 2 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    gap: 0.25rem !important;
    overflow: visible !important;
}

.faire-compact-repeater .fi-fo-repeater-item-header-start-actions,
.faire-compact-repeater .fi-fo-repeater-item-header-end-actions {
    gap: 0.125rem !important;
}