/* ============================================================
   Scrup Site Scanner
   ============================================================ */
.sitescope-wrap *, .sitescope-wrap *::before, .sitescope-wrap *::after { box-sizing: border-box; }
.sitescope-wrap {
    --ss-blue:    #2271b1;
    --ss-blue-dk: #135e96;
    --ss-green:   #00a32a;
    --ss-red:     #d63638;
    --ss-orange:  #d67d10;
    --ss-border:  #dcdcde;
    --ss-bg:      #f0f0f1;
    --ss-card:    #ffffff;
    --ss-text:    #1d2327;
    --ss-muted:   #6c737a;
    --ss-radius:  8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    color: var(--ss-text);
}

/* Header */
.sitescope-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:14px; border-bottom:2px solid var(--ss-border); }
.sitescope-logo { display:flex; align-items:center; gap:10px; }
.sitescope-logo h1 { margin:0; font-size:20px; font-weight:700; color:var(--ss-text); line-height:1; }
.sitescope-version { font-size:11px; color:var(--ss-muted); background:var(--ss-bg); padding:3px 8px; border-radius:20px; border:1px solid var(--ss-border); }

/* Card */
.sitescope-card { background:var(--ss-card); border:1px solid var(--ss-border); border-radius:var(--ss-radius); padding:20px 24px; margin-bottom:16px; box-shadow:0 1px 4px rgba(0,0,0,.07); }

/* Scan form */
.sitescope-scan-form .form-row { display:flex; align-items:flex-start; gap:0; flex-wrap:wrap; }
.sitescope-scan-form .form-group { flex:1; min-width:220px; }
.sitescope-scan-form .form-divider { display:flex; align-items:center; padding:20px 18px 0; font-size:11px; font-weight:700; color:var(--ss-muted); letter-spacing:.07em; }
.radio-label { display:flex; align-items:center; gap:6px; font-weight:600; margin-bottom:7px; cursor:pointer; }
.radio-label input[type="radio"] { accent-color:var(--ss-blue); }

/* Options row */
.scan-options-row { display:flex; align-items:flex-start; gap:28px; margin-top:16px; padding-top:16px; border-top:1px solid var(--ss-border); flex-wrap:wrap; }
.scan-option-group { display:flex; flex-direction:column; gap:6px; }
.option-label { font-size:11px; font-weight:700; color:var(--ss-muted); text-transform:uppercase; letter-spacing:.05em; }
.number-input-wrap { display:flex; align-items:center; gap:8px; }
.number-input { width:100px !important; }
.number-hint { font-size:11px; color:var(--ss-muted); }
.cb-label { display:flex; align-items:center; gap:7px; cursor:pointer; user-select:none; }
.cb-label input[type="checkbox"] { accent-color:var(--ss-blue); width:13px; height:13px; flex-shrink:0; }
.cb-label code { background:var(--ss-bg); padding:1px 4px; border-radius:3px; font-size:11px; border:1px solid var(--ss-border); color:var(--ss-muted); }

/* Input */
.sitescope-input { width:100%; padding:8px 11px; border:1.5px solid var(--ss-border); border-radius:6px; font-size:13px; color:var(--ss-text); background:#fff; transition:border-color .15s, box-shadow .15s; }
.sitescope-input:focus { outline:none; border-color:var(--ss-blue); box-shadow:0 0 0 3px rgba(34,113,177,.12); }
.sitescope-input:disabled { background:var(--ss-bg); color:var(--ss-muted); cursor:not-allowed; }

/* Form actions */
.form-actions { display:flex; align-items:center; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--ss-border); flex-wrap:wrap; }

