@font-face {
    font-family: 'TeleNeoWeb-Regular';
    src: url("/assets/fonts/Web 1.8/TeleNeoWeb-Regular.woff2") format('woff2'),
         url("/assets/fonts/Web 1.8/TeleNeoWeb-Regular.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TeleNeoWeb-Regular';
    src: url("/assets/fonts/Web 1.8/TeleNeoWeb-Bold.woff2") format('woff2'),
         url("/assets/fonts/Web 1.8/TeleNeoWeb-Bold.woff") format('woff');
    font-weight: bold;
    font-style: normal;
}

body {
    background-image: url("/assets/visuals/final_DT_IoT_tower_satelit_windmill_v3_blank.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    margin: 0;
    font-family: 'TeleNeoWeb-Regular';
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    max-width: 90%;
    height: 90vh;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}



header, footer {
    width: 100%;
}

header {
    text-align: center;
}

.console-window {
    background-color: #1e1e1e;
    color: white;
    font-family: 'TeleNeoWeb-Regular', Arial, sans-serif;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    overflow-y: auto;
    flex-grow: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; 
}



th, td {
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 10px;
    border: 1px solid #555;
    text-align: left;
}

tr:nth-child(odd) td {
    background-color: rgba(50, 50, 50, 0.5);
}

tr:nth-child(even) td {
    background-color: rgba(30, 30, 30, 0.5);
}

th {
    background-color: #333;
    font-weight: bold;
    color: white;
}

/* Utility class: must win over component display rules (e.g. .tab-container, .refresh-icon-button) */
.hidden {
    display: none !important;
}
.tab-button {
    background-color: #1e1e1e;;
    color: white;
    border: 1px solid #555;
    padding: 10px 20px;
    cursor: pointer;
    display: inline-block;
    border-radius: 8px 8px 0 0;
}
.tab-button.active {
    background-color: #444;
    border-bottom: 1px solid #444;
    font-weight: bold;
}
.tab-container {
    width: 100%;
    display: flex;
    margin-bottom: -1px;
    justify-content: space-between;
}


/* Gemeinsame Basis für die Export-Buttons */
.export-button {
    background-color: #444;
    color: white;
    border: 1px solid #555;
    padding: 8px 20px;
    cursor: pointer;
    border-radius: 10px; /* Runde Form */
    font-family: 'TeleNeoWeb-Regular'; /* Gleiche Schriftart wie die Suchleiste */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    margin-bottom: 10px;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

/* Stil für die export-button im aktiven Zustand (falls erforderlich) */
.export-button.active {
    background-color: #333;
    font-weight: bold;
}


.search-field {
    display: flex;
    justify-content: flex-end;
    background-color: #444;
    color: white;
    border: 1px solid #555;
    padding: 8px;
    border-radius: 8px;
    outline: none;
    font-family: 'TeleNeoWeb-Regular';
    margin-left: 10px;
    margin-bottom: 10px;
    width: 150px;
    
}

.tab-rechts {

    display: flex;

}

.tab-links {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

/* Circular refresh icon button */
.refresh-icon-button {
    background-color: #444;
    color: white;
    border: 1px solid #555;
    padding: 6px;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: all 0.3s ease;
    margin-left: 10px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.refresh-icon-button:hover {
    background-color: #555;
    transform: rotate(180deg);
    border-color: #666;
}

.refresh-icon-button:active {
    background-color: #333;
    transform: rotate(360deg);
}

.refresh-icon-button svg {
    display: block;
}

/* Fixed width so the layout does not jump when a table is empty */
.container {
    width: 90%;
    box-sizing: border-box;
}

/* ---------- Site header ---------- */

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 90%;
    text-align: left;
    margin-bottom: 16px;
}

.site-title h1 {
    margin: 0;
    font-size: 1.9em;
}

.site-title h1 a {
    color: white;
    text-decoration: none;
}

.site-subtitle {
    margin: 4px 0 0;
    color: #c8c8c8;
}

/* Right column of the header: notice above the buttons */
.site-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* Shown on every public page: test environment, everything is public */
.site-notice {
    margin: 0;
    color: #E20074;
    font-weight: bold;
    text-align: right;
}

.net-empty-notice {
    max-width: 560px;
    margin: 18px auto 0;
    color: #ffb4d9;
    font-size: 0.9em;
}

.site-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.site-nav .export-button,
.site-nav .search-field {
    margin: 0;
}

.site-nav .search-field {
    width: 180px;
}

.export-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.export-button:focus-visible,
.tab-button:focus-visible,
/* ---------- Tabs and toolbar ---------- */

.tab-links {
    align-items: flex-end;
    flex-wrap: wrap;
}

.tab-group-label {
    color: #aaa;
    margin: 0 4px 10px 18px;
    font-size: 0.9em;
}

.tab-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tab-tools .refresh-icon-button {
    margin-bottom: 10px;
}

/* ---------- Live traffic ---------- */

.net-empty {
    text-align: center;
    padding: 50px 20px;
    color: #d0d0d0;
    line-height: 1.6;
}

.net-empty-title {
    font-size: 1.3em;
    font-weight: bold;
    color: white;
}

.net-empty code,
.docs code {
    background-color: #111;
    border-radius: 4px;
    padding: 1px 5px;
    font-family: monospace;
}

.net-table th {
    position: sticky;
    top: -20px;
    z-index: 1;
    cursor: help;
}

.net-info {
    color: #999;
    font-weight: normal;
}

.net-table td {
    vertical-align: top;
}

.net-row {
    cursor: pointer;
}

.net-row:hover td {
    background-color: rgba(226, 0, 116, 0.18);
}

.net-row.net-new td {
    animation: net-flash 3s ease-out;
}

@keyframes net-flash {
    from { background-color: rgba(226, 0, 116, 0.45); }
}

.net-main {
    overflow-wrap: anywhere;
}

.net-sub {
    color: #a8a8a8;
    font-size: 0.85em;
    margin-top: 2px;
}

.net-message {
    width: 40%;
}

.net-content {
    font-family: monospace;
}

.net-bar {
    height: 4px;
    background-color: #444;
    border-radius: 2px;
    margin-top: 5px;
    max-width: 140px;
}

.net-bar span {
    display: block;
    height: 100%;
    background-color: #E20074;
    border-radius: 2px;
}

.net-badge {
    display: inline-block;
    background-color: #E20074;
    color: white;
    border-radius: 4px;
    padding: 1px 6px;
    margin-right: 6px;
    font-size: 0.85em;
    font-family: 'TeleNeoWeb-Regular', Arial, sans-serif;
}

.net-badge-warn {
    background-color: #8a5a00;
}

.net-warning {
    color: #ffb4d9;
}

/* ---------- Detail view ---------- */

.net-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.net-overlay.hidden {
    display: none;
}

.net-dialog {
    background-color: #1e1e1e;
    border: 1px solid #555;
    border-radius: 10px;
    width: min(1100px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    padding: 16px 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
}

.net-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.net-dialog-header h2 {
    margin: 0;
    overflow-wrap: anywhere;
}

.net-dialog h3 {
    margin: 0 0 8px;
    color: #E20074;
    font-size: 1em;
}

.net-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.net-card {
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 12px 14px;
}

.net-card dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    margin: 0;
}

.net-card dt {
    color: #aaa;
}

.net-card dt[title] {
    cursor: help;
    text-decoration: underline dotted #777;
}

.net-card dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.net-payload {
    margin-top: 16px;
}

.net-payload-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.net-toggle {
    display: flex;
}

.net-toggle .export-button {
    margin: 0 0 0 6px;
    padding: 4px 12px;
}

.net-pre {
    background-color: #111;
    border-radius: 6px;
    padding: 8px 10px;
    margin: 6px 0 0;
    max-height: 260px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    font-family: monospace;
}

.net-pre.net-hex {
    white-space: pre;
    word-break: normal;
}

.net-packets-box {
    margin-top: 16px;
}

.net-packets-box summary {
    cursor: pointer;
    color: #E20074;
    font-weight: bold;
    margin-bottom: 8px;
}

.net-packets td,
.net-packets th {
    padding: 4px 8px;
    font-family: monospace;
}

/* ---------- Docs ---------- */

.docs {
    line-height: 1.6;
}

.docs > * {
    max-width: 1000px;
}

.docs h2 {
    color: #E20074;
    margin-top: 28px;
}

.docs a {
    color: #ff7ac0;
}

.docs .export-button,
.docs .export-button:visited {
    color: white;
}

.docs pre {
    background-color: #111;
    border-radius: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    font-family: monospace;
}

.docs-back {
    margin-top: 0;
}

.docs-table-wrap {
    overflow-x: auto;
}

.docs-glossary dt {
    font-weight: bold;
    margin-top: 10px;
}

.docs-glossary dd {
    margin-left: 0;
    color: #d8d8d8;
}

/* ---------- Docs: admin-only section ---------- */

.docs h3 {
    margin-top: 22px;
}

.docs-admin {
    margin-top: 36px;
    padding: 4px 20px 16px;
    border-left: 4px solid #E20074;
    background-color: rgba(226, 0, 116, 0.06);
    border-radius: 0 8px 8px 0;
}

.docs-admin-label {
    display: inline-block;
    margin: 12px 0 0;
    padding: 2px 8px;
    border-radius: 4px;
    background-color: #E20074;
    color: white;
    font-size: 0.85em;
}

.docs-admin pre {
    white-space: pre-wrap;
    word-break: break-all;
}

.docs-table-compact {
    width: auto;
    min-width: 260px;
}

/* ---------- Traffic history (admins) ---------- */

.hist-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 12px 0 6px;
    color: #c8c8c8;
}

.hist-filters input,
.hist-filters select {
    background-color: #444;
    color: white;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 5px 8px;
    margin-left: 6px;
    font-family: inherit;
    color-scheme: dark;
}

.hist-hint {
    color: #999;
    font-size: 0.85em;
}

.hist-status {
    color: #c8c8c8;
    margin: 6px 0 10px;
}

.hist-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    color: #c8c8c8;
}

.hist-pager .export-button {
    margin: 0;
}


/* ---------- Small screens ---------- */

@media (max-width: 768px) {
    body {
        height: auto;
        padding: 0;
        align-items: flex-start;
    }

    .container {
        max-width: 100%;
        width: 100%;
        height: auto;
        min-height: 100vh;
        border-radius: 0;
        padding: 16px;
        box-sizing: border-box;
    }

    .site-header,
    .console-window {
        width: 100%;
        box-sizing: border-box;
    }

    .console-window {
        padding: 12px;
    }

    .site-title h1 {
        font-size: 1.5em;
    }

    .site-nav .search-field {
        width: 100%;
        flex: 1 1 100%;
    }

    .tab-container {
        flex-direction: column;
        align-items: stretch;
    }

    .tab-tools {
        justify-content: flex-start;
    }

    /* Live traffic rows become cards */
    .net-table thead {
        display: none;
    }

    .net-table,
    .net-table tbody,
    .net-table tr,
    .net-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .net-table tr {
        border: 1px solid #555;
        border-radius: 8px;
        margin-bottom: 10px;
        overflow: hidden;
    }

    .net-table tr[hidden] {
        display: none;
    }

    .net-table td {
        border: none;
        padding: 6px 12px;
    }

    .net-table td::before {
        content: attr(data-label);
        display: block;
        color: #999;
        font-size: 0.8em;
    }

    .net-message {
        width: 100%;
    }

}

/* ---------- Footer ---------- */

.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin-top: 12px;
    color: #c8c8c8;
    font-size: 0.9em;
}

/* Deliberately unobtrusive: only a few admins log in */
.footer-link,
.footer-link:visited {
    color: #8a8a8a;
    text-decoration: none;
}

.footer-link:hover {
    color: #c8c8c8;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .site-footer {
        width: 100%;
    }
}

