/* ============================================
   PARADIGMA BUSINESS — Apple Light Theme v2.0
   ============================================
   Filament .fi-* overrides for Business Panel.
   Uses design-tokens.css via <link> + data-theme="business".
   Includes "juicy" interactive upgrades.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');


/* ============================================
   GLOBAL BACKGROUND — Apple warm gray
   ============================================ */
.fi-body {
    background: var(--bg-deep) !important;
}


/* ============================================
   SIDEBAR — frosted glass (Apple-style)
   ============================================ */
.fi-sidebar {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-right: 1px solid var(--border-default) !important;
}

.dark .fi-sidebar {
    background: rgba(17, 24, 39, 0.85) !important;
}

.fi-sidebar-header {
    border-bottom: 1px solid var(--border-default) !important;
}

/* Brand name */
.fi-sidebar-header a,
.fi-sidebar-header span {
    color: var(--text-primary) !important;
    font-weight: var(--weight-bold) !important;
    letter-spacing: var(--ls-snug) !important;
}

/* Sidebar nav items — Apple rounded + juicy hover */
.fi-sidebar-item-button {
    border-radius: var(--radius-default) !important;
    margin: 0px 4px !important;
    padding: 0.5rem 0.6rem !important;
    position: relative;
    transition:
        all var(--duration-normal) var(--ease-default),
        transform var(--duration-normal) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) !important;
}

.fi-sidebar-item-button:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    transform: translateX(2px);
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--accent-blue) !important;
}

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

/* Active item — blue indicator bar (no glow, Apple-clean) */
.fi-sidebar-item-active .fi-sidebar-item-button {
    background: rgba(59, 130, 246, 0.12) !important;
    position: relative;
}

.fi-sidebar-item-active .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent-blue-dark);
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    color: var(--accent-blue-dark) !important;
    font-weight: var(--weight-semibold) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--accent-blue-dark) !important;
}

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

.fi-sidebar-item-icon {
    color: var(--text-secondary) !important;
    transition: color var(--duration-fast) var(--ease-default) !important;
}

.fi-sidebar-group-label {
    color: var(--text-secondary) !important;
    font-size: var(--font-badge) !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}


/* ============================================
   TOPBAR — frosted glass
   ============================================ */
.fi-topbar {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--border-default) !important;
}

.dark .fi-topbar {
    background: rgba(17, 24, 39, 0.85) !important;
}


/* ============================================
   CARDS & SECTIONS — Apple elevated, juicy hover
   ============================================ */
.fi-section {
    background: var(--bg-surface) !important;
    border: none !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-md) !important;
    transition:
        box-shadow var(--duration-slow) var(--ease-default),
        transform var(--duration-normal) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) !important;
}

.fi-section:hover {
    box-shadow: var(--shadow-lg) !important;
}


/* ============================================
   TABLES — card layout, juicy row hover
   ============================================ */
.fi-ta-ctn {
    background: var(--bg-surface) !important;
    border: none !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-md) !important;
    overflow-x: clip;
}

/* word-break для длинного текста в таблицах, но НЕ для кнопок и селектов */
.fi-ta-ctn .fi-ta-cell,
.fi-ta-ctn .fi-ta-text {
    word-break: break-word;
}
.fi-ta-ctn .fi-btn,
.fi-ta-ctn button,
.fi-ta-ctn select,
.fi-ta-ctn option {
    word-break: normal !important;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .fi-ta-ctn .fi-btn,
    .fi-ta-ctn button {
        white-space: normal;
        font-size: 0.75rem;
    }
}

.fi-ta-header-cell {
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    font-weight: var(--weight-semibold) !important;
    font-size: var(--font-caption) !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
}

.fi-ta-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    position: relative;
    transition: background var(--duration-fast) var(--ease-default) !important;
}

.dark .fi-ta-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.fi-ta-row:hover {
    background: var(--row-hover-bg, rgba(59, 130, 246, 0.04)) !important;
}

/* Left blue indicator on row hover */
.fi-ta-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-blue);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-default);
}

.fi-ta-row:hover::before {
    opacity: 1;
}


/* ============================================
   FORM INPUTS
   ============================================ */
.fi-input-wrp {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-default) !important;
    transition:
        border-color var(--duration-normal) var(--ease-default),
        box-shadow var(--duration-normal) var(--ease-default) !important;
}

