/* ==========================================================
   ORION UI V2
   SmartOLT-inspired operational layout.
   ORION branding remains independent.
========================================================== */

:root {

    --orion-bg: #f5f7fa;

    --orion-sidebar: #18212f;

    --orion-sidebar-hover: #222d3e;

    --orion-blue: #1677ff;

    --orion-blue-soft: #eaf3ff;

    --orion-text: #182230;

    --orion-muted: #667085;

    --orion-border: #e4e7ec;

    --orion-green: #079455;

    --orion-green-soft: #ecfdf3;

    --orion-red: #d92d20;

    --orion-red-soft: #fef3f2;

    --orion-orange: #dc6803;

    --orion-orange-soft: #fff6ed;

    --orion-purple: #6938ef;

    --orion-purple-soft: #f4f3ff;

    --orion-radius: 10px;

    --orion-shadow:
        0 1px 2px
        rgba(16, 24, 40, .04);
}

/* ==========================================================
   ORION GLOBAL COLOR THEME
   Shared tokens and compatibility layer for legacy screens.
========================================================== */

:root,
html[data-theme="light"] {
    color-scheme: light;
    --bg-primary: #f4f6f8;
    --bg-secondary: #f8fafc;
    --card-bg: #ffffff;
    --text-primary: #172033;
    --text-secondary: #667085;
    --border-color: #e4e7ec;
    --accent: #1677ff;
    --accent-soft: #eaf3ff;
    --sidebar-bg: #ffffff;
    --sidebar-hover: #f2f4f7;
    --sidebar-text: #344054;
    --sidebar-muted: #667085;
    --input-bg: #ffffff;
    --table-head-bg: #f8fafc;
    --overlay-bg: rgba(15, 23, 42, .48);
    --theme-shadow: 0 1px 3px rgba(16, 24, 40, .08);

    --orion-bg: var(--bg-primary);
    --orion-sidebar: var(--sidebar-bg);
    --orion-sidebar-hover: var(--sidebar-hover);
    --orion-blue: var(--accent);
    --orion-blue-soft: var(--accent-soft);
    --orion-text: var(--text-primary);
    --orion-muted: var(--text-secondary);
    --orion-border: var(--border-color);
    --orion-shadow: var(--theme-shadow);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg-primary: #0b1220;
    --bg-secondary: #111b2e;
    --card-bg: #111827;
    --text-primary: #f1f5f9;
    --text-secondary: #a7b2c3;
    --border-color: #283548;
    --accent: #20b8f0;
    --accent-soft: rgba(32, 184, 240, .14);
    --sidebar-bg: #0f1929;
    --sidebar-hover: #19263a;
    --sidebar-text: #edf5ff;
    --sidebar-muted: #91a0b5;
    --input-bg: #0d1727;
    --table-head-bg: #172337;
    --overlay-bg: rgba(2, 6, 23, .72);
    --theme-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

html,
body,
.layout,
.orion-v2-content {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

body,
aside,
main,
section,
header,
nav,
div,
table,
input,
select,
textarea,
button {
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.orion-v2-sidebar,
.sidebar {
    background: var(--sidebar-bg) !important;
    border-right-color: var(--border-color) !important;
    color: var(--sidebar-text) !important;
}

.orion-brand {
    min-height: 68px;
    padding: 2px 7px 14px;
}

.orion-brand-logo {
    display: block;
    width: 176px;
    max-width: 100%;
    height: 54px;
    object-fit: contain;
    object-position: left center;
}

.orion-brand-logo-dark,
html[data-theme="dark"] .orion-brand-logo-light {
    display: none;
}

html[data-theme="dark"] .orion-brand-logo-dark {
    display: block;
}

.orion-theme-toggle {
    width: calc(100% - 12px);
    margin: 0 6px 8px;
    min-height: 38px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-secondary);
    color: var(--sidebar-text);
    cursor: pointer;
    font: inherit;
    font-size:13.2px;
    font-weight: 700;
}

.orion-theme-toggle:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.orion-theme-sun { color: #f79009; font-size:19.2px; }
.orion-theme-moon { display: none; color: #7dd3fc; font-size:20.4px; }
html[data-theme="dark"] .orion-theme-sun { display: none; }
html[data-theme="dark"] .orion-theme-moon { display: inline; }

.orion-nav-caption,
.orion-brand span,
.orion-user-data small,
.orion-side-status span {
    color: var(--sidebar-muted) !important;
}

.orion-brand strong,
.orion-user-data strong,
.orion-side-status strong,
.orion-logout {
    color: var(--sidebar-text) !important;
}

.orion-nav a {
    color: var(--sidebar-text) !important;
}

.orion-nav a:hover,
.orion-nav a.active {
    background: var(--sidebar-hover) !important;
    color: var(--accent) !important;
}

.orion-nav a.active {
    box-shadow: inset 3px 0 0 var(--accent) !important;
}

.orion-nav-count,
.orion-user-avatar {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--sidebar-text) !important;
}

.panel,
.card,
.stat-card,
.olt-card,
.onu-card,
.device-card,
.metric-card,
.filter-card,
.table-card,
.login-card,
.modal-content,
.action-state-grid,
.onu-control-card,
.uni-card,
.save-check-card,
.orion-onu-table-wrap,
.orion-filter-panel,
.orion-stat-card,
.orion-olt-card,
.orion-dashboard-card,
.orion-modal,
.oc2-card,
.od-card,
.od-actions,
details {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--theme-shadow);
}

.panel-header,
.card-header,
.oc2-card-head,
.od-title,
.table-header,
.modal-header {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

h1, h2, h3, h4, h5, h6,
strong,
th,
label,
.value,
.v,
.metric-value,
.orion-value {
    color: var(--text-primary) !important;
}

p,
small,
.muted,
.subtitle,
.page-header p,
.panel-header p,
.k,
.od-note,
.oc2-hint,
.empty-state {
    color: var(--text-secondary) !important;
}

table,
tbody,
tr,
td {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

thead,
thead tr,
thead th,
.od-table th,
.oc2-optical th {
    background: var(--table-head-bg) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

tbody tr:hover,
.orion-onu-row:hover {
    background: var(--bg-secondary) !important;
}

input,
select,
textarea,
.search-input,
.filter-input {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary) !important;
    opacity: .78;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
    outline: none;
}

.btn-secondary,
.oc2-btn,
.od-btn:not(.primary):not(.live):not(.warn):not(.danger),
.pagination a,
.pagination span,
.orion-pagination a,
.orion-pagination span {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.btn-primary,
.btn,
.od-btn.primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}

.pagination .active,
.orion-pagination .active {
    background: var(--accent) !important;
    color: #ffffff !important;
}

.modal,
.od-modal,
.modal-backdrop {
    background-color: var(--overlay-bg) !important;
}

svg text,
.chart-label,
.chart-legend {
    fill: var(--text-secondary);
    color: var(--text-secondary) !important;
}

.chart-container,
.oc2-chart,
.od-chart,
canvas {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

.flash,
.badge,
.status-badge,
.onu-status,
.uni-status {
    border-color: var(--border-color);
}

@media (max-width: 760px) {
    .orion-brand-logo { width: 164px; height: 88px; }
    .orion-theme-toggle { width: calc(100% - 12px); }
}


/* ==========================================================
   BODY
========================================================== */

body {

    background:
        var(--orion-bg);

    color:
        var(--orion-text);
}


/* ==========================================================
   SIDEBAR
========================================================== */

.orion-v2-sidebar {

    width: 238px;

    padding: 18px 14px;

    background:
        var(--orion-sidebar);

    border-right:
        1px solid
        rgba(255,255,255,.04);

    z-index: 1000;
}


.orion-v2-content {

    margin-left: 238px;

    width:
        calc(
            100%
            -
            238px
        );

    padding:
        26px 32px 50px;
}


.orion-brand {

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        4px 6px 20px;

    margin-bottom: 4px;
}


.orion-brand-mark {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    background: #ffffff;

    color:
        var(--orion-sidebar);

    font-weight: 900;

    font-size:20.4px;
}


.orion-brand strong {

    display: block;

    font-size:16.8px;

    letter-spacing: .4px;
}


.orion-brand span {

    display: block;

    margin-top: 2px;

    color: #94a3b8;

    font-size:12px;
}


.orion-nav-caption {

    padding:
        18px 10px 7px;

    color: #697586;

    font-size:10.8px;

    font-weight: 800;

    letter-spacing: 1.1px;
}


.orion-nav {

    display: flex !important;

    flex-direction: column;

    gap: 3px !important;
}


.orion-nav a {

    min-height: 40px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        9px 10px !important;

    border-radius:
        7px !important;

    color:
        #cbd5e1 !important;

    font-size:14.4px !important;

    transition:
        .15s ease;
}


.orion-nav a:hover {

    background:
        var(--orion-sidebar-hover) !important;

    color:
        white !important;
}


.orion-nav a.active {

    background:
        #263447 !important;

    color:
        white !important;

    box-shadow:
        inset 3px 0
        var(--orion-blue);
}


.orion-nav-icon {

    width: 18px;

    text-align: center;

    font-size:16.8px;

    opacity: .95;
}


.orion-nav-count {

    margin-left: auto;

    min-width: 22px;

    padding: 2px 6px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.08);

    color: #dbe5f2;

    font-size:10.8px;

    text-align: center;
}


.orion-nav-count.attention {

    background:
        rgba(245,158,11,.18);

    color:
        #fbbf24;
}


.orion-side-status {

    padding:
        4px 9px;
}


.orion-side-status > div {

    display: grid;

    grid-template-columns:
        10px 1fr auto;

    align-items: center;

    gap: 7px;

    padding: 6px 0;

    color: #94a3b8;

    font-size:12px;
}


.orion-side-status strong {

    color: #e2e8f0;

    font-size:12px;
}


.status-dot {

    width: 6px;

    height: 6px;

    display: inline-block;

    border-radius: 50%;
}


.status-dot.online {

    background:
        #12b76a;
}


.status-dot.offline {

    background:
        #f04438;
}


.orion-user-area {

    display: grid;

    grid-template-columns:
        34px 1fr 26px;

    align-items: center;

    gap: 9px;

    padding:
        14px 5px 2px;

    border-top:
        1px solid
        rgba(255,255,255,.08);
}


.orion-user-avatar {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #344054;

    color: white;

    font-weight: 700;

    font-size:13.2px;
}

.orion-user-avatar svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
    display: block;
}


.orion-user-data {

    min-width: 0;
}


.orion-user-data strong {

    display: block;

    color: #f8fafc;

    font-size:13.2px;

    overflow: hidden;

    text-overflow:
        ellipsis;
}


.orion-user-data small {

    display: block;

    margin-top: 2px;

    color: #94a3b8;

    font-size:10.8px;
}


.orion-logout {

    color:
        #94a3b8 !important;

    text-align: center;

    font-size:19.2px;
}


.orion-mobile-menu {

    display: none;
}


/* ==========================================================
   PAGE HEADER
========================================================== */

.v2-page-head {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 21px;
}


.v2-page-head h1 {

    margin:
        3px 0 4px;

    font-size:30px;

    line-height: 1.2;

    letter-spacing: -.4px;
}


.v2-page-head p {

    margin: 0;

    color:
        var(--orion-muted);

    font-size:14.4px;
}


.v2-eyebrow {

    color:
        var(--orion-blue);

    font-size:10.8px;

    font-weight: 800;

    letter-spacing: 1.1px;
}


.v2-live-badge,
.v2-head-count {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 10px;

    border:
        1px solid
        var(--orion-border);

    border-radius: 999px;

    background: white;

    color: #344054;

    font-size:12px;

    font-weight: 600;
}


.v2-live-badge span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--orion-green);
}


.v2-head-count.attention {

    background:
        var(--orion-orange-soft);

    color:
        var(--orion-orange);

    border-color: #fedf89;
}


/* ==========================================================
   DASHBOARD CARDS
========================================================== */

.v2-stat-grid {

    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(
                0,
                1fr
            )
        );

    gap: 12px;

    margin-bottom: 18px;
}


