/* --- MAIN WRAPPER --- */
.af-portal-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    direction: rtl;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

/* --- HEADER --- */
.af-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 2px solid #eee; 
    padding-bottom: 15px; 
    margin-bottom: 20px; 
    flex-wrap: wrap; 
    gap: 10px; 
}
.af-header h2 { 
    margin: 0; 
    font-size: 20px; 
    color: #333; 
    font-weight: 700;
}
.header-meta { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}
.count-badge { 
    background: #e7f1ff; 
    color: #0c63e4; 
    padding: 4px 10px; 
    border-radius: 15px; 
    font-weight: bold; 
    font-size: 13px; 
    white-space: nowrap; 
}
.mode-badge { 
    font-size: 12px; 
    background: #eee; 
    padding: 3px 8px; 
    border-radius: 4px; 
    color: #666; 
    white-space: nowrap; 
}

/* --- FILTER FORM --- */
.af-portal-filter { 
    display: flex; 
    gap: 15px; 
    flex-wrap: wrap; 
    background: #f8f9fa; 
    padding: 15px; 
    border-radius: 6px; 
    margin-bottom: 15px; 
    align-items: flex-end; 
    border: 1px solid #e9ecef;
}
.filter-item { 
    flex: 1 1 150px; 
    min-width: 140px; 
}
.filter-item.search-item {
    flex: 1 1 220px; /* Give search more space */
}
.filter-item label { 
    display: block; 
    font-size: 12px; 
    font-weight: bold; 
    margin-bottom: 5px; 
    color: #555; 
}
.filter-item select, 
.filter-item input[type="text"], 
.filter-item input[type="date"] { 
    width: 100%; 
    height: 38px; 
    border: 1px solid #ced4da; 
    border-radius: 4px; 
    padding: 0 10px; 
    box-sizing: border-box; 
    font-size: 13px;
    background: #fff;
}
.reset-btn { 
    color: #dc3545; 
    text-decoration: none; 
    font-size: 13px; 
    padding-bottom: 10px; 
    display: inline-block; 
    font-weight: bold; 
    white-space: nowrap;
}
.reset-btn:hover { text-decoration: underline; }

/* --- SEARCH BOX --- */
.search-box { 
    display: flex; 
    gap: 0; /* Connected buttons */
}
.search-box input { 
    flex: 1; 
    border-radius: 0 4px 4px 0 !important; /* RTL rounded right */
    border-left: none;
}
.search-box button { 
    background: #0d6efd; 
    color: #fff; 
    border: 1px solid #0d6efd; 
    border-radius: 4px 0 0 4px; /* RTL rounded left */
    cursor: pointer; 
    padding: 0 15px; 
    font-size: 14px; 
    transition: background 0.2s; 
}
.search-box button:hover { 
    background: #0b5ed7; 
}

/* --- BULK ACTIONS BAR --- */
.bulk-actions-bar { 
    background: #f1f3f5; 
    padding: 10px 15px; 
    border-radius: 6px; 
    margin-bottom: 15px; 
    border: 1px solid #dee2e6; 
    display: flex;
    align-items: center;
    gap: 15px;
}
.btn-bulk-dl {
    background: #6c757d; 
    color: #fff; 
    border: none; 
    padding: 8px 15px; 
    border-radius: 4px; 
    cursor: not-allowed; 
    font-weight: bold; 
    font-size: 13px;
    transition: all 0.2s ease;
    opacity: 0.6;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-bulk-dl.active {
    background: #198754; /* Success Green */
    cursor: pointer;
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-bulk-dl.active:hover {
    background: #157347;
    transform: translateY(-1px);
}
#selected-count {
    font-size: 13px;
    color: #495057;
    font-weight: 600;
}

/* --- TABLE STYLES --- */
.table-responsive { 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    border: 1px solid #eee;
    border-radius: 6px;
}
.af-portal-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 13px; 
    min-width: 1100px; /* Force scroll on desktop if too small */
}

