/* ========================================
   MOBILE BOTTOM NAVIGATION BAR
   ======================================== */

:root {
    --mobile-bottom-nav-height: 60px;
}

/* Ship table action visibility */
.ship-actions-mobile {
    display: none !important;
}

.ship-actions-desktop {
    display: inline-flex !important;
}

/* Enable horizontal scrolling for wide tables on small screens */
@media (max-width: 768px) {
    .ship-actions-mobile {
        display: inline-flex !important;
    }

    .ship-actions-desktop {
        display: none !important;
    }

    .fi-ta-table-wrapper,
    .fi-ta-table-container {
        overflow-x: auto !important;
    }

    .fi-ta-table {
        min-width: 720px;
    }
}

/* Hide sidebar and hamburger menu on mobile */
@media (max-width: 768px) {

    /* Hide the sidebar completely on mobile */
    .fi-sidebar {
        display: none !important;
    }

    /* Hide only the hamburger menu button - target specific classes from HTML */
    .fi-topbar .fi-sidebar-open-button,
    .fi-topbar .fi-topbar-open-sidebar-btn,
    .fi-topbar .fi-topbar-close-sidebar-btn,
    .fi-topbar [data-sidebar-open-button],
    .fi-topbar button[aria-label*="sidebar"],
    .fi-topbar button[aria-label*="menu"],
    .fi-topbar button[data-sidebar-open-button],
    .fi-topbar [x-data*="sidebar"],
    .fi-topbar button[type="button"][aria-label*="Open"],
    .fi-topbar button[aria-expanded="false"],
    .fi-topbar button[aria-expanded="true"],
    .fi-topbar button[title*="باز کردن نوار کناری"],
    .fi-topbar button[title*="بستن نوار کناری"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Adjust main content area to take full width */
    .fi-main {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Fix topbar styling on mobile */
    .fi-topbar {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        position: fixed !important;
        top: 0 !important;
        height: auto !important;
        min-height: 64px !important;
    }

    /* Ensure topbar content is properly aligned */
    .fi-topbar .fi-topbar-content {
        width: 100% !important;
        justify-content: space-between !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin: 0 !important;
    }

    /* Remove any container margins that might cause spacing */
    .fi-topbar .fi-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: none !important;
    }

    /* Revert table spacing to default */
    .fi-ta-table-container,
    .fi-ta-content,
    .fi-ta-table,
    .fi-ta-table-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Remove extra spacing from table rows and cells */
    .fi-ta-table tbody tr,
    .fi-ta-table tbody td,
    .fi-ta-table thead tr,
    .fi-ta-table thead th {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Ensure table takes full width */
    .fi-ta-table {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Remove extra spacing from table containers */
    .fi-ta-ctn,
    .fi-ta-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Ensure table content area uses full width */
    .fi-ta-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ensure content doesn't get hidden behind bottom nav - minimal approach */
    .fi-main-content {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + 0.5rem) !important;
        margin-bottom: 0 !important;
    }

    /* Only add padding to main page containers - reduced */
    .fi-page {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + 0.5rem) !important;
    }

    /* Ensure modals and dropdowns are not affected */
    .fi-modal,
    .fi-dropdown-panel,
    .fi-tooltip {
        z-index: 9999 !important;
    }

    /* Fix popups and action buttons being hidden - more targeted approach */
    .fi-modal-panel {
        margin-bottom: var(--mobile-bottom-nav-height) !important;
        max-height: calc(100vh - var(--mobile-bottom-nav-height) - 2rem) !important;
        overflow-y: auto !important;
    }

    /* Fix modal content to ensure action buttons are visible */
    .fi-modal-content {
        max-height: calc(100vh - var(--mobile-bottom-nav-height) - 4rem) !important;
        overflow-y: auto !important;
    }

    /* Fix form action buttons - only when they exist */
    .fi-form-actions {
        margin-bottom: var(--mobile-bottom-nav-height) !important;
        padding-bottom: 1rem !important;
    }

    /* Ensure modal footer is always visible */
    .fi-modal-footer {
        position: sticky !important;
        bottom: 0 !important;
        background: white !important;
        border-top: 1px solid #e5e7eb !important;
        padding: 1rem !important;
        margin-bottom: var(--mobile-bottom-nav-height) !important;
    }

    /* Dark mode support for modal footer */
    .dark .fi-modal-footer {
        background: #1e293b !important;
        border-top-color: #334155 !important;
    }

    /* Fix specific modal content areas */
    .fi-modal-body {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + 1rem) !important;
        max-height: calc(100vh - var(--mobile-bottom-nav-height) - 8rem) !important;
        overflow-y: auto !important;
    }

    /* Reduce form section spacing - general sections */
    /* .fi-section {
      margin-bottom: 0.3rem !important;
    } */

    /* Add extra space only to the last form section */
    /* .fi-section:last-child {
      margin-bottom: 1rem !important;
    } */

    /* Special handling for modal sections */
    /* .fi-modal .fi-section:last-child {
      margin-bottom: calc(var(--mobile-bottom-nav-height) + 1rem) !important;
    }
     */
    /* Reduce spacing between form fields within sections */
    /* .fi-section .fi-form-component {
      margin-bottom: 0.5rem !important;
    } */

    /* Ensure proper spacing for form actions */
    /* .fi-form-actions {
      margin-top: 1rem !important;
      margin-bottom: var(--mobile-bottom-nav-height) !important;
    } */

    /* Fix sticky elements */
    .fi-sticky,
    .fi-fixed {
        bottom: var(--mobile-bottom-nav-height) !important;
    }

    /* Fix table scroll areas - only where needed */
    .fi-ta-ctn {
        margin-bottom: calc(var(--mobile-bottom-nav-height) + 0.5rem) !important;
    }

    /* Ensure proper spacing without affecting other elements */
    .fi-main-ctn {
        padding-bottom: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 0 !important;
    }

    /* Only add padding to the main content wrapper - reduced */
    .fi-main {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + 0.5rem) !important;
    }

    /* Fix form pages specifically - minimal approach */
    .fi-resource-create-record .fi-form-actions,
    .fi-resource-edit-record .fi-form-actions {
        margin-bottom: var(--mobile-bottom-nav-height) !important;
    }

    /* Ensure main content starts below fixed header */
    .fi-main {
        padding-top: 0 !important;
        /* Remove extra padding */
        margin-top: 0 !important;
    }

    /* Fix page content spacing */
    /* Revert to default Filament page spacing */
    .fi-page {
        padding-top: 1.5rem !important;
        margin-top: 0 !important;
    }

    /* Revert page header to default spacing */
    .fi-page-header {
        padding-top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important;
    }

    /* Revert page content to default spacing */
    .fi-page-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Ensure proper spacing for content below fixed header */
    .fi-main-content {
        margin-top: 64px !important;
        padding-top: 0 !important;
    }

    /* Ensure proper spacing between header and page content */
    .fi-main-content .fi-page {
        padding-top: 0 !important;
    }

    /* Fix any container spacing issues */
    .fi-container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Fix any body margins that might cause issues */
    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ensure the app container takes full width */
    .fi-app {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Topbar positioning styles removed */

    /* Ensure logo content is visible */
    .fi-topbar .fi-brand img,
    .fi-topbar .fi-brand span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Show user menu - ensure it's visible */
    .fi-topbar .fi-topbar-actions button[aria-label*="user"],
    .fi-topbar .fi-topbar-actions button[aria-label*="notification"],
    .fi-topbar .fi-topbar-actions button[aria-label*="theme"],
    .fi-topbar .fi-topbar-actions .fi-user-menu,
    .fi-topbar .fi-topbar-actions .fi-theme-switcher,
    .fi-topbar .fi-dropdown.fi-user-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Remove any spacing where hamburger menu was */
    .fi-topbar .fi-topbar-content>*:first-child {
        display: none !important;
    }

    /* Additional targeting for hamburger menu buttons */
    .fi-topbar button.fi-icon-btn.fi-color-gray.fi-topbar-open-sidebar-btn,
    .fi-topbar button.fi-icon-btn.fi-color-gray.fi-topbar-close-sidebar-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* Topbar positioning styles removed */

    /* Fix tenant selector popup positioning */
    .fi-topbar .tenant-selector .tenant-dropdown .absolute {
        left: 20px !important;
        right: auto !important;
        transform: none !important;
        position: fixed !important;
        z-index: 9999999 !important;
        top: 50px !important;
        margin-top: 0.5rem !important;
    }

    /* Ensure proper centering for tenant selector popup */
    .fi-topbar .tenant-selector .tenant-dropdown {
        position: relative !important;
    }

    /* Override the inline style that forces position: fixed */
    .fi-topbar .tenant-selector .tenant-dropdown .absolute[style*="position: fixed"] {
        position: absolute !important;
    }

    /* Ensure tenant selector popup is always on top */
    .tenant-selector .tenant-dropdown,
    .tenant-selector .tenant-dropdown * {
        z-index: 9999999 !important;
    }

    /* Override any Filament z-index that might interfere */
    .fi-app .tenant-selector .tenant-dropdown .absolute {
        z-index: 9999999 !important;
        position: fixed !important;
    }

    /* Force proper positioning for all tenant selector popups */
    .tenant-selector .tenant-dropdown .absolute {
        left: 20px !important;
        right: auto !important;
        transform: none !important;
        position: fixed !important;
        z-index: 9999999 !important;
        top: 80px !important;
        margin-top: 0.5rem !important;
    }
}

