/* ───────────────────────────────────────────────────────────────────────────── Iconwave ACS — Dark NOC Enterprise Theme ───────────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap'); :root { /* ── Background layers ─────────────────────────────────────────────────── */ --bg-0: #0d1117; --bg-1: #161b22; --bg-2: #21262d; --bg-3: #30363d; --bg-4: #3d444d; /* ── Borders ───────────────────────────────────────────────────────────── */ --border: #30363d; --border-muted: #21262d; --border-sub: #1c2128; /* ── Text ──────────────────────────────────────────────────────────────── */ --text: #e6edf3; --text-2: #c9d1d9; --text-3: #8b949e; --text-4: #6e7681; /* ── Status / Brand colors ─────────────────────────────────────────────── */ --green: #3fb950; --green-2: #238636; --green-bg: rgba(63,185,80,.08); --blue: #58a6ff; --blue-2: #1f6feb; --blue-bg: rgba(88,166,255,.08); --amber: #d29922; --amber-bg: rgba(210,153,34,.08); --red: #f85149; --red-bg: rgba(248,81,73,.08); --purple: #bc8cff; --teal: #39d353; --cyan: #79c0ff; /* ── Sidebar ───────────────────────────────────────────────────────────── */ --sb-bg: #010409; --sb-border: #21262d; --sb-text: #848d97; --sb-hover: rgba(177,186,196,.08); --sb-active-bg: rgba(88,166,255,.1); --sb-active-text: #58a6ff; --sb-head: #e6edf3; --sb-muted: #484f58; --sidebar-w: 256px; --sidebar-collapsed-w: 60px; /* ── Hardware palette ──────────────────────────────────────────────────── */ --hw-body: #161b22; --hw-panel: #1c2128; --hw-bezel: #0d1117; --hw-screw: #21262d; --hw-port-bg: #0d1117; --hw-port-idle: #21262d; --hw-active: rgba(63,185,80,.12); --hw-active-border: rgba(63,185,80,.35); --hw-led-on: #3fb950; --hw-led-off: #1c2128; --hw-led-amber: #d29922; --hw-led-red: #f85149; --hw-led-blue: #58a6ff; /* ── Misc ──────────────────────────────────────────────────────────────── */ --topbar-h: 60px; --radius: 8px; --radius-lg: 12px; --shadow: 0 1px 3px rgba(1,4,9,.4), 0 4px 16px rgba(1,4,9,.2); --shadow-lg: 0 8px 32px rgba(1,4,9,.6); --trans: .15s ease; --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'JetBrains Mono', 'Fira Code', monospace; } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT THEME OVERRIDES (applied when ) ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { --bg-0: #f6f8fa; --bg-1: #ffffff; --bg-2: #f3f4f6; --bg-3: #e1e4e8; --bg-4: #d0d7de; --border: #d0d7de; --border-muted: #eaecef; --border-sub: #eaecef; --text: #1f2328; --text-2: #25292f; --text-3: #57606a; --text-4: #6e7781; --green: #1a7f37; --green-2: #2da44e; --green-bg: rgba(26,127,55,.1); --blue: #0969da; --blue-2: #0550ae; --blue-bg: rgba(9,105,218,.1); --amber: #9a6700; --amber-bg: rgba(154,103,0,.1); --red: #d1242f; --red-bg: rgba(209,36,47,.1); --purple: #8250df; --teal: #1a7f37; --cyan: #0969da; /* Sidebar stays dark in light mode — classic enterprise NOC look */ --sb-bg: #161b22; --sb-border: #30363d; --sb-text: #8b949e; --sb-hover: rgba(177,186,196,.1); --sb-active-bg: rgba(88,166,255,.1); --sb-active-text: #58a6ff; --sb-head: #e6edf3; --sb-muted: #484f58; --hw-body: #e8ebef; --hw-panel: #f0f2f4; --hw-bezel: #d0d7de; --hw-screw: #c0c8d0; --hw-port-bg: #dde1e7; --hw-port-idle: #c8cdd5; --hw-active: rgba(26,127,55,.1); --hw-active-border: rgba(26,127,55,.35); --shadow: 0 1px 3px rgba(31,35,40,.1), 0 4px 16px rgba(31,35,40,.06); --shadow-lg: 0 8px 32px rgba(31,35,40,.12); } /* Light mode component fixes */ html[data-theme="light"] .topbar-clock { color: var(--blue); background: rgba(9,105,218,.07); border-color: rgba(9,105,218,.2); } html[data-theme="light"] .acs-code { background: var(--bg-2); color: var(--blue-2); border-color: var(--border); } html[data-theme="light"] .olt-chassis-faceplate { background: linear-gradient(180deg, #bcc5d0 0%, #adb5bd 100%); } html[data-theme="light"] .olt-brand-strip { background: linear-gradient(90deg, #1f2d3d 0%, #2c3e50 100%); } html[data-theme="light"] .olt-pon-port { background: #dde1e7; border-color: #c0c8d0; } html[data-theme="light"] .olt-pon-port.has-devices { background: rgba(26,127,55,.08); border-color: rgba(26,127,55,.3); } html[data-theme="light"] .acs-table td, html[data-theme="light"] .acs-table th { border-color: var(--border-muted); } html[data-theme="light"] .task-item { border-color: var(--border-muted); } /* ── Reset ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15.4px; scroll-behavior: smooth; } body.acs-body { font-family: var(--font); background: var(--bg-0); color: var(--text); min-height: 100vh; line-height: 1.6; display: flex; -webkit-font-smoothing: antialiased; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--cyan); } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-0); } ::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--bg-4); } /* ═══════════════════════════════════════════════════════════════════════════ ICW SIDEBAR — Mini/Full toggle, Zoho-style flyout 240px full / 68px mini (collapsed) ═══════════════════════════════════════════════════════════════════════════ */ /* Page wrapper offset — mirrors sidebar width */ .page-wrapper { transition: none; margin-left: 240px; } /* Enable transitions ONLY after page ready (set by JS) */ html.icw-ready .icw-sidebar { transition: width 0.26s cubic-bezier(.4,0,.2,1) !important; } html.icw-ready .page-wrapper { transition: margin-left 0.26s cubic-bezier(.4,0,.2,1) !important; } /* Mini state — applied immediately by anti-flash script */ html.icw-mini .icw-sidebar { width: 68px !important; } html.icw-mini .page-wrapper { margin-left: 68px !important; } body.icw-mini .icw-sidebar { width: 68px !important; } body.icw-mini .page-wrapper { margin-left: 68px !important; } /* Base sidebar */ .icw-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; display: flex; flex-direction: column; background: linear-gradient(175deg, #1e2540 0%, #111827 100%); border-right: 1px solid rgba(255,255,255,0.07); box-shadow: 2px 0 20px rgba(0,0,0,0.28); z-index: 1050; overflow: hidden; } /* ── Brand ──────────────────────────────────────────────────────────── */ .icw-brand { height: 60px; padding: 0 10px 0 12px; border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; gap: 8px; flex-shrink: 0; overflow: hidden; white-space: nowrap; } .icw-brand-logo { display: flex; align-items: center; gap: 10px; text-decoration: none !important; flex: 1; min-width: 0; overflow: hidden; } .icw-brand-icon { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; background: linear-gradient(135deg,#1f6feb,#58a6ff); display: flex; align-items: center; justify-content: center; font-size: .95rem; color: #fff; box-shadow: 0 0 0 1px rgba(88,166,255,.3), 0 3px 10px rgba(88,166,255,.2); } .icw-brand-text { flex: 1; overflow: hidden; min-width: 0; } .icw-brand-name { font-size: 0.96rem; font-weight: 800; color: #fff; letter-spacing: -0.3px; line-height: 1.15; white-space: nowrap; } .icw-brand-sub { font-size: 0.58rem; color: rgba(255,255,255,0.32); text-transform: uppercase; letter-spacing: 1.1px; white-space: nowrap; } /* ── Bottom toggle button ── */ .icw-sidebar-foot { border-top: 1px solid rgba(255,255,255,0.07); padding: 10px 0; flex-shrink: 0; } .icw-toggle-bottom { display: flex; align-items: center; justify-content: center; width: calc(100% - 14px); margin: 0 7px; height: 38px; border-radius: 9px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); color: rgba(255,255,255,0.45); font-size: 0.78rem; cursor: pointer; transition: background 0.15s, color 0.15s; overflow: hidden; white-space: nowrap; gap: 8px; } .icw-toggle-bottom:hover { background: rgba(255,255,255,0.11); color: #fff; } .icw-toggle-bottom .icw-toggle-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2px; } body.icw-mini .icw-toggle-bottom .icw-toggle-label { display: none; } body.icw-mini .icw-toggle-bottom { justify-content: center; } /* ── Scroll area ── */ .icw-nav-body { padding: 8px 0 20px; overflow-y: auto; overflow-x: hidden; flex: 1; } .icw-nav-body::-webkit-scrollbar { width: 3px; } .icw-nav-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; } /* ── Divider ── */ .icw-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 14px; } /* ── Nav item base (top-level links and group headers) ── */ .icw-top-link, .icw-group-link { display: flex; align-items: center; padding: 0 10px; height: 44px; border-radius: 10px; margin: 1px 7px; font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.62); text-decoration: none !important; cursor: pointer; transition: background 0.15s, color 0.15s; overflow: hidden; white-space: nowrap; user-select: none; } .icw-top-link:hover, .icw-group-link:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.95); text-decoration: none !important; } .icw-top-link.active { background: rgba(77,171,247,0.16); color: #74c4ff; } .icw-group-link[aria-expanded="true"] { background: rgba(255,255,255,0.05); color: #fff; } .icw-group-link.grp-active { color: rgba(255,255,255,0.9); } /* ── Icon ── */ .icw-nav-icon { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-right: 10px; font-size: 0.95rem; } /* Icon colour tokens */ .icw-c-blue { color: #4dabf7 !important; } .icw-c-green { color: #2fb344 !important; } .icw-c-purple { color: #9467f8 !important; } .icw-c-orange { color: #f76707 !important; } .icw-c-red { color: #e84141 !important; } .icw-c-teal { color: #0ca678 !important; } .icw-c-cyan { color: #22d3ee !important; } /* Active/expanded icon colour brightening — !important needed to beat token rules */ .icw-top-link.active .icw-nav-icon { color: #74c4ff !important; } .icw-group-link[aria-expanded="true"] .icw-c-blue { color: #74c4ff !important; } .icw-group-link[aria-expanded="true"] .icw-c-green { color: #51d86d !important; } .icw-group-link[aria-expanded="true"] .icw-c-purple { color: #b892ff !important; } .icw-group-link[aria-expanded="true"] .icw-c-orange { color: #ffa040 !important; } .icw-group-link[aria-expanded="true"] .icw-c-red { color: #ff7070 !important; } .icw-group-link[aria-expanded="true"] .icw-c-cyan { color: #67e8f9 !important; } .icw-group-link.grp-active .icw-c-blue { color: #74c4ff !important; } .icw-group-link.grp-active .icw-c-green { color: #51d86d !important; } .icw-group-link.grp-active .icw-c-purple { color: #b892ff !important; } .icw-group-link.grp-active .icw-c-orange { color: #ffa040 !important; } .icw-group-link.grp-active .icw-c-red { color: #ff7070 !important; } .icw-group-label { flex: 1; min-width: 0; overflow: hidden; } /* ── Chevron arrow ── */ .icw-arrow { font-size: 0.7rem; color: rgba(255,255,255,0.28); flex-shrink: 0; margin-left: 4px; transition: transform 0.22s cubic-bezier(.4,0,.2,1), color 0.15s; } .icw-group-link[aria-expanded="true"] .icw-arrow { transform: rotate(180deg); color: rgba(255,255,255,0.65); } .icw-group-link.grp-active .icw-arrow { color: rgba(255,255,255,0.42); } /* ── Short label (shows under icon in mini mode) ── */ .icw-short { display: none; font-size: 0.52rem; font-weight: 700; color: rgba(255,255,255,0.38); text-transform: uppercase; letter-spacing: 0.4px; text-align: center; line-height: 1; margin-top: 2px; pointer-events: none; } /* ── Sub-menu container ── */ .icw-sub-wrap { margin: 0 7px 2px 51px; padding: 2px 0 4px 10px; border-left: 2px solid rgba(255,255,255,0.08); transition: border-color 0.2s; overflow: hidden; } .icw-sub-wrap.show { border-left-color: rgba(77,171,247,0.3); } /* ── Sub link ── */ .icw-sub-link { display: flex; align-items: center; padding: 7px 8px; border-radius: 7px; font-size: 0.79rem; font-weight: 400; color: rgba(255,255,255,0.52); text-decoration: none; white-space: nowrap; transition: background 0.13s, color 0.13s; } .icw-sub-link::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.18); margin-right: 10px; flex-shrink: 0; transition: background 0.13s, transform 0.13s; } .icw-sub-link:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); text-decoration: none !important; } .icw-sub-link:hover::before { background: rgba(255,255,255,0.5); transform: scale(1.3); } .icw-sub-link.active { color: #74c4ff; font-weight: 600; background: rgba(77,171,247,0.09); } .icw-sub-link.active::before { background: #4dabf7; transform: scale(1.3); } /* Small count badges inside sub-links */ .icw-sub-count { font-size: 0.64rem; color: rgba(255,255,255,0.28); } .icw-sub-count:empty { display: none; } .icw-count-blue { color: #4dabf7; } .icw-count-green { color: #2fb344; } .icw-badge-count { font-size: 0.64rem; color: rgba(255,255,255,0.28); } .icw-badge-count:empty { display: none; } /* ── Tenant row ── */ .icw-tenant-row { display: flex; align-items: center; gap: 8px; padding: 8px 18px; margin-top: 2px; } .icw-tenant-text { font-size: .65rem; color: rgba(255,255,255,.28); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ══════════════════════════════ MINI MODE (body.icw-mini) ══════════════════════════════ */ body.icw-mini .icw-sidebar .icw-brand-text, body.icw-mini .icw-sidebar .icw-group-label, body.icw-mini .icw-sidebar .icw-arrow, body.icw-mini .icw-sidebar .icw-sub-wrap, body.icw-mini .icw-sidebar .icw-tenant-row { display: none !important; } body.icw-mini .icw-sidebar .icw-short { display: block !important; } body.icw-mini .icw-sidebar .icw-top-link, body.icw-mini .icw-sidebar .icw-group-link { flex-direction: column; justify-content: center; align-items: center; height: 54px; padding: 4px 2px; margin: 1px 4px; } body.icw-mini .icw-sidebar .icw-nav-icon { margin-right: 0; font-size: 1.1rem; width: 26px; height: 26px; } body.icw-mini .icw-sidebar .icw-brand { justify-content: center; padding: 0 8px; } body.icw-mini .icw-sidebar .icw-brand-logo { flex: 0 0 auto; gap: 0; } body.icw-mini .icw-sidebar .icw-divider { margin: 3px 8px; } body.icw-mini .icw-sidebar .icw-badge-count { display: none !important; } /* ══════════════════════════════════════ MINI FLYOUT PANEL (Zoho-style) ══════════════════════════════════════ */ #icw-flyout-panel { position: fixed; left: 68px; z-index: 9999; background: linear-gradient(180deg, #1e2a45 0%, #141d30 100%); border: 1px solid rgba(255,255,255,0.1); border-left: 2px solid #4dabf7; border-radius: 0 10px 10px 0; box-shadow: 6px 6px 30px rgba(0,0,0,0.5); min-width: 185px; padding: 0 0 6px; display: none; pointer-events: auto; } .icw-flyout-title { font-size: 0.63rem; font-weight: 700; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 1.2px; padding: 9px 14px 6px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 3px; } #icw-flyout-panel .icw-sub-link { display: flex; align-items: center; padding: 7px 14px; border-radius: 0; font-size: 0.82rem; font-weight: 400; color: rgba(255,255,255,0.62); text-decoration: none !important; transition: background 0.12s, color 0.12s; white-space: nowrap; } #icw-flyout-panel .icw-sub-link::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.18); margin-right: 10px; flex-shrink: 0; } #icw-flyout-panel .icw-sub-link:hover { background: rgba(77,171,247,0.12); color: rgba(255,255,255,0.95); } #icw-flyout-panel .icw-sub-link:hover::before { background: rgba(255,255,255,0.55); } #icw-flyout-panel .icw-sub-link.active { color: #74c4ff; font-weight: 600; background: rgba(77,171,247,0.14); } #icw-flyout-panel .icw-sub-link.active::before { background: #4dabf7; } /* Mobile overlay */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(1,4,9,.75); z-index: 1040; } .sidebar-overlay.show { display: block; } /* ═══════════════════════════════════════════════════════════════════════════ MAIN WRAPPER + TOPBAR ═══════════════════════════════════════════════════════════════════════════ */ .page-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; } /* Mobile sidebar: hidden by default, slides in with .icw-open */ @media (max-width: 991px) { .icw-sidebar { transform: translateX(-100%); transition: transform 0.25s cubic-bezier(.4,0,.2,1) !important; } .icw-sidebar.icw-open { transform: translateX(0); } .page-wrapper, html.icw-mini .page-wrapper, body.icw-mini .page-wrapper { margin-left: 0 !important; } } .acs-topbar { height: var(--topbar-h); background: var(--bg-1); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; gap: 12px; position: sticky; top: 0; z-index: 900; flex-shrink: 0; } .topbar-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .topbar-right { display: flex; align-items: center; gap: 8px; } .topbar-toggle { background: none; border: none; color: var(--text-3); font-size: 1rem; cursor: pointer; padding: 6px; border-radius: 6px; } .topbar-toggle:hover { background: var(--bg-2); color: var(--text); } .topbar-breadcrumb { display: flex; align-items: center; gap: 6px; } .topbar-breadcrumb-root { font-size: .75rem; color: var(--text-4); } .topbar-breadcrumb-sep { color: var(--text-4); font-size: .7rem; } .topbar-title { font-size: .9rem; font-weight: 600; color: var(--text); } .topbar-clock { font-family: var(--mono); font-size: .72rem; color: var(--cyan); background: rgba(121,192,255,.07); border: 1px solid rgba(121,192,255,.15); padding: 4px 10px; border-radius: 5px; white-space: nowrap; } .topbar-live { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-3); background: var(--bg-2); border: 1px solid var(--border); padding: 4px 10px; border-radius: 5px; } .topbar-icon { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--text-3); transition: all var(--trans); } .topbar-icon:hover { background: var(--bg-3); color: var(--text); } button.topbar-icon { font-size: .88rem; } .topbar-badge-count { position: absolute; top: -5px; right: -5px; background: var(--red); color: #fff; font-size: .58rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-1); padding: 0 3px; } .topbar-user { display: flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: .82rem; color: var(--text-2); transition: all var(--trans); } .topbar-user:hover { background: var(--bg-3); color: var(--text); } .user-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #1f6feb, #58a6ff); display: flex; align-items: center; justify-content: center; font-size: .7rem; color: #fff; flex-shrink: 0; } .acs-dropdown { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); background: var(--bg-2); padding: 4px; min-width: 180px; } .acs-dropdown .dropdown-item { font-size: .83rem; color: var(--text-2); border-radius: 5px; padding: 7px 12px; transition: all var(--trans); } .acs-dropdown .dropdown-item:hover { background: var(--bg-3); color: var(--text); } .acs-dropdown .dropdown-divider { border-color: var(--border); margin: 4px 0; } /* ── Page content ───────────────────────────────────────────────────────── */ .acs-content { padding: 22px; flex: 1; } .acs-footer { padding: 10px 22px; border-top: 1px solid var(--border); background: var(--bg-1); font-size: .7rem; color: var(--text-4); display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .acs-footer a { color: var(--text-4); } .acs-footer a:hover { color: var(--blue); } /* ═══════════════════════════════════════════════════════════════════════════ STAT CARDS ═══════════════════════════════════════════════════════════════════════════ */ .stat-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 16px; display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden; transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--bg-4); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; } .stat-card-blue::before { background: linear-gradient(90deg, #1f6feb, #58a6ff); } .stat-card-green::before { background: linear-gradient(90deg, #238636, #3fb950); } .stat-card-red::before { background: linear-gradient(90deg, #a40e26, #f85149); } .stat-card-orange::before { background: linear-gradient(90deg, #9e6a03, #d29922); } .stat-card-purple::before { background: linear-gradient(90deg, #6e40c9, #bc8cff); } .stat-card-teal::before { background: linear-gradient(90deg, #0f7d5b, #3fb950); } .stat-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .stat-card-blue .stat-icon { background: var(--blue-bg); color: var(--blue); } .stat-card-green .stat-icon { background: var(--green-bg); color: var(--green); } .stat-card-red .stat-icon { background: var(--red-bg); color: var(--red); } .stat-card-orange .stat-icon { background: var(--amber-bg); color: var(--amber); } .stat-card-purple .stat-icon { background: rgba(188,140,255,.08); color: var(--purple); } .stat-card-teal .stat-icon { background: var(--green-bg); color: var(--teal); } .stat-body { flex: 1; min-width: 0; } .stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(--text); letter-spacing: -1px; } .stat-label { font-size: .71rem; color: var(--text-4); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; font-weight: 500; } .stat-trend { font-size: .8rem; color: var(--text-4); } /* ═══════════════════════════════════════════════════════════════════════════ CARDS ═══════════════════════════════════════════════════════════════════════════ */ .acs-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } .acs-card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-muted); font-size: .84rem; font-weight: 600; color: var(--text); background: var(--bg-1); } .acs-card-badge { background: var(--bg-2); color: var(--text-3); font-size: .65rem; padding: 2px 9px; border-radius: 10px; font-weight: 500; border: 1px solid var(--border); } .acs-card-body { padding: 16px; } .acs-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--border-muted); background: var(--bg-1); font-size: .77rem; color: var(--text-3); } /* ═══════════════════════════════════════════════════════════════════════════ TABLES ═══════════════════════════════════════════════════════════════════════════ */ .acs-table { color: var(--text-2); font-size: .82rem; margin: 0; } .acs-table thead th { background: var(--bg-2); color: var(--text-4); font-size: .68rem; letter-spacing: .6px; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--border); padding: 10px 14px; white-space: nowrap; } .acs-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border-muted); vertical-align: middle; } .acs-table tbody tr:hover { background: rgba(88,166,255,.03); } .acs-table tbody tr:last-child td { border-bottom: 0; } .acs-table tbody tr.device-row { cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════════════ TASK FEED ═══════════════════════════════════════════════════════════════════════════ */ .task-feed {} .task-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border-muted); transition: background var(--trans); } .task-item:last-child { border-bottom: 0; } .task-item:hover { background: var(--bg-2); } .task-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; } .task-icon-success { background: var(--green-bg); color: var(--green); } .task-icon-primary { background: var(--blue-bg); color: var(--blue); } .task-icon-warning { background: var(--amber-bg); color: var(--amber); } .task-icon-danger { background: var(--red-bg); color: var(--red); } .task-icon-secondary { background: var(--bg-2); color: var(--text-4); } .task-body { flex: 1; min-width: 0; } .task-type { font-size: .82rem; font-weight: 600; color: var(--text); } .task-device { font-size: .72rem; color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ═══════════════════════════════════════════════════════════════════════════ BADGES ═══════════════════════════════════════════════════════════════════════════ */ .badge-acs { font-size: .67rem; font-weight: 600; padding: 3px 8px; border-radius: 4px; letter-spacing: .2px; } .badge-acs-xs { font-size: .6rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; letter-spacing: .2px; } .bg-success { background: var(--green-bg) !important; color: var(--green) !important; border: 1px solid rgba(63,185,80,.2) !important; } .bg-danger { background: var(--red-bg) !important; color: var(--red) !important; border: 1px solid rgba(248,81,73,.2) !important; } .bg-warning { background: var(--amber-bg) !important; color: var(--amber) !important; border: 1px solid rgba(210,153,34,.2) !important; } .bg-primary { background: var(--blue-bg) !important; color: var(--blue) !important; border: 1px solid rgba(88,166,255,.2) !important; } .bg-secondary { background: var(--bg-2) !important; color: var(--text-3)!important; border: 1px solid var(--border) !important; } .bg-info { background: rgba(121,192,255,.08) !important; color: var(--cyan) !important; border: 1px solid rgba(121,192,255,.2) !important; } .bg-CONFIGURED { background: var(--green-bg) !important; color: var(--green) !important; border: 1px solid rgba(63,185,80,.2) !important; } .bg-OFFLINE { background: var(--red-bg) !important; color: var(--red) !important; border: 1px solid rgba(248,81,73,.2) !important; } .bg-NEW { background: var(--bg-2) !important; color: var(--text-3)!important; border: 1px solid var(--border) !important; } .bg-UNCONFIGURED { background: var(--amber-bg) !important; color: var(--amber) !important; border: 1px solid rgba(210,153,34,.2) !important; } .bg-CONFIG_PENDING { background: var(--blue-bg) !important; color: var(--blue) !important; border: 1px solid rgba(88,166,255,.2) !important; } .bg-FAILED { background: var(--red-bg) !important; color: var(--red) !important; border: 1px solid rgba(248,81,73,.2) !important; } .bg-pending { background: var(--amber-bg) !important; color: var(--amber) !important; border: 1px solid rgba(210,153,34,.2) !important; } .bg-running { background: var(--blue-bg) !important; color: var(--blue) !important; border: 1px solid rgba(88,166,255,.2) !important; } .bg-completed { background: var(--green-bg) !important; color: var(--green) !important; border: 1px solid rgba(63,185,80,.2) !important; } .bg-failed { background: var(--red-bg) !important; color: var(--red) !important; border: 1px solid rgba(248,81,73,.2) !important; } /* ═══════════════════════════════════════════════════════════════════════════ STATUS DOTS ═══════════════════════════════════════════════════════════════════════════ */ .acs-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .status-online { background: var(--green); box-shadow: 0 0 6px rgba(63,185,80,.5); } .status-offline { background: var(--red); box-shadow: 0 0 6px rgba(248,81,73,.5); } .status-warning { background: var(--amber); box-shadow: 0 0 6px rgba(210,153,34,.5); } .status-idle { background: var(--text-4); } .pulse-dot { animation: pulse-ring 2.5s ease-in-out infinite; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(63,185,80,.6); } 70% { box-shadow: 0 0 0 6px rgba(63,185,80,0); } 100% { box-shadow: 0 0 0 0 rgba(63,185,80,0); } } /* ═══════════════════════════════════════════════════════════════════════════ FORMS ═══════════════════════════════════════════════════════════════════════════ */ .acs-label { display: block; font-size: .7rem; font-weight: 600; color: var(--text-3); margin-bottom: 5px; letter-spacing: .4px; text-transform: uppercase; } .acs-input { width: 100%; background: var(--bg-0); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 8px 12px; font-size: .85rem; font-family: var(--font); transition: border-color var(--trans), box-shadow var(--trans); outline: none; } .acs-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(88,166,255,.15); } .acs-input::placeholder { color: var(--text-4); } .acs-input[readonly] { opacity: .6; cursor: default; } .acs-input-sm { padding: 5px 10px; font-size: .78rem; } textarea.acs-input { resize: vertical; min-height: 80px; } .acs-select { width: 100%; background: var(--bg-0); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 8px 32px 8px 12px; font-size: .85rem; appearance: none; cursor: pointer; outline: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236e7681' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; transition: border-color var(--trans); } .acs-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(88,166,255,.15); } .acs-select-sm { padding: 5px 28px 5px 10px; font-size: .78rem; } .acs-checkbox { width: 15px; height: 15px; accent-color: var(--blue); cursor: pointer; } .form-group-acs { margin-bottom: 16px; } .input-icon-wrap { position: relative; } .input-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-4); font-size: .85rem; } .ps-icon { padding-left: 32px !important; } /* ═══════════════════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════════════════ */ .btn-acs-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--blue-2); color: #fff; font-weight: 600; font-size: .83rem; padding: 8px 16px; border-radius: 6px; border: 1px solid rgba(88,166,255,.3); cursor: pointer; transition: all var(--trans); white-space: nowrap; box-shadow: 0 2px 8px rgba(31,111,235,.3); } .btn-acs-primary:hover { background: var(--blue); box-shadow: 0 4px 12px rgba(88,166,255,.35); transform: translateY(-1px); } .btn-acs-ghost { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--text-3); font-size: .83rem; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; transition: all var(--trans); white-space: nowrap; } .btn-acs-ghost:hover { color: var(--text); background: var(--bg-2); border-color: var(--bg-4); } .btn-acs-danger { display: inline-flex; align-items: center; justify-content: center; background: var(--red-bg); color: var(--red); font-size: .83rem; padding: 7px 14px; border-radius: 6px; border: 1px solid rgba(248,81,73,.25); cursor: pointer; transition: all var(--trans); white-space: nowrap; } .btn-acs-danger:hover { background: rgba(248,81,73,.15); } .btn-acs-success { display: inline-flex; align-items: center; justify-content: center; background: var(--green-bg); color: var(--green); font-size: .83rem; padding: 7px 14px; border-radius: 6px; border: 1px solid rgba(63,185,80,.25); cursor: pointer; transition: all var(--trans); } .btn-acs-success:hover { background: rgba(63,185,80,.15); } .btn-acs-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: .8rem; color: var(--text-3); transition: all var(--trans); text-decoration: none; } .btn-acs-icon:hover { color: var(--blue); background: var(--blue-bg); border-color: rgba(88,166,255,.3); } .btn-sm { padding: 5px 10px !important; font-size: .76rem !important; } .btn-group-sm .btn-acs-icon { width: 28px; height: 28px; } /* View toggle */ .view-toggle { display: flex; background: var(--bg-0); border: 1px solid var(--border); border-radius: 7px; padding: 3px; gap: 2px; } .view-toggle-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 5px; font-size: .75rem; font-weight: 500; color: var(--text-3); background: transparent; border: none; cursor: pointer; transition: all var(--trans); } .view-toggle-btn.active { background: var(--bg-2); color: var(--text); } .view-toggle-btn:hover:not(.active) { color: var(--text-2); } .olt-filter-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } .olt-filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .75rem; font-weight: 500; color: var(--text-3); background: var(--bg-0); border: 1px solid var(--border); cursor: pointer; transition: all var(--trans); } .olt-filter-pill:hover { color: var(--text-2); border-color: var(--border-muted); } .olt-filter-pill.active { background: var(--bg-2); color: var(--text); border-color: var(--blue); } .olt-filter-count { font-size: .68rem; font-weight: 700; opacity: .7; } .olt-filter-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .olt-filter-dot.dot-green { background: var(--hw-led-on); } .olt-filter-dot.dot-red { background: var(--hw-led-red); } .olt-filter-dot.dot-off { background: var(--hw-led-off); } /* ═══════════════════════════════════════════════════════════════════════════ MISC ═══════════════════════════════════════════════════════════════════════════ */ .acs-code { background: var(--bg-2); border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; font-family: var(--mono); font-size: .76rem; color: var(--cyan); } .acs-code-sm { font-family: var(--mono); font-size: .7rem; color: var(--cyan); } .font-mono { font-family: var(--mono) !important; } .acs-link { color: var(--blue); } .acs-link:hover { color: var(--cyan); text-decoration: underline; } .acs-link-sm { font-size: .76rem; color: var(--blue); } .acs-tabs { border-bottom: 1px solid var(--border); overflow-x: auto; white-space: nowrap; } .acs-tab { display: inline-flex; align-items: center; padding: 9px 16px; font-size: .82rem; color: var(--text-3); text-decoration: none; border-bottom: 2px solid transparent; transition: all var(--trans); } .acs-tab:hover { color: var(--text-2); } .acs-tab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; } .pagination-acs { display: flex; align-items: center; gap: 4px; } .page-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--bg-2); border: 1px solid var(--border); border-radius: 5px; cursor: pointer; font-size: .78rem; color: var(--text-3); transition: all var(--trans); text-decoration: none; } .page-btn:hover { color: var(--blue); border-color: rgba(88,166,255,.3); } .page-current { padding: 4px 10px; background: var(--blue-2); color: #fff; border-radius: 5px; font-size: .78rem; font-weight: 700; } /* Vendor badges */ .vendor-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: .7rem; font-weight: 600; background: var(--bg-2); color: var(--text-3); border: 1px solid var(--border); } .vendor-huawei { background: rgba(210,153,34,.08); color: var(--amber); border-color: rgba(210,153,34,.2); } .vendor-zte { background: var(--blue-bg); color: var(--blue); border-color: rgba(88,166,255,.2); } .vendor-fiberhome { background: var(--red-bg); color: var(--red); border-color: rgba(248,81,73,.2); } .vendor-vsol { background: var(--green-bg); color: var(--green); border-color: rgba(63,185,80,.2); } .vendor-nokia { background: rgba(188,140,255,.08); color: var(--purple); border-color: rgba(188,140,255,.2); } .vendor-tp-link { background: rgba(121,192,255,.08); color: var(--cyan); border-color: rgba(121,192,255,.2); } .vendor-genexis { background: rgba(63,185,80,.08); color: var(--green); border-color: rgba(63,185,80,.2); } .vendor-jiuzhou { background: rgba(139,92,246,.08); color: #8b5cf6; border-color: rgba(139,92,246,.2); } .vendor-alphion { background: rgba(236,72,153,.08); color: #ec4899; border-color: rgba(236,72,153,.2); } .vendor-syrotech { background: rgba(234,88,12,.08); color: #ea580c; border-color: rgba(234,88,12,.2); } .vendor-netlink { background: rgba(6,182,212,.08); color: #06b6d4; border-color: rgba(6,182,212,.2); } .text-success-acs { color: var(--green) !important; } .text-danger-acs { color: var(--red) !important; } .text-muted { color: var(--text-3) !important; } .text-muted-2 { color: var(--text-4) !important; } .fw-semibold { font-weight: 600; } /* SweetAlert2 dark */ .swal2-popup { background: var(--bg-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg) !important; } .swal2-title { color: var(--text) !important; } .swal2-html-container { color: var(--text-2) !important; } /* ═══════════════════════════════════════════════════════════════════════════ ████████████████ OLT HARDWARE VIEW ████████████████ ═══════════════════════════════════════════════════════════════════════════ */ /* OLT Chassis ─────────────────────────────────────────────────────────── */ /* ── Bulk assign device rows ──────────────────────────────────────── */ .assign-device-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; margin-bottom: 2px; transition: background var(--trans); } .assign-device-row:hover { background: var(--sb-hover); } .assign-device-row input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; accent-color: var(--blue); } .assign-device-info { flex: 1; min-width: 0; } .assign-device-serial { font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--text); } .assign-device-meta { font-size: .7rem; color: var(--text-4); margin-top: 1px; } .assign-device-right { text-align: right; flex-shrink: 0; } /* ── OLT hardware chassis ─────────────────────────────────────────── */ .olt-chassis { background: var(--hw-body); border: 1px solid #2d3139; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 8px 40px rgba(1,4,9,.7), inset 0 1px 0 rgba(255,255,255,.06); margin-bottom: 24px; transition: box-shadow var(--trans); } .olt-chassis:hover { box-shadow: 0 0 0 1px rgba(88,166,255,.15), 0 12px 48px rgba(1,4,9,.8); } .olt-chassis-faceplate { background: linear-gradient(180deg, #1c2128 0%, #161b22 100%); border-bottom: 2px solid var(--border-muted); display: flex; align-items: center; gap: 0; padding: 0; } .olt-brand-strip { background: linear-gradient(180deg, #21262d 0%, #1a1f27 100%); border-right: 1px solid var(--border); padding: 14px 18px; min-width: 200px; display: flex; flex-direction: column; justify-content: center; } .olt-brand-name { font-size: .75rem; font-weight: 700; color: var(--text); letter-spacing: .5px; text-transform: uppercase; } .olt-brand-model { font-size: .65rem; color: var(--text-4); margin-top: 2px; font-family: var(--mono); } .olt-brand-ip { font-size: .62rem; color: var(--cyan); font-family: var(--mono); margin-top: 4px; } .olt-status-strip { padding: 8px 16px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--border); min-width: 120px; } .olt-power-led { display: flex; align-items: center; gap: 6px; font-size: .62rem; color: var(--text-4); text-transform: uppercase; letter-spacing: .5px; } .olt-led { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .olt-led-green { background: var(--hw-led-on); box-shadow: 0 0 8px rgba(63,185,80,.8), 0 0 16px rgba(63,185,80,.4); animation: led-blink 3s ease-in-out infinite; } .olt-led-amber { background: var(--hw-led-amber); box-shadow: 0 0 8px rgba(210,153,34,.8); } .olt-led-red { background: var(--hw-led-red); box-shadow: 0 0 8px rgba(248,81,73,.8); } .olt-led-off { background: var(--hw-led-off); } @keyframes led-blink { 0%,100%{ opacity:1; } 50% { opacity:.6; } } .olt-uplink-strip { padding: 8px 12px; display: flex; align-items: center; gap: 6px; border-right: 1px solid var(--border); flex-wrap: wrap; } .olt-uplink-label { font-size: .58rem; color: var(--text-4); text-transform: uppercase; letter-spacing: .8px; width: 100%; margin-bottom: 2px; } .uplink-port { width: 28px; height: 20px; background: linear-gradient(180deg, #21262d, #161b22); border: 1px solid var(--border); border-radius: 3px; display: flex; align-items: center; justify-content: center; position: relative; cursor: default; } .uplink-port::after { content: ''; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--hw-led-on); box-shadow: 0 0 4px rgba(63,185,80,.8); } /* Real up/down/unknown status — the base ::after above is green by default (decorative fallback for pages with no live status yet); pages that pass real SNMP interface status add one of these classes to override it. */ .uplink-port.down::after { background: var(--hw-led-red); box-shadow: 0 0 4px rgba(248,81,73,.8); } .uplink-port.unknown::after { background: var(--hw-led-off); box-shadow: none; } /* Optional name label under a port box (e.g. "GE01", "XGE01") */ .uplink-port-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; } .uplink-port-label { font-size: .52rem; color: var(--text-4); font-family: var(--mono); max-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .olt-stats-strip { padding: 8px 16px; display: flex; align-items: center; gap: 20px; margin-left: auto; border-left: 1px solid var(--border); } .olt-stat-mini { text-align: center; } .olt-stat-val { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1; } .olt-stat-lbl { font-size: .58rem; color: var(--text-4); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; } /* PON Ports rack ──────────────────────────────────────────────────────── */ .olt-pon-rack { padding: 16px 18px; background: var(--hw-panel); } .olt-rack-label { font-size: .6rem; color: var(--text-4); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 12px; } .olt-pon-ports-grid { display: flex; flex-wrap: wrap; gap: 8px; } .olt-pon-port { width: 80px; background: var(--hw-port-bg); border: 1px solid var(--border-muted); border-radius: 8px; padding: 10px 6px 8px; cursor: pointer; text-align: center; transition: all .2s ease; position: relative; user-select: none; } .olt-pon-port.has-devices { border-color: rgba(63,185,80,.25); background: rgba(63,185,80,.04); } .olt-pon-port.has-devices:hover { border-color: var(--green); background: rgba(63,185,80,.09); transform: translateY(-3px); box-shadow: 0 6px 18px rgba(63,185,80,.2); } .olt-pon-port.empty:hover { border-color: var(--border); background: rgba(255,255,255,.02); } .olt-pon-port.selected { border-color: var(--blue) !important; background: rgba(88,166,255,.1) !important; box-shadow: 0 0 0 2px rgba(88,166,255,.2), 0 6px 18px rgba(88,166,255,.15) !important; } .pon-port-led-wrap { display: flex; justify-content: center; margin-bottom: 6px; } .pon-port-led { width: 11px; height: 11px; border-radius: 50%; background: var(--hw-led-off); transition: all .3s ease; } .olt-pon-port.has-devices .pon-port-led { background: var(--hw-led-on); box-shadow: 0 0 8px rgba(63,185,80,.7), 0 0 16px rgba(63,185,80,.3); animation: led-blink 2.5s ease-in-out infinite; } .pon-port-id { font-family: var(--mono); font-size: .65rem; color: var(--text-4); font-weight: 600; letter-spacing: .5px; line-height: 1; } .pon-port-count { font-size: .95rem; font-weight: 700; color: var(--text); line-height: 1; margin-top: 4px; } .olt-pon-port.has-devices .pon-port-count { color: var(--green); } .pon-port-sub { font-size: .58rem; color: var(--text-4); margin-top: 2px; text-transform: uppercase; letter-spacing: .4px; } /* SFP connector visualization */ .pon-sfp { width: 28px; height: 8px; background: linear-gradient(90deg, #0d6efd22, #0d6efd44); border: 1px solid rgba(88,166,255,.2); border-radius: 2px; margin: 6px auto 0; position: relative; } .olt-pon-port.has-devices .pon-sfp { background: linear-gradient(90deg, rgba(63,185,80,.1), rgba(63,185,80,.25)); border-color: rgba(63,185,80,.3); } /* OLT list mode */ .olt-list-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border-muted); transition: background var(--trans); } .olt-list-item:hover { background: var(--bg-2); } .olt-list-item:last-child { border-bottom: 0; } .olt-chassis-icon { width: 42px; height: 42px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--blue); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════════ ████████████████ ONT/ONU CARDS ████████████████ ═══════════════════════════════════════════════════════════════════════════ */ /* PON port detail panel */ .pon-detail-panel { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-top: 16px; animation: panel-slide-in .2s ease; } @keyframes panel-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .pon-detail-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bg-2); border-bottom: 1px solid var(--border); } .pon-detail-title { font-size: .84rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; } .pon-device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 16px; } /* ONT device card */ .ont-card { background: var(--hw-panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: all .2s ease; cursor: pointer; position: relative; } .ont-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--border); transition: background .2s; } .ont-card.online::before { background: linear-gradient(90deg, #238636, #3fb950); } .ont-card.offline::before { background: linear-gradient(90deg, #a40e26, #f85149); } .ont-card.unconfigured::before { background: linear-gradient(90deg, #9e6a03, #d29922); } .ont-card:hover { border-color: rgba(88,166,255,.4); box-shadow: 0 4px 20px rgba(1,4,9,.5); transform: translateY(-2px); } .ont-card:hover::before { background: linear-gradient(90deg, #1f6feb, #58a6ff) !important; } /* ONT card header */ .ont-card-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px; } .ont-serial { font-family: var(--mono); font-size: .85rem; font-weight: 700; color: var(--text); line-height: 1.2; } .ont-vendor { font-size: .72rem; color: var(--text-3); margin-top: 2px; } .ont-status-led { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--hw-led-off); } .ont-card.online .ont-status-led { background: var(--hw-led-on); box-shadow: 0 0 8px rgba(63,185,80,.7); animation: led-blink 3s infinite; } .ont-card.offline .ont-status-led { background: var(--hw-led-red); box-shadow: 0 0 6px rgba(248,81,73,.6); } .ont-card.unconfigured .ont-status-led { background: var(--hw-led-amber); box-shadow: 0 0 6px rgba(210,153,34,.6); } /* Optical signal section */ .ont-signal-section { padding: 6px 12px 8px; border-top: 1px solid var(--border-muted); } .ont-signal-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .ont-signal-label { font-size: .68rem; color: var(--text-4); text-transform: uppercase; letter-spacing: .4px; } .ont-signal-val { font-family: var(--mono); font-size: .78rem; color: var(--text); font-weight: 600; } .ont-signal-val.good { color: var(--green); } .ont-signal-val.warn { color: var(--amber); } .ont-signal-val.bad { color: var(--red); } .ont-signal-val.unknown { color: var(--text-4); } /* Signal bar (5 bars) */ .signal-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; } .signal-bar { width: 4px; border-radius: 1px; background: var(--bg-3); flex-shrink: 0; transition: background .3s; } .signal-bar.b1 { height: 30%; } .signal-bar.b2 { height: 46%; } .signal-bar.b3 { height: 62%; } .signal-bar.b4 { height: 78%; } .signal-bar.b5 { height: 100%; } .signal-bars.s1 .b1 { background: var(--red); } .signal-bars.s2 .b1, .signal-bars.s2 .b2 { background: var(--red); } .signal-bars.s3 .b1, .signal-bars.s3 .b2, .signal-bars.s3 .b3 { background: var(--amber); } .signal-bars.s4 .b1,.signal-bars.s4 .b2,.signal-bars.s4 .b3,.signal-bars.s4 .b4 { background: var(--green); } .signal-bars.s5 .b1,.signal-bars.s5 .b2,.signal-bars.s5 .b3,.signal-bars.s5 .b4,.signal-bars.s5 .b5 { background: var(--green); } /* ONT physical ports section */ .ont-ports-section { display: flex; align-items: center; gap: 8px; padding: 7px 12px 10px; border-top: 1px solid var(--border-muted); } .ont-port-group { display: flex; flex-direction: column; align-items: center; gap: 3px; } .ont-port-group-label { font-size: .54rem; color: var(--text-4); text-transform: uppercase; letter-spacing: .4px; } .ont-ports-row { display: flex; gap: 3px; } .ont-port { width: 18px; height: 12px; background: var(--hw-port-idle); border: 1px solid var(--border); border-radius: 2px; position: relative; transition: all .2s; } .ont-port.active { background: rgba(63,185,80,.15); border-color: rgba(63,185,80,.35); } .ont-port.active::after { content: ''; position: absolute; top: 2px; right: 2px; width: 3px; height: 3px; border-radius: 50%; background: var(--green); box-shadow: 0 0 3px var(--green); } .ont-fiber-port { width: 14px; height: 20px; background: linear-gradient(180deg, #21262d, #161b22); border: 1px solid rgba(88,166,255,.2); border-radius: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ont-fiber-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 4px rgba(88,166,255,.8); } /* ONT grid view (devices page) */ .ont-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; padding: 16px; } /* ═══════════════════════════════════════════════════════════════════════════ DASHBOARD SPECIFIC ═══════════════════════════════════════════════════════════════════════════ */ .live-events-feed { } .live-event { display: flex; align-items: flex-start; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--border-muted); transition: background var(--trans); } .live-event:last-child { border-bottom: 0; } .live-event:hover { background: var(--bg-2); } .live-event-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; } .live-event-body { flex: 1; min-width: 0; } .live-event-msg { font-size: .81rem; color: var(--text-2); } .live-event-time { font-size: .68rem; color: var(--text-4); margin-top: 1px; font-family: var(--mono); } /* Signal health mini card */ .signal-health-ring { width: 64px; height: 64px; position: relative; flex-shrink: 0; } .signal-health-ring svg { transform: rotate(-90deg); } .signal-health-ring .ring-bg { stroke: var(--bg-3); } .signal-health-ring .ring-val { stroke: var(--green); stroke-linecap: round; transition: stroke-dashoffset .8s ease; } /* Mini OLT overview on dashboard */ .dashboard-olt-mini { background: var(--hw-panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; transition: all var(--trans); cursor: pointer; text-decoration: none; } .dashboard-olt-mini:hover { border-color: rgba(88,166,255,.3); background: rgba(88,166,255,.04); } .olt-mini-ports { display: flex; flex-wrap: wrap; gap: 4px; } .olt-mini-port { width: 14px; height: 14px; border-radius: 2px; background: var(--hw-port-idle); border: 1px solid var(--border-muted); transition: all .2s; } .olt-mini-port.active { background: rgba(63,185,80,.2); border-color: rgba(63,185,80,.4); } .olt-mini-port.active:hover { box-shadow: 0 0 4px rgba(63,185,80,.5); } /* ═══════════════════════════════════════════════════════════════════════════ DEVICE GRID VIEW (ONT cards on devices page) ═══════════════════════════════════════════════════════════════════════════ */ .device-grid-wrap { padding: 16px; } .device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1199px) { .acs-content { padding: 14px; } .olt-brand-strip { min-width: 150px; } } @media (max-width: 767px) { .olt-stats-strip { display: none; } .olt-uplink-strip { display: none; } .olt-pon-port { width: 62px; } .pon-device-grid { grid-template-columns: 1fr 1fr; } .stat-value { font-size: 1.4rem; } } /* Utility */ .gap-1{ gap: 4px; } .gap-2{ gap: 8px; } .gap-3{ gap: 12px; } .rounded-lg { border-radius: var(--radius-lg) !important; } .border-0 { border: 0 !important; } .opacity-50 { opacity: .5; } .opacity-25 { opacity: .25; } .small { font-size: .83rem !important; } .fw-500 { font-weight: 500; } .lh-1 { line-height: 1; } /* Spinner */ .spinner-border-sm { width: 12px !important; height: 12px !important; border-width: 2px !important; } .spinner-border { color: var(--blue); } /* Chart container fix for dark */ canvas { background: transparent !important; } /* ═══════════════════════════════════════════════════════════════════════════ NOTIFICATION PANEL (moved — legacy sidebar groups removed) ═══════════════════════════════════════════════════════════════════════════ */ .notif-wrapper { position: relative; } .notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 9999; overflow: hidden; } .notif-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-muted); font-size: .83rem; font-weight: 600; color: var(--text); } .notif-view-all { font-size: .72rem; color: var(--blue); text-decoration: none; } .notif-view-all:hover { color: var(--cyan); } .notif-body { max-height: 320px; overflow-y: auto; } .notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-muted); text-decoration: none; color: inherit; transition: background var(--trans); } .notif-item:hover { background: var(--bg-3); } .notif-item:last-child { border-bottom: none; } .notif-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-3); display: flex; align-items: center; justify-content: center; font-size: .78rem; flex-shrink: 0; margin-top: 2px; } .notif-info { flex: 1; min-width: 0; } .notif-title { font-size: .8rem; font-weight: 600; color: var(--text); text-transform: capitalize; } .notif-sub { font-size: .68rem; color: var(--text-4); margin-top: 1px; font-family: var(--mono); } .notif-err { font-size: .67rem; color: var(--red); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notif-status { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; white-space: nowrap; } .notif-empty { text-align: center; padding: 24px 16px; font-size: .8rem; color: var(--text-4); } .notif-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-top: 1px solid var(--border-muted); background: var(--bg-1); } /* ═══════════════════════════════════════════════════════════════════════════ OLT CRUD — new elements ═══════════════════════════════════════════════════════════════════════════ */ .olt-chassis-actions { display: flex; gap: 4px; position: absolute; top: 8px; right: 8px; z-index: 10; } .olt-chassis { position: relative; } /* Fix olt-brand-strip text: always white regardless of theme */ .olt-brand-strip { color: #ffffff !important; } .olt-brand-strip * { color: inherit; } .olt-brand-name { font-size: .82rem; font-weight: 800; letter-spacing: .5px; } .olt-brand-model { font-size: .62rem; opacity: .7; margin-top: 1px; } .olt-brand-ip { font-size: .63rem; font-family: var(--mono); opacity: .55; margin-top: 2px; } .olt-brand-loc { font-size: .6rem; opacity: .5; margin-top: 2px; display: flex; align-items: center; } /* btn-xs */ .btn-xs { padding: 3px 8px !important; font-size: .68rem !important; height: auto !important; } /* ─── ACS Modal ──────────────────────────────────────────────────────── */ .acs-modal { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px; color: var(--text); box-shadow: var(--shadow-lg); } .acs-modal-header { background: var(--bg-1); border-bottom: 1px solid var(--border); border-radius: 14px 14px 0 0; padding: 14px 20px; color: var(--text); } .acs-modal-footer { background: var(--bg-1); border-top: 1px solid var(--border); border-radius: 0 0 14px 14px; padding: 12px 20px; gap: 8px; } /* ─── WiFi info chip (device detail) ────────────────────────────────── */ .wifi-info-chip { background: var(--bg-3); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; min-width: 70px; } .wifi-chip-lbl { font-size: .58rem; color: var(--text-4); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; } .wifi-chip-val { font-size: .77rem; font-weight: 600; color: var(--text); margin-top: 1px; } /* ─── WiFi enable toggle ─────────────────────────────────────────────── */ .acs-toggle-label { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .acs-toggle-label input[type=checkbox] { display: none; } .acs-toggle-track { width: 32px; height: 18px; background: var(--bg-4); border-radius: 9px; border: 1px solid var(--border); display: flex; align-items: center; padding: 1px; transition: background .2s; position: relative; } .acs-toggle-thumb { width: 14px; height: 14px; background: var(--text-4); border-radius: 50%; transition: all .2s; } .acs-toggle-label input:checked ~ .acs-toggle-track { background: var(--blue-2); border-color: var(--blue); } .acs-toggle-label input:checked ~ .acs-toggle-track .acs-toggle-thumb { background: #fff; transform: translateX(14px); } /* ─── Alert ACS style ────────────────────────────────────────────────── */ .alert-acs { padding: 10px 14px; border-radius: 8px; border: 1px solid; font-size: .8rem; display: flex; align-items: flex-start; gap: 8px; } .alert-acs-info { background: var(--blue-bg); border-color: rgba(88,166,255,.25); color: var(--text-2); } .alert-acs-danger { background: var(--red-bg); border-color: var(--red); color: var(--text-2); } /* ─── OLT list item (redesigned) ─────────────────────────────────────── */ .olt-list-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border-muted); cursor: pointer; transition: background var(--trans); } .olt-list-item:hover { background: var(--bg-2); } .olt-list-item:last-child { border-bottom: none; } .olt-chassis-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-3); display: flex; align-items: center; justify-content: center; color: var(--cyan); font-size: .95rem; flex-shrink: 0; } /* Light mode fix for olt-brand-strip */ html[data-theme="light"] .olt-brand-strip { background: linear-gradient(90deg, #1a2740 0%, #223355 100%) !important; color: #ffffff !important; } /* ── Shared page tab nav ──────────────────────────────────────────────────── */ .acs-nav-tabs { border-bottom: 1px solid var(--border-muted); gap: 2px; } .acs-nav-tabs .nav-link { color: var(--text-4); font-size: .8rem; font-weight: 500; padding: 8px 14px; border-radius: 6px 6px 0 0; border: 1px solid transparent; border-bottom: none; transition: color var(--trans), background var(--trans); } .acs-nav-tabs .nav-link:hover { color: var(--text); background: var(--sb-hover); } .acs-nav-tabs .nav-link.active { color: var(--blue); background: var(--card-bg); border-color: var(--border-muted); } .acs-hint { font-size: .7rem; color: var(--text-4); margin-top: 4px; } .acs-toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .82rem; color: var(--text-3); } .acs-toggle-label input[type=checkbox] { accent-color: var(--blue); width: 15px; height: 15px; flex-shrink: 0; } /* ── Quick Links dropdown ───────────────────────────────────────────────── */ .topbar-quicklinks-btn { width: auto; padding: 0 12px; gap: 6px; font-size: .82rem; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; height: 36px; cursor: pointer; display: flex; align-items: center; transition: all var(--trans); } .topbar-quicklinks-btn:hover, .topbar-quicklinks-btn[aria-expanded="true"] { background: var(--bg-3); color: var(--yellow); border-color: rgba(229,161,14,.35); } .topbar-quicklinks-btn .fa-bolt { color: var(--yellow); font-size: .82rem; } .topbar-quicklinks-btn::after { display: none; } .quicklinks-menu { min-width: 310px; padding: 4px; } .quicklinks-header { font-size: .72rem; font-weight: 700; color: var(--text-3); letter-spacing: .05em; text-transform: uppercase; padding: 7px 10px 5px; } .quicklinks-item { display: flex !important; align-items: center; gap: 10px; padding: 7px 8px !important; border-radius: 6px; } .quicklinks-item:hover { background: var(--bg-3) !important; } .ql-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .82rem; } .ql-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ql-label { font-size: .82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ql-desc { font-size: .67rem; color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ql-badge { font-size: .58rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; letter-spacing: .06em; flex-shrink: 0; } .ql-live { background: rgba(248,81,73,.15); color: #f85149; border: 1px solid rgba(248,81,73,.3); animation: ql-pulse 1.8s ease-in-out infinite; } @keyframes ql-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } .ql-badge-count { font-size: .72rem; font-weight: 700; color: var(--text-3); min-width: 24px; text-align: right; flex-shrink: 0; } .ql-count-blue { color: var(--blue); }