{"id":927,"date":"2026-05-23T09:38:26","date_gmt":"2026-05-23T09:38:26","guid":{"rendered":"https:\/\/nitanet.net\/?page_id=927"},"modified":"2026-06-05T06:45:32","modified_gmt":"2026-06-05T06:45:32","slug":"nitaco-dashboard","status":"publish","type":"page","link":"https:\/\/nitanet.net\/tr\/nitaco-dashboard\/","title":{"rendered":"NITACO DASHBOARD"},"content":{"rendered":"\n\n\n\n\n\nNITACO \u2014 Dashboard<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&display=swap');\n\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --bg: #f5f7fb;\n --bg2: #ffffff;\n --bg3: #eef2f7;\n --bg4: #e7edf5;\n --border: #e5e9f0;\n --border-lit: #2563eb;\n --purple: #2563eb;\n --purple2: #5b8def;\n --teal: #00a7b5;\n --teal2: #45c5cf;\n --blue: #2563eb;\n --green: #12b886;\n --red: #ef4444;\n --orange: #f59e0b;\n --yellow: #f4b740;\n --text: #1f2937;\n --sub: #6b7280;\n --muted: #9ca3af;\n --font: 'DM Sans', sans-serif;\n --mono: 'DM Mono', monospace;\n --radius: 12px;\n --radius-sm:8px;\n }\n\n html { scroll-behavior: smooth; }\n\n body {\n background: var(--bg);\n font-family: var(--font);\n color: var(--text);\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NOISE OVERLAY\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n body::before {\n content:'';\n position:fixed; inset:0;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'\/%3E%3C\/svg%3E\");\n pointer-events:none; z-index:0;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n LAYOUT\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .layout {\n display: grid;\n grid-template-columns: 220px 1fr;\n min-height: 100vh;\n position: relative; z-index:1;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SIDEBAR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .sidebar {\n background: var(--bg2);\n border-right: 1px solid var(--border);\n display: flex;\n flex-direction: column;\n padding: 28px 0;\n position: sticky; top:0; height:100vh;\n overflow-y: auto;\n }\n\n .logo {\n padding: 0 24px 28px;\n border-bottom: 1px solid var(--border);\n margin-bottom: 20px;\n }\n .logo-badge {\n display: flex; align-items: center; gap: 10px;\n }\n .logo-icon {\n width: 34px; height: 34px;\n background: #fff;\n border-radius: 9px;\n display: flex; align-items: center; justify-content: center;\n font-size: 15px; font-weight: 700; color: #fff;\n letter-spacing: -.03em;\n }\n .logo-icon img {\n width: 100%; height: 100%;\n object-fit: contain;\n display: block;\n border-radius: 9px;\n }\n .logo-text { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }\n .logo-text span { color: var(--teal); }\n\n .nav-group { margin-bottom: 6px; }\n .nav-label {\n font-family: var(--mono);\n font-size: 10px; letter-spacing: .12em; text-transform: uppercase;\n color: var(--muted);\n padding: 0 24px; margin-bottom: 4px; margin-top: 14px;\n }\n .nav-item {\n display: flex; align-items: center; gap: 10px;\n padding: 9px 24px;\n font-size: 13.5px; font-weight: 400; color: var(--sub);\n cursor: pointer; transition: all .18s;\n border-left: 2px solid transparent;\n position: relative;\n }\n .nav-item:hover { color: var(--text); background: rgba(255,255,255,.03); }\n .nav-item.active {\n color: var(--text);\n background: rgba(123,47,190,.08);\n border-left-color: var(--purple);\n font-weight: 500;\n }\n .nav-item .nav-icon { font-size: 15px; width: 18px; text-align: center; }\n .nav-badge {\n margin-left: auto;\n background: var(--purple);\n color: #fff; font-size: 10px; font-weight: 600;\n padding: 2px 7px; border-radius: 20px;\n font-family: var(--mono);\n }\n .nav-badge.green { background: var(--green); color: #000; }\n\n .sidebar-footer {\n margin-top: auto;\n padding: 20px 24px 0;\n border-top: 1px solid var(--border);\n }\n .avatar-row {\n display: flex; align-items: center; gap: 10px;\n }\n .avatar {\n width: 32px; height: 32px; border-radius: 50%;\n background: linear-gradient(135deg, var(--purple), var(--teal));\n display: flex; align-items: center; justify-content: center;\n font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0;\n }\n .avatar-info { min-width: 0; }\n .avatar-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .avatar-role { font-size: 11px; color: var(--sub); }\n .status-dot {\n width: 7px; height: 7px; border-radius: 50%;\n background: var(--green); margin-left: auto; flex-shrink: 0;\n animation: pulse 2s ease-in-out infinite;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MAIN\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .main {\n display: flex; flex-direction: column;\n min-height: 100vh;\n }\n\n \/* TOP BAR *\/\n .topbar {\n display: flex; align-items: center;\n padding: 18px 32px;\n border-bottom: 1px solid var(--border);\n background: var(--bg);\n position: sticky; top:0; z-index:50;\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n gap: 16px;\n }\n .topbar-title { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }\n .topbar-sub { font-size: 12px; color: var(--sub); }\n .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }\n .topbar-date {\n font-family: var(--mono); font-size: 11px; color: var(--sub);\n background: var(--bg2); border: 1px solid var(--border);\n padding: 5px 12px; border-radius: 8px;\n }\n .live-badge {\n display: flex; align-items: center; gap: 5px;\n font-size: 11px; font-weight: 500; color: var(--green);\n background: rgba(34,211,160,.08); border: 1px solid rgba(34,211,160,.2);\n padding: 5px 10px; border-radius: 8px;\n }\n .live-dot {\n width: 6px; height: 6px; border-radius: 50%; background: var(--green);\n animation: pulse 2s ease-in-out infinite;\n }\n .icon-btn {\n width: 34px; height: 34px; border-radius: 8px;\n background: var(--bg2); border: 1px solid var(--border);\n display: flex; align-items: center; justify-content: center;\n cursor: pointer; color: var(--sub); font-size: 16px;\n transition: all .18s;\n }\n .icon-btn:hover { border-color: var(--purple); color: var(--text); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CONTENT AREA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .content { padding: 28px 32px; flex: 1; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n STATS GRID (top row)\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .stats-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 14px;\n margin-bottom: 24px;\n }\n\n .stat-card {\n background: var(--bg2);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 20px;\n position: relative; overflow: hidden;\n transition: border-color .2s, transform .2s;\n animation: fadeUp .5s ease both;\n }\n .stat-card:nth-child(1) { animation-delay:.05s }\n .stat-card:nth-child(2) { animation-delay:.1s }\n .stat-card:nth-child(3) { animation-delay:.15s }\n .stat-card:nth-child(4) { animation-delay:.2s }\n .stat-card:hover { border-color: rgba(123,47,190,.3); transform: translateY(-2px); }\n\n .stat-card::after {\n content:''; position:absolute;\n inset: 0; border-radius: var(--radius);\n background: linear-gradient(135deg, var(--accent, transparent) 0%, transparent 60%);\n opacity: .04; pointer-events: none;\n }\n .stat-card.c-purple { --accent: var(--purple); }\n .stat-card.c-teal { --accent: var(--teal); }\n .stat-card.c-green { --accent: var(--green); }\n .stat-card.c-orange { --accent: var(--orange); }\n\n .stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }\n .stat-icon {\n width: 36px; height: 36px; border-radius: 9px;\n display: flex; align-items: center; justify-content: center; font-size: 17px;\n }\n .stat-icon.purple { background: rgba(123,47,190,.12); }\n .stat-icon.teal { background: rgba(0,194,203,.1); }\n .stat-icon.green { background: rgba(34,211,160,.1); }\n .stat-icon.orange { background: rgba(251,146,60,.1); }\n\n .stat-change {\n font-size: 11px; font-weight: 500; font-family: var(--mono);\n padding: 3px 8px; border-radius: 20px;\n }\n .stat-change.up { color: var(--green); background: rgba(34,211,160,.1); }\n .stat-change.down { color: var(--red); background: rgba(248,113,113,.1); }\n\n .stat-value {\n font-size: 28px; font-weight: 600; letter-spacing: -.04em;\n line-height: 1; margin-bottom: 4px;\n counter-reset: count var(--n);\n }\n .stat-label { font-size: 12px; color: var(--sub); }\n .stat-bar {\n margin-top: 14px; height: 3px;\n background: var(--bg3); border-radius: 3px; overflow: hidden;\n }\n .stat-bar-fill {\n height: 100%; border-radius: 3px;\n animation: barGrow 1s .4s cubic-bezier(.4,0,.2,1) both;\n transform-origin: left;\n }\n .stat-bar-fill.purple { background: linear-gradient(90deg, var(--purple), var(--purple2)); }\n .stat-bar-fill.teal { background: linear-gradient(90deg, var(--teal), var(--teal2)); }\n .stat-bar-fill.green { background: linear-gradient(90deg, #0ea47a, var(--green)); }\n .stat-bar-fill.orange { background: linear-gradient(90deg, #ea580c, var(--orange)); }\n\n @keyframes barGrow {\n from { transform: scaleX(0); }\n to { transform: scaleX(1); }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n TWO COLUMN\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .two-col {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 14px;\n margin-bottom: 24px;\n }\n .two-col.wide-left { grid-template-columns: 1.6fr 1fr; }\n .two-col.wide-right { grid-template-columns: 1fr 1.6fr; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CARD BASE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .card {\n background: var(--bg2);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n overflow: hidden;\n animation: fadeUp .5s ease both;\n }\n .card-head {\n display: flex; align-items: center;\n padding: 18px 20px 14px;\n border-bottom: 1px solid var(--border);\n gap: 10px;\n }\n .card-title { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }\n .card-sub { font-size: 11px; color: var(--sub); margin-left: 2px; }\n .card-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }\n .chip {\n font-size: 11px; font-family: var(--mono); font-weight: 500;\n padding: 3px 9px; border-radius: 20px; cursor: pointer;\n border: 1px solid var(--border); color: var(--sub);\n transition: all .15s;\n }\n .chip.active, .chip:hover { border-color: var(--purple); color: var(--purple); background: rgba(123,47,190,.08); }\n .card-body { padding: 18px 20px; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CHART \u2014 VISITORS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .chart-area {\n height: 140px; position: relative;\n display: flex; align-items: flex-end; gap: 4px;\n padding-bottom: 0;\n }\n .chart-bar-wrap {\n flex: 1; display: flex; flex-direction: column;\n align-items: center; gap: 4px;\n position: relative;\n }\n .chart-bar {\n width: 100%; border-radius: 4px 4px 0 0;\n position: relative; overflow: hidden;\n transition: opacity .2s;\n animation: barUp .6s cubic-bezier(.4,0,.2,1) both;\n cursor: pointer;\n }\n .chart-bar:hover { opacity: .85; }\n .chart-bar.purple-bar { background: linear-gradient(180deg, var(--purple2), var(--purple)); }\n .chart-bar.teal-bar { background: linear-gradient(180deg, var(--teal2), var(--teal)); }\n .chart-bar-label {\n font-family: var(--mono); font-size: 10px; color: var(--muted);\n white-space: nowrap;\n }\n @keyframes barUp {\n from { transform: scaleY(0); transform-origin: bottom; }\n to { transform: scaleY(1); transform-origin: bottom; }\n }\n .chart-bar:nth-child(1) .chart-bar { animation-delay:.05s }\n .chart-bar:nth-child(2) .chart-bar { animation-delay:.1s }\n .chart-bar:nth-child(3) .chart-bar { animation-delay:.15s }\n .chart-bar:nth-child(4) .chart-bar { animation-delay:.2s }\n .chart-bar:nth-child(5) .chart-bar { animation-delay:.25s }\n .chart-bar:nth-child(6) .chart-bar { animation-delay:.3s }\n .chart-bar:nth-child(7) .chart-bar { animation-delay:.35s }\n\n .chart-legend {\n display: flex; align-items: center; gap: 14px;\n margin-top: 14px;\n padding-top: 12px;\n border-top: 1px solid var(--border);\n }\n .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sub); }\n .legend-dot { width: 8px; height: 8px; border-radius: 2px; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n DONUT CHART\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .donut-wrap {\n display: flex; align-items: center; gap: 20px;\n }\n .donut-svg { flex-shrink: 0; }\n .donut-labels { display: flex; flex-direction: column; gap: 10px; }\n .donut-label-item { display: flex; align-items: center; gap: 8px; }\n .donut-color { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }\n .donut-label-text { font-size: 12px; color: var(--sub); flex: 1; }\n .donut-label-val { font-family: var(--mono); font-size: 12px; font-weight: 500; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CONTACTS TABLE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .contacts-table { width: 100%; border-collapse: collapse; }\n .contacts-table th {\n font-family: var(--mono); font-size: 10px; letter-spacing: .08em;\n text-transform: uppercase; color: var(--muted);\n text-align: left; padding: 0 0 10px;\n border-bottom: 1px solid var(--border);\n }\n .contacts-table td {\n padding: 11px 0; font-size: 13px;\n border-bottom: 1px solid rgba(31,41,55,.06);\n vertical-align: middle;\n }\n .contacts-table tr:last-child td { border-bottom: none; }\n .contacts-table tr {\n animation: fadeUp .4s ease both;\n transition: background .15s;\n }\n .contacts-table tr:hover td { background: rgba(255,255,255,.02); }\n .ct1 { animation-delay: .1s } .ct2 { animation-delay: .15s }\n .ct3 { animation-delay: .2s } .ct4 { animation-delay: .25s }\n .ct5 { animation-delay: .3s }\n\n .contact-info { display: flex; align-items: center; gap: 10px; }\n .contact-av {\n width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n font-size: 11px; font-weight: 600; color: #fff;\n }\n .contact-name { font-size: 13px; font-weight: 500; }\n .contact-phone { font-size: 11px; color: var(--sub); font-family: var(--mono); }\n\n .channel-tag {\n font-size: 11px; padding: 2px 8px; border-radius: 5px;\n font-family: var(--mono); font-weight: 500;\n display: inline-flex; align-items: center; gap: 4px;\n }\n .ch-wa { background: rgba(37,211,102,.1); color: #25d366; }\n .ch-ig { background: rgba(225,48,108,.1); color: #e1306c; }\n .ch-em { background: rgba(59,130,246,.1); color: #3b82f6; }\n .ch-web { background: rgba(123,47,190,.12); color: var(--purple2); }\n .ch-ph { background: rgba(251,146,60,.1); color: var(--orange); }\n\n .status-tag {\n font-size: 11px; padding: 3px 9px; border-radius: 20px;\n font-family: var(--mono); font-weight: 500;\n }\n .st-new { background: rgba(123,47,190,.12); color: var(--purple2); border: 1px solid rgba(123,47,190,.2); }\n .st-conv { background: rgba(34,211,160,.1); color: var(--green); border: 1px solid rgba(34,211,160,.2); }\n .st-wait { background: rgba(251,191,36,.1); color: var(--yellow); border: 1px solid rgba(251,191,36,.2); }\n .st-closed { background: rgba(75,85,99,.15); color: var(--sub); border: 1px solid rgba(75,85,99,.3); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MESSAGES FEED\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .msg-list { display: flex; flex-direction: column; gap: 1px; }\n .msg-item {\n display: flex; align-items: flex-start; gap: 10px;\n padding: 12px 0;\n border-bottom: 1px solid rgba(31,41,55,.06);\n animation: fadeUp .4s ease both; cursor: pointer;\n transition: background .15s; border-radius: 8px;\n padding: 10px 12px; margin: 0 -12px;\n }\n .msg-item:hover { background: rgba(37,99,235,.04); }\n .msg-item.unread .msg-name { font-weight: 600; color: var(--text); }\n .msg-item:last-child { border-bottom: none; }\n\n .msg-av {\n width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n font-size: 13px; font-weight: 600; color: #fff; position: relative;\n }\n .msg-online {\n position: absolute; bottom: 0; right: 0;\n width: 9px; height: 9px; border-radius: 50%;\n background: var(--green); border: 2px solid var(--bg2);\n }\n .msg-body { flex: 1; min-width: 0; }\n .msg-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }\n .msg-name { font-size: 13px; color: var(--sub); }\n .msg-time { font-family: var(--mono); font-size: 10px; color: var(--muted); }\n .msg-text {\n font-size: 12px; color: var(--muted);\n white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n max-width: 260px;\n }\n .msg-text.unread-text { color: var(--sub); }\n .msg-tail { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }\n .unread-count {\n width: 18px; height: 18px; border-radius: 50%;\n background: var(--purple); color: #fff;\n font-size: 10px; font-weight: 600; font-family: var(--mono);\n display: flex; align-items: center; justify-content: center;\n }\n .ml1{animation-delay:.05s} .ml2{animation-delay:.1s} .ml3{animation-delay:.15s}\n .ml4{animation-delay:.2s} .ml5{animation-delay:.25s}\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CONVERSION FUNNEL\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .funnel { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }\n .funnel-step {\n display: flex; align-items: center; gap: 12px;\n animation: fadeUp .4s ease both;\n }\n .funnel-step:nth-child(1){animation-delay:.05s}\n .funnel-step:nth-child(2){animation-delay:.1s}\n .funnel-step:nth-child(3){animation-delay:.15s}\n .funnel-step:nth-child(4){animation-delay:.2s}\n .funnel-step:nth-child(5){animation-delay:.25s}\n\n .funnel-label { font-size: 12px; color: var(--sub); width: 110px; flex-shrink: 0; }\n .funnel-bar-wrap { flex: 1; height: 26px; background: var(--bg3); border-radius: 5px; overflow: hidden; position: relative; }\n .funnel-bar-fill {\n height: 100%; border-radius: 5px; position: relative;\n display: flex; align-items: center; padding-left: 10px;\n font-size: 11px; font-weight: 600; color: #fff;\n animation: barGrow 1s .5s cubic-bezier(.4,0,.2,1) both;\n transform-origin: left;\n }\n .funnel-val { font-family: var(--mono); font-size: 12px; font-weight: 500; width: 50px; text-align: right; color: var(--sub); }\n .funnel-pct { font-family: var(--mono); font-size: 11px; width: 40px; text-align: right; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n ACTIVITY FEED\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .activity { display: flex; flex-direction: column; gap: 0; }\n .act-item {\n display: flex; gap: 12px; padding: 10px 0;\n border-bottom: 1px solid rgba(31,41,55,.06);\n animation: fadeUp .4s ease both; position: relative;\n }\n .act-item:last-child { border-bottom: none; }\n .act1{animation-delay:.05s} .act2{animation-delay:.1s} .act3{animation-delay:.15s}\n .act4{animation-delay:.2s} .act5{animation-delay:.25s} .act6{animation-delay:.3s}\n\n .act-line {\n position: absolute; left: 15px; top: 30px; bottom: -10px;\n width: 1px; background: var(--border);\n }\n .act-item:last-child .act-line { display: none; }\n .act-dot {\n width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;\n display: flex; align-items: center; justify-content: center; font-size: 13px;\n position: relative; z-index: 1;\n }\n .act-dot.purple { background: rgba(123,47,190,.15); }\n .act-dot.teal { background: rgba(0,194,203,.1); }\n .act-dot.green { background: rgba(34,211,160,.1); }\n .act-dot.orange { background: rgba(251,146,60,.1); }\n .act-dot.red { background: rgba(248,113,113,.1); }\n\n .act-content { flex: 1; min-width: 0; }\n .act-text { font-size: 12.5px; color: var(--sub); line-height: 1.4; }\n .act-text strong { color: var(--text); font-weight: 500; }\n .act-time { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 2px; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MINI SPARKLINE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .sparkline { height: 40px; margin-top: 8px; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n TRIAGE STATUS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .triage-grid {\n display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 4px 0;\n }\n .triage-stat {\n background: var(--bg3); border-radius: 10px;\n padding: 14px; text-align: center;\n border: 1px solid var(--border);\n transition: border-color .2s;\n animation: fadeUp .4s ease both;\n }\n .triage-stat:hover { border-color: rgba(123,47,190,.3); }\n .ts1{animation-delay:.05s} .ts2{animation-delay:.1s} .ts3{animation-delay:.15s}\n .ts4{animation-delay:.2s} .ts5{animation-delay:.25s} .ts6{animation-delay:.3s}\n\n .triage-num {\n font-size: 22px; font-weight: 600; letter-spacing: -.04em;\n line-height: 1; margin-bottom: 4px;\n }\n .triage-lbl { font-size: 11px; color: var(--sub); line-height: 1.3; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECTION DIVIDER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .section-label {\n font-family: var(--mono); font-size: 10px; letter-spacing: .12em;\n text-transform: uppercase; color: var(--muted);\n margin-bottom: 12px; margin-top: 4px;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n ANIMATIONS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n @keyframes fadeUp {\n from { opacity:0; transform: translateY(12px); }\n to { opacity:1; transform: translateY(0); }\n }\n @keyframes pulse {\n 0%,100% { opacity:1; transform:scale(1); }\n 50% { opacity:.5; transform:scale(.7); }\n }\n @keyframes countUp {\n from { opacity: 0; } to { opacity: 1; }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SCROLLBAR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n ::-webkit-scrollbar { width: 5px; }\n ::-webkit-scrollbar-track { background: transparent; }\n ::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 3px; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n TOOLTIP\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .tooltip-wrap { position: relative; }\n .tooltip-wrap:hover .tooltip-box { opacity: 1; transform: translateY(0); pointer-events: auto; }\n .tooltip-box {\n position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);\n background: var(--bg4); border: 1px solid var(--border);\n border-radius: 8px; padding: 6px 10px;\n font-family: var(--mono); font-size: 11px; color: var(--text);\n white-space: nowrap; pointer-events: none;\n opacity: 0; transition: all .18s;\n z-index: 100;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n GLOW EFFECTS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .glow-purple { box-shadow: 0 0 0 1px rgba(123,47,190,.2), 0 4px 24px rgba(123,47,190,.1); }\n .glow-teal { box-shadow: 0 0 0 1px rgba(0,194,203,.15), 0 4px 24px rgba(0,194,203,.08); }\n\/* MOBILE RESPONSIVE FIX ONLY *\/\n@media (max-width: 768px) {\n\n .layout {\n display: block !important;\n width: 100% !important;\n min-height: auto !important;\n }\n\n .sidebar {\n position: relative !important;\n width: 100% !important;\n height: auto !important;\n padding: 16px 0 !important;\n border-right: none !important;\n border-bottom: 1px solid var(--border) !important;\n }\n\n .nav-group,\n .sidebar-footer {\n display: none !important;\n }\n\n .logo {\n padding: 0 18px !important;\n margin-bottom: 0 !important;\n border-bottom: none !important;\n }\n\n .main {\n width: 100% !important;\n min-height: auto !important;\n }\n\n .topbar {\n position: relative !important;\n top: auto !important;\n padding: 14px 16px !important;\n flex-wrap: wrap !important;\n }\n\n .topbar-right {\n width: 100% !important;\n margin-left: 0 !important;\n justify-content: flex-start !important;\n flex-wrap: wrap !important;\n }\n\n .content {\n padding: 16px !important;\n }\n\n .stats-grid,\n .two-col,\n .two-col.wide-left,\n .two-col.wide-right {\n grid-template-columns: 1fr !important;\n }\n\n .stats-grid,\n .two-col {\n gap: 12px !important;\n }\n\n .contacts-table {\n display: block !important;\n overflow-x: auto !important;\n white-space: nowrap !important;\n }\n\n .chart-area {\n height: 120px !important;\n }\n\n .donut-wrap {\n flex-direction: column !important;\n align-items: flex-start !important;\n }\n\n .triage-grid {\n grid-template-columns: repeat(2, 1fr) !important;\n }\n\n .outputs {\n grid-template-columns: repeat(2, 1fr) !important;\n }\n\n .msg-text {\n max-width: 180px !important;\n }\n}\n\/* RECENT CONTACTS TABLE PREMIUM REDESIGN *\/\n.contacts-table {\n border-collapse: separate !important;\n border-spacing: 0 8px !important;\n}\n\n.contacts-table thead th {\n border-bottom: none !important;\n padding: 0 12px 8px !important;\n color: #64748b !important;\n}\n\n.contacts-table tbody tr {\n background: #111827 !important;\n border-radius: 14px !important;\n}\n\n.contacts-table tbody td {\n background: #111827 !important;\n border-bottom: none !important;\n padding: 12px !important;\n}\n\n.contacts-table tbody td:first-child {\n border-radius: 14px 0 0 14px !important;\n}\n\n.contacts-table tbody td:last-child {\n border-radius: 0 14px 14px 0 !important;\n}\n\n.contacts-table tbody tr:hover td {\n background: #151f33 !important;\n}\n\n.contact-name {\n color: #e2e8f0 !important;\n}\n\n.contact-phone {\n color: #64748b !important;\n}\n\/* RECENT CONTACTS BOX BORDER *\/\n.recent-contacts,\n.contacts-card,\n.table-card {\n border-color: #302A62 !important;\n}\n\n\/* RECENT CONTACTS TITLE BACKGROUND *\/\n.recent-header,\n.contacts-header,\n.table-header {\n background: #302A62 !important;\n}\n.contacts-table {\n border-color: #302A62 !important;\n}\n\n.contacts-table.closest('.card') .card-head {\n background: #302A62 !important;\n}\n\/* RECENT CONTACTS TABLE HEADER BACKGROUND *\/\n.contacts-table thead th {\n background: #0f172a !important;\n color: #94a3b8 !important;\n border-bottom: 1px solid #1e293b !important;\n}\n\/* NITACO PURPLE TABLE LINES *\/\n\n.contacts-table,\n.contacts-table th,\n.contacts-table td,\n.contacts-table tr {\n border-color: #570B5785!important;\n}\n\n\/* row separators *\/\n.contacts-table tbody tr td {\n border-color: #570B5785 !important;\n}\n\n\/* header lines *\/\n.contacts-table thead th {\n border-color: #570B5785!important;\n}\n \/* Light minimal Intercom-style color pass: sizes and layout remain untouched. *\/\n body {\n background:\n radial-gradient(circle at 18% 0%, rgba(37,99,235,.06), transparent 26%),\n linear-gradient(180deg, #fbfcfe 0%, var(--bg) 48%, #f2f5fa 100%);\n }\n\n body::before { opacity: .35; }\n\n .sidebar, .topbar, .stat-card, .card, .topbar-date, .icon-btn {\n box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(31,41,55,.04);\n }\n\n .topbar { background: rgba(251,252,254,.88); }\n\n .nav-item:hover { color: var(--text); background: rgba(37,99,235,.05); }\n .nav-item.active {\n background: rgba(37,99,235,.08);\n border-left-color: var(--blue);\n }\n\n .stat-card:hover { border-color: rgba(37,99,235,.24); }\n .chip.active, .chip:hover { border-color: var(--blue); color: var(--blue); background: rgba(37,99,235,.07); }\n .icon-btn:hover { border-color: rgba(37,99,235,.35); color: var(--blue); background: rgba(37,99,235,.04); }\n\n .stat-icon.purple { background: rgba(37,99,235,.09); }\n .stat-icon.teal { background: rgba(0,167,181,.08); }\n .stat-icon.green { background: rgba(18,184,134,.08); }\n .stat-icon.orange { background: rgba(245,158,11,.1); }\n\n .stat-change.up, .live-indicator { background: rgba(18,184,134,.09); border-color: rgba(18,184,134,.18); }\n .stat-change.down { background: rgba(239,68,68,.08); }\n\n .stat-card::after { opacity: .025; }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"layout\">\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SIDEBAR \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <aside class=\"sidebar\">\n <div class=\"logo\">\n <div class=\"logo-badge\">\n <div class=\"logo-icon\"><img decoding=\"async\" src=\"https:\/\/nitanet.net\/wp-content\/uploads\/2021\/02\/MINI-LOGO.png\" alt=\"Nitaco logo\"><\/div>\n <div class=\"logo-text\">NITA<span>CO<\/span><\/div>\n <\/div>\n <\/div>\n\n <nav class=\"nav-group\">\n <div class=\"nav-label\">Overview<\/div>\n <div class=\"nav-item active\">\n <span class=\"nav-icon\">\u2b21<\/span> Dashboard\n <\/div>\n <div class=\"nav-item\">\n <span class=\"nav-icon\">\u25c8<\/span> Analytics\n <span class=\"nav-badge\">live<\/span>\n <\/div>\n <\/nav>\n\n <nav class=\"nav-group\">\n <div class=\"nav-label\">Communication<\/div>\n <div class=\"nav-item\">\n <span class=\"nav-icon\">\u2709<\/span> Messages\n <span class=\"nav-badge\">12<\/span>\n <\/div>\n <div class=\"nav-item\">\n <span class=\"nav-icon\">\u25ce<\/span> Contacts\n <span class=\"nav-badge green\">340<\/span>\n <\/div>\n <div class=\"nav-item\">\n <span class=\"nav-icon\">\u2b1d<\/span> Campaigns\n <\/div>\n <\/nav>\n\n <nav class=\"nav-group\">\n <div class=\"nav-label\">Triage<\/div>\n <div class=\"nav-item\">\n <span class=\"nav-icon\">\u27e1<\/span> AI Triage\n <\/div>\n <div class=\"nav-item\">\n <span class=\"nav-icon\">\u22a1<\/span> Follow-ups\n <span class=\"nav-badge\">5<\/span>\n <\/div>\n <div class=\"nav-item\">\n <span class=\"nav-icon\">\u25c9<\/span> Bookings\n <\/div>\n <\/nav>\n\n <nav class=\"nav-group\">\n <div class=\"nav-label\">Settings<\/div>\n <div class=\"nav-item\">\n <span class=\"nav-icon\">\u2295<\/span> Integrations\n <\/div>\n <div class=\"nav-item\">\n <span class=\"nav-icon\">\u2297<\/span> Settings\n <\/div>\n <\/nav>\n\n <div class=\"sidebar-footer\">\n <div class=\"avatar-row\">\n <div class=\"avatar\">BK<\/div>\n <div class=\"avatar-info\">\n <div class=\"avatar-name\">Babak Khaleghi<\/div>\n <div class=\"avatar-role\">CEO & CTO<\/div>\n <\/div>\n <div class=\"status-dot\"><\/div>\n <\/div>\n <\/div>\n <\/aside>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 MAIN \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <main class=\"main\">\n\n <!-- TOP BAR -->\n <div class=\"topbar\">\n <div>\n <div class=\"topbar-title\">Dashboard<\/div>\n <div class=\"topbar-sub\">NITACO Intelligence Layer<\/div>\n <\/div>\n <div class=\"topbar-right\">\n <div class=\"live-badge\"><div class=\"live-dot\"><\/div> Live<\/div>\n <div class=\"topbar-date\" id=\"live-date\"><\/div>\n <div class=\"icon-btn\" title=\"Notifications\">\ud83d\udd14<\/div>\n <div class=\"icon-btn\" title=\"Settings\">\u2699<\/div>\n <\/div>\n <\/div>\n\n <!-- CONTENT -->\n <div class=\"content\">\n\n <!-- \u2500\u2500 STATS ROW \u2500\u2500 -->\n <div class=\"stats-grid\">\n\n <div class=\"stat-card c-purple glow-purple\">\n <div class=\"stat-top\">\n <div class=\"stat-icon purple\">\ud83d\udc65<\/div>\n <div class=\"stat-change up\">\u2191 14%<\/div>\n <\/div>\n <div class=\"stat-value\" id=\"n-contacts\">0<\/div>\n <div class=\"stat-label\">Total Contacts<\/div>\n <div class=\"stat-bar\"><div class=\"stat-bar-fill purple\" style=\"width:72%\"><\/div><\/div>\n <\/div>\n\n <div class=\"stat-card c-teal glow-teal\">\n <div class=\"stat-top\">\n <div class=\"stat-icon teal\">\ud83d\udcac<\/div>\n <div class=\"stat-change up\">\u2191 23%<\/div>\n <\/div>\n <div class=\"stat-value\" id=\"n-messages\">0<\/div>\n <div class=\"stat-label\">Messages Today<\/div>\n <div class=\"stat-bar\"><div class=\"stat-bar-fill teal\" style=\"width:58%\"><\/div><\/div>\n <\/div>\n\n <div class=\"stat-card c-green\">\n <div class=\"stat-top\">\n <div class=\"stat-icon green\">\u2713<\/div>\n <div class=\"stat-change up\">\u2191 8%<\/div>\n <\/div>\n <div class=\"stat-value\" id=\"n-converted\">0<\/div>\n <div class=\"stat-label\">Converted<\/div>\n <div class=\"stat-bar\"><div class=\"stat-bar-fill green\" style=\"width:44%\"><\/div><\/div>\n <\/div>\n\n <div class=\"stat-card c-orange\">\n <div class=\"stat-top\">\n <div class=\"stat-icon orange\">\u231a<\/div>\n <div class=\"stat-change down\">\u2193 2m<\/div>\n <\/div>\n <div class=\"stat-value\" id=\"n-response\">0s<\/div>\n <div class=\"stat-label\">Avg Response Time<\/div>\n <div class=\"stat-bar\"><div class=\"stat-bar-fill orange\" style=\"width:30%\"><\/div><\/div>\n <\/div>\n\n <\/div>\n\n <!-- \u2500\u2500 ROW 2: CHART + MESSAGES \u2500\u2500 -->\n <div class=\"two-col wide-left\" style=\"animation-delay:.1s\">\n\n <!-- Visitor Chart -->\n <div class=\"card\">\n <div class=\"card-head\">\n <span style=\"font-size:15px\">\ud83d\udcc8<\/span>\n <div>\n <div class=\"card-title\">Visitors & Conversions<\/div>\n <div class=\"card-sub\">Last 7 days<\/div>\n <\/div>\n <div class=\"card-actions\">\n <div class=\"chip active\">7D<\/div>\n <div class=\"chip\">30D<\/div>\n <div class=\"chip\">90D<\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"chart-area\" id=\"visitor-chart\"><\/div>\n <div class=\"chart-legend\">\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:var(--purple)\"><\/div> Visitors<\/div>\n <div class=\"legend-item\"><div class=\"legend-dot\" style=\"background:var(--teal)\"><\/div> Converted<\/div>\n <div style=\"margin-left:auto;font-size:12px;color:var(--sub)\">\n <span style=\"color:var(--green);font-family:var(--mono);font-weight:600\">+18.4%<\/span> vs last week\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Messages Feed -->\n <div class=\"card\">\n <div class=\"card-head\">\n <span style=\"font-size:15px\">\u2709<\/span>\n <div>\n <div class=\"card-title\">Recent Messages<\/div>\n <div class=\"card-sub\">Inbox<\/div>\n <\/div>\n <div class=\"card-actions\">\n <span style=\"font-size:11px;color:var(--purple);cursor:pointer\">View all \u2192<\/span>\n <\/div>\n <\/div>\n <div class=\"card-body\" style=\"padding-top:8px\">\n <div class=\"msg-list\">\n\n <div class=\"msg-item unread ml1\">\n <div class=\"msg-av\" style=\"background:linear-gradient(135deg,#7B2FBE,#00C2CB)\">\n ZA<div class=\"msg-online\"><\/div>\n <\/div>\n <div class=\"msg-body\">\n <div class=\"msg-top\">\n <div class=\"msg-name\">Zeynep Arslan<\/div>\n <div class=\"msg-time\">2m ago<\/div>\n <\/div>\n <div class=\"msg-text unread-text\">Sa\u00e7 ekimi fiyatlar\u0131n\u0131 \u00f6\u011frenmek istiyorum<\/div>\n <\/div>\n <div class=\"msg-tail\">\n <div class=\"channel-tag ch-wa\">WA<\/div>\n <div class=\"unread-count\">3<\/div>\n <\/div>\n <\/div>\n\n <div class=\"msg-item unread ml2\">\n <div class=\"msg-av\" style=\"background:linear-gradient(135deg,#0ea47a,#00C2CB)\">\n MK\n <\/div>\n <div class=\"msg-body\">\n <div class=\"msg-top\">\n <div class=\"msg-name\">Mehmet Kaya<\/div>\n <div class=\"msg-time\">14m ago<\/div>\n <\/div>\n <div class=\"msg-text unread-text\">Randevu almak istiyorum, m\u00fcsait misiniz?<\/div>\n <\/div>\n <div class=\"msg-tail\">\n <div class=\"channel-tag ch-ig\">IG<\/div>\n <div class=\"unread-count\">1<\/div>\n <\/div>\n <\/div>\n\n <div class=\"msg-item ml3\">\n <div class=\"msg-av\" style=\"background:linear-gradient(135deg,#3b82f6,#818cf8)\">\n AL\n <\/div>\n <div class=\"msg-body\">\n <div class=\"msg-top\">\n <div class=\"msg-name\">Ahmed Al-Rashid<\/div>\n <div class=\"msg-time\">1h ago<\/div>\n <\/div>\n <div class=\"msg-text\">How much does the hair transplant cost?<\/div>\n <\/div>\n <div class=\"msg-tail\">\n <div class=\"channel-tag ch-web\">WEB<\/div>\n <\/div>\n <\/div>\n\n <div class=\"msg-item ml4\">\n <div class=\"msg-av\" style=\"background:linear-gradient(135deg,#fb923c,#fbbf24)\">\n NR\n <\/div>\n <div class=\"msg-body\">\n <div class=\"msg-top\">\n <div class=\"msg-name\">Natasha Romanova<\/div>\n <div class=\"msg-time\">2h ago<\/div>\n <\/div>\n <div class=\"msg-text\">\u0417\u0430\u043f\u0438\u0441\u044c \u043d\u0430 \u043a\u043e\u043d\u0441\u0443\u043b\u044c\u0442\u0430\u0446\u0438\u044e \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430<\/div>\n <\/div>\n <div class=\"msg-tail\">\n <div class=\"channel-tag ch-em\">EM<\/div>\n <\/div>\n <\/div>\n\n <div class=\"msg-item ml5\">\n <div class=\"msg-av\" style=\"background:linear-gradient(135deg,#e1306c,#7B2FBE)\">\n SP\n <\/div>\n <div class=\"msg-body\">\n <div class=\"msg-top\">\n <div class=\"msg-name\">Sara Petrov<\/div>\n <div class=\"msg-time\">3h ago<\/div>\n <\/div>\n <div class=\"msg-text\">Te\u015fekk\u00fcrler, bilgileri ald\u0131m \u2713<\/div>\n <\/div>\n <div class=\"msg-tail\">\n <div class=\"channel-tag ch-ph\">\ud83d\udcde<\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <!-- \u2500\u2500 ROW 3: CONTACTS + FUNNEL + ACTIVITY \u2500\u2500 -->\n <div class=\"two-col\" style=\"margin-bottom:24px\">\n\n <!-- Recent Contacts -->\n <div class=\"card\" style=\"animation-delay:.15s\">\n <div class=\"card-head\">\n <span style=\"font-size:15px\">\u25ce<\/span>\n <div>\n <div class=\"card-title\">Recent Contacts<\/div>\n <div class=\"card-sub\">Today<\/div>\n <\/div>\n <div class=\"card-actions\">\n <div class=\"chip\">Filter<\/div>\n <span style=\"font-size:11px;color:var(--purple);cursor:pointer;margin-left:4px\">All \u2192<\/span>\n <\/div>\n <\/div>\n <div class=\"card-body\" style=\"padding-top:4px\">\n <table class=\"contacts-table\">\n <thead>\n <tr>\n <th>Contact<\/th>\n <th>Channel<\/th>\n <th>Status<\/th>\n <th>Time<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr class=\"ct1\">\n <td>\n <div class=\"contact-info\">\n <div class=\"contact-av\" style=\"background:linear-gradient(135deg,#7B2FBE,#00C2CB)\">ZA<\/div>\n <div>\n <div class=\"contact-name\">Zeynep Arslan<\/div>\n <div class=\"contact-phone\">+90 532 \u2022\u2022\u2022 \u2022\u202247<\/div>\n <\/div>\n <\/div>\n <\/td>\n <td><span class=\"channel-tag ch-wa\">WhatsApp<\/span><\/td>\n <td><span class=\"status-tag st-new\">New<\/span><\/td>\n <td style=\"font-family:var(--mono);font-size:11px;color:var(--sub)\">09:42<\/td>\n <\/tr>\n <tr class=\"ct2\">\n <td>\n <div class=\"contact-info\">\n <div class=\"contact-av\" style=\"background:linear-gradient(135deg,#0ea47a,#3b82f6)\">MK<\/div>\n <div>\n <div class=\"contact-name\">Mehmet Kaya<\/div>\n <div class=\"contact-phone\">+90 555 \u2022\u2022\u2022 \u2022\u202221<\/div>\n <\/div>\n <\/div>\n <\/td>\n <td><span class=\"channel-tag ch-ig\">Instagram<\/span><\/td>\n <td><span class=\"status-tag st-wait\">Waiting<\/span><\/td>\n <td style=\"font-family:var(--mono);font-size:11px;color:var(--sub)\">09:28<\/td>\n <\/tr>\n <tr class=\"ct3\">\n <td>\n <div class=\"contact-info\">\n <div class=\"contact-av\" style=\"background:linear-gradient(135deg,#3b82f6,#818cf8)\">AL<\/div>\n <div>\n <div class=\"contact-name\">Ahmed Al-Rashid<\/div>\n <div class=\"contact-phone\">+966 50 \u2022\u2022\u2022 \u2022\u202233<\/div>\n <\/div>\n <\/div>\n <\/td>\n <td><span class=\"channel-tag ch-web\">Web Chat<\/span><\/td>\n <td><span class=\"status-tag st-conv\">Converted<\/span><\/td>\n <td style=\"font-family:var(--mono);font-size:11px;color:var(--sub)\">08:55<\/td>\n <\/tr>\n <tr class=\"ct4\">\n <td>\n <div class=\"contact-info\">\n <div class=\"contact-av\" style=\"background:linear-gradient(135deg,#fb923c,#fbbf24)\">NR<\/div>\n <div>\n <div class=\"contact-name\">Natasha Romanova<\/div>\n <div class=\"contact-phone\">+7 916 \u2022\u2022\u2022 \u2022\u202288<\/div>\n <\/div>\n <\/div>\n <\/td>\n <td><span class=\"channel-tag ch-em\">Email<\/span><\/td>\n <td><span class=\"status-tag st-conv\">Converted<\/span><\/td>\n <td style=\"font-family:var(--mono);font-size:11px;color:var(--sub)\">08:11<\/td>\n <\/tr>\n <tr class=\"ct5\">\n <td>\n <div class=\"contact-info\">\n <div class=\"contact-av\" style=\"background:linear-gradient(135deg,#e1306c,#7B2FBE)\">FT<\/div>\n <div>\n <div class=\"contact-name\">Fatma Tekin<\/div>\n <div class=\"contact-phone\">+90 542 \u2022\u2022\u2022 \u2022\u202209<\/div>\n <\/div>\n <\/div>\n <\/td>\n <td><span class=\"channel-tag ch-ph\">Phone<\/span><\/td>\n <td><span class=\"status-tag st-closed\">Closed<\/span><\/td>\n <td style=\"font-family:var(--mono);font-size:11px;color:var(--sub)\">07:30<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <!-- Right column: Funnel + Channel Donut -->\n <div style=\"display:flex;flex-direction:column;gap:14px\">\n\n <!-- Conversion Funnel -->\n <div class=\"card\" style=\"animation-delay:.2s\">\n <div class=\"card-head\">\n <span style=\"font-size:15px\">\u27e1<\/span>\n <div>\n <div class=\"card-title\">Conversion Funnel<\/div>\n <div class=\"card-sub\">Triage pipeline<\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"funnel\">\n <div class=\"funnel-step\">\n <div class=\"funnel-label\">Reached<\/div>\n <div class=\"funnel-bar-wrap\">\n <div class=\"funnel-bar-fill\" style=\"background:linear-gradient(90deg,var(--purple),var(--purple2));width:100%\">340<\/div>\n <\/div>\n <div class=\"funnel-pct\" style=\"color:var(--sub)\">100%<\/div>\n <\/div>\n <div class=\"funnel-step\">\n <div class=\"funnel-label\">Engaged<\/div>\n <div class=\"funnel-bar-wrap\">\n <div class=\"funnel-bar-fill\" style=\"background:linear-gradient(90deg,#2563eb,var(--blue));width:74%\">252<\/div>\n <\/div>\n <div class=\"funnel-pct\" style=\"color:var(--blue)\">74%<\/div>\n <\/div>\n <div class=\"funnel-step\">\n <div class=\"funnel-label\">Interested<\/div>\n <div class=\"funnel-bar-wrap\">\n <div class=\"funnel-bar-fill\" style=\"background:linear-gradient(90deg,var(--teal),var(--teal2));width:52%\">177<\/div>\n <\/div>\n <div class=\"funnel-pct\" style=\"color:var(--teal)\">52%<\/div>\n <\/div>\n <div class=\"funnel-step\">\n <div class=\"funnel-label\">Scheduled<\/div>\n <div class=\"funnel-bar-wrap\">\n <div class=\"funnel-bar-fill\" style=\"background:linear-gradient(90deg,#0ea47a,var(--green));width:31%\">105<\/div>\n <\/div>\n <div class=\"funnel-pct\" style=\"color:var(--green)\">31%<\/div>\n <\/div>\n <div class=\"funnel-step\">\n <div class=\"funnel-label\">Converted<\/div>\n <div class=\"funnel-bar-wrap\">\n <div class=\"funnel-bar-fill\" style=\"background:linear-gradient(90deg,#d97706,var(--yellow));width:18%\">61<\/div>\n <\/div>\n <div class=\"funnel-pct\" style=\"color:var(--yellow)\">18%<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Channel Breakdown Donut -->\n <div class=\"card\" style=\"animation-delay:.25s\">\n <div class=\"card-head\">\n <span style=\"font-size:15px\">\u25c8<\/span>\n <div>\n <div class=\"card-title\">Channel Breakdown<\/div>\n <div class=\"card-sub\">This month<\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"donut-wrap\">\n <svg class=\"donut-svg\" width=\"90\" height=\"90\" viewBox=\"0 0 90 90\">\n <circle cx=\"45\" cy=\"45\" r=\"35\" fill=\"none\" stroke=\"#1a2235\" stroke-width=\"12\"\/>\n <!-- WA 38% -->\n <circle cx=\"45\" cy=\"45\" r=\"35\" fill=\"none\" stroke=\"#25d366\" stroke-width=\"12\"\n stroke-dasharray=\"83.5 136.5\" stroke-dashoffset=\"0\"\n transform=\"rotate(-90 45 45)\"\n style=\"animation: donutSpin 1s .3s ease both;\"\/>\n <!-- IG 24% -->\n <circle cx=\"45\" cy=\"45\" r=\"35\" fill=\"none\" stroke=\"#e1306c\" stroke-width=\"12\"\n stroke-dasharray=\"52.8 167.2\" stroke-dashoffset=\"-83.5\"\n transform=\"rotate(-90 45 45)\"\/>\n <!-- WEB 20% -->\n <circle cx=\"45\" cy=\"45\" r=\"35\" fill=\"none\" stroke=\"var(--purple2)\" stroke-width=\"12\"\n stroke-dasharray=\"44 176\" stroke-dashoffset=\"-136.3\"\n transform=\"rotate(-90 45 45)\"\/>\n <!-- EMAIL 12% -->\n <circle cx=\"45\" cy=\"45\" r=\"35\" fill=\"none\" stroke=\"#3b82f6\" stroke-width=\"12\"\n stroke-dasharray=\"26.4 193.6\" stroke-dashoffset=\"-180.3\"\n transform=\"rotate(-90 45 45)\"\/>\n <!-- PHONE 6% -->\n <circle cx=\"45\" cy=\"45\" r=\"35\" fill=\"none\" stroke=\"var(--orange)\" stroke-width=\"12\"\n stroke-dasharray=\"13.2 206.8\" stroke-dashoffset=\"-206.7\"\n transform=\"rotate(-90 45 45)\"\/>\n <text x=\"45\" y=\"49\" text-anchor=\"middle\" font-family=\"DM Sans\" font-size=\"12\" font-weight=\"600\" fill=\"#e2e8f0\">340<\/text>\n <\/svg>\n <div class=\"donut-labels\">\n <div class=\"donut-label-item\">\n <div class=\"donut-color\" style=\"background:#25d366\"><\/div>\n <div class=\"donut-label-text\">WhatsApp<\/div>\n <div class=\"donut-label-val\" style=\"color:#25d366\">38%<\/div>\n <\/div>\n <div class=\"donut-label-item\">\n <div class=\"donut-color\" style=\"background:#e1306c\"><\/div>\n <div class=\"donut-label-text\">Instagram<\/div>\n <div class=\"donut-label-val\" style=\"color:#e1306c\">24%<\/div>\n <\/div>\n <div class=\"donut-label-item\">\n <div class=\"donut-color\" style=\"background:var(--purple2)\"><\/div>\n <div class=\"donut-label-text\">Web Chat<\/div>\n <div class=\"donut-label-val\" style=\"color:var(--purple2)\">20%<\/div>\n <\/div>\n <div class=\"donut-label-item\">\n <div class=\"donut-color\" style=\"background:#3b82f6\"><\/div>\n <div class=\"donut-label-text\">Email<\/div>\n <div class=\"donut-label-val\" style=\"color:#3b82f6\">12%<\/div>\n <\/div>\n <div class=\"donut-label-item\">\n <div class=\"donut-color\" style=\"background:var(--orange)\"><\/div>\n <div class=\"donut-label-text\">Phone<\/div>\n <div class=\"donut-label-val\" style=\"color:var(--orange)\">6%<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n <!-- \u2500\u2500 ROW 4: TRIAGE STATS + ACTIVITY \u2500\u2500 -->\n <div class=\"two-col\" style=\"margin-bottom:0\">\n\n <!-- NITACO Triage Status -->\n <div class=\"card\" style=\"animation-delay:.25s\">\n <div class=\"card-head\">\n <span style=\"font-size:15px\">\u27e1<\/span>\n <div>\n <div class=\"card-title\">NITACO Triage<\/div>\n <div class=\"card-sub\">AI engine status<\/div>\n <\/div>\n <div class=\"card-actions\">\n <div class=\"live-badge\" style=\"font-size:10px;padding:3px 8px\"><div class=\"live-dot\"><\/div> Active<\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\">\n <div class=\"triage-grid\">\n <div class=\"triage-stat ts1\">\n <div class=\"triage-num\" style=\"color:var(--purple)\">247<\/div>\n <div class=\"triage-lbl\">Intents<br>Analyzed<\/div>\n <\/div>\n <div class=\"triage-stat ts2\">\n <div class=\"triage-num\" style=\"color:var(--teal)\">91%<\/div>\n <div class=\"triage-lbl\">Empathy<br>Score<\/div>\n <\/div>\n <div class=\"triage-stat ts3\">\n <div class=\"triage-num\" style=\"color:var(--green)\">38<\/div>\n <div class=\"triage-lbl\">Hesitations<br>Handled<\/div>\n <\/div>\n <div class=\"triage-stat ts4\">\n <div class=\"triage-num\" style=\"color:var(--yellow)\">12<\/div>\n <div class=\"triage-lbl\">Human<br>Escalations<\/div>\n <\/div>\n <div class=\"triage-stat ts5\">\n <div class=\"triage-num\" style=\"color:var(--blue)\">5<\/div>\n <div class=\"triage-lbl\">Languages<br>Active<\/div>\n <\/div>\n <div class=\"triage-stat ts6\">\n <div class=\"triage-num\" style=\"color:var(--orange)\">61<\/div>\n <div class=\"triage-lbl\">Leads<br>Converted<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Activity Feed -->\n <div class=\"card\" style=\"animation-delay:.3s\">\n <div class=\"card-head\">\n <span style=\"font-size:15px\">\u22a1<\/span>\n <div>\n <div class=\"card-title\">Live Activity<\/div>\n <div class=\"card-sub\">Real-time events<\/div>\n <\/div>\n <\/div>\n <div class=\"card-body\" style=\"padding-top:6px\">\n <div class=\"activity\">\n <div class=\"act-item act1\">\n <div class=\"act-line\"><\/div>\n <div class=\"act-dot teal\">\ud83d\udcac<\/div>\n <div class=\"act-content\">\n <div class=\"act-text\"><strong>New message<\/strong> from Zeynep Arslan via WhatsApp \u2014 hair transplant inquiry<\/div>\n <div class=\"act-time\">2 minutes ago<\/div>\n <\/div>\n <\/div>\n <div class=\"act-item act2\">\n <div class=\"act-line\"><\/div>\n <div class=\"act-dot green\">\u2713<\/div>\n <div class=\"act-content\">\n <div class=\"act-text\"><strong>Converted<\/strong> \u2014 Ahmed Al-Rashid booked a consultation for Monday 10:00<\/div>\n <div class=\"act-time\">45 minutes ago<\/div>\n <\/div>\n <\/div>\n <div class=\"act-item act3\">\n <div class=\"act-line\"><\/div>\n <div class=\"act-dot purple\">\u27e1<\/div>\n <div class=\"act-content\">\n <div class=\"act-text\"><strong>Triage<\/strong> detected hesitation in Mehmet Kaya \u2014 follow-up scheduled<\/div>\n <div class=\"act-time\">1 hour ago<\/div>\n <\/div>\n <\/div>\n <div class=\"act-item act4\">\n <div class=\"act-line\"><\/div>\n <div class=\"act-dot orange\">\ud83d\udd14<\/div>\n <div class=\"act-content\">\n <div class=\"act-text\"><strong>Campaign sent<\/strong> \u2014 47 clients notified about May promotion (TR\/EN\/AR)<\/div>\n <div class=\"act-time\">2 hours ago<\/div>\n <\/div>\n <\/div>\n <div class=\"act-item act5\">\n <div class=\"act-line\"><\/div>\n <div class=\"act-dot green\">\ud83d\udcc5<\/div>\n <div class=\"act-content\">\n <div class=\"act-text\"><strong>Booking confirmed<\/strong> \u2014 Natasha Romanova, Fri 14:00 via Instagram<\/div>\n <div class=\"act-time\">3 hours ago<\/div>\n <\/div>\n <\/div>\n <div class=\"act-item act6\">\n <div class=\"act-dot red\">\u2197<\/div>\n <div class=\"act-content\">\n <div class=\"act-text\"><strong>Escalated<\/strong> to human agent \u2014 complex medical query from web chat<\/div>\n <div class=\"act-time\">4 hours ago<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <\/div><!-- \/content -->\n <\/main>\n<\/div>\n\n<script>\n \/\/ Live date\n function updateDate() {\n const d = new Date();\n const opts = { weekday:'short', month:'short', day:'numeric', hour:'2-digit', minute:'2-digit' };\n document.getElementById('live-date').textContent = d.toLocaleString('en-GB', opts);\n }\n updateDate(); setInterval(updateDate, 60000);\n\n \/\/ Count-up animation\n function countUp(el, target, suffix='', duration=1200) {\n let start = 0, step = target \/ (duration \/ 16);\n const tick = () => {\n start = Math.min(start + step, target);\n el.textContent = Math.round(start).toLocaleString() + suffix;\n if (start < target) requestAnimationFrame(tick);\n };\n setTimeout(tick, 200);\n }\n\n countUp(document.getElementById('n-contacts'), 340, '');\n countUp(document.getElementById('n-messages'), 127, '');\n countUp(document.getElementById('n-converted'), 61, '');\n countUp(document.getElementById('n-response'), 42, 's');\n\n \/\/ Visitor chart\n const days = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];\n const visits = [68, 82, 74, 95, 110, 88, 127];\n const convs = [12, 18, 14, 22, 31, 20, 38];\n const max = Math.max(...visits);\n const chart = document.getElementById('visitor-chart');\n const H = 130;\n\n days.forEach((d, i) => {\n const wrap = document.createElement('div');\n wrap.className = 'chart-bar-wrap tooltip-wrap';\n\n const bv = document.createElement('div');\n bv.className = 'chart-bar purple-bar';\n bv.style.height = (visits[i] \/ max * H) + 'px';\n bv.style.animationDelay = (i * 0.07) + 's';\n\n const bc = document.createElement('div');\n bc.className = 'chart-bar teal-bar';\n bc.style.height = (convs[i] \/ max * H) + 'px';\n bc.style.animationDelay = (i * 0.07 + 0.05) + 's';\n bc.style.marginLeft = '2px';\n\n const lbl = document.createElement('div');\n lbl.className = 'chart-bar-label';\n lbl.textContent = d;\n\n const tip = document.createElement('div');\n tip.className = 'tooltip-box';\n tip.innerHTML = `<strong>${d}<\/strong><br>Visitors: ${visits[i]}<br>Converted: ${convs[i]}`;\n\n \/\/ Wrap both bars in a mini row\n const row = document.createElement('div');\n row.style.cssText = 'display:flex;align-items:flex-end;gap:2px;flex:1;justify-content:center;';\n row.appendChild(bv);\n row.appendChild(bc);\n\n wrap.appendChild(row);\n wrap.appendChild(lbl);\n wrap.appendChild(tip);\n chart.appendChild(wrap);\n });\n\n \/\/ Nav item click\n document.querySelectorAll('.nav-item').forEach(item => {\n item.addEventListener('click', () => {\n document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));\n item.classList.add('active');\n });\n });\n\n \/\/ Chip toggle\n document.querySelectorAll('.chip').forEach(chip => {\n chip.addEventListener('click', () => {\n chip.closest('.card-actions').querySelectorAll('.chip').forEach(c => c.classList.remove('active'));\n chip.classList.add('active');\n });\n });\n\n \/\/ Simulate live updates\n setInterval(() => {\n const dots = document.querySelectorAll('.live-dot, .status-dot, .pulse-dot');\n \/\/ already animated via CSS\n }, 2000);\n<\/script>\n<\/body>\n<\/html>\n\n\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>NITACO \u2014 Dashboard NITACO Overview \u2b21 Dashboard \u25c8 Analytics live Communication \u2709 Messages 12 \u25ce Contacts 340 \u2b1d Campaigns Triage \u27e1 AI Triage \u22a1 Follow-ups 5 \u25c9 Bookings Settings \u2295 Integrations \u2297 Settings BK Babak Khaleghi CEO & CTO Dashboard NITACO Intelligence Layer Live \ud83d\udd14 \u2699 \ud83d\udc65 \u2191 14% 0 Total Contacts \ud83d\udcac \u2191 23% […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-927","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>NITACO DASHBOARD – NITACO IT Company<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nitanet.net\/tr\/nitaco-dashboard\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"NITACO DASHBOARD – NITACO IT Company\" \/>\n<meta property=\"og:description\" content=\"NITACO \u2014 Dashboard NITACO Overview \u2b21 Dashboard \u25c8 Analytics live Communication \u2709 Messages 12 \u25ce Contacts 340 \u2b1d Campaigns Triage \u27e1 AI Triage \u22a1 Follow-ups 5 \u25c9 Bookings Settings \u2295 Integrations \u2297 Settings BK Babak Khaleghi CEO & CTO Dashboard NITACO Intelligence Layer Live \ud83d\udd14 \u2699 \ud83d\udc65 \u2191 14% 0 Total Contacts \ud83d\udcac \u2191 23% […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nitanet.net\/tr\/nitaco-dashboard\/\" \/>\n<meta property=\"og:site_name\" content=\"NITACO IT Company\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/share\/18VjWyiZvV\/?mibextid=wwXIfr\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-05T06:45:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/nitanet.net\/wp-content\/uploads\/2021\/02\/MINI-LOGO.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/nitanet.net\\\/nitaco-dashboard\\\/\",\"url\":\"https:\\\/\\\/nitanet.net\\\/nitaco-dashboard\\\/\",\"name\":\"NITACO DASHBOARD – NITACO IT Company\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nitanet.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/nitanet.net\\\/nitaco-dashboard\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/nitanet.net\\\/nitaco-dashboard\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/nitanet.net\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/MINI-LOGO.png\",\"datePublished\":\"2026-05-23T09:38:26+00:00\",\"dateModified\":\"2026-06-05T06:45:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/nitanet.net\\\/nitaco-dashboard\\\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/nitanet.net\\\/nitaco-dashboard\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/nitanet.net\\\/nitaco-dashboard\\\/#primaryimage\",\"url\":\"https:\\\/\\\/nitanet.net\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/MINI-LOGO.png\",\"contentUrl\":\"https:\\\/\\\/nitanet.net\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/MINI-LOGO.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/nitanet.net\\\/nitaco-dashboard\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/nitanet.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"NITACO DASHBOARD\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/nitanet.net\\\/#website\",\"url\":\"https:\\\/\\\/nitanet.net\\\/\",\"name\":\"NITACO\",\"description\":\"AI Communication Intelligence & Automation\",\"publisher\":{\"@id\":\"https:\\\/\\\/nitanet.net\\\/#organization\"},\"alternateName\":\"NITACO AI\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/nitanet.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/nitanet.net\\\/#organization\",\"name\":\"NITACO IT Company\",\"url\":\"https:\\\/\\\/nitanet.net\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\\\/\\\/nitanet.net\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/nitanet.net\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/cropped-NEW2.png\",\"contentUrl\":\"https:\\\/\\\/nitanet.net\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/cropped-NEW2.png\",\"width\":472,\"height\":227,\"caption\":\"NITACO IT Company\"},\"image\":{\"@id\":\"https:\\\/\\\/nitanet.net\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/share\\\/18VjWyiZvV\\\/?mibextid=wwXIfr\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"NITACO DASHBOARD – NITACO IT Company","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/nitanet.net\/tr\/nitaco-dashboard\/","og_locale":"tr_TR","og_type":"article","og_title":"NITACO DASHBOARD – NITACO IT Company","og_description":"NITACO \u2014 Dashboard NITACO Overview \u2b21 Dashboard \u25c8 Analytics live Communication \u2709 Messages 12 \u25ce Contacts 340 \u2b1d Campaigns Triage \u27e1 AI Triage \u22a1 Follow-ups 5 \u25c9 Bookings Settings \u2295 Integrations \u2297 Settings BK Babak Khaleghi CEO & CTO Dashboard NITACO Intelligence Layer Live \ud83d\udd14 \u2699 \ud83d\udc65 \u2191 14% 0 Total Contacts \ud83d\udcac \u2191 23% […]","og_url":"https:\/\/nitanet.net\/tr\/nitaco-dashboard\/","og_site_name":"NITACO IT Company","article_publisher":"https:\/\/www.facebook.com\/share\/18VjWyiZvV\/?mibextid=wwXIfr","article_modified_time":"2026-06-05T06:45:32+00:00","og_image":[{"url":"https:\/\/nitanet.net\/wp-content\/uploads\/2021\/02\/MINI-LOGO.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tahmini okuma s\u00fcresi":"1 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/nitanet.net\/nitaco-dashboard\/","url":"https:\/\/nitanet.net\/nitaco-dashboard\/","name":"NITACO DASHBOARD – NITACO IT Company","isPartOf":{"@id":"https:\/\/nitanet.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/nitanet.net\/nitaco-dashboard\/#primaryimage"},"image":{"@id":"https:\/\/nitanet.net\/nitaco-dashboard\/#primaryimage"},"thumbnailUrl":"https:\/\/nitanet.net\/wp-content\/uploads\/2021\/02\/MINI-LOGO.png","datePublished":"2026-05-23T09:38:26+00:00","dateModified":"2026-06-05T06:45:32+00:00","breadcrumb":{"@id":"https:\/\/nitanet.net\/nitaco-dashboard\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nitanet.net\/nitaco-dashboard\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/nitanet.net\/nitaco-dashboard\/#primaryimage","url":"https:\/\/nitanet.net\/wp-content\/uploads\/2021\/02\/MINI-LOGO.png","contentUrl":"https:\/\/nitanet.net\/wp-content\/uploads\/2021\/02\/MINI-LOGO.png"},{"@type":"BreadcrumbList","@id":"https:\/\/nitanet.net\/nitaco-dashboard\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/nitanet.net\/"},{"@type":"ListItem","position":2,"name":"NITACO DASHBOARD"}]},{"@type":"WebSite","@id":"https:\/\/nitanet.net\/#website","url":"https:\/\/nitanet.net\/","name":"NITACO","description":"Yapay Zeka \u0130leti\u015fim Zekas\u0131 ve Otomasyonu","publisher":{"@id":"https:\/\/nitanet.net\/#organization"},"alternateName":"NITACO AI","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nitanet.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/nitanet.net\/#organization","name":"NITACO Bili\u015fim \u015eirketi","url":"https:\/\/nitanet.net\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/nitanet.net\/#\/schema\/logo\/image\/","url":"https:\/\/nitanet.net\/wp-content\/uploads\/2021\/02\/cropped-NEW2.png","contentUrl":"https:\/\/nitanet.net\/wp-content\/uploads\/2021\/02\/cropped-NEW2.png","width":472,"height":227,"caption":"NITACO IT Company"},"image":{"@id":"https:\/\/nitanet.net\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/share\/18VjWyiZvV\/?mibextid=wwXIfr"]}]}},"_links":{"self":[{"href":"https:\/\/nitanet.net\/tr\/wp-json\/wp\/v2\/pages\/927","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nitanet.net\/tr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nitanet.net\/tr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nitanet.net\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nitanet.net\/tr\/wp-json\/wp\/v2\/comments?post=927"}],"version-history":[{"count":12,"href":"https:\/\/nitanet.net\/tr\/wp-json\/wp\/v2\/pages\/927\/revisions"}],"predecessor-version":[{"id":1355,"href":"https:\/\/nitanet.net\/tr\/wp-json\/wp\/v2\/pages\/927\/revisions\/1355"}],"wp:attachment":[{"href":"https:\/\/nitanet.net\/tr\/wp-json\/wp\/v2\/media?parent=927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}