/* Header */
.af-portal-table th { 
    background: #f8f9fa; 
    color: #495057; 
    font-weight: 700; 
    padding: 12px 8px; 
    text-align: center; 
    border-bottom: 2px solid #dee2e6; 
    white-space: nowrap; 
}
/* Cells */
.af-portal-table td { 
    padding: 10px 8px; 
    border-bottom: 1px solid #eee; 
    vertical-align: middle; 
    color: #212529;
    text-align: center; 
}

/* --- COLUMN SIZING & UTILS --- */
.col-check { width: 30px; }
.col-check input { cursor: pointer; transform: scale(1.1); margin: 0; }

.col-id { width: 50px; font-weight: bold; color: #0d6efd; }
.col-pdf { width: 50px; }
.col-status { width: 110px; min-width: 110px; }
.col-name { min-width: 180px; font-weight: 600; text-align: right !important; padding-right: 10px !important; }
.col-type { min-width: 90px; }
.col-addr { min-width: 130px; line-height: 1.4; font-size: 12.5px; }
.col-date, .col-time, .col-phone, .col-pay { white-space: nowrap; }
.col-phone { font-family: monospace, sans-serif; font-size: 13px; direction: ltr; }

/* --- STATUS COLORS (Refined) --- */

/* 1. Completed: Green */
.st-completed td { background-color: #d1e7dd; color: #0f5132; }
.st-completed .status-select { background: #badbcc; color: #0f5132; border-color: #a3cfbb; }

/* 2. Cancelled: Red */
.st-cancelled td { background-color: #f8d7da; color: #842029; }
.st-cancelled .status-select { background: #f5c2c7; color: #842029; border-color: #f1aeb5; }

/* 3. Scheduled: Yellow/Orange */
.st-scheduled td { background-color: #fff3cd; color: #664d03; }
.st-scheduled .status-select { background: #ffecb5; color: #664d03; border-color: #ffe69c; }

/* 4. Default/TBD: Grey */
.st-default td { background-color: #fff; }

/* Status Dropdown */
.status-wrap { position: relative; width: 100%; }
.status-select { 
    width: 100%; 
    padding: 4px; 
    border: 1px solid rgba(0,0,0,0.15); 
    border-radius: 4px; 
    font-size: 12px; 
    font-weight: bold; 
    cursor: pointer; 
    text-align: center; 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Custom Arrow */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: left 7px top 50%;
    background-size: 8px auto;
    padding-left: 20px;
}
.status-text { font-weight: bold; padding: 4px 8px; display: inline-block; border-radius: 4px; font-size: 12px; }

/* Spinner */
.spinner { 
    position: absolute; 
    left: 5px; 
    top: 6px; 
    width: 14px; 
    height: 14px; 
    border: 2px solid #666; 
    border-top-color: transparent; 
    border-radius: 50%; 
    animation: spin 0.8s linear infinite; 
    display: none; 
    pointer-events: none; 
}
@keyframes spin { to { transform: rotate(360deg); } }

/* PDF Button */
.pdf-btn { 
    display: inline-block; 
    background: #0d6efd; 
    color: #fff; 
    padding: 4px 10px; 
    border-radius: 4px; 
    text-decoration: none; 
    font-weight: 500; 
    font-size: 12px; 
    transition: background 0.2s;
}
.pdf-btn:hover { background: #0b5ed7; color: #fff; }

/* Merged Rows Borders */
tr.row-start td { border-top: 2px solid #ccc; }
tr.row-end td { border-bottom: 2px solid #ccc; }
tr.row-start:not(.row-end) td { border-bottom: none; }

/* --- LOADING OVERLAY --- */
.pdf-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.85);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}
.pdf-loader-box {
    text-align: center;
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    min-width: 260px;
}
.spinner.large {
    position: relative;
    display: inline-block;
    width: 40px; height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0d6efd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}
.loading-text { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 5px; }
.loading-progress { font-size: 14px; color: #666; font-family: monospace; }

/* --- MOBILE RESPONSIVENESS (Card View) --- */
@media (max-width: 900px) {
    .af-portal-wrapper { padding: 10px; }
    
    /* Hide Table Header */
    .af-portal-table thead { display: none; }
    
    .af-portal-table, 
    .af-portal-table tbody, 
    .af-portal-table tr, 
    .af-portal-table td { 
        display: block; 
        width: 100%; 
        box-sizing: border-box; 
    }
    
    /* Card Style for Rows */
    .af-portal-table tr { 
        margin-bottom: 15px; 
        border: 1px solid #e0e0e0; 
        background: #fff !important; /* Force white background for cards */
        border-radius: 8px; 
        box-shadow: 0 2px 5px rgba(0,0,0,0.03); 
        position: relative;
        overflow: hidden;
    }

    /* Status Color as Left Border on Card */
    .st-completed { border-right: 6px solid #198754 !important; }
    .st-cancelled { border-right: 6px solid #dc3545 !important; }
    .st-scheduled { border-right: 6px solid #ffc107 !important; }

    /* Cell Layout */
    .af-portal-table td { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        text-align: left; /* Value on Left */
        padding: 10px 15px; 
        border-bottom: 1px solid #f8f9fa; 
        min-height: 40px;
        background: transparent !important; /* Remove colored background from cells */
        color: #333 !important;
    }
    
    .af-portal-table td:last-child { border-bottom: none; }
    
    /* Add Labels via CSS */
    .af-portal-table td::before { 
        content: attr(data-label); 
        font-weight: 700; 
        text-align: right; 
        margin-left: 15px; 
        color: #6c757d; 
        width: 35%; 
        flex-shrink: 0; 
        font-size: 12px; 
        text-transform: uppercase; 
    }
    
    /* Special Handling for Checkbox on Mobile */
    .col-check {
        text-align: right !important; /* Right align checkbox */
        background: #f8f9fa !important;
        padding: 8px 15px !important;
        border-bottom: 1px solid #eee;
    }
    .col-check::before { content: "تحديد"; } /* Add label "Select" */

    /* Reset Widths */
    .col-status, .col-name, .col-addr { width: auto; min-width: 0; }
    .status-wrap { width: 60%; max-width: 200px; }
    .col-phone, .col-id, .col-pdf { text-align: left; }
    
    /* Merged Rows Logic for Cards */
    tr.row-start:not(.row-end) { 
        margin-bottom: 0; 
        border-bottom: none; 
        border-radius: 8px 8px 0 0; 
        border-bottom: 2px dashed #eee; /* Dashed separator between Trip 1 & 2 */
    }
    tr.row-end:not(.row-start) { 
        margin-top: 0; 
        border-top: none; 
        border-radius: 0 0 8px 8px; 
    }
}
/* Add this specific class style to your existing CSS */
.col-issue { 
    min-width: 90px; 
    font-size: 11px; 
    color: #666; 
    white-space: nowrap; 
}

/* Mobile Adjustment */
@media (max-width: 900px) {
    .col-issue { 
        text-align: left; 
    }
}


@media (max-width: 480px) {
    /* Header Stack */
    .af-header { flex-direction: column; align-items: flex-start; }
    .header-meta { width: 100%; justify-content: space-between; margin-top: 10px; }
    
    /* Filters Stack */
    .filter-item { flex: 1 1 100%; }
    .search-box { width: 100%; }

    /* Bulk Actions Stack */
    .bulk-actions-bar { flex-direction: column; align-items: stretch; text-align: center; }
    
    /* Stack content in cells if too narrow */
    .af-portal-table td { flex-direction: column; align-items: flex-start; gap: 5px; }
    .af-portal-table td::before { width: 100%; text-align: right; margin-left: 0; margin-bottom: 4px; }
    .status-wrap { width: 100%; max-width: none; }
    .col-phone { text-align: right; }
    .col-check { flex-direction: row; justify-content: space-between; align-items: center; }
}