/* ========================================
             DASHBOARD SPECIFIC MOBILE STYLES
             ======================================== */

/* Dashboard section spacing */
@media (max-width: 768px) {

    /* Add proper margin to dashboard section - vertical only */
    .flex.flex-col.gap-y-8.py-8 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
        margin-left: 1rem !important;
        margin-right: 0 !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Dashboard button mobile positioning */
    .mobile-dashboard-button {
        margin-left: auto !important;
        margin-right: 0 !important;
        order: 2 !important;
    }

    /* Dashboard page header mobile layout */
    .fi-page-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* Dashboard title positioning */
    .filament-header-heading {
        margin-right: auto !important;
        margin-left: 0 !important;
        flex: 1 !important;
    }

    /* Dashboard actions container */
    .filament-header-heading+div {
        margin-left: auto !important;
        margin-right: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Ensure proper spacing */
    .fi-page-header .flex.items-center.justify-between {
        gap: 1rem !important;
    }

    /* Add margin to the header container */
    .flex.items-center.justify-between.w-full {
        margin-bottom: 1rem !important;
        padding: 0.5rem 0 !important;
    }

    /* Add spacing between dashboard elements */
    .fi-wi-widget {
        margin-top: 1rem !important;
    }

    /* Ensure proper spacing for the calendar widget */
    .filament-widget-full-width {
        margin-top: 0.5rem !important;
    }
}

/* Bottom Navigation Bar */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12), 0 -2px 8px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    display: none;
    /* Hidden by default, shown on mobile */
    padding: 6px 0;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    min-height: var(--mobile-bottom-nav-height);
    /* Minimum height for consistent spacing */
}

