/* Athena Deploy Center - Base Styles */

:root {
    /* The palette below predates the tactical-ops redesign. tactical-tokens.css is the
       design system and is linked BEFORE this file, so these are kept only as aliases:
       every var(--primary-color) in this file (99 of them) now resolves to --tac-acc.
       Redefining them here is what moves the whole app, rather than each page scoping
       its own override. Do not put a literal hex back in this block. */
    --primary-color: var(--tac-acc);
    --primary-hover: var(--tac-acc-deep);
    --success-color: var(--tac-ok);
    --warning-color: var(--tac-warn);
    --danger-color: var(--tac-crit);
    --text-color: var(--tac-ink);
    --text-muted: var(--tac-ink3);
    --bg-color: var(--tac-s1);
    --bg-secondary: var(--tac-s2);
    --border-color: var(--tac-line);

    /* === 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;
}

/* ============================================================================
   Forms & Messages (shared)
   ----------------------------------------------------------------------------
   What is left of the old "Login Page Styles" block after the sign-in screen
   was rebuilt on scoped CSS (Pages/Login.razor.css + Layouts/LoginLayout.razor.css).

   Everything login-only — the PCB/circuit decoration, .login-card and its
   descendants, .empty-layout, the checkbox/forgot-password row, the version
   badge and the lockout/attempts warnings — is deleted: no markup references it
   any more.

   These rules are NOT login-only and never were; they are used by Profile,
   Collections, ExecuteCommand and PackageTemplates. They stay exactly where the
   login block used to be so their position in the cascade is unchanged.

   .btn-primary.loading / ::after also stay: they still drive the submit spinner,
   and Login.razor.css deliberately leans on them (it only hides its own arrow
   glyph so the two do not stack).
   ============================================================================ */

/* 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); }
}

/* 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;
}

@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;
}

/* ============================================================================
   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-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-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.info-label {
    color: var(--text-muted);
}

.info-value {
    font-weight: 500;
    color: var(--text-color);
}

/* Progress Section */

.progress-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.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 */

.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);
}

/* Status Badges for Deployments */
.status.status-pending {
    background: #f3f4f6;
    color: #374151;
}

.status.status-failed {
    background: #fee2e2;
    color: #991b1b;
}

/* 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, #0369a1 0%, #0284c7 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, #0369a1 0%, #0284c7 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-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: #0369a1;
    border-color: #0369a1;
    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;
}

.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;
}

/* 5 columns since v10.0: Uptime / Agent Version / Last Heartbeat / Registered / Alerts.
   The 2-column and 1-column overrides further down still apply at narrower widths. */
.header-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 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);
}

/* 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);
    }
}

/* ============================================================================
   Agent Inventory Styles
   ============================================================================ */

/* Agent Header Icon */

/* 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: #0284c7;
}

.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: #eef5fa;
    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 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: #0369a1; } /* 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 */

/* 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;
}

/* ---------------------------------------------------------------------------
   Athena line-art icons (AthenaIcons.cs)
   The marks stroke with currentColor, so they inherit each button variant's own
   colour and need no per-icon rule. Only SIZE is set here: the SVG has no
   width/height of its own, exactly so one rule can drive every instance.
   --------------------------------------------------------------------------- */
.action-btn-icon {
    display: inline-flex;
    align-items: center;
}

.action-btn-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.btn-icon .action-btn-icon svg {
    width: 18px;
    height: 18px;
}

.btn-sm .action-btn-icon svg {
    width: 14px;
    height: 14px;
}

/* Non-button uses go through <AthenaIcon Name="..." Size="..." />, which passes its
   size down as a custom property so one span can be inline with text or a 40px tile. */
.athena-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.athena-icon svg {
    width: var(--athena-icon-size, 1em);
    height: var(--athena-icon-size, 1em);
    display: block;
}

/* Icon button color overrides — higher specificity to beat later .btn-secondary etc. */
.btn-icon.btn-secondary {
    background: #eef5fa;
    color: #075985;
    border: 1px solid #dbe7f0;
}

