/* ---------- Global reset ---------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



/* ---------- Global Things ---------- */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
}

.no-wrap {
    white-space: nowrap;
}

ul {
    list-style-type: disc;
    padding-left: 1.25rem;   /* ← THIS is what you want */
    margin: 0.5rem 0;
}

li {
    margin-bottom: 0.25rem;
}

.highlight-red {
  color: red;
}



/* ---------- Layout Main Page ---------- */

.layout {
    flex: 1;
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 1rem;
    padding: 1rem;
}

/* ---------- Layout Notices ---------- */

.layout-notices {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
}

.layout-notices p {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}



/* ---------- Header ---------------------------------------- */

.site-header {
    background-color: #2c3e50;
    color: #ffffff;
    display:flex;
    align-items:center; /* vertical centering */
    padding: 0.75rem 1rem;
    padding-left: 2rem;
    justify-content: space-between;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 1.5rem);
}

.site-logo {
    width: clamp(90px, 12vw, 130px);
    height: auto;
    display: block;
}

.site-title {
    font-size: clamp(1.3rem, 4vw, 2.5rem);
    font-weight: 400;
    margin: 0;
    line-height: 1.1;
}



/* Header navigation container */
.site-header-nav {
    display: flex;
    align-items: center;
}




/* ---------- Header donate section ---------- */

.site-donate {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}

.donate-text {
    color: #e0e6eb;
    white-space: nowrap;
}

.donate-link {
    color: #ffd966;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255, 217, 102, 0.5);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
    font-size: clamp(0.7rem, 1.5vw, 0.85rem);
    padding: clamp(0.15rem, 0.4vw, 0.25rem)
             clamp(0.35rem, 0.8vw, 0.5rem);
}

.donate-link:hover,
.donate-link:focus {
    background-color: #ffd966;
    color: #2c3e50;
}


/* ---------- Panel styling (dashboard cards) ---------- */
.panel {
    border: 1px solid #d0d4d8;  /* old: #d0d4d8 */
    border-radius: 6px;
    background-clip: padding-box;
}

/* ---------- Main header controls ---------- */

.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.5rem, 2vw, 1.5rem);
    margin-bottom: 0.75rem;

    flex-wrap: wrap; /* allows smooth adaptation */
}


/* Title scaling */
.main-header h2 {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    line-height: 1.25;
    margin: 0;
    flex: 1 1 auto;
}


/* Control groups */
.row-limit-control {
    display: flex;
    align-items: center;
    gap: clamp(0.25rem, 1vw, 0.5rem);

    font-size: clamp(0.75rem, 1.5vw, 0.9rem);

    flex: 0 0 auto;
}


/* Select scaling */
.row-limit-control select {
    font-size: clamp(0.75rem, 1.5vw, 0.9rem);

    padding:
        clamp(0.1rem, 0.3vw, 0.2rem)
        clamp(0.25rem, 0.6vw, 0.4rem);
}


/* Radio filter control */
.ping-filter-control {
    display: flex;
    align-items: center;
    gap: clamp(0.3rem, 1vw, 0.6rem);

    font-size: clamp(0.75rem, 1.5vw, 0.9rem);

    flex: 0 0 auto;
}

.ping-filter-control label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    white-space: nowrap;
}

.ping-filter-control input[type="radio"] {
    cursor: pointer;
}

.main-controls {
    display: flex;
    gap: clamp(0.5rem, 2vw, 1rem);
    flex-wrap: wrap;
}


/* ---------- Main content ---------- */
.content-main {
    background-color: #E0E9FF;
    padding: 1rem;
    overflow-y: auto;
}

.content-main h2 {
    margin: 0 0 0.35rem 0;
    line-height: 1.25;
}



/* ---------- Aside ---------- */
.content-aside {
    padding: 0;
    overflow: hidden;   /* stops .aside-panel sticking out of the corners */
    display: flex;
    flex-direction: column;

    height: 100%;
}

.content-aside h2 {
    margin-bottom: 0.4rem;
}

.content-aside p {
    font-size: 0.95rem;
}

.content-aside p + p {
    margin-top: 0.15rem;
}



/* ---------- Footer ---------- */
.site-footer {
    background-color: #2c3e50;
    color: #ffffff;
    padding: 0.75rem;
    text-align: center;
    font-size: 0.9rem;
}

/* ---------- Footer links ---------- */
.site-footer a {
    color: #f3e6a0;          /* light yellow */
    text-decoration: none;   /* no underline */
    transition: color 0.15s ease;
}

.site-footer a:visited {
    color: #f3e6a0;          /* stay light yellow after visit */
}

.site-footer a:hover,
.site-footer a:focus {
    color: #cfe9ff;          /* light contrasting colour on hover */
    text-decoration: none;
}


/* ---------- Responsive ---------- */
@media (max-width: 800px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

/* ---------- Ping table ---------- */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.ping-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background-color: white;
}

.ping-table thead {
    background-color: #34495e;
    color: white;
}

.ping-table th,
.ping-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    white-space: nowrap;
}

.ping-table tbody tr:nth-child(even) {
    background-color: #f4f6f8;
}