/* ---------- Keys ---------- */

.keys-forms {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}

.keys-card {
    flex: 1 1 320px;
    max-width: 480px;
    padding: 4px 18px 14px;
    background-color: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
}

.keys-card label {
    display: block;
    margin: 10px 0;
    color: #c8c8c8;
}

.keys-card input,
.keys-card select,
.keys-inline-form input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    background-color: #444;
    color: white;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 6px 8px;
    font-family: inherit;
    color-scheme: dark;
}

.keys-card .export-button,
.keys-inline-form .export-button,
.keys-inline-button {
    margin-left: 0;
}

.keys-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.keys-inline-form input {
    display: inline-block;
    width: auto;
    min-width: 240px;
    margin: 0 0 10px;
}

.keys-error,
.keys-ok,
.keys-notice {
    padding: 8px 12px;
    border-radius: 6px;
}

.keys-error {
    background-color: rgba(220, 60, 60, 0.18);
    border-left: 4px solid #dc3c3c;
}

.keys-ok,
.keys-notice {
    background-color: rgba(226, 0, 116, 0.08);
    border-left: 4px solid #E20074;
}

.keys-admin-note {
    color: #ff7ac0;
}

.keys-details th {
    text-align: left;
    padding-right: 18px;
    white-space: nowrap;
}

