/*
 * Instance control panel (Welle 1b polish; UI-Design-Principles Sec. 5/6). The
 * cohesive control surface: a header with the status badge + primary actions, a row
 * of live overview tiles, a definition grid for the static details, and the RCON
 * console / log surface. Consumes ONLY design tokens — no raw hex (Sec. 11.2).
 *
 * Class schema:
 *   gtx-instance-head, gtx-instance-head__title, gtx-instance-head__meta,
 *   gtx-instance-head__actions
 *   gtx-tiles, gtx-tile, gtx-tile--<status>, gtx-tile__label, gtx-tile__value,
 *   gtx-tile__sub, gtx-tile__icon
 *   gtx-def (definition grid)
 *   gtx-console, gtx-console--tall, gtx-console__prompt, gtx-console__input
 */

/* --- Control-panel header --------------------------------------------------- */

.gtx-instance-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gtx-s3);
}

.gtx-instance-head__title {
    margin: 0;
}

.gtx-instance-head__meta {
    width: 100%;
    margin-top: var(--gtx-s1);
    color: var(--gtx-text-dim);
    font-family: var(--gtx-font-mono);
    font-size: var(--gtx-fs-meta);
}

.gtx-instance-head__actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gtx-s2);
}

@media (max-width: 40rem) {
    .gtx-instance-head__actions {
        margin-left: 0;
        width: 100%;
    }
    .gtx-instance-head__actions form {
        flex: 1 1 auto;
    }
    .gtx-instance-head__actions .gtx-btn {
        width: 100%;
    }
}

/* --- Live overview tiles ---------------------------------------------------- */

.gtx-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--gtx-s4);
}

.gtx-tile {
    background: var(--gtx-surface);
    border: 1px solid var(--gtx-line);
    border-left: 3px solid var(--gtx-idle);
    border-radius: var(--gtx-r-m);
    box-shadow: var(--gtx-shadow-card);
    padding: var(--gtx-s4);
}

.gtx-tile--ok { border-left-color: var(--gtx-ok); }
.gtx-tile--warn { border-left-color: var(--gtx-warn); }
.gtx-tile--danger { border-left-color: var(--gtx-danger); }
.gtx-tile--idle { border-left-color: var(--gtx-idle); }
.gtx-tile--info { border-left-color: var(--gtx-info); }

.gtx-tile__label {
    display: flex;
    align-items: center;
    gap: var(--gtx-s1);
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-meta);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gtx-tile__icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.gtx-tile__value {
    margin-top: var(--gtx-s2);
    font-family: var(--gtx-font-display);
    font-size: var(--gtx-fs-h2);
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.gtx-tile__sub {
    margin-top: var(--gtx-s1);
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-meta);
}

/* --- Definition grid (overview / upgrade / monitoring details) -------------- */

.gtx-def {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--gtx-s2) var(--gtx-s5);
    align-items: baseline;
}

.gtx-def dt {
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-meta);
}

.gtx-def dd {
    color: var(--gtx-text);
}

@media (max-width: 30rem) {
    .gtx-def {
        grid-template-columns: 1fr;
        gap: var(--gtx-s1);
    }
    .gtx-def dd {
        margin-bottom: var(--gtx-s2);
    }
}

/* --- RCON console / log surface (dark in BOTH themes, Sec. 6) --------------- */

.gtx-console {
    background: var(--gtx-log-bg);
    color: var(--gtx-log-text);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-s);
    font-family: var(--gtx-font-mono);
    font-size: var(--gtx-fs-ui);
    line-height: 1.5;
    padding: var(--gtx-s4);
    margin: 0;
    white-space: pre-wrap;
    overflow: auto;
    max-height: 34rem;
    overscroll-behavior: contain;
}

/* Live variant: a fixed tall pane the stream scrolls within. */
.gtx-console--tall {
    height: 28rem;
    max-height: none;
}

/* Command line: a mono prompt input that fills the row, run button beside it. */
.gtx-console__prompt {
    display: flex;
    gap: var(--gtx-s2);
    align-items: flex-end;
}

.gtx-console__input {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Server list — professional card grid (instances/index) ---------------- */

.gtx-server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gtx-s4);
}

.gtx-server-card {
    display: flex;
    flex-direction: column;
    gap: var(--gtx-s4);
}

.gtx-server-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gtx-s3);
}

