@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { --bg: #0a0d16; --bg2: #0f1320; --bg3: #141928; --bg4: #1a2035; --border: rgba(99,130,255,0.15); --border2: rgba(99,130,255,0.25); --border3: rgba(99,130,255,0.45); --blue: #4f7cff; --blue3: #6394ff; --blue-dim: rgba(79,124,255,0.10); --green: #22c55e; --green-dim: rgba(34,197,94,0.10); --amber: #f59e0b; --amber-dim: rgba(245,158,11,0.10); --red: #ef4444; --red-dim: rgba(239,68,68,0.10); --danger: #ef4444; --text: #f1f5f9; --text2: #8896b3; --text3: #5a6a88; --mono: 'IBM Plex Mono', monospace; --sans: 'JetBrains Mono', 'Inter', sans-serif; --r: 8px; --r2: 12px; --r3: 16px; --shadow: 0 4px 24px -2px rgba(0,0,0,0.5); --shadow-blue: 0 0 24px -5px rgba(79,124,255,0.3); --safe-area-inset-bottom: env(safe-area-inset-bottom); --radius: var(--r); --radius-lg: var(--r2); /* NOVAS */ --font-sm: 12px; --font-base: 14px; --font-lg: 15px; --card-padding: 18px 22px; --modal-width: 520px; --transition: 0.2s ease; --toast-bg: #1a2035; --toast-border: rgba(99,130,255,0.25); --toast-shadow: 0 8px 32px rgba(0,0,0,0.6); } /* ════════════════════════════════════════════════════════════ LIGHT THEME — ativado por data-theme="light" no ════════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg: #f4f5f8; --bg2: #ffffff; --bg3: #f0f1f5; --bg4: #e8eaf0; --border: rgba(0,0,0,0.08); --border2: rgba(0,0,0,0.14); --border3: rgba(0,0,0,0.24); --blue-dim: rgba(79,124,255,0.08); --text: #1e2132; --text2: #5a6070; --text3: #8a92a0; --shadow: 0 4px 24px -2px rgba(0,0,0,0.10); --shadow-blue: 0 0 24px -5px rgba(79,124,255,0.12); --toast-bg: #ffffff; --toast-border: rgba(0,0,0,0.12); --toast-shadow: 0 8px 32px rgba(0,0,0,0.15); } /* Light: navbar e brand */ [data-theme="light"] .navbar-single { background: #ffffff; border-bottom-color: var(--border2); } [data-theme="light"] .nav-brand img { filter: none !important; } [data-theme="light"] .nav-section { color: var(--text2); } [data-theme="light"] .nav-section:hover { background: var(--bg3); color: var(--text); } [data-theme="light"] .nav-section.active { background: var(--blue-dim); color: var(--blue); } [data-theme="light"] .notif-panel { background: #ffffff; border-color: var(--border2); } [data-theme="light"] .notif-item { border-bottom-color: var(--border); } [data-theme="light"] .notif-empty { color: var(--text3); } /* Light: login page */ [data-theme="light"] .login-body { background: #f4f5f8; } [data-theme="light"] .login-card { background: #ffffff; box-shadow: 0 4px 24px -2px rgba(0,0,0,0.10); } [data-theme="light"] .login-card h1 { color: var(--text); } [data-theme="light"] .login-header img { filter: none !important; } /* Light: links da sidebar admin */ [data-theme="light"] .admin-nav a { color: var(--text2); } [data-theme="light"] .admin-nav a:hover { background: var(--bg3); color: var(--text); } [data-theme="light"] .admin-nav a.active { background: var(--blue-dim); color: var(--blue); } /* Light: cards em geral */ [data-theme="light"] .card, [data-theme="light"] .mnt-panel, [data-theme="light"] .dash-card { background: var(--bg2); } /* Light: inputs */ [data-theme="light"] .form-input { background: var(--bg); color: var(--text); border-color: var(--border2); } [data-theme="light"] .form-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); } /* Light: badges inline */ [data-theme="light"] .badge-ok-inline { background: var(--green-dim); color: #16a34a; } [data-theme="light"] .badge-atencao { background: var(--amber-dim); color: #d97706; } [data-theme="light"] .badge-critico { background: var(--red-dim); color: #dc2626; } /* Light: análise IA blocks */ [data-theme="light"] .critico-item { background: rgba(239,68,68,0.05); border-left-color: #e24b4a; } [data-theme="light"] .atencao-item { background: rgba(245,158,11,0.05); border-left-color: #EF9F27; } /* Transição suave entre temas */ html { transition: background 0.25s ease, color 0.25s ease; } html[data-theme="light"], html[data-theme="light"] * { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } /* PWA Mobile Adjustments */ @media (max-width: 768px) { .navbar-single { padding-bottom: calc(10px + var(--safe-area-inset-bottom)); height: auto; } .container { padding-bottom: 100px; } .metrics { grid-template-columns: repeat(2, 1fr); } .dash-grid { grid-template-columns: 1fr; } .admin-layout { width: auto; margin-left: 0; } .admin-sidebar { display: none; } .admin-main { margin-left: 0; } .client-row { flex-wrap: wrap; } } /* Tablet Adjustments */ @media (min-width: 769px) and (max-width: 1024px) { .metrics { grid-template-columns: repeat(2, 1fr); } .dash-grid { grid-template-columns: 1fr 240px; } .mnt-metrics-grid { grid-template-columns: repeat(2, 1fr); } .form-row { grid-template-columns: 1fr; } } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); overflow-x: hidden; background-image: radial-gradient(ellipse at 20% 50%, rgba(79,124,255,0.04) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(99,130,255,0.03) 0%, transparent 50%); color: var(--text); font-family: var(--sans); font-size: var(--font-base); font-weight: 400; line-height: 1.65; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── SINGLE NAVBAR ─────────────────────────────── */ .navbar-single { height: 52px; background: #070a12; border-bottom: 1px solid var(--border); padding: 0 20px; display: flex; align-items: center; gap: 20px; position: sticky; top: 0; z-index: 201; } .nav-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; } .brand-name { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .nav-sections { display: flex; align-items: center; gap: 2px; flex: 1; } .nav-section { display: flex; align-items: center; gap: 6px; padding: 0 14px; height: 52px; font-size: 13px; color: rgba(255,255,255,0.45); text-decoration: none; border-bottom: 2px solid transparent; transition: all var(--transition); } .nav-section svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .nav-section:hover { color: rgba(255,255,255,0.75); background: rgba(99,130,255,0.04); } .nav-section.active { color: #fff; border-bottom-color: var(--blue); background: rgba(79,124,255,0.06); font-weight: 500; } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; position: relative; } .notif-btn { width: 34px; height: 34px; border-radius: var(--r); border: 1px solid var(--border2); background: var(--bg3); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: all 0.2s; } .notif-btn:hover { border-color: var(--border3); background: var(--bg4); } .notif-btn svg { stroke: var(--text2); } .theme-toggle { width: 34px; height: 34px; border-radius: var(--r); border: 1px solid var(--border2); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; color: var(--text2); padding: 0; line-height: 1; } .theme-toggle:hover { border-color: var(--border3); background: var(--bg3); color: var(--text); } .theme-toggle svg { display: block; } .notif-badge { position: absolute; top: -5px; right: -5px; background: var(--red); color: #fff; font-size: 9px; font-weight: 600; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid var(--bg); } .btn-nav { height: 32px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--border2); background: transparent; color: var(--text); font-size: 13px; font-weight: 500; text-decoration: none; display: flex; align-items: center; cursor: pointer; transition: all 0.2s; } .btn-nav:hover { border-color: var(--border3); background: var(--bg3); } .btn-nav-danger { background: var(--red); border-color: var(--red); color: #fff; font-weight: 500; } .btn-nav-danger:hover { background: #dc2626; border-color: #dc2626; } .notif-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 300px; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r2); box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 300; overflow: hidden; } .notif-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; } .notif-item { padding: 10px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: center; } .notif-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--text2); } .btn-check { width: 24px; height: 24px; border-radius: var(--r); border: 1px solid var(--border2); background: var(--bg3); color: var(--text2); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* ── CONTAINER ────────────────────────────────────── */ .container { max-width: 1280px; margin: 0 auto; padding: 28px; } /* ── PAGE HEADER ──────────────────────────────────── */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; } .page-header h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.2; } .page-header h1 .accent { color: var(--blue3); } .page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .breadcrumb { display: inline-flex; align-items: center; gap: 5px; color: var(--text2); text-decoration: none; font-size: 12px; margin-bottom: 8px; } .breadcrumb:hover { color: var(--text); } /* ── BUTTONS ──────────────────────────────────────── */ .btn-primary { padding: 8px 18px; border-radius: var(--r); background: linear-gradient(135deg, #4f7cff, #2d5be3); color: #fff; font-size: 13px; font-weight: 500; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,124,255,0.3); } .btn-sm { padding: 6px 14px; height: 32px; border-radius: var(--r); border: 1px solid var(--border2); background: transparent; color: var(--text); font-size: 12px; font-weight: 500; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; } .btn-sm:hover { border-color: var(--border3); background: var(--bg3); } .btn-danger { border-color: rgba(239,68,68,0.4); color: var(--red); } .btn-danger:hover { border-color: var(--red); background: var(--red-dim); } /* ── METRICS ──────────────────────────────────────── */ .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .metric-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); padding: 22px 24px; transition: border-color var(--transition); } .metric-card:hover { border-color: var(--border2); box-shadow: var(--shadow-blue); } .metric-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text2); margin-bottom: 10px; font-weight: 500; } .metric-value { font-size: 36px; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 6px; font-family: var(--mono); } .metric-sub { font-size: 12px; color: var(--text2); } .metric-card.danger .metric-value { color: var(--red); } .metric-card.warning .metric-value { color: var(--amber); } .metric-card.success .metric-value { color: var(--green); } /* ── DASHBOARD GRID ───────────────────────────────── */ .dash-grid { display: grid; grid-template-columns: 1fr 280px; gap: 16px; } /* ── SECTION LABEL ────────────────────────────────── */ .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text2); margin-bottom: 10px; font-weight: 500; } /* ── CLIENT LIST ──────────────────────────────────── */ .client-list { display: flex; flex-direction: column; gap: 6px; } .client-row { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); padding: 14px 18px; display: flex; align-items: center; gap: 12px; text-decoration: none; transition: all 0.2s; } .client-row:hover { border-color: var(--border2); background: var(--bg3); box-shadow: var(--shadow-blue); } .client-row.urgent, .client-row.alert { border-left: 2px solid var(--red); border-radius: 0 var(--r2) var(--r2) 0; } .client-row.warning-alert { border-left: 3px solid var(--amber); border-radius: 0 var(--r2) var(--r2) 0; } @keyframes pulse-l { 0%, 100% { border-left-color: var(--red); } 50% { border-left-color: #F09595; } } .client-name { font-size: 13px; font-weight: 600; color: var(--text); } .client-meta { font-size: 11px; color: var(--text2); font-family: var(--mono); } .arrow { width: 14px; height: 14px; stroke: var(--text2); fill: none; stroke-width: 1.5; stroke-linecap: round; flex-shrink: 0; } /* ── SS (Status Summary) ────────────────────────── */ .ss { display: flex; gap: 8px; margin-left: auto; } .ss-dot { width: 8px; height: 8px; border-radius: 50%; } .dot-r { background: var(--red); } .dot-o { background: var(--amber); } .dot-g { background: var(--green); } .dot-gray { background: var(--text3); } .age-chip { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 500; } .chip-urgent { background: var(--red-dim); color: var(--red); } .chip-warn { background: var(--amber-dim); color: var(--amber); } /* ── PANEL ────────────────────────────────────────── */ .panel { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; } .feed-item { padding: 10px 14px; border-bottom: 1px solid var(--border); text-decoration: none; display: block; transition: background 0.2s; } .feed-item:hover { background: var(--bg3); } .feed-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); display: inline-block; margin-right: 8px; } .feed-desc { font-size: 11px; color: var(--text2); padding-left: 13px; line-height: 1.4; margin-top: 2px; } .feed-client { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; } .feed-device { font-size: 12px; font-weight: 500; color: var(--text); } .empty-feed { text-align: center; padding: 20px; color: var(--text2); font-size: 12px; } .offline-item { padding: 9px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); } .spinner-sm { width: 10px; height: 10px; border: 2px solid var(--border2); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; } .retry-chip { font-size: 10px; padding: 2px 8px; border-radius: 20px; background: var(--amber-dim); color: var(--amber); font-weight: 500; } /* ── DEVICE LIST ──────────────────────────────────── */ .device-list { display: flex; flex-direction: column; gap: 8px; } .device-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); padding: 14px 18px; display: flex; align-items: center; gap: 12px; min-height: 68px; transition: all 0.2s; } .device-card:hover { border-color: var(--border2); background: var(--bg3); } .device-status { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .status-ok { background: var(--green); box-shadow: 0 0 8px rgba(34,197,94,0.5); } .status-error { background: var(--red); } .status-offline { background: var(--text3); } .device-name { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; } .device-meta { font-size: 12px; color: var(--text2); font-family: var(--mono); } .device-tag { font-size: 11px; padding: 2px 10px; border-radius: 20px; font-weight: 500; } .tag-firewall { background: var(--amber-dim); color: var(--amber); } .tag-windows { background: var(--blue-dim); color: var(--blue3); } .tag-linux { background: var(--green-dim); color: var(--green); } .tag-switch { background: rgba(168,85,247,0.1); color: #a855f7; } .device-actions { display: flex; gap: 6px; margin-left: auto; } .action-btn { width: 38px; height: 38px; border-radius: var(--r); border: 1px solid var(--border2); background: var(--bg3); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; color: var(--text2); text-decoration: none; transition: all 0.2s; position: relative; } .action-btn:hover { border-color: var(--border3); background: var(--bg4); color: var(--text); } .action-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; } .action-play { border-color: rgba(34,197,94,0.3); background: var(--green-dim); color: var(--green); } .action-play:hover { border-color: var(--green); background: rgba(34,197,94,0.2); } .action-btn-sched:hover { border-color: var(--blue); background: var(--blue-dim); color: var(--blue3); } /* ── PILLS ────────────────────────────────────────── */ .pill { font-size: 11px; padding: 2px 10px; border-radius: 20px; font-weight: 500; } .pill-admin { background: var(--red-dim); color: var(--red); } .pill-tec { background: var(--blue-dim); color: var(--blue3); } .pill-on { background: var(--green-dim); color: var(--green); } .pill-off { background: var(--bg3); color: var(--text2); } /* ── TABLE ────────────────────────────────────────── */ .table-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); overflow: hidden; } table { width: 100%; border-collapse: collapse; } th { padding: 10px 16px; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text2); font-weight: 600; background: var(--bg3); border-bottom: 1px solid var(--border); } td { padding: 12px 16px; font-size: 12px; color: var(--text); border-bottom: 1px solid var(--border); } tr:hover { background: var(--bg3); } tr:last-child td { border-bottom: none; } /* ── MODAL ────────────────────────────────────────── */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 400; display: none; align-items: center; justify-content: center; } .modal.open { display: flex; } .modal-box { background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r3); padding: 28px; width: var(--modal-width); max-width: 92vw; } .modal-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; } .finput { background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--r); padding: 8px 11px; font-size: 13px; color: var(--text); width: 100%; } .finput:focus { outline: none; border-color: var(--blue); } /* ── ADMIN LAYOUT ─────────────────────────────────── */ .admin-layout { min-height: calc(100vh - 52px); width: 100vw; margin-left: calc(-50vw + 50%); } .admin-sidebar { position: fixed; top: 52px; left: 0; width: 190px; height: calc(100vh - 52px); z-index: 200; background: var(--bg2); border-right: 1px solid var(--border); padding: 16px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .admin-nav { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; color: var(--text2); text-decoration: none; border-radius: var(--r); transition: all 0.2s; margin-bottom: 2px; } .admin-nav:hover, .admin-nav.active { background: var(--bg3); color: var(--text); } .admin-nav svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; } .nav-sep { height: 1px; background: var(--border); margin: 6px 12px; } .admin-main { margin-left: 190px; padding: 24px 28px; min-height: calc(100vh - 52px); } /* ── EMPTY STATE ──────────────────────────────────── */ .empty-state { padding: 48px 40px; text-align: center; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); color: var(--text2); display: flex; flex-direction: column; align-items: center; gap: 12px; } .empty-state svg { width: 48px; height: 48px; stroke: var(--text3); fill: none; stroke-width: 1.5; } .empty-state-title { font-size: 15px; font-weight: 500; color: var(--text); } .empty-state-desc { font-size: 12px; color: var(--text2); max-width: 360px; line-height: 1.5; } /* ── ICON BUTTON ──────────────────────────────────── */ .icon-btn { width: 30px; height: 30px; border: 1px solid var(--border2); border-radius: var(--r); background: var(--bg2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; } .icon-btn:hover { border-color: var(--border3); background: var(--bg3); } .icon-btn svg { width: 13px; height: 13px; stroke: var(--text2); fill: none; stroke-width: 2; } /* ── MAINTENANCE LAYOUT ───────────────────────────── */ .maint-layout { display: grid; grid-template-columns: 220px 1fr; gap: 0; margin: -28px; min-height: calc(100vh - 52px); } .maint-sidebar { background: var(--bg2); border-right: 1px solid var(--border); padding: 18px 16px; position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; } .maint-main { padding: 20px 28px; } /* ── ANIMATIONS ───────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } /* ── FORMS ────────────────────────────────────────── */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text2); margin-bottom: 6px; font-weight: 500; } .form-input, .form-select, .form-textarea { background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--r); padding: 9px 12px; font-size: 13px; color: var(--text); width: 100%; font-family: var(--sans); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--blue); } .form-textarea { min-height: 100px; resize: vertical; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* ── ALPINE CLOAK ─────────────────────────────────── */ [x-cloak] { display: none !important; } /* ── FORM EDIT BUTTONS ─────────────────────────────────────────────────── */ .btn-save { display:inline-flex; align-items:center; padding:9px 20px; border-radius:var(--r); background:linear-gradient(135deg,#4f7cff,#2d5be3); color:#fff; font-size:13px; font-weight:500; border:none; cursor:pointer; font-family:var(--sans); transition:filter .15s; } .btn-save:hover { filter:brightness(1.1); } .btn-cancel { display:inline-flex; align-items:center; padding:9px 18px; border-radius:var(--r); border:1px solid var(--border2); background:transparent; color:var(--text2); font-size:13px; text-decoration:none; cursor:pointer; font-family:var(--sans); transition:all .15s; } .btn-cancel:hover { border-color:var(--border3); color:var(--text); } .btn-delete { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:var(--r); border:1px solid rgba(239,68,68,0.4); background:transparent; color:var(--red); font-size:13px; cursor:pointer; font-family:var(--sans); transition:all .15s; } .btn-delete:hover { background:var(--red-dim); border-color:var(--red); } .btn-history { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:var(--r); border:1px solid var(--border2); background:transparent; color:var(--text2); font-size:13px; text-decoration:none; cursor:pointer; font-family:var(--sans); transition:all .15s; } .btn-history:hover { border-color:var(--blue3); color:var(--blue3); } /* ── DEVICE EDIT HEADER ────────────────────────────────────────────────── */ .device-edit-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; gap:20px; } .device-edit-header-left { flex:1; } .device-edit-illustration { width:180px; height:140px; flex-shrink:0; display:flex; align-items:center; justify-content:center; opacity:.85; } .edit-form-footer { display:flex; align-items:center; gap:10px; padding:16px 0 0; border-top:1px solid var(--border); margin-top:8px; } .edit-form-footer .spacer { margin-left:auto; } /* ── MODAL BUTTONS FIX ─────────────────────────────────────────────────── */ .form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); } .form-actions .btn-sm, .form-actions .btn-primary { height:34px; padding:0 18px; font-size:13px; } .form-actions .btn-primary { background:linear-gradient(135deg,#4f7cff,#2d5be3); border:none; color:#fff; border-radius:var(--r); font-weight:500; cursor:pointer; font-family:var(--sans); display:inline-flex; align-items:center; } .form-actions .btn-sm { border:1px solid var(--border2); background:transparent; color:var(--text2); border-radius:var(--r); cursor:pointer; font-family:var(--sans); display:inline-flex; align-items:center; text-decoration:none; } .form-actions .btn-sm:hover { border-color:var(--border3); color:var(--text); background:var(--bg3); } /* ── CLIENT STATUS BADGE ───────────────────────────────────────────────── */ .client-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 10px; border-radius: 20px; font-weight: 500; } .client-status.status-ok { background: rgba(34,197,94,0.12); color: #22c55e; box-shadow: none; font-size: 12px; width: auto; height: auto; border-radius: 20px; } .client-status.status-ok::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; flex-shrink: 0; } /* ── CLIENT GRID ───────────────────────────────────────────────────────── */ .client-grid { display: flex; flex-direction: column; gap: 8px; } .client-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2); padding: 14px 18px; display: flex; align-items: center; gap: 14px; text-decoration: none; transition: border-color .15s, background .15s; cursor: pointer; } .client-card:hover { border-color: var(--border2); background: var(--bg3); } .client-card .client-name { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; } .client-card .client-meta { font-size: 12px; color: var(--text2); font-family: var(--mono); } .client-card .client-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 10px; border-radius: 20px; font-weight: 500; background: rgba(34,197,94,0.12); color: #22c55e; white-space: nowrap; } .client-card .client-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; flex-shrink: 0; } /* ── MODAL HEADER FIX ──────────────────────────────────────────────────── */ .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .modal-header h3 { font-size: 16px; font-weight: 600; color: var(--text); } .modal-header button { background: none; border: none; color: var(--text2); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: var(--r); transition: color .15s; } .modal-header button:hover { color: var(--text); } /* --- LOGIN PAGE --- */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; background: var(--bg); } .login-card { width: 100%; max-width: 400px; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r3); padding: 32px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); } .login-header { text-align: center; margin-bottom: 32px; } .login-header h1 { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.5px; } /* --- TOGGLE SWITCH (Fase 7) --- */ .toggle-container { display: flex; flex-direction: column; gap: 8px; } .toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg4); border: 1px solid var(--border2); transition: .3s; border-radius: 26px; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: var(--text2); transition: .3s; border-radius: 50%; } .toggle-switch input:checked + .toggle-slider { background-color: var(--blue); border-color: var(--blue3); } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); background-color: white; } /* ── Shared Admin Components ─────────────────────────── */ .add-form { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2); padding:16px; margin-bottom:14px; } .fgroup { margin-bottom:10px; } .fgroup label { display:block; font-size:10px; font-weight:500; color:var(--text2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; } .finput { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:var(--r); background:var(--bg); color:var(--text); font-size:12px; } .finput:focus { outline:none; border-color:var(--blue); } .btn-sm-act { font-size:11px; padding:3px 10px; border-radius:var(--r); border:1px solid var(--border); background:transparent; cursor:pointer; color:var(--text2); } .btn-sm-act:hover { background:var(--bg2); } .btn-sm-del { font-size:11px; padding:3px 10px; border-radius:var(--r); border:1px solid rgba(226,75,74,.3); background:transparent; cursor:pointer; color:var(--red); } .btn-sm-del:hover { background:rgba(226,75,74,.08); } .section-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .section-title { font-size:15px; font-weight:600; color:var(--text); } .nav-sep { height:1px; background:var(--border); margin:8px 0; } .provider-badge { font-size:10px; padding:2px 8px; border-radius:20px; font-weight:500; background:var(--blue-dim); color:var(--blue3); } .api-key-val { font-family:var(--mono); font-size:11px; color:var(--text2); word-break:break-all; } /* ── TOAST NOTIFICATIONS ───────────────────────── */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } .toast { padding: 12px 18px; border-radius: var(--r2); background: var(--toast-bg); border: 1px solid var(--toast-border); box-shadow: var(--toast-shadow); font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 10px; min-width: 280px; max-width: 420px; animation: toastIn 0.3s ease; } .toast-success { border-left: 3px solid var(--green); } .toast-error { border-left: 3px solid var(--red); } .toast-info { border-left: 3px solid var(--blue3); } @keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toastOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } .toast-close { margin-left: auto; cursor: pointer; color: var(--text2); background: none; border: none; font-size: 16px; padding: 0 4px; }