/* App-specific overrides on top of Tabler. Global theme tokens live in
   theme.css (loaded first); this file keeps component-level tweaks. */

/* Full-width layout: use the whole viewport instead of Tabler's centred
   max-width container. Mobile is unaffected — container-fluid already
   spans full width below xl, and the wider gutter only kicks in ≥768px. */
@media (min-width: 768px) {
    .page-wrapper .container-fluid {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}
/* Phones: 16px from the screen edge (Tabler's 8px put cards almost on it),
   and clear of a notch in landscape. */
@media (max-width: 767.98px) {
    .page-wrapper .container-fluid {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

/* Tight page body — content sits close under the topbar */
.page-body { margin-top: .5rem; }

/* Alpine: hide elements until the component initialises */
[x-cloak] { display: none !important; }

/* Filter bar used on every list screen */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: flex-end;
}

/* Timer widget (tickets, M4b) */
.timer-display {
    font-variant-numeric: tabular-nums;
    font-size: 1.25rem;
    font-weight: 600;
}

/* htmx: subtle loading state */
.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity .2s; }

[hx-disabled-elt].htmx-request { pointer-events: none; opacity: .6; }

/* in-page «Είστε σίγουροι;» (app.js confirmBox) — above other modals and the error toasts */
.app-confirm { background: rgba(0, 0, 0, .45); z-index: 2050; }
.app-confirm-text { white-space: pre-line; }

/* Knowledge Base — rendered markdown (2e.2) */
.kb-article > :first-child { margin-top: 0; }
.kb-article > :last-child { margin-bottom: 0; }
.kb-article h1, .kb-article h2, .kb-article h3 { margin: 1.4rem 0 .6rem; font-weight: 600; }
.kb-article h1 { font-size: 1.5rem; }
.kb-article h2 { font-size: 1.25rem; }
.kb-article h3 { font-size: 1.1rem; }
.kb-article p, .kb-article ul, .kb-article ol, .kb-article blockquote, .kb-article pre, .kb-article table { margin: 0 0 1rem; }
.kb-article pre { background: var(--tblr-bg-surface-secondary, #f5f7fb); padding: .75rem 1rem; border-radius: .375rem; overflow-x: auto; }
.kb-article code { background: var(--tblr-bg-surface-secondary, #f5f7fb); padding: .1rem .35rem; border-radius: .25rem; font-size: .875em; }
.kb-article pre code { background: none; padding: 0; }
.kb-article blockquote { border-left: 3px solid var(--tblr-border-color, #dbe0e8); padding-left: 1rem; color: var(--tblr-secondary, #6c7a91); }
.kb-article table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.kb-article th, .kb-article td { border: 1px solid var(--tblr-border-color, #dbe0e8); padding: .4rem .6rem; text-align: left; }
.kb-article img { max-width: 100%; }

/* Tom Select (js-search dropdowns). The vendored bootstrap5 theme paints
   surfaces with --bs-* tokens, but Tabler ships --tblr-* — so the dropdown
   renders transparent (text from the page bleeds through). Pin the surfaces
   to Tabler tokens and lift the panel above modals. */
.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
    background: var(--tblr-bg-surface, #fff);
    color: var(--tblr-body-color, #1d273b);
    border-color: var(--tblr-border-color, #dbe0e8);
    z-index: 1056;
}
.ts-dropdown .optgroup-header {
    background: var(--tblr-bg-surface, #fff);
    color: var(--tblr-secondary, #6c7a91);
}
.ts-dropdown .option.active,
.ts-dropdown .active {
    background-color: var(--tblr-bg-surface-secondary, #f5f7fb);
    color: var(--tblr-body-color, #1d273b);
}
.ts-control,
.ts-wrapper.single.input-active .ts-control {
    background: var(--tblr-bg-forms, #fff);
}
.ts-wrapper.disabled .ts-control {
    background: var(--tblr-bg-surface-secondary, #f5f7fb);
}

/* Single-select: hide the currently-selected item's chip while the search
   input is active, so a preselected value (e.g. Quick's default «Πελάτης
   WalkIn») doesn't visually run together with what's being typed. Purely
   presentational — TomSelect keeps the real selection until a new option is
   chosen, and removes .input-active (restoring the chip) on blur. */
.ts-wrapper.single.input-active .item {
    display: none;
}

/* Customer spaces tree (customers » spaces tab): folder/file tree with a
   size toggle (SMALL/MEDIUM/LARGE), rendered as connector lines built from
   fixed-width guide columns + a corner elbow before the icon. */
.space-tree-guide {
    display: inline-block;
    width: var(--space-tree-unit, 1.15rem);
    flex-shrink: 0;
    position: relative;
}
.space-tree-guide.is-open::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px solid var(--tblr-border-color, #dbe0e8);
}
.space-tree-guide.is-corner::before {
    content: "";
    position: absolute;
    top: 0;
    height: 50%;
    left: 50%;
    border-left: 1px solid var(--tblr-border-color, #dbe0e8);
}
.space-tree-guide.is-corner.is-open::before {
    height: 100%;
}
.space-tree-guide.is-corner::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    border-top: 1px solid var(--tblr-border-color, #dbe0e8);
}
.space-tree-icon i { font-size: var(--space-tree-icon-size, 1rem); }
/* collapsible nodes: chevron turns when the row's children are shown */
.space-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tblr-secondary);
}
button.space-tree-toggle i { transition: transform .15s; }
tr.is-open button.space-tree-toggle i { transform: rotate(90deg); }
.space-table [data-toggle] { cursor: pointer; }
.space-row-focus > td { background: var(--tblr-primary-lt); }
.space-bulk-text { font-size: .8125rem; tab-size: 2; }
.space-bulkbar { position: sticky; top: 0; z-index: 5; }
.space-desc { max-width: 16rem; }

/* Καθολική αναζήτηση (topbar, Phase 2ba.12) */
.gsearch { position: relative; width: 100%; max-width: 24rem; }
.gsearch-results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1050;
    background: var(--tblr-bg-surface, #fff); border: 1px solid var(--tblr-border-color, #dbe0e8);
    border-radius: .375rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 70vh; overflow: auto;
    display: none;
}
.gsearch.is-open .gsearch-results:not(:empty) { display: block; }
.gsearch-group { padding: .4rem .75rem .2rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--tblr-secondary); }
.gsearch-item { display: block; padding: .35rem .75rem; color: inherit; text-decoration: none; }
.gsearch-item:hover, .gsearch-item:focus { background: var(--tblr-bg-surface-secondary, #f5f7fb); outline: none; text-decoration: none; }
.gsearch-all { border-top: 1px solid var(--tblr-border-color, #dbe0e8); color: var(--tblr-primary); }

.space-tree-size-sm { --space-tree-unit: .9rem; --space-tree-icon-size: .875rem; }
.space-tree-size-sm td { padding-top: .25rem; padding-bottom: .25rem; font-size: .8125rem; }
.space-tree-size-md { --space-tree-unit: 1.15rem; --space-tree-icon-size: 1rem; }
.space-tree-size-lg { --space-tree-unit: 1.4rem; --space-tree-icon-size: 1.25rem; }

.ticket-comment-body img { max-width: 100%; height: auto; border-radius: .375rem; }
.space-tree-size-lg td { padding-top: .65rem; padding-bottom: .65rem; }

/* Tickets list — «Τι θέλει δουλειά» tiles, status tabs, filter chips (Phase 2bb.2) */
.tk-tile { border-top: 3px solid transparent; transition: border-color .15s, box-shadow .15s; }
.tk-tile:hover { border-top-color: var(--tk-tone); }
.tk-tile-active { border-top-color: var(--tk-tone); box-shadow: 0 0 0 1px var(--tk-tone) inset; }
.tk-tabs .nav-link { padding: .3rem .65rem; }
.tk-tabs .dropdown-item { display: flex; }
.tk-chip { font-weight: 500; }
.tk-chip:hover { filter: brightness(.95); }

/* Detail-page tabs: coloured icon per tab, active underlined in its colour,
   empty tabs dimmed (Phase 2bb.3). Desktop wraps to a second row so every tab
   is in sight; narrow screens keep theme.css's sideways scroll. */
.card > .nav-tabs.detail-tabs { padding-left: .25rem; padding-right: .25rem; }
.card > .nav-tabs.detail-tabs .nav-link { padding: .55rem .45rem; }
/* an empty tab shows its icon only (Phase 2bq) — name in the tooltip */
.card > .nav-tabs.detail-tabs .nav-link.is-icon-only { padding-left: .45rem; padding-right: .45rem; }
.card > .nav-tabs.detail-tabs .nav-link .tab-ic { color: var(--tab-c); font-size: 1.05rem; }
.card > .nav-tabs.detail-tabs .nav-link.active { color: var(--tab-c); border-bottom-color: var(--tab-c); }
.card > .nav-tabs.detail-tabs .nav-link.is-empty { opacity: .55; }
.card > .nav-tabs.detail-tabs .nav-link.is-empty:hover { opacity: 1; }
@media (min-width: 992px) {
    .card > .nav-tabs.detail-tabs { flex-wrap: wrap; overflow-x: visible; }
}

/* Quote page — section header rows, optional lines (Phase 2bc) */
.qs-head > td { background: var(--tblr-bg-surface-secondary); border-top: 2px solid var(--tblr-border-color); }
.ql-optional > td { background: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(var(--tblr-yellow-rgb), .06) 8px 16px); }
.ql-declined > td { opacity: .5; text-decoration: line-through; }

/* Rack elevation (Phase 2bd) — one row per U, mounted gear spans its height */
.rack-grid { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); grid-template-rows: repeat(var(--rack-rows), 1.8rem); }
.rack-u { grid-column: 1; display: flex; align-items: center; justify-content: flex-end; gap: .3rem; padding-right: .5rem; font-family: var(--tblr-font-monospace); font-size: .72rem;
    color: var(--tblr-secondary); border-bottom: 1px solid var(--tblr-border-color-translucent); }
/* Phase 2bl — «1 | 24»: the rack's own number, then the same U counted the other way */
.rack-u .rack-u-n { font-weight: 700; color: var(--tblr-body-color); }
.rack-u .rack-u-alt { min-width: 1.3rem; padding-left: .3rem; border-left: 1px solid var(--tblr-border-color); text-align: right; opacity: .65; }
.rack-cell { grid-column: 2; background: var(--tblr-bg-surface-secondary); border-bottom: 1px solid var(--tblr-border-color-translucent); }
.rack-cell.is-over { background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(var(--tblr-red-rgb), .12) 6px 12px); }
.rack-grid.is-edit .rack-cell { cursor: pointer; }
.rack-grid.is-edit .rack-cell:hover { background: rgba(var(--tblr-primary-rgb), .10); }
/* Phase 2bh — the gear over its U; drag it (or ⇅ then click) to another; the ghost shows where it lands */
.rack-item { grid-column: 2; z-index: 1; display: flex; align-items: center; gap: .4rem; min-width: 0; margin: 1px 0; padding: 0 .3rem 0 .6rem; overflow: hidden;
    background: linear-gradient(rgba(var(--tblr-azure-rgb), .14), rgba(var(--tblr-azure-rgb), .14)), var(--tblr-bg-surface);
    border-left: 3px solid var(--tblr-azure); border-radius: .25rem; user-select: none; }
.rack-item[draggable=true], .rack-loose[draggable=true] { cursor: grab; }
.rack-item.is-off { opacity: .5; }
/* Phase 2bl.2 — accessories: passive ones hatched grey, patch panels dark with their ports */
.rack-item.is-acc { border-left-color: var(--tblr-gray-400); color: var(--tblr-secondary);
    background: repeating-linear-gradient(135deg, rgba(var(--tblr-secondary-rgb), .10) 0 6px, transparent 6px 12px), var(--tblr-bg-surface); }
.rack-item.is-patch { border-left-color: var(--tblr-gray-700);
    background: radial-gradient(circle at 50% 55%, rgba(var(--tblr-secondary-rgb), .35) 0 1.5px, transparent 2px) 0 0 / 9px 100% repeat-x, rgba(var(--tblr-secondary-rgb), .14); }
/* Phase 2bn — a rack power strip: its outlets in a row */
.rack-item.is-pdu { border-left-color: var(--tblr-orange);
    background: linear-gradient(90deg, transparent 0 5px, rgba(var(--tblr-orange-rgb), .30) 5px 13px, transparent 13px) 0 50% / 18px 55% repeat-x, rgba(var(--tblr-orange-rgb), .08); }
.rack-item.is-busy, .rack-loose.is-busy { opacity: .55; }
.rack-item.is-picked, .rack-loose.is-picked { outline: 2px solid var(--tblr-primary); outline-offset: -2px; }
.rack-ghost { grid-column: 2; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: flex-end; padding-right: .5rem;
    border-radius: .25rem; font-family: var(--tblr-font-monospace); font-size: .75rem; }
.rack-ghost.is-ok { background: rgba(var(--tblr-green-rgb), .25); border: 2px dashed var(--tblr-green); color: var(--tblr-green); }
.rack-ghost.is-bad { background: rgba(var(--tblr-red-rgb), .2); border: 2px dashed var(--tblr-red); color: var(--tblr-red); }
/* Phase 2bn — front and rear side by side; full-depth gear shows its back hatched on the rear */
.rack-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .75rem; }
@media (max-width: 575.98px) { .rack-sides { grid-template-columns: minmax(0, 1fr); } }
.rack-sides .rack-item-sub { display: none !important; } /* two pictures side by side: the name gets the room */
.rack-side-h { padding: .35rem .5rem .35rem 4.2rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--tblr-secondary);
    border-bottom: 1px solid var(--tblr-border-color); }
.rack-item.is-back { opacity: .75; border-left-style: dashed;
    background-image: repeating-linear-gradient(135deg, rgba(var(--tblr-secondary-rgb), .14) 0 5px, transparent 5px 10px); }

/* Print: page content only (Phase 2bd — «Τι επηρεάζεται» is printed for the client) */
@media print {
    aside.navbar-vertical { display: none !important; }
    .page-wrapper { margin-left: 0 !important; }
}

/* Asset form (Phase 2bf): full width — the side column (save, what's in the space) sticks on
   wide screens; below that the save bar stays in reach at the bottom (on-site entry). */
@media (min-width: 1200px) {
    .asset-form-side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
}
@media (max-width: 1199.98px) {
    .asset-form-footer { position: sticky; bottom: 0; z-index: 5; background: var(--tblr-bg-surface); box-shadow: 0 -2px 8px rgba(0, 0, 0, .08); }
}
.asset-form-side .form-selectgroup-label { text-align: left; }

/* Asset form sections (Phase 2be.8) */
.asset-form-section { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--tblr-border-color-translucent); }
.asset-form-h { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tblr-secondary); margin-bottom: .75rem; }

/* Phase 2bg.5–7 — connections as pictures */
/* the path as a chain: box — port ─── port — box */
.asset-chain { display: flex; align-items: center; overflow-x: auto; padding-bottom: .25rem; }
.asset-chain-node { flex: 0 0 12.5rem; min-width: 0; border: 1px solid var(--tblr-border-color); border-radius: .5rem; padding: .5rem .65rem; background: var(--tblr-bg-surface); }
.asset-chain-node.is-self { border-color: var(--tblr-azure); background: rgba(var(--tblr-azure-rgb), .07); }
.asset-chain-cable { flex: 0 0 auto; display: flex; align-items: center; gap: .2rem; min-width: 8rem; padding: 0 .2rem; }
.cable-line { position: relative; flex: 1 1 1.5rem; min-width: 1rem; border-top: 2px solid var(--tblr-gray-400); }
/* arrowhead: network flows from the gateway towards the asset */
.cable-line::after { content: ''; position: absolute; right: -1px; top: -6px; border: 5px solid transparent; border-right: 0; border-left: 7px solid var(--tblr-gray-400); }
.cable-line.is-fiber { border-top-color: var(--tblr-orange); }
.cable-line.is-fiber::after { border-left-color: var(--tblr-orange); }
.cable-line.is-wireless { border-top-style: dashed; }
/* a cable of the chain as a button (Phase 2bj.1): «Επεξεργασία σύνδεσης» */
.asset-chain-cable.is-edit { border: 1px dashed transparent; background: none; border-radius: .4rem; padding-top: .35rem; padding-bottom: .35rem; cursor: pointer; color: inherit; }
.asset-chain-cable.is-edit:hover, .asset-chain-cable.is-edit:focus-visible { border-color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), .06); }
.asset-chain-cable .cable-edit { position: absolute; left: 50%; top: -1.05rem; transform: translateX(-50%); font-size: .8rem; color: var(--tblr-secondary); }
.asset-chain-cable.is-edit:hover .cable-edit { color: var(--tblr-primary); }
@media (max-width: 767.98px) {
    .asset-chain-cable .cable-edit { left: .6rem; top: 50%; transform: translateY(-50%); }
}
.port-pill { font-family: var(--tblr-font-monospace); font-size: .72rem; padding: .05rem .4rem; border-radius: .3rem; white-space: nowrap;
    background: rgba(var(--tblr-azure-rgb), .12); color: var(--tblr-azure); }
.port-pill.is-empty { background: transparent; color: var(--tblr-secondary); }
@media (max-width: 767.98px) {
    .asset-chain { flex-direction: column; align-items: stretch; }
    .asset-chain-node { flex-basis: auto; }
    .asset-chain-cable { flex-direction: column; min-width: 0; padding: .2rem 0; }
    .cable-line { border-top: 0; border-left: 2px solid var(--tblr-gray-400); min-height: 1rem; flex: 0 0 1rem; }
    .cable-line::after { right: auto; top: auto; left: -6px; bottom: -1px; border: 5px solid transparent; border-bottom: 0; border-top: 7px solid var(--tblr-gray-400); }
    .cable-line.is-fiber { border-left-color: var(--tblr-orange); }
    .cable-line.is-fiber::after { border-top-color: var(--tblr-orange); }
}
/* the front panel of a switch / PDU */
.faceplate { display: grid; gap: .3rem; grid-template-columns: repeat(var(--cols), minmax(3.3rem, 1fr)); overflow-x: auto; }
.faceplate-port { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem; min-height: 3.5rem; padding: .2rem;
    border: 1px solid var(--tblr-border-color); border-radius: .35rem; font-size: .7rem; line-height: 1.15; text-align: center;
    color: inherit; text-decoration: none; overflow: hidden; background: var(--tblr-bg-surface); }
.faceplate-port .fp-n { font-weight: 600; color: var(--tblr-secondary); }
.faceplate-port .fp-name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faceplate-port.is-free { border-style: dashed; color: var(--tblr-secondary); background: transparent; }
button.faceplate-port.is-free:hover { border-color: var(--tblr-primary); color: var(--tblr-primary); }
.faceplate-port.is-used { background: rgba(var(--tblr-azure-rgb), .12); border-color: rgba(var(--tblr-azure-rgb), .45); }
a.faceplate-port.is-used:hover { background: rgba(var(--tblr-azure-rgb), .22); }
.faceplate-port.is-uplink { background: rgba(var(--tblr-green-rgb), .15); border-color: rgba(var(--tblr-green-rgb), .6); }
.faceplate-port.is-clash { background: rgba(var(--tblr-red-rgb), .12); border-color: rgba(var(--tblr-red-rgb), .6); }
/* what each port is (Phase 2bk): PoE in the corner, SFP cages framed apart */
.faceplate-port { position: relative; }
.faceplate-port .fp-type { position: absolute; top: 1px; right: 3px; font-size: .58rem; font-weight: 700; line-height: 1; color: var(--tblr-orange); }
.faceplate-port.is-cage { border-radius: .12rem; box-shadow: inset 0 0 0 2px rgba(var(--tblr-teal-rgb), .45); }
.faceplate-port.is-cage .fp-type { color: var(--tblr-teal); }
/* «Τύποι θυρών» in the form (Phase 2bk.3): the brush list above the ports */
.port-brush { display: flex; flex-wrap: wrap; gap: .25rem; }
.port-brush .btn { gap: .3rem; }
.port-brush-code { min-width: 1.4rem; text-align: center; font-size: .65rem; font-weight: 700; color: var(--tblr-orange); }
.port-brush-code.is-cage { color: var(--tblr-teal); }
.port-brush .btn-primary .port-brush-code { color: inherit; }
/* dragging a cable to another port (Phase 2bj.2) */
.faceplate-port[draggable="true"], .faceplate-off [draggable="true"] { cursor: grab; }
.faceplate-port.is-drag, .faceplate-off .is-drag { opacity: .45; }
.faceplate-port.is-drop { outline: 2px solid var(--tblr-primary); outline-offset: 1px; background: rgba(var(--tblr-primary-rgb), .12); }
.faceplate-key { display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; margin-right: .25rem; vertical-align: -1px; border: 1px solid var(--tblr-border-color); }
.faceplate-key.is-free { border-style: dashed; }
.faceplate-key.is-used { background: rgba(var(--tblr-azure-rgb), .25); }
.faceplate-key.is-uplink { background: rgba(var(--tblr-green-rgb), .3); }
/* «Νέα σύνδεση»: the one that gives (switch, UPS) left, the one that takes right — up = this one takes */
.link-diagram { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem minmax(0, 1fr); gap: .75rem; align-items: center; }
.link-diagram .link-box-other { order: 1; }
.link-diagram .link-wire { order: 2; }
.link-diagram .link-box-this { order: 3; }
.link-diagram.is-down .link-box-this { order: 1; }
.link-diagram.is-down .link-box-other { order: 3; }
.link-box { border: 1px solid var(--tblr-border-color); border-radius: .5rem; padding: .75rem; min-width: 0; }
.link-box-this { background: rgba(var(--tblr-azure-rgb), .06); border-color: rgba(var(--tblr-azure-rgb), .4); }
/* «Επεξεργασία σύνδεσης» (Phase 2bj.1): giver left, taker right, the page's own device tinted */
.link-diagram .link-box-give { order: 1; }
.link-diagram .link-box-take { order: 3; }
.link-box-here { background: rgba(var(--tblr-azure-rgb), .06); border-color: rgba(var(--tblr-azure-rgb), .4); }
.link-wire { text-align: center; }
.link-wire-line { position: relative; height: 0; border-top: 2px solid var(--tblr-gray-500); margin: .6rem .5rem .6rem 0; }
.link-wire-line::after { content: ''; position: absolute; right: -.55rem; top: -.4rem; border: .35rem solid transparent; border-left: .55rem solid var(--tblr-gray-500); }
.link-wire-line.is-power { border-top-color: var(--tblr-yellow); }
.link-wire-line.is-power::after { border-left-color: var(--tblr-yellow); }
.link-wire-line.is-logical { border-top-style: dashed; }
@media (max-width: 767.98px) {
    .link-diagram { grid-template-columns: 1fr; }
    .link-wire-line { margin: .6rem auto; width: 0; height: 1.5rem; border-top: 0; border-left: 2px solid var(--tblr-gray-500); }
    .link-wire-line::after { right: auto; left: -.45rem; top: auto; bottom: -.55rem; border: .35rem solid transparent; border-top: .55rem solid var(--tblr-gray-500); }
}

/* Εγκατάσταση → Χάρτης (Phase 2bg.9): sections of tiles, coloured by what is being looked at */
.map-site + .map-site { margin-top: 1.5rem; }
.map-site-h { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .75rem; }
.map-tiles { display: grid; gap: .3rem; grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); }
.map-tiles.is-wide { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.map-tile { position: relative; display: flex; align-items: center; justify-content: center; gap: .25rem; min-height: 2.4rem; padding: .2rem .35rem;
    border: 1px solid var(--tblr-border-color); border-radius: .35rem; font-size: .75rem; line-height: 1.15; text-align: center;
    color: inherit; text-decoration: none; background: var(--tblr-bg-surface); overflow: hidden; }
.map-tile:hover { border-color: var(--tblr-primary); }
.map-tile .map-tile-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-tile .map-tile-n { position: absolute; top: 1px; right: 3px; font-size: .6rem; color: var(--tblr-secondary); }
.map-tile.is-tech { border-color: rgba(var(--tblr-orange-rgb), .7); }
.map-tile.is-tech i { color: var(--tblr-orange); }
.map-tile.is-dim { opacity: .2; }
.installation-map[data-mode="cov"] .map-tile[data-cov="1"] { background: rgba(var(--tblr-green-rgb), .16); }
.installation-map[data-mode="cov"] .map-tile[data-cov="0"] { background: rgba(var(--tblr-red-rgb), .10); }
.installation-map[data-mode="assets"] .map-tile:not([data-assets="0"]) { background: rgba(var(--tblr-azure-rgb), .16); }
.installation-map[data-mode="tickets"] .map-tile:not([data-tickets="0"]) { background: rgba(var(--tblr-orange-rgb), .22); border-color: var(--tblr-orange); }
.map-key { display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; border: 1px solid var(--tblr-border-color); vertical-align: -1px; margin-right: .2rem; }

/* Όροφοι (Phase 2bi): a building seen from the side — a band per floor, top floor first */
.map-floors { display: flex; flex-direction: column; }
.map-floor { display: flex; align-items: stretch; gap: .4rem; padding: .25rem 0; }
.map-floor + .map-floor { border-top: 1px dashed var(--tblr-border-color); }
.map-floor.is-ground + .map-floor.is-below { border-top: 2px solid var(--tblr-gray-500); } /* the ground line */
.map-floor.is-below { background: rgba(var(--tblr-secondary-rgb), .08); }
.map-floor.is-attic { background: rgba(var(--tblr-yellow-rgb), .08); }
.map-floor.is-none { border-top: 1px solid var(--tblr-border-color); margin-top: .25rem; }
.map-floor-label { flex: 0 0 2.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
    border-right: 2px solid var(--tblr-border-color); padding-right: .35rem; color: var(--tblr-secondary); }
.map-floor-label strong { font-size: .95rem; color: var(--tblr-body-color); }
.map-floor-label small { font-size: .6rem; }
.map-floor.is-none .map-floor-label strong { color: var(--tblr-secondary); }
.map-floor > .map-tiles, .map-floor > .map-floor-empty { flex: 1 1 auto; min-width: 0; }
.map-floor-empty { min-height: 2.4rem; }
/* Εξέλιξη #14 — «Κάτοψη»: a floor as a fixed grid of room-sized cells (like an NVR screen) */
.map-floor > .map-plan-wrap { flex: 1 1 auto; min-width: 0; }
.map-plan-wrap { overflow-x: auto; }
.map-plan { --cw: 4.4rem; --ch: 2.4rem; --gap: .3rem; display: grid; width: max-content;
  grid-template-columns: repeat(var(--cols), var(--cw)); grid-template-rows: repeat(var(--rows), var(--ch)); gap: var(--gap);
  padding: .35rem; border: 2px solid var(--tblr-border-color); border-radius: 6px;
  background-color: var(--tblr-bg-surface);
  background-image: linear-gradient(to right, transparent var(--cw), var(--tblr-bg-surface) var(--cw)),
                    linear-gradient(to bottom, rgba(var(--tblr-secondary-rgb), .07) var(--ch), var(--tblr-bg-surface) var(--ch));
  background-size: calc(var(--cw) + var(--gap)) calc(var(--ch) + var(--gap));
  background-clip: content-box; background-origin: content-box; }
.map-plan.is-wide { --cw: 7.5rem; }
.map-plan > .map-tile { min-height: 0; }
.map-plan-tray { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.map-plan-tray:empty { display: none; }
.map-plan-tray > .map-tile { width: 4.4rem; }
.map-plan-wrap:has(.map-plan) > .map-plan-tray:not(:empty)::before { content: 'εκτός κάτοψης'; flex: 0 0 100%; font-size: .7rem; color: var(--tblr-secondary); }
.map-plan-tools { margin-bottom: .3rem; }
.installation-map.is-plan-edit .map-plan-wrap:has(.map-plan) > .map-plan-tray { display: flex; min-height: 2.8rem; padding: .25rem; border: 1px dashed var(--tblr-border-color); border-radius: 6px; }
.installation-map.is-plan-edit .map-plan .map-tile, .installation-map.is-plan-edit .map-plan-tray .map-tile { cursor: grab; }
.installation-map.is-plan-edit .map-plan { border-color: var(--tblr-azure); cursor: crosshair; }
.map-tile.is-picked { outline: 2px solid var(--tblr-primary); outline-offset: 1px; box-shadow: 0 0 0 4px rgba(var(--tblr-primary-rgb), .2); }
/* «Όροφοι» painter on the map */
.installation-map.is-floor-edit .map-tile { cursor: cell; }
.installation-map.is-floor-edit .map-floor-label { cursor: pointer; }
.installation-map.is-floor-edit .map-floor-label:hover { color: var(--tblr-primary); border-right-color: var(--tblr-primary); }
.installation-map.is-floor-edit .map-tile[data-fl]:not([data-fl=""])::before { content: attr(data-fl); position: absolute; top: 1px; left: 3px; font-size: .6rem; font-weight: 700; color: var(--tblr-azure); }
.installation-map.is-floor-edit .map-tile.is-changed { outline: 2px solid var(--tblr-primary); outline-offset: -2px; }
.map-floor-now { min-width: 8rem; pointer-events: none; }

/* Εγκατάσταση → Κάλυψη (Phase 2bg.11) */
.cov-map .map-tile { cursor: pointer; }
.cov-map .map-tile.is-mine { background: rgba(var(--tblr-primary-rgb), .22); border-color: var(--tblr-primary); font-weight: 600; }
.cov-map .map-tile.is-covered { background: rgba(var(--tblr-green-rgb), .14); }
.cov-map .map-tile.is-uncovered { background: rgba(var(--tblr-red-rgb), .10); }
.cov-key-mine { background: rgba(var(--tblr-primary-rgb), .35); }
.cov-key-covered { background: rgba(var(--tblr-green-rgb), .3); }
.cov-key-none { background: rgba(var(--tblr-red-rgb), .2); }
/* where the APs live (Phase 2bn): a wifi mark on the room, the picked one's room outlined */
.map-tile .map-tile-ap { position: absolute; top: 1px; left: 2px; font-size: .65rem; color: var(--tblr-secondary); }
.cov-map .map-tile.is-home { outline: 2px solid var(--tblr-body-color); outline-offset: 1px; font-weight: 700; }
.cov-map .map-tile.is-home .map-tile-ap { color: var(--tblr-primary); font-size: .8rem; }
.cov-key-home { background: transparent; border: 2px solid var(--tblr-body-color); }
.is-flash { animation: map-flash .9s ease-out 3; }
@keyframes map-flash { from { box-shadow: 0 0 0 0 rgba(var(--tblr-primary-rgb), .85); } to { box-shadow: 0 0 0 .7rem rgba(var(--tblr-primary-rgb), 0); } }

/* «Επεξεργασία σε πίνακα» (Phase 2bo): a spreadsheet of the picked assets — changed cells yellow, wrong ones red */
.asset-grid-wrap { overflow: auto; max-height: calc(100vh - 15rem); }
.asset-grid { font-size: .8125rem; }
.asset-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--tblr-bg-surface-secondary); white-space: nowrap; text-transform: none; font-size: .75rem; }
.asset-grid td { padding: 0 !important; border-right: 1px solid var(--tblr-border-color-translucent); }
.asset-grid .asset-grid-n { position: sticky; left: 0; z-index: 1; width: 2.6rem; padding: .2rem .4rem !important; text-align: right; background: var(--tblr-bg-surface-secondary); }
.asset-grid thead .asset-grid-n { z-index: 3; }
.grid-cell { display: block; width: 100%; min-width: 0; padding: .25rem .4rem; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; }
.grid-cell:focus { outline: none; border-color: var(--tblr-primary); background: var(--tblr-bg-surface); }
.grid-cell:disabled { color: var(--tblr-secondary); }
.grid-cell.is-changed { background: rgba(var(--tblr-yellow-rgb), .28); }
.grid-cell.is-error { border-color: var(--tblr-red); background: rgba(var(--tblr-red-rgb), .10); }

/* the assets table's board (Phase 2bg.15) */
.asset-board { display: flex; gap: .75rem; overflow-x: auto; align-items: flex-start; padding-bottom: .5rem; }
.asset-board-col { flex: 0 0 16rem; max-height: 70vh; overflow-y: auto; background: var(--tblr-bg-surface-secondary); border-radius: .5rem; padding: .5rem; }
.asset-board-col.is-over { outline: 2px dashed var(--tblr-primary); }
.asset-board-head { font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tblr-secondary); padding: .1rem .25rem .5rem; }
.asset-board-card { display: block; background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: .4rem; padding: .45rem .55rem;
    margin-bottom: .4rem; color: inherit; text-decoration: none; }
.asset-board-card:hover { border-color: var(--tblr-primary); }
.asset-board-card[draggable="true"] { cursor: grab; }

/* the assets table's filters: as wide as they need, wrapping (Phase 2bg.13) */
.asset-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.asset-filters > div { flex: 0 0 auto; }
.asset-filters > .asset-filter-q { flex: 1 1 16rem; min-width: 14rem; }
.asset-filters .form-select { width: auto; }

/* Phase 2bp — toasts (bottom-right stack) and the busy bar of in-place updates */
.app-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 2060; display: flex; flex-direction: column; gap: .5rem;
    width: min(420px, calc(100vw - 2rem)); pointer-events: none; }
.app-toasts .app-toast { margin: 0; pointer-events: auto; animation: app-toast-in .18s ease-out; }
@keyframes app-toast-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
.app-busy { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2070; pointer-events: none; opacity: 0; transition: opacity .15s;
    background: linear-gradient(90deg, transparent 0%, var(--tblr-primary) 50%, transparent 100%); background-size: 40% 100%; background-repeat: no-repeat; }
.app-busy.is-on { opacity: 1; animation: app-busy 1.1s ease-in-out infinite; }
@keyframes app-busy { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .app-busy.is-on { animation: none; background-size: 100% 100%; opacity: .6; } .app-toasts .app-toast { animation: none; } }
/* a form waiting for its in-place answer */
form.htmx-request { opacity: .6; transition: opacity .15s; }

/* the ticket overview's «Εργασία» card (Phase 2bp) */
.ticket-work-steps { max-height: 20rem; overflow-y: auto; }
.ticket-work-steps .btn { white-space: normal; }

/* Phase 2bq — tickets list: below 768px every row is a card. The title spans
   the card (with its #), the other cells sit two by two under their column
   name (data-label), the checkbox top-right. Desktop keeps the table. */
.tk-card-id { display: none; }
@media (max-width: 767.98px) {
    .tk-table { min-width: 0; }
    .tk-table thead { display: none; }
    .tk-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .9rem; position: relative;
        padding: .7rem 1rem; border-bottom: 1px solid var(--tblr-border-color); }
    .tk-table tbody td { display: block; min-width: 0; width: auto !important; /* Tabler .w-1 is 1% — a card cell takes its grid track */
        padding: 0 !important; border: 0 !important; overflow-wrap: anywhere; white-space: normal !important; }
    .tk-table tbody td .badge { white-space: normal; text-align: start; line-height: 1.3; }
    .tk-table tbody td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .05rem; font-size: .7rem; font-weight: 600;
        letter-spacing: .03em; text-transform: uppercase; color: var(--tblr-secondary); }
    .tk-table tbody td.tk-cell-title { grid-column: 1 / -1; padding-right: 2.5rem !important; font-size: .95rem; }
    .tk-table tbody td.tk-cell-id { display: none; }
    .tk-table .tk-card-id { display: inline; }
    .tk-table tbody td.tk-cell-check { position: absolute; top: .75rem; right: 1rem; }
    .tk-table tbody td.tk-cell-check .form-check-input { width: 1.4rem; height: 1.4rem; }
    .tk-table tbody tr.tk-empty { display: block; }
}

/* Phase 2bq — «+ Νέο» menu, and touch screens: primary controls at least 40px high */
.app-new-menu { min-width: 15rem; }
@media (pointer: coarse) {
    .navbar .nav-item > .btn, .navbar .nav-item > .nav-link, .navbar .navbar-toggler { min-height: 40px; }
    .navbar .nav-item > .btn { padding-left: .75rem; padding-right: .75rem; }
    .dropdown-menu .dropdown-item { padding-top: .55rem; padding-bottom: .55rem; }
    .ticket-work .btn, .ticket-work .form-control, .ticket-work .ts-control { min-height: 40px; }
}
/* Δίκτυο → «Υποδομή» (Phase 2br): the gear as a tree, UniFi-style — ports on both ends of each cable, coloured by the medium */
.infra-viewport { position: relative; overflow: hidden; height: 70vh; min-height: 420px; cursor: grab; touch-action: none; user-select: none; outline: 0; }
.infra-viewport:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--tblr-primary-rgb), .35); }
.infra-viewport.is-dragging { cursor: grabbing; }
.infra-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.infra-canvas.is-anim { transition: transform .3s ease; }
.infra-edges { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.infra-edge { fill: none; stroke: var(--tblr-gray-400); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.infra-edge.is-copper { stroke: rgba(var(--tblr-green-rgb), .6); }
.infra-edge.is-fiber { stroke: rgba(var(--tblr-orange-rgb), .75); }
.infra-edge.is-wireless { stroke: rgba(var(--tblr-azure-rgb), .75); stroke-dasharray: 6 4; }
.infra-edge.is-backup { stroke-dasharray: 3 4; }
.infra-edge.is-path { stroke-width: 3px; }
.infra-node { position: absolute; width: 176px; height: 46px; display: flex; align-items: center; gap: 7px; padding: 0 7px 0 9px;
    background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
    color: var(--tblr-body-color); text-decoration: none; font-size: 12px; line-height: 1.25; }
.infra-node:hover { border-color: var(--tblr-primary); color: var(--tblr-body-color); text-decoration: none; }
.infra-node-icon { flex: 0 0 auto; font-size: 20px; color: var(--tblr-secondary); }
.infra-node-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.infra-node-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-node-sub { font: 10.5px/1.3 var(--tblr-font-monospace); color: var(--tblr-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-node-stats { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; font-size: 10.5px; line-height: 1.35; color: var(--tblr-secondary); white-space: nowrap; }
.infra-node-stats .ti { font-size: 11px; margin-right: 2px; }
.infra-node-tickets { position: absolute; top: -8px; right: -8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--tblr-orange); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; }
.infra-node.is-h-fair { border-left: 3px solid var(--tblr-yellow); }
.infra-node.is-h-needs_attention { border-left: 3px solid var(--tblr-orange); }
.infra-node.is-h-critical { border-left: 3px solid var(--tblr-red); }
.infra-node.is-off { opacity: .6; border-style: dashed; }
.infra-node.is-path { border-color: var(--tblr-primary); }
.infra-node.is-hit { border-color: var(--tblr-primary); box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .35); }
.infra-node.is-dim { opacity: .3; }
.infra-canvas.is-searching .infra-edge, .infra-canvas.is-searching .infra-port { opacity: .35; }
.infra-port { position: absolute; height: 18px; padding: 0 4px; border: 0; border-radius: 4px; background: var(--tblr-gray-500); color: #fff;
    font: 600 11px/18px var(--tblr-font-monospace); text-align: center; white-space: nowrap; overflow: hidden; }
.infra-port.is-copper { background: var(--tblr-green); }
.infra-port.is-fiber { background: var(--tblr-orange); }
.infra-port.is-wireless { background: var(--tblr-azure); }
.infra-port.is-backup { background: var(--tblr-bg-surface); color: var(--tblr-secondary); box-shadow: inset 0 0 0 1px var(--tblr-gray-400); }
button.infra-port { cursor: pointer; }
button.infra-port:hover, button.infra-port:focus-visible, .infra-port.is-path { outline: 0; box-shadow: 0 0 0 2px rgba(var(--tblr-primary-rgb), .55); }
.infra-key { display: inline-block; width: 1.4rem; border-top: 2px solid var(--tblr-gray-400); vertical-align: middle; margin-right: .3rem; }
.infra-key.is-copper { border-top-color: var(--tblr-green); }
.infra-key.is-fiber { border-top-color: var(--tblr-orange); }
.infra-key.is-wireless { border-top: 2px dashed var(--tblr-azure); }
.infra-key.is-backup { border-top-style: dotted; }
.infra-card.is-full { position: fixed; inset: 0; z-index: 1035; margin: 0; border-radius: 0; display: flex; flex-direction: column; }
.infra-card.is-full .infra-viewport { flex: 1 1 auto; height: auto; min-height: 0; }

/* «Έργο» board (Phase 2bs) — a column per step, a card per ticket with its days at the step */
.pb-board { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; min-height: 55vh; align-items: stretch; }
.pb-col { flex: 1 0 11rem; max-width: 22rem; min-width: 0; display: flex; flex-direction: column;
    background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); }
.pb-col.is-over { border-color: var(--tblr-primary); box-shadow: 0 0 0 1px var(--tblr-primary) inset; }
.pb-col-head { display: flex; align-items: flex-start; gap: .4rem; padding: .5rem .6rem; font-size: .8125rem; font-weight: 600; line-height: 1.3;
    background: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius) var(--tblr-border-radius) 0 0; }
.pb-col-body { flex: 1 1 auto; padding: .5rem; }
.pb-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem;
    border-radius: 1rem; background: rgba(var(--tblr-primary-rgb), .12); color: var(--tblr-primary); font-size: .72rem; font-weight: 700; line-height: 1; }
.pb-num.is-done { background: rgba(var(--tblr-green-rgb), .16); color: var(--tblr-green); }
.pb-card { border-left: 3px solid transparent; }
.pb-card[draggable=true] { cursor: grab; }
.pb-card.is-today { border-left-color: var(--tblr-orange); }
.pb-card.is-overdue { border-left-color: var(--tblr-red); }
.pb-card.is-selected { box-shadow: 0 0 0 2px rgba(var(--tblr-primary-rgb), .5); }
.pb-card.is-dragging { opacity: .45; }
.pb-card .badge { white-space: normal; text-align: start; }
.pb-name { font-size: .8125rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pb-dots { display: inline-flex; flex: 0 0 auto; gap: 3px; align-items: center; }
.pb-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--tblr-gray-400); }
.pb-dot.is-done { background: var(--tblr-green); box-shadow: none; }
.pb-dot.is-here { box-shadow: inset 0 0 0 2px var(--tblr-primary); }
.pb-dot.is-missing { box-shadow: none; background: repeating-linear-gradient(45deg, var(--tblr-gray-400) 0 1.5px, transparent 1.5px 3px); }
/* «Έργα» list — how many stand at each step (+ finished, green) */
.pb-dist { display: flex; height: .55rem; min-width: 9rem; border-radius: .3rem; overflow: hidden; background: var(--tblr-bg-surface-secondary); }
.pb-dist > span { display: block; height: 100%; }
.pb-dist > span + span { border-left: 1px solid var(--tblr-bg-surface); }

