/* Mobile Menu UI */
.mobile-only { display: none !important; }
.desktop-only { display: flex !important; }

@media (max-width: 768px) {
    .mobile-only { display: flex !important; }
    .desktop-only { display: none !important; }
    
    .nav-container { padding: 0 16px; justify-content: space-between; }
    .nav-left { flex: 1; }
    .logo { white-space: nowrap; font-size: 1rem; }
    .logo span { display: none; } /* Скрываем "Helper" на очень маленьких экранах */
    
    .burger-btn {
        background: none; border: none; color: hsl(var(--foreground));
        cursor: pointer; padding: 6px; border-radius: var(--radius);
        margin-left: auto;
    }

    /* Overlay */
    .mobile-menu-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px); z-index: 1000;
        opacity: 0; pointer-events: none; visibility: hidden;
        transition: all 0.3s ease;
    }
    .mobile-menu-overlay.active { opacity: 1; pointer-events: auto; visibility: visible; }

    /* Content */
    .mobile-menu-content {
        position: absolute; top: 0; right: -280px; width: 280px; height: 100%;
        background-color: hsl(var(--background));
        border-left: 1px solid hsl(var(--border));
        padding: 20px; box-shadow: -10px 0 30px rgba(0,0,0,0.5);
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .mobile-menu-overlay.active .mobile-menu-content { right: 0; }
    
    body.menu-open { overflow: hidden; }
    
    .mobile-menu-header {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid hsl(var(--border));
    }
    
    .close-btn {
        background: none; border: none; color: hsl(var(--muted-foreground));
        font-size: 24px; cursor: pointer;
    }
    
    .mobile-menu-links { display: flex; flex-direction: column; gap: 10px; }
    .mobile-nav-link {
        padding: 12px 16px; border-radius: var(--radius);
        color: hsl(var(--foreground)); text-decoration: none;
        font-weight: 500; font-size: 1rem;
        transition: background-color 0.2s;
    }
    .mobile-nav-link:hover { background-color: hsl(var(--secondary)); }
}

/* Navbar Mobile Fix */
@media (max-width: 768px) {
...    .nav-container { padding: 0 16px; }
    .nav-left { gap: 16px; }
    .nav-menu { gap: 12px; }
    .nav-link { font-size: 0.75rem; }
    .logo span { display: none; } /* Скрываем "Helper" на мобилках */
}

/* Main Container Mobile */
@media (max-width: 640px) {
    .main-container { margin: 30px auto; padding: 0 16px; }
    .hero h1 { font-size: 1.75rem; }
    .hero p { font-size: 0.9rem; }
    
    .search-container { margin-bottom: 20px; }
    input#search { padding: 10px 12px 10px 40px; font-size: 0.9rem; }
    .search-icon { left: 12px; }
    
    .card { padding: 16px; }
    .grid-form { grid-template-columns: 1fr; gap: 12px; }
    .form-group.full { grid-column: span 1; }
    
    .item { padding: 12px; }
    .item-title { font-size: 0.9rem; }
    .item-desc { font-size: 0.8rem; }
}

/* Admin Mobile Optimization */
@media (max-width: 1024px) {
    .container { margin: 20px auto; padding: 0 16px; }
    .card { padding: 16px; }
    .form-grid { grid-template-columns: 1fr; gap: 12px; }
    .form-group.full { grid-column: span 1; }
    
    /* Table Responsive */
    .table-wrapper { 
        margin: 0 -16px; 
        border-radius: 0; 
        border-left: none; 
        border-right: none; 
    }
    th, td { padding: 10px 8px; font-size: 0.75rem; }
    .law-row td:nth-child(4) { max-width: 150px; } /* Описание еще короче */
    
    .search-row { flex-direction: column; align-items: stretch; }
    .search-input-wrapper { max-width: none; }
}

/* Switch Toggle Styling (Missing in global) */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: hsl(var(--secondary)); transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: hsl(var(--foreground)); }
input:checked + .slider:before { transform: translateX(20px); background-color: hsl(var(--background)); }