.v2-stat-card {

    min-width: 0;

    padding: 15px;

    background: white;

    border:
        1px solid
        var(--orion-border);

    border-radius:
        var(--orion-radius);

    box-shadow:
        var(--orion-shadow);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}


.v2-stat-card:hover {

    transform:
        translateY(-1px);

    border-color:
        #cfd5dd;

    box-shadow:
        0 6px 18px
        rgba(16,24,40,.06);
}


.v2-stat-top {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 10px;
}


.v2-stat-top > span {

    color:
        var(--orion-muted);

    font-size:12px;

    font-weight: 600;
}


.v2-stat-card > strong {

    display: block;

    margin-top: 12px;

    font-size:30px;

    line-height: 1;

    letter-spacing: -.5px;
}


.v2-stat-card > small {

    display: block;

    margin-top: 7px;

    color:
        #98a2b3;

    font-size:10.8px;
}


.v2-stat-icon {

    width: 27px;

    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 7px;

    font-size:13.2px;

    font-weight: 800;
}


.v2-stat-icon.blue {

    background:
        var(--orion-blue-soft);

    color:
        var(--orion-blue);
}


.v2-stat-icon.green {

    background:
        var(--orion-green-soft);

    color:
        var(--orion-green);
}


.v2-stat-icon.red {

    background:
        var(--orion-red-soft);

    color:
        var(--orion-red);
}


.v2-stat-icon.orange {

    background:
        var(--orion-orange-soft);

    color:
        var(--orion-orange);
}


.v2-stat-icon.purple {

    background:
        var(--orion-purple-soft);

    color:
        var(--orion-purple);
}


.v2-dashboard-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(260px, .7fr);

    gap: 15px;
}


/* ==========================================================
   GLOBAL PANELS
========================================================== */

.panel {

    border-radius:
        var(--orion-radius);

    border-color:
        var(--orion-border);

    box-shadow:
        var(--orion-shadow);
}


.v2-panel {

    padding: 17px;
}


.panel-header h3,
.panel h3 {

    color:
        var(--orion-text);

    font-size:15.6px;
}


.panel-header p {

    font-size:12px;
}


.v2-text-link {

    color:
        var(--orion-blue);

    font-size:12px;

    font-weight: 600;
}


/* ==========================================================
   DEVICE LIST
========================================================== */

.v2-device-list {

    border-top:
        1px solid
        #f0f2f5;
}


.v2-device-row {

    display: grid;

    grid-template-columns:
        36px 1fr auto;

    align-items: center;

    gap: 10px;

    padding: 12px 3px;

    border-bottom:
        1px solid
        #f0f2f5;
}


.v2-device-row:hover {

    background:
        #fafbfc;
}


.v2-device-icon {

    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 7px;

    background:
        var(--orion-blue-soft);

    color:
        var(--orion-blue);

    font-size:13.2px;

    font-weight: 800;
}


.v2-device-main {

    min-width: 0;
}


.v2-device-main strong {

    display: block;

    font-size:13.2px;
}


