:root{--bg:#0f1720;--panel:#11151a;--muted:#9aa4b2;--accent:#2b9cff}
html,body{height:100%;margin:0;background:var(--bg);color:#e6eef6;font-family:Segoe UI,Roboto,system-ui}
.panel-app{display:flex;height:100vh}
.sidebar{width:200px;background:#0b1115;padding:12px 10px;border-right:1px solid rgba(255,255,255,0.03)}
.brand{font-weight:700;font-size:18px;color:var(--accent);margin-bottom:18px}
.nav-item{display:flex;align-items:center;padding:6px 8px;border-radius:6px;color:var(--muted);gap:8px;font-size:13px}
.nav-item:hover{background:rgba(255,255,255,0.02);color:#fff}
.content{flex:1;padding:18px;overflow:auto}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.topbar > div:first-child{display:flex;flex-direction:column;justify-content:center}
.topbar .filters{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex:1 1 auto}
.topbar .filters .form-control-sm,.topbar .filters .form-select-sm{max-width:240px;min-width:120px}
.filters{display:flex;gap:8px;align-items:center}
@media (max-width:900px){.sidebar{display:none}.content{padding:12px}}

/* Responsive adjustments for common widths */
/* <= 1050px: reduce sidebar and tighten spacing */
@media (max-width:1050px) {
    .sidebar { width: 160px; }
    .content { padding: 12px; }
    /* stack topbar into two rows: title row and filters row to avoid long word-wrapping */
    .topbar { flex-direction: column; align-items: flex-start; gap:8px; }
    .topbar > div { display: flex; align-items: center; gap: 10px; width:100%; }
    .topbar > div h3 { margin:0; font-size:1.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .topbar .filters { flex-wrap: wrap; gap:6px; justify-content: flex-start; width:100%; }
    .topbar .filters .form-control-sm, .topbar .filters .form-select-sm { width: auto; min-width: 140px; }
    .results th, .results td { font-size: 12px; padding:6px; }
}

/* 1051 - 1199: medium screens */
@media (min-width:1051px) and (max-width:1199px) {
    .sidebar { width: 180px; }
    .content { padding: 14px; }
    .topbar .filters { flex-wrap: wrap; }
}

/* 1200 - 1399: larger tablets / small desktops */
@media (min-width:1200px) and (max-width:1399px) {
    .sidebar { width: 200px; }
    .content { padding: 18px; }
}

/* >=1400: wide screens */
@media (min-width:1400px) {
    .sidebar { width: 220px; }
    .content { padding: 24px; }
}

/* View-specific styles (cards, tables, results) */
.card-shell{background:#0f1720;border-radius:8px;padding:12px;border:1px solid rgba(255,255,255,0.03);margin-bottom:12px}
.url-meta{color:var(--muted);font-size:13px}
.table-shell{background:#0b1115;margin-top:8px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,0.02)}
.results{width:100%;border-collapse:collapse;font-family:inherit;table-layout:fixed}
.results th,.results td{padding:8px;background:#0b1115;color:#dceaf8;border-bottom:1px solid rgba(255,255,255,0.06);font-size:12px}
.results tbody tr td{border-top:1px solid rgba(255,255,255,0.02)}
.results td.url-cell{white-space:normal;word-break:break-word;max-width:420px}
.results thead th{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));text-align:left}
.status-up{color:#35b36b;font-weight:700}.status-down{color:#e45757;font-weight:700}
input.form-control-sm,select.form-select-sm{background:#0b1115;color:#e6eef6;border:1px solid rgba(255,255,255,0.03)}.btn-sm{padding:.25rem .5rem;font-size:.8rem}

/* Shared table styles */
.Global-table{width:100%;border-spacing:0px}
.Share-table{border-spacing:0px;margin:0;font-size:12px;width:100%}
.Share-table th{text-align:center;color:#fff;font-weight:bold;background-color:#124C96;border-right:1px solid #404040;line-height:16px;padding:6px 8px}
.Share-table td{text-align:center;border-bottom:1px solid #ebebeb;border-right:1px solid #ebebeb;padding:2px 4px;line-height:14px}
.Share-table.Small td{font-size:11px}
.Share-table1 {
    border-spacing: 0px;
    width: 100%;
    margin: 14px auto;
    font-size: 12px;
    border-left: 1px solid #404040;
    border-top: 1px solid #404040;
}
.Share-table1 th{text-align:center;color:#fff;font-weight:bold;background-color:#045435;border-right:1px solid #404040;line-height:16px;padding:6px 8px}
.Share-table1 td{
    text-align:justify;
    border-right:1px solid rgba(255,255,255,0.04);
    border-bottom:1px solid rgba(255,255,255,0.03);
    padding:6px 8px;
    line-height:14px;
    background:transparent;
    color:inherit;
}
/* remove light-striping so table matches dark theme */
.Share-table1 tr:nth-child(odd){background-color:transparent;color:inherit}
.Share-table2{border-spacing:0px;margin:0;font-size:12px;width:100%}
.Share-table2 th{text-align:center;color:#fff;font-weight:bold;background-color:#4784d2;border-right:1px solid #0a72cc;line-height:16px;padding:6px 8px}
.Share-table2 td{text-align:center;border-bottom:1px solid #ebebeb;border-right:1px solid #ebebeb;padding:2px 4px;line-height:14px}
.Share-table2.Small td{background-color:#ededed}

/* Static scrollable results block */
#resultsTable{height:800px;overflow:auto;padding:0 8px;}

/* keyword info icon styling */
.kw-info{font-size:14px;vertical-align:middle;color:var(--muted);margin-right:6px}
/* Avoid applying flex layout to detail rows (they need full width) */
.Share-table1 tr:not(.detail-fullwidth) td:first-child,
.Share-table1 tr:not(.detail-fullwidth) th:first-child{
    align-items:center;
}

/* Adjust column widths for Share-table1 results table */
.Share-table1{table-layout:fixed}
.Share-table1 th:nth-child(1),.Share-table1 td:nth-child(1){text-align:left;padding-left:12px;overflow:hidden}
.Share-table1 th:nth-child(1),.Share-table1 td:nth-child(1){text-align:left;padding-left:12px}
.Share-table1 th:nth-child(2),.Share-table1 td:nth-child(2){width:40%;text-align:left;padding-left:12px}
.Share-table1 th:nth-child(3),.Share-table1 td:nth-child(3){width:10%;text-align:center}
.Share-table1 th:nth-child(4),.Share-table1 td:nth-child(4){width:10%;text-align:center}
.Share-table1 th:nth-child(5),.Share-table1 td:nth-child(5){width:10%;text-align:center}

/* Allow wrapping and full visibility for keyword and page columns */
.Share-table1 th:nth-child(1),.Share-table1 td:nth-child(1),
.Share-table1 th:nth-child(2),.Share-table1 td:nth-child(2) {
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    word-break:break-word;
}
.Share-table1 td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Make table headers look like the primary blue button */
.Share-table1 thead th{
    background: linear-gradient(180deg,#3a7bd5,#2b6cc4); /* same tone as .btn-primary */
    color: #fff;
    font-weight:700;
    text-align:left;
}

/* Row hover: subtle bluish tint to indicate hover without overpowering dark theme */
.Share-table1 tbody tr:hover{
    background: rgba(59,123,211,0.06);
}

/* Slightly emphasize hovered row cells */
.Share-table1 tbody tr:hover td{
    color: #eaf4ff;
}

/* Button style adjustments: softer colors, rounded corners, less aggressive shadows */
.btn { border-radius: 8px; box-shadow: none; border: 1px solid rgba(255,255,255,0.03); }
.btn-primary { background: linear-gradient(180deg,#3a7bd5,#2b6cc4); color: #fff; border-color: rgba(0,0,0,0.15); }
.btn-danger { background: linear-gradient(180deg,#e96b6b,#d9534f); color: #fff; border-color: rgba(0,0,0,0.12); }
.btn-warning { background: linear-gradient(180deg,#ffd966,#ffca2b); color: #222; border-color: rgba(0,0,0,0.06); }
.btn:hover { transform: translateY(-2px); }