.keys-secret {
    margin-right: 10px;
    word-break: break-all;
}

.keys-table td,
.keys-history td {
    white-space: nowrap;
}

.keys-table .export-button {
    margin: 0;
    padding: 4px 12px;
}

/* ---------- Live rows, DTLS/TLS security section ---------- */

.net-badge-live {
    background-color: transparent;
    border: 1px solid #E20074;
    color: #ff7ac0;
    margin-left: 8px;
    margin-right: 0;
    font-size: 0.75em;
    letter-spacing: 0.05em;
}

/* Full width below the cards: long cipher suite names have room */
.net-security {
    margin-top: 16px;
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 12px 14px;
}

.net-security h3 {
    margin: 0 0 8px;
    color: #E20074;
}

.net-security h4 {
    margin: 12px 0 6px;
    color: #aaa;
    font-weight: normal;
}

.net-security dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 0;
}

.net-security dt {
    color: #aaa;
}

.net-security dt[title] {
    cursor: help;
    text-decoration: underline dotted #777;
}

.net-security dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.net-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.net-chips li {
    font-family: monospace;
    font-size: 0.85em;
    padding: 2px 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #1e1e1e;
    color: #d8d8d8;
}

.net-chips li.net-chip-chosen {
    border-color: #E20074;
    color: white;
}