.v2-device-main span {

    display: block;

    margin-top: 3px;

    color:
        var(--orion-muted);

    font-size:10.8px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow:
        ellipsis;
}


/* ==========================================================
   STATUS
========================================================== */

.v2-status {

    display: inline-flex;

    align-items: center;

    padding: 4px 8px;

    border-radius: 999px;

    font-size:10.8px;

    font-weight: 700;

    text-transform: capitalize;
}


.v2-status.online {

    background:
        var(--orion-green-soft);

    color:
        var(--orion-green);
}


.v2-status.offline {

    background:
        var(--orion-red-soft);

    color:
        var(--orion-red);
}


.v2-status.waiting {

    background:
        var(--orion-orange-soft);

    color:
        var(--orion-orange);
}


/* ==========================================================
   QUICK ACTION
========================================================== */

.v2-quick-grid {

    display: grid;

    gap: 9px;
}


.v2-quick-action {

    display: grid;

    grid-template-columns:
        32px 1fr;

    align-items: center;

    gap: 10px;

    padding: 11px;

    border:
        1px solid
        var(--orion-border);

    border-radius: 8px;

    background:
        #fcfcfd;
}


.v2-quick-action:hover {

    border-color:
        #b9c7da;

    background:
        white;
}


.v2-quick-action > b {

    width: 29px;

    height: 29px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 7px;

    background:
        var(--orion-blue-soft);

    color:
        var(--orion-blue);
}


.v2-quick-action strong {

    display: block;

    font-size:12px;
}


.v2-quick-action span {

    display: block;

    margin-top: 2px;

    color:
        var(--orion-muted);

    font-size:10.8px;
}


/* ==========================================================
   FILTERS
========================================================== */

.v2-filter-panel {

    padding: 12px;

    margin-bottom: 12px;
}


.v2-filter-form {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}


.v2-search-box {

    flex:
        1 1 300px;

    min-width: 220px;

    position: relative;
}


.v2-search-box span {

    position: absolute;

    left: 11px;

    top: 50%;

    transform:
        translateY(-50%);

    color: #98a2b3;

    pointer-events: none;
}


.v2-search-box input {

    width: 100%;

    padding:
        9px 10px 9px 31px !important;
}


.v2-filter-form input,
.v2-filter-form select {

    height: 36px;

    border:
        1px solid
        #d0d5dd;

    border-radius: 7px;

    background: white;

    color:
        var(--orion-text);

    font-size:12px;

    outline: none;
}


.v2-filter-form select {

    min-width: 135px;

    padding: 0 10px;
}


/* ==========================================================
   TABLES
========================================================== */

.v2-table-panel {

    padding: 0;

    overflow: hidden;
}


.v2-table th {

    background:
        #f9fafb;

    color:
        #667085;

    padding:
        10px 13px;

    font-size:10.8px;

    text-transform: uppercase;

    letter-spacing: .25px;
}


.v2-table td {

    padding:
        11px 13px;

    font-size:12px;
}


.v2-onu-name strong {

    display: block;

    color:
        var(--orion-text);

    font-size:12px;
}


.v2-onu-name small {

    display: block;

    margin-top: 3px;

    color:
        #98a2b3;

    font-size:9.6px;
}


.table-sub {

    display: block;

    margin-top: 3px;

    color:
        #98a2b3;

    font-size:9.6px;
}


.v2-open-btn {

    color:
        var(--orion-blue);

    font-size:10.8px;

    font-weight: 700;

    white-space: nowrap;
}


.v2-open-btn.primary {

    display: inline-flex;

    padding: 6px 9px;

    border-radius: 6px;

    background:
        var(--orion-blue);

    color: white;
}


/* ==========================================================
   EMPTY
========================================================== */

.v2-empty {

    display: flex;

    min-height: 130px;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

    color:
        var(--orion-muted);

    font-size:12px;
}


.v2-empty strong {

    color:
        var(--orion-text);

    font-size:14.4px;
}


.v2-empty.success strong {

    color:
        var(--orion-green);
}


/* ==========================================================
   OLD PAGE HEADER REFINEMENT
========================================================== */

.page-header {

    margin-bottom: 20px;
}


.page-header h1 {

    font-size:27.6px;

    letter-spacing: -.3px;
}


.page-header p,
.back {

    font-size:12px;
}


/* ==========================================================
   BUTTONS
========================================================== */

.btn,
.btn-secondary,
.btn-danger,
.btn-small,
.btn-warning,
.btn-danger-outline {

    min-height: 34px;

    border-radius: 7px;

    font-size:12px;
}


.btn {

    background:
        var(--orion-blue);
}


.btn:hover {

    background:
        #0b67d8;
}


.btn-secondary {

    background: white;

    border:
        1px solid
        #d0d5dd;

    color: #344054;
}


/* ==========================================================
   FORMS
========================================================== */

.form-group label {

    color:
        #344054;

    font-size:12px;

    font-weight: 600;
}


.form-group input,
.form-group select,
.form-group textarea {

    border-radius: 7px;

    border-color:
        #d0d5dd;

    font-size:13.2px;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color:
        var(--orion-blue);

    box-shadow:
        0 0 0 3px
        rgba(22,119,255,.08);
}


/* ==========================================================
   ONU DETAILS / TABS
========================================================== */

.orion-v2-tabs {

    gap: 0;
}


.orion-v2-tabs a {

    display: inline-flex;

    align-items: center;

    padding:
        11px 14px;

    color:
        var(--orion-muted);

    font-size:12px;

    border-bottom:
        2px solid transparent;
}


.orion-v2-tabs a:hover {

    color:
        var(--orion-text);
}


.orion-v2-tabs a.active {

    color:
        var(--orion-blue);

    border-bottom-color:
        var(--orion-blue);

    font-weight: 700;
}


/* ==========================================================
   LOGIN
========================================================== */

.login-body {

    background:
        #111827;
}


.login-card {

    width: 380px;

    padding: 35px;

    border-radius: 12px;

    box-shadow:
        0 24px 60px
        rgba(0,0,0,.28);
}


.login-logo {

    background:
        var(--orion-blue);

    border-radius: 9px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (
    max-width: 1100px
) {

    .v2-stat-grid {

        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }


    .v2-dashboard-grid {

        grid-template-columns:
            1fr;
    }

}


@media (
    max-width: 760px
) {

    .orion-v2-sidebar {

        transform:
            translateX(-100%);

        transition:
            transform .2s ease;
    }


    body.orion-menu-open
    .orion-v2-sidebar {

        transform:
            translateX(0);
    }


    .orion-v2-content {

        margin-left: 0;

        width: 100%;

        padding:
            65px 15px 35px;
    }


    .orion-mobile-menu {

        display: block;

        position: fixed;

        left: 14px;

        top: 14px;

        z-index: 1100;

        width: 36px;

        height: 36px;

        border: 0;

        border-radius: 8px;

        background:
            var(--orion-sidebar);

        color: white;

        cursor: pointer;
    }


    .v2-stat-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .v2-page-head {

        flex-direction: column;
    }


    .v2-filter-form {

        align-items: stretch;
    }


    .v2-filter-form select {

        flex: 1;
    }

}



/* ==========================================================
   ORION ONU OPTICAL SMARTOLT V1
========================================================== */

.orion-optical-panel {

    grid-column:
        1 / -1;

    padding: 0;

    overflow: hidden;
}


.orion-optical-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 16px 18px;

    border-bottom:
        1px solid
        var(
            --orion-border,
            #e4e7ec
        );
}


.orion-optical-head h3 {

    margin: 0 0 3px;

    font-size:15.6px;
}


