/* ==========================================================================
   SHADCN/UI ZINC DESIGN SYSTEM THEME FOR FILAMENT PHP v3 (PADELPOIN ADMIN)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Global Typography & Scale
   -------------------------------------------------------------------------- */
html {
    font-size: 14px;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   1. Ultra-Slim Modern Scrollbars (shadcn style)
   -------------------------------------------------------------------------- */
* {
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
}

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

html:not(.dark) * {
    scrollbar-color: #E4E4E7 transparent;
}

html:not(.dark) ::-webkit-scrollbar-thumb {
    background-color: #E4E4E7 !important;
    border-radius: 9999px !important;
}

html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background-color: #A1A1AA !important;
}

html.dark * {
    scrollbar-color: #27272A transparent;
}

html.dark ::-webkit-scrollbar-thumb {
    background-color: #27272A !important;
    border-radius: 9999px !important;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #3F3F46 !important;
}

/* --------------------------------------------------------------------------
   2. Brand Header (Topbar & Sidebar)
   -------------------------------------------------------------------------- */
.padelpoin-brand-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    padding: 0.15rem 0 !important;
    text-decoration: none !important;
}

.padelpoin-brand-img {
    height: 1.85rem !important;
    width: auto !important;
    max-width: 2.5rem !important;
    object-fit: contain !important;
}

.padelpoin-brand-text {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 0.975rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.1 !important;
    display: block !important;
    text-transform: uppercase !important;
}

.padelpoin-brand-text .brand-accent {
    color: #10B981 !important;
    font-weight: 800 !important;
}

.padelpoin-brand-sub {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 0.575rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-top: 0.1rem !important;
    line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   3. Layout Structure & Containers
   -------------------------------------------------------------------------- */
.fi-breadcrumbs,
.fi-topbar .fi-breadcrumbs,
nav[aria-label="Breadcrumb"],
nav[aria-label="breadcrumb"] {
    display: none !important;
}

.fi-main-ctn,
.fi-main,
.fi-page,
.fi-page > section,
.fi-ta-ctn,
.fi-ta-content {
    max-width: 100% !important;
    width: 100% !important;
}

.fi-ta-table {
    width: 100% !important;
    table-layout: auto !important;
}

.fi-header-heading {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

.fi-topbar {
    height: 3.25rem !important;
    min-height: 3.25rem !important;
}

/* --------------------------------------------------------------------------
   4. LIGHT THEME (shadcn Zinc Light)
   -------------------------------------------------------------------------- */
html:not(.dark) body,
html:not(.dark) .fi-main-ctn,
html:not(.dark) main {
    background-color: #FAFAFA !important;
    color: #09090B !important;
}

html:not(.dark) .fi-topbar {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E4E4E7 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark) .fi-topbar .padelpoin-brand-text {
    color: #09090B !important;
}

html:not(.dark) .fi-topbar .padelpoin-brand-sub {
    color: #71717A !important;
}

html:not(.dark) .fi-sidebar {
    background-color: #FFFFFF !important;
    border-right: 1px solid #E4E4E7 !important;
}

html:not(.dark) .fi-sidebar-header {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E4E4E7 !important;
}

html:not(.dark) .fi-sidebar-header .padelpoin-brand-text {
    color: #09090B !important;
}

html:not(.dark) .fi-sidebar-header .padelpoin-brand-sub {
    color: #71717A !important;
}

html:not(.dark) .fi-header-heading {
    color: #09090B !important;
}

html:not(.dark) .fi-section,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-ta-content,
html:not(.dark) .fi-modal-window,
html:not(.dark) .fi-dropdown-panel {
    background-color: #FFFFFF !important;
    border: 1px solid #E4E4E7 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) .fi-ta-header,
html:not(.dark) .fi-ta-header-cell,
html:not(.dark) thead tr {
    background-color: #FAFAFA !important;
    color: #71717A !important;
    border-bottom: 1px solid #E4E4E7 !important;
}

html:not(.dark) .fi-ta-cell {
    color: #18181B !important;
}

html:not(.dark) .fi-ta-row:hover {
    background-color: #F4F4F5 !important;
}

html:not(.dark) .fi-ta-row td {
    border-bottom: 1px solid #F4F4F5 !important;
}

html:not(.dark) .fi-input-wrp,
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]),
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: #FFFFFF !important;
    border-color: #E4E4E7 !important;
    color: #09090B !important;
}

html:not(.dark) .fi-fo-field-wrp-label label {
    color: #09090B !important;
}