/* Fixed columns: long message text (also without spaces) wraps inside its cell */
.net-messages {
    table-layout: fixed;
    width: 100%;
}

.net-messages col.net-col-time {
    width: 90px;
}

.net-messages col.net-col-size {
    width: 150px;
}

/* LwM2M messages: direction column */
.net-messages col.net-col-dir {
    width: 9.5rem;
}

.net-lwm2m .net-sub {
    margin: 2px 0 0;
}

.net-messages td {
    vertical-align: top;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.net-messages .net-message-coap {
    color: #ff7ac0;
    margin-bottom: 2px;
}

@media (max-width: 768px) {
    .net-security dl {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .site-header-right {
        align-items: flex-start;
    }

    .site-notice {
        text-align: left;
    }
}

/* ---------- LwM2M area ---------- */

.lwm2m-status {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    border: 1px solid #666;
    color: #c8c8c8;
    font-size: 0.8em;
    vertical-align: middle;
}

.lwm2m-status:empty {
    display: none;
}

.lwm2m-online {
    border-color: #E20074;
    background-color: #E20074;
    color: white;
}

.lwm2m-sleeping {
    border-color: #E20074;
    color: #ff7ac0;
}

.lwm2m-divider td {
    color: #999;
    font-size: 0.85em;
    background-color: transparent !important;
}

.lwm2m-page > * {
    max-width: 1200px;
}

.lwm2m-facts {
    width: auto;
    min-width: 320px;
}

.lwm2m-facts th {
    white-space: nowrap;
    padding-right: 18px;
}

.lwm2m-tabs {
    margin-top: 20px;
    border-bottom: 1px solid #555;
}

.lwm2m-tab {
    padding-top: 12px;
}

.lwm2m-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-bottom: 12px;
    color: #c8c8c8;
}

.lwm2m-toolbar select,
.lwm2m-input {
    background-color: #444;
    color: white;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 4px 6px;
    font-family: inherit;
    color-scheme: dark;
}

.lwm2m-toolbar select {
    margin-left: 6px;
}

.lwm2m-input {
    width: 9rem;
    margin-right: 4px;
}

.lwm2m-object {
    margin: 8px 0;
    padding: 6px 12px;
    background-color: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
}

.lwm2m-object summary {
    cursor: pointer;
    padding: 4px 0;
}

.lwm2m-object-ops {
    margin: 8px 0 0;
}

.lwm2m-instance h4 {
    margin: 12px 0 6px;
}

.docs .lwm2m-op {
    margin: 2px 4px 2px 0;
    padding: 3px 10px;
    font-size: 0.85em;
}

.lwm2m-op.lwm2m-observed {
    border-color: #E20074;
    color: #ff7ac0;
}

.lwm2m-resources td {
    padding: 6px 8px;
    vertical-align: top;
}

.lwm2m-actions {
    white-space: nowrap;
}

.lwm2m-value-cell {
    min-width: 8rem;
    word-break: break-word;
}

.lwm2m-flash .lwm2m-value {
    animation: lwm2m-flash 1.2s ease-out;
}

@keyframes lwm2m-flash {
    from { color: #ff7ac0; }
    to { color: white; }
}

.lwm2m-history {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    color: #999;
    font-size: 0.8em;
}

.lwm2m-log {
    max-height: 320px;
    overflow-y: auto;
    padding-left: 0;
    list-style: none;
    font-size: 0.9em;
}

.lwm2m-log li {
    padding: 4px 8px;
    border-left: 3px solid #555;
    margin-bottom: 4px;
    word-break: break-word;
}

.lwm2m-log .lwm2m-log-ok {
    border-left-color: #E20074;
}

.lwm2m-log .lwm2m-log-error {
    border-left-color: #dc3c3c;
}

.lwm2m-log .lwm2m-log-notify {
    border-left-color: #ff7ac0;
}

.lwm2m-links {
    white-space: pre-wrap;
    word-break: break-all;
}

.lwm2m-exchange {
    margin: 8px 0;
}

.lwm2m-exchange summary {
    cursor: pointer;
}

.lwm2m-messages td {
    padding: 6px 8px;
}

.lwm2m-payload {
    font-family: monospace;
    word-break: break-all;
}

@media (max-width: 768px) {
    .lwm2m-actions {
        white-space: normal;
    }
}

/* LwM2M payloads decoded into paths and values (live traffic) */
.net-lwm2m-payload {
    font-family: monospace;
    word-break: break-word;
}

.net-lwm2m-value + .net-lwm2m-value {
    margin-top: 2px;
}

.net-lwm2m-path {
    color: #ff7ac0;
}

/* Live traffic: time and sender address stay on one line ("21:05:10", "80.187.67.193") */
.net-table td[data-label="Time"] .net-main,
.net-table td[data-label="Sender"] .net-main {
    white-space: nowrap;
}

/* LwM2M device page on phones: every resource as a card (name, value, then the buttons) instead of a wide table */
@media (max-width: 768px) {
    .lwm2m-resources thead {
        display: none;
    }

    .lwm2m-resources,
    .lwm2m-resources tbody,
    .lwm2m-resources tr,
    .lwm2m-resources td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .lwm2m-resources tr {
        border-bottom: 1px solid #555;
        padding: 6px 0;
    }

    .lwm2m-resources td {
        border: none;
        padding: 2px 8px;
    }

    /* ID and unit inline with their neighbours */
    .lwm2m-resources td:first-child {
        display: inline-block;
        width: auto;
        color: #999;
    }

    .lwm2m-resources td:first-child + td {
        display: inline-block;
        width: auto;
    }

    .lwm2m-value-cell {
        font-weight: bold;
    }

    .lwm2m-actions .lwm2m-input {
        width: 7rem;
    }
}

.lwm2m-nowrap {
    white-space: nowrap;
}

/* LwM2M start page: back link on the left, Bootstrap button in the top-right corner */
.lwm2m-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.lwm2m-topbar .export-button {
    margin: 0;
}

.docs > .lwm2m-topbar {
    max-width: none;
}

/* Firmware images in object 5 (admins) */
.lwm2m-fota {
    margin: 12px 0;
    padding: 8px 12px;
    border-left: 3px solid #E20074;
    background-color: rgba(226, 0, 116, 0.06);
}

.lwm2m-fota h4 {
    margin: 4px 0;
}

.lwm2m-topbar-buttons {
    display: flex;
    gap: 10px;
}

/* ---------- FOTA page ---------- */

.fota-page > * {
    max-width: 1200px;
}

.fota-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.fota-head .export-button,
.fota-upload-button {
    margin: 0;
}

.fota-drop {
    margin: 10px 0;
    padding: 14px;
    border: 2px dashed #555;
    border-radius: 8px;
    color: #999;
    text-align: center;
}

.fota-drop-active {
    border-color: #E20074;
    color: #ff7ac0;
    background-color: rgba(226, 0, 116, 0.06);
}

.fota-table td {
    vertical-align: middle;
}

.fota-version {
    font-family: monospace;
    font-weight: bold;
}

.fota-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 10px 0;
    padding: 10px 14px;
    border: 1px solid #3a3a3a;
    border-radius: 8px;
    background-color: #2a2a2a;
    color: #c8c8c8;
}

.fota-toolbar-active {
    border-color: #E20074;
}

.fota-toolbar select {
    margin-left: 6px;
    background-color: #444;
    color: white;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 4px 6px;
    font-family: inherit;
}

.fota-toolbar .export-button {
    margin: 0;
}

.fota-check {
    white-space: nowrap;
}

.fota-selected td {
    background-color: rgba(226, 0, 116, 0.10) !important;
}

.fota-bar {
    width: 140px;
    height: 8px;
    border-radius: 4px;
    background-color: #444;
    overflow: hidden;
}

.fota-bar-fill {
    height: 100%;
    background-color: #E20074;
    transition: width 0.6s ease;
}

.fota-bar-fill.complete {
    background-color: #5fb85f;
}

.fota-steps {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fota-step {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #777;
}

.fota-step.done {
    background-color: #5fb85f;
    border-color: #5fb85f;
}

.fota-step.current {
    background-color: #E20074;
    border-color: #E20074;
    animation: fota-pulse 1.4s ease-in-out infinite;
}

.fota-step-name {
    margin-left: 6px;
    white-space: nowrap;
}

/* Ready to install: the row and the button stand out until the installation is started */
.fota-row-ready td {
    background-color: rgba(226, 0, 116, 0.12) !important;
}

.docs .fota-install {
    margin: 0;
    background-color: #E20074;
    border-color: #E20074;
    font-weight: bold;
    animation: fota-pulse 1.4s ease-in-out infinite;
}

.fota-ready {
    color: #ff7ac0;
    font-weight: bold;
}

@keyframes fota-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(226, 0, 116, 0.6); }
    50% { box-shadow: 0 0 0 6px rgba(226, 0, 116, 0); }
}