/* Show bottom nav only on mobile */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: block;
    }
}

/* Navigation Items Container */
.mobile-bottom-nav__items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}

/* Individual Navigation Item */
.mobile-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 6px 2px;
    text-decoration: none;
    color: #64748b;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    margin: 0 2px;
    position: relative;
    min-height: 50px;
}

/* Navigation Item Hover Effect */
.mobile-bottom-nav__item:hover {
    color: #8b5cf6;
    background-color: rgba(139, 92, 246, 0.1);
    transform: translateY(-2px);
}

/* Active Navigation Item */
.mobile-bottom-nav__item.active {
    color: #8b5cf6;
    background-color: rgba(139, 92, 246, 0.15);
}

/* Active Item Indicator */
.mobile-bottom-nav__item.active::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: #8b5cf6;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
}

/* Navigation Icon */
.mobile-bottom-nav__icon {
    width: 20px;
    height: 20px;
    margin-bottom: 3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active icon scaling */
.mobile-bottom-nav__item.active .mobile-bottom-nav__icon {
    transform: scale(1.1);
}

/* Navigation Label */
.mobile-bottom-nav__label {
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active label styling */
.mobile-bottom-nav__item.active .mobile-bottom-nav__label {
    font-weight: 700;
    color: #8b5cf6;
}

/* Ripple Effect on Tap */
.mobile-bottom-nav__item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: rgba(139, 92, 246, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    pointer-events: none;
}

.mobile-bottom-nav__item:active::after {
    width: 60px;
    height: 60px;
}

/* Light Mode - Ensure proper light theme */
.mobile-bottom-nav {
    background: #ffffff !important;
    border-top-color: #e2e8f0 !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12), 0 -2px 8px rgba(0, 0, 0, 0.08) !important;
}

.mobile-bottom-nav__item {
    color: #64748b !important;
}

.mobile-bottom-nav__item:hover {
    color: #8b5cf6 !important;
    background-color: rgba(139, 92, 246, 0.1) !important;
}

.mobile-bottom-nav__item.active {
    color: #8b5cf6 !important;
    background-color: rgba(139, 92, 246, 0.15) !important;
}

/* Dark Mode Support - Only when explicitly in dark mode */
.dark .mobile-bottom-nav {
    background: #1e293b !important;
    border-top-color: #334155 !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3), 0 -2px 8px rgba(0, 0, 0, 0.2) !important;
}

.dark .mobile-bottom-nav__item {
    color: #94a3b8 !important;
}

.dark .mobile-bottom-nav__item:hover {
    color: #8b5cf6 !important;
    background-color: rgba(139, 92, 246, 0.15) !important;
}

.dark .mobile-bottom-nav__item.active {
    color: #8b5cf6 !important;
    background-color: rgba(139, 92, 246, 0.2) !important;
}

/* Animation for smooth appearance */
@keyframes slideUpFadeIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.mobile-bottom-nav {
    animation: slideUpFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure proper spacing for content */
@media (max-width: 768px) {
    body {
        padding-bottom: 0 !important;
    }

    .fi-main {
        padding-bottom: 0 !important;
    }

    .fi-main-content {
        padding-bottom: 80px !important;
    }
}

/* Special styling for very small screens */
@media (max-width: 375px) {
    .mobile-bottom-nav__item {
        padding: 6px 2px;
        margin: 0 2px;
        min-height: 56px;
    }

    .mobile-bottom-nav__icon {
        width: 22px;
        height: 22px;
    }

    .mobile-bottom-nav__label {
        font-size: 10px;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .mobile-bottom-nav {
        padding: 6px 0;
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }

    .mobile-bottom-nav__item {
        min-height: 50px;
        padding: 6px 4px;
    }

    .mobile-bottom-nav__icon {
        width: 20px;
        height: 20px;
        margin-bottom: 2px;
    }

    .mobile-bottom-nav__label {
        font-size: 10px;
    }
}

/* Animation for vessel card actions */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.2s ease-out;
}