.btn-icon.btn-secondary:hover {
    background: #dbe7f0;
}

.btn-icon.btn-primary {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    color: white;
}

.btn-icon.btn-primary:hover {
    background: linear-gradient(135deg, #075985 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 */

/* Service Filters and Search Container */

/* Filter buttons */

.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 */

/* 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 */

/* Status badge variants */
.status.error {
    background: #fee2e2;
    color: #991b1b;
}

.status.warning {
    background: #fef3c7;
    color: #92400e;
}

.status.pending {
    background: #f3f4f6;
    color: #6b7280;
}

.status.running {
    background: #eef5fa;
    color: #075985;
}

/* 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 */

/* Agent Icon Large */

/* ============================================================================
   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, #0369a1 0%, #0284c7 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: #075985;
}

.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;
}

.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: <span>https://</span><input host:port /> */
.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) */

/* Command Output Section */
.output-section {
    margin-top: 16px;
}

/* 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)
   ============================================================================ */

/* Editor Group */

.editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.editor-header label {
    margin-bottom: 0;
}

/* 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: #0369a1;
}

/* Form styles within panel */

/* Agent Selector in Panel */

/* Panel Footer */

/* Hide elements when expanded */

/* Responsive for Execute Panel */
@media (max-width: 768px) {

    .monaco-editor-container {
        height: 200px;
    }

    .editor-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ============================================================================
   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 460px;
    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;
}

/* Execute page: keep .editor-section and .settings-section as transparent flex
   wrappers so their .section-card children align at the grid-cell top. Scoped to
   .execute-page to neutralize stray global definitions that bleed in from other
   pages and otherwise knock the two panels out of top-alignment:
   - .editor-section (~line 11294, PackageTemplates) adds white bg + radius + shadow +
     24px padding, turning the left wrapper into a card 24px higher than the right.
   - .settings-section (~line 6646) adds 24px padding + a border-bottom. */
.execute-page .editor-section {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

.execute-page .settings-section {
    padding: 0;
    border-bottom: none;
}

/* Target Mode Tabs */

.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 */

/* 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: #eef5fa;
}

.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);
    white-space: nowrap;
}

.agent-item .agent-details {
    font-size: 12px;
    color: var(--text-muted);
}

.agent-item.maintenance {
    background: #fffbeb;
    border-color: #f59e0b;
}

.agent-item.maintenance:hover {
    background: #fef3c7;
}

/* Selection Summary */

/* Collection List */
.collection-list {
    max-height: 250px;
    overflow-y: auto;
}

.collection-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

/* Tags Input */

/* Available Tags */

.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);
}

/* ---------------------------------------------------------------------------
   Agent-view tag provenance chips (Phase 122, TAG-06).
   Scoped under .agent-tags-list so the shared .tag-chip pill above is NOT
   redefined — these chips just carry inline content (marker, label, rule link,
   remove button) that the plain selectable pill never had.
   The auto/both colouring must be legible WITHOUT hovering: that visible
   distinction IS the requirement, so the hover rules below keep the colour
   instead of letting the generic .tag-chip:hover wash it out.
   --------------------------------------------------------------------------- */
.agent-tags-list .tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}

.tag-chip-auto,
.tag-chip-auto:hover {
    background: #eff6ff;
    border-color: var(--primary-color);
    color: #075985;
}

.tag-chip-both,
.tag-chip-both:hover {
    background: #f5f3ff;
    border-color: #7c3aed;
    color: #5b21b6;
}

.tag-chip-source {
    margin-right: 4px;
    font-size: 11px;
    opacity: .85;
}

.tag-chip-rule-link {
    font-size: 11px;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    opacity: .9;
}

.tag-chip-rule-link:hover {
    opacity: 1;
}

/* 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) */

/* Empty and Loading States */

/* Responsive */
@media (max-width: 700px) {
    .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;
    }

    .execute-actions {
        flex-direction: column;
    }
}