html:not(.dark) .cubiq-static-footer {
    color: #71717A !important;
}

/* --------------------------------------------------------------------------
   5. DARK THEME (shadcn Zinc Dark)
   -------------------------------------------------------------------------- */
html.dark body,
html.dark .fi-main-ctn,
html.dark main {
    background-color: #09090B !important;
    color: #FAFAFA !important;
}

html.dark .fi-topbar {
    background-color: #09090B !important;
    border-bottom: 1px solid #27272A !important;
}

html.dark .fi-topbar .padelpoin-brand-text {
    color: #FAFAFA !important;
}

html.dark .fi-topbar .padelpoin-brand-sub {
    color: #A1A1AA !important;
}

html.dark .fi-sidebar {
    background-color: #09090B !important;
    border-right: 1px solid #27272A !important;
}

html.dark .fi-sidebar-header {
    background-color: #09090B !important;
    border-bottom: 1px solid #27272A !important;
}

html.dark .fi-sidebar-header .padelpoin-brand-text {
    color: #FAFAFA !important;
}

html.dark .fi-sidebar-header .padelpoin-brand-sub {
    color: #A1A1AA !important;
}

html.dark .fi-header-heading {
    color: #FAFAFA !important;
}

html.dark .fi-section,
html.dark .fi-ta-ctn,
html.dark .fi-ta-content,
html.dark .fi-modal-window,
html.dark .fi-dropdown-panel {
    background-color: #09090B !important;
    border: 1px solid #27272A !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4) !important;
    color: #FAFAFA !important;
}

html.dark .fi-ta-header,
html.dark .fi-ta-header-cell,
html.dark thead tr {
    background-color: #0C0C0E !important;
    color: #A1A1AA !important;
    border-bottom: 1px solid #27272A !important;
}

html.dark .fi-ta-cell {
    color: #E4E4E7 !important;
}

html.dark .fi-ta-row:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

html.dark .fi-ta-row td {
    border-bottom: 1px solid #1F1F23 !important;
}

html.dark .fi-input-wrp,
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea {
    background-color: #09090B !important;
    border-color: #27272A !important;
    color: #FAFAFA !important;
}

html.dark .fi-fo-field-wrp-label label {
    color: #FAFAFA !important;
}

html.dark .cubiq-static-footer {
    color: #71717A !important;
}

/* --------------------------------------------------------------------------
   6. Sidebar Navigation Items & Groups
   -------------------------------------------------------------------------- */
.fi-sidebar-nav {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.fi-sidebar-nav-groups {
    gap: 0.25rem !important;
}

.fi-sidebar-group {
    margin-top: 0.2rem !important;
    margin-bottom: 0.2rem !important;
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
}

.fi-sidebar-group + .fi-sidebar-group,
.fi-sidebar-nav-groups > li + li {
    margin-top: 0.45rem !important;
    padding-top: 0.45rem !important;
}

html:not(.dark) .fi-sidebar-group + .fi-sidebar-group,
html:not(.dark) .fi-sidebar-nav-groups > li + li {
    border-top: 1px solid #F4F4F5 !important;
}

html.dark .fi-sidebar-group + .fi-sidebar-group,
html.dark .fi-sidebar-nav-groups > li + li {
    border-top: 1px solid #1F1F23 !important;
}

.fi-sidebar-group-items {
    gap: 0.15rem !important;
    margin-top: 0.15rem !important;
}

.fi-sidebar-group-label,
.fi-sidebar-group-label span,
.fi-sidebar-group-button {
    font-weight: 600 !important;
    font-size: 0.675rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.15rem !important;
    margin: 0 !important;
}

html:not(.dark) .fi-sidebar-group-label,
html:not(.dark) .fi-sidebar-group-label span,
html:not(.dark) .fi-sidebar-group-button {
    color: #71717A !important;
}

html.dark .fi-sidebar-group-label,
html.dark .fi-sidebar-group-label span,
html.dark .fi-sidebar-group-button {
    color: #A1A1AA !important;
}

.fi-sidebar-item-button {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
    min-height: 2.15rem !important;
    border-radius: 0.375rem !important;
    transition: all 0.15s ease-in-out !important;
}

.fi-sidebar-item-button,
.fi-sidebar-item-button span,
.fi-sidebar-item-label {
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    opacity: 1 !important;
    letter-spacing: -0.01em !important;
}

.fi-sidebar-item-icon {
    width: 1rem !important;
    height: 1rem !important;
    margin-right: 0.5rem !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
}

/* Light Theme Sidebar Items */
html:not(.dark) .fi-sidebar-item-button {
    color: #52525B !important;
}

html:not(.dark) .fi-sidebar-item-icon {
    color: #71717A !important;
}

html:not(.dark) .fi-sidebar-item-button:hover {
    background-color: #F4F4F5 !important;
    color: #09090B !important;
}

html:not(.dark) .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #09090B !important;
}

