:root {
    --far-bg: #0000aa;
    --far-bg-dark: #000055;
    --far-cyan: #00aaaa;
    --far-cyan-light: #55ffff;
    --far-yellow: #ffff55;
    --far-white: #ffffff;
    --far-green: #55ff55;
    --far-red: #ff5555;
    --far-black: #000000;
    --far-gray: #aaaaaa;
    --far-menu: #00aaaa;
    --far-shadow: #000088;
}

html,
body.far-body,
body {
    min-height: 100%;
    color: var(--far-cyan-light);
    background-color: var(--far-bg);
    font-family: "Lucida Console", "Menlo", "Monaco", "Consolas", "Courier New", monospace !important;
    padding-bottom: 40px;
}

a {
    color: var(--far-yellow);
}

a:hover {
    color: var(--far-white);
}

.left-aligned { text-align: left; }
.right-aligned { text-align: right; }
.center-aligned { text-align: center; }

.close-link {
    color: var(--far-yellow) !important;
    position: absolute;
    right: 5px;
    top: 5px;
}

.copylink {
    color: var(--far-yellow) !important;
    background-color: var(--far-bg-dark) !important;
}
.copylink::selection {
    color: var(--far-black) !important;
    background: var(--far-yellow) !important;
}

.break-word {
    overflow-wrap: break-word !important;
}

.borderless.menu {
    border-radius: 0 !important;
}

.navmenu img {
    max-width: 22px;
}

.centered-column {
    max-width: 350px !important;
}

.page-text {
    margin-top: 0.5em;
    font-size: 1.15em;
    line-height: 1.6em;
    color: var(--far-cyan-light);
    overflow-wrap: break-word;
}

.readonly-input {
    background-color: var(--far-bg-dark) !important;
    color: var(--far-gray) !important;
}

p {
    font-size: 1.15em !important;
    color: var(--far-cyan-light);
}

/* Menu — FAR top bar */
.ui.menu,
.ui.inverted.menu,
.borderless.ui.big.inverted.menu {
    background: var(--far-menu) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    min-height: 2.4em;
}

.ui.menu .item,
.ui.inverted.menu .item {
    color: var(--far-black) !important;
    font-weight: bold !important;
    text-transform: uppercase;
}

.ui.menu .item:hover,
.ui.inverted.menu .item:hover {
    background: var(--far-yellow) !important;
    color: var(--far-black) !important;
}

.ui.menu .item.active,
.ui.inverted.menu .item.active {
    background: var(--far-yellow) !important;
    color: var(--far-black) !important;
    font-weight: bold !important;
}

.ui.menu .dropdown.item .menu,
.ui.dropdown .menu {
    background: var(--far-menu) !important;
    border: 2px solid var(--far-cyan-light) !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 var(--far-shadow) !important;
}

.ui.menu .dropdown.item .menu .item,
.ui.dropdown .menu > .item {
    color: var(--far-black) !important;
}

.ui.menu .dropdown.item .menu .item:hover,
.ui.dropdown .menu > .item:hover {
    background: var(--far-yellow) !important;
    color: var(--far-black) !important;
}

/* Panels */
.ui.segment,
.ui.padded.segment,
.ui.centered.segment,
.showcard,
.showcard.card,
.ui.card,
.ui.cards > .card {
    background: var(--far-bg) !important;
    color: var(--far-cyan-light) !important;
    border: 3px double var(--far-cyan-light) !important;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0 var(--far-shadow) !important;
}

.ui.segment > .ui.header,
.ui.dividing.header,
.ui.huge.header,
.ui.large.header,
.ui.small.header,
.ui.card .header,
.block.header {
    color: var(--far-yellow) !important;
    border-bottom-color: var(--far-cyan) !important;
    font-family: inherit !important;
    background: transparent !important;
}

.ui.header .sub.header,
.ui.card .meta,
.ui.card .description,
.ui.list .description {
    color: var(--far-cyan-light) !important;
}

.far-panel {
    background: var(--far-bg);
    border: 3px double var(--far-cyan-light);
    box-shadow: 6px 6px 0 var(--far-shadow);
    margin: 1.4em 0;
    position: relative;
    padding: 1.4em 1.2em 1.1em;
}