.fi-input-wrp:focus-within {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Fix: disable transitions on date/time picker to prevent value reset */
.fi-date-time-picker-input,
[x-data*="dateTimePickerFormComponent"] .fi-input-wrp,
[x-data*="timePickerFormComponent"] .fi-input-wrp {
    transition: none !important;
}


/* FIX #8: Choices.js safety CSS → moved to components.css (Партия 5 E2E) */


/* ============================================
   BUTTONS — Apple rounded, juicy interactions
   ============================================ */
.fi-btn {
    border-radius: var(--radius-xl) !important;
    font-weight: var(--weight-semibold) !important;
    transition: all var(--duration-normal) var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)) !important;
}
.fi-btn:hover {
    will-change: transform;
}

.fi-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.fi-btn:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.fi-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* Primary button — gradient + glow */
.fi-btn-primary,
.fi-btn.fi-btn-color-primary {
    background: var(--btn-blue-gradient, linear-gradient(135deg, #1d4ed8, #2563eb, #3b82f6)) !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important;
}

.fi-btn-primary:hover,
.fi-btn.fi-btn-color-primary:hover {
    background: var(--btn-blue-gradient-hover, linear-gradient(135deg, #2563eb, #3b82f6, #60a5fa)) !important;
    box-shadow: var(--btn-primary-glow-hover, 0 4px 16px rgba(37, 99, 235, 0.3)) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

.fi-btn-primary:active,
.fi-btn.fi-btn-color-primary:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.2) !important;
}


/* ============================================
   BADGES — pill shaped
   ============================================ */
.fi-badge {
    border-radius: var(--radius-default) !important;
    font-weight: var(--weight-semibold) !important;
}


/* ============================================
   FIX #32: Notification badge pulse
   Red dot on bell icon — pulse animation for new notifications
   ============================================ */
@keyframes paradigmaBadgePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

.fi-topbar .fi-icon-btn-badge {
    animation: paradigmaBadgePulse 1.5s ease-in-out 3; /* pulse 3 times, then stop */
}

/* Badge counter — make it pop */
.fi-icon-btn-badge {
    background: var(--danger) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: var(--weight-bold) !important;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--bg-surface);
}


/* ============================================
   PAGE HEADERS
   ============================================ */
.fi-header-heading {
    color: var(--text-primary) !important;
    font-weight: var(--weight-bold) !important;
    letter-spacing: var(--ls-tight) !important;
}

.fi-header-subheading {
    color: var(--text-secondary) !important;
}


/* ============================================
   DROPDOWNS (user menu, notifications)
   ============================================ */
.fi-dropdown-panel {
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.12),
        0 12px 48px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: var(--text-primary) !important;
    z-index: var(--z-tooltip, 500) !important;
    opacity: 1 !important;
}

.dark .fi-dropdown-panel {
    background: #1f2937 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.fi-dropdown-list-item {
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--duration-fast) ease !important;
    margin: 0 4px !important;
}

.fi-dropdown-list-item:hover {
    background: rgba(59, 130, 246, 0.06) !important;
}

.dark .fi-dropdown-list-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}


/* ============================================
   NOTIFICATIONS PANEL
   ============================================ */
.fi-notification {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-primary) !important;
}

.fi-notification-title {
    color: var(--text-primary) !important;
}

.fi-notification-body,
.fi-notification-date {
    color: var(--text-secondary) !important;
}


/* ============================================
   LOGIN PAGE
   ============================================ */
.fi-simple-layout {
    background: var(--bg-deep) !important;
}

.fi-simple-main-ctn {
    background: var(--bg-surface) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 12px 48px rgba(0, 0, 0, 0.04) !important;
    border: none !important;
}


/* ============================================
   MODALS — Apple style
   ============================================ */
.fi-modal-window {
    border-radius: var(--radius-2xl) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12) !important;
}

/* Fix #8: ВСЕ native <select> в бизнес-панели — Tailwind Preflight ломает appearance */
select {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    word-break: normal !important;
    white-space: nowrap !important;
}
select option {
    word-break: normal !important;
    white-space: nowrap !important;
}


/* ============================================
   STATS WIDGETS — juicy hover
   ============================================ */