.fota-ok {
    color: #5fb85f;
    font-weight: bold;
}

.fota-bad {
    color: #ff6b6b;
}

.fota-actions {
    white-space: nowrap;
}

.fota-actions .export-button {
    margin: 0 0 0 8px;
}

/* ---------- Docs: menu of topics, one topic per page ---------- */

.docs.docs-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.docs.docs-layout > * {
    max-width: none;
}

.docs-menu {
    position: sticky;
    top: 0;
}

.docs-menu summary {
    display: none;
}

.docs-menu nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.docs-menu-group {
    margin: 18px 0 4px;
    color: #999;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.docs-menu-group:first-of-type {
    margin-top: 4px;
}

.docs .docs-menu a {
    color: #ddd;
    text-decoration: none;
    padding: 5px 10px;
    border-left: 3px solid transparent;
    border-radius: 0 6px 6px 0;
    line-height: 1.35;
}

.docs .docs-menu a:hover {
    background-color: #2c2c2c;
    color: white;
}

.docs .docs-menu a.active {
    border-left-color: #E20074;
    background-color: rgba(226, 0, 116, 0.12);
    color: white;
    font-weight: bold;
}

.docs-topic {
    max-width: 1000px;
    min-width: 0;
}

.docs-topic > section > h2:first-child {
    margin-top: 4px;
}