/* ============================================================================
   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: #eef5fa;
    color: #075985;
}

.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: #075985;
}

.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: #eef5fa;
    color: #075985;
}

.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: #eef5fa;
}

.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;
}

/* Schedule Type Selector */

/* 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 */

/* Validation Error */
.validation-error {
    padding: 8px 12px;
    background: #fee2e2;
    border-radius: 6px;
    color: var(--danger-color);
    font-size: 13px;
    margin-top: 8px;
}

/* Code Input */

/* 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;
}

.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 */

.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 */

/* 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 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-content {
    flex: 1;
}

.task-card-title {
    font-weight: 600;
    color: #1e3a8a;
    margin-bottom: 2px;
}

.task-card-desc {
    font-size: 12px;
    color: var(--text-muted);
}

/* 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-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 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;
    }

    .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: #eef5fa;
    color: #075985;
}

.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-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-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;
    }
}

@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 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: #eef5fa;
    color: #075985;
    border-left: 4px solid #0369a1;
}

.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;
}

/* Collapsible section chevron. Inline SVG rather than an icon font — FontAwesome is
   not loaded anywhere in this app, so the <i class="fas fa-chevron-*"> these headers
   used to carry rendered as nothing at all. That was invisible while the panels always
   opened expanded, and became a dead-looking heading the moment they opened closed. */
.settings-section .section-header.collapsible {
    cursor: pointer;
    user-select: none;
}

.settings-section .section-chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.65;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.settings-section .section-header.collapsible:hover .section-chevron {
    opacity: 1;
}

.settings-section .section-chevron.is-open {
    transform: rotate(180deg);
}

/* Toggle Grid — the checkbox lists in Settings > Agents > Remotes (RustDesk
   permissions and features) and anywhere else a run of on/off switches appears.
   The class was in the markup from the start but NO stylesheet defined it, so the
   div stayed display:block and 20 toggles rendered one per row, which is what made
   that sub-tab an endless scroll. Denser than .form-grid because a checkbox plus a
   short label needs far less width than a labelled input. */
.settings-section .toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 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: slideInRight 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 slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Agent Details Toast */

/* 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: slideInRight 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: slideInRight 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: #eef5fa;
    border-color: #0284c7;
}

.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;
    }

    /* Toggles keep two columns on a phone — a checkbox and a two-word label fit
       side by side where a labelled input does not, and collapsing them to one
       column is what makes the permission list scroll on the smallest screen. */
    .settings-section .toggle-grid {
        grid-template-columns: repeat(2, 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: #0369a1;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* 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;
}

/* ---------------------------------------------------------------------------
   Monitor state badges (v10.0 Phase 124, MON-04) — Agent Details > Monitors.

   The five MonitorEvaluationState values mean genuinely DIFFERENT things and
   must never collapse into one "bad" styling:
     pass          - the condition evaluated false; the device is healthy
     fail          - the condition evaluated true; the device is in the watched state
     error         - the scan script threw / timed out; nothing was observed
     notapplicable - the device could not observe the value (e.g. the Linux
                     agent has no PowerShell scan capability). NOT a pass.
     notevaluated  - targeted but never reported. Dashed border = "no data yet",
                     visually distinct from the solid grey of notapplicable.
   --------------------------------------------------------------------------- */
.monitor-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.monitor-state-badge.state-pass {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

.monitor-state-badge.state-fail {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

.monitor-state-badge.state-error {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}

.monitor-state-badge.state-notapplicable {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

.monitor-state-badge.state-notevaluated {
    background: transparent;
    color: #64748b;
    border: 1px dashed #94a3b8;
}

.monitor-state-badge.state-unknown {
    background: #f1f5f9;
    color: #64748b;
    border-color: #e2e8f0;
}

/* The Linux "not applicable" reason and any Error text, rendered under the badge. */
.monitor-state-reason {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: #6b7280;
    max-width: 420px;
    white-space: normal;
}

/* Stale-threshold marker: the agent evaluated against a threshold since edited. */
.monitor-drift-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    font-size: 10px;
    font-weight: 600;
}

/* 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: #eef5fa;
    color: #075985;
}

.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: #eef5fa;
    color: #075985;
}

.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: #eef5fa;
    color: #075985;
}

.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-buttons {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    align-items: center;
}

.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-help-btn:hover {
    background: #0369a1;
    border-color: #0369a1;
    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: #075985;
    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 #0369a1;
}

/* ============================================================================
   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, #eef5fa 0%, #dbe7f0 100%);
    color: #075985;
}

.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: #eef5fa;
    color: #075985;
}

.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: #0369a1;
}

.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: #eef5fa;
    color: #075985;
}

.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;
}

/* 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: #0369a1;
}

.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: #0284c7;
    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: #0369a1;
    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: #0369a1;
    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: #0369a1;
}

.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: #0369a1;
}

.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: #0369a1;
    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: #eef5fa;
    color: #075985;
}

.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: #eef5fa;
    color: #075985;
}

.badge-static {
    background: #fef3c7;
    color: #92400e;
}

/* Physical Disk badges */
.badge-ssd {
    background: #eef5fa;
    color: #075985;
}

.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: #0369a1;
}

.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: #eef5fa;
    color: #075985;
    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: #eef5fa;
    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: #0369a1;
    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: #0369a1;
    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: #0369a1;
}

/* ============================================================================
   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) */

/* Status Badges Container */
.status-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Warning Box Variants */
.warning-box-info {
    background: #eef5fa !important;
    border-color: #0369a1 !important;
}

.warning-box-info strong {
    color: #075985 !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: #eef5fa;
    color: #075985;
}

.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;
}