.far-panel-title {
    position: absolute;
    top: -0.7em;
    left: 1em;
    background: var(--far-bg);
    color: var(--far-yellow);
    padding: 0 0.6em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.far-status {
    color: var(--far-green);
    text-align: center;
    font-size: 1.35em;
    margin: 0.4em 0 1em;
    text-transform: uppercase;
}

.far-status .far-lamp {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-right: 0.5em;
    background: var(--far-green);
    box-shadow: 0 0 8px var(--far-green);
}

/* Forms / inputs */
.ui.form .field > label,
.ui.form .ui.header {
    color: var(--far-yellow) !important;
}

.ui.form input,
.ui.form textarea,
.ui.form select,
.ui.input input,
.ui.selection.dropdown {
    background: var(--far-bg-dark) !important;
    color: var(--far-yellow) !important;
    border: 1px solid var(--far-cyan) !important;
    border-radius: 0 !important;
    font-family: inherit !important;
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.input input:focus {
    border-color: var(--far-yellow) !important;
    background: var(--far-black) !important;
    color: var(--far-yellow) !important;
}

.ui.selection.dropdown .menu {
    background: var(--far-bg-dark) !important;
    border: 1px solid var(--far-cyan) !important;
    border-radius: 0 !important;
}

.ui.selection.dropdown .menu > .item {
    color: var(--far-cyan-light) !important;
    border-top: 1px solid var(--far-cyan) !important;
}

.ui.selection.dropdown .menu > .item:hover,
.ui.dropdown .menu .selected.item,
.ui.selection.dropdown .menu > .item.active {
    background: var(--far-cyan) !important;
    color: var(--far-black) !important;
}

.ui.dropdown .default.text,
.ui.dropdown .text {
    color: var(--far-yellow) !important;
}

/* Buttons */
.ui.button,
.ui.green.button,
.ui.blue.button,
.ui.basic.button,
.ui.huge.button,
.ui.large.button,
.ui.red.button {
    background: var(--far-cyan) !important;
    color: var(--far-black) !important;
    border: 1px solid var(--far-cyan-light) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ui.button:hover,
.ui.green.button:hover,
.ui.blue.button:hover,
.ui.basic.button:hover {
    background: var(--far-yellow) !important;
    color: var(--far-black) !important;
}

.ui.red.button,
.ui.red.button:hover {
    background: var(--far-red) !important;
    color: var(--far-yellow) !important;
    border-color: var(--far-yellow) !important;
}

.ui.basic.button {
    background: var(--far-bg-dark) !important;
    color: var(--far-cyan-light) !important;
}

.ui.basic.button:hover {
    background: var(--far-yellow) !important;
    color: var(--far-black) !important;
}

/* Messages */
.ui.info.message,
.ui.positive.message,
.ui.message {
    background: var(--far-bg) !important;
    color: var(--far-cyan-light) !important;
    border: 2px solid var(--far-yellow) !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 var(--far-shadow) !important;
}

.ui.negative.message {
    background: #aa0000 !important;
    color: var(--far-yellow) !important;
    border: 2px solid var(--far-yellow) !important;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 var(--far-shadow) !important;
}

.ui.message .header {
    color: var(--far-yellow) !important;
}

.ui.message code {
    color: var(--far-yellow) !important;
    background: var(--far-bg-dark) !important;
    border: 1px solid var(--far-cyan) !important;
    padding: 0.1em 0.35em;
    font-family: inherit !important;
}

.far-setting-checkbox .ui.checkbox label,
.far-setting-checkbox .ui.checkbox .box {
    color: var(--far-cyan-light) !important;
    font-size: 1.05em !important;
    line-height: 1.5 !important;
    font-weight: normal !important;
}

.far-setting-checkbox .ui.checkbox label:hover,
.far-setting-checkbox .ui.checkbox input:focus ~ label,
.far-setting-checkbox .ui.checkbox input:active ~ label,
.far-setting-checkbox .ui.checkbox input:checked ~ label {
    color: var(--far-cyan-light) !important;
}

.far-setting-checkbox .ui.checkbox label:before,
.far-setting-checkbox .ui.checkbox .box:before {
    background: var(--far-bg-dark) !important;
    border-color: var(--far-cyan) !important;
}

.far-setting-checkbox .ui.checkbox input:checked ~ label:before,
.far-setting-checkbox .ui.checkbox input:checked ~ .box:before {
    background: var(--far-yellow) !important;
    border-color: var(--far-yellow) !important;
}

.far-setting-checkbox .ui.checkbox input:checked ~ label:after,
.far-setting-checkbox .ui.checkbox input:checked ~ .box:after {
    color: var(--far-black) !important;
}

.ui.divider,
.ui.dividing.header {
    border-color: var(--far-cyan) !important;
}

.ui.list .item,
.ui.list .header {
    color: var(--far-cyan-light) !important;
}

.site-footer {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.site-footer .item,
.site-footer a.item {
    color: var(--far-gray) !important;
}

.site-footer a.item:hover {
    color: var(--far-yellow) !important;
}

i.icon {
    color: var(--far-yellow) !important;
}

.ui.grey.header,
.ui.header.grey {
    color: var(--far-gray) !important;
}

.ui.card .extra.content,
.ui.cards > .card > .extra {
    border-top: 1px solid var(--far-cyan) !important;
    color: var(--far-cyan-light) !important;
}

.ui.corner.label {
    background-color: var(--far-red) !important;
    border-color: var(--far-red) !important;
}

.ui.corner.label .icon {
    color: var(--far-yellow) !important;
}

.ui.horizontal.list .item,
.ui.horizontal.divided.list .item {
    color: var(--far-cyan) !important;
}

.ui.bottom.attached.label {
    background: var(--far-cyan) !important;
    color: var(--far-black) !important;
    border-radius: 0 !important;
}

/* Client list — awg-easy style, FAR colors */
.client-list {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

.client-row {
    display: flex;
    align-items: stretch;
    gap: 0.9em;
    padding: 0.85em 0.9em;
    background: var(--far-bg-dark);
    border: 1px solid var(--far-cyan);
    color: var(--far-cyan-light);
}

.client-row.is-active {
    border-color: var(--far-green);
    box-shadow: inset 3px 0 0 var(--far-green);
}

.client-row.is-offline {
    opacity: 0.92;
}

.client-avatar {
    flex: 0 0 auto;
    width: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0.15em;
}

.client-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--far-gray);
    box-shadow: 0 0 0 2px var(--far-black);
    margin-bottom: 0.45em;
}

.client-row.is-active .client-dot {
    background: var(--far-green);
    box-shadow: 0 0 8px var(--far-green);
}

.client-avatar i.icon {
    font-size: 1.8em !important;
    margin: 0 !important;
    color: var(--far-cyan-light) !important;
}

.client-main {
    flex: 1 1 auto;
    min-width: 0;
}

.client-name {
    color: var(--far-white);
    font-size: 1.25em;
    font-weight: bold;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

.client-meta {
    margin-top: 0.2em;
    color: var(--far-cyan);
    font-size: 0.95em;
}

.client-stats {
    margin-top: 0.45em;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    font-size: 0.95em;
    font-variant-numeric: tabular-nums;
}

.client-stats-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.4em;
    align-items: baseline;
}

.client-list[data-traffic-stats="0"] .client-stats-traffic {
    display: none;
}

.client-stat {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    min-width: 0;
}

.client-stat .label {
    color: var(--far-gray);
    margin-right: 0.55em;
    flex: 0 0 auto;
    width: 9ch;
}

.client-stat-status .label,
.client-stat-endpoint .label {
    width: 8ch;
}

.client-stat .value {
    color: var(--far-yellow);
    font-family: "Lucida Console", "Menlo", "Monaco", "Consolas", "Courier New", monospace;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-stat-status .value {
    width: 7ch;
    min-width: 7ch;
}

.client-stat-endpoint .value {
    width: 28ch;
    min-width: 28ch;
}

.client-stat-rate .value,
.client-stat-total .value {
    width: 12ch;
    min-width: 12ch;
    text-align: right;
}

.client-stat .value.up {
    color: var(--far-green);
}

.client-stat .value.down {
    color: var(--far-cyan-light);
}

.client-status-text {
    font-weight: bold;
    letter-spacing: 0.06em;
}

.client-row.is-active .client-status-text {
    color: var(--far-green);
}

.client-row.is-offline .client-status-text {
    color: var(--far-gray);
}

.client-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    flex: 0 0 auto;
    min-width: 132px;
}

.client-actions .ui.button {
    margin: 0 !important;
    padding: 0.55em 0.7em !important;
    font-size: 0.85em !important;
}

.client-empty {
    text-align: center;
    color: var(--far-gray);
    padding: 1.5em 0.5em;
    text-transform: uppercase;
}

@media (max-width: 700px) {
    .client-row {
        flex-wrap: wrap;
    }
    .client-actions {
        width: 100%;
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .client-actions .ui.button {
        flex: 1 1 45%;
    }
    .client-stats-row {
        flex-wrap: wrap;
        gap: 0.25em 1em;
    }
    .client-stat-endpoint .value {
        width: min(28ch, 55vw);
        min-width: 16ch;
    }
}

/* QR modal */
.far-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 85, 0.82);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1em;
}

.far-modal.is-open {
    display: flex;
}

.far-modal-panel {
    background: var(--far-bg);
    border: 3px double var(--far-yellow);
    box-shadow: 8px 8px 0 var(--far-shadow);
    padding: 1.2em 1.4em 1em;
    max-width: 420px;
    width: 100%;
    text-align: center;
}

.far-modal-title {
    color: var(--far-yellow);
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 0.8em;
}

.far-modal-panel img {
    image-rendering: pixelated;
    background: #fff;
    padding: 10px;
    max-width: 100%;
}