.ping-table tbody tr:hover {
    background-color: #e6f2ff;
}



/* ---------- Aside tabs ---------- */

.aside-tabs {
    display: flex;
    justify-content: center;
    gap: 0.4rem;

    width: 100%;                 /* fill aside width */
    padding: 0 3%;               /* make tabs slightly narrower than aside */
    box-sizing: border-box;

    margin: 0 auto -1px auto;    /* center + overlap panel border */

    flex-wrap: nowrap;
}


.aside-tab {
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;

    border: 1px solid #b5dec6;
    border-bottom: none;

    cursor: pointer;

    border-top-left-radius: 6px;
    border-top-right-radius: 6px;

    color: #0b3d26;
}


.aside-tab[data-tab="instructions"] {
    background-color: #e0fae9;
}

.aside-tab[data-tab="examples"] {
    background-color: #fae0f6;
    border-color: #dcb5d6;
    color: #3d0b36;
}

.aside-tab[data-tab="metrics"] {
    background-color: #fafae2;
}

.aside-tab.active {
    position: relative;
    z-index: 2;
    box-shadow: 0 -1px 0 #ffffff;
}

.aside-tab.active:hover {
    filter: none;
}

.aside-tab:hover {
    filter: brightness(1.05);
}

.aside-tab {
    transition: filter 0.1s ease;
    flex: 1;
    text-align: center;
}

/* ---------- Aside panels ---------- */

.aside-panel {
    display: none;
    padding: 0.7rem;
    background-color: var(--aside-bg);
    border-radius: 6px;

    flex: 1;
}

.aside-panel.active {
    display: block;
}

/* Panel colour variants */
#aside-instructions {
    --aside-bg: #c2f0d0;
}

#aside-examples {
    --aside-bg: #f0c2e8;
}

#aside-metrics {
    --aside-bg: #faf0a0;
}

/* Examples panel box tinting */
#aside-examples .aside-box {
    background-color: #fdf5fb;
    border-color: #dcb5d6;
}

#aside-examples .aside-box h4 {
    color: #3d0b36;
}



#aside-metrics h3
{
    margin-top: 14px;
    margin-bottom: 6px;

    font-size: 0.95rem;

    color: #2c3e50;

    border-bottom: 1px solid rgba(0,0,0,0.08);

    padding-bottom: 2px;
}




/* ---------- Aside wrapper ---------- */
.aside-wrapper {
    display: flex;
    flex-direction: column;
}



/* ---------- Aside boxes ---------- */
.aside-boxes {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.aside-box {
    background-color: #f2fff3; /* slightly lighter than aside. Old: #edfff3 */
    border: 1px solid #b5dec6;
    border-radius: 5px;
    padding: 0.35rem;
    padding-left: 0.55rem;
}

.aside-box h3 {
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
    font-weight: 700;
}

.aside-box h4 {
    font-size: 0.8rem;
    margin-top: 0.15rem;
    margin-bottom: 0.05rem;
    font-weight: 600;
    color: #0e0e61;
    letter-spacing: 0.03em;
}

.aside-box p {
    font-size: 0.85rem;
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.aside-box p + p {
    margin-top: 0;
}

/* ---------- Example commands ---------- */

.example-command {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin: 0.2rem 0;
}

.example-command code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.copy-btn {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border: 1px solid #dcb5d6;
    border-radius: 3px;
    background: #ffffff;
    color: #3d0b36;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.copy-btn:hover {
    background-color: #dcb5d6;
}

.copy-btn.copied {
    background-color: #2c3e50;
    border-color: #2c3e50;
    color: #ffffff;
}


/* ---------- Capture number column ---------- */
.capture-num-th {
    color: #94a3b8;
    font-weight: 400;
    font-size: 0.75rem;
    width: 1px;
}

.capture-num-td {
    color: #94a3b8;
    font-size: 0.72rem;
    width: 1px;
}

.ping-table th:nth-child(2),
.ping-table td:nth-child(2) {
    width: 1px;
}

/* ---------- Country tooltip ---------- */
.country-td {
    cursor: default;
}

#geo-tooltip {
    display: none;
    position: fixed;
    transform: translateX(-50%);
    background: #ffffe1;
    color: #000000;
    font-weight: normal;
    font-size: 0.78rem;
    font-family: Arial, sans-serif;
    line-height: 1.7;
    padding: 0.15rem 0.275rem;
    border: 1px solid #767676;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 1000;
    white-space: nowrap;
}

/* ---------- Windows 3.1 button ---------- */
.win31-btn {
    background-color: #c0c0c0;
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.2rem 0.7rem;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #404040;
    border-right: 2px solid #404040;
    cursor: pointer;
    min-width: 56px;
}

.win31-btn:active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
}

/* Red text for user's own pings */
.self-ping {
    color: #dd2828;
}

/* Bold recent pings */
.recent-ping {
    font-weight: 900;
}

/* Fragmented packet indicator */
.fragmented-indicator {
    color: hotpink;
    font-weight: bold;
}

/* Sub-note in table header cells */
.th-note {
    font-size: 0.65rem;
    font-weight: 400;
    color: #ffb3c6;
}

