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

/* Fractul Variable — Adobe Fonts (Typekit) */
@import url("https://use.typekit.net/gem1eus.css");

: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 - Fractul Variable 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: 'fractul-variable', sans-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;
}

/* ============================================
   FULL-WIDTH LAYOUT — remove Filament's max-width constraint
   ============================================ */

.fi-body > div > .fi-main-ctn,
.fi-main-ctn {
    max-width: 100% !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 — Split screen layout
   ============================================ */

.fi-simple-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    gap: 0 !important;
    align-items: stretch !important;
    background: white !important;
}

.fi-simple-layout > .fi-simple-main-ctn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem !important;
    background: white !important;
}

.fi-simple-main {
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 400px !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
}

.fi-simple-layout > .fi-simple-main-ctn ~ * {
    display: none !important;
}

.fi-simple-layout::after {
    content: '';
    display: block;
    background: url('/images/login-bg.jpg') center / cover no-repeat;
    min-height: 100dvh;
}

/* Login page logo — larger on login */
.fi-simple-layout .fi-logo img,
.fi-simple-layout .fi-logo svg {
    height: 3rem !important;
    width: auto !important;
}

/* Login button — #007aeb primary */
.fi-simple-layout .fi-btn-primary,
.fi-simple-layout [type="submit"].fi-btn {
    --c-400: 0, 122, 235 !important;
    --c-500: 0, 122, 235 !important;
    --c-600: 0, 106, 204 !important;
    background-color: #007aeb !important;
    border-color: #007aeb !important;
}
.fi-simple-layout .fi-btn-primary:hover,
.fi-simple-layout [type="submit"].fi-btn:hover {
    background-color: #006ad4 !important;
    border-color: #006ad4 !important;
}

@media (max-width: 768px) {
    .fi-simple-layout {
        grid-template-columns: 1fr !important;
    }
    .fi-simple-layout::after {
        display: none;
    }
    .fi-simple-layout > .fi-simple-main-ctn {
        min-height: 100dvh !important;
    }
}

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

.fi-modal-window {
    border-radius: 1rem !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: 'fractul-variable', sans-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;
}

/* ============================================
   CUSTOM DARK SIDEBAR - #1c1b22
   ============================================ */

.fi-sidebar {
    background-color: #1c1b22 !important;
    border-right: none !important;
}

/* ---- SIDEBAR HEADER ---- */

.fi-sidebar .fi-sidebar-header {
    display: flex !important;
    align-items: center !important;
    padding: 1rem 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    gap: 0 !important;
    min-height: 3.5rem !important;
}

/* Hide default Filament logo in sidebar */
.fi-sidebar .fi-sidebar-header-logo-ctn {
    display: none !important;
}

/* PimForce logo: left-aligned, takes available space */
.pimforce-sidebar-logo {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    order: 1 !important;
    text-decoration: none !important;
    transition: opacity 0.15s;
    padding-left: 0.25rem;
}

.pimforce-sidebar-logo:hover {
    opacity: 0.8;
}

/* PimForce icon: shown when sidebar is collapsed */
.pimforce-sidebar-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 1 !important;
    text-decoration: none !important;
    transition: opacity 0.15s;
}

.pimforce-sidebar-icon:hover {
    opacity: 0.8;
}

/* Collapsed sidebar: hide full logo, show icon */
.fi-sidebar:not(.fi-sidebar-open) .pimforce-sidebar-logo {
    display: none !important;
}

/* Open sidebar: hide icon, show full logo */
.fi-sidebar.fi-sidebar-open .pimforce-sidebar-icon {
    display: none !important;
}

/* Collapse/expand buttons: right of the logo */
.fi-sidebar .fi-sidebar-close-collapse-sidebar-btn {
    order: 2 !important;
    flex-shrink: 0 !important;
    color: rgba(255, 255, 255, 0.35) !important;
}

.fi-sidebar .fi-sidebar-open-collapse-sidebar-btn {
    order: 1 !important;
    color: rgba(255, 255, 255, 0.35) !important;
}

.fi-sidebar .fi-sidebar-close-collapse-sidebar-btn:hover,
.fi-sidebar .fi-sidebar-open-collapse-sidebar-btn:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* All icon buttons in sidebar */
.fi-sidebar .fi-icon-btn {
    color: rgba(255, 255, 255, 0.4) !important;
}

