/* ioJump icon primitives — see inc/icons.php (PHP) and js/icons.js (browser).
   Loaded by _dashboard_topnav.php, so every authenticated page gets it. */

.io-ico {
    display: inline-block;
    vertical-align: -0.16em;   /* optically centres a 16px icon on 14px text */
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    overflow: visible;         /* stops 1.75px strokes clipping at the viewbox edge */
    pointer-events: none;      /* clicks always land on the button, not the glyph */
}

/* Inside a flex row (buttons, nav items) baseline nudging is wrong — reset it. */
.btn .io-ico,
button .io-ico,
.nav-icon .io-ico,
.app-menu-item .io-ico,
.user-dropdown-item .io-ico,
.section-tab .io-ico,
.noc-subtab .io-ico {
    vertical-align: 0;
}

/* Solid variant — used for the "favourited" star and other on/off toggles. */
.io-ico-fill { fill: currentColor; }

/* Slightly lighter strokes read better at large sizes. */
.io-ico-thin { stroke-width: 1.5; }
.io-ico-bold { stroke-width: 2.25; }

/* Muted icon next to body copy. */
.io-ico-muted { opacity: .62; }

/* Spinning refresh icon for in-flight actions. */
.io-ico-spin { animation: io-ico-spin 900ms linear infinite; transform-origin: 50% 50%; }
@keyframes io-ico-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .io-ico-spin { animation: none; } }

/* ---- status dots -------------------------------------------------------
   Replaces the 🟢/🔴/🟡/⚪ traffic lights. A dot plus a text label beats a
   colour-only signal for colour-blind users, so these are always paired with
   words in the markup. */
.io-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: 0.04em;
    background: #64748b;
    box-shadow: 0 0 0 2px rgba(100, 116, 139, .18);
}
.io-dot-online  { background: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, .2); }
.io-dot-offline { background: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, .18); }
.io-dot-warn    { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, .2); }
.io-dot-idle    { background: #94a3b8; box-shadow: 0 0 0 2px rgba(148, 163, 184, .2); }
.io-dot-unknown { background: #475569; box-shadow: 0 0 0 2px rgba(71, 85, 105, .22); }

/* Live pulse for "connected right now". */
.io-dot-online.io-dot-live { animation: io-dot-pulse 2.4s ease-in-out infinite; }
@keyframes io-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(34, 197, 94, .2); }
    50%      { box-shadow: 0 0 0 4px rgba(34, 197, 94, .08); }
}
@media (prefers-reduced-motion: reduce) { .io-dot-live { animation: none; } }

/* Inline "icon + label" pairing used in tables and chips. */
.io-ico-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ---- search fields -----------------------------------------------------
   The magnifier used to live in the placeholder text ("🔍 Search devices…"),
   which meant it vanished the moment you typed. As a background icon it stays
   put, so the field still reads as "search" while it holds a query. Applied to
   every type=search input plus the .search class the app's tables use. */
input[type="search"],
input.search,
input.agents-search,
input.drawer-search,
input.pw-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20.5 20.5-4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px 50%;
    padding-left: 32px;
}
/* Chrome/Safari draw their own clear button; keep it from colliding. */
input[type="search"]::-webkit-search-cancel-button { margin-left: 4px; }

/* ---- keyboard focus ----------------------------------------------------
   Many controls in the app had no visible focus state at all, so tabbing
   through a page was invisible. :focus-visible only paints for keyboard
   users — mouse and touch interaction is unchanged. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}