/* IP version label in header */
.ip-version-label {
    display: none;
    background-color: #ffee99;
    color: #2c3e50;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    white-space: nowrap;
}

.ip-version-label--shown {
    display: inline-block;
}

.ip-version-label--shown::before {
    content: attr(data-full);
}

@media (max-width: 700px) {
    .ip-version-label--shown::before {
        content: attr(data-short);
    }
    .ip-version-label--shown {
        background-color: transparent;
        color: #ffd966;
        padding: 0;
        border-radius: 0;
        font-size: 0.85rem;
    }
}

.content-privacy {
    background-color: #ffedff;
    padding: 1rem;
    overflow-y: auto;
}

.content-disclaimer {
    background-color: #edffff;
    padding: 1rem;
    overflow-y: auto;
}



/* ---------- Mobile adjustments ---------- */
@media (max-width: 800px) {

    .layout,
    .layout-notices {
        grid-template-columns: 1fr;
    }

    .ping-table {
        font-size: 0.8rem;
    }



}



@media (max-width: 700px) {

    .site-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .site-branding {
        gap: 0.6rem;
    }

    .donate-text {
        display: none;
    }

}


.back-short {
    display: none;
}


@media (max-width: 600px) {

    .back-full {
        display: none;
    }

    .back-short {
        display: inline;
    }

}


/* ---------- Responsive header scaling ---------- */




.donate-link {

}





/* Back button on notices page */

.back-button {

    color: #e0e6eb;
    text-decoration: none;

    border: 1px solid rgba(224, 230, 235, 0.5);

    border-radius: 4px;

    font-size: clamp(0.7rem, 1.5vw, 0.85rem);

    padding:
        clamp(0.15rem, 0.4vw, 0.25rem)
        clamp(0.35rem, 0.8vw, 0.5rem);

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}


/* Hover */
.back-button:hover,
.back-button:focus {

    background-color: #e0e6eb;

    color: #2c3e50;

    border-color: #e0e6eb;
}










/* ============================================
   Metrics Dashboard
   ============================================ */

/* Section headings */

.metrics-section-subtitle
{
    margin-top: 14px;
    margin-bottom: 6px;

    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;

    color: #64748b;

    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0,0,0,0.10);
}

#aside-metrics > .metrics-section-subtitle:first-child
{
    margin-top: 0;
}


/* Card grid */

.metrics-card-grid
{
    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));

    gap: 6px;

    margin-bottom: 4px;
}

.metrics-card-grid-stats
{
    display: flex;
    flex-wrap: wrap;
}

.metrics-card-grid-stats .metric-card
{
    flex: 1 1 auto;
    min-width: max-content;
}

.metrics-card-grid-stats .metric-title,
.metrics-card-grid-stats .metric-value
{
    white-space: nowrap;
}


/* Individual card */

.metric-card
{
    background: #ffffff;

    border: 1px solid rgba(0,0,0,0.09);
    border-top: 3px solid #2c3e50;

    border-radius: 4px;

    padding: 7px 9px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    box-shadow: 0 1px 3px rgba(0,0,0,0.06);

    transition: box-shadow 0.15s ease;
}

.metric-card:hover
{
    box-shadow: 0 3px 8px rgba(0,0,0,0.11);
}


/* Card label */

.metric-title
{
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;

    color: #64748b;

    margin-bottom: 3px;
}


/* Card value */

.metric-value
{
    font-size: 1.25rem;
    font-weight: 700;

    color: #1e293b;

    line-height: 1.1;

    font-variant-numeric: tabular-nums;
}


/* Warning card (dropped packets) */

.metric-card-warning
{
    border-top-color: #dc2626;
}

.metric-card-warning .metric-value
{
    color: #dc2626;
}


/* Website connections row */

.metric-stat-row
{
    display: flex;
    justify-content: space-between;
    align-items: center;

    background: #ffffff;

    border: 1px solid rgba(0,0,0,0.09);
    border-left: 3px solid #2c3e50;

    border-radius: 4px;

    padding: 7px 10px;

    margin-bottom: 4px;
}

.metric-stat-label
{
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;

    color: #64748b;
}

.metric-stat-value
{
    font-size: 1.1rem;
    font-weight: 700;

    color: #1e293b;

    font-variant-numeric: tabular-nums;
}


/* Batch table */

.metrics-description
{
    font-size: 0.78rem;
    color: #4a5568;
    margin-bottom: 8px;
    line-height: 1.4;
}

.metrics-table-wrapper
{
    width: 100%;
    overflow: hidden;

    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.09);
}

.metrics-table
{
    width: 100%;

    border-collapse: collapse;

    background: #ffffff;

    font-size: 0.82rem;
}

.metrics-table thead
{
    background: #2c3e50;
    color: #ffffff;
}

.metrics-table th
{
    padding: 6px 10px;

    text-align: left;

    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.metrics-table td
{
    padding: 5px 10px;

    color: #334155;

    border-top: 1px solid #f1f5f9;
}

.metrics-table tbody tr:nth-child(even)
{
    background: #f8fafc;
}

.metrics-table tbody tr:hover
{
    background: #f1f5f9;
}