.fi-wi-stats-overview-stat {
    background: var(--bg-surface) !important;
    border: none !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-md) !important;
    transition:
        box-shadow var(--duration-slow) var(--ease-default),
        transform var(--duration-normal) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) !important;
}

/* Stat icons — compact */
.fi-wi-stats-overview-stat-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.fi-wi-stats-overview-stat-icon svg,
.fi-wi-stats-overview-stat svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

.fi-wi-stats-overview-stat:hover {
    box-shadow: var(--shadow-lg), var(--card-hover-glow, none) !important;
    transform: translateY(-2px) !important;
}

.fi-wi-stats-overview-stat:active {
    transform: translateY(0) scale(0.99) !important;
}


/* ============================================
   TABS — active glow + hover
   ============================================ */
.fi-tabs-tab {
    border-radius: var(--radius-lg) !important;
    transition: all var(--duration-normal) var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)) !important;
}

.fi-tabs-tab:hover {
    background: rgba(59, 130, 246, 0.05) !important;
}

.fi-tabs-tab-active {
    background: rgba(59, 130, 246, 0.08) !important;
    box-shadow: var(--tab-active-glow, 0 1px 6px rgba(59, 130, 246, 0.15)) !important;
    font-weight: var(--weight-semibold) !important;
}


/* ============================================
   TOPBAR — allow dropdown overflow
   ============================================ */
.fi-topbar,
.fi-topbar nav,
.fi-topbar > div,
.fi-topbar .fi-dropdown,
.fi-topbar .fi-user-menu {
    overflow: visible !important;
}

/* User avatar text color */
.fi-dropdown-trigger span,
.fi-user-name {
    color: var(--text-primary) !important;
}

/* Form text colors — ensure dark text on light bg */
.fi-fo-field-wrp label,
.fi-input,
.fi-select-option,
.fi-ta-cell,
.fi-ta-text {
    color: var(--text-primary) !important;
}

.fi-fo-field-wrp .fi-fo-field-wrp-hint,
.fi-fo-field-wrp .fi-fo-field-wrp-helper-text {
    color: var(--text-muted) !important;
}


/* ============================================
   FIX #27: Schedule Repeater — working hours layout
   Repeater rows: [Day] [From ▼] — [To ▼] [✓ Day Off]
   Each row should be compact, aligned, readable.
   ============================================ */

/* Repeater rows — compact spacing */
.fi-fo-repeater-item {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-default) !important;
    padding: var(--space-3) !important;
    margin-bottom: var(--space-2) !important;
    transition: border-color var(--duration-fast) ease !important;
}

.fi-fo-repeater-item:hover {
    border-color: var(--border-hover) !important;
}

/* Compact repeater layout when using columns(4) */
.fi-fo-repeater-item .fi-fo-field-wrp {
    gap: var(--space-1) !important;
}

/* Repeater add button — always visible, centered */
.fi-fo-repeater .fi-ac-btn-action {
    border-radius: var(--radius-lg) !important;
    min-height: 42px;
}

/* KeyValue — services table styling (#5 prep) */
.fi-fo-key-value-table {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}

.fi-fo-key-value-table th {
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    font-size: var(--font-caption) !important;
    font-weight: var(--weight-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    padding: 8px 12px !important;
}

.fi-fo-key-value-table td {
    padding: 4px 8px !important;
}

.fi-fo-key-value-table tr {
    border-bottom: 1px solid var(--border-default) !important;
}

.fi-fo-key-value-table input {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    padding: 6px 4px !important;
    font-size: var(--font-body) !important;
}

.fi-fo-key-value-table input:focus {
    outline: none !important;
    box-shadow: inset 0 -2px 0 var(--accent-blue) !important;
}

/* .p-schedule-preset → moved to components.css (Partition 7 audit) */


/* ============================================
   SCROLLBAR — auto-hide (Apple-style)
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
    transition: background 0.3s ease;
}

*:hover > ::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.15);
}

::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, 0.25);
}

.dark *:hover > ::-webkit-scrollbar-thumb,
.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

.dark ::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.25);
}


/* ============================================
   SMOOTH TRANSITIONS (targeted, not global)
   ============================================ */
.fi-btn,
.fi-sidebar-item-button,
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-input-wrp {
    transition-timing-function: var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
}


/* ============================================
   FIRE CTA — light theme fi-btn-color-warning
   ============================================ */
.fi-btn-color-warning {
    background: var(--btn-fire-gradient, linear-gradient(135deg, #ea580c, #f97316, #fb923c)) !important;
    border: none !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--btn-cta-glow, 0 2px 12px rgba(249, 115, 22, 0.2)) !important;
    color: #fff !important;
    font-weight: var(--weight-semibold) !important;
    transition: all var(--duration-normal) var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)) !important;
}