/* ============================================================================
   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;
}

/* 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;
}

.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: #0369a1; }
.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 #0369a1;
    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: #eef5fa;
    color: #075985;
    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-header {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ========================================
   Agent Updates Sub-tabs
   ======================================== */

.settings-sub-tabs {
    margin-bottom: 24px;
}

/* Styled File Upload */

.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-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;
}

.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 Progress Bar */

.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;
}

.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 */

/* Deployment Type Grid */

.type-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.type-content {
    flex: 1;
}

/* Upload Section */

.upload-icon {
    font-size: 48px;
    color: #9ca3af;
}

.file-icon {
    font-size: 32px;
}

/* 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 .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 .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 .collection-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.target-selection .collection-name {
    font-weight: 500;
    font-size: 14px;
}

.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 */

/* Schedule Section */

/* Review Section */

/* Wizard Actions */

/* Form Styles for Wizard */

/* Empty State in Wizard */

/* Responsive Design for Wizard */
@media (max-width: 768px) {

    .step-connector {
        width: 30px;
    }
}

/* =====================================================
   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: #0369a1;
    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: #075985;
    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: #0369a1;
    color: #0369a1;
}

.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: #0369a1;
    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: #0369a1;
    color: white;
}

.step-list-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.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;
}

/* 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: #0369a1;
    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: #0369a1;
    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: #0369a1;
    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;
}

/* 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: #0369a1;
    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: #0369a1;
    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 */

.file-input-hidden {
    display: none;
}

.upload-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

/* Step Files List */

/* 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: #0369a1;
    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: #075985;
}

.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-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: #0369a1;
    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);
}

/* Steps */

.step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0369a1;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