/* Page toolbars (2026-09-28) — the controls on top of a board / map sit on a
   white panel, and each one reads as a control: a visible edge, a dark label,
   the chosen one filled. Plain numbers are text (.tb-stat), not pills.
   .tb-seg = a switch between views / pages, .tb-chip = a ready list / filter,
   .btn-edge = a plain button with a clear edge. */
:root { --app-control-edge: #c3c8d1; --app-control-edge-hover: #8f97a4; --app-btn-hover-bg: #f5f7fa; --app-seg-bg: #eef1f5; --app-info-bg: #f4f6f9;
    --app-count-orange: #b4400a; --app-count-red: #b42318; }
/* Dark (Phase 2bw.3) */
:root[data-bs-theme="dark"] { --app-control-edge: #4a4f58; --app-control-edge-hover: #6b727e; --app-btn-hover-bg: rgba(255, 255, 255, .06);
    --app-seg-bg: rgba(255, 255, 255, .05); --app-info-bg: rgba(255, 255, 255, .035); --app-count-orange: #ffa36b; --app-count-red: #ff8a80; }
.app-toolbar { margin-bottom: 1rem; padding: .6rem .75rem; background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius-lg); box-shadow: var(--app-elevation); }
.app-toolbar > .tb-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.app-toolbar > .tb-row + .tb-row { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--tblr-border-color); }
.app-toolbar .form-control, .app-toolbar .form-select { border-color: var(--app-control-edge); }
.app-toolbar .form-control:hover, .app-toolbar .form-select:hover { border-color: var(--app-control-edge-hover); }
.btn.btn-edge { --tblr-btn-border-color: var(--app-control-edge); --tblr-btn-hover-border-color: var(--app-control-edge-hover);
    --tblr-btn-hover-bg: var(--app-btn-hover-bg); box-shadow: 0 1px 2px rgba(16, 21, 38, .08); }
