
/*
  Consolidated scanner styles
  - Grouped logically: layout, header, controls, table, cells, buttons, modals, helpers
  - Responsive rules at the end: 1200px, 768px, 480px
  - Dark-scheme tweaks grouped together
*/

html, body { overflow: auto; -webkit-overflow-scrolling: touch; }

/* Layout */
.container{max-width:85%;margin:0 auto;padding:0 20px}
.arbi-scanner{padding:120px 0 40px;min-height:100vh;background:var(--bg-primary)}

/* Header */
.scanner-header{text-align:center;margin-bottom:40px}
.scanner-title{font-size:2.5em;font-weight:700;margin-bottom:15px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.scanner-subtitle{font-size:1.2em;color:var(--text-secondary)}

/* Filters */
.filters-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:15px;padding:30px;margin-bottom:30px;box-shadow:var(--shadow)}
.filter-group{margin-bottom:25px}
.filter-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.filter-title{font-size:1.2em;font-weight:700;color:var(--text-primary)}
.filter-actions{display:flex;gap:12px;justify-content:center;margin-top:20px}
.btn-small{padding:6px 12px;font-size:.8em;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary)!important;border-radius:6px;cursor:pointer;transition:all .3s}
.btn-small:hover{background:var(--bg-primary);border-color:var(--accent-primary)}
.exchanges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.exchange-checkbox{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .3s}
.exchange-checkbox:hover{background:rgba(0,255,255,.1);border-color:var(--accent-primary)}
.exchange-checkbox label{font-size:.9em;color:var(--text-primary)}
.filter-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:25px}
.control-group{display:flex;flex-direction:column;gap:8px}
.control-group label{font-weight:600;color:var(--text-primary);font-size:.9em}
.control-group input,.control-group select{padding:10px 12px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:.9em}
.control-group input:focus,.control-group select:focus{outline:none;border-color:var(--accent-primary)}
.validation-error{color:#ff6b6b;font-size:.8em;min-height:1em;margin-top:4px}

/* Table container */
.scanner-table-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:15px;padding:25px;box-shadow:var(--shadow)}
.table-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--border-color)}
/* container for legend/update/update-button controls */
.table-controls{display:flex;align-items:center;gap:12px}
.table-controls > *{align-self:center;margin:0;vertical-align:middle}
.table-controls .btn-legend{
    background: linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;
    border: 1px solid #5a6fd8 !important;
    color: #fff !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: all .3s ease;
    font-size: .9em;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(102,126,234,.3);
    text-decoration: none !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}
.table-controls .update-info{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: .9em;
    color: var(--text-primary);
    height: 40px;
    min-height: 40px;
    margin: 0;
    line-height: 1;
    vertical-align: middle;
}
.table-controls .update-info .update-label{
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 6px;
    font-size: .85em;
}
.table-controls .update-info .last-update{
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'Courier New', monospace;
    background: var(--bg-primary);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}
.table-controls .btn-secondary{
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .3s ease;
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}
.table-title{font-size:1.5em;font-weight:700;color:var(--text-primary);margin:0}
.table-container{border-radius:10px;border:1px solid var(--border-color);position:relative;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;z-index:950}

