/* ========================================
   Mobile Optimizations for Specific Pages
   CRM Anglor - Page-Specific Responsive Styles
   ======================================== */

/* ========================================
   1. DASHBOARD PAGES
   ======================================== */

@media (max-width: 767px) {
    /* Dashboard Stats */
    .dashboard-stats {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .stat-card {
        min-height: auto;
    }

    .stat-content {
        flex-direction: row;
        justify-content: space-between;
    }

    /* Dashboard Charts */
    .dashboard-charts {
        grid-template-columns: 1fr !important;
    }

    .chart-container {
        height: 250px !important;
        margin-bottom: 16px;
    }

    /* Quick Actions */
    .quick-actions {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .quick-action-btn {
        width: 100%;
        justify-content: center;
    }

    /* Recent Activity */
    .activity-list {
        padding: 12px;
    }

    .activity-item {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .activity-time {
        font-size: 12px;
    }
}

/* ========================================
   2. CLIENTS & EMPLOYEES PAGES
   ======================================== */

@media (max-width: 767px) {
    /* List View */
    .clients-list,
    .employees-list {
        padding: 0;
    }

    /* Search & Filters */
    .search-filter-bar {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
    }

    .search-input-group {
        width: 100%;
    }

    .filter-buttons {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .filter-buttons .btn {
        width: 100%;
    }

    /* Client/Employee Card View (Alternative to Table) */
    .item-card-mobile {
        display: block;
        background: white;
        padding: 16px;
        margin-bottom: 12px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid var(--border-color);
    }

    .item-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-color);
    }

    .item-card-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .item-card-status {
        padding: 4px 12px;
        border-radius: 16px;
        font-size: 12px;
        font-weight: 500;
    }

    .item-card-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .item-card-field {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
    }

    .item-card-label {
        color: var(--text-secondary);
        font-weight: 500;
    }

    .item-card-value {
        color: var(--text-primary);
        text-align: left;
    }

    .item-card-actions {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--border-color);
        display: flex;
        gap: 8px;
    }

    .item-card-actions .btn {
        flex: 1;
        font-size: 13px;
    }

    /* Hide table on mobile, show card view */
    .table-view-desktop {
        display: none;
    }

    .card-view-mobile {
        display: block;
    }

    /* Pagination Mobile */
    .pagination {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }

    .pagination .btn {
        min-width: 40px;
        padding: 10px;
    }

    .pagination .page-info {
        width: 100%;
        text-align: center;
        margin: 8px 0;
        font-size: 14px;
    }
}

/* ========================================
   3. DOCUMENTS PAGE
   ======================================== */

@media (max-width: 767px) {
    /* Document List */
    .documents-grid {
        grid-template-columns: 1fr !important;
    }

    .document-card {
        padding: 14px;
    }

    .document-preview {
        height: 150px;
    }

    .document-info {
        padding: 12px;
    }

    .document-actions {
        flex-direction: column;
        gap: 8px;
    }

    .document-actions .btn {
        width: 100%;
    }

    /* Document Upload */
    .upload-area {
        padding: 24px 16px;
        min-height: 150px;
    }

    .upload-area-icon {
        font-size: 48px;
    }

    .upload-area-text {
        font-size: 14px;
    }

    /* Document Filters */
    .document-filters {
        flex-direction: column;
        gap: 12px;
    }

    .document-type-filter {
        width: 100%;
    }
}

/* ========================================
   4. SETTINGS PAGE
   ======================================== */

@media (max-width: 767px) {
    /* Settings Tabs - Vertical on Mobile */
    .settings-tabs {
        flex-direction: column;
        border-bottom: none;
        border-left: 2px solid var(--border-color);
        margin-bottom: 20px;
    }

    .settings-tab {
        border-radius: 8px 0 0 8px;
        text-align: right;
        justify-content: flex-start;
        padding: 14px 16px;
    }

    .settings-tab.active {
        border-right: 3px solid var(--primary-color);
    }

    /* Settings Content */
    .settings-content {
        padding: 16px;
    }

    .settings-section {
        margin-bottom: 24px;
    }

    .settings-section-title {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .settings-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    /* Settings Actions - Sticky Bottom */
    .settings-actions {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 16px;
        border-top: 1px solid var(--border-color);
        margin: 0 -16px;
        flex-direction: column-reverse;
        gap: 10px;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    }

    .settings-actions .btn {
        width: 100%;
    }
}

/* ========================================
   5. REPORTS PAGE
   ======================================== */

@media (max-width: 767px) {
    /* Report Filters */
    .report-filters {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        background: var(--background-secondary);
        border-radius: 12px;
        margin-bottom: 16px;
    }

    .filter-group {
        width: 100%;
    }

    .filter-group label {
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 600;
    }

    .date-range-picker {
        flex-direction: column;
        gap: 10px;
    }

    .date-range-picker input {
        width: 100%;
    }

    /* Report Charts */
    .report-chart-container {
        height: 250px !important;
        margin-bottom: 16px;
    }

    .report-chart {
        width: 100% !important;
        height: 100% !important;
    }

    /* Export Buttons */
    .export-buttons {
        flex-direction: column;
        gap: 8px;
        margin-top: 16px;
    }

    .export-buttons .btn {
        width: 100%;
    }

    /* Report Summary Cards */
    .report-summary {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* Report Table - Scrollable */
    .report-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px;
        padding: 0 16px;
    }

    .report-table {
        min-width: 600px;
    }
}

/* ========================================
   6. AUTH PAGES (Login, Register)
   ======================================== */

@media (max-width: 767px) {
    /* Auth Container */
    .auth-container {
        padding: 16px;
        max-width: 100%;
    }

    .auth-card {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .auth-header {
        margin-bottom: 24px;
    }

    .auth-logo {
        width: 80px;
        height: 80px;
        margin-bottom: 16px;
    }

    .auth-title {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .auth-subtitle {
        font-size: 14px;
    }

    /* Auth Form */
    .auth-form {
        gap: 16px;
    }

    .auth-form .form-group {
        margin-bottom: 0;
    }

    .auth-form input {
        min-height: 50px;
        font-size: 16px;
        border-radius: 12px;
    }

    .auth-form .btn-primary {
        min-height: 52px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 12px;
        margin-top: 8px;
    }

    /* Auth Links */
    .auth-links {
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
        text-align: center;
    }

    .auth-divider {
        margin: 24px 0;
    }

    /* Social Login Buttons */
    .social-login-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .social-login-buttons .btn {
        width: 100%;
    }

    /* Registration Steps */
    .registration-steps {
        flex-direction: column;
        margin-bottom: 24px;
    }

    .step {
        flex: 1;
        padding: 12px;
    }

    .step-number {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .step-title {
        font-size: 13px;
    }
}

/* ========================================
   7. INVOICES & BILLING
   ======================================== */

@media (max-width: 767px) {
    /* Invoice Card */
    .invoice-card {
        padding: 16px;
        margin-bottom: 12px;
    }

    .invoice-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .invoice-number {
        font-size: 16px;
    }

    .invoice-status {
        align-self: flex-end;
    }

    .invoice-details {
        grid-template-columns: 1fr !important;
        gap: 12px;
        margin-top: 16px;
    }

    .invoice-detail-item {
        padding: 10px;
        background: var(--background-secondary);
        border-radius: 8px;
    }

    .invoice-detail-label {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .invoice-detail-value {
        font-size: 15px;
        font-weight: 600;
    }

    .invoice-actions {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--border-color);
        flex-direction: column;
        gap: 8px;
    }

    .invoice-actions .btn {
        width: 100%;
    }

    /* Invoice Items Table */
    .invoice-items {
        overflow-x: auto;
        margin: 0 -16px;
        padding: 0 16px;
    }

    .invoice-items-table {
        min-width: 500px;
    }

    /* Payment Form */
    .payment-form {
        padding: 16px;
    }

    .payment-method-selector {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .payment-method-card {
        padding: 16px;
    }
}

/* ========================================
   8. WORKFLOW & TASKS
   ======================================== */

@media (max-width: 767px) {
    /* Workflow Board */
    .workflow-board {
        flex-direction: column;
        gap: 16px;
    }

    .workflow-column {
        width: 100%;
        min-width: auto;
    }

    .workflow-column-header {
        padding: 12px;
    }

    .workflow-tasks {
        min-height: 200px;
    }

    .workflow-task-card {
        padding: 14px;
        margin-bottom: 10px;
    }

    .task-title {
        font-size: 14px;
    }

    .task-meta {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Task Detail Modal */
    .task-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .task-detail-actions {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .task-detail-actions .btn {
        width: 100%;
    }

    /* Task Timeline */
    .task-timeline {
        padding: 12px;
    }

    .timeline-item {
        padding-right: 12px;
    }

    .timeline-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    /* Task Comments */
    .task-comments {
        padding: 12px;
    }

    .comment-item {
        padding: 12px;
        margin-bottom: 10px;
    }

    .comment-form {
        padding: 12px;
    }

    .comment-form textarea {
        min-height: 100px;
    }
}

/* ========================================
   9. SUPPORT & TICKETS
   ======================================== */

@media (max-width: 767px) {
    /* Ticket List */
    .ticket-list {
        padding: 0;
    }

    .ticket-card {
        padding: 14px;
        margin-bottom: 10px;
    }

    .ticket-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ticket-id {
        font-size: 13px;
    }

    .ticket-priority {
        align-self: flex-end;
    }

    .ticket-body {
        margin-top: 12px;
    }

    .ticket-title {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .ticket-meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    .ticket-footer {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--border-color);
        flex-direction: column;
        gap: 8px;
    }

    .ticket-footer .btn {
        width: 100%;
    }

    /* Ticket Detail */
    .ticket-detail-container {
        padding: 16px;
    }

    .ticket-messages {
        max-height: calc(100vh - 300px);
    }

    .ticket-message {
        padding: 12px;
        margin-bottom: 12px;
    }

    .ticket-reply-form {
        padding: 16px;
        position: sticky;
        bottom: 0;
        background: white;
        border-top: 2px solid var(--border-color);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    }

    .ticket-reply-form textarea {
        min-height: 80px;
        margin-bottom: 10px;
    }

    .ticket-reply-actions {
        flex-direction: column;
        gap: 8px;
    }

    .ticket-reply-actions .btn {
        width: 100%;
    }
}

/* ========================================
   10. ADMIN PAGES
   ======================================== */

@media (max-width: 767px) {
    /* Admin Dashboard */
    .admin-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-quick-links {
        grid-template-columns: 1fr !important;
    }

    /* User Management */
    .user-list-filters {
        flex-direction: column;
        gap: 12px;
    }

    .user-card {
        padding: 14px;
    }

    .user-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .user-avatar {
        width: 48px;
        height: 48px;
    }

    .user-actions {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    /* Role Management */
    .role-permissions-grid {
        grid-template-columns: 1fr !important;
    }

    .permission-group {
        margin-bottom: 16px;
    }

    .permission-item {
        padding: 10px;
        margin-bottom: 6px;
    }

    /* System Settings */
    .system-settings-sections {
        flex-direction: column;
    }

    .settings-section-nav {
        width: 100%;
        border-left: none;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 16px;
    }

    .settings-section-content {
        width: 100%;
        padding: 16px;
    }
}

/* ========================================
   11. ADDITIONAL UTILITY CLASSES
   ======================================== */

@media (max-width: 767px) {
    /* Stacked Layout */
    .stack-mobile {
        flex-direction: column !important;
        gap: 12px;
    }

    .stack-mobile > * {
        width: 100% !important;
    }

    /* Full Width on Mobile */
    .full-width-mobile {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Hide on Mobile */
    .hide-mobile {
        display: none !important;
    }

    /* Show Only on Mobile */
    .show-mobile {
        display: block !important;
    }

    /* Compact Spacing */
    .compact-mobile {
        padding: 12px !important;
        margin: 8px 0 !important;
    }

    /* Scroll Hint */
    .scroll-hint-mobile::after {
        content: '← مرر لليسار للمزيد';
        display: block;
        text-align: center;
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 8px;
        font-style: italic;
    }
}

/* ========================================
   12. PRINT STYLES
   ======================================== */

@media print {
    .hide-print {
        display: none !important;
    }

    .page-header,
    .page-actions,
    .sidebar,
    .header,
    button,
    .btn {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }

    .table {
        page-break-inside: avoid;
    }
}