/* ============================================
   TABLE STYLES - Reusable across pages
   Based on style_page.css standards
   ============================================ */

/* --- Table --- */
.data-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:14px;line-height:0.8em}
.data-table th{background:#2c3e50;color:#fff;padding:5px 8px;text-align:left;font-weight:bold;line-height:0.8em;font-size:14px;cursor:pointer;white-space:nowrap;user-select:none}
.data-table th:hover{background:#3a4e62}
.data-table th .sort-icon{display:none;margin-left:4px;font-size:11px;color:#e8e8e8}
.data-table th .sort-icon.asc{color:#fff}
.data-table th .sort-icon.desc{color:#fff}
.data-table td{padding:4px 8px;border-bottom:1px solid #ddd;color:#333;line-height:0.8em;font-size:14px}
.data-table tr:nth-child(even){background:#f9f9f9}
.data-table tr:hover{background:#CEE3F6}

/* --- Status colors in table --- */
.status-pending { color: #e67e22; font-weight: bold; }  /* orange */
.status-refunded { color: #e74c3c; font-weight: bold; }  /* red */
.status-completed { color: #333; }  /* default */

/* --- Responsive Table Wrapper --- */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0}
.table-responsive .data-table{margin:0}

/* --- Summary Box --- */
.summary-box{background:#f0f7ff;padding:6px 12px;border-radius:4px;margin-bottom:10px;border:1px solid #e8e8e8;font-size:18px;line-height:0.8em;color:#333;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 8px}
.summary-box strong{color:#2c3e50;font-weight:bold}
.summary-box .summary-left{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;font-weight:bold}
.summary-box .summary-left strong{font-weight:bold}
.summary-box .summary-left .summary-item{display:inline-block;white-space:nowrap}
.summary-box .summary-right{display:flex;align-items:center}
.summary-box .summary-right select{max-width:120px}

/* --- Summary abbreviation tooltips --- */
.summary-abbr{border-bottom:1px dashed #999;cursor:help}

/* --- Error Box (matches order.php style) --- */
.error_box{background:#fee;border:1px solid #cc0000;border-radius:5px;padding:20px;margin:20px 0;text-align:center}
.error_text{color:#cc0000;font-size:16px;font-weight:bold;margin:0 0 10px 0}
.error_link{margin:10px 0 0 0}
.error_link a{color:#cc0000;text-decoration:underline;font-weight:bold}
.error_link a:hover{text-decoration:none}

/* --- No Data --- */
.no-data{text-align:center;padding:20px;color:#666;font-size:18px}

/* --- Info Box --- */
.info-box{font-size:13px;color:#4a4a4a;margin:0 0 10px 0;padding:4px 12px;background:#f9f9f9;border-radius:3px;border:1px solid #e8e8e8;line-height:0.8em;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0px}
.info-box .info-left{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
.info-box .info-right{display:flex;align-items:center}
.info-box strong{color:#2c3e50}
.info-box a{color:#6880AD;text-decoration:none}
.info-box a:hover{color:#111;text-decoration:underline}
.info-box .separator{color:#ccc;margin:0 4px}
.info-box .filter-select{padding:2px 6px;border-radius:3px;border:1px solid #ddd;font-size:12px;font-family:'Asap',Arial,Helvetica,sans-serif;background:#fff;color:#333;height:24px;max-width:120px}

/* --- Dashboard Header --- */
.dashboard-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:3px}
.dashboard-header h2{font-size:24px;color:#484848;font-weight:bold;letter-spacing:-0.03em;margin:0;padding-bottom: 12px;}

/* --- Pagination --- */
.pagination{display:flex;justify-content:center;align-items:center;gap:3px;margin:10px 0;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-block;padding:3px 8px;border:1px solid #ddd;border-radius:3px;text-decoration:none;color:#6880AD;background:#fff;font-size:12px;transition:background .2s}
.pagination a:hover{background:#CEE3F6;color:#111;text-decoration:none}
.pagination .active{background:#2c3e50;color:#fff;border-color:#2c3e50}
.pagination .disabled{color:#ccc;pointer-events:none}
.pagination-select{margin-left:0px;padding:2px 6px;border-radius:3px;border:1px solid #ddd;font-size:12px;font-family:'Asap',Arial,Helvetica,sans-serif;height:24px;max-width:70px}

/* --- Navigation Buttons --- */
.nav-bar{display:flex;gap:10px;margin:15px 0 25px 0;flex-wrap:wrap}
.nav-bar .nav-btn{display:inline-block;padding:10px 20px;background:#2c3e50;color:#fff;text-decoration:none;border-radius:5px;font-weight:bold;transition:background .3s;font-family:'Asap',Arial,Helvetica,sans-serif;font-size:16px}
.nav-bar .nav-btn:hover{background:#1a252f;color:#fff;text-decoration:none}
.nav-bar .nav-btn-primary{background:#3498db}
.nav-bar .nav-btn-primary:hover{background:#2980b9}
.nav-bar .nav-btn-success{background:#27ae60}
.nav-bar .nav-btn-success:hover{background:#1e8449}
.nav-bar .nav-btn-danger{background:#e74c3c}
.nav-bar .nav-btn-danger:hover{background:#c0392b}

/* --- Loading Overlay --- */
.table-loading{position:relative;min-height:150px}
.table-loading .loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.7);display:flex;justify-content:center;align-items:center;z-index:10;border-radius:4px}
.table-loading .loading-overlay .spinner{width:30px;height:30px;border:3px solid #f3f3f3;border-top:3px solid #3498db;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* --- Generic text color utilities – reusable across pages --- */
.warn-orang   { color: #e67e22; }  /* orange – Pending */
.text-success { color: #27ae60; }  /* green – Completed */
.warn-red     { color: #e74c3c; }  /* red – Refunded */
.text-muted   { color: #b3b3b3; }  /* gray – Zero values */

/* --- Embedded styles from affiliate.php (moved from inline <style> tag) --- */
/* Tooltip style for summary abbreviations */
.summary-abbr {
    border-bottom: 1px dashed #999;
    cursor: help;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

/* --- Tablets (768px and below) --- */
@media screen and (max-width:768px){
    .data-table{display:block;font-size:13px}
    .data-table thead{display:none}
    .data-table tbody{display:block}
    .data-table tr{display:block;margin-bottom:10px;border:1px solid #ddd;border-radius:4px;padding:0;background:#fff}
    .data-table tr:nth-child(even){background:#fff}
    .data-table tr:hover{background:#f9f9f9}
    .data-table td{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;border-bottom:1px solid #eee;text-align:right;font-size:15px}
    .data-table td:last-child{border-bottom:none}
    .data-table td:before{content:attr(data-label);font-weight:bold;color:#2c3e50;text-align:left;margin-right:15px;font-size:14px;min-width:70px}
    
    .pagination{gap:3px}
    .pagination a,.pagination span{padding:2px 6px;font-size:12px}
    .pagination-select{margin-left:0px;padding:2px 5px;font-size:12px;max-width:60px}
    
    .info-box{font-size:14px;padding:4px 10px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0px}
    .info-box .info-left{font-size:14px;gap:2px 6px;display:flex;flex-wrap:wrap;align-items:center}
    .info-box .info-right{display:flex;align-items:center}
    .info-box .separator{color:#ccc;margin:0 4px;display:inline}
    .info-box .filter-select{font-size:13px;height:28px;padding:3px 8px;max-width:140px}
    
    .dashboard-header{flex-direction:column;align-items:flex-start}
    .dashboard-header h2{font-size:22px;margin-bottom:3px}
    
    .summary-box{font-size:16px;padding:6px 10px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;line-height:1.2em}
    .summary-box .summary-left{font-size:16px;gap:4px 8px;flex-wrap:wrap;align-items:center;font-weight:bold}
    .summary-box .summary-left .summary-item{display:inline-block;white-space:nowrap}
    .summary-box .summary-right{margin-top:0;display:flex;align-items:center}
    .summary-box .summary-right select{max-width:140px;font-size:13px;height:28px;padding:3px 8px}
    
    .error_box{padding:15px}
    .error_text{font-size:14px}
    
    .nav-bar{gap:8px}
    .nav-bar .nav-btn{padding:8px 16px;font-size:14px;width:100%;text-align:center}
    
    .summary-abbr{border-bottom:1px dashed #999;cursor:help}
}

/* --- Phones (480px and below) --- */
@media screen and (max-width:480px){
    .data-table td{font-size:15px;padding:6px 10px}
    .data-table td:before{font-size:14px;min-width:80px}
    
    .pagination a,.pagination span{padding:2px 5px;font-size:11px}
    .pagination-select{font-size:11px;padding:2px 4px;max-width:50px}
    
    .info-box{font-size:14px;padding:4px 8px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0px}
    .info-box .info-left{font-size:14px;gap:2px 4px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start}
    .info-box .info-right{display:flex;align-items:center}
    .info-box .filter-select{font-size:13px;height:28px;padding:3px 6px;max-width:100%;flex:1;min-width:100px}
    .info-box .separator{color:#ccc;margin:0 3px;display:inline}
    
    .summary-box{font-size:15px;padding:6px 10px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;line-height:1.2em}
    .summary-box .summary-left{font-size:15px;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:2px 4px;font-weight:bold}
    .summary-box .summary-left .summary-item{display:inline-block;white-space:nowrap}
    .summary-box .summary-right{display:flex;align-items:center;flex:1;justify-content:flex-end}
    .summary-box .summary-right select{width:100%;max-width:100%;font-size:14px;height:30px;padding:4px 8px;min-width:100px}
    
    .dashboard-header h2{font-size:20px}
    .no-data{font-size:16px}
    .error_text{font-size:13px}
    
    .nav-bar .nav-btn{padding:5px 10px;font-size:13px}
    
    .summary-abbr{border-bottom:1px dashed #999;cursor:help}
}

/* --- Extra small (350px and below) --- */
@media screen and (max-width:350px){
    .data-table td{font-size:14px;padding:4px 8px}
    .data-table td:before{font-size:13px;min-width:60px}
    
    .info-box{font-size:13px;padding:3px 6px;gap:0px}
    .info-box .info-left{font-size:13px}
    .info-box .filter-select{font-size:12px;height:26px;min-width:80px}
    
    .summary-box{font-size:14px;padding:4px 8px;line-height:1.2em}
    .summary-box .summary-left{font-size:14px}
    .summary-box .summary-left .summary-item{display:inline-block;white-space:nowrap}
    .summary-box .summary-right select{font-size:13px;height:28px;min-width:80px}
    
    .dashboard-header h2{font-size:18px}
    .pagination a,.pagination span{padding:2px 4px;font-size:10px}
    .pagination-select{font-size:10px;padding:1px 4px;max-width:45px}
    .nav-bar .nav-btn{padding:4px 8px;font-size:12px}
}