.docs-topic > .docs-admin {
    margin-top: 0;
}

.docs-pager {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 36px;
    padding-top: 16px;
    border-top: 1px solid #333;
}

.docs .docs-pager a {
    text-decoration: none;
}

.docs .docs-pager a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .docs.docs-layout {
        display: block;
    }

    .docs-menu {
        position: static;
        margin-bottom: 16px;
        border: 1px solid #3a3a3a;
        border-radius: 8px;
        background-color: #262626;
    }

    .docs-menu summary {
        display: flex;
        justify-content: space-between;
        padding: 10px 12px;
        cursor: pointer;
        font-weight: bold;
        list-style: none;
    }

    .docs-menu summary::-webkit-details-marker {
        display: none;
    }

    .docs-menu summary::after {
        content: '▾';
        color: #E20074;
    }

    .docs-menu[open] summary::after {
        content: '▴';
    }

    .docs-menu nav {
        padding: 0 6px 10px;
    }

    .docs-menu-group:first-of-type {
        margin-top: 0;
    }

    .docs-pager {
        flex-direction: column;
    }

    .docs-pager-next {
        align-self: flex-end;
    }
}

/* FOTA tables: versions, badges and file names stay on one line; less important columns are hidden on a phone */
.fota-table .fota-version,
.fota-table .lwm2m-status,
.fota-table code {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .fota-table .fota-opt {
        display: none;
    }
}

