/* ArgusControl additions to Tabler. */
.argus-search { max-width: 40rem; }

/* Theme toggle shows the action that is available. */
[data-bs-theme="dark"] .theme-icon-dark,
[data-bs-theme="dark"] .theme-label-dark,
[data-bs-theme="light"] .theme-icon-light,
[data-bs-theme="light"] .theme-label-light { display: none; }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }

.table td { white-space: nowrap; }
.table td.argus-wrap { white-space: normal; min-width: 16rem; }

/* Journal details (lists of domains, job output). */
.argus-details { max-height: 16rem; overflow: auto; white-space: pre-wrap; font-size: .75rem; }

/* Logo: mark (assets/img/argus-mark.svg) and lettering in Orbitron (SIL OFL 1.1, vendor/orbitron). */
@font-face { font-family: "Orbitron"; font-weight: 500; font-display: swap; src: url("../vendor/orbitron/orbitron-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 900; font-display: swap; src: url("../vendor/orbitron/orbitron-latin-900-normal.woff2") format("woff2"); }
.argus-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; line-height: 1; }
.argus-logo-mark { width: 3rem; height: 3rem; filter: drop-shadow(0 0 .4rem rgba(34, 211, 238, .5)); }
.argus-logo-text { display: inline-flex; align-items: baseline; gap: .35rem; font-family: "Orbitron", var(--tblr-font-sans-serif); text-transform: uppercase; white-space: nowrap; }
.argus-logo-argus {
    font-weight: 900; font-size: 1.45rem; letter-spacing: .08em;
    background: linear-gradient(90deg, #22d3ee, #6366f1); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.argus-logo-control { font-weight: 500; font-size: .9rem; letter-spacing: .3em; color: var(--tblr-secondary); }
a:hover > .argus-logo .argus-logo-mark { filter: drop-shadow(0 0 .55rem rgba(34, 211, 238, .8)); }

/* Main menu below the header: always expanded; scrolls sideways instead of collapsing on narrow screens. */
.argus-menu { min-height: auto; border-top: 1px solid var(--tblr-border-color); }
/* Narrow screens scroll the menu sideways; wide ones need no overflow, so the dropdowns are not cut off. */
@media (max-width: 1199.98px) { .argus-menu .navbar-nav { overflow-x: auto; scrollbar-width: none; } }
.argus-menu .nav-link { white-space: nowrap; }
.argus-menu .nav-item.active .nav-link { color: var(--tblr-primary); }
@media (max-width: 575.98px) {
    .argus-logo-text { display: none; }
    .argus-search { margin-right: .5rem !important; }
}
/* Lists of active approvals scroll instead of growing the page. */
.argus-scroll-list { max-height: 20rem; overflow-y: auto; }

.argus-pick { max-height: 14rem; overflow-y: auto; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); padding: .5rem .75rem; margin: 0; }
fieldset[data-argus-scripts]:disabled { opacity: .55; }

/* Rows that open a detail page. */
tr[data-argus-href] { cursor: pointer; }
tr[data-argus-href]:hover > td { background-color: var(--tblr-active-bg); }

/* Narrow tables: long values (IPv6, hostnames) wrap instead of widening the table. */
.table td.argus-break { white-space: normal; overflow-wrap: break-word; min-width: 6rem; }
.table td.argus-hostname { min-width: 11rem; }

/* Script source on the script detail page. */
.argus-source { max-height: 40rem; overflow: auto; white-space: pre; font-size: .8rem; }

/* Two-column list on wide screens (roles page: commands on all servers). */
@media (min-width: 992px) {
    .argus-columns-2 { columns: 2; column-gap: 2rem; }
    .argus-columns-2 > li { break-inside: avoid; }
}

/* Long result lists of the search page scroll inside their card. */
.argus-scroll-list-lg { max-height: 32rem; overflow-y: auto; }

/* CPU/RAM chart on the agent page (inline SVG, colors follow the theme). */
.argus-chart { width: 100%; height: 14rem; display: block; }
.argus-chart-grid { stroke: var(--tblr-border-color); stroke-width: 1; vector-effect: non-scaling-stroke; }
.argus-chart-label { fill: var(--tblr-secondary); font-size: 10px; }
.argus-chart-cpu, .argus-chart-ram { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.argus-chart-cpu { stroke: var(--tblr-blue); }
.argus-chart-band-cpu { fill: var(--tblr-blue); opacity: .15; }
.argus-chart-band-ram { fill: var(--tblr-green); opacity: .15; }
.argus-chart-ram { stroke: var(--tblr-green); }
.argus-chart-hover { fill: transparent; }
.argus-chart-hover:hover { fill: var(--tblr-blue); opacity: .12; }
.argus-legend { display: inline-block; width: .9rem; height: .2rem; margin-right: .3rem; vertical-align: middle; border-radius: 1px; }
.argus-legend-cpu { background: var(--tblr-blue); }
.argus-legend-ram { background: var(--tblr-green); }

/* Full width on large screens with 100px space on both sides (e.g. Full HD: 1720px of content). */
.container-xl { max-width: none; padding-inline: clamp(1rem, 5.2vw, 100px); }

/* Table headers stay visible below the sticky page header while the page scrolls; the offset is
   set by argus.js from the height of the page header. Wide screens let the table overflow freely,
   because a scrolling wrapper would hold the sticky header back. */
:root { --argus-sticky-top: 7rem; }
/* DataTables sets the cell background to a Bootstrap variable Tabler does not define (transparent);
   this selector is more specific, so the header gets a solid background. */
table.table.dataTable[data-argus-datatable] > thead > tr > th,
table[data-argus-datatable] > thead > tr > th,
table[data-argus-sticky] > thead > tr > th {
    position: sticky; top: var(--argus-sticky-top); z-index: 3;
    background-color: var(--tblr-bg-surface-tertiary, var(--tblr-bg-surface)); box-shadow: inset 0 -1px 0 var(--tblr-border-color);
}
@media (min-width: 1200px) {
    .table-responsive:has(table[data-argus-datatable]),
    .table-responsive:has(table[data-argus-sticky]) { overflow: visible; }
}
/* The public report has no sticky page header. */
.argus-report { --argus-sticky-top: 0px; }
/* Too wide for the page (e.g. many columns chosen): scroll sideways; the header is then sticky only
   inside the table (argus.js sets the class). */
.table-responsive.argus-wide:has(table[data-argus-datatable]) { overflow-x: auto; }
/* Columns the user switched off; they stay in the table so their filters keep working. */
.table .argus-col-off { display: none; }

/* Tags in the agent list wrap instead of widening the column. */
.argus-tags { white-space: normal; min-width: 7rem; } /* wraps when needed, and after every 6th tag (agents/_table) */
.argus-tags .badge { margin-right: .15rem; }
.d-contents { display: contents; }

/* Folded addresses (agents/_ips): "7 IPv4-LAN" opens the list. */
.argus-ip-more > summary { list-style: none; cursor: pointer; font-family: var(--tblr-font-sans-serif); }
.argus-ip-more > summary::-webkit-details-marker { display: none; }
.argus-ip-more > summary .ti { transition: transform .15s; }
.argus-ip-more[open] > summary .ti { transform: rotate(180deg); }

/* Tags of an agent (agents/_tags): chosen ones on top with a strong red frame. */
.argus-tag-choice .form-selectgroup-input:checked + .form-selectgroup-label { border: 2px solid var(--tblr-red); box-shadow: 0 0 0 2px rgba(var(--tblr-red-rgb), .2); }

/* Submenu of a dropdown (agents: Tag-Spalten), see argus.js. */
.argus-submenu { position: absolute; top: 0; left: calc(100% + 1.1rem); width: 18rem; max-height: 70vh; overflow-y: auto; z-index: 1100; }
.argus-submenu.argus-left { left: auto; right: calc(100% + 1.1rem); }

/* Flag (country) or house (private) in front of an address, as high as the text (esc_ip). */
.argus-ip-icon { height: 1em; vertical-align: -0.125em; margin-right: .3em; }
.fi.argus-ip-icon { width: 1.333em; line-height: 1em; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.ti.argus-ip-icon { font-size: 1em; display: inline-block; width: 1.333em; text-align: center; }

/* Admin-RO (body.argus-readonly): buttons that change something are hidden, forms stay visible (they
   show data) but cannot be used; the server refuses changes anyway. data-argus-ro marks what a
   read-only user may use (own columns), data-argus-write further controls to hide. */
.argus-readonly button[hx-post]:not([data-argus-ro]),
.argus-readonly a[hx-post]:not([data-argus-ro]),
.argus-readonly form:is([hx-post], [method="post"]):not([data-argus-ro]) :is(button[type="submit"], button:not([type])),
.argus-readonly [data-argus-write] { display: none !important; }
.argus-readonly form:is([hx-post], [method="post"]):not([data-argus-ro]) { pointer-events: none; opacity: .75; }