.fi-sidebar .fi-icon-btn:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* ---- NAVIGATION GROUPS ---- */

/* Group labels */
.fi-sidebar-group-label,
.fi-sidebar .fi-sidebar-group-label {
    color: #e3e4ea !important;
    font-size: 0.625rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

/* Group collapse button & group dropdown trigger */
.fi-sidebar .fi-sidebar-group-button,
.fi-sidebar .fi-sidebar-group-btn,
.fi-sidebar .fi-sidebar-group-btn .fi-sidebar-group-label,
.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn,
.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn .fi-sidebar-group-label {
    color: #e3e4ea !important;
}

.fi-sidebar .fi-sidebar-group-button:hover,
.fi-sidebar .fi-sidebar-group-btn:hover,
.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn:hover {
    color: white !important;
}

/* Group icons */
.fi-sidebar .fi-sidebar-group-icon,
.fi-sidebar .fi-sidebar-group-btn .fi-icon,
.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: #873dff !important;
}

/* Group collapse chevron */
.fi-sidebar .fi-sidebar-group .fi-sidebar-group-collapse-btn,
.fi-sidebar .fi-sidebar-group .fi-sidebar-group-collapse-btn .fi-icon {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ---- NAVIGATION ITEMS ---- */

.fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-label,
.fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item .fi-sidebar-item-label {
    color: #818087 !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
}

/* Nav item icons */
.fi-sidebar .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar .fi-sidebar-item .fi-icon,
.fi-sidebar .fi-sidebar-item-icon,
.fi-sidebar-item-btn > .fi-icon {
    color: #873dff !important;
}

/* Button/anchor base styles */
.fi-sidebar .fi-sidebar-item-btn,
.fi-sidebar .fi-sidebar-item a,
.fi-sidebar .fi-sidebar-item button {
    color: #818087 !important;
    transition: all 0.1s ease !important;
    border-radius: 0.375rem !important;
}

.fi-sidebar .fi-sidebar-item a:hover,
.fi-sidebar .fi-sidebar-item button:hover {
    color: #e3e4ea !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.fi-sidebar .fi-sidebar-item a:hover .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item button:hover .fi-sidebar-item-label {
    color: #e3e4ea !important;
}

.fi-sidebar .fi-sidebar-item a:hover .fi-icon,
.fi-sidebar .fi-sidebar-item button:hover .fi-icon {
    color: #873dff !important;
}

/* Active item */
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgba(135, 61, 255, 0.15) !important;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: white !important;
    font-weight: 600 !important;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: rgb(175, 139, 255) !important;
}

/* Badges in nav */
.fi-sidebar .fi-badge {
    font-size: 0.625rem !important;
}

.fi-sidebar .fi-badge span {
    color: inherit !important;
}

/* ---- SIDEBAR FOOTER (user menu) ---- */

.fi-sidebar .fi-sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    background-color: rgba(0, 0, 0, 0.15) !important;
    padding: 0.5rem !important;
}

.fi-sidebar .fi-sidebar-footer > .fi-dropdown > .fi-dropdown-trigger,
.fi-sidebar .fi-sidebar-footer > .fi-dropdown > .fi-dropdown-trigger *,
.fi-sidebar .fi-sidebar-footer .fi-user-name {
    color: white !important;
}

.fi-sidebar .fi-sidebar-footer > .fi-dropdown > .fi-dropdown-trigger:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Dropdown panel in footer: use Filament's defaults */
.fi-sidebar .fi-sidebar-footer .fi-dropdown-panel,
.fi-sidebar .fi-sidebar-footer .fi-dropdown-panel * {
    color: revert !important;
}

.fi-sidebar .fi-sidebar-footer .fi-dropdown-panel .fi-dropdown-list-item-label {
    color: var(--gray-700) !important;
}

.fi-sidebar .fi-sidebar-footer .fi-dropdown-panel .fi-dropdown-list-item .fi-icon {
    color: var(--gray-400) !important;
}

/* Avatar in sidebar */
.fi-sidebar .fi-avatar {
    background-color: rgba(135, 62, 255, 0.25) !important;
    color: rgb(207, 185, 255) !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
}

/* ---- SCROLLBAR ---- */

.fi-sidebar ::-webkit-scrollbar {
    width: 3px;
}

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

.fi-sidebar ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.fi-sidebar ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}