.orion-optical-head p {

    margin: 0;

    color: #667085;

    font-size:10.8px;
}


.orion-optical-rx-summary {

    text-align: right;
}


.orion-optical-rx-summary > span {

    display: block;

    color: #667085;

    font-size:10.8px;
}


.orion-optical-rx-summary > strong {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 7px;

    margin-top: 3px;

    font-size:13.2px;
}


.orion-optical-rx-summary b {

    font-weight: 700;
}


.orion-optical-rx-summary i {

    color: #98a2b3;

    font-style: normal;
}


.orion-optical-table-wrap {

    overflow-x: auto;
}


.orion-optical-table {

    width: 100%;

    border-collapse: collapse;
}


.orion-optical-table th {

    padding: 9px 14px;

    background: #f9fafb;

    color: #667085;

    font-size:10.8px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .25px;
}


.orion-optical-table td {

    padding: 12px 14px;

    border-top:
        1px solid
        #f0f2f5;

    font-size:12px;
}


.orion-optical-table td > span {

    display: inline-block;

    margin-right: 5px;

    color: #667085;

    font-size:10.8px;
}


.orion-optical-table
td:first-child
strong,

.orion-optical-table
td:first-child
small {

    display: block;
}


.orion-optical-table
td:first-child
small {

    margin-top: 2px;

    color: #98a2b3;

    font-size:9.6px;
}


.orion-optical-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 14px;

    border-top:
        1px solid
        #f0f2f5;

    font-size:10.8px;
}


.orion-optical-footer span {

    color: #667085;
}


.orion-optical-note {

    padding: 5px 14px 10px;

    color: #98a2b3;

    font-size:9.6px;

    text-align: right;
}


.orion-optical-note.error {

    color: #b54708;
}


/*
Realtime bridge.
Tetap ada supaya script realtime lama masih bekerja,
tetapi tidak kelihatan di GUI.
*/

.orion-optical-legacy {

    display: none !important;
}


@media (
    max-width: 700px
) {

    .orion-optical-head {

        align-items: flex-start;

        flex-direction: column;
    }


    .orion-optical-rx-summary {

        text-align: left;
    }


    .orion-optical-rx-summary > strong {

        justify-content: flex-start;
    }

}




/* ==========================================================
   ORION ONU LIST OPTICAL V1
========================================================== */

.orion-optical-column {

    min-width: 210px;
}


.orion-list-optical {

    display: flex;

    flex-direction: column;

    gap: 7px;

    min-width: 200px;
}


.orion-list-optical-line {

    display: grid;

    grid-template-columns:
        24px
        1fr;

    gap: 7px;

    align-items: flex-start;
}


.orion-optical-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 20px;

    border-radius: 5px;

    background: #f2f4f7;

    color: #475467;

    font-size:9.6px;

    font-weight: 800;
}


.orion-list-optical-line > div {

    min-width: 0;
}


.orion-optical-pair {

    display: flex;

    align-items: center;

    gap: 5px;

    white-space: nowrap;

    font-size:12px;
}


.orion-optical-pair i {

    color: #98a2b3;

    font-style: normal;

    font-weight: 400;
}


.orion-optical-pair em {

    color: #667085;

    font-style: normal;

    font-size:9.6px;

    font-weight: 400;
}


.orion-optical-pair .onu-value {

    color: #101828;
}


.orion-optical-pair .olt-value {

    color: #1677ff;
}


.orion-list-optical-line small {

    display: block;

    margin-top: 1px;

    color: #98a2b3;

    font-size:8.4px;
}


/* ==========================================================
   PAGINATION
========================================================== */

.orion-pagination {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 12px 14px;

    border-top: 1px solid #eaecf0;

    background: #ffffff;
}


.orion-pagination-info {

    color: #667085;

    font-size:10.8px;
}


.orion-pagination-buttons {

    display: flex;

    align-items: center;

    gap: 8px;
}


.orion-pagination-buttons
.btn-secondary {

    min-height: 30px;

    padding: 6px 10px;
}


.orion-page-number {

    color: #475467;

    font-size:10.8px;
}


@media (
    max-width: 800px
) {

    .orion-pagination {

        align-items: flex-start;

        flex-direction: column;
    }

}




/* ==========================================================
   ORION ATTENTION CENTER CSS V1
========================================================== */


.orion-attention-stats {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 10px;

    margin-bottom: 12px;
}


.orion-att-stat {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 14px;

    border:
        1px solid
        #e4e7ec;

    border-radius: 9px;

    background: #ffffff;
}


.orion-att-stat span {

    font-size:10.8px;

    font-weight: 700;

    text-transform:
        uppercase;
}


.orion-att-stat strong {

    font-size:24px;
}


.orion-att-stat.critical {

    color: #b42318;

    background: #fef3f2;
}


.orion-att-stat.major {

    color: #b54708;

    background: #fff6ed;
}


.orion-att-stat.warning {

    color: #b54708;

    background: #fffaeb;
}


.orion-att-stat.info {

    color: #175cd3;

    background: #eff8ff;
}



.orion-severity {

    display: inline-flex;

    padding: 4px 8px;

    border-radius: 999px;

    font-size:9.6px;

    font-weight: 800;

    text-transform:
        uppercase;
}


.orion-severity.critical {

    background: #fef3f2;

    color: #b42318;
}


.orion-severity.major {

    background: #fff6ed;

    color: #b54708;
}


.orion-severity.warning {

    background: #fffaeb;

    color: #b54708;
}


.orion-severity.info {

    background: #eff8ff;

    color: #175cd3;
}



.orion-attention-issue strong {

    display: block;

    font-size:12px;
}


.orion-attention-issue small {

    display: block;

    margin-top: 3px;

    color: #667085;

    font-size:9.6px;
}


.orion-attention-note {

    margin-top: 8px;

    color: #98a2b3;

    font-size:9.6px;

    text-align: right;
}


@media (
    max-width: 760px
) {

    .orion-attention-stats {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}




/* ==========================================================
   ORION DASHBOARD SIGNAL WARNING CSS V1
========================================================== */


.orion-signal-warning-section {

    margin-top: 16px;
}


.orion-signal-warning-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 14px;

    margin-bottom: 10px;
}


.orion-signal-warning-heading h2 {

    margin:
        2px
        0
        2px;

    font-size:19.2px;
}


.orion-signal-warning-heading p {

    margin: 0;

    color: #667085;

    font-size:10.8px;
}


/* ==========================================================
   CARDS
========================================================== */

.orion-signal-warning-cards {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 10px;

    margin-bottom: 10px;
}


.orion-signal-warning-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 68px;

    padding: 12px 14px;

    border:
        1px solid
        #e4e7ec;

    border-radius: 9px;

    background: #ffffff;
}


.orion-signal-warning-card span {

    display: block;

    font-size:10.8px;

    font-weight: 800;

    letter-spacing: .03em;
}


.orion-signal-warning-card small {

    display: block;

    margin-top: 4px;

    font-size:9.6px;
}


.orion-signal-warning-card strong {

    font-size:28.8px;

    line-height: 1;
}


/* WARNING */

.orion-signal-warning-card.warning {

    background: #fffaeb;

    color: #b54708;
}


/* CRITICAL */

.orion-signal-warning-card.critical {

    background: #fef3f2;

    color: #b42318;
}


/* ==========================================================
   TABLE
========================================================== */

.orion-signal-warning-panel {

    padding: 0;

    overflow: hidden;
}


.orion-signal-warning-scroll {

    max-height: 470px;

    overflow-y: auto;

    overflow-x: auto;
}


.orion-signal-warning-table {

    width: 100%;
}