.tb-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--app-seg-bg);
    border: 1px solid var(--app-control-edge); border-radius: 9px; }
.tb-seg-item { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border: 0; border-radius: 7px;
    background: transparent; color: var(--tblr-body-color); font-size: .8125rem; font-weight: 500; line-height: 1.35; white-space: nowrap; text-decoration: none; cursor: pointer; }
.tb-seg-item > .ti { font-size: 1rem; color: var(--tblr-secondary); }
.tb-seg-item:hover { background: var(--tblr-bg-surface); color: var(--tblr-primary); text-decoration: none; box-shadow: 0 1px 2px rgba(16, 21, 38, .12); }
.tb-seg-item:hover > .ti { color: inherit; }
.tb-seg-item.is-active, .tb-seg-item.is-active:hover { background: var(--tblr-primary); color: #fff; box-shadow: 0 1px 4px rgba(var(--tblr-primary-rgb), .45); }
.tb-seg-item.is-active > .ti { color: #fff; }
.tb-seg-item .tb-count { background: rgba(var(--tblr-secondary-rgb), .14); color: var(--tblr-body-color); }
.tb-seg-item.is-active .tb-count { background: rgba(255, 255, 255, .25); color: #fff; }
/* a view inside the chosen tab: outlined, so it does not read as a second row of tabs (2bt) */
.tb-seg.is-sub .tb-seg-item.is-active, .tb-seg.is-sub .tb-seg-item.is-active:hover { background: var(--tblr-bg-surface); color: var(--tblr-primary);
    box-shadow: inset 0 0 0 1.5px var(--tblr-primary), 0 1px 3px rgba(16, 21, 38, .15); }
.tb-seg.is-sub .tb-seg-item.is-active > .ti { color: var(--tblr-primary); }
.tb-seg.is-sub .tb-seg-item.is-active .tb-count { background: rgba(var(--tblr-primary-rgb), .12); color: var(--tblr-primary); }
.tb-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .65rem; border: 1px solid var(--app-control-edge); border-radius: 999px;
    background: var(--tblr-bg-surface); color: var(--tblr-body-color); font-size: .8125rem; font-weight: 500; line-height: 1.35; white-space: nowrap;
    text-decoration: none; box-shadow: 0 1px 2px rgba(16, 21, 38, .07); cursor: pointer; }
.tb-chip > .ti { font-size: 1rem; color: var(--tblr-secondary); }
.tb-chip:hover { border-color: var(--tblr-primary); color: var(--tblr-primary); text-decoration: none; }
.tb-chip:hover > .ti { color: inherit; }
.tb-chip.is-active, .tb-chip.is-active:hover { background: rgba(var(--tblr-primary-rgb), .1); border-color: var(--tblr-primary); color: var(--tblr-primary);
    box-shadow: inset 0 0 0 1px var(--tblr-primary); }
.tb-chip.is-active > .ti { color: inherit; }
.tb-chip.is-warn { border-color: rgba(var(--tblr-yellow-rgb), .9); background: rgba(var(--tblr-yellow-rgb), .12); }
.tb-chip-split { display: inline-flex; }
.tb-chip-split > .tb-chip:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tb-chip-split > .tb-chip + .tb-chip { margin-left: -1px; padding-left: .4rem; padding-right: .5rem; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tb-chip.dropdown-toggle::after { margin-left: 0; }
.tb-count { display: inline-block; min-width: 1.35rem; padding: .05rem .35rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
    line-height: 1.3; text-align: center; background: rgba(var(--tblr-secondary-rgb), .14); color: var(--tblr-body-color); }
.tb-count.is-orange { background: rgba(var(--tblr-orange-rgb), .16); color: var(--app-count-orange); }
.tb-count.is-red { background: rgba(var(--tblr-red-rgb), .14); color: var(--app-count-red); }
.tb-chip.is-active .tb-count { background: var(--tblr-primary); color: #fff; }
/* a page-level switch (Λίστα / Kanban / Έργα) as tall as the buttons beside it */
.tb-seg-lg .tb-seg-item { padding: .45rem .85rem; font-size: .875rem; }
/* filters inside a list card (not a .app-toolbar panel): the same clear edges */
.tb-controls .form-control, .tb-controls .form-select, .tb-controls .input-group-text { border-color: var(--app-control-edge); }
.tb-controls .form-control:hover, .tb-controls .form-select:hover { border-color: var(--app-control-edge-hover); }
.tb-chip > .ti-x { font-size: .85rem; margin-left: .1rem; }
.tb-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tb-sep { width: 1px; align-self: stretch; margin: .15rem .25rem; background: var(--tblr-border-color); }
.tb-stat { display: inline-flex; align-items: center; gap: .3rem; color: var(--tblr-secondary); font-size: .8125rem; white-space: nowrap; }
.tb-stat > .ti { font-size: 1rem; }
.tb-stat strong { color: var(--tblr-body-color); font-weight: 600; }
/* What each group is — «ΠΡΟΒΟΛΗ», «ΦΙΛΤΡΑ», «ΥΠΟΜΝΗΜΑ»… — and the grey strip at the foot of the
   panel for information only (legend, counts): nothing there is a control unless it looks like one. */
.tb-label { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tblr-secondary); white-space: nowrap; }
.app-toolbar > .tb-info { margin: .6rem -.75rem -.6rem; padding: .5rem .75rem; background: var(--app-info-bg); border-top: 1px solid var(--tblr-border-color);
    border-radius: 0 0 var(--tblr-border-radius-lg) var(--tblr-border-radius-lg); }
.tb-info > .tb-line { display: flex; align-items: baseline; gap: .9rem; }
.tb-info .tb-items { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; min-width: 0; }
.tb-info > .tb-line + .tb-line { margin-top: .35rem; }
.tb-info .tb-label { flex: 0 0 5.5rem; }

/* Χώροι → Χάρτης (Phase 2bt): the legend under the complex's name; the wifi mark of a room that holds an AP
   shows only while the map is about coverage (it would sit on the floor number of «Ορισμός ορόφων»). */
.map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; margin: 0 0 .75rem; font-size: .8125rem; color: var(--tblr-secondary); }
.map-legend > .tb-label { margin-right: .1rem; }
.installation-map .map-tile-ap { display: none; }
.installation-map[data-mode="cov"] .map-tile-ap, .installation-map.cov-map .map-tile-ap { display: inline-block; }

/* Password eye (fields.js — Εξέλιξη #28) and copy buttons beside a value (#29). */
.pw-eye-btn { color: var(--tblr-secondary); border-color: var(--tblr-border-color); }
.btn-copy-inline { padding: 0 .25rem; line-height: 1; color: var(--tblr-secondary); background: none; border: 0; vertical-align: baseline; }
.btn-copy-inline:hover { color: var(--tblr-primary); }

/* ── Έλεγχοι: field form photos + save bar (Phase 2bx) ── */
.insp-photo { position: relative; width: 72px; height: 72px; border-radius: 6px; background: var(--tblr-bg-surface-secondary, #f1f3f5); display: flex; align-items: center; justify-content: center; }
.insp-photo img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; display: block; }
.insp-photo [data-photo-del] { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 50%; }
.insp-photo.is-loading { opacity: .55; }
.insp-savebar { position: sticky; top: 0; z-index: 5; background: var(--tblr-body-bg, #fff); padding: .35rem 0; }
.card.border-danger { border-width: 2px; }
.insp-thumbs img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; }