/* Responsive Styles */

/* Large Devices */
@media screen and (max-width: 1200px) {
    .main-menu ul {
        flex-wrap: wrap;
    }
    
    .main-menu a {
        padding: 0.5rem 0.8rem;
    }
    
    .main-menu .submenu {
        min-width: 180px;
    }
}

/* Medium Devices */
@media screen and (max-width: 992px) {
    .main-content {
        flex-direction: column;
    }
    
    .transaction-panel {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    
    .main-header {
        flex-wrap: wrap;
    }
    
    .logo-container {
        order: 1;
        flex: 1;
    }
    
    .user-info {
        order: 3;
        width: 100%;
        align-items: flex-start;
        margin-top: 10px;
    }
    
    .header-buttons {
        order: 2;
    }
    
    .mobile-menu-toggle {
        display: block;
        order: 0;
        margin-right: 15px;
    }
    
    .main-menu {
        display: none;
    }
    
    /* Custom styles for mobile submenu display */
    .main-menu .has-submenu {
        position: relative;
    }
    
    .main-menu .submenu {
        position: static;
        width: 100%;
        box-shadow: none;
        border-left: none;
        border-right: none;
    }
    
    .main-menu .has-submenu .submenu-icon {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .service-options {
        flex-direction: row;
    }
    
    .service-column {
        width: 50%;
    }
}

/* Small Devices */
@media screen and (max-width: 768px) {
    .main-header {
        padding: 0.5rem;
    }
    
    .header-buttons button:not(.btn-danger) {
        display: none;
    }
    
    .service-options {
        flex-direction: column;
    }
    
    .service-column {
        width: 100%;
    }
    
    .user-details {
        flex-direction: column;
    }
    
    .user-details span {
        margin-bottom: 5px;
    }
    
    /* Mobile submenu style adjustments */
    .mobile-submenu li a {
        padding-left: 2rem;
        font-size: 0.8rem;
    }
}

/* Extra Small Devices */
@media screen and (max-width: 576px) {
    .logo-container h1 {
        font-size: 1.2rem;
    }
    
    .main-header {
        padding: 0.4rem;
    }
    
    .panel-header h3 {
        font-size: 1rem;
    }
    
    .form-group label {
        font-size: 0.85rem;
    }
    
    .service-item {
        font-size: 0.8rem;
        padding: 0.5rem 0.8rem;
    }
    
    .main-footer {
        padding: 0.8rem 0.5rem;
    }
    
    .notification-bar {
        padding: 0.8rem;
    }
    
    .device-warning {
        font-size: 0.8rem;
    }
    
    /* Further reduce padding for mobile submenus */
    .mobile-submenu li a {
        padding: 0.6rem 0.8rem 0.6rem 1.8rem;
    }
}

/* Mobile Navigation Overlay */
@media screen and (max-width: 992px) {
    .overlay {
        display: none;
    }
    
    .overlay.active {
        display: block;
    }
}

/* Print Media */
@media print {
    .main-header, .main-menu, .main-footer, .mobile-nav {
        display: none;
    }
    
    .dashboard-content {
        padding: 0;
        width: 100%;
    }
    
    .main-content {
        display: block;
    }
    
    .transaction-panel {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .notification-bar {
        border: 1px solid #000;
    }
}