.orion-signal-warning-table thead th {

    position: sticky;

    top: 0;

    z-index: 2;

    background: #f9fafb;
}


/* ==========================================================
   BADGE
========================================================== */

.orion-signal-level {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 4px 8px;

    border-radius: 999px;

    font-size:9.6px;

    font-weight: 800;

    text-transform: uppercase;
}


.orion-signal-level.warning {

    background: #fffaeb;

    color: #b54708;
}


.orion-signal-level.critical {

    background: #fef3f2;

    color: #b42318;
}


.orion-signal-warning-value {

    color: #b54708;
}


.orion-signal-critical-value {

    color: #b42318;
}


/* ==========================================================
   EMPTY
========================================================== */

.orion-signal-clear {

    min-height: 120px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    color: #667085;
}


.orion-signal-clear strong {

    color: #027a48;

    font-size:13.2px;
}


.orion-signal-clear span {

    font-size:10.8px;
}


@media (
    max-width: 760px
) {

    .orion-signal-warning-cards {

        grid-template-columns:
            1fr;
    }

}




/* ==========================================================
   ORION DASHBOARD WARNING PAIR WANIP CSS V1
========================================================== */


.orion-dashboard-signal-pair {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    white-space: nowrap;

    font-size:12px;

    font-weight: 700;
}


.orion-dashboard-signal-pair i {

    color: #98a2b3;

    font-style: normal;

    font-weight: 400;
}


.orion-dashboard-signal-pair em {

    color: #667085;

    font-style: normal;

    font-size:9.6px;

    font-weight: 400;
}


.orion-dashboard-signal-pair.warning {

    color: #b54708;
}


.orion-dashboard-signal-pair.critical {

    color: #b42318;
}


.orion-dashboard-signal-pair .olt-value {

    color: #1677ff;
}





/* ==========================================================
   ORION OLT RX SIGNAL COLOR V2
========================================================== */


/* ==========================================================
   BAROMETER
========================================================== */

.orion-signal-barometer {

    display: flex;

    align-items: center;

    gap: 5px;

    flex-wrap: wrap;
}


.orion-signal-barometer span {

    padding: 4px 7px;

    border-radius: 999px;

    font-size:8.4px;

    font-weight: 800;
}


.orion-signal-barometer .blue {

    background: #eff8ff;

    color: #175cd3;
}


.orion-signal-barometer .green {

    background: #ecfdf3;

    color: #027a48;
}


.orion-signal-barometer .warning {

    background: #fffaeb;

    color: #b54708;
}


.orion-signal-barometer .critical {

    background: #fef3f2;

    color: #b42318;
}


/* ==========================================================
   /ONUS OLT RX COLOR
========================================================== */

.olt-rx-blue {

    color: #1570ef !important;
}


.olt-rx-green {

    color: #039855 !important;
}


.olt-rx-warning {

    color: #dc6803 !important;
}


.olt-rx-critical {

    color: #d92d20 !important;
}


/* ==========================================================
   DASHBOARD
========================================================== */

.orion-signal-live-loading {

    min-height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #667085;

    font-size:10.8px;
}


.orion-dashboard-signal-pair {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    white-space: nowrap;

    font-size:12px;

    font-weight: 700;
}


.orion-dashboard-signal-pair i {

    font-style: normal;

    color: #98a2b3;
}


.orion-dashboard-signal-pair em {

    font-style: normal;

    color: #667085;

    font-size:9.6px;
}


.orion-dashboard-signal-pair.warning
.olt-value {

    color: #dc6803;
}


.orion-dashboard-signal-pair.critical
.olt-value {

    color: #d92d20;
}


/* ONU RX kiri bukan penentu alarm */

.orion-dashboard-signal-pair
.onu-value {

    color: #101828;
}


@media (
    max-width: 760px
) {

    .orion-signal-warning-heading {

        align-items: flex-start;

        flex-direction: column;
    }

}




/* ==========================================================
   ORION DASHBOARD SIGNAL FILTER CSS V1
========================================================== */


/* Card sekarang button */

button.orion-signal-warning-card {

    width: 100%;

    font-family: inherit;

    cursor: pointer;

    outline: none;

    text-align: left;

    appearance: none;
}


button.orion-signal-warning-card:hover {

    transform: translateY(-1px);

    box-shadow:
        0 3px 8px
        rgba(16, 24, 40, .08);
}


/* ==========================================================
   WARNING SELECTED
========================================================== */

button.orion-signal-warning-card.warning.selected {

    border:
        2px solid
        #dc6803;

    box-shadow:
        0 0 0 3px
        rgba(220, 104, 3, .10);
}


/* ==========================================================
   CRITICAL SELECTED
========================================================== */

button.orion-signal-warning-card.critical.selected {

    border:
        2px solid
        #d92d20;

    box-shadow:
        0 0 0 3px
        rgba(217, 45, 32, .10);
}


/* Tidak ada subtitle lagi */

button.orion-signal-warning-card > span {

    display: block;

    margin: 0;

    font-size:10.8px;

    font-weight: 800;
}


button.orion-signal-warning-card > strong {

    margin-left: auto;
}


/* Biar selected lebih keliatan */

button.orion-signal-warning-card.selected {

    position: relative;
}


button.orion-signal-warning-card.selected::after {

    content: "✓";

    position: absolute;

    top: 7px;

    right: 10px;

    font-size:10.8px;

    font-weight: 900;
}


/* Count sedikit geser supaya tidak tabrakan centang */

button.orion-signal-warning-card.selected > strong {

    margin-right: 18px;
}





/* ==========================================================
   ORION SMART DASHBOARD CSS V1
========================================================== */


/* PAGE */

.orion-smart-page-head {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.orion-smart-page-head h1 {

    margin:
        3px
        0
        3px;

    font-size:28.8px;

    line-height: 1.1;
}


.orion-smart-page-head p {

    margin: 0;

    color: #667085;

    font-size:12px;
}


.orion-smart-online {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    border:
        1px solid
        #e4e7ec;

    border-radius: 999px;

    background: #ffffff;

    color: #344054;

    font-size:10.8px;

    white-space: nowrap;
}


.orion-smart-online i {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #12b76a;
}



/* ==========================================================
   4 SMART CARDS
========================================================== */

.orion-smart-summary {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 12px;
}


.orion-smart-card {

    overflow: hidden;

    min-width: 0;

    border:
        1px solid
        #e4e7ec;

    border-radius: 10px;

    background: #ffffff;

    text-decoration: none;

    transition:
        transform .12s ease,
        box-shadow .12s ease;
}


.orion-smart-card:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 4px 12px
        rgba(16,24,40,.08);
}


.orion-smart-card-main {

    min-height: 94px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 14px;
}


.orion-smart-icon {

    flex:
        0 0
        48px;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    font-size:36px;

    font-weight: 800;
}


.orion-smart-number {

    min-width: 0;

    flex: 1;

    text-align: right;
}


.orion-smart-number strong {

    display: block;

    font-size:38.4px;

    line-height: 1;

    font-weight: 600;
}


.orion-smart-number span {

    display: block;

    margin-top: 7px;

    font-size:12px;

    font-weight: 700;
}


.orion-smart-card-footer {

    min-height: 35px;

    display: flex;

    align-items: center;

    padding:
        7px
        12px;

    border-top:
        1px solid
        rgba(0,0,0,.05);

    font-size:10.8px;
}


.orion-smart-card-footer.multi {

    justify-content: space-between;

    gap: 8px;

    flex-wrap: wrap;
}



/* AUTH */

.orion-smart-card.authorization
.orion-smart-card-main {

    background: #eff8ff;

    color: #175cd3;
}