.badge-service { background: #eef5fa; color: #075985; }
.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-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Advanced Options */

.advanced-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Files */

.file-icon {
    font-size: 24px;
}

/* 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: #0284c7;
    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: #eef5fa;
    color: #075985;
}

.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, #0284c7, #075985);
    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: #eef5fa;
    box-shadow: inset 0 0 0 2px #0284c7;
}

.matrix-table .step-cell.completed { background: #dcfce7; color: #16a34a; }
.matrix-table .step-cell.running { background: #eef5fa; color: #0369a1; }
.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 #0284c7;
}

.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;
}

.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-input {
    border: none;
    background: none;
    outline: none;
    margin-left: 8px;
    flex: 1;
    font-size: 14px;
}

.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: #0369a1;
}

.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: #0369a1;
    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: #0369a1;
    color: white;
    border-color: #0369a1;
}

.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: #0369a1;
    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, #0369a1 0%, #075985 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;
}

.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: #0369a1;
    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 .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;
}

/* 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: #0369a1; }
.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: #eef5fa; color: #0369a1; }

.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: #0369a1; }
.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: #eef5fa; color: #075985; }
.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: #0369a1;
    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: #eef5fa;
    color: #075985;
}

.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: #eef5fa;
    color: #075985;
}

.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: #0284c7;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ============================================================================
   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%;
}

/* 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;
}

/* ===================================
   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;
}

/* 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, #0284c7);
    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: #eef5fa;
}

.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: #0284c7;
}

/* 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: #0284c7;
    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;
}

/* ============================================
 * 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 <link>, 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;
}

/* ---------------------------------------------------------------------------
   Monitor editor pickers (Settings > Monitoring > Monitors > New/Edit).
   The FIELD picker is a plain .form-control <select>; only the TARGET TAGS
   multi-select needs layout. Class names are monitor-* scoped on purpose so the
   shared .tag-chip pill keeps its look and nothing else is redefined.
   --------------------------------------------------------------------------- */
.monitor-tag-selection {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin-bottom: 8px;
}

.monitor-tag-selection .tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
    background: #eff6ff;
    border-color: var(--primary-color);
    color: #075985;
}

.monitor-tag-remove {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    font-size: 14px;
    cursor: pointer;
    color: inherit;
}

.monitor-tag-remove:hover {
    color: #b91c1c;
}

.monitor-tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    max-height: 160px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary, #f9fafb);
}

.monitor-tag-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.monitor-tag-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.monitor-tag-add-row .form-control {
    flex: 1;
}

/* ============================================================================
   Alert count badges (v10.0) — Agents-list "Alerts" column + Agent-Details card
   ============================================================================
   Both surfaces render an ACTIVE alert count (firing + acknowledged) in the
   .severity-badge pill the Alerts page already uses, coloured by the worst
   FIRING severity. When a device's alerts are ALL acknowledged there is no
   firing severity to colour with — and borrowing one would make an owned alert
   look as urgent as a live one — so it gets this deliberately neutral modifier:
   still clearly a count, visibly not an emergency. */
.severity-badge.acknowledged {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

/* The alerts card sits among .stat-box-value numbers rendered at 24px, so the
   11px pill would read as a typo next to them. Scale it up in that context only
   — the table column keeps the standard badge size. */
.stat-box-value .stat-box-badge {
    font-size: 18px;
    padding: 4px 14px;
    text-decoration: none;
}

/* (The v10.0 `.status-badge.offline` pill lived here. It was the Alerts page offline
   badge, and it had no other caller; the marker is now prose in the LAST SEEN cell —
   see .alert-last-seen-offline at the end of this file — so the rule went with it
   rather than lingering as dead style describing a badge that no longer exists.) */

/* The Alerts page non-firing chip (v10.0).

   The STATE column was removed: the page defaults to active-only, so every visible row
   printed the same word ("Firing") and the column carried no information. This chip is
   what took its place — rendered ONLY on a row whose state is NOT Firing, inside the
   MONITOR cell, so it costs no width on the row where it would say nothing.

   DELIBERATELY MUTED, exactly like the offline marker above it and for the same reason:
   the severity badge in the same row owns the urgency. This chip is a QUALIFIER — "someone
   already owns this", "this one is closed" — and a coloured pill would compete with the
   thing the operator is actually scanning for. */
.alert-state-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    vertical-align: middle;
}