/* Table */
.arbi-table{width:100%;border-collapse:collapse;background:var(--bg-secondary);table-layout:auto;margin:0}
.arbi-table thead{position:sticky;top:0;z-index:1000}
.arbi-table th{background:var(--bg-primary);padding:12px 8px 8px 8px!important;text-align:center;font-weight:700;color:var(--text-primary);border-bottom:2px solid var(--border-color);border-right:1px solid var(--border-color)!important;position:sticky;top:0;z-index:1001;user-select:none;white-space:normal;overflow:hidden;text-overflow:ellipsis;font-size:.9em;line-height:1.2!important;height:65px!important;vertical-align:top;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.arbi-table th:last-child{border-right:none!important}
.arbi-table th .multi-line{display:flex;align-items:center;justify-content:center;height:100%;line-height:1.2!important;text-align:center;padding-top:0!important;position:relative;padding-right:15px;flex-direction:column;gap:2px}
.arbi-table th.sortable{cursor:pointer;transition:background-color .3s;padding-bottom:12px!important}
.arbi-table th.sortable:hover{background:rgba(0,255,255,.1)}
.arbi-table th.sortable::after{content:'↕';margin-left:8px;opacity:.5;font-size:.8em;position:absolute;right:8px;top:50%;transform:translateY(-50%)}
.arbi-table th.sort-asc::after{content:'↑';opacity:1}
.arbi-table th.sort-desc::after{content:'↓';opacity:1}
.arbi-table td{padding:12px 6px;border-bottom:1px solid var(--border-color);border-right:1px solid var(--border-color)!important;color:var(--text-secondary);vertical-align:middle;text-align:center;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;line-height:1.4;font-size:.9em;font-weight:500}
.arbi-table td{padding:12px 6px;border-bottom:1px solid var(--border-color);border-right:1px solid var(--border-color)!important;color:var(--text-secondary);vertical-align:middle;text-align:center;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;line-height:1.4;font-size:1em;font-weight:600}
.arbi-table td:last-child{border-right:none!important}
.arbi-table tbody tr{transition:background-color .3s ease;height:auto;min-height:60px}
.arbi-table tbody tr:hover{background:rgba(0,255,255,.05)}
.arbi-table tbody tr.expanded-row{background:rgba(0,255,255,.02)}
.arbi-table tbody tr.expanded-row td{padding-top:8px;padding-bottom:8px;font-size:.85em}

/* Coin cell */
.coin-cell{display:flex;flex-direction:column;align-items:center;gap:8px;justify-content:center;position:relative}
.coin-icon{width:50px;height:50px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(255,255,255,.3);box-shadow:0 2px 8px rgba(0,0,0,.2);transition:all .3s;background:linear-gradient(135deg,#fff,#f8f9fa);padding:4px}
.coin-name-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.coin-name{font-weight:700;font-size:1.05em;color:var(--text-primary);word-break:break-word}
.coin-lifetime{font-size:.85em;color:var(--text-muted);background:rgba(255,255,255,.03);padding:2px 6px;border-radius:4px;border:1px solid var(--border-color)}
.contract-warning-icon{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:#ffd700;border:2px solid #b8860b;display:flex;align-items:center;justify-content:center;color:#b8860b;font-weight:700;font-size:14px;z-index:1000;box-shadow:0 2px 4px rgba(0,0,0,.3);cursor:help}
.contract-warning-tooltip{visibility:hidden;position:fixed;top:0;left:0;transform:none;background:rgba(255,215,0,.95);color:#8B6914;padding:10px 14px;border-radius:8px;font-size:.85em;font-weight:600;white-space:nowrap;z-index:100000;box-shadow:0 4px 20px rgba(0,0,0,.4);pointer-events:none;opacity:0;transition:opacity .3s;min-width:220px;text-align:center;border:1px solid #b8860b}
.contract-warning-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(255,215,0,.95)}
.contract-warning-icon:hover .contract-warning-tooltip{visibility:visible;opacity:1}
.arbi-table tbody tr.expanded-row .contract-warning-icon{width:20px;height:20px;font-size:12px}

/* Action buttons (details/expand/edit) */
.coin-buttons{display:none;position:absolute;top:50%;right:5px;transform:translateY(-50%);flex-direction:column;gap:5px}
.coin-buttons .info-btn,.coin-buttons .expand-btn{width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;font-size:.7em}
.details-cell{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:60px;justify-content:center}
.info-btn,.expand-btn{background:rgba(0,255,255,.15);border:1px solid rgba(0,0,0,.3);color:var(--accent-primary);cursor:pointer;padding:6px 10px;border-radius:6px;transition:all .3s;flex-shrink:0;font-size:.85em;font-weight:700;min-width:40px}
.info-btn:hover,.expand-btn:hover{background:rgba(0,255,255,.25);border-color:var(--accent-primary);transform:scale(1.05);box-shadow:0 2px 8px rgba(0,255,255,.3)}
.expand-btn{background:rgba(255,165,0,.15);border:1px solid rgba(0,0,0,.3);color:#ffa500}
.expand-btn:hover{background:rgba(255,165,0,.25);border-color:#ffa500;box-shadow:0 2px 8px rgba(255,165,0,.3)}
.edit-btn{background:rgba(255,193,7,.15);border:1px solid rgba(255,193,7,.4);color:#ffc107;text-decoration:none;padding:6px 10px;border-radius:6px;transition:all .3s;flex-shrink:0;font-size:.85em;min-width:40px;display:inline-flex;align-items:center;justify-content:center}
.edit-btn:hover{background:rgba(255,193,7,.25);border-color:#ffc107;transform:scale(1.05);box-shadow:0 2px 8px rgba(255,193,7,.3)}

/* Exchange links */
.exchange-links{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:45px;justify-content:center}
.exchange-link{color:var(--accent-primary);text-decoration:none;font-size:.9em;font-weight:600;transition:all .3s;word-break:break-word;padding:8px 12px;border-radius:8px;background:rgba(0,255,255,.1);border:1px solid rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;min-height:40px}
.exchange-link:hover{color:var(--accent-secondary);background:rgba(0,255,255,.2);border-color:var(--accent-primary);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,255,255,.2)}

/* Amount / volume */
.amount-volume-cell{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:80px;justify-content:center}
.amount-line{font-weight:600;color:var(--text-primary);font-size:.95em}
.volume-line{font-size:.85em;color:var(--accent-primary);background:rgba(0,255,255,.1);padding:2px 6px;border-radius:4px;border:1px solid rgba(0,255,255,.2)}

/* Network / fee / time */
.network-fee-time-cell{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:80px;justify-content:center}
.network-line{font-weight:600;color:var(--text-primary);font-size:.9em}
.fee-line{font-size:.85em;color:var(--text-secondary)}
.time-line{font-size:.8em;color:var(--text-muted);background:rgba(255,255,255,.05);padding:2px 6px;border-radius:4px;border:1px solid var(--border-color)}

.profit-column .profit-display{display:flex;flex-direction:column;align-items:center;gap:4px}
.profit-column .profit-usd{font-size:1.25em;font-weight:700;color:#2ecc71;line-height:1}
.profit-column .profit-percent{font-size:1.05em;font-weight:700;color:#27ae60;line-height:1}
.profit-column.profit-high .profit-usd,.profit-column.profit-high .profit-percent{color:#ff8a00}
.profit-column .profit-usd .warning,.profit-column .profit-percent .warning{color:inherit}


/* Tooltips and warnings */
.profit-warning{background:rgba(255,0,0,.1);border:1px solid rgba(255,0,0,.3);color:#C62828;padding:6px 8px;border-radius:4px;font-size:.7em;margin-top:4px;line-height:1.3;font-weight:600;cursor:help;position:relative;display:inline-block}
.profit-warning-tooltip{visibility:hidden;position:absolute;bottom:125%;left:50%;transform:translateX(-50%);background:rgba(236,159,159,1);color:rgba(73,0,0,1);padding:8px 12px;border:1px solid rgba(129,0,0,1);border-radius:6px;font-size:1em;font-weight:600;white-space:nowrap;z-index:10000;box-shadow:0 4px 12px rgba(0,0,0,.3);pointer-events:none;opacity:0;transition:opacity .3s}
.profit-warning:hover .profit-warning-tooltip{visibility:visible;opacity:1}

.fee-warning-highlight{background:rgba(255,165,0,.15);border:1px solid rgba(255,165,0,.4);color:#b8860b;padding:4px 6px;border-radius:4px;font-size:.75em;margin-top:2px;line-height:1.2;font-weight:600;cursor:help;position:relative;display:inline-block}
.fee-warning-tooltip{visibility:hidden;position:absolute;bottom:125%;left:50%;transform:translateX(-50%);background:rgba(255,215,0,.95);color:#8B6914;padding:8px 12px;border:1px solid #b8860b;border-radius:6px;font-size:.9em;font-weight:600;white-space:nowrap;z-index:10000;box-shadow:0 4px 12px rgba(0,0,0,.3);pointer-events:none;opacity:0;transition:opacity .3s}
.fee-warning-highlight:hover .fee-warning-tooltip{visibility:visible;opacity:1}

/* Modals */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:100000;backdrop-filter:blur(5px)}
.modal-content{background:var(--bg-card);border-radius:15px;border:1px solid var(--border-color);width:90%;max-width:800px;max-height:95vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;border-bottom:1px solid var(--border-color)}
.modal-title{font-size:1.5em;font-weight:700;color:var(--text-primary);margin:0}
.modal-close{background:none;border:none;color:var(--text-muted);font-size:1.5em;cursor:pointer;padding:5px;border-radius:4px;transition:all .3s}
.modal-close:hover{color:var(--text-primary);background:rgba(255,255,255,.1)}
.modal-body{flex:1;padding:0;overflow:hidden}.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:15px 25px;border-top:1px solid var(--border-color)}

/* Legend */
.legend-content{padding:20px 25px;max-height:60vh;overflow-y:auto}
.legend-section{margin-bottom:25px}.legend-section h4{color:var(--accent-primary);margin-bottom:15px;font-size:1.1em;border-bottom:1px solid var(--border-color);padding-bottom:8px}

/* Responsive: breakpoints */
@media (max-width:1200px){.container{max-width:100%;padding:0 10px}.exchanges-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.filter-controls{grid-template-columns:repeat(2,1fr)}.arbi-table{font-size:.85em}.arbi-table th,.arbi-table td{padding:12px 4px}.exchange-link{min-height:35px;padding:6px 10px;font-size:.85em}.coin-icon{width:60px;height:60px}.coin-cell{min-height:80px}.arbi-table tbody tr.expanded-row .contract-warning-icon{width:18px;height:18px;font-size:10px}}

@media (min-width:769px){ /* show coin-cell buttons on desktop */.coin-buttons{display:flex!important}}

@media (max-width:768px){.table-container{overflow-x:auto;max-width:100vw}.container{max-width:100%;padding:0 10px}.arbi-scanner{padding:80px 0 20px}.scanner-title{font-size:1.8em}.scanner-subtitle{font-size:1em}.filters-section{padding:15px;margin-bottom:20px;border-radius:10px}.filter-header{flex-direction:column;align-items:stretch;gap:10px}.exchanges-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}.filter-controls{grid-template-columns:1fr;gap:12px}.scanner-table-section{padding:15px;border-radius:10px;margin:0 -5px}.table-header{/* keep row layout but allow wrapping */gap:12px;align-items:center;margin-bottom:15px}.table-title{font-size:1.3em;text-align:center}.table-controls{width:auto;justify-content:flex-end;flex-wrap:wrap;gap:8px}.update-info{order:2;margin-left:0;justify-content:center}.btn-legend{order:1}.btn-secondary{order:3}.arbi-table{font-size:.75em}.coin-cell{position:relative;min-height:80px}.coin-buttons{display:none!important}.arbi-table th{padding:6px 3px!important;font-size:.7em;height:50px!important}.arbi-table td{padding:8px 3px;font-size:.7em}.coin-icon{width:45px;height:45px;border-width:1.5px;padding:2px}.coin-name{font-size:.85em}.exchange-link{min-height:25px;padding:4px 6px;font-size:.65em}.info-btn,.expand-btn{padding:4px 6px;font-size:.7em;min-width:30px}.arbi-table th:nth-child(7){width:90px}.arbi-table th:nth-child(7) .multi-line span::after{content:"\A<?= _MODULE_SCANNER_Time ?>";white-space:pre;font-size:.7em;opacity:.8;display:block;margin-top:2px}.arbi-table th:nth-child(5){width:110px}.arbi-table th:nth-child(5) .multi-line span::after{content:"\A<?= _MODULE_SCANNER_Profit ?>";white-space:pre;font-size:.7em;opacity:.8;display:block;margin-top:2px}}

@media (max-width:480px){.container{padding:0 8px}.arbi-scanner{padding:70px 0 15px}.scanner-title{font-size:1.5em}.scanner-subtitle{font-size:.9em}.filters-section{padding:12px;margin-bottom:15px}.exchanges-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:4px}.exchange-checkbox{padding:4px 6px}.scanner-table-section{padding:12px;margin:0 -3px}.arbi-table{font-size:.7em}.coin-icon{width:35px;height:35px;border-width:1px;padding:1px}.coin-cell{min-height:60px}.coin-buttons{right:2px}.coin-buttons .info-btn,.coin-buttons .expand-btn{width:25px;height:25px;font-size:.6em}.arbi-table th:nth-child(1){width:80px}.arbi-table th:nth-child(3),.arbi-table th:nth-child(4){width:90px}.arbi-table th:nth-child(5){width:95px}.arbi-table th:nth-child(7){width:80px}.arbi-table th{height:45px!important;font-size:.7em}.arbi-table td{font-size:.65em}.exchange-link{font-size:.6em;padding:3px 4px}.contract-warning-icon{width:14px;height:14px;font-size:8px;right:28px}.modal-header,.modal-footer{padding:12px 15px}}

/* Dark-scheme tweaks */
@media (prefers-color-scheme:dark){.coin-icon{background:linear-gradient(135deg,#fff,#e9ecef);border:2px solid rgba(255,255,255,.4);box-shadow:0 2px 12px rgba(255,255,255,.1)}.coin-icon:hover{box-shadow:0 4px 16px rgba(255,255,255,.2)}.info-btn,.expand-btn{border:1px solid rgba(255,255,255,.4)}.expand-btn{border:1px solid rgba(255,255,255,.4)}.exchange-link{border:1px solid rgba(255,255,255,.2)}}