.orion-smart-card.authorization
.orion-smart-icon {

    background: #d1e9ff;
}


.orion-smart-card.authorization
.orion-smart-card-footer {

    color: #175cd3;

    background: #f5faff;
}



/* ONLINE */

.orion-smart-card.online
.orion-smart-card-main {

    background: #ecfdf3;

    color: #027a48;
}


.orion-smart-card.online
.orion-smart-icon {

    background: #d1fadf;
}


.orion-smart-card.online
.orion-smart-card-footer {

    color: #027a48;

    background: #f6fef9;
}



/* OFFLINE */

.orion-smart-card.offline
.orion-smart-card-main {

    background: #f2f4f7;

    color: #344054;
}


.orion-smart-card.offline
.orion-smart-icon {

    background: #eaecf0;
}


.orion-smart-card.offline
.orion-smart-card-footer {

    color: #475467;

    background: #f9fafb;
}



/* LOW SIGNAL */

.orion-smart-card.low-signal
.orion-smart-card-main {

    background: #fffaeb;

    color: #b54708;
}


.orion-smart-card.low-signal
.orion-smart-icon {

    background: #fef0c7;
}


.orion-smart-card.low-signal
.orion-smart-card-footer {

    color: #b54708;

    background: #fffdf5;
}



.orion-smart-valid {

    margin:
        7px
        2px
        16px;

    color: #667085;

    font-size:9.6px;

    text-align: right;
}



/* ==========================================================
   MAIN GRID
========================================================== */

.orion-smart-main-grid {

    display: grid;

    grid-template-columns:
        minmax(
            0,
            2fr
        )
        minmax(
            280px,
            .9fr
        );

    gap: 14px;

    margin-bottom: 18px;
}


.orion-smart-panel {

    padding: 0;

    overflow: hidden;
}


.orion-smart-panel-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding:
        14px
        16px;

    border-bottom:
        1px solid
        #eaecf0;
}


.orion-smart-panel-head h3 {

    margin: 0;

    font-size:14.4px;
}


.orion-smart-panel-head p {

    margin:
        3px
        0
        0;

    color: #98a2b3;

    font-size:9.6px;
}


.orion-smart-panel-head > a {

    color: #1677ff;

    font-size:10.8px;
}



/* OLT LIST */

.orion-smart-olt-list {

    min-height: 100px;
}


.orion-smart-loading {

    min-height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #98a2b3;

    font-size:10.8px;
}


.orion-smart-olt-row {

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        12px
        16px;

    border-bottom:
        1px solid
        #f2f4f7;

    text-decoration: none;

    color: inherit;
}


.orion-smart-olt-row:last-child {

    border-bottom: 0;
}


.orion-smart-olt-row:hover {

    background: #f9fafb;
}


.orion-smart-olt-icon {

    flex:
        0 0
        32px;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 7px;

    background: #eff8ff;

    color: #1570ef;

    font-size:12px;

    font-weight: 900;
}


.orion-smart-olt-info {

    flex: 1;

    min-width: 0;
}


.orion-smart-olt-info strong {

    display: block;

    font-size:12px;
}


.orion-smart-olt-info small {

    display: block;

    margin-top: 3px;

    color: #667085;

    font-size:9.6px;
}


.orion-smart-olt-status {

    padding: 4px 8px;

    border-radius: 999px;

    font-size:9.6px;

    font-weight: 700;

    text-transform: capitalize;
}


.orion-smart-olt-status.online {

    color: #027a48;

    background: #ecfdf3;
}


.orion-smart-olt-status.offline {

    color: #b42318;

    background: #fef3f2;
}



/* QUICK ACCESS */

.orion-smart-quick {

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 12px;
}


.orion-smart-quick a {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 10px;

    border:
        1px solid
        #e4e7ec;

    border-radius: 8px;

    color: #101828;

    text-decoration: none;
}


.orion-smart-quick a:hover {

    border-color: #84caff;

    background: #f5faff;
}


.orion-smart-quick a > span {

    flex:
        0 0
        31px;

    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 7px;

    background: #eff8ff;

    color: #1570ef;

    font-size:20.4px;

    font-weight: 700;
}


.orion-smart-quick strong {

    display: block;

    font-size:10.8px;
}


.orion-smart-quick small {

    display: block;

    margin-top: 2px;

    color: #667085;

    font-size:9.6px;
}



/* ==========================================================
   SIGNAL FILTER
========================================================== */

button.orion-signal-warning-card {

    width: 100%;

    cursor: pointer;

    font-family: inherit;

    appearance: none;

    text-align: left;
}


button.orion-signal-warning-card.selected {

    position: relative;
}


button.orion-signal-warning-card.warning.selected {

    border:
        2px solid
        #dc6803;

    box-shadow:
        0 0 0 3px
        rgba(220,104,3,.10);
}


button.orion-signal-warning-card.critical.selected {

    border:
        2px solid
        #d92d20;

    box-shadow:
        0 0 0 3px
        rgba(217,45,32,.10);
}


button.orion-signal-warning-card.selected::after {

    content: "✓";

    position: absolute;

    right: 10px;

    top: 8px;

    font-size:12px;

    font-weight: 900;
}



/* ==========================================================
   RESPONSIVE
========================================================== */

@media (
    max-width: 1100px
) {

    .orion-smart-summary {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


@media (
    max-width: 800px
) {

    .orion-smart-main-grid {

        grid-template-columns:
            1fr;
    }

}


@media (
    max-width: 600px
) {

    .orion-smart-summary {

        grid-template-columns:
            1fr;
    }


    .orion-smart-page-head {

        flex-direction: column;
    }


    .orion-smart-card-main {

        min-height: 82px;
    }

}




/* ==========================================================
   ORION OFFLINE DRILLDOWN CSS V1
========================================================== */


.orion-offline-drilldown {

    display: inline-flex;

    align-items: center;

    gap: 3px;

    padding: 3px 5px;

    margin: -3px -5px;

    border-radius: 5px;

    cursor: pointer;

    transition:
        background .12s ease,
        color .12s ease;
}


.orion-offline-drilldown:hover {

    background:
        rgba(
            52,
            64,
            84,
            .09
        );

    color: #101828;
}


.orion-offline-drilldown:focus {

    outline:
        1px solid
        #98a2b3;

    outline-offset: 1px;
}


.orion-offline-drilldown b {

    font-weight: 800;
}





/* ==========================================================
   ORION DASHBOARD LIVE STATUS CSS V1
========================================================== */


.orion-smart-valid {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 8px;
}


.orion-live-state {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding:
        3px
        7px;

    border-radius:
        999px;

    font-size:8.4px;

    font-weight:
        800;

    letter-spacing:
        .03em;
}


.orion-live-state i {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;
}


/* LIVE */

.orion-live-state.live {

    color:
        #027a48;

    background:
        #ecfdf3;
}


.orion-live-state.live i {

    background:
        #12b76a;

    box-shadow:
        0 0 0 3px
        rgba(
            18,
            183,
            106,
            .10
        );
}


/* STALE */

.orion-live-state.stale {

    color:
        #b54708;

    background:
        #fffaeb;
}


.orion-live-state.stale i {

    background:
        #f79009;
}


/* ERROR */

.orion-live-state.error {

    color:
        #b42318;

    background:
        #fef3f2;
}


.orion-live-state.error i {

    background:
        #f04438;
}


#orion-live-updated {

    font-weight:
        700;

    color:
        #344054;
}





/* ==========================================================
   ORION OLT DEVICE MANAGER CSS V1
========================================================== */

.orion-olt-device-tabs {

    display: flex;

    align-items: center;

    gap: 5px;

    width: fit-content;

    max-width: 100%;

    margin-bottom: 14px;

    padding: 4px;

    overflow-x: auto;

    border: 1px solid #e4e7ec;

    border-radius: 9px;

    background: #ffffff;
}


.orion-olt-device-tabs a {

    display: inline-flex;

    align-items: center;

    min-height: 31px;

    padding: 6px 11px;

    border-radius: 6px;

    color: #667085;

    font-size:10.8px;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}


.orion-olt-device-tabs a:hover {

    color: #175cd3;

    background: #f5faff;
}


.orion-olt-device-tabs a.active {

    color: #175cd3;

    background: #eff8ff;
}


.orion-device-panel {

    padding: 0;

    overflow: hidden;
}


.orion-device-count {

    padding: 5px 8px;

    border-radius: 999px;

    background: #f2f4f7;

    color: #475467;

    font-size:9.6px;

    font-weight: 700;
}


.orion-device-type {

    display: inline-flex;

    padding: 4px 7px;

    border-radius: 999px;

    background: #f2f4f7;

    color: #475467;

    font-size:9.6px;

    font-weight: 800;
}


.orion-device-type.pon {

    background: #eff8ff;

    color: #175cd3;
}


.orion-device-type.uplink {

    background: #ecfdf3;

    color: #027a48;
}


.orion-device-type.power {

    background: #fffaeb;

    color: #b54708;
}


.orion-device-unknown {

    padding: 4px 7px;

    border-radius: 999px;

    background: #f2f4f7;

    color: #667085;

    font-size:9.6px;

    font-weight: 700;
}


.orion-vlan-toolbar {

    padding: 12px 14px;

    border-bottom: 1px solid #eaecf0;
}


.orion-vlan-toolbar input {

    width: 260px;

    max-width: 100%;
}


.orion-vlan-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                105px,
                1fr
            )
        );

    gap: 8px;

    padding: 14px;
}