/* ============================================================================
   Monitor condition builder (v10.0, M022) — Settings > Monitoring > Monitors
   ============================================================================
   A correlated monitor quantifies an ORDERED condition list over a collection,
   so each condition needs a row of its own: property, operator, threshold and
   the reorder/remove controls. Everything else on the form is a plain stacked
   .form-group and stays that way — a scalar monitor never renders any of this.
   ---------------------------------------------------------------------------- */
.monitor-condition-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

/* The property picker is the widest: it carries names like "Service Startup Type". */
.monitor-condition-row .form-control {
    flex: 1 1 0;
    min-width: 0;
}

.monitor-condition-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.monitor-condition-actions .btn {
    padding: 4px 8px;
    line-height: 1;
}

/* Manual entry hangs under its row rather than inside it, so the row layout does
   not shift when a property has to be typed. */
.monitor-condition-custom {
    margin-top: 6px;
}

.monitor-condition-add {
    margin-top: 10px;
}

/* The plain-language read-back. Visually distinct from the inputs because it is
   the last chance to notice an INVERTED monitor before it pages somebody. */
.monitor-condition-summary {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-color);
    border-radius: 6px;
    background: var(--bg-secondary, #f9fafb);
}

.monitor-condition-summary-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 4px;
}

.monitor-condition-summary-text {
    font-size: 14px;
    line-height: 1.5;
}

/* The Alerts page offline marker (post-v10.0), which TAKES OVER the LAST SEEN cell.

   It was briefly a badge stacked under the device name; it moved here because "offline"
   is a statement about how fresh this row's data is, which is what this column is for —
   and because a device that is not reporting must not be shown a crisp timestamp that
   reads as a current observation.

   NOT monospace, deliberately: .timestamp is monospace because it holds a timestamp, and
   this text is prose standing IN PLACE of one. Muted and italic so it reads as a
   qualifier rather than as data, matching the offline badge and the non-firing chip above
   — the severity badge in the same row still owns all the urgency. cursor:help advertises
   the tooltip, which is where the displaced timestamp and the heartbeat age now live. */
.alert-last-seen-offline {
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    color: #64748b;
    cursor: help;
}

/* ==========================================================================
   Settings > Sync layout
   The tab is a status strip over a two-column split: the peer/token sub-tabs on
   the left, this server's own behaviour in an aside on the right. Below 1100px
   the aside drops under the main column -- the toggles are still reachable, they
   just stop sitting beside the list.
   ========================================================================== */

.sync-status-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 17px 20px;
    margin-bottom: 22px;
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 8px;
}

.sync-status-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sync-status-state::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tac-ink3);
}

.sync-status-state.on::before {
    background: var(--tac-ok);
}

.sync-status-state.off::before {
    background: var(--tac-crit);
}

.sync-status-item {
    color: var(--tac-ink3);
    font-size: 13px;
}

.sync-status-identity {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.sync-status-identity-label {
    color: var(--tac-ink3);
    letter-spacing: 0.06em;
}

.sync-status-identity code {
    font-family: var(--tac-mono);
}

.sync-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 22px;
    align-items: start;
}

.sync-main {
    min-width: 0;
}

.sync-aside .settings-section {
    margin-top: 0;
}

.sync-aside-note {
    margin: 12px 4px 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--tac-ink3);
}

/* Sub-tab count pill, mirroring the "Outgoing peers 2" chip in the mock. */
.sync-subtab-count {
    font-size: 12px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--tac-s2);
    color: var(--tac-ink3);
}

.tab-btn.active .sync-subtab-count {
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
}

/* Panel header: title on the left, the panel's own actions on the right. */
.sync-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sync-panel-header h3 {
    margin: 0;
}

.sync-panel-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Which way the settings travel. The tokens sub-tab renders the mirror image. */
.sync-direction {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 22px 0;
    padding: 15px;
    font-size: 13px;
    color: var(--tac-ink3);
    background: var(--tac-s3);
    border: 1px solid var(--tac-acc-line);
    border-radius: 6px;
}