/* Phone: the header buttons (Live view, Docs, Keys, LwM2M) fit in one row */
@media (max-width: 768px) {
    .site-nav {
        gap: 8px;
    }

    .site-nav .export-button {
        padding: 7px 12px;
    }
}

/* ---------- Embedded view (?embed=1, IoT Stack tool page) ---------- */
/* Only the live view: no background picture, no outer frame, no title, notice or footer;
   the console fills the frame */

html.embed,
html.embed body {
    overflow: hidden;   /* the frame shows no scroll bars of its own */
}

html.embed body {
    background: #141414;
    margin: 0;
    padding: 0;
    height: 100vh;
}

/* the console still scrolls with the wheel or by touch, without a visible bar */
html.embed .console-window,
html.embed .console-window * {
    scrollbar-width: none;
}
html.embed .console-window::-webkit-scrollbar,
html.embed .console-window *::-webkit-scrollbar {
    display: none;
}

html.embed .container {
    box-sizing: border-box;   /* the padding stays inside the frame, no overflow */
    width: 100%;
    max-width: none;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    padding: 12px 14px;
}

html.embed .site-title,
html.embed .site-notice,
html.embed .site-footer {
    display: none;
}

html.embed .site-header {
    width: 100%;
    margin-bottom: 12px;
    justify-content: flex-end;
}

html.embed .console-window {
    width: 100%;
    box-shadow: none;
}