.orion-vlan-chip {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    padding: 9px 10px;

    border: 1px solid #eaecf0;

    border-radius: 7px;

    background: #ffffff;
}


.orion-vlan-chip span {

    color: #98a2b3;

    font-size:8.4px;
}


.orion-vlan-chip strong {

    font-size:12px;
}


.orion-pon-action {

    text-align: right;
}


.orion-pon-action form {

    display: inline-block;

    margin: 0;
}


.orion-small-btn {

    min-height: 28px !important;

    padding: 5px 9px !important;

    font-size:9.6px !important;
}





/* ==========================================================
   ORION OLT UPLINK MANAGER CSS V1
========================================================== */


.orion-uplink-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                390px,
                1fr
            )
        );

    gap: 12px;
}


.orion-uplink-card {

    overflow: hidden;

    padding: 0;
}


.orion-uplink-head {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;

    padding: 14px;

    border-bottom:
        1px solid
        #eaecf0;
}


.orion-uplink-head h3 {

    margin:
        3px
        0
        0;

    font-size:15.6px;
}


.orion-uplink-head small {

    display: block;

    margin-top: 4px;

    color: #667085;

    font-size:9.6px;
}


.orion-uplink-meta {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    border-bottom:
        1px solid
        #eaecf0;
}


.orion-uplink-meta > div {

    padding: 10px 12px;

    border-right:
        1px solid
        #f2f4f7;
}


.orion-uplink-meta > div:last-child {

    border-right: 0;
}


.orion-uplink-meta span {

    display: block;

    color: #98a2b3;

    font-size:8.4px;

    text-transform: uppercase;
}


.orion-uplink-meta strong {

    display: block;

    margin-top: 3px;

    font-size:10.8px;
}


.orion-uplink-section {

    padding: 13px 14px;
}


.orion-uplink-section-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 9px;
}


.orion-uplink-section-title strong {

    font-size:10.8px;
}


.orion-uplink-section-title span {

    color: #667085;

    font-size:9.6px;
}


.orion-uplink-vlans {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}


.orion-uplink-vlan-chip {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        5px
        6px
        5px
        9px;

    border:
        1px solid
        #d0d5dd;

    border-radius: 7px;

    background: #ffffff;
}


.orion-uplink-vlan-chip > div {

    display: flex;

    align-items: center;

    gap: 5px;
}


.orion-uplink-vlan-chip strong {

    font-size:10.8px;
}


.orion-uplink-vlan-chip span {

    color: #98a2b3;

    font-size:7.2px;
}


.orion-uplink-vlan-chip form {

    margin: 0;
}


.orion-uplink-vlan-chip button {

    width: 20px;

    height: 20px;

    padding: 0;

    border: 0;

    border-radius: 5px;

    background: #fef3f2;

    color: #b42318;

    cursor: pointer;

    font-weight: 800;
}


.orion-uplink-vlan-chip button:hover {

    background: #fee4e2;
}


.orion-uplink-empty {

    color: #98a2b3;

    font-size:9.6px;
}


.orion-uplink-add {

    padding: 12px 14px;

    border-top:
        1px solid
        #eaecf0;

    background: #f9fafb;
}


.orion-uplink-add form {

    display: flex;

    align-items: center;

    gap: 8px;
}


.orion-uplink-add select {

    flex: 1;

    min-width: 0;
}


.orion-uplink-add small {

    display: block;

    margin-top: 6px;

    color: #667085;

    font-size:8.4px;
}


@media (
    max-width: 700px
) {

    .orion-uplink-grid {

        grid-template-columns:
            1fr;
    }


    .orion-uplink-meta {

        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }

}





/* ==========================================================
   ORION OLT UPLINK MANAGER CSS V2
========================================================== */


.orion-uplink-head-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 7px;

    flex-wrap: wrap;
}


.orion-uplink-head-actions form {

    margin: 0;
}


.uplink-small-btn {

    min-height: 27px !important;

    padding: 5px 8px !important;

    font-size:9.6px !important;
}


.uplink-mode-box {

    padding: 11px 14px;

    border-bottom: 1px solid #eaecf0;

    background: #fcfcfd;
}


.uplink-mode-box label {

    display: block;

    margin-bottom: 5px;

    color: #667085;

    font-size:8.4px;

    font-weight: 700;

    text-transform: uppercase;
}


.uplink-mode-box form {

    display: flex;

    gap: 7px;

    align-items: center;
}


.uplink-mode-box select {

    flex: 1;
}


.uplink-mode-box small {

    display: block;

    margin-top: 5px;

    color: #667085;

    font-size:8.4px;
}


.uplink-add-title {

    display: block;

    margin-bottom: 6px;

    font-size:9.6px;
}


.orion-uplink-add form {

    display: grid;

    grid-template-columns:
        minmax(
            130px,
            1fr
        )
        120px
        auto;

    gap: 7px;
}


.orion-uplink-add input,

.orion-uplink-add select {

    width: 100%;

    min-width: 0;
}


@media (
    max-width: 700px
) {


    .orion-uplink-add form {

        grid-template-columns:
            1fr;
    }


    .uplink-mode-box form {

        flex-direction: column;

        align-items: stretch;
    }

}





/* ==========================================================
   ORION OLT CARD REBOOT CSS V1
========================================================== */

.orion-card-action {
    text-align: right;
    white-space: nowrap;
}

.orion-card-action form {
    display: inline-block;
    margin: 0;
}

.orion-card-reboot-btn {
    min-height: 27px !important;
    padding: 5px 9px !important;
    font-size:9.6px !important;
}

.orion-card-protected {
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #667085;
    font-size:8.4px;
    font-weight: 700;
}