.gtx-server-card__name {
    margin: 0;
    font-family: var(--gtx-font-display);
    font-size: var(--gtx-fs-h3);
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
}

.gtx-server-card__name a {
    color: inherit;
    text-decoration: none;
}

.gtx-server-card__name a:hover {
    color: var(--gtx-accent-text);
    text-decoration: none;
}

.gtx-server-card__facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--gtx-s1) var(--gtx-s4);
    margin: 0;
    font-size: var(--gtx-fs-ui);
}

.gtx-server-card__facts dt {
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-meta);
}

.gtx-server-card__facts dd {
    margin: 0;
    color: var(--gtx-text);
}

.gtx-server-card__actions {
    margin-top: auto;
    display: flex;
    gap: var(--gtx-s2);
    flex-wrap: wrap;
}

.gtx-server-card__actions form {
    flex: 1 1 auto;
}

.gtx-server-card__actions .gtx-btn {
    width: 100%;
}

/* --- Grouped panel tab navigation (show + all tab pages) ------------------- */

/*
 * The 13 tabs are grouped (Betrieb · Konfiguration · Inhalt & Wartung) and rendered
 * as WRAPPING PILL groups — never a horizontally scrolling bar. Groups flow onto as
 * many rows as the width needs; within a group the pills wrap too. Each group is a
 * label above its pills, set on a faint surface so the grouping reads at a glance.
 */
.gtx-panel-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--gtx-s3) var(--gtx-s4);
    margin-bottom: var(--gtx-s5);
    padding: var(--gtx-s3);
    background: var(--gtx-surface);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-l);
}

.gtx-panel-nav__group {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gtx-s2);
}

.gtx-panel-nav__label {
    padding: 0 var(--gtx-s1);
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-meta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.gtx-panel-nav__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gtx-s2);
}

/* A pill. Wraps cleanly (no baseline/underline artefacts), so no horizontal scroll. */
.gtx-panel-nav__tab {
    display: inline-flex;
    align-items: center;
    padding: var(--gtx-s2) var(--gtx-s3);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-full);
    background: var(--gtx-surface-2, var(--gtx-chrome));
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-ui);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--gtx-t-fast) var(--gtx-ease),
        background-color var(--gtx-t-fast) var(--gtx-ease),
        border-color var(--gtx-t-fast) var(--gtx-ease);
}

.gtx-panel-nav__tab:hover {
    color: var(--gtx-text);
    background: var(--gtx-surface-hover);
    border-color: var(--gtx-line-strong);
    text-decoration: none;
}

.gtx-panel-nav__tab.is-active {
    color: var(--gtx-on-accent);
    background: var(--gtx-accent-fill);
    border-color: transparent;
}

.gtx-panel-nav__tab.is-active:hover {
    color: var(--gtx-on-accent);
    background: var(--gtx-accent-fill-hover);
}

/* --- Overview dashboard: quick links into the important tabs --------------- */

.gtx-quicklinks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--gtx-s3);
}

.gtx-quicklink {
    display: flex;
    align-items: center;
    gap: var(--gtx-s3);
    padding: var(--gtx-s4);
    background: var(--gtx-surface);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-m);
    color: var(--gtx-text);
    text-decoration: none;
    transition: border-color var(--gtx-t-fast) var(--gtx-ease),
        background-color var(--gtx-t-fast) var(--gtx-ease);
}

.gtx-quicklink:hover {
    text-decoration: none;
    border-color: var(--gtx-line-strong);
    background: var(--gtx-surface-hover);
}

.gtx-quicklink__icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--gtx-accent);
}

.gtx-quicklink__label {
    font-weight: 600;
}

/* --- Panel layout helpers: two-column detail grid + inline control rows ---- */

.gtx-panel-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gtx-s4);
    align-items: start;
}

/* A wrapping row of small inline forms (deck / options control clusters). */
.gtx-control-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gtx-s3);
    align-items: flex-end;
}

/* An access list (whitelist / ops / bans): rows with a name + trailing action. */
.gtx-access-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-m);
    overflow: hidden;
}

.gtx-access-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gtx-s3);
    padding: var(--gtx-s2) var(--gtx-s3);
    min-height: 44px;
    border-bottom: 1px solid var(--gtx-line);
}

.gtx-access-list li:last-child {
    border-bottom: 0;
}

.gtx-access-list__name {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}