nmemmertandClaude Sonnet 4.6
5cfea703fb
Replace hard-coded white/light colors with dark theme palette matching the rest of the app. Key changes: dark navy background (#1e293b/#0f172a), high-contrast text (#f1f5f9 titles, #94a3b8 body), teal accent (#14b8a6) for active filter and unread left-border, red (#f87171) clear button, dark scrollbar, subtle hover states on items and action buttons. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2 lines
34 KiB
CSS
2 lines
34 KiB
CSS
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#020617;color:#e2e8f0;font-family:Manrope,IBM Plex Sans,Segoe UI,sans-serif;margin:0}*{box-sizing:border-box}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{background:radial-gradient(circle at 15% 0,#1e40af33 0,#0000 42%),radial-gradient(circle at 95% 10%,#0f766e24 0,#0000 36%),#020617;min-height:100vh}.navbar{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:#0f172ad1;border-bottom:1px solid #334155;box-shadow:0 4px 18px #0f172a0f;color:#e2e8f0;padding:.85rem 2rem;position:-webkit-sticky;position:sticky;top:0;z-index:30}.navbar h1{font-size:1.5rem;letter-spacing:-.02em;margin:0}.navbar-inner{gap:1rem;justify-content:space-between;width:100%}.navbar-inner,.navbar-left{align-items:center;display:flex}.navbar-left{gap:1.5rem;min-width:0}.navbar-links{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.nav-link{border-radius:7px;color:#cbd5e1;font-size:.92rem;font-weight:600;padding:.4rem .7rem;text-decoration:none;transition:background .2s,color .2s,box-shadow .2s}.nav-link:hover{background:#111827;box-shadow:inset 0 0 0 1px #334155;color:#f8fafc}.settings-link{align-items:center;display:inline-flex;gap:.4rem}.setup-badge{background:#facc15;border-radius:999px;color:#111827;font-size:.68rem;font-weight:700;padding:.15rem .5rem}.notifications-pill{align-items:center;background:#111827;border:1px solid #334155;border-radius:999px;color:#e2e8f0;display:flex;font-size:.82rem;gap:.45rem;padding:.3rem .7rem}.container{margin:0 auto;max-width:1400px;padding:2rem}.dashboard-toolbar{align-items:center;display:flex;gap:1rem;justify-content:space-between;margin-bottom:2rem}.dashboard-title{color:#f8fafc;font-size:1.85rem;letter-spacing:-.02em;margin:0}.dashboard-subtitle{color:#94a3b8;font-size:.9rem;margin:.2rem 0 0}.dashboard-actions{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.quick-filter-row{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 .8rem}.quick-chip{background:#0f172a;border:1px solid #334155;border-radius:999px;color:#cbd5e1;cursor:pointer;font-size:.74rem;font-weight:700;letter-spacing:.02em;padding:.28rem .7rem}.quick-chip:hover{background:#111f34}.quick-chip.active{background:#14b8a6;border-color:#14b8a6;color:#052e2b}.tag-filter-input{background:#111827;border:1px solid #334155;border-radius:10px;color:#e2e8f0;min-width:180px;padding:.5rem .75rem}.actions-menu-wrapper{position:relative}.actions-menu{background:#fff;border:1px solid #dbe2ea;border-radius:8px;box-shadow:0 8px 20px #0f172a24;min-width:220px;padding:.35rem 0;position:absolute;right:0;top:110%;z-index:20}.actions-menu-divider{border:0;border-top:1px solid #eef2f6;margin:.25rem 0}.hidden-file-input{display:none}.toast-stack{position:fixed;right:20px;top:20px;z-index:9999}.toast-item{border:1px solid #0000;border-radius:8px;box-shadow:0 8px 20px #0f172a29;margin-bottom:10px;min-width:280px;padding:12px 16px}.toast-error{background:#fee2e2;border-color:#fecaca;color:#7f1d1d}.toast-success{background:#dcfce7;border-color:#bbf7d0;color:#14532d}.toast-info{background:#dbeafe;border-color:#bfdbfe;color:#1e3a8a}.cc-metrics-grid{grid-gap:.65rem;display:grid;gap:.65rem;grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:1rem}.cc-metric-card{background:linear-gradient(180deg,#0f172af5,#1e293bf5);border:1px solid #334155;border-radius:10px;color:#e2e8f0;padding:.75rem}.cc-metric-label{color:#94a3b8;font-size:.68rem;letter-spacing:.08em;margin:0;text-transform:uppercase}.cc-metric-value{font-size:1.2rem;font-weight:700;margin:.35rem 0 0}.metric-ok{border-color:#14532d}.metric-down{border-color:#7f1d1d}.metric-maint{border-color:#78350f}.cc-layout{grid-gap:.8rem;align-items:start;display:grid;gap:.8rem;grid-template-columns:minmax(0,1fr) 300px}.cc-main{min-width:0}.cc-rail{display:flex;flex-direction:column;gap:.75rem;position:-webkit-sticky;position:sticky;top:82px}.cc-panel{background:#0f172af0;border:1px solid #334155;border-radius:12px;color:#e2e8f0;padding:.75rem}.cc-panel h3{font-size:.9rem;letter-spacing:.03em;margin:0 0 .65rem}.cc-empty{color:#94a3b8;font-size:.85rem;margin:0}.cc-group-list,.cc-incident-list{display:flex;flex-direction:column;gap:.4rem}.cc-group-item,.cc-incident-item{align-items:center;background:#0f172a;border:1px solid #334155;border-radius:8px;color:#e2e8f0;cursor:pointer;display:flex;justify-content:space-between;padding:.45rem .55rem;width:100%}.cc-group-item:hover,.cc-incident-item:hover{background:#111f34;border-color:#475569}.cc-incident-name{font-size:.85rem;font-weight:600;margin-right:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dashboard-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-bottom:1.5rem}.resource-list{display:flex;flex-direction:column;gap:.45rem}.resource-list-shell{background:#0f172ae6;border:1px solid #334155;border-radius:12px;max-height:calc(100vh - 250px);overflow:auto;padding:.65rem}.resource-list-header{grid-gap:1rem;background:#0f172afa;border-bottom:1px solid #334155;display:grid;font-size:.72rem;gap:1rem;grid-template-columns:minmax(260px,2fr) minmax(220px,1.25fr) minmax(170px,.8fr);letter-spacing:.08em;margin-bottom:.45rem;padding:.35rem .6rem .6rem;text-transform:uppercase;top:0;z-index:5}.resource-list-count,.resource-list-header{color:#94a3b8;position:-webkit-sticky;position:sticky}.resource-list-count{background:#0f172af2;font-size:.75rem;margin:0 .6rem .55rem;padding-bottom:.25rem;top:31px;z-index:4}.resource-row{grid-gap:1rem;align-items:center;background:#0f172af5;border:1px solid #334155;border-radius:10px;box-shadow:0 4px 12px #0206178c;cursor:pointer;display:grid;gap:1rem;grid-template-columns:minmax(260px,2fr) minmax(220px,1.25fr) minmax(170px,.8fr);padding:.65rem .8rem;transition:border-color .2s,transform .2s,box-shadow .2s}.resource-row:hover{border-color:#60a5fa;box-shadow:0 12px 22px #020617a6;transform:translateY(-1px)}.row-main{min-width:0}.row-title-line{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.15rem}.row-name{color:#f8fafc;font-size:.98rem;margin:0}.resource-group-pill{background:#1e293b;border-radius:999px;color:#cbd5e1;font-size:.72rem;font-weight:700;padding:.15rem .5rem}.incident-inline{background:#fee2e2;border:1px solid #fecaca;border-radius:999px;color:#991b1b}.incident-inline,.maintenance-inline{font-size:.72rem;padding:.15rem .45rem}.maintenance-inline{background:#fef3c7;border:1px solid #fde68a;border-radius:999px;color:#92400e}.row-type,.row-url{color:#94a3b8;margin:0}.row-url{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-type{font-size:.72rem}.row-metrics{grid-gap:.8rem;align-items:center;display:grid;gap:.8rem;grid-template-columns:repeat(3,minmax(0,1fr))}.row-metrics .stat-label{color:#94a3b8;font-size:.64rem}.row-metrics .stat-value{color:#e2e8f0;font-weight:700}.row-sparkline{min-width:95px}.row-side{align-items:flex-end;display:flex;flex-direction:column;gap:.2rem}.row-actions{display:flex;gap:.35rem}.resource-card{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 8px 22px #0f172a0f;cursor:pointer;padding:1rem 1.1rem;transition:transform .2s,box-shadow .2s}.resource-card.compact{display:flex;flex-direction:column;gap:.4rem}.resource-card:hover{box-shadow:0 14px 28px #0f172a21;transform:translateY(-2px)}.resource-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:.5rem}.resource-name{font-size:1.05rem;font-weight:700;margin:0 0 .2rem}.trend-chip{display:inline-block;font-size:.72rem;font-weight:800;margin-left:.3rem}.trend-better{color:#34d399}.trend-worse{color:#f87171}.trend-flat{color:#94a3b8}.resource-url{color:#64748b;font-size:.8rem;word-break:break-all}.load-more-btn{background:#f8fafc;border:1px dashed #94a3b8;border-radius:10px;color:#334155;cursor:pointer;font-weight:700;padding:.65rem;width:100%}.load-more-btn:hover{background:#f1f5f9}.resource-type{color:#475569;font-size:.78rem;margin:.15rem 0 0}.status-badge{border-radius:12px;font-size:.7rem;font-weight:600;text-transform:uppercase}.status-up{background:#dcfce7;color:#166534}.status-down{background:#fee2e2;color:#991b1b}.status-unknown{background:#e2e8f0;color:#334155}.stats-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-top:1rem}.stat{text-align:center}.stat-value{color:#e2e8f0;font-size:1.2rem;font-weight:700;margin:0}.stat-value.small{font-size:1.05rem}.stat-label{color:#94a3b8;font-size:.75rem;margin:0;text-transform:uppercase}.resource-meta{grid-gap:.75rem;align-items:center;display:grid;gap:.75rem;grid-template-columns:repeat(3,1fr)}.sparkline{height:52px;width:100%}.last-check{color:#94a3b8;font-size:.75rem;margin:0}.group-section{background:#ffffffb3;border:1px solid #e2e8f0;border-radius:14px;margin-bottom:2rem;padding:1rem}.group-header{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:10px;cursor:pointer;display:flex;gap:1rem;margin-bottom:1rem;padding:1rem;transition:background .2s}.group-header:hover{background:#f9f9f9}.group-header h3{color:#333;font-size:1.1rem;margin:0}.group-name{flex:1 1;margin:0}.group-toggle{color:#667eea;font-size:.9rem;min-width:15px}.group-stats{display:flex;font-size:.85rem;gap:1.5rem;margin-left:auto}.group-stat{background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;color:#475569;font-weight:500;padding:.4rem .8rem}.edit-input{border:1px solid #667eea;border-radius:6px;font-size:1.05rem;margin-bottom:.5rem;padding:.5rem;width:100%}.card-edit-form{border-top:1px solid #eee;margin-top:.75rem;padding-top:.75rem}.edit-field{margin-bottom:.5rem}.edit-field label{color:#666;display:block;font-size:.75rem;font-weight:600;margin-bottom:.25rem}.edit-field input{border:1px solid #ddd;border-radius:4px;font-size:.9rem;padding:.4rem .6rem;width:100%}.card-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}.btn-icon{background:#0b1325;border:1px solid #334155;border-radius:8px;color:#e2e8f0;cursor:pointer;font-size:1rem;min-height:30px;min-width:34px;opacity:1;padding:.25rem .5rem;transition:transform .15s,background .2s,border-color .2s}.btn-icon:hover{background:#111f34;border-color:#60a5fa;transform:translateY(-1px)}.btn-icon:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.btn-icon.action-edit{color:#93c5fd}.btn-icon.action-maint{color:#fbbf24}.btn-icon.action-delete{background:#3f1d1d;border-color:#7f1d1d;color:#fca5a5}.btn-icon.action-delete:hover{background:#7f1d1d;border-color:#ef4444;color:#fee2e2}.btn-sm{font-size:.8rem;padding:.4rem .8rem}.btn{border:1px solid #0000;border-radius:10px;cursor:pointer;font-size:1rem;font-weight:600;padding:.75rem 1.5rem;transition:all .2s ease}.btn-primary{background:linear-gradient(180deg,#14b8a6,#0d9488);color:#fff}.btn-primary:hover{filter:brightness(.95)}.btn-secondary{background:#fff;border-color:#dbe2ea;color:#0f172a}.btn-secondary:hover{background:#f8fafc}.btn-danger{background:linear-gradient(180deg,#ef4444,#dc2626)}.btn-ghost{background:#fff;border:0;border-radius:0;color:#0f172a;display:block;font-weight:500;padding:.6rem .8rem;text-align:left;width:100%}.btn-ghost:hover{background:#f1f5f9}.btn-danger{color:#fff}.btn-danger:hover{filter:brightness(.95)}.modal-overlay{align-items:center;background:#0f172a6b;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.modal{background:#fff;border:1px solid #e2e8f0;border-radius:16px;max-height:90vh;max-width:500px;overflow-y:auto;padding:2rem;width:90%}.modal h2{margin-top:0}.form-group{margin-bottom:1.5rem}.form-group label{color:#333;display:block;font-weight:600;margin-bottom:.5rem}.form-group input,.form-group select,.form-group textarea{border:1px solid #ddd;border-radius:6px;font-size:1rem;padding:.75rem;width:100%}.form-group input:focus,.form-group select:focus,.form-group textarea:focus,.tag-filter-input:focus{border-color:#0ea5a2;box-shadow:0 0 0 3px #0ea5a22e;outline:none}.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem}.detail-section{background:#0f172af0;border:1px solid #334155;border-radius:14px;box-shadow:0 10px 24px #0206178c;color:#e2e8f0;margin-bottom:1.5rem;padding:1.5rem}.detail-section h2{color:#f8fafc;margin-top:0}.detail-header-row{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between}.detail-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-end}.resource-url-detail{color:#94a3b8;margin:0}.maintenance-badge{background:#fff7db;border:1px solid #f9db88;color:#8a6a00}.stats-grid-4{grid-template-columns:repeat(4,1fr)}.detail-stats-grid{margin-top:2rem}.section-controls{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}.filter-control{align-items:center;display:inline-flex;gap:.4rem}.filter-control label{color:#cbd5e1;font-size:.9rem}.filter-control select{background:#111827;border:1px solid #334155;border-radius:6px;color:#e2e8f0;padding:.3rem .5rem}.controls-pagination{display:flex;gap:.5rem;margin-left:auto}.table-wrapper{overflow-x:auto}.data-table{border-collapse:collapse;width:100%}.data-table th{background:#111827;border-bottom:2px solid #334155;color:#e2e8f0;font-size:.86rem;letter-spacing:.02em;padding:.75rem;text-align:left;text-transform:uppercase}.data-table td{border-bottom:1px solid #1f2937;color:#e2e8f0;padding:.75rem}.data-table tbody tr:hover{background:#1e293b}.text-right{text-align:right!important}.muted-cell{color:#94a3b8}.w-25{width:25%}.w-15{width:15%}.w-35{width:35%}.incident-reason-cell{align-items:center;display:flex;gap:.5rem;justify-content:space-between}.incident-reason-toggle{color:#93c5fd;cursor:pointer;flex:1 1}.expand-indicator{color:#94a3b8;font-size:.85rem;margin-left:.5rem}.btn-compact{font-size:.85rem;padding:.3rem .6rem}.expanded-row{background:#0b1325}.expanded-cell{color:#e2e8f0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Courier New,monospace;font-size:.9rem;white-space:pre-wrap;word-break:break-word}.section-title-row{align-items:center;display:flex;gap:1rem;justify-content:space-between;margin-bottom:1rem}.empty-copy{color:#94a3b8;padding:2rem;text-align:center}.chart-container{background:#0b1325;border:1px solid #334155;border-radius:12px;height:300px;margin-top:1rem;padding:.5rem}.incident-badge{background:#fff3cd;color:#856404;font-weight:600}.back-button,.incident-badge{border-radius:6px;display:inline-block;margin-bottom:1rem;padding:.5rem 1rem}.back-button{background:#1e293b;border:1px solid #334155;color:#f8fafc;text-decoration:none;transition:background .2s}.back-button:hover{background:#334155}.empty-state{color:#666;padding:3rem;text-align:center}.empty-state h3{color:#333;margin-bottom:.5rem}@media (max-width:1024px){.dashboard-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.container{padding:1.5rem}}@media (max-width:768px){.navbar{padding:.75rem 1rem}.navbar h1{font-size:1.25rem}.navbar-links{flex-wrap:wrap;gap:.5rem}.nav-link{font-size:.9rem;padding:.35rem .65rem}.navbar-inner,.navbar-left{align-items:flex-start;flex-direction:column}.navbar-left{gap:.75rem;width:100%}.container{padding:1rem}.dashboard-toolbar{align-items:flex-start;flex-direction:column;gap:1rem}.dashboard-actions{flex-direction:column;gap:.5rem;width:100%}.actions-menu-wrapper,.dashboard-actions button,.dashboard-actions select,.tag-filter-input{width:100%}.actions-menu{left:0;right:auto}.dashboard-grid{gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.cc-metrics-grid{grid-template-columns:repeat(2,1fr)}.cc-layout{grid-template-columns:1fr}.cc-rail{position:static}.resource-list-shell{max-height:none;overflow:visible}.resource-list-count,.resource-list-header{position:static}.resource-row{gap:.7rem;grid-template-columns:1fr}.resource-list-header{display:none}.row-metrics{grid-template-columns:repeat(3,1fr)}.row-side{align-items:center;flex-direction:row;justify-content:space-between}.stats-grid{gap:.75rem;grid-template-columns:repeat(2,1fr)!important}.resource-card{padding:.875rem}.detail-header-row{flex-direction:column}.detail-actions{justify-content:flex-start;width:100%}.stats-grid-4{grid-template-columns:repeat(2,1fr)}.filter-control{justify-content:space-between;width:100%}.controls-pagination{margin-left:0;width:100%}.controls-pagination .btn{flex:1 1}.resource-meta{gap:.5rem;grid-template-columns:1fr}.resource-meta>div{text-align:left!important}.chart-container{height:300px!important}.detail-section{padding:1rem!important}.form-row{flex-direction:column;gap:0}.form-group{width:100%}.modal{margin:1rem;max-width:none;padding:1.5rem;width:95%}.group-header{align-items:flex-start;flex-direction:column;gap:.5rem}.group-stats{justify-content:space-between;width:100%}.card-actions{flex-direction:row;gap:.5rem;justify-content:flex-end}table{font-size:.85rem}td,th{padding:.5rem!important}}@media (max-width:480px){.navbar h1{font-size:1.1rem}.stat-value{font-size:1.5rem}.stat-label{font-size:.75rem}.stats-grid{grid-template-columns:1fr!important}.modal h2{font-size:1.25rem}.btn{font-size:.9rem;padding:.5rem 1rem}.stats-grid-4{grid-template-columns:1fr}.row-metrics{grid-template-columns:1fr 1fr}}.notification-center{position:relative}.notification-bell-container{align-items:center;display:flex}.notification-bell{background:none;border:none;cursor:pointer;font-size:1.5rem;padding:.5rem;position:relative;transition:transform .2s}.notification-bell:hover{transform:scale(1.1)}.notification-badge{align-items:center;background:#ef4444;border-radius:50%;color:#fff;display:flex;font-size:.6rem;font-weight:700;height:1.2rem;justify-content:center;line-height:1;position:absolute;right:0;top:0;width:1.2rem}.notification-popup{background:#1e293b;border:1px solid #334155;border-radius:10px;box-shadow:0 8px 32px #00000080;display:flex;flex-direction:column;max-height:600px;overflow:hidden;position:fixed;right:20px;top:60px;width:420px;z-index:1000}.notification-header{align-items:center;background:#0f172a;border-bottom:1px solid #334155;display:flex;justify-content:space-between;padding:.875rem 1rem}.notification-header h3{color:#f1f5f9;font-size:1rem;font-weight:600;letter-spacing:.01em;margin:0}.close-btn{align-items:center;background:none;border:none;border-radius:4px;color:#64748b;cursor:pointer;display:flex;font-size:1.1rem;height:28px;justify-content:center;padding:0;transition:color .15s,background .15s;width:28px}.close-btn:hover{background:#334155;color:#e2e8f0}.notification-filters{background:#1e293b;border-bottom:1px solid #334155;display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem .875rem}.filter-btn{background:#0000;border:1px solid #334155;border-radius:5px;color:#94a3b8;cursor:pointer;font-size:.8rem;font-weight:500;padding:.3rem .65rem;transition:all .15s}.filter-btn:hover{border-color:#14b8a6;color:#14b8a6}.filter-btn.active{background:#14b8a6;border-color:#14b8a6;color:#0f172a;font-weight:600}.clear-btn{background:#0000;border-color:#f87171;color:#f87171;margin-left:auto}.clear-btn:hover{background:#f87171;border-color:#f87171;color:#0f172a}.notification-list{flex:1 1;max-height:460px;overflow-y:auto}.notification-item{background:#1e293b;border-bottom:1px solid #1e293b;cursor:default;display:flex;gap:.75rem;padding:.875rem 1rem;transition:background .15s}.notification-item:last-child{border-bottom:none}.notification-item:hover{background:#263347}.notification-item.unread{background:#162032;border-left:3px solid #14b8a6}.notification-item.unread:hover{background:#1c2a40}.notification-content{min-width:0}.notification-title{color:#f1f5f9;font-size:.875rem;font-weight:600;line-height:1.3;margin-bottom:.3rem}.notification-message{color:#94a3b8;font-size:.8rem;line-height:1.45;margin-bottom:.5rem;word-break:break-word}.notification-meta{align-items:center;color:#64748b;font-size:.72rem;gap:.5rem}.notification-resource{background:#0f172a;border:1px solid #334155;border-radius:3px;color:#94a3b8;font-size:.7rem;padding:.15rem .45rem}.notification-time{white-space:nowrap}.notification-actions{align-items:flex-start;gap:.25rem}.action-btn{background:none;border:none;border-radius:4px;color:#475569;cursor:pointer;font-size:.9rem;padding:.25rem .4rem;transition:color .15s,background .15s}.action-btn:hover{background:#334155;color:#e2e8f0}.action-btn.mark-read:hover{color:#4ade80}.action-btn.delete:hover{color:#f87171}.notification-empty{color:#475569;font-size:.875rem;padding:2.5rem 1rem;text-align:center}.notification-list::-webkit-scrollbar{width:5px}.notification-list::-webkit-scrollbar-track{background:#0f172a}.notification-list::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}.notification-list::-webkit-scrollbar-thumb:hover{background:#475569}@media (max-width:600px){.notification-popup{left:10px;max-height:70vh;position:fixed;right:10px;top:60px;width:auto}.notification-filters{flex-direction:column}.filter-btn{flex:1 1}.clear-btn{margin-left:0}}.settings-wizard{color:#e2e8f0;margin:0 auto;max-width:980px}.settings-wizard>h2{color:#f8fafc;text-shadow:0 1px 0 #0f172a4d}.settings-description{color:#cbd5e1;margin-bottom:1.4rem}.settings-section{background:#0f172ad9;border:1px solid #334155;border-radius:12px;margin-bottom:1rem;padding:1.35rem}.settings-header{align-items:center;border-bottom:1px solid #334155;display:flex;justify-content:space-between;margin-bottom:1rem;padding-bottom:.8rem}.settings-header h3{color:#f8fafc;margin:0}.settings-form{margin-top:1.5rem}.form-row{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:1rem}.form-group small{color:#cbd5e1;display:block;font-size:.85rem;margin-top:.25rem}.settings-wizard .form-group label{color:#e2e8f0}.settings-wizard .form-group input,.settings-wizard .form-group select,.settings-wizard .form-group textarea{background:#0b1325;border:1px solid #334155;color:#f8fafc}.settings-wizard .form-group input:focus,.settings-wizard .form-group select:focus,.settings-wizard .form-group textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px #60a5fa47}.info-box{background:#0b1325;border:1px solid #334155;border-radius:8px;margin:1.5rem 0;padding:1rem}.info-box strong{color:#f8fafc;display:block;margin-bottom:.5rem}.info-box ol{margin:.5rem 0 0 1.5rem;padding:0}.info-box li{color:#e2e8f0;margin:.25rem 0}.info-box a{color:#bfdbfe;text-decoration:none}.info-box a:hover{text-decoration:underline}.info-box pre{background:#111827;border:1px solid #334155;border-radius:8px;color:#f8fafc;font-size:.85rem;margin-top:.5rem;overflow-x:auto;padding:1rem}.toggle-switch{display:inline-block;height:34px;position:relative;width:60px}.toggle-switch input{height:0;opacity:0;width:0}.toggle-slider{background-color:#334155;border-radius:34px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.toggle-slider:before{background-color:#e2e8f0;border-radius:50%;bottom:4px;content:"";height:26px;left:4px;position:absolute;transition:.4s;width:26px}.toggle-switch input:checked+.toggle-slider{background-color:#2563eb}.toggle-switch input:focus+.toggle-slider{box-shadow:0 0 0 3px #60a5fa47}.toggle-switch input:checked+.toggle-slider:before{transform:translateX(26px)}.btn-secondary{background:#1e293b;border:1px solid #334155;color:#f8fafc;margin-top:1rem}.btn-secondary:hover:not(:disabled){background:#334155}.btn-secondary:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.btn-secondary:disabled{cursor:not-allowed;opacity:.5}.test-result{border-radius:8px;margin:1.5rem 0;padding:1rem}.test-result.success{background:#052e16;border:1px solid #166534;color:#86efac}.test-result.error{background:#3f1d1d;border:1px solid #7f1d1d;color:#fda4af}.test-result strong{display:block;margin-bottom:.5rem}.test-result p{margin:0}.settings-actions{display:flex;justify-content:center;margin-top:2rem}.btn-large{font-size:1.1rem;padding:1rem 3rem}.save-status{animation:slideIn .3s ease-out;border-radius:6px;box-shadow:0 4px 12px #00000026;max-width:300px;padding:1rem 1.5rem;position:fixed;right:20px;top:20px;z-index:1000}.save-status.success{background:#166534;border-left:4px solid #22c55e;color:#dcfce7}.save-status.error{background:#7f1d1d;border-left:4px solid #ef4444;color:#fee2e2}.save-status strong{display:block;font-size:1rem;margin-bottom:.5rem}.save-status p{font-size:.9rem;margin:0}@keyframes slideIn{0%{opacity:0;transform:translateX(400px)}to{opacity:1;transform:translateX(0)}}.cc-page{color:#e2e8f0;padding-top:1.4rem}.cc-alert{background:#2b1907;border:1px solid #854d0e;border-radius:10px;color:#fcd34d;margin-bottom:1rem;padding:.85rem 1rem}.cc-page-header{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-bottom:1.2rem}.cc-page-title{color:#f8fafc!important;font-size:1.65rem;letter-spacing:-.02em;margin:0;text-shadow:0 1px 0 #0f172a4d}.cc-page h2{color:#f8fafc}.cc-controls{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.cc-pill-toggle{align-items:center;background:#111827;border:1px solid #334155;border-radius:999px;color:#f1f5f9;display:inline-flex;font-size:.82rem;gap:.5rem;padding:.5rem .75rem}.cc-pill-toggle input{accent-color:#3b82f6}.cc-input-sm:focus,.cc-pill-toggle:focus-within,.cc-select-sm:focus{outline:2px solid #60a5fa;outline-offset:2px}.cc-surface{background:#0f172a;border:1px solid #334155;border-radius:12px;padding:1rem}.cc-kpi-grid{grid-gap:.65rem;display:grid;gap:.65rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.cc-kpi{background:#0b1325;border:1px solid #334155;border-radius:10px;padding:.75rem}.cc-kpi-label{color:#cbd5e1;font-size:.7rem;letter-spacing:.07em;margin:0;text-transform:uppercase}.cc-kpi-value{color:#f8fafc;font-size:1.45rem;font-weight:700;margin:.35rem 0 0}.cc-table-wrap{background:#0b1325;border:1px solid #334155;border-radius:12px;overflow:auto}.cc-table{border-collapse:collapse;width:100%}.cc-table thead tr{background:#0f172a}.cc-table th{border-bottom:1px solid #334155;color:#e2e8f0;font-size:.78rem;letter-spacing:.07em;padding:.75rem;text-align:left;text-transform:uppercase}.cc-table td{border-bottom:1px solid #1f2937;color:#f1f5f9;padding:.75rem}.cc-table tbody tr:hover{background:#1e293b}.cc-pagination{align-items:center;background:#111827;border:1px solid #334155;border-radius:10px;display:flex;gap:1rem;justify-content:center;margin-top:1rem;padding:1rem}.cc-input-sm{text-align:center;width:56px}.cc-input-sm,.cc-select-sm{background:#111827;border:1px solid #334155;border-radius:8px;color:#e2e8f0;padding:.45rem}.cc-empty{color:#cbd5e1;padding:2.2rem 1rem;text-align:center}.history-resource-card{margin-bottom:1.4rem}.history-resource-title{color:#dbeafe;margin:0 0 .45rem}.history-resource-meta{color:#e2e8f0;display:flex;flex-wrap:wrap;gap:1rem;margin:0 0 1rem}.history-resource-meta strong{color:#f8fafc}.history-chart-box{background:#111827;border:1px solid #334155;border-radius:10px;height:400px;margin-bottom:1rem;padding:1rem}.history-trend-row{color:#e2e8f0;display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:.8rem}.notifications-list{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:1fr}.notification-row{align-items:flex-start;background:#0b1325;border:1px solid #334155;border-radius:10px;display:flex;gap:1rem;justify-content:space-between;padding:1rem}.notification-row.is-unread{border-color:#1d4ed8;box-shadow:inset 0 0 0 1px #3b82f659}.notification-content{flex:1 1}.notification-title{color:#f8fafc;font-size:1rem;margin:0 0 .4rem}.notification-message{color:#e2e8f0;margin:0 0 .5rem}.notification-meta{color:#cbd5e1;display:flex;flex-wrap:wrap;font-size:.84rem;gap:.65rem}.notification-chip{background:#111827;border:1px solid #334155;border-radius:999px;color:#f1f5f9;padding:.2rem .55rem}.notification-actions{display:flex;flex-shrink:0;gap:.4rem}.notification-actions .btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}@media (max-width:768px){.cc-controls,.cc-controls .btn,.cc-controls .cc-pill-toggle,.cc-controls .tag-filter-input{width:100%}.cc-pagination{align-items:stretch;flex-direction:column}}.status-container{margin:0 auto;max-width:1200px;padding:2rem}.status-header{align-items:flex-start;border-bottom:1px solid #dbe2ea;display:flex;justify-content:space-between;margin-bottom:2rem;padding-bottom:1.5rem}.status-header h1{color:#0f172a;font-size:2.2rem;margin:0 0 .5rem}.status-subtitle{color:#64748b;font-size:1rem;margin:0}.status-refresh{text-align:right}.status-refresh label{align-items:center;cursor:pointer;display:flex;gap:.5rem;margin-bottom:.5rem}.status-refresh input[type=checkbox]{cursor:pointer}.last-updated{color:#64748b;font-size:.85rem;margin:0}.status-summary{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:2rem}.summary-card{background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid #dbe2ea;border-radius:14px;box-shadow:0 8px 20px #0f172a0f;padding:1.5rem;text-align:center}.summary-value{font-size:2rem;font-weight:700;margin-bottom:.5rem}.summary-label{color:#64748b;font-size:.9rem;margin:0}.status-section{margin-bottom:2rem}.status-section h2{border-bottom:1px solid #e5e7eb;color:#1e293b;font-size:1.5rem;margin:0 0 1rem;padding-bottom:.5rem}.status-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.status-card{border:1px solid #dbe2ea;border-radius:14px;box-shadow:0 8px 20px #0f172a0f;padding:1.5rem;transition:all .2s ease}.status-card:hover{box-shadow:0 8px 18px #0f172a1f}.status-card-up{background:#f0fdf4;border-color:#86efac}.status-card-down{background:#fef2f2;border-color:#fca5a5}.status-card-maintenance{background:#fffbeb;border-color:#fcd34d}.status-card-header{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:1rem}.status-card h3{color:#0f172a;flex:1 1;font-size:1.2rem;margin:0}.status-badge{border-radius:20px;font-size:.8rem;font-weight:700;padding:.25rem .75rem;white-space:nowrap}.status-badge-up{background-color:#4caf50;color:#fff}.status-badge-down{background-color:#f44336;color:#fff}.status-badge-maintenance{background-color:#ff9800;color:#fff}.resource-url{font-size:.9rem;margin:.5rem 0}.resource-url a{color:#06c;text-decoration:none}.resource-url a:hover{text-decoration:underline}.incident-info{background-color:#f443361a;border-left:3px solid #f44336;border-radius:4px;margin:1rem 0;padding:1rem}.incident-info p{font-size:.9rem;margin:.3rem 0}.incident-title{color:#f44336;font-weight:700;margin-bottom:.5rem!important}.incident-started{color:#666}.incident-description{color:#333;font-family:monospace;font-size:.85rem;max-height:100px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}.incident-duration{color:#666;font-weight:700;margin-top:.5rem!important}.maintenance-info{background-color:#ff98001a;border-left:3px solid #ff9800;border-radius:4px;margin:1rem 0;padding:1rem}.maintenance-info p{font-size:.9rem;margin:.3rem 0}.maintenance-title{color:#ff9800;font-weight:700;margin-bottom:.5rem!important}.maintenance-window{color:#666}.status-operational{color:#4caf50;font-weight:700;padding:1rem;text-align:center}.incidents-table,.maintenance-table{background:#fff;border:1px solid #dbe2ea;border-collapse:collapse;border-radius:12px;overflow:hidden;width:100%}.incidents-table thead,.maintenance-table thead{background-color:#f1f5f9;border-bottom:2px solid #dbe2ea}.incidents-table th,.maintenance-table th{color:#333;font-weight:700;padding:1rem;text-align:left}.incidents-table td,.maintenance-table td{border-bottom:1px solid #e5e7eb;padding:1rem}.incidents-table tr:hover,.maintenance-table tr:hover{background-color:#f0f9ff}.incident-desc-cell{color:#555;font-family:monospace;font-size:.9rem;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:768px){.status-container{padding:1rem}.status-header{flex-direction:column}.status-header h1{font-size:1.8rem}.status-refresh{margin-top:1rem;text-align:left}.status-grid{grid-template-columns:1fr}.incidents-table,.maintenance-table{font-size:.85rem}.incidents-table td,.incidents-table th,.maintenance-table td,.maintenance-table th{padding:.5rem}}.observability-page{padding-top:2rem}.observability-page h2{color:#f8fafc;text-shadow:0 1px 0 #0f172a4d}.obs-tabs{border-bottom:1px solid #334155;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}.obs-tab{background:#0000;border:solid #0000;border-top-left-radius:10px;border-top-right-radius:10px;border-width:1px 1px 3px;color:#cbd5e1;cursor:pointer;font-weight:600;padding:.75rem 1rem}.obs-tab:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.obs-tab.is-active{background:#0f172a;border-color:#334155 #334155 #60a5fa;color:#f8fafc}.obs-summary-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:2rem}.obs-summary-card{background:linear-gradient(180deg,#0f172a,#0b1325);border:1px solid #334155;border-radius:14px;box-shadow:none;padding:1rem}.obs-card-label{color:#cbd5e1;font-size:.85rem}.obs-card-value{color:#f8fafc;font-size:1.5rem;font-weight:700;margin-top:.45rem}.obs-card-value.is-danger{color:#f87171}.obs-card-value.is-ok{color:#34d399}.obs-table-wrap{overflow-x:auto}.obs-spacing-bottom{margin-bottom:2rem}.obs-table{border-collapse:collapse;width:100%}.obs-table th{background:#0f172a;border-bottom:2px solid #334155;color:#e2e8f0;font-size:.84rem;letter-spacing:.02em;padding:.75rem;text-align:left;text-transform:uppercase}.obs-table td{border-bottom:1px solid #1f2937;color:#f1f5f9;padding:.75rem}.obs-table tbody tr:hover{background:#1e293b}.obs-right{text-align:right!important}.obs-rate-pill{border-radius:4px;font-size:.88rem;font-weight:600;padding:.25rem .5rem}.obs-rate-pill.is-good{background:#052e16;color:#4ade80}.obs-rate-pill.is-warn{background:#3f2a0f;color:#fbbf24}.obs-empty-copy{color:#cbd5e1;padding:2rem;text-align:center}.obs-zebra{background:#0b1325}.obs-error-code{color:#f87171;font-size:.85rem}.obs-muted-sm{color:#cbd5e1}.obs-muted-sm,.obs-small{font-size:.85rem}.obs-audit-summary{background:#0f172a;border:1px solid #334155;border-radius:12px;margin-bottom:2rem;padding:1rem}.obs-audit-summary-line{color:#e2e8f0;font-size:.9rem;margin:.25rem 0}.obs-filters-grid{grid-gap:.5rem;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:1rem}.obs-filter-input{background:#111827;border:1px solid #334155;border-radius:10px;color:#e2e8f0;padding:.5rem}.obs-filter-input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33;outline:none}.obs-toggle-code:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.obs-click-row{cursor:pointer}.obs-toggle-code{color:#bfdbfe;cursor:pointer}.obs-expanded-row{background:#111b2e}.obs-expanded-cell{padding:1rem}.obs-pre{background:#0b1325;border:1px solid #334155;border-radius:8px;color:#e2e8f0;margin-top:.5rem;overflow-x:auto;padding:.75rem}@media (max-width:768px){.obs-tab{font-size:.92rem;padding:.6rem .8rem}}
|
|
/*# sourceMappingURL=main.5afb44a9.css.map*/ |