/* ==========================================================
   ORION INTERNET SERVICE CATALOG CSS V1
========================================================== */

.orion-service-catalog-hint {
    display: block;
    margin-top: 5px;
    color: #667085;
    font-size:8.4px;
}

.orion-service-catalog-hint.loaded {
    color: #027a48;
}

.orion-service-catalog-hint.loaded::before {
    content: "✓ ";
}

.orion-service-catalog-hint.error {
    color: #b42318;
}

.orion-catalog-loading {
    opacity: .65;
    cursor: progress;
}



/* ==========================================================
   ORION REGISTERED ONU SMARTOLT-LIKE LIST V1
========================================================== */
.onu-list-head{align-items:flex-end;margin-bottom:16px}.onu-list-head .v2-head-count{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.onu-list-head .v2-head-count strong{font-size:28.8px;line-height:1}.onu-list-head .v2-head-count span{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.14em}.onu-smart-filter-panel{padding:14px;margin-bottom:16px;border-radius:12px;background:var(--card-bg);border:1px solid var(--border-color)}.onu-smart-filter-form{display:flex;flex-direction:column;gap:12px}.onu-smart-search-row{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;gap:10px;align-items:end}.onu-smart-search-field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13.2px;font-weight:800;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em}.onu-smart-search-field input,.onu-smart-filter-grid select,.onu-smart-vlan-field summary{min-height:38px;border-radius:8px;border:1px solid var(--border-color);background:var(--input-bg);color:var(--text-primary);font-size:14.4px}.onu-smart-filter-grid{grid-template-columns:repeat(7,minmax(130px,1fr));gap:10px}.onu-smart-filter-grid>label,.onu-smart-vlan-field{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary)}.onu-smart-chip-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:2px}.onu-smart-chip-row>span:first-child{font-size:12px;font-weight:900;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.10em;min-width:48px}.onu-smart-chip,.onu-smart-mode-pill{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:6px 10px;border:1px solid var(--border-color);border-radius:999px;background:var(--bg-secondary);color:var(--text-secondary);font-size:13.2px;font-weight:800;text-decoration:none}.onu-smart-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.onu-smart-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}.onu-smart-chip.signal-good.active{background:#16a34a;border-color:#16a34a}.onu-smart-chip.signal-warning.active{background:#d97706;border-color:#d97706}.onu-smart-chip.signal-critical.active{background:#dc2626;border-color:#dc2626}.onu-smart-mode-pill{margin-left:auto;color:var(--text-secondary)}.onu-smart-filter-note{border-top:1px solid var(--border-color);padding-top:12px;margin-top:14px}.onu-smart-table-panel{border-radius:12px;background:var(--card-bg);border:1px solid var(--border-color);overflow:hidden}.onu-smart-table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border-color);background:var(--card-bg);color:var(--text-secondary);font-size:14.4px}.onu-smart-table-toolbar strong{font-weight:900}.onu-smart-top-pagination{display:flex;align-items:center;gap:8px}.onu-smart-top-pagination span{font-size:13.2px;color:var(--text-secondary)}.onu-smart-table-wrap{overflow:auto}.onu-smart-table{min-width:1320px;border-collapse:separate;border-spacing:0}.onu-smart-table th{position:sticky;top:0;z-index:1;height:38px;background:var(--table-head-bg);color:var(--text-secondary);border-bottom:1px solid var(--border-color);font-size:10.8px;font-weight:900;letter-spacing:.12em;white-space:nowrap}.onu-smart-table td{height:48px;border-bottom:1px solid var(--border-color);color:var(--text-primary);vertical-align:middle;white-space:nowrap}.onu-smart-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--card-bg) 92%,var(--bg-secondary))}.onu-smart-table tbody tr:hover td{background:var(--bg-secondary)!important}.onu-status-icon{display:inline-flex;width:22px;height:22px;border-radius:7px;align-items:center;justify-content:center;border:1px solid var(--border-color);background:var(--bg-secondary)}.onu-status-icon::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--text-secondary);box-shadow:0 0 0 3px color-mix(in srgb,var(--text-secondary) 16%,transparent)}.onu-status-icon.online::after{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}.onu-status-icon.offline::after,.onu-status-icon.non-online::after{background:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.18)}.onu-status-icon.los::after,.onu-status-icon.dying-gasp::after{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.18)}.onu-status-icon.unknown::after{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}.onu-view-button{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:6px 11px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-size:13.2px;font-weight:900;text-decoration:none;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border-color))}.onu-view-button:hover{background:var(--accent);color:#fff}.onu-name-cell strong{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.onu-name-cell small{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.onu-signal-cell{display:inline-flex;align-items:center;gap:8px}.onu-signal-bars{display:inline-flex;align-items:flex-end;gap:2px;width:16px;height:15px}.onu-signal-bars i{display:block;width:4px;border-radius:2px;background:var(--text-secondary);opacity:.55}.onu-signal-bars i:nth-child(1){height:5px}.onu-signal-bars i:nth-child(2){height:10px}.onu-signal-bars i:nth-child(3){height:15px}.onu-signal-cell.good .onu-signal-bars i{background:#22c55e;opacity:1}.onu-signal-cell.warning .onu-signal-bars i{background:#f59e0b;opacity:1}.onu-signal-cell.critical .onu-signal-bars i{background:#ef4444;opacity:1}.onu-signal-cell.good .onu-value{color:#16a34a}.onu-signal-cell.warning .onu-value{color:#d97706}.onu-signal-cell.critical .onu-value{color:#dc2626}.onu-signal-cell.unknown .onu-value{color:var(--text-secondary)}.onu-signal-cell .orion-rx-pair{display:inline-flex;align-items:baseline;gap:4px;color:var(--text-primary)}.onu-signal-cell .orion-rx-pair i,.onu-signal-cell .orion-rx-pair em,.onu-signal-cell .olt-value{color:var(--text-secondary);font-style:normal;font-size:12px}.onu-mode-chip{display:inline-flex;align-items:center;min-height:24px;padding:4px 8px;border-radius:999px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-secondary);font-size:12px;font-weight:900}.onu-smart-pagination{background:var(--card-bg);border-top:1px solid var(--border-color)}#onu-live-status{margin-top:10px;color:var(--text-secondary);font-size:13.2px}.registered-vlan-options{background:var(--card-bg)!important;border-color:var(--border-color)!important;color:var(--text-primary)!important}.registered-vlan-options label{color:var(--text-primary)!important}.registered-vlan-options span{color:var(--text-secondary)!important}
html[data-theme="dark"] .onu-smart-table tbody tr:nth-child(even) td{background:#101b2d!important}html[data-theme="dark"] .onu-smart-table tbody tr:hover td{background:#172337!important}html[data-theme="dark"] .onu-view-button{background:rgba(32,184,240,.13);border-color:rgba(32,184,240,.38);color:#7dd3fc}html[data-theme="dark"] .onu-view-button:hover{background:#20b8f0;color:#04111d}html[data-theme="dark"] .onu-mode-chip{background:#0d1727;color:#cbd5e1}.onu-smart-empty{padding:36px 16px}
@media(max-width:1200px){.onu-smart-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.onu-list-head{align-items:flex-start;flex-direction:column}.onu-list-head .v2-head-count{align-items:flex-start}.onu-smart-search-row{grid-template-columns:1fr}.onu-smart-filter-grid{grid-template-columns:1fr}.onu-smart-mode-pill{margin-left:0}.onu-smart-table-toolbar{align-items:flex-start;flex-direction:column}.onu-smart-top-pagination{flex-wrap:wrap}.onu-filter-submit,.onu-filter-reset{width:100%;justify-content:center}}