/* Athena Deploy Center - Base Styles */
:root {
--primary-color: #2563eb;
--primary-hover: #1d4ed8;
--success-color: #16a34a;
--warning-color: #ca8a04;
--danger-color: #dc2626;
--text-color: #1f2937;
--text-muted: #6b7280;
--bg-color: #ffffff;
--bg-secondary: #f3f4f6;
--border-color: #e5e7eb;
/* === Layout tokens (responsive — overridden by media queries) === */
--sidebar-width: 250px;
--content-padding: 30px;
--card-padding: 25px;
--header-margin: 30px;
--grid-gap: 20px;
--card-gap: 20px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
line-height: 1.5;
color: var(--text-color);
background-color: var(--bg-color);
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 600;
}
h1 { font-size: clamp(1.5rem, 1.25rem + 0.75vw, 2rem); }
h2 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); }
h3 { font-size: clamp(1rem, 0.925rem + 0.35vw, 1.25rem); }
a {
color: var(--primary-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Error UI */
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
/* RTL Support */
[dir="rtl"] {
direction: rtl;
text-align: right;
}
/* ============================================================================
Login Page Styles
============================================================================ */
/* Empty Layout for Login */
.empty-layout {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #2d1b69 0%, #0f0728 100%);
position: relative;
overflow: hidden;
}
/* PCB motherboard pattern overlay */
.particles {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
}
/* Circuit traces */
.circuit-line {
position: absolute;
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
}
/* Horizontal traces */
.circuit-line:nth-child(1) { width: 450px; height: 2px; top: 12%; left: 3%; }
.circuit-line:nth-child(2) { width: 300px; height: 2px; top: 28%; right: 8%; }
.circuit-line:nth-child(3) { width: 380px; height: 2px; top: 48%; left: 12%; }
.circuit-line:nth-child(4) { width: 320px; height: 2px; bottom: 22%; right: 6%; }
.circuit-line:nth-child(5) { width: 250px; height: 2px; bottom: 8%; left: 18%; }
/* Vertical traces */
.circuit-line:nth-child(6) { width: 2px; height: 320px; top: 8%; left: 22%; }
.circuit-line:nth-child(7) { width: 2px; height: 280px; top: 18%; right: 28%; }
.circuit-line:nth-child(8) { width: 2px; height: 240px; bottom: 12%; left: 65%; }
/* Connection pads and components */
.circuit-node {
position: absolute;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
}
/* Square connection pads */
.circuit-node:nth-child(9) { width: 10px; height: 10px; top: 12%; left: 3%; border-radius: 2px; }
.circuit-node:nth-child(10) { width: 10px; height: 10px; top: 12%; left: calc(3% + 450px); border-radius: 2px; }
/* Round vias */
.circuit-node:nth-child(11) { width: 6px; height: 6px; top: 28%; right: 8%; border-radius: 50%; }
.circuit-node:nth-child(12) { width: 6px; height: 6px; top: 28%; right: calc(8% + 300px); border-radius: 50%; }
/* IC chip pads */
.circuit-node:nth-child(13) { width: 12px; height: 12px; top: 48%; left: 12%; border-radius: 2px; }
.circuit-node:nth-child(14) { width: 8px; height: 8px; bottom: 22%; right: 6%; border-radius: 50%; }
.circuit-node:nth-child(15) { width: 8px; height: 8px; bottom: 8%; left: 18%; border-radius: 50%; }
/* Component outlines (IC chips) */
.circuit-node:nth-child(16) {
width: 70px; height: 45px; top: 20%; left: 8%;
border-radius: 3px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.circuit-node:nth-child(17) {
width: 55px; height: 55px; bottom: 25%; right: 12%;
border-radius: 3px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
}
/* Login Container */
.login-container {
perspective: 1500px;
z-index: 1;
}
/* Login Card */
.login-card {
width: 450px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
padding: 40px;
}
/* Logo Section in Login */
.login-card .logo {
text-align: center;
margin-bottom: 30px;
}
.logo-circle {
width: 80px;
height: 80px;
margin: 0 auto 15px;
background: linear-gradient(135deg, #4a3a8e 0%, #2d1b69 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(0, 229, 255, 0.2), 0 0 40px rgba(74, 58, 142, 0.3);
animation: pulse-login 3s infinite;
}
@keyframes pulse-login {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.login-card .logo h1 {
font-size: 32px;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
}
.login-card .logo p {
color: #666;
font-size: 14px;
font-weight: 400;
}
/* Form Groups in Login */
.login-card .form-group {
margin-bottom: 20px;
}
.login-card .form-group label {
display: block;
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.input-wrapper {
position: relative;
}
.input-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
}
.login-card input.form-control {
width: 100%;
padding: 14px 16px 14px 50px;
border: 2px solid #e0e0e0;
border-radius: 12px;
font-size: 14px;
transition: all 0.3s ease;
background: white;
}
.login-card input.form-control:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.login-card input.form-control::placeholder {
color: #aaa;
}
/* Form Options */
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
font-size: 13px;
}
.checkbox-wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.checkbox-wrapper input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: #667eea;
}
.checkbox-wrapper label {
color: #666;
cursor: pointer;
margin-bottom: 0;
font-weight: normal;
}
.forgot-password {
color: #667eea;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.forgot-password:hover {
color: #764ba2;
text-decoration: none;
}
/* Login Buttons */
.login-card .btn {
width: 100%;
padding: 16px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.login-card .btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}
.login-card .btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}
.login-card .btn-primary:active {
transform: translateY(0);
}
.login-card .btn-primary:disabled {
opacity: 0.7;
cursor: not-allowed;
}
/* Loading State */
.btn-primary.loading {
position: relative;
color: transparent;
pointer-events: none;
}
.btn-primary.loading::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin-login 0.8s linear infinite;
}
@keyframes spin-login {
to { transform: rotate(360deg); }
}
/* Login Version Badge */
.login-version {
text-align: center;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
font-size: 12px;
color: #9ca3af;
}
/* Error and Success Messages */
.error-message, .success-message {
padding: 12px 16px;
border-radius: 12px;
margin-bottom: 20px;
font-size: 14px;
display: none;
animation: slideIn-login 0.5s ease;
}
.error-message {
background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
color: white;
}
.success-message {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: white;
}
.error-message.show, .success-message.show, .warning-message.show {
display: block;
}
.warning-message {
background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
color: #1f2937;
}
.lockout-warning {
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
font-weight: 500;
}
.attempts-warning {
display: block;
font-size: 12px;
margin-top: 4px;
opacity: 0.9;
}
@keyframes slideIn-login {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Validation Messages */
.validation-message {
color: #dc2626;
font-size: 12px;
margin-top: 6px;
font-weight: 500;
}
/* Responsive */
@media (max-width: 500px) {
.login-card {
width: 95%;
max-width: 400px;
padding: 30px 25px;
}
}
/* ============================================================================
Main Layout Styles (Dashboard & Authenticated Pages)
============================================================================ */
.container {
display: flex;
min-height: 100vh;
}
/* Sidebar */
.sidebar {
width: 250px;
background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 100%);
color: white;
padding: 20px;
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}
.sidebar .logo {
font-size: 24px;
font-weight: bold;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 2px solid rgba(255,255,255,0.2);
}
.sidebar .logo span {
color: #60a5fa;
}
.nav-item {
padding: 12px 15px;
margin: 5px 0;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 10px;
color: white;
text-decoration: none;
}
.nav-item:hover {
background: rgba(255,255,255,0.1);
text-decoration: none;
}
.nav-item.active {
background: rgba(96, 165, 250, 0.3);
font-weight: 600;
}
.nav-icon {
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
line-height: 1;
flex-shrink: 0;
}
/* Main Content */
.main-content {
flex: 1;
padding: var(--content-padding, 30px);
background: #f5f5f5;
overflow-x: hidden;
min-width: 0;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--header-margin, 30px);
}
.header h1 {
font-size: clamp(1.25rem, 1rem + 0.85vw, 1.75rem);
color: #1e3a8a;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.user-info {
display: flex;
align-items: center;
gap: 12px;
position: relative;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #60a5fa;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
}
.avatar:hover {
background: #3b82f6;
transform: scale(1.05);
}
/* User Menu */
.user-menu {
position: absolute;
top: 50px;
right: 0;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
min-width: 180px;
z-index: 1000;
overflow: hidden;
}
.user-menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
cursor: pointer;
transition: background 0.2s ease;
color: #333;
}
.user-menu-item:hover {
background: #f3f4f6;
}
.user-menu-divider {
height: 1px;
background: #e5e7eb;
margin: 4px 0;
}
.menu-icon {
font-size: 18px;
}
/* Stats Cards */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--grid-gap, 20px);
margin-bottom: var(--header-margin, 30px);
}
.stat-card {
background: white;
padding: var(--card-padding, 25px);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border-left: 4px solid #60a5fa;
display: flex;
align-items: center;
gap: var(--card-gap, 20px);
}
.stat-card.success { border-left-color: #10b981; }
.stat-card.warning { border-left-color: #f59e0b; }
.stat-card.danger { border-left-color: #ef4444; }
.stat-value {
font-size: 64px;
font-weight: bold;
color: #1e3a8a;
flex-shrink: 0;
}
.stat-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
}
.stat-label {
color: #666;
font-size: x-large;
font-weight: 600;
margin-bottom: 8px;
text-align: right;
}
.stat-trend {
font-size: 24px;
color: #10b981;
margin-top: 5px;
text-align: right;
}
/* Content Cards */
.content-card {
background: white;
border-radius: 12px;
padding: var(--card-padding, 25px);
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #f0f0f0;
}
.card-title {
font-size: clamp(1.125rem, 1rem + 0.35vw, 1.25rem);
font-weight: 600;
color: #1e3a8a;
}
/* Buttons */
.btn {
padding: 10px 20px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s;
}
.btn-fixed {
min-width: 180px;
text-align: center;
}
.btn-primary {
background: #2563eb;
color: white;
}
.btn-primary:hover {
background: #1e40af;
}
/* Table */
.table {
width: 100%;
border-collapse: collapse;
}
.table thead {
background: #f8fafc;
}
.table th {
text-align: left;
padding: 12px;
font-weight: 600;
color: #475569;
font-size: 14px;
}
.table td {
padding: 15px 12px;
border-bottom: 1px solid #f0f0f0;
}
.table tr:hover {
background: #f8fafc;
}
/* Status Badges */
.status {
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
display: inline-block;
}
.status.online { background: #dcfce7; color: #166534; }
.status.offline { background: #fee2e2; color: #991b1b; }
.status.pending { background: #fef3c7; color: #92400e; }
.status.running { background: #dbeafe; color: #1e40af; }
.status.completed { background: #dcfce7; color: #166534; }
.status.failed { background: #fee2e2; color: #991b1b; }
.status.maintenance { background: #fef3c7; color: #92400e; border: 1px dashed #d97706; }
.status.skipped { background: #fef3c7; color: #92400e; border: 1px dashed #d97706; }
/* Actions */
.actions {
display: flex;
gap: 8px;
}
.action-btn {
padding: 6px 12px;
border: 1px solid #e5e7eb;
background: white;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
transition: all 0.2s;
}
.action-btn:hover {
background: #f3f4f6;
border-color: #2563eb;
color: #2563eb;
}
/* ============================================================================
Deployments Page Styles
============================================================================ */
.deployments-container {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
overflow: hidden;
padding: 20px;
}
.deployments-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 15px;
}
.deployments-title {
font-size: 20px;
font-weight: 600;
color: var(--text-color);
}
.deployments-controls {
display: flex;
gap: 15px;
align-items: center;
flex-wrap: nowrap;
}
/* Deployments Grid */
.deployments-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 20px;
}
/* Deployments List */
.deployments-list {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
overflow: hidden;
}
.deployments-table {
width: 100%;
border-collapse: collapse;
}
.deployments-table thead {
background: var(--bg-secondary);
}
.deployments-table th {
padding: 12px 16px;
text-align: left;
font-weight: 600;
font-size: 13px;
color: var(--text-muted);
border-bottom: 2px solid var(--border-color);
}
.deployments-table td {
padding: 16px;
border-bottom: 1px solid var(--border-color);
}
.deployments-table tbody tr {
cursor: pointer;
transition: background-color 0.2s;
}
.deployments-table tbody tr:hover {
background-color: var(--bg-secondary);
}
/* Deployment Cards */
.deployment-card {
background: white;
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 20px;
cursor: pointer;
transition: all 0.3s;
}
.deployment-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
/* Deployment Card Status Colors */
.deployment-card.deployment-pending {
border-left: 4px solid #6b7280;
}
.deployment-card.deployment-running {
border-left: 4px solid var(--primary-color);
background: linear-gradient(to right, rgba(37, 99, 235, 0.03), white);
}
.deployment-card.deployment-completed {
border-left: 4px solid var(--success-color);
background: linear-gradient(to right, rgba(22, 163, 74, 0.03), white);
}
.deployment-card.deployment-failed {
border-left: 4px solid var(--danger-color);
background: linear-gradient(to right, rgba(220, 38, 38, 0.03), white);
}
.deployment-card.deployment-cancelled {
border-left: 4px solid var(--warning-color);
opacity: 0.7;
}
.deployment-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
}
.deployment-title {
flex: 1;
}
.deployment-name {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
margin-bottom: 6px;
}
.deployment-name-cell {
font-weight: 600;
color: var(--text-color);
margin-bottom: 2px;
}
.deployment-desc-cell {
font-size: 12px;
color: var(--text-muted);
}
.deployment-type {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
}
.deployment-type.type-msi {
background: #dbeafe;
color: #1e40af;
}
.deployment-type.type-exe {
background: #fce7f3;
color: #9f1239;
}
.deployment-type.type-powershell {
background: #e0e7ff;
color: #3730a3;
}
.deployment-type.type-batch {
background: #fef3c7;
color: #92400e;
}
.deployment-type.type-shell {
background: #d1fae5;
color: #065f46;
}
.deployment-type.type-python {
background: #fef3c7;
color: #92400e;
}
.deployment-type.type-other {
background: #f3f4f6;
color: #374151;
}
.deployment-info {
margin-top: 15px;
}
.info-row {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 13px;
}
.info-label {
color: var(--text-muted);
}
.info-value {
font-weight: 500;
color: var(--text-color);
}
/* Progress Section */
.progress-section {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid var(--border-color);
}
.progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.progress-label {
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
}
.progress-percentage {
font-size: 14px;
font-weight: 600;
color: var(--primary-color);
}
.progress-bar {
width: 100%;
height: 8px;
background: var(--bg-secondary);
border-radius: 4px;
overflow: hidden;
margin-bottom: 8px;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary-color), #60a5fa);
transition: width 0.3s;
}
.progress-stats {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-muted);
}
/* Deployment Actions */
.deployment-actions {
display: flex;
gap: 8px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid var(--border-color);
}
.action-btn {
flex: 1;
padding: 8px 12px;
border: 1px solid var(--border-color);
background: white;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.action-btn:hover {
background: var(--bg-secondary);
border-color: var(--primary-color);
color: var(--primary-color);
}
.action-btn.action-start {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.action-btn.action-start:hover {
background: var(--primary-hover);
}
.action-btn.action-cancel {
background: var(--danger-color);
color: white;
border-color: var(--danger-color);
}
.action-btn.action-cancel:hover {
background: #b91c1c;
}
/* Status Badges for Deployments */
.status.status-pending {
background: #f3f4f6;
color: #374151;
}
.status.status-running {
background: #dbeafe;
color: #1e40af;
}
.status.status-completed {
background: #dcfce7;
color: #166534;
}
.status.status-failed {
background: #fee2e2;
color: #991b1b;
}
.status.status-cancelled {
background: #fef3c7;
color: #92400e;
}
/* Code styling */
code {
background: #f1f5f9;
padding: 2px 6px;
border-radius: 4px;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px;
}
/* ============================================================================
Agents Page Styles
============================================================================ */
/* Stats Bar */
.stats-bar {
display: flex;
gap: 20px;
margin-bottom: 30px;
}
.stat-item {
flex: 1;
background: white;
border-radius: 12px;
padding: 25px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
cursor: pointer;
transition: all 0.3s;
border: 2px solid transparent;
}
.stat-item:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
transform: translateY(-2px);
}
.stat-item.selected {
border-color: var(--primary-color);
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2);
}
.stat-icon {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
}
.stat-icon.total {
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
color: white;
}
.stat-icon.online {
background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
color: white;
}
.stat-icon.offline {
background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
color: white;
}
.stat-icon.warning {
background: linear-gradient(135deg, #ca8a04 0%, #eab308 100%);
color: white;
}
/* Deployment Status Icons */
.stat-icon.active {
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
color: white;
}
.stat-icon.pending {
background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
color: white;
}
.stat-icon.completed {
background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
color: white;
}
.stat-icon.failed {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
color: white;
}
.stat-content {
flex: 1;
}
.stat-label {
font-size: x-large;
color: var(--text-muted);
margin-bottom: 4px;
}
/* Agents Container */
.agents-container {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.agents-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 15px;
}
.agents-title {
font-size: 20px;
font-weight: 600;
color: var(--text-color);
}
.agents-controls {
display: flex;
gap: 15px;
align-items: center;
}
.card-controls {
display: flex;
gap: 15px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.card-controls .search-bar {
flex: 1;
min-width: 200px;
max-width: 400px;
}
.card-controls .page-header-actions {
display: flex;
gap: 10px;
align-items: center;
}
/* Search Bar */
.search-bar {
position: relative;
display: flex;
align-items: center;
}
.search-icon {
position: absolute;
left: 28px;
color: var(--text-muted);
font-size: 16px;
}
.search-input {
padding: 8px 40px 8px 40px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
width: 300px;
transition: all 0.3s;
}
.search-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.search-bar .search-buttons {
position: absolute;
right: 17px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 2px;
}
.clear-search {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 18px;
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.clear-search:hover {
color: var(--text-color);
}
.search-bar .search-help-btn {
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid #94a3b8;
background: #f8fafc;
color: #64748b;
font-size: 12px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.search-bar .search-help-btn:hover {
background: #2563eb;
border-color: #2563eb;
color: white;
}
/* View Toggle */
.view-toggle {
display: flex;
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
}
.view-btn {
padding: 8px 16px;
border: none;
background: white;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
color: var(--text-muted);
}
.view-btn:hover {
background: var(--bg-secondary);
}
.view-btn.active {
background: var(--primary-color);
color: white;
}
/* Agents Grid */
.agents-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
margin-top: 20px;
}
.agent-card {
background: white;
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 20px;
cursor: pointer;
transition: all 0.3s;
}
.agent-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.agent-card.offline {
background: #fef2f2;
border-color: #fecaca;
}
.agent-card.offline:hover {
background: #fee2e2;
border-color: #fca5a5;
}
/* Agent Header with OS Icon */
.agent-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.agent-name-with-icon {
display: flex;
align-items: center;
gap: 12px;
}
/* OS Icons */
.os-icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
}
.linux-icon {
width: 28px;
height: 28px;
object-fit: contain;
flex-shrink: 0;
}
/* Windows 4-color logo */
.os-icon.windows {
display: grid;
grid-template-columns: 12px 12px;
grid-template-rows: 12px 12px;
gap: 2px;
font-size: 0;
}
.os-icon.windows::before {
content: "";
background: #f25022;
border-radius: 1px;
}
.os-icon.windows::after {
content: "";
background: #7fba00;
border-radius: 1px;
}
.os-icon.windows span {
display: none;
}
.os-icon.windows {
position: relative;
}
/* Additional squares via box-shadow on a pseudo element */
.windows-icon {
width: 28px;
height: 28px;
display: grid;
grid-template-columns: 12px 12px;
grid-template-rows: 12px 12px;
gap: 2px;
flex-shrink: 0;
}
.windows-icon .win-red {
background: #f25022;
border-radius: 2px;
}
.windows-icon .win-green {
background: #7fba00;
border-radius: 2px;
}
.windows-icon .win-blue {
background: #00a4ef;
border-radius: 2px;
}
.windows-icon .win-yellow {
background: #ffb900;
border-radius: 2px;
}
.os-icon.linux {
color: #f5a623;
}
/* macOS Apple icon */
.macos-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23555555' d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.os-icon.unknown {
color: #64748b;
}
.agent-card.warning {
border-left: 4px solid var(--warning-color);
}
.agent-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
}
.agent-name {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
margin-bottom: 4px;
}
.agent-id {
font-size: 12px;
color: var(--text-muted);
}
.agent-id.expired {
color: var(--danger-color);
font-weight: 500;
}
.agent-id.expiring-soon {
color: var(--warning-color);
font-weight: 500;
}
/* Agent Info Grid */
.agent-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 15px;
}
.info-item {
display: flex;
flex-direction: column;
}
.info-label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.info-value {
font-size: 13px;
color: var(--text-color);
font-weight: 500;
}
/* Agent Actions */
.agent-actions {
display: flex;
gap: 8px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid var(--border-color);
}
.action-btn {
flex: 1;
padding: 8px 12px;
border: 1px solid var(--border-color);
background: white;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
transition: all 0.3s;
color: var(--text-color);
}
.action-btn:hover {
background: var(--bg-secondary);
border-color: var(--primary-color);
}
/* Agents List View */
.agents-list {
margin-top: 20px;
}
.agents-table {
width: 100%;
border-collapse: collapse;
}
.agents-table thead {
background: var(--bg-secondary);
}
.agents-table th {
padding: 12px;
text-align: left;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.agents-table tbody tr {
border-bottom: 1px solid var(--border-color);
cursor: pointer;
transition: all 0.3s;
}
.agents-table tbody tr:hover {
background: var(--bg-secondary);
}
.agents-table tbody tr.offline {
background: #fef2f2;
}
.agents-table tbody tr.offline:hover {
background: #fee2e2;
}
.agents-table tbody tr.warning {
background: #fef3c7;
}
.agents-table td {
padding: 12px;
font-size: 14px;
}
.agent-name-cell {
font-weight: 600;
color: var(--text-color);
}
.agent-id-cell {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.list-actions {
display: flex;
gap: 8px;
}
.list-action-btn {
padding: 6px 12px;
border: 1px solid var(--border-color);
background: white;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
transition: all 0.3s;
}
.list-action-btn:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* Loading and Empty States */
.loading-state,
.empty-state {
text-align: center;
padding: 60px 20px;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid var(--border-color);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.empty-icon {
font-size: 64px;
margin-bottom: 20px;
opacity: 0.5;
}
.empty-state h3 {
color: var(--text-color);
margin-bottom: 10px;
}
.empty-state p {
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
white-space: normal;
}
/* ============================================================================
Agent Details Page Styles
============================================================================ */
.breadcrumb {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
font-size: 14px;
color: var(--text-muted);
}
.breadcrumb a {
color: var(--primary-color);
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.agent-detail-header {
background: white;
border-radius: 12px;
padding: var(--card-padding, 25px);
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.agent-title-section {
display: flex;
align-items: center;
gap: 20px;
}
.agent-name-section h1 {
font-size: 28px;
color: var(--text-color);
margin-bottom: 5px;
}
.agent-subtitle {
font-size: 14px;
color: var(--text-muted);
}
.header-actions {
display: flex;
gap: 10px;
align-items: center;
}
.header-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.stat-box {
text-align: center;
padding: 15px;
background: var(--bg-secondary);
border-radius: 8px;
}
.stat-box-label {
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.stat-box-value {
font-size: 24px;
font-weight: 600;
color: var(--text-color);
margin-bottom: 4px;
}
.stat-box-subtext {
font-size: 11px;
color: var(--text-muted);
}
/* Detail Tabs */
.detail-tabs {
display: flex;
gap: 5px;
margin-bottom: 20px;
border-bottom: 2px solid var(--border-color);
}
.detail-tab {
padding: 12px 20px;
border: none;
background: none;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
transition: all 0.3s;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
}
.detail-tab:hover {
color: var(--text-color);
}
.detail-tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
.tab-content-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
.detail-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px 0;
}
.detail-info-item {
display: flex;
flex-direction: column;
}
.detail-info-label {
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.detail-info-value {
font-size: 15px;
color: var(--text-color);
font-weight: 500;
}
/* Tags */
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 15px 0;
}
.tag {
background: var(--primary-color);
color: white;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
/* Responsive Design */
@media (max-width: 768px) {
.stats-bar {
flex-direction: column;
}
.agents-header {
flex-direction: column;
align-items: stretch;
}
.agents-controls {
flex-direction: column;
}
.search-input {
width: 100%;
}
.agents-grid {
grid-template-columns: 1fr;
}
.header-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.detail-info-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================================
Agent Inventory Styles
============================================================================ */
/* Agent Header Icon */
.agent-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
/* Status Icon */
.status-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
}
.status-icon.online {
background: #dcfce7;
color: #166534;
}
.status-icon.offline {
background: #fee2e2;
color: #991b1b;
}
/* Content Area with Side Navigation */
.agent-content-area {
display: flex;
gap: 0;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
overflow: hidden;
min-height: 600px;
}
/* Side Navigation */
.agent-side-nav {
width: 220px;
background: white;
border-right: 1px solid var(--border-color);
overflow-y: auto;
flex-shrink: 0;
height: 600px;
}
.side-nav-section {
border-bottom: 1px solid var(--border-color);
}
.side-nav-header {
padding: 12px 20px;
background: var(--bg-secondary);
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.side-nav-item {
padding: 12px 20px;
cursor: pointer;
font-size: 14px;
color: var(--text-color);
transition: all 0.2s;
display: flex;
align-items: center;
gap: 10px;
border-left: 3px solid transparent;
}
.side-nav-item:hover {
background: var(--bg-secondary);
color: var(--primary-color);
}
.side-nav-item.active {
background: #eff6ff;
color: var(--primary-color);
font-weight: 600;
border-left-color: var(--primary-color);
}
.side-nav-item .icon {
font-size: 16px;
width: 20px;
text-align: center;
}
/* Content Panel */
.agent-content-panel {
flex: 1;
overflow-y: auto;
background: var(--bg-secondary);
padding: 25px;
}
/* Content Card */
.content-card {
background: white;
border-radius: 8px;
padding: 25px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-color);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
/* Info Grid */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.info-item {
display: flex;
flex-direction: column;
gap: 5px;
}
.info-item.full-width {
grid-column: 1 / -1;
}
.info-label {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}
.info-value {
font-size: 14px;
color: var(--text-color);
font-weight: 500;
}
.info-value code {
background: var(--bg-secondary);
padding: 3px 8px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 13px;
color: var(--text-muted);
word-break: break-all;
overflow-wrap: break-word;
display: inline-block;
max-width: 100%;
}
/* Metrics Grid */
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 15px;
}
.metric-card {
background: var(--bg-secondary);
padding: 20px;
border-radius: 8px;
border: 1px solid var(--border-color);
}
.metric-name {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
margin-bottom: 10px;
}
.metric-value {
font-size: 28px;
font-weight: 600;
color: var(--text-color);
}
.metric-mhz {
font-size: 14px;
color: var(--text-muted);
margin-top: 4px;
}
.metric-bar {
width: 100%;
height: 8px;
background: var(--border-color);
border-radius: 4px;
overflow: hidden;
margin-top: 10px;
}
.metric-bar-fill {
height: 100%;
border-radius: 4px;
transition: width 0.3s;
}
.metric-bar-fill.low {
background: linear-gradient(90deg, #10b981, #34d399);
}
.metric-bar-fill.medium {
background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.metric-bar-fill.high {
background: linear-gradient(90deg, #ef4444, #f87171);
}
/* Network I/O Card */
.network-io-card {
display: flex;
flex-direction: column;
}
.network-io-values {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.network-io-row {
display: flex;
align-items: center;
gap: 12px;
}
.network-io-label {
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 4px;
min-width: 32px;
text-align: center;
}
.network-io-label.tx {
background: rgba(16, 185, 129, 0.15);
color: #10b981;
}
.network-io-label.rx {
background: rgba(59, 130, 246, 0.15);
color: #3b82f6;
}
.network-io-value {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
}
/* Disk Performance Card */
.disk-perf-card {
display: flex;
flex-direction: column;
}
.disk-perf-values {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.disk-perf-row {
display: flex;
align-items: center;
gap: 12px;
}
.disk-perf-label {
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
min-width: 50px;
text-align: center;
background: rgba(156, 163, 175, 0.15);
color: var(--text-secondary);
}
.disk-perf-label.read {
background: rgba(16, 185, 129, 0.15);
color: #10b981;
}
.disk-perf-label.write {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
}
.disk-perf-value {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
/* Disk Queue Card */
.disk-queue-card {
display: flex;
flex-direction: column;
}
.disk-queue-values {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.disk-queue-row {
display: flex;
align-items: center;
gap: 12px;
}
.disk-queue-label {
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
min-width: 50px;
text-align: center;
background: rgba(156, 163, 175, 0.15);
color: var(--text-secondary);
}
.disk-queue-label.read {
background: rgba(16, 185, 129, 0.15);
color: #10b981;
}
.disk-queue-label.write {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
}
.disk-queue-value {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
/* GPU Performance Card */
.gpu-card {
display: flex;
flex-direction: column;
min-width: 180px;
}
.metric-title,
.gpu-title {
display: flex;
align-items: center;
gap: 6px;
cursor: help;
}
.metric-info-icon,
.gpu-info-icon {
font-size: 9px;
font-weight: 600;
font-style: italic;
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(139, 92, 246, 0.15);
color: #8b5cf6;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.gpu-metrics {
display: flex;
flex-direction: column;
gap: 8px;
}
.gpu-metric-row {
display: flex;
align-items: center;
gap: 12px;
}
.gpu-metric-label {
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
min-width: 60px;
text-align: center;
background: rgba(139, 92, 246, 0.15);
color: #8b5cf6;
}
.gpu-metric-value {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
.gpu-metric-value.nowrap {
white-space: nowrap;
font-size: 16px;
}
.gpu-metric-value.temperature {
color: #f59e0b;
}
/* Data Table */
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th {
text-align: left;
padding: 12px;
background: var(--bg-secondary);
font-weight: 600;
color: var(--text-muted);
font-size: 12px;
border-bottom: 2px solid var(--border-color);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.data-table td {
padding: 12px;
border-bottom: 1px solid var(--border-color);
font-size: 13px;
color: var(--text-color);
}
.data-table tr:hover {
background: var(--bg-secondary);
}
.data-table code {
background: transparent;
padding: 0;
font-family: 'Courier New', monospace;
font-size: 12px;
}
/* Certificate Warning */
.cert-warning {
background: #fffbeb;
border: 2px solid #fef3c7;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;
}
.cert-warning.expired {
background: #fef2f2;
border-color: #fecaca;
}
.cert-warning-icon {
font-size: 24px;
}
.cert-warning-text {
flex: 1;
}
.cert-warning-title {
font-weight: 600;
color: #92400e;
margin-bottom: 3px;
}
.cert-warning.expired .cert-warning-title {
color: #991b1b;
}
.cert-warning-desc {
font-size: 13px;
color: #78350f;
}
.cert-warning.expired .cert-warning-desc {
color: #b91c1c;
}
/* Activity List */
.activity-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.activity-item {
position: relative;
background: var(--bg-secondary);
border-radius: 8px;
border-left: 3px solid transparent;
}
.activity-icon {
width: 40px;
height: 40px;
background: #dbeafe;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.activity-content {
flex: 1;
}
.activity-title {
font-weight: 600;
color: var(--text-color);
margin-bottom: 3px;
font-size: 14px;
}
.activity-desc {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 5px;
}
.activity-time {
font-size: 11px;
color: var(--text-muted);
}
.activity-status {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
padding: 4px 10px;
border-radius: 12px;
}
.activity-status.success {
background: #dcfce7;
color: #166534;
}
.activity-status.running {
background: #dbeafe;
color: #1e40af;
}
/* Activity Accordion */
.activity-row-button {
display: flex;
align-items: center;
gap: 15px;
width: 100%;
padding: 15px;
border: none;
background: transparent;
text-align: inherit;
cursor: pointer;
border-radius: 6px;
font-family: inherit;
font-size: inherit;
color: inherit;
}
.activity-row-button:hover {
background: rgba(0, 0, 0, 0.04);
}
.activity-item.expanded .activity-row-button {
background: rgba(0, 0, 0, 0.04);
}
.activity-expand-indicator {
flex: 0 0 auto;
color: #6b7280;
font-size: 12px;
padding-left: 8px;
}
.activity-details {
padding: 8px 12px 12px 48px;
border-left: 2px solid #e5e7eb;
margin-left: 16px;
}
.activity-details-list {
margin: 0;
}
.activity-detail-row {
display: flex;
gap: 8px;
padding: 2px 0;
font-size: 13px;
}
.activity-detail-row dt {
color: #6b7280;
min-width: 120px;
font-weight: 500;
}
.activity-detail-row dd {
margin: 0;
color: #111827;
word-break: break-word;
}
/* Activity Type Accent Strips */
.activity-accent-deployment { border-left-color: #2563eb; } /* blue */
.activity-accent-scan { border-left-color: #0891b2; } /* teal */
.activity-accent-cert-renew { border-left-color: #16a34a; } /* green */
.activity-accent-cert-expiring { border-left-color: #f59e0b; } /* amber */
.activity-accent-job { border-left-color: #7c3aed; } /* violet */
.activity-accent-heartbeat { border-left-color: #ef4444; } /* red */
.activity-accent-command { border-left-color: #64748b; } /* slate */
.activity-accent-registration { border-left-color: #a3a3a3; } /* neutral */
.activity-accent-default { border-left-color: transparent; }
/* Search Box */
.search-box {
display: flex;
align-items: center;
background: white;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 8px 12px;
margin-bottom: 20px;
max-width: 350px;
}
.search-box input {
border: none;
background: none;
outline: none;
margin-left: 8px;
font-size: 13px;
width: 100%;
}
.search-box input::placeholder {
color: var(--text-muted);
}
/* Tags */
.tag {
padding: 4px 10px;
background: #e2e8f0;
border-radius: 4px;
font-size: 11px;
color: #475569;
display: inline-block;
margin-right: 5px;
font-weight: 500;
}
.tag.production {
background: #fee2e2;
color: #991b1b;
}
/* Breadcrumb separator */
.breadcrumb-separator {
color: var(--text-muted);
margin: 0 5px;
}
/* Status badges in tables */
.status {
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
display: inline-block;
}
.status.online {
background: #dcfce7;
color: #166534;
}
.status.offline {
background: #fee2e2;
color: #991b1b;
}
/* Responsive for Inventory */
@media (max-width: 992px) {
.agent-content-area {
flex-direction: column;
}
.agent-side-nav {
width: 100%;
border-right: none;
border-bottom: 1px solid var(--border-color);
max-height: 300px;
}
.metrics-grid {
grid-template-columns: repeat(2, 1fr);
}
.info-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.metrics-grid {
grid-template-columns: 1fr;
}
.header-stats-grid {
grid-template-columns: 1fr;
}
}
/* Button Variants */
.btn-icon {
width: 36px;
height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.btn-icon .action-btn-icon {
font-size: 22px;
line-height: 1;
}
/* Icon button color overrides — higher specificity to beat later .btn-secondary etc. */
.btn-icon.btn-secondary {
background: #dbeafe;
color: #1e40af;
border: 1px solid #bfdbfe;
}
.btn-icon.btn-secondary:hover {
background: #bfdbfe;
}
.btn-icon.btn-primary {
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
color: white;
}
.btn-icon.btn-primary:hover {
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
}
.btn-icon.btn-danger {
background: #fee2e2;
color: #dc2626;
border: 1px solid #fecaca;
}
.btn-icon.btn-danger:hover {
background: #fecaca;
}
.btn-icon.btn-warning {
background: #fef3c7;
color: #d97706;
border: 1px solid #fde68a;
}
.btn-icon.btn-warning:hover {
background: #fde68a;
}
.btn-icon.btn-success {
background: #d1fae5;
color: #059669;
border: 1px solid #a7f3d0;
}
.btn-icon.btn-success:hover {
background: #a7f3d0;
}
.btn-icon.btn-info {
background: #e0f2fe;
color: #0284c7;
border: 1px solid #bae6fd;
}
.btn-icon.btn-info:hover {
background: #bae6fd;
}
.btn-secondary {
background: #64748b;
color: white;
}
.btn-secondary:hover {
background: #475569;
transform: translateY(-1px);
}
.btn-danger {
background: #dc2626;
color: white;
}
.btn-danger:hover {
background: #b91c1c;
transform: translateY(-1px);
}
.btn-danger:disabled {
background: #9ca3af;
color: #e5e7eb;
cursor: not-allowed;
transform: none;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
/* Tab Content Animation */
.tab-content-wrapper {
animation: fadeInUp 0.3s ease-in-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Service Filters and Search Container */
.service-filters-container {
display: flex;
gap: 15px;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
}
.service-search-box {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 15px;
background: white;
border: 1px solid var(--border-color);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
min-width: 300px;
max-width: 350px;
}
.service-search-box input {
flex: 1;
border: none;
outline: none;
font-size: 14px;
}
.service-search-box input::placeholder {
color: #9ca3af;
}
/* Filter buttons */
.service-filters {
display: flex;
gap: 5px;
background: white;
padding: 5px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
flex: 1;
min-width: 400px;
}
.filter-btn {
padding: 10px 20px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 6px;
font-weight: 500;
transition: all 0.2s;
color: #666;
font-size: 14px;
}
.filter-btn:hover {
background: #f3f4f6;
}
.filter-btn.active {
background: var(--primary-color);
color: white;
}
.filter-btn .count {
background: rgba(0, 0, 0, 0.1);
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
margin-left: 6px;
font-weight: 600;
}
.filter-btn.active .count {
background: rgba(255, 255, 255, 0.3);
}
/* Service action buttons */
.service-actions {
display: flex;
gap: 5px;
justify-content: flex-start;
}
.service-action-btn {
padding: 5px 12px;
border: 1px solid;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.service-action-btn.start {
background: #ecfdf5;
color: #10b981;
border-color: #10b981;
}
.service-action-btn.start:hover {
background: #10b981;
color: white;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}
.service-action-btn.stop {
background: #fef2f2;
color: #dc2626;
border-color: #dc2626;
}
.service-action-btn.stop:hover {
background: #dc2626;
color: white;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}
.service-action-btn.restart {
background: #eff6ff;
color: var(--primary-color);
border-color: var(--primary-color);
}
.service-action-btn.restart:hover {
background: var(--primary-color);
color: white;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}
/* Services table container with max height and scroll */
.services-table-container {
max-height: 600px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 8px;
}
/* Features table container with max height and scroll */
.features-table-container {
max-height: 600px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 8px;
}
/* Software table container with max height and scroll */
.software-table-container {
max-height: 600px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 8px;
}
/* Data table with sticky header */
.data-table thead {
position: sticky;
top: 0;
z-index: 10;
background: #f8fafc;
}
/* Service Error Row */
.data-table tbody tr.service-error {
background: #fef2f2 !important;
border-left: 3px solid #dc2626;
}
.data-table tbody tr.service-error:hover {
background: #fee2e2 !important;
}
/* Status badge variants */
.status.error {
background: #fee2e2;
color: #991b1b;
}
.status.warning {
background: #fef3c7;
color: #92400e;
}
.status.pending {
background: #f3f4f6;
color: #6b7280;
}
.status.running {
background: #dbeafe;
color: #1e40af;
}
/* Status Icon Small (for tables) */
.status-icon-small {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}
.status-icon-small.online {
background: #dcfce7;
color: #166534;
}
.status-icon-small.offline {
background: #fee2e2;
color: #991b1b;
}
/* Detail Card Title */
.detail-card-title {
font-size: 18px;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
/* Agent Icon Large */
.agent-icon-large {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
flex-shrink: 0;
}
/* ============================================================================
Commands Page Styles
============================================================================ */
/* Quick Actions */
.quick-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.quick-action-card {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
cursor: pointer;
transition: all 0.3s;
border: 2px solid transparent;
}
.quick-action-card:hover {
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}
.quick-action-icon {
font-size: 32px;
margin-bottom: 12px;
}
.quick-action-title {
font-size: 16px;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 6px;
}
.quick-action-desc {
font-size: 13px;
color: var(--text-muted);
}
/* Commands Stats Bar */
.stats-bar .stat-item-running .stat-icon {
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
color: white;
}
.stats-bar .stat-item-pending .stat-icon {
background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
color: white;
}
.stats-bar .stat-item-completed .stat-icon {
background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
color: white;
}
.stats-bar .stat-item-failed .stat-icon {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
color: white;
}
/* Commands Container */
.commands-container {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
overflow: hidden;
}
.commands-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 2px solid #f0f0f0;
flex-wrap: wrap;
gap: 15px;
}
.commands-title {
font-size: 20px;
font-weight: 600;
color: #1e3a8a;
}
.commands-controls {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
/* Filter Select */
.filter-select {
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
background: white;
cursor: pointer;
font-size: 14px;
min-width: 120px;
}
.filter-select:focus {
outline: none;
border-color: var(--primary-color);
}
/* Commands Table */
.commands-list {
overflow-x: auto;
}
.commands-table {
width: 100%;
border-collapse: collapse;
}
.commands-table thead {
background: #f8fafc;
}
.commands-table th {
padding: 16px;
text-align: left;
font-weight: 600;
color: #475569;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.commands-table td {
padding: 16px;
border-bottom: 1px solid #f1f5f9;
}
.commands-table tr {
cursor: pointer;
transition: background 0.2s;
}
.commands-table tbody tr:hover {
background: #f8fafc;
}
/* Command Text */
.command-text {
font-family: 'Courier New', monospace;
background: #f8fafc;
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
color: #1e3a8a;
max-width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Command Type Badge */
.command-type {
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
display: inline-block;
}
.command-type.powershell {
background: #eff6ff;
color: #1e40af;
}
.command-type.batch {
background: #f0fdf4;
color: #166534;
}
.command-type.shell {
background: #fef3c7;
color: #92400e;
}
.command-type.executable {
background: #f3e8ff;
color: #7c3aed;
}
.command-type.chocolatey {
background: #fef3e2;
color: #92400e;
}
/* Target Badge */
.target-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: #eff6ff;
color: #1e3a8a;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
}
/* Cancelled Status */
.status.cancelled {
background: #f3f4f6;
color: #6b7280;
}
/* Commands Pagination */
.pagination {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: white;
border-top: 2px solid #f1f5f9;
}
.pagination-info {
color: var(--text-muted);
font-size: 14px;
}
.pagination-controls {
display: flex;
gap: 8px;
}
.page-btn {
padding: 8px 14px;
border: 1px solid var(--border-color);
background: white;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
transition: all 0.2s;
font-weight: 500;
}
.page-btn:hover:not(:disabled) {
background: #f8fafc;
border-color: var(--primary-color);
color: var(--primary-color);
}
.page-btn.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Modal Styles */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.2s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal,
.modal-dialog {
background: white;
border-radius: 12px;
max-width: 600px;
width: 90%;
max-height: 90vh;
overflow-y: visible;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
animation: slideUp 0.3s;
}
.modal.modal-lg {
max-width: 800px;
}
/* Only show scrollbar when content overflows */
.modal-body {
overflow-y: auto;
max-height: calc(90vh - 150px);
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.modal-header {
padding: 24px;
border-bottom: 2px solid #f1f5f9;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h2 {
font-size: 22px;
color: #1e3a8a;
font-weight: 700;
}
.close-btn {
background: none;
border: none;
font-size: 28px;
color: #94a3b8;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: all 0.2s;
}
.close-btn:hover {
background: #f1f5f9;
color: #64748b;
}
.modal-body {
padding: 24px;
}
.modal-body .checkbox-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 14px;
color: var(--text-color);
}
.modal-body .checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--primary-color);
margin: 0;
}
.modal-body .form-text {
display: block;
margin-top: 4px;
margin-left: 28px;
}
.modal-footer {
padding: 20px 24px;
border-top: 2px solid #f1f5f9;
display: flex;
justify-content: flex-end;
gap: 12px;
}
/* Form Styles for Modal */
.modal .form-group {
margin-bottom: 20px;
}
.modal .form-group label {
display: block;
font-weight: 600;
color: #334155;
margin-bottom: 8px;
font-size: 14px;
}
.modal .form-group input,
.modal .form-group select,
.modal .form-group textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
transition: all 0.2s;
font-family: inherit;
}
.modal .form-group textarea {
font-family: 'Courier New', monospace;
resize: vertical;
min-height: 120px;
}
.modal .form-group input:focus,
.modal .form-group select:focus,
.modal .form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.compliance-tabs {
margin-bottom: 20px;
}
.modal .form-group.form-check {
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 8px;
}
.modal .form-group.form-check input[type="checkbox"] {
width: auto;
margin: 0;
padding: 0;
}
.modal .form-group.form-check label {
display: inline;
margin-bottom: 0;
}
.modal .form-group.form-check .form-hint {
flex-basis: 100%;
margin-top: 4px;
}
.form-hint {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
/* Fixed-prefix input: https:// */
.server-url-input-wrap {
display: flex;
align-items: stretch;
width: 100%;
}
.server-url-input-wrap .server-url-prefix {
display: inline-flex;
align-items: center;
padding: 0 12px;
background-color: #f3f4f6;
border: 1px solid #d1d5db;
border-right: 0;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
color: #4b5563;
font-family: var(--font-mono, monospace);
font-size: 14px;
user-select: none;
white-space: nowrap;
}
.server-url-input-wrap .server-url-input {
flex: 1 1 auto;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
/* Agent Selector in Modal - Legacy styles removed, using AgentSelector component */
.agent-checkbox {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.agent-checkbox:hover {
background: #eff6ff;
}
.agent-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
.agent-checkbox label {
cursor: pointer;
flex: 1;
font-weight: 500;
color: #334155;
margin: 0;
}
.agent-status {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-left: 8px;
}
.agent-status.online {
background: #10b981;
}
.agent-status.offline {
background: #ef4444;
}
/* Button Styles */
.btn-secondary {
background: white;
color: var(--text-muted);
border: 1px solid var(--border-color);
}
.btn-secondary:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
/* List Action Buttons */
.list-action-btn.cancel {
color: var(--danger-color);
border-color: var(--danger-color);
}
.list-action-btn.cancel:hover {
background: var(--danger-color);
color: white;
}
.list-action-btn.retry {
color: var(--warning-color);
border-color: var(--warning-color);
}
.list-action-btn.retry:hover {
background: var(--warning-color);
color: white;
}
/* Command Result Meta (exit code, duration) */
.result-meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.result-meta .exit-code {
padding: 4px 8px;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
}
.result-meta .exit-code.success {
background: rgba(16, 185, 129, 0.1);
color: #059669;
}
.result-meta .exit-code.error {
background: rgba(239, 68, 68, 0.1);
color: #dc2626;
}
.result-meta .duration {
color: #64748b;
font-size: 13px;
}
/* Command Output Section */
.output-section {
margin-top: 16px;
}
.output-section .copy-btn {
border: none;
background: transparent;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
font-size: 16px;
}
.output-section .copy-btn:hover {
background: rgba(0, 0, 0, 0.05);
}
/* Commands Page Responsive */
@media (max-width: 768px) {
.quick-actions {
grid-template-columns: 1fr;
}
.commands-header {
flex-direction: column;
align-items: stretch;
}
.commands-controls {
flex-direction: column;
}
.pagination {
flex-direction: column;
gap: 15px;
}
.pagination-controls {
flex-wrap: wrap;
justify-content: center;
}
}
/* ============================================================================
Execute Command Panel Styles (Content View with Monaco Editor)
============================================================================ */
.execute-panel {
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
overflow: hidden;
transition: all 0.3s ease;
}
.execute-panel.expanded {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
border-radius: 0;
z-index: 1000;
display: flex;
flex-direction: column;
}
.execute-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
color: white;
}
.execute-panel-title {
display: flex;
align-items: center;
gap: 12px;
}
.execute-panel-title h2 {
margin: 0;
font-size: 20px;
font-weight: 600;
}
.execute-icon {
font-size: 24px;
}
.close-panel-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 36px;
height: 36px;
border-radius: 8px;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.close-panel-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.execute-panel-body {
padding: 24px;
flex: 1;
overflow-y: auto;
}
.execute-panel.expanded .execute-panel-body {
padding: 20px;
}
.execute-panel-main {
display: flex;
flex-direction: column;
gap: 20px;
height: 100%;
}
.execute-panel.expanded .execute-panel-main {
height: 100%;
}
/* Editor Group */
.editor-group {
flex: 1;
display: flex;
flex-direction: column;
}
.editor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.editor-header label {
margin-bottom: 0;
}
.expand-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: #475569;
cursor: pointer;
transition: all 0.2s;
}
.expand-btn:hover {
background: #e2e8f0;
border-color: #cbd5e1;
color: #1e3a8a;
}
.expand-btn span {
display: flex;
align-items: center;
gap: 6px;
}
/* Monaco Editor Container */
.monaco-editor-container {
height: 250px;
border: 2px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
}
.monaco-editor-container.expanded {
height: calc(100vh - 280px);
border-color: #2563eb;
}
.execute-panel.expanded .monaco-editor-container {
flex: 1;
height: auto;
min-height: 400px;
}
/* Form styles within panel */
.execute-panel .form-group {
margin-bottom: 0;
}
.execute-panel .form-group label {
display: block;
font-weight: 600;
color: #334155;
margin-bottom: 8px;
font-size: 14px;
}
.execute-panel .form-group select,
.execute-panel .form-group input {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
transition: all 0.2s;
}
.execute-panel .form-group select:focus,
.execute-panel .form-group input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
/* Agent Selector in Panel */
.execute-panel .agent-selector {
border: 2px solid var(--border-color);
border-radius: 8px;
padding: 16px;
background: #f8fafc;
max-height: 200px;
overflow-y: auto;
}
/* Panel Footer */
.execute-panel-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
}
.execute-panel.expanded .execute-panel-footer {
padding: 16px 20px;
}
/* Hide elements when expanded */
.execute-panel.expanded .quick-actions,
.execute-panel.expanded .stats-bar,
.execute-panel.expanded .commands-container {
display: none;
}
/* Responsive for Execute Panel */
@media (max-width: 768px) {
.execute-panel-header {
padding: 16px;
}
.execute-panel-body {
padding: 16px;
}
.monaco-editor-container {
height: 200px;
}
.editor-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.expand-btn {
width: 100%;
justify-content: center;
}
}
/* ============================================================================
Execute Command Page Styles (Dedicated Route)
============================================================================ */
.execute-page {
display: flex;
flex-direction: column;
min-height: calc(100vh - 60px);
background: #f5f5f5;
transition: all 0.3s ease;
}
.execute-page.fullscreen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background: #f5f5f5;
min-height: 100vh;
}
/* Page Header */
.execute-page .page-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 30px;
background: white;
border-bottom: 1px solid var(--border-color);
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.execute-page .page-header-left {
display: flex;
align-items: center;
gap: 20px;
}
.execute-page .page-header-right {
display: flex;
align-items: center;
gap: 12px;
}
.execute-page .back-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #475569;
cursor: pointer;
transition: all 0.2s;
}
.execute-page .back-btn:hover {
background: #e2e8f0;
color: #1e3a8a;
}
.execute-page .page-title-section h1 {
font-size: 24px;
font-weight: 700;
color: #1e3a8a;
margin: 0 0 4px 0;
}
.execute-page .page-subtitle {
font-size: 14px;
color: var(--text-muted);
margin: 0;
}
/* ============================================================================
Deployment Pages Common Styles (packages, deploy, active, history)
============================================================================ */
.packages-page,
.deploy-page,
.active-deployments-page,
.deployment-history-page {
display: flex;
flex-direction: column;
min-height: calc(100vh - 60px);
background: #f5f5f5;
}
.packages-page .page-header,
.deploy-page .page-header,
.active-deployments-page .page-header,
.deployment-history-page .page-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 30px;
background: white;
border-bottom: 1px solid var(--border-color);
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.packages-page .page-header-left,
.deploy-page .page-header-left,
.active-deployments-page .page-header-left,
.deployment-history-page .page-header-left {
display: flex;
align-items: center;
gap: 20px;
}
.packages-page .page-header-right,
.deploy-page .page-header-right,
.active-deployments-page .page-header-right,
.deployment-history-page .page-header-right {
display: flex;
align-items: center;
gap: 12px;
}
.packages-page .back-btn,
.deploy-page .back-btn,
.active-deployments-page .back-btn,
.deployment-history-page .back-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #475569;
cursor: pointer;
transition: all 0.2s;
}
.packages-page .back-btn:hover,
.deploy-page .back-btn:hover,
.active-deployments-page .back-btn:hover,
.deployment-history-page .back-btn:hover {
background: #e2e8f0;
color: #1e3a8a;
}
.packages-page .page-title-section h1,
.deploy-page .page-title-section h1,
.active-deployments-page .page-title-section h1,
.deployment-history-page .page-title-section h1 {
font-size: 24px;
font-weight: 700;
color: #1e3a8a;
margin: 0 0 4px 0;
}
.packages-page .page-subtitle,
.deploy-page .page-subtitle,
.active-deployments-page .page-subtitle,
.deployment-history-page .page-subtitle {
font-size: 14px;
color: var(--text-muted);
margin: 0;
}
/* Content area for deployment pages */
.packages-page .toolbar,
.deploy-page .toolbar,
.active-deployments-page .toolbar,
.deployment-history-page .toolbar {
padding: 16px 30px;
background: white;
}
@media (max-width: 768px) {
.packages-page .page-header,
.deploy-page .page-header,
.active-deployments-page .page-header,
.deployment-history-page .page-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 16px;
}
.packages-page .page-header-left,
.deploy-page .page-header-left,
.active-deployments-page .page-header-left,
.deployment-history-page .page-header-left {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
/* Execute Content Area */
.execute-content {
display: grid;
grid-template-columns: 1fr 400px;
gap: 24px;
padding: 24px;
flex: 1;
transition: grid-template-columns 0.3s ease;
}
.execute-content.expanded {
grid-template-columns: 1fr;
}
/* Section Cards */
.execute-page .section-card {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
overflow: hidden;
}
.execute-page .section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: #f8fafc;
border-bottom: 1px solid var(--border-color);
}
.execute-page .section-header h3 {
font-size: 16px;
font-weight: 600;
color: #1e3a8a;
margin: 0;
}
/* Editor Section */
.editor-section {
display: flex;
flex-direction: column;
}
.editor-section .section-card {
display: flex;
flex-direction: column;
flex: 1;
}
.command-type-selector {
display: flex;
align-items: center;
gap: 10px;
}
.command-type-selector label {
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
.command-type-selector select {
padding: 6px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 13px;
background: white;
cursor: pointer;
}
.command-type-selector select:focus {
outline: none;
border-color: var(--primary-color);
}
/* Monaco Editor Wrapper */
.monaco-editor-wrapper {
flex: 1;
min-height: 400px;
border-top: none;
transition: min-height 0.3s ease;
}
.monaco-editor-wrapper.expanded {
min-height: calc(100vh - 200px);
}
/* Settings Section */
.settings-section {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Target Mode Tabs */
.target-mode-tabs {
display: flex;
gap: 8px;
padding: 16px 20px;
border-bottom: 1px solid var(--border-color);
}
.tab-btn {
flex: 1;
padding: 10px 12px;
border: 1px solid var(--border-color);
background: white;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.tab-btn:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
.tab-btn.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* Target Content */
.target-content {
padding: 16px 20px;
}
/* Agent Filter */
.agent-filter {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.filter-btn {
padding: 6px 14px;
border: 1px solid var(--border-color);
background: white;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s;
}
.filter-btn:hover {
background: #f8fafc;
}
.filter-btn.active {
background: #eff6ff;
color: var(--primary-color);
border-color: var(--primary-color);
}
/* Selection Actions */
.selection-actions {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.select-action-btn {
padding: 6px 12px;
border: 1px dashed var(--border-color);
background: white;
border-radius: 6px;
font-size: 12px;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s;
}
.select-action-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: #eff6ff;
}
/* Agent List */
.agent-list {
max-height: 250px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 8px;
background: #f8fafc;
}
.agent-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--border-color);
cursor: pointer;
transition: all 0.2s;
}
.agent-item:last-child {
border-bottom: none;
}
.agent-item:hover {
background: #eff6ff;
}
.agent-item.selected {
background: #dbeafe;
}
.agent-item.offline {
opacity: 0.5;
cursor: not-allowed;
}
.agent-item input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--primary-color);
}
.agent-item .agent-info {
flex: 1;
display: flex;
flex-direction: column;
}
.agent-item .agent-name {
font-size: 14px;
font-weight: 600;
color: var(--text-color);
}
.agent-item .agent-details {
font-size: 12px;
color: var(--text-muted);
}
.status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
}
.status-indicator.online {
background: #10b981;
box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}
.status-indicator.offline {
background: #9ca3af;
}
.status-indicator.maintenance {
width: auto;
height: auto;
background: none;
font-size: 14px;
line-height: 1;
}
.agent-item.maintenance {
background: #fffbeb;
border-color: #f59e0b;
}
.agent-item.maintenance:hover {
background: #fef3c7;
}
/* Selection Summary */
.selection-summary {
margin-top: 12px;
padding: 10px 14px;
background: #dcfce7;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
color: #166534;
}
/* Collection List */
.collection-list {
max-height: 250px;
overflow-y: auto;
}
.collection-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.2s;
}
.collection-item:hover {
border-color: var(--primary-color);
background: #eff6ff;
}
.collection-item.selected {
border-color: var(--primary-color);
background: #dbeafe;
}
.collection-item input[type="radio"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--primary-color);
}
.collection-info {
flex: 1;
display: flex;
flex-direction: column;
}
.collection-name {
font-size: 14px;
font-weight: 600;
color: var(--text-color);
}
.collection-details {
font-size: 12px;
color: var(--text-muted);
}
/* Tags Input */
.tags-input {
margin-bottom: 16px;
}
.tags-input input {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
}
.tags-input input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.tags-hint {
display: block;
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
/* Available Tags */
.available-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.tags-label {
font-size: 12px;
color: var(--text-muted);
margin-right: 4px;
}
.tag-chip {
padding: 6px 12px;
border: 1px solid var(--border-color);
background: white;
border-radius: 16px;
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s;
}
.tag-chip:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.tag-chip.selected {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* Options Form */
.options-form {
padding: 16px 20px;
}
.options-form .form-group {
margin-bottom: 16px;
}
.options-form .form-group:last-child {
margin-bottom: 0;
}
.options-form .form-group label {
display: block;
font-size: 14px;
font-weight: 600;
color: #334155;
margin-bottom: 8px;
}
.options-form .form-group input {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
}
.options-form .form-group input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.options-form .form-hint {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
/* Run As Section */
.run-as-section {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border-color);
}
.run-as-options {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.run-as-options .radio-option {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
background: #fff;
}
.run-as-options .radio-option:hover {
border-color: var(--primary-color);
background: #f8fafc;
}
.run-as-options .radio-option.selected {
border-color: var(--primary-color);
background: #eff6ff;
}
.run-as-options .radio-option input[type="radio"] {
width: auto;
margin-top: 2px;
}
.run-as-options .radio-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.run-as-options .radio-label {
font-size: 14px;
font-weight: 500;
color: #334155;
}
.run-as-options .radio-hint {
font-size: 12px;
color: var(--text-muted);
}
.credential-selector {
margin-top: 8px;
}
.credential-selector select,
.credential-dropdown {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
background: #fff;
cursor: pointer;
}
.credential-selector select:focus,
.credential-dropdown:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.empty-credentials {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px;
background: #f8fafc;
border-radius: 8px;
text-align: center;
}
.empty-credentials span {
font-size: 13px;
color: var(--text-muted);
}
.empty-credentials .create-link {
font-size: 13px;
color: var(--primary-color);
text-decoration: none;
}
.empty-credentials .create-link:hover {
text-decoration: underline;
}
/* Execute Actions */
.execute-actions {
display: flex;
gap: 12px;
margin-top: 8px;
}
.execute-actions .btn {
flex: 1;
padding: 14px 20px;
font-size: 15px;
font-weight: 600;
}
.btn-lg {
padding: 14px 24px;
font-size: 15px;
}
/* Validation Message */
.execute-page .validation-message {
margin-top: 12px;
padding: 12px 16px;
background: #fef3c7;
border: 1px solid #fde68a;
border-radius: 8px;
font-size: 13px;
color: #92400e;
}
/* Floating Actions (when expanded) */
.floating-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
padding: 16px 24px;
background: white;
border-top: 1px solid var(--border-color);
box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
z-index: 1001;
}
.floating-actions .target-summary {
flex: 1;
font-size: 14px;
color: var(--text-muted);
}
/* Empty and Loading States */
.loading-state-small,
.empty-state-small {
padding: 30px 20px;
text-align: center;
color: var(--text-muted);
font-size: 14px;
}
.empty-state-small .create-link {
display: inline-block;
margin-top: 10px;
color: var(--primary-color);
font-weight: 500;
}
/* Responsive */
@media (max-width: 900px) {
.execute-content {
grid-template-columns: 1fr;
}
.settings-section {
order: 2;
}
.editor-section {
order: 1;
}
.monaco-editor-wrapper {
min-height: 300px;
}
}
@media (max-width: 768px) {
.execute-page .page-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 16px;
}
.execute-page .page-header-left {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.execute-content {
padding: 16px;
gap: 16px;
}
.target-mode-tabs {
flex-direction: column;
}
.execute-actions {
flex-direction: column;
}
.floating-actions {
flex-direction: column;
align-items: stretch;
}
.floating-actions .target-summary {
text-align: center;
margin-bottom: 8px;
}
}
/* ============================================================================
Scheduler Page Styles
============================================================================ */
/* View Toggle Bar */
.view-toggle-bar {
background: white;
padding: 20px;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
display: flex;
justify-content: space-between;
align-items: center;
}
.view-toggle {
display: flex;
gap: 5px;
background: #f8fafc;
padding: 4px;
border-radius: 6px;
}
.view-btn {
padding: 8px 16px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s;
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
}
.view-btn:hover {
background: rgba(255, 255, 255, 0.5);
}
.view-btn.active {
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
color: var(--primary-color);
}
/* Calendar View */
.scheduler-calendar {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #f0f0f0;
}
.calendar-title {
font-size: 20px;
font-weight: 600;
color: #1e3a8a;
}
.calendar-nav {
display: flex;
gap: 10px;
align-items: center;
}
.nav-month-btn {
padding: 8px 12px;
border: 1px solid var(--border-color);
background: white;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.nav-month-btn:hover {
background: #f8fafc;
border-color: var(--primary-color);
}
.current-month {
font-size: 16px;
font-weight: 600;
color: #1e3a8a;
min-width: 150px;
text-align: center;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
}
.calendar-day-header {
text-align: center;
font-weight: 600;
color: var(--text-muted);
font-size: 13px;
padding: 10px 5px;
}
.calendar-day {
min-height: 100px;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 8px;
cursor: pointer;
transition: all 0.2s;
position: relative;
}
.calendar-day:hover {
background: #f8fafc;
border-color: var(--primary-color);
}
.calendar-day.other-month {
background: #f8fafc;
}
.calendar-day.other-month .day-number {
color: #cbd5e1;
}
.calendar-day.today {
background: #eff6ff;
border-color: var(--primary-color);
border-width: 2px;
}
.day-number {
font-weight: 600;
color: #1e3a8a;
margin-bottom: 6px;
}
.day-events {
display: flex;
flex-direction: column;
gap: 4px;
}
.day-event {
font-size: 10px;
padding: 3px 6px;
border-radius: 4px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.day-event:hover {
transform: scale(1.02);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.day-event.command {
background: #dbeafe;
color: #1e40af;
}
.day-event.deployment {
background: #dcfce7;
color: #166534;
}
.day-event.more {
background: #f1f5f9;
color: var(--text-muted);
font-style: italic;
}
/* Scheduler List View */
.scheduler-list {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.scheduler-list .list-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid var(--border-color);
background: var(--bg-secondary);
}
.scheduler-list .list-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.scheduler-table {
width: 100%;
border-collapse: collapse;
}
.scheduler-table thead {
background: #f8fafc;
}
.scheduler-table th {
padding: 16px;
text-align: left;
font-weight: 600;
color: #475569;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.scheduler-table td {
padding: 16px;
border-bottom: 1px solid #f1f5f9;
}
.scheduler-table tr:hover {
background: #f8fafc;
cursor: pointer;
}
/* Task Type Badge */
.task-type {
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
display: inline-block;
}
.task-type.command {
background: #eff6ff;
color: #1e40af;
}
.task-type.deployment {
background: #f0fdf4;
color: #166534;
}
.task-type.inventory {
background: #fef3c7;
color: #92400e;
}
.task-type.backup {
background: #e0e7ff;
color: #3730a3;
}
.task-type.cleanup {
background: #fce7f3;
color: #9d174d;
}
.task-type.collection {
background: #ecfdf5;
color: #047857;
}
/* Schedule Type */
.schedule-type {
font-size: 13px;
color: var(--text-muted);
}
.schedule-type strong {
color: #1e3a8a;
}
/* Status Badges for Scheduler */
.status.scheduled {
background: #dbeafe;
color: #1e40af;
}
.status.paused {
background: #fef3c7;
color: #92400e;
}
/* Action Buttons */
.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.action-btn {
padding: 6px 12px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
transition: all 0.2s;
white-space: nowrap;
}
.action-btn.view {
background: #eff6ff;
color: var(--primary-color);
}
.action-btn.view:hover {
background: #dbeafe;
}
.action-btn.edit {
background: #fef3c7;
color: #d97706;
}
.action-btn.edit:hover {
background: #fde68a;
}
.action-btn.run {
background: #ecfdf5;
color: #059669;
}
.action-btn.run:hover {
background: #d1fae5;
}
.action-btn.pause {
background: #fef3c7;
color: #92400e;
}
.action-btn.pause:hover {
background: #fde68a;
}
.action-btn.resume {
background: #ecfdf5;
color: #059669;
}
.action-btn.resume:hover {
background: #d1fae5;
}
.action-btn.cancel {
background: #fee2e2;
color: var(--danger-color);
}
.action-btn.cancel:hover {
background: #fecaca;
}
/* Schedule Task Modal */
.task-type-selector {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 8px;
}
.task-type-option {
padding: 16px;
border: 2px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.task-type-option:hover {
border-color: #cbd5e1;
background: #f8fafc;
}
.task-type-option.selected {
border-color: var(--primary-color);
background: #eff6ff;
}
.task-type-option .type-icon {
font-size: 32px;
margin-bottom: 8px;
}
.task-type-option .type-name {
font-weight: 600;
color: #1e3a8a;
margin-bottom: 4px;
}
.task-type-option .type-desc {
font-size: 12px;
color: var(--text-muted);
}
/* Schedule Type Selector */
.schedule-type-selector {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
margin-top: 8px;
}
.schedule-type-option {
padding: 12px;
border: 2px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.schedule-type-option:hover {
border-color: #cbd5e1;
background: #f8fafc;
}
.schedule-type-option.selected {
border-color: var(--primary-color);
background: #eff6ff;
}
.schedule-type-option .schedule-icon {
font-size: 24px;
margin-bottom: 6px;
}
.schedule-type-option .schedule-name {
font-weight: 600;
color: #1e3a8a;
font-size: 14px;
}
/* Agent Selector in Modal - Legacy styles removed, using AgentSelector component */
.agent-checkbox {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.agent-checkbox:hover {
background: #f8fafc;
}
.agent-checkbox input[type="checkbox"] {
width: 16px;
height: 16px;
}
/* Cron Description */
.cron-description {
padding: 8px 12px;
background: #ecfdf5;
border-radius: 6px;
color: #059669;
font-size: 13px;
margin-top: 8px;
}
/* Validation Error */
.validation-error {
padding: 8px 12px;
background: #fee2e2;
border-radius: 6px;
color: var(--danger-color);
font-size: 13px;
margin-top: 8px;
}
/* Code Input */
.code-input {
font-family: 'Courier New', Consolas, monospace;
background: #1e293b;
color: #e2e8f0;
border: none;
}
.code-input::placeholder {
color: #64748b;
}
/* Filter Toolbar (search left, filters right) */
.filter-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-top: 16px;
flex: 1;
}
/* Remove margin-top when inside list-header */
.list-header .filter-toolbar {
margin-top: 0;
margin-left: 24px;
}
.search-section {
position: relative;
display: flex;
align-items: center;
}
.search-section .search-icon {
position: absolute;
left: 12px;
color: var(--text-muted);
font-size: 16px;
z-index: 1;
}
.search-section .search-input {
padding: 8px 40px 8px 40px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
width: 300px;
transition: all 0.3s;
}
.search-section .search-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.search-section .clear-search {
position: absolute;
right: 12px;
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 18px;
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.filter-section {
display: flex;
align-items: center;
gap: 12px;
}
.filter-section .filter-select {
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
background: white;
cursor: pointer;
min-width: 120px;
}
.filter-section .filter-select:focus {
outline: none;
border-color: var(--primary-color);
}
/* ============================================================================
Schedule Task Page Styles
============================================================================ */
/* Page Header */
.schedule-page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.schedule-page-header .header-left {
display: flex;
align-items: center;
gap: 16px;
}
.schedule-page-header h1 {
margin: 0;
font-size: 24px;
color: #1e3a8a;
}
.back-btn {
padding: 8px 16px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: white;
cursor: pointer;
font-size: 14px;
color: var(--text-muted);
transition: all 0.2s;
}
.back-btn:hover {
background: #eff6ff;
color: var(--primary-color);
border-color: var(--primary-color);
}
/* Form Card Container */
.schedule-form-card {
background: white;
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 32px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Form Grid */
.schedule-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.schedule-form-column {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Form Sections */
.form-section {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
}
.section-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #e2e8f0;
}
.section-header .section-icon {
font-size: 20px;
}
.section-header h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #1e3a8a;
}
/* Form Groups */
.form-group {
margin-bottom: 16px;
}
.form-group:last-child {
margin-bottom: 0;
}
.form-group label {
display: block;
font-size: 14px;
font-weight: 500;
color: #334155;
margin-bottom: 6px;
}
.form-group .required {
color: #dc2626;
}
.form-input,
.form-select {
width: 100%;
padding: 10px 14px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
transition: all 0.2s;
background: white;
}
.form-input:focus,
.form-select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-hint {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* Task Type Cards */
.task-type-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
.task-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
background: white;
border: 2px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
}
.task-card:hover {
border-color: #cbd5e1;
background: #f8fafc;
}
.task-card.selected {
border-color: var(--primary-color);
background: #eff6ff;
}
.task-card-icon {
font-size: 28px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border-radius: 10px;
}
.task-card.selected .task-card-icon {
background: #dbeafe;
}
.task-card-content {
flex: 1;
}
.task-card-title {
font-weight: 600;
color: #1e3a8a;
margin-bottom: 2px;
}
.task-card-desc {
font-size: 12px;
color: var(--text-muted);
}
.task-card-check {
width: 24px;
height: 24px;
background: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
}
/* Target Type Toggle */
.target-type-toggle {
display: flex;
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
}
.toggle-btn {
flex: 1;
padding: 10px 16px;
border: none;
background: white;
cursor: pointer;
font-size: 13px;
color: var(--text-muted);
transition: all 0.2s;
}
.toggle-btn:first-child {
border-right: 1px solid #e2e8f0;
}
.toggle-btn:hover {
background: #f8fafc;
}
.toggle-btn.active {
background: var(--primary-color);
color: white;
}
/* Agent List */
.agent-list {
max-height: 200px;
overflow-y: auto;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: white;
}
.agent-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid #f1f5f9;
cursor: pointer;
transition: background 0.2s;
}
.agent-item:last-child {
border-bottom: none;
}
.agent-item:hover {
background: #f8fafc;
}
.agent-item.selected {
background: #eff6ff;
}
.agent-item input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--primary-color);
}
.agent-status {
width: 8px;
height: 8px;
border-radius: 50%;
}
.agent-status.online {
background: var(--success-color);
}
.agent-status.offline {
background: var(--text-muted);
}
.agent-name {
font-weight: 500;
color: #334155;
}
.agent-host {
font-size: 12px;
color: var(--text-muted);
}
.empty-message {
padding: 24px;
text-align: center;
color: var(--text-muted);
font-style: italic;
}
/* Schedule Type Cards */
.schedule-type-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.schedule-card {
padding: 14px 10px;
background: white;
border: 2px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.schedule-card:hover {
border-color: #cbd5e1;
background: #f8fafc;
}
.schedule-card.selected {
border-color: var(--primary-color);
background: #eff6ff;
}
.schedule-card-icon {
font-size: 24px;
margin-bottom: 6px;
}
.schedule-card-name {
font-size: 13px;
font-weight: 600;
color: #1e3a8a;
}
.schedule-options {
margin-top: 16px;
}
/* Cron Guide */
.cron-guide {
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 14px;
margin-bottom: 16px;
}
.cron-guide-title {
font-size: 13px;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 10px;
}
.cron-fields {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
.cron-field {
flex: 1;
text-align: center;
padding: 8px 4px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 6px;
}
.cron-field-label {
font-size: 11px;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 2px;
}
.cron-field-range {
font-size: 10px;
color: var(--text-muted);
}
.cron-special {
font-size: 12px;
color: var(--text-muted);
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.cron-symbol {
font-family: monospace;
font-weight: bold;
color: var(--primary-color);
background: white;
padding: 1px 4px;
border-radius: 3px;
}
.cron-note {
margin-top: 10px;
padding: 8px 12px;
background: #fef3c7;
border: 1px solid #fcd34d;
border-radius: 6px;
font-size: 12px;
color: #92400e;
}
/* Cron Input */
.cron-input {
font-family: 'Consolas', 'Monaco', monospace;
letter-spacing: 2px;
}
.cron-result {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 8px;
color: #059669;
font-size: 13px;
margin-top: 8px;
}
.cron-result-icon {
font-weight: bold;
}
/* Cron Field Hint (weekday explanation) */
.cron-field-hint {
font-size: 9px;
color: #64748b;
margin-top: 4px;
line-height: 1.2;
}
/* Cron Preview Box */
.cron-preview {
padding: 12px 16px;
border-radius: 8px;
margin-top: 12px;
margin-bottom: 12px;
}
.cron-preview.valid {
background: #ecfdf5;
border: 1px solid #a7f3d0;
}
.cron-preview.invalid {
background: #fef2f2;
border: 1px solid #fecaca;
}
.cron-preview-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.cron-preview-icon {
font-size: 16px;
font-weight: bold;
color: #059669;
}
.cron-preview-icon.error {
color: #dc2626;
}
.cron-preview-title {
font-size: 13px;
font-weight: 600;
color: #059669;
}
.cron-preview.invalid .cron-preview-title {
color: #dc2626;
}
.cron-preview-description {
font-size: 14px;
color: #047857;
padding-left: 24px;
}
/* Input Error State */
.input-error {
border-color: #dc2626 !important;
background-color: #fef2f2 !important;
}
.input-error:focus {
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}
/* Cron Examples */
.cron-examples {
margin-top: 12px;
}
.cron-examples-title {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 8px;
}
.cron-example {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 6px;
margin-bottom: 6px;
cursor: pointer;
font-size: 12px;
color: var(--text-muted);
transition: all 0.2s;
}
.cron-example:hover {
border-color: var(--primary-color);
background: #eff6ff;
}
.cron-example code {
font-family: 'Consolas', 'Monaco', monospace;
background: #f1f5f9;
padding: 2px 6px;
border-radius: 4px;
color: #1e3a8a;
}
/* Cron Builder Component */
.cron-builder {
width: 100%;
}
.cron-builder-toggle {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.cron-builder-toggle .toggle-btn {
flex: 1;
padding: 10px 16px;
border: 1px solid var(--border-color);
background: white;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
transition: all 0.2s;
}
.cron-builder-toggle .toggle-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.cron-builder-toggle .toggle-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
/* Visual Cron Builder */
.cron-builder-visual {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 16px;
}
.cron-builder-fields {
display: flex;
gap: 10px;
margin-bottom: 16px;
}
.cron-builder-field {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.cron-builder-field label {
font-size: 11px;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cron-select {
width: 100%;
padding: 10px 8px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: white;
font-size: 13px;
color: var(--text-primary);
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.cron-select:hover {
border-color: var(--primary-color);
}
.cron-select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
/* Cron Expression Display */
.cron-expression-display {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 12px;
}
.cron-expression-label {
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
}
.cron-expression-value {
font-family: 'Consolas', 'Monaco', monospace;
font-size: 15px;
font-weight: 600;
color: #1e3a8a;
background: #eff6ff;
padding: 4px 10px;
border-radius: 6px;
}
/* Cron Preview Error */
.cron-preview-error {
font-size: 13px;
color: #dc2626;
padding-left: 24px;
}
/* Text Builder Container */
.cron-builder-text {
width: 100%;
}
/* Responsive Cron Builder */
@media (max-width: 768px) {
.cron-builder-fields {
flex-wrap: wrap;
}
.cron-builder-field {
flex: 0 0 calc(50% - 5px);
}
.cron-builder-field:last-child {
flex: 0 0 100%;
}
}
/* Validation Error */
.validation-error {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
color: #dc2626;
font-size: 13px;
margin-top: 8px;
}
/* Form Actions */
.schedule-form-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #e2e8f0;
}
/* Responsive */
@media (max-width: 1024px) {
.schedule-form-grid {
grid-template-columns: 1fr;
}
.schedule-type-cards {
grid-template-columns: 1fr;
}
.cron-fields {
flex-wrap: wrap;
}
.cron-field {
flex: 0 0 calc(33.333% - 6px);
}
.filter-toolbar {
flex-direction: column;
align-items: stretch;
}
.search-section .search-input {
width: 100%;
}
.filter-section {
flex-wrap: wrap;
}
}
/* ============================================================================
Scheduled Job Details Page Styles
============================================================================ */
/* Job Details Header */
.job-details-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
padding: 24px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.job-info h1 {
font-size: 24px;
color: #1e3a8a;
margin-bottom: 8px;
}
.job-description {
color: var(--text-muted);
font-size: 14px;
}
.job-actions {
display: flex;
gap: 12px;
}
/* Job Stats Bar */
.job-stats-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.job-stats-bar .stat-item {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
gap: 16px;
}
.job-stats-bar .stat-icon {
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.job-stats-bar .stat-icon.scheduled {
background: #dbeafe;
color: #1e40af;
}
.job-stats-bar .stat-icon.completed {
background: #dcfce7;
color: #166534;
}
.job-stats-bar .stat-icon.failed {
background: #fee2e2;
color: #991b1b;
}
.job-stats-bar .stat-icon.paused {
background: #fef3c7;
color: #92400e;
}
.job-stats-bar .stat-value {
font-size: 24px;
font-weight: 700;
color: #1e3a8a;
}
/* Job Tabs */
.job-tabs {
display: flex;
gap: 8px;
margin-bottom: 24px;
background: white;
padding: 8px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.tab-btn {
padding: 12px 24px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
transition: all 0.2s;
}
.tab-btn:hover {
background: #f8fafc;
}
.tab-btn.active {
background: var(--primary-color);
color: white;
}
/* Tab Content */
.job-tab-content {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
padding: 24px;
}
.tab-panel {
animation: fadeIn 0.3s ease;
}
/* Info Grid */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 24px;
}
.info-section {
padding: 20px;
background: #f8fafc;
border-radius: 8px;
}
.info-section h3 {
font-size: 16px;
color: #1e3a8a;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid #e5e7eb;
}
.info-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 8px 0;
border-bottom: 1px solid #e5e7eb;
}
.info-row:last-child {
border-bottom: none;
}
.info-label {
font-weight: 500;
color: var(--text-muted);
min-width: 150px;
}
.info-value {
text-align: left;
color: var(--text-color);
}
.info-value.code {
font-family: 'Courier New', Consolas, monospace;
font-size: 12px;
background: #1e293b;
color: #e2e8f0;
padding: 2px 6px;
border-radius: 4px;
}
.info-value.overdue {
color: var(--danger-color);
font-weight: 600;
}
/* Code Block */
.code-block {
background: #1e293b;
color: #e2e8f0;
padding: 16px;
border-radius: 8px;
font-family: 'Courier New', Consolas, monospace;
font-size: 13px;
white-space: pre-wrap;
word-break: break-all;
margin-top: 8px;
}
/* Error Block */
.error-block {
background: #fee2e2;
color: #991b1b;
padding: 12px 16px;
border-radius: 8px;
font-size: 13px;
margin-top: 8px;
}
/* No Data */
.no-data {
color: var(--text-muted);
font-style: italic;
padding: 16px;
text-align: center;
}
/* History Table */
.history-table {
width: 100%;
border-collapse: collapse;
}
.history-table th,
.history-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.history-table th {
background: #f1f5f9;
font-weight: 600;
color: #475569;
font-size: 12px;
text-transform: uppercase;
}
.history-table tr:hover {
background: #f8fafc;
}
/* Target List */
.target-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.target-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: white;
border-radius: 8px;
border: 1px solid var(--border-color);
}
.target-icon {
font-size: 20px;
}
.target-name {
flex: 1;
font-weight: 500;
}
.target-status {
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.target-status.online {
background: #dcfce7;
color: #166534;
}
.target-status.offline {
background: #fee2e2;
color: #991b1b;
}
/* Tags */
.tag {
display: inline-block;
padding: 4px 10px;
background: #e5e7eb;
color: #475569;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
margin-right: 6px;
}
/* Responsive Scheduler */
@media (max-width: 1024px) {
.job-stats-bar {
grid-template-columns: repeat(2, 1fr);
}
.info-grid {
grid-template-columns: 1fr;
}
.schedule-type-selector {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.view-toggle-bar {
flex-direction: column;
gap: 16px;
}
.calendar-grid {
gap: 4px;
}
.calendar-day {
min-height: 60px;
padding: 4px;
}
.day-events {
display: none;
}
.job-details-header {
flex-direction: column;
gap: 16px;
}
.job-actions {
width: 100%;
flex-wrap: wrap;
}
.job-stats-bar {
grid-template-columns: 1fr;
}
.job-tabs {
flex-wrap: wrap;
}
.tab-btn {
flex: 1;
min-width: 100px;
text-align: center;
}
.task-type-selector {
grid-template-columns: 1fr;
}
.action-buttons {
flex-direction: column;
}
.scheduler-table {
font-size: 12px;
}
.scheduler-table th,
.scheduler-table td {
padding: 10px 8px;
}
}
/* ============================================================================
Settings Page Styles
============================================================================ */
.settings-page {
padding: 24px;
max-width: 1200px;
margin: 0 auto;
}
.settings-page .page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.settings-page .page-header h1 {
font-size: 24px;
font-weight: 600;
color: var(--text-color);
}
.settings-page .restart-badge {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: #fef3c7;
color: #92400e;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
}
.settings-page .restart-badge .restart-icon {
font-size: 16px;
}
/* Settings Alert */
.settings-alert {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
border-radius: 8px;
margin-bottom: 24px;
font-size: 14px;
}
.settings-alert.info {
background: #dbeafe;
color: #1e40af;
border-left: 4px solid #2563eb;
}
.settings-alert.warning {
background: #fef3c7;
color: #92400e;
border-left: 4px solid #d97706;
}
.settings-alert.success {
background: #dcfce7;
color: #166534;
border-left: 4px solid #16a34a;
}
/* Settings Tabs */
.settings-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
border-bottom: 2px solid var(--border-color);
margin-bottom: 24px;
padding-bottom: 0;
}
.settings-tabs .tab-btn {
padding: 12px 20px;
border: none;
background: none;
color: var(--text-muted);
font-size: 14px;
font-weight: 500;
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
transition: all 0.2s ease;
white-space: nowrap;
}
.settings-tabs .tab-btn:hover {
color: var(--primary-color);
background: rgba(37, 99, 235, 0.05);
}
.settings-tabs .tab-btn.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
font-weight: 600;
}
/* Settings Content */
.settings-content {
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Settings Section */
.settings-section {
padding: 24px;
border-bottom: 1px solid var(--border-color);
}
.settings-section:last-child {
border-bottom: none;
}
.settings-section .section-header {
margin-bottom: 8px;
}
.settings-section .section-header h3 {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
}
.settings-section .section-description {
color: var(--text-muted);
font-size: 13px;
margin-bottom: 20px;
}
/* Form Grid */
.settings-section .form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 16px;
}
.settings-section .form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.settings-section .form-label {
font-size: 13px;
font-weight: 600;
color: #475569;
}
.settings-section .form-input,
.settings-section .form-select {
padding: 10px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: white;
color: var(--text-color);
transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-section .form-input:focus,
.settings-section .form-select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.settings-section .form-input:disabled {
background: #f8fafc;
color: #94a3b8;
cursor: not-allowed;
}
.settings-section .form-hint {
font-size: 12px;
color: var(--text-muted);
}
/* Input with suffix */
.settings-section .input-with-suffix {
display: flex;
align-items: center;
}
.settings-section .input-with-suffix .form-input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
flex: 1;
}
.settings-section .input-with-suffix .input-suffix {
padding: 10px 12px;
background: #f8fafc;
border: 1px solid var(--border-color);
border-left: none;
border-radius: 0 6px 6px 0;
font-size: 13px;
color: var(--text-muted);
}
/* GUID input - fixed width for 36-character GUID format */
.settings-section .guid-input {
width: 320px;
}
/* GUID display - fixed width for displaying GUID passwords */
.guid-display {
display: inline-block;
min-width: 320px;
}
/* Checkbox Group */
.settings-section .checkbox-group {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.settings-section .checkbox-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 14px;
}
.settings-section .checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--primary-color);
}
/* Info Grid */
.settings-section .info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 20px;
}
.settings-section .info-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.settings-section .info-item .info-label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.settings-section .info-item .info-value {
font-size: 14px;
color: var(--text-color);
}
.settings-section .info-item .info-value.path-value {
font-family: 'Courier New', monospace;
font-size: 12px;
background: #f1f5f9;
padding: 6px 10px;
border-radius: 4px;
word-break: break-all;
}
.settings-section .info-item.full-width {
grid-column: 1 / -1;
}
.settings-section .info-item.full-width .info-value.path-value {
min-width: 600px;
white-space: nowrap;
overflow-x: auto;
}
/* Info Box */
.settings-section .info-box {
background: #f8fafc;
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 14px;
margin-top: 16px;
font-size: 13px;
color: #475569;
}
.settings-section .info-box.success {
background: #dcfce7;
border-color: #86efac;
color: #166534;
}
.settings-section .info-box strong {
display: block;
margin-bottom: 8px;
}
.settings-section .info-box .path-display {
font-family: 'Courier New', monospace;
font-size: 12px;
background: #1e293b;
color: #22d3ee;
padding: 8px 12px;
border-radius: 4px;
margin-top: 8px;
word-break: break-all;
}
/* Form Actions */
.settings-section .form-actions {
display: flex;
gap: 12px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
/* Button Group */
.settings-section .button-group {
display: flex;
gap: 12px;
margin-bottom: 16px;
}
/* Buttons */
.settings-section .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.settings-section .btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.settings-section .btn-primary {
background: var(--primary-color);
color: white;
}
.settings-section .btn-primary:hover:not(:disabled) {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.settings-section .btn-secondary {
background: #64748b;
color: white;
}
.settings-section .btn-secondary:hover:not(:disabled) {
background: #475569;
}
/* Push Update Grid Layout */
.push-update-grid {
display: grid;
grid-template-columns: 300px 1fr;
gap: 24px;
align-items: start;
}
.push-update-config {
display: flex;
flex-direction: column;
gap: 16px;
}
.push-update-config .form-actions {
margin-top: 8px;
padding-top: 0;
border-top: none;
}
.push-update-agents {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Agent Server Migration (Settings > Agent > Migration) */
.migration-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.migration-config { display: flex; flex-direction: column; gap: 1rem; }
.migration-agents { display: flex; flex-direction: column; }
.migration-results { margin-top: 1rem; padding: 0.75rem; background: var(--bg-info); border-radius: 4px; }
/* Token Mode radio group (Paste / Mint) */
.radio-group { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.25rem; }
.radio-option { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.radio-option input[type="radio"] { margin: 0; }
/* Migration status badges (color-coded by AgentMigrationStatus enum string) */
.status-badge.status-pending { background: var(--bg-warning); color: var(--text-warning); }
.status-badge.status-connecting { background: var(--bg-info); color: var(--text-info); }
.status-badge.status-promoted { background: var(--bg-success); color: var(--text-success); }
.status-badge.status-failed { background: var(--bg-danger); color: var(--text-danger); }
@media (max-width: 768px) {
.migration-grid { grid-template-columns: 1fr; }
}
/* Toast Notification */
.settings-page .toast {
position: fixed;
top: 20px;
right: 20px;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
z-index: 1000;
animation: slideIn 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.settings-page .toast.toast-success {
background: #dcfce7;
color: #166534;
border-left: 4px solid #16a34a;
}
.settings-page .toast.toast-error {
background: #fee2e2;
color: #991b1b;
border-left: 4px solid #dc2626;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Agent Details Toast */
.agent-toast {
position: fixed;
top: 80px;
right: 20px;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
animation: slideIn 0.3s ease-out;
}
.agent-toast.toast-success {
background: #dcfce7;
color: #166534;
border-left: 4px solid #16a34a;
}
.agent-toast.toast-error {
background: #fee2e2;
color: #991b1b;
border-left: 4px solid #dc2626;
}
.agent-toast.toast-warning {
background: #fef3c7;
color: #92400e;
border-left: 4px solid #f59e0b;
}
.agent-toast .toast-icon {
font-size: 16px;
}
.agent-toast .toast-message {
flex: 1;
}
/* Package Templates Toast */
.package-toast {
position: fixed;
top: 80px;
right: 20px;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
animation: slideIn 0.3s ease-out;
}
.package-toast.toast-success {
background: #dcfce7;
color: #166534;
border-left: 4px solid #16a34a;
}
.package-toast.toast-error {
background: #fee2e2;
color: #991b1b;
border-left: 4px solid #dc2626;
}
.package-toast.toast-warning {
background: #fef3c7;
color: #92400e;
border-left: 4px solid #f59e0b;
}
.package-toast .toast-icon {
font-size: 16px;
}
.package-toast .toast-message {
flex: 1;
}
/* Global Toast (ToastService) */
.global-toast {
position: fixed;
top: 80px;
right: 20px;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 9999;
animation: slideIn 0.3s ease-out;
}
.global-toast.toast-success {
background: #dcfce7;
color: #166534;
border-left: 4px solid #16a34a;
}
.global-toast.toast-error {
background: #fee2e2;
color: #991b1b;
border-left: 4px solid #dc2626;
}
.global-toast.toast-warning {
background: #fef3c7;
color: #92400e;
border-left: 4px solid #f59e0b;
}
.global-toast .toast-icon {
font-size: 16px;
}
.global-toast .toast-message {
flex: 1;
}
/* Loading Container */
.settings-page .loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px;
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.settings-page .loading-spinner {
width: 40px;
height: 40px;
border: 4px solid var(--border-color);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Token Generation Section */
.token-generation-section {
margin-top: 24px;
padding: 20px;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.token-generation-section h4 {
margin: 0 0 16px 0;
font-size: 15px;
font-weight: 600;
color: #1e293b;
}
.token-display {
margin-top: 16px;
padding: 16px;
background: #f0fdf4;
border: 1px solid #86efac;
border-radius: 8px;
}
.token-value {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.token-value code {
flex: 1;
padding: 12px 16px;
background: white;
border: 1px solid #d1fae5;
border-radius: 6px;
font-family: 'Fira Code', 'Consolas', monospace;
font-size: 13px;
color: #166534;
word-break: break-all;
}
.token-warning {
padding: 10px 14px;
background: #fef9c3;
border: 1px solid #fde047;
border-radius: 6px;
font-size: 13px;
color: #854d0e;
}
.existing-tokens-section {
margin-top: 24px;
}
.existing-tokens-section h4 {
margin: 0 0 16px 0;
font-size: 15px;
font-weight: 600;
color: #1e293b;
}
.tokens-table {
overflow-x: auto;
}
.tokens-table table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.tokens-table th,
.tokens-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #e2e8f0;
}
.tokens-table th {
background: #f8fafc;
font-weight: 600;
color: #475569;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tokens-table tbody tr:hover {
background: #f8fafc;
}
.tokens-table tbody tr.expired {
opacity: 0.6;
}
.status-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.status-badge.active {
background: #dcfce7;
color: #166534;
}
.status-badge.expired {
background: #fef2f2;
color: #991b1b;
}
/* Table icon button - compact icon-only button for tables */
.table-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: all 0.2s;
}
.table-icon-btn:hover {
background: #e2e8f0;
border-color: #cbd5e1;
}
.table-icon-btn.primary:hover {
background: #dbeafe;
border-color: #3b82f6;
}
.table-icon-btn.danger {
color: #dc2626;
}
.table-icon-btn.danger:hover {
background: #fee2e2;
border-color: #fecaca;
}
.btn.btn-sm {
padding: 6px 5px !important;
font-size: 12px !important;
}
.btn-danger {
background: #dc2626;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.btn-danger:hover {
background: #b91c1c;
}
/* Form Validation Styles */
.form-input.input-error {
border-color: #dc2626;
background-color: #fef2f2;
}
.form-input.input-error:focus {
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.form-error {
display: block;
color: #dc2626;
font-size: 12px;
margin-top: 4px;
}
/* Scheduled Backup Info */
.scheduled-backup-info {
display: flex;
align-items: center;
gap: 16px;
margin-top: 8px;
flex-wrap: wrap;
}
.scheduled-backup-info .backup-schedule {
font-family: 'Fira Code', 'Consolas', monospace;
font-size: 13px;
padding: 4px 8px;
background: #e2e8f0;
border-radius: 4px;
color: #475569;
}
.scheduled-backup-info .backup-next-run {
font-size: 13px;
color: #64748b;
}
/* Settings Responsive */
@media (max-width: 768px) {
.settings-page {
padding: 16px;
}
.settings-page .page-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.settings-tabs .tab-btn {
padding: 10px 16px;
font-size: 13px;
}
.settings-section {
padding: 20px;
}
.settings-section .form-grid {
grid-template-columns: 1fr;
}
.settings-section .info-grid {
grid-template-columns: 1fr;
}
.settings-section .form-actions {
flex-direction: column;
}
.settings-section .button-group {
flex-direction: column;
}
.settings-page .toast {
left: 20px;
right: 20px;
}
}
/* ============================================================================
Audit Log Page Styles
============================================================================ */
.audit-container {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.audit-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 2px solid #f0f0f0;
flex-wrap: wrap;
gap: 16px;
}
.audit-title {
font-size: 18px;
font-weight: 600;
color: #1e3a8a;
}
.audit-controls {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.date-filter {
display: flex;
align-items: center;
gap: 8px;
}
.filter-date {
padding: 8px 12px;
border: 1px solid #e5e7eb;
border-radius: 6px;
font-size: 13px;
background: white;
}
.filter-date:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.date-separator {
color: #64748b;
font-size: 14px;
}
/* Audit Table */
.audit-list {
overflow-x: auto;
}
.audit-table {
width: 100%;
border-collapse: collapse;
}
.audit-table thead {
background: #f8fafc;
}
.audit-table th {
padding: 14px 16px;
text-align: left;
font-weight: 600;
color: #475569;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid #e5e7eb;
}
.audit-table td {
padding: 12px 16px;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
}
.audit-table tbody tr {
cursor: pointer;
transition: background 0.15s;
}
.audit-table tbody tr:hover {
background: #f8fafc;
}
.audit-table tbody tr.row-failed {
background: #fef2f2;
}
.audit-table tbody tr.row-failed:hover {
background: #fee2e2;
}
.audit-table tbody tr.row-warning {
background: #fffbeb;
}
.audit-table tbody tr.row-warning:hover {
background: #fef3c7;
}
.audit-table tbody tr.row-error {
background: #fef2f2;
}
.audit-table tbody tr.row-error:hover {
background: #fee2e2;
}
/* Column widths */
.audit-table .col-timestamp {
width: 160px;
white-space: nowrap;
}
.audit-table .col-severity {
width: 130px;
}
.audit-table .col-event-type {
width: 150px;
}
.audit-table .col-user {
width: 140px;
}
.audit-table .col-description {
min-width: 200px;
}
.audit-table .col-ip {
width: 130px;
}
.audit-table .col-status {
width: 60px;
text-align: center;
}
/* Timestamp */
.timestamp {
font-family: 'Fira Code', 'Consolas', monospace;
font-size: 12px;
color: #475569;
}
/* Severity Badge */
.severity-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
}
.severity-badge.debug {
background: #f1f5f9;
color: #64748b;
}
.severity-badge.info {
background: #dbeafe;
color: #1e40af;
}
.severity-badge.warning {
background: #fef3c7;
color: #92400e;
}
.severity-badge.error {
background: #fee2e2;
color: #991b1b;
}
.severity-badge.critical {
background: #7c2d12;
color: white;
}
/* Event Type Badge */
.event-type-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
}
.event-type-badge.auth {
background: #ecfdf5;
color: #047857;
}
.event-type-badge.user {
background: #dbeafe;
color: #1e40af;
}
.event-type-badge.agent {
background: #f3e8ff;
color: #7c3aed;
}
.event-type-badge.deployment {
background: #fef3c7;
color: #92400e;
}
.event-type-badge.command {
background: #e0e7ff;
color: #4338ca;
}
.event-type-badge.scheduler {
background: #fce7f3;
color: #be185d;
}
.event-type-badge.settings {
background: #f1f5f9;
color: #475569;
}
.event-type-badge.system {
background: #d1fae5;
color: #065f46;
}
.event-type-badge.security {
background: #fef3c7;
color: #b45309;
}
.event-type-badge.default {
background: #f1f5f9;
color: #64748b;
}
/* User Badge */
.user-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: #374151;
}
.user-badge.agent {
color: #7c3aed;
}
.user-badge.system {
color: #64748b;
font-style: italic;
}
/* Description */
.description-text {
font-size: 13px;
color: #4b5563;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* IP Address */
.ip-address {
font-family: 'Fira Code', 'Consolas', monospace;
font-size: 12px;
color: #64748b;
}
.ip-address.na {
color: #9ca3af;
}
/* Status Icon */
.status-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.status-icon.success {
color: #16a34a;
}
.status-icon.failed {
color: #dc2626;
}
/* Event Details Row */
.event-details-row {
background: #f8fafc !important;
}
.event-details-row:hover {
background: #f8fafc !important;
}
.event-details {
padding: 16px 8px;
}
.details-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 12px;
margin-bottom: 16px;
}
.detail-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.detail-item.full-width {
grid-column: 1 / -1;
}
.detail-label {
font-size: 11px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.detail-value {
font-size: 13px;
color: #1f2937;
word-break: break-all;
}
.detail-value.error {
color: #dc2626;
background: #fef2f2;
padding: 8px;
border-radius: 4px;
font-family: 'Fira Code', 'Consolas', monospace;
font-size: 12px;
}
.detail-description {
border-top: 1px solid #e5e7eb;
padding-top: 12px;
}
.detail-description p {
margin-top: 4px;
line-height: 1.6;
}
/* Audit Stats Bar Enhancements */
.stat-item.stat-item-info .stat-icon {
background: #dbeafe;
color: #1e40af;
}
.stat-item.stat-item-success .stat-icon {
background: #dcfce7;
color: #166534;
}
.stat-item.stat-item-warning .stat-icon {
background: #fef3c7;
color: #92400e;
}
.stat-item.stat-item-maintenance .stat-icon {
background: #fef3c7;
color: #92400e;
border: 2px dashed #d97706;
}
.stat-item.stat-item-maintenance.selected {
border-color: #d97706;
background: rgba(251, 191, 36, 0.1);
}
.stat-item.stat-item-error .stat-icon {
background: #fee2e2;
color: #991b1b;
}
/* Audit Page Responsive */
@media (max-width: 1024px) {
.audit-header {
flex-direction: column;
align-items: flex-start;
}
.audit-controls {
width: 100%;
}
.date-filter {
width: 100%;
}
.filter-date {
flex: 1;
}
}
@media (max-width: 768px) {
.audit-table .col-ip,
.audit-table .col-description {
display: none;
}
.audit-table th,
.audit-table td {
padding: 10px 8px;
}
.details-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.audit-table .col-user {
display: none;
}
.severity-badge,
.event-type-badge {
padding: 3px 6px;
font-size: 10px;
}
}
/* Search Help Popup */
.search-bar-wrapper {
position: relative;
}
.search-with-help {
display: flex;
align-items: center;
gap: 8px;
}
.search-buttons {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 4px;
align-items: center;
}
.search-clear-btn,
.search-help-btn {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #94a3b8;
background: #f8fafc;
color: #64748b;
font-size: 12px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.search-clear-btn:hover {
background: #dc2626;
border-color: #dc2626;
color: white;
}
.search-clear-btn.hidden {
visibility: hidden;
pointer-events: none;
}
.search-help-btn:hover {
background: #2563eb;
border-color: #2563eb;
color: white;
}
.search-help-popup {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 380px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border: 1px solid #e5e7eb;
z-index: 100;
overflow: hidden;
}
.search-help-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
font-weight: 600;
color: #1e3a8a;
}
.search-help-close {
width: 24px;
height: 24px;
border: none;
background: transparent;
color: #64748b;
cursor: pointer;
font-size: 16px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.search-help-close:hover {
background: #e5e7eb;
color: #1f2937;
}
.search-help-content {
padding: 16px;
}
.search-help-section {
margin-bottom: 16px;
}
.search-help-section:last-child {
margin-bottom: 0;
}
.search-help-title {
font-weight: 600;
font-size: 12px;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.search-help-content code {
background: #e2e8f0;
color: #1e40af;
padding: 2px 6px;
border-radius: 4px;
font-family: 'Fira Code', 'Consolas', monospace;
font-size: 12px;
}
.search-help-note {
font-size: 12px;
color: #64748b;
background: #f1f5f9;
padding: 10px 12px;
border-radius: 6px;
border-left: 3px solid #2563eb;
}
/* ============================================================================
Collections Page Styles
============================================================================ */
/* Collection Type Badges */
.collection-type-badge {
width: 28px;
height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
.collection-type-badge.large {
width: 48px;
height: 48px;
font-size: 20px;
border-radius: 10px;
}
.collection-type-badge.dynamic {
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
color: #1d4ed8;
}
.collection-type-badge.static {
background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
color: #374151;
}
.collection-type-badge.compliance {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
color: #b45309;
}
/* Compliant companion (green) — overrides the amber .compliance look for the known-good companion. */
.collection-type-badge.compliance.compliance-compliant {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
color: #15803d;
}
/* Type Labels */
.type-label {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.type-label.dynamic {
background: #dbeafe;
color: #1d4ed8;
}
.type-label.static {
background: #e5e7eb;
color: #374151;
}
.type-label.compliance {
background: #fef3c7;
color: #b45309;
}
/* Collection Name Cell */
.collection-name-cell {
display: flex;
align-items: center;
gap: 10px;
}
.collection-name {
font-weight: 500;
color: #1f2937;
}
/* Type Selector */
.type-selector {
display: flex;
gap: 16px;
}
.type-option {
flex: 1;
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px;
background: #f8fafc;
border: 2px solid #e5e7eb;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
}
.type-option:hover {
background: #f1f5f9;
border-color: #cbd5e1;
}
.type-option.selected {
background: #eff6ff;
border-color: #2563eb;
}
.type-option .type-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 18px;
flex-shrink: 0;
}
.type-option .type-icon.dynamic {
background: #dbeafe;
color: #1d4ed8;
}
.type-option .type-icon.static {
background: #e5e7eb;
color: #374151;
}
.type-option .type-content {
flex: 1;
}
.type-option .type-title {
font-weight: 600;
color: #1f2937;
margin-bottom: 4px;
}
.type-option .type-description {
font-size: 13px;
color: #64748b;
white-space: nowrap;
}
.type-option .type-radio {
padding-top: 2px;
}
/* Filter Logic Selector */
.filter-logic-selector {
display: flex;
gap: 12px;
}
.logic-option {
flex: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
padding: 14px;
background: #f8fafc;
border: 2px solid #e5e7eb;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
gap: 4px;
}
.logic-option:hover {
background: #f1f5f9;
}
.logic-option.selected {
background: #eff6ff;
border-color: #2563eb;
}
.logic-option input {
margin-right: 4px;
flex-shrink: 0;
}
.logic-option .logic-label {
font-weight: 600;
color: #1f2937;
}
.logic-option .logic-hint {
font-size: 12px;
color: #64748b;
flex-basis: 100%;
width: 100%;
margin-top: 4px;
padding-left: 20px;
display: block;
}
/* Filters Header */
.filters-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.filter-actions {
display: flex;
gap: 8px;
}
.filter-actions .btn {
background: #3b82f6;
color: white;
border: none;
padding: 8px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.filter-actions .btn:hover {
background: #2563eb;
transform: translateY(-1px);
}
/* Filter List */
.filter-list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Filter Card */
.filter-card {
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
}
.filter-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: #f1f5f9;
border-bottom: 1px solid #e5e7eb;
}
.filter-number {
font-weight: 600;
color: #475569;
font-size: 13px;
}
.filter-body {
display: grid;
grid-template-columns: 1fr 180px 1fr;
gap: 12px;
padding: 14px;
}
.filter-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.filter-label {
font-size: 12px;
font-weight: 600;
color: #475569;
}
.filter-select,
.filter-input {
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
background: white;
}
.filter-select:focus,
.filter-input:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.field-hint {
font-size: 11px;
color: #64748b;
line-height: 1.3;
}
.field-example {
font-size: 11px;
color: #10b981;
font-style: italic;
}
/* Empty Filters */
.empty-filters {
text-align: center;
padding: 40px 20px;
background: #f8fafc;
border: 2px dashed #e5e7eb;
border-radius: 10px;
}
.empty-filters .empty-icon {
font-size: 48px;
margin-bottom: 12px;
opacity: 0.6;
}
.empty-filters p {
color: #64748b;
margin: 0;
}
.empty-filters .empty-hint {
font-size: 13px;
margin-top: 6px;
}
/* Agent Selection */
.agent-selection {
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
}
.selection-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #f1f5f9;
border-bottom: 1px solid #e5e7eb;
}
.selection-actions {
display: flex;
gap: 8px;
}
.agent-list-selection {
max-height: 350px;
overflow-y: auto;
padding: 12px;
}
.agent-checkbox {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.2s;
background: white;
}
.agent-checkbox:hover {
background: #f1f5f9;
border-color: #cbd5e1;
}
.agent-checkbox.selected {
background: #eff6ff;
border-color: #2563eb;
}
.agent-checkbox input {
margin: 0;
}
.agent-checkbox .agent-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.agent-checkbox .agent-name {
font-weight: 500;
color: #1f2937;
}
.agent-checkbox .agent-details {
font-size: 12px;
color: #64748b;
}
/* Field Browser Modal */
.field-browser-modal {
width: 700px;
max-width: 90vw;
max-height: 85vh;
}
.field-browser-modal .modal-body {
max-height: 600px;
overflow-y: auto;
}
.field-browser-search {
margin-bottom: 16px;
}
.field-browser-search .search-input {
width: 100%;
padding: 12px 14px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
}
.field-browser-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.field-category {
background: #f8fafc;
border-radius: 10px;
padding: 16px;
}
.category-title {
font-size: 14px;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e5e7eb;
}
.field-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 12px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.2s;
}
.field-item:hover {
background: #eff6ff;
border-color: #2563eb;
}
.field-item:last-child {
margin-bottom: 0;
}
.field-info {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.field-info .field-name {
font-weight: 600;
color: #1f2937;
}
.field-info .field-path {
font-size: 12px;
color: #2563eb;
font-family: 'Fira Code', 'Consolas', monospace;
}
.field-info .field-description {
font-size: 13px;
color: #64748b;
}
.field-info .field-example {
font-size: 12px;
color: #10b981;
font-style: italic;
}
.field-type-badge {
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
flex-shrink: 0;
margin-left: 12px;
}
.field-type-badge.badge-string {
background: #e5e7eb;
color: #374151;
}
.field-type-badge.badge-number {
background: #fef3c7;
color: #92400e;
}
.field-type-badge.badge-datetime {
background: #dbeafe;
color: #1d4ed8;
}
.field-type-badge.badge-boolean {
background: #dcfce7;
color: #166534;
}
/* Network Interface Badges */
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.badge-dhcp {
background: #dbeafe;
color: #1d4ed8;
}
.badge-static {
background: #fef3c7;
color: #92400e;
}
/* Physical Disk badges */
.badge-ssd {
background: #dbeafe;
color: #1d4ed8;
}
.badge-hdd {
background: #e5e7eb;
color: #374151;
}
.badge-healthy {
background: #dcfce7;
color: #166534;
}
.badge-warning {
background: #fef3c7;
color: #92400e;
}
.badge-unhealthy {
background: #fee2e2;
color: #991b1b;
}
.badge-unknown {
background: #f3f4f6;
color: #6b7280;
}
/* Collection Details Page */
.details-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.details-title-section {
display: flex;
align-items: center;
gap: 16px;
}
.details-title-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.details-title {
font-size: 28px;
font-weight: 600;
color: #1f2937;
margin: 0;
}
.details-subtitle {
font-size: 14px;
color: #64748b;
}
.details-actions {
display: flex;
gap: 10px;
}
/* Info Grid */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.info-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.info-label {
font-size: 12px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-value {
font-size: 15px;
color: #1f2937;
}
.info-value.highlight {
font-weight: 600;
color: #2563eb;
}
.info-section {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #e5e7eb;
}
.description-text {
color: #475569;
line-height: 1.6;
}
/* Filter Summary */
.filter-summary {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.filter-logic-badge {
padding: 6px 12px;
background: #dbeafe;
color: #1d4ed8;
border-radius: 6px;
font-weight: 600;
font-size: 13px;
}
.filter-count {
color: #64748b;
font-size: 14px;
}
/* Filter Display Cards */
.filters-display {
display: flex;
flex-direction: column;
gap: 10px;
}
.filter-display-card {
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
}
.filter-display-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: #f1f5f9;
border-bottom: 1px solid #e5e7eb;
}
.filter-display-body {
padding: 14px;
}
.filter-expression {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.filter-expression .field-name {
font-weight: 600;
color: #1e3a8a;
background: #dbeafe;
padding: 4px 10px;
border-radius: 4px;
}
.filter-expression .operator {
font-weight: 600;
color: #ca8a04;
}
.filter-expression .value {
font-family: 'Fira Code', 'Consolas', monospace;
color: #059669;
background: #dcfce7;
padding: 4px 10px;
border-radius: 4px;
}
.filter-display-body .field-description {
font-size: 12px;
color: #64748b;
}
/* Auto-update Badge */
.auto-update-badge {
padding: 4px 10px;
background: #dcfce7;
color: #166534;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
/* Info Banner */
.info-banner {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 10px;
margin-bottom: 24px;
}
.info-banner .info-hint {
margin-left: auto;
font-size: 13px;
color: #64748b;
}
/* Form Enhancements */
.form-container {
max-width: 800px;
}
.form-section {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #e5e7eb;
}
.section-title {
font-size: 18px;
font-weight: 600;
color: #1f2937;
margin-bottom: 20px;
}
.form-label.required::after {
content: " *";
color: #dc2626;
}
.form-input,
.form-textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus,
.form-textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-input.input-error {
border-color: #dc2626;
}
.form-error {
display: block;
font-size: 13px;
color: #dc2626;
margin-top: 6px;
}
.form-hint {
font-size: 13px;
color: #64748b;
margin-top: 6px;
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #e5e7eb;
}
/* Validation and Success Messages */
.validation-error {
padding: 14px 18px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
color: #991b1b;
margin-bottom: 20px;
}
.success-message {
padding: 14px 18px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 8px;
color: #166534;
margin-bottom: 20px;
}
/* Loading Inline */
.loading-inline {
display: flex;
align-items: center;
gap: 12px;
padding: 20px;
color: #64748b;
}
.loading-spinner-small {
width: 24px;
height: 24px;
border: 3px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Button Loading */
.btn-loading {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
display: inline-block;
margin-right: 8px;
}
/* Small Empty State */
.empty-state.small {
padding: 30px 20px;
}
.empty-state.small .empty-icon {
font-size: 36px;
}
/* Member Count */
.member-count {
font-weight: 600;
color: #2563eb;
}
/* ============================================================================
Danger Action Buttons (Agent Revoke)
============================================================================ */
.action-btn-danger,
.list-action-btn-danger {
color: var(--danger-color);
border-color: var(--danger-color);
}
.action-btn-danger:hover,
.list-action-btn-danger:hover {
background: var(--danger-color) !important;
color: white !important;
border-color: var(--danger-color) !important;
}
/* Warning Action Buttons (Maintenance Mode) */
.action-btn-warning,
.list-action-btn-warning {
color: var(--warning-color);
border-color: var(--warning-color);
}
.action-btn-warning:hover,
.list-action-btn-warning:hover {
background: var(--warning-color) !important;
color: white !important;
border-color: var(--warning-color) !important;
}
/* Status Badges Container */
.status-badges {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
/* Warning Box Variants */
.warning-box-info {
background: #dbeafe !important;
border-color: #2563eb !important;
}
.warning-box-info strong {
color: #1e40af !important;
}
/* ============================================================================
Modal Overlay Fix - Ensure modal is above all content
============================================================================ */
.modal-overlay {
z-index: 9999 !important;
background: rgba(0, 0, 0, 0.6) !important;
}
.modal-overlay > .modal {
z-index: 10000 !important;
}
/* ============================================================================
Users Page Styles
============================================================================ */
/* Users Container */
.users-container {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.users-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 15px;
}
.users-title {
font-size: 20px;
font-weight: 600;
color: var(--text-color);
}
.users-controls {
display: flex;
gap: 15px;
align-items: center;
}
/* Users List */
.users-list {
margin-top: 20px;
overflow-x: auto;
}
.users-table {
width: 100%;
border-collapse: collapse;
}
.users-table th,
.users-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
.users-table th {
background: var(--bg-secondary);
font-weight: 600;
font-size: 13px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.users-table tbody tr {
cursor: default;
transition: background 0.2s;
}
.users-table tbody tr:hover {
background: var(--bg-hover);
}
.users-table tbody tr.disabled-row {
background: #fef2f2;
opacity: 0.8;
}
.users-table tbody tr.disabled-row:hover {
background: #fee2e2;
}
/* User Info Cell */
.user-info {
display: flex;
align-items: center;
gap: 12px;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), #4f46e5);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
}
.username {
font-weight: 500;
color: var(--text-color);
}
/* Role Badges */
.role-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
.role-badge.role-admin {
background: #fef3c7;
color: #92400e;
}
.role-badge.role-operator {
background: #dbeafe;
color: #1e40af;
}
.role-badge.role-helpdesk {
background: #e0e7ff;
color: #3730a3;
}
.role-badge.role-user {
background: #f3f4f6;
color: #4b5563;
}
/* Status Badges */
.status-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
.status-badge.active {
background: #d1fae5;
color: #065f46;
}
.status-badge.disabled {
background: #fee2e2;
color: #991b1b;
}
/* Form styles */
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: var(--text-color);
font-size: 14px;
}
.form-control {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
transition: all 0.2s;
box-sizing: border-box;
}
.form-control:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-control.readonly {
background: var(--bg-secondary);
color: var(--text-muted);
cursor: not-allowed;
}
.form-control.input-error {
border-color: var(--danger-color);
}
.error-text {
color: var(--danger-color);
font-size: 12px;
margin-top: 4px;
display: block;
}
.hint-text {
color: var(--text-muted);
font-size: 12px;
margin-top: 4px;
display: block;
}
/* Toggle Switch */
.toggle-group {
display: flex;
align-items: center;
gap: 12px;
}
.toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.toggle input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.3s;
border-radius: 24px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
.toggle input:checked + .toggle-slider {
background-color: var(--primary-color);
}
.toggle input:checked + .toggle-slider:before {
transform: translateX(20px);
}
.toggle input:disabled + .toggle-slider {
opacity: 0.5;
cursor: not-allowed;
}
/* Warning Box */
.warning-box {
display: flex;
gap: 12px;
align-items: flex-start;
background: #fef3c7;
border: 1px solid #f59e0b;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 16px;
color: #92400e;
font-size: 14px;
}
.warning-box .warning-icon {
flex-shrink: 0;
font-size: 18px;
margin-top: -3px;
}
.warning-box ul {
padding-left: 20px;
margin: 8px 0 0 3px;
}
/* Error Message */
.error-message {
background: #fee2e2;
border: 1px solid #ef4444;
border-radius: 8px;
padding: 12px 16px;
margin-top: 16px;
color: #991b1b;
font-size: 14px;
}
/* Spinner */
.spinner-small {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-right: 8px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ============================================================================
Virtualized Command Output Styles
============================================================================ */
/* Base output container */
.output-container {
background: #1e1e1e;
color: #d4d4d4;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 13px;
border-radius: 4px;
padding: 12px;
margin: 0;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
.output-container.error {
background: #2d1f1f;
color: #f87171;
}
/* Virtualized output container */
.output-container.virtualized {
height: 400px;
overflow-y: auto;
padding: 0;
}
.output-line {
height: 20px;
line-height: 20px;
padding: 0 12px;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
}
.output-line:hover {
background: rgba(255, 255, 255, 0.05);
}
/* Error output lines */
.output-container.error .output-line {
color: #f87171;
}
.output-container.error .output-line:hover {
background: rgba(248, 113, 113, 0.1);
}
/* Line count badge */
.line-count {
font-size: 12px;
color: #888;
margin-left: 8px;
}
/* Output header with copy button */
.output-header {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.output-title {
font-weight: 500;
color: #374151;
font-size: 14px;
}
.output-title.error {
color: #dc2626;
}
/* Output actions container */
.output-actions {
display: flex;
gap: 4px;
margin-left: auto;
}
.output-btn {
background: transparent;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 4px 6px;
cursor: pointer;
color: #57606a;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
}
.output-btn:hover {
background: #eaeef2;
border-color: #c1c6cc;
}
.output-btn svg {
display: block;
}
/* Line numbers in output */
.output-container.with-line-numbers {
overflow-x: auto;
}
.output-container.with-line-numbers .output-line {
display: flex;
padding: 0;
min-width: 0;
}
.line-number {
flex-shrink: 0;
width: 50px;
padding: 0 12px;
text-align: right;
color: #6b7280;
background: rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(255, 255, 255, 0.1);
user-select: none;
}
.line-content {
flex: 1;
min-width: 0;
padding: 0 12px;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
}
.output-container.error .line-number {
background: rgba(0, 0, 0, 0.15);
color: #f87171;
}
/* ============================================================================
GitHub-style Code Block
============================================================================ */
.code-block {
border: 1px solid #d1d5db;
border-radius: 8px;
overflow: hidden;
background: #f6f8fa;
margin-bottom: 20px;
max-width: 100%;
}
.code-block-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 16px;
background: #f6f8fa;
border-bottom: 1px solid #d1d5db;
}
.code-language {
font-size: 12px;
font-weight: 600;
color: #57606a;
text-transform: lowercase;
}
.copy-btn-inline {
background: transparent;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 4px 8px;
cursor: pointer;
font-size: 14px;
color: #57606a;
transition: all 0.15s;
}
.copy-btn-inline:hover {
background: #eaeef2;
border-color: #afb8c1;
}
.code-block-content {
margin: 0;
padding: 16px;
background: #161b22;
color: #e6edf3;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 13px;
line-height: 1.5;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
/* ============================================================================
Split Panel Execution Results
============================================================================ */
/* Command Details Page */
.details-card {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
padding: 24px;
margin-bottom: 24px;
overflow: hidden;
max-width: 100%;
}
.command-details-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.command-details-header h1 {
margin: 0;
font-size: 24px;
color: #1a1a2e;
}
.details-section {
margin-bottom: 20px;
}
.details-section h3 {
margin: 0 0 12px 0;
font-size: 16px;
color: #374151;
}
.details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.detail-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.detail-label {
font-size: 12px;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.detail-value {
font-size: 14px;
color: #1f2937;
font-weight: 500;
}
.results-panel {
display: flex;
flex-direction: column;
min-height: 500px;
overflow: hidden;
}
.results-summary {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
padding: 12px 16px;
background: var(--bg-secondary);
border-radius: 8px;
}
.results-summary .stats-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.results-summary .stat {
font-size: 14px;
font-weight: 500;
}
.results-summary .stat.total { color: var(--text-color); }
.results-summary .stat.completed { color: #059669; }
.results-summary .stat.failed { color: #dc2626; }
.results-summary .stat.running { color: #2563eb; }
.results-summary .stat.skipped { color: #d97706; }
.results-summary .stat-separator {
color: var(--border-color);
font-weight: 300;
}
.results-controls {
display: flex;
gap: 8px;
align-items: center;
}
.results-controls .filter-select,
.results-controls .search-input {
padding: 6px 10px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 13px;
background: white;
height: 32px;
box-sizing: border-box;
}
.results-controls .filter-select {
cursor: pointer;
min-width: 100px;
}
.results-controls .search-input {
width: 160px;
}
.results-controls .filter-select:focus,
.results-controls .search-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.results-controls .search-input::placeholder {
color: var(--text-muted);
}
/* Split Panel Layout */
.results-split-panel {
display: flex;
gap: 0;
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
flex: 1;
min-height: 450px;
min-width: 0;
max-width: 100%;
}
/* Left Panel - Agent List */
.results-agent-list {
width: 280px;
flex-shrink: 0;
border-right: 1px solid #e2e8f0;
overflow-y: auto;
background: #fafafa;
}
.agent-list-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
transition: background 0.15s;
}
.agent-list-item:hover {
background: #f0f0f0;
}
.agent-list-item.selected {
background: #eff6ff;
border-left: 3px solid #2563eb;
padding-left: 13px;
}
.agent-list-item .status-icon {
font-size: 16px;
width: 20px;
text-align: center;
flex-shrink: 0;
}
.agent-list-item .status-icon.streaming {
animation: spin 1s linear infinite;
}
.agent-list-item .agent-name {
flex: 1;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.agent-list-item .exit-code-badge {
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 4px;
background: #f1f5f9;
flex-shrink: 0;
}
.agent-list-item .exit-code-badge.success { color: #059669; }
.agent-list-item .exit-code-badge.error { color: #dc2626; background: #fef2f2; }
/* Skipped agent styling (maintenance mode) */
.agent-list-item.skipped {
background: #fffbeb;
border-left: 3px solid #d97706;
padding-left: 13px;
}
.agent-list-item.skipped .status-icon {
color: #d97706;
}
.agent-list-item.skipped.selected {
background: #fef3c7;
}
.agent-list-item .chunk-badge {
font-size: 11px;
font-weight: 500;
padding: 2px 6px;
border-radius: 4px;
background: #dbeafe;
color: #1e40af;
flex-shrink: 0;
}
/* Right Panel - Output */
.results-output-panel {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: white;
min-width: 0;
max-width: 100%;
}
.selected-agent-header {
padding: 16px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
flex-shrink: 0;
}
.selected-agent-header h4 {
margin: 0 0 8px 0;
font-size: 16px;
font-weight: 600;
}
.selected-agent-meta {
display: flex;
gap: 16px;
font-size: 13px;
flex-wrap: wrap;
}
.selected-agent-meta .exit-code {
padding: 2px 8px;
border-radius: 4px;
font-weight: 500;
}
.selected-agent-meta .exit-code.success {
background: #dcfce7;
color: #166534;
}
.selected-agent-meta .exit-code.error {
background: #fef2f2;
color: #dc2626;
}
.selected-agent-meta .duration {
color: #64748b;
}
.selected-agent-output {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 16px;
min-width: 0;
}
.selected-agent-output .output-section {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
margin-bottom: 16px;
min-width: 0;
}
.selected-agent-output .output-section:last-child {
margin-bottom: 0;
}
.selected-agent-output .output-container.virtualized {
flex: 1;
height: auto;
min-height: 150px;
max-height: 350px;
}
/* Maintenance Info Card (for skipped agents) */
.maintenance-info-card {
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border: 2px dashed #d97706;
border-radius: 12px;
padding: 24px;
margin: 16px 0;
}
.maintenance-info-card .maintenance-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid #fcd34d;
}
.maintenance-info-card .maintenance-icon {
font-size: 32px;
}
.maintenance-info-card .maintenance-title {
font-size: 18px;
font-weight: 600;
color: #92400e;
}
.maintenance-info-card .maintenance-details {
display: flex;
flex-direction: column;
gap: 12px;
}
.maintenance-info-card .maintenance-detail-row {
display: flex;
gap: 8px;
font-size: 14px;
}
.maintenance-info-card .maintenance-detail-row .detail-label {
font-weight: 600;
color: #92400e;
min-width: 100px;
}
.maintenance-info-card .maintenance-detail-row .detail-value {
color: #78350f;
}
.maintenance-info-card .maintenance-footer {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #fcd34d;
}
.maintenance-info-card .maintenance-footer p {
font-size: 13px;
color: #92400e;
font-style: italic;
margin: 0;
}
.no-selection {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #64748b;
font-style: italic;
}
.no-output {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
color: #64748b;
gap: 12px;
}
.no-output.streaming {
background: #f8fafc;
border-radius: 8px;
}
/* Responsive */
@media (max-width: 900px) {
.results-split-panel {
flex-direction: column;
min-height: 600px;
}
.results-agent-list {
width: 100%;
max-height: 200px;
border-right: none;
border-bottom: 1px solid #e2e8f0;
}
.results-controls {
flex-direction: column;
align-items: stretch;
}
.results-controls .search-box input {
width: 100%;
}
.results-header {
flex-direction: column;
align-items: stretch;
}
}
/* ========================================
Agent Updates Sub-tabs
======================================== */
.settings-sub-tabs {
margin-bottom: 24px;
}
/* Styled File Upload */
.file-upload-container {
position: relative;
display: inline-block;
width: 100%;
}
.file-upload-label {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #f7fafc;
border: 2px dashed #cbd5e0;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.file-upload-label:hover {
background: #edf2f7;
border-color: var(--primary-color);
}
.file-upload-label.has-file {
background: #ebf8ff;
border-color: var(--primary-color);
border-style: solid;
}
.file-upload-icon {
font-size: 24px;
color: var(--primary-color);
}
.file-upload-text {
flex: 1;
}
.file-upload-text .primary {
font-weight: 500;
color: var(--text-primary);
}
.file-upload-text .secondary {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.file-upload-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.file-info {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 8px 12px;
background: #f0fff4;
border-radius: 6px;
color: #276749;
font-size: 13px;
}
.file-info-icon {
font-size: 16px;
}
.file-info-name {
font-weight: 500;
}
.file-info-size {
color: #48bb78;
}
.agent-selection-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 8px;
max-height: 200px;
overflow-y: auto;
padding: 12px;
background: #f7fafc;
border-radius: 6px;
border: 1px solid #e2e8f0;
}
.agent-checkbox {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
background: white;
border-radius: 4px;
border: 1px solid #e2e8f0;
}
.agent-checkbox:hover {
border-color: #cbd5e0;
}
.status-badge.active {
background: #48bb78;
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
}
.status-badge.pending {
background: #ecc94b;
color: #744210;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
}
.status-badge.info {
background: #4299e1;
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
}
.status-badge.success {
background: #48bb78;
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
}
.status-badge.danger {
background: #e53e3e;
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
}
.status-badge.warning {
background: #ed8936;
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
}
/* Agent Update Progress Display */
.update-progress-container {
display: flex;
align-items: center;
gap: 8px;
}
.update-progress-bar {
flex: 1;
height: 4px;
background: #e2e8f0;
border-radius: 2px;
overflow: hidden;
}
.update-progress-fill {
height: 100%;
background: #4299e1;
transition: width 0.3s ease;
}
.update-progress-fill.completed {
background: #48bb78;
}
.update-progress-fill.failed {
background: #e53e3e;
}
.update-phase-badge {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.update-phase-badge.downloading {
background: #bee3f8;
color: #2b6cb0;
}
.update-phase-badge.installing {
background: #c6f6d5;
color: #276749;
}
.update-phase-badge.completed {
background: #48bb78;
color: white;
}
.update-phase-badge.failed {
background: #fed7d7;
color: #c53030;
}
/* Update Progress Banner for Agent Details */
.update-progress-banner {
margin-top: 16px;
padding: 16px;
border-radius: 8px;
background: #ebf8ff;
border: 1px solid #90cdf4;
}
.update-progress-banner.banner-info {
background: #ebf8ff;
border-color: #90cdf4;
}
.update-progress-banner.banner-success {
background: #f0fff4;
border-color: #9ae6b4;
}
.update-progress-banner.banner-error {
background: #fff5f5;
border-color: #fc8181;
}
.update-progress-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.update-icon {
font-size: 20px;
animation: spin 2s linear infinite;
}
.banner-success .update-icon {
animation: none;
}
.banner-error .update-icon {
animation: none;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.update-title {
font-weight: 600;
color: #2b6cb0;
}
.banner-success .update-title {
color: #276749;
}
.banner-error .update-title {
color: #c53030;
}
.update-progress-bar-container {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.update-percent {
font-size: 14px;
font-weight: 500;
color: #4a5568;
min-width: 40px;
}
.update-status-message {
font-size: 13px;
color: #4a5568;
}
.update-error-message {
margin-top: 8px;
padding: 8px 12px;
background: #fed7d7;
color: #c53030;
border-radius: 4px;
font-size: 13px;
}
/* ============================================================================
Deployment Wizard Styles
============================================================================ */
.wizard-page-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 20px 30px;
background: white;
border-bottom: 1px solid var(--border-color);
}
.wizard-page-header .header-left {
display: flex;
flex-direction: column;
gap: 8px;
}
.wizard-page-header .header-left h1 {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
font-size: 24px;
}
.wizard-page-header .page-subtitle {
color: var(--text-muted);
margin: 0;
font-size: 14px;
}
/* Wizard Progress Bar */
.wizard-progress {
display: flex;
align-items: center;
justify-content: center;
padding: 30px 40px;
background: white;
border-bottom: 1px solid var(--border-color);
gap: 0;
}
.wizard-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 100px;
}
.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e5e7eb;
color: #9ca3af;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
}
.wizard-step.active .step-number {
background: var(--primary-color);
color: white;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.wizard-step.completed .step-number {
background: var(--success-color);
color: white;
}
.step-label {
font-size: 13px;
color: #9ca3af;
font-weight: 500;
text-align: center;
}
.wizard-step.active .step-label {
color: var(--primary-color);
font-weight: 600;
}
.wizard-step.completed .step-label {
color: var(--success-color);
}
.step-connector {
height: 3px;
width: 60px;
background: #e5e7eb;
margin: 0 8px;
margin-bottom: 28px;
border-radius: 2px;
transition: background 0.3s ease;
}
.step-connector.completed {
background: var(--success-color);
}
/* Wizard Content */
.wizard-content {
padding: 30px 40px;
padding-bottom: 100px; /* Space for sticky footer */
background: #f9fafb;
}
.wizard-step-content {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
padding: 30px;
}
.step-header {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.step-header h2 {
display: flex;
align-items: center;
gap: 12px;
font-size: 20px;
margin-bottom: 8px;
}
.step-header p {
color: var(--text-muted);
margin: 0;
}
/* Deployment Type Grid */
.deployment-type-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
.type-card {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
background: #f9fafb;
border: 2px solid transparent;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.type-card:hover {
background: #f3f4f6;
border-color: #d1d5db;
}
.type-card.selected {
background: #eff6ff;
border-color: var(--primary-color);
}
.type-icon {
font-size: 32px;
flex-shrink: 0;
}
.type-content {
flex: 1;
}
.type-name {
font-weight: 600;
font-size: 16px;
margin-bottom: 4px;
}
.type-desc {
font-size: 13px;
color: var(--text-muted);
line-height: 1.4;
}
.type-check {
position: absolute;
top: 12px;
right: 12px;
width: 24px;
height: 24px;
background: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
/* Upload Section */
.upload-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.file-upload-area {
border: 2px dashed #d1d5db;
border-radius: 12px;
padding: 40px;
text-align: center;
transition: all 0.2s ease;
position: relative;
cursor: pointer;
background: #fafafa;
}
.file-upload-area:hover {
border-color: var(--primary-color);
background: #f5f9ff;
}
.file-upload-area.drag-over {
border-color: var(--primary-color);
background: #eff6ff;
border-style: solid;
}
.file-upload-area.has-file {
border-style: solid;
border-color: var(--success-color);
background: #f0fdf4;
padding: 20px;
}
.upload-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.upload-icon {
font-size: 48px;
color: #9ca3af;
}
.upload-text {
font-size: 16px;
font-weight: 500;
color: var(--text-color);
}
.upload-hint {
font-size: 13px;
color: var(--text-muted);
}
.file-input-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
.uploaded-file-info {
display: flex;
align-items: center;
gap: 16px;
}
.file-icon {
font-size: 32px;
}
.file-details {
flex: 1;
text-align: left;
}
.file-name {
font-weight: 600;
font-size: 15px;
color: var(--text-color);
}
.file-size {
font-size: 13px;
color: var(--text-muted);
}
.remove-file-btn {
width: 32px;
height: 32px;
background: #fee2e2;
color: var(--danger-color);
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.remove-file-btn:hover {
background: #fecaca;
}
/* WSUS Upload Area */
.upload-area {
border: 2px dashed #d1d5db;
border-radius: 12px;
padding: 40px;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
background: #fafafa;
}
.upload-area:hover {
border-color: var(--primary-color);
background: #f5f9ff;
}
.upload-area.drag-over {
border-color: var(--primary-color);
background: #eff6ff;
border-style: solid;
}
.upload-area.uploading {
opacity: 0.6;
pointer-events: none;
cursor: not-allowed;
}
.upload-area .upload-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.upload-area .upload-icon {
font-size: 48px;
}
.upload-area p {
color: var(--text-muted);
margin: 0;
}
.upload-progress {
margin-top: 12px;
}
.upload-progress .progress-bar {
height: 8px;
background: #e5e7eb;
border-radius: 4px;
overflow: hidden;
}
.upload-progress .progress-fill {
height: 100%;
background: var(--primary-color);
transition: width 0.3s ease;
}
.upload-progress .progress-text {
text-align: center;
margin-top: 8px;
font-size: 13px;
color: var(--text-muted);
}
/* Target Selection */
.target-selection {
display: flex;
flex-direction: column;
gap: 20px;
}
.target-selection .target-mode-tabs {
display: flex;
gap: 8px;
padding: 4px;
background: #f3f4f6;
border-radius: 8px;
}
.target-selection .tab-btn {
flex: 1;
padding: 10px 16px;
background: transparent;
border: none;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.target-selection .tab-btn:hover {
background: #e5e7eb;
}
.target-selection .tab-btn.active {
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
color: var(--primary-color);
}
.target-selection .target-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.target-selection .agent-filter {
display: flex;
gap: 8px;
}
.target-selection .filter-btn {
padding: 8px 16px;
background: #f3f4f6;
border: none;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s ease;
}
.target-selection .filter-btn:hover {
background: #e5e7eb;
}
.target-selection .filter-btn.active {
background: var(--primary-color);
color: white;
}
.target-selection .selection-actions {
display: flex;
gap: 8px;
}
.target-selection .select-action-btn {
padding: 6px 12px;
background: white;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.target-selection .select-action-btn:hover {
background: #f3f4f6;
border-color: #d1d5db;
}
.target-selection .agent-list {
max-height: 300px;
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 8px;
background: #fafafa;
}
.target-selection .agent-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--border-color);
cursor: pointer;
transition: background 0.2s ease;
}
.target-selection .agent-item:last-child {
border-bottom: none;
}
.target-selection .agent-item:hover {
background: #f3f4f6;
}
.target-selection .agent-item.selected {
background: #eff6ff;
}
.target-selection .agent-item.offline {
opacity: 0.6;
}
.target-selection .agent-info {
flex: 1;
display: flex;
flex-direction: column;
}
.target-selection .agent-name {
font-weight: 500;
font-size: 14px;
}
.target-selection .agent-details {
font-size: 12px;
color: var(--text-muted);
}
.target-selection .status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background: #9ca3af;
}
.target-selection .status-indicator.online {
background: var(--success-color);
}
.target-selection .selection-summary {
padding: 12px 16px;
background: #f0fdf4;
border-radius: 8px;
color: var(--success-color);
font-weight: 500;
font-size: 14px;
}
.target-selection .collection-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.target-selection .collection-item {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: #f9fafb;
border: 2px solid transparent;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.target-selection .collection-item:hover {
background: #f3f4f6;
border-color: #d1d5db;
}
.target-selection .collection-item.selected {
background: #eff6ff;
border-color: var(--primary-color);
}
.target-selection .collection-info {
display: flex;
flex-direction: column;
}
.target-selection .collection-name {
font-weight: 500;
font-size: 14px;
}
.target-selection .collection-details {
font-size: 12px;
color: var(--text-muted);
}
.target-selection .tags-input {
display: flex;
flex-direction: column;
gap: 6px;
}
.target-selection .tags-input input {
padding: 12px 16px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
}
.target-selection .tags-input input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.target-selection .tags-hint {
font-size: 12px;
color: var(--text-muted);
}
.target-selection .available-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.target-selection .tags-label {
font-size: 13px;
color: var(--text-muted);
}
.target-selection .tag-chip {
padding: 6px 12px;
background: #f3f4f6;
border: 1px solid transparent;
border-radius: 16px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s ease;
}
.target-selection .tag-chip:hover {
background: #e5e7eb;
}
.target-selection .tag-chip.selected {
background: #eff6ff;
border-color: var(--primary-color);
color: var(--primary-color);
}
/* Credentials Section */
.credentials-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.credentials-section .run-as-options {
display: flex;
flex-direction: column;
gap: 12px;
}
.credentials-section .radio-option {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 20px;
background: #f9fafb;
border: 2px solid transparent;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.credentials-section .radio-option:hover {
background: #f3f4f6;
border-color: #d1d5db;
}
.credentials-section .radio-option.selected {
background: #eff6ff;
border-color: var(--primary-color);
}
.credentials-section .radio-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.credentials-section .radio-label {
font-weight: 600;
font-size: 15px;
}
.credentials-section .radio-hint {
font-size: 13px;
color: var(--text-muted);
}
.credentials-section .credential-selector {
margin-top: 8px;
padding: 16px;
background: #f9fafb;
border-radius: 8px;
}
.credentials-section .credential-dropdown {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
background: white;
}
.credentials-section .empty-credentials {
text-align: center;
padding: 20px;
color: var(--text-muted);
}
.credentials-section .create-link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
color: var(--primary-color);
font-size: 13px;
}
/* Schedule Section */
.schedule-section {
display: flex;
flex-direction: column;
gap: 24px;
}
.schedule-section .schedule-type-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.schedule-section .schedule-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 30px 20px;
background: #f9fafb;
border: 2px solid transparent;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
}
.schedule-section .schedule-card:hover {
background: #f3f4f6;
border-color: #d1d5db;
}
.schedule-section .schedule-card.selected {
background: #eff6ff;
border-color: var(--primary-color);
}
.schedule-section .schedule-card-icon {
font-size: 36px;
}
.schedule-section .schedule-card-name {
font-weight: 600;
font-size: 16px;
}
.schedule-section .schedule-card-desc {
font-size: 13px;
color: var(--text-muted);
}
.schedule-section .schedule-options {
padding: 20px;
background: #f9fafb;
border-radius: 12px;
}
.schedule-section .form-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
/* Review Section */
.review-section {
display: flex;
flex-direction: column;
gap: 16px;
}
.review-card {
background: #f9fafb;
border-radius: 12px;
overflow: hidden;
}
.review-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: #f3f4f6;
border-bottom: 1px solid var(--border-color);
}
.review-icon {
font-size: 20px;
}
.review-header h3 {
margin: 0;
font-size: 15px;
font-weight: 600;
}
.review-content {
padding: 16px 20px;
}
.review-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 8px 0;
border-bottom: 1px solid #e5e7eb;
}
.review-row:last-child {
border-bottom: none;
}
.review-label {
font-size: 14px;
color: var(--text-muted);
}
.review-value {
font-size: 14px;
font-weight: 500;
text-align: right;
max-width: 60%;
}
.deployment-type-badge {
padding: 6px 12px;
border-radius: 16px;
font-size: 13px;
font-weight: 600;
}
.deployment-type-badge.type-exe {
background: #fef3c7;
color: #92400e;
}
.deployment-type-badge.type-msi {
background: #dbeafe;
color: #1e40af;
}
.deployment-type-badge.type-powershell {
background: #e0e7ff;
color: #3730a3;
}
.deployment-type-badge.type-batch {
background: #f3f4f6;
color: #374151;
}
.deployment-type-badge.type-shell {
background: #dcfce7;
color: #166534;
}
.deployment-type-badge.type-filecopy {
background: #fce7f3;
color: #9d174d;
}
/* Wizard Actions */
.wizard-actions {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
background: white;
border-top: 1px solid var(--border-color);
position: fixed;
bottom: 0;
left: var(--sidebar-width);
right: 0;
z-index: 100;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.wizard-step-indicator {
font-size: 14px;
color: var(--text-muted);
}
.wizard-actions .btn-create {
background: linear-gradient(135deg, var(--primary-color), #1d4ed8);
padding: 12px 24px;
font-size: 15px;
}
.wizard-actions .btn-create:hover:not(:disabled) {
background: linear-gradient(135deg, #1d4ed8, #1e40af);
}
/* Form Styles for Wizard */
.wizard-step-content .form-group {
margin-bottom: 0;
}
.wizard-step-content .form-group label {
display: block;
font-weight: 600;
color: #334155;
margin-bottom: 8px;
font-size: 14px;
}
.wizard-step-content .form-group .required {
color: var(--danger-color);
}
.wizard-step-content .form-input,
.wizard-step-content .form-select {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
transition: all 0.2s ease;
}
.wizard-step-content .form-input:focus,
.wizard-step-content .form-select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.wizard-step-content .form-hint {
margin-top: 6px;
font-size: 12px;
color: var(--text-muted);
}
.wizard-step-content textarea.form-input {
resize: vertical;
min-height: 80px;
}
/* Empty State in Wizard */
.wizard-step-content .empty-state-small {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
}
.wizard-step-content .empty-state-small p {
margin-bottom: 12px;
}
.wizard-step-content .loading-state-small {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
}
/* Responsive Design for Wizard */
@media (max-width: 768px) {
.wizard-progress {
flex-wrap: wrap;
gap: 8px;
padding: 20px;
}
.wizard-step {
min-width: 70px;
}
.step-connector {
width: 30px;
}
.wizard-content {
padding: 20px;
}
.wizard-step-content {
padding: 20px;
}
.deployment-type-grid {
grid-template-columns: 1fr;
}
.schedule-section .schedule-type-cards {
grid-template-columns: 1fr;
}
.schedule-section .form-row {
grid-template-columns: 1fr;
}
.wizard-actions {
flex-direction: column;
gap: 16px;
padding: 20px;
}
.wizard-actions .btn {
width: 100%;
}
}
/* =====================================================
Package Templates Page Styles
===================================================== */
/* Editor Header */
.editor-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.editor-header h2 {
margin: 0;
color: #1e3a8a;
}
.btn-back {
background: white;
border: 1px solid #e5e7eb;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.btn-back:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
/* Editor Container */
.editor-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.editor-section {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* Master-Detail Layout */
.steps-master-detail {
padding: 0;
overflow: hidden;
}
.steps-master-detail .section-title {
padding: 20px 24px;
margin: 0;
border-bottom: 1px solid #e5e7eb;
}
.master-detail-container {
display: grid;
grid-template-columns: 320px 1fr;
min-height: 450px;
}
/* Master Panel */
.steps-master {
background: #f8fafc;
border-right: 1px solid #e5e7eb;
display: flex;
flex-direction: column;
}
.steps-list-header {
padding: 12px 16px;
font-weight: 600;
color: #64748b;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.add-step-btn-header {
width: 28px;
height: 28px;
border: none;
background: #2563eb;
color: white;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.add-step-btn-header:hover {
background: #1d4ed8;
transform: scale(1.05);
}
.add-step-btn-empty {
padding: 10px 20px;
border: 2px dashed #cbd5e1;
background: transparent;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
color: #64748b;
margin-top: 12px;
transition: all 0.2s;
}
.add-step-btn-empty:hover {
border-color: #2563eb;
color: #2563eb;
}
.step-drag-handle {
color: #cbd5e1;
cursor: grab;
padding: 4px;
font-size: 12px;
}
.step-drag-handle:hover {
color: #94a3b8;
}
.step-name-display {
font-size: 14px;
font-weight: 500;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.steps-list-content {
flex: 1;
overflow-y: auto;
padding: 8px;
}
.empty-steps-master {
text-align: center;
padding: 40px 20px;
color: #94a3b8;
}
.step-list-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin-bottom: 6px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.step-list-item:hover {
border-color: #cbd5e1;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.step-list-item.selected {
border-color: #2563eb;
background: #eff6ff;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.step-list-number {
width: 26px;
height: 26px;
border-radius: 50%;
background: #e5e7eb;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 12px;
flex-shrink: 0;
}
.step-list-item.selected .step-list-number {
background: #2563eb;
color: white;
}
.step-list-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.step-name-input {
border: none;
background: transparent;
font-size: 14px;
font-weight: 500;
color: #1e293b;
padding: 2px 0;
width: 100%;
}
.step-name-input:focus {
outline: none;
background: white;
padding: 2px 6px;
margin: -2px -6px;
border-radius: 4px;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.step-type-badge-small {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
width: fit-content;
}
.step-list-actions {
display: flex;
gap: 2px;
opacity: 0;
transition: opacity 0.2s;
}
.step-list-item:hover .step-list-actions {
opacity: 1;
}
.step-mini-btn {
padding: 4px 6px;
border: none;
background: transparent;
cursor: pointer;
font-size: 10px;
color: #64748b;
border-radius: 4px;
transition: all 0.2s;
}
.step-mini-btn:hover:not(:disabled) {
background: #e5e7eb;
color: #1e293b;
}
.step-mini-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.step-mini-btn.danger:hover:not(:disabled) {
background: #fee2e2;
color: #dc2626;
}
.add-step-btn-master {
margin: 8px;
padding: 12px;
border: 2px dashed #cbd5e1;
background: transparent;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: #64748b;
transition: all 0.2s;
}
.add-step-btn-master:hover {
border-color: #2563eb;
color: #2563eb;
background: white;
}
/* Detail Panel */
.steps-detail {
display: flex;
flex-direction: column;
background: white;
}
.detail-tabs {
display: flex;
gap: 4px;
padding: 12px 20px;
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
}
.detail-tab {
padding: 10px 20px;
border: none;
background: transparent;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: #64748b;
border-radius: 8px;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
}
.detail-tab:hover {
background: white;
color: #1e293b;
}
.detail-tab.active {
background: white;
color: #2563eb;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.detail-content {
flex: 1;
padding: 24px;
overflow-y: auto;
}
.detail-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.detail-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.detail-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.detail-label {
font-size: 14px;
font-weight: 500;
color: #374151;
}
.detail-input, .detail-select {
padding: 10px 14px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
transition: all 0.2s;
}
.detail-input:focus, .detail-select:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.detail-textarea {
padding: 12px 14px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
font-family: 'Consolas', 'Monaco', monospace;
min-height: 120px;
resize: vertical;
transition: all 0.2s;
}
.detail-textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.condition-script-large {
min-height: 200px;
}
.condition-toggle {
font-size: 15px;
font-weight: 500;
}
.condition-disabled-notice {
display: flex;
align-items: center;
gap: 12px;
padding: 20px;
background: #f1f5f9;
border-radius: 8px;
color: #64748b;
}
.notice-icon {
font-size: 24px;
}
/* OS Conditions Grid */
.os-conditions-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.os-checkbox {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
font-size: 13px;
}
.os-checkbox:hover {
background: white;
border-color: #cbd5e1;
}
.os-checkbox input:checked + span {
color: #2563eb;
font-weight: 500;
}
/* Options Checkboxes */
.options-checkboxes {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.option-checkbox {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.option-checkbox:hover {
background: white;
border-color: #cbd5e1;
}
.option-checkbox input {
margin-top: 2px;
}
.option-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.option-label {
font-weight: 500;
color: #1e293b;
}
.option-hint {
font-size: 13px;
color: #64748b;
}
/* Tab Badge */
.tab-badge {
background: #2563eb;
color: white;
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
border-radius: 10px;
margin-left: 4px;
}
/* Step Name Main Input */
.step-name-main {
font-size: 16px;
font-weight: 500;
}
/* Files Upload Area */
.files-upload-area {
margin-bottom: 20px;
}
.file-input-hidden {
display: none;
}
.file-upload-label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
border: 2px dashed #cbd5e1;
border-radius: 12px;
background: #f8fafc;
cursor: pointer;
transition: all 0.2s;
}
.file-upload-label:hover {
border-color: #2563eb;
background: #eff6ff;
}
.upload-icon {
font-size: 40px;
margin-bottom: 12px;
}
.upload-text {
font-size: 15px;
font-weight: 500;
color: #1e293b;
}
.upload-subtext {
font-size: 13px;
color: #64748b;
margin-top: 4px;
}
/* Step Files List */
.step-files-list {
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
}
.files-list-header {
padding: 10px 14px;
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
font-size: 13px;
font-weight: 600;
color: #64748b;
}
.step-file-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid #f1f5f9;
}
.step-file-item:last-child {
border-bottom: none;
}
.no-files-message {
text-align: center;
padding: 30px;
color: #94a3b8;
background: #f8fafc;
border-radius: 8px;
}
.no-files-hint-inline {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: #fef3c7;
border: 1px solid #fcd34d;
border-radius: 6px;
color: #92400e;
font-size: 13px;
}
.link-btn {
background: none;
border: none;
color: #2563eb;
cursor: pointer;
font-size: 13px;
font-weight: 500;
text-decoration: underline;
padding: 0;
}
.link-btn:hover {
color: #1d4ed8;
}
/* Inline File Upload */
.file-select-row {
display: flex;
gap: 10px;
align-items: stretch;
}
.file-select-row .detail-select {
flex: 1;
}
.upload-btn-inline {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
background: #2563eb;
color: white;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
white-space: nowrap;
}
.upload-btn-inline:hover {
background: #1d4ed8;
}
.upload-btn-inline span {
display: flex;
align-items: center;
gap: 6px;
}
/* File Chips */
.uploaded-files-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.file-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 20px;
font-size: 13px;
color: #475569;
}
.chip-remove {
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: none;
background: #cbd5e1;
color: #475569;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 0;
margin-left: 2px;
transition: all 0.2s;
}
.chip-remove:hover {
background: #ef4444;
color: white;
}
/* No Step Selected */
.no-step-selected {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #94a3b8;
text-align: center;
padding: 40px;
}
.no-step-icon {
font-size: 48px;
margin-bottom: 16px;
}
.no-step-selected p {
font-size: 16px;
}
/* Folder Validation */
.folder-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.folder-input-wrapper .form-input {
flex: 1;
padding-right: 40px;
}
.folder-validation-icon {
position: absolute;
right: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.validation-spinner {
width: 18px;
height: 18px;
border: 2px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.validation-valid {
color: #16a34a;
font-size: 18px;
font-weight: bold;
}
.validation-invalid {
color: #dc2626;
font-size: 18px;
font-weight: bold;
}
.form-input.input-valid {
border-color: #16a34a;
}
.form-input.input-valid:focus {
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}
.form-input.input-error {
border-color: #dc2626;
}
.form-input.input-error:focus {
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.no-files-hint {
padding: 10px 14px;
background: #fef3c7;
border: 1px solid #fcd34d;
border-radius: 6px;
color: #92400e;
font-size: 13px;
}
/* Steps */
.steps-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.steps-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.step-card {
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
transition: all 0.2s;
}
.step-card:hover {
border-color: #cbd5e1;
}
.step-card.expanded {
border-color: #2563eb;
}
.step-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
cursor: pointer;
background: white;
}
.step-title-group {
display: flex;
align-items: center;
gap: 12px;
}
.step-number {
width: 28px;
height: 28px;
border-radius: 50%;
background: #2563eb;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
}
.step-type-badge {
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
}
.badge-service { background: #dbeafe; color: #1e40af; }
.badge-install { background: #dcfce7; color: #166534; }
.badge-script { background: #fef3c7; color: #92400e; }
.badge-files { background: #f3e8ff; color: #7c3aed; }
.badge-system { background: #fee2e2; color: #991b1b; }
.step-name {
font-weight: 500;
color: #1e293b;
}
.step-actions {
display: flex;
gap: 6px;
align-items: center;
}
.step-action-btn {
padding: 6px 10px;
border: 1px solid #e5e7eb;
background: white;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.step-action-btn:hover:not(:disabled) {
background: #f1f5f9;
}
.step-action-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.step-action-danger:hover:not(:disabled) {
background: #fee2e2;
border-color: #fecaca;
color: #dc2626;
}
.expand-icon {
margin-left: 8px;
color: #64748b;
}
.step-body {
padding: 18px;
border-top: 1px solid #e5e7eb;
}
.step-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.step-form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.step-label {
font-size: 13px;
font-weight: 500;
color: #374151;
}
.step-input, .step-select, .step-textarea {
padding: 8px 12px;
border: 1px solid #e5e7eb;
border-radius: 6px;
font-size: 14px;
}
.step-textarea {
min-height: 80px;
resize: vertical;
}
.step-input:focus, .step-select:focus, .step-textarea:focus {
outline: none;
border-color: #2563eb;
}
/* Advanced Options */
.advanced-options {
margin-top: 16px;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.advanced-options summary {
padding: 12px 16px;
cursor: pointer;
background: #f8fafc;
border-radius: 8px;
font-weight: 500;
color: #64748b;
}
.advanced-options[open] summary {
border-bottom: 1px solid #e5e7eb;
border-radius: 8px 8px 0 0;
}
.advanced-content {
padding: 16px;
}
.advanced-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.advanced-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.os-conditions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.condition-script {
margin-top: 10px;
}
.add-step-btn {
padding: 14px 24px;
border: 2px dashed #cbd5e1;
background: transparent;
border-radius: 10px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: #64748b;
transition: all 0.2s;
}
.add-step-btn:hover {
border-color: #2563eb;
color: #2563eb;
background: #f8fafc;
}
.empty-steps, .empty-files {
text-align: center;
padding: 30px;
color: #64748b;
}
/* Files */
.files-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.files-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.file-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: #f8fafc;
border-radius: 8px;
}
.file-icon {
font-size: 24px;
}
.file-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.file-name {
font-weight: 500;
color: #1e293b;
}
.file-size {
font-size: 12px;
color: #64748b;
}
.file-meta {
font-size: 12px;
color: #64748b;
}
.file-remove-btn {
width: 28px;
height: 28px;
border: none;
background: transparent;
color: #94a3b8;
cursor: pointer;
border-radius: 6px;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.file-remove-btn:hover {
background: #fee2e2;
color: #dc2626;
}
.file-upload-area {
border: 2px dashed #cbd5e1;
border-radius: 10px;
padding: 30px;
text-align: center;
}
.upload-hint {
margin-top: 10px;
font-size: 14px;
color: #64748b;
}
/* Editor Actions */
.editor-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
padding-top: 20px;
}
/* Packages Grid */
.packages-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 20px;
}
.package-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: all 0.3s;
border-left: 4px solid #8b5cf6;
}
.package-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.package-header {
display: flex;
align-items: start;
gap: 12px;
margin-bottom: 12px;
}
.package-icon {
font-size: 28px;
}
.package-info {
flex: 1;
}
.package-name {
font-size: 16px;
font-weight: 600;
color: #1e3a8a;
}
.package-meta {
font-size: 13px;
color: #64748b;
}
.package-menu {
position: relative;
}
.package-description {
font-size: 14px;
color: #64748b;
margin-bottom: 12px;
line-height: 1.5;
}
.package-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px;
border-top: 1px solid #f1f5f9;
}
.package-date {
font-size: 12px;
color: #94a3b8;
}
/* Packages Table View */
.packages-table-container {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
overflow: hidden;
}
.packages-table {
width: 100%;
border-collapse: collapse;
}
.packages-table th {
text-align: left;
padding: 14px 18px;
background: #f8fafc;
font-weight: 600;
color: #374151;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid #e5e7eb;
}
.packages-table td {
padding: 14px 18px;
border-bottom: 1px solid #f1f5f9;
font-size: 14px;
}
.packages-table tr:hover {
background: #f8fafc;
}
.table-package-name {
display: flex;
align-items: center;
gap: 10px;
}
.table-icon {
font-size: 20px;
}
.package-to-delete {
font-weight: 600;
color: #dc2626;
margin-top: 12px;
}
/* Active Deployments Grid Styles */
.active-deployments-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
padding: 20px;
}
.active-deployment-card-compact {
background: white;
border-radius: 10px;
padding: 16px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
border: 1px solid #e5e7eb;
cursor: pointer;
transition: all 0.2s ease;
}
.active-deployment-card-compact:hover {
border-color: #3b82f6;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.compact-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.compact-icon {
font-size: 20px;
}
.compact-name {
flex: 1;
font-size: 14px;
font-weight: 600;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.status-badge {
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.status-badge.running {
background: #dbeafe;
color: #1d4ed8;
}
.status-badge.pending {
background: #fef3c7;
color: #d97706;
}
.status-badge.completed {
background: #dcfce7;
color: #16a34a;
}
.status-badge.failed {
background: #fee2e2;
color: #dc2626;
}
.status-badge.scheduled {
background: #f3e8ff;
color: #7c3aed;
}
.status-badge.cancelled {
background: #f1f5f9;
color: #64748b;
}
.status-badge.partial {
background: #ffedd5;
color: #ea580c;
}
.compact-progress {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.progress-bar-mini {
flex: 1;
height: 6px;
background: #e2e8f0;
border-radius: 3px;
overflow: hidden;
}
.progress-bar-mini .progress-fill {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
border-radius: 3px;
transition: width 0.3s ease;
}
.progress-bar-mini .progress-fill.failed {
background: linear-gradient(90deg, #ef4444, #dc2626);
}
.progress-bar-mini .progress-fill.partial {
background: linear-gradient(90deg, #f97316, #ea580c);
}
.progress-label {
font-size: 12px;
font-weight: 600;
color: #64748b;
min-width: 35px;
text-align: right;
}
.compact-footer {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #94a3b8;
}
.compact-info,
.compact-steps {
display: flex;
align-items: center;
gap: 4px;
}
/* Table Progress */
.table-progress {
display: flex;
align-items: center;
gap: 8px;
}
.table-progress .progress-bar-mini {
width: 80px;
}
.table-progress span {
font-size: 13px;
color: #64748b;
min-width: 35px;
}
/* Active Deployments Table */
.active-deployments-table th,
.active-deployments-table td {
text-align: left;
}
.active-deployments-table .status-badge {
display: inline-block;
}
/* Active Deployments Detail View */
.detail-header {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
background: white;
border-bottom: 1px solid #e5e7eb;
}
.detail-header h2 {
margin: 0;
flex: 1;
color: #1e3a8a;
}
.detail-container {
padding: 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
.detail-section {
background: white;
border-radius: 12px;
padding: 20px 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.matrix-container {
overflow-x: auto;
}
.matrix-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.matrix-table th,
.matrix-table td {
padding: 10px 12px;
border: 1px solid #e5e7eb;
text-align: center;
}
.matrix-table th {
background: #f8fafc;
font-weight: 600;
color: #374151;
}
.matrix-table th.agent-column {
text-align: left;
min-width: 150px;
}
.matrix-table th.step-column {
min-width: 80px;
max-width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.matrix-table .agent-cell {
text-align: left;
}
.matrix-table .step-cell {
cursor: pointer;
transition: all 0.2s;
font-size: 16px;
}
.matrix-table .step-cell:hover {
background: #f1f5f9;
}
.matrix-table .step-cell.selected {
background: #dbeafe;
box-shadow: inset 0 0 0 2px #3b82f6;
}
.matrix-table .step-cell.completed { background: #dcfce7; color: #16a34a; }
.matrix-table .step-cell.running { background: #dbeafe; color: #2563eb; }
.matrix-table .step-cell.failed { background: #fee2e2; color: #dc2626; }
.matrix-table .step-cell.pending { background: #f3f4f6; color: #6b7280; }
.matrix-table .step-cell.skipped { background: #f3f4f6; color: #9ca3af; }
.empty-matrix {
padding: 40px;
text-align: center;
color: #6b7280;
}
/* Step Output Panel */
.output-section {
border: 1px solid #3b82f6;
}
.output-section .section-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.btn-close-output {
background: none;
border: none;
font-size: 18px;
color: #6b7280;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
}
.btn-close-output:hover {
background: #f3f4f6;
color: #1f2937;
}
.step-info-bar {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
padding: 12px;
background: #f8fafc;
border-radius: 8px;
}
.exit-code {
font-family: monospace;
padding: 4px 8px;
background: #e5e7eb;
border-radius: 4px;
font-size: 13px;
}
.step-time {
font-size: 13px;
color: #6b7280;
}
.output-label {
font-weight: 600;
margin-bottom: 8px;
color: #374151;
}
.output-label.error-label {
color: #dc2626;
}
.output-content {
background: #1e293b;
color: #e2e8f0;
padding: 16px;
border-radius: 8px;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px;
line-height: 1.5;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
max-height: 300px;
overflow-y: auto;
margin-bottom: 16px;
}
.output-content.error-output {
background: #450a0a;
color: #fecaca;
}
.no-output {
padding: 20px;
text-align: center;
color: #6b7280;
font-style: italic;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.info-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.info-label {
font-size: 12px;
color: #6b7280;
text-transform: uppercase;
}
.info-value {
font-size: 14px;
font-weight: 500;
color: #1f2937;
}
/* Missing Package Templates Styles */
/* Page Header */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.header-left {
display: flex;
align-items: center;
gap: 16px;
}
.page-header h1 {
margin: 0;
color: #1e3a8a;
}
/* Toolbar */
.toolbar {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
padding: 16px 20px;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.toolbar-left, .toolbar-right {
display: flex;
gap: 12px;
align-items: center;
}
.search-bar {
display: flex;
align-items: center;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 8px 12px;
min-width: 280px;
}
.search-icon {
color: #64748b;
}
.search-input {
border: none;
background: none;
outline: none;
margin-left: 8px;
flex: 1;
font-size: 14px;
}
.clear-search {
border: none;
background: none;
cursor: pointer;
color: #64748b;
padding: 4px;
}
.view-toggle {
display: flex;
gap: 4px;
background: #f8fafc;
padding: 4px;
border-radius: 6px;
}
.view-btn {
padding: 8px 12px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
transition: all 0.2s;
}
.view-btn.active {
background: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
color: #2563eb;
}
.btn-refresh {
padding: 8px 12px;
border: 1px solid #e5e7eb;
background: white;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: all 0.2s;
}
.btn-refresh:hover {
background: #f8fafc;
}
/* Section Title */
.section-title {
font-size: 18px;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
/* Form Fields */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* LDAP connection config: 2 columns (Host/Port/Encryption | Bind DN/Base DN), each stacked in order. */
.ldap-conn-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
}
.ldap-conn-col {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (max-width: 768px) {
.ldap-conn-grid {
grid-template-columns: 1fr;
}
}
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-field-full {
grid-column: 1 / -1;
}
.form-label {
font-size: 14px;
font-weight: 500;
color: #374151;
}
.form-input, .form-textarea {
padding: 10px 14px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.2s;
}
.form-input:focus, .form-textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-textarea {
min-height: 80px;
resize: vertical;
}
.form-hint {
font-size: 12px;
color: #64748b;
}
.form-hint.hint-error {
color: #dc2626;
}
/* Checkbox Label */
.checkbox-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
cursor: pointer;
}
/* Menu Dropdown */
.menu-btn {
padding: 4px 8px;
border: none;
background: transparent;
cursor: pointer;
font-size: 18px;
border-radius: 4px;
}
.menu-btn:hover {
background: #f1f5f9;
}
.menu-dropdown {
position: absolute;
right: 0;
top: 100%;
background: white;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
min-width: 140px;
z-index: 100;
overflow: hidden;
}
.menu-item {
width: 100%;
padding: 10px 14px;
border: none;
background: none;
text-align: left;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.2s;
}
.menu-item:hover {
background: #f8fafc;
}
.menu-item.danger {
color: #dc2626;
}
.menu-item.danger:hover {
background: #fee2e2;
}
/* Table Actions */
.table-actions {
display: flex;
gap: 8px;
}
.action-btn {
padding: 6px 10px;
border: 1px solid #e5e7eb;
background: white;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.action-btn:hover {
background: #f8fafc;
}
.action-btn.danger:hover {
background: #fee2e2;
border-color: #fecaca;
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.page-btn {
padding: 8px 14px;
border: 1px solid #e5e7eb;
background: white;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.page-btn:hover:not(:disabled) {
background: #f8fafc;
}
.page-btn.active {
background: #2563eb;
color: white;
border-color: #2563eb;
}
.page-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Loading & Empty States */
.loading-state, .empty-state {
text-align: center;
padding: 60px 20px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
margin: 0 auto 16px;
animation: spin 1s linear infinite;
}
.empty-icon {
font-size: 48px;
margin-bottom: 16px;
}
.empty-state h3 {
color: #1e3a8a;
margin-bottom: 8px;
}
.empty-state p {
color: #64748b;
margin-bottom: 20px;
}
/* Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background: white;
border-radius: 12px;
width: 90%;
max-width: 400px;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #e5e7eb;
}
.modal-header h3 {
margin: 0;
color: #1e3a8a;
}
.modal-close {
border: none;
background: none;
font-size: 18px;
cursor: pointer;
color: #64748b;
}
.modal-body {
padding: 20px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 20px;
border-top: 1px solid #e5e7eb;
}
/* Buttons */
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.3s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-primary {
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
color: white;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}
.btn-secondary {
background: white;
color: #64748b;
border: 1px solid #e5e7eb;
}
.btn-secondary:hover {
background: #f8fafc;
}
.btn-danger {
background: #dc2626;
color: white;
}
.btn-danger:hover {
background: #b91c1c;
}
.btn-sm {
padding: 6px 12px;
font-size: 13px;
}
.spinner-small {
width: 16px;
height: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Section Disabled State */
.section-disabled {
position: relative;
}
.section-disabled-message {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: linear-gradient(135deg, #fef3c7, #fde68a);
border: 1px solid #f59e0b;
border-radius: 8px;
margin-bottom: 12px;
color: #92400e;
font-size: 14px;
}
.section-disabled-message .info-icon {
font-size: 18px;
}
.disabled-overlay {
opacity: 0.5;
pointer-events: none;
user-select: none;
}
/* ============================================
Deployment History Page Styles
============================================ */
.btn-refresh {
padding: 8px 12px;
border: 1px solid #e5e7eb;
background: white;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: all 0.2s;
}
.btn-refresh:hover {
background: #f8fafc;
}
.filter-select {
padding: 8px 12px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
background: white;
cursor: pointer;
}
/* History Table */
.history-table-container {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
overflow: hidden;
}
.history-table {
width: 100%;
border-collapse: collapse;
}
.history-table th {
text-align: left;
padding: 14px 18px;
background: #f8fafc;
font-weight: 600;
color: #374151;
font-size: 13px;
border-bottom: 1px solid #e5e7eb;
}
.history-table td {
padding: 14px 18px;
border-bottom: 1px solid #f1f5f9;
font-size: 14px;
}
.history-table tr:hover {
background: #f8fafc;
}
.history-name {
color: #2563eb;
font-weight: 500;
cursor: pointer;
}
.history-name:hover {
text-decoration: underline;
}
.agent-stats {
display: flex;
gap: 12px;
font-size: 13px;
}
.stat-completed { color: #16a34a; }
.stat-failed { color: #dc2626; }
.stat-total { color: #64748b; }
/* Detail View */
.detail-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.detail-header h2 {
margin: 0;
flex: 1;
color: #1e3a8a;
}
.detail-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.detail-section {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.section-title {
font-size: 18px;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 20px;
}
.info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.info-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.info-label {
font-size: 13px;
color: #64748b;
}
.info-value {
font-size: 15px;
font-weight: 500;
color: #1e293b;
}
.results-summary {
display: flex;
gap: 16px;
}
.result-box {
flex: 1;
padding: 20px;
border-radius: 10px;
text-align: center;
}
.result-box.completed { background: #dcfce7; }
.result-box.failed { background: #fee2e2; }
.result-box.total { background: #f1f5f9; }
.result-count {
display: block;
font-size: 32px;
font-weight: 700;
}
.result-box.completed .result-count { color: #16a34a; }
.result-box.failed .result-count { color: #dc2626; }
.result-box.total .result-count { color: #374151; }
.result-label {
font-size: 14px;
color: #64748b;
margin-top: 4px;
}
/* Agent Results Section */
.agent-results-section {
min-height: 500px;
}
/* Agent Toolbar */
.agent-results-section .agent-toolbar {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 12px;
margin-bottom: 20px;
align-items: flex-start;
}
.agent-results-section .search-box {
flex: 1;
max-width: 400px;
position: relative;
display: flex;
align-items: center;
}
.agent-results-section .search-box .search-icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: #94a3b8;
pointer-events: none;
z-index: 1;
}
.agent-results-section .search-box input {
width: 100%;
padding: 10px 12px 10px 42px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.2s;
box-sizing: border-box;
margin: 0;
flex: 1;
}
.agent-results-section .search-box input:focus {
outline: none;
border-color: #2563eb;
}
.agent-results-section .agent-filter {
padding: 0 12px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
background: white;
cursor: pointer;
min-width: 150px;
flex-shrink: 0;
height: 38px;
}
.agent-results-section .btn-refresh-agents {
padding: 0 14px;
border: 1px solid #e5e7eb;
background: white;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: all 0.2s;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
height: 38px;
margin-top: 0;
}
.agent-results-section .btn-refresh-agents:hover {
background: #f8fafc;
}
/* Split Panel */
.agent-results-section .split-panel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
min-height: 400px;
}
/* Agent List Panel */
.agent-results-section .agent-list-panel {
border: 1px solid #e5e7eb;
border-radius: 10px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.agent-results-section .agent-list-header {
display: grid;
grid-template-columns: minmax(150px, 1fr) 80px 100px;
gap: 12px;
padding: 12px 16px;
background: #f8fafc;
font-size: 13px;
font-weight: 600;
color: #374151;
border-bottom: 1px solid #e5e7eb;
}
.agent-results-section .agent-list-header span:nth-child(2),
.agent-results-section .agent-list-header span:nth-child(3) {
text-align: center;
}
.agent-results-section .agent-list {
flex: 1;
overflow-y: auto;
max-height: 400px;
}
.agent-results-section .agent-item {
border-bottom: 1px solid #f1f5f9;
display: flex;
flex-direction: column;
}
.agent-results-section .agent-item:last-child {
border-bottom: none;
}
.agent-results-section .agent-item.selected > .agent-row {
background: #eff6ff;
}
.agent-results-section .agent-row {
display: grid;
grid-template-columns: minmax(150px, 1fr) 80px 100px;
gap: 12px;
padding: 12px 16px;
cursor: pointer;
transition: background 0.15s;
align-items: center;
width: 100%;
box-sizing: border-box;
}
.agent-results-section .agent-row:hover {
background: #f8fafc;
}
.agent-results-section .agent-item .agent-info {
display: flex;
flex-direction: row !important;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
min-width: 0;
}
.agent-results-section .expand-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 10px;
color: #64748b;
cursor: pointer;
user-select: none;
flex-shrink: 0;
}
.agent-results-section .agent-hostname {
font-weight: 500;
color: #1e293b;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.agent-results-section .agent-progress {
font-size: 13px;
color: #64748b;
text-align: center;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding-left: 30px;
}
.agent-results-section .agent-status {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding-left: 10px;
}
/* Agent Steps (expanded) */
.agent-results-section .agent-steps {
padding: 8px 16px 12px 44px;
background: #fafafa;
grid-column: 1 / -1;
width: 100%;
box-sizing: border-box;
}
.agent-results-section .step-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
margin-bottom: 4px;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
border-left: 3px solid transparent;
}
.agent-results-section .step-item:hover {
background: white;
}
.agent-results-section .step-item.selected {
background: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.agent-results-section .step-item.completed { border-left-color: #16a34a; }
.agent-results-section .step-item.running { border-left-color: #2563eb; }
.agent-results-section .step-item.failed { border-left-color: #dc2626; }
.agent-results-section .step-item.skipped { border-left-color: #94a3b8; }
.agent-results-section .step-item.pending { border-left-color: #e5e7eb; }
.agent-results-section .step-number {
width: 22px;
height: 22px;
border-radius: 50%;
background: #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
color: #64748b;
flex-shrink: 0;
}
.agent-results-section .step-item.completed .step-number { background: #dcfce7; color: #16a34a; }
.agent-results-section .step-item.failed .step-number { background: #fee2e2; color: #dc2626; }
.agent-results-section .step-item.running .step-number { background: #dbeafe; color: #2563eb; }
.agent-results-section .step-name {
flex: 1;
font-size: 13px;
color: #374151;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.agent-results-section .step-status-icon {
font-size: 14px;
flex-shrink: 0;
}
.agent-results-section .step-item.completed .step-status-icon { color: #16a34a; }
.agent-results-section .step-item.failed .step-status-icon { color: #dc2626; }
.agent-results-section .step-item.running .step-status-icon { color: #2563eb; }
.agent-results-section .step-item.pending .step-status-icon { color: #cbd5e1; }
.agent-results-section .step-item.skipped .step-status-icon { color: #94a3b8; }
/* Agent Pagination */
.agent-results-section .agent-pagination {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #f8fafc;
border-top: 1px solid #e5e7eb;
font-size: 13px;
}
.agent-results-section .agent-count {
color: #64748b;
}
.agent-results-section .pagination-controls {
display: flex;
align-items: center;
gap: 8px;
}
.agent-results-section .page-info {
color: #374151;
font-weight: 500;
}
/* Output Panel */
.agent-results-section .output-panel {
border: 1px solid #e5e7eb;
border-radius: 10px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.agent-results-section .output-header {
padding: 16px;
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.agent-results-section .output-title {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.agent-results-section .output-agent {
font-size: 14px;
font-weight: 600;
color: #1e293b;
}
.agent-results-section .output-step {
font-size: 13px;
color: #64748b;
}
.agent-results-section .output-meta {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
flex-shrink: 0;
}
.agent-results-section .exit-code {
font-size: 12px;
font-family: monospace;
color: #64748b;
background: #f1f5f9;
padding: 2px 8px;
border-radius: 4px;
}
.agent-results-section .duration {
font-size: 12px;
color: #64748b;
}
.agent-results-section .output-content {
flex: 1;
padding: 16px;
overflow-y: auto;
max-height: 350px;
}
.agent-results-section .output-section,
.agent-results-section .error-section {
margin-bottom: 16px;
}
.agent-results-section .output-section label,
.agent-results-section .error-section label {
display: inline-block;
font-weight: 600;
font-size: 12px;
color: #ffffff;
background: #475569;
padding: 4px 10px;
border-radius: 4px 4px 0 0;
margin-bottom: 0;
}
.agent-results-section .error-section label {
background: #dc2626;
color: #ffffff;
}
.agent-results-section .output-content pre {
background: #1e293b;
color: #e2e8f0;
padding: 14px;
border-radius: 0 8px 8px 8px;
overflow-x: auto;
font-size: 12px;
line-height: 1.5;
max-height: 200px;
margin: 0;
}
.agent-results-section .output-content pre.error {
background: #450a0a;
color: #fecaca;
}
.agent-results-section .output-placeholder {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #94a3b8;
padding: 40px;
}
.agent-results-section .placeholder-icon {
font-size: 48px;
margin-bottom: 16px;
}
.agent-results-section .output-placeholder p {
font-size: 14px;
margin: 0;
}
.agent-results-section .no-output {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
color: #94a3b8;
font-size: 14px;
}
.agent-results-section .skip-notice {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: #f8fafc;
border-radius: 8px;
color: #64748b;
}
.agent-results-section .skip-icon {
font-size: 20px;
}
/* Status Badge */
.status-badge {
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.status-badge.completed { background: #dcfce7; color: #166534; }
.status-badge.failed { background: #fee2e2; color: #991b1b; }
.status-badge.running { background: #dbeafe; color: #1d4ed8; }
.status-badge.pending { background: #f1f5f9; color: #64748b; }
.status-badge.skipped { background: #f1f5f9; color: #64748b; }
/* Loading & Empty States */
.loading-state, .empty-state {
text-align: center;
padding: 60px 20px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
margin: 0 auto 16px;
animation: spin 1s linear infinite;
}
.empty-icon {
font-size: 48px;
margin-bottom: 16px;
}
.empty-state h3 {
color: #1e3a8a;
margin-bottom: 8px;
}
.empty-state p {
color: #64748b;
}
.empty-results {
text-align: center;
padding: 40px;
color: #64748b;
}
/* ==========================================
Registry Browser Styles
========================================== */
.registry-container {
display: flex;
gap: 20px;
min-height: 500px;
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
}
.registry-tree-panel {
flex: 0 0 40%;
background: #f9fafb;
border-right: 1px solid #e5e7eb;
overflow-y: auto;
max-height: 600px;
}
.registry-tree {
padding: 12px;
}
.tree-node {
user-select: none;
}
.tree-node-header {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.15s;
}
.tree-node-header:hover {
background: #e5e7eb;
}
.tree-node-header.selected {
background: #dbeafe;
color: #1e40af;
}
.tree-toggle {
width: 16px;
text-align: center;
font-size: 10px;
color: #6b7280;
cursor: pointer;
flex-shrink: 0;
}
.tree-toggle:hover {
color: #1f2937;
}
.tree-icon {
font-size: 14px;
flex-shrink: 0;
}
.tree-label {
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tree-children {
padding-left: 20px;
}
.registry-values-panel {
flex: 1;
display: flex;
flex-direction: column;
background: #ffffff;
overflow: hidden;
}
.registry-values-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #f8fafc;
border-bottom: 1px solid #e5e7eb;
}
.registry-path {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.registry-path .path-label {
color: #6b7280;
}
.registry-path code {
background: #e5e7eb;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
max-width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.registry-type-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
font-family: monospace;
}
.registry-type-badge.type-string {
background: #dcfce7;
color: #166534;
}
.registry-type-badge.type-dword {
background: #dbeafe;
color: #1e40af;
}
.registry-type-badge.type-qword {
background: #e0e7ff;
color: #3730a3;
}
.registry-type-badge.type-binary {
background: #fef3c7;
color: #92400e;
}
.registry-type-badge.type-multi {
background: #f3e8ff;
color: #7c3aed;
}
.registry-type-badge.type-expand {
background: #fce7f3;
color: #be185d;
}
.registry-value-data {
font-size: 12px;
background: #f3f4f6;
padding: 2px 6px;
border-radius: 3px;
max-width: 300px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.registry-values-panel .table-container {
flex: 1;
overflow-y: auto;
}
.registry-values-panel .data-table {
margin: 0;
}
.registry-values-panel .action-buttons {
display: flex;
flex-direction: row !important;
flex-wrap: nowrap;
gap: 4px;
align-items: center;
}
.registry-values-panel .action-buttons .btn {
padding: 4px 8px;
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
}
.registry-values-panel .action-buttons .btn svg {
vertical-align: middle;
}
/* Registry Toolbar Search */
.registry-toolbar .search-bar {
position: relative;
display: block;
width: 100%;
/* Reset base search-bar styles */
background: transparent;
border: none;
padding: 0;
min-width: 0;
}
.registry-toolbar .search-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 16px;
z-index: 1;
pointer-events: none;
}
.registry-toolbar .search-input {
width: 100%;
padding: 8px 36px 8px 36px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 14px;
box-sizing: border-box;
background: #f8fafc;
}
.registry-toolbar .search-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.registry-toolbar .search-clear {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 14px;
padding: 0;
line-height: 1;
}
.registry-toolbar .search-clear:hover {
color: var(--text-color);
}
/* ============================================================================
Agent Selector Component
============================================================================ */
.agent-selector {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
}
.agent-selector-header {
padding: 12px;
background: #f8fafc;
border-bottom: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 10px;
}
.agent-selector-search-row {
display: flex;
gap: 10px;
align-items: center;
}
.agent-selector-search {
flex: 1;
position: relative;
}
.agent-selector-search input {
width: 100%;
padding: 8px 12px 8px 36px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: #fff;
}
.agent-selector-search input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.agent-selector-search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
}
.agent-selector-filter {
min-width: 120px;
}
.agent-selector-filter select {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
background: #fff;
cursor: pointer;
}
.agent-selector-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.agent-selector-actions-left {
display: flex;
align-items: center;
gap: 16px;
}
.agent-selector-select-all {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 14px;
color: var(--text-color);
}
.agent-selector-select-all input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
}
.agent-selector-toggle {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 13px;
color: var(--text-muted);
}
.agent-selector-toggle input[type="checkbox"] {
width: 14px;
height: 14px;
cursor: pointer;
}
.agent-selector-selected-count {
font-size: 13px;
font-weight: 500;
color: var(--primary-color);
background: rgba(37, 99, 235, 0.1);
padding: 4px 10px;
border-radius: 12px;
}
.agent-selector-list {
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.agent-selector-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 14px;
border-bottom: 1px solid var(--border-color);
cursor: pointer;
transition: background-color 0.15s;
}
.agent-selector-item:last-child {
border-bottom: none;
}
.agent-selector-item:hover {
background: #f8fafc;
}
.agent-selector-item.selected {
background: rgba(37, 99, 235, 0.05);
border-left: 3px solid var(--primary-color);
}
.agent-selector-item.offline {
opacity: 0.6;
}
.agent-selector-item.maintenance {
background: #fef3c7;
border-left: 3px solid #f59e0b;
}
.agent-selector-item.maintenance:hover {
background: #fef3c7;
cursor: not-allowed;
}
.agent-selector-item.disabled {
pointer-events: none;
opacity: 0.5;
}
.agent-selector-checkbox {
width: 18px;
height: 18px;
cursor: pointer;
flex-shrink: 0;
}
.agent-selector-checkbox:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.agent-selector-status {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.agent-selector-status.online {
background: #16a34a;
box-shadow: 0 0 6px rgba(22, 163, 74, 0.5);
}
.agent-selector-status.offline {
background: #9ca3af;
}
.agent-selector-status.maintenance {
background: #f59e0b;
box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}
.agent-selector-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
}
.agent-selector-name {
font-weight: 500;
color: var(--text-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 1;
min-width: 0;
}
.agent-selector-os-icon {
font-size: 16px;
flex-shrink: 0;
width: 20px;
text-align: center;
}
.agent-selector-linux-icon {
width: 18px;
height: 18px;
object-fit: contain;
vertical-align: middle;
}
.agent-selector-separator {
color: var(--text-muted);
flex-shrink: 0;
}
.agent-selector-ip {
color: var(--text-muted);
font-size: 13px;
white-space: nowrap;
flex-shrink: 0;
}
.agent-selector-version {
color: var(--text-muted);
font-size: 12px;
white-space: nowrap;
flex-shrink: 0;
opacity: 0.7;
}
.agent-selector-warning {
padding: 8px 14px;
background: #fef3c7;
border-bottom: 1px solid #fde68a;
color: #92400e;
font-size: 13px;
text-align: center;
}
.agent-selector-badge {
flex-shrink: 0;
font-size: 14px;
margin-left: auto;
}
.agent-selector-footer {
padding: 10px 14px;
background: #f8fafc;
border-top: 1px solid var(--border-color);
font-size: 13px;
color: var(--text-muted);
text-align: center;
}
.agent-selector-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
color: var(--text-muted);
text-align: center;
flex: 1;
min-height: 100px;
}
.agent-selector-empty-icon {
font-size: 32px;
margin-bottom: 12px;
opacity: 0.5;
}
.agent-selector-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
color: var(--text-muted);
height: 100%;
}
/* RTL Support for Agent Selector */
[dir="rtl"] .agent-selector-item.selected {
border-left: none;
border-right: 3px solid var(--primary-color);
}
[dir="rtl"] .agent-selector-item.maintenance {
border-left: none;
border-right: 3px solid #f59e0b;
}
[dir="rtl"] .agent-selector-search input {
padding: 8px 36px 8px 12px;
}
[dir="rtl"] .agent-selector-search-icon {
left: auto;
right: 12px;
}
/* Agent Selector Tabs */
.agent-selector-tabs {
display: flex;
background: #f8fafc;
border-bottom: 1px solid var(--border-color);
padding: 0;
}
.agent-selector-tab {
flex: 1;
padding: 12px 16px;
border: none;
background: transparent;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-bottom: 2px solid transparent;
}
.agent-selector-tab:hover:not(:disabled) {
background: #fff;
color: var(--text-color);
}
.agent-selector-tab.active {
background: #fff;
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
.agent-selector-tab:disabled {
cursor: not-allowed;
opacity: 0.5;
}
/* Agent Selector Collections Tab */
.agent-selector-collections {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.agent-selector-collection-list {
flex: 1;
overflow-y: auto;
padding: 8px;
}
.agent-selector-collection-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--border-color);
border-radius: 8px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.2s;
background: #fff;
}
.agent-selector-collection-item:hover {
border-color: var(--primary-color);
background: #fafbff;
}
.agent-selector-collection-item.selected {
border-color: var(--primary-color);
background: rgba(37, 99, 235, 0.05);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.agent-selector-collection-item input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
flex-shrink: 0;
}
.agent-selector-collection-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.agent-selector-collection-name {
font-weight: 500;
color: var(--text-color);
font-size: 14px;
}
.agent-selector-collection-details {
font-size: 12px;
color: var(--text-muted);
}
.agent-selector-collection-summary {
padding: 10px 14px;
background: #f8fafc;
border-top: 1px solid var(--border-color);
font-size: 13px;
color: var(--text-color);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.agent-selector-resolving {
color: var(--text-muted);
font-style: italic;
}
.agent-selector-resolved {
color: var(--primary-color);
font-weight: 500;
}
.agent-selector-create-link {
display: inline-block;
margin-top: 12px;
padding: 8px 16px;
background: var(--primary-color);
color: #fff;
text-decoration: none;
border-radius: 6px;
font-size: 14px;
transition: background 0.2s;
}
.agent-selector-create-link:hover {
background: var(--primary-hover);
color: #fff;
}
/* RTL Support for Agent Selector Tabs */
[dir="rtl"] .agent-selector-collection-item.selected {
border-left: none;
border-right: 3px solid var(--primary-color);
}
/* ===================================
Idle Timeout Warning Modal
=================================== */
.idle-timeout-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.idle-timeout-modal {
background: var(--card-bg, #fff);
border-radius: 12px;
padding: 32px;
max-width: 420px;
width: 90%;
text-align: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
animation: slideIn 0.2s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: scale(0.95) translateY(-10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.idle-timeout-icon {
margin-bottom: 20px;
color: var(--warning-color, #f59e0b);
}
.idle-timeout-icon svg {
width: 64px;
height: 64px;
stroke-width: 1.5;
}
.idle-timeout-modal h3 {
margin: 0 0 12px 0;
font-size: 20px;
font-weight: 600;
color: var(--text-color, #1f2937);
}
.idle-timeout-modal p {
margin: 0 0 16px 0;
color: var(--text-muted, #6b7280);
font-size: 15px;
line-height: 1.5;
}
.idle-timeout-countdown {
font-size: 56px;
font-weight: 700;
color: var(--warning-color, #f59e0b);
margin: 0 0 24px 0;
font-variant-numeric: tabular-nums;
line-height: 1;
animation: pulse-warning 1s ease-in-out infinite;
}
@keyframes pulse-warning {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.02); }
}
.idle-timeout-actions {
display: flex;
gap: 12px;
justify-content: center;
}
.idle-timeout-actions .btn {
padding: 10px 24px;
font-size: 14px;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.idle-timeout-actions .btn-primary {
background: var(--primary-color, #667eea);
color: #fff;
border: none;
}
.idle-timeout-actions .btn-primary:hover {
background: var(--primary-hover, #5a67d8);
transform: translateY(-1px);
}
.idle-timeout-actions .btn-secondary {
background: transparent;
color: var(--text-muted, #6b7280);
border: 1px solid var(--border-color, #e5e7eb);
}
.idle-timeout-actions .btn-secondary:hover {
background: var(--hover-bg, #f3f4f6);
color: var(--text-color, #1f2937);
}
/* ==========================================
Service Properties Modal Styles
========================================== */
.service-properties {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Inline property row - label and value on same line */
.service-properties .property-row-inline {
display: flex;
align-items: center;
gap: 15px;
}
.service-properties .property-row-inline label {
font-weight: 400;
color: var(--text-primary, #1e293b);
font-size: 0.9rem;
min-width: 120px;
flex-shrink: 0;
}
.service-properties .property-row-inline span {
color: var(--text-primary, #1e293b);
font-size: 0.9rem;
}
/* Block property - label above, content below */
.service-properties .property-block {
display: flex;
flex-direction: column;
gap: 5px;
}
.service-properties .property-block label {
font-weight: 400;
color: var(--text-primary, #1e293b);
font-size: 0.9rem;
}
/* Description box - bordered container */
.service-properties .description-box {
padding: 8px 12px;
border: 1px solid var(--border-color, #d1d5db);
border-radius: 4px;
background: white;
font-size: 0.9rem;
color: var(--text-primary, #1e293b);
max-height: 80px;
overflow-y: auto;
line-height: 1.4;
}
.service-properties .property-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.service-properties .property-group label {
font-weight: 600;
color: var(--text-secondary, #64748b);
font-size: 0.85rem;
}
.service-properties .property-value {
padding: 8px 12px;
background: var(--bg-tertiary, #f8fafc);
border-radius: 4px;
border: 1px solid var(--border-color, #e5e7eb);
}
.service-properties .property-value.monospace {
font-family: 'Consolas', 'Courier New', monospace;
font-size: 0.9rem;
}
.service-properties .property-value.path {
word-break: break-all;
}
.service-properties .property-value.description {
white-space: pre-wrap;
max-height: 80px;
overflow-y: auto;
}
.service-properties .property-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 576px) {
.service-properties .property-row {
grid-template-columns: 1fr;
}
}
.service-control-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
padding: 15px;
background: var(--bg-secondary, #f1f5f9);
border-radius: 8px;
margin-top: 10px;
}
.service-control-buttons .btn {
display: flex;
align-items: center;
gap: 6px;
}
.dependencies-section {
margin-top: 10px;
}
.dependency-list {
margin: 0;
padding-left: 20px;
max-height: 100px;
overflow-y: auto;
}
.dependency-list li {
margin-bottom: 4px;
}
/* Status Colors for Service Properties */
.service-properties .status.running {
color: var(--status-online, #22c55e);
font-weight: 600;
}
.service-properties .status.stopped {
color: var(--status-offline, #ef4444);
font-weight: 600;
}
.service-properties .status.paused {
color: var(--status-warning, #f59e0b);
font-weight: 600;
}
.service-properties .status.pending {
color: var(--status-info, #3b82f6);
font-weight: 600;
}
/* Service Action Buttons */
.service-action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.service-action-buttons .btn {
min-width: 80px;
padding: 6px 12px;
font-size: 0.875rem;
}
.service-action-buttons .btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #e5e7eb;
border-color: #d1d5db;
color: #9ca3af;
}
.service-action-buttons .btn:disabled:hover {
background-color: #e5e7eb;
border-color: #d1d5db;
}
/* Spinner for service action buttons */
.service-action-buttons .spinner-small {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spin 0.75s linear infinite;
}
/* Services Table Quick Actions */
.services-quick-actions {
display: flex;
gap: 4px;
}
.services-quick-actions .btn {
padding: 2px 8px;
font-size: 0.8rem;
}
/* Clickable Row for Services Table */
.data-table .clickable-row {
cursor: pointer;
transition: background-color 0.15s;
}
.data-table .clickable-row:hover {
background: var(--hover-bg, #f8fafc);
}
/* Badge styles for live/cached mode */
.badge-success {
background: #dcfce7;
color: #166534;
padding: 4px 8px;
border-radius: 4px;
font-weight: 500;
}
.badge-secondary {
background: #f1f5f9;
color: #64748b;
padding: 4px 8px;
border-radius: 4px;
font-weight: 500;
}
/* ============================================================================
File Browser Styles
============================================================================ */
.filebrowser-container {
display: flex;
gap: 20px;
min-height: 500px;
}
.filebrowser-tree-panel {
flex: 0 0 280px;
border-right: 1px solid #e5e7eb;
padding-right: 20px;
overflow-y: auto;
max-height: 600px;
}
.filebrowser-content-panel {
flex: 1;
overflow-y: auto;
}
.filebrowser-toolbar {
display: flex;
gap: 15px;
align-items: center;
margin-bottom: 20px;
padding: 10px;
background: #f9fafb;
border-radius: 8px;
}
.folder-item {
padding: 4px 8px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.15s;
display: flex;
align-items: center;
gap: 4px;
}
.folder-item:hover {
background-color: #f3f4f6;
}
.folder-item.selected {
background-color: #dbeafe;
}
.file-editor {
display: flex;
flex-direction: column;
height: 100%;
}
.file-editor-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background: #f3f4f6;
border-bottom: 1px solid #e5e7eb;
border-radius: 8px 8px 0 0;
}
.code-editor {
flex: 1;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 14px;
line-height: 1.5;
padding: 15px;
border: 1px solid #e5e7eb;
border-top: none;
border-radius: 0 0 8px 8px;
resize: none;
min-height: 400px;
}
.code-editor:focus {
outline: none;
border-color: #3b82f6;
}
/* Small icon button for file browser actions */
.btn-icon-sm {
background: none;
border: none;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: background-color 0.15s;
font-size: 14px;
}
.btn-icon-sm:hover {
background-color: #f3f4f6;
}
.btn-icon-sm:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Breadcrumb path display */
.breadcrumb-path {
font-family: monospace;
padding: 8px 12px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 4px;
overflow-x: auto;
white-space: nowrap;
}
.breadcrumb-path a {
color: #3b82f6;
text-decoration: none;
}
.breadcrumb-path a:hover {
text-decoration: underline;
}
/* ============================================================================
Scan Definition Toggle Switch
============================================================================ */
.scan-toggle-switch {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
cursor: pointer;
}
.scan-toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.scan-toggle-slider {
position: absolute;
inset: 0;
background: #d1d5db;
border-radius: 22px;
transition: background 0.2s;
}
.scan-toggle-slider::before {
content: "";
position: absolute;
height: 16px;
width: 16px;
left: 3px;
bottom: 3px;
background: white;
border-radius: 50%;
transition: transform 0.2s;
}
.scan-toggle-switch input:checked + .scan-toggle-slider {
background: #10b981;
}
.scan-toggle-switch input:checked + .scan-toggle-slider::before {
transform: translateX(18px);
}
/* ============================================================================
Phase 33: Sidebar & Header Navigation - Base Styles
Hamburger button and sidebar overlay (hidden on desktop, shown on mobile)
============================================================================ */
/* --- Hamburger Button (hidden on desktop) --- */
.hamburger-btn {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
border-radius: 6px;
transition: background 0.2s ease;
flex-shrink: 0;
}
.hamburger-btn:hover {
background: rgba(30, 58, 138, 0.08);
}
.hamburger-line {
display: block;
width: 22px;
height: 2px;
background: #1e3a8a;
border-radius: 1px;
transition: all 0.3s ease;
}
/* --- Sidebar Overlay Backdrop (hidden by default) --- */
.sidebar-overlay {
display: none;
}
/* ============================================================================
RESPONSIVE DESIGN - Phase 32: Layout Foundation
Breakpoints: Phone (<768px), Tablet (768-1023px), Desktop (default), Large (1440px+)
Desktop-first: max-width queries (matching existing codebase pattern)
============================================================================ */
/* --- Large screens (1440px+) ---
User decision: No changes needed. Desktop layout already works well at large sizes.
Content area uses flex:1 to expand into available width naturally.
This satisfies LAYOUT-05: "Large screens use available width without wasted whitespace." */
/* --- Tablet (768px - 1023px) --- */
@media (max-width: 1023px) {
:root {
--content-padding: 20px;
--card-padding: 20px;
--header-margin: 20px;
--grid-gap: 16px;
--card-gap: 16px;
}
/* Stats grid: force 2 columns on tablet */
.stats {
grid-template-columns: repeat(2, 1fr);
}
/* Tables: horizontal scroll instead of clipping */
.content-card {
overflow-x: auto;
}
.table {
min-width: 600px;
}
/* Agent detail header: tighter internal spacing */
.header-top {
margin-bottom: 20px;
}
.agent-title-section {
gap: 16px;
}
/* Stat value: slightly smaller on tablet for stat cards */
.stat-value {
font-size: 48px;
}
.stat-label {
font-size: large;
}
/* Phase 33: Show hamburger button */
.hamburger-btn {
display: flex;
}
/* Phase 33: Sidebar becomes fixed overlay, off-screen by default */
.sidebar {
position: fixed;
top: 0;
bottom: 0;
inset-inline-start: calc(-1 * var(--sidebar-width, 250px));
width: var(--sidebar-width, 250px);
z-index: 1001;
transition: inset-inline-start 0.3s ease;
}
/* Phase 33: Sidebar open state - slides into view */
.sidebar.open {
inset-inline-start: 0;
}
/* Phase 33: Dark backdrop when sidebar is open */
.sidebar-overlay {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
/* Phase 33: Scroll lock when sidebar overlay is open */
.container.sidebar-open {
overflow: hidden;
height: 100vh;
overscroll-behavior: none;
}
/* Phase 33: Main content takes full width (sidebar no longer in flex flow) */
.main-content {
width: 100%;
}
/* Phase 33: Update header h1 max-width (no sidebar in flow, but hamburger + user-info present) */
.header h1 {
max-width: calc(100vw - 140px);
}
/* Phase 33: Accessibility - respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.sidebar {
transition: none;
}
.hamburger-line {
transition: none;
}
}
/* Phase 34: Horizontal scroll for table containers missing overflow-x */
.agents-list,
.scheduler-list {
overflow-x: auto;
}
/* Phase 34: Hide low-priority columns on tablet */
.agents-table .col-low-priority {
display: none;
}
.audit-table .col-ip,
.audit-table .col-description {
display: none;
}
.scheduler-table th:nth-child(4),
.scheduler-table td:nth-child(4) {
display: none;
}
.commands-table th:nth-child(5),
.commands-table td:nth-child(5),
.commands-table th:nth-child(6),
.commands-table td:nth-child(6) {
display: none;
}
/* Phase 35: Two-column fixed grids → single column on tablet */
.push-update-grid {
grid-template-columns: 1fr;
}
.master-detail-container {
grid-template-columns: 1fr;
}
.split-panel {
grid-template-columns: 1fr;
}
/* Phase 35: Four-column info-grid → two columns on tablet */
.info-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* --- Phone (<768px) --- */
@media (max-width: 767px) {
:root {
--content-padding: 12px;
--card-padding: 12px;
--header-margin: 12px;
--grid-gap: 10px;
--card-gap: 10px;
}
/* Main content: prevent any overflow */
.main-content {
min-width: 0;
overflow-x: hidden;
}
/* Header: allow wrapping for very long titles, compact spacing */
.header {
flex-wrap: wrap;
gap: 8px;
}
.header h1 {
max-width: calc(100vw - 120px); /* Phase 33: No sidebar in flow, just hamburger + user-info */
font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1.25rem);
}
/* Stats grid: single column stack on phone */
.stats {
grid-template-columns: 1fr;
}
/* Stat cards: compact horizontal layout */
.stat-card {
flex-direction: row;
align-items: center;
gap: 8px;
padding: 10px 12px;
}
.stat-value {
font-size: 28px;
min-width: 0;
}
.stat-content {
align-items: flex-start;
min-width: 0;
}
.stat-label {
font-size: small;
text-align: left;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stat-trend {
font-size: 12px;
text-align: left;
}
/* Card headers: stack title and button vertically */
.card-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-bottom: 12px;
padding-bottom: 10px;
}
.card-title {
font-size: 1rem;
}
/* Tables: horizontal scroll with minimum width */
.content-card {
overflow-x: auto;
padding: 10px;
}
.table {
min-width: 500px;
font-size: 12px;
}
.table th,
.table td {
padding: 8px 6px;
}
/* Agent detail header: compact layout */
.header-top {
margin-bottom: 12px;
}
.agent-title-section {
gap: 8px;
}
/* Quick actions grid (Command page): tighter gaps */
.quick-actions {
gap: var(--card-gap, 10px);
}
/* Stats bar (Command page) */
.stats-bar {
gap: var(--grid-gap, 10px);
flex-wrap: wrap;
}
/* Buttons: compact for phone */
.btn {
padding: 6px 12px;
font-size: 13px;
}
.btn-fixed {
min-width: 120px;
}
/* Phase 33: Hide username text on phone, show only avatar */
.user-info > span:first-child {
display: none;
}
/* ============================================
Phase 34: Phone Card Layout for Data Tables
Tables transform into stacked cards with labeled fields.
Uses CSS ::before + attr(data-label) for field labels.
============================================ */
/* --- Agents table card layout --- */
.agents-list .agents-table {
min-width: 0;
}
.agents-list .agents-table thead {
position: absolute;
left: -9999px;
}
.agents-list .agents-table,
.agents-list .agents-table tbody {
display: block;
}
.agents-list .agents-table tbody tr {
display: block;
margin-bottom: 12px;
background: white;
border: 1px solid var(--border-color, #e5e7eb);
border-radius: 8px;
padding: 12px;
cursor: pointer;
}
.agents-list .agents-table tbody tr:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.agents-list .agents-table tbody tr.offline {
border-color: #fecaca;
background: #fef2f2;
}
.agents-list .agents-table tbody td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 13px;
}
.agents-list .agents-table tbody td:last-child {
border-bottom: none;
}
.agents-list .agents-table tbody td::before {
content: attr(data-label);
font-weight: 600;
color: var(--text-muted, #6b7280);
font-size: 12px;
flex-shrink: 0;
margin-inline-end: 12px;
}
/* Hide low-priority columns in card layout */
.agents-list .agents-table .col-low-priority {
display: none;
}
/* Action buttons: wrap in card mode */
.agents-list .list-actions {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: flex-end;
}
/* --- Audit table card layout --- */
.audit-list .audit-table {
min-width: 0;
}
.audit-list .audit-table thead {
position: absolute;
left: -9999px;
}
.audit-list .audit-table,
.audit-list .audit-table tbody {
display: block;
}
.audit-list .audit-table tbody tr {
display: block;
margin-bottom: 12px;
background: white;
border: 1px solid var(--border-color, #e5e7eb);
border-radius: 8px;
padding: 12px;
cursor: pointer;
}
.audit-list .audit-table tbody tr.row-failed {
border-color: #fecaca;
background: #fef2f2;
}
.audit-list .audit-table tbody tr.row-warning {
border-color: #fde68a;
background: #fffbeb;
}
.audit-list .audit-table tbody td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 13px;
}
.audit-list .audit-table tbody td:last-child {
border-bottom: none;
}
.audit-list .audit-table tbody td::before {
content: attr(data-label);
font-weight: 600;
color: var(--text-muted, #6b7280);
font-size: 12px;
flex-shrink: 0;
margin-inline-end: 12px;
}
/* Expandable detail row: exempt from card label pattern */
.audit-list .audit-table tbody tr.event-details-row {
margin-top: -12px;
border-top: none;
border-radius: 0 0 8px 8px;
padding: 0;
cursor: default;
}
.audit-list .audit-table tbody tr.event-details-row td {
display: block;
padding: 12px;
}
.audit-list .audit-table tbody tr.event-details-row td::before {
display: none;
}
/* --- Scheduler table card layout --- */
.scheduler-list .scheduler-table {
min-width: 0;
}
.scheduler-list .scheduler-table thead {
position: absolute;
left: -9999px;
}
.scheduler-list .scheduler-table,
.scheduler-list .scheduler-table tbody {
display: block;
}
.scheduler-list .scheduler-table tbody tr {
display: block;
margin-bottom: 12px;
background: white;
border: 1px solid var(--border-color, #e5e7eb);
border-radius: 8px;
padding: 12px;
cursor: pointer;
}
.scheduler-list .scheduler-table tbody tr:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.scheduler-list .scheduler-table tbody td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 13px;
}
.scheduler-list .scheduler-table tbody td:last-child {
border-bottom: none;
}
.scheduler-list .scheduler-table tbody td::before {
content: attr(data-label);
font-weight: 600;
color: var(--text-muted, #6b7280);
font-size: 12px;
flex-shrink: 0;
margin-inline-end: 12px;
}
/* Action buttons: wrap in card mode */
.scheduler-list .action-buttons {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: flex-end;
}
/* ============================================
Phase 35: Grid Collapse for Phone
Two-column grids → single column stack.
============================================ */
/* Two-column equal grids → single column */
.agent-info,
.form-row,
.step-form-grid,
.advanced-grid,
.form-grid,
.detail-form-row,
.task-type-selector {
grid-template-columns: 1fr;
}
/* Four-column info-grid → single column on phone */
.info-grid {
grid-template-columns: 1fr;
}
/* ============================================
Phase 35: Tab Navigation Adaptation for Phone
Tabs scroll horizontally instead of wrapping.
Side-nav converts to horizontal tab strip.
============================================ */
/* Settings tabs: horizontal scroll instead of wrap */
.settings-tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar {
display: none;
}
.settings-tabs .tab-btn {
padding: 8px 14px;
font-size: 13px;
flex-shrink: 0;
}
/* Detail tabs (PackageTemplates): horizontal scroll */
.detail-tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.detail-tabs::-webkit-scrollbar {
display: none;
}
.detail-tabs .detail-tab {
flex-shrink: 0;
white-space: nowrap;
}
/* Agent side-nav: vertical sidebar → horizontal scrollable strip */
.agent-side-nav {
max-height: none;
height: auto;
overflow-x: auto;
overflow-y: hidden;
display: flex;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
border-bottom: 2px solid var(--border-color, #e5e7eb);
border-inline-end: none;
gap: 0;
width: 100%;
padding: 0;
}
.agent-side-nav::-webkit-scrollbar {
display: none;
}
.side-nav-section {
display: flex;
flex-shrink: 0;
border-bottom: none;
}
.side-nav-header {
display: none;
}
.side-nav-item {
flex-shrink: 0;
white-space: nowrap;
border-inline-start: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
padding: 10px 14px;
font-size: 13px;
}
.side-nav-item.active {
border-inline-start-color: transparent;
border-bottom-color: var(--primary-color, #3b82f6);
background: transparent;
}
.side-nav-item .icon {
font-size: 14px;
}
/* ============================================
Phase 36: Touch Targets (WCAG 2.5.5 — 44px)
Enforce minimum 44px touch target on all
interactive elements for mobile usability.
============================================ */
/* Generic buttons — min-height 44px with flex centering */
.btn {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Small button variant */
.btn.btn-sm {
min-height: 44px;
}
/* Action buttons */
.action-btn {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Scoped action button containers */
.action-buttons .btn,
.service-action-buttons .btn,
.services-quick-actions .btn,
.filter-actions .btn {
min-height: 44px;
}
/* Select action button */
.select-action-btn {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Icon buttons — fixed 44x44px */
.btn-icon {
width: 44px;
height: 44px;
}
.table-icon-btn {
width: 44px;
height: 44px;
}
.close-btn {
width: 44px;
height: 44px;
}
/* Small icon button — enlarge to 44px with flex centering */
.btn-icon-sm {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Tab buttons — min-height without changing padding */
.tab-btn {
min-height: 44px;
}
.settings-tabs .tab-btn {
min-height: 44px;
}
.detail-tabs .detail-tab {
min-height: 44px;
}
.side-nav-item {
min-height: 44px;
display: flex;
align-items: center;
}
/* Pagination buttons — 44x44px minimum */
.page-btn {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Tag chips */
.tag-chip {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* Toggle button (scheduler) */
.toggle-btn {
min-height: 44px;
}
/* Menu items */
.menu-item {
min-height: 44px;
display: flex;
align-items: center;
}
/* Hamburger button */
.hamburger-btn {
min-width: 44px;
min-height: 44px;
}
/* Chip remove — 32px visual compromise */
.chip-remove {
width: 32px;
height: 32px;
font-size: 16px;
}
/* Form controls — min-height for consistency */
.form-control,
.form-select {
min-height: 44px;
}
/* Checkbox wrapper — label approach for touch area */
.checkbox-wrapper {
min-height: 44px;
display: flex;
align-items: center;
}
.checkbox-wrapper label {
min-height: 44px;
display: flex;
align-items: center;
padding-block: 8px;
}
/* Agent checkbox in selection lists */
.agent-checkbox {
min-height: 44px;
display: flex;
align-items: center;
}
/* Toggle switch — expand touch area */
.toggle {
min-height: 44px;
display: flex;
align-items: center;
}
/* Avatar — enlarge from 40px to 44px on phone */
.avatar {
width: 44px;
height: 44px;
}
/* ============================================
Phase 36: Adjacent Spacing (TOUCH-02 — 8px minimum)
Ensure adjacent interactive elements have at
least 8px gap to prevent accidental taps.
============================================ */
/* Settings tabs — increase from 4px to 8px */
.settings-tabs {
gap: 8px;
}
/* Detail tabs — ensure 8px gap */
.detail-tabs {
gap: 8px;
}
/* Agents list card action buttons — override 4px to 8px */
.agents-list .list-actions {
gap: 8px;
}
/* Scheduler card action buttons — override 4px to 8px */
.scheduler-list .action-buttons {
gap: 8px;
}
}
/* ============================================
Phase 36: Rotate Hint
Show landscape suggestion on portrait phone
for complex pages (Command, Scheduler).
============================================ */
.rotate-hint {
display: none;
}
@media (orientation: portrait) and (max-width: 767px) {
.rotate-hint {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
margin-bottom: 12px;
background: var(--bg-secondary, #1e293b);
border: 1px solid var(--border-color, #334155);
border-radius: 8px;
font-size: 13px;
color: var(--text-secondary, #94a3b8);
}
.rotate-hint .rotate-icon {
font-size: 20px;
flex-shrink: 0;
}
.rotate-hint .rotate-dismiss {
margin-inline-start: auto;
background: none;
border: none;
color: var(--text-secondary, #94a3b8);
font-size: 18px;
cursor: pointer;
padding: 4px;
line-height: 1;
}
}
/* ============================================
* Agent Log Viewer
* ============================================ */
.log-viewer {
background: #1e1e2e;
color: #cdd6f4;
font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace;
font-size: 12px;
line-height: 1.5;
padding: 12px;
border-radius: 6px;
max-height: 600px;
overflow-y: auto;
overflow-x: hidden;
word-break: break-all;
}
.log-entry {
display: flex;
gap: 8px;
padding: 2px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.log-entry:hover {
background: rgba(255, 255, 255, 0.03);
}
.log-timestamp {
color: #6c7086;
white-space: nowrap;
flex-shrink: 0;
}
.log-level-badge {
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
min-width: 30px;
text-align: center;
}
.log-level-inf .log-level-badge { color: #89b4fa; }
.log-level-dbg .log-level-badge { color: #a6adc8; }
.log-level-wrn .log-level-badge { color: #f9e2af; }
.log-level-err .log-level-badge { color: #f38ba8; }
.log-level-ftl .log-level-badge { color: #f38ba8; font-weight: 800; }
.log-level-vrb .log-level-badge { color: #585b70; }
.log-source {
color: #89dceb;
white-space: nowrap;
flex-shrink: 0;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
.log-message {
color: #cdd6f4;
word-break: break-word;
flex: 1;
}
.log-level-err .log-message { color: #f38ba8; }
.log-level-wrn .log-message { color: #f9e2af; }
.log-level-ftl .log-message { color: #f38ba8; }
.log-exception {
color: #f38ba8;
padding: 4px 0 4px 100px;
font-size: 11px;
white-space: pre-wrap;
word-break: break-all;
}
.log-viewer-empty {
color: #6c7086;
text-align: center;
padding: 40px 20px;
font-style: italic;
}
.log-viewer-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0 0;
font-size: 12px;
color: #6c7086;
}
.log-stream-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
}
.log-stream-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.log-stream-dot.active {
background: #a6e3a1;
box-shadow: 0 0 6px #a6e3a1;
}
.log-stream-dot.inactive {
background: #585b70;
}
.log-controls {
display: flex;
gap: 8px;
align-items: center;
}
.log-level-select {
width: 140px;
font-size: 13px;
}
/* Phase 89-05 (CTRL-03): screen-share control-mode indicator. The video container border
reflects the active mode — GREEN when controlling, GREY in view-only — alongside the
toolbar toggle state. Belt-and-suspenders: the server-rendered class (_controlMode) and
the JS-applied class (setMode) both target these rules. */
.screenshare-control {
border: 5px solid #16a34a; /* green = control */
box-shadow: inset 0 0 0 2px rgba(22,163,74,.45);
}
.screenshare-viewonly {
border: 5px solid #f59e0b; /* amber = view-only (more noticeable than grey) */
box-shadow: inset 0 0 0 2px rgba(245,158,11,.45);
}
/* Prominent always-on mode badge overlaid top-left of the live view. Driven purely by
the container class (screenshare-control / screenshare-viewonly), which BOTH the
server-rendered _controlMode AND the JS setMode toggle — so the badge stays correct
whether the mode changed via the toolbar button or the double-tap-Esc release. */
.screenshare-mode-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .4rem .9rem;
border-radius: 8px;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: .02em;
color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.4);
pointer-events: none;
}
.screenshare-mode-badge .badge-viewonly,
.screenshare-mode-badge .badge-control {
display: none;
}
.screenshare-viewonly .screenshare-mode-badge {
background: #f59e0b; /* amber */
}
.screenshare-viewonly .screenshare-mode-badge .badge-viewonly {
display: inline;
}
.screenshare-control .screenshare-mode-badge {
background: #16a34a; /* green */
}
.screenshare-control .screenshare-mode-badge .badge-control {
display: inline;
}
/* Phase 91-05 (VIEW-04): technician-only connection-quality indicator in the viewer toolbar.
An always-visible compact green/amber/red signal-bars icon; hover/focus reveals a small panel
with latency / bitrate / fps / connection state. The `level` class (green/amber/red) is set
from the browser getStats() poll (OnQualitySample). Palette matches the mode badge
(green #16a34a, amber #f59e0b, red #dc2626). Technician-only — never shown to the remote user.
NOTE: the screen-share styles all live in site.css (already linked from _Host.cshtml); the plan
named a standalone screenshare.css, but a new file would not load without an out-of-scope
_Host.cshtml , so these styles join their siblings here. */
.screenshare-quality {
display: inline-flex;
align-items: flex-end;
padding: .3rem .45rem;
border-radius: 6px;
background: rgba(0, 0, 0, .55);
cursor: default;
outline: none;
}
.screenshare-quality-bars {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 16px;
}
/* Four ascending bars; colored by the level class below via currentColor. */
.screenshare-quality-bars i {
display: inline-block;
width: 3px;
border-radius: 1px;
background: currentColor;
opacity: .35;
}
.screenshare-quality-bars i:nth-child(1) { height: 5px; }
.screenshare-quality-bars i:nth-child(2) { height: 8px; }
.screenshare-quality-bars i:nth-child(3) { height: 12px; }
.screenshare-quality-bars i:nth-child(4) { height: 16px; }
/* Green = all four lit; amber = three; red = two. The color drives currentColor on the bars. */
.screenshare-quality-green { color: #16a34a; }
.screenshare-quality-amber { color: #f59e0b; }
.screenshare-quality-red { color: #dc2626; }
.screenshare-quality-green .screenshare-quality-bars i { opacity: 1; }
.screenshare-quality-amber .screenshare-quality-bars i:nth-child(-n+3) { opacity: 1; }
.screenshare-quality-red .screenshare-quality-bars i:nth-child(-n+2) { opacity: 1; }
/* Hover/focus/expand metrics panel — a compact Zoom/Teams/RustDesk-style stats overlay. */
.screenshare-quality-panel {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 180px;
padding: .5rem .65rem;
border-radius: 8px;
background: rgba(17, 24, 39, .96);
color: #f9fafb;
font-size: .8rem;
line-height: 1.4;
box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
z-index: 4;
}
.screenshare-quality:hover .screenshare-quality-panel,
.screenshare-quality:focus .screenshare-quality-panel,
.screenshare-quality:focus-within .screenshare-quality-panel {
display: block;
}
.screenshare-quality-row {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.screenshare-quality-label {
color: #9ca3af;
}
/* "Connecting…" overlay over the live view during the WebRTC handshake (replaces the
blank black box). screenshare.js adds .hidden once the first frame is decoded. */
.screenshare-connecting {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
color: #fff;
background: rgba(0, 0, 0, .72);
font-size: 1.1rem;
font-weight: 600;
letter-spacing: .02em;
}
.screenshare-connecting.hidden {
display: none;
}
/* Phase 91 (SESS-06): bounded-reconnect overlay text swap. While screenshare.js sets
data-reconnecting on the overlay (a connectivity drop is being recovered) show the
distinct "Reconnecting…" line and hide the default "Connecting…" line. */
.screenshare-reconnecting-text {
display: none;
}
.screenshare-connecting[data-reconnecting] .screenshare-connecting-text {
display: none;
}
.screenshare-connecting[data-reconnecting] .screenshare-reconnecting-text {
display: block;
}
.screenshare-spinner {
width: 52px;
height: 52px;
border: 4px solid rgba(255, 255, 255, .22);
border-top-color: #16a34a;
border-radius: 50%;
animation: screenshare-spin 0.9s linear infinite;
}
@keyframes screenshare-spin {
to { transform: rotate(360deg); }
}
/* Remote-cursor-only: hide the LOCAL browser cursor over the video while controlling, so
the technician relies on the captured frame's remote cursor (CONTEXT CTRL-01). Both the
container class and the body 'control-active' class (set by setMode) trigger the hide. */
.screenshare-control video,
.control-active #screenshare-video {
cursor: none;
}