/* app-controls.css - DocsTool-COM page-shell controls.
 *
 * The page skeleton (index.html, rendered by crates/server/src/routes/shell.rs)
 * builds every control from Bootstrap 5 markup; layout.js and listbox.js keep
 * it up to date. This sheet holds the few adjustments those controls need on
 * top of Bootstrap and DataTables, and nothing else: it is linked right after
 * the Bootstrap sheets, so equal-specificity rules of the later library
 * sheets still take precedence over it.
 *
 * Class names: AppPage (page box), AppLabel, AppButton, AppSearchField,
 * AppCheckbox, AppListBox (MainListBox, DataTables + Scroller).
 */

/* Page box: scrolls instead of spilling when the window is below its minimum size. */
.AppPage { overflow: auto; }

/* Phone list (JS_PageElementsToggle adds the class): the empty 38 px header strip above
   the organisation name goes off screen, so the list starts higher (DEV-051). */
@media (max-width: 768px) {
  body.dt-mobile-list #WPMain { top: -38px !important; height: calc(100% + 38px) !important; }
}

/* ------------------------------------------------------------------ list box */

/* The control draws the outer frame; card mode (HasBorder off) drops it. */
.AppListBox { overflow: hidden; border: 1px solid var(--bs-border-color); }
.AppListBox.borderless { border: 0; }

/* No cell line on the left and right edge of the grid (the frame is there). */
.AppListBox table.table-bordered.dataTable th:first-child,
.AppListBox table.table-bordered.dataTable td:first-child { border-left: none; }
.AppListBox table.table-bordered.dataTable th:last-child,
.AppListBox table.table-bordered.dataTable td:last-child { border-right: none; }

/* The scrolling area has no line of its own at the bottom. */
.AppListBox div.dt-scroll-body { border-bottom: hidden; }

/* Grid line colour; rows carry no side lines (order matters: same weight). */
.AppListBox tbody, .AppListBox td, .AppListBox tfoot,
.AppListBox th, .AppListBox thead, .AppListBox tr { border-color: var(--bs-table-border-color); }
.AppListBox .dt-scroll-head thead tr,
.AppListBox tr { border-left: none; border-right: none; }

/* Body cells: one horizontal line under each row, one vertical line between columns. */
.AppListBox table.dataTable.table-bordered td {
  border-bottom-width: var(--bs-border-width);
  border-bottom-color: var(--bs-border-color);
  border-right-width: var(--bs-border-width);
}
.AppListBox .dt-scroll-body tbody td { border-left: 0; }
.AppListBox .dt-scroll-body table.table-bordered tr:last-child td {
  border-bottom-width: var(--bs-border-width);
  border-bottom-color: var(--bs-border-color);
  border-bottom-style: var(--bs-border-style);
}

/* Header row: thicker line under it, captions centred vertically and clipped. */
.AppListBox table.table-bordered.dataTable thead tr:first-child th { border-bottom-width: 2px; }
.AppListBox .dt-scroll-head thead { overflow: hidden; text-overflow: ellipsis; }
.AppListBox .dt-scroll-head thead tr { vertical-align: middle; }
.AppListBox .table th { padding-left: .75rem; padding-right: .75rem; }
/* Header/footer copies take the body column widths (DataTables colgroup): with
   the automatic layout Safari widens captions with sort icons and every column
   after them drifts from its body cells. */
.AppListBox .dt-scroll-headInner > table.dataTable,
.AppListBox .dt-scroll-footInner > table.dataTable { table-layout: fixed; }

/* Body cells: one text line, clipped with an ellipsis, centred vertically, not selectable. */
.AppListBox .table td { padding: 0 .75rem; }
.AppListBox .dt-scroll-body table td { overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.AppListBox .dt-scroll-body table tbody td.dt-empty { vertical-align: middle; }
.AppListBox tbody td { -webkit-user-select: none; user-select: none; }

/* Body table: always as wide as the view, no focus ring on the table or a row. */
.AppListBox .dt-scroll-body table { min-width: 100%; outline: none; }
.AppListBox div.dts div.dt-scroll-body table { z-index: auto; }
.AppListBox tr:focus-visible { outline: none; }

/* Scroller: no floating row-number label while the scrollbar is dragged. */
/* biome-ignore lint/complexity/noImportantStyles: Scroller shows the label with an inline display:block */
.AppListBox div.dts_label { display: none !important; }

/* Dark mode: diagonal placeholder stripes below the last loaded row. */
[data-bs-theme=dark] .AppListBox div.dts div.dt-scroll-body {
  background-image: linear-gradient(56deg, var(--bs-body-bg), var(--bs-body-bg)),
    repeating-linear-gradient(45deg, #333, #333 10px, #222 10px, #222 20px);
  background-repeat: repeat-x, repeat-y;
  background-size: 10px 16px, calc(100% - 15px) 100%;
  background-position-y: 100%;
}

/* -------------------------------------------------------------------- labels */

/* One caption line, vertically centred, cut with an ellipsis when too long. */
.AppLabel { line-height: normal; overflow: hidden; align-items: center; }
.AppLabel > label { display: flex; align-items: center; width: 100%; height: 100%; }
.AppLabel > label > span { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
[data-bs-theme=dark] .AppLabel { color: white; }

/* -------------------------------------------------------------- search field */

.AppSearchField button,
.AppSearchField button:hover { padding-top: 2px; }
.AppSearchField button.btn-default,
.AppSearchField button.btn-default:hover {
  border: var(--bs-border-width) solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
}
.AppSearchField svg { fill: var(--bs-btn-color); }

/* ------------------------------------------------------------------ checkbox */

.AppCheckbox { display: flex; align-items: center; overflow: hidden; }
.AppCheckbox > div.form-check { position: relative; }

/* DEV-112 «Ricerca avanzata»: right-aligned before the >> of the ticket list header
   (JS_PageElementsToggle sets --dt-sav-right and the body classes); hidden when the
   list header is not on screen; short label on the phone or a narrow list. */
#SrchAd { left: auto !important; right: var(--dt-sav-right, 56px) !important; width: auto !important;
  height: 22px !important; padding-left: 0 !important; overflow: visible; }
#SrchAd > div.form-check { display: flex; align-items: center; gap: 6px; margin: 0; padding-left: 0; min-height: 0; }
#SrchAd .form-check-input { float: none; margin: 0; cursor: pointer; }
#SrchAd .form-check-label { font-size: 14px; cursor: pointer; user-select: none; }
#SrchAd .dt-sav-short { display: none; }
body.dt-sav-compact #SrchAd .dt-sav-long { display: none; }
body.dt-sav-compact #SrchAd .dt-sav-short { display: inline; }
body:not(.dt-sav-on) #SrchAd { display: none !important; }

/* -------------------------------------------------------------------- button */

/* The Bootstrap button group fills the control box. */
.AppButton .btn-group { position: absolute; width: 100%; height: 100%; }

/* DEV-050: connection pill of Documenti / Utenti (bridge.js), same look as the
   tickets chat badge (#dqNetBadge): ONLINE green, OFFLINE red. Under popups. */
#dtNetPill { position: fixed; z-index: 1040; display: none; pointer-events: none;
  font: 600 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding: 4px 8px; border-radius: 10px; opacity: .95; white-space: nowrap; }
#dtNetPill.dt-net-online { background: #34C759; color: #fff; }
#dtNetPill.dt-net-offline { background: #FF3B30; color: #fff; }