.sync-direction-node {
    padding: 7px 12px;
    font-weight: 600;
    color: var(--tac-ink);
    background: var(--tac-s1);
    border: 1px solid var(--tac-line);
    border-radius: 5px;
}

.sync-direction-arrow {
    color: var(--tac-acc);
    font-size: 18px;
}

/* One peer = one card. */
.sync-peer-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 20px 0;
    /* --tac-line-soft, not --tac-line: this rule divides rows INSIDE the card. */
    border-top: 1px solid var(--tac-line-soft);
}

.sync-peer-card.disabled {
    opacity: 0.6;
}

.sync-peer-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: 20px;
    color: var(--tac-acc);
    background: var(--tac-acc-tint);
    border: 1px solid var(--tac-acc-line);
    border-radius: 7px;
}

.sync-peer-detail h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 14px;
}

.sync-peer-disabled-tag {
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 500;
    color: var(--tac-ink3);
    background: var(--tac-s2);
    border-radius: 4px;
}

.sync-peer-url {
    margin: 0;
    font-size: 12px;
    color: var(--tac-ink3);
    word-break: break-all;
}

/* ink2, a step DARKER than the url above it. Flattening both to ink3 lost the
   hierarchy the mock draws between the address and what was last done to it. */
.sync-peer-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12px;
    color: var(--tac-ink2);
}

.sync-peer-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.sync-peer-buttons {
    display: flex;
    gap: 4px;
}

.sync-peer-badge {
    padding: 4px 7px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
}

.sync-peer-badge.ok {
    color: var(--tac-ok);
    background: var(--tac-ok-tint);
}

.sync-peer-badge.failed {
    color: var(--tac-crit);
    background: rgba(220, 38, 38, 0.1);
}

/* Server behaviour aside: label + hint on the left, switch on the right. */
/* Padding taken from the mock: .settings 22px, .setting 19px 0, summary 20px 0.
   The shared .settings-section is a flex column with gap:20px, and .form-actions adds
   32px + 24px + a rule above its button. Seven children of gap plus that is ~200px the
   mock does not have, and it is what pushed this column past the fold. Rows carry their
   own border-bottom, so the gap has nothing left to do here. */
.sync-behaviour-card {
    padding: 22px;
    gap: 0;
}

.sync-behaviour-card .section-header {
    margin-bottom: 6px;
    padding-bottom: 0;
    border-bottom: none;
}

.sync-behaviour-card .section-description {
    margin: 0;
}

/* The mock's aside button spans the column rather than sitting right-aligned. */
.sync-behaviour-card .form-actions {
    margin-top: 20px;
    padding-top: 0;
    border-top: none;
}

.sync-behaviour-card .form-actions .btn {
    width: 100%;
}

.sync-toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 19px 0;
    /* inside-a-card divider, same weight as .sync-peer-card's rule */
    border-bottom: 1px solid var(--tac-line-soft);
}

/* The shared .scan-toggle-switch is a fixed 40px; without this the flex row
   squeezes it to a sliver. */
.sync-toggle-row .scan-toggle-switch {
    flex: 0 0 40px;
}

/* The shared switch is hardcoded #10b981 and is also worn by Scans, Monitors and
   Tagging Rules. Recolouring the component is out of scope here, so the accent is
   scoped to this aside -- at the cost of the two greens differing across Settings
   until the switch itself is tokenised. */
.sync-toggle-row .scan-toggle-switch input:checked + .scan-toggle-slider {
    background: var(--tac-acc);
}

.sync-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sync-toggle-text strong {
    font-size: 13px;
}

.sync-advanced > summary {
    padding: 20px 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* The eight settings groups, two per row inside the peer modal. */
.sync-group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    margin-bottom: 8px;
}

@media (max-width: 1100px) {
    .sync-layout {
        grid-template-columns: 1fr;
    }

    .sync-status-identity {
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .sync-peer-card {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .sync-peer-actions {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .sync-group-grid {
        grid-template-columns: 1fr;
    }
}