/* ExPulse - Ortak Stil Dosyası */

/* Material Symbols Outlined */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* Ortak Utility Sınıfları */
.group:hover .group-hover\:block {
    display: block;
}

/* Scrollbar Stilleri */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #CED4DA;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ADB5BD;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-thumb {
    background: #495057;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #6C757D;
}

/* Sidebar scrollbar - daha açık gri */
#sidebar nav::-webkit-scrollbar-thumb {
    background: #E9ECEF;
    border-radius: 4px;
}

#sidebar nav::-webkit-scrollbar-thumb:hover {
    background: #DEE2E6;
}

/* Dark mode sidebar scrollbar */
.dark #sidebar nav::-webkit-scrollbar-thumb {
    background: #6C757D;
}

.dark #sidebar nav::-webkit-scrollbar-thumb:hover {
    background: #ADB5BD;
}

/* Sidebar Collapsed Styles */
#sidebar.sidebar-collapsed .sidebar-text {
    display: none !important;
}

#sidebar.sidebar-collapsed .justify-between {
    justify-content: center;
}

#sidebar.sidebar-collapsed #overview-submenu,
#sidebar.sidebar-collapsed #tenants-submenu {
    display: none !important;
}

#sidebar.sidebar-collapsed {
    padding: 0.5rem;
}

#sidebar.sidebar-collapsed .p-4 {
    padding: 0.5rem;
}

#sidebar.sidebar-collapsed .gap-3 {
    gap: 0.5rem;
}

#sidebar.sidebar-collapsed .px-3 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#sidebar.sidebar-collapsed .pl-8 {
    padding-left: 0.5rem;
}

#sidebar.sidebar-collapsed #sidebar-toggle {
    display: flex !important;
}

#sidebar.sidebar-collapsed > div {
    position: relative;
}

#sidebar.sidebar-collapsed .material-symbols-outlined:not(.sidebar-text *) {
    display: inline-block !important;
}

#sidebar.sidebar-collapsed a,
#sidebar.sidebar-collapsed button {
    justify-content: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

#sidebar.sidebar-collapsed a > .material-symbols-outlined,
#sidebar.sidebar-collapsed button > .material-symbols-outlined,
#sidebar.sidebar-collapsed .material-symbols-outlined:not(.sidebar-text) {
    display: inline-block !important;
    visibility: visible !important;
}

/* Sidebar Submenu Animations */
#overview-submenu,
#tenants-submenu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, margin-top 0.3s ease-in-out, margin-bottom 0.3s ease-in-out;
    margin-top: 0;
    margin-bottom: 0;
}

#overview-submenu:not(.hidden),
#tenants-submenu:not(.hidden) {
    max-height: 500px;
    opacity: 1;
    margin-top: 0.25rem;
    margin-bottom: 0;
}

#overview-submenu.hidden,
#tenants-submenu.hidden {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Arrow rotation animation */
#overview-arrow,
#tenants-arrow {
    transition: transform 0.3s ease-in-out;
}

/* Responsive Sidebar - Hamburger Menu */
@media (max-width: 767px) {
    /* Sidebar open state */
    #sidebar.sidebar-open {
        transform: translateX(0) !important;
    }
    
    /* Main content should not have left margin on mobile */
    .ml-64 {
        margin-left: 0 !important;
    }
}

/* Desktop: Sidebar always visible */
@media (min-width: 768px) {
    #sidebar {
        transform: translateX(0) !important;
    }
    
    #sidebar-overlay {
        display: none !important;
    }
}

/* Responsive table - hide scroll, show dropdown on mobile */
@media (max-width: 768px) {
    /* Hide horizontal scroll on tables */
    .overflow-x-auto {
        overflow-x: visible !important;
    }
    
    /* Hide table on mobile, will be replaced with dropdown */
    table.responsive-table {
        display: none;
    }
    
    /* Show dropdown version on mobile */
    .table-dropdown-mobile {
        display: block;
    }
}

/* Desktop: hide dropdown, show table */
@media (min-width: 769px) {
    .table-dropdown-mobile {
        display: none;
    }
    
    table.responsive-table {
        display: table;
    }
}