.fi-btn-color-warning:hover {
    box-shadow: var(--btn-cta-glow-hover, 0 4px 20px rgba(249, 115, 22, 0.25)) !important;
    transform: translateY(-2px) scale(1.03) !important;
    filter: brightness(1.05);
}

.fi-btn-color-warning:active {
    transform: translateY(0) scale(0.97) !important;
    filter: brightness(0.95);
}


/* ============================================
   BREADCRUMBS — hover effect (light theme)
   ============================================ */
.fi-breadcrumbs ol li a {
    color: var(--text-secondary) !important;
    transition: all var(--duration-fast) ease !important;
    text-decoration: none;
}

.fi-breadcrumbs ol li a:hover {
    color: var(--accent-blue) !important;
}


/* ============================================
   NOTIFICATIONS — hover feedback
   ============================================ */
.fi-notification {
    transition: all var(--duration-fast) ease !important;
}

.fi-notification:hover {
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--border-hover) !important;
}


/* ============================================
   REPEATER ADD BUTTON — juicy hover
   ============================================ */
.fi-fo-repeater .fi-ac-btn-action {
    transition: all var(--duration-normal) var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)) !important;
}

.fi-fo-repeater .fi-ac-btn-action:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.fi-fo-repeater .fi-ac-btn-action:active {
    transform: translateY(0) scale(0.98) !important;
}


/* ============================================
   MODAL CLOSE — spin on hover
   ============================================ */
.fi-modal-close-btn {
    transition: all var(--duration-normal) var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)) !important;
}

.fi-modal-close-btn:hover {
    transform: rotate(90deg) scale(1.1) !important;
    color: var(--danger, #ef4444) !important;
}


/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .fi-section,
    .fi-ta-ctn,
    .fi-wi-stats-overview-stat {
        border-radius: var(--radius-lg) !important;
    }

    .fi-header-heading {
        font-size: var(--font-kpi-small) !important;
    }

    .fi-sidebar-item-button {
        margin: 1px 4px !important;
        padding: 0.4rem 0.6rem !important;
    }

    .fi-sidebar-item-icon svg {
        width: 1.1rem !important;
        height: 1.1rem !important;
    }

    .fi-sidebar-group-label {
        font-size: 0.6rem !important;
    }

    .fi-modal-window {
        border-radius: var(--radius-xl) !important;
        margin: 1rem !important;
    }
}

@media (max-width: 480px) {
    .fi-section,
    .fi-ta-ctn {
        border-radius: var(--radius-default) !important;
    }

    .fi-simple-main-ctn {
        border-radius: var(--radius-xl) !important;
        margin: 0.75rem !important;
    }

    .fi-header-heading {
        font-size: 1.1rem !important;
    }

    .fi-ta-header-cell {
        font-size: var(--font-overline) !important;
        padding: 0.5rem !important;
    }

    .fi-badge {
        font-size: var(--font-overline) !important;
    }
}

/* ============================================================
   MOBILE — Page header layout fix (Баг #3, 28.04.2026)
   На узком экране заголовок страницы наезжал на имя tenant'а в topbar.
   Делаем wrap + truncate чтобы оба влезали без перекрытия.
   ============================================================ */
@media (max-width: 768px) {
    .fi-page-header,
    .fi-header {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        align-items: flex-start !important;
    }
    .fi-page-header > *,
    .fi-header > * {
        min-width: 0 !important;
    }
    .fi-page-title,
    .fi-header-heading {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: break-word !important;
    }
    .fi-topbar .fi-tenant-menu-trigger,
    .fi-topbar [class*="tenant"] {
        max-width: 60vw !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* REDUCED MOTION (WCAG) — defined in design-tokens.css (single source) */