/* ============================================================
   NPTEX — thin additive layer over NATIVE Veltrix v5.1.0.
   Philosophy: let Veltrix's own palette (primary #626ed4), spacing,
   shadows, cards, tables and modals do ALL the work. This file only
   adds a few components the theme doesn't ship, and routes them
   through Bootstrap/Veltrix theme variables — NO hardcoded colors.
   ============================================================ */

:root {
    /* Brand accent IS the Veltrix primary. Rebrand in one place if ever needed. */
    --nptex-accent: var(--bs-primary);
}

/* ---- Show/hide password toggle (nptex-password-toggle.js) ----
   Eye button injected next to every password field. Two shapes: a trailing
   .input-group-text addon when the field sits in a Bootstrap input-group, or an
   absolutely-positioned overlay on a bare .form-control. ---- */
.nptex-pw-toggle { cursor: pointer; user-select: none; }
.input-group > .nptex-pw-toggle {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border-left: 0;
}
.input-group > .nptex-pw-toggle:hover { color: var(--bs-primary); }
.nptex-pw-wrap { position: relative; }
.nptex-pw-wrap > .form-control { padding-right: 2.5rem; }
.nptex-pw-overlay {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 .75rem;
    color: var(--bs-secondary-color);
}
.nptex-pw-overlay:hover { color: var(--bs-primary); }
.nptex-pw-toggle:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }

/* ---- Typography: standardize on Roboto (Veltrix loads Sarabun for the
        menu; we keep one consistent family across the whole shell). ---- */
.vertical-menu,
#sidebar-menu,
.metismenu,
.page-title {
    font-family: 'Roboto', sans-serif;
}

/* ---- Page header row (<page-header> tag helper): flat title + actions ---- */
.page-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}
.page-header-title { font-size: 1.05rem; font-weight: 600; margin: 0; }

/* ---- Soft status badges (not shipped in app.min.css) — built entirely
        from Bootstrap 5.3 subtle/emphasis tokens, so they adapt to the
        active theme (light/dark) automatically. ---- */
.badge-soft-primary   { color: var(--bs-primary-text-emphasis);   background-color: var(--bs-primary-bg-subtle); }
.badge-soft-success   { color: var(--bs-success-text-emphasis);   background-color: var(--bs-success-bg-subtle); }
.badge-soft-danger    { color: var(--bs-danger-text-emphasis);    background-color: var(--bs-danger-bg-subtle); }
.badge-soft-warning   { color: var(--bs-warning-text-emphasis);   background-color: var(--bs-warning-bg-subtle); }
.badge-soft-info      { color: var(--bs-info-text-emphasis);      background-color: var(--bs-info-bg-subtle); }
.badge-soft-secondary { color: var(--bs-secondary-text-emphasis); background-color: var(--bs-secondary-bg-subtle); }

/* ---- Read-only key/value detail list ---- */
.detail-list { width: 100%; }
.detail-list .detail-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border-radius: 4px;
}
.detail-list .detail-row:nth-child(even) { background: var(--bs-tertiary-bg); }
.detail-list .detail-label { color: var(--bs-secondary-color); font-weight: 500; flex: 0 0 40%; }
.detail-list .detail-value { text-align: right; word-break: break-word; }

/* ---- Topbar custom text adapts to light/dark topbar ---- */
#offlineStatusIndicator { color: var(--bs-header-item-color, #bfbfc5); }

/* ---- Brand logo (inline SVG) sizing ---- */
.navbar-brand-box .nptex-logo-full { height: 22px; width: auto; vertical-align: middle; }
.navbar-brand-box .nptex-logo-mark { height: 26px; width: auto; vertical-align: middle; }