html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: #18181B !important;
    color: #FAFAFA !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-button span,
html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-button .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #FAFAFA !important;
}

/* Dark Theme Sidebar Items */
html.dark .fi-sidebar-item-button {
    color: #A1A1AA !important;
}

html.dark .fi-sidebar-item-icon {
    color: #71717A !important;
}

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

html.dark .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #FAFAFA !important;
}

html.dark .fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: #27272A !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

html.dark .fi-sidebar-item-active .fi-sidebar-item-button span,
html.dark .fi-sidebar-item-active .fi-sidebar-item-button .fi-sidebar-item-label,
html.dark .fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   7. Sidebar User Profile Card (Guaranteed Rule 3 Compliance)
   -------------------------------------------------------------------------- */
.cubiq-user-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0 -0.5rem 0.85rem -0.5rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.15s ease-in-out !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
}

html:not(.dark) .cubiq-user-card {
    background-color: #FFFFFF !important;
    border: 1px solid #E4E4E7 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html.dark .cubiq-user-card {
    background-color: #121215 !important;
    border: 1px solid #27272A !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.cubiq-avatar-wrapper {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 2.35rem !important;
    height: 2.35rem !important;
}

.cubiq-avatar-img {
    width: 2.35rem !important;
    height: 2.35rem !important;
    border-radius: 9999px !important;
    object-fit: cover !important;
    display: block !important;
}

html:not(.dark) .cubiq-avatar-img {
    border: 1px solid #E4E4E7 !important;
}

html.dark .cubiq-avatar-img {
    border: 1px solid #3F3F46 !important;
}

