/* ---------- 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,
.self-filter-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);
}


/* Checkbox scaling */
.self-filter-control input[type="checkbox"] {
    transform: scale(clamp(0.8, 1.2vw, 1));
}

.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.5rem;
}



/* ---------- 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="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: 1rem;
    background-color: var(--aside-bg);
    border-radius: 6px;

    flex: 1;
}

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

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

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



d#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: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

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

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

.aside-box h4 {
    font-size: 0.8rem;
    margin-top: 0.25rem;
    margin-bottom: 0.1rem;
    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;
}

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

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

.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 Cards
   ============================================ */

.metrics-section-title
{
    margin-bottom: 12px;
}

.metrics-section-subtitle
{
    margin-top: 18px;
    margin-bottom: 10px;

    font-size: 1rem;
    font-weight: 600;

    color: #2c3e50;
}

.metrics-description
{
    font-size: 0.85rem;
    color: #4a5568;
    margin-bottom: 10px;
}


/* Grid layout */

.metrics-card-grid
{
    display: grid;

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

    gap: 10px;

    margin-bottom: 8px;
}


/* Individual card */

.metric-card
{
    background: #ffffff;

    border: 1px solid #d6dde6;

    border-radius: 6px;

    padding: 10px 12px;

    display: flex;
    flex-direction: column;

    justify-content: center;

    min-height: 68px;

    box-shadow: 0 1px 2px rgba(0,0,0,0.04);

    transition: box-shadow 0.15s ease;
}

.metric-card:hover
{
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}


/* Card title */

.metric-title
{
    font-size: 0.75rem;

    color: #5a6b7c;

    margin-bottom: 2px;

    font-weight: 600;

    letter-spacing: 0.02em;
}


/* Card value */

.metric-value
{
    font-size: 1.4rem;

    font-weight: 600;

    color: #1a202c;

    line-height: 1.2;
}


/* Optional subtitle */

.metric-subtitle
{
    font-size: 0.7rem;

    color: #718096;

    margin-top: 2px;
}


/* Warning card (dropped packets) */

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

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



/* ============================================
   Professional Metrics Table
   ============================================ */

.metrics-table-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
}



.metrics-table
{
    width: 100%;

    border-collapse: collapse;

    background: #ffffff;

    border: 1px solid #d6dde6;

    border-radius: 0px;

    overflow: hidden;

    font-size: 0.85rem;
}


/* Header */

.metrics-table thead
{
    background: #82A3AB;

    color: white;
}

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

    text-align: left;

    font-weight: 600;

    font-size: 0.8rem;
}


/* Rows */

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

    border-top: 1px solid #edf2f7;
}

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

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