/* Buttons */
.ss-btn { display:inline-flex; align-items:center; gap:5px; padding:8px 15px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; border:1.5px solid transparent; transition:background .15s, border-color .15s; line-height:1; white-space:nowrap; }
.ss-btn-primary { background:var(--ss-blue);   color:#fff; border-color:var(--ss-blue-dk); }
.ss-btn-primary:hover { background:var(--ss-blue-dk); }
.ss-btn-danger  { background:var(--ss-red);    color:#fff; border-color:#b32d2e; }
.ss-btn-danger:hover  { background:#b32d2e; }
.ss-btn-warning { background:var(--ss-orange); color:#fff; border-color:#b8660e; }
.ss-btn-warning:hover { background:#b8660e; }
.ss-btn-success { background:var(--ss-green);  color:#fff; border-color:#006a1c; }
.ss-btn-success:hover { background:#006a1c; }
.ss-btn:not(.ss-btn-primary):not(.ss-btn-danger):not(.ss-btn-warning):not(.ss-btn-success) { background:#fff; color:var(--ss-text); border-color:var(--ss-border); }
.ss-btn:not(.ss-btn-primary):not(.ss-btn-danger):not(.ss-btn-warning):not(.ss-btn-success):hover { background:var(--ss-bg); }
.ss-btn-sm { padding:5px 11px; font-size:12px; }
.ss-btn:disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }

/* Progress */
.sitescope-progress { padding:16px 24px; }
.progress-header { display:flex; align-items:center; gap:10px; margin-bottom:11px; font-weight:600; }
#progress-icon-wrap { width:20px; height:20px; flex-shrink:0; position:relative; }
.pi-svg { width:20px; height:20px; display:block; }
@keyframes ss-spin { to { transform:rotate(360deg); } }
.pi-spin { animation:ss-spin .75s linear infinite; transform-origin:center; }
.progress-track { width:100%; height:8px; background:var(--ss-bg); border-radius:20px; overflow:hidden; border:1px solid var(--ss-border); margin-bottom:7px; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--ss-blue),#4a94d4); border-radius:20px; transition:width .35s ease; }
.progress-stats { font-size:12px; color:var(--ss-muted); }
.progress-stats span { font-weight:600; color:var(--ss-text); }

/* Tabs */
.sitescope-tabs { background:var(--ss-card); border:1px solid var(--ss-border); border-radius:var(--ss-radius); box-shadow:0 1px 4px rgba(0,0,0,.07); overflow:hidden; }
.tab-nav { display:flex; border-bottom:1px solid var(--ss-border); background:var(--ss-bg); padding:0 10px; overflow-x:auto; }
.tab-btn { display:inline-flex; align-items:center; gap:5px; padding:11px 14px; background:none; border:none; border-bottom:2px solid transparent; font-size:13px; font-weight:600; color:var(--ss-muted); cursor:pointer; margin-bottom:-1px; transition:color .15s, border-color .15s; white-space:nowrap; }
.tab-btn:hover { color:var(--ss-text); }
.tab-btn.active { color:var(--ss-blue); border-bottom-color:var(--ss-blue); background:var(--ss-card); }
.tab-content { display:none; padding:18px 22px; }
.tab-content.active { display:block; }

/* Toolbar */
.tab-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px; flex-wrap:wrap; }
.toolbar-right { display:flex; gap:7px; flex-wrap:wrap; }
.count-badge { display:inline-flex; align-items:center; background:var(--ss-bg); color:var(--ss-text); font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px; border:1px solid var(--ss-border); }

/* ── Table — NO scrollX, manual overflow ── */
#ss-table-outer {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--ss-border);
    border-radius: 6px;
}
#sitescope-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;   /* fixed layout = headers and cells share exact same column widths */
    font-size: 12px;
}
/* Column widths — must match exactly between thead and tbody */
#sitescope-table .col-url    { width: 28%; }
#sitescope-table .col-status { width: 7%;  }
#sitescope-table .col-title  { width: 22%; }
#sitescope-table .col-desc   { width: 28%; }
#sitescope-table .col-h1     { width: 15%; }

#sitescope-table thead th {
    background: var(--ss-bg);
    border-bottom: 2px solid var(--ss-border);
    border-right: 1px solid var(--ss-border);
    padding: 9px 11px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: sticky;
    top: 0;
    z-index: 1;
}
#sitescope-table thead th:last-child { border-right: none; }
#sitescope-table tbody td {
    padding: 7px 11px;
    border-bottom: 1px solid var(--ss-border);
    border-right: 1px solid var(--ss-border);
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;   /* needed for text-overflow to work in table-layout:fixed */
}
#sitescope-table tbody td:last-child { border-right: none; }
#sitescope-table tbody tr:last-child td { border-bottom: none; }
#sitescope-table tbody tr:hover td { background: #f6f7f7; }
#sitescope-table a { color: var(--ss-blue); text-decoration: none; }
#sitescope-table a:hover { text-decoration: underline; }

/* DataTables chrome */
.dataTables_wrapper { font-size: 13px; color: var(--ss-text); }
.dataTables_wrapper .dataTables_filter { margin-bottom: 10px; text-align: left; }
.dataTables_wrapper .dataTables_length { margin-bottom: 10px; }
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label { display:flex; align-items:center; gap:6px; }
.dataTables_wrapper .dataTables_filter input { border:1.5px solid var(--ss-border) !important; border-radius:5px !important; padding:5px 9px !important; font-size:12px; }
.dataTables_wrapper .dataTables_length select { border:1.5px solid var(--ss-border) !important; border-radius:5px !important; padding:4px 6px !important; }
.dataTables_wrapper .dataTables_info { font-size:12px; color:var(--ss-muted); padding-top:6px; }
.dataTables_wrapper .dataTables_paginate { padding-top:6px; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius:4px !important; font-size:12px !important; padding:3px 8px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background:var(--ss-blue) !important; border-color:var(--ss-blue-dk) !important; color:#fff !important; }
.dataTables_wrapper .top-controls { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:8px; }

/* Status */
.status-200 { color:var(--ss-green); font-weight:700; }
.status-301,.status-302 { color:var(--ss-orange); font-weight:700; }
.status-404,.status-500 { color:var(--ss-red); font-weight:700; }
.status-0,.status--1 { color:var(--ss-muted); font-weight:700; }

/* Tree */
#sitescope-tree-container { min-height:460px; overflow:hidden; position:relative; border-radius:6px; background:#fafafa; border:1px solid var(--ss-border); }
#sitescope-tree-container svg { width:100%; display:block; }
.ss-tree-link { fill:none; stroke:#c3c4c7; stroke-width:1.5; }
.ss-tree-node circle { fill:#fff; stroke:var(--ss-blue); stroke-width:2; cursor:pointer; }
.ss-tree-node circle:hover { fill:#e8f0fb; }
.ss-tree-node.ss-node-error    circle { stroke:var(--ss-red); }
.ss-tree-node.ss-node-redirect circle { stroke:var(--ss-orange); }
.ss-tree-node text { font-size:11px; fill:var(--ss-text); font-family:inherit; }
.ss-tree-tooltip { position:absolute; background:rgba(0,0,0,.82); color:#fff; padding:6px 10px; border-radius:5px; font-size:11px; pointer-events:none; z-index:999; max-width:280px; word-break:break-all; line-height:1.4; }

/* Email tab */
.email-report-panel { max-width:520px; }
.email-panel-header { display:flex; align-items:flex-start; gap:13px; margin-bottom:18px; }
.email-panel-header h3 { margin:0 0 4px; font-size:15px; font-weight:700; }
.email-panel-header p  { margin:0; color:var(--ss-muted); }
.email-notice { display:flex; align-items:center; gap:8px; padding:11px 13px; background:#f8f9fa; border:1px solid var(--ss-border); border-radius:6px; color:var(--ss-muted); }
.email-form-row { display:flex; gap:9px; margin-bottom:7px; }
.email-form-row .sitescope-input { flex:1; }
.email-hint { font-size:12px; color:var(--ss-muted); margin:0 0 12px; }

/* Past reports */
.past-report-table { width:100%; border-collapse:collapse; font-size:13px; }
.past-report-table th { background:var(--ss-bg); padding:9px 12px; text-align:left; font-weight:700; border:1px solid var(--ss-border); white-space:nowrap; }
.past-report-table td { padding:8px 12px; border:1px solid var(--ss-border); vertical-align:middle; }
.past-report-table tr:hover td { background:#f6f7f7; }
.past-report-table .report-actions { display:flex; gap:6px; }
.no-reports { text-align:center; padding:40px; color:var(--ss-muted); }

/* Alerts */
.ss-alert { padding:10px 13px; border-radius:6px; font-size:13px; margin-bottom:12px; border:1px solid; }
.ss-alert-error   { background:#fcf0f1; border-color:#f0b8b9; color:var(--ss-red); }
.ss-alert-success { background:#edfaef; border-color:#9de09e; color:#00641c; }

/* Empty / loading */
.empty-state,.loading-state { text-align:center; padding:40px 20px; color:var(--ss-muted); }
.empty-state svg { margin-bottom:10px; }
.empty-state p { margin:0; font-size:14px; }
.loading-state { display:flex; flex-direction:column; align-items:center; gap:10px; }

/* Spinner for loading-state */
.ss-spinner { width:18px; height:18px; border:2.5px solid var(--ss-border); border-top-color:var(--ss-blue); border-radius:50%; animation:ss-spin .7s linear infinite; }

@media (max-width:640px) {
    .sitescope-scan-form .form-row { flex-direction:column; }
    .sitescope-scan-form .form-divider { padding:6px 0; }
    .scan-options-row { flex-direction:column; gap:12px; }
    .email-form-row { flex-direction:column; }
}

/* Scan complete report link */
.scan-complete-link { display:flex; align-items:center; gap:8px; margin-top:12px; padding:10px 14px; background:#edfaef; border:1px solid #9de09e; border-radius:6px; font-size:13px; color:#00641c; }
.scan-complete-link a { color:var(--ss-green); font-weight:700; text-decoration:none; }
.scan-complete-link a:hover { text-decoration:underline; }

/* Error badge in toolbar */
.count-badge-error { background:#fcf0f1; border-color:#f0b8b9; color:var(--ss-red); }
.toolbar-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Email fields */
.email-fields { display:flex; flex-direction:column; gap:13px; margin-bottom:14px; }
.email-field-row { display:flex; flex-direction:column; gap:4px; }
.email-field-label { font-size:12px; font-weight:700; color:var(--ss-text); }
.field-optional { font-weight:400; color:var(--ss-muted); }
.sitescope-textarea { resize:vertical; min-height:80px; line-height:1.6; font-family:inherit; }

/* ── Native results table ── */
.ss-table-scroll { overflow-x: auto; }
#sitescope-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
#sitescope-table thead th { background: var(--ss-bg); padding: 9px 11px; text-align: left; font-weight: 700; border: 1px solid var(--ss-border); white-space: nowrap; overflow: hidden; }
#sitescope-table tbody td { padding: 7px 11px; border: 1px solid var(--ss-border); vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }
#sitescope-table tbody tr:hover td { background: #f6f7f7; }
.url-col    { width: 28%; }
.status-col { width: 7%;  }
.title-col  { width: 22%; }
.desc-col   { width: 28%; }
.h1-col     { width: 15%; }
.ss-th-sortable { cursor: pointer; user-select: none; }
.ss-th-sortable:hover { background: #e5e7ea; }
.ss-sort-hint { opacity: 0.35; }
.ss-empty-row { text-align: center; color: var(--ss-muted); padding: 24px !important; }

/* ── Table controls (search, per-page, pagination) ── */
.ss-table-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.ss-table-left, .ss-table-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-table-info { font-size: 12px; color: var(--ss-muted); white-space: nowrap; }
.ss-per-page-label { font-size: 12px; color: var(--ss-muted); display: flex; align-items: center; gap: 4px; }
.ss-per-page-label select { padding: 3px 6px; border: 1px solid var(--ss-border); border-radius: 4px; font-size: 12px; }
.ss-search-input { padding: 5px 9px; border: 1px solid var(--ss-border); border-radius: 5px; font-size: 12px; width: 180px; }
.ss-search-input:focus { outline: none; border-color: var(--ss-blue); box-shadow: 0 0 0 2px rgba(34,113,177,.12); }
.ss-pager { display: flex; align-items: center; gap: 3px; }
.ss-btn-sm-plain { padding: 4px 8px; border: 1px solid var(--ss-border); border-radius: 4px; background: #fff; font-size: 12px; cursor: pointer; color: var(--ss-text); line-height: 1; }
.ss-btn-sm-plain:hover:not(:disabled) { background: var(--ss-bg); border-color: #aaa; }
.ss-btn-sm-plain.active { background: var(--ss-blue); color: #fff; border-color: var(--ss-blue); }
.ss-btn-sm-plain:disabled { opacity: 0.4; cursor: default; }
.ss-page-gap { font-size: 12px; color: var(--ss-muted); padding: 0 2px; }