.cubiq-avatar-initial {
    width: 2.35rem !important;
    height: 2.35rem !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html:not(.dark) .cubiq-avatar-initial {
    background: #F4F4F5 !important;
    color: #09090B !important;
    border: 1px solid #E4E4E7 !important;
}

html.dark .cubiq-avatar-initial {
    background: #27272A !important;
    color: #FAFAFA !important;
    border: 1px solid #3F3F46 !important;
}

.cubiq-online-dot {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 0.5rem !important;
    height: 0.5rem !important;
    background-color: #10B981 !important;
    border-radius: 9999px !important;
}

html:not(.dark) .cubiq-online-dot {
    border: 1.5px solid #FFFFFF !important;
}

html.dark .cubiq-online-dot {
    border: 1.5px solid #121215 !important;
}

.cubiq-user-info {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0.15rem !important;
    margin-left: 0.75rem !important;
    padding: 0 !important;
}

.cubiq-user-name {
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    letter-spacing: -0.01em !important;
}

html:not(.dark) .cubiq-user-name {
    color: #09090B !important;
}

html.dark .cubiq-user-name {
    color: #FAFAFA !important;
}

.cubiq-user-role {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.125rem 0.375rem !important;
    border-radius: 0.25rem !important;
    font-weight: 600 !important;
    font-size: 0.585rem !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

html:not(.dark) .cubiq-user-role {
    background-color: #F4F4F5 !important;
    color: #52525B !important;
    border: 1px solid #E4E4E7 !important;
}

html.dark .cubiq-user-role {
    background-color: #27272A !important;
    color: #D4D4D8 !important;
    border: 1px solid #3F3F46 !important;
}

/* --------------------------------------------------------------------------
   8. shadcn Data Table Styling
   -------------------------------------------------------------------------- */
.fi-ta-header-cell,
.fi-ta-header-cell th {
    padding: 0.55rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

.fi-ta-cell,
.fi-ta-cell td {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
}

.fi-ta-cell .fi-badge {
    font-size: 0.675rem !important;
    padding: 0.125rem 0.45rem !important;
    border-radius: 0.25rem !important;
    font-weight: 500 !important;
}

/* Only icon-only buttons (.fi-icon-btn) in table cells should be square icon buttons */
.fi-ta-actions-cell .fi-icon-btn,
.fi-ta-actions .fi-icon-btn {
    width: 1.85rem !important;
    height: 1.85rem !important;
    min-height: 0 !important;
    padding: 0.2rem !important;
    border-radius: 0.375rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fi-ta-actions-cell .fi-icon-btn svg,
.fi-ta-actions .fi-icon-btn svg {
    width: 1rem !important;
    height: 1rem !important;
}

/* Ensure any regular text button (.fi-btn) inside tables or table headers is NEVER squished */
.fi-ta-actions .fi-btn,
.fi-ta-header-toolbar .fi-btn,
.fi-header .fi-btn {
    width: auto !important;
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    padding: 0 0.85rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border-radius: 0.375rem !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    box-sizing: border-box !important;
}

/* Table Category Filter Combobox (shadcn style) */
.category-filter-select {
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0.85rem !important;
    padding-right: 2rem !important;
    font-size: 0.8125rem !important;
    line-height: normal !important;
    font-weight: 500 !important;
    border-radius: 0.375rem !important;
    background-color: #ffffff !important;
    color: #18181b !important;
    border: 1px solid #e4e4e7 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    outline: none !important;
    cursor: pointer !important;
    appearance: none !important;
    transition: all 0.15s ease !important;
    max-width: 240px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}

.category-filter-select:hover {
    background-color: #f4f4f5 !important;
    border-color: #d4d4d8 !important;
}

html.dark .category-filter-select {
    background-color: #18181b !important;
    color: #f4f4f5 !important;
    border-color: #27272a !important;
    color-scheme: dark !important;
}

html.dark .category-filter-select:hover {
    background-color: #27272a !important;
    border-color: #3f3f46 !important;
}

/* shadcn Dropdown Menus & ActionGroup Popups */
.fi-dropdown-panel {
    width: max-content !important;
    min-width: 11rem !important;
    max-width: 18rem !important;
    border-radius: 0.5rem !important;
    padding: 0.25rem !important;
}

.fi-dropdown-list {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.125rem !important;
}

.fi-dropdown-list-item,
.fi-dropdown-panel button,
.fi-dropdown-panel a {
    width: 100% !important;
    height: auto !important;
    min-height: 2.15rem !important;
    padding: 0.35rem 0.65rem !important;
    border-radius: 0.375rem !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    text-align: left !important;
    font-size: 0.8125rem !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

html:not(.dark) .fi-dropdown-list-item,
html:not(.dark) .fi-dropdown-panel button,
html:not(.dark) .fi-dropdown-panel a {
    color: #18181B !important;
}

html:not(.dark) .fi-dropdown-list-item:hover,
html:not(.dark) .fi-dropdown-panel button:hover,
html:not(.dark) .fi-dropdown-panel a:hover {
    background-color: #F4F4F5 !important;
    color: #09090B !important;
}

html.dark .fi-dropdown-list-item,
html.dark .fi-dropdown-panel button,
html.dark .fi-dropdown-panel a {
    color: #FAFAFA !important;
}

html.dark .fi-dropdown-list-item:hover,
html.dark .fi-dropdown-panel button:hover,
html.dark .fi-dropdown-panel a:hover {
    background-color: #27272A !important;
    color: #FFFFFF !important;
}

.fi-dropdown-list-item-label,
.fi-dropdown-panel button span,
.fi-dropdown-panel a span {
    display: inline-block !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    color: inherit !important;
}

.fi-dropdown-list-item-icon,
.fi-dropdown-panel button svg,
.fi-dropdown-panel a svg {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
    flex-shrink: 0 !important;
    color: #71717A !important;
}

html.dark .fi-dropdown-list-item-icon,
html.dark .fi-dropdown-panel button svg,
html.dark .fi-dropdown-panel a svg {
    color: #A1A1AA !important;
}

.fi-tabs-item {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.775rem !important;
    font-weight: 500 !important;
    border-radius: 0.375rem !important;
}

/* --------------------------------------------------------------------------
   9. shadcn Form Inputs & Sections
   -------------------------------------------------------------------------- */
.fi-section-header {
    padding: 0.75rem 1rem !important;
}

html:not(.dark) .fi-section-header {
    border-bottom: 1px solid #F4F4F5 !important;
}

html.dark .fi-section-header {
    border-bottom: 1px solid #1F1F23 !important;
}

.fi-section-header-title {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

.fi-section-content {
    padding: 1rem 1rem !important;
}

.fi-fo-field-wrp-label label {
    font-size: 0.775rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.2rem !important;
}

.fi-fo-field-wrp-helper-text {
    font-size: 0.7rem !important;
    margin-top: 0.2rem !important;
}

html:not(.dark) .fi-fo-field-wrp-helper-text {
    color: #71717A !important;
}

html.dark .fi-fo-field-wrp-helper-text {
    color: #A1A1AA !important;
}

.fi-input-wrp {
    min-height: 2.25rem !important;
    border-radius: 0.375rem !important;
}

.fi-input-wrp input,
.fi-input-wrp select {
    font-size: 0.8125rem !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

/* --------------------------------------------------------------------------
   10. shadcn 4-Column Stats Overview Widget (Rule 6 Compliant)
   -------------------------------------------------------------------------- */
.fi-wi-stats-overview > div {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}

@media (max-width: 1024px) {
    .fi-wi-stats-overview > div {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .fi-wi-stats-overview > div {
        grid-template-columns: 1fr !important;
    }
}

.fi-wi-stats-overview-stat {
    border-radius: 0.5rem !important;
    padding: 0.9rem 1.15rem !important;
    transition: all 0.15s ease-in-out !important;
}

html:not(.dark) .fi-wi-stats-overview-stat {
    background-color: #FFFFFF !important;
    border: 1px solid #E4E4E7 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html.dark .fi-wi-stats-overview-stat {
    background-color: #09090B !important;
    border: 1px solid #27272A !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

.fi-wi-stats-overview-stat:hover {
    border-color: #71717A !important;
}

.fi-wi-stats-overview-stat-label {
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

html:not(.dark) .fi-wi-stats-overview-stat-label {
    color: #71717A !important;
}

html.dark .fi-wi-stats-overview-stat-label {
    color: #A1A1AA !important;
}

.fi-wi-stats-overview-stat-value {
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
    margin-top: 0.25rem !important;
}

html:not(.dark) .fi-wi-stats-overview-stat-value {
    color: #09090B !important;
}

html.dark .fi-wi-stats-overview-stat-value {
    color: #FAFAFA !important;
}

.fi-wi-stats-overview-stat-description {
    font-weight: 500 !important;
    font-size: 0.725rem !important;
    margin-top: 0.25rem !important;
}

html:not(.dark) .fi-wi-stats-overview-stat-description {
    color: #10B981 !important;
}

html.dark .fi-wi-stats-overview-stat-description {
    color: #34D399 !important;
}

/* --------------------------------------------------------------------------
   11. Static Page Footer
   -------------------------------------------------------------------------- */
.cubiq-static-footer {
    padding: 1.5rem 1rem 1rem 1rem !important;
    text-align: center !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.01em !important;
    margin-top: auto !important;
}

.cubiq-static-footer strong {
    font-weight: 600 !important;
}

.cubiq-static-footer a {
    text-decoration: underline !important;
    font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   12. Mobile Sidebar Bottom Safe-Padding & Floating Menu Toggle (FAB Kanan Bawah)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Perbaikan Bug: Menu sidebar paling bawah tidak terpotong di mobile */
    .fi-sidebar {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    .fi-sidebar-nav {
        padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 24px)) !important;
        overscroll-behavior-y: contain !important;
    }

    /* Pindahkan tombol Show/Hide Menu ke Kanan Bawah (Floating Action Button) */
    .fi-topbar-open-sidebar-btn {
        position: fixed !important;
        bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
        right: 1.25rem !important;
        left: auto !important;
        top: auto !important;
        z-index: 45 !important;
        width: 3.25rem !important;
        height: 3.25rem !important;
        min-width: 3.25rem !important;
        min-height: 3.25rem !important;
        border-radius: 9999px !important;
        background-color: #10B981 !important;
        color: #09090B !important;
        box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease !important;
    }

    .fi-topbar-open-sidebar-btn:active {
        transform: scale(0.92) !important;
        background-color: #059669 !important;
    }

    .fi-topbar-open-sidebar-btn svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
        color: #09090B !important;
        stroke-width: 2.5 !important;
    }

    .fi-topbar-close-sidebar-btn {
        position: fixed !important;
        bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
        right: 1.25rem !important;
        left: auto !important;
        top: auto !important;
        z-index: 50 !important;
        width: 3.25rem !important;
        height: 3.25rem !important;
        min-width: 3.25rem !important;
        min-height: 3.25rem !important;
        border-radius: 9999px !important;
        background-color: #18181B !important;
        color: #FAFAFA !important;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 2px solid #3F3F46 !important;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    .fi-topbar-close-sidebar-btn:active {
        transform: scale(0.92) !important;
    }

    .fi-topbar-close-sidebar-btn svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
        color: #FAFAFA !important;
        stroke-width: 2.5 !important;
    }
}