/* =====================================================
   MOBILE RESPONSIVE - المحامي المحترف
   إصدار محسّن - بدون scroll أفقي - بطاقات للموبايل
   ===================================================== */

/* ===== Global Reset ===== */
* { 
    -webkit-tap-highlight-color: transparent; 
    box-sizing: border-box; 
}
html { 
    -webkit-text-size-adjust: 100%; 
    scroll-behavior: smooth; 
}
body { 
    overflow-x: hidden !important; 
}
img, svg, video { 
    max-width: 100%; 
    height: auto; 
}

/* ===== Sidebar Mobile ===== */
@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1001;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        width: 280px !important;
    }
    .sidebar.active {
        transform: translateX(0) !important;
    }
    .main-content {
        margin-right: 0 !important;
        width: 100% !important;
    }
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
    }
    .sidebar-overlay.active {
        display: block;
    }
    .sidebar-toggle {
        display: flex !important;
    }
}

/* =======================================================
   MOBILE STYLES (max-width: 768px)
   ======================================================= */
@media (max-width: 768px) {
    
    /* ===== منع أي scroll أفقي ===== */
    html, body, .app-container, .main-content, .page-content {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* ===== App Bar ثابت ===== */
    .main-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        background: #fff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    
    .header-right {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .page-title h1 {
        font-size: 0.95rem !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .page-title p {
        display: none !important;
    }
    
    /* ===== Header Left - البروفايل والإشعارات ===== */
    .header-left {
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
    
    /* إخفاء البحث في الـ Header على الموبايل */
    .header-left .quick-search-container,
    .header-left .header-search,
    .header-search {
        display: none !important;
    }
    
    /* زر الإشعارات */
    .notification-btn, .notif-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 12px !important;
        font-size: 1rem !important;
        background: #f1f5f9 !important;
        border: none !important;
        position: relative !important;
    }
    
    .notif-badge, .notification-badge {
        position: absolute !important;
        top: -3px !important;
        right: -3px !important;
        min-width: 18px !important;
        height: 18px !important;
        font-size: 0.65rem !important;
        padding: 0 5px !important;
        border-radius: 10px !important;
        background: #ef4444 !important;
        color: #fff !important;
    }
    
    /* زر البروفايل - تصميم محسّن */
    .user-btn {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 5px 10px 5px 6px !important;
        background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        min-width: 0 !important;
    }
    
    .user-avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
        font-size: 0.85rem !important;
    }
    
    .user-name {
        display: none !important;
    }
    
    /* أيقونة السهم */
    .user-btn .fa-chevron-down,
    .user-btn i.fa-chevron-down {
        display: none !important;
    }
    
    /* Dropdown Menu */
    .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        bottom: 70px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 16px !important;
        box-shadow: 0 -4px 30px rgba(0,0,0,0.15) !important;
        padding: 8px !important;
    }
    
    .dropdown-item {
        padding: 14px 16px !important;
        border-radius: 12px !important;
        font-size: 0.9rem !important;
        gap: 12px !important;
    }
    
    .dropdown-item i {
        width: 20px !important;
        text-align: center !important;
    }
    
    /* ===== Notifications Panel ===== */
    .notif-panel, .notifications-dropdown .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        bottom: 70px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-height: 60vh !important;
        border-radius: 16px !important;
        box-shadow: 0 -4px 30px rgba(0,0,0,0.15) !important;
    }
    
    .notif-list {
        max-height: 50vh !important;
        overflow-y: auto !important;
    }
    
    .notif-item {
        padding: 12px !important;
    }
    
    .sidebar-toggle {
        display: flex !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 12px !important;
        font-size: 1rem !important;
        background: #f1f5f9 !important;
        border: none !important;
    }

    /* ===== Page Content ===== */
    .page-content {
        padding: 12px !important;
        padding-bottom: 80px !important;
        max-width: 100% !important;
    }

    /* ===== Stats - 2×2 Grid ===== */
    .stats-grid, .stats-row, .stat-cards,
    .hero-stats, .dash-cards, .dashboard-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .stat-card, .hero-stat, .dash-card {
        padding: 14px 12px !important;
        border-radius: 12px !important;
        text-align: center !important;
    }
    .stat-icon, .dash-card-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        margin: 0 auto 8px !important;
    }
    .stat-value, .hero-stat .value, .dash-card-value {
        font-size: 1.4rem !important;
    }
    .stat-label, .hero-stat .label, .dash-card-label {
        font-size: 0.7rem !important;
    }

    /* ===== Filters & Search - تصميم محسّن ===== */
    .filters-row, .toolbar, .page-toolbar, .filter-bar {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }
    
    /* صف البحث */
    .filters-row .filter-group:first-child,
    .filter-group:has(#searchInput),
    .filter-group:has(input[type="text"]),
    .filter-group:has(input[type="search"]) {
        width: 100% !important;
        flex: none !important;
    }
    
    /* حقل البحث */
    #searchInput,
    input[type="search"],
    .filters-row input[type="text"]:first-of-type {
        width: 100% !important;
        padding: 12px 14px !important;
        padding-right: 42px !important;
        font-size: 0.9rem !important;
        height: 46px !important;
        border-radius: 12px !important;
        border: 2px solid #e2e8f0 !important;
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat right 12px center !important;
        background-size: 20px !important;
    }
    
    #searchInput:focus,
    input[type="search"]:focus {
        border-color: #4f46e5 !important;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
        outline: none !important;
    }
    
    /* صف الفلاتر */
    .filters-row .filter-group:not(:first-child),
    .filter-group:has(select) {
        flex: 1 !important;
    }
    
    /* Container للفلاتر */
    .filters-row {
        flex-wrap: wrap !important;
    }
    
    /* الفلاتر جنب بعض */
    .filters-row > *:not(:first-child) {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: calc(50% - 6px) !important;
    }
    
    .filter-group {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
    }
    
    .filter-group label {
        display: none !important;
    }
    
    .filter-group .form-control,
    .filter-group select,
    .filters-row select {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
        height: 42px !important;
        border-radius: 10px !important;
        border: 2px solid #e2e8f0 !important;
        background-color: #fff !important;
        width: 100% !important;
    }
    
    .filter-group select:focus,
    .filters-row select:focus {
        border-color: #4f46e5 !important;
        outline: none !important;
    }
    
    /* أزرار الفلاتر */
    .filters-row > .btn,
    .filters-row .btn-group,
    .toolbar .btn {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: calc(50% - 6px) !important;
    }
    
    .filters-row .btn,
    .toolbar .btn,
    .btn-group .btn {
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
        height: 42px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    
    /* زر الإضافة بارز */
    .filters-row .btn-success,
    .filters-row .btn-primary:last-of-type,
    .btn-add {
        background: linear-gradient(135deg, #10b981, #059669) !important;
        border: none !important;
        color: #fff !important;
        font-weight: 600 !important;
    }
    
    .filters-row .btn i {
        font-size: 0.9rem !important;
    }
    
    /* إخفاء نص الأزرار على الشاشات الصغيرة جداً */
    @media (max-width: 400px) {
        .filters-row .btn span {
            display: none !important;
        }
        .filters-row .btn {
            min-width: 42px !important;
            flex: 0 0 42px !important;
        }
    }
    
    /* Card الفلاتر */
    .card:has(.filters-row) {
        padding: 0 !important;
        margin-bottom: 12px !important;
    }
    
    .card:has(.filters-row) .card-body {
        padding: 12px !important;
    }

    /* ===== Cards ===== */
    .card {
        padding: 0 !important;
        border-radius: 14px !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }
    .card-header {
        padding: 12px 14px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .card-title {
        font-size: 0.9rem !important;
    }
    .card-body {
        padding: 12px !important;
    }

    /* =======================================================
       إخفاء الجداول - عرض بطاقات بدلاً منها
       ======================================================= */
    .table-responsive {
        overflow: visible !important;
        overflow-x: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .table-responsive table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    
    .table-responsive table thead {
        display: none !important;
    }
    
    .table-responsive table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .table-responsive table tr {
        display: flex !important;
        flex-direction: column !important;
        background: #fff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 14px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    }
    
    .table-responsive table tr:active {
        background: #f8fafc !important;
    }
    
    .table-responsive table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-size: 0.85rem !important;
        width: 100% !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    
    .table-responsive table td:last-child {
        border-bottom: none !important;
    }
    
    /* Label للخلايا */
    .table-responsive table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #64748b;
        font-size: 0.75rem;
        flex-shrink: 0;
        margin-left: 12px;
    }
    
    /* إخفاء عمود # */
    .table-responsive table td[data-label="#"] {
        display: none !important;
    }
    
    /* العنصر الرئيسي بارز */
    .table-responsive table td:nth-child(2) {
        padding-bottom: 10px !important;
        margin-bottom: 6px !important;
        border-bottom: 2px solid #e2e8f0 !important;
        font-size: 0.95rem !important;
    }
    
    .table-responsive table td:nth-child(2)::before {
        display: none !important;
    }
    
    .table-responsive table td:nth-child(2) strong {
        font-size: 1rem !important;
        color: #4f46e5 !important;
    }
    
    /* خلية الإجراءات */
    .table-responsive table td.actions,
    .table-responsive table td:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding-top: 12px !important;
        margin-top: 8px !important;
        border-top: 1px solid #e2e8f0 !important;
        border-bottom: none !important;
        justify-content: flex-start !important;
    }
    
    .table-responsive table td.actions::before,
    .table-responsive table td:last-child::before {
        display: none !important;
    }
    
    .table-responsive table td.actions .btn,
    .table-responsive table td .btn {
        flex: 1 1 auto !important;
        min-width: 70px !important;
        padding: 10px 12px !important;
        font-size: 0.75rem !important;
        border-radius: 10px !important;
        justify-content: center !important;
    }
    
    .table-responsive table td .btn span {
        display: none !important;
    }
    
    .table-responsive table td .btn i {
        margin: 0 !important;
        font-size: 0.9rem !important;
    }
    
    /* Badges */
    .table-responsive table .badge,
    .table-responsive table .status-badge {
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
        border-radius: 8px !important;
    }
    
    /* Empty State */
    .table-responsive table tr:has(.empty-state) {
        padding: 30px !important;
    }
    
    .table-responsive table td:has(.empty-state) {
        display: block !important;
        text-align: center !important;
        border: none !important;
    }
    
    .table-responsive table td:has(.empty-state)::before {
        display: none !important;
    }

    /* =======================================================
       بقية العناصر
       ======================================================= */
    
    /* Modals */
    .modal {
        padding: 0 !important;
    }
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
        max-height: calc(100vh - 20px) !important;
    }
    .modal-content {
        border-radius: 16px !important;
        max-height: calc(100vh - 20px) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .modal-header {
        padding: 14px 16px !important;
        flex-shrink: 0 !important;
    }
    .modal-title {
        font-size: 1rem !important;
    }
    .modal-body {
        padding: 14px !important;
        overflow-y: auto !important;
        flex: 1 !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .modal-footer {
        padding: 12px 14px !important;
        flex-shrink: 0 !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    .modal-footer .btn {
        flex: 1 !important;
        padding: 10px !important;
        font-size: 0.85rem !important;
    }

    /* Forms */
    .form-row {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .form-group {
        margin-bottom: 12px !important;
    }
    .form-label {
        font-size: 0.8rem !important;
        margin-bottom: 6px !important;
    }
    .form-control {
        padding: 10px 12px !important;
        font-size: 0.9rem !important;
        border-radius: 10px !important;
    }

    /* Pagination */
    .pagination {
        gap: 4px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        margin-top: 16px !important;
    }
    .pagination .btn {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
        min-width: 36px !important;
    }

    /* Quick Actions */
    .quick-actions-grid, .quick-actions {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .quick-action-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    /* Tabs */
    .tabs-container, .tabs, .nav-tabs, .filter-tabs {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding-bottom: 6px !important;
    }
    .tab-btn, .nav-tab, .tab, .filter-tab {
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 0.78rem !important;
        flex-shrink: 0 !important;
        border-radius: 10px !important;
    }

    /* Session/Appointment Cards */
    .session-card, .appointment-card {
        padding: 14px !important;
        border-radius: 14px !important;
        margin-bottom: 10px !important;
    }
    .session-card .card-head,
    .appointment-card .card-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .session-card .card-grid,
    .appointment-card .card-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .session-card .card-foot,
    .appointment-card .card-foot {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .session-card .card-foot .btn,
    .appointment-card .card-foot .btn {
        flex: 1 !important;
    }

    /* Employee/Lawyer Cards */
    .emp-card {
        padding: 14px !important;
        margin-bottom: 10px !important;
        border-radius: 14px !important;
    }
    .lawyers-container .col-md-4,
    .contracts-grid .col-md-4 {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 10px !important;
    }

    /* Contract Cards */
    .contract-card {
        padding: 14px !important;
        border-radius: 14px !important;
    }
    .contract-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .contract-dates {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Documents Grid */
    .documents-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .document-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    /* Finance */
    .voucher-card {
        margin-bottom: 10px !important;
        border-radius: 14px !important;
    }
    .voucher-header {
        padding: 12px !important;
        font-size: 0.85rem !important;
    }
    .voucher-body {
        padding: 12px !important;
    }

    /* Settings */
    .settings-container {
        grid-template-columns: 1fr !important;
    }
    .settings-nav, .settings-menu {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-bottom: 14px !important;
    }
    .nav-item, .settings-menu-item {
        flex: 1 1 calc(50% - 4px) !important;
        padding: 10px !important;
        font-size: 0.75rem !important;
        text-align: center !important;
        border-radius: 10px !important;
    }

    /* Calendar */
    .calendar-grid {
        font-size: 0.75rem !important;
    }
    .calendar-cell {
        min-height: 36px !important;
        padding: 4px !important;
    }

    /* Reports */
    .report-grid {
        grid-template-columns: 1fr !important;
    }
    .chart-container {
        height: 220px !important;
    }

    /* Case/Client Detail */
    .case-header, .client-header-section {
        padding: 14px !important;
        border-radius: 14px !important;
    }
    .case-meta-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .info-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Empty States */
    .empty-state {
        padding: 30px 16px !important;
    }
    .empty-state i {
        font-size: 2.5rem !important;
    }
    .empty-state h4, .empty-state h3 {
        font-size: 1rem !important;
    }
    .empty-state p {
        font-size: 0.8rem !important;
    }

    /* Kanban */
    .kanban-board {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .kanban-column {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* Task Cards */
    .task-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }
    .task-title {
        font-size: 0.9rem !important;
    }
    .task-tag {
        font-size: 0.68rem !important;
        padding: 4px 8px !important;
    }

    /* Declaration Cards */
    .dec-card {
        padding: 14px !important;
        margin-bottom: 10px !important;
        border-radius: 14px !important;
    }

    /* Hide desktop, show mobile */
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: block !important;
    }
}

/* =======================================================
   SMALL MOBILE (max-width: 400px)
   ======================================================= */
@media (max-width: 400px) {
    .stats-grid, .hero-stats, .dash-cards {
        gap: 8px !important;
    }
    .stat-card, .hero-stat, .dash-card {
        padding: 12px 10px !important;
    }
    .stat-value, .hero-stat .value, .dash-card-value {
        font-size: 1.2rem !important;
    }
    .stat-label, .hero-stat .label, .dash-card-label {
        font-size: 0.65rem !important;
    }
    .page-title h1 {
        font-size: 0.85rem !important;
    }
    .table-responsive table td .btn {
        min-width: 60px !important;
        padding: 8px 10px !important;
    }
}

/* =======================================================
   LOGIN PAGE
   ======================================================= */
.login-page, .login-container {
    min-height: 100vh !important;
    overflow-y: auto !important;
}

@media (max-width: 768px) {
    .login-container {
        padding: 16px !important;
    }
    .login-card, .login-box {
        padding: 24px 18px !important;
        border-radius: 18px !important;
    }
    .login-logo {
        width: 70px !important;
        height: 70px !important;
    }
    .login-title {
        font-size: 1.2rem !important;
    }
    .brand-panel {
        padding: 24px 18px !important;
    }
}

/* =======================================================
   BOTTOM NAVIGATION
   ======================================================= */
@media (max-width: 768px) {
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: white;
        border-top: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-around;
        padding: 6px 0 max(6px, env(safe-area-inset-bottom));
        box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
    }
    .bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        color: #64748b;
        text-decoration: none;
        font-size: 0.6rem;
        font-weight: 600;
        padding: 4px 8px;
    }
    .bottom-nav a i {
        font-size: 1.1rem;
    }
    .bottom-nav a.active {
        color: #4f46e5;
    }
}

@media (min-width: 769px) {
    .bottom-nav {
        display: none !important;
    }
    .mobile-only {
        display: none !important;
    }
}

/* =======================================================
   iOS SAFE AREAS
   ======================================================= */
@supports (padding: max(0px)) {
    .main-header {
        padding-top: max(10px, env(safe-area-inset-top)) !important;
    }
    .bottom-nav {
        padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
    }
}

/* =======================================================
   TOUCH IMPROVEMENTS
   ======================================================= */
@media (hover: none) and (pointer: coarse) {
    .btn, button, .action-btn, .tab-btn {
        min-height: 44px;
    }
    .table-responsive table td .btn {
        min-height: 44px !important;
    }
}

/* =======================================================
   SCROLLBAR - مخفي على الموبايل
   ======================================================= */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    .modal-body::-webkit-scrollbar {
        width: 3px;
    }
    .modal-body::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
    }
}

/* =======================================================
   PRINT STYLES
   ======================================================= */
@media print {
    .sidebar, .main-header, .sidebar-overlay, .sidebar-toggle,
    .print-btn, .no-print, .toolbar, .filters-row, .bottom-nav {
        display: none !important;
    }
    .main-content {
        margin: 0 !important;
    }
    .page-content {
        padding: 0 !important;
    }
    body {
        background: white !important;
    }
}